@bakapiano/ccsm 0.22.2 → 0.22.4

package/public/js/components/PendingApprovalOverlay.js

@@ -1,128 +1,128 @@
-// Full-screen blocker shown on the remote browser while waiting for
-// the host to approve this device. Triggered by api.js setting the
-// pendingDevice signal in response to a 403 {pending:true}.
-//
-// While visible, polls /api/devices/me every 3s. When the server
-// flips status to 'approved', the next polled api() call clears
-// pendingDevice (api.js does that on any 2xx response), the overlay
-// unmounts, and the rest of the app keeps loading.
-//
-// Reuses .offline-overlay / .offline-card classes so styling matches
-// the existing HealthOverlay's blocking modal aesthetic.
-
-import { html } from '../html.js';
-import { useEffect } from 'preact/hooks';
-import { api, pendingDevice, loadConfig, refreshAll } from '../api.js';
-import { getDeviceCode } from '../backend.js';
-import { BrandMark } from '../icons.js';
-
-const POLL_MS = 3000;
-
-export function PendingApprovalOverlay() {
-  const p = pendingDevice.value;
-
-  useEffect(() => {
-    if (!p) return;
-    let stopped = false;
-    const tick = async () => {
-      if (stopped) return;
-      try {
-        // /api/devices/me is gate-exempt: returns 200 with the current
-        // device record regardless of approval state. We inspect the
-        // body ourselves to decide whether to dismiss the overlay.
-        const d = await api('GET', '/api/devices/me');
-        if (d && d.status === 'approved') {
-          pendingDevice.value = null;
-          // First load failed because we weren't approved yet — main.js'
-          // boot tried /api/config and got 401, no auto-retry. Now that
-          // we're through the gate, kick a one-shot load so config +
-          // sessions/folders/workspaces hydrate without waiting for the
-          // 5s tick (and config without that ever happening, since the
-          // periodic loop doesn't include loadConfig).
-          loadConfig().catch(() => {});
-          refreshAll().catch(() => {});
-        } else if (d) {
-          // Preserve any fields already set (firstSeen survives the
-          // overlay's repeated polls; staleToken from a previous tick
-          // gets cleared since we just got a 200).
-          pendingDevice.value = {
-            ...(pendingDevice.value || {}),
-            pending: d.status === 'pending',
-            rejected: d.status === 'rejected',
-            deviceId: d.id,
-            firstSeen: d.firstSeen,
-            staleToken: false,
-            at: Date.now(),
-          };
-        }
-      } catch (e) {
-        // /me 401s in exactly one situation: our device record was
-        // pruned (24h pending TTL) AND the host's current token no
-        // longer matches the one in our localStorage. We can't
-        // self-recover from this — a fresh share URL is needed. Surface
-        // it so the user gets honest feedback instead of an indefinite
-        // "Waiting for approval" loop.
-        const msg = String(e?.message || '');
-        if (/401/.test(msg) || /token/i.test(msg)) {
-          pendingDevice.value = {
-            ...(pendingDevice.value || {}),
-            staleToken: true,
-            pending: false,
-            rejected: false,
-            at: Date.now(),
-          };
-        }
-        /* anything else: network blip — try again next tick */
-      }
-    };
-    const id = setInterval(tick, POLL_MS);
-    tick();
-    return () => { stopped = true; clearInterval(id); };
-  }, [!!p]);
-
-  if (!p) return null;
-
-  const rejected = !!p.rejected;
-  const staleToken = !!p.staleToken;
-  const firstSeen = p.firstSeen ? new Date(p.firstSeen).toLocaleTimeString() : null;
-
-  return html`
-    <div class="offline-overlay" role="dialog" aria-modal="true" aria-live="polite">
-      <div class="offline-card">
-        <div class="offline-brand"><${BrandMark} /></div>
-        ${staleToken ? html`
-          <h1 class="offline-title">Link expired</h1>
-          <p class="offline-copy">
-            This share link no longer works — the host either rotated the
-            registration token or this device was pruned after sitting
-            unapproved for 24 hours.
-          </p>
-          <p class="offline-copy" style="margin-top:6px;font-size:12px;color:var(--ink-muted)">
-            Ask the operator to send a fresh share URL from the Remote page.
-          </p>
-        ` : rejected ? html`
-          <h1 class="offline-title">Access declined</h1>
-          <p class="offline-copy">
-            The host machine rejected this device. If you think this was a
-            mistake, ask the operator to re-approve from the Remote page.
-          </p>
-        ` : html`
-          <h1 class="offline-title">Waiting for host approval</h1>
-          <p class="offline-copy">
-            The host machine got your request${firstSeen ? ` at ${firstSeen}` : ''}.
-            Approve this device from the Remote page over there to continue.
-          </p>
-          ${getDeviceCode() ? html`
-            <div class="offline-code-block">
-              <div class="offline-code-label">Your code</div>
-              <div class="offline-code">${getDeviceCode()}</div>
-              <div class="offline-code-hint">Match this against what the host sees before they Approve.</div>
-            </div>
-          ` : null}
-          <p class="offline-copy" style="margin-top:6px;font-size:12px;color:var(--ink-muted)">
-            We'll auto-unlock the moment the host clicks Approve.
-          </p>
-        `}
-      </div>
-    </div>`;
-}
+// Full-screen blocker shown on the remote browser while waiting for
+// the host to approve this device. Triggered by api.js setting the
+// pendingDevice signal in response to a 403 {pending:true}.
+//
+// While visible, polls /api/devices/me every 3s. When the server
+// flips status to 'approved', the next polled api() call clears
+// pendingDevice (api.js does that on any 2xx response), the overlay
+// unmounts, and the rest of the app keeps loading.
+//
+// Reuses .offline-overlay / .offline-card classes so styling matches
+// the existing HealthOverlay's blocking modal aesthetic.
+
+import { html } from '../html.js';
+import { useEffect } from 'preact/hooks';
+import { api, pendingDevice, loadConfig, refreshAll } from '../api.js';
+import { getDeviceCode } from '../backend.js';
+import { BrandMark } from '../icons.js';
+
+const POLL_MS = 3000;
+
+export function PendingApprovalOverlay() {
+  const p = pendingDevice.value;
+
+  useEffect(() => {
+    if (!p) return;
+    let stopped = false;
+    const tick = async () => {
+      if (stopped) return;
+      try {
+        // /api/devices/me is gate-exempt: returns 200 with the current
+        // device record regardless of approval state. We inspect the
+        // body ourselves to decide whether to dismiss the overlay.
+        const d = await api('GET', '/api/devices/me');
+        if (d && d.status === 'approved') {
+          pendingDevice.value = null;
+          // First load failed because we weren't approved yet — main.js'
+          // boot tried /api/config and got 401, no auto-retry. Now that
+          // we're through the gate, kick a one-shot load so config +
+          // sessions/folders/workspaces hydrate without waiting for the
+          // 5s tick (and config without that ever happening, since the
+          // periodic loop doesn't include loadConfig).
+          loadConfig().catch(() => {});
+          refreshAll().catch(() => {});
+        } else if (d) {
+          // Preserve any fields already set (firstSeen survives the
+          // overlay's repeated polls; staleToken from a previous tick
+          // gets cleared since we just got a 200).
+          pendingDevice.value = {
+            ...(pendingDevice.value || {}),
+            pending: d.status === 'pending',
+            rejected: d.status === 'rejected',
+            deviceId: d.id,
+            firstSeen: d.firstSeen,
+            staleToken: false,
+            at: Date.now(),
+          };
+        }
+      } catch (e) {
+        // /me 401s in exactly one situation: our device record was
+        // pruned (24h pending TTL) AND the host's current token no
+        // longer matches the one in our localStorage. We can't
+        // self-recover from this — a fresh share URL is needed. Surface
+        // it so the user gets honest feedback instead of an indefinite
+        // "Waiting for approval" loop.
+        const msg = String(e?.message || '');
+        if (/401/.test(msg) || /token/i.test(msg)) {
+          pendingDevice.value = {
+            ...(pendingDevice.value || {}),
+            staleToken: true,
+            pending: false,
+            rejected: false,
+            at: Date.now(),
+          };
+        }
+        /* anything else: network blip — try again next tick */
+      }
+    };
+    const id = setInterval(tick, POLL_MS);
+    tick();
+    return () => { stopped = true; clearInterval(id); };
+  }, [!!p]);
+
+  if (!p) return null;
+
+  const rejected = !!p.rejected;
+  const staleToken = !!p.staleToken;
+  const firstSeen = p.firstSeen ? new Date(p.firstSeen).toLocaleTimeString() : null;
+
+  return html`
+    <div class="offline-overlay" role="dialog" aria-modal="true" aria-live="polite">
+      <div class="offline-card">
+        <div class="offline-brand"><${BrandMark} /></div>
+        ${staleToken ? html`
+          <h1 class="offline-title">Link expired</h1>
+          <p class="offline-copy">
+            This share link no longer works — the host either rotated the
+            registration token or this device was pruned after sitting
+            unapproved for 24 hours.
+          </p>
+          <p class="offline-copy" style="margin-top:6px;font-size:12px;color:var(--ink-muted)">
+            Ask the operator to send a fresh share URL from the Remote page.
+          </p>
+        ` : rejected ? html`
+          <h1 class="offline-title">Access declined</h1>
+          <p class="offline-copy">
+            The host machine rejected this device. If you think this was a
+            mistake, ask the operator to re-approve from the Remote page.
+          </p>
+        ` : html`
+          <h1 class="offline-title">Waiting for host approval</h1>
+          <p class="offline-copy">
+            The host machine got your request${firstSeen ? ` at ${firstSeen}` : ''}.
+            Approve this device from the Remote page over there to continue.
+          </p>
+          ${getDeviceCode() ? html`
+            <div class="offline-code-block">
+              <div class="offline-code-label">Your code</div>
+              <div class="offline-code">${getDeviceCode()}</div>
+              <div class="offline-code-hint">Match this against what the host sees before they Approve.</div>
+            </div>
+          ` : null}
+          <p class="offline-copy" style="margin-top:6px;font-size:12px;color:var(--ink-muted)">
+            We'll auto-unlock the moment the host clicks Approve.
+          </p>
+        `}
+      </div>
+    </div>`;
+}

