@acms-subir/core 0.3.34 → 0.3.35

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @acms-subir/core
 
+## 0.3.35
+
+### Patch Changes
+
+- 85f91a1: A new automatic notification in **Admin → Mobile app**: **When an event changes**, off unless you choose calendars (all public calendars or some, like "Starting soon"). People hear when a published event's next date or time moves ("Now Sun, Oct 26, 10:30 AM (was 9:00 AM)"), its place changes ("New place: Fellowship Hall"), the whole event is cancelled, or a date of a repeating event is cancelled ("Cancelled on Sun, Oct 26", which opens that date). It goes out in each phone's language (English, Spanish, French, German or Portuguese, with the event's translated title) 10 minutes after the last edit, compared with what people last knew, so several quick edits send one notice and an edit undone in time sends none. When the date it touches starts within 3 hours, it waits only a minute, and it isn't sent once that date has started (for a move, once the new time has started).
+
+  - **Only events tagged** narrows the rule to events with one of a few tags (any case), and **Send to** picks topics instead of the event's own (Events and its calendar), for example classes tagged "Class" in a shared rooms calendar, sent to a site topic `classes`.
+  - Every way of changing an event counts: the editor's Update, dragging on the schedule, cancelling a date, the API and agents. Other edits, restoring a date, un-cancelling, past events and events in private or unlisted calendars never notify.
+  - No double push: the change notice is skipped when an announcement whose button opens the same event went up with a push in the last hour, and the announcement composer says when an automatic change notice for the event it links to went out in the last 2 hours.
+  - While the rule sends to the event's own topics, the Events topic is called "Events and changes" in apps (also in Spanish, French, German and Portuguese).
+  - Taps open the event as before; `data.change` says what changed and `source` is `change`. Migration 59.
+
+- 6b83f1e: The website's built-in words now follow the page's language, in English, Spanish, French, German and Portuguese (other languages stay in English). On `/es` pages, and on a site whose main language is Spanish, these were still in English: the live bar, header marker and floating player; the live video card, including its times ("empezó hace 5 min", "en 3 h") and the updates it shows while the page is open; the skip link; the menu and dark-mode buttons; the footer's Read and Site columns; the automatic Privacy, Terms, Search, Home and Links labels; the code copy button; and the gallery's close button. Screen-reader labels are translated too. Live times use the page's language. Search also comes in French, German and Portuguese now. Menu items you created keep their own labels.
+
 ## 0.3.34
 
 ### Patch Changes

package/cli/migrations.generated.mjs

@@ -1105,7 +1105,13 @@ var MIGRATIONS = [
     ...contentVersionTriggers("settings", [...CONTENT_VERSION_COLUMNS.settings, "links_verified", "links_avatar_shape", "links_avatar_fit", "links_avatar_scale", "legal"])
   ] },
   // announcements show on public pages, the banner and the app API
-  { version: 58, statements: [...ANNOUNCEMENT_TABLE, ...contentVersionTriggers("announcements", ANNOUNCEMENT_VISIBLE_COLUMNS)] }
+  { version: 58, statements: [...ANNOUNCEMENT_TABLE, ...contentVersionTriggers("announcements", ANNOUNCEMENT_VISIBLE_COLUMNS)] },
+  // event-change notices (PushAuto.eventChanges) wait in push_queue until the
+  // edits settle: payload = the schedule people last knew, due_at = send time
+  { version: 59, statements: [
+    `ALTER TABLE push_queue ADD COLUMN payload TEXT`,
+    `ALTER TABLE push_queue ADD COLUMN due_at INTEGER`
+  ] }
 ];
 var CURRENT_CONTENT_VERSION_COLUMNS = {
   ...CONTENT_VERSION_COLUMNS,

package/docs/mobile.md

@@ -272,8 +272,8 @@ keyed by `locale`.
 ## Push notifications
 
 Optional; the owner sends them from **Admin → Mobile app** (manual messages
-plus automatic ones: new post, new event, "starting soon", "we're live"). The
-app only registers and chooses topics; it never sends.
+plus automatic ones: new post, new event, "starting soon", event changes,
+"we're live"). The app only registers and chooses topics; it never sends.
 
 1. Site: `acms({ mobile: { push: true } })` in `astro.config.mjs` (off by
    default; `/api/v1/devices` and `/api/v1/push/topics` 404 until then).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.34",
