From 9263e8a57d219ea84848cf6edb71d1f09f587542 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 18:44:45 +0100
Subject: [PATCH 01/11] refactor: breadcrumbs system

---
 apps/app-frontend/src/App.vue                 |   6 +
 .../src/components/ui/Breadcrumbs.vue         |  49 ++---
 apps/app-frontend/src/pages/Browse.vue        | 153 ++++++++++----
 apps/app-frontend/src/pages/Index.vue         |  12 +-
 apps/app-frontend/src/pages/Servers.vue       |   9 +
 apps/app-frontend/src/pages/Skins.vue         |   8 +
 apps/app-frontend/src/pages/User.vue          |  55 ++---
 apps/app-frontend/src/pages/Worlds.vue        |  11 +-
 .../src/pages/hosting/manage/Index.vue        |  71 ++++---
 .../app-frontend/src/pages/instance/Index.vue |  70 ++++--
 apps/app-frontend/src/pages/library/Index.vue |  10 +-
 .../src/pages/project/Gallery.vue             |  11 +
 apps/app-frontend/src/pages/project/Index.vue |  37 +++-
 .../src/pages/project/Version.vue             |  53 ++++-
 .../src/pages/project/Versions.vue            |  29 ++-
 .../app-frontend/src/providers/breadcrumbs.ts | 200 ++++++++++++++++++
 apps/app-frontend/src/routes.js               |  88 --------
 apps/app-frontend/src/store/breadcrumbs.js    |  37 ----
 apps/app-frontend/src/store/state.js          |   3 +-
 19 files changed, 614 insertions(+), 298 deletions(-)
 create mode 100644 apps/app-frontend/src/providers/breadcrumbs.ts
 delete mode 100644 apps/app-frontend/src/store/breadcrumbs.js

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index f7e78a4963..3625fb0545 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -138,6 +138,10 @@ import {
 	setAppUpdateActions,
 } from '@/providers/app-update.ts'
 import { createContentInstall, provideContentInstall } from '@/providers/content-install'
+import {
+	createBreadcrumbManager,
+	provideBreadcrumbManager,
+} from '@/providers/breadcrumbs'
 import {
 	provideAppUpdateDownloadProgress,
 	subscribeToDownloadProgress,
@@ -157,6 +161,8 @@ import { AppPopupNotificationManager } from './providers/app-popup-notifications
 const themeStore = useTheming()
 const router = useRouter()
 const route = useRoute()
+const breadcrumbManager = createBreadcrumbManager()
+provideBreadcrumbManager(breadcrumbManager)
 const APP_LEFT_NAV_WIDTH = '4rem'
 const APP_SIDEBAR_WIDTH = 300
 const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
diff --git a/apps/app-frontend/src/components/ui/Breadcrumbs.vue b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
index 032a569be0..7049ac7d46 100644
--- a/apps/app-frontend/src/components/ui/Breadcrumbs.vue
+++ b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
@@ -15,26 +15,26 @@
 			:class="{ 'breadcrumbs-scroll': isAnimating }"
 			@animationiteration="onAnimationIteration"
 		>
-			{{ breadcrumbData.resetToNames(breadcrumbs) }}
-			<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
+			<template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.slot">
 				<router-link
-					v-if="breadcrumb.link"
-					:to="{
-						path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id as string)),
-						query: breadcrumb.query,
-					}"
+					v-if="index < breadcrumbs.length - 1 && breadcrumb.to"
+					:to="breadcrumb.to"
 					class="shrink-0 whitespace-nowrap text-primary"
 				>
-					{{ resolveLabel(breadcrumb.name) }}
+					{{ breadcrumb.label }}
 				</router-link>
 				<span
 					v-else
 					data-tauri-drag-region
 					class="shrink-0 whitespace-nowrap text-contrast font-semibold cursor-default select-none"
 				>
-					{{ resolveLabel(breadcrumb.name) }}
+					{{ breadcrumb.label }}
 				</span>
-				<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5 shrink-0" />
+				<ChevronRightIcon
+					v-if="index < breadcrumbs.length - 1"
+					data-tauri-drag-region
+					class="w-5 h-5 shrink-0"
+				/>
 			</template>
 		</div>
 	</div>
@@ -42,34 +42,11 @@
 
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-
-interface Breadcrumb {
-	name: string
-	link?: string
-	query?: Record<string, string>
-}
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-const route = useRoute()
-const breadcrumbData = useBreadcrumbs()
-
-const breadcrumbs = computed<Breadcrumb[]>(() => {
-	const additionalContext =
-		route.meta.useContext === true
-			? breadcrumbData.context
-			: route.meta.useRootContext === true
-				? breadcrumbData.rootContext
-				: null
-	const crumbs = (route.meta.breadcrumb ?? []) as Breadcrumb[]
-	return additionalContext ? [additionalContext as Breadcrumb, ...crumbs] : crumbs
-})
+import { injectBreadcrumbManager } from '@/providers/breadcrumbs'
 
