@acms-subir/core 0.3.3-next.20260929113209 → 0.3.4

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

@@ -1,265 +1,6 @@
 ---
-import Admin from '../../../layouts/Admin.astro';
-import Modal from '../../../components/Modal.astro';
-import { getRepo } from '../../../lib/repo';
-import { slugify, type CalendarVisibility } from '../../../lib/schema';
-import { CALENDAR, calendarFeedUrl, calendarPageUrl } from '../../../lib/calendar/config';
-import { safeColor } from '../../../lib/calendar/events';
-import { normalizeCalendarSrc } from '../../../lib/calendar/src';
-import { loadFeed } from '../../../lib/calendar/ics';
-import { siteOrigin } from '../../../lib/seo';
-
-// Calendars: create/edit native calendars and live feed subscriptions, set
-// who can see each one, and copy the subscribe links people paste into
-// Google Calendar, Apple Calendar or Outlook.
-if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
-
-const repo = await getRepo(Astro.locals);
-const settings = await repo.getSettings();
-const origin = siteOrigin(settings, Astro.url);
-const back = (notice?: string) => Astro.redirect(`/admin/calendar/calendars${notice ? `?notice=${encodeURIComponent(notice)}` : ''}`);
-const VIS: CalendarVisibility[] = ['public', 'unlisted', 'private'];
-const token = () => {
-  const bytes = crypto.getRandomValues(new Uint8Array(18));
-  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-};
-async function freeSlug(raw: string, selfId?: string) {
-  const base = slugify(raw);
-  let slug = base;
-  for (let n = 2; ; n++) {
-    const hit = await repo.getCalendarBySlug(slug);
-    if (!hit || hit.id === selfId) return slug;
-    slug = `${base}-${n}`;
-  }
-}
-
-if (Astro.request.method === 'POST') {
-  const form = await Astro.request.formData();
-  // the edit modal's Delete button overrides the hidden op (it comes later
-  // in the form, so it's the last value)
-  const ops = form.getAll('op');
-  const op = String(ops[ops.length - 1]);
-  const id = String(form.get('id') || '');
-  const name = String(form.get('name') || '').trim().slice(0, 120);
-  const visibility = VIS.find((v) => v === form.get('visibility')) ?? 'public';
-  const color = safeColor(String(form.get('color') || '#4f46e5'));
-  const description = String(form.get('description') || '').slice(0, 1000);
-
-  if (op === 'create' || op === 'subscribe') {
-    if (!name) return back('Give the calendar a name.');
-    let feedUrl = '';
-    if (op === 'subscribe') {
-      feedUrl = normalizeCalendarSrc(String(form.get('feedUrl') || '')) ?? '';
-      if (!feedUrl) return back('Paste a Google Calendar link, a calendar ID, or an .ics feed URL.');
-      try { await loadFeed(feedUrl, Date.now()); } catch (err) { return back(err instanceof Error ? err.message : 'Couldn’t load that feed.'); }
-    }
-    await repo.createCalendar({ name, slug: await freeSlug(String(form.get('slug') || name)), color, description, visibility, kind: op === 'subscribe' ? 'feed' : 'native', feedUrl });
-    return back(`Created “${name}”.`);
-  }
-  const cal = id ? await repo.getCalendar(id) : null;
-  if (!cal) return back('That calendar no longer exists.');
-  if (op === 'update') {
-    let feedUrl = cal.feedUrl;
-    if (cal.kind === 'feed' && form.has('feedUrl') && String(form.get('feedUrl')) !== cal.feedUrl) {
-      feedUrl = normalizeCalendarSrc(String(form.get('feedUrl'))) ?? '';
-      if (!feedUrl) return back('Paste a Google Calendar link, a calendar ID, or an .ics feed URL.');
-    }
-    await repo.updateCalendar(cal.id, {
-      name: name || cal.name, slug: await freeSlug(String(form.get('slug') || name || cal.slug), cal.id),
-      color, description, visibility, feedUrl,
-    });
-    return back(`Saved “${name || cal.name}”.`);
-  }
-  if (op === 'rotate') {
-    await repo.updateCalendar(cal.id, { feedToken: token() });
-    return back('New private link created — the old one stopped working.');
-  }
-  if (op === 'move') {
-    const ids = (await repo.listCalendars()).map((c) => c.id);
-    const i = ids.indexOf(cal.id);
-    const j = form.get('dir') === 'up' ? i - 1 : i + 1;
-    if (j >= 0 && j < ids.length) [ids[i], ids[j]] = [ids[j], ids[i]];
-    await repo.reorderCalendars(ids);
-    return back();
-  }
-  if (op === 'delete') {
-    await repo.deleteCalendar(cal.id);
-    return back(`Deleted “${cal.name}”. Its events are still there, just unfiled.`);
-  }
-}
-
-const [calendars, events] = await Promise.all([repo.listCalendars(), repo.listEvents()]);
-const counts = new Map<string, number>();
-for (const e of events) for (const id of e.calendarIds) counts.set(id, (counts.get(id) ?? 0) + 1);
-const notice = Astro.url.searchParams.get('notice') ?? '';
-const feedFor = (c: (typeof calendars)[number]) =>
-  origin + calendarFeedUrl(c.slug) + (c.visibility === 'private' ? `?t=${encodeURIComponent(c.feedToken)}` : '');
-const hostOf = (u: string) => { try { return new URL(u).hostname.replace(/^www\./, ''); } catch { return u; } };
-const VIS_LABEL: Record<CalendarVisibility, string> = {
-  public: 'Public — listed on the calendar page',
-  unlisted: 'Unlisted — event pages and feed work, not listed',
-  private: 'Private — admins and the secret feed link only',
-};
-const I = {
-  up: 'M6 15l6-6 6 6', down: 'M6 9l6 6 6-6', copy: 'M9 9h10v10H9zM5 15V5h10',
-  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',
-};
+// The Calendars page moved into Calendar settings (⚙ on Schedule).
+// Kept as a redirect so bookmarks, emails and old links keep working.
+const hash = Astro.url.searchParams.has('subscribe') ? '?subscribe=1#subscribed' : '#calendars';
+return Astro.redirect(`/admin/calendar/settings${hash}`, 301);
 ---
