feat: move switch version inline like update btn for content tab (#5631)

* fix: switch version inline same as update btn

* fix: lint

packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+	ArrowLeftRightIcon,
 	DownloadIcon,
 	MoreVerticalIcon,
 	SpinnerIcon,
@@ -67,11 +68,15 @@ const emit = defineEmits<{
 	'update:enabled': [value: boolean]
 	delete: [event: MouseEvent]
 	update: []
+	switchVersion: []
 }>()
 
 const instance = getCurrentInstance()
 const hasDeleteListener = computed(() => typeof instance?.vnode.props?.onDelete === 'function')
 const hasUpdateListener = computed(() => typeof instance?.vnode.props?.onUpdate === 'function')
+const hasSwitchVersionListener = computed(
+	() => typeof instance?.vnode.props?.onSwitchVersion === 'function',
+)
 
 const versionNumberRef = ref<HTMLElement | null>(null)
 const fileNameRef = ref<HTMLElement | null>(null)
@@ -232,8 +237,11 @@ const deleteHovered = ref(false)
 		>
 			<slot name="additionalButtonsLeft" />
 
-			<!-- Fixed width container to reserve space for update button -->
-			<div v-if="hasUpdateListener" class="flex w-8 items-center justify-center">
+			<!-- Fixed width container to reserve space for update/switch version button -->
+			<div
+				v-if="hasUpdateListener || hasSwitchVersionListener"
+				class="flex w-8 items-center justify-center"
+			>
 				<ButtonStyled
 					v-if="hasUpdate"
 					circular
@@ -250,6 +258,15 @@ const deleteHovered = ref(false)
 						<DownloadIcon class="size-5" />
 					</button>
 				</ButtonStyled>
+				<ButtonStyled v-else-if="hasSwitchVersionListener && version" circular type="transparent">
+					<button
+						v-tooltip="formatMessage(commonMessages.switchVersionButton)"
+						:disabled="disabled"
+						@click="emit('switchVersion')"
+					>
+						<ArrowLeftRightIcon class="size-5" />
+					</button>
+				</ButtonStyled>
 			</div>
 
 			<Toggle

packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue

@@ -49,6 +49,7 @@ const emit = defineEmits<{
 	'update:enabled': [id: string, value: boolean]
 	delete: [id: string, event: MouseEvent]
 	update: [id: string]
+	switchVersion: [id: string]
 	sort: [column: ContentCardTableSortColumn, direction: ContentCardTableSortDirection]
 }>()
 
@@ -56,6 +57,9 @@ const emit = defineEmits<{
 const instance = getCurrentInstance()
 const hasDeleteListener = computed(() => typeof instance?.vnode.props?.onDelete === 'function')
 const hasUpdateListener = computed(() => typeof instance?.vnode.props?.onUpdate === 'function')
+const hasSwitchVersionListener = computed(
+	() => typeof instance?.vnode.props?.onSwitchVersion === 'function',
+)
 const hasEnabledListener = computed(
 	() => typeof instance?.vnode.props?.['onUpdate:enabled'] === 'function',
 )
@@ -65,6 +69,7 @@ const hasAnyActions = computed(() => {
 	const hasListeners =
 		(hasDeleteListener.value && !props.hideDelete) ||
 		hasUpdateListener.value ||
+		hasSwitchVersionListener.value ||
 		hasEnabledListener.value
 
 	// Check if any items have overflow options or updates
@@ -294,6 +299,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 					@update:enabled="(val) => emit('update:enabled', item.id, val)"
 					@delete="(e: MouseEvent) => emit('delete', item.id, e)"
 					@update="emit('update', item.id)"
+					@switch-version="emit('switchVersion', item.id)"
 				>
 					<template #additionalButtonsLeft>
 						<slot name="itemButtonsLeft" :item="item" :index="visibleRange.start + idx" />
@@ -342,6 +348,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 				@update:enabled="(val) => emit('update:enabled', item.id, val)"
 				@delete="(e: MouseEvent) => emit('delete', item.id, e)"
 				@update="emit('update', item.id)"
+				@switch-version="emit('switchVersion', item.id)"
 			>
 				<template #additionalButtonsLeft>
 					<slot name="itemButtonsLeft" :item="item" :index="index" />

packages/ui/src/layouts/shared/content-tab/layout.vue

@@ -407,6 +407,13 @@ function handleUpdateById(id: string) {
 	ctx.updateItem?.(id)
 }
 
+function handleSwitchVersionById(id: string) {
+	const item = ctx.items.value.find((i) => i.id === id)
+	if (item) {
+		ctx.switchVersion?.(item)
+	}
+}
+
 // Bulk updating
 const confirmBulkUpdateModal = ref<InstanceType<typeof ConfirmBulkUpdateModal>>()
 const pendingBulkUpdateItems = ref<ContentItem[]>([])
@@ -705,6 +712,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 						@update:enabled="handleToggleEnabledById"
 						@delete="handleDeleteById"
 						@update="handleUpdateById"
+						@switch-version="handleSwitchVersionById"
 					>
 						<template #empty>
 							<span>{{ formatMessage(messages.noContentFound) }}</span>

packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts

@@ -78,6 +78,9 @@ export interface ContentManagerContext {
 	unlinkModpack?: () => void
 	openSettings?: () => void
 
+	// Switch version (optional)
+	switchVersion?: (item: ContentItem) => void
+
 	// Per-item overflow menu (optional)
 	getOverflowOptions?: (item: ContentItem) => OverflowMenuOption[]