feat: add settings page search (@OmTiwariPandey)

[OmTiwariPandey]

Description

The settings page has a lot of options cluttered, and finding a setting would mean scrolling through everything. you can press escape to search, yes but still it just makes you quickly change a setting, not searching it and its neighboring settings.
This PR adds a search box at the top of the settings page. As you type, matching settings show up in a dropdown, and picking one scrolls to that setting and briefly flashes it so it's easy to spot. You can also use arrow keys and enter to do the same.

A few notes on the approach:

• The list it searches is built from the settings actually rendered on the page, so options that are currently hidden (e.g. the keymap settings when keymap mode is off) don't appear, and every result is guaranteed to scroll to something that exists.
• The "scroll to and flash" behavior reuses the highlight that the per-setting copy-link buttons and ?highlight= URLs already use. I moved that logic into a small shared helper so the search and the existing URL handler use the same code instead of duplicating it.
• Matching is a simple case-insensitive match on the setting name, capped at 8 results. Escape clears the search and clicking outside closes the dropdown.

Checks

• Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
• Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

Closes #

[fehmer]

Hi @OmTiwariPandey , thank you for your contribution.

I am not sure a search feature is needed on the settings page, that is what the command line is for, where you can search and change settings in one go.

E.g. searching for custom in the commandline will give you search results for the setting values as well:

search:

command line

From the implementation I think it is quite odd to parse the page instead of using the raw data.

[OmTiwariPandey]

Hi! I know. It is obviously up to you guys. But I asked many of my friends who use monkeytype and they said they didnt even know if the command thing existed using escape key because people usually expect it to be near the top. and they didnt even read the note that literally says to press esc to open the command thing. I was experiencing the same that is why I asked. once again, up to you guys, but I thought it might be a good idea.

[fehmer]

maybe we can add the commandline directly on top?

[OmTiwariPandey]

Right. But dont you think that place for the command line would be kinda off cuz it plays more functions than just a search bar, and the command line still doesnt scroll to that area, just provides a minimal interface to change the setting quickly. While I know two search options would look kinda excessive but the command line can be used to serve a different purpose, or maybe both could coexist? Just sharing an opinion. Thanks for reading :D

[fehmer]

I talked to @Miodec about this feature:

I think its ok to add, when searching hide group headers and hide settings that dont match name, description or option string

The search would act like a filter, instead of showing the result list as dropdown only show the settings that match the filter. Match the name, description or any option

[OmTiwariPandey]

On it! Will make another commit.

[fehmer]

Oh, and please implement this in solid-js directly, not parsing and modifying the page using javascript

[OmTiwariPandey]

Okay!

[OmTiwariPandey]

Just made the commit. Do check it out. Works as expected. Thanks :)

[fehmer]

looks cool. nice work. found a small bug, missing margin on the custom background header:

[OmTiwariPandey]

Oh yeah! mb. on it.

[OmTiwariPandey]

@fehmer Committed the changes. Please review.

[fehmer]

Looks good. Should we add a quick way to delete the current search? maybe an x on the right side.

[OmTiwariPandey]

Good idea. Can do. Will do it in the next commit.

[OmTiwariPandey]

did a couple commits. added a clear x button on the right side of the search so you can wipe the query in one click.
also, I noticed the custom settings weren't being matched by their options (e.g. searching "average" didn't pull up pace caret. Fixed it so pace caret, custom background, and font family match on their options too. Moved the shared option helper into config/ while I was at it so they all use the same one.)

[OmTiwariPandey]

@fehmer please review them and do ping me if you see any bugs. Thanks! Also I am sorry for all these pings lol.

[OmTiwariPandey]

@fehmer did you take a look at the code? If yes, then well and good. Hope that this PR will be closed soon. Thank you :)

[Miodec]

Looks like youre unmounting the setting components completely when searching, which means on every keypress the components go through unmounting and remounting process - this makes the search slow. I think just using CSS will make it much more performant.

[OmTiwariPandey]

Done! settings are now mounted and get hidden by a css class now. Thanks for noticing that! @Miodec

[Copilot]

Pull request overview

Adds settings-page search/filter plumbing in the SolidJS frontend by introducing a shared query signal + “searchable” Setting wrappers, then wiring them through SettingsPage so non-matching settings/sections can be hidden during filtering.

Changes:

• Add settings-search state (query + global best-match scoring) and SearchableSetting/SearchableAutoSetting wrappers.
• Add SettingsSearch input UI and integrate filtering behavior into SettingsPage layout/section rendering.
• Add option-label helpers in config metadata to let search match visible option labels.

Reviewed changes

Copilot reviewed 30 out of 30 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/src/ts/states/settings-search.ts	New shared search query + registry/scoring for “best match” settings filtering.
frontend/src/ts/config/metadata.tsx	Adds typed helpers to read option metadata + visible option labels/keywords for search.
frontend/src/ts/components/pages/settings/SettingsSearch.tsx	New search input UI (query entry + clear button).
frontend/src/ts/components/pages/settings/SettingsPage.tsx	Wires search into settings page; swaps many settings to searchable wrappers + section hiding.
frontend/src/ts/components/pages/settings/SearchableSetting.tsx	New wrapper around Setting that registers a haystack + toggles hidden when not matching.
frontend/src/ts/components/pages/settings/SearchableAutoSetting.tsx	New wrapper around the old auto-setting logic, now searchable and keyword-enriched.
frontend/src/ts/components/pages/settings/QuickNav.tsx	Accepts optional class so it can be hidden while filtering.
frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx	Switches to SearchableSetting + adds option keyword matching.
frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/Language.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx	Switches to SearchableSetting + adds option keyword matching.
frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx	Switches to SearchableSetting + adds option keyword matching.
frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx	Switches from Setting to SearchableSetting.
frontend/src/ts/components/common/Setting.tsx	Adds class prop support so wrappers can apply hidden at the root.