@acms-subir/core 0.3.53 → 0.3.55

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/index.astro

@@ -29,9 +29,13 @@ const access = await accessFor(Astro.request, Astro.cookies, repo);
 const eventRequests = CALENDAR.enabled && access?.can('content.publish') ? await pendingRequests(repo) : [];
 const newRequests = eventRequests.filter((e) => e.request?.kind === 'new').length;
 const changeRequests = eventRequests.length - newRequests;
+// hosts' date moves waiting (lib/calendar/host-requests.ts)
+const dateRequests = CALENDAR.enabled && access?.can('content.publish') ? await repo.requests.count({ kinds: ['move', 'from-date'], states: ['pending'] }) : 0;
+const waitingRequests = eventRequests.length + dateRequests;
 const requestDetail = [
   newRequests ? `${newRequests} new event${newRequests === 1 ? '' : 's'}` : '',
   changeRequests ? `changes to ${changeRequests} event${changeRequests === 1 ? '' : 's'}` : '',
+  dateRequests ? `${dateRequests} date change${dateRequests === 1 ? '' : 's'}` : '',
 ].filter(Boolean).join(' · ');
 const me = sessionUserId && sessionUserId !== OWNER_ENV ? users.find((u) => u.id === sessionUserId) : null;
 const firstName = me?.name.split(/\s+/)[0] ?? '';
@@ -167,10 +171,10 @@ const tiles = [
       </div>
     )}
 
