---
estimated_steps: 61
estimated_files: 3
skills_used: []
---

# T01: Add updateCreatorProfile API client and inline edit UI on CreatorDetail

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`

## Inputs

- ``frontend/src/api/public-client.ts` — existing CreatorDetailResponse type and request<T> helper`
- ``frontend/src/pages/CreatorDetail.tsx` — current hero section layout from S01/S02`
- ``frontend/src/App.css` — existing creator-hero CSS classes`
- ``frontend/src/components/SocialIcons.tsx` — platform icon names for the platform select dropdown`

## Expected Output

- ``frontend/src/api/public-client.ts` — updateCreatorProfile function and payload/response types added`
- ``frontend/src/pages/CreatorDetail.tsx` — edit mode toggle, bio textarea, social links editor, save/cancel handlers`
- ``frontend/src/App.css` — edit form CSS classes`

## Verification

cd frontend && npx tsc --noEmit && npm run build
