<Select> uses custom component on Windows

2026-01-17 06:26:58 +01:00 · 2024-06-02 16:57:23 -07:00
parent 36728d1d1f
commit b47ec01f9c
6 changed files with 85 additions and 67 deletions
--- a/src-web/components/Settings/SettingsAppearance.tsx
+++ b/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 });
--- a/src-web/components/Settings/SettingsGeneral.tsx
+++ b/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
--- a/src-web/components/core/Button.tsx
+++ b/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(
--- a/src-web/components/core/Dropdown.tsx
+++ b/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,
-      left: !onRight ? triggerShape?.left : undefined,
+      right: onRight ? docRect.width - triggerShape.right : 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())),
--- a/src-web/components/core/RadioDropdown.tsx
+++ b/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>
+  );
 }
--- a/src-web/components/core/Select.tsx
+++ b/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
-        space={2}
-        className={classNames(
-          'w-full rounded-md text-fg text-sm font-mono',
-          'pl-2',
-          'border',
-          focused ? 'border-border-focus' : 'border-background-highlight',
-          size === 'xs' && 'h-xs',
-          size === 'sm' && 'h-sm',
-          size === 'md' && 'h-md',
-          size === 'lg' && 'h-lg',
-        )}
-      >
-        {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>
-            ),
+      {osInfo?.osType === 'macos' ? (
+        <HStack
+          space={2}
+          className={classNames(
+            'w-full rounded-md text-fg text-sm font-mono',
+            'pl-2',
+            'border',
+            focused ? 'border-border-focus' : 'border-background-highlight',
+            size === 'xs' && 'h-xs',
+            size === 'sm' && 'h-sm',
+            size === 'md' && 'h-md',
          )}
-        </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>
  );
 }