---
estimated_steps: 76
estimated_files: 2
skills_used: []
---

# T01: Reorder sidebar, add creator emphasis block, implement per-category badge colors

Single task covering all three S04 concerns in TechniquePage.tsx and App.css.

## Steps

1. **Sidebar reorder in TechniquePage.tsx** (~line 408–510 in the sidebar column):
   - Move the `{displayPlugins && displayPlugins.length > 0 && ( <section className="technique-plugins"> ... </section> )}` JSX block so it appears FIRST inside `<div className="technique-columns__sidebar">`, before the key moments section.
   - Final sidebar order: Plugins Referenced → Key Moments → Signal Chains → Related Techniques.

2. **Creator emphasis in TechniquePage.tsx** (~line 232–248, the `technique-header__meta` div):
   - Remove the `<Link className="technique-header__creator">` from inside `technique-header__meta`.
   - Add a new `<div className="technique-header__creator-block">` between the `<h1>` title and the `technique-header__meta` div.
   - Inside the creator block, render:
     ```tsx
     {technique.creator_info && (
       <div className="technique-header__creator-block">
         <Link to={`/creators/${technique.creator_info.slug}`} className="technique-header__creator-link">
           {technique.creator_info.name}
         </Link>
         {technique.creator_info.genres && technique.creator_info.genres.length > 0 && (
           <span className="technique-header__creator-genres">
             {technique.creator_info.genres.map((g) => (
               <span key={g} className="pill pill--genre-small">{g}</span>
             ))}
           </span>
         )}
       </div>
     )}
     ```

3. **Creator emphasis CSS in App.css** (after the existing `.technique-header__title` styles, ~line 1296):
   - Add `.technique-header__creator-block` — `display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem;`
   - Add `.technique-header__creator-link` — `font-size: 1.125rem; font-weight: 600; color: var(--color-link-accent); text-decoration: none;`
   - Add `.technique-header__creator-link:hover` — `text-decoration: underline; color: var(--color-accent-hover);`
   - Add `.pill--genre-small` — `font-size: 0.625rem; padding: 0.0625rem 0.375rem; background: var(--color-pill-bg); color: var(--color-text-secondary);`
   - Remove the old `.technique-header__creator` and `.technique-header__creator:hover` rules.

4. **Category color variables in App.css** (add to the `:root` block, after the existing `--color-badge-category-*` variables):
   ```css
   /* Per-category badge colors */
   --color-badge-cat-sound-design-bg: #0d3b3b;
   --color-badge-cat-sound-design-text: #5eead4;
   --color-badge-cat-mixing-bg: #2e1065;
   --color-badge-cat-mixing-text: #c4b5fd;
   --color-badge-cat-synthesis-bg: #0c2461;
   --color-badge-cat-synthesis-text: #93c5fd;
   --color-badge-cat-arrangement-bg: #422006;
   --color-badge-cat-arrangement-text: #fcd34d;
   --color-badge-cat-workflow-bg: #052e16;
   --color-badge-cat-workflow-text: #6ee7b7;
   --color-badge-cat-mastering-bg: #4a1035;
   --color-badge-cat-mastering-text: #f9a8d4;
   ```

5. **Category badge CSS classes in App.css** (after the existing `.badge--category` rule):
   ```css
   .badge--cat-sound-design { background: var(--color-badge-cat-sound-design-bg); color: var(--color-badge-cat-sound-design-text); }
   .badge--cat-mixing { background: var(--color-badge-cat-mixing-bg); color: var(--color-badge-cat-mixing-text); }
   .badge--cat-synthesis { background: var(--color-badge-cat-synthesis-bg); color: var(--color-badge-cat-synthesis-text); }
   .badge--cat-arrangement { background: var(--color-badge-cat-arrangement-bg); color: var(--color-badge-cat-arrangement-text); }
   .badge--cat-workflow { background: var(--color-badge-cat-workflow-bg); color: var(--color-badge-cat-workflow-text); }
   .badge--cat-mastering { background: var(--color-badge-cat-mastering-bg); color: var(--color-badge-cat-mastering-text); }
   ```

6. **Dynamic category class in TechniquePage.tsx** — in the header where the category badge is rendered (~line 234):
   - Change `<span className="badge badge--category">{displayCategory}</span>` to:
     ```tsx
     <span className={`badge badge--category badge--cat-${displayCategory?.toLowerCase().replace(/\s+/g, '-') ?? ''}`}>
       {displayCategory}
     </span>
     ```
   - The `.badge--category` base style (indigo) remains as fallback for any unrecognized category.

7. **Verify:** Run `cd frontend && npx tsc --noEmit && npx vite build` — both must pass with zero errors.

## Must-Haves

- [ ] Sidebar Plugins Referenced section appears first in the sidebar column
- [ ] Creator block sits between the title h1 and the meta row, not inline with badges
- [ ] Creator link uses font-size >= 1rem and font-weight 600
- [ ] Creator genres render as small pills when present
- [ ] 12 new CSS custom properties for 6 category color pairs
- [ ] 6 `.badge--cat-*` CSS classes using the custom properties
- [ ] Category badge JSX derives class from topic_category with slug conversion
- [ ] Base `.badge--category` (indigo) remains as fallback for unknown categories
- [ ] TypeScript compilation passes
- [ ] Vite production build succeeds

## Inputs

- ``frontend/src/pages/TechniquePage.tsx` — current technique page with sidebar sections, header meta row, and category badge`
- ``frontend/src/App.css` — CSS custom properties and technique page styles`

## Expected Output

- ``frontend/src/pages/TechniquePage.tsx` — sidebar reordered (plugins first), creator in dedicated block, category badge with dynamic class`
- ``frontend/src/App.css` — 12 new category color variables, 6 badge--cat-* classes, creator-block styles, genre-small pill style`

## Verification

cd frontend && npx tsc --noEmit && npx vite build