+  "version": "0.3.35",
   "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 }) {

package/src/layouts/Site.astro

@@ -12,6 +12,8 @@ import { announcementPath, localizeAnnouncement } from '../lib/announcements/ser
 import { announcementStrings } from '../lib/announcements/words';
 import { SEARCH } from '../lib/search-config';
 import { searchStrings } from '../lib/search-i18n';
+import { siteStrings } from '../lib/site-words';
+import { liveStrings } from '../lib/live/words';
 import { effectiveSettings, effectiveNav, resolvePreview } from '../lib/designPreview';
 import { diffDesign } from '../lib/designDiff';
 import { getTheme } from '../lib/theme';
@@ -71,10 +73,19 @@ const compareUrl = (live: boolean) => {
 const daysLeft = preview.expiresAt ? Math.max(1, Math.ceil((preview.expiresAt - Date.now()) / 86_400_000)) : 0;
 const versionDate = preview.versionAt ? new Date(preview.versionAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '';
 const design = resolveDesign(settings);
+// the path the visitor sees (/es/… is rewritten to the shared route by the middleware)
+const current = (Astro.locals as { acmsPath?: string }).acmsPath ?? Astro.url.pathname;
+// with i18n configured, the request path decides the document language; the
+// locale setting (a date-formatting concern) stays the fallback
+const reqLocale = I18N.enabled ? requestLocale(new URL(current, Astro.url), Astro.locals) : '';
+const htmlLang = reqLocale || siteLang(settings);
+// built-in words (skip link, menus, footer columns, legal links) follow it too
+const words = siteStrings(htmlLang);
+const liveWords = liveStrings(htmlLang);
 const navPages = pages.filter((p) => p.status === 'published' && !p.isHome);
 const headerNav = navItems.filter((n) => n.area === 'header');
 const footerNav = navItems.filter((n) => n.area === 'footer').map(n => ({ label: n.label, url: n.url }));
-if (LEGAL.enabled) for (const [url, label] of [['/privacy', 'Privacy'], ['/terms', 'Terms']]) {
+if (LEGAL.enabled) for (const [url, label] of [['/privacy', words.privacy], ['/terms', words.terms]]) {
   if (!footerNav.some(n => n.url.replace(/\/$/, '') === url)) footerNav.push({ url, label });
 }
 const socialNav = navItems.filter((n) => n.area === 'social').map((n) => {
@@ -90,17 +101,15 @@ const isCurrent = (url: string) =>
 const headerLinks: { label: string; url: string }[] = headerNav.length > 0
   ? headerNav.map((n) => ({ label: n.label, url: n.url }))
   : [
-      { label: 'Home', url: '/' },
+      { label: words.home, url: '/' },
       ...navPages.map((p) => ({ label: p.title, url: `/${p.slug}` })),
       ...Object.values(CONTENT.collections).map((c) => ({ label: c.plural, url: c.base })),
-      { label: 'Links', url: '/links' },
+      { label: words.links, url: '/links' },
     ];
 const tokens = design.tokens;
 // the visitor scheme toggle only exists when the theme follows the OS
 const schemeToggle = tokens.scheme === 'auto';
 
-// the path the visitor sees (/es/… is rewritten to the shared route by the middleware)
-const current = (Astro.locals as { acmsPath?: string }).acmsPath ?? Astro.url.pathname;
 const fullTitle = exactTitle && title ? title : title ? `${title} · ${settings.siteTitle}` : settings.siteTitle;
 // the columns footer already shows the tagline beside the brand, so its
 // default bottom line is just the copyright
@@ -122,14 +131,10 @@ const annKey = showAnnouncement
   : '';
 const canonical = origin + canonicalPath(current);
 const metaDescription = description || settings.tagline || undefined;
-// with i18n configured, the request path decides the document language; the
-// locale setting (a date-formatting concern) stays the fallback
-const reqLocale = I18N.enabled ? requestLocale(new URL(current, Astro.url), Astro.locals) : '';
 // same page, other language; internal links stay in the visitor's language
 const barePath = stripLocale(current);
 const inLang = reqLocale && reqLocale !== I18N.defaultLocale ? reqLocale : '';
 const lnk = (url: string) => (inLang && /^\/(?!\/|media\/|rss\.xml|sitemap|admin|api|_)/.test(url) ? localePath(url, inLang) : url);
-const htmlLang = reqLocale || siteLang(settings);
 // pinned announcements (Admin → Announcements) take the bar's place while
 // they're up, urgent first; each one is closed on its own (remembered per id)
 const annWords = announcementStrings(htmlLang);
@@ -152,7 +157,7 @@ const searchAction = reqLocale && reqLocale !== I18N.defaultLocale ? `/${reqLoca
 // theme asks for it (footer: simple).
 const readLinks = [
   ...Object.values(CONTENT.collections).map((c) => ({ label: c.plural, url: c.base })),
-  ...(SEARCH.enabled ? [{ label: 'Search', url: searchAction }] : []),
+  ...(SEARCH.enabled ? [{ label: searchT.label, url: searchAction }] : []),
   { label: 'RSS', url: '/rss.xml' },
 ];
 // a theme's templates/header.astro / footer.astro get this instead of core markup
@@ -259,10 +264,10 @@ const homeJsonLd =
   <body>
     {liveSignals?.bar && (
       <div class="pc-live-bar" data-live-bar hidden role="status">
-        <span class="pc-live-mark">Live now</span>
+        <span class="pc-live-mark">{liveWords.bar}</span>
         <span class="pc-live-bar-title" data-live-bar-title></span>
-        <a data-live-bar-watch href="#">Watch →</a>
-        <button type="button" class="pc-live-x" aria-label="Dismiss live notice">✕</button>
+        <a data-live-bar-watch href="#">{liveWords.watch}</a>
+        <button type="button" class="pc-live-x" aria-label={liveWords.dismissBar}>✕</button>
       </div>
     )}
     {pinnedBars.map((b) => (
@@ -297,7 +302,7 @@ const homeJsonLd =
       <div class="announcement-bar" data-ann-key={ann.dismissible ? annKey : undefined} hidden={ann.dismissible || undefined}>
         {annLink ? <a href={annLink}>{ann.text}</a> : <span>{ann.text}</span>}
         {ann.dismissible && (
-          <button type="button" class="announcement-x" aria-label="Dismiss announcement">✕</button>
+          <button type="button" class="announcement-x" aria-label={annWords.dismiss}>✕</button>
         )}
       </div>
     )}
@@ -317,7 +322,7 @@ const homeJsonLd =
         })();
       </script>
     )}
-    {!bare && <a class="skip-link" href="#main">Skip to content</a>}
+    {!bare && <a class="skip-link" href="#main">{words.skip}</a>}
     {!bare && HeaderTpl && <HeaderTpl site={chrome} />}
     {!bare && !HeaderTpl && (
       <header class="site-header" data-style={tokens.header}>
@@ -325,7 +330,7 @@ const homeJsonLd =
           <a class="brand" href={reqLocale ? localeHomeUrl(reqLocale) : '/'}>
             <SiteLogo title={settings.siteTitle} logo={settings.siteLogo} logoDark={settings.siteLogoDark} />
           </a>
-          <nav class="site-nav" aria-label="Main">
+          <nav class="site-nav" aria-label={words.main}>
             {headerLinks.map((n) => (
               <a
                 href={lnk(n.url)}
@@ -336,7 +341,7 @@ const homeJsonLd =
             ))}
           </nav>
           <div class="site-tools">
-            {liveSignals?.header && <a class="site-live" data-live-header href="#" hidden>Live</a>}
+            {liveSignals?.header && <a class="site-live" data-live-header href="#" hidden>{liveWords.marker}</a>}
             {showSearch && (
               <a class="pc-search-trigger" href={searchAction} data-search-open aria-label={searchT.label}>
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.6-3.6" /></svg>
@@ -345,7 +350,7 @@ const homeJsonLd =
               </a>
             )}
             {I18N.enabled && (
-              <span class="lang-switch" role="group" aria-label="Language">
+              <span class="lang-switch" role="group" aria-label={words.language}>
                 {I18N.locales.map((l) => (
                   <a
                     href={localePath(barePath, l)}
@@ -357,12 +362,12 @@ const homeJsonLd =
               </span>
             )}
             {schemeToggle && (
-              <button type="button" class="icon-btn scheme-toggle" data-scheme-toggle aria-label="Toggle dark mode">
+              <button type="button" class="icon-btn scheme-toggle" data-scheme-toggle aria-label={words.scheme}>
                 <svg class="i-moon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z" /></svg>
                 <svg class="i-sun" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" /></svg>
               </button>
             )}
-            <button type="button" class="icon-btn menu-btn" data-menu-open aria-label="Open menu" aria-haspopup="dialog">
+            <button type="button" class="icon-btn menu-btn" data-menu-open aria-label={words.openMenu} aria-haspopup="dialog">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 8h16M4 16h16" /></svg>
             </button>
           </div>
@@ -370,9 +375,9 @@ const homeJsonLd =
       </header>
     )}
     {!bare && (
-      <dialog class="site-menu" aria-label="Menu">
+      <dialog class="site-menu" aria-label={words.menu}>
         <div class="site-menu-grab" aria-hidden="true"></div>
-        <nav aria-label="Main">
+        <nav aria-label={words.main}>
           {headerLinks.map((n) => (
             <a
               href={lnk(n.url)}
@@ -384,7 +389,7 @@ const homeJsonLd =
         </nav>
         <div class="site-menu-foot">
           {I18N.enabled ? (
-            <span class="lang-switch" role="group" aria-label="Language">
+            <span class="lang-switch" role="group" aria-label={words.language}>
               {I18N.locales.map((l) => (
                 <a href={localePath(barePath, l)} lang={l} class:list={[{ on: l === (reqLocale || I18N.defaultLocale) }]}>{l.toUpperCase()}</a>
               ))}
@@ -392,12 +397,12 @@ const homeJsonLd =
           ) : <span />}
           <span class="site-menu-actions">
             {schemeToggle && (
-              <button type="button" class="icon-btn scheme-toggle" data-scheme-toggle aria-label="Toggle dark mode">
+              <button type="button" class="icon-btn scheme-toggle" data-scheme-toggle aria-label={words.scheme}>
                 <svg class="i-moon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z" /></svg>
                 <svg class="i-sun" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" /></svg>
               </button>
             )}
-            <button type="button" class="icon-btn" data-menu-close aria-label="Close menu">
+            <button type="button" class="icon-btn" data-menu-close aria-label={words.closeMenu}>
               <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" /></svg>
             </button>
           </span>
@@ -405,7 +410,7 @@ const homeJsonLd =
       </dialog>
     )}
     {!bare && (
-      <script is:inline>
+      <script is:inline define:vars={{ copyLabel: words.copy, copiedLabel: words.copied, closeLabel: words.close }}>
         (() => {
           // phone menu: a bottom sheet on <dialog> (focus trap + Esc for free)
           const menu = document.querySelector('dialog.site-menu');
@@ -428,13 +433,13 @@ const homeJsonLd =
             const b = document.createElement('button');
             b.type = 'button';
             b.className = 'code-copy';
-            b.textContent = 'Copy';
+            b.textContent = copyLabel;
             b.addEventListener('click', async () => {
               try {
                 await navigator.clipboard.writeText((pre.querySelector('code') || pre).innerText);
-                b.textContent = 'Copied';
+                b.textContent = copiedLabel;
                 b.classList.add('is-done');
-                setTimeout(() => { b.textContent = 'Copy'; b.classList.remove('is-done'); }, 1400);
+                setTimeout(() => { b.textContent = copyLabel; b.classList.remove('is-done'); }, 1400);
               } catch {}
             });
             pre.append(b);
@@ -448,7 +453,8 @@ const homeJsonLd =
               if (!box) {
                 box = document.createElement('dialog');
                 box.className = 'pc-lightbox';
-                box.innerHTML = '<img alt=""><button type="button" aria-label="Close">\u2715</button>';
+                box.innerHTML = '<img alt=""><button type="button">\u2715</button>';
+                box.querySelector('button').setAttribute('aria-label', closeLabel);
                 box.addEventListener('click', () => box.close());
                 document.body.append(box);
               }
@@ -727,7 +733,7 @@ const homeJsonLd =
                 <a class="brand" href="/"><SiteLogo title={settings.siteTitle} logo={settings.siteLogo} logoDark={settings.siteLogoDark} /></a>
                 {settings.tagline && <p class="footer-blurb">{settings.tagline}</p>}
                 {socialNav.length > 0 && (
-                  <nav class="social-nav" aria-label="Social">
+                  <nav class="social-nav" aria-label={words.social}>
                     {socialNav.map((n) => (
                       <a href={lnk(n.url)} class:list={[{ 'has-icon': n.icon }]} aria-label={n.icon ? n.label : undefined} title={n.icon ? n.label : undefined} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener me' : undefined}>
                         {n.icon ? <Fragment set:html={n.icon} /> : n.label}
@@ -736,13 +742,13 @@ const homeJsonLd =
                   </nav>
                 )}
               </div>
-              <nav class="footer-col" aria-label="Read">
-                <h2>Read</h2>
+              <nav class="footer-col" aria-label={words.read}>
+                <h2>{words.read}</h2>
                 {readLinks.map((n) => <a href={lnk(n.url)}>{n.label}</a>)}
               </nav>
               {footerNav.length > 0 && (
-                <nav class="footer-col" aria-label="Site">
-                  <h2>Site</h2>
+                <nav class="footer-col" aria-label={words.site}>
+                  <h2>{words.site}</h2>
                   {footerNav.map((n) => (
                     <a href={lnk(n.url)} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener' : undefined}>{n.label}</a>
                   ))}
@@ -759,7 +765,7 @@ const homeJsonLd =
                 </nav>
               )}
               {socialNav.length > 0 && (
-                <nav class="social-nav" aria-label="Social">
+                <nav class="social-nav" aria-label={words.social}>
                   {socialNav.map((n) => (
                     <a href={lnk(n.url)} class:list={[{ 'has-icon': n.icon }]} aria-label={n.icon ? n.label : undefined} target={isExternal(n.url) ? '_blank' : undefined} rel={isExternal(n.url) ? 'noopener me' : undefined}>
                       {n.icon ? <Fragment set:html={n.icon} /> : n.label}
@@ -777,9 +783,9 @@ const homeJsonLd =
       <div class="pc-live-dock" data-live-dock hidden>
         <a href="#">
           <span class="pc-live-dock-thumb"><img alt="" decoding="async" hidden /></span>
-          <span><span class="pc-live-mark">Live</span><b data-live-dock-title></b></span>
+          <span><span class="pc-live-mark">{liveWords.marker}</span><b data-live-dock-title></b></span>
         </a>
-        <button type="button" class="pc-live-x" aria-label="Dismiss live player">✕</button>
+        <button type="button" class="pc-live-x" aria-label={liveWords.dismissDock}>✕</button>
       </div>
     )}
     <script>

package/src/lib/announcements/api.ts

@@ -8,14 +8,14 @@ import { siteOrigin } from '../seo';
 import { pageQuery, queryParams } from '../mobile/http';
 import { localeOnlyQuery, localeQuery, mobileLocale } from '../mobile/locale';
 import { PUSH } from '../push/config';
-import { deviceLocale, knownTopics, pushTopics, siteOriginOf } from '../push/service';
+import { deviceLocale, knownTopics, pushTopics, siteOriginOf, sitePath } from '../push/service';
 import { linkTargets } from '../push/api';
 import { ANNOUNCEMENTS } from './config';
 import { announcementJson, isLive, publishAnnouncement, type PublishOptions } from './service';
 import { announcementStrings } from './words';
 import { ANNOUNCEMENT_KINDS, AnnouncementInput, AnnouncementKind, LIMITS, type Announcement, type AnnouncementWords } from './types';
 
-const DAY = 86_400_000;
+const HOUR = 3_600_000, DAY = 24 * HOUR;
 export function requireAnnouncements() {
   if (!ANNOUNCEMENTS.enabled) throw new ApiError(404, 'Announcements are off on this site.');
 }
@@ -70,18 +70,20 @@ export function defaultAudience(known: Set<string>): Record<AnnouncementKind, st
 export async function adminAnnouncementsState(repo: ContentRepository, url: URL) {
   const now = Date.now();
   const settings = await repo.getSettings();
-  const [announcements, topics, known, stats, links, sentThisWeek] = await Promise.all([
+  const [announcements, topics, known, stats, links, sentThisWeek, changes] = await Promise.all([
     repo.announcements.list(),
     PUSH.enabled ? pushTopics(repo) : Promise.resolve([]),
     PUSH.enabled ? knownTopics(repo) : Promise.resolve(new Set<string>()),
     PUSH.enabled ? repo.push.stats(now) : Promise.resolve(null),
     linkTargets(repo),
     PUSH.enabled ? repo.push.countSent(['manual', 'announcement'], now - 7 * DAY) : Promise.resolve(0),
+    PUSH.enabled ? repo.push.sentSince('change', now - 2 * HOUR) : Promise.resolve([]),
   ]);
   const main = I18N.enabled ? I18N.defaultLocale : (settings.locale || 'en');
+  const origin = siteOriginOf(settings, url.origin);
   return {
     now,
-    site: { name: settings.siteTitle, icon: settings.siteFavicon, origin: siteOriginOf(settings, url.origin), timezone: settings.timezone || 'UTC' },
+    site: { name: settings.siteTitle, icon: settings.siteFavicon, origin, timezone: settings.timezone || 'UTC' },
     languages: { main: { code: main, name: localeName(main) }, extra: extraLanguages().map((code) => ({ code, name: localeName(code) })) },
     kinds: ANNOUNCEMENT_KINDS.map((id) => ({ id, label: announcementStrings('en').kinds[id] })),
     limits: LIMITS,
@@ -98,6 +100,8 @@ export async function adminAnnouncementsState(repo: ContentRepository, url: URL)
     // the push audience each kind starts with in the composer (['*'] = everyone)
     defaultAudience: defaultAudience(known),
     links,
+    // automatic event-change notices of the last 2 hours: a push whose button opens the same event repeats one
+    recentChanges: changes.map((n) => ({ path: sitePath(n.url, origin), at: n.createdAt, title: n.title })).filter((c) => c.path),
     announcements,
   };
 }

package/src/lib/announcements/store.ts

@@ -68,6 +68,10 @@ export class AnnouncementStore {
   async due(now: number, limit = 10): Promise<Announcement[]> {
     return (await this.all(`SELECT * FROM announcements WHERE status='scheduled' AND COALESCE(publish_at,0)<=? ORDER BY publish_at LIMIT ?`, [now, limit])).map(announcement);
   }
+  /** Ones that went up with a push since `since` (an event-change notice about the same event is skipped). */
+  async pushedSince(since: number): Promise<Announcement[]> {
+    return (await this.all(`SELECT * FROM announcements WHERE notification_id IS NOT NULL AND published_at>=? ORDER BY published_at DESC LIMIT 50`, [since])).map(announcement);
+  }
   /** Published ones past their end: they come down. */
   async endExpired(now: number): Promise<number> {
     return (await this.all(`UPDATE announcements SET status='ended', updated_at=? WHERE status='published' AND show_until IS NOT NULL AND show_until<=? RETURNING id`, [now, now])).length;