@acms-subir/core 0.3.21 → 0.3.22

package/src/pages/admin/calendar/events/[id].astro

@@ -9,7 +9,13 @@ import { CALENDAR, eventUrl } from '../../../../lib/calendar/config';
 import { mergeEventDraft } from '../../../../lib/drafts';
 import { safeColor } from '../../../../lib/calendar/events';
 import { mapsStatus } from '../../../../lib/maps/config';
+import { approveEventRequest, declineEventRequest, setEventHosts } from '../../../../lib/calendar/requests';
+import { accessFor, forbiddenUnless } from '../../../../lib/permissions/access';
+import type { Permission } from '../../../../lib/permissions/catalog';
+import { ApiError } from '../../../../lib/api';
+import { roleLabel } from '../../../../lib/roles';
 import ThemeScript from '../../../../components/ThemeScript.astro';
+import Modal from '../../../../components/Modal.astro';
 import PostEditor from '../../../../components/editor/PostEditor';
 import '../../../../styles/admin.css';
 import '../../../../styles/editor.css';
@@ -18,20 +24,82 @@ import '../../../../styles/editor.css';
 // publish flow as posts, with the event's settings (When · Where ·
 // Registration · Organize) on the page above its content. Live events stage
 // edits until Update, like posts.
+//
+// A bar above the editor carries what the editor island doesn't: a member's
+// request on this event (lib/calendar/requests.ts) with Approve / Decline
+// for staff who can publish, and the event's hosts.
 if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
 
 const repo = await getRepo(Astro.locals);
+const self = `/admin/calendar/events/${encodeURIComponent(Astro.params.id!)}`;
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const op = String(form.get('op'));
+  const needs: Permission = op === 'approve' || op === 'decline' ? 'content.publish' : 'content.edit';
+  const denied = await forbiddenUnless(Astro.request, Astro.cookies, repo, needs);
+  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 id = Astro.params.id!;
+  const back = (key: 'notice' | 'error', text: string) => Astro.redirect(`${self}?${new URLSearchParams({ [key]: text })}`);
+  try {
+    const before = await repo.getEvent(id);
+    if (op === 'approve') {
+      await approveEventRequest(repo, who, id, hooks, Number(form.get('at')) || undefined);
+      return back('notice', before?.request?.kind === 'changes' ? 'Approved. The changes are live.' : 'Approved and published.');
+    }
+    if (op === 'decline') {
+      await declineEventRequest(repo, who, id, String(form.get('reply') || ''), hooks, Number(form.get('at')) || undefined);
+      const wasLive = before?.status === 'published' || before?.status === 'scheduled';
+      return back('notice', before?.request?.kind === 'changes' ? 'Declined. The suggested changes were dropped.' : wasLive ? 'Declined.' : 'Declined. It stays a draft until it’s sent again.');
+    }
+    if (op === 'hosts') {
+      const e = await setEventHosts(repo, who, id, form.getAll('hostIds').map(String).filter(Boolean));
+      return back('notice', e.hostIds.length ? `Hosts saved (${e.hostIds.length}).` : 'Hosts removed.');
+    }
+  } catch (err) {
+    return back('error', err instanceof ApiError ? err.message : 'That didn’t work. Try again.');
+  }
+  return Astro.redirect(self);
+}
+
 const event = await repo.getEvent(Astro.params.id!);
 if (!event) return new Response(null, { status: 404, statusText: 'Not found' });
 
 const editable = mergeEventDraft(event);
-const [settings, calendars] = await Promise.all([repo.getSettings(), repo.listCalendars()]);
+const [settings, calendars, users, access] = await Promise.all([repo.getSettings(), repo.listCalendars(), repo.listUsers(), accessFor(Astro.request, Astro.cookies, repo)]);
 const previewPath = `/preview/event/${event.id}`;
 const sharePath = `${previewPath}?token=${createPreviewToken('event', event.id)}`;
 // other languages this document can be written in (acms({ i18n }))
 const trLanguages = extraLocales().map((code) => ({ code, name: localeName(code, true) }));
 const trMain = { code: I18N.defaultLocale, name: localeName(I18N.defaultLocale || 'en', true) };
 const trDrafts = trLanguages.length > 0 && translationEngine((await repo.getSettings()).ai, Astro.locals) !== null;
