# S04: Admin Profile Editing + Mobile Polish

**Goal:** Admin can edit creator bio and social links inline on the creator detail page. Page renders cleanly at 375px.
**Demo:** After this: Admin can edit bio, social links for a creator. Page looks good at 375px.

## Tasks
- [x] **T01: Added updateCreatorProfile() API client and inline bio/social-links editor on the creator detail page** — Add the `updateCreatorProfile()` function to public-client.ts following existing PUT patterns (e.g., `setDebugMode`). Then add inline edit mode to CreatorDetail.tsx: an Edit button in the hero, edit mode state, bio textarea, social links key-value editor (platform dropdown + URL input, add/remove rows), save/cancel handlers. Save calls the API and updates local state optimistically. Cancel discards.

## Steps

1. In `frontend/src/api/public-client.ts`, add:
   ```ts
   export interface UpdateCreatorProfilePayload {
     bio?: string | null;
     social_links?: Record<string, string> | null;
     featured?: boolean;
     avatar_url?: string | null;
   }
   export interface UpdateCreatorProfileResponse {
     status: string;
     creator: string;
     fields: string[];
   }
   export async function updateCreatorProfile(
     creatorId: string,
     payload: UpdateCreatorProfilePayload
   ): Promise<UpdateCreatorProfileResponse> {
     return request<UpdateCreatorProfileResponse>(
       `${BASE}/admin/pipeline/creators/${creatorId}`,
       { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }
     );
   }
   ```

2. In `frontend/src/pages/CreatorDetail.tsx`, add edit mode state and handlers:
   - `const [editMode, setEditMode] = useState(false)`
   - `const [editBio, setEditBio] = useState('')`
   - `const [editLinks, setEditLinks] = useState<Array<{platform: string; url: string}>>([])` 
   - `const [saving, setSaving] = useState(false)`
   - `const [saveError, setSaveError] = useState<string | null>(null)`
   - `enterEditMode()`: populate editBio from creator.bio, editLinks from creator.social_links (Object.entries → array, or empty array if null)
   - `handleSave()`: convert editLinks array back to Record, call `updateCreatorProfile(creator.id, { bio: editBio || null, social_links })`, update creator state, exit edit mode
   - `handleCancel()`: reset edit state, exit edit mode

3. In the hero section JSX, add an Edit button (pencil icon or text) that calls enterEditMode. When editMode is true, replace the bio paragraph with a textarea and the social links display with editable rows:
   - Each row: a `<select>` for platform (Instagram, YouTube, Bandcamp, SoundCloud, Twitter, Spotify, Facebook, Twitch, Website) + `<input type="url">` for URL + remove button
   - Add Link button appends a new empty row
   - Save and Cancel buttons at the bottom of the edit form

4. Add CSS in `frontend/src/App.css` for the edit form:
   - `.creator-hero__edit-btn` — small button in hero, positioned top-right or next to name
   - `.creator-edit-form` — the edit container
   - `.creator-edit-form__bio` — textarea styling
   - `.creator-edit-form__links` — social links row layout
   - `.creator-edit-form__actions` — save/cancel button row

5. Verify: `npx tsc --noEmit && npm run build` both pass.

## Must-Haves

- [ ] `updateCreatorProfile()` exported from public-client.ts
- [ ] Edit button visible in hero section
- [ ] Edit mode shows bio textarea pre-filled with current bio
- [ ] Edit mode shows social links as editable platform+URL rows
- [ ] Add/remove social link rows works
- [ ] Save calls PUT endpoint and updates local state
- [ ] Cancel discards changes
- [ ] Saving state disables save button
- [ ] Error state shown if save fails
- [ ] Null social_links handled (empty editor, save as null if no links)

## Verification

- `cd frontend && npx tsc --noEmit` exits 0
- `cd frontend && npm run build` exits 0
- `grep -q 'updateCreatorProfile' frontend/src/api/public-client.ts`
- `grep -q 'editMode' frontend/src/pages/CreatorDetail.tsx`
  - Estimate: 45m
  - Files: frontend/src/api/public-client.ts, frontend/src/pages/CreatorDetail.tsx, frontend/src/App.css
  - Verify: cd frontend && npx tsc --noEmit && npm run build
- [x] **T02: Added 480px media query with 15 rule overrides for stats bar, featured card, technique grid, social icons, genre pills, and edit form on the creator detail page** — Add CSS media query fixes so the creator detail page renders cleanly at 375px (iPhone SE width). The hero already stacks vertically at 768px. This task targets the remaining narrow-screen issues: stats bar text wrapping, featured card padding, technique grid columns, social icons overflow, genre pills wrapping, and the new edit form from T01.

## Steps

1. Read `frontend/src/App.css` around the existing 768px and 640px breakpoints for creator styles (lines ~3260-3290). Understand what's already responsive.

2. Add a `@media (max-width: 480px)` block targeting creator page elements:
   - `.creator-detail__stats-bar`: reduce font-size, adjust gap, ensure wrapping
   - `.creator-detail__topic-pills`: ensure badges wrap without overflow
   - `.creator-featured`: reduce padding, ensure title doesn't overflow
   - `.creator-featured__title`: reduce font-size for narrow screens
   - `.creator-techniques__list`: single-column grid (`grid-template-columns: 1fr`)
   - `.creator-hero__socials`: wrap icons if many, reduce gap
   - `.creator-hero__genres`: ensure pills wrap
   - `.creator-edit-form` (from T01): full-width inputs, stacked layout
   - `.creator-edit-form__links` row: stack platform select above URL input

3. Check that the `.creator-techniques__header` (title + sort dropdown) doesn't overflow at 375px — may need flex-wrap or reduced gap.

4. Verify: `cd frontend && npm run build` passes (CSS is valid).

## Must-Haves

- [ ] No horizontal overflow at 375px viewport width on creator detail page
- [ ] Stats bar text readable and wrapped at narrow widths
- [ ] Featured technique card contained within viewport
- [ ] Technique grid single-column at 480px and below
- [ ] Edit form (from T01) usable at 375px — full-width inputs, readable labels

## Verification

- `cd frontend && npm run build` exits 0
- `grep -q '480px' frontend/src/App.css` — narrow breakpoint exists
  - Estimate: 20m
  - Files: frontend/src/App.css
  - Verify: cd frontend && npm run build
