From abd679d71676fde04d8cf806f14c119331debd41 Mon Sep 17 00:00:00 2001
From: Sven <sven@neddo.dev>
Date: Fri, 10 Jan 2025 17:52:05 +0100
Subject: [PATCH] feat(frontend): project tags link to a search (#3126)

* feat(frontend): tags link to a search

* fix category type

* process feedback

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
---
 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..96e6586f8 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?f=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..1e99f94e4 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'