# S04 Research: Admin Profile Editing + Mobile Polish

## Summary

Straightforward slice. Backend endpoint already exists. Frontend needs an API client function, an inline edit UI on CreatorDetail, and responsive CSS fixes for 375px.

## Recommendation

Two tasks: (1) API client + inline edit form on CreatorDetail, (2) mobile responsive polish at 375px. Low risk, known patterns.

## Implementation Landscape

### Backend — Already Done
- `PUT /api/v1/admin/pipeline/creators/{creator_id}` at `backend/routers/pipeline.py:1382`
- Accepts `body: dict` with updatable fields: `bio`, `social_links`, `featured`, `avatar_url`
- Partial update — only provided fields are changed
- Returns `{"status": "updated", "creator": name, "fields": [...]}`
- No backend work needed

### Frontend API Client
- File: `frontend/src/api/public-client.ts`
- Pattern: `request<T>(\`${BASE}/admin/pipeline/creators/${id}\`, { method: "PUT", body: JSON.stringify(payload) })`
- Follows existing patterns at line ~786 (`setDebugMode` with PUT) and ~468 (`updateReport` with PATCH)
- `CreatorDetailResponse` already has all needed fields: `bio`, `social_links`, `id`

### Frontend Edit UI — CreatorDetail.tsx
- No modal/dialog pattern exists in codebase — use inline edit mode (simpler, fits single-admin tool)
- Toggle between view and edit mode with an "Edit" button in the hero section
- Edit mode shows: textarea for bio, key-value inputs for social_links
- Social links are `Record<string, string>` (platform → URL) — render as rows with platform select + URL input, add/remove capability
- On save: PUT to backend, update local state, exit edit mode
- On cancel: discard changes, exit edit mode
- Only show edit button when admin (no auth gate exists — this is a single-admin tool, so always show)

### Mobile Responsive — App.css
- Existing breakpoints: 768px (hero stacks vertical, name shrinks to 1.375rem), 640px, 600px
- Creator hero already responsive at 768px (`flex-direction: column; align-items: center`)
- Need to verify/fix at 375px: stats bar wrapping, technique card grid, social icons, genre pills
- Stats bar uses `flex-wrap: wrap` — should be fine
- Technique grid (`.creator-techniques__list`) — check if cards are full-width at 375px
- Featured technique card (`.creator-featured`) — verify padding doesn't overflow
- Social icons row — verify wrapping at narrow widths

### Key Files
| File | Change |
|------|--------|
| `frontend/src/api/public-client.ts` | Add `updateCreatorProfile()` |
| `frontend/src/pages/CreatorDetail.tsx` | Add edit mode toggle, form state, save/cancel handlers |
| `frontend/src/App.css` | Edit form styles, 375px responsive fixes |

### Constraints
- Creator `id` is UUID string — needed for the PUT URL, available on `CreatorDetailResponse`
- After successful PUT, refetch creator data (or optimistically update state) to reflect changes
- Social links are nullable JSONB — handle null → empty object for editing, empty object → null for saving
