feat: use router.replace for project filters to prevent history pollution (#5378)

* fix(navigation): use replaceState for project filters to prevent history pollution

* fix: add replace prop to NavTabs and enable it on project and discover pages

* style: run pnpm run fix on affected files

* enable NavTabs replace prop on collection, user, and org pages

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

apps/frontend/src/components/ui/NavTabs.vue

@@ -11,6 +11,7 @@
 				v-show="link.shown ?? true"
 				:key="link.href"
 				ref="tabLinkElements"
+				:replace="replace"
 				:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
 				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
 				:class="getSSRFallbackClasses(index)"
@@ -71,6 +72,7 @@ interface Tab {
 
 const props = withDefaults(
 	defineProps<{
+		replace?: boolean
 		links: Tab[]
 		query?: string
 		mode?: 'navigation' | 'local'

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

@@ -100,12 +100,12 @@
 					() => {
 						debug('on-show fired')
 						loadVersions()
-						navigateTo({ query: route.query, hash: '#download' })
+						navigateTo({ query: route.query, hash: '#download' }, { replace: true })
 					}
 				"
 				:on-hide="
 					() => {
-						navigateTo({ query: route.query, hash: '' })
+						navigateTo({ query: route.query, hash: '' }, { replace: true })
 					}
 				"
 			>
@@ -243,18 +243,21 @@
 														platformAccordion.open()
 													}
 
-													navigateTo({
-														query: {
-															...route.query,
-															...(userSelectedGameVersion && {
-																version: userSelectedGameVersion,
-															}),
-															...(userSelectedPlatform && {
-																loader: userSelectedPlatform,
-															}),
+													navigateTo(
+														{
+															query: {
+																...route.query,
+																...(userSelectedGameVersion && {
+																	version: userSelectedGameVersion,
+																}),
+																...(userSelectedPlatform && {
+																	loader: userSelectedPlatform,
+																}),
+															},
+															hash: route.hash,
 														},
-														hash: route.hash,
-													})
+														{ replace: true },
+													)
 												}
 											"
 										>
@@ -344,18 +347,21 @@
 														gameVersionAccordion.open()
 													}
 
-													navigateTo({
-														query: {
-															...route.query,
-															...(userSelectedGameVersion && {
-																version: userSelectedGameVersion,
-															}),
-															...(userSelectedPlatform && {
-																loader: userSelectedPlatform,
-															}),
+													navigateTo(
+														{
+															query: {
+																...route.query,
+																...(userSelectedGameVersion && {
+																	version: userSelectedGameVersion,
+																}),
+																...(userSelectedPlatform && {
+																	loader: userSelectedPlatform,
+																}),
+															},
+															hash: route.hash,
 														},
-														hash: route.hash,
-													})
+														{ replace: true },
+													)
 												}
 											"
 										>
@@ -1009,7 +1015,7 @@
 				</div>
 
 				<div class="normal-page__content">
-					<div class="overflow-x-auto"><NavTabs :links="navLinks" class="mb-4" /></div>
+					<div class="overflow-x-auto"><NavTabs :links="navLinks" replace class="mb-4" /></div>
 					<NuxtPage @on-download="triggerDownloadAnimation" @delete-version="deleteVersion" />
 				</div>
 			</div>

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

@@ -286,6 +286,7 @@
 					}
 				}),
 			]"
+			replace
 		/>
 
 		<ProjectCardList

apps/frontend/src/pages/discover.vue

@@ -56,6 +56,7 @@ const selectableProjectTypes = [
 			<NavTabs
 				v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
 				:links="selectableProjectTypes"
+				replace
 				class="hidden md:flex"
 			/>
 		</section>

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

@@ -184,7 +184,7 @@
 					</div>
 				</div>
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
-					<NavTabs :links="navLinks" />
+					<NavTabs :links="navLinks" replace />
 				</div>
 				<ProjectCardList v-if="projects && projects.length > 0">
 					<template

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

@@ -283,7 +283,7 @@
 			</div>
 			<div class="normal-page__content">
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
-					<NavTabs :links="navLinks" />
+					<NavTabs :links="navLinks" replace />
 				</div>
 				<div v-if="projects.length > 0">
 					<ProjectCardList