Merge pull request #615 from psv2522/change-select-to-dropdown

fix: Use Dropdown instead of select in settings for more UI consistency

Author: mrubens

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

@@ -1,6 +1,8 @@
 import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { memo, useEffect, useRef, useState } from "react"
 import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage"
+import { Dropdown } from "vscrui"
+import type { DropdownOption } from "vscrui"
 
 interface ApiConfigManagerProps {
 	currentApiConfigName?: string
@@ -133,28 +135,21 @@ const ApiConfigManager = ({
 				) : (
 					<>
 						<div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
-							<select
+							<Dropdown
 								id="config-profile"
 								value={currentApiConfigName}
-								onChange={(e) => onSelectConfig(e.target.value)}
+								onChange={(value: unknown) => {
+									onSelectConfig((value as DropdownOption).value)
+								}}
 								style={{
-									flexGrow: 1,
-									padding: "4px 8px",
-									paddingRight: "24px",
-									backgroundColor: "var(--vscode-dropdown-background)",
-									color: "var(--vscode-dropdown-foreground)",
-									border: "1px solid var(--vscode-dropdown-border)",
-									borderRadius: "2px",
-									height: "28px",
-									cursor: "pointer",
-									outline: "none",
-								}}>
-								{listApiConfigMeta?.map((config) => (
-									<option key={config.name} value={config.name}>
-										{config.name}
-									</option>
-								))}
-							</select>
+									minWidth: 130,
+								}}
+								role="combobox"
+								options={listApiConfigMeta.map((config) => ({
+									value: config.name,
+									label: config.name,
+								}))}
+							/>
 							<VSCodeButton
 								appearance="icon"
 								onClick={handleAdd}

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

@@ -7,6 +7,8 @@ import ApiOptions from "./ApiOptions"
 import ExperimentalFeature from "./ExperimentalFeature"
 import { EXPERIMENT_IDS, experimentConfigsMap } from "../../../../src/shared/experiments"
 import ApiConfigManager from "./ApiConfigManager"
+import { Dropdown } from "vscrui"
+import type { DropdownOption } from "vscrui"
 
 type SettingsViewProps = {
 	onDone: () => void
@@ -451,23 +453,21 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Browser Settings</h3>
 					<div style={{ marginBottom: 15 }}>
 						<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Viewport size</label>
-						<select
-							value={browserViewportSize}
-							onChange={(e) => setBrowserViewportSize(e.target.value)}
-							style={{
-								width: "100%",
-								padding: "4px 8px",
-								backgroundColor: "var(--vscode-input-background)",
-								color: "var(--vscode-input-foreground)",
-								border: "1px solid var(--vscode-input-border)",
-								borderRadius: "2px",
-								height: "28px",
-							}}>
-							<option value="1280x800">Large Desktop (1280x800)</option>
-							<option value="900x600">Small Desktop (900x600)</option>
-							<option value="768x1024">Tablet (768x1024)</option>
-							<option value="360x640">Mobile (360x640)</option>
-						</select>
+						<div className="dropdown-container">
+							<Dropdown
+								value={browserViewportSize}
+								onChange={(value: unknown) => {
+									setBrowserViewportSize((value as DropdownOption).value)
+								}}
+								style={{ width: "100%" }}
+								options={[
+									{ value: "1280x800", label: "Large Desktop (1280x800)" },
+									{ value: "900x600", label: "Small Desktop (900x600)" },
+									{ value: "768x1024", label: "Tablet (768x1024)" },
+									{ value: "360x640", label: "Mobile (360x640)" },
+								]}
+							/>
+						</div>
 						<p
 							style={{
 								fontSize: "12px",

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

@@ -19,6 +19,20 @@ jest.mock("@vscode/webview-ui-toolkit/react", () => ({
 	),
 }))
 
+jest.mock("vscrui", () => ({
+	Dropdown: ({ id, value, onChange, options, role }: any) => (
+		<div data-testid={`mock-dropdown-${id}`}>
+			<select value={value} onChange={(e) => onChange({ value: e.target.value })} data-testid={id} role={role}>
+				{options.map((opt: any) => (
+					<option key={opt.value} value={opt.value}>
+						{opt.label}
+					</option>
+				))}
+			</select>
+		</div>
+	),
+}))
+
 describe("ApiConfigManager", () => {
 	const mockOnSelectConfig = jest.fn()
 	const mockOnDeleteConfig = jest.fn()