From 8427a7a6e4c873c17ee9fc7fd206b1a427690f8e Mon Sep 17 00:00:00 2001 From: "Calum H. (IMB11)" Date: Mon, 6 Jul 2026 12:10:47 +0100 Subject: [PATCH 1/2] feat: project page header when visiting from browse --- apps/app-frontend/src/pages/Browse.vue | 10 +- apps/app-frontend/src/pages/project/Index.vue | 6 +- apps/frontend/src/locales/en-US/index.json | 3 + apps/frontend/src/pages/[type]/[project].vue | 115 +++++++++- apps/frontend/src/pages/discover.vue | 17 +- .../src/pages/discover/[type]/index.vue | 217 +++++++++--------- .../composables/use-browse-search.ts | 33 ++- 7 files changed, 272 insertions(+), 129 deletions(-) diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue index 815aa137c1..cc0fe68582 100644 --- a/apps/app-frontend/src/pages/Browse.vue +++ b/apps/app-frontend/src/pages/Browse.vue @@ -72,6 +72,7 @@ const debugLog = useDebugLogger('Browse') const router = useRouter() const route = useRoute() const themeStore = useTheming() +const browseRouteActive = computed(() => route.path.startsWith('/browse/')) const serverSetupModalRef = ref | null>(null) const serverInstallContent = createServerInstallContent({ serverSetupModalRef }) provideServerInstallContent(serverInstallContent) @@ -490,6 +491,9 @@ function resetInstanceContext() { watch( () => route.params.projectType as ProjectType, async (newType) => { + if (!browseRouteActive.value) { + return + } if (isSetupServerContext.value) { enforceSetupModpackRoute(newType) if (newType !== 'modpack') return @@ -960,6 +964,7 @@ const lockedFilterMessages = computed(() => ({ const searchState = useBrowseSearch({ projectType, tags, + active: browseRouteActive, providedFilters: combinedProvidedFilters, search, persistentQueryParams: ['i', 'ai', 'shi', 'sid', 'wid', 'from'], @@ -1035,6 +1040,9 @@ onUnmounted(() => { }) function getProjectBrowseQuery() { + if (!browseRouteActive.value) { + return undefined + } if (!installContext.value) return undefined return { ...route.query, @@ -1139,7 +1147,7 @@ provideBrowseManager({ @browse-modpacks="() => {}" @create="handleServerModpackFlowCreate" /> - + diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue index a4aff5dfa6..52c50fc968 100644 --- a/apps/app-frontend/src/pages/project/Index.vue +++ b/apps/app-frontend/src/pages/project/Index.vue @@ -320,10 +320,6 @@ const messages = defineMessages({ id: 'app.project.install-button.already-installed', defaultMessage: 'This project is already installed', }, - installContentToInstance: { - id: 'app.project.install-context.install-content-to-instance', - defaultMessage: 'Install content to instance', - }, switchVersion: { id: 'app.project.install-button.switch-version', defaultMessage: 'Switch version', @@ -450,7 +446,7 @@ const projectInstallContext = computed(() => { iconSrc: instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null, backUrl: projectBrowseBackUrl.value, backLabel: formatMessage(messages.backToBrowse), - heading: formatMessage(messages.installContentToInstance), + heading: formatMessage(commonMessages.installingContentLabel), } } diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json index a3fbe84593..5bc45be605 100644 --- a/apps/frontend/src/locales/en-US/index.json +++ b/apps/frontend/src/locales/en-US/index.json @@ -3455,6 +3455,9 @@ "project.gallery.title": { "message": "Gallery" }, + "project.install-context.back-to-discover": { + "message": "Back to discover" + }, "project.license.error": { "message": "License text could not be retrieved." }, diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue index 7f908b9904..429efe8d5f 100644 --- a/apps/frontend/src/pages/[type]/[project].vue +++ b/apps/frontend/src/pages/[type]/[project].vue @@ -97,6 +97,22 @@ +
+ +
+
-
+
-
-
+
+
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue index 5e6721b8c2..350d9bf44f 100644 --- a/apps/frontend/src/pages/discover/[type]/index.vue +++ b/apps/frontend/src/pages/discover/[type]/index.vue @@ -33,6 +33,7 @@ import { cycleValue } from '@modrinth/utils' import { useQueryClient } from '@tanstack/vue-query' import { useTimeoutFn } from '@vueuse/core' import { computed, ref, watch } from 'vue' +import type { LocationQueryRaw } from 'vue-router' import LogoAnimated from '~/components/brand/LogoAnimated.vue' import AdPlaceholder from '~/components/ui/AdPlaceholder.vue' @@ -55,10 +56,6 @@ const client = injectModrinthClient() const queryClient = useQueryClient() const filtersMenuOpen = ref(false) -const stickyInstallHeaderRef = ref(null) - -useStickyObserver(stickyInstallHeaderRef, 'DiscoverInstallHeader') - const route = useRoute() const cosmetics = useCosmetics() @@ -202,49 +199,83 @@ function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject return undefined } -async function search(requestParams: string) { +type DiscoverProjectSearchHit = Labrinth.Search.v2.ResultSearchProject & { + version_id?: string | null +} + +function mapV3ProjectHit(hit: Labrinth.Search.v3.ResultSearchProject): DiscoverProjectSearchHit { + return { + ...hit, + project_type: hit.project_types[0] ?? projectTypeId.value, + title: hit.name, + description: hit.summary, + versions: hit.version_id ? [hit.version_id] : [], + latest_version: hit.version_id, + icon_url: hit.icon_url ?? '', + client_side: 'unknown', + server_side: 'unknown', + } +} + +const hostingContextQuery = computed(() => { + const query: LocationQueryRaw = {} + + for (const key of ['sid', 'wid', 'from', 'shi']) { + const value = route.query[key] + if (value != null) { + query[key] = value + } + } + + return Object.keys(query).length > 0 ? query : undefined +}) + +function withHostingContext(path: string) { + return hostingContextQuery.value ? { path, query: hostingContextQuery.value } : path +} + +async function fetchSearch(requestParams: string) { debug('search() called', { requestParams: requestParams.substring(0, 100), isServer: isServerType.value, projectTypeId: projectTypeId.value, }) - const config = useRuntimeConfig() - let base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl - - if (isServerType.value) { - base = base.replace(/\/v\d\//, '/v3/').replace(/\/v\d$/, '/v3') - } - - const url = `${base}search${requestParams}` - debug('search() fetching:', url.substring(0, 120)) - const raw = await $fetch( - url, - { - headers: withLabrinthCanaryHeader(), - }, - ) + const raw = await client.request('/search', { + api: 'labrinth', + version: 3, + method: 'GET', + params: Object.fromEntries(new URLSearchParams(requestParams.replace(/^\?/, ''))), + headers: withLabrinthCanaryHeader(), + }) debug('search() response', { total_hits: raw.total_hits, hitCount: raw.hits?.length }) - if ('hits_per_page' in raw) { - // v3 response (servers) + if (isServerType.value) { return { projectHits: [], - serverHits: raw.hits as Labrinth.Search.v3.ResultSearchProject[], + serverHits: raw.hits, total_hits: raw.total_hits, per_page: raw.hits_per_page, } } return { - projectHits: raw.hits as Labrinth.Search.v2.ResultSearchProject[], + projectHits: raw.hits.map(mapV3ProjectHit), serverHits: [], total_hits: raw.total_hits, - per_page: raw.limit, + per_page: raw.hits_per_page, } } +async function search(requestParams: string) { + return await queryClient.ensureQueryData({ + queryKey: ['discover', 'search', 'v3', requestParams], + queryFn: () => fetchSearch(requestParams), + staleTime: 30_000, + }) +} + function getCardActions( result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject, currentProjectType: string, @@ -424,7 +455,7 @@ watch( ) debug('calling initial refreshSearch') -searchState.refreshSearch() +await searchState.refreshSearch() const ogTitle = computed(() => searchState.query.value @@ -462,9 +493,11 @@ provideBrowseManager({ projectType: projectTypeId, ...searchState, getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) => - `/${projectType.value?.id ?? 'project'}/${result.slug ? result.slug : result.project_id}`, + withHostingContext( + `/${projectType.value?.id ?? 'project'}/${result.slug ? result.slug : result.project_id}`, + ), getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) => - `/server/${result.slug ?? result.project_id}`, + withHostingContext(`/server/${result.slug ?? result.project_id}`), selectableProjectTypes: computed(() => []), showProjectTypeTabs: computed(() => false), variant: 'web', @@ -504,25 +537,41 @@ provideBrowseManager({ }, loadingComponent: LogoAnimated, }) + +const stickyInstallHeaderRef = ref(null) +const { isStuck: isInstallHeaderStuck } = useStickyObserver( + stickyInstallHeaderRef, + 'DiscoverInstallHeader', +)