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(['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(['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() -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 },