@acms-subir/core 0.3.34 → 0.3.36

package/mobile-template/recipes/rsvp/files/components/RsvpPanel.tsx

@@ -0,0 +1,270 @@
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, Platform, Pressable, Switch, Text, TextInput, View, type KeyboardTypeOptions } from 'react-native';
+import * as Crypto from 'expo-crypto';
+import * as SecureStore from 'expo-secure-store';
+import { isAcmsError, type FormField } from '@acms-subir/client';
+import { Button, answerProblems, seatChoices, useCancelBooking, useGuest, useManagedBooking, useRsvp, useRsvpStatus, useSite, useTheme } from '@acms-subir/native';
+
+// RSVP to one date of an event: <RsvpPanel slug={event.slug} start={occurrence.start} />,
+// with `start` exactly as useEvents returns it. Shows going and spots left,
+// seats, contact details and the event's questions, then the person's RSVP
+// with a way to cancel it; or why the date takes no RSVPs. Same rules as the
+// event's web page: open until the date ends, and the organiser may approve
+// each RSVP. useRsvp keeps one idempotency key per RSVP, so sending again
+// after a timeout can't register anyone twice.
+
+// The RSVP's private manage token, one per event date, lives only in secure
+// storage (never a URL or log). Keys allow letters, digits, ".", "-" and "_".
+// Web has no secure storage: there the confirmation email's link is the way back.
+const tokenKey = (eventId: string, start: string) => `rsvp.${eventId}.${start}`.replace(/[^A-Za-z0-9._-]/g, '_');
+const keychain = { keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY };
+const tokens = {
+  get: async (key: string) => (Platform.OS === 'web' ? null : SecureStore.getItemAsync(key, keychain).catch(() => null)),
+  set: async (key: string, token: string) => { if (Platform.OS !== 'web') await SecureStore.setItemAsync(key, token, keychain).catch(() => {}); },
+  remove: async (key: string) => { if (Platform.OS !== 'web') await SecureStore.deleteItemAsync(key, keychain).catch(() => {}); },
+};
+
+type Answers = Record<string, string | string[]>;
+const OTHER = '__other__';
+const problemText = (f: Pick<FormField, 'type'>, problem: 'required' | 'invalid') => problem === 'required' ? 'Please answer this.'
+  : f.type === 'email' ? 'Enter an email address.' : f.type === 'number' ? 'Enter a number.' : f.type === 'phone' ? 'Enter a phone number.'
+  : f.type === 'date' ? 'Use YYYY-MM-DD, for example 2026-10-05.' : 'Check this answer.';
+const keyboards: Partial<Record<FormField['type'], KeyboardTypeOptions>> = { email: 'email-address', phone: 'phone-pad', number: 'numeric', url: 'url' };
+// "Other" choices send the typed text instead
+const withOther = (f: FormField, value: string | string[] | undefined, other: string): string | string[] => {
+  if (f.type === 'checkboxes') { const list = Array.isArray(value) ? value : []; return list.includes(OTHER) ? [...list.filter((v) => v !== OTHER), other.trim()] : list; }
+  return value === OTHER ? other.trim() : (value ?? '');
+};
+const seatsText = (n: number) => (n === 1 ? '1 seat' : `${n} seats`);
+
+export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
+  const t = useTheme();
+  const { data: site } = useSite();
+  const guest = useGuest();
+  const status = useRsvpStatus(slug, start);
+  const rsvp = useRsvp(slug, start, { createKey: Crypto.randomUUID });
+  const s = status.data;
+  const key = s ? tokenKey(s.event.id, s.start) : null;
+  // undefined until secure storage has answered
+  const [stored, setStored] = useState<string | null | undefined>(undefined);
+  const changes = site?.features.bookingChanges === true;
+  const managed = useManagedBooking(changes ? stored : null);
+  const cancel = useCancelBooking(stored);
+  const [confirming, setConfirming] = useState(false);
+  const [notice, setNotice] = useState('');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [seats, setSeats] = useState(1);
+  const [values, setValues] = useState<Answers>({});
+  const [others, setOthers] = useState<Record<string, string>>({});
+  const [tried, setTried] = useState(false);
+
+  useEffect(() => {
+    if (!key) return;
+    let live = true;
+    void tokens.get(key).then((token) => { if (live) setStored(token); });
+    return () => { live = false; };
+  }, [key]);
+  // signed in for "My bookings": that's their email (guest sign-in knows no name)
+  useEffect(() => {
+    if (site?.features.guestSignIn && guest.email) setEmail((e) => e || guest.email!);
+  }, [site?.features.guestSignIn, guest.email]);
+  // cancelled (here, from the email link or by the organiser) or gone: forget the token
+  const gone = managed.data?.booking.status === 'cancelled' || (isAcmsError(managed.error) && managed.error.status === 404);
+  useEffect(() => {
+    if (!key || !stored || !gone) return;
+    void tokens.remove(key);
+    setStored(null);
+    setConfirming(false);
+    rsvp.reset();
+    if (managed.data?.booking.status === 'cancelled') setNotice('Your RSVP is cancelled.');
+  }, [key, stored, gone]);
+
+  if (!s) return status.isPending ? <ActivityIndicator color={t.colors.accent} /> : null;
+  const input = { borderWidth: 1, borderColor: t.colors.line, borderRadius: Math.min(t.radius, 10), padding: 12, fontSize: 16, color: t.colors.ink, backgroundColor: t.colors.panel } as const;
+  const chip = (on: boolean) => ({ paddingVertical: 10, paddingHorizontal: 12, borderRadius: Math.min(t.radius, 10), borderWidth: 1, borderColor: on ? t.colors.accent : t.colors.line, backgroundColor: on ? t.colors.soft : t.colors.panel });
+  const errorText = [t.styles.text.small, { color: t.colors.ink, fontWeight: '600' as const }];
+  const going = (
+    <Text style={t.styles.text.body}>
+      <Text style={{ fontWeight: '700' }}>{s.going}</Text> going
+      {s.left !== null && <> · <Text style={{ fontWeight: '700' }}>{s.left}</Text> {s.left === 1 ? 'spot' : 'spots'} left</>}
+    </Text>
+  );
+
+  // ---- their RSVP: just sent, or kept from before ----
+  const mine = managed.data && managed.data.booking.status !== 'cancelled' ? managed.data : null;
+  const made = rsvp.data?.booking;
+  if (stored === undefined || (stored && changes && managed.isPending && !made)) return <ActivityIndicator color={t.colors.accent} />;
+  // offline or busy: say so rather than offer a second RSVP
+  if (stored && changes && managed.error && !gone && !made) return (
+    <View style={[t.styles.card, { gap: 8 }]}>
+      <Text accessibilityRole="header" style={t.styles.text.heading}>Your RSVP</Text>
+      <Text style={t.styles.text.muted}>Couldn’t load it right now.</Text>
+      <Button label="Try again" variant="outline" onPress={() => void managed.refetch()} />
+    </View>
+  );
+  if ((stored && mine) || made) {
+    const state = mine?.booking.status ?? made!.status;
+    const who = mine?.booking.email ?? made!.email;
+    const thanks = mine ? mine.confirmation : made!.formResponse?.definition.confirmation || null;
+    const canCancel = !!stored && changes && (mine ? mine.can.cancel : false);
+    return (
+      <View style={[t.styles.card, { gap: 8 }]}>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{!made ? 'Your RSVP' : state === 'confirmed' ? 'Confirmed' : 'Request sent'}</Text>
+        <Text style={[t.styles.text.label, { color: t.colors.ink }]}>
+          {seatsText(mine?.booking.seats ?? made!.seats)} · {state === 'confirmed' ? 'Confirmed' : state === 'pending' ? 'Waiting for approval' : 'Not confirmed'}
+        </Text>
+        <Text style={t.styles.text.body}>
+          {state === 'confirmed' ? thanks || `A confirmation is on its way to ${who}.`
+            : state === 'pending' ? `We’ll email ${who} once it’s approved.` : 'Sorry, the organiser couldn’t confirm it.'}
+        </Text>
+        {state === 'declined' && <Button label="RSVP again" variant="outline" onPress={() => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); }} />}
+        {canCancel && state !== 'declined' && (confirming ? (
+          <View style={{ gap: 8 }}>
+            <Text style={t.styles.text.body}>Cancel your RSVP for {seatsText(mine!.booking.seats)}?</Text>
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
+              <Button label={cancel.isPending ? 'Cancelling…' : 'Yes, cancel it'} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
+              <Button label="Keep it" variant="outline" disabled={cancel.isPending} onPress={() => setConfirming(false)} />
+            </View>
+          </View>
+        ) : <Button label="Cancel my RSVP" variant="outline" onPress={() => setConfirming(true)} />)}
+        {cancel.error && <Text style={errorText}>{isAcmsError(cancel.error) && cancel.error.status === 0 ? 'Check your connection and try again.' : cancel.error.message}</Text>}
+        {!canCancel && state !== 'declined' && <Text style={t.styles.text.small}>The confirmation email has a link to change or cancel it.</Text>}
+      </View>
+    );
+  }
+
+  if (s.reason === 'disabled') return null;
+  if (!s.open) return (
+    <View style={[t.styles.card, { gap: 6 }]}>
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{s.reason === 'full' ? 'Full' : s.reason === 'cancelled' ? 'This date is cancelled' : 'RSVPs are closed'}</Text>
+      {s.reason === 'full' ? going : <Text style={t.styles.text.muted}>{s.reason === 'cancelled' ? 'Nobody needs to RSVP for it.' : 'This date has already happened.'}</Text>}
+    </View>
+  );
+
+  // ---- the form ----
+  const form = s.form;
+  const fields = form?.fields ?? [];
+  const answers: Answers = Object.fromEntries(fields.filter((f) => f.type !== 'heading').map((f) => [f.id, withOther(f, values[f.id], others[f.id] ?? '')]));
+  const problems = answerProblems(fields, answers);
+  const nameProblem = !name.trim() ? 'Add your name.' : '';
+  const emailProblem = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()) ? 'Add a valid email address.' : '';
+  // the form may ask for a phone itself
+  const askPhone = !fields.some((f) => f.type === 'phone');
+  const chosen = Math.min(seats, s.maxSeats) || 1;
+  const submit = () => {
+    setTried(true);
+    setNotice('');
+    if (nameProblem || emailProblem || Object.keys(problems).length) return;
+    rsvp.mutate({ name, email, phone: askPhone ? phone : '', seats: chosen, answers }, {
+      onSuccess: (data) => { if (key) void tokens.set(key, data.manageToken); setStored(data.manageToken); },
+    });
+  };
+  const set = (id: string, v: string | string[]) => setValues((a) => ({ ...a, [id]: v }));
+  const label = (text: string, required: boolean) => (
+    <Text style={t.styles.text.label}>{text}{required ? <Text accessibilityLabel="required"> *</Text> : ''}</Text>
+  );
+  const text = (lbl: string, value: string, onChange: (v: string) => void, o: { required?: boolean; keyboard?: KeyboardTypeOptions; multiline?: boolean; auto?: 'name' | 'email' | 'tel'; placeholder?: string; help?: string; problem?: string } = {}) => (
+    <View key={lbl} style={{ gap: 6 }}>
+      {label(lbl, !!o.required)}
+      {!!o.help && <Text style={t.styles.text.small}>{o.help}</Text>}
+      <TextInput value={value} onChangeText={onChange} keyboardType={o.keyboard} multiline={o.multiline} autoComplete={o.auto} placeholder={o.placeholder}
+        autoCapitalize={o.auto === 'email' || o.keyboard === 'email-address' || o.keyboard === 'url' ? 'none' : 'sentences'} placeholderTextColor={t.colors.muted}
+        accessibilityLabel={lbl} accessibilityHint={o.problem}
+        style={[input, o.multiline && { minHeight: 96, textAlignVertical: 'top' }, !!o.problem && { borderColor: t.colors.ink }]} />
+      {!!o.problem && <Text style={errorText}>{o.problem}</Text>}
+    </View>
+  );
+  const field = (f: FormField) => {
+    const problem = tried && problems[f.id] ? problemText(f, problems[f.id]) : '';
+    if (f.type === 'heading') return (
+      <View key={f.id} style={{ gap: 2, paddingTop: 4 }}>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{f.label}</Text>
+        {!!f.help && <Text style={t.styles.text.muted}>{f.help}</Text>}
+      </View>
+    );
+    if (f.type === 'checkbox' || f.type === 'consent') return (
+      <View key={f.id} style={{ gap: 6 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <Text style={[t.styles.text.body, { flex: 1 }]}>{f.label}{f.required ? ' *' : ''}</Text>
+          <Switch accessibilityLabel={f.label} value={values[f.id] === 'yes'} onValueChange={(v) => set(f.id, v ? 'yes' : '')} trackColor={{ true: t.colors.accent }} />
+        </View>
+        {!!f.help && <Text style={t.styles.text.small}>{f.help}</Text>}
+        {!!problem && <Text style={errorText}>{problem}</Text>}
+      </View>
+    );
+    if (f.type === 'select' || f.type === 'radio' || f.type === 'checkboxes') {
+      const many = f.type === 'checkboxes';
+      const current = values[f.id];
+      const isOn = (o: string) => (many ? Array.isArray(current) && current.includes(o) : current === o);
+      const toggle = (o: string) => {
+        if (!many) return set(f.id, current === o && !f.required ? '' : o);
+        const list = Array.isArray(current) ? current : [];
+        set(f.id, list.includes(o) ? list.filter((x) => x !== o) : [...list, o]);
+      };
+      const choices = f.allowOther && f.type !== 'select' ? [...f.options, OTHER] : f.options;
+      return (
+        <View key={f.id} style={{ gap: 6 }}>
+          {label(f.label, f.required)}
+          {!!f.help && <Text style={t.styles.text.small}>{f.help}</Text>}
+          <View accessibilityRole={many ? undefined : 'radiogroup'} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+            {choices.map((o) => (
+              <Pressable key={o} accessibilityRole={many ? 'checkbox' : 'radio'} accessibilityState={{ checked: isOn(o) }} onPress={() => toggle(o)} style={chip(isOn(o))}>
+                <Text style={[t.styles.text.body, isOn(o) && { fontWeight: '600' }]}>{o === OTHER ? 'Other' : o}</Text>
+              </Pressable>
+            ))}
+          </View>
+          {isOn(OTHER) && (
+            <TextInput value={others[f.id] ?? ''} onChangeText={(v) => setOthers((x) => ({ ...x, [f.id]: v }))} placeholder="Other" accessibilityLabel={`${f.label}: other`}
+              placeholderTextColor={t.colors.muted} style={input} />
+          )}
+          {!!problem && <Text style={errorText}>{problem}</Text>}
+        </View>
+      );
+    }
+    return text(f.label, String(values[f.id] ?? ''), (v) => set(f.id, v), {
+      required: f.required, help: f.help, problem, multiline: f.type === 'textarea', keyboard: keyboards[f.type],
+      placeholder: f.placeholder || (f.type === 'date' ? 'YYYY-MM-DD' : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
+    });
+  };
+
+  const error = rsvp.error;
+  return (
+    <View style={[t.styles.card, { gap: 16 }]}>
+      <View style={{ gap: 4 }}>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{form?.title || 'Save your seat'}</Text>
+        {going}
+        {!!notice && <Text style={t.styles.text.muted}>{notice}</Text>}
+        {!!form?.intro && <Text style={t.styles.text.muted}>{form.intro}</Text>}
+      </View>
+      {text('Your name', name, setName, { required: true, auto: 'name', problem: tried ? nameProblem : '' })}
+      {text('Email', email, setEmail, { required: true, keyboard: 'email-address', auto: 'email', problem: tried ? emailProblem : '' })}
+      {askPhone && text('Phone (optional)', phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
+      {s.maxSeats > 1 && (
+        <View style={{ gap: 6 }}>
+          {label('Seats', false)}
+          <View accessibilityRole="radiogroup" style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+            {seatChoices(s).map((n) => (
+              <Pressable key={n} accessibilityRole="radio" accessibilityLabel={seatsText(n)} accessibilityState={{ checked: n === chosen }} onPress={() => setSeats(n)} style={[chip(n === chosen), { minWidth: 48, alignItems: 'center' }]}>
+                <Text style={[t.styles.text.body, n === chosen && { fontWeight: '600' }]}>{n}</Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      )}
+      {fields.map(field)}
+      {error && (
+        <View style={{ backgroundColor: t.colors.soft, borderRadius: Math.min(t.radius, 10), padding: 12, gap: 4 }}>
+          <Text style={[t.styles.text.body, { fontWeight: '600' }]}>That didn’t go through.</Text>
+          <Text style={t.styles.text.muted}>
+            {isAcmsError(error) && error.status === 0 ? 'Check your connection and try again. You won’t be registered twice.' : error.message}
+          </Text>
+        </View>
+      )}
+      {tried && (nameProblem || emailProblem || Object.keys(problems).length > 0) && <Text style={errorText}>Check the answers marked above.</Text>}
+      <Button label={rsvp.isPending ? 'Sending…' : form?.submitLabel || (s.autoConfirm ? 'Confirm my seat' : 'Request a seat')} disabled={rsvp.isPending} onPress={submit} />
+      <Text style={t.styles.text.small}>Your details go only to the organiser of this event.</Text>
+    </View>
+  );
+}

package/mobile-template/recipes/rsvp/recipe.json

@@ -0,0 +1,15 @@
+{
+  "kind": "client",
+  "title": "RSVP",
+  "description": "An RSVP panel for an event date: going and spots left, seats, the event's questions with inline errors, then the person's RSVP with Cancel, or why the date is full or closed. Already part of the events recipe; add it to an event screen of your own.",
+  "packages": [
+    "expo-crypto",
+    "expo-secure-store"
+  ],
+  "routes": [],
+  "next": [
+    "Mount it on your event screen where the date is known: <RsvpPanel slug={occurrence.event.slug} start={occurrence.start} /> from '../../components/RsvpPanel', with start exactly as useEvents returns it (the UTC ISO string, e.g. pass o.start through router params), and only when occurrence.event.rsvp?.enabled",
+    "The screen should scroll and avoid the keyboard: wrap it in <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}> with <ScrollView keyboardShouldPersistTaps=\"handled\">",
+    "RSVPs need only the calendar (useSite().data.features.rsvp). Each RSVP's private manage token stays in expo-secure-store (never a URL or log): the panel shows the person's RSVP and lets them cancel it; the confirmation email's link works too"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.34",
+  "version": "0.3.36",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Announcements.tsx

@@ -359,6 +359,16 @@ function toForm(a: Announcement | null, state: State): Form {
 }
 
 const linkOf = (f: Form, state: State) => (f.linkRef === CUSTOM ? f.customUrl.trim() : state.links.find((l) => l.ref === f.linkRef)?.url ?? '');
+// a link's site path as the server compares it: no origin, language prefix, query or hash ('' = another site)
+function sitePath(link: string, state: State) {
+  try {
+    const u = new URL(link, state.site.origin || 'https://site.invalid');
+    if (state.site.origin && u.origin !== new URL(state.site.origin).origin) return '';
+    const path = u.pathname.replace(/(.)\/+$/, '$1');
+    const lang = state.languages.extra.find((l) => path === `/${l.code}` || path.startsWith(`/${l.code}/`));
+    return lang ? path.slice(lang.code.length + 1) || '/' : path;
+  } catch { return ''; }
+}
 
 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
@@ -519,6 +529,9 @@ function Composer({ state, setState, startId, onClose }: {
     ? (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;
+  // the button opens an event whose automatic change notice just went out: a push would repeat it
+  const changed = link ? state.recentChanges.find((c) => c.path === sitePath(link, state)) : undefined;
+  const changeNote = changed ? `An automatic change notice for this event went out at ${clock(changed.at)}.` : 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;
@@ -605,7 +618,7 @@ function Composer({ state, setState, startId, onClose }: {
               <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 })} />
+                note={pushNote ?? changeNote} 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>

package/src/components/LiveCard.astro

@@ -2,6 +2,9 @@
 import { getRepo } from '../lib/repo';
 import { liveState, publicSnapshot } from '../lib/live/service';
 import { liveView } from '../lib/live/view';
+import { liveStrings } from '../lib/live/words';
+import { I18N, requestLocale } from '../lib/i18n';
+import { siteLang, siteLocale } from '../lib/dates';
 import '../styles/live.css';
 
 // One component for every live placement. Layout:
@@ -10,10 +13,16 @@ import '../styles/live.css';
 // Theme hooks: .pc-live-* classes, --live-* tokens, [data-layout], [data-status].
 interface Props { compact?: boolean; display?: string }
 const { compact = false, display = 'card' } = Astro.props;
-const { config, snapshot: raw } = await liveState(await getRepo(Astro.locals));
+const repo = await getRepo(Astro.locals);
+const [{ config, snapshot: raw }, settings] = await Promise.all([liveState(repo), repo.getSettings()]);
 const snapshot = publicSnapshot(raw, config);
 const now = Date.now();
-const v = liveView(snapshot, now);
+// the page's language, as in Site.astro's <html lang>; the site's own locale
+// keeps its region for times. The browser script re-renders in it too.
+const reqLocale = I18N.enabled ? requestLocale(Astro.url, Astro.locals) : '';
+const locale = reqLocale && reqLocale !== siteLang(settings) ? reqLocale : siteLocale(settings);
+const w = liveStrings(locale);
+const v = liveView(snapshot, now, w, locale);
 const player = !compact && display === 'player';
 const layout = compact ? 'links' : player ? 'split' : config.display.style;
 ---
@@ -26,12 +35,13 @@ const layout = compact ? 'links' : player ? 'split' : config.display.style;
   data-status={v?.status ?? 'offline'}
   data-snapshot={JSON.stringify(snapshot)}
   data-server-now={now}
+  data-locale={locale}
   hidden={!v}
-  aria-label="Live video"
+  aria-label={w.video}
 >
   <div class="pc-live-off">
     <i class="pc-live-off-dot" aria-hidden="true"></i>
-    <span>Not live right now</span>
+    <span>{w.notLive}</span>
     <a data-live-watch href={v?.watchUrl || '#'} target="_blank" rel="noopener noreferrer">{v?.watchLabel}</a>
   </div>
   <div class="pc-live-body">
@@ -52,7 +62,7 @@ const layout = compact ? 'links' : player ? 'split' : config.display.style;
       <h2 class="pc-live-title"><span class="pc-live-title-text" data-live-title>{v?.title}</span></h2>
       <p class="pc-live-meta" data-live-meta hidden={!v?.meta}>{v?.meta}</p>
       <div class="pc-live-actions">
-        <button type="button" class="pc-live-btn" data-live-load hidden>Play here</button>
+        <button type="button" class="pc-live-btn" data-live-load hidden>{w.playHere}</button>
         <a class="pc-live-btn" data-live-watch href={v?.watchUrl || '#'} target="_blank" rel="noopener noreferrer">{v?.watchLabel}</a>
       </div>
       <small class="pc-live-privacy" data-live-privacy hidden></small>
@@ -62,6 +72,7 @@ const layout = compact ? 'links' : player ? 'split' : config.display.style;
 <script>
   import { subscribeLive, currentLive, serverNow } from '../lib/live/client';
   import { liveView, PROVIDER_NAMES } from '../lib/live/view';
+  import { fill, liveStrings } from '../lib/live/words';
   import type { PublicLiveSnapshot } from '../lib/live/types';
 
   const q = <T extends HTMLElement>(root: Element, sel: string) => root.querySelector<T>(sel)!;
@@ -71,6 +82,8 @@ const layout = compact ? 'links' : player ? 'split' : config.display.style;
     const cards = Array.from(document.querySelectorAll<HTMLElement>('[data-live-card]')).filter((c) => !c.dataset.initialized);
     for (const card of cards) {
       card.dataset.initialized = 'true';
+      const locale = card.dataset.locale || undefined;
+      const words = liveStrings(locale);
       let shownKey = '';
       // the links page lifts its live block to the top while live; a marker
       // remembers where the owner placed it
@@ -110,7 +123,7 @@ const layout = compact ? 'links' : player ? 'split' : config.display.style;
         if (!src) return false;
         const iframe = document.createElement('iframe');
         iframe.src = src;
-        iframe.title = s.title || 'Live video';
+        iframe.title = s.title || words.video;
         iframe.allowFullscreen = true;
         iframe.allow = 'fullscreen; picture-in-picture; encrypted-media';
         iframe.referrerPolicy = 'strict-origin-when-cross-origin';
@@ -131,7 +144,7 @@ const layout = compact ? 'links' : player ? 'split' : config.display.style;
       }
 
       function render(s: PublicLiveSnapshot | null, now: number) {
-        const v = liveView(s, now);
+        const v = liveView(s, now, words, locale);
         card.hidden = !v;
         const key = s ? `${s.provider}:${s.id}:${s.status}:${s.embedId}` : '';
         if (key !== shownKey || !eligible(s)) { if (!player.hidden) reset(); }
@@ -153,13 +166,13 @@ const layout = compact ? 'links' : player ? 'split' : config.display.style;
         if (!v.thumbUrl) { img.hidden = true; img.removeAttribute('src'); }
         else if (img.getAttribute('src') !== v.thumbUrl) img.src = v.thumbUrl;
         const canPlay = eligible(s);
-        const name = PROVIDER_NAMES[v.provider] || 'the platform';
-        poster.setAttribute('aria-label', canPlay ? `Play ${v.title} here` : `${v.watchLabel.replace(' ↗', '')}: ${v.title}`);
+        const name = PROVIDER_NAMES[v.provider] || words.platform;
+        poster.setAttribute('aria-label', canPlay ? fill(words.play, { title: v.title }) : `${v.watchLabel.replace(' ↗', '')}: ${v.title}`);
         q(card, '[data-live-playicon]').hidden = !canPlay;
         load.hidden = !canPlay || !player.hidden;
         const privacy = q(card, '[data-live-privacy]');
         privacy.hidden = !canPlay;
-        privacy.textContent = `Playing loads video from ${name}.`;
+        privacy.textContent = fill(words.privacy, { provider: name });
         card.dataset.playable = canPlay ? 'true' : 'false';
       }
 

package/src/components/MobileApp.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import type { AdminPushState } from '../lib/push/api';
 import type { PushAuto, PushNotification } from '../lib/push/types';
 import '../styles/mobile-app.css';
@@ -35,7 +35,7 @@ function ago(ms: number, now: number) {
     : d.toLocaleDateString([], { month: 'short', day: 'numeric', ...(d.getFullYear() !== new Date(now).getFullYear() ? { year: 'numeric' } : {}) });
 }
 
-const SOURCE: Record<PushNotification['source'], string> = { manual: 'Sent by', post: 'New post', event: 'New event', soon: 'Starting soon', live: 'We’re live', announcement: 'Announcement by' };
+const SOURCE: Record<PushNotification['source'], string> = { manual: 'Sent by', post: 'New post', event: 'New event', soon: 'Starting soon', live: 'We’re live', announcement: 'Announcement by', change: 'Event changed' };
 
 export default function MobileApp() {
   const [state, setState] = useState<AdminPushState | null>(null);
@@ -261,7 +261,8 @@ function Automatic({ state, setState }: { state: AdminPushState; setState: (s: A
       setState(r.state); setAuto(r.auto); setMsg({ ok: 'Saved.' });
     } catch (e) { setMsg({ err: errText(e) }); } finally { setBusy(false); }
   };
-  const calendarChoices = (key: 'newEvent' | 'startingSoon') => {
+  const topicName = (id: string) => state.topics.find((t) => t.id === id)?.label ?? id;
+  const calendarChoices = (key: 'newEvent' | 'startingSoon' | 'eventChanges') => {
     const list = auto[key].calendars;
     const all = list.includes('*');
     const set = (calendars: string[]) => setAuto({ ...auto, [key]: { ...auto[key], calendars } });
@@ -279,7 +280,7 @@ function Automatic({ state, setState }: { state: AdminPushState; setState: (s: A
     <section className="card card-pad" aria-labelledby="ma-auto-h">
       <header className="ma-head">
         <h2 id="ma-auto-h">Automatic notifications</h2>
-        <p>Sent once, when something is published for the first time or a broadcast starts. Edits never notify again.</p>
+        <p>Sent once, when something is published for the first time{state.calendarEnabled ? ', an event’s date, time or place changes' : ''} or a broadcast starts. Other edits never notify.</p>
       </header>
       <div className="ma-rules">
         <div className="ma-rule">
@@ -307,6 +308,27 @@ function Automatic({ state, setState }: { state: AdminPushState; setState: (s: A
                 </select>
               </label>
             </div>
+            <div className="ma-rule">
+              <div className="ma-rule-head"><b>When an event changes</b><small>New date, time or place, or a cancellation, opens the event. Sent 10 minutes after the last edit (1 minute when it starts within 3 hours), so a quick fix doesn’t notify twice.</small></div>
+              {calendarChoices('eventChanges')}
+              <div className="ma-fields">
+                <div className="field ma-lead">
+                  <span>Only events tagged</span>
+                  <TagChips tags={auto.eventChanges.tags} suggestions={state.tags}
+                    onChange={(tags) => setAuto({ ...auto, eventChanges: { ...auto.eventChanges, tags } })} />
+                </div>
+                <label className="field ma-lead">
+                  <span>Send to</span>
+                  <select value={auto.eventChanges.topics.join(',')}
+                    onChange={(e) => setAuto({ ...auto, eventChanges: { ...auto.eventChanges, topics: e.target.value ? e.target.value.split(',') : [] } })}>
+                    <option value="">The event’s topics (Events, its calendar)</option>
+                    {/* several topics can only come from the API: keep them choosable */}
+                    {auto.eventChanges.topics.length > 1 && <option value={auto.eventChanges.topics.join(',')}>{auto.eventChanges.topics.map(topicName).join(', ')}</option>}
+                    {state.topics.map((t) => <option key={t.id} value={t.id}>{t.label}</option>)}
+                  </select>
+                </label>
+              </div>
+            </div>
           </>
         )}
         <div className="ma-rule">
@@ -329,6 +351,34 @@ function Automatic({ state, setState }: { state: AdminPushState; setState: (s: A
   );
 }
 
+// Chips for the rule's tags; the box adds one on Enter, a comma or leaving it
+// (suggestions: the site's tags). Empty = every event in the chosen calendars.
+function TagChips({ tags, suggestions, onChange }: { tags: string[]; suggestions: string[]; onChange: (tags: string[]) => void }) {
+  const [draft, setDraft] = useState('');
+  const list = useId();
+  const add = () => {
+    const t = draft.replace(/,/g, ' ').trim();
+    if (t && !tags.some((x) => x.toLowerCase() === t.toLowerCase())) onChange([...tags, t]);
+    setDraft('');
+  };
+  return (
+    <div className="ma-tags">
+      {tags.map((t) => (
+        <span key={t} className="ma-tag">{t}<button type="button" aria-label={`Remove ${t}`} onClick={() => onChange(tags.filter((x) => x !== t))}>✕</button></span>
+      ))}
+      {tags.length < 20 && (
+        <input type="text" list={list} value={draft} maxLength={100} placeholder={tags.length ? '' : 'Any tag'} aria-label="Add a tag"
+          onChange={(e) => setDraft(e.target.value)} onBlur={add}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); add(); }
+            if (e.key === 'Backspace' && !draft && tags.length) onChange(tags.slice(0, -1));
+          }} />
+      )}
+      <datalist id={list}>{suggestions.filter((s) => !tags.some((t) => t.toLowerCase() === s.toLowerCase())).map((s) => <option key={s} value={s} />)}</datalist>
+    </div>
+  );
+}
+
 // ---- audience -----------------------------------------------------------------
 
 function Audience({ state, topicLabel }: { state: AdminPushState; topicLabel: (id: string) => string }) {