fix: breadcrumb issue on browse content via server panel (#6971)

fix: breadcrumb issue on browse/navigation bar

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/App.vue

@@ -1547,8 +1547,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton
 				v-tooltip.right="formatMessage(commonMessages.discoverContentLabel)"
 				to="/browse/modpack"
-				:is-primary="() => route.path.startsWith('/browse') && !route.query.i"
-				:is-subpage="(route) => route.path.startsWith('/project') && !route.query.i"
+				:is-primary="() => route.path.startsWith('/browse') && !route.query.i && !route.query.sid"
+				:is-subpage="
+					(route) => route.path.startsWith('/project') && !route.query.i && !route.query.sid
+				"
 			>
 				<CompassIcon />
 			</NavButton>
@@ -1572,7 +1574,11 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				v-tooltip.right="formatMessage(messages.modrinthHosting)"
 				to="/hosting/manage"
 				:is-primary="(r) => r.path === '/hosting/manage' || r.path === '/hosting/manage/'"
-				:is-subpage="(r) => r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/'"
+				:is-subpage="
+					(r) =>
+						(r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/') ||
+						((r.path.startsWith('/browse') || r.path.startsWith('/project')) && r.query.sid)
+				"
 			>
 				<ServerStackIcon />
 			</NavButton>

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

@@ -56,11 +56,7 @@ import {
 	instanceKeys,
 	instanceLinkedProjectQueryOptions,
 } from '@/pages/instance/query-options'
-import {
-	type BreadcrumbDefinition,
-	useBreadcrumb,
-	useRootBreadcrumb,
-} from '@/providers/breadcrumbs'
+import { type BreadcrumbDefinition, injectBreadcrumbManager } from '@/providers/breadcrumbs'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import {
@@ -177,45 +173,46 @@ const isServerInstance = computed(
 	() => linkedInstanceProjectQuery.data.value?.minecraft_server != null,
 )
 
-const instanceBreadcrumb = route.query.i
-	? useBreadcrumb({
-			slot: 'instance',
-			id: () => `instance:${String(displayedBrowseRoute.value.query.i ?? '')}`,
-			label: () => instance.value?.name ?? formatMessage(commonMessages.loadingLabel),
-			visual: () => ({
-				type: 'image',
-				src: instance.value?.icon_path ? convertFileSrc(instance.value.icon_path) : undefined,
-				alt: instance.value?.name,
-				tintBy: String(displayedBrowseRoute.value.query.i ?? ''),
-			}),
-			to: () => {
-				const instancePath = `/instance/${encodeURIComponent(
-					String(displayedBrowseRoute.value.query.i ?? ''),
-				)}`
-				return displayedBrowseRoute.value.query.from === 'worlds'
-					? `${instancePath}/worlds`
-					: instancePath
-			},
-		})
-	: undefined
+const breadcrumbManager = injectBreadcrumbManager()
+const instanceBreadcrumbDefinition = {
+	slot: 'instance',
+	id: () => `instance:${String(displayedBrowseRoute.value.query.i ?? '')}`,
+	label: () => instance.value?.name ?? formatMessage(commonMessages.loadingLabel),
+	visual: () => ({
+		type: 'image' as const,
+		src: instance.value?.icon_path ? convertFileSrc(instance.value.icon_path) : undefined,
+		alt: instance.value?.name,
+		tintBy: String(displayedBrowseRoute.value.query.i ?? ''),
+	}),
+	to: () => {
+		const instancePath = `/instance/${encodeURIComponent(
+			String(displayedBrowseRoute.value.query.i ?? ''),
+		)}`
+		return displayedBrowseRoute.value.query.from === 'worlds'
+			? `${instancePath}/worlds`
+			: instancePath
+	},
+} satisfies BreadcrumbDefinition
+const serversBreadcrumbDefinition = {
+	slot: 'root',
+	id: 'servers',
+	label: () => formatMessage(commonMessages.serversLabel),
+	to: '/hosting/manage/',
+	visual: { type: 'icon', component: ServerStackIcon },
+} satisfies BreadcrumbDefinition
 const serverBreadcrumbTo = ref(serverBackUrl.value)
 watch(serverBackUrl, (value) => {
 	if (route.path.startsWith('/browse/')) {
 		serverBreadcrumbTo.value = value
 	}
 })
-const serverBreadcrumb =
-	!instanceBreadcrumb && serverIdQuery.value
-		? useBreadcrumb({
-				slot: 'server',
-				id: () => `server:${String(displayedBrowseRoute.value.query.sid ?? '')}`,
-				label: () =>
-					serverContextServerData.value?.name ?? formatMessage(commonMessages.loadingLabel),
-				visual: { type: 'icon', component: ServerStackIcon },
-				to: serverBreadcrumbTo,
-			})
-		: undefined
-const breadcrumbParent = instanceBreadcrumb ?? serverBreadcrumb
+const serverBreadcrumbDefinition = {
+	slot: 'server',
+	id: () => `server:${String(displayedBrowseRoute.value.query.sid ?? '')}`,
+	label: () => serverContextServerData.value?.name ?? formatMessage(commonMessages.loadingLabel),
+	visual: { type: 'icon', component: ServerStackIcon },
+	to: serverBreadcrumbTo,
+} satisfies BreadcrumbDefinition
 const breadcrumbDefinition = {
 	slot: 'browse',
 	id: () =>
@@ -228,9 +225,27 @@ const breadcrumbDefinition = {
 	to: () => displayedBrowseRoute.value.fullPath,
 	visual: { type: 'icon', component: CompassIcon },
 } satisfies BreadcrumbDefinition
-const browseBreadcrumb = breadcrumbParent
-	? useBreadcrumb(breadcrumbDefinition, { parent: breadcrumbParent })
-	: useRootBreadcrumb(breadcrumbDefinition)
+
+function syncBreadcrumbs() {
+	if (displayedBrowseRoute.value.query.i) {
+		const instanceBreadcrumb = breadcrumbManager.reset(instanceBreadcrumbDefinition)
+		breadcrumbManager.push(breadcrumbDefinition, { parent: instanceBreadcrumb })
+		return
+	}
+
+	if (displayedBrowseRoute.value.query.sid) {
+		const serversBreadcrumb = breadcrumbManager.reset(serversBreadcrumbDefinition)
+		const serverBreadcrumb = breadcrumbManager.push(serverBreadcrumbDefinition, {
+			parent: serversBreadcrumb,
+		})
+		breadcrumbManager.push(breadcrumbDefinition, { parent: serverBreadcrumb })
+		return
+	}
+
+	breadcrumbManager.reset(breadcrumbDefinition)
+}
+
+watch(displayedBrowseRoute, syncBreadcrumbs, { immediate: true, flush: 'sync' })
 
 debugLog('fetching tags (categories, loaders, gameVersions)')
 const [categories, loaders, availableGameVersions] = await Promise.all([
@@ -595,6 +610,7 @@ function resetInstanceContext() {
 	newlyInstalled.value = []
 	hiddenInstanceProjectIds.value = new Set()
 	hiddenInstanceProjectIdsInitialized.value = false
+	isServerInstance.value = false
 	browseBreadcrumb.reset()
 	void refreshInstalledProjectIds()
 }

apps/app-frontend/src/providers/setup/server-install-content.ts

@@ -222,7 +222,29 @@ export function createServerInstallContent(opts: {
 	const isSetupServerContext = computed(() => !!serverIdQuery.value && !!serverFlowFrom.value)
 
 	const serverContextWorldId = ref<string | null>(worldIdQuery.value)
-	const serverContextServerData = ref<Archon.Servers.v0.Server | null>(null)
+
+	function getCachedServer(serverId: string): Archon.Servers.v0.Server | null {
+		return (
+			queryClient.getQueryData<Archon.Servers.v0.Server>(['servers', 'detail', serverId]) ??
+			queryClient
+				.getQueryData<Archon.Servers.v0.ServerGetResponse>(['servers'])
+				?.servers.find((server) => server.server_id === serverId) ??
+			null
+		)
+	}
+
+	async function ensureServer(serverId: string): Promise<Archon.Servers.v0.Server> {
+		return queryClient.ensureQueryData({
+			queryKey: ['servers', 'detail', serverId],
+			queryFn: () => client.archon.servers_v0.get(serverId),
+			staleTime: 30_000,
+		})
+	}
+
+	const initialServerId = serverIdQuery.value
+	const serverContextServerData = ref<Archon.Servers.v0.Server | null>(
+		initialServerId ? getCachedServer(initialServerId) : null,
+	)
 	const serverContentProjectIds = ref<Set<string>>(new Set())
 	const serverContentInstallKeys = ref<Set<string>>(new Set())
 	const queuedServerInstalls = ref<Map<string, BrowseInstallPlan<InstallableSearchResult>>>(
@@ -277,6 +299,9 @@ export function createServerInstallContent(opts: {
 	async function refreshServerInstalledContent(serverId: string, worldId: string) {
 		try {
 			const content = await client.archon.content_v1.getAddons(serverId, worldId)
+			if (serverIdQuery.value !== serverId || effectiveServerWorldId.value !== worldId) {
+				return
+			}
 			const ids = new Set(
 				(content.addons ?? [])
 					.map((addon) => addon.project_id)
@@ -297,14 +322,20 @@ export function createServerInstallContent(opts: {
 		if (!sid) return
 
 		try {
-			serverContextServerData.value = await client.archon.servers_v0.get(sid)
+			const server = await ensureServer(sid)
+			if (serverIdQuery.value === sid) {
+				serverContextServerData.value = server
+			}
 		} catch (err) {
 			handleError(err as Error)
 		}
 
+		if (serverIdQuery.value !== sid) return
+
 		let resolvedWorldId = effectiveServerWorldId.value
 		if (!resolvedWorldId) {
 			resolvedWorldId = await resolveServerContextWorldId(sid)
+			if (serverIdQuery.value !== sid) return
 			if (resolvedWorldId) {
 				serverContextWorldId.value = resolvedWorldId
 			}
@@ -319,6 +350,7 @@ export function createServerInstallContent(opts: {
 	function watchServerContextChanges() {
 		watch([serverIdQuery, effectiveServerWorldId], async ([sid, wid], [prevSid, prevWid]) => {
 			if (!sid) {
+				serverContextWorldId.value = null
 				serverContextServerData.value = null
 				serverContentProjectIds.value = new Set()
 				serverContentInstallKeys.value = new Set()
@@ -330,8 +362,12 @@ export function createServerInstallContent(opts: {
 				serverContentProjectIds.value = new Set()
 				serverContentInstallKeys.value = new Set()
 				queuedServerInstalls.value = readStoredServerInstallQueue(sid, wid)
+				serverContextServerData.value = getCachedServer(sid)
 				try {
-					serverContextServerData.value = await client.archon.servers_v0.get(sid)
+					const server = await ensureServer(sid)
+					if (serverIdQuery.value === sid) {
+						serverContextServerData.value = server
+					}
 				} catch (err) {
 					handleError(err as Error)
 				}