Refactor search page, migrate to /discover/ (#4862)

Author: Prospector

apps/frontend/nuxt.config.ts

@@ -7,7 +7,7 @@ import { consola } from 'consola'
 import { promises as fs } from 'fs'
 import { globIterate } from 'glob'
 import { defineNuxtConfig } from 'nuxt/config'
-import { basename, relative, resolve } from 'pathe'
+import { basename, relative } from 'pathe'
 import svgLoader from 'vite-svg-loader'
 
 const STAGING_API_URL = 'https://staging-api.modrinth.com/v2/'
@@ -176,23 +176,6 @@ export default defineNuxtConfig({
 
 			console.log('Tags generated!')
 		},
-		'pages:extend'(routes) {
-			routes.splice(
-				routes.findIndex((x) => x.name === 'search-searchProjectType'),
-				1,
-			)
-
-			const types = ['mods', 'modpacks', 'plugins', 'resourcepacks', 'shaders', 'datapacks']
-
-			types.forEach((type) =>
-				routes.push({
-					name: `search-${type}`,
-					path: `/${type}`,
-					file: resolve(__dirname, 'src/pages/search/[searchProjectType].vue'),
-					children: [],
-				}),
-			)
-		},
 		async 'vintl:extendOptions'(opts) {
 			opts.locales ??= []
 

apps/frontend/src/composables/featureFlags.ts

@@ -40,6 +40,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	newProjectGeneralSettings: false,
 	newProjectEnvironmentSettings: true,
 	hideRussiaCensorshipBanner: false,
+	serverDiscovery: false,
 	// advancedRendering: true,
 	// externalLinksNewTab: true,
 	// notUsingBlockers: false,

apps/frontend/src/composables/generated.ts

@@ -1,10 +1,12 @@
 import type { ISO3166, Labrinth } from '@modrinth/api-client'
+import type { DisplayProjectType } from '@modrinth/utils'
 
 import generatedState from '~/generated/state.json'
+import type { DisplayMode } from '~/plugins/cosmetics'
 
 export interface ProjectType {
 	actual: string
-	id: string
+	id: DisplayProjectType
 	display: string
 }
 
@@ -25,7 +27,7 @@ export interface GeneratedState extends Labrinth.State.GeneratedState {
 	// Additional runtime-defined fields not from the API
 	projectTypes: ProjectType[]
 	loaderData: LoaderData
-	projectViewModes: string[]
+	projectViewModes: DisplayMode[]
 	approvedStatuses: string[]
 	rejectedStatuses: string[]
 	staffRoles: string[]

apps/frontend/src/layouts/default.vue

@@ -237,74 +237,76 @@
 				<template v-if="flags.projectTypesPrimaryNav">
 					<ButtonStyled
 						type="transparent"
-						:highlighted="route.name === 'search-mods' || route.path.startsWith('/mod/')"
+						:highlighted="route.name === 'discover-mods' || route.path.startsWith('/mod/')"
 						:highlighted-style="
-							route.name === 'search-mods' ? 'main-nav-primary' : 'main-nav-secondary'
+							route.name === 'discover-mods' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/mods">
+						<nuxt-link to="/discover/mods">
 							<BoxIcon aria-hidden="true" />
 							{{ formatMessage(commonProjectTypeCategoryMessages.mod) }}
 						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
 						:highlighted="
-							route.name === 'search-resourcepacks' || route.path.startsWith('/resourcepack/')
+							route.name === 'discover-resourcepacks' || route.path.startsWith('/resourcepack/')
 						"
 						:highlighted-style="
-							route.name === 'search-resourcepacks' ? 'main-nav-primary' : 'main-nav-secondary'
+							route.name === 'discover-resourcepacks' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/resourcepacks">
+						<nuxt-link to="/discover/resourcepacks">
 							<PaintbrushIcon aria-hidden="true" />
 							{{ formatMessage(commonProjectTypeCategoryMessages.resourcepack) }}
 						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
-						:highlighted="route.name === 'search-datapacks' || route.path.startsWith('/datapack/')"
+						:highlighted="
+							route.name === 'discover-datapacks' || route.path.startsWith('/datapack/')
+						"
 						:highlighted-style="
-							route.name === 'search-datapacks' ? 'main-nav-primary' : 'main-nav-secondary'
+							route.name === 'discover-datapacks' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/datapacks">
+						<nuxt-link to="/discover/datapacks">
 							<BracesIcon aria-hidden="true" />
 							{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
 						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
-						:highlighted="route.name === 'search-modpacks' || route.path.startsWith('/modpack/')"
+						:highlighted="route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')"
 						:highlighted-style="
-							route.name === 'search-modpacks' ? 'main-nav-primary' : 'main-nav-secondary'
+							route.name === 'discover-modpacks' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/modpacks">
+						<nuxt-link to="/discover/modpacks">
 							<PackageOpenIcon aria-hidden="true" />
 							{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
 						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
-						:highlighted="route.name === 'search-shaders' || route.path.startsWith('/shader/')"
+						:highlighted="route.name === 'discover-shaders' || route.path.startsWith('/shader/')"
 						:highlighted-style="
-							route.name === 'search-shaders' ? 'main-nav-primary' : 'main-nav-secondary'
+							route.name === 'discover-shaders' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/shaders">
+						<nuxt-link to="/discover/shaders">
 							<GlassesIcon aria-hidden="true" />
 							{{ formatMessage(commonProjectTypeCategoryMessages.shader) }}
 						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
-						:highlighted="route.name === 'search-plugins' || route.path.startsWith('/plugin/')"
+						:highlighted="route.name === 'discover-plugins' || route.path.startsWith('/plugin/')"
 						:highlighted-style="
-							route.name === 'search-plugins' ? 'main-nav-primary' : 'main-nav-secondary'
+							route.name === 'discover-plugins' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/plugins">
+						<nuxt-link to="/discover/plugins">
 							<PlugIcon aria-hidden="true" />
 							{{ formatMessage(commonProjectTypeCategoryMessages.plugin) }}
 						</nuxt-link>
@@ -320,55 +322,66 @@
 							:options="[
 								{
 									id: 'mods',
-									action: '/mods',
+									action: '/discover/mods',
 								},
 								{
 									id: 'resourcepacks',
-									action: '/resourcepacks',
+									action: '/discover/resourcepacks',
 								},
 								{
 									id: 'datapacks',
-									action: '/datapacks',
+									action: '/discover/datapacks',
 								},
 								{
 									id: 'shaders',
-									action: '/shaders',
+									action: '/discover/shaders',
 								},
 								{
 									id: 'modpacks',
-									action: '/modpacks',
+									action: '/discover/modpacks',
 								},
 								{
 									id: 'plugins',
-									action: '/plugins',
+									action: '/discover/plugins',
+								},
+								{
+									id: 'servers',
+									action: '/discover/servers',
+									shown: flags.serverDiscovery,
 								},
 							]"
 							hoverable
 						>
 							<BoxIcon
-								v-if="route.name === 'search-mods' || route.path.startsWith('/mod/')"
+								v-if="route.name === 'discover-mods' || route.path.startsWith('/mod/')"
 								aria-hidden="true"
 							/>
 							<PaintbrushIcon
 								v-else-if="
-									route.name === 'search-resourcepacks' || route.path.startsWith('/resourcepack/')
+									route.name === 'discover-resourcepacks' || route.path.startsWith('/resourcepack/')
 								"
 								aria-hidden="true"
 							/>
 							<BracesIcon
-								v-else-if="route.name === 'search-datapacks' || route.path.startsWith('/datapack/')"
+								v-else-if="
+									route.name === 'discover-datapacks' || route.path.startsWith('/datapack/')
+								"
 								aria-hidden="true"
 							/>
 							<PackageOpenIcon
-								v-else-if="route.name === 'search-modpacks' || route.path.startsWith('/modpack/')"
+								v-else-if="route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')"
 								aria-hidden="true"
 							/>
 							<GlassesIcon
-								v-else-if="route.name === 'search-shaders' || route.path.startsWith('/shader/')"
+								v-else-if="route.name === 'discover-shaders' || route.path.startsWith('/shader/')"
 								aria-hidden="true"
 							/>
 							<PlugIcon
-								v-else-if="route.name === 'search-plugins' || route.path.startsWith('/plugin/')"
+								v-else-if="route.name === 'discover-plugins' || route.path.startsWith('/plugin/')"
+								aria-hidden="true"
+							/>
+							<ServerIcon
+								v-else-if="route.name === 'discover-servers' || route.path.startsWith('/server/')"
 								aria-hidden="true"
 							/>
 							<CompassIcon v-else aria-hidden="true" />
@@ -402,13 +415,17 @@
 								<PackageOpenIcon aria-hidden="true" />
 								{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
 							</template>
+							<template #servers>
+								<ServerIcon aria-hidden="true" />
+								{{ formatMessage(commonProjectTypeCategoryMessages.server) }}
+							</template>
 						</TeleportOverflowMenu>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
 						:highlighted="
 							route.name?.startsWith('hosting') ||
-							(route.name?.startsWith('search-') && route.query.sid)
+							(route.name?.startsWith('discover-') && !!route.query.sid)
 						"
 						:highlighted-style="
 							route.name === 'hosting' ? 'main-nav-primary' : 'main-nav-secondary'
@@ -1328,27 +1345,27 @@ const navRoutes = computed(() => [
 	{
 		id: 'mods',
 		label: formatMessage(getProjectTypeMessage('mod', true)),
-		href: '/mods',
+		href: '/discover/mods',
 	},
 	{
 		label: formatMessage(getProjectTypeMessage('plugin', true)),
-		href: '/plugins',
+		href: '/discover/plugins',
 	},
 	{
 		label: formatMessage(getProjectTypeMessage('datapack', true)),
-		href: '/datapacks',
+		href: '/discover/datapacks',
 	},
 	{
 		label: formatMessage(getProjectTypeMessage('shader', true)),
-		href: '/shaders',
+		href: '/discover/shaders',
 	},
 	{
 		label: formatMessage(getProjectTypeMessage('resourcepack', true)),
-		href: '/resourcepacks',
+		href: '/discover/resourcepacks',
 	},
 	{
 		label: formatMessage(getProjectTypeMessage('modpack', true)),
-		href: '/modpacks',
+		href: '/discover/modpacks',
 	},
 ])
 
@@ -1439,7 +1456,7 @@ const userMenuOptions = computed(() => {
 })
 
 const isDiscovering = computed(
-	() => route.name && route.name.startsWith('search-') && !route.query.sid,
+	() => route.name && route.name.startsWith('discover-') && !route.query.sid,
 )
 
 const isDiscoveringSubpage = computed(

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

@@ -968,6 +968,9 @@
   "dashboard.withdraw.error.tax-form.title": {
     "message": "Please complete tax form"
   },
+  "discover.title": {
+    "message": "Discover"
+  },
   "error.collection.404.list_item.1": {
     "message": "You may have mistyped the collection's URL."
   },

apps/frontend/src/middleware/search-redirect.global.ts

@@ -0,0 +1,13 @@
+export default defineNuxtRouteMiddleware((to) => {
+	if (
+		to.path.startsWith('/mods') ||
+		to.path.startsWith('/modpacks') ||
+		to.path.startsWith('/plugins') ||
+		to.path.startsWith('/datapacks') ||
+		to.path.startsWith('/resourcepacks') ||
+		to.path.startsWith('/shaders')
+	) {
+		const target = '/discover' + to.fullPath
+		return navigateTo(target, { redirectCode: 301 })
+	}
+})

apps/frontend/src/pages/collection/[id].vue

@@ -364,7 +364,7 @@
 					<span v-if="auth.user && auth.user.id === creator.id" class="preserve-lines text">
 						<IntlFormatted :message-id="messages.noProjectsAuthLabel">
 							<template #create-link="{ children }">
-								<a class="link" @click.prevent="$router.push('/mods')">
+								<a class="link" @click.prevent="$router.push('/discover/mods')">
 									<component :is="() => children" />
 								</a>
 							</template>

apps/frontend/src/pages/discover.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { commonProjectTypeCategoryMessages } from '@modrinth/ui'
+import { useVIntl } from '@vintl/vintl'
+
+import NavTabs from '~/components/ui/NavTabs.vue'
+const { formatMessage } = useVIntl()
+
+const flags = useFeatureFlags()
+const cosmetics = useCosmetics()
+const route = useRoute()
+
+const allowTabChanging = computed(() => !route.query.sid)
+
+const selectableProjectTypes = [
+	{
+		label: formatMessage(commonProjectTypeCategoryMessages.mod),
+		href: `/discover/mods`,
+		type: 'mods',
+	},
+	{
+		label: formatMessage(commonProjectTypeCategoryMessages.resourcepack),
+		href: `/discover/resourcepacks`,
+		type: 'resourcepacks',
+	},
+	{
+		label: formatMessage(commonProjectTypeCategoryMessages.datapack),
+		href: `/discover/datapacks`,
+		type: 'datapacks',
+	},
+	{
+		label: formatMessage(commonProjectTypeCategoryMessages.shader),
+		href: `/discover/shaders`,
+		type: 'shaders',
+	},
+	{
+		label: formatMessage(commonProjectTypeCategoryMessages.modpack),
+		href: `/discover/modpacks`,
+		type: 'modpacks',
+	},
+	{
+		label: formatMessage(commonProjectTypeCategoryMessages.plugin),
+		href: `/discover/plugins`,
+		type: 'plugins',
+	},
+	{
+		label: formatMessage(commonProjectTypeCategoryMessages.server),
+		href: `/discover/servers`,
+		type: 'servers',
+		shown: flags.value.serverDiscovery,
+	},
+]
+</script>
+<template>
+	<div class="new-page sidebar" :class="{ 'alt-layout': !cosmetics.rightSearchLayout }">
+		<section class="normal-page__header mb-4 flex flex-col gap-4">
+			<div id="discover-header-prefix" class="empty:hidden"></div>
+			<NavTabs
+				v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
+				:links="selectableProjectTypes"
+				class="hidden md:flex"
+			/>
+		</section>
+		<NuxtPage />
+	</div>
+</template>