@acms-subir/core 0.3.54 → 0.3.56

package/src/pages/admin/calendar/settings.astro

@@ -16,12 +16,16 @@ import { placeUsage, savePlace } from '../../../lib/maps/places';
 import { parseMapLink } from '../../../lib/maps/parse';
 import { ApiError } from '../../../lib/api';
 import type { Place } from '../../../lib/schema';
-import { forbiddenUnless } from '../../../lib/permissions/access';
+import { accessFor, forbiddenUnless } from '../../../lib/permissions/access';
+import { googleSyncState } from '../../../lib/calendar/google/service';
+import { PAUSE_WORDS } from '../../../lib/calendar/google/links';
+import type { GcalLink } from '../../../lib/calendar/google/types';
 
 // Calendar settings — one page behind the ⚙ on Schedule and Bookings:
 // calendars (groups + colors), saved places (picked in an event's Where),
-// subscribed calendars (read-only, synced in),
-// share links (out to Google/Apple/Outlook), booking approval, defaults.
+// subscribed calendars (read-only, synced in), the two-way Google Calendar
+// sync (its forms post to /admin/calendar/google), share links (out to
+// Google/Apple/Outlook), booking approval, defaults.
 // Replaces the old Calendars page and the duplicate subscribe dialogs.
 if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
 
@@ -196,8 +200,51 @@ const I = {
   ext: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
   pin: 'M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12zM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
 };
