From 757aad12a87702e8d67fe36f697153b4830e6f49 Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Wed, 12 Jun 2024 18:38:01 -0400
Subject: [PATCH 1/2] Add text link for track tile genre and mood info

---
 .../src/components/track/GiantTrackTile.tsx   | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/track/GiantTrackTile.tsx b/packages/web/src/components/track/GiantTrackTile.tsx
index 8c45353d9a6..f89f4d25c80 100644
--- a/packages/web/src/components/track/GiantTrackTile.tsx
+++ b/packages/web/src/components/track/GiantTrackTile.tsx
@@ -68,6 +68,8 @@ import styles from './GiantTrackTile.module.css'
 import { GiantTrackTileProgressInfo } from './GiantTrackTileProgressInfo'
 import { InfoLabel } from './InfoLabel'
 import { PlayPauseButton } from './PlayPauseButton'
+import { SEARCH_PAGE } from 'utils/route'
+import { generatePath } from 'react-router-dom'
 
 const DownloadSection = lazy(() =>
   import('./DownloadSection').then((module) => ({
@@ -367,7 +369,16 @@ export const GiantTrackTile = ({
       mood && (
         <InfoLabel
           labelName='mood'
-          labelValue={mood in moodMap ? moodMap[mood as Mood] : mood}
+          labelValue={
+            <TextLink
+              to={{
+                pathname: generatePath(SEARCH_PAGE, { category: 'tracks' }),
+                search: new URLSearchParams({ mood }).toString()
+              }}
+            >
+              {mood in moodMap ? moodMap[mood as Mood] : mood}
+            </TextLink>
+          }
         />
       )
     )
@@ -378,7 +389,19 @@ export const GiantTrackTile = ({
 
     return (
       shouldShow && (
-        <InfoLabel labelName='genre' labelValue={getCanonicalName(genre)} />
+        <InfoLabel
+          labelName='genre'
+          labelValue={
+            <TextLink
+              to={{
+                pathname: generatePath(SEARCH_PAGE, { category: 'tracks' }),
+                search: new URLSearchParams({ genre }).toString()
+              }}
+            >
+              {getCanonicalName(genre)}
+            </TextLink>
+          }
+        />
       )
     )
   }

From 35992f02f63ed1c260021fa28083dc70f355004c Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Wed, 12 Jun 2024 23:47:18 -0400
Subject: [PATCH 2/2] fix lint

---
 packages/web/src/components/track/GiantTrackTile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/track/GiantTrackTile.tsx b/packages/web/src/components/track/GiantTrackTile.tsx
index f89f4d25c80..b57c4af81a6 100644
--- a/packages/web/src/components/track/GiantTrackTile.tsx
+++ b/packages/web/src/components/track/GiantTrackTile.tsx
@@ -45,6 +45,7 @@ import { Mood } from '@audius/sdk'
 import cn from 'classnames'
 import dayjs from 'dayjs'
 import { useDispatch, shallowEqual, useSelector } from 'react-redux'
+import { generatePath } from 'react-router-dom'
 
 import { TextLink, UserLink } from 'components/link'
 import Menu from 'components/menu/Menu'
@@ -58,6 +59,7 @@ import { ComponentPlacement } from 'components/types'
 import { UserGeneratedText } from 'components/user-generated-text'
 import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { moodMap } from 'utils/Moods'
+import { SEARCH_PAGE } from 'utils/route'
 import { trpc } from 'utils/trpcClientWeb'
 
 import { AiTrackSection } from './AiTrackSection'
@@ -68,8 +70,6 @@ import styles from './GiantTrackTile.module.css'
 import { GiantTrackTileProgressInfo } from './GiantTrackTileProgressInfo'
 import { InfoLabel } from './InfoLabel'
 import { PlayPauseButton } from './PlayPauseButton'
-import { SEARCH_PAGE } from 'utils/route'
-import { generatePath } from 'react-router-dom'
 
 const DownloadSection = lazy(() =>
   import('./DownloadSection').then((module) => ({