@acms-subir/core 0.3.50 → 0.3.52

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/layouts/Admin.astro

@@ -128,6 +128,8 @@ const groups: { id: string; label: string; items: Item[] }[] = [
           ...(CALENDAR.enabled && can('schedule.bookings')
             ? [{ key: 'calendar:bookings', label: 'Bookings', href: '/admin/calendar/bookings', icon: icons.bookings, count: pendingBookings || null, attention: pendingBookings > 0 }]
             : []),
+          // TV screens: saved display links (lib/display), with private details behind their key
+          ...(can('schedule.manage') ? [{ key: 'calendar:screens', label: 'Screens', href: '/admin/calendar/screens', icon: icons.monitor, count: null }] : []),
         ],
       }]
     : []),

package/src/lib/backup/content.ts

@@ -9,6 +9,13 @@ import type { ContentRepository } from '../repo/types';
 const legacyApproval = (l: unknown) =>
   l && typeof l === 'object' && !('approval' in l) && (l as { autoConfirm?: boolean }).autoConfirm === false ? { ...l, approval: 'manual' } : l;
 
+// a saved TV screen (lib/display/store.ts). Its key never goes into a
+// backup: a restored screen gets a new one
+export const ScreenRecord = z.object({
+  id: z.string().min(1), name: z.string().max(200).default(''), params: z.string().max(4000).default(''), locale: z.string().max(20).default(''),
+  privateDetails: z.boolean().default(false), key: z.string().default(''), lastSeenAt: z.number().nullable().default(null),
+  order: z.number().default(0), createdAt: z.number(), updatedAt: z.number(),
+});
 export const BookingRequest = z.object({ keyHash: z.string().regex(/^[a-f0-9]{64}$/), requestHash: z.string().regex(/^[a-f0-9]{64}$/), bookingId: z.string().min(1), createdAt: z.number().int().nonnegative() });
 export type BookingRequest = z.infer<typeof BookingRequest>;
 export const BackupContent = z.object({
@@ -21,6 +28,7 @@ export const BackupContent = z.object({
   forms: z.array(SavedForm).optional(), formSubmissions: z.array(FormSubmission).optional(),
   // optional (no version bump): older cores restore such a backup and skip them
   announcements: z.array(AnnouncementRecord).optional(),
+  screens: z.array(ScreenRecord).optional(),
 }).superRefine((data, ctx) => {
   if (data.version >= 6 && (!data.forms || !data.formSubmissions)) ctx.addIssue({ code: 'custom', message: 'Version 6 requires forms and their submissions.' });
   if (data.version >= 5 && !data.bookingRequests) ctx.addIssue({ code: 'custom', message: 'Version 5 requires booking retry records.' });
@@ -39,12 +47,13 @@ export async function exportContent(repo: ContentRepository, now = Date.now()) {
     repo.listUsers(), repo.listRedirects(), repo.listCalendars(), repo.listEvents(), repo.listResources(), repo.listBookingLinks(), repo.exportBookingState(),
     repo.listPlaces(), repo.forms.list(), repo.forms.submissions(undefined, -1),
   ]);
-  const announcements = await repo.announcements.list(-1);
+  const [announcements, screens] = await Promise.all([repo.announcements.list(-1), repo.screens.list()]);
   return {
     format: 'acms-backup' as const, version: 6, exportedAt: new Date(now).toISOString(),
     settings: { ...settings, live: { ...settings.live, mode: 'off' as const, manual: { watchUrl: '', title: 'We’re live', until: 0 } }, ai: { ...settings.ai, enabled: false, encryptedKey: '' }, agent: { ...settings.agent, enabled: false, keyHash: '', keyPrefix: '', allowPublish: false }, monitoring: { ...settings.monitoring, pushUrl: '' } },
     pages, posts, media, links, tags, navItems, users, redirects,
     calendars: calendars.map(c => ({ ...c, feedToken: '' })), events,
     resources: resources.map(r => ({ ...r, feedToken: '' })), bookingLinks, ...bookingState, places, forms, formSubmissions, announcements,
+    screens: screens.map(s => ({ ...s, key: '', lastSeenAt: null })),
   };
 }

package/src/lib/calendar/api.ts

@@ -59,8 +59,16 @@ export function roomsToJson(ids: string[], resources: Map<string, Resource> | un
 
 const abs = (origin: string, path: string) => (/^https?:\/\//.test(path) ? path : origin + path);
 
-// resources: every room by id (rooms stay [] without it)
-export function eventToJson(e: CalEvent, origin: string, calendars: Map<string, Calendar>, siteTz = '', opts: { includePrivate?: boolean; resources?: Map<string, Resource> } = {}): EventJson {
+// a repeat's "until" date in that language ("12 jun 2027")
+const untilDate = (locale: string) => (ymd: string) => {
+  const [y, m, d] = ymd.split('-').map(Number);
+  try { return new Date(Date.UTC(y, m - 1, d)).toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }); }
+  catch { return ymd; }
+};
+
+// resources: every room by id (rooms stay [] without it); locale: the
+// language of the repeat line ("Cada semana el sábado"; English without it)
+export function eventToJson(e: CalEvent, origin: string, calendars: Map<string, Calendar>, siteTz = '', opts: { includePrivate?: boolean; resources?: Map<string, Resource>; locale?: string } = {}): EventJson {
   return {
     id: e.id,
     slug: e.slug,
@@ -76,7 +84,7 @@ export function eventToJson(e: CalEvent, origin: string, calendars: Map<string,
     allDay: e.allDay,
     timezone: e.timezone || siteTz || 'UTC',
     rrule: e.rrule,
-    repeats: describeRepeat(e.rrule, e.start),
+    repeats: describeRepeat(e.rrule, e.start, opts.locale ? untilDate(opts.locale) : undefined, opts.locale),
     exdates: e.exdates,
     cancelledDates: e.cancelledDates ?? [],
     movedDates: movedDatesToJson(e, opts.includePrivate),

package/src/lib/calendar/cards.ts

@@ -8,7 +8,7 @@ import { eventStrings } from './event-words';
 import { eventImage } from './images';
 import { eventUrl } from './config';
 import { eventIsPublic, featuredOccurrence, formatOccurrence, locationLine, type Occurrence } from './events';
-import { collectViewEvents } from './data';
+import { collectViewEvents, type ViewEvent } from './data';
 import type { ResolvedEventFilter } from './filter';
 
 export interface EventCardAttrs {
@@ -80,11 +80,11 @@ export async function upcomingEvents(
     displayTz: tz, now, windowStartMs: now, windowEndMs: now + (opts.horizonDays ?? 400) * 86_400_000,
   }, { audience: 'public', calendarIds: opts.calendarIds, includeFeeds: false, filter: opts.filter, locale: opts.locale });
   const seen = new Set<string>();
-  const out: (Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days' | 'cancelled'> & Pick<Partial<Occurrence>, 'moved'>)[] = [];
+  const out: (Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days' | 'cancelled'> & Pick<Partial<Occurrence>, 'moved'> & Pick<ViewEvent, 'rooms'>)[] = [];
   for (const v of events) {
     if (!v.event || v.end <= now || seen.has(v.event.id) || !tagged(v.event.tags)) continue;
     seen.add(v.event.id);
-    out.push({ event: v.event, start: v.start, end: v.end, allDay: v.allDay, days: v.days, cancelled: Boolean(v.cancelled), ...(v.moved ? { moved: v.moved } : {}) });
+    out.push({ event: v.event, start: v.start, end: v.end, allDay: v.allDay, days: v.days, cancelled: Boolean(v.cancelled), ...(v.moved ? { moved: v.moved } : {}), rooms: v.rooms ?? [] });
     if (out.length >= opts.limit) break;
   }
   return out;

package/src/lib/display/board.ts

@@ -15,7 +15,7 @@ import { addDays, dayOfWeek, monthWeeks, startOfWeek, type Iso } from '../calend
 import { siteLang, siteLocale } from '../dates';
 import { DEFAULT_HOURS, MIN_AUTO_HOURS, type DisplaySettings, type HourRange } from './settings';
 import { renderBoard, type DisplayItem, type DisplayModel, type DisplayRoom } from './render';
-import { displayStrings } from './words';
+import { displayStrings, isBookedWord } from './words';
 import { qrSvg } from './http';
 
 export const GOOGLE_BOOKING_TAG = '#google-booking';
@@ -200,8 +200,9 @@ function displayItem(v: ViewEvent, i: number, c: ItemContext): DisplayItem {
     key: `${ev?.id ?? v.ref ?? 'x'}:${v.start}:${i}`,
     kind: ev ? 'event' : v.rooms ? 'booking' : 'feed',
     title: booked ? c.words.booked : v.title,
-    // under "Booked", a private screen also names the appointment
-    detail: booked && c.privateDetails ? v.title : '',
+    // under "Booked", a private screen also names the appointment (unless
+    // its title is just "Booked", as the Google sync makes them)
+    detail: booked && c.privateDetails && !isBookedWord(v.title) ? v.title : '',
     start: v.start, end: v.end, allDay: v.allDay,
     startDay, endDay,
     startMin: v.allDay ? 0 : s.min,