refactor: breadcrumbs system (#6912)

* refactor: breadcrumbs system

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: loading flashes

* fix: qa

* fix: prepr

* fix: qa

* fix: change icon

* use modrinth logo in header for compactness

---------

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

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

@@ -85,6 +85,7 @@ import {
 	ExternalIcon,
 	MoreVerticalIcon,
 	ReportIcon,
+	VersionIcon,
 } from '@modrinth/assets'
 import {
 	ButtonStyled,
@@ -95,12 +96,12 @@ import {
 	useVIntl,
 	VersionPage,
 } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, 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 +120,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 +144,19 @@ 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 versionBreadcrumbLabel = computed(() => {
+	const versionNumber = version.value?.version_number
+	const versionLabel = formatMessage(commonMessages.versionLabel)
+	return versionNumber ? `${versionLabel} ${versionNumber}` : versionLabel
+})
+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,
+})
 
 const enrichment = ref<Labrinth.Projects.v2.DependencyInfo | undefined>(undefined)
 const enrichmentLoading = ref(false)
@@ -202,18 +223,12 @@ async function refreshEnrichment() {
 	}
 }
 
-watch(
-	() => props.versions,
-	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()
-		}
-	},
-)
+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>