-    {eventRequests.length > 0 && (
+    {waitingRequests > 0 && (
       <div class="notice">
         <div class="grow-text">
-          <b>{eventRequests.length} event request{eventRequests.length === 1 ? '' : 's'} waiting</b>
+          <b>{waitingRequests} event request{waitingRequests === 1 ? '' : 's'} waiting</b>
           <span class="hint">{requestDetail}</span>
         </div>
         <a class="btn sm" href="/admin/calendar/events?scope=requests">Review</a>

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/members/_EventForm.astro

@@ -1,9 +1,12 @@
 ---
 import type { EventFieldConfig } from '../../lib/calendar/config';
 import { MEMBER_FORM_LIMITS as L, repeatChoices, type MemberEventForm } from '../../lib/calendar/member-form';
+import { memberStrings, type MemberStrings } from '../../lib/calendar/member-words';
+import { fill } from '../../lib/live/words';
 
 // The event request form (new requests and suggested changes). Plain HTML:
-// it posts to the page it's on, with `op` saying what to do.
+// it posts to the page it's on, with `op` saying what to do. `w` and `lang`
+// word it in the page's language.
 interface Props {
   values: MemberEventForm;
   /** the calendars members may choose (native, public); none hides the choice */
@@ -13,9 +16,12 @@ interface Props {
   op: 'submit' | 'update';
   submitLabel: string;
   error?: string;
+  w?: MemberStrings;
+  lang?: string;
 }
-const { values: v, calendars, fields, op, submitLabel, error = '' } = Astro.props;
-const repeat = repeatChoices(v.repeat, v.date);
+const { values: v, calendars, fields, op, submitLabel, error = '', w = memberStrings('en'), lang } = Astro.props;
+const f = w.form;
+const repeat = repeatChoices(v.repeat, v.date, lang);
 const fieldType = (t: EventFieldConfig['type']) => (t === 'number' ? 'number' : t === 'url' ? 'url' : 'text');
 ---
 
@@ -23,25 +29,25 @@ const fieldType = (t: EventFieldConfig['type']) => (t === 'number' ? 'number' :
   {error && <p class="pc-bk-error" role="alert">{error}</p>}
   <input type="hidden" name="op" value={op} />
   <label class="pc-bk-field">
-    <span>Title</span>
+    <span>{f.title}</span>
     <input name="title" required maxlength={L.title} value={v.title} />
   </label>
   <fieldset class="pc-mem-when">
-    <legend>When</legend>
+    <legend>{f.when}</legend>
     <div class="pc-mem-row">
-      <label class="pc-bk-field"><span>Date</span><input type="date" name="date" required value={v.date} /></label>
-      <label class="pc-bk-field pc-mem-time"><span>Starts</span><input type="time" name="startTime" value={v.startTime} /></label>
-      <label class="pc-bk-field pc-mem-time"><span>Ends <em>(optional)</em></span><input type="time" name="endTime" value={v.endTime} /></label>
+      <label class="pc-bk-field"><span>{f.date}</span><input type="date" name="date" required value={v.date} /></label>
+      <label class="pc-bk-field pc-mem-time"><span>{f.starts}</span><input type="time" name="startTime" value={v.startTime} /></label>
+      <label class="pc-bk-field pc-mem-time"><span>{f.ends} <em>{f.optional}</em></span><input type="time" name="endTime" value={v.endTime} /></label>
     </div>
-    <label class="pc-bk-check"><input type="checkbox" name="allDay" value="1" checked={v.allDay} /> <span>All day <small>No start or end time</small></span></label>
+    <label class="pc-bk-check"><input type="checkbox" name="allDay" value="1" checked={v.allDay} /> <span>{f.allDay} <small>{f.allDayHint}</small></span></label>
     {v.days > 0 && (
       <>
         <input type="hidden" name="days" value={String(v.days)} />
-        <p class="pc-mem-hint">This event runs over {v.days + 1} days. Changing the date moves all of them.</p>
+        <p class="pc-mem-hint">{fill(f.multiDay, { days: String(v.days + 1) })}</p>
       </>
     )}
     <label class="pc-bk-field">
-      <span>Repeats</span>
+      <span>{f.repeats}</span>
       <select name="repeat">
         {repeat.options.map((o) => <option value={o.value} selected={o.value === repeat.value}>{o.label}</option>)}
       </select>
@@ -49,40 +55,40 @@ const fieldType = (t: EventFieldConfig['type']) => (t === 'number' ? 'number' :
     </label>
   </fieldset>
   <label class="pc-bk-field">
-    <span>Where</span>
-    <input name="where" maxlength={L.where} value={v.where} placeholder="A room, an address, or “Online”" />
+    <span>{f.where}</span>
+    <input name="where" maxlength={L.where} value={v.where} placeholder={f.wherePlaceholder} />
   </label>
   <label class="pc-bk-field">
-    <span>Description</span>
+    <span>{f.description}</span>
     <textarea name="description" rows="6" maxlength={L.description}>{v.description}</textarea>
-    <small>Plain text. Leave a blank line between paragraphs.</small>
+    <small>{f.descriptionHint}</small>
   </label>
   {calendars.length > 0 && (
     <label class="pc-bk-field">
-      <span>Calendar</span>
+      <span>{f.calendar}</span>
       <select name="calendarId">
-        <option value="">Not sure (the team will choose)</option>
+        <option value="">{f.notSure}</option>
         {calendars.map((c) => <option value={c.id} selected={c.id === v.calendarId}>{c.name}</option>)}
       </select>
     </label>
   )}
-  {fields.map((f) => (
+  {fields.map((fd) => (
     <label class="pc-bk-field">
-      <span>{f.label}</span>
-      {f.type === 'textarea' ? (
-        <textarea name={`field_${f.key}`} rows="3" maxlength={L.field}>{v.fields[f.key] ?? ''}</textarea>
-      ) : f.type === 'select' ? (
-        <select name={`field_${f.key}`}>
-          <option value="">Choose…</option>
-          {f.options.map((o) => <option value={o} selected={o === v.fields[f.key]}>{o}</option>)}
+      <span>{fd.label}</span>
+      {fd.type === 'textarea' ? (
+        <textarea name={`field_${fd.key}`} rows="3" maxlength={L.field}>{v.fields[fd.key] ?? ''}</textarea>
+      ) : fd.type === 'select' ? (
+        <select name={`field_${fd.key}`}>
+          <option value="">{f.choose}</option>
+          {fd.options.map((o) => <option value={o} selected={o === v.fields[fd.key]}>{o}</option>)}
         </select>
       ) : (
-        <input type={fieldType(f.type)} name={`field_${f.key}`} maxlength={f.type === 'number' ? undefined : L.field} step={f.type === 'number' ? 'any' : undefined} value={v.fields[f.key] ?? ''} />
+        <input type={fieldType(fd.type)} name={`field_${fd.key}`} maxlength={fd.type === 'number' ? undefined : L.field} step={fd.type === 'number' ? 'any' : undefined} value={v.fields[fd.key] ?? ''} />
       )}
     </label>
   ))}
   <label class="pc-bk-field">
-    <span>Note for the team <em>(only staff see this)</em></span>
+    <span>{f.note} <em>{f.staffOnly}</em></span>
     <textarea name="note" rows="3" maxlength={L.note}>{v.note}</textarea>
   </label>
   <button class="pc-bk-submit" type="submit">{submitLabel}</button>

package/src/pages/members/_Layout.astro

@@ -1,23 +1,27 @@
 ---
 import Site from '../../layouts/Site.astro';
+import { fill } from '../../lib/live/words';
+import { memberStrings, type MemberStrings } from '../../lib/calendar/member-words';
 
 // The frame of the built-in member pages: the site's own layout and theme,
 // never indexed, plus who's signed in. `.pc-mem-*` classes are theme hooks;
-// form controls reuse the booking pages' `.pc-bk-*` ones.
+// form controls reuse the booking pages' `.pc-bk-*` ones. `w`: the page's
+// words (memberLanguage in _http.ts), English by default.
 interface Props {
   title: string;
   user: { name: string; email: string; staff: boolean };
+  w?: MemberStrings;
 }
-const { title, user } = Astro.props;
+const { title, user, w = memberStrings('en') } = Astro.props;
 ---
 
 <Site title={title} noindex staffPreview>
   <div class="pc-mem">
     <div class="pc-mem-top">
-      <span>Signed in as {user.name || user.email}</span>
+      <span>{fill(w.signedInAs, { name: user.name || user.email })}</span>
       <span class="pc-mem-top-links">
-        {user.staff && <a href="/admin">Open the admin</a>}
-        <form method="post" action="/admin/logout"><button type="submit">Sign out</button></form>
+        {user.staff && <a href="/admin">{w.openAdmin}</a>}
+        <form method="post" action="/admin/logout"><button type="submit">{w.signOut}</button></form>
       </span>
     </div>
     <slot />
@@ -48,6 +52,7 @@ const { title, user } = Astro.props;
     .pc-mem-state::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
     .pc-mem-state.is-pending { color: var(--warning); }
     .pc-mem-state.is-declined { color: var(--danger); }
+    .pc-mem-state.is-approved { color: var(--success); }
     .pc-mem-reply { margin: 10px 0 0; padding: 9px 12px; background: var(--soft); border-radius: var(--r-sm); font-size: 14px; white-space: pre-line; }
     .pc-mem > .pc-mem-reply { margin: 0; }
     .pc-mem-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@@ -73,5 +78,20 @@ const { title, user } = Astro.props;
     .pc-mem-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
     .pc-mem-when:has(input[name='allDay']:checked) .pc-mem-time { opacity: 0.45; }
     .pc-mem-hint { color: var(--muted); font-size: 13px; margin: 0; }
+    /* one date's controls on its row (Move…, then Cancel); an open form takes the line under it */
+    .pc-mem-dates li { flex-wrap: wrap; justify-content: flex-start; column-gap: 6px; }
+    .pc-mem-dates li > span:first-child { flex: 1 1 16rem; }
+    .pc-mem-date-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; order: 3; }
+    .pc-mem-dates em.is-pending { color: var(--warning); font-weight: 500; }
+    .pc-mem-move { order: 2; }
+    .pc-mem-move[open], .pc-mem-clash { order: 4; flex-basis: 100%; }
+    .pc-mem-move > summary { list-style: none; cursor: pointer; display: inline-flex; }
+    .pc-mem-move > summary::-webkit-details-marker { display: none; }
+    .pc-mem-move[open] > summary { margin-bottom: 8px; }
+    .pc-mem-move form { display: grid; gap: 12px; padding: 12px; background: var(--soft); border-radius: var(--r-sm); margin-bottom: 6px; }
+    .pc-mem-move fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
+    .pc-mem-move fieldset > legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
+    .pc-mem-clash { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line)); border-radius: var(--r-sm); background: var(--panel); }
+    .pc-mem-clash p { margin: 0; font-size: 14px; }
   }
 </style>