@acms-subir/core 0.3.3 → 0.3.4

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

@@ -1,5 +1,7 @@
 ---
 import Admin from '../../../layouts/Admin.astro';
+import BookingsHead from '../../../components/calendar/BookingsHead.astro';
+import { eventHolds } from '../../../lib/booking/holds';
 import Modal from '../../../components/Modal.astro';
 import { getRepo } from '../../../lib/repo';
 import type { Booking, BookingStatus } from '../../../lib/schema';
@@ -73,7 +75,7 @@ if (Astro.request.method === 'POST') {
       const allDay = Boolean(form.get('allDay'));
       const start = allDay ? localMidnight(date, tz) : toMs(date, String(form.get('start')));
       const end = allDay ? localMidnight(addDaysYmd(date, 1), tz) : toMs(date, String(form.get('end')));
-      if (!r || Number.isNaN(start) || Number.isNaN(end)) throw new BookingError(400, 'Choose a resource, date and times.');
+      if (!r || Number.isNaN(start) || Number.isNaN(end)) throw new BookingError(400, 'Choose a room or person, a date and times.');
       const b = await createBlock(repo, r, start, end, String(form.get('note') || ''));
       if (!b) throw new BookingError(409, 'That time already has a booking — cancel or move it first.');
       return Astro.redirect(keep({ notice: `${r.name} is blocked.` }));
@@ -85,6 +87,9 @@ if (Astro.request.method === 'POST') {
       const start = toMs(String(form.get('date')), String(form.get('time')));
       if (Number.isNaN(start)) throw new BookingError(400, 'Pick a date and time.');
       const len = link.mode === 'range' && link.lengths.length ? Number(form.get('len')) || link.lengths[0] : link.mode === 'day' ? 1440 : link.duration;
+      // staff may book over an event's hold, but only on purpose
+      const held = (await eventHolds(repo, settings, start, start + len * 60_000, r.id))[0];
+      if (held && !form.has('overHold')) throw new BookingError(409, `${r.name} is held for “${held.title}” then. Tick “Book anyway” to add it regardless.`);
       const b = await createResourceBooking(repo, {
         resource: r, link, start, end: start + len * 60_000, source: 'admin', status: 'confirmed',
         booker: { name: String(form.get('name') || ''), email: String(form.get('email') || ''), phone: String(form.get('phone') || '') },
@@ -155,6 +160,8 @@ const dayCols = resources.filter((r) => !resFilter || r.id === resFilter).map((r
   r, items: all.filter((b) => b.resourceId === r.id && active(b) && b.start < dayEnd && b.end > dayStart),
 }));
 const H0 = 7, H1 = 22;
+// rooms held by events that day (lib/booking/holds.ts), drawn under bookings
+const dayHolds = view === 'day' ? await eventHolds(repo, settings, dayStart, dayEnd) : [];
 const pos = (b: Booking) => {
   const s = Math.max(b.start, dayStart), e = Math.min(b.end, dayEnd);
   const top = ((s - dayStart) / 3_600_000 - H0) / (H1 - H0) * 100;
@@ -164,7 +171,7 @@ const pos = (b: Booking) => {
 
 const selected = Astro.url.searchParams.get('b') ? await repo.getBooking(Astro.url.searchParams.get('b')!) : null;
 const provider = emailProvider(Astro.locals);
-const TABS = [['upcoming', 'Upcoming'], ['unconfirmed', 'Unconfirmed'], ['past', 'Past'], ['cancelled', 'Cancelled']] as const;
+const TABS = [['upcoming', 'Upcoming'], ['unconfirmed', 'Needs approval'], ['past', 'Past'], ['cancelled', 'Cancelled']] as const;
 const statusLabel = (b: Booking) => (b.kind === 'block' ? 'Blocked' : b.status[0].toUpperCase() + b.status.slice(1));
 const whenOf = (b: Booking) => (b.end - b.start >= 86_400_000 - 3_600_000 && ymd(b.start, tz) !== ymd(b.end - 1, tz)
   ? `${f.day.format(b.start)} – ${f.day.format(b.end - 1)}`
@@ -174,21 +181,14 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
 ---
 
 <Admin title="Bookings" section="calendar:bookings" wide={view === 'day'}>
-  <div class="page-head">
-    <div>
-      <h1>Bookings</h1>
-      <p class="sub">{counts.unconfirmed ? `${counts.unconfirmed} waiting for approval · ` : ''}{week} in the next 7 days</p>
-    </div>
-    <div class="page-actions">
-      <nav class="seg" aria-label="View">
-        <a class={view === 'agenda' ? 'on' : ''} href={keep({ view: null })}>Agenda</a>
-        <a class={view === 'day' ? 'on' : ''} href={keep({ view: 'day' })}>Day</a>
-      </nav>
-      <a class="btn" href={keep({ format: 'csv', b: null, notice: null })}>Export</a>
-      <button class="btn" type="button" data-modal="bk-block" disabled={!resources.length}>Block time</button>
-      <button class="btn primary" type="button" data-modal="bk-add" disabled={!activeLinks.length}>Add booking</button>
-    </div>
-  </div>
+  <BookingsHead active="requests" inPlace pending={counts.unconfirmed} rooms={resources.length}
+    sub={`${counts.unconfirmed ? `${counts.unconfirmed} ${counts.unconfirmed === 1 ? 'needs' : 'need'} approval · ` : ''}${week} in the next 7 days`}>
+    <nav class="seg" aria-label="View">
+      <a class={view === 'agenda' ? 'on' : ''} href={keep({ view: null })}>Agenda</a>
+      <a class={view === 'day' ? 'on' : ''} href={keep({ view: 'day' })}>Day</a>
+    </nav>
+    <a class="btn" href={keep({ format: 'csv', b: null, notice: null })}>Export</a>
+  </BookingsHead>
   {notice && <p class="notice" role="status">{notice}</p>}
   {error && <p class="notice warn" role="alert">{error}</p>}
   {provider === 'none' && <p class="notice"><span>Emails are off — set <code>EMAIL_FROM</code> plus <code>RESEND_API_KEY</code> (or a Cloudflare <code>send_email</code> binding named EMAIL) so guests get confirmations and reminders.</span></p>}
@@ -196,13 +196,13 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
   {resources.length === 0 && !all.length ? (
     <div class="empty-state">
       <b>No bookings yet</b>
-      <p>Add a room or a person under Resources, share its booking link, and bookings land here.</p>
-      <a class="btn primary" href="/admin/calendar/resources?new=1">New resource</a>
+      <p>Bookings are times people reserve with a room or person. Add one, share its booking link, and requests land here.</p>
+      <a class="btn primary" href="/admin/calendar/resources?new=1">Add a room or person</a>
     </div>
   ) : (
   <>
     <div class="bk-kpis kpis">
-      <div class="kpi"><small>Waiting for approval</small><b>{counts.unconfirmed}</b></div>
+      <div class="kpi"><small>Needs approval</small><b>{counts.unconfirmed}</b></div>
       <div class="kpi"><small>Next 7 days</small><b>{week}</b></div>
       <div class="kpi"><small>Today</small><b>{all.filter((b) => active(b) && ymd(b.start, tz) === today).length}</b></div>
       <div class="kpi"><small>Cancelled · 30 days</small><b>{cancelled30}</b></div>
@@ -229,9 +229,9 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
       </div>
       {resources.length > 1 && (
         <details class={`fmenu ${resFilter ? 'is-set' : ''}`}>
-          <summary>{resFilter ? resById.get(resFilter)?.name : 'All resources'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6" /></svg></summary>
+          <summary>{resFilter ? resById.get(resFilter)?.name : 'All rooms & people'} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6" /></svg></summary>
           <div class="fmenu-pop">
-            <a class={!resFilter ? 'on' : ''} href={keep({ r: null })}>All resources</a>
+            <a class={!resFilter ? 'on' : ''} href={keep({ r: null })}>All rooms &amp; people</a>
             {resources.map((r) => <a class={resFilter === r.id ? 'on' : ''} href={keep({ r: r.id })}>{r.name}</a>)}
           </div>
         </details>
@@ -247,6 +247,11 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
               <div class="bk-day-hours">{Array.from({ length: H1 - H0 }, (_, i) => <span>{f.time.format(dayStart + (H0 + i) * 3_600_000).replace(':00', '')}</span>)}</div>
               {dayCols.map((c) => (
                 <div class="bk-day-col">
+                  {dayHolds.filter((h) => h.resourceId === c.r.id).map((h) => (
+                    <a class="bk-blk is-hold" style={pos({ start: h.start, end: h.end } as Booking)} href={`/admin/calendar/events/${h.eventId}`} title={`Held for ${h.title}`}>
+                      <b>Held · {h.title}</b><small>{f.time.format(h.eventStart)} – {f.time.format(h.eventEnd)}{h.start < h.eventStart || h.end > h.eventEnd ? ' · incl. setup/cleanup' : ''}</small>
+                    </a>
+                  ))}
                   {c.items.map((b) => (
                     <a class={`bk-blk is-${b.kind === 'block' ? 'block' : b.status}`} style={pos(b)} href={keep({ b: b.id })}>
                       <b>{titleOf(b)}</b><small>{whenOf(b)}</small>
@@ -260,7 +265,7 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
           <>
             {pending.length > 0 && (
               <section class="card bk-group">
-                <div class="bk-dayh"><b>Needs a decision</b><span>{pending.length}</span></div>
+                <div class="bk-dayh"><b>Needs approval</b><span>{pending.length}</span></div>
                 {pending.map((b) => (
                   <div class={`bk-row${selected?.id === b.id ? ' is-sel' : ''}`}>
                     <a class="bk-when" href={keep({ b: b.id })}>{f.day.format(b.start)}<small>{whenOf(b)}</small></a>
@@ -354,10 +359,10 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
   </>
   )}
 
-  <Modal id="bk-block" title="Block time">
+  <Modal id="bk-block" title="Block time" open={Astro.url.searchParams.has('block') && resources.length > 0}>
     <form method="post">
       <input type="hidden" name="op" value="block" />
-      <label class="field"><span>Resource</span><select name="resourceId">{resources.map((r) => <option value={r.id} selected={r.id === resFilter}>{r.name}</option>)}</select></label>
+      <label class="field"><span>Room or person</span><select name="resourceId">{resources.map((r) => <option value={r.id} selected={r.id === resFilter}>{r.name}</option>)}</select></label>
       <div class="field-row three">
         <label class="field"><span>Date</span><input type="date" name="date" value={day} required /></label>
         <label class="field"><span>From</span><input type="time" name="start" value="09:00" /></label>
@@ -369,7 +374,7 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
     </form>
   </Modal>
 
-  <Modal id="bk-add" title="Add booking">
+  <Modal id="bk-add" title="Add booking" open={Astro.url.searchParams.has('add') && activeLinks.length > 0}>
     <form method="post">
       <input type="hidden" name="op" value="add" />
       <label class="field"><span>Booking link</span><select name="linkId">{activeLinks.map((l) => <option value={l.id}>{resById.get(l.resourceId)?.name} · {l.name}</option>)}</select></label>
@@ -383,6 +388,7 @@ const activeLinks = links.filter((l) => l.active && resById.has(l.resourceId));
         <label class="field"><span>Email</span><input type="email" name="email" required /></label>
       </div>
       <label class="field"><span>Phone <em class="hint">optional</em></span><input type="tel" name="phone" /></label>
+      <label class="check-row"><input type="checkbox" name="overHold" /> Book anyway if an event is holding the room</label>
       <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Add and confirm</button></div>
       <p class="hint modal-note">Staff bookings skip notice windows but can never overlap another booking.</p>
     </form>

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>