Tweak settings for release

src-web/components/core/Dropdown.tsx

@@ -373,7 +373,6 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
       bottom: upsideDown ? docRect.height - top : undefined,
       right: onRight ? docRect.width - triggerShape?.right : undefined,
       left: !onRight ? triggerShape?.left : undefined,
-      width: containerWidth ?? 'auto',
     };
     const size = { top: '-0.2rem', width: '0.4rem', height: '0.4rem' };
     const triangleStyles = onRight
@@ -448,7 +447,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                     <HStack
                       space={2}
                       alignItems="center"
-                      className="pb-0.5 px-1.5 mb-2 text-sm border border-background-highlight-secondary mx-2 rounded font-mono h-2xs"
+                      className="pb-0.5 px-1.5 mb-2 text-sm border border-background-highlight-secondary mx-2 rounded font-mono h-xs"
                     >
                       <Icon icon="search" size="xs" className="text-fg-subtle" />
                       <div className="text-fg">{filter}</div>

src-web/components/core/Editor/Editor.tsx

@@ -17,6 +17,7 @@ import {
 } from 'react';
 import { useActiveEnvironment } from '../../../hooks/useActiveEnvironment';
 import { useActiveWorkspace } from '../../../hooks/useActiveWorkspace';
+import { useSettings } from '../../../hooks/useSettings';
 import { IconButton } from '../IconButton';
 import { HStack } from '../Stacks';
 import './Editor.css';
@@ -85,11 +86,16 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
   }: EditorProps,
   ref,
 ) {
+  const s = useSettings();
   const e = useActiveEnvironment();
   const w = useActiveWorkspace();
   const environment = autocompleteVariables ? e : null;
   const workspace = autocompleteVariables ? w : null;
 
+  if (s && wrapLines === undefined) {
+    wrapLines = s.editorSoftWrap;
+  }
+
   const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
   useImperativeHandle(ref, () => cm.current?.view);
 

src-web/components/core/Icon.tsx

@@ -42,6 +42,7 @@ const icons = {
   magicWand: lucide.Wand2Icon,
   minus: lucide.MinusIcon,
   moreVertical: lucide.MoreVerticalIcon,
+  moon: lucide.MoonIcon,
   paste: lucide.ClipboardPasteIcon,
   pencil: lucide.PencilIcon,
   pin: lucide.PinIcon,
@@ -55,6 +56,7 @@ const icons = {
   settings2: lucide.Settings2Icon,
   settings: lucide.SettingsIcon,
   sparkles: lucide.SparklesIcon,
+  sun: lucide.SunIcon,
   trash: lucide.TrashIcon,
   update: lucide.RefreshCcwIcon,
   upload: lucide.UploadIcon,

src-web/components/core/Select.tsx

@@ -1,5 +1,7 @@
 import classNames from 'classnames';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useState } from 'react';
+import { HStack } from './Stacks';
 
 interface Props<T extends string> {
   name: string;
@@ -8,6 +10,7 @@ interface Props<T extends string> {
   labelClassName?: string;
   hideLabel?: boolean;
   value: T;
+  leftSlot?: ReactNode;
   options: SelectOption<T>[];
   onChange: (value: T) => void;
   size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -27,10 +30,12 @@ export function Select<T extends string>({
   label,
   value,
   options,
+  leftSlot,
   onChange,
   className,
   size = 'md',
 }: Props<T>) {
+  const [focused, setFocused] = useState<boolean>(false);
   const id = `input-${name}`;
   return (
     <div
@@ -49,25 +54,36 @@ export function Select<T extends string>({
       >
         {label}
       </label>
-      <select
-        value={value}
-        style={selectBackgroundStyles}
-        onChange={(e) => onChange(e.target.value as T)}
+      <HStack
+        space={2}
+        alignItems="center"
         className={classNames(
-          'font-mono text-sm border w-full outline-none bg-transparent pl-2 pr-7',
-          'bg-background-highlight-secondary border-background-highlight focus:border-border-focus',
+          'w-full rounded-md text-fg text-sm font-mono',
+          'pl-2',
+          'bg-background-highlight-secondary border',
+          focused ? 'border-border-focus' : 'border-background-highlight',
           size === 'xs' && 'h-xs',
           size === 'sm' && 'h-sm',
           size === 'md' && 'h-md',
           size === 'lg' && 'h-lg',
         )}
       >
-        {options.map(({ label, value }) => (
-          <option key={label} value={value}>
-            {label}
-          </option>
-        ))}
-      </select>
+        {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(({ label, value }) => (
+            <option key={label} value={value}>
+              {label}
+            </option>
+          ))}
+        </select>
+      </HStack>
     </div>
   );
 }