Some server stuff

apps/app-frontend/src/components/ui/SearchCard.vue

@@ -5,7 +5,7 @@
 			() => {
 				emit('open')
 				$router.push({
-					path: `/project/ipxQs0xE`,
+					path: `/project/${project.project_id ?? project.id}`,
 					query: { i: props.instance ? props.instance.path : undefined },
 				})
 			}

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

@@ -1,6 +1,6 @@
 <template>
 	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">
-		<div v-if="project" class="flex flex-col gap-6 max-w-[500px]">
+		<div v-if="requiredContentProject" class="flex flex-col gap-6 max-w-[500px]">
 			<Admonition type="info" :header="formatMessage(messages.contentRequired)">
 				{{ formatMessage(messages.serverRequiresMods) }}
 			</Admonition>
@@ -26,11 +26,15 @@
 					formatMessage(messages.requiredModpack)
 				}}</span>
 				<div class="flex items-center gap-3 rounded-xl bg-surface-2 p-3">
-					<Avatar :src="project.icon_url" :alt="project.title" size="48px" />
+					<Avatar
+						:src="requiredContentProject.icon_url"
+						:alt="requiredContentProject.title"
+						size="48px"
+					/>
 					<div class="flex flex-col gap-0.5">
-						<span class="font-semibold text-contrast">{{ project.title }}</span>
+						<span class="font-semibold text-contrast">{{ requiredContentProject.title }}</span>
 						<span class="text-sm text-secondary">
-							{{ loaderDisplay }} {{ project.game_versions?.[0] }}
+							{{ loaderDisplay }} {{ requiredContentProject.game_versions?.[0] }}
 							<template v-if="modCount">
 								· {{ formatMessage(messages.modCount, { count: modCount }) }}
 							</template>
