feat(web): add settings sidebar search

[shivamhwp]

Summary

• add a Settings sidebar search that replaces section navigation with settings whose visible titles contain the query
• navigate mouse and keyboard selections to stable route anchors, scroll them into view, focus them, and visibly highlight the destination
• support Arrow Up/Down, Enter, Escape, an accessible empty state, async settings panels, reduced motion, and mobile sidebar closing
• use router-controlled destination state so highlighting and remount scrolling work with Electron hash history and asynchronously replaced settings content
• index stable settings and route conditional options to their always-available parent setting

Why

Settings are split across several routed panels. Finding a specific option currently requires knowing which section contains it. This adds a lightweight, dependency-free title index directly in the sidebar while keeping the main Settings layout unchanged.

Screenshots

Search results

Selected setting

Validation

• vp test run src/components/settings/settingsSearch.test.ts src/components/settings/settingsLayout.test.tsx --project unit from apps/web — 9 tests passed
• targeted vp lint and vp fmt for changed files
• vp run --filter @t3tools/web typecheck
• computer-use smoke pass covering search results, click navigation, keyboard selection, empty state, and Escape clearing
• Opus cleanup review completed and incorporated

Review notes

The initial search pass also showed that hidden descriptions and keywords produced surprising matches. The implementation now matches only visible setting titles, uses a persistent scoped destination highlight, and indexes only the stable Remote environments target. Final hands-on visual review is intentionally left to the reviewer.

Note

Add search to the settings sidebar with hash-based anchor navigation

• Adds a search input to SettingsSidebarNav, activated with /, that filters settings by title and lets users jump directly to a setting via keyboard or mouse.
• Introduces a settingsSearch.ts catalog mapping setting ids, titles, and routes, plus a searchableSetting(id) helper that attaches stable anchor ids to panels and rows.
• Navigation pushes a URL hash; settingsLayout.tsx reads the hash on mount, scrolls and focuses the target element with a pulse animation, then clears the hash.
• Spreads searchableSetting(...) across all major settings panels (Appearance, General, Providers, Keybindings, Connections, Source Control, Beta) to register them as searchable targets.
• On mobile, the sidebar closes automatically after navigating to a result.

^{Macroscope summarized 56c2d87.}

---

Note

Low Risk
UI-only navigation and labeling changes with unit tests; no auth, data, or server behavior changes.

Overview
Adds settings search in the settings sidebar: a title-only index backed by a central settingsSearch catalog, with / to focus the field and arrow/Enter/Escape keyboard navigation.

While searching, section links swap for matching results (setting title plus parent section). Choosing a result navigates to the right settings route with a URL hash anchor; SettingsPageContainer and searchableSetting keep row/section ids and titles aligned with the catalog so panels and search cannot drift.

Scroll, focus, and highlight land on the target row or section header (section headers scroll when the anchor is a SettingsSection), with a short pulse animation unless reduced motion is enabled; the hash is cleared after handling. Conditional settings can point at a stable parent via targetId (e.g. environment identification → Appearance).

Settings panels across General, Appearance, Beta, Connections, and related areas now spread searchableSetting(...) instead of hard-coded titles. Minor sidebar chrome cleanup removes an extra separator.

^{Reviewed by Cursor Bugbot for commit 56c2d87. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9c69da8c-292e-47c0-9f4e-d2fd6fa614ea

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new settings sidebar search feature with keyboard navigation, search results UI, and scroll-to-target animations. New user-facing features with new components and behaviors warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 56c2d87. Configure here.}