feat: Replaced run-on dot-separated topic stats on CreatorDetail with c…

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

GSD-Task: S02/T02

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;
 }

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(
+                <span className="creator-detail__topic-pills">
-                  techniques.reduce<Record<string, number>>((acc, t) => {
+                  {Object.entries(
-                    const cat = t.topic_category || "Uncategorized";
+                    techniques.reduce<Record<string, number>>((acc, t) => {
-                    acc[cat] = (acc[cat] || 0) + 1;
+                      const cat = t.topic_category || "Uncategorized";
-                    return acc;
+                      acc[cat] = (acc[cat] || 0) + 1;
-                  }, {}),
+                      return acc;
-                )
+                    }, {}),
-                  .sort(([, a], [, b]) => b - a)
+                  )
-                  .map(([cat, count], i) => (
+                    .sort(([, a], [, b]) => b - a)
-                    <span key={cat} className="creator-detail__topic-stat">
+                    .map(([cat, count]) => (
-                      {i > 0 && <span className="queue-card__separator">·</span>}
+                      <span key={cat} className={`badge badge--cat-${catSlug(cat)}`}>
-                      {cat}: {count}
+                        {cat}: {count}
-                    </span>
+                      </span>
-                  ))}
+                    ))}
+                </span>
               </>
             )}
           </span>