@acms-subir/core 0.3.51 → 0.3.53

package/src/components/display/ScreensManager.tsx

@@ -0,0 +1,481 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  DEFAULT_HOURS, DISPLAY_VIEWS, defaultDisplaySettings, displayQuery, readDisplaySettings,
+  type DisplaySettings, type DisplayShow, type DisplayView,
+} from '../../lib/display/settings';
+import '../../styles/screens-admin.css';
+
+// Admin → Calendar → Screens. Saved screens on the left; the editor puts the
+// settings beside a live 16:9 preview (the board the TV will show, from
+// settings not saved yet). The same editor builds quick links, and any quick
+// link can be saved as a screen. Data: /api/calendar/screens.
+
+interface ScreenRow {
+  id: string; name: string; params: string; locale: string; privateDetails: boolean;
+  key: string; url: string; lastSeenAt: number | null; createdAt: number; updatedAt: number;
+}
+interface State {
+  now: number;
+  origin: string;
+  /** may see booker names (Manage bookings): private details need it */
+  canPrivate: boolean;
+  weekStart: 0 | 1;
+  timezone: string;
+  languages: { code: string; label: string; main: boolean }[];
+  screens: ScreenRow[];
+  calendars: { slug: string; name: string; color: string; visibility: string; kind: string }[];
+  rooms: { slug: string; name: string; kind: string; color: string; public: boolean }[];
+  tags: string[];
+}
+interface Draft { name: string; settings: DisplaySettings; locale: string; privateDetails: boolean }
+type Mode = { kind: 'screen'; id: string } | { kind: 'new' } | { kind: 'quick' };
+
+const ENDPOINT = '/api/calendar/screens';
+const PRIVATE_WARNING = 'Shows their titles and the name on each booking. Never emails, phone numbers or notes. Anyone with this screen’s link can see them.';
+const VIEW_LABEL: Record<DisplayView, string> = { week: 'Week', day: 'Day', rooms: 'Rooms', month: 'Month', list: 'List', next: 'Now & next' };
+const SHOW_LABEL: Record<DisplayShow, string> = { time: 'Times', room: 'Rooms', host: 'Hosts', clock: 'Clock', legend: 'Colour key', qr: 'QR code for phones' };
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const STALE_AFTER = 12 * 60_000; // a TV fetches every 5 minutes
+
+async function api<T>(body?: Record<string, unknown>): Promise<T> {
+  const res = await fetch(ENDPOINT, {
+    method: body ? 'POST' : 'GET', credentials: 'same-origin',
+    headers: body ? { 'content-type': 'application/json', accept: 'application/json' } : { accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.issues?.[0]?.message || data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  return data as T;
+}
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+const hourLabel = (min: number) => {
+  if (min === 1440) return 'Midnight';
+  return new Date(Date.UTC(2000, 0, 3, 0, min)).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', timeZone: 'UTC' });
+};
+const HOUR_STEPS = Array.from({ length: 49 }, (_, i) => i * 30);
+
+function ago(ms: number, now: number) {
+  const s = Math.max(0, Math.round((now - ms) / 1000));
+  if (s < 90) return 'just now';
+  if (s < 3600) return `${Math.round(s / 60)} min ago`;
+  if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+  return new Date(ms).toLocaleDateString([], { month: 'short', day: 'numeric' });
+}
+
+function summary(s: DisplaySettings, st: State): string {
+  const bits: string[] = [VIEW_LABEL[s.view]];
+  if (['week', 'day', 'rooms'].includes(s.view)) {
+    bits.push(s.hours === 'auto' ? 'hours fit the events' : s.hours.from === 0 && s.hours.to === 1440 ? 'all hours' : `${hourLabel(s.hours.from)}–${hourLabel(s.hours.to)}`);
+  }
+  const names = (slugs: string[], list: { slug: string; name: string }[]) => slugs.map((x) => list.find((i) => i.slug === x)?.name ?? x).join(', ');
+  if (s.filter.cal.length) bits.push(names(s.filter.cal, st.calendars));
+  if (s.filter.room.length) bits.push(names(s.filter.room, st.rooms));
+  if (s.filter.tag.length) bits.push(`tagged ${s.filter.tag.join(', ')}`);
+  if (s.filter.notag.length) bits.push(`not ${s.filter.notag.join(', ')}`);
+  return bits.join(' · ');
+}
+
+const draftOf = (row: ScreenRow): Draft => ({ name: row.name, settings: readDisplaySettings(new URLSearchParams(row.params)), locale: row.locale, privateDetails: row.privateDetails });
+const sameDraft = (a: Draft, b: Draft) => a.name === b.name && a.locale === b.locale && a.privateDetails === b.privateDetails && displayQuery(a.settings) === displayQuery(b.settings);
+const blankDraft = (): Draft => ({ name: '', settings: defaultDisplaySettings(), locale: '', privateDetails: false });
+
+export default function ScreensManager() {
+  const [state, setState] = useState<State | null>(null);
+  const [loadError, setLoadError] = useState('');
+  const [mode, setMode] = useState<Mode | null>(null);
+  const [draft, setDraft] = useState<Draft>(blankDraft);
+  const [busy, setBusy] = useState('');
+  const [msg, setMsg] = useState<{ ok?: string; err?: string }>({});
+
+  useEffect(() => { api<State>().then(setState, (e) => setLoadError(errText(e))); }, []);
+  // the check-ins move while the page is open
+  useEffect(() => {
+    const t = setInterval(() => api<State>().then((s) => setState((old) => (old ? { ...old, now: s.now, screens: old.screens.map((r) => ({ ...r, lastSeenAt: s.screens.find((x) => x.id === r.id)?.lastSeenAt ?? r.lastSeenAt })) } : s)), () => {}), 60_000);
+    return () => clearInterval(t);
+  }, []);
+
+  const current = state && mode?.kind === 'screen' ? state.screens.find((s) => s.id === mode.id) ?? null : null;
+  const dirty = mode?.kind === 'new' || (current ? !sameDraft(draft, draftOf(current)) : false);
+
+  const open = (m: Mode, d?: Draft) => {
+    if (dirty && !confirm('Leave this screen without saving your changes?')) return;
+    setMsg({});
+    setMode(m);
+    setDraft(d ?? (m.kind === 'screen' && state ? draftOf(state.screens.find((s) => s.id === m.id)!) : blankDraft()));
+  };
+
+  const run = async (body: Record<string, unknown>, label: string, after?: (r: { screen?: ScreenRow; state: State }) => void) => {
+    setBusy(label); setMsg({});
+    try {
+      const r = await api<{ screen?: ScreenRow; state: State }>(body);
+      setState(r.state);
+      after?.(r);
+    } catch (e) { setMsg({ err: errText(e) }); } finally { setBusy(''); }
+  };
+
+  const save = () => {
+    const body = { name: draft.name, params: displayQuery(draft.settings), locale: draft.locale, privateDetails: draft.privateDetails };
+    if (mode?.kind === 'screen') run({ action: 'save', id: mode.id, ...body }, 'save', (r) => { if (r.screen) { setDraft(draftOf({ ...r.screen, url: '' } as ScreenRow)); setMsg({ ok: 'Saved. The TV shows it within 5 minutes.' }); } });
+    else run({ action: 'create', ...body }, 'save', (r) => { if (r.screen) { setMode({ kind: 'screen', id: r.screen.id }); setDraft(draftOf({ ...r.screen, url: '' } as ScreenRow)); setMsg({ ok: 'Screen saved. Copy its link into AbleSign.' }); } });
+  };
+  const rotate = () => {
+    if (mode?.kind !== 'screen' || !confirm('Make a new link for this screen? The old one stops working at once, so update the TV in AbleSign with the new link.')) return;
+    run({ action: 'rotate', id: mode.id }, 'rotate', () => setMsg({ ok: 'New link made. The old one no longer works.' }));
+  };
+  const remove = () => {
+    if (mode?.kind !== 'screen' || !confirm(`Delete “${current?.name}”? Its link stops working at once.`)) return;
+    run({ action: 'delete', id: mode.id }, 'delete', () => { setMode(null); setMsg({ ok: 'Screen deleted.' }); });
+  };
+
+  if (loadError) return <p className="flash error">{loadError}</p>;
+  if (!state) return <div className="card card-pad sc-skel" aria-busy="true">Loading screens…</div>;
+
+  return (
+    <div className="sc">
+      <section className="card sc-list" aria-label="Saved screens">
+        <div className="sc-list-head">
+          <b>Screens</b>
+          <div className="sc-list-actions">
+            <button type="button" className="btn sm primary" onClick={() => open({ kind: 'new' })}>New screen</button>
+            <button type="button" className="btn sm" onClick={() => open({ kind: 'quick' })}>Quick link</button>
+          </div>
+        </div>
+        {state.screens.length === 0 && (
+          <div className="empty-state sc-empty">
+            <b>No screens yet</b>
+            <p>A screen is a calendar for a TV: pick what it shows, then put its link in the TV’s playlist.</p>
+          </div>
+        )}
+        <ul className="sc-rows">
+          {state.screens.map((row) => {
+            const s = readDisplaySettings(new URLSearchParams(row.params));
+            const seen = row.lastSeenAt;
+            const stale = seen !== null && state.now - seen > STALE_AFTER;
+            const active = mode?.kind === 'screen' && mode.id === row.id;
+            return (
+              <li key={row.id}>
+                <button type="button" className={`sc-row${active ? ' on' : ''}`} aria-current={active || undefined} onClick={() => open({ kind: 'screen', id: row.id })}>
+                  <span className="sc-row-name">{row.name}{row.privateDetails && <span className="pill sc-private">Private details</span>}</span>
+                  <span className="sc-row-sum">{summary(s, state)}</span>
+                  <span className={`sc-seen${seen === null ? '' : stale ? ' stale' : ' ok'}`}>
+                    {seen === null ? 'Not opened on a TV yet' : stale ? `Last check-in ${ago(seen, state.now)}. Is the TV on?` : `Checked in ${ago(seen, state.now)}`}
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+
+      {mode ? (
+        <Editor
+          key={mode.kind === 'screen' ? mode.id : mode.kind}
+          state={state} mode={mode} current={current} draft={draft} setDraft={setDraft} dirty={dirty} busy={busy} msg={msg}
+          onSave={save} onRotate={rotate} onDelete={remove}
+          onSaveQuick={() => open({ kind: 'new' }, { ...draft, name: '' })}
+          onCopied={(what) => setMsg({ ok: `${what} copied.` })}
+        />
+      ) : (
+        <section className="card card-pad sc-intro">
+          <h2>TV screens</h2>
+          <p>Each screen is a full-screen calendar for a TV: week, day, rooms, month, list or now &amp; next, with your own hours. Everything about it lives in its link, so the TV needs no mouse or keyboard, and a change you make here reaches the TV within 5 minutes.</p>
+          <ul className="sc-steps">
+            <li><b>Saved screens</b> have a long secret link. They can also show private calendars and room bookings.</li>
+            <li><b>Quick links</b> spell out their settings in the address and only show public events.</li>
+          </ul>
+          <p className="hint">On a Fire TV Stick with AbleSign: Websites → Add website, paste the link, add it to the screen’s playlist with a long duration, and put a short image before it so the page loads in the background. The stick needs Fire OS 6 or later (not Vega OS) and AbleSign 2.2.2 or later.</p>
+        </section>
+      )}
+    </div>
+  );
+}
+
+interface EditorProps {
+  state: State;
+  mode: Mode;
+  current: ScreenRow | null;
+  draft: Draft;
+  setDraft: (d: Draft) => void;
+  dirty: boolean;
+  busy: string;
+  msg: { ok?: string; err?: string };
+  onSave: () => void;
+  onRotate: () => void;
+  onDelete: () => void;
+  onSaveQuick: () => void;
+  onCopied: (what: string) => void;
+}
+
+function Editor({ state, mode, current, draft, setDraft, dirty, busy, msg, onSave, onRotate, onDelete, onSaveQuick, onCopied }: EditorProps) {
+  const s = draft.settings;
+  const quick = mode.kind === 'quick';
+  const priv = !quick && draft.privateDetails;
+  const set = (patch: Partial<DisplaySettings>) => setDraft({ ...draft, settings: { ...s, ...patch } });
+  const setFilter = (k: keyof DisplaySettings['filter'], values: string[]) => set({ filter: { ...s.filter, [k]: values } });
+  const toggle = (list: string[], v: string) => (list.includes(v) ? list.filter((x) => x !== v) : [...list, v]);
+  const grid = s.view === 'week' || s.view === 'day' || s.view === 'rooms';
+  const main = state.languages.find((l) => l.main)?.code ?? 'en';
+  const lang = draft.locale || main;
+
+  const query = displayQuery(s);
+  const quickUrl = `${state.origin}${lang !== main ? `/${lang}` : ''}/display/calendar${query ? `?${query}` : ''}`;
+  const previewSrc = `/admin/calendar/screens/preview?${[query, lang !== main ? `lang=${lang}` : '', priv ? 'private=1' : ''].filter(Boolean).join('&')}`;
+
+  const [paste, setPaste] = useState('');
+  const fromLink = () => {
+    try {
+      const u = new URL(paste.trim(), state.origin);
+      const es = state.languages.find((l) => !l.main && u.pathname.startsWith(`/${l.code}/`));
+      setDraft({ ...draft, settings: readDisplaySettings(u.searchParams), locale: es?.code ?? '' });
+      setPaste('');
+    } catch { /* not a link: leave it for the person to fix */ }
+  };
+
+  const copy = async (text: string, what: string) => {
+    try { await navigator.clipboard.writeText(text); onCopied(what); } catch { prompt('Copy this link:', text); }
+  };
+
+  const daysValue = 'count' in s.days ? String(s.days.count) : 'custom';
+  const weekdays = 'weekdays' in s.days ? s.days.weekdays : [];
+  const hoursMode = s.hours === 'auto' ? 'auto' : s.hours.from === 0 && s.hours.to === 1440 ? 'all' : 'range';
+  const range = s.hours === 'auto' ? DEFAULT_HOURS : s.hours;
+  const visibleCals = state.calendars.filter((c) => priv || c.visibility !== 'private');
+  const privateCals = state.calendars.filter((c) => c.visibility === 'private');
+  const tags = state.tags.filter((t) => priv || !t.startsWith('#'));
+
+  return (
+    <section className="card sc-editor" aria-label={quick ? 'Quick link' : 'Screen'}>
+      <div className="sc-editor-grid">
+        <div className="sc-options">
+          {msg.err && <p className="flash error" role="alert">{msg.err}</p>}
+          {msg.ok && <p className="flash" role="status">{msg.ok}</p>}
+          {quick ? (
+            <>
+              <h2 className="sc-h">Quick link</h2>
+              <p className="hint">The settings are in the link itself. Nothing is saved, and it only shows public events.</p>
+              <label className="field"><span>Start from a link (optional)</span>
+                <div className="sc-inline"><input type="url" value={paste} placeholder={`${state.origin}/display/calendar?view=week`} onChange={(e) => setPaste(e.target.value)} />
+                  <button type="button" className="btn sm" disabled={!paste.trim()} onClick={fromLink}>Use</button></div>
+              </label>
+            </>
+          ) : (
+            <label className="field"><span>Name</span>
+              <input type="text" value={draft.name} maxLength={120} placeholder="Lobby TV" onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
+            </label>
+          )}
+
+          <fieldset className="sc-fs"><legend>View</legend>
+            <div className="seg sc-seg">
+              {DISPLAY_VIEWS.map((v) => <button key={v} type="button" aria-pressed={s.view === v} onClick={() => set({ view: v })}>{VIEW_LABEL[v]}</button>)}
+            </div>
+          </fieldset>
+
+          {grid && (
+            <fieldset className="sc-fs"><legend>Hours</legend>
+              <label className="check-row"><input type="checkbox" checked={hoursMode === 'all'} onChange={(e) => set({ hours: e.target.checked ? { from: 0, to: 1440 } : { ...DEFAULT_HOURS } })} /> Show all hours</label>
+              <label className="check-row"><input type="checkbox" checked={hoursMode === 'auto'} onChange={(e) => set({ hours: e.target.checked ? 'auto' : { ...DEFAULT_HOURS } })} /> Fit the events shown (at least 6 hours)</label>
+              {hoursMode === 'range' && (
+                <div className="field-row">
+                  <label className="field"><span>From</span>
+                    <select value={range.from} onChange={(e) => { const from = +e.target.value; set({ hours: { from, to: Math.max(range.to, from + 60) } }); }}>
+                      {HOUR_STEPS.filter((m) => m <= 1380).map((m) => <option key={m} value={m}>{hourLabel(m)}</option>)}
+                    </select>
+                  </label>
+                  <label className="field"><span>To</span>
+                    <select value={range.to} onChange={(e) => set({ hours: { from: range.from, to: +e.target.value } })}>
+                      {HOUR_STEPS.filter((m) => m >= range.from + 60).map((m) => <option key={m} value={m}>{hourLabel(m)}</option>)}
+                    </select>
+                  </label>
+                </div>
+              )}
+              <p className="hint">Events outside these hours are cut and marked, never left out.</p>
+            </fieldset>
+          )}
+
+          {(s.view === 'week' || s.view === 'list' || s.view === 'month') && (
+            <fieldset className="sc-fs"><legend>{s.view === 'list' ? 'Days the list covers' : 'Days'}</legend>
+              <div className="field-row">
+                <label className="field"><span>{s.view === 'list' ? 'How many' : 'Which days'}</span>
+                  <select value={daysValue} onChange={(e) => set({ days: e.target.value === 'custom' ? { weekdays: [1, 2, 3, 4, 5] } : { count: +e.target.value } })}>
+                    {(s.view === 'list' ? [1, 3, 7, 14, 31] : [7, 5, 3]).map((n) => <option key={n} value={n}>{n === 7 && s.view !== 'list' ? 'All 7 days' : `${n} day${n > 1 ? 's' : ''}`}</option>)}
+                    <option value="custom">Some weekdays…</option>
+                  </select>
+                </label>
+                {s.view !== 'list' && (
+                  <label className="field"><span>First day</span>
+                    <select value={s.start} onChange={(e) => set({ start: e.target.value as DisplaySettings['start'] })}>
+                      <option value="">Site setting ({state.weekStart ? 'Monday' : 'Sunday'})</option>
+                      <option value="sun">Sunday</option>
+                      <option value="mon">Monday</option>
+                      {s.view === 'week' && <option value="today">Today (a rolling week)</option>}
+                    </select>
+                  </label>
+                )}
+              </div>
+              {daysValue === 'custom' && (
+                <div className="sc-chips" role="group" aria-label="Weekdays">
+                  {WEEKDAYS.map((d, i) => (
+                    <label key={d} className="sc-chip"><input type="checkbox" checked={weekdays.includes(i)}
+                      onChange={() => { const next = weekdays.includes(i) ? weekdays.filter((x) => x !== i) : [...weekdays, i].sort(); set({ days: next.length ? { weekdays: next } : { count: 7 } }); }} /> {d}</label>
+                  ))}
+                </div>
+              )}
+            </fieldset>
+          )}
+
+          <fieldset className="sc-fs"><legend>Calendars</legend>
+            <p className="hint">None ticked: every public calendar.</p>
+            <div className="sc-checks">
+              {visibleCals.map((c) => (
+                <label key={c.slug} className="check-row"><input type="checkbox" checked={s.filter.cal.includes(c.slug)} onChange={() => setFilter('cal', toggle(s.filter.cal, c.slug))} />
+                  <span className="sc-swatch" style={{ background: c.color }} /> {c.name}{c.visibility !== 'public' && <span className="hint"> · {c.visibility}</span>}</label>
+              ))}
+            </div>
+            {!priv && privateCals.length > 0 && <p className="hint">{quick ? 'Private calendars need a saved screen with private details on.' : 'Turn on private details below to pick private calendars.'}</p>}
+          </fieldset>
+
+          {state.rooms.length > 0 && (
+            <fieldset className="sc-fs"><legend>Rooms</legend>
+              <p className="hint">{s.view === 'rooms' ? 'One column per room, in the order you tick them. None ticked: every room.' : 'Only events in these rooms. None ticked: every room.'}</p>
+              <div className="sc-checks">
+                {state.rooms.map((r) => {
+                  const usable = priv || r.public;
+                  const at = s.filter.room.indexOf(r.slug);
+                  return (
+                    <label key={r.slug} className={`check-row${usable ? '' : ' sc-off'}`}>
+                      <input type="checkbox" checked={at >= 0} disabled={!usable && at < 0} onChange={() => setFilter('room', toggle(s.filter.room, r.slug))} />
+                      {r.color && <span className="sc-swatch" style={{ background: r.color }} />} {r.name}
+                      {at >= 0 && s.view === 'rooms' && <span className="sc-order">{at + 1}</span>}
+                      {!usable && <span className="hint"> · not named on public events</span>}
+                    </label>
+                  );
+                })}
+              </div>
+            </fieldset>
+          )}
+
+          {tags.length > 0 && (
+            <fieldset className="sc-fs"><legend>Tags</legend>
+              <div className="field-row">
+                <TagPicker label="Only events tagged" tags={tags} value={s.filter.tag} onChange={(v) => setFilter('tag', v)} />
+                <TagPicker label="Leave out events tagged" tags={tags} value={s.filter.notag} onChange={(v) => setFilter('notag', v)} />
+              </div>
+            </fieldset>
+          )}
+
+          <fieldset className="sc-fs"><legend>Look</legend>
+            <div className="sc-look">
+              <div className="seg sc-seg" role="group" aria-label="Theme">
+                {(['dark', 'light'] as const).map((t) => <button key={t} type="button" aria-pressed={s.theme === t} onClick={() => set({ theme: t })}>{t === 'dark' ? 'Dark' : 'Light'}</button>)}
+              </div>
+              <div className="seg sc-seg" role="group" aria-label="Text size">
+                {(['s', 'm', 'l', 'xl'] as const).map((z) => <button key={z} type="button" aria-pressed={s.size === z} onClick={() => set({ size: z })}>{z.toUpperCase()}</button>)}
+              </div>
+            </div>
+            <div className="sc-chips" role="group" aria-label="Show">
+              {(Object.keys(SHOW_LABEL) as DisplayShow[]).map((k) => (
+                <label key={k} className="sc-chip"><input type="checkbox" checked={s.show.includes(k)} onChange={() => set({ show: s.show.includes(k) ? s.show.filter((x) => x !== k) : [...s.show, k] })} /> {SHOW_LABEL[k]}</label>
+              ))}
+            </div>
+            {s.show.includes('host') && !priv && <p className="hint">Hosts only show on a saved screen with private details on.</p>}
+            <div className="field-row">
+              <label className="field"><span>Title (optional)</span>
+                <input type="text" value={s.title} maxLength={80} placeholder={s.view === 'month' ? 'The month' : s.view === 'week' ? 'This week' : 'Today'} onChange={(e) => set({ title: e.target.value })} />
+              </label>
+              {state.languages.length > 1 && (
+                <label className="field"><span>Language</span>
+                  <select value={lang} onChange={(e) => setDraft({ ...draft, locale: e.target.value === main ? '' : e.target.value })}>
+                    {state.languages.map((l) => <option key={l.code} value={l.code}>{l.label}</option>)}
+                  </select>
+                </label>
+              )}
+            </div>
+          </fieldset>
+
+          {!quick && (
+            <fieldset className="sc-fs sc-private"><legend>Private details</legend>
+              <label className="check-row"><input type="checkbox" role="switch" checked={draft.privateDetails} disabled={!state.canPrivate && !draft.privateDetails}
+                onChange={(e) => setDraft({ ...draft, privateDetails: e.target.checked })} /> <b>Show private calendars and room bookings</b></label>
+              <p className="hint">{PRIVATE_WARNING}</p>
+              {!state.canPrivate && <p className="hint">Turning this on needs the “Manage bookings” permission (Team → Roles).</p>}
+            </fieldset>
+          )}
+        </div>
+
+        <div className="sc-side">
+          <Preview src={previewSrc} />
+          {quick ? (
+            <div className="sc-link">
+              <label className="field"><span>Quick link</span><input type="text" readOnly value={quickUrl} onFocus={(e) => e.currentTarget.select()} /></label>
+              <div className="form-actions">
+                <button type="button" className="btn" onClick={() => copy(quickUrl, 'Link')}>Copy link</button>
+                <button type="button" className="btn primary" onClick={onSaveQuick}>Save as screen</button>
+              </div>
+            </div>
+          ) : (
+            <div className="sc-link">
+              {current?.url ? (
+                <>
+                  <label className="field"><span>Screen link</span><input type="text" readOnly value={current.url} onFocus={(e) => e.currentTarget.select()} /></label>
+                  <div className="form-actions">
+                    <button type="button" className="btn" onClick={() => copy(current.url, 'Link')}>Copy link</button>
+                    <button type="button" className="btn" disabled={busy === 'rotate'} onClick={onRotate}>Rotate link</button>
+                  </div>
+                  <p className="hint">The link is the screen’s only key: keep it in the TV’s playlist and nowhere public. Rotate it if it gets out; the old one stops at once.</p>
+                </>
+              ) : mode.kind === 'screen' ? (
+                <><p className="hint">This screen has no link yet (restored from a backup). Make one, then put it on the TV.</p>
+                  <button type="button" className="btn" disabled={busy === 'rotate'} onClick={onRotate}>Make a link</button></>
+              ) : <p className="hint">Save the screen to get its link.</p>}
+            </div>
+          )}
+          {!quick && (
+            <div className="form-actions sc-save">
+              <button type="button" className="btn primary" disabled={!dirty || !draft.name.trim() || busy === 'save'} onClick={onSave}>{busy === 'save' ? 'Saving…' : mode.kind === 'new' ? 'Save screen' : 'Save changes'}</button>
+              {mode.kind === 'screen' && <button type="button" className="btn danger" disabled={busy === 'delete'} onClick={onDelete}>Delete</button>}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TagPicker({ label, tags, value, onChange }: { label: string; tags: string[]; value: string[]; onChange: (v: string[]) => void }) {
+  return (
+    <div className="field sc-tags">
+      <span className="sc-tags-label">{label}</span>
+      <div className="sc-checks sc-tag-list">
+        {tags.map((t) => (
+          <label key={t} className="check-row"><input type="checkbox" checked={value.some((v) => v.toLowerCase() === t.toLowerCase())}
+            onChange={(e) => onChange(e.target.checked ? [...value, t] : value.filter((v) => v.toLowerCase() !== t.toLowerCase()))} /> {t}</label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// the board at the TV's 960×540, scaled to the column (debounced: the frame
+// reloads once the settings stop changing)
+function Preview({ src }: { src: string }) {
+  const box = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(0.5);
+  const [shown, setShown] = useState(src);
+  useEffect(() => { const t = setTimeout(() => setShown(src), 350); return () => clearTimeout(t); }, [src]);
+  useEffect(() => {
+    const el = box.current;
+    if (!el) return;
+    const fit = () => setScale(el.clientWidth / 960);
+    fit();
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const style = useMemo(() => ({ transform: `scale(${scale})` }), [scale]);
+  return (
+    <div className="sc-preview" ref={box} aria-label="Preview">
+      <iframe title="Screen preview" src={shown} width={960} height={540} tabIndex={-1} style={style} />
+    </div>
+  );
+}

package/src/components/editor/PostEditor.tsx

@@ -1162,6 +1162,8 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
                 eventId={docId}
                 title={meta.title}
                 status={meta.status}
+                languages={languages}
+                mainLanguage={mainLanguage}
                 tags={<TagInput tags={meta.tags} suggestions={tagSuggestions} onChange={(tags) => setMeta({ tags })} />}
               />
             </div>

package/src/components/editor/event/EventSheet.tsx

@@ -13,6 +13,7 @@ import { RegistrationCard } from './RegistrationCard';
 import { WhenCard } from './WhenCard';
 import { SingleDates } from './SingleDates';
 import { registrationMode } from './registration';
+import type { SiteLanguage } from '../../forms/FormBuilder';
 
 // Every event setting, on the page above the event's own content, as one
 // settings column: When · Where · CTA · Organize · Status, with a
@@ -31,6 +32,9 @@ interface Props {
   title: string;
   status: string;
   tags?: ReactNode;
+  /** the site's other languages and its main one, for the registration form's words in each */
+  languages?: SiteLanguage[];
+  mainLanguage?: SiteLanguage;
 }
 
 const SECTIONS = [
@@ -43,7 +47,7 @@ const SECTIONS = [
 
 const jump = (id: string) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
 
-export function EventSheet({ meta, onChange, calendars, fields, siteTimezone, maps, eventId, title, status, tags }: Props) {
+export function EventSheet({ meta, onChange, calendars, fields, siteTimezone, maps, eventId, title, status, tags, languages, mainLanguage }: Props) {
   const [places, setPlaces] = useState<Place[]>([]);
   const [current, setCurrent] = useState<string>(SECTIONS[0].id);
   const root = useRef<HTMLDivElement>(null);
@@ -129,7 +133,7 @@ export function EventSheet({ meta, onChange, calendars, fields, siteTimezone, ma
             onLocation={(name) => onChange({ location: { ...meta.location, name, placeId: '' } })}
           />
         </Section>
-        <RegistrationCard meta={meta} onChange={onChange} eventId={eventId} title={title} />
+        <RegistrationCard meta={meta} onChange={onChange} eventId={eventId} title={title} languages={languages} mainLanguage={mainLanguage} />
         <OrganizeCard meta={meta} onChange={onChange} calendars={calendars} fields={fields} tags={tags} />
         <StatusSection meta={meta} onChange={onChange} />
       </div>

package/src/components/editor/event/RegistrationCard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { starter } from '../../forms/FormBuilder';
+import { starter, type SiteLanguage } from '../../forms/FormBuilder';
 import type { EventCta } from '../../../lib/schema';
 import type { EventMeta } from '../EventPanel';
 import { Section } from './Section';
@@ -13,7 +13,7 @@ const MODES: { id: RegistrationMode; label: string; sub: string }[] = [
   { id: 'rsvp', label: 'Built-in form', sub: 'Collect RSVPs here' },
 ];
 
-export function RegistrationCard({ meta, onChange, eventId, title = '' }: { eventId?: string; title?: string; meta: EventMeta; onChange: (patch: Partial<EventMeta>) => void }) {
+export function RegistrationCard({ meta, onChange, eventId, title = '', languages, mainLanguage }: { eventId?: string; title?: string; meta: EventMeta; onChange: (patch: Partial<EventMeta>) => void; languages?: SiteLanguage[]; mainLanguage?: SiteLanguage }) {
   // "Link button" with nothing typed yet is still link mode, so keep the
   // choice locally and only fall back to the derived one on first render
   const [mode, setMode] = useState<RegistrationMode>(() => registrationMode(meta));
@@ -94,7 +94,7 @@ export function RegistrationCard({ meta, onChange, eventId, title = '' }: { even
               <button type="button" className="pe-btn sm" aria-haspopup="dialog" onClick={() => setEditing(true)}>Edit form</button>
             </div>
           </div>
-          {editing && <RegistrationFormEditor form={form} maxSeats={meta.rsvp.maxSeats} eventTitle={title} onClose={() => setEditing(false)} onChange={(f) => onChange({ rsvp: { ...meta.rsvp, form: f } })} />}
+          {editing && <RegistrationFormEditor form={form} maxSeats={meta.rsvp.maxSeats} eventTitle={title} languages={languages} mainLanguage={mainLanguage} onClose={() => setEditing(false)} onChange={(f) => onChange({ rsvp: { ...meta.rsvp, form: f } })} />}
         </div>
       )}
     </Section>

package/src/components/editor/event/RegistrationFormEditor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { actions } from 'astro:actions';
-import FormBuilder, { starter } from '../../forms/FormBuilder';
+import FormBuilder, { starter, type SiteLanguage } from '../../forms/FormBuilder';
 import type { SystemField } from '../../forms/meta';
 import type { FormDefinition, SavedForm } from '../../../lib/forms/schema';
 import '../../../styles/forms.css';
@@ -10,12 +10,15 @@ type Choice = { id: string; name: string; note: string; definition: () => FormDe
 // The event's own registration questions in the full forms builder, on top
 // of the event editor. Edits go straight into the event's meta (its own copy);
 // the event's Update/autosave persists them, so "Done" only closes.
-export function RegistrationFormEditor({ form, onChange, onClose, maxSeats, eventTitle }: {
+export function RegistrationFormEditor({ form, onChange, onClose, maxSeats, eventTitle, languages, mainLanguage }: {
   form: FormDefinition;
   onChange: (form: FormDefinition) => void;
   onClose: () => void;
   maxSeats: number;
   eventTitle: string;
+  /** the site's other languages: the builder's switcher writes the questions' words in each */
+  languages?: SiteLanguage[];
+  mainLanguage?: SiteLanguage;
 }) {
   const ref = useRef<HTMLDialogElement>(null);
   const [templates, setTemplates] = useState<SavedForm[]>([]);
@@ -135,7 +138,7 @@ export function RegistrationFormEditor({ form, onChange, onClose, maxSeats, even
         </div>
       )}
       <div className="pe-evr-body">
-        <FormBuilder value={form} onChange={onChange} mode="event" systemFields={system} />
+        <FormBuilder value={form} onChange={onChange} mode="event" systemFields={system} languages={languages} mainLanguage={mainLanguage} />
       </div>
     </dialog>
   );