---
estimated_steps: 49
estimated_files: 6
skills_used: []
---

# T03: Build review queue UI pages with status filters, moment actions, and mode toggle

Implement the full admin review queue UI: the queue list page with status filter tabs and stats summary, the moment detail/review page with approve/reject/edit/split/merge actions, and the review mode toggle. Wire all pages to the API client from T02.

## Steps

1. Build `frontend/src/pages/ReviewQueue.tsx` — the main admin page:
   - Stats bar at top showing counts per status (pending, approved, edited, rejected) fetched from `/api/v1/review/stats`
   - Filter tabs: All, Pending, Approved, Edited, Rejected — clicking a tab filters the queue list
   - Queue list: cards showing moment title, summary excerpt (first 150 chars), video filename, creator name, review_status badge, timestamps. Click card → navigate to `/admin/review/{momentId}`
   - Pagination: Previous/Next buttons with offset/limit
   - Mode toggle in header area: switch between Review Mode and Auto Mode, calls `PUT /api/v1/review/mode`. Show current mode with visual indicator (green dot for review, amber for auto)
   - Empty state: show message when no moments match the current filter
   - Use `useEffect` + `useState` for data fetching (no external state library needed for a single-admin tool)

2. Build `frontend/src/pages/MomentDetail.tsx` — individual moment review page:
   - Display full moment data: title, summary, content_type, start_time/end_time (formatted as mm:ss), plugins list, raw_transcript (if available), review_status badge
   - Show source video filename and creator name
   - Action buttons row:
     - Approve (green) — calls `POST .../approve`, navigates back to queue on success
     - Reject (red) — calls `POST .../reject`, navigates back to queue on success
     - Edit — toggles inline edit mode for title, summary, content_type fields. Save button calls `PUT .../` with edited data
     - Split — opens a split dialog: text input for split timestamp (validated between start_time and end_time), calls `POST .../split`
     - Merge — opens a merge dialog: dropdown to select another moment from same video, calls `POST .../merge`
   - Back link to queue
   - Loading and error states for all API calls

3. Create `frontend/src/components/StatusBadge.tsx` — reusable status badge component with color coding (pending=amber, approved=green, edited=blue, rejected=red).

4. Create `frontend/src/components/ModeToggle.tsx` — review/auto mode toggle component extracted from the queue page for reuse in the header.

5. Update `frontend/src/App.tsx` if needed to add the mode toggle to the global nav header.

6. Update `frontend/src/App.css` with styles for:
   - Stats bar (flex row of count cards)
   - Filter tabs (horizontal tab bar with active indicator)
   - Queue cards (bordered cards with hover effect)
   - Status badges (colored pill shapes)
   - Action buttons (colored, with hover/disabled states)
   - Edit form (inline fields with save/cancel)
   - Split/merge dialogs (modal overlays)
   - Responsive layout (single column on narrow screens)

7. Verify `npm run build` still succeeds after all UI changes.

## Must-Haves

- [ ] Queue page loads and displays moments from API with status filter tabs
- [ ] Stats bar shows correct counts per review status
- [ ] Clicking a moment navigates to detail page
- [ ] Approve, reject actions work and navigate back to queue
- [ ] Edit mode allows inline editing of title/summary/content_type with save
- [ ] Split dialog validates split_time and creates two moments
- [ ] Merge dialog shows moments from same video and merges on confirm
- [ ] Mode toggle reads and updates review/auto mode via API
- [ ] Build succeeds with no TypeScript errors

## Verification

- `cd frontend && npm run build && test -f dist/index.html` — build succeeds
- `cd frontend && npx tsc --noEmit` — no TypeScript errors
- `grep -q 'StatusBadge\|ModeToggle' frontend/src/pages/ReviewQueue.tsx` — components integrated
- `grep -q 'approve\|reject\|split\|merge' frontend/src/pages/MomentDetail.tsx` — all actions present

## Inputs

- ``frontend/src/api/client.ts` — typed API client functions from T02`
- ``frontend/src/App.tsx` — app shell with routes from T02`
- ``frontend/src/App.css` — base styles from T02`
- ``frontend/src/pages/ReviewQueue.tsx` — placeholder from T02 to replace`
- ``frontend/src/pages/MomentDetail.tsx` — placeholder from T02 to replace`

## Expected Output

- ``frontend/src/pages/ReviewQueue.tsx` — full queue page with stats, filters, moment list, mode toggle`
- ``frontend/src/pages/MomentDetail.tsx` — full detail page with approve/reject/edit/split/merge actions`
- ``frontend/src/components/StatusBadge.tsx` — reusable status badge component`
- ``frontend/src/components/ModeToggle.tsx` — review/auto mode toggle component`
- ``frontend/src/App.tsx` — updated with mode toggle in header if needed`
- ``frontend/src/App.css` — complete admin UI styles`

## Verification

cd frontend && npm run build && test -f dist/index.html && npx tsc --noEmit
