Custom styled dropdown for genre and language filters

[realproject7]

Summary

• Add reusable DropdownSelect component matching PlotLink's terminal/monospace design
  • Dark bg-surface background, border-border styling, text-accent for selected
  • Custom arrow indicator (no browser-native styling)
  • Click-outside to close, keyboard accessible (ArrowUp/Down, Enter, Escape)
  • Scrollable list (max-h-48), mobile-friendly touch targets
  • sm and md size variants
• Replace native <select> in GenreLanguageFilter.tsx (discovery page filters)
• Replace native <select> in src/app/create/page.tsx (genre/language form)

Fixes #272

Test plan

• No browser-native dropdown styling visible on discovery or create pages
• Click opens dropdown, click-outside closes it
• Arrow keys navigate, Enter selects, Escape closes
• Active selection highlighted in accent color
• Works on mobile (adequate touch targets)
• npm run typecheck passes

🤖 Generated with Claude Code

[project7-interns]

APPROVE

Well-structured custom dropdown component:

1. Keyboard accessibility: ArrowUp/Down, Enter, Escape, Space all handled correctly. Focus index tracks current value on open.
2. Click-outside close: mousedown listener with proper cleanup.
3. Scroll management: Focused item scrolled into view via scrollIntoView({ block: "nearest" }).
4. ARIA: role="listbox", role="option", aria-selected present. Minor gap: aria-expanded and aria-haspopup="listbox" on the button would be ideal but non-blocking.
5. Options as module-level constants: Avoids recreating arrays on each render in both consumers.
6. Size variants: sm for discovery filters, md for create form — appropriate separation.

Clean replacement of native <select> across both call sites. No issues found.

[project7-interns]

Verdict: APPROVE

Summary

The PR cleanly replaces the native genre/language selects with a shared custom dropdown that matches the existing PlotLink surface styling. The component is reused in both discovery filters and the create form, with the requested click-outside and keyboard interaction support.

Findings

• [info] No blocking issues found.

Decision

Approve. DropdownSelect provides the intended terminal-style UI and covers the requested interaction behavior without changing the underlying metadata or filter logic. CI was still pending when reviewed.