feat: project page header when visiting from browse (#6630)

* feat: project page header when visiting from browse

* fix: lint

apps/frontend/src/locales/en-US/index.json

@@ -3476,6 +3476,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."
   },

apps/frontend/src/pages/[type]/[project].vue

@@ -97,6 +97,22 @@
 			<CollectionCreateModal ref="modal_collection" :project-ids="[project.id]" />
 			<ModpackScanModal ref="scanModal" :project_id="project.id" />
 
+			<div
+				v-if="projectInstallContext && !isSettings"
+				ref="stickyInstallHeaderRef"
+				class="sticky top-0 z-20 mx-auto max-w-[80rem] border-0 border-solid border-divider bg-surface-1 px-6 pt-4"
+				:class="[isInstallHeaderStuck ? 'border-t' : '']"
+			>
+				<BrowseInstallHeader
+					:install-context="projectHeaderInstallContext"
+					divider
+					bottom-padding
+				/>
+			</div>
+			<SelectedProjectsFloatingBar
+				v-if="projectInstallContext && !isSettings"
+				:install-context="projectInstallContext"
+			/>
 			<div
 				class="new-page sidebar"
 				:class="{
@@ -111,7 +127,10 @@
 						!flags.alwaysShowChecklistAsPopup,
 				}"
 			>
-				<div class="normal-page__header relative my-4">
+				<div
+					class="normal-page__header relative mb-4"
+					:class="projectInstallContext && !isSettings ? 'mt-0' : 'mt-4'"
+				>
 					<div class="mb-6">
 						<ModerationProjectNags
 							v-if="
