Improving all side of app

web/src/ControlDialogs.tsx

@@ -0,0 +1,60 @@
+import { h, Fragment } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import { wsClient } from './lib/ws';
+import { controlDialogs, dismissControlDialog, type ControlDialog } from './lib/controldialogs';
+
+// Renders dialogs pushed by server-side control-logic action.dialog nodes over
+// the WebSocket. Mounted once globally (App) since these are addressed to the
+// connected user, independent of which panel is open. info/error dialogs are
+// acknowledgements; input dialogs send a numeric response back to the server.
+export default function ControlDialogs() {
+  const [reqs, setReqs] = useState<ControlDialog[]>([]);
+  useEffect(() => controlDialogs.subscribe(setReqs), []);
+  if (reqs.length === 0) return null;
+  return <Fragment>{reqs.map(r => <ControlDialogModal key={r.id} req={r} />)}</Fragment>;
+}
+
+function ControlDialogModal({ req }: { req: ControlDialog; key?: string }) {
+  const isInput = req.kind === 'input';
+  const [val, setVal] = useState('');
+
+  function ok() {
+    if (isInput) {
+      const n = parseFloat(val);
+      wsClient.sendDialogResponse(req.id, Number.isFinite(n) ? n : null);
+    }
+    dismissControlDialog(req.id);
+  }
+  function cancel() {
+    if (isInput) wsClient.sendDialogResponse(req.id, null);
+    dismissControlDialog(req.id);
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === 'Enter') { e.preventDefault(); ok(); }
+    if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+  }
+
+  return (
+    <div class="logic-dialog-backdrop" onKeyDown={onKey}>
+      <div class={`logic-dialog logic-dialog-${req.kind}`} role="dialog">
+        <div class="logic-dialog-header">
+          {req.title || (req.kind === 'error' ? 'Error' : isInput ? 'Input required' : 'Info')}
+        </div>
+        {req.message && <div class="logic-dialog-message">{req.message}</div>}
+        {isInput && (
+          <div class="logic-dialog-field">
+            <input class="prop-input logic-dialog-input" type="number"
+              autoFocus value={val}
+              onInput={(e) => setVal((e.target as HTMLInputElement).value)}
+              onKeyDown={onKey} />
+          </div>
+        )}
+        <div class="logic-dialog-actions">
+          {isInput && <button class="panel-btn" onClick={cancel}>Cancel</button>}
+          <button class="panel-btn panel-btn-primary" onClick={ok}>OK</button>
+        </div>
+      </div>
+    </div>
+  );
+}