serial WIP

Author: kipavy

src/components/connections/EphemeralSerialConfigOverlay.tsx

@@ -3,6 +3,7 @@ import { Icon } from "@iconify/react";
 import type { SerialConnectParams } from "@/types";
 import { serialListPorts } from "@/services/serial";
 import { Pills } from "@/components/shared/Pills";
+import { FormSelect } from "@/components/shared/FormSelect";
 
 const BAUD_RATE_PRESETS = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600];
 
@@ -62,11 +63,11 @@ export function EphemeralSerialConfigOverlay({
           </div>
           <div>
             <label className="text-xs text-[var(--t-text-dim)] mb-1 block">Baud Rate</label>
-            <select className={sel} value={baud} onChange={(e) => setBaud(Number(e.target.value))}>
-              {BAUD_RATE_PRESETS.map((r) => (
-                <option key={r} value={r}>{r.toLocaleString()}</option>
-              ))}
-            </select>
+            <FormSelect
+              value={String(baud)}
+              options={BAUD_RATE_PRESETS.map((r) => ({ value: String(r), label: r.toLocaleString() }))}
+              onChange={(v) => setBaud(Number(v))}
+            />
           </div>
           <button
             type="button"

src/components/connections/SerialConnectionForm.tsx

@@ -19,6 +19,7 @@ import {
   formLabelStyle,
 } from "@/components/shared/Panel";
 import { Pills } from "@/components/shared/Pills";
+import { FormSelect } from "@/components/shared/FormSelect";
 import EncodingSelector from "./EncodingSelector";
 import type { ConnectionFormHandle } from "./ConnectionForm";
 
@@ -292,16 +293,12 @@ const SerialConnectionForm = forwardRef<ConnectionFormHandle, Props>(function Se
               <label className={formLabelClass} style={formLabelStyle}>Baud Rate</label>
               {!useCustomBaud ? (
                 <div className="flex gap-2">
-                  <select
-                    className={`${formInputClass} flex-1`}
-                    style={{ ...formInputStyle, cursor: "pointer" }}
-                    value={baud}
-                    onChange={(e) => { markDirty(); setBaud(Number(e.target.value)); }}
-                  >
-                    {BAUD_RATES.map((r) => (
-                      <option key={r} value={r}>{r.toLocaleString()}</option>
-                    ))}
-                  </select>
+                  <FormSelect
+                    className="flex-1"
+                    value={String(baud)}
+                    options={BAUD_RATES.map((r) => ({ value: String(r), label: r.toLocaleString() }))}
+                    onChange={(v) => { markDirty(); setBaud(Number(v)); }}
+                  />
                   <button
                     type="button"
                     className="text-xs text-[var(--t-text-dim)] hover:text-[var(--t-text-primary)] px-2 transition-colors whitespace-nowrap"

src/components/shared/FormSelect.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import { DropdownMenuItem } from "./DropdownMenuItem";
+import { formInputStyle } from "./Panel";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface Props {
+  value: string;
+  options: Option[];
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function FormSelect({ value, options, onChange, className = "" }: Props) {
+  const [open, setOpen] = useState(false);
+  const [menuRect, setMenuRect] = useState({ top: 0, left: 0, width: 0 });
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? value;
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (!triggerRef.current?.contains(target) && !menuRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const handleToggle = () => {
+    if (!open && triggerRef.current) {
+      const r = triggerRef.current.getBoundingClientRect();
+      setMenuRect({ top: r.bottom + 4, left: r.left, width: r.width });
+    }
+    setOpen((o) => !o);
+  };
+
+  return (
+    <div className={className}>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={handleToggle}
+        className="w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors"
+        style={formInputStyle}
+        onFocus={(e) => (e.currentTarget.style.borderColor = "var(--t-accent)")}
+        onBlur={(e) => (e.currentTarget.style.borderColor = "var(--t-border)")}
+      >
+        <span className="text-[var(--t-text-primary)]">{selectedLabel}</span>
+        <Icon
+          icon="lucide:chevron-down"
+          width={14}
+          className="text-[var(--t-text-dim)] shrink-0"
+          style={{ transition: "transform 150ms", transform: open ? "rotate(180deg)" : "rotate(0deg)" }}
+        />
+      </button>
+
+      {open && createPortal(
+        <div
+          ref={menuRef}
+          className="fixed p-1.5 rounded-xl z-[9999] flex flex-col bg-[var(--t-bg-card)] border border-[var(--t-bg-card-hover)] max-h-[240px] overflow-y-auto"
+          style={{ top: menuRect.top, left: menuRect.left, width: menuRect.width, boxShadow: "0 8px 24px rgba(0,0,0,0.4)" }}
+        >
+          {options.map((opt) => (
+            <DropdownMenuItem
+              key={opt.value}
+              label={opt.label}
+              iconSize={15}
+              checked={value === opt.value}
+              onClick={() => { onChange(opt.value); setOpen(false); }}
+            />
+          ))}
+        </div>,
+        document.body,
+      )}
+    </div>
+  );
+}