feat: Add search functionality to settings page (#5983)

[SannidhyaSah]

Related GitHub Issue

Closes: #5983

Roo Code Task Context (Optional)

No Roo Code task context for this PR

Description

This PR implements a comprehensive search functionality for the settings page to address the issue of having too many settings (11 sections) that are difficult to navigate.

Key implementation details:

• Search UI: Added a collapsible search bar in the settings header with smooth animations and a completely borderless design for a clean, minimal interface
• Dropdown Results: Implemented a dropdown menu that shows search results grouped by section, preventing disorienting real-time page changes while typing
• Search Algorithm: Created a configuration-based search system that searches across setting labels, descriptions, and keywords with proper translation support
• User Experience: Click-to-navigate functionality where users can select a result from the dropdown to jump to that settings section
• Accessibility: Full keyboard navigation support (arrow keys, Enter, Escape) and proper ARIA labels

Architecture decisions:

• Used a configuration-based approach (SETTINGS_SEARCH_CONFIG) for easy maintenance and adding new settings
• Separated search logic into searchUtils.ts for reusability
• Created reusable components (SettingsSearchDropdown, SearchHighlight) following existing patterns
• Maintained consistency with VSCode theme variables and existing UI components

Test Procedure

Automated Testing:

• Run cd webview-ui && npx vitest src/components/settings/__tests__/SettingsSearchDropdown.spec.tsx (8 tests)
• Run cd webview-ui && npx vitest src/components/settings/__tests__/searchUtils.spec.ts (12 tests)
• Run cd webview-ui && npx vitest src/components/settings/__tests__/SearchHighlight.spec.tsx (12 tests)

Manual Testing Steps:

1. Open the VSCode extension settings page
2. Click the search icon in the header - verify it expands smoothly
3. Type a search term (e.g., "auto approve") - verify dropdown appears with results
4. Use arrow keys to navigate through results - verify keyboard navigation works
5. Press Enter or click a result - verify navigation to the correct section
6. Press Escape - verify dropdown closes
7. Click the clear button (X) - verify search resets
8. Test with various search terms across different settings sections

Testing Environment:

• VSCode Extension Host
• Multiple themes (light/dark) for UI consistency
• Keyboard-only navigation for accessibility

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Documentation Updates

• No documentation updates are required.

Additional Notes

Code Quality Notes:

• All new components follow existing TypeScript patterns and use proper type definitions
• Search configuration is easily extensible for future settings additions
• Translation support is properly implemented using the existing i18n system
• UI components maintain consistency with VSCode theme variables

Performance Considerations:

• Search is performed client-side with efficient filtering algorithms
• Dropdown rendering is optimized to handle large numbers of results
• No impact on initial page load performance

Get in Touch

@ Lews (Discord)

---

Important

Adds search functionality to the settings page with a search bar, dropdown results, and keyboard navigation support.

• Behavior:
  • Adds search bar to settings header in SettingsView.tsx with dropdown results grouped by section.
  • Implements search algorithm in searchUtils.ts to search across labels, descriptions, and keywords.
  • Supports click-to-navigate and keyboard navigation (arrow keys, Enter, Escape).
• Components:
  • Adds SettingsSearchDropdown component in SettingsSearchDropdown.tsx for search UI.
  • Adds SearchHighlight and SettingHighlightWrapper in SearchHighlight.tsx for highlighting search terms.
• Tests:
  • Adds tests for SettingsSearchDropdown, SearchHighlight, and searchUtils in respective __tests__ directories.
• Misc:
  • Updates settings.json for new search-related translations.

^{This description was created by for 193f873. You can customize this summary. It will automatically update as commits are pushed.}

[SannidhyaSah]

Enhanced Settings Search with Scroll-to-Setting Functionality

I have successfully implemented a significant improvement to the settings search feature that addresses the core usability issue where search results would only navigate to the correct tab without scrolling to the specific setting.

Key Improvements Implemented

Scroll-to-Setting Navigation

• When users click on a search result, the interface now navigates to the correct tab AND automatically scrolls to the specific setting
• Implemented smooth scrolling behavior with center alignment for optimal visibility
• Added visual feedback through a temporary highlight animation that draws attention to the targeted setting

UI/UX Enhancements

• Added right margin to the search dropdown for improved visual spacing and better alignment with the overall interface design
• Implemented a fade-out highlight animation using CSS keyframes that provides clear visual feedback without being intrusive

Technical Implementation Details

Data Attribute Strategy

• Added \data-setting-id\ attributes to all settings components across the codebase for reliable element identification
• Used existing setting IDs from the search configuration to maintain consistency
• This approach avoids the need for manual ID management while ensuring reliable targeting

Core Functionality

• Created \scrollToSetting\ utility function in \searchUtils.ts\ that handles element detection, scrolling, and highlighting
• Enhanced \SettingsView.tsx\ to coordinate tab navigation followed by scroll-to-setting behavior
• Implemented proper timing mechanisms using \setTimeout\ to ensure DOM content is rendered before attempting to scroll

Files Modified

• \webview-ui/src/components/settings/searchUtils.ts\ - Added scroll utility function
• \webview-ui/src/components/settings/SettingsView.tsx\ - Enhanced search selection handler
• \webview-ui/src/index.css\ - Added highlight animation styles
• \webview-ui/src/components/settings/SettingsSearchDropdown.tsx\ - Added UI spacing improvements
• All settings components (AutoApproveSettings, BrowserSettings, etc.) - Added data-setting-id attributes

Quality Assurance

Test Coverage

• Created comprehensive test suite in \scrollToSetting.spec.ts\ with 6 test cases covering all scenarios
• Tests include element detection, scrolling behavior, highlight application, and edge case handling
• All existing tests continue to pass (123 total tests passing)

Code Quality

• Full TypeScript type checking passed across all packages
• ESLint validation passed with zero warnings
• Prettier formatting applied consistently

Edge Case Handling

• Graceful handling of missing or non-existent settings
• Proper timing for dynamic content loading
• Fallback behavior when elements cannot be found
• Support for nested and conditional settings

User Experience Impact

This enhancement significantly improves the discoverability and usability of the settings interface. Users can now efficiently locate specific settings through search without the additional manual scrolling that was previously required. The visual feedback ensures users understand exactly which setting was targeted, reducing confusion and improving overall workflow efficiency.

[daniel-lxs]

Hey @SannidhyaSah, The implementation looks great, however I noticed this:

Is there a way to give this a nice description like the rest of the elements?

Also there's a merge conflict, can you take a look? Thank you!

[daniel-lxs]

Hey @SannidhyaSah I noticed some styling issues on this branch:

Here's how the settings look normally:

Here's how they look on this branch:

Can you take a look?

[daniel-lxs]

The class name search-highlight doesn't match the CSS definition. The CSS file defines setting-highlight (see webview-ui/src/index.css lines 499-502). This mismatch will prevent the highlight animation from working when users click on search results.

Suggested change

	element.classList.add("search-highlight")
	element.classList.add("setting-highlight")

[daniel-lxs]

I noticed that the scrollToSetting function is duplicated here and in scrollToSetting.ts. This duplication could lead to maintenance issues if one is updated without the other. Could we consolidate these into a single location?

Since SettingsView.tsx imports from scrollToSetting.ts, perhaps we could remove this duplicate from searchUtils.ts and have any components that need it import from the dedicated file instead?