From 75fe82f0de8758eabdf835e3fc9d84f8b1c061f2 Mon Sep 17 00:00:00 2001
From: Garret Patti <garretpatti@gmail.com>
Date: Wed, 25 Mar 2026 18:41:37 -0400
Subject: [PATCH] group selected tags by category in TagSelector

Assigned tags now render as a single outer pill per category containing
smaller inner tag pills, instead of one pill per tag with a repeated
category prefix.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/tags/TagSelector.tsx | 61 ++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/components/tags/TagSelector.tsx b/src/components/tags/TagSelector.tsx
index b6b58ca..3fd3771 100644
--- a/src/components/tags/TagSelector.tsx
+++ b/src/components/tags/TagSelector.tsx
@@ -87,17 +87,60 @@ export default function TagSelector({ mediaKey }: Props) {
 
   return (
     <div className="flex flex-col gap-3">
-      {/* Assigned tags */}
+      {/* Assigned tags grouped by category */}
       {assigned.tags.length > 0 && (
         <div className="flex flex-wrap gap-1.5">
-          {assigned.tags.map((tag) => (
-            <TagBadge
-              key={tag.id}
-              tag={tag}
-              category={assignedCategoryMap[tag.categoryId]}
-              onRemove={() => toggleTag(tag)}
-            />
-          ))}
+          {(() => {
+            const groups = new Map<string, Tag[]>()
+            const ungrouped: Tag[] = []
+            for (const tag of assigned.tags) {
+              if (tag.categoryId) {
+                const arr = groups.get(tag.categoryId) ?? []
+                arr.push(tag)
+                groups.set(tag.categoryId, arr)
+              } else {
+                ungrouped.push(tag)
+              }
+            }
+            return (
+              <>
+                {Array.from(groups.entries()).map(([catId, tags]) => {
+                  const cat = assignedCategoryMap[catId]
+                  return (
+                    <span
+                      key={catId}
+                      className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
+                    >
+                      <span style={{ color: 'var(--text-secondary)' }}>{cat?.name}:</span>
+                      {tags.map((tag) => (
+                        <span
+                          key={tag.id}
+                          className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full"
+                          style={{ backgroundColor: 'var(--surface-hover)' }}
+                        >
+                          {tag.name}
+                          <button
+                            onClick={() => toggleTag(tag)}
+                            className="ml-0.5 leading-none transition-colors"
+                            style={{ color: 'var(--text-secondary)' }}
+                            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                            aria-label={`Remove tag ${tag.name}`}
+                          >
+                            ✕
+                          </button>
+                        </span>
+                      ))}
+                    </span>
+                  )
+                })}
+                {ungrouped.map((tag) => (
+                  <TagBadge key={tag.id} tag={tag} onRemove={() => toggleTag(tag)} />
+                ))}
+              </>
+            )
+          })()}
         </div>
       )}