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.