# S02 Research: Social Links + Stats Section

## Summary

Straightforward UI work. The `social_links` field (JSONB dict of platform→URL) is already on the backend response and frontend type. The hero section and stats bar CSS exist from S01. Two additions needed: (1) render social link icons in the hero, (2) add moment count to backend + frontend stats bar.

## Recommendation

Two tasks:
1. **Backend: add moment_count to CreatorDetail** — single subquery join through `source_videos` to count `key_moments` per creator. Return in the response. ~15 min.
2. **Frontend: social links + enhanced stats bar** — add inline SVG icons for social platforms (follow CategoryIcons.tsx pattern), render as clickable links in the hero. Add moment count to the stats bar alongside existing video count and genre breakdown. CSS additions minimal. ~30 min.

## Implementation Landscape

### Backend — moment_count

`get_creator()` in `backend/routers/creators.py:110` already queries `video_count` via a subquery on `SourceVideo`. Moment count requires a join: `KeyMoment.source_video_id → SourceVideo.id WHERE SourceVideo.creator_id == creator.id`.

Pattern to follow (from same function, line ~131):
```python
moment_count = (await db.execute(
    select(func.count()).select_from(KeyMoment)
    .join(SourceVideo, KeyMoment.source_video_id == SourceVideo.id)
    .where(SourceVideo.creator_id == creator.id)
)).scalar() or 0
```

Also add `moment_count: int` to `CreatorDetail` schema in `backend/schemas.py` and pass it in the return dict.

Frontend type `CreatorDetailResponse` in `frontend/src/api/public-client.ts:184` needs `moment_count: number`.

### Frontend — social link icons

**Data shape:** `social_links: Record<string, string> | null` — keys are platform names (e.g., "bandcamp", "instagram"), values are URLs. Live data confirms this shape: `{"bandcamp": "https://...", "instagram": "https://..."}`.

**Icon approach:** Project uses inline SVGs exclusively (see `CategoryIcons.tsx` pattern — shared style constant `S` for dimensions, `P` for stroke props). Create a `SocialIcons.tsx` component with icons for common platforms: instagram, bandcamp, youtube, soundcloud, twitter/x, spotify, facebook, website/globe. Map platform key → icon component. Render as `<a href={url} target="_blank" rel="noopener noreferrer">` wrapping each icon.

**Placement:** Below bio, above genre pills in `.creator-hero__info`. Or inline next to creator name. The natural spot is a new `.creator-hero__socials` div after the bio paragraph.

### Frontend — stats bar enhancement

Current stats bar (`creator-detail__stats-bar`) shows only `video_count` and `genre_breakdown` badges. Add:
- `technique_count` (already on response)
- `moment_count` (new field)

Format: "X techniques · Y videos · Z moments" or similar compact display.

### Files to touch

| File | Change |
|------|--------|
| `backend/routers/creators.py` | Add moment_count subquery |
| `backend/schemas.py` | Add moment_count to CreatorDetail |
| `frontend/src/api/public-client.ts` | Add moment_count to CreatorDetailResponse |
| `frontend/src/pages/CreatorDetail.tsx` | Render social links + enhanced stats |
| `frontend/src/components/SocialIcons.tsx` | New — inline SVG icons per platform |
| `frontend/src/App.css` | Social link styles, stats bar updates |

### Verification

- `npx tsc --noEmit` — zero errors
- `npm run build` — clean production build
- `ssh ub01 "docker compose build && docker compose up -d"` then verify at ub01:8096 on a creator with social_links (Break has bandcamp + instagram)
