fix: any

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -13,7 +13,7 @@ import {
 } from '@modrinth/ui'
 import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref } from 'vue'
 
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_version } from '@/helpers/cache'
@@ -46,55 +46,62 @@ debug('metadata load: start', {
 	installStage: instance.value.install_stage,
 })
 
-const [
-	fabric_versions,
-	forge_versions,
-	quilt_versions,
-	neoforge_versions,
-	all_game_versions,
-	loaders,
-] = await Promise.all([
-	get_loader_versions('fabric')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('forge')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('quilt')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('neo')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_game_versions()
-		.then((gameVersions: GameVersionTag[]) => shallowRef(gameVersions))
-		.catch(handleError),
-	get_loaders()
-		.then((value: PlatformTag[]) =>
-			value
-				.filter(
-					(item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla',
-				)
-				.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
-		)
-		.then((loader: PlatformTag[]) => ref(loader))
-		.catch(handleError),
-])
+function getSupportedModpackLoaders() {
+	return get_loaders().then((value: PlatformTag[]) =>
+		value
+			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
+			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+	)
+}
 
-debug('metadata load: done', {
-	hasFabricManifest: !!fabric_versions?.value,
-	hasForgeManifest: !!forge_versions?.value,
-	hasQuiltManifest: !!quilt_versions?.value,
-	hasNeoforgeManifest: !!neoforge_versions?.value,
-	gameVersions: all_game_versions?.value?.length ?? 0,
-	availablePlatforms: loaders?.value?.map((loader) => loader.name) ?? [],
+const fabricVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
+	queryFn: () => get_loader_versions('fabric') as Promise<Manifest>,
+})
+const forgeVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'forge'],
+	queryFn: () => get_loader_versions('forge') as Promise<Manifest>,
+})
+const quiltVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
+	queryFn: () => get_loader_versions('quilt') as Promise<Manifest>,
+})
+const neoforgeVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'neo'],
+	queryFn: () => get_loader_versions('neo') as Promise<Manifest>,
+})
+const gameVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'game-versions'],
+	queryFn: () => get_game_versions() as Promise<GameVersionTag[]>,
+})
+const loadersQuery = useQuery({
+	queryKey: ['instance-settings', 'loaders', 'modpack'],
+	queryFn: getSupportedModpackLoaders,
 })
 