+
+// the request bar: a member's request, the event's hosts, and a one-time flash
+const canPublish = access?.can('content.publish') ?? false;
+const canEdit = access?.can('content.edit') ?? false;
+const nameOf = (id: string) => { const u = users.find((x) => x.id === id); return u ? u.name || u.email : ''; };
+const req = event.request;
+const pending = req?.state === 'pending' ? req : null;
+const declined = req?.state === 'declined' ? req : null;
+const requester = req ? nameOf(req.by) || 'a member' : '';
+const cap = (t: string) => t.charAt(0).toUpperCase() + t.slice(1);
+const isLive = event.status === 'published' || event.status === 'scheduled';
+const hosts = event.hostIds.map((id) => ({ id, name: nameOf(id) })).filter((h) => h.name);
+const people = [...users].sort((a, b) => (a.name || a.email).localeCompare(b.name || b.email));
+const notice = Astro.url.searchParams.get('notice') ?? '';
+const error = Astro.url.searchParams.get('error') ?? '';
+const showBar = Boolean(req) || canEdit || hosts.length > 0 || Boolean(notice || error);
+const ago = (ts: number) => {
+  const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+  if (s < 60) return 'just now';
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+};
+const approveLabel = pending?.kind === 'changes' ? 'Approve changes' : isLive ? 'Approve' : 'Approve and publish';
 ---
 
 <!doctype html>