@@ -60,7 +64,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
 import { DownloadIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
@@ -73,37 +76,30 @@ import {
 	NewModal,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
-import { get_organization, get_team, get_version } from '@/helpers/cache.js'
-import { install } from '@/store/install.js'
+import { get_organization, get_project, get_team, get_version } from '@/helpers/cache.js'
+import { installServerProject } from '@/store/install.js'
+import type { Labrinth } from '@modrinth/api-client'
 
 const modal = ref<InstanceType<typeof NewModal>>()
-const project = ref<Labrinth.Projects.v2.Project | null>(null)
+const modpackVersionId = ref<string | null>(null)
+const modpackVersion = ref<any>(null)
+const project = ref<any>(null)
+const requiredContentProject = ref<any>(null)
+const organization = ref<any>(null)
+const teamMembers = ref<any[]>([])
 const onInstallComplete = ref<() => void>(() => {})
 const { formatMessage } = useVIntl()
 
-const { data: organization } = useQuery({
-	queryKey: computed(() => ['organization', project.value?.organization]),
-	queryFn: () => get_organization(project.value!.organization!, 'must_revalidate'),
-	enabled: computed(() => !!project.value?.organization),
-})
-
-const { data: teamMembers } = useQuery({
-	queryKey: computed(() => ['team', project.value?.team]),
-	queryFn: () => get_team(project.value!.team, 'must_revalidate'),
-	enabled: computed(() => !!project.value?.team && !project.value?.organization),
-})
-
 const sharedBy = computed(() => {
 	if (organization.value) {
 		return {
 			name: organization.value.name,
 			icon_url: organization.value.icon_url,
 		}
 	}
-	if (teamMembers.value) {
+	if (teamMembers.value?.length) {
 		const owner = teamMembers.value.find((member: { is_owner: boolean }) => member.is_owner)
 		if (owner) {
 			return {
@@ -116,37 +112,58 @@ const sharedBy = computed(() => {
 })
 
 const loaderDisplay = computed(() => {
-	const loader = project.value?.loaders?.[0]
+	const loader = requiredContentProject.value?.loaders?.[0]
 	if (!loader) return ''
 	return formatLoader(formatMessage, loader)
 })
 
-// Fetch the most recent version to get mod count from dependencies
-const latestVersionId = computed(() => project.value?.versions?.[0] ?? null)
-const { data: latestVersion } = useQuery({
-	queryKey: computed(() => ['version', latestVersionId.value]),
-	queryFn: () => get_version(latestVersionId.value, 'must_revalidate'),
-	enabled: computed(() => !!latestVersionId.value),
-})
-const modCount = computed(() => latestVersion.value?.dependencies?.length)
+const modCount = computed(() => modpackVersion.value?.dependencies?.length)
+
+async function fetchData(versionId: string) {
+	// cache is making version null for some reason so bypassing for now
+	modpackVersion.value = await get_version(versionId, 'bypass')
+
+	if (modpackVersion.value?.project_id) {
+		requiredContentProject.value = await get_project(modpackVersion.value.project_id, 'bypass')
+	}
+
+	if (project.value?.organization) {
+		organization.value = await get_organization(project.value.organization, 'bypass')
+	} else if (project.value?.team_id) {
+		teamMembers.value = await get_team(project.value.team_id, 'bypass')
+	}
+}
 
 async function handleAccept() {
 	hide()
 	try {
-		await install(project.value!.id, null, null, 'ProjectPageInstallToPlayModal')
+		await installServerProject(project.value.id)
 		onInstallComplete.value()
 	} catch (error) {
-		console.error('Failed to install project from InstallToPlayModal:', error)
+		console.error('Failed to install server project from InstallToPlayModal:', error)
 	}
 }
 
 function handleDecline() {
 	hide()
 }
 
-function show(projectVal: Labrinth.Projects.v2.Project, callback: () => void = () => {}, e?: MouseEvent) {
+async function show(
+	projectVal: Labrinth.Projects.v3.Project,
+	modpackVersionIdVal: string | null = null,
+	callback: () => void = () => {},
+	e?: MouseEvent,
+) {
 	project.value = projectVal
+	modpackVersionId.value = modpackVersionIdVal
+	modpackVersion.value = null
+	requiredContentProject.value = null
+	organization.value = null
+	teamMembers.value = []
 	onInstallComplete.value = callback
+
+	if (modpackVersionIdVal) await fetchData(modpackVersionIdVal)
+
 	modal.value?.show(e)
 }
 

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

@@ -117,7 +117,7 @@ import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
 import { computed, ref, watch } from 'vue'
 
-import { get_project, get_project_many, get_version_many } from '@/helpers/cache.js'
+import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
 import { update_managed_modrinth_version } from '@/helpers/profile'
 import type { GameInstance } from '@/helpers/types'
 
@@ -267,7 +267,16 @@ async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[
 	if (!inst.linked_data) return null
 
 	try {
-		const project = await get_project(inst.linked_data.project_id, 'must_revalidate')
+		// For server projects, linked_data.project_id is the server project but
+		// linked_data.version_id references a content modpack version from a different project.
+		// Detect this by comparing the version's project_id with linked_data.project_id.
+		let projectId = inst.linked_data.project_id
+		const linkedVersion = await get_version(inst.linked_data.version_id, 'must_revalidate')
+		if (linkedVersion && linkedVersion.project_id !== projectId) {
+			projectId = linkedVersion.project_id
+		}
+
+		const project = await get_project(projectId, 'must_revalidate')
 		if (!project || !project.versions || project.versions.length === 0) {
 			return null
 		}
@@ -332,15 +341,22 @@ async function handleUpdate() {
 
 function handleReport() {
 	if (instance.value?.linked_data?.project_id) {
-		openUrl(`https://modrinth.com/report?item=project&itemID=${instance.value.linked_data.project_id}`)
+		openUrl(
+			`https://modrinth.com/report?item=project&itemID=${instance.value.linked_data.project_id}`,
+		)
 	}
 }
 
 function handleDecline() {
 	hide()
 }
 
-function show(instanceVal: GameInstance, activeVersionIdVal: string | null = null, callback: () => void = () => {}, e?: MouseEvent) {
+function show(
+	instanceVal: GameInstance,
+	activeVersionIdVal: string | null = null,
+	callback: () => void = () => {},
+	e?: MouseEvent,
+) {
 	instance.value = instanceVal
 	activeVersionId.value = activeVersionIdVal
 	onUpdateComplete.value = callback
@@ -400,7 +416,9 @@ const diffTypeMessages = defineMessages({
 
 const hasUpdate = computed(() => {
 	if (!instance.value?.linked_data) return false
-	return latestVersionId.value != null && latestVersionId.value !== instance.value.linked_data.version_id
+	return (
+		latestVersionId.value != null && latestVersionId.value !== instance.value.linked_data.version_id
+	)
 })
 
 defineExpose({ show, hide, hasUpdate })