UI Design - Map filters

[kolmipilot]

In the main menu, when a large number of missions are loaded across multiple maps, the UI becomes very cluttered. It looks messy because the maps cover half the screen. It would be very useful to add a button to wrap the map filters to clean up the interface overview.

Image as example:

[fank]

Good catch — at 150 maps the filter row eats roughly half the viewport before a single recording is visible. I dug into the code a bit and wanted to sketch out a few directions, since the fix isn't purely cosmetic once you go beyond ~20 maps.

The chips render from a flex-wrap container in RecordingSelector.tsx with no collapse state, so any solution lives in that component.

Option 1 — Collapse/expand toggle (your suggestion)

Smallest change: wrap the map filter row in a collapsible block with a chevron. Persist the state in localStorage, auto-collapse when uniqueMaps.length > ~20, show a summary like Maps (150) ▸ when collapsed.

• Pros: minimal risk, matches your ask, additive
• Cons: the expanded state is still unwieldy at 150 entries

Option 2 — Searchable dropdown picker

Replace the chip cloud with a combobox: a [Map ▾] button opens a popover with a search input and a scrollable list (colored dots preserved). The active map shows as a removable chip on the filter bar next to the tag filters. Same pattern as the existing language selector.

• Pros: scales to 1500 maps as easily as 15; typing beats scanning
• Cons: loses the at-a-glance view of every available map

Option 3 — Hybrid: quick picks + searchable "more"

Show the top N (~10) most-used maps as chips inline, then a +140 more… button that opens the picker from Option 2. "Most used" = recording count, optionally boosted by recently-filtered maps.

• Pros: common case (a handful of popular maps) stays one-click; tail is still reachable
• Cons: most code complexity of the three

A few extras worth bundling regardless of option

• Multi-select: the current mapFilter is a single string — if you're redesigning anyway, Set<string> makes it easy to compare two maps side-by-side.
• Sort order: alphabetical is fine for 20 maps, miserable for 150. Default sort by recording count would put the maps people actually care about first.
• Keyboard nav: whatever picker is used, ArrowDown/Enter should work from the search input so power users don't have to reach for the mouse.

My take

Option 3 is the nicest end state, but Option 1 is the right first PR — it unblocks the immediate pain without a redesign, and it's additive so Option 2/3 can follow. I'd default to collapsed past ~20 maps so new servers with many maps don't hit the current experience out of the box.

Happy to prototype whichever direction sounds right.