From b01e5949b6490aa33c1ef8fcb64b5a411e37bccb Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Tue, 31 Mar 2026 08:32:09 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Replaced=20run-on=20dot-separated=20top?=
 =?UTF-8?q?ic=20stats=20on=20CreatorDetail=20with=20c=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/pages/CreatorDetail.tsx"
- "frontend/src/App.css"

GSD-Task: S02/T02
---
 frontend/src/App.css                 |  7 +++++++
 frontend/src/pages/CreatorDetail.tsx | 30 +++++++++++++++-------------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4aa9948..c8bceb0 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2122,6 +2122,13 @@ a.app-footer__repo:hover {
   color: var(--color-text-secondary);
 }
 
+.creator-detail__topic-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-items: center;
+}
+
 .creator-techniques {
   margin-top: 1.5rem;
 }
diff --git a/frontend/src/pages/CreatorDetail.tsx b/frontend/src/pages/CreatorDetail.tsx
index 4605302..98acd53 100644
--- a/frontend/src/pages/CreatorDetail.tsx
+++ b/frontend/src/pages/CreatorDetail.tsx
@@ -14,6 +14,7 @@ import {
   type TechniqueListItem,
 } from "../api/public-client";
 import CreatorAvatar from "../components/CreatorAvatar";
+import { catSlug } from "../utils/catSlug";
 
 export default function CreatorDetail() {
   const { slug } = useParams<{ slug: string }>();
@@ -109,20 +110,21 @@ export default function CreatorDetail() {
             {techniques.length > 0 && (
               <>
                 <span className="queue-card__separator">·</span>
-                {Object.entries(
-                  techniques.reduce<Record<string, number>>((acc, t) => {
-                    const cat = t.topic_category || "Uncategorized";
-                    acc[cat] = (acc[cat] || 0) + 1;
-                    return acc;
-                  }, {}),
-                )
-                  .sort(([, a], [, b]) => b - a)
-                  .map(([cat, count], i) => (
-                    <span key={cat} className="creator-detail__topic-stat">
-                      {i > 0 && <span className="queue-card__separator">·</span>}
-                      {cat}: {count}
-                    </span>
-                  ))}
+                <span className="creator-detail__topic-pills">
+                  {Object.entries(
+                    techniques.reduce<Record<string, number>>((acc, t) => {
+                      const cat = t.topic_category || "Uncategorized";
+                      acc[cat] = (acc[cat] || 0) + 1;
+                      return acc;
+                    }, {}),
+                  )
+                    .sort(([, a], [, b]) => b - a)
+                    .map(([cat, count]) => (
+                      <span key={cat} className={`badge badge--cat-${catSlug(cat)}`}>
+                        {cat}: {count}
+                      </span>
+                    ))}
+                </span>
               </>
             )}
           </span>