@acms-subir/core 0.3.54 → 0.3.56

package/src/pages/admin/calendar/google/match.astro

@@ -0,0 +1,160 @@
+---
+import Admin from '../../../../layouts/Admin.astro';
+import { getRepo } from '../../../../lib/repo';
+import { ApiError } from '../../../../lib/api';
+import { CALENDAR } from '../../../../lib/calendar/config';
+import { forbiddenUnless } from '../../../../lib/permissions/access';
+import { reviewMatch } from '../../../../lib/calendar/google/service';
+import type { CalEvent } from '../../../../lib/schema';
+import type { MatchGoogle, MatchPair } from '../../../../lib/calendar/google/types';
+
+// Step 2 of linking a Google calendar: what's on both sides, before anything
+// is written. Decisions save at once ("Save and finish later" just leaves);
+// "Start syncing" pairs, copies the rest each way and sends no notifications.
+if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
+const repo = await getRepo(Astro.locals);
+const denied = await forbiddenUnless(Astro.request, Astro.cookies, repo, 'schedule.manage');
+if (denied) return denied;
+const linkId = Astro.url.searchParams.get('link') ?? '';
+let link = await repo.gcal.getLink(linkId);
+if (!link) return Astro.redirect('/admin/calendar/settings#google');
+if (link.state !== 'matching') return Astro.redirect(`/admin/calendar/settings?notice=${encodeURIComponent('That link is already past its first match.')}#google`);
+let error = Astro.url.searchParams.get('error') ?? '';
+if (!link.match && !error) {
+  try { await reviewMatch(repo, link.id, Astro.locals); link = (await repo.gcal.getLink(link.id))!; }
+  catch (e) { error = e instanceof ApiError ? e.message : 'Couldn’t read the Google calendar. Try again.'; }
+}
+const [settings, calendar, events] = await Promise.all([repo.getSettings(), repo.getCalendar(link.calendarId), repo.listEvents()]);
+const byId = new Map(events.map((e) => [e.id, e]));
+const m = link.match;
+const tz = settings.timezone || 'UTC';
+const fmt = (ms: number, allDay: boolean) => new Intl.DateTimeFormat(settings.locale || 'en', allDay ? { weekday: 'short', month: 'short', day: 'numeric', timeZone: tz } : { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', timeZone: tz }).format(ms);
+const siteWhen = (e: CalEvent) => `${fmt(e.startAt, e.allDay)}${e.rrule ? ', repeats' : ''}`;
+const googleWhen = (g: MatchGoogle) => `${fmt(g.start, g.allDay)}${g.repeats ? ', repeats' : ''}`;
+const pairs = (m?.pairs ?? []).filter((p) => byId.has(p.eventId) && m?.google[p.googleId]);
+const waiting = pairs.filter((p) => p.state === 'suggested').length;
+const apart = pairs.filter((p) => p.state === 'apart');
+const toGoogle = (m?.siteOnly.length ?? 0) + apart.length;
+const fromGoogle = (m?.googleOnly.length ?? 0) + apart.length;
+const STATE: Record<MatchPair['state'], string> = { linked: 'Linked', suggested: 'Same?', apart: 'Not the same' };
+const WHY: Record<MatchPair['reason'], string> = {
+  'hidden-id': 'Linked before (Google’s copy carries the site’s hidden link)', uid: 'Same Google ID (copied from Google earlier)',
+  'title-time': 'Same title and time', 'time-repeat': 'Same time and repeat, different title',
+};
+const out = link.direction !== 'in', inn = link.direction !== 'out';
+---
+
+<Admin title="Match events" section="calendar:schedule">
+  <div class="page-head">
+    <div>
+      <p class="sub"><a href="/admin/calendar/settings#google">Calendar settings</a> › Synced with Google</p>
+      <h1>Match events: {calendar?.name ?? 'Calendar'} {link.direction === 'both' ? '⇄' : link.direction === 'out' ? '→' : '←'} {link.googleName}</h1>
+      <p class="sub">Step 2 of 2. Nothing has been written to either side yet.</p>
+    </div>
+    <form method="post" action="/admin/calendar/google"><input type="hidden" name="op" value="match-build" /><input type="hidden" name="link" value={link.id} /><button class="btn" type="submit">Read both sides again</button></form>
+  </div>
+  {error && <p class="notice warn" role="alert">{error}</p>}
+  {m && (
+    <>
+      <nav class="gm-tabs" aria-label="Groups">
+        <a href="#both">On both · {pairs.length}</a>
+        <a href="#site">Only on the site · {m.siteOnly.length}</a>
+        <a href="#google">Only in Google · {m.googleOnly.length}</a>
+      </nav>
+
+      <section class="card gm-sect" id="both">
+        <table class="gm-table">
+          <thead><tr><th>On the site</th><th>In Google</th><th>Why they match</th><th><span class="gm-sr">Decision</span></th></tr></thead>
+          <tbody>
+            {pairs.length === 0 && <tr><td colspan="4" class="hint">No events look like they’re on both sides.</td></tr>}
+            {pairs.map((p) => { const e = byId.get(p.eventId)!; const g = m.google[p.googleId]; return (
+              <tr id={p.googleId} class={`is-${p.state}`}>
+                <td><b>{e.title}</b><small>{siteWhen(e)}</small></td>
+                <td><b>{g.title || '(no title)'}</b><small>{googleWhen(g)}</small></td>
+                <td><small>{WHY[p.reason]}</small></td>
+                <td>
+                  <form method="post" action="/admin/calendar/google" class="gm-acts">
+                    <input type="hidden" name="op" value="match-decide" /><input type="hidden" name="link" value={link.id} /><input type="hidden" name="googleId" value={p.googleId} />
+                    {p.state === 'suggested' ? (<>
+                      <button class="btn sm primary" type="submit" name="decision" value="link">Link</button>
+                      <button class="btn sm ghost" type="submit" name="decision" value="apart">Not the same</button>
+                    </>) : (<>
+                      <span class={`gm-state is-${p.state}`}>{STATE[p.state]}</span>
+                      <button class="btn sm ghost" type="submit" name="decision" value={p.state === 'linked' ? 'apart' : 'link'}>{p.state === 'linked' ? 'Undo' : 'Link'}</button>
+                    </>)}
+                  </form>
+                </td>
+              </tr>
+            ); })}
+          </tbody>
+        </table>
+      </section>
+
+      <section class="card gm-sect" id="site">
+        <h2>Only on the site · {m.siteOnly.length}</h2>
+        {m.siteOnly.length === 0 ? <p class="hint">None.</p> : (
+          <ul class="gm-list">{m.siteOnly.map((id) => byId.get(id)).filter(Boolean).slice(0, 200).map((e) => <li><b>{e!.title}</b> <small>{siteWhen(e!)}</small></li>)}</ul>
+        )}
+      </section>
+
+      <section class="card gm-sect" id="google">
+        <h2>Only in Google · {m.googleOnly.length}</h2>
+        {m.googleOnly.length === 0 ? <p class="hint">None.</p> : (
+          <ul class="gm-list">{m.googleOnly.map((id) => m.google[id]).filter(Boolean).slice(0, 200).map((g) => <li><b>{g.booking ? 'Booked' : g.title || '(no title)'}</b> <small>{googleWhen(g)}{g.booking ? ' · a booked appointment' : ''}</small></li>)}</ul>
+        )}
+      </section>
+
+      <div class="card gm-foot">
+        <p>
+          When you start:
+          {out ? ` the ${toGoogle} event${toGoogle === 1 ? '' : 's'} only on the site ${toGoogle === 1 ? 'is' : 'are'} copied to Google.` : ' events only on the site stay on the site.'}
+          {inn ? ` The ${fromGoogle} only in Google come to the site as published events in ${calendar?.name ?? 'this calendar'}${link.roomIds.length ? ', holding its room' : ''}${link.rules.length ? `, and titles starting with ${link.rules.map((r) => `“${r.prefix}”`).join(' or ')} get their tag` : ''}.` : ' Events only in Google stay in Google.'}
+          {' '}Linked pairs keep both titles as they are until someone edits one. Pairs you mark “Not the same” are treated as two events. No member notifications are sent for any of this.
+        </p>
+        <div class="gm-buttons">
+          <a class="btn ghost" href="/admin/calendar/settings#google">Back</a>
+          <a class="btn" href="/admin/calendar/settings#google" title="Your decisions are saved as you make them">Save and finish later</a>
+          <form method="post" action="/admin/calendar/google">
+            <input type="hidden" name="op" value="match-start" /><input type="hidden" name="link" value={link.id} />
+            <button class="btn primary" type="submit" disabled={waiting > 0} title={waiting ? `Decide the ${waiting} suggested pair${waiting === 1 ? '' : 's'} first` : undefined}>Start syncing</button>
+          </form>
+        </div>
+        {waiting > 0 && <p class="hint">Decide the {waiting} suggested pair{waiting === 1 ? '' : 's'} first: Link, or Not the same.</p>}
+      </div>
+    </>
+  )}
+</Admin>
+
+<style>
+  .gm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
+  .gm-tabs a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); background: var(--panel); }
+  .gm-sect { margin-bottom: 14px; padding: 0; overflow: hidden; scroll-margin-top: 64px; }
+  .gm-sect h2 { font-size: 14px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
+  .gm-sect .hint { padding: 12px 16px; margin: 0; }
+  .gm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .gm-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
+  .gm-table td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
+  .gm-table tr:last-child td { border-bottom: 0; }
+  .gm-table td b { display: block; font-weight: 600; }
+  .gm-table td small { color: var(--muted); font-size: 12px; }
+  .gm-table tr.is-apart td:not(:last-child) { opacity: 0.6; }
+  .gm-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
+  .gm-state { font-size: 12px; font-weight: 600; color: var(--text-2); }
+  .gm-state.is-linked { color: var(--green); }
+  .gm-list { list-style: none; margin: 0; padding: 0; }
+  .gm-list li { padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
+  .gm-list li:last-child { border-bottom: 0; }
+  .gm-list small { color: var(--muted); }
+  .gm-foot { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text-2); }
+  .gm-foot p { margin: 0; }
+  .gm-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
+  .gm-buttons .btn:disabled { opacity: 0.45; cursor: not-allowed; }
+  .gm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  @media (max-width: 760px) {
+    .gm-table thead { display: none; }
+    .gm-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
+    .gm-table td { border: 0; }
+    .gm-table td:nth-child(3), .gm-table td:nth-child(4) { grid-column: span 2; padding-top: 0; }
+    .gm-acts { justify-content: flex-start; }
+  }
+</style>

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

@@ -0,0 +1,107 @@
+---
+import { getRepo } from '../../../lib/repo';
+import { ApiError } from '../../../lib/api';
+import { CALENDAR } from '../../../lib/calendar/config';
+import { accessFor } from '../../../lib/permissions/access';
+import { deniedMessage, type Permission } from '../../../lib/permissions/catalog';
+import { requestSessionBinding } from '../../../lib/auth/request';
+import { beginGoogleConnect, disconnectGoogle, finishGoogleConnect, refreshGoogleCalendars, saveGoogleClient } from '../../../lib/calendar/google/connect';
+import { createLink, pauseLink, resumeLink, unlink, updateLink } from '../../../lib/calendar/google/links';
+import { decideMatch } from '../../../lib/calendar/google/match';
+import { reviewMatch, syncLinkNow, useGoogleVersion } from '../../../lib/calendar/google/service';
+
+// The forms of Calendar settings → Synced with Google, the first-match page
+// and the event editor's sync note post here, then go back with a notice.
+// Connecting and disconnecting Google need "Connected services"; linking,
+// pausing and reviewing need "Manage rooms and calendars"; using Google's
+// version of a field changes the live event, so "Publish content" does too.
+if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
+if (Astro.request.method !== 'POST') return Astro.redirect('/admin/calendar/settings#google');
+
+const repo = await getRepo(Astro.locals);
+const access = await accessFor(Astro.request, Astro.cookies, repo);
+const form = await Astro.request.formData();
+const op = String(form.get('op') ?? '');
+const linkId = String(form.get('link') ?? '');
+const NEEDS: Record<string, Permission> = { client: 'services.manage', connect: 'services.manage', finish: 'services.manage', disconnect: 'services.manage' };
+const need = NEEDS[op] ?? (op === 'use' ? (access?.can('content.publish') ? 'content.publish' : 'schedule.manage') : 'schedule.manage');
+if (!access?.can(need)) return new Response(deniedMessage(need), { status: 403, headers: { 'Content-Type': 'text/plain; charset=utf-8', 'Cache-Control': 'no-store' } });
+
+// only back to the admin (an event page or the match page)
+const ret = String(form.get('return') ?? '');
+const home = ret.startsWith('/admin/') && !ret.startsWith('//') ? ret : '/admin/calendar/settings';
+const back = (key: 'notice' | 'error', text: string, hash = home === '/admin/calendar/settings' ? '#google' : '') => {
+  const [path, query = ''] = home.split('?');
+  const params = new URLSearchParams(query);
+  params.set(key, text);
+  return Astro.redirect(`${path}?${params}${hash}`);
+};
+const list = (name: string) => form.getAll(name).map(String).filter(Boolean);
+// rules come as rows of prefix + tag fields; booking titles one per line
+const linkFields = () => ({
+  direction: String(form.get('direction') || 'both'),
+  roomIds: list('roomIds'),
+  noRoom: form.has('noRoom'),
+  rules: form.getAll('rulePrefix').map((p, i) => ({ prefix: String(p).trim(), tag: String(form.getAll('ruleTag')[i] ?? '').trim() })).filter((r) => r.prefix && r.tag),
+  bookingTitles: String(form.get('bookingTitles') ?? '').split(/\n|,/).map((t) => t.trim()).filter(Boolean),
+});
+
+try {
+  switch (op) {
+    case 'client':
+      await saveGoogleClient(repo, { clientId: String(form.get('clientId') ?? ''), clientSecret: String(form.get('clientSecret') ?? '') }, Astro.locals);
+      return back('notice', 'Saved. Next, connect Google.');
+    case 'connect':
+      return Astro.redirect(await beginGoogleConnect(repo, await requestSessionBinding(Astro.request, Astro.cookies, Astro.locals), Astro.url, Astro.locals));
+    case 'finish': {
+      const account = await finishGoogleConnect(repo, await requestSessionBinding(Astro.request, Astro.cookies, Astro.locals), Astro.url, access.userId, Astro.locals);
+      return back('notice', `Connected ${account.email || 'Google'}. Link a calendar next.`);
+    }
+    case 'disconnect':
+      await disconnectGoogle(repo, Astro.locals);
+      return back('notice', 'Google is disconnected. Links are paused, and every event stays in both places.');
+    case 'refresh':
+      await refreshGoogleCalendars(repo, Astro.locals);
+      return back('notice', 'Google calendars listed again.');
+    case 'link-new': {
+      const link = await createLink(repo, { ...linkFields(), calendarId: String(form.get('calendarId') ?? ''), googleId: String(form.get('googleId') ?? ''), startDate: String(form.get('startDate') || '') || undefined });
+      return Astro.redirect(`/admin/calendar/google/match?link=${encodeURIComponent(link.id)}`);
+    }
+    case 'link-edit':
+      await updateLink(repo, linkId, linkFields());
+      return back('notice', 'Link saved. Events that now belong to it go out at the next sync, and ones that don’t are removed from Google.');
+    case 'pause':
+      await pauseLink(repo, linkId);
+      return back('notice', 'Paused. Changes on either side wait until you resume.');
+    case 'resume': {
+      const link = await resumeLink(repo, linkId);
+      if (link.state === 'matching') return Astro.redirect(`/admin/calendar/google/match?link=${encodeURIComponent(link.id)}`);
+      return back('notice', 'Resumed. It reads Google again from the start date, quietly, and catches up.');
+    }
+    case 'unlink':
+      await unlink(repo, linkId);
+      return back('notice', 'Unlinked. Every event stays in both places; linking again pairs them up.');
+    case 'sync':
+      await syncLinkNow(repo, linkId, Astro.locals);
+      return back('notice', 'Synced.');
+    case 'match-build':
+      await reviewMatch(repo, linkId, Astro.locals);
+      return Astro.redirect(`/admin/calendar/google/match?link=${encodeURIComponent(linkId)}`);
+    case 'match-decide':
+      await decideMatch({ repo }, linkId, String(form.get('googleId') ?? ''), form.get('decision') === 'link' ? 'link' : 'apart');
+      return Astro.redirect(`/admin/calendar/google/match?link=${encodeURIComponent(linkId)}#${encodeURIComponent(String(form.get('googleId') ?? ''))}`);
+    case 'match-start':
+      await syncLinkNow(repo, linkId, Astro.locals, { start: true });
+      return Astro.redirect(`/admin/calendar/settings?notice=${encodeURIComponent('Syncing. Recent changes lists what was copied each way.')}#google`);
+    case 'use':
+      await useGoogleVersion(repo, Number(form.get('log')), Astro.url, Astro.locals);
+      return back('notice', 'Using Google’s version. The other copies follow at the next sync.');
+  }
+  return back('error', 'Unknown action.');
+} catch (e) {
+  const message = e instanceof ApiError ? e.message : e instanceof Error && e.name === 'ZodError' ? 'Check the link’s settings and try again.' : 'That didn’t work. Try again.';
+  if (!(e instanceof ApiError)) console.error('acms google sync admin:', e);
+  if (op.startsWith('match-')) return Astro.redirect(`/admin/calendar/google/match?link=${encodeURIComponent(linkId)}&error=${encodeURIComponent(message)}`);
+  return back('error', message);
+}
+---

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

@@ -0,0 +1,298 @@
+---
+import Admin from '../../../layouts/Admin.astro';
+import Modal from '../../../components/Modal.astro';
+import { getRepo } from '../../../lib/repo';
+import { ApiError } from '../../../lib/api';
+import { extraLocales, localeName, localePath } from '../../../lib/i18n';
+import { PUSH } from '../../../lib/push/config';
+import { accessFor, forbiddenUnless } from '../../../lib/permissions/access';
+import type { Permission } from '../../../lib/permissions/catalog';
+import { REQUESTS } from '../../../lib/calendar/request-config';
+import { MEMBERS } from '../../../lib/calendar/members-config';
+import { approveRequest, declineRequest, deleteRequest, replyToRequest, requestRecipients, requestableRooms, requestSettings } from '../../../lib/calendar/request-service';
+import { pendingCount, requestRows, settingsFromForm, type RequestTab } from '../../../lib/calendar/request-admin';
+import { approveEventRequest, declineEventRequest } from '../../../lib/calendar/requests';
+
+// Calendar → Requests (acms({ requests })): requests from the app, the
+// website and hosts in one list, with Pending, Approved and Declined tabs and
+// what takes the rooms on each row. Approve opens a filled-in draft (or the
+// event a change is about); Reply and Decline email the person in their
+// language. Reading needs "Create and edit content", answering "Publish
+// content", the settings "Manage rooms and calendars". The rules are
+// lib/calendar/request-service.ts; the list lib/calendar/request-admin.ts.
+if (!REQUESTS.enabled) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const denied = await forbiddenUnless(Astro.request, Astro.cookies, repo, 'content.edit');
+if (denied) return denied;
+const access = (await accessFor(Astro.request, Astro.cookies, repo))!;
+const who = { id: access.userId, can: (p: string) => access.can(p as Permission) };
+const hooks = { url: Astro.url, locals: Astro.locals };
+const back = (notice: string, tab = Astro.url.searchParams.get('tab') ?? '') => {
+  const p = new URLSearchParams();
+  if (tab) p.set('tab', tab);
+  if (notice) p.set('notice', notice);
+  const q = p.toString();
+  return Astro.redirect(q ? '/admin/calendar/requests?' + q : '/admin/calendar/requests');
+};
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const op = String(form.get('op') ?? '');
+  const id = String(form.get('id') ?? '');
+  const seen = Number(form.get('at')) || undefined;
+  const nope = await forbiddenUnless(Astro.request, Astro.cookies, repo, op === 'settings' ? 'schedule.manage' : 'content.publish');
+  if (nope) return nope;
+  try {
+    if (op === 'approve') {
+      const done = await approveRequest(repo, who, id, hooks, seen, { message: String(form.get('message') ?? ''), email: form.get('email') === '1' });
+      return Astro.redirect(done.next);
+    }
+    if (op === 'decline') {
+      // the email choice is only offered for requests from the app or the website (hosts are always told)
+      const email = form.has('email-offered') ? form.get('email') === '1' : true;
+      await declineRequest(repo, who, id, String(form.get('reason') ?? ''), hooks, seen, { email });
+      return back(email ? 'Declined. The person was emailed.' : 'Declined, without an email.');
+    }
+    if (op === 'delete') {
+      await deleteRequest(repo, who, id);
+      return back('Deleted as spam. Nobody was emailed.');
+    }
+    if (op === 'reply') {
+      await replyToRequest(repo, who, id, String(form.get('message') ?? ''), hooks);
+      return back('Reply sent.');
+    }
+    // members' requests staged on their events (My events)
+    if (op === 'member-approve') {
+      const e = await approveEventRequest(repo, who, id, hooks, seen);
+      return back(`Approved “${e.title}”.`);
+    }
+    if (op === 'member-decline') {
+      const e = await declineEventRequest(repo, who, id, String(form.get('reason') ?? ''), hooks, seen);
+      return back(`Declined “${e.title}”.`);
+    }
+    if (op === 'settings') {
+      const settings = await repo.getSettings();
+      const calendars = (await repo.listCalendars()).filter((c) => c.kind === 'native').map((c) => c.id);
+      const requests = settingsFromForm(form, requestSettings(settings), calendars);
+      await repo.updateSettings({ calendar: { ...settings.calendar, requests } });
+      return back('Request settings saved.');
+    }
+    return back('');
+  } catch (err) {
+    return back(err instanceof ApiError ? err.message : 'Couldn’t do that. Try again.');
+  }
+}
+
+const settings = await repo.getSettings();
+const rq = requestSettings(settings);
+const tab = (['pending', 'approved', 'declined'] as const).find((t) => t === Astro.url.searchParams.get('tab')) ?? 'pending';
+const page = Math.min(1000, Math.max(1, Number.parseInt(Astro.url.searchParams.get('page') ?? '', 10) || 1));
+const [{ rows, more }, waiting, rooms, calendars, recipients] = await Promise.all([
+  requestRows(repo, settings, tab as RequestTab, Date.now(), page), pendingCount(repo), requestableRooms(repo),
+  repo.listCalendars().then((cs) => cs.filter((c) => c.kind === 'native')), requestRecipients(repo, settings),
+]);
+const notice = Astro.url.searchParams.get('notice') ?? '';
+const canAnswer = access.can('content.publish');
+const canSet = access.can('schedule.manage');
+const langs = extraLocales();
+// the kinds there are, plus a few empty rows to add more (12 at most)
+const typeRows = [...rq.types, ...Array.from({ length: Math.min(3, 12 - rq.types.length) }, () => null)];
+const TABS = [['pending', 'Pending'], ['approved', 'Approved'], ['declined', 'Declined']] as const;
+const formUrl = REQUESTS.page ? REQUESTS.path : '';
+const pageHref = (n: number) => '/admin/calendar/requests?' + new URLSearchParams({ ...(tab === 'pending' ? {} : { tab }), ...(n > 1 ? { page: String(n) } : {}) }).toString();
+const empty = { pending: 'Nothing waiting. Requests from the app, the website and hosts show up here.', approved: 'No approved requests yet.', declined: 'No declined requests.' }[tab];
+---
+
+<Admin title="Requests" section="calendar:requests">
+  <div class="page-head">
+    <div>
+      <h1>Requests</h1>
+      <p class="sub">From the app, the website{MEMBERS.enabled ? ' and hosts' : ''}, in one list{formUrl && <> · the form is at <a href={formUrl} target="_blank" rel="noopener">{formUrl}</a>{langs.map((l) => <> and <a href={localePath(formUrl, l)} target="_blank" rel="noopener">{localePath(formUrl, l)}</a></>)}</>}</p>
+    </div>
+    <div class="page-actions">
+      {!rq.open && <span class="rq-closed">Closed</span>}
+      {canSet && <button class="btn" type="button" data-modal="rq-settings">Settings</button>}
+    </div>
+  </div>
+
+  {notice && <p class="notice" role="status">{notice}</p>}
+
+  <nav class="seg rq-tabs" aria-label="Show">
+    {TABS.map(([k, l]) => (
+      <a href={k === 'pending' ? '/admin/calendar/requests' : '/admin/calendar/requests?tab=' + k} class={tab === k ? 'on' : ''} aria-current={tab === k ? 'page' : undefined}>
+        {l}{k === 'pending' && waiting > 0 && <span class="rq-count">{waiting}</span>}
+      </a>
+    ))}
+  </nav>
+
+  {rows.length === 0 ? <p class="hint rq-empty">{empty}</p> : (
+    <section class="card rq-list">
+      {rows.map((r) => (
+        <article class="rq-row" id={r.dom}>
+          <small class="rq-head">{r.head}</small>
+          <b class="rq-title">{r.href ? <a href={r.href}>{r.title}</a> : r.title}</b>
+          {r.line && <span class="rq-line">{r.line}</span>}
+          <span class="rq-who">{r.who}</span>
+          {r.note && <p class="rq-note">“{r.note}”</p>}
+          {r.clash && <p class={r.clash.taken ? 'rq-clash is-taken' : 'rq-clash'}>{r.clash.text}</p>}
+          {r.answer && <p class="rq-answer">{r.answer}{r.reply && <> — “{r.reply}”</>}</p>}
+          {tab === 'pending' && canAnswer && (
+            <div class="rq-acts">
+              {(r.kind === 'new' || r.kind === 'change') && <button class="btn sm primary" type="button" data-modal={'approve-' + r.dom}>Approve…</button>}
+              {r.kind === 'move' && <form method="post"><input type="hidden" name="op" value="approve" /><input type="hidden" name="id" value={r.id} /><input type="hidden" name="at" value={r.at} /><button class="btn sm primary" type="submit">Approve</button></form>}
+              {(r.kind === 'move' || r.kind === 'from-date') && r.href && <a class="btn sm ghost" href={r.href}>Open the event</a>}
+              {r.kind === 'member-new' || r.kind === 'member-changes' ? (
+                <>
+                  <a class="btn sm ghost" href={r.href}>Open</a>
+                  <form method="post"><input type="hidden" name="op" value="member-approve" /><input type="hidden" name="id" value={r.id} /><input type="hidden" name="at" value={r.at} /><button class="btn sm primary" type="submit">Approve</button></form>
+                </>
+              ) : r.canReply && r.email && <button class="btn sm ghost" type="button" data-modal={'reply-' + r.dom}>Reply</button>}
+              {r.kind !== 'from-date' && <button class="btn sm ghost" type="button" data-modal={'decline-' + r.dom}>Decline…</button>}
+            </div>
+          )}
+          {tab !== 'pending' && r.canReply && r.email && canAnswer && <div class="rq-acts"><button class="btn sm ghost" type="button" data-modal={'reply-' + r.dom}>Reply</button></div>}
+        </article>
+      ))}
+    </section>
+  )}
+  {(page > 1 || more) && (
+    <nav class="rq-pager" aria-label="Pages">
+      {page > 1 && <a class="btn sm ghost" href={pageHref(page - 1)}>Previous</a>}
+      <span class="hint">Page {page}</span>
+      {more && <a class="btn sm ghost" href={pageHref(page + 1)}>Next</a>}
+    </nav>
+  )}
+  {tab === 'pending' && rows.length > 0 && !canAnswer && <p class="hint">Someone whose role can publish content answers these.</p>}
+
+  {canAnswer && rows.map((r) => (
+    <>
+      {tab === 'pending' && (r.kind === 'new' || r.kind === 'change') && (
+        <Modal id={'approve-' + r.dom} title={r.kind === 'new' ? 'Approve and make a draft' : 'Approve this change'}>
+          <form method="post">
+            <input type="hidden" name="op" value="approve" /><input type="hidden" name="id" value={r.id} /><input type="hidden" name="at" value={r.at} />
+            <p class="hint">{r.kind === 'new'
+              ? 'You’ll get a draft with the title, time, repeat, rooms held and the kind’s tag and calendar. Check it, then publish it. Their contact details stay here, never on the event.'
+              : 'The event opens (or that date’s Move… dialog) so you can make the change.'}</p>
+            <label class="field"><span>Message <em class="hint">optional</em></span><textarea name="message" rows="3" maxlength="2000" placeholder="See you then!"></textarea></label>
+            <label class="check-row"><input type="checkbox" name="email" value="1" checked /> Email them that it’s approved, in their language</label>
+            <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Approve</button></div>
+          </form>
+        </Modal>
+      )}
+      {r.canReply && r.email && (
+        <Modal id={'reply-' + r.dom} title="Reply">
+          <form method="post">
+            <input type="hidden" name="op" value="reply" /><input type="hidden" name="id" value={r.id} />
+            <p class="hint">Emailed to {r.email} with a short line in their language. The request stays {tab === 'pending' ? 'waiting' : tab}.</p>
+            <label class="field"><span>Your reply</span><textarea name="message" rows="5" maxlength="2000" required placeholder="Could you come at 3 instead? The room is free then."></textarea></label>
+            <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Send reply</button></div>
+          </form>
+        </Modal>
+      )}
+      {tab === 'pending' && r.kind !== 'from-date' && (
+        <Modal id={'decline-' + r.dom} title="Decline this request">
+          <form method="post">
+            <input type="hidden" name="op" value={r.kind === 'member-new' || r.kind === 'member-changes' ? 'member-decline' : 'decline'} /><input type="hidden" name="id" value={r.id} /><input type="hidden" name="at" value={r.at} />
+            <p class="hint">{r.kind === 'member-new' || r.kind === 'member-changes' || r.kind === 'move'
+              ? 'They’re emailed that it can’t go ahead' + (r.kind === 'member-new' ? '; the draft stays for them to change and send again.' : r.kind === 'move' ? '; the date stays as it is.' : '.')
+              : 'It moves to Declined, and is deleted with the rest after the time you keep requests.'}</p>
+            <label class="field"><span>Reason <em class="hint">optional</em></span><textarea name="reason" rows="3" maxlength="2000" placeholder="The Sanctuary is booked that weekend."></textarea></label>
+            {(r.kind === 'new' || r.kind === 'change') && <label class="check-row"><input type="hidden" name="email-offered" value="1" /><input type="checkbox" name="email" value="1" checked /> Email them, in their language</label>}
+            <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Decline</button></div>
+          </form>
+          {(r.kind === 'new' || r.kind === 'change') && (
+            <form method="post" class="rq-spam">
+              <input type="hidden" name="op" value="delete" /><input type="hidden" name="id" value={r.id} />
+              <p class="hint">Spam? Delete it now, without an email to the address it gave.</p>
+              <button class="btn sm ghost" type="submit">Delete as spam</button>
+            </form>
+          )}
+        </Modal>
+      )}
+    </>
+  ))}
+
+  {canSet && (
+    <Modal id="rq-settings" title="Request settings" open={Astro.url.searchParams.has('settings')}>
+      <form method="post" class="rq-settings">
+        <input type="hidden" name="op" value="settings" />
+        <div>
+          <label class="check-row"><input type="checkbox" name="open" value="1" checked={rq.open} /> Taking requests</label>
+          <p class="hint">When off, the form and the app say so and show the office phone. They never disappear.</p>
+        </div>
+        <fieldset>
+          <legend>Kinds people choose from</legend>
+          <p class="hint">Approving a request makes a draft with the kind’s tag, in its calendar (else the default calendar).</p>
+          <div class="rq-type rq-type-h" aria-hidden="true"><span>Kind</span>{langs.map((l) => <span>{localeName(l, true)}</span>)}<span>Tag</span><span>Calendar</span></div>
+          {typeRows.map((t, i) => (
+            <div class="rq-type">
+              {t && <input type="hidden" name={'type-id-' + i} value={t.id} />}
+              <input name={'type-label-' + i} value={t?.label ?? ''} placeholder={t || i > rq.types.length ? '' : rq.types.length ? 'Add a kind' : 'Class'} aria-label="Kind" maxlength="60" />
+              {langs.map((l) => <input name={'type-' + l + '-' + i} value={t?.translations[l] ?? ''} placeholder={localeName(l, true)} aria-label={'Kind in ' + localeName(l)} maxlength="60" />)}
+              <input name={'type-tag-' + i} value={t?.tag ?? ''} placeholder="Tag" aria-label="Tag" maxlength="60" />
+              <select name={'type-cal-' + i} aria-label="Calendar">
+                <option value="">Default calendar</option>
+                {calendars.map((c) => <option value={c.id} selected={t?.calendarId === c.id}>{c.name}</option>)}
+              </select>
+            </div>
+          ))}
+        </fieldset>
+        <label class="field"><span>Reply time <em class="hint">“We usually answer within …”</em></span><input name="replyTime" value={rq.replyTime} placeholder="3 days" maxlength="60" /></label>
+        <label class="field"><span>Notice at the top of the form <em class="hint">optional</em></span><textarea name="notice" rows="2" maxlength="400" placeholder="The church office reviews every request. It isn’t on the calendar until they confirm it.">{rq.notice}</textarea></label>
+        {langs.map((l) => (
+          <fieldset>
+            <legend>{localeName(l, true)}</legend>
+            <label class="field"><span>Reply time</span><input name={'replyTime-' + l} value={rq.translations[l]?.replyTime ?? ''} maxlength="60" /></label>
+            <label class="field"><span>Notice</span><textarea name={'notice-' + l} rows="2" maxlength="400">{rq.translations[l]?.notice ?? ''}</textarea></label>
+          </fieldset>
+        ))}
+        <label class="field"><span>Office phone <em class="hint">shown when requests are closed, and after sending</em></span><input name="phone" inputmode="tel" autocomplete="off" value={rq.phone} maxlength="40" /></label>
+        <label class="field"><span>Who hears about new requests</span><textarea name="notify" rows="2" placeholder={recipients.join(', ')}>{rq.notify.join(', ')}</textarea><em class="hint">Email addresses. Empty: {MEMBERS.notify.length ? 'the members notify list in the site’s config' : 'the owners'} ({recipients.join(', ') || 'nobody yet'}).</em></label>
+        {PUSH.enabled && (
+          <div>
+            <label class="check-row"><input type="hidden" name="phones" value="0" /><input type="checkbox" name="phones" value="1" checked={rq.phones} /> Also notify their linked phones</label>
+            <p class="hint">A push saying a request arrived and for when, without names.</p>
+          </div>
+        )}
+        <div class="field-row">
+          <label class="field"><span>New requests a day <em class="hint">0 = no limit</em></span><input name="perDay" type="number" min="0" max="10000" value={rq.perDay} /></label>
+          <label class="field"><span>Keep requests for (days) <em class="hint">after the answer, or after they arrive if nobody answers</em></span><input name="keepDays" type="number" min="7" max="1095" value={rq.keepDays} /></label>
+        </div>
+        <p class="hint">Rooms people can ask for: {rooms.length ? rooms.map((r) => r.name).join(', ') : 'none yet'}. Turn on “Anyone can check if it’s free” on a room to offer it.</p>
+        <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Save</button></div>
+      </form>
+    </Modal>
+  )}
+</Admin>
+
+<style>
+  .rq-tabs { margin: 0 0 14px; }
+  .rq-count { font-size: 11px; font-weight: 700; color: var(--amber); background: var(--amber-soft); border-radius: var(--r-full); padding: 0 6px; margin-left: 6px; }
+  .rq-closed { font-size: 12.5px; font-weight: 600; color: var(--amber); background: var(--amber-soft); border-radius: var(--r-full); padding: 3px 10px; }
+  .rq-empty { padding: 24px 8px; }
+  .rq-list { padding: 0; }
+  .rq-row { display: grid; gap: 3px; padding: 14px 18px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
+  .rq-row:first-child { border-top: 0; }
+  .rq-row:target { background: var(--amber-soft); }
+  .rq-head { color: var(--text-2); font-size: 12.5px; }
+  .rq-title { font-size: 15.5px; }
+  .rq-title a { color: inherit; }
+  .rq-line, .rq-who { font-size: 13.5px; color: var(--text-2); }
+  .rq-note { margin: 4px 0 0; font-style: italic; font-size: 14px; }
+  .rq-clash { margin: 4px 0 0; font-size: 13px; color: var(--green); }
+  .rq-clash.is-taken { color: var(--amber); }
+  .rq-answer { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
+  .rq-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
+  .rq-acts form { margin: 0; }
+  .rq-pager { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
+  .rq-spam { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
+  .rq-spam .hint { margin: 0; }
+  .rq-settings { display: grid; gap: 12px; }
+  .rq-settings fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; display: grid; gap: 8px; }
+  .rq-settings legend { font-weight: 600; font-size: 13.5px; padding: 0 4px; }
+  .rq-settings .hint { margin: 2px 0 0; }
+  .rq-type { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
+  .rq-type > * { min-width: 0; }
+  .rq-type-h span { font-size: 12px; color: var(--text-2); }
+  :global(dialog#rq-settings.modal) { width: min(680px, calc(100vw - 32px)); max-width: none; }
+</style>