-function resolveLabel(name: string): string {
-	return name.charAt(0) === '?' ? breadcrumbData.getName(name.slice(1)) : name
-}
+const { entries: breadcrumbs } = injectBreadcrumbManager()
 
 // Overflow detection
 const outerRef = ref<HTMLDivElement | null>(null)
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index fed10c5d07..40069dc5ba 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -31,9 +31,9 @@ import {
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
-import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import { useAppServerBrowse } from '@/composables/browse/use-app-server-browse'
@@ -58,7 +58,10 @@ import {
 	createServerInstallContent,
 	provideServerInstallContent,
 } from '@/providers/setup/server-install-content'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import {
+	useBreadcrumb,
+	useRootBreadcrumb,
+} from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/state'
 
 const { handleError } = injectNotificationManager()
@@ -71,6 +74,16 @@ const debugLog = useDebugLogger('Browse')
 
 const router = useRouter()
 const route = useRoute()
+const displayedBrowseRoute = shallowRef(router.currentRoute.value)
+watch(
+	() => router.currentRoute.value,
+	(nextRoute) => {
+		if (nextRoute.path.startsWith('/browse/')) {
+			displayedBrowseRoute.value = nextRoute
+		}
+	},
+	{ immediate: true },
+)
 const themeStore = useTheming()
 const browseRouteActive = computed(() => route.path.startsWith('/browse/'))
 const serverSetupModalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
@@ -111,25 +124,6 @@ const {
 	markServerProjectInstalled,
 } = serverInstallContent
 
-debugLog('fetching tags (categories, loaders, gameVersions)')
-const [categories, loaders, availableGameVersions] = await Promise.all([
-	get_categories()
-		.catch(handleError)
-		.then(ref<Labrinth.Tags.v2.Category[]>),
-	get_loaders()
-		.catch(handleError)
-		.then(ref<Labrinth.Tags.v2.Loader[]>),
-	get_game_versions()
-		.catch(handleError)
-		.then(ref<Labrinth.Tags.v2.GameVersion[]>),
-])
-
-const tags: Ref<Tags> = computed(() => ({
-	gameVersions: availableGameVersions.value ?? [],
-	loaders: loaders.value ?? [],
-	categories: categories.value ?? [],
-}))
-
 type Instance = {
 	game_version: string
 	loader: string
@@ -152,6 +146,92 @@ const hiddenInstanceProjectIds = ref<Set<string>>(new Set())
 const hiddenInstanceProjectIdsInitialized = ref(false)
 const isServerInstance = ref(false)
 
+const breadcrumbLabel = ref(
+	displayedBrowseRoute.value.query.from === 'worlds'
+		? 'Discover servers'
+		: 'Discover content',
+)
+const instanceBreadcrumb = route.query.i
+	? useBreadcrumb({
+			slot: 'instance',
+			id: () => `instance:${String(displayedBrowseRoute.value.query.i ?? '')}`,
+			label: () => instance.value?.name ?? formatMessage(commonMessages.loadingLabel),
+			to: () =>
+				`/instance/${encodeURIComponent(String(displayedBrowseRoute.value.query.i ?? ''))}`,
+		})
+	: undefined
+const instanceSectionBreadcrumb = instanceBreadcrumb
+	? useBreadcrumb(
+			{
+				slot: 'instance-section',
+				id: () =>
+					`instance-section:${String(displayedBrowseRoute.value.query.i ?? '')}:${
+						displayedBrowseRoute.value.query.from === 'worlds' ? 'worlds' : 'content'
+					}`,
+				label: () =>
+					displayedBrowseRoute.value.query.from === 'worlds' ? 'Worlds' : 'Content',
+				to: () => {
+					const instancePath = `/instance/${encodeURIComponent(
+						String(displayedBrowseRoute.value.query.i ?? ''),
+					)}`
+					return displayedBrowseRoute.value.query.from === 'worlds'
+						? `${instancePath}/worlds`
+						: instancePath
+				},
+			},
+			{ parent: instanceBreadcrumb },
+		)
+	: undefined
+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),
+			to: serverBreadcrumbTo,
+		})
+	: undefined
+const breadcrumbParent = instanceSectionBreadcrumb ?? serverBreadcrumb
+const breadcrumbDefinition = {
+	slot: 'browse',
+	id: () =>
+		`browse:${String(displayedBrowseRoute.value.params.projectType ?? '')}:${String(
+			displayedBrowseRoute.value.query.i ?? '',
+		)}:${String(displayedBrowseRoute.value.query.sid ?? '')}:${String(
+			displayedBrowseRoute.value.query.from ?? '',
+		)}`,
+	label: breadcrumbLabel,
+	to: () => displayedBrowseRoute.value.fullPath,
+}
+const browseBreadcrumb = breadcrumbParent
+	? useBreadcrumb(breadcrumbDefinition, { parent: breadcrumbParent })
+	: useRootBreadcrumb(breadcrumbDefinition)
+
+debugLog('fetching tags (categories, loaders, gameVersions)')
+const [categories, loaders, availableGameVersions] = await Promise.all([
+	get_categories()
+		.catch(handleError)
+		.then(ref<Labrinth.Tags.v2.Category[]>),
+	get_loaders()
+		.catch(handleError)
+		.then(ref<Labrinth.Tags.v2.Loader[]>),
+	get_game_versions()
+		.catch(handleError)
+		.then(ref<Labrinth.Tags.v2.GameVersion[]>),
+])
+
+const tags: Ref<Tags> = computed(() => ({
+	gameVersions: availableGameVersions.value ?? [],
+	loaders: loaders.value ?? [],
+	categories: categories.value ?? [],
+}))
+
 if (isFromWorlds.value && route.params.projectType !== 'server') {
 	router.replace({
 		path: '/browse/server',
@@ -448,28 +528,16 @@ const messages = defineMessages({
 	},
 })
 
-const breadcrumbs = useBreadcrumbs()
 const browseTitle = computed(() =>
 	formatMessage(isFromWorlds.value ? messages.discoverServers : messages.discoverContent),
 )
-breadcrumbs.setName('BrowseTitle', browseTitle.value)
-if (instance.value) {
-	const instanceLink = `/instance/${encodeURIComponent(instance.value.id)}`
-	breadcrumbs.setContext({
-		name: instance.value.name,
-		link: isFromWorlds.value ? `${instanceLink}/worlds` : instanceLink,
-	})
-} else {
-	breadcrumbs.setContext(null)
-}
-
-onBeforeRouteLeave(() => {
-	breadcrumbs.setContext({
-		name: browseTitle.value,
-		link: `/browse/${projectType.value}`,
-		query: route.query,
-	})
-})
+watch(
+	browseTitle,
+	(value) => {
+		breadcrumbLabel.value = value
+	},
+	{ immediate: true },
+)
 
 const projectType = ref<ProjectType>(route.params.projectType as ProjectType)
 
@@ -484,8 +552,7 @@ function resetInstanceContext() {
 	hiddenInstanceProjectIds.value = new Set()
 	hiddenInstanceProjectIdsInitialized.value = false
 	isServerInstance.value = false
-	breadcrumbs.setName('BrowseTitle', formatMessage(messages.discoverContent))
-	breadcrumbs.setContext(null)
+	browseBreadcrumb.reset()
 }
 
 watch(
diff --git a/apps/app-frontend/src/pages/Index.vue b/apps/app-frontend/src/pages/Index.vue
index 16223dde1b..69daee0f1a 100644
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -3,7 +3,6 @@ import { injectNotificationManager } from '@modrinth/ui'
 import type { SearchResult } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
 import RowDisplay from '@/components/RowDisplay.vue'
 import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
@@ -11,13 +10,16 @@ import { get_search_results } from '@/helpers/cache.js'
 import { instance_listener } from '@/helpers/events'
 import { list } from '@/helpers/instance'
 import type { GameInstance } from '@/helpers/types'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 
 const { handleError } = injectNotificationManager()
-const route = useRoute()
-const breadcrumbs = useBreadcrumbs()
 
-breadcrumbs.setRootContext({ name: 'Home', link: route.path })
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'home',
+	label: 'Home',
+	to: '/',
+})
 
 const instances = ref<GameInstance[]>([])
 
diff --git a/apps/app-frontend/src/pages/Servers.vue b/apps/app-frontend/src/pages/Servers.vue
index 9a6291b442..5302eb3133 100644
--- a/apps/app-frontend/src/pages/Servers.vue
+++ b/apps/app-frontend/src/pages/Servers.vue
@@ -4,12 +4,21 @@ import { injectModrinthClient, ServersManagePageIndex } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+
 import { config } from '../config'
 
 const stripePublishableKey = (config.stripePublishableKey as string) || ''
 
 const client = injectModrinthClient()
 
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'servers',
+	label: 'Servers',
+	to: '/hosting/manage/',
+})
+
 const { data: products } = useQuery({
 	queryKey: ['billing', 'products'],
 	queryFn: () => client.labrinth.billing_internal.getProducts(),
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index cb3210ab63..768098f90f 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -56,9 +56,17 @@ import {
 	set_custom_skin_order,
 } from '@/helpers/skins.ts'
 import { hasPride26Badge } from '@/helpers/user-campaigns.ts'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { handleSevereError } from '@/store/error'
 import { useTheming } from '@/store/state'
 
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'skins',
+	label: 'Skin selector',
+	to: '/skins',
+})
+
 type UnlistenFn = () => void
 type VirtualSkinSectionListExpose = {
 	getAddSkinButtonElement: () => HTMLElement | null | undefined
diff --git a/apps/app-frontend/src/pages/User.vue b/apps/app-frontend/src/pages/User.vue
index 0a5edf77ec..d6ecd4c17e 100644
--- a/apps/app-frontend/src/pages/User.vue
+++ b/apps/app-frontend/src/pages/User.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { provideUserProfile, UserProfilePageLayout } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 
 import {
@@ -24,11 +24,10 @@ import {
 	get_user_projects,
 	patch_user,
 } from '@/helpers/users'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 
 const route = useRoute()
 const queryClient = useQueryClient()
-const breadcrumbs = useBreadcrumbs()
 const userProfile = provideUserProfile({
 	getUser: get_user_profile,
 	getProjects: get_user_projects,
@@ -46,17 +45,43 @@ const projectType = computed(() => {
 	return Array.isArray(value) ? value[0] : value
 })
 
+const { data: user } = useQuery({
+	queryKey: computed(() => ['user', userId.value]),
+	queryFn: () => userProfile.getUser(userId.value),
+	enabled: false,
+	staleTime: 30_000,
+})
+
+const breadcrumbUserId = ref(userId.value)
+const breadcrumbLabel = ref(userId.value)
+const breadcrumbTo = ref(route.fullPath)
+watch(
+	[userId, user, () => route.fullPath],
+	([currentUserId, currentUser, currentPath]) => {
+		if (route.name !== 'User') return
+		breadcrumbUserId.value = currentUserId
+		breadcrumbLabel.value = currentUser?.username ?? currentUserId
+		breadcrumbTo.value = currentPath
+	},
+	{ immediate: true, flush: 'sync' },
+)
+
+useRootBreadcrumb({
+	slot: 'root',
+	id: () => `user:${breadcrumbUserId.value}`,
+	label: breadcrumbLabel,
+	to: breadcrumbTo,
+})
+
 async function ensureUserProfileData(id: string): Promise<void> {
 	if (!id) return
 
-	let breadcrumbName = id
 	try {
-		const user = await queryClient.ensureQueryData({
+		await queryClient.ensureQueryData({
 			queryKey: ['user', id],
 			queryFn: () => userProfile.getUser(id),
 			staleTime: 30_000,
 		})
-		breadcrumbName = user.username
 	} catch {
 		// Let the mounted layout's useQuery surface errors; do not fail route setup.
 	}
@@ -78,8 +103,6 @@ async function ensureUserProfileData(id: string): Promise<void> {
 			staleTime: 30_000,
 		}),
 	])
-
-	breadcrumbs.setName('User', breadcrumbName)
 }
 
 onBeforeRouteUpdate(async (to) => {
@@ -88,21 +111,5 @@ onBeforeRouteUpdate(async (to) => {
 	await ensureUserProfileData(id)
 })
 
-breadcrumbs.setName('User', userId.value)
 await ensureUserProfileData(userId.value)
-
-const { data: user } = useQuery({
-	queryKey: computed(() => ['user', userId.value]),
-	queryFn: () => userProfile.getUser(userId.value),
-	enabled: false,
-	staleTime: 30_000,
-})
-
-watch(
-	[userId, user],
-	([currentUserId, value]) => {
-		breadcrumbs.setName('User', value?.username ?? currentUserId)
-	},
-	{ immediate: true },
-)
 </script>
diff --git a/apps/app-frontend/src/pages/Worlds.vue b/apps/app-frontend/src/pages/Worlds.vue
index 896f54feff..1ba23658b8 100644
--- a/apps/app-frontend/src/pages/Worlds.vue
+++ b/apps/app-frontend/src/pages/Worlds.vue
@@ -1,4 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'worlds',
+	label: 'Worlds',
+	to: '/worlds',
+})
+</script>
 <template>
 	<div class="p-6 flex flex-col gap-2">Worlds</div>
 </template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index e283f38390..0b65b17ab3 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -48,15 +48,24 @@
 
 <script setup lang="ts">
 import type { Archon, Labrinth } from '@modrinth/api-client'
-import { injectAuth, injectModrinthClient, ServersManageRootLayout } from '@modrinth/ui'
+import {
+	commonMessages,
+	injectAuth,
+	injectModrinthClient,
+	ServersManageRootLayout,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { get_user } from '@/helpers/cache'
 import { get as getCreds } from '@/helpers/mr_auth'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import {
+	provideBreadcrumbParent,
+	useBreadcrumb,
+} from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/theme'
 
 const route = useRoute()
@@ -65,47 +74,61 @@ const auth = injectAuth()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const themeStore = useTheming()
-const breadcrumbs = useBreadcrumbs()
+const { formatMessage } = useVIntl()
 
 const isContainedServerRoute = computed(() => route.name === 'ServerManageOverview')
 
 const serverId = computed(() => {
 	const rawId = route.params.id
-	return Array.isArray(rawId) ? rawId[0] : (rawId ?? '')
+	return Array.isArray(rawId) ? (rawId[0] ?? '') : (rawId ?? '')
 })
 
-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.
-	}
-}
-
 const { data: serverData } = useQuery({
 	queryKey: computed(() => ['servers', 'detail', serverId.value]),
 	queryFn: () => null as unknown as Archon.Servers.v0.Server,
 	enabled: false,
 })
 
+const breadcrumbServerId = ref(serverId.value)
+const breadcrumbLabel = ref(formatMessage(commonMessages.loadingLabel))
+watch(
+	serverId,
+	(value) => {
+		if (!route.path.startsWith('/hosting/manage/') || route.name === 'Servers') return
+		breadcrumbServerId.value = value
+		breadcrumbLabel.value = formatMessage(commonMessages.loadingLabel)
+	},
+	{ flush: 'sync' },
+)
 watch(
 	serverData,
 	(server) => {
-		if (server?.name) {
-			breadcrumbs.setName('Server', server.name)
-			breadcrumbs.setContext({
-				name: server.name,
-				link: `/hosting/manage/${serverId.value}/content`,
-			})
-		}
+		if (!route.path.startsWith('/hosting/manage/') || !server?.name) return
+		breadcrumbLabel.value = server.name
 	},
 	{ immediate: true },
 )
 
+const serverBreadcrumb = useBreadcrumb({
+	slot: 'server',
+	id: () => `server:${breadcrumbServerId.value}`,
+	label: breadcrumbLabel,
+	to: () => `/hosting/manage/${encodeURIComponent(breadcrumbServerId.value)}`,
+})
+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) => {
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 9d3f10200d..c253dd8f5b 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -138,7 +138,14 @@ import {
 	UserPlusIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { injectAuth, injectNotificationManager, NavTabs, useLoadingBarToken } from '@modrinth/ui'
+import {
+	commonMessages,
+	injectAuth,
+	injectNotificationManager,
+	NavTabs,
+	useLoadingBarToken,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
@@ -187,7 +194,11 @@ import { createInstanceShortcut, showInstanceInFolder } from '@/helpers/utils.js
 import { refreshWorlds, type ServerStatus } from '@/helpers/worlds'
 import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
-import { useBreadcrumbs, useTheming } from '@/store/state'
+import {
+	provideBreadcrumbParent,
+	useBreadcrumb,
+} from '@/providers/breadcrumbs'
+import { useTheming } from '@/store/state'
 
 import { provideSharedInstanceState, useSharedInstanceState } from './use-shared-instance-state'
 
@@ -198,10 +209,10 @@ const { playServerProject } = injectServerInstall()
 const auth = injectAuth()
 const queryClient = useQueryClient()
 const route = useRoute()
+const { formatMessage } = useVIntl()
 
 const router = useRouter()
 const displayedInstanceRoute = shallowRef(router.currentRoute.value)
-const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
 const showInstancePlayTime = computed(() => themeStore.getFeatureFlag('show_instance_play_time'))
 const contentSubpageRouteNames = new Set(['Mods', 'ModsFilter'])
@@ -215,6 +226,45 @@ window.addEventListener('online', () => {
 })
 
 const instance = ref<GameInstance>()
+const instanceBreadcrumb = useBreadcrumb({
+	slot: 'instance',
+	id: () => `instance:${String(displayedInstanceRoute.value.params.id ?? '')}`,
+	label: () =>
+		instance.value?.id === displayedInstanceRoute.value.params.id
+			? instance.value.name
+			: formatMessage(commonMessages.loadingLabel),
+	to: () =>
+		`/instance/${encodeURIComponent(String(displayedInstanceRoute.value.params.id ?? ''))}`,
+})
+provideBreadcrumbParent(instanceBreadcrumb)
+
+const instanceSection = computed(() => {
+	switch (displayedInstanceRoute.value.name) {
+		case 'InstanceWorlds':
+			return { id: 'worlds', label: 'Worlds' }
+		case 'InstanceShare':
+			return { id: 'share', label: 'Share' }
+		case 'Files':
+			return { id: 'files', label: 'Files' }
+		case 'Logs':
+			return { id: 'logs', label: 'Logs' }
+		default:
+			return { id: 'content', label: 'Content' }
+	}
+})
+useBreadcrumb(
+	{
+		slot: 'instance-section',
+		id: () =>
+			`instance-section:${String(displayedInstanceRoute.value.params.id ?? '')}:${
+				instanceSection.value.id
+			}`,
+		label: () => instanceSection.value.label,
+		to: () => displayedInstanceRoute.value.fullPath,
+	},
+	{ parent: instanceBreadcrumb },
+)
+
 const preloadedContent = ref<InstanceContentData | null>(null)
 const playing = ref(false)
 const loading = ref(false)
@@ -503,20 +553,6 @@ watch(
 	{ immediate: true },
 )
 
-if (instance.value) {
-	breadcrumbs.setName(
-		'Instance',
-		instance.value.name.length > 40
-			? instance.value.name.substring(0, 40) + '...'
-			: instance.value.name,
-	)
-	breadcrumbs.setContext({
-		name: instance.value.name,
-		link: displayedInstanceRoute.value.path,
-		query: displayedInstanceRoute.value.query,
-	})
-}
-
 const options = ref<InstanceType<typeof ContextMenu> | null>(null)
 
 const launchInstance = async (context: string) => {
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index b9a83bffc8..cb2f562d1c 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -7,14 +7,18 @@ import { useRoute } from 'vue-router'
 import { NewInstanceImage } from '@/assets/icons'
 import { instance_listener } from '@/helpers/events.js'
 import { list } from '@/helpers/instance'
-import { useBreadcrumbs } from '@/store/breadcrumbs.js'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 
 const { handleError } = injectNotificationManager()
 const showCreationModal = inject('showCreationModal')
 const route = useRoute()
-const breadcrumbs = useBreadcrumbs()
 
-breadcrumbs.setRootContext({ name: 'Library', link: route.path })
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'library',
+	label: 'Library',
+	to: '/library',
+})
 
 const instances = shallowRef(await list().catch(handleError))
 
diff --git a/apps/app-frontend/src/pages/project/Gallery.vue b/apps/app-frontend/src/pages/project/Gallery.vue
index 05a771f927..2fdaf09524 100644
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -95,6 +95,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { trackEvent } from '@/helpers/analytics'
+import { useBreadcrumb } from '@/providers/breadcrumbs'
 
 const MC_SERVER_BANNER_NAME = '__mc_server_banner__'
 
@@ -111,6 +112,16 @@ const props = defineProps({
 	},
 })
 
+useBreadcrumb({
+	slot: 'project-section',
+	id: () => `project-gallery:${props.project?.id ?? ''}`,
+	label: 'Gallery',
+	to: () => ({
+		name: 'Gallery',
+		params: { id: props.project?.id ?? '' },
+	}),
+})
+
 const filteredGallery = computed(
 	() => props.project.gallery?.filter((img) => img.title !== MC_SERVER_BANNER_NAME) ?? [],
 )
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 5dd0476df6..d9482f9a36 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -298,7 +298,10 @@ import { getServerAddress } from '@/helpers/worlds'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import { createServerInstallContent } from '@/providers/setup/server-install-content'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import {
+	provideBreadcrumbParent,
+	useBreadcrumb,
+} from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/state.js'
 
 dayjs.extend(relativeTime)
@@ -307,8 +310,17 @@ const { handleError } = injectNotificationManager()
 const { install: installVersion } = injectContentInstall()
 const route = useRoute()
 const router = useRouter()
+const displayedProjectRoute = shallowRef(router.currentRoute.value)
+watch(
+	() => router.currentRoute.value,
+	(nextRoute) => {
+		if (nextRoute.path.startsWith('/project/')) {
+			displayedProjectRoute.value = nextRoute
+		}
+	},
+	{ immediate: true },
+)
 const queryClient = useQueryClient()
-const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
 const { formatMessage } = useVIntl()
 
@@ -331,6 +343,21 @@ const { installingServerProjects, playServerProject, showAddServerToInstanceModa
 	injectServerInstall()
 const installing = ref(false)
 const data = shallowRef(null)
+const projectBreadcrumbLabel = ref(
+	String(route.params.id ?? formatMessage(commonMessages.loadingLabel)),
+)
+const projectBreadcrumb = useBreadcrumb({
+	slot: 'project',
+	id: () => `project:${String(displayedProjectRoute.value.params.id ?? '')}`,
+	label: projectBreadcrumbLabel,
+	to: () => ({
+		name: 'Description',
+		params: { id: displayedProjectRoute.value.params.id },
+		query: displayedProjectRoute.value.query,
+	}),
+})
+provideBreadcrumbParent(projectBreadcrumb)
+
 const versions = shallowRef([])
 const members = shallowRef([])
 const categories = shallowRef([])
@@ -607,6 +634,9 @@ function reportProject() {
 }
 
 async function fetchProjectData() {
+	projectBreadcrumbLabel.value = String(
+		route.params.id ?? formatMessage(commonMessages.loadingLabel),
+	)
 	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),
@@ -619,6 +649,7 @@ async function fetchProjectData() {
 	}
 
 	data.value = project
+	projectBreadcrumbLabel.value = project.title
 	;[versions.value, members.value, categories.value, instance.value, instanceProjects.value] =
 		await Promise.all([
 			get_version_many(project.versions, 'must_revalidate').catch(handleError),
@@ -647,8 +678,6 @@ async function fetchProjectData() {
 	isServerProject.value = projectV3.value?.minecraft_server != null
 	serverStatusOnline.value = !!projectV3.value?.minecraft_java_server?.ping?.data
 
-	breadcrumbs.setName('Project', data.value.title)
-
 	fetchDeferredServerData(project)
 }
 
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index 6ea656c4ed..c3f3462afd 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -95,12 +95,12 @@ import {
 	useVIntl,
 	VersionPage,
 } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, shallowRef, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 import { SwapIcon } from '@/assets/icons'
 import { get_project_many, get_version_many } from '@/helpers/cache.js'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useBreadcrumb } from '@/providers/breadcrumbs'
 
 const { formatMessage } = useVIntl()
 
@@ -119,8 +119,18 @@ const messages = defineMessages({
 	},
 })
 
-const breadcrumbs = useBreadcrumbs()
 const route = useRoute()
+const router = useRouter()
+const displayedVersionRoute = shallowRef(router.currentRoute.value)
+watch(
+	() => router.currentRoute.value,
+	(nextRoute) => {
+		if (nextRoute.name === 'Version') {
+			displayedVersionRoute.value = nextRoute
+		}
+	},
+	{ immediate: true },
+)
 
 const props = defineProps<{
 	project: Labrinth.Projects.v2.Project
@@ -133,9 +143,33 @@ const props = defineProps<{
 }>()
 
 const version = ref(props.versions.find((version) => version.id === route.params.version))
-if (version.value) {
-	breadcrumbs.setName('Version', version.value.name)
-}
+const versionsBreadcrumb = useBreadcrumb({
+	slot: 'project-section',
+	id: () => `project-versions:${props.project.id}`,
+	label: 'Versions',
+	to: () => ({
+		name: 'Versions',
+		params: { id: props.project.id },
+		query: displayedVersionRoute.value.query,
+	}),
+})
+useBreadcrumb(
+	{
+		slot: 'project-version',
+		id: () =>
+			`version:${props.project.id}:${String(
+				displayedVersionRoute.value.params.version ?? '',
+			)}`,
+		label: () =>
+			version.value?.name ??
+			String(
+				displayedVersionRoute.value.params.version ??
+					formatMessage(commonMessages.loadingLabel),
+			),
+		to: () => displayedVersionRoute.value.fullPath,
+	},
+	{ parent: versionsBreadcrumb },
+)
 
 const enrichment = ref<Labrinth.Projects.v2.DependencyInfo | undefined>(undefined)
 const enrichmentLoading = ref(false)
@@ -203,13 +237,10 @@ async function refreshEnrichment() {
 }
 
 watch(
-	() => props.versions,
+	[() => props.versions, () => route.params.version],
 	async () => {
 		if (route.params.version) {
 			version.value = props.versions.find((v) => v.id === route.params.version)
-			if (version.value) {
-				breadcrumbs.setName('Version', version.value.name)
-			}
 			await refreshEnrichment()
 		}
 	},
diff --git a/apps/app-frontend/src/pages/project/Versions.vue b/apps/app-frontend/src/pages/project/Versions.vue
index 7d7438cf12..7180a70c43 100644
--- a/apps/app-frontend/src/pages/project/Versions.vue
+++ b/apps/app-frontend/src/pages/project/Versions.vue
@@ -82,11 +82,12 @@ import {
 	ProjectPageVersions,
 	useVIntl,
 } from '@modrinth/ui'
-import { ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, shallowRef, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 import { SwapIcon } from '@/assets/icons/index.js'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
+import { useBreadcrumb } from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/theme.ts'
 
 const { formatMessage } = useVIntl()
@@ -99,7 +100,7 @@ const messages = defineMessages({
 	},
 })
 
-defineProps({
+const props = defineProps({
 	project: {
 		type: Object,
 		default: () => {},
@@ -132,6 +133,28 @@ defineProps({
 
 const { handleError } = injectNotificationManager()
 const route = useRoute()
+const router = useRouter()
+const displayedVersionsRoute = shallowRef(router.currentRoute.value)
+watch(
+	() => router.currentRoute.value,
+	(nextRoute) => {
+		if (nextRoute.name === 'Versions') {
+			displayedVersionsRoute.value = nextRoute
+		}
+	},
+	{ immediate: true },
+)
+
+useBreadcrumb({
+	slot: 'project-section',
+	id: () => `project-versions:${props.project?.id ?? ''}`,
+	label: 'Versions',
+	to: () => ({
+		name: 'Versions',
+		params: { id: props.project?.id ?? route.params.id },
+		query: displayedVersionsRoute.value.query,
+	}),
+})
 
 function buildProjectHref(path) {
 	const params = new URLSearchParams()
diff --git a/apps/app-frontend/src/providers/breadcrumbs.ts b/apps/app-frontend/src/providers/breadcrumbs.ts
new file mode 100644
index 0000000000..69f02e22f0
--- /dev/null
+++ b/apps/app-frontend/src/providers/breadcrumbs.ts
@@ -0,0 +1,200 @@
+import { createContext } from '@modrinth/ui'
+import {
+	computed,
+	type MaybeRefOrGetter,
+	type ComputedRef,
+	shallowRef,
+	toValue,
+	watch,
+} from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface BreadcrumbDefinition {
+	slot: string
+	id: MaybeRefOrGetter<string>
+	label: MaybeRefOrGetter<string>
+	to?: MaybeRefOrGetter<RouteLocationRaw | undefined>
+}
+
+export interface ResolvedBreadcrumb {
+	slot: string
+	id: string
+	label: string
+	to?: RouteLocationRaw
+}
+
+export interface BreadcrumbHandle {
+	readonly slot: string
+	activate: () => void
+	reset: () => void
+	pop: () => void
+}
+
+export interface BreadcrumbManager {
+	readonly entries: ComputedRef<ResolvedBreadcrumb[]>
+	reset: (definition: BreadcrumbDefinition) => BreadcrumbHandle
+	push: (
+		definition: BreadcrumbDefinition,
+		options?: { parent?: BreadcrumbHandle },
+	) => BreadcrumbHandle
+	find: (slot: string) => BreadcrumbHandle | undefined
+}
+
+interface InternalBreadcrumb {
+	token: symbol
+	definition: BreadcrumbDefinition
+	parentToken?: symbol
+	parentSlot?: string
+	root: boolean
+	handle: BreadcrumbHandle
+}
+
+const [injectBreadcrumbManager, provideBreadcrumbManager] = createContext<BreadcrumbManager>(
+	'root',
+	'breadcrumbManager',
+)
+const [injectBreadcrumbParent, provideBreadcrumbParent] = createContext<BreadcrumbHandle>(
+	'BreadcrumbParent',
+	'breadcrumbParent',
+)
+
+export { injectBreadcrumbManager, provideBreadcrumbManager, provideBreadcrumbParent }
+
+export function createBreadcrumbManager(): BreadcrumbManager {
+	const stack = shallowRef<InternalBreadcrumb[]>([])
+
+	function findIndex(entry: InternalBreadcrumb): number {
+		const tokenIndex = stack.value.findIndex((candidate) => candidate.token === entry.token)
+		if (tokenIndex !== -1) return tokenIndex
+		return stack.value.findIndex((candidate) => candidate.definition.slot === entry.definition.slot)
+	}
+
+	function findParentIndex(entry: InternalBreadcrumb): number {
+		if (entry.parentToken) {
+			const tokenIndex = stack.value.findIndex(
+				(candidate) => candidate.token === entry.parentToken,
+			)
+			if (tokenIndex !== -1) return tokenIndex
+		}
+		if (entry.parentSlot) {
+			return stack.value.findIndex(
+				(candidate) => candidate.definition.slot === entry.parentSlot,
+			)
+		}
+		return stack.value.length - 1
+	}
+
+	function activate(entry: InternalBreadcrumb) {
+		if (entry.root) {
+			stack.value = [entry]
+			return
+		}
+
+		const existingIndex = findIndex(entry)
+		if (existingIndex !== -1) {
+			stack.value = [...stack.value.slice(0, existingIndex), entry]
+			return
+		}
+
+		const parentIndex = findParentIndex(entry)
+		stack.value = [...stack.value.slice(0, parentIndex + 1), entry]
+	}
+
+	function resetTo(entry: InternalBreadcrumb) {
+		stack.value = [entry]
+	}
+
+	function pop(entry: InternalBreadcrumb) {
+		const index = stack.value.findIndex((candidate) => candidate.token === entry.token)
+		if (index !== -1) {
+			stack.value = stack.value.slice(0, index)
+		}
+	}
+
+	function createHandle(
+		definition: BreadcrumbDefinition,
+		options: { parent?: BreadcrumbHandle; root: boolean },
+	): BreadcrumbHandle {
+		const entry = {} as InternalBreadcrumb
+		const handle: BreadcrumbHandle = {
+			slot: definition.slot,
+			activate: () => activate(entry),
+			reset: () => resetTo(entry),
+			pop: () => pop(entry),
+		}
+
+		Object.assign(entry, {
+			token: Symbol(definition.slot),
+			definition,
+			parentToken: options.parent
+				? stack.value.find((candidate) => candidate.handle === options.parent)?.token
+				: undefined,
+			parentSlot: options.parent?.slot,
+			root: options.root,
+			handle,
+		})
+
+		return handle
+	}
+
+	function reset(definition: BreadcrumbDefinition): BreadcrumbHandle {
+		const handle = createHandle(definition, { root: true })
+		handle.reset()
+		return handle
+	}
+
+	function push(
+		definition: BreadcrumbDefinition,
+		options: { parent?: BreadcrumbHandle } = {},
+	): BreadcrumbHandle {
+		const handle = createHandle(definition, { ...options, root: false })
+		handle.activate()
+		return handle
+	}
+
+	const entries = computed<ResolvedBreadcrumb[]>(() =>
+		stack.value.map(({ definition }) => ({
+			slot: definition.slot,
+			id: toValue(definition.id),
+			label: toValue(definition.label),
+			to: definition.to === undefined ? undefined : toValue(definition.to),
+		})),
+	)
+
+	return {
+		entries,
+		reset,
+		push,
+		find: (slot) =>
+			stack.value.find((entry) => entry.definition.slot === slot)?.handle,
+	}
+}
+
+function watchBreadcrumbIdentity(
+	definition: BreadcrumbDefinition,
+	handle: BreadcrumbHandle,
+) {
+	watch(
+		() => toValue(definition.id),
+		() => handle.activate(),
+		{ flush: 'sync' },
+	)
+}
+
+export function useRootBreadcrumb(definition: BreadcrumbDefinition): BreadcrumbHandle {
+	const manager = injectBreadcrumbManager()
+	const handle = manager.reset(definition)
+	watchBreadcrumbIdentity(definition, handle)
+	return handle
+}
+
+export function useBreadcrumb(
+	definition: BreadcrumbDefinition,
+	options: { parent?: BreadcrumbHandle } = {},
+): BreadcrumbHandle {
+	const manager = injectBreadcrumbManager()
+	const parent = options.parent ?? injectBreadcrumbParent(null) ?? undefined
+	const handle = manager.push(definition, { parent })
+	watchBreadcrumbIdentity(definition, handle)
+	return handle
+}
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index af0131c4be..f0bbf7f519 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -16,25 +16,16 @@ export default new createRouter({
 			path: '/',
 			name: 'Home',
 			component: Pages.Index,
-			meta: {
-				breadcrumb: [{ name: 'Home' }],
-			},
 		},
 		{
 			path: '/worlds',
 			name: 'Worlds',
 			component: Pages.Worlds,
-			meta: {
-				breadcrumb: [{ name: 'Worlds' }],
-			},
 		},
 		{
 			path: '/hosting/manage/',
 			name: 'Servers',
 			component: Pages.Servers,
-			meta: {
-				breadcrumb: [{ name: 'Servers' }],
-			},
 		},
 		{
 			path: '/hosting/manage/:id',
@@ -45,41 +36,26 @@ export default new createRouter({
 					path: '',
 					name: 'ServerManageOverview',
 					component: Hosting.Overview,
-					meta: {
-						breadcrumb: [{ name: '?Server' }],
-					},
 				},
 				{
 					path: 'content',
 					name: 'ServerManageContent',
 					component: Hosting.Content,
-					meta: {
-						breadcrumb: [{ name: '?Server' }],
-					},
 				},
 				{
 					path: 'files',
 					name: 'ServerManageFiles',
 					component: Hosting.Files,
-					meta: {
-						breadcrumb: [{ name: '?Server' }],
-					},
 				},
 				{
 					path: 'backups',
 					name: 'ServerManageBackups',
 					component: Hosting.Backups,
-					meta: {
-						breadcrumb: [{ name: '?Server' }],
-					},
 				},
 				{
 					path: 'access',
 					name: 'ServerManageAccess',
 					component: Hosting.Access,
-					meta: {
-						breadcrumb: [{ name: '?Server' }],
-					},
 				},
 			],
 		},
@@ -87,34 +63,21 @@ export default new createRouter({
 			path: '/browse/:projectType',
 			name: 'Discover content',
 			component: Pages.Browse,
-			meta: {
-				useContext: true,
-				breadcrumb: [{ name: '?BrowseTitle' }],
-			},
 		},
 		{
 			path: '/skins',
 			name: 'Skin selector',
 			component: Pages.Skins,
-			meta: {
-				breadcrumb: [{ name: 'Skin selector' }],
-			},
 		},
 		{
 			path: '/user/:user/:projectType?',
 			name: 'User',
 			component: Pages.User,
-			meta: {
-				breadcrumb: [{ name: '?User' }],
-			},
 		},
 		{
 			path: '/library',
 			name: 'Library',
 			component: Library.Index,
-			meta: {
-				breadcrumb: [{ name: 'Library' }],
-			},
 			children: [
 				{
 					path: '',
@@ -160,42 +123,22 @@ export default new createRouter({
 					path: '',
 					name: 'Description',
 					component: Project.Description,
-					meta: {
-						useContext: true,
-						breadcrumb: [{ name: '?Project' }],
-					},
 				},
 				{
 					path: 'versions',
 					name: 'Versions',
 					component: Project.Versions,
-					meta: {
-						useContext: true,
-						breadcrumb: [{ name: '?Project', link: '/project/{id}/' }, { name: 'Versions' }],
-					},
 				},
 				{
 					path: 'version/:version',
 					name: 'Version',
 					component: Project.Version,
 					props: true,
-					meta: {
-						useContext: true,
-						breadcrumb: [
-							{ name: '?Project', link: '/project/{id}/' },
-							{ name: 'Versions', link: '/project/{id}/versions' },
-							{ name: '?Version' },
-						],
-					},
 				},
 				{
 					path: 'gallery',
 					name: 'Gallery',
 					component: Project.Gallery,
-					meta: {
-						useContext: true,
-						breadcrumb: [{ name: '?Project', link: '/project/{id}/' }, { name: 'Gallery' }],
-					},
 				},
 			],
 		},
@@ -205,59 +148,30 @@ export default new createRouter({
 			component: Instance.Index,
 			props: true,
 			children: [
-				// {
-				//   path: '',
-				//   name: 'Overview',
-				//   component: Instance.Overview,
-				//   meta: {
-				//     useRootContext: true,
-				//     breadcrumb: [{ name: '?Instance' }],
-				//   },
-				// },
 				{
 					path: 'worlds',
 					name: 'InstanceWorlds',
 					component: Instance.Worlds,
-					meta: {
-						useRootContext: true,
-						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Worlds' }],
-					},
 				},
 				{
 					path: 'share',
 					name: 'InstanceShare',
 					component: Instance.Share,
-					meta: {
-						useRootContext: true,
-						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Share' }],
-					},
 				},
 				{
 					path: '',
 					name: 'Mods',
 					component: Instance.Mods,
-					meta: {
-						useRootContext: true,
-						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
-					},
 				},
 				{
 					path: 'projects/:type',
 					name: 'ModsFilter',
 					component: Instance.Mods,
-					meta: {
-						useRootContext: true,
-						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
-					},
 				},
 				{
 					path: 'files',
 					name: 'Files',
 					component: Instance.Files,
-					meta: {
-						useRootContext: true,
-						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Files' }],
-					},
 				},
 				{
 					path: 'logs',
@@ -265,8 +179,6 @@ export default new createRouter({
 					component: Instance.Logs,
 					meta: {
 						renderMode: 'fixed',
-						useRootContext: true,
-						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Logs' }],
 					},
 				},
 			],
diff --git a/apps/app-frontend/src/store/breadcrumbs.js b/apps/app-frontend/src/store/breadcrumbs.js
deleted file mode 100644
index ff13440c0e..0000000000
--- a/apps/app-frontend/src/store/breadcrumbs.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useBreadcrumbs = defineStore('breadcrumbsStore', {
-	state: () => ({
-		names: new Map(),
-		context: null,
-		rootContext: null,
-	}),
-	actions: {
-		getName(route) {
-			return this.names.get(route) ?? ''
-		},
-		setName(route, title) {
-			this.names.set(route, title)
-		},
-		// resets breadcrumbs to only included ones as to not have stale breadcrumbs
-		resetToNames(breadcrumbs) {
-			if (!breadcrumbs) return
-			// names is an array of every breadcrumb.name that starts with a ?
-			const names = breadcrumbs
-				.filter((breadcrumb) => breadcrumb.name.charAt(0) === '?')
-				.map((breadcrumb) => breadcrumb.name.slice(1))
-			// remove all names that are not in the names array
-			for (const [route] of this.names) {
-				if (!names.includes(route)) {
-					this.names.delete(route)
-				}
-			}
-		},
-		setContext(context) {
-			this.context = context
-		},
-		setRootContext(context) {
-			this.rootContext = context
-		},
-	},
-})
diff --git a/apps/app-frontend/src/store/state.js b/apps/app-frontend/src/store/state.js
index d25ee51b1a..b5fa69692c 100644
--- a/apps/app-frontend/src/store/state.js
+++ b/apps/app-frontend/src/store/state.js
@@ -1,4 +1,3 @@
-import { useBreadcrumbs } from './breadcrumbs'
 import { useTheming } from './theme.ts'
 
-export { useBreadcrumbs, useTheming }
+export { useTheming }

From 82025a72fe06f024b5506b50fe608e5fb780cf84 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 18:53:50 +0100
Subject: [PATCH 02/11] fix: qa

---
 apps/app-frontend/src/pages/Browse.vue        |  8 +++++
 .../src/pages/hosting/manage/Index.vue        | 34 ++++++++++---------
 .../app-frontend/src/pages/instance/Index.vue |  3 +-
 apps/app-frontend/src/pages/project/Index.vue | 21 ++++++++----
 .../src/pages/project/Version.vue             | 20 +++++++----
 5 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index 40069dc5ba..cbd4b75707 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/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)
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index 0b65b17ab3..eef66f4e16 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/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) => {
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index c253dd8f5b..63ab47e59d 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/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: () =>
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index d9482f9a36..12ad6a059b 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/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),
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index c3f3462afd..9dbe7c502c 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/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 },

From c388cf2f47f067f433174017c73a6e4c4913abac Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 18:55:06 +0100
Subject: [PATCH 03/11] fix: qa

---
 apps/app-frontend/src/pages/instance/Index.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 63ab47e59d..b0990749c4 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -230,10 +230,7 @@ const instance = ref<GameInstance>()
 const instanceBreadcrumb = useRootBreadcrumb({
 	slot: 'instance',
 	id: () => `instance:${String(displayedInstanceRoute.value.params.id ?? '')}`,
-	label: () =>
-		instance.value?.id === displayedInstanceRoute.value.params.id
-			? instance.value.name
-			: formatMessage(commonMessages.loadingLabel),
+	label: () => instance.value?.name ?? formatMessage(commonMessages.loadingLabel),
 	to: () =>
 		`/instance/${encodeURIComponent(String(displayedInstanceRoute.value.params.id ?? ''))}`,
 })

From 1bbee0564a2bbdc6031bf583b2eeb042f0150f4d Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 18:57:29 +0100
Subject: [PATCH 04/11] fix: qa

---
 apps/app-frontend/src/pages/User.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app-frontend/src/pages/User.vue b/apps/app-frontend/src/pages/User.vue
index d6ecd4c17e..48b80fbd49 100644
--- a/apps/app-frontend/src/pages/User.vue
+++ b/apps/app-frontend/src/pages/User.vue
@@ -24,7 +24,7 @@ import {
 	get_user_projects,
 	patch_user,
 } from '@/helpers/users'
-import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+import { useBreadcrumb } from '@/providers/breadcrumbs'
 
 const route = useRoute()
 const queryClient = useQueryClient()
@@ -66,8 +66,8 @@ watch(
 	{ immediate: true, flush: 'sync' },
 )
 
-useRootBreadcrumb({
-	slot: 'root',
+useBreadcrumb({
+	slot: 'user',
 	id: () => `user:${breadcrumbUserId.value}`,
 	label: breadcrumbLabel,
 	to: breadcrumbTo,

From 9cf351e6bc882f8ed073510ff8c41c20c69e347a Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 19:02:17 +0100
Subject: [PATCH 05/11] fix: qa

---
 packages/ui/src/layouts/shared/browse-tab/layout.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index f4215569ce..c407a9be94 100644
--- a/packages/ui/src/layouts/shared/browse-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -107,7 +107,11 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 	</template>
 	<SelectedProjectsFloatingBar v-if="ctx.installContext?.value && ctx.variant !== 'web'" />
 
-	<NavTabs v-if="ctx.showProjectTypeTabs.value" :links="ctx.selectableProjectTypes.value" />
+	<NavTabs
+		v-if="ctx.showProjectTypeTabs.value"
+		:links="ctx.selectableProjectTypes.value"
+		:replace="ctx.variant === 'app'"
+	/>
 
 	<StyledInput
 		v-model="ctx.query.value"

From 65efc25d156393012a48a370d35f85fcbc80156a Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 19:11:45 +0100
Subject: [PATCH 06/11] fix: loading flashes

---
 .../src/components/ui/QuickInstanceSwitcher.vue   |  6 ++++++
 apps/app-frontend/src/pages/instance/Index.vue    |  8 +++++++-
 apps/app-frontend/src/pages/project/Index.vue     |  6 ++----
 .../ui/src/layouts/shared/user-profile/layout.vue | 15 +++++++++++++++
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
index 851cf1be0e..81504fd3da 100644
--- a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
+++ b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { SpinnerIcon } from '@modrinth/assets'
 import { Avatar, injectNotificationManager } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { onUnmounted, ref } from 'vue'
@@ -10,11 +11,16 @@ import { instance_listener } from '@/helpers/events.js'
 import { list } from '@/helpers/instance'
 
 const { handleError } = injectNotificationManager()
+const queryClient = useQueryClient()
 
 const recentInstances = ref([])
 const getInstances = async () => {
 	const instances = await list().catch(handleError)
 
+	for (const instance of instances) {
+		queryClient.setQueryData(['instances', 'summary', instance.id], instance)
+	}
+
 	recentInstances.value = instances
 		.sort((a, b) => {
 			const dateACreated = dayjs(a.created)
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index b0990749c4..9e2b27a89d 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -226,7 +226,10 @@ window.addEventListener('online', () => {
 	offline.value = false
 })
 
-const instance = ref<GameInstance>()
+const initialInstanceId = String(displayedInstanceRoute.value.params.id ?? '')
+const instance = ref<GameInstance | undefined>(
+	queryClient.getQueryData<GameInstance>(['instances', 'summary', initialInstanceId]),
+)
 const instanceBreadcrumb = useRootBreadcrumb({
 	slot: 'instance',
 	id: () => `instance:${String(displayedInstanceRoute.value.params.id ?? '')}`,
@@ -387,6 +390,9 @@ async function fetchInstance() {
 	}
 
 	instance.value = nextInstance ?? undefined
+	if (nextInstance) {
+		queryClient.setQueryData(['instances', 'summary', nextInstance.id], nextInstance)
+	}
 	displayedInstanceRoute.value = nextRoute
 	sharedInstanceState.reset()
 	sharedInstanceState.refreshAvailability()
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 12ad6a059b..b407a1c881 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -350,10 +350,8 @@ function getProjectBreadcrumbLabel(projectId) {
 		return formatMessage(commonMessages.loadingLabel)
 	}
 
-	return (
-		queryClient.getQueryData(['projects', 'summary', identifier])?.name ??
-		formatMessage(commonMessages.loadingLabel)
-	)
+	const summary = queryClient.getQueryData(['projects', 'summary', identifier])
+	return summary?.name ?? summary?.title ?? formatMessage(commonMessages.loadingLabel)
 }
 
 const projectBreadcrumbLabel = ref(getProjectBreadcrumbLabel(route.params.id))
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index 6ba0cdf85d..c2e0d7fd30 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -642,6 +642,21 @@ const projects = computed<ResolvedProject[]>(() =>
 		resolvedProjectType: resolveProjectType(project, tags?.loaders.value ?? []),
 	})),
 )
+watch(
+	() => projectsQuery.data.value,
+	(projects) => {
+		if (props.projectLinkMode !== 'app') return
+
+		for (const project of projects ?? []) {
+			for (const identifier of [project.id, project.slug]) {
+				if (identifier) {
+					queryClient.setQueryData(['projects', 'summary', identifier], project)
+				}
+			}
+		}
+	},
+	{ immediate: true },
+)
 const organizations = computed(() => organizationsQuery.data.value ?? [])
 const collections = computed(() => collectionsQuery.data.value ?? [])
 

From c20a3509466e75493970836517ac34f6e801f6d4 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 19:28:15 +0100
Subject: [PATCH 07/11] fix: qa

---
 apps/app-frontend/src/App.vue                 |  53 ++++++---
 .../src/components/ui/Breadcrumbs.vue         |  68 ++++++++----
 apps/app-frontend/src/pages/Browse.vue        | 101 +++++++++---------
 apps/app-frontend/src/pages/Index.vue         |   2 +
 apps/app-frontend/src/pages/Servers.vue       |   2 +
 apps/app-frontend/src/pages/Skins.vue         |   2 +
 apps/app-frontend/src/pages/User.vue          |  14 ++-
 apps/app-frontend/src/pages/Worlds.vue        |   3 +
 .../src/pages/hosting/manage/Index.vue        |   2 +
 .../app-frontend/src/pages/instance/Index.vue |  42 ++------
 apps/app-frontend/src/pages/library/Index.vue |   3 +-
 .../src/pages/project/Gallery.vue             |  11 --
 apps/app-frontend/src/pages/project/Index.vue |  50 +++++++--
 .../src/pages/project/Version.vue             |  41 ++-----
 .../src/pages/project/Versions.vue            |  27 +----
 .../app-frontend/src/providers/breadcrumbs.ts |  17 +++
 16 files changed, 241 insertions(+), 197 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 3625fb0545..5500bdf137 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -11,10 +11,11 @@ import {
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
+	ChevronLeftIcon,
+	ChevronRightIcon,
 	CompassIcon,
 	ExternalIcon,
 	HomeIcon,
-	LeftArrowIcon,
 	LibraryIcon,
 	LogInIcon,
 	LogOutIcon,
@@ -163,6 +164,17 @@ const router = useRouter()
 const route = useRoute()
 const breadcrumbManager = createBreadcrumbManager()
 provideBreadcrumbManager(breadcrumbManager)
+const canNavigateBack = ref(false)
+const canNavigateForward = ref(false)
+
+function updateHistoryNavigationState() {
+	const historyState = window.history.state
+	canNavigateBack.value = historyState?.back != null
+	canNavigateForward.value = historyState?.forward != null
+}
+
+updateHistoryNavigationState()
+
 const APP_LEFT_NAV_WIDTH = '4rem'
 const APP_SIDEBAR_WIDTH = 300
 const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
@@ -626,6 +638,7 @@ router.beforeEach(() => {
 	routerToken = loading.begin()
 })
 router.afterEach((to, from, failure) => {
+	updateHistoryNavigationState()
 	trackEvent('PageView', {
 		path: to.path,
 		fromPath: from.path,
@@ -1697,23 +1710,31 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</NavButton>
 		</div>
 		<div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
-			<div data-tauri-drag-region class="flex min-w-0 flex-1 overflow-hidden p-3">
+			<div data-tauri-drag-region class="flex min-w-0 flex-1 items-center overflow-hidden p-2">
 				<ModrinthAppLogo class="h-full w-auto shrink-0 text-contrast pointer-events-none" />
-				<div data-tauri-drag-region class="flex shrink-0 items-center gap-1 ml-3">
-					<button
-						class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
-						@click="router.back()"
-					>
-						<LeftArrowIcon />
-					</button>
-					<button
-						class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
-						@click="router.forward()"
-					>
-						<RightArrowIcon />
-					</button>
+				<div data-tauri-drag-region class="ml-4 flex shrink-0 items-center gap-2">
+					<ButtonStyled type="outlined" circular>
+						<button
+							class="!h-8 !min-w-8 !w-8 !border !border-surface-4 !p-0"
+							:disabled="!canNavigateBack"
+							aria-label="Go back"
+							@click="router.back()"
+						>
+							<ChevronLeftIcon class="!size-4 !text-primary" />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled type="outlined" circular>
+						<button
+							class="!h-8 !min-w-8 !w-8 !border !border-surface-4 !p-0"
+							:disabled="!canNavigateForward"
+							aria-label="Go forward"
+							@click="router.forward()"
+						>
+							<ChevronRightIcon class="!size-4 !text-primary" />
+						</button>
+					</ButtonStyled>
 				</div>
-				<Breadcrumbs class="pt-[2px]" />
+				<Breadcrumbs />
 			</div>
 			<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
 				<ButtonStyled
diff --git a/apps/app-frontend/src/components/ui/Breadcrumbs.vue b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
index 7049ac7d46..bc5cdbf479 100644
--- a/apps/app-frontend/src/components/ui/Breadcrumbs.vue
+++ b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
@@ -2,7 +2,7 @@
 	<div
 		ref="outerRef"
 		data-tauri-drag-region
-		class="min-w-0 overflow-hidden pl-3"
+		class="min-w-0 overflow-hidden pl-4"
 		:class="{ 'breadcrumb-fade-mask': isOverflowing }"
 		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
 		@mouseenter="onMouseEnter"
@@ -11,29 +11,55 @@
 		<div
 			ref="innerRef"
 			data-tauri-drag-region
-			class="flex w-fit items-center gap-1"
+			class="flex w-fit items-center gap-2 pr-4"
 			:class="{ 'breadcrumbs-scroll': isAnimating }"
 			@animationiteration="onAnimationIteration"
 		>
 			<template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.slot">
-				<router-link
-					v-if="index < breadcrumbs.length - 1 && breadcrumb.to"
-					:to="breadcrumb.to"
-					class="shrink-0 whitespace-nowrap text-primary"
+				<component
+					:is="
+						index < breadcrumbs.length - 1 && breadcrumb.to ? RouterLink : 'span'
+					"
+					v-bind="
+						index < breadcrumbs.length - 1 && breadcrumb.to
+							? { to: breadcrumb.to }
+							: {}
+					"
+					:data-tauri-drag-region="
+						index === breadcrumbs.length - 1 ? '' : undefined
+					"
+					class="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-base font-medium leading-6"
+					:class="
+						index === breadcrumbs.length - 1
+							? 'cursor-default select-none text-contrast'
+							: 'text-primary hover:text-contrast'
+					"
+					:aria-current="index === breadcrumbs.length - 1 ? 'page' : undefined"
 				>
-					{{ breadcrumb.label }}
-				</router-link>
-				<span
-					v-else
-					data-tauri-drag-region
-					class="shrink-0 whitespace-nowrap text-contrast font-semibold cursor-default select-none"
-				>
-					{{ breadcrumb.label }}
-				</span>
+					<Avatar
+						v-if="breadcrumb.visual?.type === 'image'"
+						:src="breadcrumb.visual.src"
+						:alt="breadcrumb.visual.alt ?? breadcrumb.label"
+						:circle="breadcrumb.visual.circle"
+						:tint-by="breadcrumb.visual.tintBy ?? breadcrumb.id"
+						size="20px"
+						no-shadow
+						raised
+						class="inline-block shrink-0 align-middle"
+						:class="{ '!rounded-md': !breadcrumb.visual.circle }"
+					/>
+					<component
+						:is="breadcrumb.visual.component"
+						v-else-if="breadcrumb.visual?.type === 'icon'"
+						class="size-5 shrink-0 text-primary"
+						aria-hidden="true"
+					/>
+					<span>{{ breadcrumb.label }}</span>
+				</component>
 				<ChevronRightIcon
 					v-if="index < breadcrumbs.length - 1"
 					data-tauri-drag-region
-					class="w-5 h-5 shrink-0"
+					class="size-5 shrink-0 text-primary"
 				/>
 			</template>
 		</div>
@@ -42,7 +68,9 @@
 
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
+import { Avatar } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { RouterLink } from 'vue-router'
 
 import { injectBreadcrumbManager } from '@/providers/breadcrumbs'
 
@@ -60,9 +88,13 @@ let stopping = false
 
 function checkOverflow() {
 	if (!outerRef.value || !innerRef.value) return
-	const overflow = innerRef.value.scrollWidth - outerRef.value.clientWidth
+	const outerStyles = window.getComputedStyle(outerRef.value)
+	const horizontalPadding =
+		Number.parseFloat(outerStyles.paddingLeft) + Number.parseFloat(outerStyles.paddingRight)
+	const availableWidth = outerRef.value.clientWidth - horizontalPadding
+	const overflow = innerRef.value.scrollWidth - availableWidth
 	isOverflowing.value = overflow > 0
-	overflowAmount.value = overflow + 12
+	overflowAmount.value = overflow
 }
 
 function onMouseEnter() {
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index cbd4b75707..f5abd2be0a 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -3,9 +3,11 @@ import type { Labrinth } from '@modrinth/api-client'
 import {
 	CheckIcon,
 	ClipboardCopyIcon,
+	CompassIcon,
 	ExternalIcon,
 	GlobeIcon,
 	PlusIcon,
+	ServerStackIcon,
 	SpinnerIcon,
 } from '@modrinth/assets'
 import type { BrowseInstallContentType, CardAction, ProjectType, Tags } from '@modrinth/ui'
@@ -15,6 +17,7 @@ import {
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
+	formatProjectTypeSentence,
 	getLatestMatchingInstallVersion,
 	getSelectedInstallPreferences,
 	getTargetInstallPreferences,
@@ -59,6 +62,7 @@ import {
 	provideServerInstallContent,
 } from '@/providers/setup/server-install-content'
 import {
+	type BreadcrumbDefinition,
 	useBreadcrumb,
 	useRootBreadcrumb,
 } from '@/providers/breadcrumbs'
@@ -84,6 +88,30 @@ watch(
 	},
 	{ immediate: true },
 )
+const breadcrumbMessages = defineMessages({
+	discoverProjectType: {
+		id: 'app.browse.discover-project-type',
+		defaultMessage: 'Discover {projectType}',
+	},
+	discoverServers: {
+		id: 'app.browse.discover-servers',
+		defaultMessage: 'Discover servers',
+	},
+})
+const breadcrumbLabel = computed(() => {
+	const browseRoute = displayedBrowseRoute.value
+	if (browseRoute.query.from === 'worlds' || browseRoute.params.projectType === 'server') {
+		return formatMessage(breadcrumbMessages.discoverServers)
+	}
+
+	return formatMessage(breadcrumbMessages.discoverProjectType, {
+		projectType: formatProjectTypeSentence(
+			formatMessage,
+			String(browseRoute.params.projectType ?? ''),
+			2,
+		),
+	})
+})
 const themeStore = useTheming()
 const browseRouteActive = computed(() => route.path.startsWith('/browse/'))
 const serverSetupModalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
@@ -138,7 +166,10 @@ type Instance = {
 	}
 }
 
-const instance: Ref<Instance | null> = ref(null)
+const initialInstanceId = String(route.query.i ?? '')
+const instance: Ref<Instance | null> = ref(
+	queryClient.getQueryData<Instance>(['instances', 'summary', initialInstanceId]) ?? null,
+)
 const installedProjectIds: Ref<string[] | null> = ref(null)
 const instanceHideInstalled = ref(false)
 const newlyInstalled = ref<string[]>([])
@@ -146,41 +177,26 @@ const hiddenInstanceProjectIds = ref<Set<string>>(new Set())
 const hiddenInstanceProjectIdsInitialized = ref(false)
 const isServerInstance = ref(false)
 
-const breadcrumbLabel = ref(
-	displayedBrowseRoute.value.query.from === 'worlds'
-		? 'Discover servers'
-		: 'Discover content',
-)
 const instanceBreadcrumb = route.query.i
 	? useBreadcrumb({
 			slot: 'instance',
 			id: () => `instance:${String(displayedBrowseRoute.value.query.i ?? '')}`,
 			label: () => instance.value?.name ?? formatMessage(commonMessages.loadingLabel),
-			to: () =>
-				`/instance/${encodeURIComponent(String(displayedBrowseRoute.value.query.i ?? ''))}`,
-		})
-	: undefined
-const instanceSectionBreadcrumb = instanceBreadcrumb
-	? useBreadcrumb(
-			{
-				slot: 'instance-section',
-				id: () =>
-					`instance-section:${String(displayedBrowseRoute.value.query.i ?? '')}:${
-						displayedBrowseRoute.value.query.from === 'worlds' ? 'worlds' : 'content'
-					}`,
-				label: () =>
-					displayedBrowseRoute.value.query.from === 'worlds' ? 'Worlds' : 'Content',
-				to: () => {
-					const instancePath = `/instance/${encodeURIComponent(
-						String(displayedBrowseRoute.value.query.i ?? ''),
-					)}`
-					return displayedBrowseRoute.value.query.from === 'worlds'
-						? `${instancePath}/worlds`
-						: instancePath
-				},
+			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
 			},
-			{ parent: instanceBreadcrumb },
-		)
+		})
 	: undefined
 const serverBreadcrumbTo = ref(serverBackUrl.value)
 watch(serverBackUrl, (value) => {
@@ -194,10 +210,11 @@ const serverBreadcrumb = !instanceBreadcrumb && serverIdQuery.value
 			id: () => `server:${String(displayedBrowseRoute.value.query.sid ?? '')}`,
 			label: () =>
 				serverContextServerData.value?.name ?? formatMessage(commonMessages.loadingLabel),
+			visual: { type: 'icon', component: ServerStackIcon },
 			to: serverBreadcrumbTo,
 		})
 	: undefined
-const breadcrumbParent = instanceSectionBreadcrumb ?? serverBreadcrumb
+const breadcrumbParent = instanceBreadcrumb ?? serverBreadcrumb
 const breadcrumbDefinition = {
 	slot: 'browse',
 	id: () =>
@@ -208,7 +225,8 @@ const breadcrumbDefinition = {
 		)}`,
 	label: breadcrumbLabel,
 	to: () => displayedBrowseRoute.value.fullPath,
-}
+	visual: { type: 'icon', component: CompassIcon },
+} satisfies BreadcrumbDefinition
 const browseBreadcrumb = breadcrumbParent
 	? useBreadcrumb(breadcrumbDefinition, { parent: breadcrumbParent })
 	: useRootBreadcrumb(breadcrumbDefinition)
@@ -465,14 +483,6 @@ const messages = defineMessages({
 		id: 'app.browse.add-to-an-instance',
 		defaultMessage: 'Add to an instance',
 	},
-	discoverContent: {
-		id: 'app.browse.discover-content',
-		defaultMessage: 'Discover content',
-	},
-	discoverServers: {
-		id: 'app.browse.discover-servers',
-		defaultMessage: 'Discover servers',
-	},
 	environmentProvidedByServer: {
 		id: 'search.filter.locked.server-environment.title',
 		defaultMessage: 'Only client-side mods can be added to the server instance',
@@ -528,17 +538,6 @@ const messages = defineMessages({
 	},
 })
 
-const browseTitle = computed(() =>
-	formatMessage(isFromWorlds.value ? messages.discoverServers : messages.discoverContent),
-)
-watch(
-	browseTitle,
-	(value) => {
-		breadcrumbLabel.value = value
-	},
-	{ immediate: true },
-)
-
 const projectType = ref<ProjectType>(route.params.projectType as ProjectType)
 
 function resetInstanceContext() {
diff --git a/apps/app-frontend/src/pages/Index.vue b/apps/app-frontend/src/pages/Index.vue
index 69daee0f1a..01304cbce7 100644
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { HomeIcon } from '@modrinth/assets'
 import { injectNotificationManager } from '@modrinth/ui'
 import type { SearchResult } from '@modrinth/utils'
 import dayjs from 'dayjs'
@@ -19,6 +20,7 @@ useRootBreadcrumb({
 	id: 'home',
 	label: 'Home',
 	to: '/',
+	visual: { type: 'icon', component: HomeIcon },
 })
 
 const instances = ref<GameInstance[]>([])
diff --git a/apps/app-frontend/src/pages/Servers.vue b/apps/app-frontend/src/pages/Servers.vue
index 5302eb3133..d260e70060 100644
--- a/apps/app-frontend/src/pages/Servers.vue
+++ b/apps/app-frontend/src/pages/Servers.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
+import { ServerStackIcon } from '@modrinth/assets'
 import { injectModrinthClient, ServersManagePageIndex } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
@@ -17,6 +18,7 @@ useRootBreadcrumb({
 	id: 'servers',
 	label: 'Servers',
 	to: '/hosting/manage/',
+	visual: { type: 'icon', component: ServerStackIcon },
 })
 
 const { data: products } = useQuery({
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index 768098f90f..64567a21f9 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+	ChangeSkinIcon,
 	CheckIcon,
 	EditIcon,
 	ExcitedRinthbot,
@@ -65,6 +66,7 @@ useRootBreadcrumb({
 	id: 'skins',
 	label: 'Skin selector',
 	to: '/skins',
+	visual: { type: 'icon', component: ChangeSkinIcon },
 })
 
 type UnlistenFn = () => void
diff --git a/apps/app-frontend/src/pages/User.vue b/apps/app-frontend/src/pages/User.vue
index 48b80fbd49..9bfcf38570 100644
--- a/apps/app-frontend/src/pages/User.vue
+++ b/apps/app-frontend/src/pages/User.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import { provideUserProfile, UserProfilePageLayout } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
@@ -45,6 +46,10 @@ const projectType = computed(() => {
 	return Array.isArray(value) ? value[0] : value
 })
 
+function getCachedUserSummary(id: string) {
+	return queryClient.getQueryData<Labrinth.Users.v3.User>(['users', 'summary', id])
+}
+
 const { data: user } = useQuery({
 	queryKey: computed(() => ['user', userId.value]),
 	queryFn: () => userProfile.getUser(userId.value),
@@ -53,7 +58,7 @@ const { data: user } = useQuery({
 })
 
 const breadcrumbUserId = ref(userId.value)
-const breadcrumbLabel = ref(userId.value)
+const breadcrumbLabel = ref(getCachedUserSummary(userId.value)?.username ?? userId.value)
 const breadcrumbTo = ref(route.fullPath)
 watch(
 	[userId, user, () => route.fullPath],
@@ -71,6 +76,13 @@ useBreadcrumb({
 	id: () => `user:${breadcrumbUserId.value}`,
 	label: breadcrumbLabel,
 	to: breadcrumbTo,
+	visual: () => ({
+		type: 'image',
+		src: user.value?.avatar_url ?? getCachedUserSummary(breadcrumbUserId.value)?.avatar_url,
+		alt: breadcrumbLabel.value,
+		circle: true,
+		tintBy: breadcrumbUserId.value,
+	}),
 })
 
 async function ensureUserProfileData(id: string): Promise<void> {
diff --git a/apps/app-frontend/src/pages/Worlds.vue b/apps/app-frontend/src/pages/Worlds.vue
index 1ba23658b8..559d890457 100644
--- a/apps/app-frontend/src/pages/Worlds.vue
+++ b/apps/app-frontend/src/pages/Worlds.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { WorldIcon } from '@modrinth/assets'
+
 import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 
 useRootBreadcrumb({
@@ -6,6 +8,7 @@ useRootBreadcrumb({
 	id: 'worlds',
 	label: 'Worlds',
 	to: '/worlds',
+	visual: { type: 'icon', component: WorldIcon },
 })
 </script>
 <template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index eef66f4e16..dad4aeb118 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -48,6 +48,7 @@
 
 <script setup lang="ts">
 import type { Archon, Labrinth } from '@modrinth/api-client'
+import { ServerStackIcon } from '@modrinth/assets'
 import {
 	commonMessages,
 	injectAuth,
@@ -127,6 +128,7 @@ const serverBreadcrumb = useBreadcrumb({
 	slot: 'server',
 	id: () => `server:${breadcrumbServerId.value}`,
 	label: breadcrumbLabel,
+	visual: { type: 'icon', component: ServerStackIcon },
 	to: () => `/hosting/manage/${encodeURIComponent(breadcrumbServerId.value)}`,
 })
 provideBreadcrumbParent(serverBreadcrumb)
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 9e2b27a89d..cd9fcdec63 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -194,11 +194,7 @@ import { createInstanceShortcut, showInstanceInFolder } from '@/helpers/utils.js
 import { refreshWorlds, type ServerStatus } from '@/helpers/worlds'
 import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
-import {
-	provideBreadcrumbParent,
-	useBreadcrumb,
-	useRootBreadcrumb,
-} from '@/providers/breadcrumbs'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/state'
 
 import { provideSharedInstanceState, useSharedInstanceState } from './use-shared-instance-state'
@@ -230,41 +226,19 @@ const initialInstanceId = String(displayedInstanceRoute.value.params.id ?? '')
 const instance = ref<GameInstance | undefined>(
 	queryClient.getQueryData<GameInstance>(['instances', 'summary', initialInstanceId]),
 )
-const instanceBreadcrumb = useRootBreadcrumb({
+useRootBreadcrumb({
 	slot: 'instance',
 	id: () => `instance:${String(displayedInstanceRoute.value.params.id ?? '')}`,
 	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: instance.value?.id ?? String(displayedInstanceRoute.value.params.id ?? ''),
+	}),
 	to: () =>
 		`/instance/${encodeURIComponent(String(displayedInstanceRoute.value.params.id ?? ''))}`,
 })
-provideBreadcrumbParent(instanceBreadcrumb)
-
-const instanceSection = computed(() => {
-	switch (displayedInstanceRoute.value.name) {
-		case 'InstanceWorlds':
-			return { id: 'worlds', label: 'Worlds' }
-		case 'InstanceShare':
-			return { id: 'share', label: 'Share' }
-		case 'Files':
-			return { id: 'files', label: 'Files' }
-		case 'Logs':
-			return { id: 'logs', label: 'Logs' }
-		default:
-			return { id: 'content', label: 'Content' }
-	}
-})
-useBreadcrumb(
-	{
-		slot: 'instance-section',
-		id: () =>
-			`instance-section:${String(displayedInstanceRoute.value.params.id ?? '')}:${
-				instanceSection.value.id
-			}`,
-		label: () => instanceSection.value.label,
-		to: () => displayedInstanceRoute.value.fullPath,
-	},
-	{ parent: instanceBreadcrumb },
-)
 
 const preloadedContent = ref<InstanceContentData | null>(null)
 const playing = ref(false)
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index cb2f562d1c..91c73abcd2 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PlusIcon } from '@modrinth/assets'
+import { LibraryIcon, PlusIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, NavTabs } from '@modrinth/ui'
 import { inject, onUnmounted, ref, shallowRef } from 'vue'
 import { useRoute } from 'vue-router'
@@ -18,6 +18,7 @@ useRootBreadcrumb({
 	id: 'library',
 	label: 'Library',
 	to: '/library',
+	visual: { type: 'icon', component: LibraryIcon },
 })
 
 const instances = shallowRef(await list().catch(handleError))
diff --git a/apps/app-frontend/src/pages/project/Gallery.vue b/apps/app-frontend/src/pages/project/Gallery.vue
index 2fdaf09524..05a771f927 100644
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -95,7 +95,6 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { trackEvent } from '@/helpers/analytics'
-import { useBreadcrumb } from '@/providers/breadcrumbs'
 
 const MC_SERVER_BANNER_NAME = '__mc_server_banner__'
 
@@ -112,16 +111,6 @@ const props = defineProps({
 	},
 })
 
-useBreadcrumb({
-	slot: 'project-section',
-	id: () => `project-gallery:${props.project?.id ?? ''}`,
-	label: 'Gallery',
-	to: () => ({
-		name: 'Gallery',
-		params: { id: props.project?.id ?? '' },
-	}),
-})
-
 const filteredGallery = computed(
 	() => props.project.gallery?.filter((img) => img.title !== MC_SERVER_BANNER_NAME) ?? [],
 )
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index b407a1c881..82df01d184 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -320,6 +320,18 @@ watch(
 	},
 	{ immediate: true },
 )
+const projectBreadcrumbTo = computed(() => {
+	const currentRoute = displayedProjectRoute.value
+	if (currentRoute.name === 'Version') {
+		return {
+			name: 'Versions',
+			params: { id: currentRoute.params.id },
+			query: currentRoute.query,
+		}
+	}
+
+	return currentRoute.fullPath
+})
 const queryClient = useQueryClient()
 const themeStore = useTheming()
 const { formatMessage } = useVIntl()
@@ -344,13 +356,15 @@ const { installingServerProjects, playServerProject, showAddServerToInstanceModa
 const installing = ref(false)
 const data = shallowRef(null)
 
-function getProjectBreadcrumbLabel(projectId) {
+function getProjectBreadcrumbSummary(projectId) {
 	const identifier = Array.isArray(projectId) ? projectId[0] : projectId
-	if (typeof identifier !== 'string' || !identifier) {
-		return formatMessage(commonMessages.loadingLabel)
-	}
+	if (typeof identifier !== 'string' || !identifier) return undefined
+
+	return queryClient.getQueryData(['projects', 'summary', identifier])
+}
 
-	const summary = queryClient.getQueryData(['projects', 'summary', identifier])
+function getProjectBreadcrumbLabel(projectId) {
+	const summary = getProjectBreadcrumbSummary(projectId)
 	return summary?.name ?? summary?.title ?? formatMessage(commonMessages.loadingLabel)
 }
 
@@ -359,11 +373,19 @@ const projectBreadcrumb = useBreadcrumb({
 	slot: 'project',
 	id: () => `project:${String(displayedProjectRoute.value.params.id ?? '')}`,
 	label: projectBreadcrumbLabel,
-	to: () => ({
-		name: 'Description',
-		params: { id: displayedProjectRoute.value.params.id },
-		query: displayedProjectRoute.value.query,
-	}),
+	visual: () => {
+		const identifier = String(displayedProjectRoute.value.params.id ?? '')
+		const loadedProject =
+			data.value?.id === identifier || data.value?.slug === identifier ? data.value : undefined
+		const project = loadedProject ?? getProjectBreadcrumbSummary(identifier)
+		return {
+			type: 'image',
+			src: project?.icon_url,
+			alt: projectBreadcrumbLabel.value,
+			tintBy: identifier,
+		}
+	},
+	to: projectBreadcrumbTo,
 })
 provideBreadcrumbParent(projectBreadcrumb)
 
@@ -666,6 +688,14 @@ async function fetchProjectData() {
 			route.query.i ? getInstanceProjects(route.query.i).catch(handleError) : Promise.resolve(),
 		])
 
+	for (const member of members.value ?? []) {
+		for (const identifier of [member.user.id, member.user.username]) {
+			if (identifier) {
+				queryClient.setQueryData(['users', 'summary', identifier], member.user)
+			}
+		}
+	}
+
 	versions.value = versions.value.sort((a, b) => dayjs(b.date_published) - dayjs(a.date_published))
 
 	if (instanceProjects.value) {
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index 9dbe7c502c..3faf112350 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -85,6 +85,7 @@ import {
 	ExternalIcon,
 	MoreVerticalIcon,
 	ReportIcon,
+	VersionIcon,
 } from '@modrinth/assets'
 import {
 	ButtonStyled,
@@ -144,38 +145,18 @@ 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 versionNumber = version.value?.version_number
+	const versionLabel = formatMessage(commonMessages.versionLabel)
+	return versionNumber ? `${versionLabel} ${versionNumber}` : versionLabel
 })
-const versionsBreadcrumb = useBreadcrumb({
-	slot: 'project-section',
-	id: () => `project-versions:${props.project.id}`,
-	label: 'Versions',
-	to: () => ({
-		name: 'Versions',
-		params: { id: props.project.id },
-		query: displayedVersionRoute.value.query,
-	}),
+useBreadcrumb({
+	slot: 'project-version',
+	id: () =>
+		`version:${props.project.id}:${String(displayedVersionRoute.value.params.version ?? '')}`,
+	label: versionBreadcrumbLabel,
+	visual: { type: 'icon', component: VersionIcon },
+	to: () => displayedVersionRoute.value.fullPath,
 })
-useBreadcrumb(
-	{
-		slot: 'project-version',
-		id: () =>
-			`version:${props.project.id}:${String(
-				displayedVersionRoute.value.params.version ?? '',
-			)}`,
-		label: versionBreadcrumbLabel,
-		to: () => displayedVersionRoute.value.fullPath,
-	},
-	{ parent: versionsBreadcrumb },
-)
 
 const enrichment = ref<Labrinth.Projects.v2.DependencyInfo | undefined>(undefined)
 const enrichmentLoading = ref(false)
diff --git a/apps/app-frontend/src/pages/project/Versions.vue b/apps/app-frontend/src/pages/project/Versions.vue
index 7180a70c43..05fb8a2cf3 100644
--- a/apps/app-frontend/src/pages/project/Versions.vue
+++ b/apps/app-frontend/src/pages/project/Versions.vue
@@ -82,12 +82,11 @@ import {
 	ProjectPageVersions,
 	useVIntl,
 } from '@modrinth/ui'
-import { ref, shallowRef, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
 import { SwapIcon } from '@/assets/icons/index.js'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
-import { useBreadcrumb } from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/theme.ts'
 
 const { formatMessage } = useVIntl()
@@ -133,28 +132,6 @@ const props = defineProps({
 
 const { handleError } = injectNotificationManager()
 const route = useRoute()
-const router = useRouter()
-const displayedVersionsRoute = shallowRef(router.currentRoute.value)
-watch(
-	() => router.currentRoute.value,
-	(nextRoute) => {
-		if (nextRoute.name === 'Versions') {
-			displayedVersionsRoute.value = nextRoute
-		}
-	},
-	{ immediate: true },
-)
-
-useBreadcrumb({
-	slot: 'project-section',
-	id: () => `project-versions:${props.project?.id ?? ''}`,
-	label: 'Versions',
-	to: () => ({
-		name: 'Versions',
-		params: { id: props.project?.id ?? route.params.id },
-		query: displayedVersionsRoute.value.query,
-	}),
-})
 
 function buildProjectHref(path) {
 	const params = new URLSearchParams()
diff --git a/apps/app-frontend/src/providers/breadcrumbs.ts b/apps/app-frontend/src/providers/breadcrumbs.ts
index 69f02e22f0..14a5b77436 100644
--- a/apps/app-frontend/src/providers/breadcrumbs.ts
+++ b/apps/app-frontend/src/providers/breadcrumbs.ts
@@ -1,6 +1,7 @@
 import { createContext } from '@modrinth/ui'
 import {
 	computed,
+	type Component,
 	type MaybeRefOrGetter,
 	type ComputedRef,
 	shallowRef,
@@ -9,11 +10,25 @@ import {
 } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
+export type BreadcrumbVisual =
+	| {
+			type: 'icon'
+			component: Component
+	  }
+	| {
+			type: 'image'
+			src?: string | null
+			alt?: string
+			circle?: boolean
+			tintBy?: string | null
+	  }
+
 export interface BreadcrumbDefinition {
 	slot: string
 	id: MaybeRefOrGetter<string>
 	label: MaybeRefOrGetter<string>
 	to?: MaybeRefOrGetter<RouteLocationRaw | undefined>
+	visual?: MaybeRefOrGetter<BreadcrumbVisual | undefined>
 }
 
 export interface ResolvedBreadcrumb {
@@ -21,6 +36,7 @@ export interface ResolvedBreadcrumb {
 	id: string
 	label: string
 	to?: RouteLocationRaw
+	visual?: BreadcrumbVisual
 }
 
 export interface BreadcrumbHandle {
@@ -158,6 +174,7 @@ export function createBreadcrumbManager(): BreadcrumbManager {
 			id: toValue(definition.id),
 			label: toValue(definition.label),
 			to: definition.to === undefined ? undefined : toValue(definition.to),
+			visual: definition.visual === undefined ? undefined : toValue(definition.visual),
 		})),
 	)
 

From adc2c14c5eb859c26282f85e47d0f3819a61306a Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 19:29:06 +0100
Subject: [PATCH 08/11] fix: prepr

---
 apps/app-frontend/src/App.vue                 |  5 +--
 .../src/components/ui/Breadcrumbs.vue         | 14 ++-------
 .../app-frontend/src/locales/ar-SA/index.json |  3 --
 .../app-frontend/src/locales/cs-CZ/index.json |  3 --
 .../app-frontend/src/locales/da-DK/index.json |  3 --
 .../app-frontend/src/locales/de-CH/index.json |  3 --
 .../app-frontend/src/locales/de-DE/index.json |  3 --
 .../app-frontend/src/locales/en-US/index.json |  4 +--
 .../src/locales/es-419/index.json             |  3 --
 .../app-frontend/src/locales/es-ES/index.json |  3 --
 .../app-frontend/src/locales/fi-FI/index.json |  3 --
 .../src/locales/fil-PH/index.json             |  3 --
 .../app-frontend/src/locales/fr-FR/index.json |  3 --
 .../app-frontend/src/locales/he-IL/index.json |  3 --
 .../app-frontend/src/locales/hu-HU/index.json |  3 --
 .../app-frontend/src/locales/id-ID/index.json |  3 --
 .../app-frontend/src/locales/it-IT/index.json |  3 --
 .../app-frontend/src/locales/ja-JP/index.json |  3 --
 .../app-frontend/src/locales/ko-KR/index.json |  3 --
 .../app-frontend/src/locales/ms-MY/index.json |  3 --
 .../app-frontend/src/locales/nl-NL/index.json |  3 --
 .../app-frontend/src/locales/no-NO/index.json |  3 --
 .../app-frontend/src/locales/pl-PL/index.json |  3 --
 .../app-frontend/src/locales/pt-BR/index.json |  3 --
 .../app-frontend/src/locales/pt-PT/index.json |  3 --
 .../app-frontend/src/locales/ru-RU/index.json |  3 --
 .../app-frontend/src/locales/sr-CS/index.json |  3 --
 .../app-frontend/src/locales/sv-SE/index.json |  3 --
 .../app-frontend/src/locales/th-TH/index.json |  3 --
 .../app-frontend/src/locales/tr-TR/index.json |  3 --
 .../app-frontend/src/locales/uk-UA/index.json |  3 --
 .../app-frontend/src/locales/vi-VN/index.json |  3 --
 .../app-frontend/src/locales/zh-CN/index.json |  3 --
 .../app-frontend/src/locales/zh-TW/index.json |  3 --
 apps/app-frontend/src/pages/Browse.vue        | 31 ++++++++++---------
 .../src/pages/hosting/manage/Index.vue        |  8 ++---
 .../app-frontend/src/pages/instance/Index.vue |  5 ++-
 apps/app-frontend/src/pages/project/Index.vue |  5 +--
 .../src/pages/project/Version.vue             | 15 ++++-----
 .../src/pages/project/Versions.vue            |  2 +-
 .../app-frontend/src/providers/breadcrumbs.ts | 20 ++++--------
 41 files changed, 40 insertions(+), 162 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 5500bdf137..0781ccf5af 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -138,11 +138,8 @@ import {
 	openAppUpdateChangelog,
 	setAppUpdateActions,
 } from '@/providers/app-update.ts'
+import { createBreadcrumbManager, provideBreadcrumbManager } from '@/providers/breadcrumbs'
 import { createContentInstall, provideContentInstall } from '@/providers/content-install'
-import {
-	createBreadcrumbManager,
-	provideBreadcrumbManager,
-} from '@/providers/breadcrumbs'
 import {
 	provideAppUpdateDownloadProgress,
 	subscribeToDownloadProgress,
diff --git a/apps/app-frontend/src/components/ui/Breadcrumbs.vue b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
index bc5cdbf479..7d97df4335 100644
--- a/apps/app-frontend/src/components/ui/Breadcrumbs.vue
+++ b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
@@ -17,17 +17,9 @@
 		>
 			<template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.slot">
 				<component
-					:is="
-						index < breadcrumbs.length - 1 && breadcrumb.to ? RouterLink : 'span'
-					"
-					v-bind="
-						index < breadcrumbs.length - 1 && breadcrumb.to
-							? { to: breadcrumb.to }
-							: {}
-					"
-					:data-tauri-drag-region="
-						index === breadcrumbs.length - 1 ? '' : undefined
-					"
+					:is="index < breadcrumbs.length - 1 && breadcrumb.to ? RouterLink : 'span'"
+					v-bind="index < breadcrumbs.length - 1 && breadcrumb.to ? { to: breadcrumb.to } : {}"
+					:data-tauri-drag-region="index === breadcrumbs.length - 1 ? '' : undefined"
 					class="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-base font-medium leading-6"
 					:class="
 						index === breadcrumbs.length - 1
diff --git a/apps/app-frontend/src/locales/ar-SA/index.json b/apps/app-frontend/src/locales/ar-SA/index.json
index bbfea3026d..98e663c7e7 100644
--- a/apps/app-frontend/src/locales/ar-SA/index.json
+++ b/apps/app-frontend/src/locales/ar-SA/index.json
@@ -233,9 +233,6 @@
   "app.browse.back-to-instance": {
     "message": "العودة للنموذج"
   },
-  "app.browse.discover-content": {
-    "message": "استكشف محتوى"
-  },
   "app.browse.discover-servers": {
     "message": "استكشف خوادم"
   },
diff --git a/apps/app-frontend/src/locales/cs-CZ/index.json b/apps/app-frontend/src/locales/cs-CZ/index.json
index 52a4a49944..16ad9f8663 100644
--- a/apps/app-frontend/src/locales/cs-CZ/index.json
+++ b/apps/app-frontend/src/locales/cs-CZ/index.json
@@ -164,9 +164,6 @@
   "app.browse.back-to-instance": {
     "message": "Zpět k instanci"
   },
-  "app.browse.discover-content": {
-    "message": "Objevit obsah"
-  },
   "app.browse.discover-servers": {
     "message": "Objevit servery"
   },
diff --git a/apps/app-frontend/src/locales/da-DK/index.json b/apps/app-frontend/src/locales/da-DK/index.json
index bec940663e..4c423a6862 100644
--- a/apps/app-frontend/src/locales/da-DK/index.json
+++ b/apps/app-frontend/src/locales/da-DK/index.json
@@ -218,9 +218,6 @@
   "app.browse.back-to-instance": {
     "message": "Tilbage til instance"
   },
-  "app.browse.discover-content": {
-    "message": "Opdag indhold"
-  },
   "app.browse.discover-servers": {
     "message": "Opdag servere"
   },
diff --git a/apps/app-frontend/src/locales/de-CH/index.json b/apps/app-frontend/src/locales/de-CH/index.json
index c38cea0f4a..4bed44d79a 100644
--- a/apps/app-frontend/src/locales/de-CH/index.json
+++ b/apps/app-frontend/src/locales/de-CH/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Zu Instanz zurückgehen"
   },
-  "app.browse.discover-content": {
-    "message": "Inhalte entdecken"
-  },
   "app.browse.discover-servers": {
     "message": "Server entdecken"
   },
diff --git a/apps/app-frontend/src/locales/de-DE/index.json b/apps/app-frontend/src/locales/de-DE/index.json
index 174d8afbe3..6d0c8a3172 100644
--- a/apps/app-frontend/src/locales/de-DE/index.json
+++ b/apps/app-frontend/src/locales/de-DE/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Zurück zur Instanz"
   },
-  "app.browse.discover-content": {
-    "message": "Inhalte entdecken"
-  },
   "app.browse.discover-servers": {
     "message": "Server entdecken"
   },
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index e85db4574d..78947e1b99 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -251,8 +251,8 @@
   "app.browse.back-to-instance": {
     "message": "Back to instance"
   },
-  "app.browse.discover-content": {
-    "message": "Discover content"
+  "app.browse.discover-project-type": {
+    "message": "Discover {projectType}"
   },
   "app.browse.discover-servers": {
     "message": "Discover servers"
diff --git a/apps/app-frontend/src/locales/es-419/index.json b/apps/app-frontend/src/locales/es-419/index.json
index 90dd37f992..8b3527f336 100644
--- a/apps/app-frontend/src/locales/es-419/index.json
+++ b/apps/app-frontend/src/locales/es-419/index.json
@@ -224,9 +224,6 @@
   "app.browse.back-to-instance": {
     "message": "Volver a instancia"
   },
-  "app.browse.discover-content": {
-    "message": "Descubrir contenido"
-  },
   "app.browse.discover-servers": {
     "message": "Descubrir servidores"
   },
diff --git a/apps/app-frontend/src/locales/es-ES/index.json b/apps/app-frontend/src/locales/es-ES/index.json
index 2cc03c5e9c..c548ba5d14 100644
--- a/apps/app-frontend/src/locales/es-ES/index.json
+++ b/apps/app-frontend/src/locales/es-ES/index.json
@@ -158,9 +158,6 @@
   "app.browse.back-to-instance": {
     "message": "Volver a la instancia"
   },
-  "app.browse.discover-content": {
-    "message": "Descubrir contenido"
-  },
   "app.browse.discover-servers": {
     "message": "Descubrir servidores"
   },
diff --git a/apps/app-frontend/src/locales/fi-FI/index.json b/apps/app-frontend/src/locales/fi-FI/index.json
index d9bf90d407..dd8bc83469 100644
--- a/apps/app-frontend/src/locales/fi-FI/index.json
+++ b/apps/app-frontend/src/locales/fi-FI/index.json
@@ -170,9 +170,6 @@
   "app.browse.back-to-instance": {
     "message": "Takaisin instanssiin"
   },
-  "app.browse.discover-content": {
-    "message": "Löydä sisältöä"
-  },
   "app.browse.discover-servers": {
     "message": "Löydä palvelimia"
   },
diff --git a/apps/app-frontend/src/locales/fil-PH/index.json b/apps/app-frontend/src/locales/fil-PH/index.json
index da6c9f032b..9775b8db1d 100644
--- a/apps/app-frontend/src/locales/fil-PH/index.json
+++ b/apps/app-frontend/src/locales/fil-PH/index.json
@@ -137,9 +137,6 @@
   "app.browse.back-to-instance": {
     "message": "Bumalik sa instansiya"
   },
-  "app.browse.discover-content": {
-    "message": "Tumuklas ng kontento"
-  },
   "app.browse.discover-servers": {
     "message": "Tumuklas ng mga server"
   },
diff --git a/apps/app-frontend/src/locales/fr-FR/index.json b/apps/app-frontend/src/locales/fr-FR/index.json
index 8a863615be..c8d487e5a8 100644
--- a/apps/app-frontend/src/locales/fr-FR/index.json
+++ b/apps/app-frontend/src/locales/fr-FR/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Retour à l'instance"
   },
-  "app.browse.discover-content": {
-    "message": "Découvrir du contenu"
-  },
   "app.browse.discover-servers": {
     "message": "Découvrir des serveurs"
   },
diff --git a/apps/app-frontend/src/locales/he-IL/index.json b/apps/app-frontend/src/locales/he-IL/index.json
index c3c6960ced..1ae32034ba 100644
--- a/apps/app-frontend/src/locales/he-IL/index.json
+++ b/apps/app-frontend/src/locales/he-IL/index.json
@@ -44,9 +44,6 @@
   "app.browse.already-added": {
     "message": "כבר נוסף"
   },
-  "app.browse.discover-content": {
-    "message": "גלה תוכן"
-  },
   "app.browse.discover-servers": {
     "message": "גלה שרתים"
   },
diff --git a/apps/app-frontend/src/locales/hu-HU/index.json b/apps/app-frontend/src/locales/hu-HU/index.json
index ff55d16202..755ed8ffea 100644
--- a/apps/app-frontend/src/locales/hu-HU/index.json
+++ b/apps/app-frontend/src/locales/hu-HU/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Vissza a játékpéldányhoz"
   },
-  "app.browse.discover-content": {
-    "message": "Tartalom böngészése"
-  },
   "app.browse.discover-servers": {
     "message": "Szerverek böngészése"
   },
diff --git a/apps/app-frontend/src/locales/id-ID/index.json b/apps/app-frontend/src/locales/id-ID/index.json
index 968e0d9573..e98bfcd2b2 100644
--- a/apps/app-frontend/src/locales/id-ID/index.json
+++ b/apps/app-frontend/src/locales/id-ID/index.json
@@ -137,9 +137,6 @@
   "app.browse.back-to-instance": {
     "message": "Kembali ke instans"
   },
-  "app.browse.discover-content": {
-    "message": "Temukan konten"
-  },
   "app.browse.discover-servers": {
     "message": "Temukan server"
   },
diff --git a/apps/app-frontend/src/locales/it-IT/index.json b/apps/app-frontend/src/locales/it-IT/index.json
index 8908398c27..bd97c44f95 100644
--- a/apps/app-frontend/src/locales/it-IT/index.json
+++ b/apps/app-frontend/src/locales/it-IT/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Torna all'istanza"
   },
-  "app.browse.discover-content": {
-    "message": "Esplora i contenuti"
-  },
   "app.browse.discover-servers": {
     "message": "Sfoglia i server"
   },
diff --git a/apps/app-frontend/src/locales/ja-JP/index.json b/apps/app-frontend/src/locales/ja-JP/index.json
index 81e45f7f02..92ecc66882 100644
--- a/apps/app-frontend/src/locales/ja-JP/index.json
+++ b/apps/app-frontend/src/locales/ja-JP/index.json
@@ -239,9 +239,6 @@
   "app.browse.back-to-instance": {
     "message": "インスタンスに戻る"
   },
-  "app.browse.discover-content": {
-    "message": "コンテンツを探す"
-  },
   "app.browse.discover-servers": {
     "message": "サーバーを探す"
   },
diff --git a/apps/app-frontend/src/locales/ko-KR/index.json b/apps/app-frontend/src/locales/ko-KR/index.json
index 07a99652ba..67a4f99baf 100644
--- a/apps/app-frontend/src/locales/ko-KR/index.json
+++ b/apps/app-frontend/src/locales/ko-KR/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "인스턴스로 돌아가기"
   },
-  "app.browse.discover-content": {
-    "message": "콘텐츠 탐색하기"
-  },
   "app.browse.discover-servers": {
     "message": "서버 탐색하기"
   },
diff --git a/apps/app-frontend/src/locales/ms-MY/index.json b/apps/app-frontend/src/locales/ms-MY/index.json
index 541d561206..ccf6fc1ed7 100644
--- a/apps/app-frontend/src/locales/ms-MY/index.json
+++ b/apps/app-frontend/src/locales/ms-MY/index.json
@@ -134,9 +134,6 @@
   "app.browse.back-to-instance": {
     "message": "Kembali ke pemasangan"
   },
-  "app.browse.discover-content": {
-    "message": "Temui kandungan"
-  },
   "app.browse.discover-servers": {
     "message": "Temui pelayan"
   },
diff --git a/apps/app-frontend/src/locales/nl-NL/index.json b/apps/app-frontend/src/locales/nl-NL/index.json
index f7f3dad5ef..d6c2ba51f5 100644
--- a/apps/app-frontend/src/locales/nl-NL/index.json
+++ b/apps/app-frontend/src/locales/nl-NL/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Terug naar instantie"
   },
-  "app.browse.discover-content": {
-    "message": "Inhoud ontdekken"
-  },
   "app.browse.discover-servers": {
     "message": "Ontdek servers"
   },
diff --git a/apps/app-frontend/src/locales/no-NO/index.json b/apps/app-frontend/src/locales/no-NO/index.json
index 3733ad6195..3aa3138482 100644
--- a/apps/app-frontend/src/locales/no-NO/index.json
+++ b/apps/app-frontend/src/locales/no-NO/index.json
@@ -140,9 +140,6 @@
   "app.browse.back-to-instance": {
     "message": "Tilbake til tilfelle"
   },
-  "app.browse.discover-content": {
-    "message": "Oppdag innhold"
-  },
   "app.browse.discover-servers": {
     "message": "Oppdag servere"
   },
diff --git a/apps/app-frontend/src/locales/pl-PL/index.json b/apps/app-frontend/src/locales/pl-PL/index.json
index 8e415dc95e..26b526e578 100644
--- a/apps/app-frontend/src/locales/pl-PL/index.json
+++ b/apps/app-frontend/src/locales/pl-PL/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Powrót do instancji"
   },
-  "app.browse.discover-content": {
-    "message": "Odkrywaj zawartość"
-  },
   "app.browse.discover-servers": {
     "message": "Odkryj serwery"
   },
diff --git a/apps/app-frontend/src/locales/pt-BR/index.json b/apps/app-frontend/src/locales/pt-BR/index.json
index c5a9ae394d..841aeca96e 100644
--- a/apps/app-frontend/src/locales/pt-BR/index.json
+++ b/apps/app-frontend/src/locales/pt-BR/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Voltar à instância"
   },
-  "app.browse.discover-content": {
-    "message": "Descobrir conteúdo"
-  },
   "app.browse.discover-servers": {
     "message": "Descobrir servidores"
   },
diff --git a/apps/app-frontend/src/locales/pt-PT/index.json b/apps/app-frontend/src/locales/pt-PT/index.json
index 247cc2f66e..5f56e5810d 100644
--- a/apps/app-frontend/src/locales/pt-PT/index.json
+++ b/apps/app-frontend/src/locales/pt-PT/index.json
@@ -239,9 +239,6 @@
   "app.browse.back-to-instance": {
     "message": "Voltar à instância"
   },
-  "app.browse.discover-content": {
-    "message": "Descobrir conteúdo"
-  },
   "app.browse.discover-servers": {
     "message": "Descobrir servidores"
   },
diff --git a/apps/app-frontend/src/locales/ru-RU/index.json b/apps/app-frontend/src/locales/ru-RU/index.json
index acccf8358e..88d1f8fac0 100644
--- a/apps/app-frontend/src/locales/ru-RU/index.json
+++ b/apps/app-frontend/src/locales/ru-RU/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Вернуться к сборке"
   },
-  "app.browse.discover-content": {
-    "message": "Поиск проектов"
-  },
   "app.browse.discover-servers": {
     "message": "Поиск серверов"
   },
diff --git a/apps/app-frontend/src/locales/sr-CS/index.json b/apps/app-frontend/src/locales/sr-CS/index.json
index 8f6db8dd2f..a8f7f3343b 100644
--- a/apps/app-frontend/src/locales/sr-CS/index.json
+++ b/apps/app-frontend/src/locales/sr-CS/index.json
@@ -224,9 +224,6 @@
   "app.browse.back-to-instance": {
     "message": "Nazad na instancu"
   },
-  "app.browse.discover-content": {
-    "message": "Otkrij sadržaj"
-  },
   "app.browse.discover-servers": {
     "message": "Otkrij servere"
   },
diff --git a/apps/app-frontend/src/locales/sv-SE/index.json b/apps/app-frontend/src/locales/sv-SE/index.json
index ddc5ebb6ca..6dfb05b20c 100644
--- a/apps/app-frontend/src/locales/sv-SE/index.json
+++ b/apps/app-frontend/src/locales/sv-SE/index.json
@@ -224,9 +224,6 @@
   "app.browse.back-to-instance": {
     "message": "Tillbaka till instans"
   },
-  "app.browse.discover-content": {
-    "message": "Upptäck innehåll"
-  },
   "app.browse.discover-servers": {
     "message": "Upptäck servrar"
   },
diff --git a/apps/app-frontend/src/locales/th-TH/index.json b/apps/app-frontend/src/locales/th-TH/index.json
index 44ef707409..059e5cdc4e 100644
--- a/apps/app-frontend/src/locales/th-TH/index.json
+++ b/apps/app-frontend/src/locales/th-TH/index.json
@@ -152,9 +152,6 @@
   "app.browse.back-to-instance": {
     "message": "กลับสู่อินสแตนซ์"
   },
-  "app.browse.discover-content": {
-    "message": "สำรวจเนื้อหา"
-  },
   "app.browse.discover-servers": {
     "message": "สำรวจเซิร์ฟเวอร์"
   },
diff --git a/apps/app-frontend/src/locales/tr-TR/index.json b/apps/app-frontend/src/locales/tr-TR/index.json
index ee6118c33f..1886b8eed7 100644
--- a/apps/app-frontend/src/locales/tr-TR/index.json
+++ b/apps/app-frontend/src/locales/tr-TR/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "Kuruluma dön"
   },
-  "app.browse.discover-content": {
-    "message": "İçerik keşfet"
-  },
   "app.browse.discover-servers": {
     "message": "Sunucuları keşfet"
   },
diff --git a/apps/app-frontend/src/locales/uk-UA/index.json b/apps/app-frontend/src/locales/uk-UA/index.json
index 02699395a4..5ae8fdafb9 100644
--- a/apps/app-frontend/src/locales/uk-UA/index.json
+++ b/apps/app-frontend/src/locales/uk-UA/index.json
@@ -239,9 +239,6 @@
   "app.browse.back-to-instance": {
     "message": "Назад до профілю"
   },
-  "app.browse.discover-content": {
-    "message": "Дослідити вміст"
-  },
   "app.browse.discover-servers": {
     "message": "Дослідити сервери"
   },
diff --git a/apps/app-frontend/src/locales/vi-VN/index.json b/apps/app-frontend/src/locales/vi-VN/index.json
index a7bc63a113..7e69708076 100644
--- a/apps/app-frontend/src/locales/vi-VN/index.json
+++ b/apps/app-frontend/src/locales/vi-VN/index.json
@@ -233,9 +233,6 @@
   "app.browse.back-to-instance": {
     "message": "Quay lại phiên bản"
   },
-  "app.browse.discover-content": {
-    "message": "Khám phá nội dung"
-  },
   "app.browse.discover-servers": {
     "message": "Khám phá máy chủ"
   },
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 964249316b..64cea71744 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "返回实例"
   },
-  "app.browse.discover-content": {
-    "message": "发现内容"
-  },
   "app.browse.discover-servers": {
     "message": "发现服务器"
   },
diff --git a/apps/app-frontend/src/locales/zh-TW/index.json b/apps/app-frontend/src/locales/zh-TW/index.json
index 87570b3e0f..f5d7e24953 100644
--- a/apps/app-frontend/src/locales/zh-TW/index.json
+++ b/apps/app-frontend/src/locales/zh-TW/index.json
@@ -242,9 +242,6 @@
   "app.browse.back-to-instance": {
     "message": "回到實例"
   },
-  "app.browse.discover-content": {
-    "message": "探索內容"
-  },
   "app.browse.discover-servers": {
     "message": "探索伺服器"
   },
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index f5abd2be0a..592ab88b87 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -55,17 +55,17 @@ import { get_loader_versions as getLoaderManifest } from '@/helpers/metadata'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import { get_instance_worlds } from '@/helpers/worlds'
+import {
+	type BreadcrumbDefinition,
+	useBreadcrumb,
+	useRootBreadcrumb,
+} from '@/providers/breadcrumbs'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import {
 	createServerInstallContent,
 	provideServerInstallContent,
 } from '@/providers/setup/server-install-content'
-import {
-	type BreadcrumbDefinition,
-	useBreadcrumb,
-	useRootBreadcrumb,
-} from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/state'
 
 const { handleError } = injectNotificationManager()
@@ -204,16 +204,17 @@ watch(serverBackUrl, (value) => {
 		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 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 breadcrumbDefinition = {
 	slot: 'browse',
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index dad4aeb118..a90ee87076 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -63,10 +63,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { get_user } from '@/helpers/cache'
 import { get as getCreds } from '@/helpers/mr_auth'
-import {
-	provideBreadcrumbParent,
-	useBreadcrumb,
-} from '@/providers/breadcrumbs'
+import { provideBreadcrumbParent, useBreadcrumb } from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/theme'
 
 const route = useRoute()
@@ -110,8 +107,7 @@ watch(
 	(value) => {
 		if (!route.path.startsWith('/hosting/manage/') || route.name === 'Servers') return
 		breadcrumbServerId.value = value
-		breadcrumbLabel.value =
-			getCachedServerName(value) ?? formatMessage(commonMessages.loadingLabel)
+		breadcrumbLabel.value = getCachedServerName(value) ?? formatMessage(commonMessages.loadingLabel)
 	},
 	{ flush: 'sync' },
 )
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index cd9fcdec63..dc20632625 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -192,9 +192,9 @@ import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
 import type { GameInstance } from '@/helpers/types'
 import { createInstanceShortcut, showInstanceInFolder } from '@/helpers/utils.js'
 import { refreshWorlds, type ServerStatus } from '@/helpers/worlds'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
-import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/state'
 
 import { provideSharedInstanceState, useSharedInstanceState } from './use-shared-instance-state'
@@ -236,8 +236,7 @@ useRootBreadcrumb({
 		alt: instance.value?.name,
 		tintBy: instance.value?.id ?? String(displayedInstanceRoute.value.params.id ?? ''),
 	}),
-	to: () =>
-		`/instance/${encodeURIComponent(String(displayedInstanceRoute.value.params.id ?? ''))}`,
+	to: () => `/instance/${encodeURIComponent(String(displayedInstanceRoute.value.params.id ?? ''))}`,
 })
 
 const preloadedContent = ref<InstanceContentData | null>(null)
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 82df01d184..ec0ea87822 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -295,13 +295,10 @@ import { get_loader_versions as getLoaderManifest } from '@/helpers/metadata'
 import { get_by_instance_id } from '@/helpers/process'
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import { getServerAddress } from '@/helpers/worlds'
+import { provideBreadcrumbParent, useBreadcrumb } from '@/providers/breadcrumbs'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import { createServerInstallContent } from '@/providers/setup/server-install-content'
-import {
-	provideBreadcrumbParent,
-	useBreadcrumb,
-} from '@/providers/breadcrumbs'
 import { useTheming } from '@/store/state.js'
 
 dayjs.extend(relativeTime)
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index 3faf112350..85a368440b 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -223,15 +223,12 @@ async function refreshEnrichment() {
 	}
 }
 
-watch(
-	[() => props.versions, () => route.params.version],
-	async () => {
-		if (route.params.version) {
-			version.value = props.versions.find((v) => v.id === route.params.version)
-			await refreshEnrichment()
-		}
-	},
-)
+watch([() => props.versions, () => route.params.version], async () => {
+	if (route.params.version) {
+		version.value = props.versions.find((v) => v.id === route.params.version)
+		await refreshEnrichment()
+	}
+})
 
 await refreshEnrichment()
 </script>
diff --git a/apps/app-frontend/src/pages/project/Versions.vue b/apps/app-frontend/src/pages/project/Versions.vue
index 05fb8a2cf3..7d7438cf12 100644
--- a/apps/app-frontend/src/pages/project/Versions.vue
+++ b/apps/app-frontend/src/pages/project/Versions.vue
@@ -99,7 +99,7 @@ const messages = defineMessages({
 	},
 })
 
-const props = defineProps({
+defineProps({
 	project: {
 		type: Object,
 		default: () => {},
diff --git a/apps/app-frontend/src/providers/breadcrumbs.ts b/apps/app-frontend/src/providers/breadcrumbs.ts
index 14a5b77436..58b6054b76 100644
--- a/apps/app-frontend/src/providers/breadcrumbs.ts
+++ b/apps/app-frontend/src/providers/breadcrumbs.ts
@@ -1,9 +1,9 @@
 import { createContext } from '@modrinth/ui'
 import {
-	computed,
 	type Component,
-	type MaybeRefOrGetter,
+	computed,
 	type ComputedRef,
+	type MaybeRefOrGetter,
 	shallowRef,
 	toValue,
 	watch,
@@ -87,15 +87,11 @@ export function createBreadcrumbManager(): BreadcrumbManager {
 
 	function findParentIndex(entry: InternalBreadcrumb): number {
 		if (entry.parentToken) {
-			const tokenIndex = stack.value.findIndex(
-				(candidate) => candidate.token === entry.parentToken,
-			)
+			const tokenIndex = stack.value.findIndex((candidate) => candidate.token === entry.parentToken)
 			if (tokenIndex !== -1) return tokenIndex
 		}
 		if (entry.parentSlot) {
-			return stack.value.findIndex(
-				(candidate) => candidate.definition.slot === entry.parentSlot,
-			)
+			return stack.value.findIndex((candidate) => candidate.definition.slot === entry.parentSlot)
 		}
 		return stack.value.length - 1
 	}
@@ -182,15 +178,11 @@ export function createBreadcrumbManager(): BreadcrumbManager {
 		entries,
 		reset,
 		push,
-		find: (slot) =>
-			stack.value.find((entry) => entry.definition.slot === slot)?.handle,
+		find: (slot) => stack.value.find((entry) => entry.definition.slot === slot)?.handle,
 	}
 }
 
-function watchBreadcrumbIdentity(
-	definition: BreadcrumbDefinition,
-	handle: BreadcrumbHandle,
-) {
+function watchBreadcrumbIdentity(definition: BreadcrumbDefinition, handle: BreadcrumbHandle) {
 	watch(
 		() => toValue(definition.id),
 		() => handle.activate(),

From 81d4019940c68704667c9d8dbda7ee18a8853cd7 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 19:40:53 +0100
Subject: [PATCH 09/11] fix: qa

---
 apps/app-frontend/src/locales/en-US/index.json |  3 +++
 apps/app-frontend/src/pages/project/Index.vue  | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 78947e1b99..5235dec309 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -770,6 +770,9 @@
   "app.project.install-context.back-to-browse": {
     "message": "Back to discover"
   },
+  "app.project.install-context.back-to-instance": {
+    "message": "Back to instance"
+  },
   "app.project.version.all-versions": {
     "message": "All versions"
   },
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index ec0ea87822..2d3ee48c3a 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -338,6 +338,10 @@ const messages = defineMessages({
 		id: 'app.project.install-context.back-to-browse',
 		defaultMessage: 'Back to discover',
 	},
+	backToInstance: {
+		id: 'app.project.install-context.back-to-instance',
+		defaultMessage: 'Back to instance',
+	},
 	alreadyInstalled: {
 		id: 'app.project.install-button.already-installed',
 		defaultMessage: 'This project is already installed',
@@ -465,9 +469,18 @@ const projectGalleryHref = computed(() => buildProjectHref(`/project/${route.par
 const projectBrowseBackUrl = computed(() => {
 	const browsePath = route.query.b
 	if (typeof browsePath === 'string' && browsePath.startsWith('/browse/')) return browsePath
+	const instanceId = route.query.i
+	if (typeof instanceId === 'string' && instanceId) {
+		return `/instance/${encodeURIComponent(instanceId)}`
+	}
 	const type = data.value?.project_type ? `${data.value.project_type}` : 'mod'
 	return buildBrowseHref(`/browse/${type}`)
 })
+const projectBackLabel = computed(() =>
+	typeof route.query.i === 'string' && typeof route.query.b !== 'string'
+		? formatMessage(messages.backToInstance)
+		: formatMessage(messages.backToBrowse),
+)
 
 const projectInstallContext = computed(() => {
 	const serverData = serverInstallContent.serverContextServerData.value
@@ -481,7 +494,7 @@ const projectInstallContext = computed(() => {
 			iconSrc: null,
 			isMedal: serverData.is_medal,
 			backUrl: projectBrowseBackUrl.value,
-			backLabel: formatMessage(messages.backToBrowse),
+			backLabel: projectBackLabel.value,
 			heading: serverInstallContent.serverBrowseHeading.value,
 			queuedCount: serverInstallContent.queuedServerInstallCount.value,
 			selectedProjects: serverInstallContent.selectedServerInstallProjects.value,
@@ -501,7 +514,7 @@ const projectInstallContext = computed(() => {
 			gameVersion: instance.value.game_version,
 			iconSrc: instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
 			backUrl: projectBrowseBackUrl.value,
-			backLabel: formatMessage(messages.backToBrowse),
+			backLabel: projectBackLabel.value,
 			heading: formatMessage(commonMessages.installingContentLabel),
 		}
 	}

From 004288777fc8283bded2d7f4dc31a271bc9b04d9 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 21:30:43 +0100
Subject: [PATCH 10/11] fix: change icon

---
 apps/app-frontend/src/pages/Skins.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index ebe88c72d2..b33803a437 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -7,6 +7,7 @@ import {
 	EyeIcon,
 	LogInIcon,
 	RotateCounterClockwiseIcon,
+	ShirtIcon,
 	SpinnerIcon,
 } from '@modrinth/assets'
 import {
@@ -67,7 +68,7 @@ useRootBreadcrumb({
 	id: 'skins',
 	label: 'Skin selector',
 	to: '/skins',
-	visual: { type: 'icon', component: ChangeSkinIcon },
+	visual: { type: 'icon', component: ShirtIcon },
 })
 
 type UnlistenFn = () => void

From 4be5e2f2da3edcb1e2e1cfdfb2a037f7a6a86e2e Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 28 Jul 2026 13:32:28 -0700
Subject: [PATCH 11/11] use modrinth logo in header for compactness

---
 apps/app-frontend/src/App.vue         | 20 +++++++++++++-------
 apps/app-frontend/src/pages/Skins.vue |  1 -
 apps/app/tauri.macos.conf.json        |  2 +-
 packages/assets/generated-icons.ts    |  2 --
 packages/assets/icons/change-skin.svg |  5 -----
 5 files changed, 14 insertions(+), 16 deletions(-)
 delete mode 100644 packages/assets/icons/change-skin.svg

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index f01fb54fae..e2f78fe965 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -47,6 +47,7 @@ import {
 	provideNotificationManager,
 	providePageContext,
 	providePopupNotificationManager,
+	TextLogo,
 	useDebugLogger,
 	useFormatBytes,
 	useHostingIntercom,
@@ -64,7 +65,6 @@ import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
-import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import AppActionBar from '@/components/ui/AppActionBar.vue'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
@@ -1640,26 +1640,32 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		</div>
 		<div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
 			<div data-tauri-drag-region class="flex min-w-0 flex-1 items-center overflow-hidden p-2">
-				<ModrinthAppLogo class="h-full w-auto shrink-0 text-contrast pointer-events-none" />
-				<div data-tauri-drag-region class="ml-4 flex shrink-0 items-center gap-2">
+				<TextLogo class="h-7 w-auto shrink-0 text-contrast pointer-events-none" />
+				<div data-tauri-drag-region class="ml-2 flex shrink-0 items-center gap-2">
 					<ButtonStyled type="outlined" circular>
 						<button
-							class="!h-8 !min-w-8 !w-8 !border !border-surface-4 !p-0"
+							class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
 							:disabled="!canNavigateBack"
 							aria-label="Go back"
 							@click="router.back()"
 						>
-							<ChevronLeftIcon class="!size-4 !text-primary" />
+							<ChevronLeftIcon
+								class="!size-4 !text-primary"
+								:class="{ 'opacity-20': !canNavigateBack }"
+							/>
 						</button>
 					</ButtonStyled>
 					<ButtonStyled type="outlined" circular>
 						<button
-							class="!h-8 !min-w-8 !w-8 !border !border-surface-4 !p-0"
+							class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
 							:disabled="!canNavigateForward"
 							aria-label="Go forward"
 							@click="router.forward()"
 						>
-							<ChevronRightIcon class="!size-4 !text-primary" />
+							<ChevronRightIcon
+								class="!size-4 !text-primary"
+								:class="{ 'opacity-20': !canNavigateForward }"
+							/>
 						</button>
 					</ButtonStyled>
 				</div>
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index b33803a437..6c89f34712 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-	ChangeSkinIcon,
 	CheckIcon,
 	EditIcon,
 	ExcitedRinthbot,
diff --git a/apps/app/tauri.macos.conf.json b/apps/app/tauri.macos.conf.json
index 363f00e853..7ab0afc80c 100644
--- a/apps/app/tauri.macos.conf.json
+++ b/apps/app/tauri.macos.conf.json
@@ -16,7 +16,7 @@
 				"decorations": true,
 				"trafficLightPosition": {
 					"x": 15.0,
-					"y": 22.0
+					"y": 26.0
 				}
 			}
 		]
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index f0e78c8f82..0b524d52ad 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -66,7 +66,6 @@ import _BugIcon from './icons/bug.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CalendarArrowDownIcon from './icons/calendar-arrow-down.svg?component'
 import _CardIcon from './icons/card.svg?component'
-import _ChangeSkinIcon from './icons/change-skin.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
 import _ChartAreaIcon from './icons/chart-area.svg?component'
 import _ChartColumnBigIcon from './icons/chart-column-big.svg?component'
@@ -499,7 +498,6 @@ export const BugIcon = _BugIcon
 export const CalendarIcon = _CalendarIcon
 export const CalendarArrowDownIcon = _CalendarArrowDownIcon
 export const CardIcon = _CardIcon
-export const ChangeSkinIcon = _ChangeSkinIcon
 export const ChartIcon = _ChartIcon
 export const ChartAreaIcon = _ChartAreaIcon
 export const ChartColumnBigIcon = _ChartColumnBigIcon
diff --git a/packages/assets/icons/change-skin.svg b/packages/assets/icons/change-skin.svg
deleted file mode 100644
index 7626051500..0000000000
--- a/packages/assets/icons/change-skin.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" transform="scale(-1 1)" viewBox="0 0 49.915 52.72">
-	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M15.71 31.484v19.07h18.63v-19.07l6.538 6.539 6.871-6.872-11.203-11.733H14.122L2.166 31.375l6.827 6.827z"/>
-	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.993" d="M24.872 19.548v-6.44"/>
-	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M24.704 13.202a5.518 5.518 0 0 1-5.518-5.518 5.518 5.518 0 0 1 5.518-5.518 5.518 5.518 0 0 1 5.518 5.518"/>
-</svg>