<Select> uses custom component on Windows

src-web/components/Settings/SettingsAppearance.tsx

@@ -14,7 +14,7 @@ import { Editor } from '../core/Editor';
 import type { IconProps } from '../core/Icon';
 import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
-import type { SelectOption } from '../core/Select';
+import type { SelectProps } from '../core/Select';
 import { Select } from '../core/Select';
 import { Separator } from '../core/Separator';
 import { HStack, VStack } from '../core/Stacks';
@@ -64,14 +64,14 @@ export function SettingsAppearance() {
     return null;
   }
 
-  const lightThemes: SelectOption<string>[] = themes
+  const lightThemes: SelectProps<string>['options'] = themes
     .filter((theme) => !isThemeDark(theme))
     .map((theme) => ({
       label: theme.name,
       value: theme.id,
     }));
 
-  const darkThemes: SelectOption<string>[] = themes
+  const darkThemes: SelectProps<string>['options'] = themes
     .filter((theme) => isThemeDark(theme))
     .map((theme) => ({
       label: theme.name,
@@ -131,8 +131,9 @@ export function SettingsAppearance() {
             name="lightTheme"
             label="Light Theme"
             size="sm"
+            className="flex-1"
             value={activeTheme.light.id}
-            options={[{ label: 'Light Mode Themes', options: lightThemes }]}
+            options={lightThemes}
             onChange={(themeLight) => {
               trackEvent('theme', 'update', { theme: themeLight, appearance: 'light' });
               updateSettings.mutateAsync({ ...settings, themeLight });
@@ -143,11 +144,12 @@ export function SettingsAppearance() {
           <Select
             hideLabel
             name="darkTheme"
+            className="flex-1"
             label="Dark Theme"
             leftSlot={<Icon icon="moon" />}
             size="sm"
             value={activeTheme.dark.id}
-            options={[{ label: 'Dark Mode Themes', options: darkThemes }]}
+            options={darkThemes}
             onChange={(themeDark) => {
               trackEvent('theme', 'update', { theme: themeDark, appearance: 'dark' });
               updateSettings.mutateAsync({ ...settings, themeDark });

src-web/components/Settings/SettingsGeneral.tsx

@@ -8,8 +8,8 @@ import { useUpdateWorkspace } from '../../hooks/useUpdateWorkspace';
 import { Checkbox } from '../core/Checkbox';
 import { Heading } from '../core/Heading';
 import { IconButton } from '../core/IconButton';
-import { Input } from '../core/Input';
 import { KeyValueRow, KeyValueRows } from '../core/KeyValueRow';
+import { PlainInput } from '../core/PlainInput';
 import { Select } from '../core/Select';
 import { Separator } from '../core/Separator';
 import { VStack } from '../core/Stacks';
@@ -59,7 +59,7 @@ export function SettingsGeneral() {
         </div>
       </Heading>
       <VStack className="mt-1 w-full" space={3}>
-        <Input
+        <PlainInput
           size="sm"
           name="requestTimeout"
           label="Request Timeout (ms)"
@@ -68,6 +68,7 @@ export function SettingsGeneral() {
           defaultValue={`${workspace.settingRequestTimeout}`}
           validate={(value) => parseInt(value) >= 0}
           onChange={(v) => updateWorkspace.mutate({ settingRequestTimeout: parseInt(v) || 0 })}
+          type="number"
         />
 
         <Checkbox

src-web/components/core/Button.tsx

@@ -120,7 +120,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       {isLoading ? (
         <Icon icon="refresh" size={size} className="animate-spin mr-1" />
       ) : leftSlot ? (
-        <div className="mr-1">{leftSlot}</div>
+        <div className="mr-2">{leftSlot}</div>
       ) : null}
       <div
         className={classNames(

src-web/components/core/Dropdown.tsx

@@ -59,6 +59,7 @@ export interface DropdownProps {
   items: DropdownItem[];
   onOpen?: () => void;
   onClose?: () => void;
+  fullWidth?: boolean;
   hotKeyAction?: HotkeyAction;
 }
 
@@ -73,7 +74,7 @@ export interface DropdownRef {
 }
 
 export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown(
-  { children, items, onOpen, onClose, hotKeyAction }: DropdownProps,
+  { children, items, onOpen, onClose, hotKeyAction, fullWidth }: DropdownProps,
   ref,
 ) {
   const [isOpen, _setIsOpen] = useState<boolean>(false);
@@ -153,6 +154,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
       <Menu
         ref={menuRef}
         showTriangle
+        fullWidth={fullWidth}
         defaultSelectedIndex={defaultSelectedIndex}
         items={items}
         triggerShape={triggerRect ?? null}
@@ -203,6 +205,7 @@ interface MenuProps {
   triggerShape: Pick<DOMRect, 'top' | 'bottom' | 'left' | 'right'> | null;
   onClose: () => void;
   showTriangle?: boolean;
+  fullWidth?: boolean;
   isOpen: boolean;
 }
 
@@ -211,6 +214,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     className,
     isOpen,
     items,
+    fullWidth,
     onClose,
     triggerShape,
     defaultSelectedIndex,
@@ -359,21 +363,23 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     const heightAbove = triggerShape.top;
     const heightBelow = docRect.height - triggerShape.bottom;
     const hSpaceRemaining = docRect.width - triggerShape.left;
-    const top = triggerShape?.bottom + 5;
+    const top = triggerShape.bottom + 5;
     const onRight = hSpaceRemaining < 200;
     const upsideDown = heightAbove > heightBelow && heightBelow < 200;
+    const triggerWidth = triggerShape.right - triggerShape.left;
     const containerStyles = {
       top: !upsideDown ? top : undefined,
       bottom: upsideDown ? docRect.height - top : undefined,
-      right: onRight ? docRect.width - triggerShape?.right : undefined,
+      right: onRight ? docRect.width - triggerShape.right : undefined,
-      left: !onRight ? triggerShape?.left : undefined,
+      left: !onRight ? triggerShape.left : undefined,
+      minWidth: fullWidth ? triggerWidth : undefined,
     };
     const size = { top: '-0.2rem', width: '0.4rem', height: '0.4rem' };
     const triangleStyles = onRight
       ? { right: width / 2, marginRight: '-0.2rem', ...size }
       : { left: width / 2, marginLeft: '-0.2rem', ...size };
     return { containerStyles, triangleStyles };
-  }, [triggerShape]);
+  }, [fullWidth, triggerShape]);
 
   const filteredItems = useMemo(
     () => items.filter((i) => getNodeText(i.label).toLowerCase().includes(filter.toLowerCase())),

src-web/components/core/RadioDropdown.tsx

@@ -50,5 +50,9 @@ export function RadioDropdown<T = string | null>({
     [items, extraItems, value, onChange],
   );
 
-  return <Dropdown items={dropdownItems}>{children}</Dropdown>;
+  return (
+    <Dropdown fullWidth items={dropdownItems}>
+      {children}
+    </Dropdown>
+  );
 }

src-web/components/core/Select.tsx

@@ -1,9 +1,14 @@
 import classNames from 'classnames';
 import type { CSSProperties, ReactNode } from 'react';
 import { useState } from 'react';
+import { useOsInfo } from '../../hooks/useOsInfo';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+import type { RadioDropdownItem } from './RadioDropdown';
+import { RadioDropdown } from './RadioDropdown';
 import { HStack } from './Stacks';
 
-interface Props<T extends string> {
+export interface SelectProps<T extends string> {
   name: string;
   label: string;
   labelPosition?: 'top' | 'left';
@@ -11,22 +16,12 @@ interface Props<T extends string> {
   hideLabel?: boolean;
   value: T;
   leftSlot?: ReactNode;
-  options: SelectOption<T>[] | SelectOptionGroup<T>[];
+  options: RadioDropdownItem<T>[];
   onChange: (value: T) => void;
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: ButtonProps['size'];
   className?: string;
 }
 
-export interface SelectOption<T extends string> {
-  label: string;
-  value: T;
-}
-
-export interface SelectOptionGroup<T extends string> {
-  label: string;
-  options: SelectOption<T>[];
-}
-
 export function Select<T extends string>({
   labelPosition = 'top',
   name,
@@ -39,7 +34,8 @@ export function Select<T extends string>({
   onChange,
   className,
   size = 'md',
-}: Props<T>) {
+}: SelectProps<T>) {
+  const osInfo = useOsInfo();
   const [focused, setFocused] = useState<boolean>(false);
   const id = `input-${name}`;
   return (
@@ -49,7 +45,7 @@ export function Select<T extends string>({
         'x-theme-input',
         'w-full',
         'pointer-events-auto', // Just in case we're placing in disabled parent
-        labelPosition === 'left' && 'flex items-center gap-2',
+        labelPosition === 'left' && 'grid grid-cols-[auto_1fr] items-center gap-2',
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
@@ -59,45 +55,54 @@ export function Select<T extends string>({
       >
         {label}
       </label>
-      <HStack
+      {osInfo?.osType === 'macos' ? (
-        space={2}
+        <HStack
-        className={classNames(
+          space={2}
-          'w-full rounded-md text-fg text-sm font-mono',
+          className={classNames(
-          'pl-2',
+            'w-full rounded-md text-fg text-sm font-mono',
-          'border',
+            'pl-2',
-          focused ? 'border-border-focus' : 'border-background-highlight',
+            'border',
-          size === 'xs' && 'h-xs',
+            focused ? 'border-border-focus' : 'border-background-highlight',
-          size === 'sm' && 'h-sm',
+            size === 'xs' && 'h-xs',
-          size === 'md' && 'h-md',
+            size === 'sm' && 'h-sm',
-          size === 'lg' && 'h-lg',
+            size === 'md' && 'h-md',
-        )}
-      >
-        {leftSlot && <div>{leftSlot}</div>}
-        <select
-          value={value}
-          style={selectBackgroundStyles}
-          onChange={(e) => onChange(e.target.value as T)}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          className={classNames('pr-7 w-full outline-none bg-transparent')}
-        >
-          {options.map((o) =>
-            'options' in o ? (
-              <optgroup key={o.label} label={o.label}>
-                {o.options.map(({ label, value }) => (
-                  <option key={label} value={value}>
-                    {label}
-                  </option>
-                ))}
-              </optgroup>
-            ) : (
-              <option key={o.label} value={o.value}>
-                {o.label}
-              </option>
-            ),
           )}
-        </select>
+        >
-      </HStack>
+          {leftSlot && <div>{leftSlot}</div>}
+          <select
+            value={value}
+            style={selectBackgroundStyles}
+            onChange={(e) => onChange(e.target.value as T)}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            className={classNames('pr-7 w-full outline-none bg-transparent')}
+          >
+            {options.map((o) => {
+              if (o.type === 'separator') return null;
+              return (
+                <option key={o.label} value={o.value}>
+                  {o.label}
+                </option>
+              );
+            })}
+          </select>
+        </HStack>
+      ) : (
+        // Use custom "select" component until Tauri can be configured to have select menus not always appear in
+        // light mode
+        <RadioDropdown value={value} onChange={onChange} items={options}>
+          <Button
+            className="w-full text-sm font-mono"
+            justify="start"
+            variant="border"
+            size={size}
+            leftSlot={leftSlot}
+            forDropdown
+          >
+            {options.find((o) => o.type !== 'separator' && o.value === value)?.label ?? '--'}
+          </Button>
+        </RadioDropdown>
+      )}
     </div>
   );
 }