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

## Summary

This is a **light research** slice — purely frontend CSS + JSX changes to one page (`TechniquePage.tsx`) and the shared stylesheet (`App.css`). No backend changes, no new APIs, no new dependencies. All work follows established patterns already in the codebase.

Three independent concerns, all in the same two files:
1. **Sidebar reorder:** Move "Plugins Referenced" section to the top of the sidebar
2. **Creator emphasis:** Make the creator name visually prominent (currently a small 0.875rem cyan link inline with other meta)
3. **Tag polish:** Implement a coherent color system for the 6 `topic_category` badges and the `topic_tags` pills

## Recommendation

Execute as a single task. All three changes are in `TechniquePage.tsx` (JSX order + minor markup) and `App.css` (new category color variables + creator styling + possible tag pill variants). The changes are small enough that splitting into multiple tasks would add more overhead than value.

## Implementation Landscape

### Files to Modify

| File | What changes |
|------|-------------|
| `frontend/src/pages/TechniquePage.tsx` | Reorder sidebar sections (move Plugins above Key Moments); restructure creator display from inline link to a more prominent block |
| `frontend/src/App.css` | Add per-category color variables; add creator emphasis styles; optionally refine pill styles for tag coherence |

### 1. Sidebar Reorder

Current sidebar order in `TechniquePage.tsx` (lines ~400–510):
1. Key Moments (`technique-moments`)
2. Signal Chains (`technique-chains`)
3. Plugins Referenced (`technique-plugins`)
4. Related Techniques (`technique-related`)

Target order:
1. **Plugins Referenced** (moved to top)
2. Key Moments
3. Signal Chains
4. Related Techniques

This is a pure JSX block reorder — move the `{displayPlugins && ...}` block before the `{technique.key_moments.length > 0 && ...}` block. No logic changes.

### 2. Creator Emphasis

Current state: Creator is a small `<Link>` with class `technique-header__creator` rendered inline inside the `technique-header__meta` flex row alongside the category badge and topic tags. Styled as `font-size: 0.875rem; color: var(--color-link-accent)`.

The creator link text is `by {technique.creator_info.name}`.

Options for emphasis:
- **A) Larger text + dedicated row:** Pull the creator out of the `technique-header__meta` flex row and render it as its own line below the title, e.g., `<div className="technique-header__creator-block">`. Larger font (1rem–1.125rem), bolder weight. Still a link. Can optionally show genre pills from `creator_info.genres`.
- **B) Keep inline but increase visual weight:** Bump font-size to 1rem, add font-weight 600, drop the "by" prefix, make the name the primary visual anchor.

**Recommendation: Option A.** A dedicated row between the title and the meta row gives the creator name room to breathe. The `CreatorInfo` type already includes `genres: string[] | null` which can be shown as small pills next to the name.

### 3. Tag Color System

Current state: All `topic_tags` pills use the same generic `--color-pill-bg` (#22222e) / `--color-pill-text` (#e2e2ea). The `topic_category` badge uses `--color-badge-category-bg` (#1e1b4b indigo) / `--color-badge-category-text` (#93c5fd blue).

There are 6 canonical categories from `config/canonical_tags.yaml`:
1. **Sound design** — creating/shaping sounds
2. **Mixing** — balancing/processing
3. **Synthesis** — generating sound
4. **Arrangement** — song structure
5. **Workflow** — creative process/productivity
6. **Mastering** — final processing

A "coherent color system" means the category badge gets a distinct color per category, and the topic_tags pills under that category should feel visually related.

**Approach:** Add 6 pairs of CSS variables for category badges:
```
--color-badge-cat-{slug}-bg / --color-badge-cat-{slug}-text
```

In the JSX, derive a CSS class from the `topic_category` string:
```tsx
const catSlug = displayCategory?.toLowerCase().replace(/\s+/g, '-');
className={`badge badge--category badge--cat-${catSlug}`}
```

The 6 category colors (dark-mode appropriate, low-saturation backgrounds with readable text):

| Category | BG | Text | Vibe |
|----------|-----|------|------|
| Sound design | deep teal | bright teal | creation/sound |
| Mixing | deep purple | light purple | processing |
| Synthesis | deep blue | light blue | waveforms |
| Arrangement | deep amber | light amber | structure |
| Workflow | deep green | light green | productivity |
| Mastering | deep rose | light rose | polish/finish |

For `topic_tags` pills: keep the current neutral style. The category badge provides the color identity; making every tag colorful would be visually noisy. The pills can get a subtle left-border or slight tint matching their category if desired, but the default neutral pill is fine.

### Existing CSS Variable Pattern

All colors are defined as CSS custom properties in `:root` (lines 3–118 of App.css). The project uses a dark theme with `#0f0f14` page background, cyan (`#22d3ee`) accent, and semantic variable names. Per D017, there are 77 variables. Adding 12 more (6 categories × bg+text) is consistent with the pattern.

### Verification

- `cd frontend && npx tsc --noEmit` — zero TypeScript errors
- `cd frontend && npx vite build` — production build succeeds
- Visual verification via browser at the running app (http://ub01:8096) after `docker compose build && docker compose up -d` on ub01

### Risk: Category String Matching

The `topic_category` values come from the database. They are stored as user-facing strings like "Sound design", not slugs. The CSS class derivation (`toLowerCase().replace(/\s+/g, '-')`) must match the CSS selectors exactly. Fallback: the base `.badge--category` style applies when no category-specific class matches, so unknown categories get the current indigo styling.

### No Backend Changes Needed

The API already returns `creator_info` (with name, slug, genres), `topic_category`, `topic_tags`, and `plugins`. All data needed for these UI changes is already available in the frontend.

### No New Dependencies

Pure CSS + JSX changes within the existing React/Vite/TypeScript stack.
