From cf0205bd5c17f035334855ab7f55608d97912bce Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Tue, 31 Mar 2026 06:26:06 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Extracted=20catSlug=20to=20shared=20uti?=
 =?UTF-8?q?lity;=20added=20category=20accent=20border=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/utils/catSlug.ts"
- "frontend/src/pages/TopicsBrowse.tsx"
- "frontend/src/pages/SubTopicPage.tsx"
- "frontend/src/pages/SearchResults.tsx"
- "frontend/src/App.css"

GSD-Task: S03/T01
---
 frontend/src/App.css                 |  9 +++++++++
 frontend/src/pages/SearchResults.tsx |  3 ++-
 frontend/src/pages/SubTopicPage.tsx  | 11 +++++++++--
 frontend/src/pages/TopicsBrowse.tsx  |  6 +-----
 frontend/src/utils/catSlug.ts        |  4 ++++
 frontend/tsconfig.app.tsbuildinfo    |  2 +-
 6 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/utils/catSlug.ts

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 69d9525..4cff9ce 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2334,6 +2334,8 @@ a.app-footer__repo:hover {
   max-width: 56rem;
   margin: 0 auto;
   padding: 1rem 0;
+  border-left: 4px solid transparent;
+  padding-left: 1.25rem;
 }
 
 .subtopic-page__title {
@@ -2347,6 +2349,13 @@ a.app-footer__repo:hover {
   font-size: 0.95rem;
   color: var(--color-text-secondary);
   margin: 0 0 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.subtopic-page__subtitle-sep {
+  color: var(--color-text-muted);
 }
 
 .subtopic-groups {
diff --git a/frontend/src/pages/SearchResults.tsx b/frontend/src/pages/SearchResults.tsx
index 916ae64..f609099 100644
--- a/frontend/src/pages/SearchResults.tsx
+++ b/frontend/src/pages/SearchResults.tsx
@@ -9,6 +9,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useSearchParams, useNavigate } from "react-router-dom";
 import { searchApi, type SearchResultItem } from "../api/public-client";
+import { catSlug } from "../utils/catSlug";
 
 export default function SearchResults() {
   const [searchParams] = useSearchParams();
@@ -167,7 +168,7 @@ function SearchResultCard({ item }: { item: SearchResultItem }) {
         {item.topic_category && (
           <>
             <span className="queue-card__separator">·</span>
-            <span>{item.topic_category}</span>
+            <span className={`badge badge--cat-${catSlug(item.topic_category)}`}>{item.topic_category}</span>
           </>
         )}
         {item.topic_tags.length > 0 && (
diff --git a/frontend/src/pages/SubTopicPage.tsx b/frontend/src/pages/SubTopicPage.tsx
index ebc53e2..09923f6 100644
--- a/frontend/src/pages/SubTopicPage.tsx
+++ b/frontend/src/pages/SubTopicPage.tsx
@@ -11,6 +11,7 @@ import {
   fetchSubTopicTechniques,
   type TechniqueListItem,
 } from "../api/public-client";
+import { catSlug } from "../utils/catSlug";
 
 /** Convert a URL slug to a display name: replace hyphens with spaces, title-case. */
 function slugToDisplayName(slug: string): string {
@@ -91,9 +92,13 @@ export default function SubTopicPage() {
   }
 
   const groups = groupByCreator(techniques);
+  const slug = category ? catSlug(categoryDisplay) : "";
 
   return (
-    <div className="subtopic-page">
+    <div
+      className="subtopic-page"
+      style={slug ? { borderLeftColor: `var(--color-badge-cat-${slug}-text)` } : undefined}
+    >
       {/* Breadcrumbs */}
       <nav className="breadcrumbs" aria-label="Breadcrumb">
         <Link to="/topics" className="breadcrumbs__link">Topics</Link>
@@ -105,7 +110,9 @@ export default function SubTopicPage() {
 
       <h2 className="subtopic-page__title">{subtopicDisplay}</h2>
       <p className="subtopic-page__subtitle">
-        {techniques.length} technique{techniques.length !== 1 ? "s" : ""} in {categoryDisplay}
+        <span className={`badge badge--cat-${slug}`}>{categoryDisplay}</span>
+        <span className="subtopic-page__subtitle-sep">·</span>
+        {techniques.length} technique{techniques.length !== 1 ? "s" : ""}
       </p>
 
       {techniques.length === 0 ? (
diff --git a/frontend/src/pages/TopicsBrowse.tsx b/frontend/src/pages/TopicsBrowse.tsx
index 1a3876b..9e8f892 100644
--- a/frontend/src/pages/TopicsBrowse.tsx
+++ b/frontend/src/pages/TopicsBrowse.tsx
@@ -13,11 +13,7 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { fetchTopics, type TopicCategory } from "../api/public-client";
 import { CATEGORY_ICON } from "../components/CategoryIcons";
-
-/** Derive the badge CSS slug from a category name. */
-function catSlug(name: string): string {
-  return name.toLowerCase().replace(/\s+/g, "-");
-}
+import { catSlug } from "../utils/catSlug";
 
 
 
diff --git a/frontend/src/utils/catSlug.ts b/frontend/src/utils/catSlug.ts
new file mode 100644
index 0000000..f967f2a
--- /dev/null
+++ b/frontend/src/utils/catSlug.ts
@@ -0,0 +1,4 @@
+/** Derive the badge CSS slug from a category name. */
+export function catSlug(name: string): string {
+  return name.toLowerCase().replace(/\s+/g, "-");
+}
diff --git a/frontend/tsconfig.app.tsbuildinfo b/frontend/tsconfig.app.tsbuildinfo
index 38b7d02..86738dc 100644
--- a/frontend/tsconfig.app.tsbuildinfo
+++ b/frontend/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"}
\ No newline at end of file
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts"],"version":"5.6.3"}
\ No newline at end of file