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/components/base/OverflowMenu.vue

@@ -46,7 +46,10 @@
 						}
 					"
 				>
-					<template v-if="!$slots[option.id]">{{ option.id }}</template>
+					<template v-if="!$slots[option.id]">
+						<component :is="option.icon" v-if="option.icon" class="size-5" />
+						{{ option.id }}
+					</template>
 					<slot :name="option.id"></slot>
 				</Button>
 			</template>
@@ -55,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
+import { type Component, type Ref, ref } from 'vue'
 
 import Button from './Button.vue'
 import PopoutMenu from './PopoutMenu.vue'
@@ -70,6 +73,7 @@ interface Divider extends BaseOption {
 
 interface Item extends BaseOption {
 	id: string
+	icon?: Component
 	action?: (event?: MouseEvent) => void
 	link?: string
 	external?: boolean

packages/ui/src/components/base/Toggle.vue

@@ -5,23 +5,28 @@
 		role="switch"
 		:aria-checked="modelValue"
 		:disabled="disabled"
-		class="relative inline-flex shrink-0 rounded-full m-0 transition-all duration-200 cursor-pointer border-none"
+		class="group inline-flex shrink-0 items-center rounded-full m-0 p-1 transition-all duration-200 cursor-pointer border-none"
 		:class="[
-			small ? 'h-5 !w-[40px]' : 'h-8 !w-[60px]',
+			small ? 'h-5 !w-[40px]' : 'h-6 !w-[48px]',
 			modelValue ? 'bg-brand' : 'bg-button-bg',
-			disabled ? 'opacity-50 cursor-not-allowed' : 'btn-wrapper',
+			disabled ? 'opacity-50 cursor-not-allowed' : '',
 		]"
 		@click="toggle"
 	>
 		<span
-			class="absolute rounded-full transition-all duration-200"
+			class="rounded-full transition-all duration-200"
 			:class="[
-				small ? 'w-4 h-4 top-0.5 left-0.5' : 'w-[24px] h-[24px] top-1 left-1',
+				small ? 'w-3 h-3' : 'w-4 h-4',
 				modelValue
 					? small
-						? 'translate-x-5 bg-black/90'
-						: 'translate-x-7 bg-black/90'
+						? 'translate-x-[20px] bg-black/90'
+						: 'translate-x-[24px] bg-black/90'
 					: 'bg-gray',
+				disabled
+					? ''
+					: small
+						? 'group-hover:w-[14px] group-hover:h-[14px] group-hover:m-[-1px] group-active:w-[10px] group-active:h-[10px] group-active:m-[1px]'
+						: 'group-hover:w-[18px] group-hover:h-[18px] group-hover:m-[-1px] group-active:w-[14px] group-active:h-[14px] group-active:m-[1px]',
 			]"
 		/>
 	</button>

packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue

@@ -55,7 +55,10 @@
 								@focus="selectedIndex = index"
 								@mouseover="handleMouseOver(index)"
 							>
-								<slot :name="option.id">{{ option.id }}</slot>
+								<slot :name="option.id">
+									<component :is="option.icon" v-if="option.icon" class="size-5" />
+									{{ option.id }}
+								</slot>
 							</button>
 							<AutoLink
 								v-else-if="typeof option.action === 'string'"
@@ -72,10 +75,16 @@
 								@focus="selectedIndex = index"
 								@mouseover="handleMouseOver(index)"
 							>
-								<slot :name="option.id">{{ option.id }}</slot>
+								<slot :name="option.id">
+									<component :is="option.icon" v-if="option.icon" class="size-5" />
+									{{ option.id }}
+								</slot>
 							</AutoLink>
 							<span v-else>
-								<slot :name="option.id">{{ option.id }}</slot>
+								<slot :name="option.id">
+									<component :is="option.icon" v-if="option.icon" class="size-5" />
+									{{ option.id }}
+								</slot>
 							</span>
 						</ButtonStyled>
 					</template>
@@ -88,10 +97,11 @@
 <script setup lang="ts">
 import { AutoLink, ButtonStyled } from '@modrinth/ui'
 import { onClickOutside, useElementHover } from '@vueuse/core'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { type Component, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
 interface Option {
 	id: string
+	icon?: Component
 	action?: (() => void) | string
 	shown?: boolean
 	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'

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 {

packages/ui/src/locales/en-US/index.json

@@ -515,6 +515,9 @@
   "header.category.resolutions": {
     "defaultMessage": "Resolution"
   },
+  "hosting.content.copy-link": {
+    "defaultMessage": "Copy link"
+  },
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Failed to delete content"
   },
@@ -548,6 +551,9 @@
   "hosting.content.failed-to-upload": {
     "defaultMessage": "Failed to upload file"
   },
+  "hosting.content.switch-version": {
+    "defaultMessage": "Switch version"
+  },
   "hosting.specs.burst": {
     "defaultMessage": "Bursts up to {cpus} CPUs"
   },
@@ -818,6 +824,9 @@
   "instances.updater-modal.header-modpack": {
     "defaultMessage": "Switch modpack version"
   },
+  "instances.updater-modal.header-switch": {
+    "defaultMessage": "Switch version"
+  },
   "instances.updater-modal.hide-incompatible": {
     "defaultMessage": "Hide incompatible"
   },
@@ -842,6 +851,9 @@
   "instances.updater-modal.show-incompatible": {
     "defaultMessage": "Show incompatible"
   },
+  "instances.updater-modal.switch-to": {
+    "defaultMessage": "Switch to {version}"
+  },
   "instances.updater-modal.update-to": {
     "defaultMessage": "Update to {version}"
   },