# S04: Technique Page: Sidebar Reorder, Creator Emphasis, Tag Polish — UAT

**Milestone:** M006
**Written:** 2026-03-30T11:35:20.065Z

# S04 UAT: Technique Page Sidebar, Creator, Tag Polish

## Preconditions
- Chrysopedia web UI is accessible (http://ub01:8096)
- At least one technique page exists with: a creator that has genres, a recognized category (Sound Design, Mixing, Synthesis, Arrangement, Workflow, or Mastering), and at least one plugin referenced

## Test Cases

### TC-1: Sidebar Order — Plugins First
1. Navigate to a technique page that has plugins referenced
2. Scroll to the sidebar column (right side on desktop)
3. **Expected:** Plugins Referenced section appears FIRST in the sidebar, before Key Moments, Signal Chains, and Related Techniques

### TC-2: Creator Block Placement and Styling
1. Navigate to any technique page with a creator
2. Observe the header area
3. **Expected:** Creator name appears between the page title (h1) and the category/tag badges row
4. **Expected:** Creator name is visually prominent — larger than body text, bold weight
5. Click the creator name
6. **Expected:** Navigates to the creator detail page (`/creators/{slug}`)

### TC-3: Creator Genre Pills
1. Navigate to a technique page whose creator has genre tags (e.g., "Electronic", "Hip Hop")
2. **Expected:** Small genre pills appear next to the creator name in the creator block
3. **Expected:** Pills are compact (smaller font than body text) and don't dominate the creator name

### TC-4: Creator Without Genres
1. Navigate to a technique page whose creator has no genre tags
2. **Expected:** Creator name renders normally without any genre pills — no empty container or visual artifact

### TC-5: Per-Category Badge Colors
1. Navigate to technique pages across different categories:
   - A Sound Design technique → badge should have teal text on dark teal background
   - A Mixing technique → badge should have purple text on dark purple background
   - A Synthesis technique → badge should have blue text on dark blue background
   - An Arrangement technique → badge should have yellow text on dark brown background
   - A Workflow technique → badge should have green text on dark green background
   - A Mastering technique → badge should have pink text on dark magenta background
2. **Expected:** Each category has a distinct, readable color pair

### TC-6: Unknown Category Fallback
1. If a technique page has a category not in the 6 known categories (or no category)
2. **Expected:** Badge renders with the default indigo `.badge--category` base style — no broken styling or missing colors

### TC-7: Build Verification
1. Run `cd frontend && npx tsc --noEmit`
2. **Expected:** Zero TypeScript errors
3. Run `cd frontend && npx vite build`
4. **Expected:** Build succeeds with no errors

## Edge Cases
- Technique page with no plugins: sidebar should not show an empty Plugins section
- Technique page with no creator_info: creator block should not render at all
- Category with spaces (e.g., "Sound Design"): badge class should be `badge--cat-sound-design`
