# S05: Topics Page Redesign + Music Theory Category — UAT

**Milestone:** M006
**Written:** 2026-03-30T11:53:32.315Z

# S05 UAT: Topics Page Redesign + Music Theory Category

## Preconditions
- Chrysopedia running at http://ub01:8096
- API healthy: `curl -s http://ub01:8096/health` returns 200
- All 7 categories returned by API: `curl -s http://ub01:8096/api/v1/topics | python3 -c "import sys,json; d=json.load(sys.stdin); print(len(d))"` → 7

## Test Cases

### TC-01: Seven Categories Visible
1. Navigate to http://ub01:8096/topics
2. Scroll through the page
3. **Expected:** 7 category cards visible: Sound Design, Mixing, Synthesis, Arrangement, Workflow, Mastering, Music Theory
4. **Expected:** Each card has a colored dot and left border in a distinct color
5. **Expected:** Each card shows category description text below the name
6. **Expected:** Each card shows "{N} sub-topics · {M} techniques" stats line

### TC-02: Music Theory Category Content
1. Navigate to http://ub01:8096/topics
2. Find the Music Theory card (last card, orange-gold accent)
3. Click "Show sub-topics ▼" on the Music Theory card
4. **Expected:** 8 sub-topics listed: Harmony, Chord Progressions, Scales, Rhythm, Time Signatures, Melody, Counterpoint, Song Keys
5. **Expected:** Each sub-topic shows technique count and creator count
6. **Expected:** Orange-gold colored left border and dot

### TC-03: Desktop Two-Column Grid Layout
1. Open http://ub01:8096/topics in a browser at ≥768px width
2. **Expected:** Category cards arranged in a 2-column grid with consistent gap
3. **Expected:** Cards have rounded corners and subtle surface styling
4. **Expected:** Music Theory card (7th, odd) sits alone on the last row, left-aligned

### TC-04: Mobile Single-Column Layout
1. Open http://ub01:8096/topics at <640px viewport width (or use DevTools mobile emulation)
2. **Expected:** Cards stack vertically in a single column
3. **Expected:** All cards are full-width
4. **Expected:** Filter input is full-width above the cards

### TC-05: Filter Narrows Visible Cards
1. Navigate to http://ub01:8096/topics
2. Type "synth" in the filter input
3. **Expected:** Only "Synthesis" card visible (matches category name)
4. Clear filter, type "bass"
5. **Expected:** Only "Sound Design" card visible (matches sub-topic name "Bass")
6. Clear filter, type "music"
7. **Expected:** Only "Music Theory" card visible
8. Clear filter
9. **Expected:** All 7 cards visible again

### TC-06: Expand/Collapse Toggle
1. Navigate to http://ub01:8096/topics
2. All cards should start expanded (showing sub-topics)
3. Click "Hide sub-topics ▲" on any card
4. **Expected:** Sub-topic list collapses, button text changes to "Show sub-topics ▼"
5. Click "Show sub-topics ▼"
6. **Expected:** Sub-topic list expands again

### TC-07: Sub-topic Navigation Links
1. Navigate to http://ub01:8096/topics
2. Click any sub-topic name (e.g., "Bass" under Sound Design)
3. **Expected:** Navigates to `/search?q=Bass&scope=topics`
4. **Expected:** Search results page loads with the sub-topic query

### TC-08: Category Color Differentiation
1. Navigate to http://ub01:8096/topics with all cards visible
2. **Expected:** Each category has a visually distinct accent color:
   - Sound Design: teal
   - Mixing: purple
   - Synthesis: blue
   - Arrangement: amber/orange
   - Workflow: green
   - Mastering: pink
   - Music Theory: warm orange-gold

### TC-09: Summary Stats Accuracy
1. Navigate to http://ub01:8096/topics
2. For a category with known technique pages (e.g., Sound Design with Bass techniques):
   - **Expected:** Sub-topic count matches the number of sub-topics listed when expanded
   - **Expected:** Technique count sums to the total of all sub-topic technique counts
3. For Music Theory (new, empty category):
   - **Expected:** "8 sub-topics · 0 techniques"

