@acms-subir/core 0.3.31 → 0.3.33

package/src/components/Announcements.tsx

@@ -0,0 +1,806 @@
+import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode, type Ref } from 'react';
+import type { AdminAnnouncementAction, AdminAnnouncementsState } from '../lib/announcements/api';
+import type { Announcement, AnnouncementInput, AnnouncementKind, AnnouncementWords } from '../lib/announcements/types';
+import type { PushNotification } from '../lib/push/types';
+import { announcementStrings } from '../lib/announcements/words';
+import '../styles/announcements.css';
+
+// Admin → Announcements: write a message once, choose where it shows (the
+// list on the website and in the app, a banner, a push) and when it goes up
+// and comes down. The server publishes and pushes, now or from the scheduler;
+// this island edits, previews and checks before anything goes out.
+
+type State = AdminAnnouncementsState;
+type Kind = AnnouncementKind;
+type Words = AnnouncementWords;
+type Tab = 'live' | 'scheduled' | 'drafts' | 'ended';
+type Tone = 'ok' | 'warn' | 'bad';
+interface Flash { ok?: string; warn?: string; err?: string }
+interface Recipients { total: number; languages: { code: string; name: string; count: number }[] }
+interface Saved { announcement: Announcement; notification?: PushNotification | null; pushError?: string; state: State }
+interface Check { tone: Tone; text: string; fix?: { label: string; run: () => void } }
+
+const ENDPOINT = '/api/announcements';
+const CUSTOM = '__custom';
+const BLANK: Words = { title: '', message: '', details: '', buttonLabel: '' };
+const LINK_OK = /^(\/(?!\/)|https?:\/\/)/i;
+
+async function api<T>(body?: AdminAnnouncementAction): 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 plural = (n: number, one: string, many = `${one}s`) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
+
+// ---- kinds ----------------------------------------------------------------------
+
+// 24-unit line icons. The colour comes from the kind's tokens in the CSS
+// (data-kind); red is for urgent only.
+const KIND_ICON: Record<Kind, string> = {
+  event: 'M3 5.5h18v15H3zM3 10h18M8 3v4M16 3v4',
+  registration: 'M9 2.5h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zM16 4.5h2a2 2 0 0 1 2 2V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6.5a2 2 0 0 1 2-2h2M9 14l2 2 4-4',
+  help: 'M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z',
+  info: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 16.5V11M12 7.5h.01',
+  urgent: 'M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01',
+};
+const URGENT_NOTE = 'Urgent reaches everyone with notifications on. Use it for closures, cancellations and safety, never for promotions.';
+
+const Icon = ({ d }: { d: string }) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={d} /></svg>
+);
+const KindBadge = ({ kind, label }: { kind: Kind; label: string }) => (
+  <span className="an-kind" data-kind={kind}><i><Icon d={KIND_ICON[kind]} /></i>{label}</span>
+);
+
+// ---- time -----------------------------------------------------------------------
+// The browser's local time, like <input type="datetime-local">; stored as Unix ms.
+
+const pad = (n: number) => String(n).padStart(2, '0');
+const toLocal = (ms: number) => { const d = new Date(ms); return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`; };
+const fromLocal = (s: string) => { const t = s ? new Date(s).getTime() : NaN; return Number.isFinite(t) ? t : null; };
+const day = (ms: number, now: number) => new Date(ms).toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric', ...(new Date(ms).getFullYear() !== new Date(now).getFullYear() ? { year: 'numeric' } : {}) });
+const clock = (ms: number) => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+/** "Sun, Oct 19, 8:00 AM" */
+const at = (ms: number, now: number) => `${day(ms, now)}, ${clock(ms)}`;
+/** the time when it's today, else the day */
+const short = (ms: number, now: number) => (new Date(ms).toDateString() === new Date(now).toDateString() ? clock(ms) : day(ms, now));
+/** "in 14 hours" */
+function fromNow(ms: number, now: number) {
+  const m = Math.round((ms - now) / 60_000);
+  if (m < 1) return 'any minute now';
+  if (m < 60) return `in ${m} min`;
+  const h = Math.round(m / 60);
+  return h < 48 ? `in ${h} hour${h === 1 ? '' : 's'}` : `in ${Math.round(h / 24)} days`;
+}
+function ago(ms: number, now: number) {
+  const s = Math.round((now - ms) / 1000);
+  if (s < 60) return 'just now';
+  if (s < 3600) return `${Math.floor(s / 60)} min ago`;
+  return short(ms, now);
+}
+const nextHour = (now: number) => { const d = new Date(now + 2 * 3_600_000); d.setMinutes(0, 0, 0); return d.getTime(); };
+const weekLater = (from: number) => { const d = new Date(from + 7 * 86_400_000); d.setHours(21, 0, 0, 0); return d.getTime(); };
+
+function useNow(every = 30_000) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => { const t = setInterval(() => setNow(Date.now()), every); return () => clearInterval(t); }, [every]);
+  return now;
+}
+
+// ---- status -----------------------------------------------------------------------
+
+// published but past its end counts as ended, even before the scheduler takes it down
+const tabOf = (a: Announcement, now: number): Tab =>
+  a.status === 'draft' ? 'drafts' : a.status === 'scheduled' ? 'scheduled'
+    : a.status === 'published' && (a.showUntil === null || a.showUntil > now) ? 'live' : 'ended';
+
+const TABS: { id: Tab; label: string; empty: [string, string] }[] = [
+  { id: 'live', label: 'Up now', empty: ['Nothing is up right now.', 'Announcements you put up show here until they end or you archive them.'] },
+  { id: 'scheduled', label: 'Scheduled', empty: ['Nothing scheduled.', 'Pick a start time when you schedule one and it waits here.'] },
+  { id: 'drafts', label: 'Drafts', empty: ['No drafts.', 'Save a draft to finish it later.'] },
+  { id: 'ended', label: 'Ended', empty: ['Nothing has ended yet.', 'Announcements move here when their end time passes or you archive them.'] },
+];
+// newest first, except what's coming up: soonest first
+const sortKey = (a: Announcement, tab: Tab) =>
+  tab === 'scheduled' ? -(a.publishAt ?? 0) : tab === 'live' ? a.publishedAt ?? a.updatedAt
+    : tab === 'ended' && a.status !== 'archived' ? a.showUntil ?? a.updatedAt : a.updatedAt;
+
+function timeText(a: Announcement, now: number) {
+  switch (tabOf(a, now)) {
+    case 'live': return `Up since ${short(a.publishedAt ?? a.updatedAt, now)}${a.showUntil ? ` · until ${at(a.showUntil, now)}` : ''}`;
+    case 'scheduled': return a.publishAt ? `Goes up ${at(a.publishAt, now)} · ${fromNow(a.publishAt, now)}` : 'Going up now';
+    case 'drafts': return `Draft · edited ${ago(a.updatedAt, now)}${a.publishAt ? ` · set for ${at(a.publishAt, now)}` : ''}`;
+    default: return a.status === 'archived'
+      ? `Archived ${short(a.updatedAt, now)}${a.publishedAt ? '' : ' · never went up'}`
+      : `Ended ${short(a.showUntil ?? a.updatedAt, now)}`;
+  }
+}
+const STATUS_CLASS: Record<Tab, string> = { live: 'published', scheduled: 'scheduled', drafts: 'draft', ended: 'archived' };
+
+// the state has no delivery log: notificationId set = the push went out
+const pushResult = (a: Announcement): [Tone, string] | null =>
+  !a.push || a.publishedAt === null ? null : a.notificationId ? ['ok', 'Pushed'] : ['warn', 'Push not sent'];
+
+function resultFlash(r: Saved, now: number): Flash {
+  const a = r.announcement;
+  const n = r.notification;
+  if (a.status === 'scheduled') return { ok: a.publishAt ? `Scheduled for ${at(a.publishAt, now)}.` : 'Going up now.' };
+  if (a.status === 'published') {
+    if (r.pushError) return { warn: `Up now, but the push wasn’t sent: ${r.pushError}` };
+    if (!n) return { ok: 'Up now.' };
+    if (n.status === 'failed') return { warn: `Up now, but the push failed: ${n.error || 'the push service refused it.'}` };
+    return { ok: n.recipients ? `Up now. Sent to ${plural(n.ok, 'phone')}${n.failed ? ` · ${n.failed} failed` : ''}.` : 'Up now. No phone matched the audience yet.' };
+  }
+  if (a.status === 'ended') return { warn: 'Saved, but its end time has passed, so it’s under Ended.' };
+  if (a.status === 'archived') return { ok: 'Saved. It’s archived: put it back to show it.' };
+  return { ok: 'Saved.' };
+}
+
+// ---- shared bits ------------------------------------------------------------------
+
+function FlashLine({ flash }: { flash: Flash }) {
+  return (
+    <div className="an-flash" aria-live="polite">
+      {flash.err ? <p className="flash error" role="alert">{flash.err}</p>
+        : flash.warn ? <p className="flash an-warn">{flash.warn}</p>
+        : flash.ok ? <p className="flash">{flash.ok}</p> : null}
+    </div>
+  );
+}
+
+// Segmented control with tab semantics: arrow keys, Home and End move between options.
+function Tabs<T extends string>({ label, items, value, onChange, idPrefix, controls, disabled }: {
+  label: string; items: { id: T; label: ReactNode }[]; value: T; onChange: (v: T) => void;
+  idPrefix?: string; controls?: string; disabled?: boolean;
+}) {
+  const refs = useRef<(HTMLButtonElement | null)[]>([]);
+  const onKey = (e: KeyboardEvent, i: number) => {
+    const n = items.length;
+    const next = e.key === 'ArrowRight' ? (i + 1) % n : e.key === 'ArrowLeft' ? (i - 1 + n) % n : e.key === 'Home' ? 0 : e.key === 'End' ? n - 1 : -1;
+    if (next < 0) return;
+    e.preventDefault();
+    onChange(items[next].id);
+    refs.current[next]?.focus();
+  };
+  return (
+    <div className="seg an-seg" role="tablist" aria-label={label}>
+      {items.map((it, i) => (
+        <button key={it.id} ref={(el) => { refs.current[i] = el; }} type="button" role="tab" id={idPrefix ? `${idPrefix}-${it.id}` : undefined}
+          aria-selected={value === it.id} aria-controls={controls} tabIndex={value === it.id ? 0 : -1} disabled={disabled}
+          onClick={() => onChange(it.id)} onKeyDown={(e) => onKey(e, i)}>{it.label}</button>
+      ))}
+    </div>
+  );
+}
+
+// ---- page -----------------------------------------------------------------------
+
+export default function Announcements() {
+  const [state, setState] = useState<State | null>(null);
+  const [loadError, setLoadError] = useState('');
+  useEffect(() => { api<State>().then(setState, (e) => setLoadError(errText(e))); }, []);
+  if (loadError) return <p className="flash error" role="alert">{loadError}</p>;
+  if (!state) return <div className="an-skel" aria-busy="true" aria-label="Loading"><i /><i /><i /></div>;
+  return <AnnouncementsView state={state} setState={setState} />;
+}
+
+function AnnouncementsView({ state, setState }: { state: State; setState: (s: State) => void }) {
+  const [editing, setEditing] = useState<{ id: string | null; key: number } | null>(null);
+  const [tab, setTab] = useState<Tab>('live');
+  const [flash, setFlash] = useState<Flash>({});
+  const [returned, setReturned] = useState(false);
+  // the panel is the scroll container on desktop, the window on phones
+  useEffect(() => { document.getElementById('acms-panel')?.scrollTo({ top: 0 }); window.scrollTo({ top: 0 }); }, [editing?.key]);
+  if (editing) {
+    return (
+      <Composer key={editing.key} state={state} setState={setState} startId={editing.id}
+        onClose={(msg, goTo) => { setEditing(null); setFlash(msg ?? {}); if (goTo) setTab(goTo); setReturned(true); }} />
+    );
+  }
+  return (
+    <List state={state} setState={setState} tab={tab} setTab={setTab} flash={flash} setFlash={setFlash} focusTabs={returned}
+      onEdit={(id) => { setFlash({}); setEditing({ id, key: Date.now() }); }} />
+  );
+}
+
+// ---- list -----------------------------------------------------------------------
+
+function List({ state, setState, tab, setTab, flash, setFlash, focusTabs, onEdit }: {
+  state: State; setState: (s: State) => void; tab: Tab; setTab: (t: Tab) => void;
+  flash: Flash; setFlash: (f: Flash) => void; focusTabs: boolean; onEdit: (id: string | null) => void;
+}) {
+  const now = useNow();
+  const [busy, setBusy] = useState('');
+  const [doomed, setDoomed] = useState<Announcement | null>(null);
+  const dialog = useRef<HTMLDialogElement>(null);
+  const root = useRef<HTMLDivElement>(null);
+  // back from the composer: keyboard focus returns to the list
+  useEffect(() => { if (focusTabs) root.current?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')?.focus(); }, []);
+
+  const kindLabel = (k: Kind) => state.kinds.find((x) => x.id === k)?.label ?? k;
+  const groups = useMemo(() => {
+    const out: Record<Tab, Announcement[]> = { live: [], scheduled: [], drafts: [], ended: [] };
+    for (const a of state.announcements) out[tabOf(a, now)].push(a);
+    for (const t of TABS) out[t.id].sort((x, y) => sortKey(y, t.id) - sortKey(x, t.id));
+    return out;
+  }, [state.announcements, now]);
+
+  const act = async (a: Announcement, action: 'archive' | 'restore' | 'delete') => {
+    setBusy(a.id); setFlash({});
+    try {
+      const r = await api<{ announcement?: Announcement; state: State }>({ action, id: a.id });
+      dialog.current?.close();
+      setState(r.state);
+      const s = r.announcement?.status;
+      setFlash({ ok: action === 'delete' ? 'Deleted.'
+        : action === 'archive' ? (a.status === 'scheduled' ? 'Archived. It won’t go up and its push won’t be sent.' : 'Archived. It’s off the site and the app.')
+        : s === 'published' ? 'Put back. It’s up again, without a new push.' : s === 'draft' ? 'Put back in Drafts.' : 'Put back. Its end time has passed, so it stays under Ended.' });
+    } catch (e) {
+      dialog.current?.close();
+      setFlash({ err: errText(e) });
+    } finally { setBusy(''); }
+  };
+  const confirmDelete = (a: Announcement) => { setDoomed(a); dialog.current?.showModal(); };
+
+  const rows = groups[tab];
+  const empty = TABS.find((t) => t.id === tab)!.empty;
+  return (
+    <div className="an" ref={root}>
+      <div className="an-bar">
+        <Tabs label="Announcements" idPrefix="an-tab" controls="an-list" value={tab} onChange={setTab}
+          items={TABS.map((t) => ({ id: t.id, label: <>{t.label}{groups[t.id].length > 0 && <em className="an-n">{groups[t.id].length}</em>}</> }))} />
+        <button type="button" className="btn primary" onClick={() => onEdit(null)}>New announcement</button>
+      </div>
+      <FlashLine flash={flash} />
+      <section className="card an-list" id="an-list" role="tabpanel" aria-labelledby={`an-tab-${tab}`}>
+        {!rows.length ? <div className="empty-state an-empty"><b>{empty[0]}</b><p>{empty[1]}</p></div> : (
+          <ul className="an-rows">
+            {rows.map((a) => (
+              <Row key={a.id} a={a} state={state} now={now} busy={busy !== ''} kindLabel={kindLabel(a.kind)}
+                onEdit={() => onEdit(a.id)} onAct={(action) => act(a, action)} onDelete={() => confirmDelete(a)} />
+            ))}
+          </ul>
+        )}
+      </section>
+      {(state.bar || state.base) && (
+        <p className="hint an-foot">
+          {state.bar && <span>While a pinned announcement is up, it shows instead of the bar from <a href="/admin/settings#announcement">Settings → Announcement bar</a>.</span>}
+          {state.base && <a href={`${state.site.origin}${state.base}`} target="_blank" rel="noopener">View on the site ↗</a>}
+        </p>
+      )}
+      <dialog className="modal" ref={dialog} aria-labelledby="an-del-h" onClose={() => setDoomed(null)}>
+        <div className="modal-head"><span id="an-del-h">Delete this announcement?</span>
+          <button type="button" className="modal-x" onClick={() => dialog.current?.close()} aria-label="Close">✕</button></div>
+        <div className="modal-body">
+          <p className="an-del">“{doomed?.title || 'Untitled'}” is removed for good. This can’t be undone.</p>
+          <div className="modal-foot">
+            <button type="button" className="btn" onClick={() => dialog.current?.close()}>Cancel</button>
+            <button type="button" className="btn danger" disabled={!doomed || busy !== ''} onClick={() => doomed && act(doomed, 'delete')}>{busy ? 'Deleting…' : 'Delete'}</button>
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
+}
+
+function Row({ a, state, now, busy, kindLabel, onEdit, onAct, onDelete }: {
+  a: Announcement; state: State; now: number; busy: boolean; kindLabel: string;
+  onEdit: () => void; onAct: (action: 'archive' | 'restore') => void; onDelete: () => void;
+}) {
+  const titleId = `an-row-${a.id}`;
+  const push = pushResult(a);
+  const missing = tabOf(a, now) === 'ended' ? [] : state.languages.extra.filter((l) => !a.translations[l.code]?.title);
+  const where = [a.listed && 'List', a.push && 'Push', a.pinned && 'Banner'].filter(Boolean) as string[];
+  return (
+    <li className="an-row">
+      <KindBadge kind={a.kind} label={kindLabel} />
+      <div className="an-row-main">
+        <b id={titleId} className={`an-row-title${a.title ? '' : ' is-empty'}`}>{a.title || 'Untitled'}</b>
+        {a.message && <p className="an-row-msg">{a.message}</p>}
+        <div className="an-row-meta">
+          {where.length > 0 && <span className="an-where"><span className="sr-only">Shows in: </span>{where.map((w) => <span key={w} className="an-chip">{w}</span>)}</span>}
+          <span>{timeText(a, now)}</span>
+          {push && <span className="an-tone" data-tone={push[0]}>{push[1]}</span>}
+          {missing.map((l) => <span key={l.code} className="an-tone" data-tone="warn">{l.name} missing</span>)}
+        </div>
+      </div>
+      <div className="an-row-actions">
+        <button type="button" className="btn sm" aria-describedby={titleId} onClick={onEdit}>Edit</button>
+        {(a.status === 'published' || a.status === 'scheduled') && <button type="button" className="btn sm ghost" aria-describedby={titleId} disabled={busy} onClick={() => onAct('archive')}>Archive</button>}
+        {a.status === 'archived' && <button type="button" className="btn sm ghost" aria-describedby={titleId} disabled={busy} onClick={() => onAct('restore')}>Put back</button>}
+        {(a.status === 'draft' || a.status === 'ended' || a.status === 'archived') && <button type="button" className="btn sm ghost" aria-describedby={titleId} disabled={busy} onClick={onDelete}>Delete</button>}
+      </div>
+    </li>
+  );
+}
+
+// ---- composer -----------------------------------------------------------------------
+
+interface Form {
+  kind: Kind;
+  words: Words;
+  /** every extra language, blank until written (the server drops blank ones) */
+  translations: Record<string, Words>;
+  linkRef: string;
+  customUrl: string;
+  listed: boolean; push: boolean; pinned: boolean;
+  everyone: boolean; topics: string[];
+  when: 'now' | 'at'; publishAt: string;
+  until: 'none' | 'at'; showUntil: string;
+}
+
+// the push audience a kind starts with (the site's config, else a topic named like the kind, else everyone)
+function audienceFor(kind: Kind, state: State): Pick<Form, 'everyone' | 'topics'> {
+  const list = state.defaultAudience[kind] ?? ['*'];
+  return list.includes('*') || !list.length ? { everyone: true, topics: [] } : { everyone: false, topics: [...list] };
+}
+
+function toForm(a: Announcement | null, state: State): Form {
+  const translations = Object.fromEntries(state.languages.extra.map((l) => [l.code, { ...BLANK, ...a?.translations[l.code] }]));
+  if (!a) {
+    return { kind: 'info', words: { ...BLANK }, translations, linkRef: '', customUrl: '', listed: true, push: false, pinned: false,
+      ...audienceFor('info', state), when: 'now', publishAt: '', until: 'none', showUntil: '' };
+  }
+  const target = a.link ? state.links.find((l) => l.url === a.link) : undefined;
+  return {
+    kind: a.kind, words: { title: a.title, message: a.message, details: a.details, buttonLabel: a.buttonLabel }, translations,
+    linkRef: target?.ref ?? (a.link ? CUSTOM : ''), customUrl: target ? '' : a.link,
+    listed: a.listed, push: a.push, pinned: a.pinned,
+    everyone: a.audience.includes('*'), topics: a.audience.filter((t) => t !== '*'),
+    when: a.publishAt ? 'at' : 'now', publishAt: a.publishAt ? toLocal(a.publishAt) : '',
+    until: a.showUntil ? 'at' : 'none', showUntil: a.showUntil ? toLocal(a.showUntil) : '',
+  };
+}
+
+const linkOf = (f: Form, state: State) => (f.linkRef === CUSTOM ? f.customUrl.trim() : state.links.find((l) => l.ref === f.linkRef)?.url ?? '');
+
+function toInput(f: Form, state: State, original: Announcement | null): AnnouncementInput {
+  // once it went up, the server keeps its push, audience and start as they were
+  const wentUp = original !== null && original.publishedAt !== null;
+  return {
+    kind: f.kind, ...f.words, link: linkOf(f, state), translations: f.translations,
+    listed: f.listed, pinned: f.pinned,
+    push: wentUp ? original.push : f.push && state.push.enabled,
+    audience: wentUp ? original.audience : f.kind === 'urgent' || f.everyone ? ['*'] : f.topics,
+    publishAt: f.when === 'at' ? fromLocal(f.publishAt) : null,
+    showUntil: f.until === 'at' ? fromLocal(f.showUntil) : null,
+  };
+}
+
+/** One language's words, each blank field falling back to the main language (as the server does). */
+function localize(f: Form, lang: string, main: string): Words {
+  const t = lang === main ? null : f.translations[lang];
+  const m = f.words;
+  return t ? { title: t.title.trim() || m.title, message: t.message.trim() || m.message, details: t.details.trim() || m.details, buttonLabel: t.buttonLabel.trim() || m.buttonLabel } : m;
+}
+
+function Composer({ state, setState, startId, onClose }: {
+  state: State; setState: (s: State) => void; startId: string | null; onClose: (flash?: Flash, tab?: Tab) => void;
+}) {
+  const now = useNow();
+  const uid = useId();
+  const [id, setId] = useState(startId);
+  const original = id ? state.announcements.find((a) => a.id === id) ?? null : null;
+  const wentUp = original !== null && original.publishedAt !== null;
+  const archived = original?.status === 'archived';
+  const [form, setForm] = useState(() => toForm(original, state));
+  const [baseline, setBaseline] = useState(() => JSON.stringify(form));
+  // a new announcement's audience follows its kind until the user picks one
+  const [touched, setTouched] = useState(startId !== null);
+  const { main, extra } = state.languages;
+  const [lang, setLang] = useState(main.code);
+  const [previewLang, setPreviewLang] = useState(main.code);
+  const [busy, setBusy] = useState<'' | 'draft' | 'schedule'>('');
+  const [msg, setMsg] = useState<Flash>({});
+  const [count, setCount] = useState<Recipients | 'error' | null>(null);
+  const [reviewErr, setReviewErr] = useState('');
+  const review = useRef<HTMLDialogElement>(null);
+  const heading = useRef<HTMLHeadingElement>(null);
+  const titleInput = useRef<HTMLInputElement>(null);
+  const countReq = useRef(0);
+
+  const dirty = JSON.stringify(form) !== baseline;
+  const set = (patch: Partial<Form>) => setForm((f) => ({ ...f, ...patch }));
+  const input = toInput(form, state, original);
+  const urgent = form.kind === 'urgent';
+  const link = linkOf(form, state);
+  const badLink = form.linkRef === CUSTOM && link !== '' && !LINK_OK.test(link);
+  const groups = [...new Set(state.links.map((l) => l.group))];
+  const topicName = (t: string) => state.push.topics.find((x) => x.id === t)?.label ?? t;
+
+  useEffect(() => { heading.current?.focus(); }, []);
+  // unsaved changes live only in this tab: warn before losing them
+  useEffect(() => {
+    if (!dirty) return;
+    const onLeave = (e: BeforeUnloadEvent) => e.preventDefault();
+    window.addEventListener('beforeunload', onLeave);
+    return () => window.removeEventListener('beforeunload', onLeave);
+  }, [dirty]);
+
+  const leave = () => { if (!dirty || confirm('Leave without saving? Your changes will be lost.')) onClose(); };
+  const switchLang = (code: string) => { setLang(code); setPreviewLang(code); };
+  const pickKind = (kind: Kind) => {
+    const patch: Partial<Form> = { kind };
+    if (!wentUp) {
+      // urgent sends to everyone (toInput), so the user's audience survives switching back
+      if (kind === 'urgent') Object.assign(patch, { push: state.push.enabled, pinned: true });
+      if (kind === 'registration') patch.pinned = true;
+      if (!touched && kind !== 'urgent') Object.assign(patch, audienceFor(kind, state));
+    }
+    set(patch);
+  };
+  const setWords = (patch: Partial<Words>) => setForm((f) => (lang === main.code
+    ? { ...f, words: { ...f.words, ...patch } }
+    : { ...f, translations: { ...f.translations, [lang]: { ...BLANK, ...f.translations[lang], ...patch } } }));
+
+  const save = async (intent: 'draft' | 'schedule') => {
+    setBusy(intent); setMsg({}); setReviewErr('');
+    try {
+      const r = await api<Saved>({ action: 'save', id: id ?? undefined, intent, announcement: input });
+      setState(r.state);
+      if (intent === 'schedule') {
+        review.current?.close();
+        onClose(resultFlash(r, Date.now()), tabOf(r.announcement, Date.now()));
+        return;
+      }
+      const next = toForm(r.announcement, r.state);
+      setId(r.announcement.id); setForm(next); setBaseline(JSON.stringify(next)); setTouched(true);
+      setMsg({ ok: wentUp || archived ? 'Changes saved.' : original?.status === 'scheduled' ? 'Saved as a draft. It won’t go up until you schedule it again.' : 'Draft saved.' });
+    } catch (e) {
+      if (intent === 'schedule') setReviewErr(errText(e)); else setMsg({ err: errText(e) });
+    } finally { setBusy(''); }
+  };
+
+  const openReview = () => {
+    setReviewErr(''); setCount(null);
+    review.current?.showModal();
+    const req = ++countReq.current;
+    if (input.push && input.audience.length) {
+      api<{ recipients: Recipients }>({ action: 'count', audience: input.audience, kind: input.kind })
+        .then((r) => { if (req === countReq.current) setCount(r.recipients); }, () => { if (req === countReq.current) setCount('error'); });
+    }
+  };
+
+  // ---- the checklist in "Before you schedule"
+  const start = input.publishAt !== null && input.publishAt > now ? input.publishAt : null;
+  const checks: Check[] = [];
+  {
+    const title = form.words.title.trim();
+    const message = form.words.message.trim();
+    if (!title) checks.push({ tone: 'bad', text: `Add a title in ${main.name}.` });
+    else if (input.push && !message) checks.push({ tone: 'bad', text: 'Add the short message: it’s the text of the push.' });
+    else checks.push({ tone: message ? 'ok' : 'warn', text: message ? `Title and message in ${main.name}` : 'No short message. Only the title shows.' });
+    if (!input.listed && !input.push && !input.pinned) checks.push({ tone: 'bad', text: 'Choose where it shows: the list, a push or the banner.' });
+    for (const l of extra) {
+      if (form.translations[l.code]?.title.trim()) continue;
+      const phones = input.push && count && count !== 'error' ? count.languages.find((x) => x.code === l.code)?.count ?? 0 : 0;
+      checks.push({
+        tone: 'warn',
+        text: phones ? `${l.name} is missing. ${plural(phones, `${l.name} phone`)} would get the ${main.name}.` : `${l.name} is missing. ${l.name} readers see the ${main.name}.`,
+        fix: { label: `Add ${l.name}`, run: () => { review.current?.close(); switchLang(l.code); requestAnimationFrame(() => titleInput.current?.focus()); } },
+      });
+    }
+    if (form.linkRef === CUSTOM && !link) checks.push({ tone: 'bad', text: 'Add the address the button opens, or choose No button.' });
+    else if (badLink) checks.push({ tone: 'bad', text: 'The button’s address has to start with / or https://.' });
+    else checks.push({ tone: 'ok', text: link ? `“${form.words.buttonLabel.trim() || announcementStrings(main.code).more}” opens ${state.links.find((l) => l.ref === form.linkRef)?.label ?? link}` : 'No button' });
+    if (!input.push) checks.push({ tone: 'ok', text: 'No push' });
+    else if (!input.audience.length) checks.push({ tone: 'bad', text: 'Choose who gets the push.' });
+    else {
+      const who = input.audience.includes('*') ? 'everyone with notifications on' : `people following ${input.audience.map(topicName).join(', ')}`;
+      const c = count;
+      const langs = c && c !== 'error' && extra.length ? c.languages.filter((l) => l.count > 0).map((l) => `${l.count.toLocaleString()} ${l.name}`).join(', ') : '';
+      checks.push(c === null ? { tone: 'ok', text: `Push to ${who}: counting phones…` }
+        : c === 'error' ? { tone: 'ok', text: `Push to ${who}` }
+        : c.total === 0 ? { tone: 'warn', text: `Push to ${who}: no phones match yet` }
+        : { tone: 'ok', text: `Push to ${who}: about ${plural(c.total, 'phone')}${langs ? ` (${langs})` : ''}` });
+    }
+    if (form.when === 'at' && input.publishAt === null) checks.push({ tone: 'bad', text: 'Pick when it goes up.' });
+    else checks.push({ tone: 'ok', text: start ? `Goes up ${day(start, now)} at ${clock(start)}, ${fromNow(start, now)}` : form.when === 'at' ? 'Goes up now (the time you picked has passed)' : 'Goes up now' });
+    if (form.until === 'at' && input.showUntil === null) checks.push({ tone: 'bad', text: 'Pick when it comes down, or choose No end.' });
+    else if (input.showUntil !== null && input.showUntil <= Math.max(now, input.publishAt ?? 0)) checks.push({ tone: 'bad', text: 'The end has to be after the start.' });
+    else if (input.pinned) checks.push({ tone: 'ok', text: input.showUntil ? `Banner until ${at(input.showUntil, now)}` : 'Banner until you archive it' });
+    else if (input.showUntil) checks.push({ tone: 'ok', text: `Comes down ${at(input.showUntil, now)}` });
+    if (urgent) checks.push({ tone: 'warn', text: URGENT_NOTE });
+  }
+  const blocked = checks.some((c) => c.tone === 'bad');
+
+  const statusLine = !original ? <p className="an-status">Not saved yet</p> : (
+    <p className={`an-status status ${archived ? 'archived' : STATUS_CLASS[tabOf(original, now)]}`}>
+      {timeText(original, now)}{archived ? '. Put it back from the list to show it again.' : ''}
+    </p>
+  );
+  const pushNote = wentUp
+    ? (original.push ? (original.notificationId ? 'Pushed when it went up. A push only goes out once.' : 'No push went out when it went up.') : 'A push only goes out when it goes up.')
+    : !state.push.enabled ? 'Push notifications are off on this site.'
+    : state.push.devices === 0 ? 'No phone has turned notifications on yet.' : undefined;
+  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const showPush = wentUp ? original.push : state.push.enabled && form.push;
+  const words = lang === main.code ? form.words : form.translations[lang] ?? BLANK;
+
+  return (
+    <div className="an">
+      <header className="an-head">
+        <button type="button" className="an-back" onClick={leave}>← All announcements</button>
+        <div className="an-head-row">
+          <div>
+            <h2 ref={heading} tabIndex={-1}>{id ? 'Edit announcement' : 'New announcement'}</h2>
+            {statusLine}
+          </div>
+          <div className="page-actions">
+            {wentUp || archived ? (
+              <button type="button" className="btn primary" disabled={!dirty || busy !== ''} onClick={() => save('draft')}>{busy ? 'Saving…' : 'Save changes'}</button>
+            ) : (
+              <>
+                <button type="button" className="btn" disabled={busy !== '' || (!dirty && original?.status !== 'scheduled')} onClick={() => save('draft')}>
+                  {busy === 'draft' ? 'Saving…' : original?.status === 'scheduled' ? 'Save as draft' : 'Save draft'}</button>
+                <button type="button" className="btn primary" disabled={busy !== ''} onClick={openReview}>Review and schedule…</button>
+              </>
+            )}
+          </div>
+        </div>
+      </header>
+      <FlashLine flash={msg} />
+
+      <div className="card card-pad an-compose">
+        <div className="an-form">
+          <div className="an-sec">
+            <fieldset className="an-fs">
+              <legend className="an-legend">Kind</legend>
+              <p className="hint an-sec-hint">Sets the icon and colour.</p>
+              <div className="an-kinds">
+                {state.kinds.map((k) => (
+                  <label key={k.id} className={`an-kind-opt${form.kind === k.id ? ' on' : ''}`} data-kind={k.id}>
+                    <input type="radio" name={`${uid}-kind`} value={k.id} checked={form.kind === k.id} onChange={() => pickKind(k.id)}
+                      disabled={wentUp && (original.kind === 'urgent' ? k.id !== 'urgent' : k.id === 'urgent')} />
+                    <i><Icon d={KIND_ICON[k.id]} /></i>
+                    <span>{k.label}</span>
+                  </label>
+                ))}
+              </div>
+              {wentUp && <p className="hint an-after">{original.kind === 'urgent' ? 'It went up as urgent and stays urgent.' : 'It already went up, so it can’t become urgent.'}</p>}
+            </fieldset>
+          </div>
+
+          <div className="an-sec">
+            {extra.length > 0 && (
+              <div className="an-langs">
+                <Tabs label="Language" idPrefix={`${uid}-lang`} controls={`${uid}-words`} value={lang} onChange={switchLang}
+                  items={[{ id: main.code, label: main.name }, ...extra.map((l) => ({ id: l.code, label: form.translations[l.code]?.title.trim() ? l.name : `${l.name} · missing` }))]} />
+              </div>
+            )}
+            <div id={`${uid}-words`} role={extra.length ? 'tabpanel' : undefined} aria-labelledby={extra.length ? `${uid}-lang-${lang}` : undefined}>
+              {lang !== main.code && <p className="hint an-sec-hint">Blank fields show the {main.name}.</p>}
+              <WordFields words={words} source={lang === main.code ? null : form.words} sourceName={main.name} limits={state.limits}
+                buttonDefault={announcementStrings(lang).more} hasLink={link !== ''} titleRef={titleInput} onChange={setWords} />
+            </div>
+            <label className="field">
+              <span>Button opens</span>
+              <select value={form.linkRef} onChange={(e) => set({ linkRef: e.target.value })}>
+                <option value="">No button</option>
+                {groups.map((g) => (
+                  <optgroup key={g} label={g}>
+                    {state.links.filter((l) => l.group === g).map((l) => <option key={l.ref} value={l.ref}>{l.label}</option>)}
+                  </optgroup>
+                ))}
+                <option value={CUSTOM}>Custom address…</option>
+              </select>
+            </label>
+            {form.linkRef === CUSTOM && (
+              <label className="field">
+                <span>Address</span>
+                <input className="mono" type="url" value={form.customUrl} placeholder="/visit or https://example.com" aria-invalid={badLink || undefined} onChange={(e) => set({ customUrl: e.target.value })} />
+              </label>
+            )}
+            {badLink ? <p className="hint an-bad">Links start with / or https://.</p> : link && <p className="hint an-linkhint">When tapped, opens: <code>{link}</code></p>}
+          </div>
+
+          <div className="an-sec">
+            <fieldset className="an-fs">
+              <legend className="an-legend">Where it shows</legend>
+              <Toggle label="Announcements list (app and website)" checked={form.listed} onChange={(v) => set({ listed: v })} />
+              <Toggle label="Push to phones" checked={wentUp ? original.push : form.push && state.push.enabled} disabled={wentUp || !state.push.enabled}
+                note={pushNote} onChange={(v) => set({ push: v })} />
+              <Toggle label="Pin as a banner until it ends" checked={form.pinned} note="Closing it hides this announcement only; the next one still shows." onChange={(v) => set({ pinned: v })} />
+            </fieldset>
+          </div>
+
+          {showPush && (
+            <div className="an-sec">
+              <fieldset className="an-fs">
+                <legend className="an-legend">Who gets the push</legend>
+                {wentUp ? (
+                  <p className="an-ro">{original.kind === 'urgent' || original.audience.includes('*') ? 'Everyone with notifications on' : `People following ${original.audience.map(topicName).join(', ')}`}</p>
+                ) : (
+                  <>
+                    <Tabs label="Who gets the push" disabled={urgent} value={urgent || form.everyone ? 'all' : 'topics'}
+                      onChange={(v) => { setTouched(true); set({ everyone: v === 'all' }); }}
+                      items={[{ id: 'all', label: 'Everyone with notifications on' }, { id: 'topics', label: 'People following…' }]} />
+                    {urgent ? <p className="hint an-after">{URGENT_NOTE}</p> : form.everyone ? (
+                      <p className="hint an-after">{plural(state.push.devices, 'phone')} with notifications on.</p>
+                    ) : (
+                      <div className="an-topics">
+                        {state.push.topics.map((t) => (
+                          <label key={t.id} className={`an-opt${form.topics.includes(t.id) ? ' on' : ''}`}>
+                            <input type="checkbox" checked={form.topics.includes(t.id)} onChange={() => {
+                              setTouched(true);
+                              set({ topics: form.topics.includes(t.id) ? form.topics.filter((x) => x !== t.id) : [...form.topics, t.id] });
+                            }} />
+                            <span>{t.label}</span>
+                            <em>{(state.push.topicCounts[t.id] ?? 0).toLocaleString()}</em>
+                          </label>
+                        ))}
+                      </div>
+                    )}
+                    <p className="hint an-pace" data-tone={state.push.sentThisWeek >= 2 ? 'warn' : undefined}>
+                      Sent this week: {plural(state.push.sentThisWeek, 'push', 'pushes')}. Keep it to about two a week so people leave notifications on.</p>
+                  </>
+                )}
+              </fieldset>
+            </div>
+          )}
+
+          <div className="an-sec">
+            <div className="an-when">
+              <fieldset className="an-fs">
+                <legend className="an-legend">When</legend>
+                {wentUp ? <p className="an-ro">Went up {at(original.publishedAt!, now)}</p> : (
+                  <>
+                    <Tabs label="When it goes up" value={form.when} items={[{ id: 'now', label: 'Now' }, { id: 'at', label: 'Pick a time' }]}
+                      onChange={(v) => set({ when: v, publishAt: v === 'at' && !form.publishAt ? toLocal(nextHour(now)) : form.publishAt })} />
+                    {form.when === 'at' && <input type="datetime-local" aria-label="Goes up at" value={form.publishAt} min={toLocal(now)} onChange={(e) => set({ publishAt: e.target.value })} />}
+                  </>
+                )}
+              </fieldset>
+              <fieldset className="an-fs">
+                <legend className="an-legend">Show until <span className="an-opt-l">(optional)</span></legend>
+                <Tabs label="Show until" value={form.until} items={[{ id: 'none', label: 'No end' }, { id: 'at', label: 'Pick a time' }]}
+                  onChange={(v) => set({ until: v, showUntil: v === 'at' && !form.showUntil ? toLocal(weekLater(fromLocal(form.publishAt) ?? now)) : form.showUntil })} />
+                {form.until === 'at' && <input type="datetime-local" aria-label="Comes down at" value={form.showUntil} min={form.when === 'at' && form.publishAt ? form.publishAt : toLocal(now)} onChange={(e) => set({ showUntil: e.target.value })} />}
+              </fieldset>
+            </div>
+            <p className="hint an-after">It goes up at the start time and comes down at the end. With no end, it stays until you archive it.</p>
+            {tz && state.site.timezone && tz !== state.site.timezone && <p className="hint an-after">Times are in this device’s time zone ({tz}); the site uses {state.site.timezone}.</p>}
+          </div>
+        </div>
+        <Preview state={state} form={form} lang={previewLang} setLang={setPreviewLang} />
+      </div>
+
+      <dialog className="modal an-review" ref={review} aria-labelledby={`${uid}-review-h`}>
+        <div className="modal-head"><span id={`${uid}-review-h`}>Before you schedule</span>
+          <button type="button" className="modal-x" onClick={() => review.current?.close()} aria-label="Close">✕</button></div>
+        <div className="modal-body">
+          <ul className="an-checks">
+            {checks.map((c) => (
+              <li key={c.text} data-tone={c.tone}>
+                <span className="an-mark" aria-hidden="true">{c.tone === 'ok' ? '✓' : c.tone === 'warn' ? '!' : '✕'}</span>
+                <span><span className="sr-only">{c.tone === 'ok' ? 'Ready: ' : c.tone === 'warn' ? 'Check: ' : 'Fix first: '}</span>{c.text}</span>
+                {c.fix && <button type="button" className="btn sm" onClick={c.fix.run}>{c.fix.label}</button>}
+              </li>
+            ))}
+          </ul>
+          <FlashLine flash={{ err: reviewErr }} />
+          <div className="modal-foot">
+            <button type="button" className="btn" onClick={() => review.current?.close()}>Keep editing</button>
+            <button type="button" className="btn primary" disabled={blocked || busy !== ''} onClick={() => save('schedule')}>
+              {busy === 'schedule' ? 'Saving…' : start ? 'Schedule' : 'Put it up now'}</button>
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
+}
+
+function WordFields({ words, source, sourceName, limits, buttonDefault, hasLink, titleRef, onChange }: {
+  words: Words; source: Words | null; sourceName: string; limits: State['limits']; buttonDefault: string;
+  hasLink: boolean; titleRef: Ref<HTMLInputElement>; onChange: (patch: Partial<Words>) => void;
+}) {
+  const field = (key: keyof Words) => ({ value: words[key], source: source?.[key], sourceName, onChange: (v: string) => onChange({ [key]: v }) });
+  return (
+    <>
+      <TextField label="Title" limit={limits.title} inputRef={titleRef} placeholder={source?.title || 'Volunteers needed for Saturday’s food drive'} {...field('title')} />
+      <TextField label="Short message (the push)" limit={limits.message} rows={3} placeholder={source?.message || 'We need 10 more people from 9 to noon. Sign up by Thursday.'} {...field('message')} />
+      <TextField label="More details (shown in the app and on the website)" limit={limits.details} rows={5} placeholder={source?.details}
+        hint="Optional. A blank line starts a new paragraph." {...field('details')} />
+      <TextField label="Button label" limit={limits.buttonLabel} placeholder={source?.buttonLabel || buttonDefault}
+        hint={hasLink ? undefined : 'Shows only when the button opens something (below).'} {...field('buttonLabel')} />
+    </>
+  );
+}
+
+// A text field with a character counter; on another language's tab the main
+// language's words sit above it, read-only.
+function TextField({ label, value, limit, rows, source, sourceName, placeholder, hint, inputRef, onChange }: {
+  label: string; value: string; limit: number; rows?: number; source?: string; sourceName: string;
+  placeholder?: string; hint?: string; inputRef?: Ref<HTMLInputElement>; onChange: (v: string) => void;
+}) {
+  const id = useId();
+  const describedBy = [source && `${id}-src`, hint && `${id}-hint`, `${id}-n`].filter(Boolean).join(' ');
+  const common = { id, value, maxLength: limit, placeholder, 'aria-describedby': describedBy };
+  return (
+    <div className="an-field">
+      <div className="an-field-top">
+        <label htmlFor={id}>{label}</label>
+        <em className="an-count" id={`${id}-n`} data-near={value.length > limit * 0.9 || undefined}>{value.length}/{limit}</em>
+      </div>
+      {source && <p className="an-src" id={`${id}-src`}><span>{sourceName}</span>{source}</p>}
+      {rows ? <textarea rows={rows} {...common} onChange={(e) => onChange(e.target.value)} />
+        : <input type="text" ref={inputRef} {...common} onChange={(e) => onChange(e.target.value)} />}
+      {hint && <small className="hint" id={`${id}-hint`}>{hint}</small>}
+    </div>
+  );
+}
+
+function Toggle({ label, note, checked, disabled, onChange }: { label: string; note?: string; checked: boolean; disabled?: boolean; onChange: (v: boolean) => void }) {
+  const id = useId();
+  return (
+    <div className="an-toggle">
+      <input id={id} type="checkbox" checked={checked} disabled={disabled} aria-describedby={note ? `${id}-note` : undefined} onChange={(e) => onChange(e.target.checked)} />
+      <label htmlFor={id}>{label}</label>
+      {note && <small className="hint" id={`${id}-note`}>{note}</small>}
+    </div>
+  );
+}
+
+// ---- preview ----------------------------------------------------------------------
+
+// A phone lock screen with the push, and the website banner when pinned.
+// Device and site previews: fixed neutral colours, not admin tokens.
+function Preview({ state, form, lang, setLang }: { state: State; form: Form; lang: string; setLang: (l: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => { const t = setInterval(() => setTime(new Date()), 30_000); return () => clearInterval(t); }, []);
+  const { main, extra } = state.languages;
+  const w = localize(form, lang, main.code);
+  const link = linkOf(form, state);
+  const push = form.push && state.push.enabled;
+  return (
+    <aside className="an-preview" aria-label="Preview">
+      <div className="an-preview-tools">
+        <Tabs label="Notification size" value={open ? 'open' : 'closed'} onChange={(v) => setOpen(v === 'open')}
+          items={[{ id: 'closed', label: 'Collapsed' }, { id: 'open', label: 'Expanded' }]} />
+        {extra.length > 0 && (
+          <select className="an-preview-lang" aria-label="Preview language" value={lang} onChange={(e) => setLang(e.target.value)}>
+            {[main, ...extra].map((l) => <option key={l.code} value={l.code}>{l.name}</option>)}
+          </select>
+        )}
+      </div>
+      <div className={`an-phone${push ? '' : ' is-off'}`}>
+        <div className="an-phone-screen">
+          <div className="an-clock">
+            <small>{time.toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' })}</small>
+            <b>{time.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).replace(/\s?[AP]M$/i, '')}</b>
+          </div>
+          <div className={`an-note${open ? ' is-open' : ''}`}>
+            <div className="an-note-top">
+              <span className="an-appicon" aria-hidden="true">
+                {state.site.icon ? <img src={state.site.icon} alt="" /> : <Icon d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0" />}
+              </span>
+              <span className="an-appname">{state.site.name || 'Your app'}</span>
+              <span className="an-now">now</span>
+            </div>
+            <b className="an-note-title">{w.title.trim() || 'Your title'}</b>
+            <p className="an-note-body">{w.message.trim() || 'Your short message appears here.'}</p>
+          </div>
+        </div>
+      </div>
+      <p className="hint an-cap">{push ? 'Phones shorten long text; keep the key words first.' : 'Not pushed. Tick Push to phones to send it.'}</p>
+      {form.pinned && (
+        <div className="an-site">
+          <small className="an-site-label">Website banner</small>
+          <div className="an-site-bar" data-kind={form.kind}>
+            <i aria-hidden="true"><Icon d={KIND_ICON[form.kind]} /></i>
+            <b>{w.title.trim() || 'Your title'}</b>
+            {link && <span className="an-site-btn">{w.buttonLabel.trim() || announcementStrings(lang).more} →</span>}
+            <span className="an-site-x" aria-hidden="true">✕</span>
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}