package/public/js/components/Picker.js

@@ -1,179 +1,179 @@
-// Unified picker used inside a Popover. Renders:
-//   - optional search box (filters items by `label` + `meta`)
-//   - scrollable item list (single or multi select)
-//   - footer "+ New <thing>" that expands an inline form
-//
-// items: [{ id, label, meta?, disabled? }]
-// onSelect(id) — single select. Closes popover.
-// onToggle(id, on) — multi select. Doesn't close.
-// selectedIds: Set<string> — for multi select highlight
-// selectedId: string — for single select highlight
-// onCreate(values) — async; returns the newly-created id (selected immediately
-//                    in single mode; added to selection in multi mode)
-// createFields: [{ key, label, type?, placeholder?, required? }]
-
-import { html } from '../html.js';
-import { useState, useRef, useEffect } from 'preact/hooks';
-import { IconSearch, IconPlus, IconClose } from '../icons.js';
-
-export function PickerPanel({
-  title,
-  items,
-  selectedId,
-  selectedIds,
-  multi = false,
-  showSearch = true,
-  emptyHint = 'Nothing yet.',
-  createLabel = '+ New',
-  createFields = [],
-  onSelect,
-  onToggle,
-  onCreate,
-  onClose,
-  dnd,
-}) {
-  const [q, setQ] = useState('');
-  const [creating, setCreating] = useState(false);
-  const [draft, setDraft] = useState(() => initialDraft(createFields));
-  const [saving, setSaving] = useState(false);
-  const searchRef = useRef(null);
-
-  useEffect(() => {
-    if (showSearch) searchRef.current?.focus();
-  }, [showSearch]);
-
-  const filtered = items.filter((it) => {
-    if (!q.trim()) return true;
-    const hay = (it.label + ' ' + (it.meta || '')).toLowerCase();
-    return hay.includes(q.trim().toLowerCase());
-  });
-
-  const submitCreate = async (ev) => {
-    ev?.preventDefault?.();
-    for (const f of createFields) {
-      if (f.required && !String(draft[f.key] || '').trim()) return;
-    }
-    setSaving(true);
-    try {
-      const id = await onCreate?.(draft);
-      setDraft(initialDraft(createFields));
-      setCreating(false);
-      if (id != null) {
-        if (multi) onToggle?.(id, true);
-        else { onSelect?.(id); onClose?.(); }
-      }
-    } catch (e) {
-      // Caller is expected to toast; we just stay open with the form
-      console.warn(e);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return html`
-    <div class="picker">
-      ${title ? html`<div class="picker-title">${title}</div>` : null}
-
-      ${showSearch ? html`
-        <div class="picker-search">
-          <span class="picker-search-icon"><${IconSearch} /></span>
-          <input ref=${searchRef} class="picker-search-input"
-                 placeholder="Search…" value=${q}
-                 onInput=${(e) => setQ(e.target.value)} />
-          ${q ? html`<button class="picker-search-clear" onClick=${() => setQ('')}>
-            <${IconClose} />
-          </button>` : null}
-        </div>` : null}
-
-      <div class="picker-list">
-        ${filtered.length === 0 ? html`
-          <div class="picker-empty">${q ? 'No matches.' : emptyHint}</div>
-        ` : filtered.map((it) => {
-          const isSel = multi ? selectedIds?.has(it.id) : selectedId === it.id;
-          const enableDnd = dnd && !it.disabled && !it.undraggable && !q.trim();
-          const rowProps = enableDnd ? dnd.rowProps(it.id) : {};
-          const handleProps = enableDnd ? dnd.handleProps(it.id) : {};
-          return html`
-            <div key=${it.id} class=${`picker-item-wrap${enableDnd ? ' is-draggable' : ''}`} ...${rowProps} ...${handleProps}>
-              ${enableDnd ? html`<span class="picker-item-grip" aria-hidden="true">⋮⋮</span>` : null}
-              <button type="button"
-                      class=${`picker-item${isSel ? ' is-selected' : ''}`}
-                      disabled=${it.disabled}
-                      onClick=${() => {
-                        if (multi) onToggle?.(it.id, !isSel);
-                        else { onSelect?.(it.id); onClose?.(); }
-                      }}>
-                ${it.icon ? html`<span class="picker-item-icon">${it.icon}</span>` : null}
-                <span class="picker-item-label">${it.label}</span>
-                ${it.meta ? html`<span class="picker-item-meta">${it.meta}</span>` : null}
-                ${isSel ? html`<span class="picker-item-check">✓</span>` : null}
-              </button>
-            </div>`;
-        })}
-      </div>
-
-      ${onCreate ? html`
-        <div class="picker-create">
-          ${!creating ? html`
-            <button class="picker-create-toggle" type="button"
-                    onClick=${() => setCreating(true)}>
-              <${IconPlus} />
-              <span>${createLabel}</span>
-            </button>
-          ` : html`
-            <form class="picker-create-form" onSubmit=${submitCreate}>
-              ${createFields.map((f) => html`
-                <label class="picker-field" key=${f.key}>
-                  <span class="picker-field-label">${f.label}</span>
-                  ${f.type === 'select' ? html`
-                    <select class="input" value=${draft[f.key] || ''}
-                            onChange=${(e) => {
-                              const next = { ...draft, [f.key]: e.target.value };
-                              const side = f.onChange?.(e.target.value, next);
-                              setDraft(side ? { ...next, ...side } : next);
-                            }}>
-                      ${(f.options || []).map((opt) => html`
-                        <option value=${opt.value}>${opt.label}</option>`)}
-                    </select>
-                  ` : f.type === 'iconRadio' ? html`
-                    <div class="icon-radio">
-                      ${(f.options || []).map((opt) => html`
-                        <button type="button" key=${opt.value}
-                                class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
-                                onClick=${() => {
-                                  const next = { ...draft, [f.key]: opt.value };
-                                  const side = f.onChange?.(opt.value, next);
-                                  setDraft(side ? { ...next, ...side } : next);
-                                }}>
-                          ${opt.icon ? html`<span class="icon-radio-icon">${opt.icon}</span>` : null}
-                          <span>${opt.label}</span>
-                        </button>`)}
-                    </div>
-                  ` : html`
-                    <input type=${f.type || 'text'}
-                           class=${`input${f.mono ? ' mono' : ''}`}
-                           placeholder=${f.placeholder || ''}
-                           value=${draft[f.key] || ''}
-                           onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
-                           autoFocus=${f.autoFocus} />`}
-                  ${f.hint ? html`<span class="picker-field-hint">${f.hint}</span>` : null}
-                </label>`)}
-              <div class="picker-create-actions">
-                <button type="button" class="action small subtle"
-                        onClick=${() => { setCreating(false); setDraft(initialDraft(createFields)); }}>
-                  Cancel
-                </button>
-                <button type="submit" class="action small primary" disabled=${saving}>
-                  ${saving ? 'Creating…' : 'Create'}
-                </button>
-              </div>
-            </form>`}
-        </div>` : null}
-    </div>`;
-}
-
-function initialDraft(fields) {
-  const out = {};
-  for (const f of fields) out[f.key] = f.default ?? '';
-  return out;
-}
+// Unified picker used inside a Popover. Renders:
+//   - optional search box (filters items by `label` + `meta`)
+//   - scrollable item list (single or multi select)
+//   - footer "+ New <thing>" that expands an inline form
+//
+// items: [{ id, label, meta?, disabled? }]
+// onSelect(id) — single select. Closes popover.
+// onToggle(id, on) — multi select. Doesn't close.
+// selectedIds: Set<string> — for multi select highlight
+// selectedId: string — for single select highlight
+// onCreate(values) — async; returns the newly-created id (selected immediately
+//                    in single mode; added to selection in multi mode)
+// createFields: [{ key, label, type?, placeholder?, required? }]
+
+import { html } from '../html.js';
+import { useState, useRef, useEffect } from 'preact/hooks';
+import { IconSearch, IconPlus, IconClose } from '../icons.js';
+
+export function PickerPanel({
+  title,
+  items,
+  selectedId,
+  selectedIds,
+  multi = false,
+  showSearch = true,
+  emptyHint = 'Nothing yet.',
+  createLabel = '+ New',
+  createFields = [],
+  onSelect,
+  onToggle,
+  onCreate,
+  onClose,
+  dnd,
+}) {
+  const [q, setQ] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [draft, setDraft] = useState(() => initialDraft(createFields));
+  const [saving, setSaving] = useState(false);
+  const searchRef = useRef(null);
+
+  useEffect(() => {
+    if (showSearch) searchRef.current?.focus();
+  }, [showSearch]);
+
+  const filtered = items.filter((it) => {
+    if (!q.trim()) return true;
+    const hay = (it.label + ' ' + (it.meta || '')).toLowerCase();
+    return hay.includes(q.trim().toLowerCase());
+  });
+
+  const submitCreate = async (ev) => {
+    ev?.preventDefault?.();
+    for (const f of createFields) {
+      if (f.required && !String(draft[f.key] || '').trim()) return;
+    }
+    setSaving(true);
+    try {
+      const id = await onCreate?.(draft);
+      setDraft(initialDraft(createFields));
+      setCreating(false);
+      if (id != null) {
+        if (multi) onToggle?.(id, true);
+        else { onSelect?.(id); onClose?.(); }
+      }
+    } catch (e) {
+      // Caller is expected to toast; we just stay open with the form
+      console.warn(e);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return html`
+    <div class="picker">
+      ${title ? html`<div class="picker-title">${title}</div>` : null}
+
+      ${showSearch ? html`
+        <div class="picker-search">
+          <span class="picker-search-icon"><${IconSearch} /></span>
+          <input ref=${searchRef} class="picker-search-input"
+                 placeholder="Search…" value=${q}
+                 onInput=${(e) => setQ(e.target.value)} />
+          ${q ? html`<button class="picker-search-clear" onClick=${() => setQ('')}>
+            <${IconClose} />
+          </button>` : null}
+        </div>` : null}
+
+      <div class="picker-list">
+        ${filtered.length === 0 ? html`
+          <div class="picker-empty">${q ? 'No matches.' : emptyHint}</div>
+        ` : filtered.map((it) => {
+          const isSel = multi ? selectedIds?.has(it.id) : selectedId === it.id;
+          const enableDnd = dnd && !it.disabled && !it.undraggable && !q.trim();
+          const rowProps = enableDnd ? dnd.rowProps(it.id) : {};
+          const handleProps = enableDnd ? dnd.handleProps(it.id) : {};
+          return html`
+            <div key=${it.id} class=${`picker-item-wrap${enableDnd ? ' is-draggable' : ''}`} ...${rowProps} ...${handleProps}>
+              ${enableDnd ? html`<span class="picker-item-grip" aria-hidden="true">⋮⋮</span>` : null}
+              <button type="button"
+                      class=${`picker-item${isSel ? ' is-selected' : ''}`}
+                      disabled=${it.disabled}
+                      onClick=${() => {
+                        if (multi) onToggle?.(it.id, !isSel);
+                        else { onSelect?.(it.id); onClose?.(); }
+                      }}>
+                ${it.icon ? html`<span class="picker-item-icon">${it.icon}</span>` : null}
+                <span class="picker-item-label">${it.label}</span>
+                ${it.meta ? html`<span class="picker-item-meta">${it.meta}</span>` : null}
+                ${isSel ? html`<span class="picker-item-check">✓</span>` : null}
+              </button>
+            </div>`;
+        })}
+      </div>
+
+      ${onCreate ? html`
+        <div class="picker-create">
+          ${!creating ? html`
+            <button class="picker-create-toggle" type="button"
+                    onClick=${() => setCreating(true)}>
+              <${IconPlus} />
+              <span>${createLabel}</span>
+            </button>
+          ` : html`
+            <form class="picker-create-form" onSubmit=${submitCreate}>
+              ${createFields.map((f) => html`
+                <label class="picker-field" key=${f.key}>
+                  <span class="picker-field-label">${f.label}</span>
+                  ${f.type === 'select' ? html`
+                    <select class="input" value=${draft[f.key] || ''}
+                            onChange=${(e) => {
+                              const next = { ...draft, [f.key]: e.target.value };
+                              const side = f.onChange?.(e.target.value, next);
+                              setDraft(side ? { ...next, ...side } : next);
+                            }}>
+                      ${(f.options || []).map((opt) => html`
+                        <option value=${opt.value}>${opt.label}</option>`)}
+                    </select>
+                  ` : f.type === 'iconRadio' ? html`
+                    <div class="icon-radio">
+                      ${(f.options || []).map((opt) => html`
+                        <button type="button" key=${opt.value}
+                                class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
+                                onClick=${() => {
+                                  const next = { ...draft, [f.key]: opt.value };
+                                  const side = f.onChange?.(opt.value, next);
+                                  setDraft(side ? { ...next, ...side } : next);
+                                }}>
+                          ${opt.icon ? html`<span class="icon-radio-icon">${opt.icon}</span>` : null}
+                          <span>${opt.label}</span>
+                        </button>`)}
+                    </div>
+                  ` : html`
+                    <input type=${f.type || 'text'}
+                           class=${`input${f.mono ? ' mono' : ''}`}
+                           placeholder=${f.placeholder || ''}
+                           value=${draft[f.key] || ''}
+                           onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
+                           autoFocus=${f.autoFocus} />`}
+                  ${f.hint ? html`<span class="picker-field-hint">${f.hint}</span>` : null}
+                </label>`)}
+              <div class="picker-create-actions">
+                <button type="button" class="action small subtle"
+                        onClick=${() => { setCreating(false); setDraft(initialDraft(createFields)); }}>
+                  Cancel
+                </button>
+                <button type="submit" class="action small primary" disabled=${saving}>
+                  ${saving ? 'Creating…' : 'Create'}
+                </button>
+              </div>
+            </form>`}
+        </div>` : null}
+    </div>`;
+}
+
+function initialDraft(fields) {
+  const out = {};
+  for (const f of fields) out[f.key] = f.default ?? '';
+  return out;
+}