fix: qa

apps/app-frontend/src/pages/Browse.vue

@@ -970,6 +970,14 @@ async function search(requestParams: string) {
 		}
 	}
 
+	for (const hit of rawResults.result.hits) {
+		for (const identifier of [hit.project_id, hit.slug]) {
+			if (identifier) {
+				queryClient.setQueryData(['projects', 'summary', identifier], hit)
+			}
+		}
+	}
+
 	if (isServer) {
 		const hits = rawResults.result.hits ?? []
 		updateServerHits(hits)

apps/app-frontend/src/pages/hosting/manage/Index.vue

@@ -83,20 +83,34 @@ const serverId = computed(() => {
 	return Array.isArray(rawId) ? (rawId[0] ?? '') : (rawId ?? '')
 })
 
+function getCachedServerName(id: string): string | undefined {
+	return queryClient
+		.getQueryData<Archon.Servers.v0.ServerGetResponse>(['servers'])
+		?.servers.find((server) => server.server_id === id)?.name
+}
+
 const { data: serverData } = useQuery({
 	queryKey: computed(() => ['servers', 'detail', serverId.value]),
-	queryFn: () => null as unknown as Archon.Servers.v0.Server,
-	enabled: false,
+	queryFn: () => client.archon.servers_v0.get(serverId.value),
+	enabled: computed(() => Boolean(serverId.value)),
+	placeholderData: () =>
+		queryClient
+			.getQueryData<Archon.Servers.v0.ServerGetResponse>(['servers'])
+			?.servers.find((server) => server.server_id === serverId.value),
+	staleTime: 30_000,
 })
 
 const breadcrumbServerId = ref(serverId.value)
-const breadcrumbLabel = ref(formatMessage(commonMessages.loadingLabel))
+const breadcrumbLabel = ref(
+	getCachedServerName(serverId.value) ?? formatMessage(commonMessages.loadingLabel),
+)
 watch(
 	serverId,
 	(value) => {
 		if (!route.path.startsWith('/hosting/manage/') || route.name === 'Servers') return
 		breadcrumbServerId.value = value
-		breadcrumbLabel.value = formatMessage(commonMessages.loadingLabel)
+		breadcrumbLabel.value =
+			getCachedServerName(value) ?? formatMessage(commonMessages.loadingLabel)
 	},
 	{ flush: 'sync' },
 )
@@ -117,18 +131,6 @@ const serverBreadcrumb = useBreadcrumb({
 })
 provideBreadcrumbParent(serverBreadcrumb)
 
-if (serverId.value) {
-	try {
-		await queryClient.ensureQueryData({
-			queryKey: ['servers', 'detail', serverId.value],
-			queryFn: () => client.archon.servers_v0.get(serverId.value)!,
-			staleTime: 30_000,
-		})
-	} catch {
-		// Let mounted layouts' useQuery surface errors; do not fail route setup.
-	}
-}
-
 watch(
 	() => auth.user.value,
 	(user, previousUser) => {

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

@@ -197,6 +197,7 @@ import { handleSevereError } from '@/store/error.js'
 import {
 	provideBreadcrumbParent,
 	useBreadcrumb,
+	useRootBreadcrumb,
 } from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/state'
 
@@ -226,7 +227,7 @@ window.addEventListener('online', () => {
 })
 
 const instance = ref<GameInstance>()
-const instanceBreadcrumb = useBreadcrumb({
+const instanceBreadcrumb = useRootBreadcrumb({
 	slot: 'instance',
 	id: () => `instance:${String(displayedInstanceRoute.value.params.id ?? '')}`,
 	label: () =>

apps/app-frontend/src/pages/project/Index.vue

@@ -343,9 +343,20 @@ const { installingServerProjects, playServerProject, showAddServerToInstanceModa
 	injectServerInstall()
 const installing = ref(false)
 const data = shallowRef(null)
-const projectBreadcrumbLabel = ref(
-	String(route.params.id ?? formatMessage(commonMessages.loadingLabel)),
-)
+
+function getProjectBreadcrumbLabel(projectId) {
+	const identifier = Array.isArray(projectId) ? projectId[0] : projectId
+	if (typeof identifier !== 'string' || !identifier) {
+		return formatMessage(commonMessages.loadingLabel)
+	}
+
+	return (
+		queryClient.getQueryData(['projects', 'summary', identifier])?.name ??
+		formatMessage(commonMessages.loadingLabel)
+	)
+}
+
+const projectBreadcrumbLabel = ref(getProjectBreadcrumbLabel(route.params.id))
 const projectBreadcrumb = useBreadcrumb({
 	slot: 'project',
 	id: () => `project:${String(displayedProjectRoute.value.params.id ?? '')}`,
@@ -634,9 +645,7 @@ function reportProject() {
 }
 
 async function fetchProjectData() {
-	projectBreadcrumbLabel.value = String(
-		route.params.id ?? formatMessage(commonMessages.loadingLabel),
-	)
+	projectBreadcrumbLabel.value = getProjectBreadcrumbLabel(route.params.id)
 	const [project, projectV3Result] = await Promise.all([
 		get_project(route.params.id, 'must_revalidate').catch(handleError),
 		get_project_v3(route.params.id, 'must_revalidate').catch(handleError),

apps/app-frontend/src/pages/project/Version.vue

@@ -95,7 +95,7 @@ import {
 	useVIntl,
 	VersionPage,
 } from '@modrinth/ui'
-import { ref, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { SwapIcon } from '@/assets/icons'
@@ -143,6 +143,17 @@ const props = defineProps<{
 }>()
 
 const version = ref(props.versions.find((version) => version.id === route.params.version))
+const versionBreadcrumbLabel = computed(() => {
+	const versionName = version.value?.name
+	if (!versionName) {
+		return formatMessage(commonMessages.loadingLabel)
+	}
+
+	const projectNamePrefix = `${props.project.title} `
+	return versionName.startsWith(projectNamePrefix)
+		? versionName.slice(projectNamePrefix.length).trim() || versionName
+		: versionName
+})
 const versionsBreadcrumb = useBreadcrumb({
 	slot: 'project-section',
 	id: () => `project-versions:${props.project.id}`,
@@ -160,12 +171,7 @@ useBreadcrumb(
 			`version:${props.project.id}:${String(
 				displayedVersionRoute.value.params.version ?? '',
 			)}`,
-		label: () =>
-			version.value?.name ??
-			String(
-				displayedVersionRoute.value.params.version ??
-					formatMessage(commonMessages.loadingLabel),
-			),
+		label: versionBreadcrumbLabel,
 		to: () => displayedVersionRoute.value.fullPath,
 	},
 	{ parent: versionsBreadcrumb },