+// Synced with Google: connecting needs "Connected services", linking and reviewing "Manage rooms and calendars"
+const access = await accessFor(Astro.request, Astro.cookies, repo);
+const canConnect = access?.can('services.manage') ?? false;
+const canLink = access?.can('schedule.manage') ?? false;
+const canUse = canLink || (access?.can('content.publish') ?? false);
+const google = await googleSyncState(repo, Astro.url, Astro.locals);
+const gAccount = google.account;
+const gConnected = gAccount?.status === 'connected';
+const gStep = Astro.url.searchParams.get('google') ?? '';
+const errorNotice = Astro.url.searchParams.get('error') ?? '';
+const calById = new Map(calendars.map((c) => [c.id, c]));
+const roomName = new Map(google.resources.map((r) => [r.id, r.name]));
+const freeGoogle = (gAccount?.calendars ?? []).filter((c) => !google.links.some((l) => l.googleId === c.id));
+const ARROW: Record<GcalLink['direction'], string> = { both: '⇄', out: '→', in: '←' };
+const DIRECTIONS: [GcalLink['direction'], string, string][] = [
+  ['both', 'Both ways', 'Edits on either side copy over.'],
+  ['out', 'Site → Google', 'Google mirrors the site. Start here, then switch to both ways.'],
+  ['in', 'Google → site', 'The site follows Google. Site edits stay on the site.'],
+];
+const agoText = (ts: number) => {
+  const m = Math.max(0, Math.round((Date.now() - ts) / 60_000));
+  return m < 1 ? 'just now' : m < 60 ? `${m} min ago` : m < 1440 ? `${Math.round(m / 60)} h ago` : `${Math.round(m / 1440)} d ago`;
+};
+const linkLine = (l: (typeof google.links)[number]) => [
+  DIRECTIONS.find(([d]) => d === l.direction)![1] + (l.direction === 'out' ? ' only' : ''),
+  l.roomIds.length ? `holds ${l.roomIds.map((r) => roomName.get(r) ?? 'a deleted room').join(' and ')}` : 'the whole calendar',
+  l.noRoom && l.roomIds.length ? 'also gets events without a room' : '',
+  ...l.rules.map((r) => `${r.prefix} ⇄ ${r.tag}`),
+  l.state === 'active' && l.lastOkAt ? `last synced ${agoText(l.lastOkAt)}` : '',
+  `${l.pairs} event${l.pairs === 1 ? '' : 's'}`,
+].filter(Boolean).join(' · ');
+const linkState = (l: (typeof google.links)[number]) =>
+  l.state === 'matching' ? { tone: 'warn', label: 'Waiting for the first match' }
+  : l.state === 'paused' ? { tone: 'muted', label: PAUSE_WORDS[l.pausedReason] ?? 'Paused' }
+  : !gConnected ? { tone: 'bad', label: 'Reconnect Google' }
+  : l.error ? { tone: 'bad', label: 'Not syncing' }
+  : { tone: 'ok', label: 'In sync' };
+const tz = settings.timezone || 'UTC';
+const dayOf = (ts: number) => new Intl.DateTimeFormat('en-CA', { timeZone: tz }).format(ts);
+const logTime = (ts: number) => new Intl.DateTimeFormat(settings.locale || 'en', dayOf(ts) === dayOf(Date.now()) ? { hour: 'numeric', minute: '2-digit', timeZone: tz } : { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', timeZone: tz }).format(ts);
+const LOG_DIRECTION: Record<string, string> = { in: '← from Google', out: '→ to Google', clash: 'Clash', info: 'Note' };
+const startDefault = new Date(Date.now() - 30 * 86_400_000).toISOString().slice(0, 10);
+
 const sections = [
-  ['calendars', 'Calendars'], ['event-images', 'Event images'], ['places', 'Places'], ['subscribed', 'Subscribed calendars'], ['share', 'Share links'],
+  ['calendars', 'Calendars'], ['event-images', 'Event images'], ['places', 'Places'], ['subscribed', 'Subscribed calendars'], ['google', 'Synced with Google'], ['share', 'Share links'],
   ...(bookingsEnabled() ? [['bookings', 'Bookings']] : []), ['defaults', 'Defaults'],
 ] as const;
 ---
@@ -212,6 +259,7 @@ const sections = [
   </div>
 
   {notice && <p class="notice" role="status">{notice}</p>}
+  {errorNotice && <p class="notice warn" role="alert">{errorNotice}</p>}
 
   <div class="cs">
     <nav class="cs-nav" aria-label="Sections">
@@ -306,6 +354,119 @@ const sections = [
         ))}
       </section>
 
+      <!-- Synced with Google -->
+      <section class="cs-sect" id="google">
+        <header>
+          <div><h2>Synced with Google</h2><p>Editable copies of your calendars in Google Calendar. Changes on either side show up on the other within a few minutes.</p></div>
+          {gConnected && canLink && <button class="btn" type="button" data-modal="gcal-link-new" disabled={!freeGoogle.length} title={freeGoogle.length ? undefined : 'Every Google calendar this account can edit is linked'}>+ Link a Google calendar</button>}
+        </header>
+        {gStep === 'finish' && canConnect && (
+          <form method="post" action="/admin/calendar/google" class="cs-form" data-gcal-finish>
+            <input type="hidden" name="op" value="finish" />
+            <p class="gcal-note">Google sent you back. Finishing the connection…</p>
+            <div><button class="btn primary" type="submit">Finish connecting</button></div>
+          </form>
+        )}
+        {gStep === 'error' && <p class="gcal-note is-bad">Google didn’t finish the sign-in. Check that the return address in Google Cloud matches exactly, then connect again.</p>}
+        {!google.encryptionReady && <p class="gcal-note is-bad">Set SESSION_SECRET (or LIVE_ENCRYPTION_KEY) to at least 32 random characters on your host before connecting Google.</p>}
+        {!gAccount || gAccount.status === 'setup' ? (
+          <div>
+            <div class="cs-row">
+              <i class="gcal-dot" aria-hidden="true" />
+              <div class="cs-main"><b>Connect a Google account</b><small>Use the account that owns your calendars (for a church, its Google Workspace account). The site asks to see and edit events, and to list your calendars. Nothing else.</small></div>
+              <div class="cs-actions">
+                {canConnect ? (gAccount && (
+                  <form method="post" action="/admin/calendar/google"><input type="hidden" name="op" value="connect" /><button class="btn primary" type="submit">Connect Google</button></form>
+                )) : <small class="hint">Someone who can manage connected services connects Google.</small>}
+              </div>
+            </div>
+            {canConnect && (
+              <details class="gcal-steps" open={!gAccount}>
+                <summary>Before you connect: Google Cloud setup</summary>
+                <ol>
+                  <li>Use the Google Cloud project you made for YouTube (or any project) and add a <b>second OAuth client</b> (type “Web application”) named “Calendar”. With its own client, disconnecting YouTube can’t cut off the calendar.</li>
+                  <li>Turn on the <b>Google Calendar API</b> in that project.</li>
+                  <li>Add this return address under “Authorized redirect URIs”:
+                    <span class="cs-share gcal-copy"><input type="text" class="mono" readonly value={google.callbackUrl} aria-label="Return address" /><button class="btn sm" type="button" data-copy={google.callbackUrl}>Copy</button></span>
+                  </li>
+                  <li>Audience: <b>Internal</b> if the project belongs to your Google Workspace organization (no “unverified app” screen, no expiry). Otherwise choose <b>External</b> and set it to <b>In production</b>: in “Testing”, Google ends the connection every 7 days.</li>
+                  <li>If your Workspace admin limits outside apps, mark this one as trusted in the Google Admin console → Security → API controls.</li>
+                </ol>
+                <form method="post" action="/admin/calendar/google" class="gcal-client">
+                  <input type="hidden" name="op" value="client" />
+                  <div class="field-row">
+                    <label class="field"><span>Client ID</span><input class="mono" type="text" name="clientId" value={gAccount?.clientId ?? ''} placeholder="…apps.googleusercontent.com" required /></label>
+                    <label class="field"><span>Client secret</span><input class="mono" type="password" name="clientSecret" placeholder={gAccount ? 'Saved: leave empty to keep it' : ''} autocomplete="off" /></label>
+                  </div>
+                  <div><button class="btn" type="submit">{gAccount ? 'Save client' : 'Save, then connect'}</button></div>
+                </form>
+              </details>
+            )}
+          </div>
+        ) : (
+          <div>
+            <div class="cs-row">
+              <i class={`gcal-dot ${gConnected ? 'ok' : 'bad'}`} aria-hidden="true" />
+              <div class="cs-main">
+                <b>{gAccount.email || 'Google account'}</b>
+                <small>{gConnected ? `Connected ${gAccount.connectedAt ? agoText(gAccount.connectedAt) : ''} · can see and edit events` : gAccount.error || 'Google refused the saved sign-in. Changes wait until you reconnect.'}</small>
+              </div>
+              <div class="cs-actions">
+                <span class={`gcal-chip ${gConnected ? 'ok' : 'bad'}`}>{gConnected ? 'Connected' : 'Reconnect Google'}</span>
+                {canConnect && !gConnected && <form method="post" action="/admin/calendar/google"><input type="hidden" name="op" value="connect" /><button class="btn sm primary" type="submit">Reconnect</button></form>}
+                {canLink && gConnected && <form method="post" action="/admin/calendar/google"><input type="hidden" name="op" value="refresh" /><button class="btn sm ghost" type="submit" title="List the Google calendars this account can edit again">Refresh calendars</button></form>}
+                {canConnect && <form method="post" action="/admin/calendar/google"><input type="hidden" name="op" value="disconnect" /><button class="btn sm ghost" type="submit" data-confirm="Disconnect Google? Links pause, and every event stays in both places.">Disconnect</button></form>}
+              </div>
+            </div>
+            {google.links.map((l) => { const st = linkState(l); const cal = calById.get(l.calendarId); return (
+              <div class="cs-row" id={`gcal-${l.id}`}>
+                <i class="cal-dot lg" style={`background:${safeColor(cal?.color ?? '#8a8a8a')}`} aria-hidden="true" />
+                <div class="cs-main">
+                  <b>{cal?.name ?? 'A deleted calendar'} <span aria-label={l.direction === 'both' ? 'syncs both ways with' : l.direction === 'out' ? 'copies to' : 'copies from'}>{ARROW[l.direction]}</span> {l.googleName}</b>
+                  <small>{linkLine(l)}</small>
+                  {l.state === 'active' && l.error && <small class="gcal-err">{l.error}</small>}
+                  {l.guard && <small class="gcal-err">This copy isn’t the site that linked Google ({l.siteUrl}). It stays paused here.</small>}
+                </div>
+                <div class="cs-actions">
+                  <span class={`gcal-chip ${st.tone}`}>{st.label}</span>
+                  {canLink && (l.state === 'matching'
+                    ? <a class="btn sm primary" href={`/admin/calendar/google/match?link=${encodeURIComponent(l.id)}`}>Review matches</a>
+                    : <form method="post" action="/admin/calendar/google"><input type="hidden" name="link" value={l.id} /><button class="btn sm" type="submit" name="op" value={l.state === 'paused' ? 'resume' : 'sync'}
+                        data-confirm={l.pausedReason === 'restored' ? 'Resume after the restore? Google’s copies take the restored details (the site is the main calendar), replacing changes made since the backup on either side. Events Google has that the backup doesn’t come back to the site.' : undefined}>{l.state === 'paused' ? 'Resume' : 'Sync now'}</button></form>)}
+                  {canLink && <button class="btn sm ghost" type="button" data-modal={`gcal-edit-${l.id}`}>Edit</button>}
+                </div>
+              </div>
+            ); })}
+            {gConnected && !google.links.length && <p class="cs-empty">No calendars linked yet. Link one, review what’s already on both sides, then start syncing. Nothing is written before that.</p>}
+            {google.links.some((l) => l.state === 'active') && !google.scheduler.healthy && <p class="gcal-note is-bad">The scheduler hasn’t run in the last few minutes, so the sync is waiting. Check the scheduler on your host.</p>}
+            {google.queue.failing > 0 && <p class="gcal-note">{google.queue.failing} change{google.queue.failing === 1 ? '' : 's'} waiting to go to Google after an error. They’re retried on their own.</p>}
+          </div>
+        )}
+        {google.log.length > 0 && (
+          <div class="gcal-log">
+            <div class="gcal-log-head"><b>Recent changes</b><small>Kept for 90 days</small></div>
+            <div class="gcal-table">
+              <table>
+                <thead><tr><th>When</th><th>Direction</th><th>Event</th><th>What changed</th><th><span class="sr-only">Actions</span></th></tr></thead>
+                <tbody>
+                  {google.log.map((x) => (
+                    <tr>
+                      <td class="gcal-when">{logTime(x.at)}</td>
+                      <td><span class={`gcal-dir is-${x.direction}`}>{LOG_DIRECTION[x.direction] ?? x.direction}</span></td>
+                      <td>{x.eventId ? <a href={`/admin/calendar/events/${encodeURIComponent(x.eventId)}`}>{x.title || 'Untitled event'}</a> : x.title}</td>
+                      <td>{x.summary}</td>
+                      <td>{x.direction === 'clash' && x.data && (x.data as { value?: unknown }).value && !x.resolved && canUse && (
+                        <form method="post" action="/admin/calendar/google"><input type="hidden" name="op" value="use" /><input type="hidden" name="log" value={x.id} /><button class="btn sm ghost" type="submit">Use Google’s</button></form>
+                      )}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+      </section>
+
       <!-- Share links -->
       <section class="cs-sect" id="share">
         <header>
@@ -457,6 +618,66 @@ const sections = [
     </Modal>
   ))}
 
+  {gConnected && canLink && [null, ...google.links].map((l) => (
+    <Modal id={l ? `gcal-edit-${l.id}` : 'gcal-link-new'} title={l ? `${calById.get(l.calendarId)?.name ?? 'Calendar'} ${ARROW[l.direction]} ${l.googleName}` : 'Link a Google calendar'}>
+      <form method="post" action="/admin/calendar/google" class="gcal-form">
+        <input type="hidden" name="op" value={l ? 'link-edit' : 'link-new'} />
+        {l && <input type="hidden" name="link" value={l.id} />}
+        {!l && <p class="hint">Step 1 of 2. Nothing is written yet: next you review what’s on both sides.</p>}
+        {!l && (
+          <div class="field-row">
+            <label class="field"><span>Site calendar</span>
+              <select name="calendarId" required>{natives.map((c) => <option value={c.id}>{c.name}</option>)}</select>
+            </label>
+            <label class="field"><span>Google calendar</span>
+              <select name="googleId" required>{freeGoogle.map((c) => <option value={c.id}>{c.name}{c.primary ? ' (main)' : ''}</option>)}</select>
+            </label>
+          </div>
+        )}
+        <fieldset class="gcal-fieldset">
+          <legend>Direction</legend>
+          <div class="cs-choices">
+            {DIRECTIONS.map(([d, label, note]) => (
+              <label class="cs-choice"><input type="radio" name="direction" value={d} checked={(l?.direction ?? 'both') === d} /><span><b>{label}</b><small>{note}</small></span></label>
+            ))}
+          </div>
+        </fieldset>
+        {google.resources.length > 0 && (
+          <fieldset class="gcal-fieldset">
+            <legend>This Google calendar is the room</legend>
+            {google.resources.map((r) => <label class="check-row"><input type="checkbox" name="roomIds" value={r.id} checked={l?.roomIds.includes(r.id) ?? false} /> {r.name}</label>)}
+            <label class="check-row"><input type="checkbox" name="noRoom" checked={l?.noRoom ?? false} /> Also gets this calendar’s events that hold no room</label>
+            <small class="hint">Events from Google hold the rooms you tick, and site events holding them go here. Tick none to sync the whole calendar.</small>
+          </fieldset>
+        )}
+        <fieldset class="gcal-fieldset">
+          <legend>Titles that set a tag</legend>
+          {[...(l?.rules ?? []), { prefix: '', tag: '' }, { prefix: '', tag: '' }].map((r, i) => (
+            <div class="gcal-rule">
+              <input type="text" name="rulePrefix" value={r.prefix} placeholder={i === 0 ? 'Prefix, like CLASS:' : ''} aria-label="Title prefix" maxlength="40" />
+              <span aria-hidden="true">⇄</span>
+              <input type="text" name="ruleTag" value={r.tag} placeholder={i === 0 ? 'Tag, like Class' : ''} aria-label="Tag" maxlength="80" />
+            </div>
+          ))}
+          <small class="hint">A Google title starting with the prefix gives the site event the tag, and a tagged site event gets the prefix in Google. The prefix stays in the title on both sides.</small>
+        </fieldset>
+        <label class="field"><span>Booking pages in this Google calendar <em class="hint">one title per line</em></span>
+          <textarea name="bookingTitles" rows="2" placeholder={'Band\nRehearsal Time'}>{(l?.bookingTitles ?? []).join('\n')}</textarea>
+          <small class="hint">Appointments booked on these Google booking pages come in as “Booked”, holding the room, without names or descriptions.</small>
+        </label>
+        {!l && <label class="field"><span>Start from</span><input type="date" name="startDate" value={startDefault} /><small class="hint">Events from this date on, plus repeating series still running.</small></label>}
+        <p class="hint">For every link: new Google events are published right away; deleted in Google means cancelled here; cancelled here shows as “Cancelled:” in Google. Guests are never added and Google never emails anyone.</p>
+        <div class="modal-foot">
+          {l && <button class="btn danger ghost" type="submit" name="op" value="unlink" formnovalidate data-confirm="Unlink? Every event stays in both places; linking again pairs them up.">Unlink</button>}
+          {l && l.state !== 'paused' && <button class="btn ghost" type="submit" name="op" value="pause" formnovalidate>Pause</button>}
+          <span class="spacer" />
+          <button class="btn ghost" type="button" data-close>Cancel</button>
+          <button class="btn primary" type="submit">{l ? 'Save' : 'Continue to matching'}</button>
+        </div>
+      </form>
+    </Modal>
+  ))}
+
   <Modal id="cal-new" title="New calendar" open={Astro.url.searchParams.has('new')}>
     <form method="post">
       <input type="hidden" name="op" value="create" />
@@ -542,6 +763,44 @@ const sections = [
   .cs-pinline.is-error span { color: var(--red); }
   .cs-map { margin: 0 0 4px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
   .cs-map img { display: block; width: 100%; height: auto; }
+  .gcal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); justify-self: center; }
+  .gcal-dot.ok { background: var(--green); }
+  .gcal-dot.bad { background: var(--red); }
+  .gcal-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
+  .gcal-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
+  .gcal-chip.ok::before { background: var(--green); }
+  .gcal-chip.warn::before { background: var(--amber, #c98a12); }
+  .gcal-chip.bad { color: var(--red); }
+  .gcal-chip.bad::before { background: var(--red); }
+  .gcal-err { color: var(--red) !important; }
+  .gcal-note { margin: 0; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
+  .gcal-note.is-bad { color: var(--red); }
+  .gcal-steps { padding: 4px 16px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
+  .gcal-steps summary { cursor: pointer; padding: 8px 0; font-weight: 600; color: var(--text); }
+  .gcal-steps ol { margin: 4px 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
+  .gcal-copy { margin-top: 6px; }
+  .gcal-client { display: flex; flex-direction: column; gap: 8px; }
+  .gcal-log { border-top: 1px solid var(--line); }
+  .gcal-log-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 6px; }
+  .gcal-log-head b { font-size: 13.5px; }
+  .gcal-log-head small { color: var(--muted); font-size: 12px; }
+  .gcal-table { overflow-x: auto; }
+  .gcal-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  .gcal-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 16px; border-bottom: 1px solid var(--line); }
+  .gcal-table td { padding: 8px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
+  .gcal-table tr:last-child td { border-bottom: 0; }
+  .gcal-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
+  .gcal-dir { white-space: nowrap; font-weight: 600; }
+  .gcal-dir.is-clash { color: var(--red); }
+  .gcal-form { display: flex; flex-direction: column; gap: 12px; }
+  .gcal-fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
+  .gcal-fieldset legend { color: var(--muted); font-size: 12px; padding: 0 4px; }
+  .gcal-fieldset .check-row { margin: 0; }
+  .gcal-rule { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
+  .gcal-rule input { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  #google > header .btn, .gcal-table td:last-child .btn { white-space: nowrap; }
+  .gcal-table td:nth-child(3) { min-width: 110px; }
   [hidden] { display: none !important; }
   @media (max-width: 860px) {
     .cs { grid-template-columns: 1fr; }
@@ -551,6 +810,13 @@ const sections = [
     .cs-actions, .cs-share { grid-column: 2; flex-wrap: wrap; }
     .cs-share input { width: 100%; }
     .cs-field { grid-template-columns: 1fr; gap: 4px; }
+    #google > header { flex-wrap: wrap; }
+    .gcal-table thead { display: none; }
+    .gcal-table tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
+    .gcal-table tr:last-child { border-bottom: 0; }
+    .gcal-table td { padding: 0; border: 0; }
+    .gcal-table td:nth-child(n + 3) { grid-column: 1 / -1; }
+    .gcal-table td:last-child:empty { display: none; }
   }
 </style>
 
@@ -606,6 +872,9 @@ const sections = [
     clear.addEventListener('click', () => { lat.value = ''; lng.value = ''; show('Pin removed — it’s gone when you save.'); });
   }
 
+  // back from Google's sign-in: finish it for this session at once (the button is the fallback)
+  document.querySelector<HTMLFormElement>('[data-gcal-finish]')?.requestSubmit();
+
   // approval: rules only for "unless…", the deadline only when bookings can wait
   const form = document.querySelector<HTMLFormElement>('[data-approval]');
   form?.addEventListener('change', () => {

package/src/pages/admin/integrations.astro

@@ -97,6 +97,12 @@ const SCOPE_LABEL: Record<string, string> = {
     <h2>Live video</h2><p>Connect your own Twitch or YouTube app to discover broadcasts automatically on your homepage and links page.</p>
     <a class="btn" href="/admin/live">Set up live video →</a>
   </div>
+  {CALENDAR.enabled && (
+    <div class="card" style="padding:20px;margin-bottom:20px">
+      <h2>Google Calendar</h2><p>Keep your calendars and Google Calendar in step, both ways: connect Google and link calendars in Calendar settings.</p>
+      <a class="btn" href="/admin/calendar/settings#google">Set up Google Calendar sync →</a>
+    </div>
+  )}
 
   <div class="page-head">
     <div>

package/src/pages/api/calendar/google/oauth/callback.ts

@@ -0,0 +1,16 @@
+import type { APIRoute } from 'astro';
+import { getRepo } from '../../../../../lib/repo';
+import { receiveGoogleCallback } from '../../../../../lib/calendar/google/connect';
+// Google's redirect back is a cross-site GET that may carry no usable sign-in, so, as with YouTube,
+// it only parks the code on its one-use pending state; Calendar settings then finishes it with a
+// same-origin POST bound to the session that began it. The code never enters a URL again.
+export const GET: APIRoute = async ({ locals, url }) => {
+  const headers = { 'Cache-Control': 'no-store', 'Referrer-Policy': 'no-referrer' };
+  try {
+    await receiveGoogleCallback(await getRepo(locals), url, locals);
+    return new Response(null, { status: 303, headers: { ...headers, Location: '/admin/calendar/settings?google=finish#google' } });
+  } catch {
+    // never reflect codes, tokens or Google's error text into a page or URL
+    return new Response(null, { status: 303, headers: { ...headers, Location: '/admin/calendar/settings?google=error#google' } });
+  }
+};

package/src/pages/api/v1/requests/index.ts

@@ -0,0 +1,6 @@
+import { postRequest } from '../../../../lib/mobile/requests';
+import { privateRoute } from '../../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../../lib/mobile/http';
+export const POST = privateRoute(postRequest, { write: true, status: 201 });
+export const ALL = () => methodNotAllowed('POST, OPTIONS');

package/src/pages/api/v1/requests/options.ts

@@ -0,0 +1,7 @@
+import { getRequestOptions } from '../../../../lib/mobile/requests';
+import { privateRoute } from '../../../../lib/mobile/route';
+import { methodNotAllowed } from '../../../../lib/mobile/http';
+export { preflight as OPTIONS } from '../../../../lib/mobile/http';
+// never cached: closing requests or marking a room requestable shows at once
+export const GET = privateRoute(getRequestOptions);
+export const ALL = () => methodNotAllowed('GET, OPTIONS');

package/src/pages/request/index.astro

@@ -0,0 +1,182 @@
+---
+import Site from '../../layouts/Site.astro';
+import { getRepo } from '../../lib/repo';
+import { ApiError } from '../../lib/api';
+import { readForm } from '../../lib/forms/http';
+import { I18N, localePath, requestLocale as pageLocale } from '../../lib/i18n';
+import { siteLang, siteLocale } from '../../lib/dates';
+import { LEGAL } from '../../lib/legal/config';
+import { fill } from '../../lib/live/words';
+import { REQUESTS } from '../../lib/calendar/request-config';
+import { requestOptions, submitRequest, requestLocale, type RequestRefusal } from '../../lib/calendar/request-service';
+import { requestStrings } from '../../lib/calendar/request-words';
+import { formRequest, sentSummary } from '../../lib/calendar/request-page';
+
+// Request an event (acms({ requests })): the same request as the app's
+// screen, for anyone, without an account, at /request and under each
+// language's prefix (/es/request). The page posts to itself; the rules,
+// limits and emails are lib/calendar/request-service.ts. Themed through the
+// site's tokens (the booking form's pc-bk-* fields); a site file at this path
+// replaces it, and acms({ requests: { page: false } }) drops it.
+if (!REQUESTS.enabled) return new Response(null, { status: 404 });
+Astro.response.headers.set('Cache-Control', 'private, no-store');
+
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+const locale = I18N.enabled ? requestLocale(pageLocale(Astro.url, Astro.locals)) : '';
+const lang = locale || (I18N.enabled && I18N.defaultLocale) || siteLang(settings);
+const dateLocale = lang.split('-')[0] === siteLang(settings) ? siteLocale(settings) : lang;
+const w = requestStrings(lang);
+const options = await requestOptions(repo, locale);
+
+let error = '';
+let field = '';
+let values: Record<string, string | string[]> = { kind: 'new', repeat: 'once' };
+let key: string = crypto.randomUUID();
+let sent: { email: string; title: string; line: string } | null = null;
+if (Astro.request.method === 'POST') {
+  try {
+    const data = await readForm(Astro.request);
+    values = Object.fromEntries([...new Set(data.keys())].map((k) => [k, k === 'rooms' ? data.getAll(k).map(String) : String(data.get(k) ?? '')]));
+    key = String(data.get('requestId') ?? '');
+    const { request } = await submitRequest(repo, formRequest(data, locale), { source: 'web', key, address: Astro.clientAddress, locals: Astro.locals });
+    sent = { email: request.requester?.email ?? '', ...await sentSummary(repo, request, settings, lang, dateLocale) };
+  } catch (e) {
+    const code = (e as { code?: RequestRefusal }).code;
+    field = code ?? '';
+    error = code ? w.errors[code] : e instanceof ApiError && e.status !== 500 ? e.message : w.errors.failed;
+    Astro.response.status = e instanceof ApiError ? e.status : 500;
+    // a refused request can be fixed and sent again with the same key; one that went through can't
+    if (code === 'changed') key = crypto.randomUUID();
+  }
+}
+const v = (k: string) => { const x = values[k]; return Array.isArray(x) ? x[0] ?? '' : x ?? ''; };
+const chosenRooms = Array.isArray(values.rooms) ? values.rooms : values.rooms ? [values.rooms] : [];
+const today = new Intl.DateTimeFormat('en-CA', { timeZone: settings.timezone || 'UTC', year: 'numeric', month: '2-digit', day: '2-digit' }).format(Date.now());
+const privacy = LEGAL.enabled ? localePath('/privacy', locale) : '';
+const self = localePath(REQUESTS.path, locale);
+const tel = (p: string) => 'tel:' + p.replace(/[^\d+]/g, '');
+const invalid = (...codes: string[]) => (codes.includes(field) ? 'true' : undefined);
+const fieldWords = { free: w.free, taken: w.taken };
+---
+<Site title={w.heading}>
+  <section class="pc-simple-form pc-rq">
+    <h1>{sent ? w.sent : w.heading}</h1>
+    {sent ? (
+      <div class="pc-rq-sent" role="status">
+        <p>{options.replyTime ? fill(w.answerWithin, { time: options.replyTime, email: sent.email }) : fill(w.answerBy, { email: sent.email })}</p>
+        <div class="pc-rq-card"><small>{w.yours}</small><b>{sent.title}</b><span>{sent.line}</span></div>
+        <p class="pc-bk-hint">{w.notYet}{options.phone && <> <a href={tel(options.phone)}>{fill(w.sooner, { phone: options.phone })}</a></>}</p>
+        <p><a href={self}>{w.another}</a></p>
+      </div>
+    ) : !options.open ? (
+      <div class="pc-rq-closed" role="status">
+        <p>{w.closed}</p>
+        {options.phone && <p><a href={tel(options.phone)}>{fill(w.call, { phone: options.phone })}</a></p>}
+      </div>
+    ) : (
+      <form method="post" action={self} class="pc-rq-form" data-tz={options.timezone} data-words={JSON.stringify(fieldWords)}>
+        <p class="pc-rq-notice">{options.notice || w.notice}</p>
+        {error && <p class="pc-bk-error" role="alert">{error}</p>}
+        <input type="hidden" name="requestId" value={key} />
+        <div class="pc-form-trap" aria-hidden="true"><label>Leave empty<input name="website" tabindex="-1" autocomplete="off" /></label></div>
+        <fieldset class="pc-rq-kind">
+          <legend class="pc-rq-sr">{w.heading}</legend>
+          <label><input type="radio" name="kind" value="new" checked={v('kind') !== 'change'} /><span>{w.somethingNew}</span></label>
+          <label><input type="radio" name="kind" value="change" checked={v('kind') === 'change'} /><span>{w.change}</span></label>
+        </fieldset>
+
+        <div class="pc-rq-new">
+          <label class="pc-bk-field"><span>{w.what}</span><input name="title" maxlength="200" value={v('title')} aria-invalid={invalid('title')} /></label>
+          {options.types.length > 0 && (
+            <fieldset class="pc-bk-field pc-bk-choices"><legend>{w.type}</legend>
+              <div class="pc-rq-chips">{options.types.map((t) => <label class="pc-bk-option"><input type="radio" name="type" value={t.id} checked={v('type') === t.id} /><span>{t.label}</span></label>)}</div>
+            </fieldset>
+          )}
+          <div class="pc-rq-when">
+            <label class="pc-bk-field"><span>{w.date}</span><input type="date" name="date" min={today} value={v('date')} aria-invalid={invalid('start', 'past', 'far')} /></label>
+            <label class="pc-bk-field"><span>{w.starts}</span><input type="time" name="start" step="300" value={v('start')} aria-invalid={invalid('start', 'past')} /></label>
+            <label class="pc-bk-field"><span>{w.ends}</span><input type="time" name="end" step="300" value={v('end')} aria-invalid={invalid('end')} /></label>
+          </div>
+          <fieldset class="pc-bk-field pc-bk-choices"><legend>{w.repeats}</legend>
+            <div class="pc-rq-chips">
+              <label class="pc-bk-option"><input type="radio" name="repeat" value="once" checked={v('repeat') !== 'weekly' && v('repeat') !== 'other'} /><span>{w.once}</span></label>
+              <label class="pc-bk-option"><input type="radio" name="repeat" value="weekly" checked={v('repeat') === 'weekly'} /><span>{w.weekly}</span></label>
+              <label class="pc-bk-option"><input type="radio" name="repeat" value="other" checked={v('repeat') === 'other'} /><span>{w.other}</span></label>
+            </div>
+            <label class="pc-bk-field pc-rq-other"><span>{w.otherHint}</span><input name="repeatText" maxlength="200" value={v('repeatText')} aria-invalid={invalid('repeat')} /></label>
+          </fieldset>
+          {options.rooms.length > 0 && (
+            <fieldset class="pc-bk-field pc-bk-choices"><legend>{w.room}</legend>
+              <div class="pc-rq-chips">
+                {options.rooms.map((r) => <label class="pc-bk-option"><input type="checkbox" name="rooms" value={r.slug} data-name={r.name} checked={chosenRooms.includes(r.slug)} /><span>{r.name}</span></label>)}
+                <label class="pc-bk-option"><input type="checkbox" name="roomsUnsure" value="1" checked={v('roomsUnsure') === '1'} /><span>{w.notSure}</span></label>
+              </div>
+              <p class="pc-rq-free" aria-live="polite"></p>
+            </fieldset>
+          )}
+          <label class="pc-bk-field"><span>{w.people} <em>{w.optional}</em></span><input type="number" name="people" min="1" max="100000" inputmode="numeric" value={v('people')} aria-invalid={invalid('people')} /></label>
+          <label class="pc-bk-field"><span>{w.message} <em>{w.optional}</em></span><textarea name="message" rows="3" maxlength="2000">{v('message')}</textarea></label>
+        </div>
+
+        <div class="pc-rq-change">
+          <label class="pc-bk-field"><span>{w.event}</span>
+            <select name="event" aria-invalid={invalid('event')}>
+              <option value="">{w.pickEvent}</option>
+              {options.events.map((e) => <option value={e.slug} selected={v('event') === e.slug}>{e.title}</option>)}
+            </select>
+          </label>
+          <label class="pc-bk-field"><span>{w.onDate} <em>{w.optional}</em></span><input type="date" name="onDate" min={today} value={v('onDate')} aria-invalid={invalid('date')} /><small>{w.onDateHint}</small></label>
+          <label class="pc-bk-field"><span>{w.whatChange}</span><textarea name="whatChange" rows="3" maxlength="2000" aria-invalid={invalid('what')}>{v('whatChange')}</textarea></label>
+        </div>
+
+        <fieldset class="pc-rq-contact">
+          <legend>{w.contact}</legend>
+          <label class="pc-bk-field"><span>{w.name}</span><input name="name" required maxlength="120" autocomplete="name" value={v('name')} aria-invalid={invalid('name')} /></label>
+          <div class="pc-form-row">
+            <label class="pc-bk-field"><span>{w.email}</span><input type="email" name="email" required maxlength="254" autocomplete="email" value={v('email')} aria-invalid={invalid('email')} /></label>
+            <label class="pc-bk-field"><span>{w.phone} <em>{w.optional}</em></span><input type="tel" name="phone" maxlength="40" autocomplete="tel" value={v('phone')} aria-invalid={invalid('phone')} /></label>
+          </div>
+          <p class="pc-bk-hint">{w.contactWhy}{privacy && <> <a href={privacy}>{w.privacy}</a></>}</p>
+        </fieldset>
+        <button class="pc-bk-submit" type="submit">{w.send}</button>
+      </form>
+    )}
+  </section>
+</Site>
+
+<script>
+  // "Sanctuary looks free then": free or busy for the chosen rooms
+  // (GET /api/v1/rooms/free, no names), in the site's zone
+  const form = document.querySelector<HTMLFormElement>('.pc-rq-form');
+  const out = form?.querySelector<HTMLElement>('.pc-rq-free');
+  if (form && out) {
+    const tz = form.dataset.tz || 'UTC';
+    const words = JSON.parse(form.dataset.words || '{}') as { free: string; taken: string };
+    const wall = (iso: string) => {
+      const p = Object.fromEntries(new Intl.DateTimeFormat('en-CA', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' })
+        .formatToParts(new Date(iso)).map((x) => [x.type, x.value]));
+      return p.year + '-' + p.month + '-' + p.day + 'T' + p.hour + ':' + p.minute;
+    };
+    const next = (day: string) => { const d = new Date(day + 'T12:00:00Z'); d.setUTCDate(d.getUTCDate() + 1); return d.toISOString().slice(0, 10); };
+    let run = 0;
+    const check = async () => {
+      const mine = ++run;
+      const get = (n: string) => (form.elements.namedItem(n) as HTMLInputElement | null)?.value || '';
+      const day = get('date'), start = get('start'), end = get('end');
+      const rooms = [...form.querySelectorAll<HTMLInputElement>('input[name=rooms]:checked')];
+      if (!day || !start || !end || end <= start || !rooms.length) { out.textContent = ''; return; }
+      const from = day + 'T' + start, to = day + 'T' + end;
+      const lines = await Promise.all(rooms.map(async (r) => {
+        const res = await fetch('/api/v1/rooms/free?room=' + encodeURIComponent(r.value) + '&start=' + day + '&end=' + next(day)).catch(() => null);
+        if (!res?.ok) return '';
+        const { data } = await res.json() as { data: { busy: { start: string; end: string }[] } };
+        const taken = data.busy.some((b) => wall(b.start) < to && wall(b.end) > from);
+        return (taken ? words.taken : words.free).replace('{room}', r.dataset.name || r.value);
+      }));
+      if (mine === run) out.textContent = lines.filter(Boolean).join(' ');
+    };
+    form.addEventListener('change', (e) => { if ((e.target as HTMLInputElement).name !== 'roomsUnsure') void check(); });
+    void check();
+  }
+</script>