# S01: Frontend Schema Sync + Hero Section

**Goal:** Creator detail page shows a hero section with large avatar, name, bio text, and genre pills. All backend profile fields consumed by the frontend interface.
**Demo:** After this: Creator page shows hero with large avatar, name, bio text, and genre pills. All backend fields consumed.

## Tasks
- [x] **T01: Synced CreatorDetailResponse with backend schema (7 new fields) and eliminated redundant fetchTechniques call from CreatorDetail page** — The frontend `CreatorDetailResponse` interface in `public-client.ts` is missing fields the backend already returns: `bio`, `social_links`, `featured`, `avatar_url`, `technique_count`, `techniques` (array of `CreatorTechniqueItem`), and `genre_breakdown`. The `CreatorDetail.tsx` page makes a separate `fetchTechniques()` call even though the detail endpoint already returns the techniques list. This task syncs the interface and simplifies the data fetching.

## Steps

1. Open `frontend/src/api/public-client.ts`. Find the `CreatorDetailResponse` interface (line ~177).
2. Add a new `CreatorTechniqueItem` interface above it:
   ```ts
   export interface CreatorTechniqueItem {
     title: string;
     slug: string;
     topic_category: string;
     created_at: string;
   }
   ```
3. Add the missing fields to `CreatorDetailResponse`:
   ```ts
   export interface CreatorDetailResponse {
     id: string;
     name: string;
     slug: string;
     genres: string[] | null;
     folder_name: string;
     view_count: number;
     created_at: string;
     updated_at: string;
     video_count: number;
     // New fields from backend CreatorDetail schema
     bio: string | null;
     social_links: Record<string, string> | null;
     featured: boolean;
     avatar_url: string | null;
     technique_count: number;
     techniques: CreatorTechniqueItem[];
     genre_breakdown: Record<string, number>;
   }
   ```
4. Open `frontend/src/pages/CreatorDetail.tsx`. Remove the `fetchTechniques` import and the separate `fetchTechniques()` call from the `useEffect`. The `techniques` state should be derived from `creator.techniques` instead. Remove the `techniques` useState — use `creator?.techniques ?? []` directly, or keep a derived variable.
5. Update the techniques count display to use `creator.technique_count` instead of `techniques.length` where applicable.
6. Run `cd frontend && npx tsc --noEmit` to verify zero type errors.

## Must-Haves

- [ ] `CreatorTechniqueItem` interface exported from public-client.ts
- [ ] `CreatorDetailResponse` includes bio, social_links, featured, avatar_url, technique_count, techniques, genre_breakdown
- [ ] Separate `fetchTechniques` call removed from CreatorDetail.tsx — techniques sourced from detail response
- [ ] TypeScript compiles with zero errors
  - Estimate: 25m
  - Files: frontend/src/api/public-client.ts, frontend/src/pages/CreatorDetail.tsx
  - Verify: cd frontend && npx tsc --noEmit
- [x] **T02: Replaced compact creator header with full hero section: 96px avatar, 2rem name, bio paragraph, genre pills, separated stats bar** — Replace the compact `creator-detail__header` with a full hero section. Large avatar, prominent name, bio paragraph, and genre pills. Use existing `CreatorAvatar` component (supports `imageUrl` prop and arbitrary `size`), existing `.pill` class for genres, and CSS custom properties for theming.

## Steps

1. Open `frontend/src/pages/CreatorDetail.tsx`. Replace the `<header className="creator-detail__header">` block with a new hero layout:
   ```tsx
   <header className="creator-hero">
     <CreatorAvatar
       creatorId={creator.id}
       name={creator.name}
       imageUrl={creator.avatar_url ?? undefined}
       size={96}
     />
     <div className="creator-hero__info">
       <h1 className="creator-hero__name">{creator.name}</h1>
       {creator.bio && (
         <p className="creator-hero__bio">{creator.bio}</p>
       )}
       {creator.genres && creator.genres.length > 0 && (
         <div className="creator-hero__genres">
           {creator.genres.map((g) => (
             <span key={g} className="pill">{g}</span>
           ))}
         </div>
       )}
     </div>
   </header>
   ```
2. Move the topic breakdown pills (the `badge--cat-*` pills currently in the stats span) to below the technique list header, or keep them — the hero should be clean with just name/bio/genres. The stats (video count, technique count, topic pills) stay in the section below the hero.
3. Open `frontend/src/App.css`. Add `.creator-hero` styles:
   - Flex layout: avatar left, info right, gap 1.5rem
   - `.creator-hero__name`: font-size 2rem+, font-weight 800, letter-spacing -0.02em
   - `.creator-hero__bio`: color var(--color-text-secondary), font-size 1rem, max-width 48rem, line-height 1.6
   - `.creator-hero__genres`: flex-wrap, gap 0.375rem
   - Responsive: at mobile (<768px), stack vertically (flex-direction column, center avatar)
   - Add bottom border or spacing to visually separate hero from technique list
4. Remove or update the old `.creator-detail__header` / `.creator-detail__name` CSS rules that are no longer used.
5. Run `cd frontend && npm run build` to confirm clean production build.

## Must-Haves

- [ ] Hero section with CreatorAvatar at size 96 using avatar_url
- [ ] Name displayed at 2rem+ font size
- [ ] Bio paragraph rendered when present, hidden when null
- [ ] Genre pills displayed using existing .pill class
- [ ] Responsive: stacks vertically on mobile (<768px)
- [ ] Clean production build with zero warnings
  - Estimate: 35m
  - Files: frontend/src/pages/CreatorDetail.tsx, frontend/src/App.css
  - Verify: cd frontend && npm run build