@@ -44,8 +112,62 @@ const trDrafts = trLanguages.length > 0 && translationEngine((await repo.getSett
     <title>{event.title || 'Untitled event'} · {BRAND.name} editor</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    {showBar && (
+      <script is:inline>
+        // The bar's forms leave the editor on purpose (approving publishes what's
+        // staged, declining drops it, hosts reload the page), so the editor's
+        // "unpublished changes" prompt must not stop them. Registered before
+        // the editor (and as a capture listener, which runs first) so it can
+        // stop the editor's own beforeunload handler for these submits only.
+        window.addEventListener('beforeunload', (e) => { if (window.__evreqLeaving) e.stopImmediatePropagation(); }, { capture: true });
+      </script>
+    )}
   </head>
-  <body>
+  <body class={showBar ? 'has-evreq' : undefined}>
+    {showBar && (
+      <header class="evreq" id="evreq" aria-label="Requests and hosts">
+        {(notice || error) && <p class={`evreq-flash${error ? ' is-error' : ''}`} role={error ? 'alert' : 'status'}>{error || notice}</p>}
+        {pending && (
+          <div class="evreq-req">
+            <div class="evreq-text">
+              <p class="evreq-line">
+                <b class="evreq-state">{pending.kind === 'new' ? 'Needs approval' : 'Changes to review'}</b>
+                <span>Requested by <b>{requester}</b> · <time datetime={new Date(pending.at).toISOString()}>{ago(pending.at)}</time></span>
+                {pending.kind === 'changes' && (
+                  <span class="evreq-muted">Suggested changes to this live event · <a href={eventUrl(event.slug)} target="_blank" rel="noopener">See what’s live ↗</a></span>
+                )}
+              </p>
+              {pending.note && <p class="evreq-note">“{pending.note}”</p>}
+            </div>
+            {canPublish ? (
+              <div class="evreq-acts">
+                <button class="btn sm ghost" type="button" data-modal="evreq-decline">Decline…</button>
+                <form method="post" data-evreq>
+                  <input type="hidden" name="op" value="approve" /><input type="hidden" name="at" value={pending.at} />
+                  <button class="btn sm" type="submit">{approveLabel}</button>
+                </form>
+              </div>
+            ) : (
+              <span class="evreq-muted">Someone whose role can publish approves this.</span>
+            )}
+          </div>
+        )}
+        {declined && (
+          <p class="evreq-declined">
+            {declined.kind === 'new' ? 'Request declined' : 'Suggested changes declined'}
+            {declined.reviewedAt ? ` ${ago(declined.reviewedAt)}` : ''}{declined.reviewedBy && nameOf(declined.reviewedBy) ? ` by ${nameOf(declined.reviewedBy)}` : ''}.
+            {declined.reply ? <> Reply to {requester}: <q>{declined.reply}</q></> : ' No note was sent.'}
+            {declined.kind === 'new' && !isLive && ` It stays a draft until ${requester} sends it again.`}
+          </p>
+        )}
+        <div class="evreq-hosts">
+          <span class="evreq-label">Hosts</span>
+          {hosts.length ? hosts.map((h) => <span class="evreq-chip">{h.name}</span>) : <span class="evreq-muted">None</span>}
+          {canEdit && <button class="btn sm ghost" type="button" data-modal="evreq-hosts">{hosts.length ? 'Edit' : 'Add hosts'}</button>}
+        </div>
+      </header>
+    )}
+
     <PostEditor
       client:only="react"
       kind="event"
@@ -64,5 +186,130 @@ const trDrafts = trLanguages.length > 0 && translationEngine((await repo.getSett
       maps={mapsStatus(Astro.locals)}
       site={{ title: settings.siteTitle, url: settings.siteUrl }}
     />
+
+    {pending && canPublish && (
+      <Modal id="evreq-decline" title={pending.kind === 'new' ? 'Decline this request' : 'Decline these changes'}>
+        <form method="post" data-evreq>
+          <input type="hidden" name="op" value="decline" /><input type="hidden" name="at" value={pending.at} />
+          <p class="hint evreq-modal-hint">
+            {pending.kind === 'changes'
+              ? `${cap(requester)}’s suggested changes are dropped. The event stays as it is.`
+              : isLive ? `${cap(requester)} hears that it was declined. The event stays as it is.`
+              : `It stays a draft that ${requester} can change and send again.`}
+          </p>
+          <label class="field"><span>Note to {requester} <em class="hint">optional</em></span><textarea name="reply" rows="3" maxlength="1000" placeholder="Thanks for asking! That weekend is taken. Could it work the week after?"></textarea></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>
+      </Modal>
+    )}
+
+    {canEdit && (
+      <Modal id="evreq-hosts" title="Hosts">
+        <form method="post" data-evreq>
+          <input type="hidden" name="op" value="hosts" />
+          <p class="hint evreq-modal-hint">Hosts see this event on My events and can cancel its dates. Up to 10.</p>
+          {people.length > 8 && <input class="evreq-find" type="search" placeholder="Find someone…" aria-label="Find someone" data-evreq-find />}
+          <div class="evreq-people">
+            {people.map((u) => (
+              <label class="check-row" data-q={`${u.name} ${u.email} ${roleLabel(u.role)}`.toLowerCase()}>
+                <input type="checkbox" name="hostIds" value={u.id} checked={event.hostIds.includes(u.id)} />
+                <span><b>{u.name || u.email}</b> <small>{roleLabel(u.role)}</small></span>
+              </label>
+            ))}
+            {people.length === 0 && <p class="hint">No one on the team yet. <a href="/admin/users?new=1">Invite someone</a></p>}
+          </div>
+          <div class="modal-foot">
+            <button class="btn ghost" type="button" data-close>Cancel</button>
+            <button class="btn primary" type="submit">Save hosts</button>
+          </div>
+        </form>
+      </Modal>
+    )}
+
+    <script>
+      const bar = document.getElementById('evreq');
+      // the editor's settings sidebar is fixed under its own top bar: move it below this bar too
+      if (bar) new ResizeObserver(() => document.body.style.setProperty('--evreq-h', `${bar.offsetHeight}px`)).observe(bar);
+
+      // a flash shows once: drop it from the address so a reload doesn't repeat it
+      const url = new URL(location.href);
+      if (url.searchParams.has('notice') || url.searchParams.has('error')) {
+        url.searchParams.delete('notice');
+        url.searchParams.delete('error');
+        history.replaceState(history.state, '', url);
+      }
+
+      // let autosave finish before leaving, then skip the editor's leave prompt
+      const busy = () => document.querySelector('.pe-savestate.dirty, .pe-savestate.saving');
+      const w = window as unknown as { __evreqLeaving?: boolean };
+      document.addEventListener('submit', async (e) => {
+        if (!bar) return;
+        const form = e.target instanceof HTMLFormElement && e.target.matches('[data-evreq]') ? e.target : null;
+        if (!form) return;
+        if (!busy()) { w.__evreqLeaving = true; return; }
+        e.preventDefault();
+        for (let i = 0; i < 50 && busy(); i++) await new Promise((r) => setTimeout(r, 120));
+        if (busy()) { alert('Your latest edits haven’t saved yet. Check the editor, then try again.'); return; }
+        w.__evreqLeaving = true;
+        form.submit();
+      });
+      // back from the next page (back/forward cache): the editor guards leaving again
+      addEventListener('pageshow', () => { w.__evreqLeaving = false; });
+
+      // find someone in a long team list
+      document.querySelector<HTMLInputElement>('[data-evreq-find]')?.addEventListener('input', (e) => {
+        const needle = (e.target as HTMLInputElement).value.trim().toLowerCase();
+        document.querySelectorAll<HTMLElement>('.evreq-people [data-q]').forEach((row) => { row.hidden = !!needle && !(row.dataset.q ?? '').includes(needle); });
+      });
+    </script>
   </body>
 </html>
+
+<style is:global>
+  /* the bar above the editor; the editor fills the rest of the screen */
+  body.has-evreq { height: 100vh; height: 100dvh; margin: 0; display: flex; flex-direction: column; overflow: hidden; }
+  body.has-evreq > astro-island { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+  body.has-evreq .pe-shell { flex: 1; min-height: 0; height: auto; }
+  @media (min-width: 768px) { body.has-evreq .pe-sidebar { top: calc(52px + var(--evreq-h, 0px)); } }
+  @media (max-width: 767px) { body.has-evreq .pe-topbar { padding-top: 8px; } }
+
+  .evreq {
+    flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
+    padding: 8px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line);
+    font-size: 13px; color: var(--text-2); max-height: 45vh; overflow-y: auto;
+  }
+  .evreq p { margin: 0; }
+  .evreq-flash { flex: 1 1 100%; font-weight: 600; color: var(--text); }
+  .evreq-flash.is-error { color: var(--red); }
+  .evreq-req { flex: 1 1 480px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
+  .evreq-text { flex: 1 1 320px; min-width: 0; }
+  .evreq-line { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
+  .evreq-line b { color: var(--text); font-weight: 600; }
+  .evreq-line .evreq-state { color: var(--amber); }
+  .evreq-muted { color: var(--muted); }
+  .evreq-muted a { color: var(--accent-deep); }
+  .evreq .evreq-note { margin-top: 2px; color: var(--text-2); font-style: italic; overflow-wrap: anywhere; }
+  .evreq-acts { display: flex; align-items: center; gap: 6px; flex: none; }
+  .evreq-acts form { margin: 0; }
+  .evreq-declined { flex: 1 1 480px; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
+  .evreq-declined q { color: var(--text-2); }
+  .evreq-hosts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
+  .evreq-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-right: 2px; }
+  .evreq-chip { font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-full); padding: 1px 9px; white-space: nowrap; }
+  .evreq-modal-hint { margin: 0 0 12px; }
+  .evreq-find { width: 100%; margin-bottom: 10px; }
+  .evreq-people { max-height: min(320px, 50vh); overflow-y: auto; margin: 0 -4px; padding: 2px 4px; }
+  .evreq-people .check-row { align-items: center; margin: 0; padding: 7px 4px; border-bottom: 1px solid var(--line); }
+  .evreq-people .check-row:last-child { border-bottom: 0; }
+  .evreq-people .check-row[hidden] { display: none; }
+  .evreq-people .check-row b { font-weight: 600; color: var(--text); }
+  .evreq-people .check-row small { color: var(--muted); font-size: 12px; margin-left: 4px; }
+  @media (max-width: 767px) {
+    .evreq { padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
+    .evreq-hosts { margin-left: 0; }
+    .evreq-acts .btn { min-height: 36px; }
+  }
+</style>

package/src/pages/admin/calendar/events/index.astro

@@ -19,13 +19,18 @@ import { siteOrigin } from '../../../../lib/seo';
 import { siteLocale } from '../../../../lib/dates';
 import { waitUntilFrom } from '../../../../lib/webhooks';
 import { invalidateRedirectCache } from '../../../../middleware';
-import { forbiddenUnless } from '../../../../lib/permissions/access';
+import { accessFor, forbiddenUnless } from '../../../../lib/permissions/access';
 import type { Permission } from '../../../../lib/permissions/catalog';
+import { approveEventRequest, declineEventRequest, pendingRequests } from '../../../../lib/calendar/requests';
+import { mergeEventDraft } from '../../../../lib/drafts';
+import { ApiError } from '../../../../lib/api';
 
 // Schedule → List: upcoming first, grouped by the month each event next
 // happens. Subscribed calendars appear as read-only rows with a "Make an
 // editable copy" action. New events open the quick-add dialog (with its mini
-// month); subscribing lives in Calendar settings.
+// month); subscribing lives in Calendar settings. Requests (shown while any
+// wait) lists members' event requests (lib/calendar/requests.ts) for staff
+// who can publish to approve or decline.
 if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
 
 const repo = await getRepo(Astro.locals);
@@ -67,6 +72,8 @@ if (Astro.request.method === 'POST') {
   const hookOpts = { origin: siteOrigin(settings, Astro.url), waitUntil: waitUntilFrom(Astro.locals), onRedirect: invalidateRedirectCache };
   // create, copy and import make drafts; bulk status changes that touch live events need Publish
   let needs: Permission = 'content.edit';
+  // answering members' event requests needs Publish (approving puts them live)
+  if (op === 'approve' || op === 'decline') needs = 'content.publish';
   if (op === 'bulk') {
     const to = String(form.get('to'));
     const before = await Promise.all(form.getAll('ids').map(String).filter(Boolean).map((id) => repo.getEvent(id)));
@@ -75,6 +82,30 @@ if (Astro.request.method === 'POST') {
   const denied = await forbiddenUnless(Astro.request, Astro.cookies, repo, needs);
   if (denied) return denied;
 
+  if (op === 'approve' || op === 'decline') {
+    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 id = String(form.get('id') || '');
+    const toRequests = (notice: string) => {
+      const p = new URLSearchParams(Astro.url.search);
+      p.set('scope', 'requests');
+      p.set('notice', notice);
+      return Astro.redirect(`/admin/calendar/events?${p}`);
+    };
+    try {
+      const before = await repo.getEvent(id);
+      if (op === 'approve') {
+        const e = await approveEventRequest(repo, who, id, hooks, Number(form.get('at')) || undefined);
+        return toRequests(before?.request?.kind === 'changes' ? `Approved the changes to “${e.title}”. They’re live now.` : `Approved “${e.title}”. It’s published.`);
+      }
+      const e = await declineEventRequest(repo, who, id, String(form.get('reply') || ''), hooks, Number(form.get('at')) || undefined);
+      return toRequests(before?.request?.kind === 'changes' ? `Declined the changes to “${e.title}”.` : `Declined “${e.title}”.`);
+    } catch (err) {
+      return toRequests(err instanceof ApiError ? err.message : 'Couldn’t answer that request. Try again.');
+    }
+  }
+
   if (op === 'create') {
     const title = String(form.get('title') || 'Untitled event').slice(0, 300);
     const date = String(form.get('date') || '');
@@ -156,12 +187,15 @@ if (Astro.request.method === 'POST') {
   }
 }
 
-const [events, calendars] = await Promise.all([repo.listEvents(), repo.listCalendars()]);
+const [events, calendars, requests, users, access] = await Promise.all([
+  repo.listEvents(), repo.listCalendars(), pendingRequests(repo), repo.listUsers(), accessFor(Astro.request, Astro.cookies, repo),
+]);
+const canApprove = access?.can('content.publish') ?? false;
 const calById = new Map(calendars.map((c) => [c.id, c]));
 const nativeCals = calendars.filter((c) => c.kind === 'native');
 const feedCals = calendars.filter((c) => c.kind === 'feed');
 
-const scope = (['upcoming', 'past', 'drafts', 'all'] as const).find((s) => s === Astro.url.searchParams.get('scope')) ?? 'upcoming';
+const scope = (['upcoming', 'past', 'drafts', 'requests', 'all'] as const).find((s) => s === Astro.url.searchParams.get('scope')) ?? 'upcoming';
 const calFilter = Astro.url.searchParams.get('cal') ?? '';
 const q = (Astro.url.searchParams.get('q') ?? '').toLowerCase();
 const notice = Astro.url.searchParams.get('notice') ?? '';
@@ -172,6 +206,7 @@ const counts = {
   upcoming: rows.filter(isUpcoming).length,
   past: rows.filter((r) => !isUpcoming(r)).length,
   drafts: rows.filter((r) => r.e.status === 'draft').length,
+  requests: requests.length,
   all: rows.length,
 };
 const selected = rows
@@ -179,6 +214,7 @@ const selected = rows
     if (scope === 'upcoming' && !isUpcoming(r)) return false;
     if (scope === 'past' && isUpcoming(r)) return false;
     if (scope === 'drafts' && r.e.status !== 'draft') return false;
+    if (scope === 'requests') return false; // listed on their own below
     if (calFilter && !r.e.calendarIds.includes(calFilter)) return false;
     if (q && !`${r.e.title} ${r.e.slug} ${r.e.location.name}`.toLowerCase().includes(q)) return false;
     return true;
@@ -203,10 +239,50 @@ const items: ContentItem[] = selected.map(({ e, o }) => {
     image: e.cover,
     viewHref: e.status === 'published' ? eventUrl(e.slug) : undefined,
     featured: e.featured,
-    badges: e.cancelled ? ['Cancelled'] : [],
+    badges: [
+      ...(e.cancelled ? ['Cancelled'] : []),
+      ...(e.request?.state === 'pending' ? [e.request.kind === 'new' ? 'Needs approval' : 'Changes to review'] : []),
+    ],
   };
 });
 
+// members' requests waiting for staff (scope=requests), oldest first; dates
+// are what the event would be once approved
+const nameOf = new Map(users.map((u) => [u.id, u.name || u.email]));
+const cap = (t: string) => t.charAt(0).toUpperCase() + t.slice(1);
+const ago = (ts: number) => {
+  const s = Math.max(0, Math.floor((now - ts) / 1000));
+  if (s < 60) return 'just now';
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+};
+const dayFmt = (() => {
+  try { return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: tz }); }
+  catch { return new Intl.DateTimeFormat('en-US', { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }); }
+})();
+const requestRows = scope !== 'requests' ? [] : requests
+  .map((e) => ({ e, shown: mergeEventDraft(e), req: e.request! }))
+  .filter(({ shown }) => (!calFilter || shown.calendarIds.includes(calFilter)) && (!q || `${shown.title} ${shown.slug} ${shown.location.name}`.toLowerCase().includes(q)))
+  .map(({ e, shown, req }) => {
+    const o = featuredOccurrence(shown, settings, now);
+    const f = o ? formatOccurrence(o, tz, locale) : null;
+    const from = nameOf.get(req.by) ?? 'a member';
+    return {
+      id: e.id,
+      href: `/admin/calendar/events/${e.id}`,
+      title: shown.title || 'Untitled event',
+      kind: req.kind,
+      at: req.at,
+      live: e.status === 'published' || e.status === 'scheduled',
+      from,
+      line: `${req.kind === 'new' ? 'New event' : 'Changes'} from ${from} · ${ago(req.at)}`,
+      note: req.note,
+      day: o ? dayFmt.format(o.start) : '',
+      time: f ? [f.time, describeRepeat(shown.rrule, shown.start)].filter(Boolean).join(' · ') : '',
+    };
+  });
+
 // feed calendars: the next 60 days as read-only rows (upcoming/all scopes)
 const feedErrors: string[] = [];
 if ((scope === 'upcoming' || scope === 'all') && feedCals.length) {
@@ -255,13 +331,16 @@ const calHref = (id: string) => {
   const str = p.toString();
   return `/admin/calendar/events${str ? `?${str}` : ''}`;
 };
-const SCOPES = [['upcoming', 'Upcoming'], ['past', 'Past'], ['drafts', 'Drafts'], ['all', 'All']] as const;
+// Requests shows while any wait (or while you're looking at it)
+const SCOPES = ([['upcoming', 'Upcoming'], ['past', 'Past'], ['drafts', 'Drafts'], ['requests', 'Requests'], ['all', 'All']] as const)
+  .filter(([k]) => k !== 'requests' || counts.requests > 0 || scope === 'requests');
 const chev = 'M6 9l6 6 6-6';
 const tomorrow = tzParts(now + 86_400_000, tz);
 const tomorrowIso = `${tomorrow.y}-${String(tomorrow.m).padStart(2, '0')}-${String(tomorrow.d).padStart(2, '0')}`;
 const subBits = [
   `${counts.upcoming} upcoming`,
   counts.drafts ? `${counts.drafts} draft${counts.drafts === 1 ? '' : 's'}` : '',
+  counts.requests ? `${counts.requests} request${counts.requests === 1 ? '' : 's'} waiting` : '',
   feedCals.length ? `${feedCals.length} subscribed calendar${feedCals.length === 1 ? '' : 's'}` : '',
 ].filter(Boolean);
 ---
@@ -335,7 +414,11 @@ const subBits = [
       <div class="list-tools">
         <div class="list-lead">
           <nav class="seg ev-scope" aria-label="Show">
-            {SCOPES.map(([k, l]) => <a href={scopeHref(k)} aria-current={scope === k ? 'page' : undefined} class={scope === k ? 'on' : ''}>{l}</a>)}
+            {SCOPES.map(([k, l]) => (
+              <a href={scopeHref(k)} aria-current={scope === k ? 'page' : undefined} class={scope === k ? 'on' : ''}>
+                {l}{k === 'requests' && counts.requests > 0 && <span class="ev-count" aria-label={`${counts.requests} waiting`}>{counts.requests}</span>}
+              </a>
+            ))}
           </nav>
           <form method="get" class="list-search" role="search">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4" /></svg>
@@ -356,16 +439,86 @@ const subBits = [
           </div>
         )}
       </div>
-      <ContentList items={items} noun="event" timeZone={settings.timezone || undefined} groupByMonth={true} empty="No events match the current filters." />
-      {items.length === 0 && (
-        <p class="hint" style="padding:24px 8px">
-          {scope === 'upcoming' ? 'Nothing coming up.' : 'No events match the current filters.'} <button class="linklike" type="button" data-new-event>Add an event</button>
-        </p>
+      {scope === 'requests' ? (
+        <>
+          {requestRows.length > 0 && (
+            <section class="card bk-group">
+              <div class="bk-dayh"><b>Waiting for approval</b><span>{requestRows.length}</span></div>
+              {requestRows.map((r) => (
+                <div class="bk-row ev-req">
+                  <a class="bk-when" href={r.href}>{r.day || 'No date'}<small>{r.time}</small></a>
+                  <a class="bk-who" href={r.href}>
+                    <b>{r.title}</b>
+                    <small>{r.line}</small>
+                    {r.note && <small class="ev-req-note">“{r.note}”</small>}
+                  </a>
+                  <span class="bk-st is-pending">{r.kind === 'new' ? 'Needs approval' : 'Changes to review'}</span>
+                  <div class="bk-acts">
+                    <a class="btn sm ghost" href={r.href}>Open</a>
+                    {canApprove && (
+                      <>
+                        <button class="btn sm ghost" type="button" data-modal={`decline-${r.id}`}>Decline…</button>
+                        <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" type="submit">Approve</button>
+                        </form>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </section>
+          )}
+          {requestRows.length > 0 && !canApprove && <p class="hint">Someone whose role can publish content approves these.</p>}
+          {requestRows.length === 0 && (
+            <p class="hint ev-req-empty">{counts.requests ? 'No requests match the current filters.' : 'Nothing waiting. When members ask for events or suggest changes, they show up here.'}</p>
+          )}
+          {canApprove && requestRows.map((r) => (
+            <Modal id={`decline-${r.id}`} title={r.kind === 'new' ? 'Decline this request' : 'Decline these changes'}>
+              <form method="post">
+                <input type="hidden" name="op" value="decline" /><input type="hidden" name="id" value={r.id} /><input type="hidden" name="at" value={r.at} />
+                <p class="hint">
+                  {r.kind === 'changes'
+                    ? `${cap(r.from)}’s suggested changes to “${r.title}” are dropped. The event stays as it is.`
+                    : r.live ? `${cap(r.from)} hears that it was declined. “${r.title}” stays as it is.`
+                    : `“${r.title}” stays a draft that ${r.from} can change and send again.`}
+                </p>
+                <label class="field"><span>Note to {r.from} <em class="hint">optional</em></span><textarea name="reply" rows="3" maxlength="1000" placeholder="Thanks for asking! That weekend is taken. Could it work the week after?"></textarea></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>
+            </Modal>
+          ))}
+        </>
+      ) : (
+        <>
+          <ContentList items={items} noun="event" timeZone={settings.timezone || undefined} groupByMonth={true} empty="No events match the current filters." />
+          {items.length === 0 && (
+            <p class="hint" style="padding:24px 8px">
+              {scope === 'upcoming' ? 'Nothing coming up.' : 'No events match the current filters.'} <button class="linklike" type="button" data-new-event>Add an event</button>
+            </p>
+          )}
+        </>
       )}
     </>
   )}
 </Admin>
 
+<style>
+  /* Requests: the waiting count on its tab, and each row's note */
+  .ev-count { font-size: 11px; font-weight: 700; color: var(--amber); background: var(--amber-soft); border-radius: var(--r-full); padding: 0 6px; min-width: 18px; text-align: center; }
+  .ev-req .bk-who small.ev-req-note { color: var(--text-2); font-style: italic; }
+  .ev-req .bk-acts { align-items: center; }
+  .ev-req .bk-acts form { margin: 0; }
+  .ev-req-empty { padding: 24px 8px; }
+  @media (max-width: 767px) {
+    .ev-req .bk-acts { grid-column: 1 / -1; justify-content: flex-end; }
+    .ev-req .bk-acts .btn { min-height: 36px; }
+  }
+</style>
+
 <script>
   document.addEventListener('click', (e) => {
     document.querySelectorAll<HTMLDetailsElement>('details.fmenu[open]').forEach((d) => {

package/src/pages/admin/index.astro

@@ -7,6 +7,9 @@ import { OWNER_ENV } from '../../lib/auth';
 import { validateRequestSession } from '../../lib/auth/request';
 import { getTraffic, umamiReadEnabled } from '../../lib/umami';
 import { collectionUrl } from '../../lib/content';
+import { CALENDAR } from '../../lib/calendar/config';
+import { pendingRequests } from '../../lib/calendar/requests';
+import { accessFor } from '../../lib/permissions/access';
 
 const coreVersion = userConfig.coreVersion;
 const repo = await getRepo(Astro.locals);
@@ -21,6 +24,15 @@ const [stats, pages, posts, links, settings, nav, users] = await Promise.all([
   repo.listUsers(),
 ]);
 const traffic = await getTraffic(settings, 30);
+// members' event requests waiting for someone who can approve them
+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;
+const requestDetail = [
+  newRequests ? `${newRequests} new event${newRequests === 1 ? '' : 's'}` : '',
+  changeRequests ? `changes to ${changeRequests} event${changeRequests === 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] ?? '';
 
@@ -155,6 +167,16 @@ const tiles = [
       </div>
     )}
 
+    {eventRequests.length > 0 && (
+      <div class="notice">
+        <div class="grow-text">
+          <b>{eventRequests.length} event request{eventRequests.length === 1 ? '' : 's'} waiting</b>
+          <span class="hint">{requestDetail}</span>
+        </div>
+        <a class="btn sm" href="/admin/calendar/events?scope=requests">Review</a>
+      </div>
+    )}
+
     <div class="kpis">
       {kpis.map((k) => (
         <div class="kpi">