feat(frontend): project tags link to a search (modrinth#3126)

* feat(frontend): tags link to a search * fix category type * process feedback --------- Co-authored-by: Prospector <[email protected]>
pyrohost · Jan 10, 2025 · abd679d · abd679d
1 parent ec5e3b0
commit abd679d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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'