feat(ui): apply Bruno feedback — simplify Chat dropdown (remove sort controls, prefer saved custom order); Settings always-on reordering with Reset to Alphabetical; update tests; fix lint

Author: hannesrudolph

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

@@ -88,8 +88,6 @@ const ConfigItem = ({ config, isPinned, index, value, onSelect, togglePinnedApiC
 	)
 }
 
-type SortMode = "alphabetical" | "custom"
-
 interface ApiConfigSelectorProps {
 	value: string
 	displayName: string
@@ -100,8 +98,6 @@ interface ApiConfigSelectorProps {
 	listApiConfigMeta: Array<{ id: string; name: string; modelId?: string }>
 	pinnedApiConfigs?: Record<string, boolean>
 	togglePinnedApiConfig: (id: string) => void
-	onSortModeChange?: (mode: SortMode) => void
-	onCustomOrderChange?: (order: Array<{ id: string; index: number; pinned: boolean }>) => void
 }
 
 export const ApiConfigSelector = ({
@@ -114,52 +110,33 @@ export const ApiConfigSelector = ({
 	listApiConfigMeta,
 	pinnedApiConfigs,
 	togglePinnedApiConfig,
-	onSortModeChange,
-	onCustomOrderChange,
 }: ApiConfigSelectorProps) => {
 	const { t } = useAppTranslation()
 	const { apiConfigsCustomOrder: customOrder = [] } = useExtensionState()
 	const [open, setOpen] = useState(false)
 	const [searchValue, setSearchValue] = useState("")
 
-	const [sortMode, setSortMode] = useState<SortMode>("alphabetical")
+	// No explicit sort mode in Chat; use custom order if available, otherwise alphabetical
 
 	const portalContainer = useRooPortal("roo-portal")
 
-	// Sort configs based on sort mode
+	// Sort configs: prefer saved custom order; otherwise alphabetical
 	const sortedConfigs = useMemo(() => {
 		const sorted = [...listApiConfigMeta]
 
-		switch (sortMode) {
-			case "alphabetical":
-				sorted.sort((a, b) => a.name.localeCompare(b.name))
-				break
-			case "custom":
-				if (customOrder && customOrder.length > 0) {
-					// Sort by custom order, with unordered items at the end
-					const orderMap = new Map(customOrder.map((item) => [item.id, item.index]))
-					sorted.sort((a, b) => {
-						const aIndex = orderMap.get(a.id) ?? Number.MAX_SAFE_INTEGER
-						const bIndex = orderMap.get(b.id) ?? Number.MAX_SAFE_INTEGER
-						return (aIndex as number) - (bIndex as number)
-					})
-				}
-				break
+		if (customOrder && customOrder.length > 0) {
+			const orderMap = new Map(customOrder.map((item) => [item.id, item.index]))
+			sorted.sort((a, b) => {
+				const aIndex = orderMap.get(a.id) ?? Number.MAX_SAFE_INTEGER
+				const bIndex = orderMap.get(b.id) ?? Number.MAX_SAFE_INTEGER
+				return (aIndex as number) - (bIndex as number)
+			})
+		} else {
+			sorted.sort((a, b) => a.name.localeCompare(b.name))
 		}
 
 		return sorted
-	}, [listApiConfigMeta, sortMode, customOrder])
-
-	// Current visible order for callbacks when switching to custom
-	const currentOrder = useMemo(
-		() =>
-			sortedConfigs.map((config, index) => ({
-				id: config.id,
-				index,
-				pinned: Boolean(pinnedApiConfigs?.[config.id]),
-			})),
-		[sortedConfigs, pinnedApiConfigs],
-	)
+	}, [listApiConfigMeta, customOrder])
 
 	// Filter configs based on search.
 	const filteredConfigs = useMemo(() => {
@@ -193,22 +170,6 @@ export const ApiConfigSelector = ({
 		setOpen(false)
 	}, [])
 
-	const handleSortModeChange = useCallback(
-		(mode: SortMode) => {
-			setSortMode(mode)
-			onSortModeChange?.(mode)
-			if (mode === "custom") {
-				// Persist current visible order as custom order baseline
-				vscode.postMessage({
-					type: "setApiConfigsCustomOrder",
-					values: { customOrder: currentOrder },
-				})
-				onCustomOrderChange?.(currentOrder)
-			}
-		},
-		[onSortModeChange, onCustomOrderChange, currentOrder],
-	)
-
 	return (
 		<Popover open={open} onOpenChange={setOpen} data-testid="api-config-selector-root">
 			<StandardTooltip content={title}>
@@ -312,34 +273,7 @@ export const ApiConfigSelector = ({
 
 					{/* Bottom bar with controls */}
 					<div className="flex flex-col border-t border-vscode-dropdown-border">
-						{/* Sort controls */}
-						<div className="flex items-center justify-between px-2 py-1.5 border-b border-vscode-dropdown-border">
-							<div className="flex items-center gap-2">
-								<span className="text-xs text-vscode-descriptionForeground">
-									{t("chat:apiConfigSelector.sort")}
-								</span>
-								<div className="flex items-center gap-1">
-									{(["alphabetical", "custom"] as const).map((mode) => (
-										<Button
-											key={mode}
-											variant="ghost"
-											size="sm"
-											aria-label={`${t("chat:apiConfigSelector.sort")} ${mode === "alphabetical" ? t("chat:apiConfigSelector.alphabetical") : t("chat:apiConfigSelector.custom")}`}
-											aria-pressed={sortMode === mode}
-											onClick={() => handleSortModeChange(mode)}
-											className={cn(
-												"h-6 px-2 text-xs",
-												sortMode === mode &&
-													"bg-vscode-button-background text-vscode-button-foreground",
-											)}>
-											{mode === "alphabetical"
-												? t("chat:apiConfigSelector.alphabetical")
-												: t("chat:apiConfigSelector.custom")}
-										</Button>
-									))}
-								</div>
-							</div>
-						</div>
+						{/* No sort controls in Chat dropdown per design feedback */}
 
 						{/* Bottom bar with settings and title */}
 						<div className="flex flex-row items-center justify-between px-2 py-2">

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

@@ -436,60 +436,6 @@ describe("ApiConfigSelector", () => {
 		expect(searchInput.value).toBe("Config")
 	})
 
-	test("calls onSortModeChange when switching sort mode", () => {
-		const mockOnSortModeChange = vi.fn()
-		render(<ApiConfigSelector {...defaultProps} onSortModeChange={mockOnSortModeChange} />)
-
-		const trigger = screen.getByTestId("dropdown-trigger")
-		fireEvent.click(trigger)
-
-		const customButton = screen.getByText("chat:apiConfigSelector.custom")
-		fireEvent.click(customButton)
-
-		expect(mockOnSortModeChange).toHaveBeenCalledWith("custom")
-	})
-
-	test("persists custom order when switching to custom sort", () => {
-		render(<ApiConfigSelector {...defaultProps} />)
-
-		const trigger = screen.getByTestId("dropdown-trigger")
-		fireEvent.click(trigger)
-
-		const customButton = screen.getByText("chat:apiConfigSelector.custom")
-		fireEvent.click(customButton)
-
-		expect(vi.mocked(vscode.postMessage)).toHaveBeenCalledWith(
-			expect.objectContaining({ type: "setApiConfigsCustomOrder" }),
-		)
-	})
-
-	test("switches between sort modes", () => {
-		render(<ApiConfigSelector {...defaultProps} />)
-
-		const trigger = screen.getByTestId("dropdown-trigger")
-		fireEvent.click(trigger)
-
-		// Check that alphabetical button is initially active (default state)
-		const alphabeticalButton = screen.getByText("chat:apiConfigSelector.alphabetical")
-		expect(alphabeticalButton).toHaveAttribute("aria-pressed", "true")
-
-		// Switch to custom mode
-		const customButton = screen.getByText("chat:apiConfigSelector.custom")
-		expect(customButton).toHaveAttribute("aria-pressed", "false")
-		fireEvent.click(customButton)
-
-		// Check that custom button is now active
-		expect(customButton).toHaveAttribute("aria-pressed", "true")
-		expect(alphabeticalButton).toHaveAttribute("aria-pressed", "false")
-
-		// Switch back to alphabetical mode
-		fireEvent.click(alphabeticalButton)
-
-		// Check that alphabetical button is active again
-		expect(alphabeticalButton).toHaveAttribute("aria-pressed", "true")
-		expect(customButton).toHaveAttribute("aria-pressed", "false")
-	})
-
 	test("pinned configs remain fixed at top while unpinned configs scroll", () => {
 		// Create a list with many configs to test scrolling
 		const manyConfigs = Array.from({ length: 15 }, (_, i) => ({

webview-ui/src/components/settings/ApiConfigManager.tsx

@@ -45,7 +45,8 @@ const ApiConfigManager = ({
 		dragOverIndex: null,
 	})
 	const [focusedIndex, setFocusedIndex] = useState<number | null>(null)
-	const [isReorderingMode, setIsReorderingMode] = useState(false)
+	// Always allow reordering in Settings per design feedback
+	const isReorderingMode = true
 	const newProfileInputRef = useRef<any>(null)
 
 	const isOnlyProfile = listApiConfigMeta?.length === 1
@@ -270,9 +271,7 @@ const ApiConfigManager = ({
 		setIsCreating(true)
 	}
 
-	const toggleReorderingMode = () => {
-		setIsReorderingMode(!isReorderingMode)
-	}
+	// Removed explicit toggle; reordering is always enabled
 
 	const handleRename = useCallback(
 		(oldName: string, newName: string) => {
@@ -309,21 +308,18 @@ const ApiConfigManager = ({
 				<label className="block font-medium mb-1">{t("settings:providers.configProfile")}</label>
 				{/* Action buttons */}
 				<div className="flex items-center gap-1 mb-3">
-					<StandardTooltip
-						content={
-							isReorderingMode
-								? t("settings:providers.exitReorderMode")
-								: t("settings:providers.reorderProfiles")
-						}>
+					<StandardTooltip content="Reset to Alphabetical">
 						<Button
 							variant="ghost"
 							size="icon"
-							onClick={toggleReorderingMode}
-							data-testid="reorder-toggle-button"
-							className={
-								isReorderingMode ? "bg-vscode-button-background text-vscode-button-foreground" : ""
-							}>
-							<span className="codicon codicon-list-ordered" />
+							onClick={() =>
+								vscode.postMessage({
+									type: "setApiConfigsCustomOrder",
+									values: { customOrder: [] },
+								})
+							}
+							data-testid="reset-to-alphabetical-button">
+							<span className="codicon codicon-discard" />
 						</Button>
 					</StandardTooltip>
 					<StandardTooltip content={t("settings:providers.addProfile")}>
@@ -369,9 +365,7 @@ const ApiConfigManager = ({
 
 			{/* Help text */}
 			<div className="text-vscode-descriptionForeground text-sm mt-2">
-				{isReorderingMode
-					? t("settings:providers.reorderModeHelpText")
-					: t("settings:providers.normalModeHelpText")}
+				{t("settings:providers.reorderModeHelpText")}
 			</div>
 
 			<Dialog

webview-ui/src/components/settings/ConfigListItem.tsx

@@ -200,7 +200,7 @@ const ConfigListItem = memo(function ConfigListItemComponent({
 						}
 					: undefined
 			}
-			onClick={isReorderingMode ? undefined : () => onSelectConfig(config.name)}
+			onClick={() => onSelectConfig(config.name)}
 			onKeyDown={(e) => {
 				onKeyDown(e, index)
 				if (!isReorderingMode && (e.key === "Enter" || e.key === " ")) {

webview-ui/src/components/settings/__tests__/ApiConfigManager.spec.tsx

@@ -378,73 +378,21 @@ describe("ApiConfigManager", () => {
 			listApiConfigMeta: mockConfigsForReordering,
 		}
 
-		it("should render reorder toggle button", () => {
+		it("shows reset-to-alphabetical button", () => {
 			render(<ApiConfigManager {...reorderingProps} />)
-
-			const reorderButton = screen.getByTestId("reorder-toggle-button")
-			expect(reorderButton).toBeInTheDocument()
-		})
-
-		it("should toggle reordering mode when reorder button is clicked", () => {
-			render(<ApiConfigManager {...reorderingProps} />)
-
-			const reorderButton = screen.getByTestId("reorder-toggle-button")
-
-			// Initially not in reordering mode
-			expect(reorderButton).not.toHaveClass("bg-vscode-button-background")
-
-			// Click to enter reordering mode
-			fireEvent.click(reorderButton)
-			expect(reorderButton).toHaveClass("bg-vscode-button-background")
-
-			// Click again to exit reordering mode
-			fireEvent.click(reorderButton)
-			expect(reorderButton).not.toHaveClass("bg-vscode-button-background")
+			const resetBtn = screen.getByTestId("reset-to-alphabetical-button")
+			expect(resetBtn).toBeInTheDocument()
 		})
 
-		it("should show different help text based on reordering mode", () => {
+		it("always shows reorder help text in settings", () => {
 			render(<ApiConfigManager {...reorderingProps} />)
-
-			const reorderButton = screen.getByTestId("reorder-toggle-button")
-
-			// Initially shows normal help text
-			expect(screen.getByText("settings:providers.normalModeHelpText")).toBeInTheDocument()
-
-			// Enter reordering mode
-			fireEvent.click(reorderButton)
 			expect(screen.getByText("settings:providers.reorderModeHelpText")).toBeInTheDocument()
 		})
 
-		it("should show checkmark for current config when not in reordering mode", () => {
-			render(<ApiConfigManager {...reorderingProps} />)
-
-			// Should show checkmark for current config
-			const checkmarks = screen.getAllByText("", { selector: ".codicon-check" })
-			expect(checkmarks.length).toBeGreaterThan(0)
-		})
-
-		it("should disable regular click behavior in reordering mode", () => {
+		it("allows click selection while reordering", () => {
 			render(<ApiConfigManager {...reorderingProps} />)
-
-			const reorderButton = screen.getByTestId("reorder-toggle-button")
 			const configItems = screen.getAllByRole("option")
-
-			// Enter reordering mode
-			fireEvent.click(reorderButton)
-
-			// Click on a config item should not trigger selection
 			fireEvent.click(configItems[1])
-			expect(mockOnSelectConfig).not.toHaveBeenCalled()
-		})
-
-		it("should allow regular click behavior when not in reordering mode", () => {
-			render(<ApiConfigManager {...reorderingProps} />)
-
-			const configItems = screen.getAllByRole("option")
-
-			// Click on a config item should trigger selection
-			// The actual order depends on the sorting logic, so let's just test that clicking works
-			fireEvent.click(configItems[0])
 			expect(mockOnSelectConfig).toHaveBeenCalled()
 		})
 	})