-
-<Admin title="Calendars" section="calendar:calendars">
-  <div class="page-head">
-    <div>
-      <h1>Calendars</h1>
-      <p class="sub">Group events, choose who sees them, and share subscribe links for Google, Apple and Outlook.</p>
-    </div>
-    <div class="page-actions">
-      <button class="btn" type="button" data-modal="cal-subscribe">Subscribe to a feed</button>
-      <button class="btn primary" type="button" data-modal="cal-new">New calendar</button>
-    </div>
-  </div>
-
-  {notice && <p class="notice" role="status">{notice}</p>}
-
-  <section class="card cal-allfeed">
-    <div>
-      <b>Everything public</b>
-      <small>One link with every public calendar — paste it into any calendar app.</small>
-    </div>
-    <div class="cal-feed">
-      <input type="text" class="mono" readonly value={origin + calendarFeedUrl()} aria-label="Subscribe link for all public calendars" />
-      <button class="btn sm" type="button" data-copy={origin + calendarFeedUrl()}>Copy</button>
-    </div>
-  </section>
-
-  {calendars.length === 0 ? (
-    <div class="empty-state">
-      <b>No calendars yet</b>
-      <p>Events work without calendars. Add some to color-code events, filter the calendar page, and give each group its own subscribe link.</p>
-      <div class="empty-actions">
-        <button class="btn" type="button" data-modal="cal-subscribe">Subscribe to a feed</button>
-        <button class="btn primary" type="button" data-modal="cal-new">New calendar</button>
-      </div>
-    </div>
-  ) : (
-    <div class="cal-list">
-      {calendars.map((c, i) => (
-        <article class="cal-row" id={`cal-${c.id}`}>
-          <i class="cal-dot lg" style={`background:${safeColor(c.color)}`} aria-hidden="true" />
-          <div class="cal-main">
-            <div class="cal-title">
-              <b>{c.name}</b>
-              {c.kind === 'feed' && <span class="pill lang">Feed · {hostOf(c.feedUrl)}</span>}
-              <span class={`cal-vis is-${c.visibility}`}>{c.visibility[0].toUpperCase() + c.visibility.slice(1)}</span>
-            </div>
-            <small>
-              {c.kind === 'feed' ? 'Live mirror, refreshed every few minutes · read-only' : `${counts.get(c.id) ?? 0} event${counts.get(c.id) === 1 ? '' : 's'}`}
-              {c.description && ` · ${c.description}`}
-            </small>
-            {c.visibility !== 'private' || c.feedToken ? (
-              <div class="cal-feed">
-                <input type="text" class="mono" readonly value={feedFor(c)} aria-label={`Subscribe link for ${c.name}`} />
-                <button class="btn sm" type="button" data-copy={feedFor(c)}>Copy</button>
-                {c.visibility === 'private' && (
-                  <form method="post">
-                    <input type="hidden" name="op" value="rotate" /><input type="hidden" name="id" value={c.id} />
-                    <button class="btn sm ghost" type="submit" data-confirm="Make a new private link? Anyone subscribed with the old one stops getting updates.">New link</button>
-                  </form>
-                )}
-              </div>
-            ) : null}
-          </div>
-          <div class="cal-actions">
-            {c.visibility !== 'private' && (
-              <a class="icon-btn" href={calendarPageUrl(c.slug)} target="_blank" rel="noopener" title="View on site" aria-label="View on site">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={I.ext} /></svg>
-              </a>
-            )}
-            <form method="post" class="cal-move">
-              <input type="hidden" name="op" value="move" /><input type="hidden" name="id" value={c.id} />
-              <button class="icon-btn" name="dir" value="up" disabled={i === 0} title="Move up" aria-label="Move up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={I.up} /></svg></button>
-              <button class="icon-btn" name="dir" value="down" disabled={i === calendars.length - 1} title="Move down" aria-label="Move down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={I.down} /></svg></button>
-            </form>
-            <button class="btn sm" type="button" data-modal={`cal-edit-${c.id}`}>Edit</button>
-          </div>
-          <Modal id={`cal-edit-${c.id}`} title={`Edit ${c.name}`}>
-            <form method="post">
-              <input type="hidden" name="op" value="update" /><input type="hidden" name="id" value={c.id} />
-              <div class="field-row">
-                <label class="field"><span>Name</span><input type="text" name="name" value={c.name} required /></label>
-                <label class="field"><span>Color</span><input type="color" name="color" value={safeColor(c.color)} /></label>
-              </div>
-              <label class="field"><span>URL name</span><input class="mono" type="text" name="slug" value={c.slug} /></label>
-              {c.kind === 'feed' && <label class="field"><span>Feed link</span><input class="mono" type="text" name="feedUrl" value={c.feedUrl} /></label>}
-              <label class="field"><span>Description</span><input type="text" name="description" value={c.description} placeholder="Shown on the calendar page filter" /></label>
-              <label class="field">
-                <span>Who can see it</span>
-                <select name="visibility">
-                  {VIS.map((v) => <option value={v} selected={c.visibility === v}>{VIS_LABEL[v]}</option>)}
-                </select>
-              </label>
-              <div class="modal-foot">
-                <button class="btn danger ghost" type="submit" name="op" value="delete" formnovalidate data-confirm={`Delete “${c.name}”? Events stay, they just lose this calendar.`}>Delete</button>
-                <span class="spacer" />
-                <button class="btn ghost" type="button" data-close>Cancel</button>
-                <button class="btn primary" type="submit">Save</button>
-              </div>
-            </form>
-          </Modal>
-        </article>
-      ))}
-    </div>
-  )}
-
-  <Modal id="cal-new" title="New calendar">
-    <form method="post">
-      <input type="hidden" name="op" value="create" />
-      <div class="field-row">
-        <label class="field"><span>Name</span><input type="text" name="name" placeholder="Youth" required autofocus /></label>
-        <label class="field"><span>Color</span><input type="color" name="color" value="#4f46e5" /></label>
-      </div>
-      <label class="field"><span>Description</span><input type="text" name="description" placeholder="Optional" /></label>
-      <label class="field">
-        <span>Who can see it</span>
-        <select name="visibility">{VIS.map((v) => <option value={v}>{VIS_LABEL[v]}</option>)}</select>
-      </label>
-      <div class="modal-foot">
-        <button class="btn ghost" type="button" data-close>Cancel</button>
-        <button class="btn primary" type="submit">Create calendar</button>
-      </div>
-    </form>
-  </Modal>
-
-  <Modal id="cal-subscribe" title="Subscribe to a feed">
-    <form method="post">
-      <input type="hidden" name="op" value="subscribe" />
-      <p class="hint">Mirror a Google, Apple or Outlook calendar. Its events show up read-only and stay in sync.</p>
-      <div class="field-row">
-        <label class="field"><span>Name</span><input type="text" name="name" placeholder="Staff calendar" required /></label>
-        <label class="field"><span>Color</span><input type="color" name="color" value="#2f9e6e" /></label>
-      </div>
-      <label class="field"><span>Calendar link</span><input class="mono" type="text" name="feedUrl" placeholder="Google Calendar link, calendar ID, or .ics URL" required /></label>
-      <label class="field">
-        <span>Who can see it</span>
-        <select name="visibility">{VIS.map((v) => <option value={v}>{VIS_LABEL[v]}</option>)}</select>
-      </label>
-      <div class="modal-foot">
-        <button class="btn ghost" type="button" data-close>Cancel</button>
-        <button class="btn primary" type="submit">Subscribe</button>
-      </div>
-    </form>
-  </Modal>
-</Admin>
-
-<script>
-  document.addEventListener('click', async (e) => {
-    const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
-    if (b) {
-      await navigator.clipboard.writeText(b.dataset.copy ?? '');
-      const label = b.textContent;
-      b.textContent = 'Copied';
-      setTimeout(() => (b.textContent = label), 1200);
-    }
-    const c = e.target instanceof Element ? e.target.closest<HTMLElement>('[data-confirm]') : null;
-    if (c && !confirm(c.dataset.confirm)) e.preventDefault();
-  });
-</script>

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

