feat(settings): add searchable dropdown to API config profiles setting page (#2221)

- Replace Select with Command+Popover components in ApiConfigManager
- Add search functionality to filter configuration profiles
- Add clear search button and selected item indicator
- Add internationalization support for all languages
- Match UX pattern from ModelPicker component for consistency

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

@@ -1,20 +1,26 @@
 import { memo, useEffect, useRef, useState } from "react"
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { ChevronsUpDown, Check, X } from "lucide-react"
 
 import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage"
 
 import { useAppTranslation } from "@/i18n/TranslationContext"
+import { cn } from "@/lib/utils"
 import {
 	Button,
 	Input,
 	Dialog,
 	DialogContent,
 	DialogTitle,
-	Select,
-	SelectTrigger,
-	SelectValue,
-	SelectContent,
-	SelectItem,
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
 } from "@/components/ui"
 
 interface ApiConfigManagerProps {
@@ -41,8 +47,11 @@ const ApiConfigManager = ({
 	const [inputValue, setInputValue] = useState("")
 	const [newProfileName, setNewProfileName] = useState("")
 	const [error, setError] = useState<string | null>(null)
+	const [open, setOpen] = useState(false)
+	const [searchValue, setSearchValue] = useState("")
 	const inputRef = useRef<any>(null)
 	const newProfileInputRef = useRef<any>(null)
+	const searchInputRef = useRef<HTMLInputElement>(null)
 
 	const validateName = (name: string, isNewProfile: boolean): string | null => {
 		const trimmed = name.trim()
@@ -95,8 +104,31 @@ const ApiConfigManager = ({
 	useEffect(() => {
 		resetCreateState()
 		resetRenameState()
+		// Reset search value when current profile changes
+		setTimeout(() => setSearchValue(""), 100)
 	}, [currentApiConfigName])
 
+	const onOpenChange = (open: boolean) => {
+		setOpen(open)
+
+		// Reset search when closing the popover
+		if (!open) {
+			setTimeout(() => setSearchValue(""), 100)
+		}
+	}
+
+	const onClearSearch = () => {
+		setSearchValue("")
+		searchInputRef.current?.focus()
+	}
+
+	const handleSelectConfig = (configName: string) => {
+		if (!configName) return
+
+		setOpen(false)
+		onSelectConfig(configName)
+	}
+
 	const handleAdd = () => {
 		resetCreateState()
 		setIsCreating(true)
@@ -206,18 +238,76 @@ const ApiConfigManager = ({
 			) : (
 				<>
 					<div className="flex items-center gap-1">
-						<Select value={currentApiConfigName} onValueChange={onSelectConfig}>
-							<SelectTrigger className="grow">
-								<SelectValue placeholder={t("settings:common.select")} />
-							</SelectTrigger>
-							<SelectContent>
-								{listApiConfigMeta.map((config) => (
-									<SelectItem key={config.name} value={config.name}>
-										{config.name}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
+						<Popover open={open} onOpenChange={onOpenChange}>
+							<PopoverTrigger asChild>
+								<Button
+									variant="combobox"
+									role="combobox"
+									aria-expanded={open}
+									className="grow justify-between"
+									// Use select-component data-testid for test compatibility
+									data-testid="select-component">
+									<div>{currentApiConfigName || t("settings:common.select")}</div>
+									<ChevronsUpDown className="opacity-50" />
+								</Button>
+							</PopoverTrigger>
+							<PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)]">
+								<Command>
+									<div className="relative">
+										<CommandInput
+											ref={searchInputRef}
+											value={searchValue}
+											onValueChange={setSearchValue}
+											placeholder={t("settings:providers.searchPlaceholder")}
+											className="h-9 mr-4"
+											data-testid="profile-search-input"
+										/>
+										{searchValue.length > 0 && (
+											<div className="absolute right-2 top-0 bottom-0 flex items-center justify-center">
+												<X
+													className="text-vscode-input-foreground opacity-50 hover:opacity-100 size-4 p-0.5 cursor-pointer"
+													onClick={onClearSearch}
+												/>
+											</div>
+										)}
+									</div>
+									<CommandList>
+										<CommandEmpty>
+											{searchValue && (
+												<div className="py-2 px-1 text-sm">
+													{t("settings:providers.noMatchFound")}
+												</div>
+											)}
+										</CommandEmpty>
+										<CommandGroup>
+											{listApiConfigMeta
+												.filter((config) =>
+													searchValue
+														? config.name.toLowerCase().includes(searchValue.toLowerCase())
+														: true,
+												)
+												.map((config) => (
+													<CommandItem
+														key={config.name}
+														value={config.name}
+														onSelect={handleSelectConfig}
+														data-testid={`profile-option-${config.name}`}>
+														{config.name}
+														<Check
+															className={cn(
+																"size-4 p-0.5 ml-auto",
+																config.name === currentApiConfigName
+																	? "opacity-100"
+																	: "opacity-0",
+															)}
+														/>
+													</CommandItem>
+												))}
+										</CommandGroup>
+									</CommandList>
+								</Command>
+							</PopoverContent>
+						</Popover>
 						<Button
 							variant="ghost"
 							size="icon"

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

@@ -42,6 +42,34 @@ jest.mock("@/components/ui", () => ({
 			data-testid={dataTestId}
 		/>
 	),
+	// New components for searchable dropdown
+	Popover: ({ children, open, onOpenChange }: any) => (
+		<div className="popover" style={{ position: "relative" }}>
+			{children}
+			{open && <div className="popover-content" style={{ position: "absolute", top: "100%", left: 0 }}></div>}
+		</div>
+	),
+	PopoverTrigger: ({ children, asChild }: any) => <div className="popover-trigger">{children}</div>,
+	PopoverContent: ({ children, className }: any) => <div className="popover-content">{children}</div>,
+	Command: ({ children }: any) => <div className="command">{children}</div>,
+	CommandInput: ({ value, onValueChange, placeholder, className, "data-testid": dataTestId, ref }: any) => (
+		<input
+			value={value}
+			onChange={(e) => onValueChange(e.target.value)}
+			placeholder={placeholder}
+			className={className}
+			data-testid={dataTestId}
+		/>
+	),
+	CommandList: ({ children }: any) => <div className="command-list">{children}</div>,
+	CommandEmpty: ({ children }: any) => (children ? <div className="command-empty">{children}</div> : null),
+	CommandGroup: ({ children }: any) => <div className="command-group">{children}</div>,
+	CommandItem: ({ children, value, onSelect }: any) => (
+		<div className="command-item" onClick={() => onSelect(value)} data-value={value}>
+			{children}
+		</div>
+	),
+	// Keep old components for backward compatibility
 	Select: ({ children, value, onValueChange }: any) => (
 		<select
 			value={value}
@@ -215,8 +243,22 @@ describe("ApiConfigManager", () => {
 	it("allows selecting a different config", () => {
 		render(<ApiConfigManager {...defaultProps} />)
 
-		const select = screen.getByTestId("select-component")
-		fireEvent.change(select, { target: { value: "Another Config" } })
+		// Click the select component to open the dropdown
+		const selectButton = screen.getByTestId("select-component")
+		fireEvent.click(selectButton)
+		
+		// Find all command items and click the one with "Another Config"
+		const commandItems = document.querySelectorAll('.command-item')
+		// Find the item with "Another Config" text
+		const anotherConfigItem = Array.from(commandItems).find(
+			item => item.textContent?.includes("Another Config")
+		)
+		
+		if (!anotherConfigItem) {
+			throw new Error("Could not find 'Another Config' option")
+		}
+		
+		fireEvent.click(anotherConfigItem)
 
 		expect(mockOnSelectConfig).toHaveBeenCalledWith("Another Config")
 	})

webview-ui/src/i18n/locales/ca/settings.json

@@ -98,6 +98,8 @@
 		"enterProfileName": "Introduïu el nom del perfil",
 		"createProfile": "Crea perfil",
 		"cannotDeleteOnlyProfile": "No es pot eliminar l'únic perfil",
+		"searchPlaceholder": "Cerca perfils",
+		"noMatchFound": "No s'han trobat perfils coincidents",
 		"vscodeLmDescription": "L'API del model de llenguatge de VS Code us permet executar models proporcionats per altres extensions de VS Code (incloent-hi, però no limitat a, GitHub Copilot). La manera més senzilla de començar és instal·lar les extensions Copilot i Copilot Chat des del VS Code Marketplace.",
 		"awsCustomArnUse": "Introduïu un ARN vàlid d'AWS Bedrock per al model que voleu utilitzar. Exemples de format:",
 		"awsCustomArnDesc": "Assegureu-vos que la regió a l'ARN coincideix amb la regió d'AWS seleccionada anteriorment.",

webview-ui/src/i18n/locales/de/settings.json

@@ -98,6 +98,8 @@
 		"enterProfileName": "Profilnamen eingeben",
 		"createProfile": "Profil erstellen",
 		"cannotDeleteOnlyProfile": "Das einzige Profil kann nicht gelöscht werden",
+		"searchPlaceholder": "Profile durchsuchen",
+		"noMatchFound": "Keine passenden Profile gefunden",
 		"vscodeLmDescription": "Die VS Code Language Model API ermöglicht das Ausführen von Modellen, die von anderen VS Code-Erweiterungen bereitgestellt werden (einschließlich, aber nicht beschränkt auf GitHub Copilot). Der einfachste Weg, um zu starten, besteht darin, die Erweiterungen Copilot und Copilot Chat aus dem VS Code Marketplace zu installieren.",
 		"awsCustomArnUse": "Geben Sie eine gültige AWS Bedrock ARN für das Modell ein, das Sie verwenden möchten. Formatbeispiele:",
 		"awsCustomArnDesc": "Stellen Sie sicher, dass die Region in der ARN mit Ihrer oben ausgewählten AWS-Region übereinstimmt.",

webview-ui/src/i18n/locales/en/settings.json

@@ -98,6 +98,8 @@
 		"enterProfileName": "Enter profile name",
 		"createProfile": "Create Profile",
 		"cannotDeleteOnlyProfile": "Cannot delete the only profile",
+		"searchPlaceholder": "Search profiles",
+		"noMatchFound": "No matching profiles found",
 		"vscodeLmDescription": " The VS Code Language Model API allows you to run models provided by other VS Code extensions (including but not limited to GitHub Copilot). The easiest way to get started is to install the Copilot and Copilot Chat extensions from the VS Code Marketplace.",
 		"awsCustomArnUse": "Enter a valid AWS Bedrock ARN for the model you want to use. Format examples:",
 		"awsCustomArnDesc": "Make sure the region in the ARN matches your selected AWS Region above.",

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

@@ -98,6 +98,8 @@
 		"enterProfileName": "Ingrese el nombre del perfil",
 		"createProfile": "Crear perfil",
 		"cannotDeleteOnlyProfile": "No se puede eliminar el único perfil",
+		"searchPlaceholder": "Buscar perfiles",
+		"noMatchFound": "No se encontraron perfiles coincidentes",
 		"vscodeLmDescription": "La API del Modelo de Lenguaje de VS Code le permite ejecutar modelos proporcionados por otras extensiones de VS Code (incluido, entre otros, GitHub Copilot). La forma más sencilla de empezar es instalar las extensiones Copilot y Copilot Chat desde el VS Code Marketplace.",
 		"awsCustomArnUse": "Ingrese un ARN de AWS Bedrock válido para el modelo que desea utilizar. Ejemplos de formato:",
 		"awsCustomArnDesc": "Asegúrese de que la región en el ARN coincida con la región de AWS seleccionada anteriormente.",

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

@@ -98,6 +98,8 @@
 		"enterProfileName": "Entrez le nom du profil",
 		"createProfile": "Créer un profil",
 		"cannotDeleteOnlyProfile": "Impossible de supprimer le seul profil",
+		"searchPlaceholder": "Rechercher des profils",
+		"noMatchFound": "Aucun profil correspondant trouvé",
 		"vscodeLmDescription": "L'API du modèle de langage VS Code vous permet d'exécuter des modèles fournis par d'autres extensions VS Code (y compris, mais sans s'y limiter, GitHub Copilot). Le moyen le plus simple de commencer est d'installer les extensions Copilot et Copilot Chat depuis le VS Code Marketplace.",
 		"awsCustomArnUse": "Entrez un ARN AWS Bedrock valide pour le modèle que vous souhaitez utiliser. Exemples de format :",
 		"awsCustomArnDesc": "Assurez-vous que la région dans l'ARN correspond à la région AWS sélectionnée ci-dessus.",

webview-ui/src/i18n/locales/hi/settings.json

@@ -98,6 +98,8 @@
 		"enterProfileName": "प्रोफ़ाइल नाम दर्ज करें",
 		"createProfile": "प्रोफ़ाइल बनाएं",
 		"cannotDeleteOnlyProfile": "केवल एकमात्र प्रोफ़ाइल को हटाया नहीं जा सकता",
+		"searchPlaceholder": "प्रोफ़ाइल खोजें",
+		"noMatchFound": "कोई मिलान प्रोफ़ाइल नहीं मिला",
 		"vscodeLmDescription": "VS कोड भाषा मॉडल API आपको अन्य VS कोड एक्सटेंशन (जैसे GitHub Copilot) द्वारा प्रदान किए गए मॉडल चलाने की अनुमति देता है। शुरू करने का सबसे आसान तरीका VS कोड मार्केटप्लेस से Copilot और Copilot चैट एक्सटेंशन इंस्टॉल करना है।",
 		"awsCustomArnUse": "आप जिस मॉडल का उपयोग करना चाहते हैं, उसके लिए एक वैध AWS बेडरॉक ARN दर्ज करें। प्रारूप उदाहरण:",
 		"awsCustomArnDesc": "सुनिश्चित करें कि ARN में क्षेत्र ऊपर चयनित AWS क्षेत्र से मेल खाता है।",

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

@@ -98,6 +98,8 @@
 		"enterProfileName": "Inserisci il nome del profilo",
 		"createProfile": "Crea profilo",
 		"cannotDeleteOnlyProfile": "Impossibile eliminare l'unico profilo",
+		"searchPlaceholder": "Cerca profili",
+		"noMatchFound": "Nessun profilo corrispondente trovato",
 		"vscodeLmDescription": "L'API del Modello di Linguaggio di VS Code consente di eseguire modelli forniti da altre estensioni di VS Code (incluso, ma non limitato a, GitHub Copilot). Il modo più semplice per iniziare è installare le estensioni Copilot e Copilot Chat dal VS Code Marketplace.",
 		"awsCustomArnUse": "Inserisci un ARN AWS Bedrock valido per il modello che desideri utilizzare. Esempi di formato:",
 		"awsCustomArnDesc": "Assicurati che la regione nell'ARN corrisponda alla regione AWS selezionata sopra.",

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

@@ -98,6 +98,8 @@
 		"enterProfileName": "プロファイル名を入力",
 		"createProfile": "プロファイルを作成",
 		"cannotDeleteOnlyProfile": "唯一のプロファイルは削除できません",
+		"searchPlaceholder": "プロファイルを検索",
+		"noMatchFound": "一致するプロファイルが見つかりません",
 		"vscodeLmDescription": "VS Code言語モデルAPIを使用すると、他のVS Code拡張機能（GitHub Copilotなど）が提供するモデルを実行できます。最も簡単な方法は、VS Code MarketplaceからCopilotおよびCopilot Chat拡張機能をインストールすることです。",
 		"awsCustomArnUse": "使用したいモデルの有効なAWS Bedrock ARNを入力してください。形式の例:",
 		"awsCustomArnDesc": "ARN内のリージョンが上で選択したAWSリージョンと一致していることを確認してください。",

webview-ui/src/i18n/locales/ko/settings.json

@@ -98,6 +98,8 @@
 		"enterProfileName": "프로필 이름 입력",
 		"createProfile": "프로필 생성",
 		"cannotDeleteOnlyProfile": "유일한 프로필은 삭제할 수 없습니다",
+		"searchPlaceholder": "프로필 검색",
+		"noMatchFound": "일치하는 프로필이 없습니다",
 		"vscodeLmDescription": "VS Code 언어 모델 API를 사용하면 GitHub Copilot을 포함한 기타 VS Code 확장 프로그램이 제공하는 모델을 실행할 수 있습니다. 시작하려면 VS Code 마켓플레이스에서 Copilot 및 Copilot Chat 확장 프로그램을 설치하는 것이 가장 쉽습니다.",
 		"awsCustomArnUse": "사용하려는 모델의 유효한 AWS Bedrock ARN을 입력하세요. 형식 예시:",
 		"awsCustomArnDesc": "ARN의 리전이 위에서 선택한 AWS 리전과 일치하는지 확인하세요.",

webview-ui/src/i18n/locales/pl/settings.json

@@ -98,6 +98,8 @@
 		"enterProfileName": "Wprowadź nazwę profilu",
 		"createProfile": "Utwórz profil",
 		"cannotDeleteOnlyProfile": "Nie można usunąć jedynego profilu",
+		"searchPlaceholder": "Szukaj profili",
+		"noMatchFound": "Nie znaleziono pasujących profili",
 		"vscodeLmDescription": "Interfejs API modelu językowego VS Code umożliwia uruchamianie modeli dostarczanych przez inne rozszerzenia VS Code (w tym, ale nie tylko, GitHub Copilot). Najłatwiejszym sposobem na rozpoczęcie jest zainstalowanie rozszerzeń Copilot i Copilot Chat z VS Code Marketplace.",
 		"awsCustomArnUse": "Wprowadź prawidłowy AWS Bedrock ARN dla modelu, którego chcesz użyć. Przykłady formatu:",
 		"awsCustomArnDesc": "Upewnij się, że region w ARN odpowiada wybranemu powyżej regionowi AWS.",

webview-ui/src/i18n/locales/pt-BR/settings.json

@@ -98,6 +98,8 @@
 		"enterProfileName": "Digite o nome do perfil",
 		"createProfile": "Criar perfil",
 		"cannotDeleteOnlyProfile": "Não é possível excluir o único perfil",
+		"searchPlaceholder": "Pesquisar perfis",
+		"noMatchFound": "Nenhum perfil correspondente encontrado",
 		"vscodeLmDescription": "A API do Modelo de Linguagem do VS Code permite executar modelos fornecidos por outras extensões do VS Code (incluindo, mas não se limitando, ao GitHub Copilot). A maneira mais fácil de começar é instalar as extensões Copilot e Copilot Chat no VS Code Marketplace.",
 		"awsCustomArnUse": "Insira um ARN AWS Bedrock válido para o modelo que deseja usar. Exemplos de formato:",
 		"awsCustomArnDesc": "Certifique-se de que a região no ARN corresponde à região AWS selecionada acima.",

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

@@ -98,6 +98,8 @@
 		"enterProfileName": "Profil adını girin",
 		"createProfile": "Profil oluştur",
 		"cannotDeleteOnlyProfile": "Yalnızca tek profili silemezsiniz",
+		"searchPlaceholder": "Profilleri ara",
+		"noMatchFound": "Eşleşen profil bulunamadı",
 		"vscodeLmDescription": "VS Code Dil Modeli API'si, diğer VS Code uzantıları tarafından sağlanan modelleri çalıştırmanıza olanak tanır (GitHub Copilot dahil ancak bunlarla sınırlı değildir). Başlamanın en kolay yolu, VS Code Marketplace'ten Copilot ve Copilot Chat uzantılarını yüklemektir.",
 		"awsCustomArnUse": "Kullanmak istediğiniz model için geçerli bir AWS Bedrock ARN'si girin. Format örnekleri:",
 		"awsCustomArnDesc": "ARN içindeki bölgenin yukarıda seçilen AWS Bölgesiyle eşleştiğinden emin olun.",

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

@@ -98,6 +98,8 @@
 		"enterProfileName": "Nhập tên hồ sơ",
 		"createProfile": "Tạo hồ sơ",
 		"cannotDeleteOnlyProfile": "Không thể xóa hồ sơ duy nhất",
+		"searchPlaceholder": "Tìm kiếm hồ sơ",
+		"noMatchFound": "Không tìm thấy hồ sơ phù hợp",
 		"vscodeLmDescription": "API Mô hình Ngôn ngữ VS Code cho phép bạn chạy các mô hình được cung cấp bởi các tiện ích mở rộng khác của VS Code (bao gồm nhưng không giới hạn ở GitHub Copilot). Cách dễ nhất để bắt đầu là cài đặt các tiện ích mở rộng Copilot và Copilot Chat từ VS Code Marketplace.",
 		"awsCustomArnUse": "Nhập một ARN AWS Bedrock hợp lệ cho mô hình bạn muốn sử dụng. Ví dụ về định dạng:",
 		"awsCustomArnDesc": "Đảm bảo rằng vùng trong ARN khớp với vùng AWS đã chọn ở trên.",

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

@@ -98,6 +98,8 @@
 		"enterProfileName": "输入新配置名称",
 		"createProfile": "创建配置",
 		"cannotDeleteOnlyProfile": "无法删除唯一的配置文件",
+		"searchPlaceholder": "搜索配置文件",
+		"noMatchFound": "未找到匹配的配置文件",
 		"vscodeLmDescription": "VS Code 语言模型 API 允许您运行由其他 VS Code 扩展（包括但不限于 GitHub Copilot）提供的模型。最简单的方法是从 VS Code 市场安装 Copilot 和 Copilot Chat 扩展。",
 		"awsCustomArnUse": "请输入有效的 AWS Bedrock ARN（Amazon资源名称），格式示例：",
 		"awsCustomArnDesc": "请确保ARN中的区域与上方选择的AWS区域一致。",

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

@@ -101,6 +101,8 @@
 		"vscodeLmDescription": "VS Code 語言模型 API 可以讓您使用其他擴充功能（如 GitHub Copilot）提供的模型。最簡單的方式是從 VS Code Marketplace 安裝 Copilot 和 Copilot Chat 擴充套件。",
 		"awsCustomArnUse": "輸入您要使用的模型的有效 AWS Bedrock ARN。格式範例：",
 		"awsCustomArnDesc": "確保 ARN 中的區域與您上面選擇的 AWS 區域相符。",
+		"searchPlaceholder": "搜尋設定檔",
+		"noMatchFound": "找不到符合的設定檔",
 		"openRouterApiKey": "OpenRouter API 金鑰",
 		"getOpenRouterApiKey": "取得 OpenRouter API 金鑰",
 		"apiKeyStorageNotice": "API 金鑰安全儲存於 VSCode 金鑰儲存中",