@@ -616,6 +635,7 @@ import {
 import {
 	Admonition,
 	Avatar,
+	BrowseInstallHeader,
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
@@ -636,11 +656,13 @@ import {
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
 	provideProjectPageContext,
+	SelectedProjectsFloatingBar,
 	TeleportOverflowMenu,
 	useDebugLogger,
 	useFormatDateTime,
 	useFormatPrice,
 	useRelativeTime,
+	useStickyObserver,
 	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString, formatProjectType, renderString } from '@modrinth/utils'
@@ -663,6 +685,7 @@ import { getSignInRouteObj } from '~/composables/auth.ts'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
 import { STALE_TIME, STALE_TIME_LONG } from '~/composables/queries/project'
 import { versionQueryOptions } from '~/composables/queries/version'
+import { useServerInstallContent } from '~/composables/use-server-install-content'
 import { userCollectProject, userFollowProject } from '~/composables/user.js'
 import { injectCurrentProjectId } from '~/providers/current-project.ts'
 import { loadChecklistState } from '~/services/moderation-checklist-storage.ts'
@@ -725,6 +748,11 @@ const scanModal = ref()
 
 const projectV3Loaded = computed(() => !projectV3Pending.value || projectV3.value != null)
 const isServerProject = computed(() => projectV3.value?.minecraft_server != null)
+const stickyInstallHeaderRef = ref(null)
+const { isStuck: isInstallHeaderStuck } = useStickyObserver(
+	stickyInstallHeaderRef,
+	'ProjectInstallHeader',
+)
 
 const projectEnvironmentModal = useTemplateRef('projectEnvironmentModal')
 
@@ -780,6 +808,10 @@ const messages = defineMessages({
 		defaultMessage:
 			'{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project.',
 	},
+	backToDiscover: {
+		id: 'project.install-context.back-to-discover',
+		defaultMessage: 'Back to discover',
+	},
 	changelogTab: {
 		id: 'project.navigation.changelog',
 		defaultMessage: 'Changelog',
@@ -1029,6 +1061,51 @@ const project = computed(() => {
 	}
 })
 
+const routeProjectType = computed(() =>
+	Array.isArray(route.params.type) ? route.params.type[0] : route.params.type,
+)
+const projectInstallType = computed(() => ({
+	id: project.value?.actualProjectType ?? routeProjectType.value,
+}))
+const serverInstallModalRef = ref(null)
+const serverInstallDebug = useDebugLogger('ProjectServerInstall')
+const { installContext: serverBrowseInstallContext } = useServerInstallContent({
+	projectType: projectInstallType,
+	onboardingModalRef: serverInstallModalRef,
+	debug: serverInstallDebug,
+})
+const projectDiscoverBackUrl = computed(() => {
+	const discoverType =
+		routeProjectType.value === 'project'
+			? (project.value?.actualProjectType ?? project.value?.project_type ?? 'mod')
+			: (routeProjectType.value ?? project.value?.actualProjectType ?? 'mod')
+
+	return `/discover/${discoverType}s${getInstallContextQueryString(['sid', 'wid', 'from', 'shi'])}`
+})
+const projectInstallContext = computed(() => {
+	const context = serverBrowseInstallContext.value
+	if (!context) return null
+	return {
+		...context,
+		backUrl: projectDiscoverBackUrl.value,
+		backLabel: formatMessage(messages.backToDiscover),
+		discardSelectedAndBack: async () => {
+			await (context.clearSelected ?? context.clearQueued)?.()
+			await navigateTo(projectDiscoverBackUrl.value)
+		},
+	}
+})
+const projectHeaderInstallContext = computed(() => {
+	const context = projectInstallContext.value
+	if (!context) return null
+	return {
+		...context,
+		onBack: undefined,
+		selectedProjects: [],
+		isInstallingSelected: false,
+	}
+})
+
 // Use actual project ID for dependent queries (ensures cache consistency)
 const projectId = computed(() => projectRaw.value?.id)
 
@@ -2067,6 +2144,32 @@ function triggerDownloadAnimation() {
 	setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
 }
 
+const INSTALL_CONTEXT_QUERY_KEYS = ['sid', 'wid', 'from', 'shi']
+
+function getInstallContextQueryString(keys = INSTALL_CONTEXT_QUERY_KEYS) {
+	const params = new URLSearchParams()
+
+	for (const key of keys) {
+		const value = route.query[key]
+		if (Array.isArray(value)) {
+			for (const item of value) {
+				if (item != null) {
+					params.append(key, item)
+				}
+			}
+		} else if (value != null) {
+			params.append(key, value)
+		}
+	}
+
+	const queryString = params.toString()
+	return queryString ? `?${queryString}` : ''
+}
+
+function withInstallContextQuery(path) {
+	return `${path}${getInstallContextQueryString()}`
+}
+
 async function deleteVersion(id) {
 	if (!id) return
 
@@ -2091,16 +2194,16 @@ const navLinks = computed(() => {
 	return [
 		{
 			label: formatMessage(messages.descriptionTab),
-			href: projectUrl,
+			href: withInstallContextQuery(projectUrl),
 		},
 		{
 			label: formatMessage(messages.galleryTab),
-			href: `${projectUrl}/gallery`,
+			href: withInstallContextQuery(`${projectUrl}/gallery`),
 			shown: galleryCount > 0 || !!currentMember.value,
 		},
 		{
 			label: formatMessage(messages.changelogTab),
-			href: `${projectUrl}/changelog`,
+			href: withInstallContextQuery(`${projectUrl}/changelog`),
 			shown:
 				hasVersions.value &&
 				projectV3Loaded.value &&
@@ -2109,7 +2212,7 @@ const navLinks = computed(() => {
 		},
 		{
 			label: formatMessage(messages.versionsTab),
-			href: `${projectUrl}/versions`,
+			href: withInstallContextQuery(`${projectUrl}/versions`),
 			shown:
 				(hasVersions.value || !!currentMember.value) &&
 				projectV3Loaded.value &&
@@ -2119,7 +2222,7 @@ const navLinks = computed(() => {
 		},
 		{
 			label: formatMessage(messages.moderationTab),
-			href: `${projectUrl}/moderation`,
+			href: withInstallContextQuery(`${projectUrl}/moderation`),
 			shown: !!currentMember.value,
 		},
 	]

apps/frontend/src/pages/discover.vue

@@ -4,7 +4,6 @@ import { commonProjectTypeCategoryMessages, NavTabs, useVIntl } from '@modrinth/
 const { formatMessage } = useVIntl()
 
 const flags = useFeatureFlags()
-const cosmetics = useCosmetics()
 const route = useRoute()
 
 const allowTabChanging = computed(() => !route.query.sid)
@@ -48,15 +47,13 @@ const selectableProjectTypes = [
 ]
 </script>
 <template>
-	<div class="new-page sidebar" :class="{ 'alt-layout': !cosmetics.rightSearchLayout }">
-		<section class="normal-page__header mb-4 flex flex-col gap-4">
-			<NavTabs
-				v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
-				:links="selectableProjectTypes"
-				replace
-				class="hidden md:flex"
-			/>
-		</section>
+	<div class="mx-auto box-border flex w-full max-w-[1280px] flex-col gap-4 px-6 pb-6">
+		<NavTabs
+			v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
+			:links="selectableProjectTypes"
+			replace
+			class="hidden md:flex"
+		/>
 		<NuxtPage />
 	</div>
 </template>

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<HTMLElement | null>(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<Labrinth.Search.v2.SearchResults | Labrinth.Search.v3.SearchResults>(
-		url,
-		{
-			headers: withLabrinthCanaryHeader(),
-		},
-	)
+	const raw = await client.request<Labrinth.Search.v3.SearchResults>('/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<HTMLElement | null>(null)
+const { isStuck: isInstallHeaderStuck } = useStickyObserver(
+	stickyInstallHeaderRef,
+	'DiscoverInstallHeader',
+)
 </script>
 <template>
 	<Teleport v-if="flags.searchBackground" to="#absolute-background-teleport">
 		<div class="search-background"></div>
 	</Teleport>
+
 	<div
 		v-if="installContext"
 		ref="stickyInstallHeaderRef"
-		class="normal-page__header browse-install-header-bleed sticky top-0 z-20 mb-4 flex flex-col gap-2 border-0 bg-surface-1 py-3"
+		class="sticky top-0 z-20 -mx-6 border-0 border-solid border-divider bg-surface-1 px-6 pt-4"
+		:class="[isInstallHeaderStuck ? 'border-t' : '']"
 	>
-		<BrowseInstallHeader />
+		<BrowseInstallHeader divider bottom-padding />
 	</div>
+
 	<SelectedProjectsFloatingBar v-if="installContext" :install-context="installContext" />
-	<aside class="normal-page__sidebar" :aria-label="formatMessage(commonMessages.filtersLabel)">
-		<AdPlaceholder v-if="!auth.user && !serverData" />
-		<BrowseSidebar />
-	</aside>
-	<section class="normal-page__content">
-		<div class="flex flex-col gap-3">
+
+	<div
+		class="grid min-w-0 gap-3"
+		:class="
+			cosmetics.rightSearchLayout
+				? 'lg:grid-cols-[minmax(0,1fr)_18.75rem]'
+				: 'lg:grid-cols-[18.75rem_minmax(0,1fr)]'
+		"
+	>
+		<section
+			class="flex min-w-0 flex-col gap-3"
+			:class="cosmetics.rightSearchLayout ? 'lg:order-1' : 'lg:order-2'"
+		>
 			<BrowsePageLayout>
 				<template #display-mode-icon>
 					<GridIcon v-if="resultsDisplayMode === 'grid'" />
@@ -530,78 +579,34 @@ provideBrowseManager({
 					<ListIcon v-else />
 				</template>
 			</BrowsePageLayout>
-			<CreationFlowModal
-				v-if="currentServerId && projectType?.id === 'modpack'"
-				ref="onboardingModalRef"
-				:type="fromContext === 'reset-server' ? 'reset-server' : 'server-onboarding'"
-				:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
-				:show-snapshot-toggle="true"
-				:on-back="onOnboardingBack"
-				@hide="onOnboardingHide"
-				@browse-modpacks="() => {}"
-				@create="onModpackFlowCreate"
-			/>
-		</div>
-	</section>
+		</section>
+
+		<aside
+			class="min-w-0"
+			:class="cosmetics.rightSearchLayout ? 'lg:order-2' : 'lg:order-1'"
+			:aria-label="formatMessage(commonMessages.filtersLabel)"
+		>
+			<BrowseSidebar>
+				<template #prepend>
+					<AdPlaceholder v-if="!auth.user && !serverData" />
+				</template>
+			</BrowseSidebar>
+		</aside>
+	</div>
+
+	<CreationFlowModal
+		v-if="currentServerId && projectType?.id === 'modpack'"
+		ref="onboardingModalRef"
+		:type="fromContext === 'reset-server' ? 'reset-server' : 'server-onboarding'"
+		:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
+		:show-snapshot-toggle="true"
+		:on-back="onOnboardingBack"
+		@hide="onOnboardingHide"
+		@browse-modpacks="() => {}"
+		@create="onModpackFlowCreate"
+	/>
 </template>
 <style lang="scss" scoped>
-.browse-install-header-bleed {
-	grid-column: 1 / -1;
-	margin-inline: -1.5rem;
-	padding-inline: 0.75rem !important;
-
-	&::after {
-		content: '';
-		position: absolute;
-		right: 50%;
-		bottom: 0;
-		width: 100vw;
-		border-bottom: 1px solid var(--surface-5);
-		transform: translateX(50%);
-	}
-}
-
-.normal-page__content {
-	display: contents;
-
-	@media screen and (min-width: 1024px) {
-		display: block;
-	}
-}
-
-.normal-page__sidebar {
-	grid-row: 3;
-
-	@media screen and (min-width: 1024px) {
-		display: block;
-	}
-}
-
-.filters-card {
-	padding: var(--spacing-card-md);
-
-	@media screen and (min-width: 1024px) {
-		padding: var(--spacing-card-lg);
-	}
-}
-
-.content-wrapper {
-	grid-row: 1;
-}
-
-.pagination-after {
-	grid-row: 6;
-}
-
-.no-results {
-	text-align: center;
-	display: flow-root;
-}
-
-.loading-logo {
-	margin: 2rem;
-}
-
 .search-background {
 	width: 100%;
 	height: 20rem;