@@ -1,4 +1,6 @@
 ---
+import { I18N, extraLocales, localeName } from '../../../../lib/i18n';
+import { translationEngine } from '../../../../lib/translate';
 import { getRepo } from '../../../../lib/repo';
 import { createPreviewToken } from '../../../../lib/preview';
 import { env } from '../../../../lib/env';
@@ -24,6 +26,10 @@ const editable = mergeEventDraft(event);
 const [settings, calendars] = await Promise.all([repo.getSettings(), repo.listCalendars()]);
 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;
 ---
 
 <!doctype html>
@@ -42,6 +48,9 @@ const sharePath = `${previewPath}?token=${createPreviewToken('event', event.id)}
       client:only="react"
       kind="event"
       event={editable}
+      languages={trLanguages}
+      mainLanguage={trMain}
+      translationDrafts={trDrafts}
       initialHTML={editable.bodyHtml}
       unsplashEnabled={Boolean(env('UNSPLASH_ACCESS_KEY'))}
       previewPath={previewPath}

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

@@ -1,6 +1,9 @@
 ---
 import Admin from '../../../../layouts/Admin.astro';
 import Modal from '../../../../components/Modal.astro';
+import NewEventDialog from '../../../../components/calendar/NewEventDialog';
+import { bookingsEnabled } from '../../../../lib/calendar/config';
+import { todayIn } from '../../../../lib/calendar/board';
 import ContentList, { type ContentItem } from '../../../../components/ContentList.astro';
 import { getRepo } from '../../../../lib/repo';
 import { slugify, type Status } from '../../../../lib/schema';
@@ -16,9 +19,10 @@ import { siteLocale } from '../../../../lib/dates';
 import { waitUntilFrom } from '../../../../lib/webhooks';
 import { invalidateRedirectCache } from '../../../../middleware';
 
-// Events list: upcoming first, grouped by the month each event next happens.
-// Feed calendars (live ICS mirrors) appear as read-only rows with a "Copy"
-// action that turns one into an editable draft.
+// 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.
 if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
 
 const repo = await getRepo(Astro.locals);
@@ -107,23 +111,6 @@ if (Astro.request.method === 'POST') {
     }
   }
 
-  // live mirror of an external calendar
-  if (op === 'subscribe') {
-    const url = normalizeCalendarSrc(String(form.get('url') || ''));
-    const name = String(form.get('name') || '').trim() || 'Imported calendar';
-    if (!url) return back('Paste a Google Calendar link, a calendar ID, or an .ics feed URL.');
-    try {
-      await loadFeed(url, now);
-    } catch (err) {
-      return back(err instanceof Error ? err.message : 'Couldn’t load that feed.');
-    }
-    const base = slugify(name);
-    let slug = base;
-    for (let n = 2; await repo.getCalendarBySlug(slug); n++) slug = `${base}-${n}`;
-    await repo.createCalendar({ name, slug, kind: 'feed', feedUrl: url, color: safeColor(String(form.get('color') || '#2f9e6e')) });
-    return back(`Subscribed to “${name}” — its events now show on your calendar.`);
-  }
-
   // one-time import: .ics / .csv file, or an ICS URL, into drafts
   if (op === 'import') {
     const calendarId = String(form.get('calendarId') || '');
@@ -221,16 +208,16 @@ if ((scope === 'upcoming' || scope === 'all') && feedCals.length) {
         const uid = uids.get(`${occ.title}|${occ.location}`) ?? '';
         items.push({
           id: `feed-${c.id}-${occ.start}`,
-          href: `/admin/calendar/calendars#cal-${c.id}`,
+          href: `/admin/calendar/settings#cal-${c.id}`,
           title: occ.title,
           sub: '',
           meta: [occ.location, `from ${c.name}`].filter(Boolean).join(' · '),
           when: occ.allDay ? f.range : f.range,
           at: occ.start,
           status: 'feed',
