# S05: Topics Page Redesign + Music Theory Category

**Goal:** Topics page shows 7 categories (including Music Theory) in a responsive card grid layout with category descriptions, sub-topic counts, technique counts, expand/collapse, and filter — all using the existing API shape.
**Demo:** After this: Topics page shows 7 categories (including Music Theory) with an improved visual layout — category cards with descriptions, sub-topic counts, better structure.

## Tasks
- [x] **T01: Added Music Theory as 7th category in canonical_tags.yaml with 8 sub-topics, plus warm orange-gold badge CSS in App.css** — Add "Music Theory" as the 7th category in `config/canonical_tags.yaml` on ub01 with appropriate sub-topics (harmony, chord progressions, scales, rhythm, time signatures, melody, counterpoint, song keys). Add corresponding CSS custom properties `--color-badge-cat-music-theory-bg` and `--color-badge-cat-music-theory-text` to the `:root` block in `frontend/src/App.css`, and add the `.badge--cat-music-theory` class rule after the existing `.badge--cat-mastering` line. Use a warm orange-gold palette (e.g., bg: #3b2506, text: #fdba74) that is visually distinct from the existing 6 category colors (teal, purple, blue, amber, green, pink).

Steps:
1. SSH to ub01 and edit `/vmPool/r/repos/xpltdco/chrysopedia/config/canonical_tags.yaml` — add Music Theory category block after the Mastering entry, following the same YAML structure as existing categories.
2. Verify the API returns 7 categories: `curl -s http://ub01:8096/api/v1/topics | python3 -c "import sys,json; d=json.load(sys.stdin); print(len(d)); assert len(d)==7; print([c['name'] for c in d])"`
3. Edit `frontend/src/App.css` `:root` block (around line 99) — add two new custom properties for music-theory badge colors.
4. Edit `frontend/src/App.css` badge class section (around line 1206) — add `.badge--cat-music-theory` class.
5. Verify CSS is syntactically valid by running `cd frontend && npm run build`.
  - Estimate: 15m
  - Files: config/canonical_tags.yaml (on ub01 via SSH), frontend/src/App.css
  - Verify: curl -s http://ub01:8096/api/v1/topics | python3 -c "import sys,json; d=json.load(sys.stdin); assert len(d)==7, f'Expected 7 categories, got {len(d)}'; names=[c['name'] for c in d]; assert 'Music Theory' in names, f'Music Theory not found in {names}'; print('PASS: 7 categories including Music Theory')" && cd frontend && npx grep-cli --no-error 'music-theory' src/App.css || grep -q 'music-theory' frontend/src/App.css && echo 'PASS: badge CSS present'
- [x] **T02: Rewrote TopicsBrowse.tsx from vertical accordion to responsive 2-column card grid with category color accents, summary stats, and expand/collapse toggles** — Rewrite `TopicsBrowse.tsx` from the current vertical accordion list to a responsive card grid layout, and replace the topics CSS section in `App.css` with card-based styles.

The card layout should:
- Use CSS grid: 2 columns on desktop (min-width > 768px), 1 column on mobile
- Each category card is a bordered surface with: category name (h3, prominent), description text, summary stats line showing sub-topic count and total technique count, expand/collapse button
- Expanded state reveals sub-topics inside the card as a list of links to `/search?q={name}&scope=topics` with technique and creator counts
- Filter input stays at the top, filtering which cards are visible
- All existing functionality preserved: expand/collapse toggle, filter matching on category name + sub-topic names, sub-topic → search navigation

The technique count per category should be computed client-side by summing `sub_topics.map(st => st.technique_count)`. The `TopicCategory` type already has `description` and `sub_topics` with counts — no API changes needed.

CSS changes:
- Replace `.topics-list` flex-column with CSS grid `grid-template-columns: repeat(2, 1fr)` + gap
- Restyle `.topic-category` as a card with padding, border-radius, subtle shadow
- Add `.topic-category__stats` for the summary stats line
- Keep `.topic-subtopics` and `.topic-subtopic` styles but adjust padding for card context
- Update `@media (max-width: 640px)` responsive rules for single-column grid
- Use category badge colors on the card (subtle left border or header accent) to create visual differentiation between categories

The badge class for each category follows the pattern: `badge--cat-${name.toLowerCase().replace(/\s+/g, '-')}`. The corresponding CSS custom properties are `--color-badge-cat-{slug}-bg` and `--color-badge-cat-{slug}-text`. All 7 categories (sound-design, mixing, synthesis, arrangement, workflow, mastering, music-theory) have these defined in `:root`.
  - Estimate: 45m
  - Files: frontend/src/pages/TopicsBrowse.tsx, frontend/src/App.css
  - Verify: cd frontend && npm run build 2>&1 | tail -5 && echo 'PASS: frontend builds' && ssh ub01 'curl -s http://localhost:8096/topics | grep -c "topic-category"' | grep -q '[0-9]' && echo 'PASS: topics page serves HTML'
