From a4476c38893dc75b3e5d38a6d9d54b82c4e2d80d Mon Sep 17 00:00:00 2001
From: Sven <sven@neddo.dev>
Date: Sun, 5 Jan 2025 11:43:13 +0100
Subject: [PATCH 1/3] feat(frontend): tags link to a search

---
 packages/ui/src/components/project/ProjectHeader.vue     | 9 ++++++++-
 .../components/project/ProjectSidebarCompatibility.vue   | 3 +++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
index f17bccac2..8106f4783 100644
--- a/packages/ui/src/components/project/ProjectHeader.vue
+++ b/packages/ui/src/components/project/ProjectHeader.vue
@@ -37,7 +37,11 @@
       <div v-if="project.categories.length > 0" class="hidden items-center gap-2 md:flex">
         <TagsIcon class="h-6 w-6 text-secondary" />
         <div class="flex flex-wrap gap-2">
-          <TagItem v-for="(category, index) in project.categories" :key="index">
+          <TagItem
+            v-for="(category, index) in project.categories"
+            :key="index"
+            :action="() => router.push(`../${project.project_type}s?g=categories:${category}`)"
+          >
             {{ formatCategory(category) }}
           </TagItem>
         </div>
@@ -53,9 +57,12 @@ import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
 import Avatar from '../base/Avatar.vue'
 import ContentPageHeader from '../base/ContentPageHeader.vue'
 import { formatCategory, formatNumber, type Project } from '@modrinth/utils'
+import { useRouter } from 'vue-router'
 import TagItem from '../base/TagItem.vue'
 import ProjectStatusBadge from './ProjectStatusBadge.vue'
 
+const router = useRouter()
+
 withDefaults(
   defineProps<{
     project: Project
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index 868354175..2f554e6fb 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -18,6 +18,7 @@
         <TagItem
           v-for="platform in project.loaders"
           :key="`platform-tag-${platform}`"
+          :action="() => router.push(`../${project.project_type}s?g=categories:${platform}`)"
           :style="`--_color: var(--color-platform-${platform})`"
         >
           <svg v-html="tags.loaders.find((x) => x.name === platform).icon"></svg>
@@ -78,9 +79,11 @@ import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrin
 import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
 import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
 import { useVIntl, defineMessages } from '@vintl/vintl'
+import { useRouter } from 'vue-router'
 import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()
+const router = useRouter()
 
 type EnvironmentValue = 'optional' | 'required' | 'unsupported' | 'unknown'
 

From d8ef3e89d796a01b2f2e2d1a5c53b16537ec7fc7 Mon Sep 17 00:00:00 2001
From: Sven <sven@neddo.dev>
Date: Sun, 5 Jan 2025 11:45:55 +0100
Subject: [PATCH 2/3] fix category type

---
 packages/ui/src/components/project/ProjectHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
index 8106f4783..105535a63 100644
--- a/packages/ui/src/components/project/ProjectHeader.vue
+++ b/packages/ui/src/components/project/ProjectHeader.vue
@@ -40,7 +40,7 @@
           <TagItem
             v-for="(category, index) in project.categories"
             :key="index"
-            :action="() => router.push(`../${project.project_type}s?g=categories:${category}`)"
+            :action="() => router.push(`../${project.project_type}s?f=categories:${category}`)"
           >
             {{ formatCategory(category) }}
           </TagItem>

From cfbac55e16da239efea040f263f1202b75f87dcb Mon Sep 17 00:00:00 2001
From: Sven <sven@neddo.dev>
Date: Fri, 10 Jan 2025 10:06:22 +0100
Subject: [PATCH 3/3] process feedback

---
 packages/ui/src/components/project/ProjectHeader.vue            | 2 +-
 .../ui/src/components/project/ProjectSidebarCompatibility.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
index 105535a63..96e6586f8 100644
--- a/packages/ui/src/components/project/ProjectHeader.vue
+++ b/packages/ui/src/components/project/ProjectHeader.vue
@@ -40,7 +40,7 @@
           <TagItem
             v-for="(category, index) in project.categories"
             :key="index"
-            :action="() => router.push(`../${project.project_type}s?f=categories:${category}`)"
+            :action="() => router.push(`/${project.project_type}s?f=categories:${category}`)"
           >
             {{ formatCategory(category) }}
           </TagItem>
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index 2f554e6fb..1e99f94e4 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -18,7 +18,7 @@
         <TagItem
           v-for="platform in project.loaders"
           :key="`platform-tag-${platform}`"
-          :action="() => router.push(`../${project.project_type}s?g=categories:${platform}`)"
+          :action="() => router.push(`/${project.project_type}s?g=categories:${platform}`)"
           :style="`--_color: var(--color-platform-${platform})`"
         >
           <svg v-html="tags.loaders.find((x) => x.name === platform).icon"></svg>