Improving all side of app

web/src/SignalPicker.tsx

@@ -0,0 +1,113 @@
+import { h } from 'preact';
+import { useState, useMemo } from 'preact/hooks';
+
+// A single fuzzy-finder input for picking a signal as one "ds:name" reference,
+// replacing the old stacked "Data source" + "Signal" select pair. The caller
+// supplies a flattened option list (every ds:name it knows about) and, via
+// onOpen, a hook to lazily load signals for all data sources when the dropdown
+// is first opened. When allowFreeform is set, typing a value that matches no
+// option (e.g. a new srv:/local: variable) can still be committed.
+
+export interface SignalOption { ds: string; name: string; }
+
+export default function SignalPicker({
+  value,
+  options,
+  onChange,
+  onOpen,
+  placeholder = 'Search signals…',
+  allowFreeform = false,
+}: {
+  value: string; // current "ds:name" (or "")
+  options: SignalOption[];
+  onChange: (ref: string) => void;
+  onOpen?: () => void;
+  placeholder?: string;
+  allowFreeform?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState('');
+
+  const filtered = useMemo(() => {
+    const tokens = filter.toLowerCase().split(/\s+/).filter(Boolean);
+    const scored = options
+      .map(o => ({ o, label: `${o.ds}:${o.name}` }))
+      .filter(({ label }) => {
+        const l = label.toLowerCase();
+        return tokens.every(t => l.includes(t));
+      });
+    // Prefer matches where the signal name (not the ds prefix) leads.
+    const f = filter.toLowerCase();
+    scored.sort((a, b) => {
+      const an = a.o.name.toLowerCase().startsWith(f) ? 0 : 1;
+      const bn = b.o.name.toLowerCase().startsWith(f) ? 0 : 1;
+      if (an !== bn) return an - bn;
+      return a.label.localeCompare(b.label);
+    });
+    return scored.slice(0, 200);
+  }, [options, filter]);
+
+  function openDropdown() {
+    setOpen(true);
+    setFilter('');
+    onOpen?.();
+  }
+
+  function commit(ref: string) {
+    onChange(ref);
+    setOpen(false);
+    setFilter('');
+  }
+
+  // A freeform entry is offered when the typed text looks like a usable
+  // reference and is not already an exact option.
+  const freeform = allowFreeform && filter.trim() !== ''
+    && !filtered.some(({ label }) => label === filter.trim());
+
+  return (
+    <div class="search-select">
+      <div class="search-select-trigger" onClick={() => (open ? setOpen(false) : openDropdown())}>
+        {value || <span class="search-select-placeholder">{placeholder}</span>}
+        <span class="search-select-arrow">{open ? '▴' : '▾'}</span>
+      </div>
+      {open && (
+        <div class="search-select-dropdown">
+          <input
+            class="prop-input"
+            autoFocus
+            placeholder="Type to search… (ds:name)"
+            value={filter}
+            onInput={(e) => setFilter((e.target as HTMLInputElement).value)}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e: KeyboardEvent) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                if (filtered.length > 0) commit(`${filtered[0].o.ds}:${filtered[0].o.name}`);
+                else if (freeform) commit(filter.trim());
+              }
+              if (e.key === 'Escape') { e.preventDefault(); setOpen(false); }
+            }}
+          />
+          <div class="search-select-list">
+            {freeform && (
+              <div class="search-select-item" onClick={() => commit(filter.trim())}>
+                Use “{filter.trim()}”
+              </div>
+            )}
+            {filtered.length === 0 && !freeform && <div class="search-select-item hint">No matches</div>}
+            {filtered.map(({ o, label }) => (
+              <div
+                key={label}
+                class={`search-select-item${label === value ? ' search-select-item-selected' : ''}`}
+                onClick={() => commit(`${o.ds}:${o.name}`)}
+              >
+                {label}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {open && <div class="search-select-backdrop" onClick={() => setOpen(false)} />}
+    </div>
+  );
+}