-          statusLabel: 'Read-only · feed',
+          statusLabel: 'Subscribed · read-only',
           readonly: true,
-          action: uid ? { label: 'Copy', fields: { op: 'copy', calendarId: c.id, uid } } : undefined,
+          action: uid ? { label: 'Make editable copy', fields: { op: 'copy', calendarId: c.id, uid } } : undefined,
         });
       }
     } catch (err) {
@@ -261,72 +248,45 @@ const tomorrowIso = `${tomorrow.y}-${String(tomorrow.m).padStart(2, '0')}-${Stri
 const subBits = [
   `${counts.upcoming} upcoming`,
   counts.drafts ? `${counts.drafts} draft${counts.drafts === 1 ? '' : 's'}` : '',
-  feedCals.length ? `${feedCals.length} feed calendar${feedCals.length === 1 ? '' : 's'}` : '',
+  feedCals.length ? `${feedCals.length} subscribed calendar${feedCals.length === 1 ? '' : 's'}` : '',
 ].filter(Boolean);
 ---
 
-<Admin title="Events" section="calendar:events">
+<Admin title="Schedule" section="calendar:schedule">
   <div class="page-head">
     <div>
-      <h1>Events</h1>
+      <h1>All events</h1>
       <p class="sub">{subBits.join(' · ')} · public at <a href={CALENDAR.base} target="_blank" rel="noopener">{CALENDAR.base}</a></p>
     </div>
     <div class="page-actions">
-      <button class="btn" type="button" data-modal="import-events">Import</button>
-      <button class="btn primary" type="button" data-modal="new-event">New event</button>
+      <nav class="seg" aria-label="View">
+        <a href="/admin/calendar">Month</a>
+        <a href="/admin/calendar?view=week">Week</a>
+        <a class="on" href="/admin/calendar/events" aria-current="page">List</a>
+      </nav>
+      <a class="btn ico" href="/admin/calendar/settings" title="Calendar settings" aria-label="Calendar settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></svg></a>
+      <details class="newmenu">
+        <summary class="btn primary">New <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d={chev} /></svg></summary>
+        <div class="newmenu-pop" role="menu">
+          <button type="button" role="menuitem" data-new-event>Event <kbd>N</kbd></button>
+          {bookingsEnabled() && <a role="menuitem" href="/admin/calendar/bookings?block=1">Block time <small>room closed, time off</small></a>}
+          <button type="button" role="menuitem" data-modal="import-events">Import events… <small>.ics or .csv</small></button>
+        </div>
+      </details>
     </div>
   </div>
 
   {notice && <p class="notice" role="status">{notice}</p>}
   {feedErrors.map((e) => <p class="notice warn">Couldn’t refresh {e}</p>)}
 
-  <Modal id="new-event" title="New event" open={Astro.url.searchParams.has('new')}>
-    <form method="post">
-      <input type="hidden" name="op" value="create" />
-      <label class="field">
-        <span>Title</span>
-        <input type="text" name="title" placeholder="Fall Festival" required autofocus />
-      </label>
-      <div class="field-row">
-        <label class="field"><span>Date</span><input type="date" name="date" value={tomorrowIso} required /></label>
-        <label class="field"><span>Time <em class="hint">blank = all day</em></span><input type="time" name="time" value="10:00" step="300" /></label>
-      </div>
-      {nativeCals.length > 0 && (
-        <label class="field">
-          <span>Calendar</span>
-          <select name="calendarId">
-            <option value="">None — main calendar only</option>
-            {nativeCals.map((c) => <option value={c.id} selected={c.id === calFilter}>{c.name}</option>)}
-          </select>
-        </label>
-      )}
-      <div class="modal-foot">
-        <button class="btn ghost" type="button" data-close>Cancel</button>
-        <button class="btn primary" type="submit">Create event</button>
-      </div>
-      <p class="hint modal-note">Creates a draft and opens the editor, where you add the image, location, button and repeat rule.</p>
-    </form>
-  </Modal>
+  <NewEventDialog client:load calendars={nativeCals.map((c) => ({ id: c.id, name: c.name, color: safeColor(c.color) }))}
+    defaultCalendarId={settings.calendar.defaultCalendarId || calFilter} weekStart={settings.calendar.weekStart} locale={locale}
+    today={todayIn(tz)} day={tomorrowIso} open={Astro.url.searchParams.has('new')} />
 
-  <Modal id="import-events" title="Bring in events">
-    <div class="seg block ev-import-tabs" role="tablist">
-      <button type="button" role="tab" aria-selected="true" data-tab="subscribe">Subscribe to a calendar</button>
-      <button type="button" role="tab" aria-selected="false" data-tab="once">Import once</button>
-    </div>
-    <form method="post" data-panel="subscribe">
-      <input type="hidden" name="op" value="subscribe" />
-      <p class="hint">Mirror a Google, Apple or Outlook calendar live. Its events show on your calendar and stay in sync, read-only.</p>
-      <label class="field"><span>Name</span><input type="text" name="name" placeholder="Staff calendar" required /></label>
-      <label class="field"><span>Calendar link</span><input class="mono" type="text" name="url" placeholder="Google Calendar link, calendar ID, or an .ics URL" required /></label>
-      <label class="field"><span>Color</span><input type="color" name="color" value="#2f9e6e" /></label>
-      <div class="modal-foot">
-        <button class="btn ghost" type="button" data-close>Cancel</button>
-        <button class="btn primary" type="submit">Subscribe</button>
-      </div>
-    </form>
-    <form method="post" enctype="multipart/form-data" data-panel="once" hidden>
+  <Modal id="import-events" title="Import events" open={Astro.url.searchParams.has('import')}>
+    <form method="post" enctype="multipart/form-data">
       <input type="hidden" name="op" value="import" />
-      <p class="hint">Copy events in as editable drafts. Works with .ics exports from Google, Apple and Outlook, or a spreadsheet saved as .csv with Title and Start date columns.</p>
+      <p class="hint">Copy events in once, as editable drafts. Works with .ics exports from Google, Apple and Outlook, or a spreadsheet saved as .csv with Title and Start date columns. To keep a calendar in sync instead, <a href="/admin/calendar/settings?subscribe=1#subscribed">subscribe to it</a>.</p>
       <label class="field"><span>File</span><input type="file" name="file" accept=".ics,.csv,text/calendar,text/csv" /></label>
       <label class="field"><span>Or a calendar link</span><input class="mono" type="text" name="url" placeholder="https://calendar.google.com/…" /></label>
       {nativeCals.length > 0 && (
@@ -348,10 +308,9 @@ const subBits = [
   {events.length === 0 && feedCals.length === 0 ? (
     <div class="empty-state">
       <b>No events yet</b>
-      <p>Add your first event, or bring in an existing Google, Apple or Outlook calendar.</p>
+      <p>Events are things that happen on a date. Add one, or import a calendar file from Google, Apple or Outlook.</p>
       <div class="empty-actions">
-        <button class="btn" type="button" data-modal="import-events">Import</button>
-        <button class="btn primary" type="button" data-modal="new-event">New event</button>
+        <button class="btn primary" type="button" data-new-event>New event</button>
       </div>
     </div>
   ) : (
@@ -386,7 +345,7 @@ const subBits = [
       <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.'} <a href="/admin/calendar/events?new=1">Add an event</a>
+          {scope === 'upcoming' ? 'Nothing coming up.' : 'No events match the current filters.'} <button class="linklike" type="button" data-new-event>Add an event</button>
         </p>
       )}
     </>
@@ -399,10 +358,9 @@ const subBits = [
       if (!(e.target instanceof Node && d.contains(e.target))) d.open = false;
     });
   });
-  // import modal tabs
-  const tabs = document.querySelectorAll<HTMLButtonElement>('.ev-import-tabs [data-tab]');
-  tabs.forEach((t) => t.addEventListener('click', () => {
-    tabs.forEach((x) => x.setAttribute('aria-selected', String(x === t)));
-    document.querySelectorAll<HTMLElement>('#import-events [data-panel]').forEach((p) => { p.hidden = p.dataset.panel !== t.dataset.tab; });
-  }));
+  // the New ▾ menu closes like the filter menus
+  document.addEventListener('click', (e) => {
+    const m = document.querySelector<HTMLDetailsElement>('details.newmenu[open]');
+    if (m && (!(e.target instanceof Node) || !m.contains(e.target) || (e.target as Element).closest('[role=menuitem]'))) m.open = false;
+  });
 </script>

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

@@ -0,0 +1,43 @@
+---
+import Admin from '../../../layouts/Admin.astro';
+import CalendarBoard from '../../../components/calendar/CalendarBoard';
+import { getRepo } from '../../../lib/repo';
+import { CALENDAR, bookingsEnabled } from '../../../lib/calendar/config';
+import { loadBoard, todayIn } from '../../../lib/calendar/board';
+import { isIsoDay, isIsoMonth, monthWeeks, weekDays } from '../../../lib/calendar/grid';
+import { siteLocale } from '../../../lib/dates';
+
+// Schedule: the Calendar section's home — a month (or week) grid of every
+// event, draft, subscribed calendar and booking. ?m=YYYY-MM picks the month,
+// ?view=week&d=YYYY-MM-DD a week; the list lives at /admin/calendar/events.
+if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
+if (Astro.url.searchParams.get('view') === 'list') return Astro.redirect('/admin/calendar/events');
+
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+const tz = settings.timezone || 'UTC';
+const today = todayIn(tz);
+const weekStart = settings.calendar.weekStart;
+const view = Astro.url.searchParams.get('view') === 'week' ? 'week' : 'month';
+const d = Astro.url.searchParams.get('d') ?? '';
+const m = Astro.url.searchParams.get('m') ?? '';
+const anchor = isIsoDay(d) ? d : isIsoMonth(m) ? `${m}-01` : today;
+const weeks = monthWeeks(anchor.slice(0, 7), weekStart);
+const [from, to] = view === 'week' ? [weekDays(anchor, weekStart)[0], weekDays(anchor, weekStart)[6]] : [weeks[0][0], weeks[weeks.length - 1][6]];
+const initial = await loadBoard(repo, settings, from, to);
+---
+
+<Admin title="Schedule" section="calendar:schedule" wide>
+  <CalendarBoard
+    client:load
+    initial={initial}
+    view={view}
+    anchor={anchor}
+    today={today}
+    weekStart={weekStart}
+    locale={siteLocale(settings)}
+    defaultCalendarId={settings.calendar.defaultCalendarId}
+    bookings={bookingsEnabled()}
+    listHref="/admin/calendar/events"
+  />
+</Admin>

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

@@ -9,6 +9,9 @@ import { describeLink } from '../../../../lib/booking/availability';
 import { isValidTimeZone } from '../../../../lib/calendar/events';
 import { normalizeCalendarSrc } from '../../../../lib/calendar/src';
 import { siteOrigin } from '../../../../lib/seo';
+import { approvalShort, linkApproval } from '../../../../lib/booking/approval';
+import { eventHolds } from '../../../../lib/booking/holds';
+import { fmt } from '../../../../lib/booking/view';
 
 // One resource: details, weekly hours, date overrides, calendars that block
 // time, who gets notified, the staff feed, and its booking links.
@@ -53,7 +56,7 @@ if (Astro.request.method === 'POST') {
     const base = slugify(name);
     let slug = base;
     for (let n = 2; await repo.getBookingLinkBySlug(id, slug); n++) slug = `${base}-${n}`;
-    const l = await repo.createBookingLink({ resourceId: id, name, slug, autoConfirm: true });
+    const l = await repo.createBookingLink({ resourceId: id, name, slug });
     return Astro.redirect(`/admin/calendar/resources/${id}/links/${l.id}`);
   } else if (op === 'rotate') {
     await repo.updateResource(id, { feedToken: token() });
@@ -65,14 +68,17 @@ if (Astro.request.method === 'POST') {
   resource = (await repo.getResource(id))!;
 }
 const links = await repo.listBookingLinks(id);
+// events holding this room in the next 90 days (lib/booking/holds.ts)
+const holds = (await eventHolds(repo, settings, Date.now(), Date.now() + 90 * 86_400_000, id)).slice(0, 12);
+const holdFmt = fmt(settings, resource.timezone || settings.timezone || 'UTC');
 const staffFeed = origin + resourceFeedUrl(resource.slug, resource.feedToken);
 const ovRows = [...resource.overrides, { date: '', endDate: '', ranges: [], label: '' }, { date: '', endDate: '', ranges: [], label: '' }];
 ---
 
-<Admin title={resource.name} section="calendar:resources">
+<Admin title={resource.name} section="calendar:bookings">
   <div class="page-head">
     <div>
-      <p class="sub"><a href="/admin/calendar/resources">Resources</a> ›</p>
+      <p class="sub"><a href="/admin/calendar/bookings">Bookings</a> › <a href="/admin/calendar/resources">Rooms &amp; people</a> ›</p>
       <h1>{resource.name}</h1>
       <p class="sub"><a href={resourceUrl(resource.slug)} target="_blank" rel="noopener">{origin.replace(/^https?:\/\//, '')}{resourceUrl(resource.slug)} ↗</a></p>
     </div>
@@ -89,7 +95,7 @@ const ovRows = [...resource.overrides, { date: '', endDate: '', ranges: [], labe
           {links.map((l) => (
             <a class="res-linkrow" href={`/admin/calendar/resources/${id}/links/${l.id}`}>
               <span><b>{l.name}</b>{!l.active && <span class="pill lang">Off</span>}{l.visibility === 'unlisted' && <span class="pill lang">Unlisted</span>}</span>
-              <small>{describeLink(l)} · {l.mode === 'range' ? 'choose a length' : l.mode === 'day' ? 'whole days' : 'fixed length'} · <em class={l.autoConfirm ? 'auto' : 'manual'}>{l.autoConfirm ? 'Confirms automatically' : 'Needs approval'}</em></small>
+              <small>{describeLink(l)} · {l.mode === 'range' ? 'choose a length' : l.mode === 'day' ? 'whole days' : 'fixed length'} · {(() => { const a = linkApproval(l, settings); return <em class={a.mode === 'auto' ? 'auto' : 'manual'}>{approvalShort(a)}{a.inherited ? ' (site setting)' : ''}</em>; })()}</small>
               <code>{bookingLinkUrl(resource.slug, l.slug)}</code>
             </a>
           ))}
@@ -97,10 +103,26 @@ const ovRows = [...resource.overrides, { date: '', endDate: '', ranges: [], labe
         <form method="post" class="res-newlink">
           <input type="hidden" name="op" value="link" />
           <input type="text" name="linkName" placeholder="New link, e.g. “Event or reception”" required />
-          <button class="btn" type="submit">Add link</button>
+          <button class="btn" type="submit">Add booking link</button>
         </form>
       </section>
 
+      <section class="card card-pad">
+        <div class="card-head"><b>Held by events</b><span class="hint">Events that use this {resource.kind.toLowerCase()} can’t be booked over</span></div>
+        {holds.length === 0 ? (
+          <p class="hint" style="margin:0">No events are holding it in the next 90 days. Tick it under <b>Rooms</b> in an event’s settings to hold it.</p>
+        ) : (
+          <div class="res-linklist">
+            {holds.map((h) => (
+              <a class="res-linkrow" href={`/admin/calendar/events/${h.eventId}`}>
+                <span><b>{h.title}</b></span>
+                <small>{holdFmt.day.format(h.start)} · {h.end - h.start >= 86_400_000 - 3_600_000 ? 'all day' : `${holdFmt.time.format(h.start)} – ${holdFmt.time.format(h.end)}`}</small>
+              </a>
+            ))}
+          </div>
+        )}
+      </section>
+
       <section class="card card-pad">
         <div class="card-head"><b>Open hours</b><span class="hint">The outer limit for every link</span></div>
         <HoursEditor hours={resource.hours} prefix="hours" form="res-form" note={`Times in ${resource.timezone || settings.timezone || 'UTC'}. Links can narrow these hours but never extend them.`} />