From 36d321649d46b17176d2bf8b14b2ffa73d96160e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Thu, 26 Feb 2026 22:51:53 +0100
Subject: [PATCH] ui: show hashtags as labels, not metadata

---
 .../nostr/kinds/MusicTrackRenderer.tsx        | 46 +++++++++++--------
 src/lib/music-helpers.ts                      |  8 ++++
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/nostr/kinds/MusicTrackRenderer.tsx b/src/components/nostr/kinds/MusicTrackRenderer.tsx
index 37da5ae..f1ea5f2 100644
--- a/src/components/nostr/kinds/MusicTrackRenderer.tsx
+++ b/src/components/nostr/kinds/MusicTrackRenderer.tsx
@@ -5,6 +5,7 @@ import {
   getTrackArtist,
   getTrackImage,
   getTrackMetadata,
+  getTrackHashtags,
 } from "@/lib/music-helpers";
 import { BaseEventContainer, ClickableEventTitle } from "./BaseEventRenderer";
 import type { BaseEventProps } from "./BaseEventRenderer";
@@ -18,6 +19,7 @@ export function MusicTrackRenderer({ event }: BaseEventProps) {
   const artist = getTrackArtist(event);
   const trackUrl = getTrackUrl(event);
   const metadata = getTrackMetadata(event);
+  const hashtags = getTrackHashtags(event);
 
   return (
     <BaseEventContainer event={event}>
@@ -31,23 +33,29 @@ export function MusicTrackRenderer({ event }: BaseEventProps) {
           {title || "Untitled Track"}
         </ClickableEventTitle>
 
-        {/* Artist & Album */}
-        <div className="text-sm text-muted-foreground">
-          {artist && <span>{artist}</span>}
-          {artist && metadata.album && <span> &middot; </span>}
-          {metadata.album && <span>{metadata.album}</span>}
-        </div>
+        {/* Artist */}
+        {artist && (
+          <div className="text-sm text-muted-foreground">{artist}</div>
+        )}
 
-        {/* Labels */}
-        <div className="flex items-center gap-1.5 flex-wrap">
-          {metadata.language && <Label size="sm">{metadata.language}</Label>}
-          {metadata.aiGenerated && (
-            <Label size="sm">
-              <Bot className="size-3 inline mr-0.5" />
-              AI
-            </Label>
-          )}
-        </div>
+        {/* Tags */}
+        {(hashtags.length > 0 || metadata.aiGenerated) && (
+          <div className="flex items-center gap-1.5 flex-wrap">
+            {hashtags.map((tag) => (
+              <Label key={tag} size="sm">
+                {tag}
+              </Label>
+            ))}
+            {metadata.aiGenerated && (
+              <Label size="sm">
+                <span className="inline-flex items-center gap-1">
+                  <Bot className="size-3" />
+                  ai
+                </span>
+              </Label>
+            )}
+          </div>
+        )}
       </div>
 
       {/* Audio player */}
@@ -103,8 +111,10 @@ export function MusicTrackDetailRenderer({ event }: { event: NostrEvent }) {
           {metadata.language && <Label size="sm">{metadata.language}</Label>}
           {metadata.aiGenerated && (
             <Label size="sm">
-              <Bot className="size-3 inline mr-0.5" />
-              AI Generated
+              <span className="inline-flex items-center gap-1">
+                <Bot className="size-3" />
+                ai generated
+              </span>
             </Label>
           )}
           {metadata.license && <Label size="sm">{metadata.license}</Label>}
diff --git a/src/lib/music-helpers.ts b/src/lib/music-helpers.ts
index 668bc02..3ac6562 100644
--- a/src/lib/music-helpers.ts
+++ b/src/lib/music-helpers.ts
@@ -47,6 +47,14 @@ export function getTrackMetadata(event: NostrEvent): TrackMetadata {
   });
 }
 
+const TrackHashtagsSymbol = Symbol("trackHashtags");
+
+export function getTrackHashtags(event: NostrEvent): string[] {
+  return getOrComputeCachedValue(event, TrackHashtagsSymbol, () => {
+    return event.tags.filter((t) => t[0] === "t" && t[1]).map((t) => t[1]);
+  });
+}
+
 // Playlist helpers
 
 export function getPlaylistTitle(event: NostrEvent): string | undefined {