Add search functionality to mode selector popup and reorganize layout

[hannesrudolph]

What specific problem does this solve?

The mode selector popup currently has a different UI structure compared to the model selector popup, creating an inconsistent user experience.

Who is affected: All users who switch between modes frequently
When this happens: Every time users open the mode selector popup to change modes
Current behavior: The mode selector shows marketplace/settings buttons and instruction text at the top, with no search functionality
Expected behavior: The mode selector should have search functionality like the model selector, with auxiliary controls moved to the bottom
Impact: Users with many custom modes installed have difficulty finding specific modes quickly, leading to slower workflow and frustration

Additional context

The user provided a screenshot showing the current mode selector popup with the marketplace icon, settings gear, and instruction text at the top. They want this restructured to match the model selector's design pattern with search functionality.

---

🛠️ Contributing & Technical Analysis

✅ I'm interested in implementing this feature
✅ I understand this needs approval before implementation begins

🔍 Comprehensive Technical Analysis

Root Cause / Implementation Target

The mode selector (ModeSelector.tsx) lacks search functionality and has a different layout structure compared to the model selector (ModelPicker.tsx). The ModesView component already has a search implementation that can be adapted.

Affected Components

• Primary Files:

  • webview-ui/src/components/chat/ModeSelector.tsx (lines 95-180): Main component to modify
  • webview-ui/src/i18n/locales/en/chat.json (lines 117-122): Translation keys for mode selector

• Secondary Impact:

  • All localization files that contain mode selector translations
  • Components that use ModeSelector (ChatTextArea, EditModeControls)
  • Test files for ModeSelector

Current Implementation Analysis

The current ModeSelector component:

1. Shows a header section with title, marketplace button, and settings button (lines 101-139)
2. Displays instruction text and keyboard shortcuts below the header
3. Lists modes without any filtering capability (lines 142-173)
4. Uses a simple scrollable list for mode selection

The ModesView component already implements search functionality using Command components (lines 620-696), which can serve as a reference.

Proposed Implementation

Step 1: Add search state and functionality

• File: webview-ui/src/components/chat/ModeSelector.tsx
• Changes:
  • Add search state: const [searchValue, setSearchValue] = useState("")
  • Add search input ref: const searchInputRef = useRef<HTMLInputElement>(null)
  • Import necessary Command components from UI library

Step 2: Restructure the popup layout

• File: webview-ui/src/components/chat/ModeSelector.tsx
• Changes:
  • Move the header content (marketplace/settings buttons) to the bottom of the popup
  • Replace the instruction text with a tooltip info icon in the header
  • Add Command wrapper and CommandInput for search functionality
  • Implement mode filtering based on search value

Step 3: Create info icon with tooltip

• File: webview-ui/src/components/chat/ModeSelector.tsx
• Changes:
  • Add StandardTooltip with info icon containing the instruction text
  • Use pattern: <StandardTooltip content={instructionText}><span className="codicon codicon-info" /></StandardTooltip>

Step 4: Update translations

• File: webview-ui/src/i18n/locales/en/chat.json
• Changes:
  • Add new translation key for search placeholder if needed
  • Ensure tooltip content uses existing description key

Code Architecture Considerations

• Follow the existing pattern from ModelPicker for consistency
• Use the Command component pattern already established in ModesView
• Maintain the same prop interface to avoid breaking changes
• Preserve all existing functionality (mode selection, keyboard shortcuts)

Testing Requirements

• Unit Tests:
  • Test search functionality filters modes correctly
  • Test clear search button works
  • Test tooltip displays instruction text
  • Test marketplace/settings buttons still function at bottom
• Integration Tests:
  • Test mode selection still updates the active mode
  • Test keyboard navigation works with search
• Edge Cases:
  • Test with no modes available
  • Test with many custom modes
  • Test search with special characters

Performance Impact

• Expected performance change: Neutral
• Search is client-side filtering of already loaded modes
• No additional API calls or data fetching required

Security Considerations

• Input validation for search field to prevent XSS
• No server-side changes required
• All filtering happens client-side with existing data

Migration Strategy

Not applicable - this is a UI enhancement with no data migration needed

Rollback Plan

If issues arise, revert the changes to ModeSelector.tsx and related translation files

Dependencies and Breaking Changes

• External dependencies affected: None
• API contract changes: None
• Breaking changes for users: None - purely visual/UX enhancement

Implementation Complexity

• Estimated effort: Small
• Risk level: Low
• Prerequisites: None

Acceptance Criteria

Given I have the mode selector popup open
When I see the popup content
Then I should see a search input at the top
And I should see mode list items below the search
And I should see marketplace and settings buttons at the bottom
But I should NOT see the instruction text as regular text

Given I have the mode selector popup open
When I hover over the info icon next to the title
Then I should see a tooltip with the instruction text about specialized personas and keyboard shortcuts

Given I have multiple modes available
When I type in the search input
Then the mode list should filter to only show modes matching my search
And the filtering should be case-insensitive
And it should match on mode names

Given I have searched for modes
When I click the X button in the search input
Then the search should clear
And all modes should be visible again
And the search input should remain focused

Given I am using the mode selector
When I click the marketplace button
Then it should open the marketplace (same behavior as before)
But the button should now be at the bottom of the popup

Given I am using the mode selector
When I click the settings button
Then it should open mode settings (same behavior as before)
But the button should now be at the bottom of the popup

[roomote]

Hi @hannesrudolph! I'm here to help out the maintainers and am going to see if I can implement this feature. I notice you've already provided an excellent technical analysis - I'll use that as my guide to add search functionality to the mode selector popup and reorganize its layout to match the model selector. I'll keep you updated on my progress!

[roomote]

I've successfully implemented the requested changes! 🎉

PR: #6129

Summary of Changes

✅ Added search functionality - Users can now search for modes by name or slug
✅ Reorganized layout - Marketplace and settings buttons moved to the bottom
✅ Replaced instruction text - Now using an info icon with tooltip for a cleaner look
✅ Updated all localization files - Added new translation keys for search functionality

The mode selector now matches the design pattern of the model selector, providing a consistent user experience. All tests are passing and the PR is ready for review.

Thanks for the detailed technical analysis in your issue - it made the implementation straightforward!