Introduce a reusable Dropdown component and use it to replace the native HTML select element in the General Settings section

Author: robertpiosik

packages/ui/src/components/editor/common/Dropdown/Dropdown.module.scss

@@ -0,0 +1,43 @@
+.dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--padding-8px);
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border: 1px solid var(--cwc-border-color);
+  padding: var(--padding-4px) var(--padding-8px);
+  border-radius: var(--border-radius-4px);
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    background: var(--vscode-list-hoverBackground);
+  }
+
+  &[data-is-open='true'] {
+    border-color: var(--vscode-focusBorder);
+    outline: 1px solid var(--vscode-focusBorder);
+    outline-offset: -1px;
+  }
+}
+
+.chevron {
+  transition: transform 0.2s ease;
+  color: var(--vscode-icon-foreground);
+}
+
+.chevron_open {
+  transform: rotate(180deg);
+}
+
+.menu_override {
+  left: 0;
+  right: auto;
+}

packages/ui/src/components/editor/common/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import { Dropdown } from './Dropdown'
+
+export default {
+  component: Dropdown
+}
+
+const sample_options: Dropdown.Option<string>[] = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' }
+]
+
+export const Default = () => {
+  const [value, set_value] = useState('option1')
+
+  return (
+    <div style={{ width: '220px' }}>
+      <Dropdown options={sample_options} value={value} onChange={set_value} />
+    </div>
+  )
+}

packages/ui/src/components/editor/common/Dropdown/Dropdown.tsx

@@ -0,0 +1,85 @@
+import { useState, useRef, useEffect } from 'react'
+import cn from 'classnames'
+import { DropdownMenu } from '../DropdownMenu'
+import styles from './Dropdown.module.scss'
+
+export namespace Dropdown {
+  export type Option<T extends string> = {
+    value: T
+    label: string
+  }
+
+  export type Props<T extends string> = {
+    options: Option<T>[]
+    value: T
+    onChange: (value: T) => void
+    className?: string
+    max_width?: number
+  }
+}
+
+export const Dropdown = <T extends string>({
+  options,
+  value,
+  onChange,
+  className,
+  max_width
+}: Dropdown.Props<T>) => {
+  const [is_open, set_is_open] = useState(false)
+  const dropdown_ref = useRef<HTMLDivElement>(null)
+
+  const selected_option = options.find((opt) => opt.value === value)
+
+  const handle_click_outside = (event: MouseEvent) => {
+    if (
+      dropdown_ref.current &&
+      !dropdown_ref.current.contains(event.target as Node)
+    ) {
+      set_is_open(false)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handle_click_outside)
+    return () => {
+      document.removeEventListener('mousedown', handle_click_outside)
+    }
+  }, [])
+
+  const menu_items: DropdownMenu.Item[] = options.map((option) => ({
+    label: option.label,
+    is_selected: option.value === value,
+    on_click: () => {
+      onChange(option.value)
+      set_is_open(false)
+    }
+  }))
+
+  const style = max_width ? { maxWidth: `${max_width}px` } : undefined
+
+  return (
+    <div
+      className={cn(styles.dropdown, className)}
+      ref={dropdown_ref}
+      style={style}
+    >
+      <button
+        className={styles.button}
+        onClick={() => set_is_open(!is_open)}
+        data-is-open={is_open}
+      >
+        <span>{selected_option?.label ?? 'Select...'}</span>
+        <span
+          className={cn(
+            'codicon codicon-chevron-down',
+            styles.chevron,
+            is_open && styles.chevron_open
+          )}
+        />
+      </button>
+      {is_open && (
+        <DropdownMenu items={menu_items} className={styles.menu_override} />
+      )}
+    </div>
+  )
+}

packages/ui/src/components/editor/common/Dropdown/index.ts

@@ -0,0 +1 @@
+export * from './Dropdown'

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.module.scss

@@ -6,7 +6,7 @@
   border-radius: var(--border-radius-8px);
   border: 1px solid var(--vscode-widget-border);
   box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
-  z-index: 1;
+  z-index: 2;
   padding: var(--padding-4px);
   width: max-content;
   text-align: left;

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.tsx

@@ -12,15 +12,17 @@ export namespace DropdownMenu {
   export type Props = {
     items: Item[]
     on_mouse_enter?: React.MouseEventHandler<HTMLDivElement>
+    className?: string
   }
 }
 
 export const DropdownMenu: React.FC<DropdownMenu.Props> = ({
   items,
-  on_mouse_enter
+  on_mouse_enter,
+  className
 }) => {
   return (
-    <div className={cn(styles.menu)} onMouseEnter={on_mouse_enter}>
+    <div className={cn(styles.menu, className)} onMouseEnter={on_mouse_enter}>
       {items.map((item, index) => (
         <div
           key={index}

packages/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat",
   "description": "The privacy AI coding without agents (CWC)",
-  "version": "1.511.0",
+  "version": "1.512.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",

packages/vscode/src/views/settings/frontend/Home/sections/GeneralSection.tsx

@@ -1,15 +1,23 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { Input } from '@ui/components/editor/common/Input'
+import { Dropdown } from '@ui/components/editor/common/Dropdown'
 import { Item } from '@ui/components/editor/settings/Item'
 import { Section } from '@ui/components/editor/settings/Section'
 import { TextButton } from '@ui/components/editor/settings/TextButton'
 
+type ClearChecksBehavior = 'ignore-open-editors' | 'uncheck-all'
+
+const CLEAR_CHECKS_OPTIONS: Dropdown.Option<ClearChecksBehavior>[] = [
+  { value: 'ignore-open-editors', label: 'Ignore Open Editors' },
+  { value: 'uncheck-all', label: 'Uncheck All' }
+]
+
 type Props = {
   context_size_warning_threshold: number
-  clear_checks_in_workspace_behavior: 'ignore-open-editors' | 'uncheck-all'
+  clear_checks_in_workspace_behavior: ClearChecksBehavior
   on_context_size_warning_threshold_change: (threshold: number) => void
   on_clear_checks_in_workspace_behavior_change: (
-    value: 'ignore-open-editors' | 'uncheck-all'
+    value: ClearChecksBehavior
   ) => void
   on_open_editor_settings: () => void
   on_stuck_change: (is_stuck: boolean) => void
@@ -77,17 +85,12 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
           title="Clear Checks in Workspace Behavior"
           description="Behavior of the 'Clear Checks' command in the Workspace view."
           slot={
-            <select
+            <Dropdown
+              options={CLEAR_CHECKS_OPTIONS}
               value={props.clear_checks_in_workspace_behavior}
-              onChange={(e) =>
-                props.on_clear_checks_in_workspace_behavior_change(
-                  e.target.value as 'ignore-open-editors' | 'uncheck-all'
-                )
-              }
-            >
-              <option value="ignore-open-editors">Ignore Open Editors</option>
-              <option value="uncheck-all">Uncheck All</option>
-            </select>
+              onChange={props.on_clear_checks_in_workspace_behavior_change}
+              max_width={320}
+            />
           }
         />
       </Section>