refactor: improve ModeSelector based on PR review feedback

- Extract magic number 6 to SEARCH_THRESHOLD constant for clarity
- Add optional disableSearch prop for consistency with SelectDropdown
- Use showSearch variable to control search visibility logic
- Add comprehensive tests for disableSearch prop behavior
- Fix redundant tooltip when search is hidden

These changes improve maintainability and provide more flexible control
over the search functionality while maintaining backward compatibility.

Author: hannesrudolph

webview-ui/src/components/chat/ModeSelector.tsx

@@ -13,6 +13,9 @@ import { telemetryClient } from "@/utils/TelemetryClient"
 import { TelemetryEventName } from "@roo-code/types"
 import { Fzf } from "fzf"
 
+// Minimum number of modes required to show search functionality
+const SEARCH_THRESHOLD = 6
+
 interface ModeSelectorProps {
 	value: Mode
 	onChange: (value: Mode) => void
@@ -22,6 +25,7 @@ interface ModeSelectorProps {
 	modeShortcutText: string
 	customModes?: ModeConfig[]
 	customModePrompts?: CustomModePrompts
+	disableSearch?: boolean
 }
 
 export const ModeSelector = ({
@@ -33,6 +37,7 @@ export const ModeSelector = ({
 	modeShortcutText,
 	customModes,
 	customModePrompts,
+	disableSearch = false,
 }: ModeSelectorProps) => {
 	const [open, setOpen] = React.useState(false)
 	const [searchValue, setSearchValue] = React.useState("")
@@ -148,6 +153,9 @@ export const ModeSelector = ({
 		}
 	}, [open])
 
+	// Determine if search should be shown
+	const showSearch = !disableSearch && modes.length > SEARCH_THRESHOLD
+
 	// Combine instruction text for tooltip
 	const instructionText = `${t("chat:modeSelector.description")} ${modeShortcutText}`
 
@@ -182,8 +190,8 @@ export const ModeSelector = ({
 				container={portalContainer}
 				className="p-0 overflow-hidden min-w-80 max-w-9/10">
 				<div className="flex flex-col w-full">
-					{/* Show search bar only when there are more than 6 items, otherwise show info blurb */}
-					{modes.length > 6 ? (
+					{/* Show search bar only when there are more than SEARCH_THRESHOLD items, otherwise show info blurb */}
+					{showSearch ? (
 						<div className="relative p-2 border-b border-vscode-dropdown-border">
 							<input
 								aria-label="Search modes"
@@ -277,7 +285,7 @@ export const ModeSelector = ({
 
 						{/* Info icon and title on the right - only show info icon when search bar is visible */}
 						<div className="flex items-center gap-1 pr-1">
-							{modes.length > 6 && (
+							{showSearch && (
 								<StandardTooltip content={instructionText}>
 									<span className="codicon codicon-info text-xs text-vscode-descriptionForeground opacity-70 hover:opacity-100 cursor-help" />
 								</StandardTooltip>

webview-ui/src/components/chat/__tests__/ModeSelector.spec.tsx

@@ -147,4 +147,56 @@ describe("ModeSelector", () => {
 		const modeItems = screen.getAllByTestId("mode-selector-item")
 		expect(modeItems.length).toBeLessThan(7) // Should have filtered some out
 	})
+
+	test("respects disableSearch prop even when there are more than 6 modes", () => {
+		// Set up mock to return 10 modes
+		mockModes = Array.from({ length: 10 }, (_, i) => ({
+			slug: `mode-${i}`,
+			name: `Mode ${i}`,
+			description: `Description for mode ${i}`,
+			roleDefinition: "Role definition",
+			groups: ["read", "edit"],
+		}))
+
+		render(
+			<ModeSelector value={"mode-0" as Mode} onChange={vi.fn()} modeShortcutText="Ctrl+M" disableSearch={true} />,
+		)
+
+		// Click to open the popover
+		fireEvent.click(screen.getByTestId("mode-selector-trigger"))
+
+		// Search input should NOT be visible even with 10 modes
+		expect(screen.queryByTestId("mode-search-input")).not.toBeInTheDocument()
+
+		// Info blurb should be visible instead
+		expect(screen.getByText(/chat:modeSelector.description/)).toBeInTheDocument()
+
+		// Info icon should NOT be visible
+		const infoIcon = document.querySelector(".codicon-info")
+		expect(infoIcon).not.toBeInTheDocument()
+	})
+
+	test("shows search when disableSearch is false (default) and modes > 6", () => {
+		// Set up mock to return 8 modes
+		mockModes = Array.from({ length: 8 }, (_, i) => ({
+			slug: `mode-${i}`,
+			name: `Mode ${i}`,
+			description: `Description for mode ${i}`,
+			roleDefinition: "Role definition",
+			groups: ["read", "edit"],
+		}))
+
+		// Don't pass disableSearch prop (should default to false)
+		render(<ModeSelector value={"mode-0" as Mode} onChange={vi.fn()} modeShortcutText="Ctrl+M" />)
+
+		// Click to open the popover
+		fireEvent.click(screen.getByTestId("mode-selector-trigger"))
+
+		// Search input should be visible
+		expect(screen.getByTestId("mode-search-input")).toBeInTheDocument()
+
+		// Info icon should be visible
+		const infoIcon = document.querySelector(".codicon-info")
+		expect(infoIcon).toBeInTheDocument()
+	})
 })