# S01: Admin Navigation Dropdown + Header Cleanup

**Goal:** Header nav shows Home, Topics, Creators as flat links and an Admin dropdown. Clicking Admin reveals Review, Reports, Pipeline links. ModeToggle removed from header (kept on ReviewQueue page).
**Demo:** After this: Header shows Home, Topics, Creators, and an Admin dropdown. Clicking Admin reveals Review, Reports, Pipeline links. ModeToggle removed from header.

## Tasks
- [x] **T01: Created AdminDropdown component with click-outside/Escape close, wired into App.tsx header replacing 3 admin links + ModeToggle, added dropdown CSS using existing theme tokens** — Create an AdminDropdown React component, replace the 3 admin nav links and ModeToggle in App.tsx, and add dropdown CSS to App.css.

**Context:** The header in `App.tsx` currently has 6 flat `<Link>` elements (Home, Topics, Creators, Review, Reports, Pipeline) plus a `<ModeToggle />`. Goal: group the 3 admin links behind an "Admin" dropdown, remove ModeToggle from the header. ModeToggle is still used by `ReviewQueue.tsx` — do NOT delete the component or its CSS.

**Click-outside pattern** — adapt from `Home.tsx` (typeahead):
```tsx
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
  function handler(e: MouseEvent) {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
      setOpen(false);
    }
  }
  document.addEventListener("mousedown", handler);
  return () => document.removeEventListener("mousedown", handler);
}, []);
```

**CSS variables available** (all defined in App.css `:root`):
- Trigger text: `--color-text-on-header` / `--color-text-on-header-hover`
- Dropdown background: `--color-bg-surface`
- Border: `--color-border`
- Shadow: `--color-shadow-heavy`
- Item hover bg: `--color-bg-surface-hover`
- Item text: `--color-text-primary`
  - Estimate: 30m
  - Files: frontend/src/components/AdminDropdown.tsx, frontend/src/App.tsx, frontend/src/App.css
  - Verify: cd frontend && npx tsc --noEmit && npx vite build
