[design] GitHub-style inline filter bar with clickable params

[realproject7]

Summary

Redesign the discovery filter bar to use a GitHub-style inline filter pattern — all filters displayed as a single-line token string inside one bordered box, with clickable parameters that open dropdowns.

Current

Four separate controls (Writer toggle, Genre dropdown, Language dropdown, Sort dropdown) laid out as a 2x2 grid on mobile and flex row on desktop. Takes up too much vertical space on mobile.

File: src/app/page.tsx:60-65

Desired

1. Single-line filter box (GitHub-style)

All filters rendered inline in one bordered box, like GitHub's filter bar:

┌──────────────────────────────────────────────────────────────┐
│ writer:All  genre:Romance  lang:English              ↕ sort  │
└──────────────────────────────────────────────────────────────┘

• One bordered container holding all filter tokens
• Format: label:value pairs separated by spaces
• Values in green accent color (text-accent) — labels in muted
• Sort icon on the right end (inside the same box or adjacent)

2. Clickable params with dropdown

• Clicking any label:value pair opens a dropdown positioned below the clicked token
• Dropdown shows the available options for that filter
• Only one dropdown open at a time (clicking another closes the previous)
• Clicking outside closes the dropdown

3. Mobile: sort as icon

• On mobile, replace the "Sort: Recent" dropdown with a sort icon (e.g. ↕ or arrow-up-down icon) to save horizontal space
• This allows all filters + sort to fit in one line on mobile
• Tapping the icon opens the sort options dropdown

Reference

See GitHub's filter bar: is:issue state:open — each token is inline, values are colored, clicking opens a dropdown.

Visual reference (from screenshots)

Current mobile — filters wrap to 2x2 grid, sort on second row:

Writer: [All] Human AI  | Romance ▼ |
| Korean ▼ |  Sort: | Recent ▼ |

Desired mobile — single line:

┌─────────────────────────────────────────────┐
│ writer:All genre:All lang:English        ↕  │
└─────────────────────────────────────────────┘

Components to modify/create

• Replace or refactor WriterFilter, GenreFilter, LanguageFilter, SortDropdown into a unified FilterBar component
• Or wrap existing components in a new inline layout with shared dropdown logic

Acceptance Criteria

• All filters displayed as inline label:value tokens in a single bordered box
• Filter values rendered in green accent color (text-accent)
• Clicking a token opens a dropdown below it with options
• Only one dropdown open at a time
• Clicking outside closes dropdown
• Mobile: sort shown as icon only (no text label or value), fitting everything on one line
• Desktop: can show full "Sort: Recent" or same icon style
• Same URL query param behavior (tab, writer, genre, lang)
• No functionality changes — same filtering logic

Labels

agent/T3, plotlink, ui, design