---
estimated_steps: 14
estimated_files: 5
skills_used: []
---

# T01: Apply category color coding to SubTopicPage and SearchResults

Extract the catSlug helper from TopicsBrowse.tsx into a shared utility file. Apply category accent colors to SubTopicPage (colored left border on page container, category badge on technique cards using badge--cat-{slug} classes). Apply category color badge to SearchResults cards (replace plain text topic_category span with a colored badge). All 7 categories (sound-design, mixing, synthesis, arrangement, workflow, mastering, music-theory) must render with their distinct colors.

Steps:
1. Create `frontend/src/utils/catSlug.ts` exporting the catSlug function. It converts a category name to CSS slug: `name.toLowerCase().replace(/\s+/g, '-')`.
2. Update `frontend/src/pages/TopicsBrowse.tsx` to import catSlug from the shared util instead of defining it locally.
3. Update `frontend/src/pages/SubTopicPage.tsx`:
   - Import catSlug from utils
   - Add a colored left border to the `.subtopic-page` container using inline style `borderLeftColor: var(--color-badge-cat-{slug}-text)` (same pattern as TopicsBrowse D020)
   - Add a category badge span with class `badge badge--cat-{slug}` showing the category name near the title/subtitle area
   - On each technique card, add a small category badge if desired (optional — the page-level accent may suffice)
4. Update `frontend/src/pages/SearchResults.tsx`:
   - Import catSlug from utils
   - In SearchResultCard, replace the plain `<span>{item.topic_category}</span>` with `<span className={`badge badge--cat-${catSlug(item.topic_category)}`}>{item.topic_category}</span>`
5. Add CSS for SubTopicPage color accent in `frontend/src/App.css` — a `.subtopic-page` left border style (4px solid, using CSS var), and any needed spacing adjustments.
6. Verify: `cd frontend && npx tsc --noEmit && npm run build`

## Inputs

- `frontend/src/pages/TopicsBrowse.tsx`
- `frontend/src/pages/SubTopicPage.tsx`
- `frontend/src/pages/SearchResults.tsx`
- `frontend/src/App.css`

## Expected Output

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

## Verification

cd frontend && npx tsc --noEmit && npm run build
