[feat] Custom styled dropdown for genre and language filters

[realproject7]

Problem

The genre and language filter dropdowns on the discovery page use the browser's native <select> element, which renders with OS-default styling that clashes with PlotLink's terminal/monospace design aesthetic.

Task

Replace the native <select> elements in src/components/GenreLanguageFilter.tsx with custom-styled dropdowns that match the terminal design system.

Design requirements

• Dark background (bg-surface), monospace font
• Border style matching other UI elements (border-border)
• Accent color for active/selected items (text-accent)
• Dropdown arrow indicator (custom, not browser default)
• Click-outside to close
• Keyboard accessible (arrow keys, Enter, Escape)
• Mobile friendly (adequate touch targets)

Reference

• Writer filter (src/components/WriterFilter.tsx) — uses pill-style buttons, similar approach could work
• Or a custom dropdown panel that opens below the trigger button
• Follow the existing design tokens in src/app/globals.css

Also apply to create page

The genre and language <select> elements on src/app/create/page.tsx should also use the same custom dropdown component for consistency.

Files to modify

• src/components/GenreLanguageFilter.tsx — replace native selects with custom dropdowns
• src/app/create/page.tsx — use same custom dropdown for genre/language
• Optionally extract a reusable DropdownSelect component

Acceptance criteria

• No browser-native dropdown styling visible
• Matches terminal/monospace design aesthetic
• Click-outside closes dropdown
• Keyboard accessible
• Works on mobile
• Applied to both discovery filters and create page
• npm run typecheck passes