feat: add search functionality to mode selector and reorganize layout #6129

roomote · 2025-07-23T17:16:18Z

This PR addresses issue #6128 by adding search functionality to the mode selector popup and reorganizing its layout to match the model selector design pattern.

Changes Made

1. Added Search Functionality

Implemented a search input with Command components (similar to ModelPicker)
Added clear button (X) to reset search
Search filters modes by name and slug (case-insensitive)
Search input is cleared when closing the popup

2. Reorganized Layout

Moved marketplace and settings buttons to the bottom of the popup
Replaced the instruction text with an info icon tooltip in the header
The tooltip contains the original instruction text and keyboard shortcuts

3. Updated Localization

Added new translation keys: searchPlaceholder and noMatchFound
Updated all 17 localization files with the new keys

Technical Details

Used existing UI components (Command, CommandInput, CommandList, etc.) for consistency
Maintained all existing functionality (mode selection, keyboard shortcuts)
No breaking changes to the component API
All tests pass successfully

Screenshots

The mode selector now has:

Search input at the top
Mode list in the middle
Marketplace/settings buttons at the bottom
Info icon with tooltip for instructions

This creates a consistent user experience between the mode selector and model selector popups.

Fixes #6128

Important

Adds search functionality to ModeSelector.tsx, reorganizes layout, and updates localization files for new features.

Behavior:
- Adds search functionality to ModeSelector.tsx with a search input and clear button.
- Filters modes by name and slug, case-insensitive.
- Clears search input when closing the popup.
- Moves marketplace and settings buttons to the bottom of the popup.
- Replaces instruction text with an info icon tooltip in the header.
Localization:
- Adds searchPlaceholder and noMatchFound keys to 17 localization files.
Technical Details:
- Uses existing UI components for consistency.
- Maintains existing functionality without breaking changes.
- All tests pass successfully.

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

- Add search input with clear button to filter modes - Move marketplace and settings buttons to bottom of popup - Replace instruction text with info icon tooltip - Update all localization files with new translation keys - Maintain consistent UI pattern with model selector Fixes #6128

ellipsis-dev · 2025-07-23T17:20:09Z

webview-ui/src/i18n/locales/es/chat.json

@@ -116,7 +116,9 @@
 		"title": "Modos",
 		"marketplace": "Marketplace de Modos",
 		"settings": "Configuración de Modos",
-		"description": "Personalidades especializadas que adaptan el comportamiento de Roo."
+		"description": "Personalidades especializadas que adaptan el comportamiento de Roo.",
+		"searchPlaceholder": "Search modes...",


The new keys 'searchPlaceholder' and 'noMatchFound' in the modeSelector object still use English text. Please update these to proper Spanish translations.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "Buscar modos...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:09Z

webview-ui/src/i18n/locales/fr/chat.json

@@ -116,7 +116,9 @@
 		"title": "Modes",
 		"marketplace": "Marketplace de Modes",
 		"settings": "Paramètres des Modes",
-		"description": "Personas spécialisés qui adaptent le comportement de Roo."
+		"description": "Personas spécialisés qui adaptent le comportement de Roo.",
+		"searchPlaceholder": "Search modes...",


The new keys 'searchPlaceholder' and 'noMatchFound' are still in English. Consider providing French translations for these keys.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "Rechercher des modes...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:09Z

webview-ui/src/i18n/locales/id/chat.json

@@ -122,7 +122,9 @@
 		"title": "Mode",
 		"marketplace": "Marketplace Mode",
 		"settings": "Pengaturan Mode",
-		"description": "Persona khusus yang menyesuaikan perilaku Roo."
+		"description": "Persona khusus yang menyesuaikan perilaku Roo.",
+		"searchPlaceholder": "Search modes...",


The new keys 'searchPlaceholder' and 'noMatchFound' in the modeSelector are still in English. Please update with proper Indonesian translations.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "Cari mode...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:09Z

webview-ui/src/i18n/locales/it/chat.json

@@ -116,7 +116,9 @@
 		"title": "Modalità",
 		"marketplace": "Marketplace delle Modalità",
 		"settings": "Impostazioni Modalità",
-		"description": "Personalità specializzate che adattano il comportamento di Roo."
+		"description": "Personalità specializzate che adattano il comportamento di Roo.",
+		"searchPlaceholder": "Search modes...",


The new keys for 'searchPlaceholder' and 'noMatchFound' are not translated into Italian. Please provide appropriate translations.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "Cerca modalità...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:09Z

webview-ui/src/i18n/locales/ja/chat.json

@@ -116,7 +116,9 @@
 		"title": "モード",
 		"marketplace": "モードマーケットプレイス",
 		"settings": "モード設定",
-		"description": "Rooの動作をカスタマイズする専門的なペルソナ。"
+		"description": "Rooの動作をカスタマイズする専門的なペルソナ。",
+		"searchPlaceholder": "Search modes...",


