feat: Add search functionality to mode selector popup and reorganize layout #6140
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…layout - Add fuzzy search functionality with Fzf library for better mode discovery - Move marketplace/settings buttons to bottom of popup for cleaner layout - Convert instruction text to tooltip with info icon for space efficiency - Align search input styling with API configuration selector pattern - Improve spacing consistency throughout the component - Add 'Search modes...' placeholder text for better UX - Fix React Hook dependency arrays and useCallback optimization Resolves #6128
dosubot
bot
added
size:L
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the mode selector popup by adding fuzzy search functionality and reorganizing the UI layout for improved usability. The changes include implementing real-time search filtering, moving buttons to the bottom bar, and converting instruction text to a space-saving tooltip.
- Added fuzzy search with Fzf library for intelligent mode filtering
- Reorganized layout by moving marketplace/settings buttons from header to bottom
- Converted instruction text to tooltip with info icon to save vertical space
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
hannesrudolph
added
the
Issue/PR - Triage
- Replace hardcoded 'Search modes...' placeholder with t('common:ui.search_placeholder')
- Replace settings namespace usage with hardcoded 'No results found' to match SelectDropdown pattern
- Ensures proper internationalization and consistent namespace usage
- Add new modeSelector.searchPlaceholder key to all language files - Update ModeSelector to use chat:modeSelector.searchPlaceholder instead of generic search placeholder - Provides more contextual and user-friendly search placeholder text - Maintains consistency across all 18 supported languages Co-authored-by: Roo Code Translate Mode
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
- Added translation key 'modeSelector.noResults' for the hardcoded 'No results found' text - Added auto-focus functionality to search input when mode selector popover opens - Updated all language files with appropriate translations
hannesrudolph
added a commit
that referenced
this pull request
Jul 24, 2025
- Add search functionality at the top with fuzzy search - Move settings button to bottom left - Add title and info icon on bottom right - Match exact layout and spacing from ModeSelector - Create new ApiConfigSelector component - Update ChatTextArea to use new component - Remove unused imports to fix linting
- Replace requestAnimationFrame with direct state updates for better clarity - Implement two-tier search: prioritize mode names/slugs over descriptions - Mode names now always appear before description matches in search results
daniel-lxs
moved this from PR [Needs Prelim Review]
to PR [Needs Review]
in Roo Code Roadmap
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
BEFORE
AFTER
Related GitHub Issue
Closes: #6128
Roo Code Task Context (Optional)
This PR was implemented using Roo Code's Issue Fixer mode, which analyzed the GitHub issue requirements and implemented the solution following the technical specifications provided in the issue.
Description
This PR transforms the mode selector popup to include search functionality and reorganizes the layout for better usability. Key implementation details:
Search Implementation:
Layout Reorganization:
Technical Improvements:
Test Procedure
Automated Testing:
Manual Testing Steps:
Cross-platform Testing:
Pre-Submission Checklist
Screenshots / Videos
Before: Original mode selector with header text and buttons at top
After: New mode selector with search functionality and reorganized layout
The provided before/after screenshots show the transformation from the old layout with instruction text at the top to the new streamlined design with search functionality and improved organization.
Documentation Updates
The changes enhance existing functionality without changing user-facing APIs or requiring new documentation.
Additional Notes
Design Decisions:
Get in Touch
@roomote
Important
Adds search functionality and reorganizes layout in
ModeSelector.tsx, enhancing usability with fuzzy search and UI improvements.ModeSelector.tsxusing Fzf library for mode discovery.ModeSelector.tsxto include search input and reorganized layout.SelectDropdownpatterns.chat.jsoninlocales/en,locales/es,locales/fr, etc.) to include new strings for search functionality.useCallbackfor performance.This description was created by
for 2b0017e. You can customize this summary. It will automatically update as commits are pushed.