Add map search 🔍

[FloPinguin]

Description:

Add a search input field to the map picker section header, allowing users to quickly filter maps by name.

• Place transparent search input on the right side of the "Maps" section header
• Filter maps by translated name and map ID as the user types
• Hide Featured/All/Favourites tab buttons while search is active
• Show filtered results with a count heading, or a "no results" empty state
• Clear button appears when search input has text

No search results:

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory

Please put your Discord username so you can be contacted if a bug or regression is found:

FloPinguin

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 545ce5b7-1c71-4a7e-a46f-4cfa2e8e5123

📥 Commits

Reviewing files that changed from the base of the PR and between 1e2d7fa and e4dc56e.

📒 Files selected for processing (3)

• resources/lang/en.json
• src/client/components/GameConfigSettings.ts
• src/client/components/map/MapPicker.ts

🚧 Files skipped from review as they are similar to previous changes (3)

• resources/lang/en.json
• src/client/components/GameConfigSettings.ts
• src/client/components/map/MapPicker.ts

---

Walkthrough

Adds a searchable map picker to the game config UI. GameConfigSettings gains a search input with a clear button that passes the query string to MapPicker via a new searchQuery property. MapPicker filters maps by name or id and switches between its normal tabbed view and a results panel with an empty state. Three English localization strings support the new UI.

Changes

Map Search Feature

Layer / File(s)	Summary
Search input state, handlers, and section header wiring src/client/components/GameConfigSettings.ts	Updates Lit imports to include nothing and svg. Extends renderSection to accept an optional headerAction template. Adds mapSearchQuery state and update/clear handlers. Implements renderMapSearchInput() with a search icon and conditional clear button. Wires the search input as the map section's header action and binds mapSearchQuery to map-picker.searchQuery.
MapPicker filtering and conditional render src/client/components/map/MapPicker.ts	Adds searchQuery reactive property. Implements filteredMaps getter that matches maps by lowercased name or id. Adds renderSearchResults() for empty-state or results grid with a count heading. Updates render() to show results panel when searching, tabbed UI otherwise.
Localization strings resources/lang/en.json	Adds no_results ("No maps found"), search_maps ("Search maps..."), and search_results ("Search Results") strings under map_component.

Sequence Diagram

sequenceDiagram
  participant User
  participant GameConfigSettings
  participant MapPicker
  participant DOM

  User->>GameConfigSettings: types in search input
  GameConfigSettings->>GameConfigSettings: mapSearchQuery = value
  GameConfigSettings->>MapPicker: searchQuery property updated
  MapPicker->>MapPicker: filteredMaps getter runs
  MapPicker->>DOM: renders search results or empty state
  User->>GameConfigSettings: clicks clear button
  GameConfigSettings->>GameConfigSettings: mapSearchQuery = ""
  MapPicker->>DOM: renders tabbed view

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🗺️ A search box appears, small and neat,
Type a name and maps come to meet.
No match found? A calm "none here" shows,
Clear the text and the tab view flows.
Maps now found at the speed of keys! 🔍

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add map search 🔍' accurately summarizes the main change—adding search functionality to the map picker component.
Description check	✅ Passed	The description clearly explains the feature implementation, includes screenshots, and confirms translation strings and tests have been added.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed due to a network error.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}