# S01 Research — Frontend Schema Sync + Hero Section

## Summary

Straightforward UI slice. The backend already returns all needed fields (`bio`, `social_links`, `featured`, `avatar_url`, `technique_count`, `techniques`, `genre_breakdown`) via `GET /api/v1/creators/{slug}`. The frontend `CreatorDetailResponse` TypeScript interface is out of sync — it only declares `id`, `name`, `slug`, `genres`, `folder_name`, `view_count`, `created_at`, `updated_at`, `video_count`. The work is: (1) sync the TS interface, (2) build a hero section consuming the new fields.

No new libraries, no backend changes, no migrations required.

## Recommendation

Two tasks:
1. **Schema sync** — update `CreatorDetailResponse` in `frontend/src/api/public-client.ts` to include all fields the backend returns. Also add the `CreatorTechniqueItem` interface.
2. **Hero section** — redesign the `creator-detail__header` in `CreatorDetail.tsx` with large avatar, name, bio text, and genre pills. Add CSS in `App.css`.

## Implementation Landscape

### Backend (no changes needed)

- **Model:** `backend/models.py` — `Creator` has `bio` (Text), `social_links` (JSONB), `featured` (bool), `avatar_url` (String), `genres` (ARRAY(String)).
- **Schema:** `backend/schemas.py` — `CreatorDetail` extends `CreatorRead` with `bio`, `social_links`, `featured`, `video_count`, `technique_count`, `techniques`, `genre_breakdown`.
- **Router:** `backend/routers/creators.py` — `GET /{slug}` already returns full `CreatorDetail` including all profile fields. No endpoint changes needed.

### Frontend — files to change

| File | What changes |
|------|-------------|
| `frontend/src/api/public-client.ts` | Add missing fields to `CreatorDetailResponse`: `bio`, `social_links`, `featured`, `avatar_url`, `technique_count`, `techniques` (array with `title`, `slug`, `topic_category`, `created_at`), `genre_breakdown`. |
| `frontend/src/pages/CreatorDetail.tsx` | Replace compact header with hero section: large avatar (size 96+), prominent name, bio paragraph, genre pills. Remove the separate `fetchTechniques` call — backend already returns `techniques` in the detail response. |
| `frontend/src/App.css` | New `.creator-hero` styles: flex/grid layout for avatar + text, bio typography, responsive collapse. |

### Key existing patterns to follow

- **CreatorAvatar** component (`frontend/src/components/CreatorAvatar.tsx`) already supports `imageUrl` prop and arbitrary `size`. Pass `creator.avatar_url` and `size={96}`.
- **Genre pills** already rendered with `.pill` class in current header — keep this pattern.
- **CSS custom properties** for theming: `--color-bg-surface`, `--color-text-primary`, `--color-text-secondary`, `--color-border`, `--color-accent` etc. 77 semantic tokens in `:root`.
- **Back link** pattern: `<Link to="/creators" className="back-link">← Creators</Link>` — keep at top.
- **Card stagger animation**: technique cards already use `card-stagger` class with `--stagger-index` CSS var.

### social_links shape

The `social_links` JSONB column stores a dict like `{"youtube": "url", "instagram": "url", ...}`. S02 handles rendering social link icons — S01 does NOT need to render them, just ensure the field flows through the interface.

### Risks

None. Backend is stable. No new dependencies. Pure frontend presentation work.

### Verification

- `cd frontend && npx tsc --noEmit` — zero errors after interface sync.
- `cd frontend && npm run build` — clean production build.
- Visual check: creator detail page shows large avatar, name, bio text, genre pills.
