fixes: post content tab release issues (#5566)

* fix: migrate old cache entries for CachedFileUpdate

* feat: toggle goofy fix + switch version reimpl in app and panel

* fix: multimc detection

* fix: add tie breaker for sorting

* feat: toggle hover state

* fix: lint

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

@@ -10,7 +10,11 @@
 			<span class="text-lg font-extrabold text-contrast">{{
 				header ??
 				formatMessage(
-					isModpack.value ? messages.switchModpackVersionHeader : messages.updateVersionHeader,
+					isModpack.value
+						? messages.switchModpackVersionHeader
+						: switchMode
+							? messages.switchVersionHeader
+							: messages.updateVersionHeader,
 				)
 			}}</span>
 		</template>
@@ -213,9 +217,16 @@
 					>
 						<DownloadIcon />
 						{{
-							formatMessage(isDowngrade ? messages.downgradeToVersion : messages.updateToVersion, {
-								version: selectedVersion?.version_number ?? '...',
-							})
+							formatMessage(
+								isDowngrade
+									? messages.downgradeToVersion
+									: switchMode
+										? messages.switchToVersion
+										: messages.updateToVersion,
+								{
+									version: selectedVersion?.version_number ?? '...',
+								},
+							)
 						}}
 					</button>
 				</ButtonStyled>
@@ -303,6 +314,14 @@ const messages = defineMessages({
 		id: 'instances.updater-modal.update-to',
 		defaultMessage: 'Update to {version}',
 	},
+	switchVersionHeader: {
+		id: 'instances.updater-modal.header-switch',
+		defaultMessage: 'Switch version',
+	},
+	switchToVersion: {
+		id: 'instances.updater-modal.switch-to',
+		defaultMessage: 'Switch to {version}',
+	},
 	currentBadge: {
 		id: 'instances.updater-modal.badge.current',
 		defaultMessage: 'Current',
@@ -361,6 +380,7 @@ const emit = defineEmits<{
 const modal = ref<InstanceType<typeof NewModal>>()
 const searchQuery = ref('')
 const hideIncompatibleState = ref(true)
+const switchMode = ref(false)
 const selectedVersion = ref<Labrinth.Versions.v2.Version | null>(null)
 // Store the initial version ID to select when versions become available
 const pendingInitialVersionId = ref<string | undefined>(undefined)
@@ -558,9 +578,10 @@ function handleCancel() {
 	hide()
 }
 
-function show(initialVersionId?: string) {
+function show(initialVersionId?: string, options?: { switchMode?: boolean }) {
 	searchQuery.value = ''
 	hideIncompatibleState.value = true
+	switchMode.value = options?.switchMode ?? false
 
 	debug('show() called', {
 		initialVersionId,

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

@@ -186,25 +186,31 @@ const sortedItems = computed(() => {
 			return items.sort((a, b) => {
 				const nameA = a.project?.title ?? a.file_name
 				const nameB = b.project?.title ?? b.file_name
-				return nameB.toLowerCase().localeCompare(nameA.toLowerCase())
+				return (
+					nameB.toLowerCase().localeCompare(nameA.toLowerCase()) ||
+					a.file_name.localeCompare(b.file_name)
+				)
 			})
 		case 'date-added-newest':
 			return items.sort((a, b) => {
 				const dateA = a.date_added ?? ''
 				const dateB = b.date_added ?? ''
-				return dateB.localeCompare(dateA)
+				return dateB.localeCompare(dateA) || a.file_name.localeCompare(b.file_name)
 			})
 		case 'date-added-oldest':
 			return items.sort((a, b) => {
 				const dateA = a.date_added ?? ''
 				const dateB = b.date_added ?? ''
-				return dateA.localeCompare(dateB)
+				return dateA.localeCompare(dateB) || a.file_name.localeCompare(b.file_name)
 			})
 		default:
 			return items.sort((a, b) => {
 				const nameA = a.project?.title ?? a.file_name
 				const nameB = b.project?.title ?? b.file_name
-				return nameA.toLowerCase().localeCompare(nameB.toLowerCase())
+				return (
+					nameA.toLowerCase().localeCompare(nameB.toLowerCase()) ||
+					a.file_name.localeCompare(b.file_name)
+				)
 			})
 	}
 })

packages/ui/src/layouts/wrapped/hosting/manage/content.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Archon, Labrinth } from '@modrinth/api-client'
+import { ArrowLeftRightIcon, ClipboardCopyIcon } from '@modrinth/assets'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
@@ -77,6 +78,14 @@ const messages = defineMessages({
 		id: 'hosting.content.failed-to-bulk-update',
 		defaultMessage: 'Failed to update content',
 	},
+	switchVersion: {
+		id: 'hosting.content.switch-version',
+		defaultMessage: 'Switch version',
+	},
+	copyLink: {
+		id: 'hosting.content.copy-link',
+		defaultMessage: 'Copy link',
+	},
 })
 
 const props = withDefaults(
@@ -628,6 +637,38 @@ async function handleUpdateItem(fileNameKey: string) {
 	}
 }
 
+async function handleSwitchVersion(item: ContentItem) {
+	if (!item.project?.id || !item.version?.id) return
+
+	updatingModpack.value = false
+	updatingProject.value = item
+	updatingProjectVersions.value = []
+	loadingVersions.value = true
+	loadingChangelog.value = false
+
+	await nextTick()
+
+	contentUpdaterModal.value?.show(item.version.id, { switchMode: true })
+
+	try {
+		const versions = await client.labrinth.versions_v2.getProjectVersions(item.project.id, {
+			include_changelog: false,
+		})
+		versions.sort(
+			(a, b) => new Date(b.date_published).getTime() - new Date(a.date_published).getTime(),
+		)
+		updatingProjectVersions.value = versions
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToLoadVersions),
+			text: err instanceof Error ? err.message : undefined,
+		})
+	} finally {
+		loadingVersions.value = false
+	}
+}
+
 async function handleModpackUpdate() {
 	const mp = contentQuery.data.value?.modpack
 	if (!mp?.spec.project_id) return
@@ -780,6 +821,32 @@ function handleModpackUpdateCancel() {
 	pendingModpackUpdateVersion.value = null
 }
 
+function getOverflowOptions(item: ContentItem) {
+	const options: { id: string; icon?: typeof ArrowLeftRightIcon; action: () => void }[] = []
+
+	if (item.project?.id && item.version?.id && !item.has_update) {
+		options.push({
+			id: formatMessage(messages.switchVersion),
+			icon: ArrowLeftRightIcon,
+			action: () => handleSwitchVersion(item),
+		})
+	}
+
+	if (item.project?.slug) {
+		options.push({
+			id: formatMessage(messages.copyLink),
+			icon: ClipboardCopyIcon,
+			action: async () => {
+				await navigator.clipboard.writeText(
+					`https://modrinth.com/${item.project_type}/${item.project?.slug}`,
+				)
+			},
+		})
+	}
+
+	return options
+}
+
 provideContentManager({
 	items: contentItems,
 	loading: computed(() => contentQuery.isLoading.value),
@@ -827,6 +894,7 @@ provideContentManager({
 	viewModpackContent: handleViewModpackContent,
 	unlinkModpack: handleModpackUnlink,
 	openSettings: () => router.push(`/hosting/manage/${serverId}/options/loader`),
+	getOverflowOptions,
 	mapToTableItem: (item) => {
 		const projectType = item.project_type ?? type.value
 		return {