The newly added keys 'searchPlaceholder' and 'noMatchFound' in the modeSelector are in English. These should be localized into Japanese.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "モードを検索...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:10Z

webview-ui/src/i18n/locales/ru/chat.json

@@ -108,7 +108,9 @@
 		"title": "Режимы",
 		"marketplace": "Маркетплейс режимов",
 		"settings": "Настройки режимов",
-		"description": "Специализированные персоны, которые настраивают поведение Roo."
+		"description": "Специализированные персоны, которые настраивают поведение Roo.",
+		"searchPlaceholder": "Search modes...",


The new keys in the modeSelector section ('searchPlaceholder' and 'noMatchFound') are still in English. Please provide the appropriate Russian translations.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "Поиск режимов...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:10Z

webview-ui/src/i18n/locales/tr/chat.json

@@ -116,7 +116,9 @@
 		"title": "Modlar",
 		"marketplace": "Mod Pazaryeri",
 		"settings": "Mod Ayarları",
-		"description": "Roo'nun davranışını özelleştiren uzmanlaşmış kişilikler."
+		"description": "Roo'nun davranışını özelleştiren uzmanlaşmış kişilikler.",
+		"searchPlaceholder": "Search modes...",


The new keys 'searchPlaceholder' and 'noMatchFound' in the modeSelector object remain in English. Consider providing Turkish translations for these keys.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "Modları ara...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:10Z

webview-ui/src/i18n/locales/vi/chat.json

@@ -116,7 +116,9 @@
 		"title": "Chế độ",
 		"marketplace": "Chợ Chế độ",
 		"settings": "Cài đặt Chế độ",
-		"description": "Các nhân cách chuyên biệt điều chỉnh hành vi của Roo."
+		"description": "Các nhân cách chuyên biệt điều chỉnh hành vi của Roo.",
+		"searchPlaceholder": "Search modes...",


The modeSelector section's new keys ('searchPlaceholder' and 'noMatchFound') are in English. Please localize these into Vietnamese.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "Tìm kiếm chế độ...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:10Z

webview-ui/src/i18n/locales/zh-CN/chat.json

@@ -116,7 +116,9 @@
 		"title": "模式",
 		"marketplace": "模式市场",
 		"settings": "模式设置",
-		"description": "专门定制Roo行为的角色。"
+		"description": "专门定制Roo行为的角色。",
+		"searchPlaceholder": "Search modes...",


The new keys 'searchPlaceholder' and 'noMatchFound' under modeSelector are still in English. Please update them with proper Simplified Chinese translations.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "搜索模式...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-07-23T17:20:10Z

webview-ui/src/i18n/locales/zh-TW/chat.json

@@ -116,7 +116,9 @@
 		"title": "模式",
 		"marketplace": "模式市集",
 		"settings": "模式設定",
-		"description": "專門定制Roo行為的角色。"
+		"description": "專門定制Roo行為的角色。",
+		"searchPlaceholder": "Search modes...",


The new keys 'searchPlaceholder' and 'noMatchFound' are added in English within the modeSelector. Please provide Traditional Chinese translations for these keys.

Suggested change

"searchPlaceholder": "Search modes...",

"searchPlaceholder": "搜尋模式...",

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

roomote bot requested review from mrubens, cte and jr as code owners July 23, 2025 17:16

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Jul 23, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Jul 23, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Jul 23, 2025

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. enhancement New feature or request UI/UX UI/UX related or focused labels Jul 23, 2025

ellipsis-dev bot reviewed Jul 23, 2025

View reviewed changes

roomote bot mentioned this pull request Jul 23, 2025

Add search functionality to mode selector popup and reorganize layout #6128

Open

9 tasks

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Jul 23, 2025

hannesrudolph closed this Jul 23, 2025

github-project-automation bot moved this from Triage to Done in Roo Code Roadmap Jul 23, 2025

github-project-automation bot moved this from New to Done in Roo Code Roadmap Jul 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add search functionality to mode selector and reorganize layout #6129

feat: add search functionality to mode selector and reorganize layout #6129

Uh oh!

roomote bot commented Jul 23, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

ellipsis-dev bot Jul 23, 2025

Uh oh!

Uh oh!

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "Buscar modos...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "Rechercher des modes...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "Cari mode...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "Cerca modalità...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "モードを検索...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "Поиск режимов...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "Modları ara...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "Tìm kiếm chế độ...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "搜索模式...",

	"searchPlaceholder": "Search modes...",
	"searchPlaceholder": "搜尋模式...",

feat: add search functionality to mode selector and reorganize layout #6129

feat: add search functionality to mode selector and reorganize layout #6129

Uh oh!

Conversation

roomote bot commented Jul 23, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Made

1. Added Search Functionality

2. Reorganized Layout

3. Updated Localization

Technical Details

Screenshots

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

roomote bot commented Jul 23, 2025 •

edited by ellipsis-dev bot

Loading