# S01 Research — Admin Navigation Dropdown + Header Cleanup

## Summary

Straightforward frontend slice. The header nav in `App.tsx` currently shows 6 flat links (Home, Topics, Creators, Review, Reports, Pipeline) plus a `ModeToggle` component. The goal: group the 3 admin links (Review, Reports, Pipeline) behind an "Admin" dropdown, and remove `ModeToggle` from the header (it stays on the ReviewQueue page).

No new dependencies needed. No backend changes. No library lookups required — the codebase already has a click-outside dropdown pattern in `Home.tsx` (typeahead) that can be adapted.

## Recommendation

Single task. All changes are in 2 files (`App.tsx`, `App.css`) plus optionally extracting the dropdown into a small component. The ModeToggle component file itself is NOT deleted — it's still imported by `ReviewQueue.tsx`.

## Implementation Landscape

### Current State

**`frontend/src/App.tsx`** — The app shell. Header contains:
- Brand link (`<Link to="/">Chrysopedia</Link>`)
- `<div className="app-header__right">` containing:
  - `<nav className="app-nav">` with 6 `<Link>` elements: Home, Topics, Creators, Review, Reports, Pipeline
  - `<ModeToggle />` component

**`frontend/src/components/ModeToggle.tsx`** — Review/auto mode toggle. Imported in:
1. `App.tsx` line 12 (header — **remove this usage**)
2. `ReviewQueue.tsx` line 16 (page body — **keep this usage**)

**`frontend/src/App.css`** — All styles. Relevant sections:
- `.app-header` — flex row, space-between, dark background (`--color-bg-header`)
- `.app-header__right` — flex, gap 1.5rem
- `.app-nav` — flex, gap 1rem, links styled with `--color-text-on-header`
- `.mode-toggle` — all mode toggle styles (lines 425-488) — **keep these** (ReviewQueue still uses them)

### Target State

Header nav shows: `Home | Topics | Creators | Admin ▾`

Clicking "Admin" reveals a small dropdown with: Review, Reports, Pipeline.

ModeToggle removed from the header entirely.

### Existing Dropdown Pattern

`Home.tsx` uses a click-outside-to-close pattern:
```
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
  function handler(e: MouseEvent) {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
      setShowDropdown(false);
    }
  }
  document.addEventListener("mousedown", handler);
  return () => document.removeEventListener("mousedown", handler);
}, []);
```

### Approach

1. **Create `AdminDropdown` component** (`frontend/src/components/AdminDropdown.tsx`):
   - `useState<boolean>` for open/closed
   - `useRef<HTMLDivElement>` for click-outside detection (same pattern as Home.tsx typeahead)
   - Button that says "Admin" with a chevron indicator
   - Dropdown panel with 3 `<Link>` items: Review, Reports, Pipeline
   - Close dropdown on link click and on outside click
   - Close on Escape key for accessibility

2. **Edit `App.tsx`**:
   - Remove `ModeToggle` import
   - Remove `<ModeToggle />` from header JSX
   - Import `AdminDropdown`
   - Replace the 3 admin `<Link>` elements with `<AdminDropdown />`
   - Keep Home, Topics, Creators as flat links

3. **Add CSS to `App.css`**:
   - `.admin-dropdown` — relative positioning container
   - `.admin-dropdown__trigger` — styled like existing nav links (same font-size, color, transitions)
   - `.admin-dropdown__menu` — absolute positioned panel below trigger, dark surface background, border, shadow, border-radius
   - `.admin-dropdown__item` — block links with padding, hover state
   - Use existing CSS variables: `--color-bg-surface`, `--color-border`, `--color-shadow-heavy`, `--color-text-on-header`, etc.

### Files Touched

| File | Change |
|------|--------|
| `frontend/src/components/AdminDropdown.tsx` | **New** — dropdown component |
| `frontend/src/App.tsx` | Remove ModeToggle import/usage, remove 3 admin links, add AdminDropdown |
| `frontend/src/App.css` | Add `.admin-dropdown*` styles (~30 lines) |

### Files NOT Touched

| File | Why |
|------|-----|
| `frontend/src/components/ModeToggle.tsx` | Still used by ReviewQueue.tsx — do not delete |
| `frontend/src/App.css` `.mode-toggle` styles | Still used by ReviewQueue page — do not remove |

### CSS Variable Reuse

All needed tokens already exist:
- Trigger text: `--color-text-on-header` / `--color-text-on-header-hover`
- Dropdown panel background: `--color-bg-surface`
- Dropdown border: `--color-border`
- Dropdown shadow: `--color-shadow-heavy`
- Item hover: `--color-bg-surface-hover`
- Item text: `--color-text-primary`

### Verification

- `cd frontend && npx tsc --noEmit` — zero TypeScript errors
- `cd frontend && npx vite build` — production build succeeds
- Visual: header shows Home, Topics, Creators, Admin. Clicking Admin reveals dropdown with Review, Reports, Pipeline links. No ModeToggle in header.
- Navigation: each dropdown link navigates to the correct route
- Click outside dropdown → closes
- Escape key → closes
- Mobile (640px): dropdown still accessible

### Accessibility Notes

- Dropdown trigger should use `<button>` with `aria-expanded` and `aria-haspopup="true"`
- Dropdown menu should use `role="menu"` with `role="menuitem"` on links
- Escape key should close the menu and return focus to trigger

### Risk

Low. No backend changes, no route changes, no new dependencies. The dropdown is a pure presentational addition to the existing nav.