-const { data: modpackInfo } = useQuery({
+const metadataLoading = computed(() =>
+	[
+		fabricVersionsQuery,
+		forgeVersionsQuery,
+		quiltVersionsQuery,
+		neoforgeVersionsQuery,
+		gameVersionsQuery,
+		loadersQuery,
+	].some((query) => query.isLoading.value),
+)
+
+debug('metadata queries configured', {
+	instancePath: instance.value.path,
+	loader: instance.value.loader,
+	gameVersion: instance.value.game_version,
+})
+
+const modpackInfoQuery = useQuery({
 	queryKey: computed(() => ['linkedModpackInfo', instance.value.path]),
 	queryFn: () => get_linked_modpack_info(instance.value.path, 'must_revalidate'),
 	enabled: computed(() => !!instance.value.linked_data?.project_id && !offline),
 })
+const modpackInfo = modpackInfoQuery.data
 
 const repairing = ref(false)
 const reinstalling = ref(false)
@@ -107,17 +114,17 @@ const messages = defineMessages({
 })
 
 function getManifest(loader: string) {
-	const map: Record<string, typeof fabric_versions> = {
-		fabric: fabric_versions,
-		forge: forge_versions,
-		quilt: quilt_versions,
-		neoforge: neoforge_versions,
+	const map: Record<string, Manifest | undefined> = {
+		fabric: fabricVersionsQuery.data.value,
+		forge: forgeVersionsQuery.data.value,
+		quilt: quiltVersionsQuery.data.value,
+		neoforge: neoforgeVersionsQuery.data.value,
 	}
 	const manifest = map[loader]
 	debug('getManifest:', {
 		loader,
-		hasManifest: !!manifest?.value,
-		gameVersions: manifest?.value?.gameVersions?.length ?? 0,
+		hasManifest: !!manifest,
+		gameVersions: manifest?.gameVersions?.length ?? 0,
 	})
 	return manifest
 }
@@ -143,7 +150,7 @@ provideAppBackup({
 
 provideInstallationSettings({
 	closeSettings: closeModal,
-	loading: ref(false),
+	loading: computed(() => metadataLoading.value || modpackInfoQuery.isLoading.value),
 	installationInfo: computed(() => {
 		const rows = [
 			{
@@ -185,14 +192,14 @@ provideInstallationSettings({
 	currentPlatform: computed(() => instance.value.loader),
 	currentGameVersion: computed(() => instance.value.game_version),
 	currentLoaderVersion: computed(() => instance.value.loader_version ?? ''),
-	availablePlatforms: loaders?.value?.map((x) => x.name) ?? [],
+	availablePlatforms: computed(() => loadersQuery.data.value?.map((x) => x.name) ?? []),
 
 	resolveGameVersions(loader, showSnapshots) {
-		const versions = all_game_versions?.value ?? []
+		const versions = gameVersionsQuery.data.value ?? []
 		const filtered = versions.filter((item) => {
 			if (loader === 'vanilla') return true
 			const manifest = getManifest(loader)
-			return !!manifest?.value?.gameVersions?.some((x) => item.version === x.id)
+			return !!manifest?.gameVersions?.some((x) => item.version === x.id)
 		})
 		const result = (
 			showSnapshots ? filtered : filtered.filter((x) => x.version_type === 'release')
@@ -213,12 +220,12 @@ provideInstallationSettings({
 			return []
 		}
 		const manifest = getManifest(loader)
-		if (!manifest?.value) {
+		if (!manifest) {
 			debug('resolveLoaderVersions: no manifest', { loader, gameVersion })
 			return []
 		}
 		if (loader === 'fabric' || loader === 'quilt') {
-			const result = manifest.value.gameVersions[0]?.loaders ?? []
+			const result = manifest.gameVersions[0]?.loaders ?? []
 			debug('resolveLoaderVersions: fabric/quilt result', {
 				loader,
 				gameVersion,
@@ -226,14 +233,13 @@ provideInstallationSettings({
 			})
 			return result
 		}
-		const result =
-			manifest.value.gameVersions?.find((item) => item.id === gameVersion)?.loaders ?? []
+		const result = manifest.gameVersions?.find((item) => item.id === gameVersion)?.loaders ?? []
 		debug('resolveLoaderVersions: result', { loader, gameVersion, count: result.length })
 		return result
 	},
 
 	resolveHasSnapshots(loader) {
-		const versions = all_game_versions?.value ?? []
+		const versions = gameVersionsQuery.data.value ?? []
 		if (loader === 'vanilla') {
 			const result = versions.some((x) => x.version_type !== 'release')
 			debug('resolveHasSnapshots: vanilla', { loader, result })
@@ -241,7 +247,7 @@ provideInstallationSettings({
 		}
 		const manifest = getManifest(loader)
 		const supported = versions.filter(
-			(item) => !!manifest?.value?.gameVersions?.some((x) => item.version === x.id),
+			(item) => !!manifest?.gameVersions?.some((x) => item.version === x.id),
 		)
 		const result = supported.some((x) => x.version_type !== 'release')
 		debug('resolveHasSnapshots:', {

apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue

@@ -16,7 +16,8 @@ import {
 	type TabbedModalTab,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
+import type { PlatformTag } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, nextTick, ref, watch } from 'vue'
 
@@ -26,7 +27,9 @@ import InstallationSettings from '@/components/ui/instance_settings/Installation
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import { get_project_v3 } from '@/helpers/cache'
+import { get_loader_versions } from '@/helpers/metadata'
 import { get_linked_modpack_info } from '@/helpers/profile'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
 import { provideInstanceSettings } from '@/providers/instance-settings'
 
 import type { GameInstance } from '../../../helpers/types'
@@ -45,7 +48,6 @@ const isMinecraftServer = ref(false)
 const handleUnlinked = () => emit('unlinked')
 
 const instanceRef = computed(() => props.instance)
-const queryClient = useQueryClient()
 const tabbedModal = ref<InstanceType<typeof TabbedModal> | null>(null)
 
 function hide() {
@@ -120,13 +122,46 @@ const tabs = computed<TabbedModalTab[]>(() => [
 	},
 ])
 
+function getSupportedModpackLoaders() {
+	return get_loaders().then((value: PlatformTag[]) =>
+		value
+			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
+			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+	)
+}
+
+// Preload
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
+	queryFn: () => get_loader_versions('fabric'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'forge'],
+	queryFn: () => get_loader_versions('forge'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
+	queryFn: () => get_loader_versions('quilt'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'neo'],
+	queryFn: () => get_loader_versions('neo'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'game-versions'],
+	queryFn: get_game_versions,
+})
+useQuery({
+	queryKey: ['instance-settings', 'loaders', 'modpack'],
+	queryFn: getSupportedModpackLoaders,
+})
+useQuery({
+	queryKey: computed(() => ['linkedModpackInfo', props.instance.path]),
+	queryFn: () => get_linked_modpack_info(props.instance.path, 'stale_while_revalidate'),
+	enabled: computed(() => !!props.instance.linked_data?.project_id && !props.offline),
+})
+
 function show(tabIndex?: number) {
-	if (props.instance.linked_data?.project_id) {
-		queryClient.prefetchQuery({
-			queryKey: ['linkedModpackInfo', props.instance.path],
-			queryFn: () => get_linked_modpack_info(props.instance.path, 'stale_while_revalidate'),
-		})
-	}
 	tabbedModal.value?.show()
 	if (tabIndex !== undefined) {
 		nextTick(() => tabbedModal.value?.setTab(tabIndex))

apps/app-frontend/src/pages/instance/Mods.vue

@@ -90,6 +90,7 @@ import {
 	useVIntl,
 	versionChangesGameVersion,
 } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { open } from '@tauri-apps/plugin-dialog'
 import { openUrl } from '@tauri-apps/plugin-opener'
@@ -153,6 +154,7 @@ const { formatMessage } = useVIntl()
 const { handleError, addNotification } = injectNotificationManager()
 const { installingItems } = injectContentInstall()
 const router = useRouter()
+const queryClient = useQueryClient()
 const debug = useDebugLogger('Mods:ContentUpdate')
 
 const props = defineProps<{
@@ -212,6 +214,13 @@ const contentUpdaterModal = ref<InstanceType<typeof ContentUpdaterModal> | null>
 const modpackContentModal = ref<InstanceType<typeof ModpackContentModal> | null>()
 const modpackUpdateConfirmModal = ref<InstanceType<typeof ConfirmModpackUpdateModal> | null>()
 
+const modpackContentQueryKey = computed(() => ['linkedModpackContent', props.instance.path])
+const modpackContentQuery = useQuery({
+	queryKey: modpackContentQueryKey,
+	queryFn: () => get_linked_modpack_content(props.instance.path),
+	enabled: computed(() => !!props.instance?.path && !!props.instance?.linked_data),
+})
+
 // TODO: Extract content operation and updater modal state into composables; this page currently owns file mutations, dependency installs, busy flags, and version selection flow.
 const updatingProject = ref<ContentItem | null>(null)
 const updatingProjectVersions = ref<Labrinth.Versions.v2.Version[]>([])
@@ -740,13 +749,19 @@ async function handleModpackContentBulkToggle(items: ContentItem[]) {
 async function handleModpackContent() {
 	if (!props.instance?.path) return
 
+	if (modpackContentQuery.data.value !== undefined) {
+		modpackContentModal.value?.show(modpackContentQuery.data.value)
+		return
+	}
+
 	modpackContentModal.value?.showLoading()
 
-	const contentItems = await get_linked_modpack_content(props.instance.path).catch(handleError)
+	const { data, error } = await modpackContentQuery.refetch()
 
-	if (contentItems) {
-		modpackContentModal.value?.show(contentItems)
+	if (data !== undefined) {
+		modpackContentModal.value?.show(data)
 	} else {
+		if (error) handleError(error)
 		modpackContentModal.value?.hide()
 	}
 }
@@ -754,9 +769,12 @@ async function handleModpackContent() {
 async function refreshModpackContentItems(cacheBehaviour?: CacheBehaviour) {
 	if (!props.instance?.path) return
 
-	const contentItems = await get_linked_modpack_content(props.instance.path, cacheBehaviour).catch(
-		handleError,
-	)
+	const contentItems = await queryClient
+		.fetchQuery({
+			queryKey: modpackContentQueryKey.value,
+			queryFn: () => get_linked_modpack_content(props.instance.path, cacheBehaviour),
+		})
+		.catch(handleError)
 
 	if (contentItems) {
 		modpackContentModal.value?.setItems(contentItems)

packages/ui/src/components/modal/NewModal.vue

@@ -268,6 +268,7 @@ function hide() {
 		return
 	}
 	props.onHide?.()
+	resetMousePosition()
 	visible.value = false
 	popModal()
 	if (modalStackSize() === 0) {
@@ -309,6 +310,11 @@ function updateMousePosition(event: { clientX: number; clientY: number }) {
 	mouseY.value = event.clientY
 }
 
+function resetMousePosition() {
+	mouseX.value = Math.round(window.innerWidth / 2)
+	mouseY.value = Math.round(window.innerHeight / 2)
+}
+
 onUnmounted(() => {
 	if (open.value) {
 		popModal()
@@ -325,8 +331,6 @@ function handleWindowKeyDown(event: KeyboardEvent) {
 	if (props.closeOnEsc && event.key === 'Escape' && props.closable) {
 		if (!isTopmostModal()) return
 		hide()
-		mouseX.value = Math.round(window.innerWidth / 2)
-		mouseY.value = Math.round(window.innerHeight / 2)
 	}
 }
 

packages/ui/src/components/servers/ServerSettingsModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import { ChevronRightIcon } from '@modrinth/assets'
-import { useQueryClient } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
 import type { TabbedModalTab } from '#ui/components'
@@ -60,6 +60,16 @@ const currentUserRole = ref<string | null>(null)
 
 const isApp = ref(true)
 
+// Preload
+useQuery({
+	queryKey: computed(() => ['content', 'list', 'v1', currentServerId]),
+	queryFn: () =>
+		client.archon.content_v1.getAddons(currentServerId, worldId.value!, {
+			from_modpack: false,
+		}),
+	enabled: computed(() => !!worldId.value),
+})
+
 const serverSettingsTabComponentMap = {
 	general: ServerSettingsGeneralPage,
 	installation: ServerSettingsInstallationPage,
@@ -185,13 +195,6 @@ async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 				queryKey: ['servers', 'properties', 'v1', targetServerId, worldId.value],
 				queryFn: () => client.archon.properties_v1.getProperties(targetServerId, worldId.value!),
 			})
-			queryClient.prefetchQuery({
-				queryKey: ['content', 'list', 'v1', targetServerId],
-				queryFn: () =>
-					client.archon.content_v1.getAddons(targetServerId, worldId.value!, {
-						from_modpack: false,
-					}),
-			})
 			queryClient.prefetchQuery({
 				queryKey: ['servers', 'startup', 'v1', targetServerId, worldId.value],
 				queryFn: () => client.archon.options_v1.getStartup(targetServerId, worldId.value!),

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

@@ -95,6 +95,7 @@ export interface ModpackContentModalState {
 
 const modal = ref<InstanceType<typeof NewModal>>()
 const scrollContainer = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
 const items = ref<ContentItem[]>([])
 const disabledIds = ref(new Set<string>())
 const loading = ref(false)
@@ -318,6 +319,7 @@ function show(contentItems: ContentItem[]) {
 	selectedIds.value = []
 	disabledIds.value = new Set()
 	loading.value = false
+	showModal()
 }
 
 function showLoading() {
@@ -326,14 +328,22 @@ function showLoading() {
 	selectedFilters.value = []
 	selectedIds.value = []
 	loading.value = true
-	modal.value?.show()
+	showModal()
+}
+
+function showModal() {
+	if (isOpen.value || !modal.value) return
+	isOpen.value = true
+	modal.value.show()
 }
 
 function hide() {
+	isOpen.value = false
 	modal.value?.hide()
 }
 
 function handleHide() {
+	isOpen.value = false
 	emit('hide')
 }
 
@@ -352,7 +362,7 @@ async function restore(state: ModpackContentModalState) {
 	searchQuery.value = state.searchQuery
 	selectedFilters.value = state.selectedFilters
 	loading.value = false
-	modal.value?.show()
+	showModal()
 	await nextTick()
 	if (scrollContainer.value) {
 		scrollContainer.value.scrollTop = state.scrollTop

packages/ui/src/layouts/shared/installation-settings/layout.vue

@@ -43,6 +43,9 @@ import type { LoaderVersionEntry } from './types'
 const { formatMessage } = useVIntl()
 const ctx = injectInstallationSettings()
 const debug = useDebugLogger('InstallationSettingsLayout')
+const availablePlatforms = computed(() =>
+	Array.isArray(ctx.availablePlatforms) ? ctx.availablePlatforms : ctx.availablePlatforms.value,
+)
 
 const confirmLeaveModal = ref<InstanceType<typeof ConfirmLeaveModal>>()
 const repairModal = ref<InstanceType<typeof ConfirmRepairModal>>()
@@ -177,10 +180,10 @@ if (typeof window !== 'undefined') {
 
 const disabledPlatforms = computed(() => {
 	if (!ctx.lockPlatform || ctx.currentPlatform.value === 'vanilla') return []
-	return ctx.availablePlatforms.filter((p) => p !== ctx.currentPlatform.value)
+	return availablePlatforms.value.filter((p) => p !== ctx.currentPlatform.value)
 })
 const platformDisabledItems = computed(() =>
-	ctx.isBusy.value ? ctx.availablePlatforms : disabledPlatforms.value,
+	ctx.isBusy.value ? availablePlatforms.value : disabledPlatforms.value,
 )
 const platformDisabledTooltip = computed(() =>
 	ctx.isBusy.value
@@ -769,7 +772,7 @@ const messages = defineMessages({
 							</span>
 							<Chips
 								v-model="form.selectedPlatform.value"
-								:items="ctx.availablePlatforms"
+								:items="availablePlatforms"
 								:format-label="formatLoaderLabel"
 								:capitalize="false"
 								:disabled-items="platformDisabledItems"

packages/ui/src/layouts/shared/installation-settings/providers/installation-settings.ts

@@ -24,7 +24,7 @@ export interface InstallationSettingsContext {
 	currentGameVersion: ComputedRef<string>
 	currentLoaderVersion: ComputedRef<string>
 
-	availablePlatforms: string[]
+	availablePlatforms: string[] | ComputedRef<string[]>
 
 	resolveGameVersions: (loader: string, showSnapshots: boolean) => GameVersionOption[]
 	resolveLoaderVersions: (loader: string, gameVersion: string) => LoaderVersionEntry[]

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

@@ -160,7 +160,7 @@ const modpackContentQuery = useQuery({
 		client.archon.content_v1.getAddons(serverId, worldId.value!, {
 			from_modpack: true,
 		}),
-	enabled: computed(() => isModpackContentModalOpen.value && worldId.value !== null),
+	enabled: computed(() => worldId.value !== null && !!contentQuery.data.value?.modpack),
 	staleTime: 0,
 })
 
@@ -934,6 +934,14 @@ function addonToContentItem(addon: AddonWithUiState): ContentItem {
 
 async function handleViewModpackContent() {
 	isModpackContentModalOpen.value = true
+
+	if (modpackContentQuery.data.value) {
+		modpackAddons.value = modpackContentQuery.data.value.addons ?? []
+		modpackContentModal.value?.show(modpackAddons.value.map(addonToContentItem))
+		void modpackContentQuery.refetch()
+		return
+	}
+
 	modpackContentModal.value?.showLoading()
 	try {
 		const { data } = await modpackContentQuery.refetch()