@acms-subir/core 0.3.3 → 0.3.5

package/src/components/calendar/CalendarBoard.tsx

@@ -0,0 +1,618 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type MouseEvent as ReactMouseEvent } from 'react';
+import { actions } from 'astro:actions';
+import {
+  addDays, addMonths, diffDays, layoutDay, layoutWeek, monthOf, monthWeeks, weekDays, type Iso,
+} from '../../lib/calendar/grid';
+import type { BoardCalendar, BoardData, BoardItem } from '../../lib/calendar/board';
+import QuickAdd, { type QuickCalendar, type QuickStart } from './QuickAdd';
+import { weekdayLetters } from './MiniMonth';
+import '../../styles/schedule.css';
+
+// The admin Schedule: a month (or week) grid of everything on the calendar —
+// events, drafts, subscribed calendars, bookings. Click a day to add, drag
+// an event to move it, click a day number for that day's list. Data comes
+// from actions.calendar.range; this file only does UI and layout.
+
+type View = 'month' | 'week';
+type MoveUndo = { kind: 'series'; id: string; days: number } | { kind: 'split'; id: string; seriesId: string; occurrence: string };
+
+interface Props {
+  initial: BoardData;
+  view: View;
+  anchor: Iso; // any day in the shown month/week
+  today: Iso;
+  weekStart: 0 | 1;
+  locale: string;
+  defaultCalendarId: string;
+  bookings: boolean;
+  listHref: string;
+}
+
+const LINES = 4; // stacked items per day cell on desktop
+const HOUR = 44; // px per hour in week view
+const HIDDEN_KEY = 'acms:schedule:hidden';
+const BOOKINGS = '__bookings';
+const NONE = '__none';
+
+const utc = (d: Iso) => new Date(Date.UTC(+d.slice(0, 4), +d.slice(5, 7) - 1, +d.slice(8, 10)));
+const rangeOf = (view: View, anchor: Iso, weekStart: 0 | 1): [Iso, Iso] => {
+  if (view === 'week') { const w = weekDays(anchor, weekStart); return [w[0], w[6]]; }
+  const weeks = monthWeeks(monthOf(anchor), weekStart);
+  return [weeks[0][0], weeks[weeks.length - 1][6]];
+};
+const keyOf = (r: [Iso, Iso]) => `${r[0]}|${r[1]}`;
+const filterKey = (it: BoardItem) => (it.kind === 'booking' || it.kind === 'block' ? BOOKINGS : it.calendarId || NONE);
+const editable = (it: BoardItem) => it.kind === 'event';
+
+export default function CalendarBoard(props: Props) {
+  const { today, weekStart, locale } = props;
+  const [view, setView] = useState<View>(props.view);
+  const [anchor, setAnchor] = useState<Iso>(props.anchor);
+  const cache = useRef(new Map<string, BoardData>([[keyOf([props.initial.from, props.initial.to]), props.initial]]));
+  const [data, setData] = useState<BoardData>(props.initial);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(props.initial.errors.join(' · '));
+  const [hidden, setHidden] = useState<Set<string>>(new Set());
+  const [panelDay, setPanelDay] = useState<Iso | null>(null);
+  const [quick, setQuick] = useState<{ start: QuickStart; anchor: DOMRect | null; mode: 'popover' | 'dialog' } | null>(null);
+  const [draft, setDraft] = useState<BoardItem | null>(null);
+  const [peek, setPeek] = useState<{ item: BoardItem; rect: DOMRect } | null>(null);
+  const [dragKey, setDragKey] = useState<string | null>(null);
+  const [dropDay, setDropDay] = useState<Iso | null>(null);
+  const [ask, setAsk] = useState<{ item: BoardItem; days: number; to: Iso } | null>(null);
+  const [toast, setToast] = useState<{ text: string; undo?: MoveUndo; error?: boolean } | null>(null);
+  const [menu, setMenu] = useState(false);
+  const [compact, setCompact] = useState(false);
+  const [selected, setSelected] = useState<Iso>(props.anchor);
+  const selection = useRef<{ from: Iso; to: Iso } | null>(null);
+  const [selecting, setSelecting] = useState<{ from: Iso; to: Iso } | null>(null);
+  const weekScroll = useRef<HTMLDivElement>(null);
+  const root = useRef<HTMLDivElement>(null);
+
+  // ---- data ----------------------------------------------------------------
+  const range = useMemo(() => rangeOf(view, anchor, weekStart), [view, anchor, weekStart]);
+  const load = useCallback(async (r: [Iso, Iso], force = false) => {
+    const k = keyOf(r);
+    if (!force && cache.current.has(k)) return cache.current.get(k)!;
+    const res = await actions.calendar.range({ from: r[0], to: r[1] });
+    if (res.error || !res.data) throw new Error(res.error?.message ?? 'Couldn’t load the calendar.');
+    cache.current.set(k, res.data as BoardData);
+    return res.data as BoardData;
+  }, []);
+  const refresh = useCallback(async (force = true) => {
+    setLoading(true);
+    try {
+      if (force) cache.current.clear();
+      const d = await load(range, force);
+      setData(d);
+      setError(d.errors.join(' · '));
+    } catch (e) { setError(e instanceof Error ? e.message : String(e)); }
+    setLoading(false);
+  }, [load, range]);
+  useEffect(() => {
+    const k = keyOf(range);
+    if (k === keyOf([data.from, data.to])) return;
+    void refresh(false);
+  }, [range]);
+  // neighbours in the background so ‹ › feels instant
+  useEffect(() => {
+    const step = view === 'week' ? 7 : 0;
+    const next = view === 'week' ? addDays(anchor, step) : `${addMonths(monthOf(anchor), 1)}-01`;
+    const prev = view === 'week' ? addDays(anchor, -step) : `${addMonths(monthOf(anchor), -1)}-01`;
+    const t = setTimeout(() => { load(rangeOf(view, next, weekStart)).catch(() => {}); load(rangeOf(view, prev, weekStart)).catch(() => {}); }, 400);
+    return () => clearTimeout(t);
+  }, [data]);
+
+  // ---- url, storage, media ----------------------------------------------------
+  useEffect(() => {
+    const u = new URL(location.href);
+    u.searchParams.delete('m'); u.searchParams.delete('d'); u.searchParams.delete('view');
+    if (view === 'week') { u.searchParams.set('view', 'week'); u.searchParams.set('d', anchor); }
+    else if (monthOf(anchor) !== monthOf(today)) u.searchParams.set('m', monthOf(anchor));
+    history.replaceState(null, '', u.pathname + (u.search ? u.search : ''));
+  }, [view, anchor]);
+  useEffect(() => {
+    try { setHidden(new Set(JSON.parse(localStorage.getItem(HIDDEN_KEY) ?? '[]'))); } catch { /* fresh */ }
+    // compact = the board itself is narrow (phones, or a tablet with the
+    // sidebar open) — a 7-column grid under ~620px only fits 3-letter titles
+    const el = root.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([e]) => setCompact(e.contentRect.width < 620));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const toggle = (k: string) => setHidden((h) => {
+    const n = new Set(h);
+    n.has(k) ? n.delete(k) : n.add(k);
+    try { localStorage.setItem(HIDDEN_KEY, JSON.stringify([...n])); } catch { /* private mode */ }
+    return n;
+  });
+  useEffect(() => {
+    if (view === 'week' && weekScroll.current) weekScroll.current.scrollTop = 7 * HOUR - 10;
+  }, [view]);
+
+  // ---- navigation ----------------------------------------------------------
+  const go = (dir: -1 | 1) => {
+    setPanelDay(null); setPeek(null);
+    if (view === 'week') { setAnchor((a) => addDays(a, dir * 7)); setSelected((s) => addDays(s, dir * 7)); }
+    else setAnchor((a) => { const m = addMonths(monthOf(a), dir); setSelected(`${m}-01`); return `${m}-01`; });
+  };
+  const goToday = () => { setAnchor(today); setSelected(today); setPanelDay(null); };
+  const switchView = (v: View) => { setView(v); setPanelDay(null); setPeek(null); setAnchor(selected); };
+
+  const openNew = (day?: Iso) => { setPeek(null); setQuick({ start: { day: day ?? (selected || today) }, anchor: null, mode: 'dialog' }); };
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const t = e.target as HTMLElement;
+      if (t.closest('input, textarea, select, [contenteditable], dialog[open]') || e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.key === 'Escape') { setQuick(null); setPeek(null); setPanelDay(null); setMenu(false); setAsk(null); }
+      if (quick || ask) return;
+      if (e.key === 'ArrowLeft') go(-1);
+      else if (e.key === 'ArrowRight') go(1);
+      else if (e.key === 't' || e.key === 'T') goToday();
+      else if (e.key === 'n' || e.key === 'N') { e.preventDefault(); openNew(); }
+      else if (e.key === 'm' || e.key === 'M') switchView('month');
+      else if (e.key === 'w' || e.key === 'W') switchView('week');
+    };
+    // header buttons outside this island (e.g. empty states) can open quick add
+    const onClick = (e: MouseEvent) => {
+      const el = (e.target as HTMLElement).closest('[data-new-event]');
+      if (el) { e.preventDefault(); openNew(); }
+    };
+    addEventListener('keydown', onKey);
+    document.addEventListener('click', onClick);
+    return () => { removeEventListener('keydown', onKey); document.removeEventListener('click', onClick); };
+  });
+
+  // ---- items ---------------------------------------------------------------
+  const items = useMemo(() => {
+    const list = data.items.filter((it) => !hidden.has(filterKey(it)));
+    return draft ? [...list, draft] : list;
+  }, [data, hidden, draft]);
+  const dayItems = (d: Iso) => items.filter((it) => it.startDay <= d && it.endDay >= d && it !== draft);
+  const calendars: QuickCalendar[] = data.calendars.filter((c) => c.kind === 'native').map(({ id, name, color }) => ({ id, name, color }));
+  const hasUncategorized = data.items.some((it) => it.kind === 'event' && !it.calendarId);
+  const hasBookings = props.bookings && data.items.some((it) => it.kind === 'booking' || it.kind === 'block');
+
+  const showDraft = (d: Parameters<NonNullable<Parameters<typeof QuickAdd>[0]['onDraft']>>[0]) => {
+    if (!d) { setDraft(null); return; }
+    const color = calendars.find((c) => c.id === d.calendarId)?.color ?? '#8a8378';
+    setDraft({
+      key: '__draft', kind: 'event', id: '', title: d.title, startDay: d.day, endDay: d.endDay, allDay: d.allDay || d.endDay > d.day,
+      startMin: d.startMin, endMin: d.endMin, time: d.allDay ? '' : shortTime(d.startMin), range: '', color, calendarId: d.calendarId,
+      calendarName: '', status: 'draft', recurring: false, repeat: '', rooms: [], roomsHeld: false, occurrence: '', cancelled: false, location: '', edited: false, url: '',
+    });
+  };
+
+  // ---- moving ----------------------------------------------------------------
+  const dayLabel = (d: Iso, o: Intl.DateTimeFormatOptions = { weekday: 'short', month: 'short', day: 'numeric' }) =>
+    new Intl.DateTimeFormat(locale, { ...o, timeZone: 'UTC' }).format(utc(d));
+  async function move(item: BoardItem, days: number, mode: 'series' | 'one', to: Iso) {
+    setAsk(null);
+    const r = await actions.events.move({ id: item.id, days, mode, occurrence: item.occurrence });
+    if (r.error || !r.data) { setToast({ text: r.error?.message ?? 'Couldn’t move the event.', error: true }); return; }
+    setToast({ text: `Moved “${item.title}” to ${dayLabel(to)}`, undo: r.data.undo as MoveUndo });
+    await refresh();
+  }
+  async function undo(u: MoveUndo) {
+    setToast(null);
+    const r = await actions.events.undoMove(u);
+    if (r.error) { setToast({ text: r.error.message, error: true }); return; }
+    setToast({ text: 'Move undone' });
+    await refresh();
+  }
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), toast.undo ? 8000 : 4000);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  const onDragStart = (e: DragEvent, it: BoardItem) => {
+    if (!editable(it)) { e.preventDefault(); return; }
+    e.dataTransfer.setData('text/plain', it.key);
+    e.dataTransfer.effectAllowed = 'move';
+    setPeek(null);
+    setDragKey(it.key);
+  };
+  const onDrop = (e: DragEvent, day: Iso) => {
+    e.preventDefault();
+    const it = data.items.find((x) => x.key === (dragKey ?? e.dataTransfer.getData('text/plain')));
+    setDragKey(null); setDropDay(null);
+    if (!it) return;
+    const days = diffDays(it.startDay, day);
+    if (!days) return;
+    if (it.recurring) setAsk({ item: it, days, to: day });
+    else void move(it, days, 'series', day);
+  };
+  const dropProps = (day: Iso) => ({
+    onDragOver: (e: DragEvent) => { if (dragKey) { e.preventDefault(); if (dropDay !== day) setDropDay(day); } },
+    onDrop: (e: DragEvent) => onDrop(e, day),
+  });
+
+  // ---- actions on one item ---------------------------------------------------
+  async function duplicate(it: BoardItem) {
+    const r = await actions.events.duplicate({ id: it.id });
+    if (r.error || !r.data) { setToast({ text: r.error?.message ?? 'Couldn’t duplicate.', error: true }); return; }
+    location.href = `/admin/calendar/events/${r.data.id}`;
+  }
+  async function remove(it: BoardItem) {
+    if (!confirm(it.recurring ? `Delete “${it.title}” and every repeat?` : `Delete “${it.title}”?`)) return;
+    const r = await actions.events.delete({ id: it.id });
+    setPeek(null);
+    if (r.error) { setToast({ text: r.error.message, error: true }); return; }
+    setToast({ text: `Deleted “${it.title}”` });
+    await refresh();
+  }
+
+  // ---- click handling ---------------------------------------------------------
+  const startAdd = (e: ReactMouseEvent, start: QuickStart) => {
+    setPeek(null); setPanelDay(null);
+    const cell = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    setQuick({ start, anchor: cell, mode: compact ? 'dialog' : 'popover' });
+  };
+  const openPeek = (e: ReactMouseEvent, it: BoardItem) => {
+    e.stopPropagation();
+    if (it === draft) return;
+    setPeek({ item: it, rect: (e.currentTarget as HTMLElement).getBoundingClientRect() });
+  };
+  // press on a day, drag across days, release → multi-day quick add
+  const onCellDown = (e: ReactMouseEvent, day: Iso) => {
+    if (e.button !== 0 || (e.target as HTMLElement).closest('.sch-chip, .sch-bar, .sch-more, .sch-num')) return;
+    selection.current = { from: day, to: day };
+    setSelecting({ from: day, to: day });
+  };
+  const onCellEnter = (day: Iso) => {
+    if (!selection.current) return;
+    selection.current = { ...selection.current, to: day };
+    setSelecting({ ...selection.current });
+  };
+  const onCellUp = (e: ReactMouseEvent, day: Iso) => {
+    const sel = selection.current;
+    selection.current = null;
+    setSelecting(null);
+    if (!sel || (e.target as HTMLElement).closest('.sch-chip, .sch-bar, .sch-more, .sch-num')) return;
+    const [a, b] = sel.from <= day ? [sel.from, day] : [day, sel.from];
+    startAdd(e, a === b ? { day: a } : { day: a, endDay: b, allDay: true });
+  };
+  useEffect(() => {
+    const up = () => { if (selection.current) { selection.current = null; setSelecting(null); } };
+    addEventListener('mouseup', up);
+    return () => removeEventListener('mouseup', up);
+  }, []);
+  const inSelection = (d: Iso) => !!selecting && d >= (selecting.from < selecting.to ? selecting.from : selecting.to) && d <= (selecting.from < selecting.to ? selecting.to : selecting.from);
+
+  // ---- rendering helpers -------------------------------------------------------
+  const month = monthOf(anchor);
+  const title = view === 'month'
+    ? new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).formatToParts(utc(`${month}-01`))
+    : null;
+  const weekTitle = () => {
+    const w = weekDays(anchor, weekStart);
+    const f = new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+    try { return f.formatRange(utc(w[0]), utc(w[6])); } catch { return `${f.format(utc(w[0]))} – ${f.format(utc(w[6]))}`; }
+  };
+  const chipClass = (it: BoardItem) => ['sch-chip',
+    it.status === 'draft' || it.status === 'scheduled' ? 'is-draft' : '',
+    it.kind === 'booking' || it.kind === 'block' ? 'is-booking' : '',
+    it.status === 'pending' ? 'is-pending' : '',
+    it.kind === 'feed' ? 'is-feed' : '',
+    it.cancelled ? 'is-cancelled' : '',
+    it === draft ? 'is-preview' : '',
+    it.key === dragKey ? 'is-dragging' : '',
+    editable(it) ? 'can-drag' : ''].filter(Boolean).join(' ');
+  const statusWord = (it: BoardItem) => (it.status === 'draft' ? 'Draft' : it.status === 'scheduled' ? 'Scheduled' : it.status === 'pending' ? 'Needs approval' : '');
+  const chip = (it: BoardItem, extra: Record<string, unknown> = {}) => (
+    <button key={it.key} type="button" className={chipClass(it)} style={{ ['--c' as string]: it.color }} draggable={editable(it)}
+      onDragStart={(e) => onDragStart(e, it)} onDragEnd={() => { setDragKey(null); setDropDay(null); }}
+      onClick={(e) => openPeek(e, it)} title={`${it.range}${it.time ? '' : ''} · ${it.title}${statusWord(it) ? ` · ${statusWord(it)}` : ''}`} {...extra}>
+      <i />
+      {it.time && <span className="t">{it.time}</span>}
+      <span className="n">{it.title}</span>
+    </button>
+  );
+  const bar = (b: ReturnType<typeof layoutWeek<BoardItem>>['bars'][number], row: number) => {
+    const it = b.item;
+    return (
+      <button key={`${it.key}-bar`} type="button" draggable={editable(it)}
+        className={[chipClass(it).replace('sch-chip', 'sch-bar'), b.continuesLeft ? 'cl' : '', b.continuesRight ? 'cr' : ''].join(' ')}
+        style={{ ['--c' as string]: it.color, gridColumn: `${b.col + 1} / span ${b.span}`, gridRow: row + b.lane }}
+        onDragStart={(e) => onDragStart(e, it)} onDragEnd={() => { setDragKey(null); setDropDay(null); }}
+        onClick={(e) => openPeek(e, it)} title={`${it.range} · ${it.title}`}>
+        {b.continuesLeft && <span aria-hidden="true">↳ </span>}{it.title}{statusWord(it) && <em> · {statusWord(it)}</em>}
+      </button>
+    );
+  };
+
+  // ---- legend ---------------------------------------------------------------
+  const legend: { key: string; name: string; color: string; feed?: boolean; booking?: boolean }[] = [
+    ...data.calendars.map((c: BoardCalendar) => ({ key: c.id, name: c.name, color: c.color, feed: c.kind === 'feed' })),
+    ...(hasUncategorized ? [{ key: NONE, name: 'No calendar', color: '#8a8378' }] : []),
+    ...(hasBookings ? [{ key: BOOKINGS, name: 'Bookings', color: '#8e919a', booking: true }] : []),
+  ];
+
+  // ---- month ---------------------------------------------------------------
+  const weeks = monthWeeks(month, weekStart);
+  const dows = weekdayLetters(locale, weekStart, 'short');
+  const monthGrid = (
+    <div className="sch-grid" role="grid" aria-label="Month">
+      <div className="sch-dows" role="row">{dows.map((d, i) => <div key={i} role="columnheader">{d}</div>)}</div>
+      {weeks.map((days) => {
+        const l = layoutWeek(days, items, LINES);
+        return (
+          <div key={days[0]} className="sch-week" role="row" style={{ gridTemplateRows: `auto repeat(${LINES}, minmax(22px, auto)) 1fr` }}>
+            {days.map((d, c) => (
+              <div key={d} role="gridcell" aria-label={dayLabel(d, { weekday: 'long', month: 'long', day: 'numeric' })}
+                className={['sch-cell', monthOf(d) !== month ? 'out' : '', d === today ? 'today' : '', d === panelDay ? 'sel' : '', d === dropDay ? 'drop' : '', inSelection(d) ? 'selecting' : ''].filter(Boolean).join(' ')}
+                style={{ gridColumn: c + 1 }}
+                onMouseDown={(e) => onCellDown(e, d)} onMouseEnter={() => onCellEnter(d)} onMouseUp={(e) => onCellUp(e, d)} {...dropProps(d)} />
+            ))}
+            {days.map((d, c) => (
+              <button key={`n${d}`} type="button" className={`sch-num ${monthOf(d) !== month ? 'out' : ''} ${d === today ? 'today' : ''}`} style={{ gridColumn: c + 1 }}
+                onClick={() => { setPeek(null); setPanelDay(d === panelDay ? null : d); setSelected(d); }} aria-label={`Show ${dayLabel(d, { weekday: 'long', month: 'long', day: 'numeric' })}`}>
+                <b>{+d.slice(8) === 1 ? dayLabel(d, { month: 'short', day: 'numeric' }) : +d.slice(8)}</b>
+              </button>
+            ))}
+            {l.bars.map((b) => bar(b, 2))}
+            {days.map((d, c) => l.chips[c].map(({ item, line }) => chip(item, { style: { ['--c' as string]: item.color, gridColumn: c + 1, gridRow: 2 + line } })))}
+            {days.map((d, c) => l.hidden[c] > 0 && (
+              <button key={`m${d}`} type="button" className="sch-more" style={{ gridColumn: c + 1, gridRow: 1 + LINES }}
+                onClick={() => { setPeek(null); setPanelDay(d); setSelected(d); }}>+{l.hidden[c]} more</button>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  // ---- week ----------------------------------------------------------------
+  const wdays = weekDays(anchor, weekStart);
+  const allDayLayout = layoutWeek(wdays, items.filter((it) => it.allDay || it.endDay > it.startDay), 3);
+  const nowMin = (() => { const n = new Date(); return n.getHours() * 60 + n.getMinutes(); })();
+  const weekGrid = (
+    <div className="sch-wk">
+      <div className="sch-wk-head">
+        <div className="sch-wk-gutter" />
+        {wdays.map((d) => (
+          <button key={d} type="button" className={`sch-wk-day ${d === today ? 'today' : ''}`} onClick={() => { setPanelDay(d); setSelected(d); }}>
+            <span>{dayLabel(d, { weekday: 'short' })}</span><b>{+d.slice(8)}</b>
+          </button>
+        ))}
+      </div>
+      <div className="sch-wk-allday" style={{ gridTemplateRows: `repeat(${Math.max(1, Math.min(3, allDayLayout.bars.reduce((n, b) => Math.max(n, b.lane + 1), 0)))}, 24px)` }}>
+        <div className="sch-wk-gutter">All day</div>
+        <div className="sch-wk-allday-grid">
+          {wdays.map((d, c) => <div key={d} className={`sch-wk-adcell ${d === dropDay ? 'drop' : ''}`} style={{ gridColumn: c + 1 }} {...dropProps(d)}
+            onClick={(e) => startAdd(e, { day: d, allDay: true })} />)}
+          {allDayLayout.bars.map((b) => bar(b, 1))}
+          {wdays.map((d, c) => allDayLayout.hidden[c] > 0 && <button key={`m${d}`} type="button" className="sch-more" style={{ gridColumn: c + 1, gridRow: 3 }} onClick={() => setPanelDay(d)}>+{allDayLayout.hidden[c]}</button>)}
+        </div>
+      </div>
+      <div className="sch-wk-body" ref={weekScroll}>
+        <div className="sch-wk-hours">
+          {Array.from({ length: 24 }, (_, h) => <span key={h} style={{ top: h * HOUR }}>{h === 0 ? '' : shortTime(h * 60)}</span>)}
+        </div>
+        <div className="sch-wk-cols" style={{ height: 24 * HOUR }}>
+          {wdays.map((d) => (
+            <div key={d} className={`sch-wk-col ${d === today ? 'today' : ''} ${d === dropDay ? 'drop' : ''}`} {...dropProps(d)}
+              onClick={(e) => {
+                if ((e.target as HTMLElement).closest('.sch-ev')) return;
+                const y = e.clientY - (e.currentTarget as HTMLElement).getBoundingClientRect().top;
+                startAdd(e, { day: d, startMin: Math.max(0, Math.min(23 * 60 + 30, Math.floor(y / HOUR * 2) * 30)) });
+              }}>
+              {layoutDay(d, items).map(({ item, top, height, col, cols }) => (
+                <button key={item.key} type="button" className={chipClass(item).replace('sch-chip', 'sch-ev')} draggable={editable(item)}
+                  style={{ ['--c' as string]: item.color, top: top / 60 * HOUR, height: Math.max(18, height / 60 * HOUR - 2), left: `calc(${(col / cols) * 100}% + 2px)`, width: `calc(${100 / cols}% - 4px)` }}
+                  onDragStart={(e) => onDragStart(e, item)} onDragEnd={() => { setDragKey(null); setDropDay(null); }}
+                  onClick={(e) => openPeek(e, item)}>
+                  <b>{item.title}</b><span>{item.range || shortTime(item.startMin)}</span>
+                </button>
+              ))}
+              {d === today && <div className="sch-now" style={{ top: nowMin / 60 * HOUR }} />}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  // ---- phone ---------------------------------------------------------------
+  const selItems = dayItems(selected);
+  const phone = (
+    <div className="sch-phone"
+      onTouchStart={(e) => { (e.currentTarget as HTMLElement).dataset.x = String(e.touches[0].clientX); }}
+      onTouchEnd={(e) => { const x0 = Number((e.currentTarget as HTMLElement).dataset.x); const dx = e.changedTouches[0].clientX - x0; if (Math.abs(dx) > 60) go(dx < 0 ? 1 : -1); }}>
+      <div className="sch-pgrid">
+        {weekdayLetters(locale, weekStart).map((d, i) => <span key={i} className="sch-pdow">{d}</span>)}
+        {weeks.flat().map((d) => {
+          const colors = [...new Set(dayItems(d).map((it) => it.color))].slice(0, 3);
+          return (
+            <button key={d} type="button" onClick={() => setSelected(d)} aria-pressed={d === selected}
+              className={['sch-pday', monthOf(d) !== month ? 'out' : '', d === today ? 'today' : '', d === selected ? 'sel' : ''].filter(Boolean).join(' ')}>
+              {+d.slice(8)}
+              {colors.length > 0 && <span className="sch-pdots">{colors.map((c) => <i key={c} style={{ background: c }} />)}</span>}
+            </button>
+          );
+        })}
+      </div>
+      <div className="sch-plist">
+        <div className="sch-plist-head">{dayLabel(selected, { weekday: 'long', month: 'long', day: 'numeric' })}</div>
+        {selItems.length === 0 && <p className="sch-empty-day">Nothing scheduled. Tap + to add something.</p>}
+        {selItems.map((it) => <DayRow key={it.key} it={it} status={statusWord(it)} onOpen={(e) => openPeek(e, it)} />)}
+      </div>
+      <button type="button" className="sch-fab" aria-label="Add event" onClick={() => openNew(selected)}>+</button>
+    </div>
+  );
+
+  // ---- peek ----------------------------------------------------------------
+  const peekBox = peek && (() => {
+    const it = peek.item;
+    const style = compact ? undefined : (() => {
+      const w = 330;
+      let left = peek.rect.left;
+      if (left + w > innerWidth - 12) left = innerWidth - w - 12;
+      const below = peek.rect.bottom + 6;
+      const top = below + 220 > innerHeight ? Math.max(12, peek.rect.top - 226) : below;
+      return { left: Math.max(12, left), top };
+    })();
+    return (
+      <div className="sch-peek-layer" onMouseDown={(e) => { if (e.target === e.currentTarget) setPeek(null); }}>
+        <div className="sch-peek" style={style} role="dialog" aria-label={it.title}>
+          <div className="sch-peek-head">
+            <i style={{ background: it.color }} className={it.kind === 'booking' || it.kind === 'block' || it.status === 'draft' ? 'hollow' : ''} />
+            <b>{it.title}</b>
+            <button type="button" className="sch-x" aria-label="Close" onClick={() => setPeek(null)}>✕</button>
+          </div>
+          <p className="sch-peek-when">{dayLabel(it.startDay, { weekday: 'long', month: 'long', day: 'numeric' })}{it.endDay !== it.startDay ? ` – ${dayLabel(it.endDay, { month: 'long', day: 'numeric' })}` : ''} · {it.range}</p>
+          <ul className="sch-peek-meta">
+            {it.calendarName && <li>{it.kind === 'booking' || it.kind === 'block' ? 'Room or person' : 'Calendar'}: {it.calendarName}{it.kind === 'feed' ? ' (subscribed, read-only)' : ''}</li>}
+            {it.location && it.kind === 'event' && <li>{it.location}</li>}
+            {it.recurring && <li>{it.repeat || 'Repeats'}</li>}
+            {it.rooms.length > 0 && <li>{it.roomsHeld ? 'Holds' : 'Will hold once published:'} {it.rooms.join(', ')}</li>}
+            {statusWord(it) && <li>{statusWord(it)}{it.edited ? ' · has unpublished changes' : ''}</li>}
+            {!statusWord(it) && it.edited && <li>Has unpublished changes</li>}
+            {it.cancelled && <li>Cancelled</li>}
+          </ul>
+          <div className="sch-peek-actions">
+            {it.kind === 'event' && <>
+              <a className="btn sm primary" href={`/admin/calendar/events/${it.id}`}>Edit</a>
+              <button type="button" className="btn sm" onClick={() => duplicate(it)}>Duplicate</button>
+              {it.url && <a className="btn sm ghost" href={it.url} target="_blank" rel="noopener">View ↗</a>}
+              <button type="button" className="btn sm ghost danger" onClick={() => remove(it)}>Delete</button>
+            </>}
+            {(it.kind === 'booking' || it.kind === 'block') && <a className="btn sm" href={`/admin/calendar/bookings?b=${it.id}`}>Open in Bookings</a>}
+            {it.kind === 'feed' && <a className="btn sm" href={`/admin/calendar/events?cal=${it.calendarId}`}>Make an editable copy…</a>}
+          </div>
+        </div>
+      </div>
+    );
+  })();
+
+  // ---- day panel -------------------------------------------------------------
+  const panel = panelDay && (
+    <aside className="sch-panel" aria-label={dayLabel(panelDay, { weekday: 'long', month: 'long', day: 'numeric' })}>
+      <div className="sch-panel-head">
+        <div>
+          <b>{dayLabel(panelDay, { weekday: 'long', month: 'long', day: 'numeric' })}</b>
+          <small>{dayItems(panelDay).length || 'No'} item{dayItems(panelDay).length === 1 ? '' : 's'}</small>
+        </div>
+        <span>
+          <button type="button" className="btn sm ghost" aria-label="Previous day" onClick={() => setPanelDay(addDays(panelDay, -1))}>‹</button>
+          <button type="button" className="btn sm ghost" aria-label="Next day" onClick={() => setPanelDay(addDays(panelDay, 1))}>›</button>
+          <button type="button" className="btn sm ghost" aria-label="Close" onClick={() => setPanelDay(null)}>✕</button>
+        </span>
+      </div>
+      <div className="sch-panel-list">
+        {dayItems(panelDay).map((it) => <DayRow key={it.key} it={it} status={statusWord(it)} onOpen={(e) => openPeek(e, it)} />)}
+      </div>
+      <button type="button" className="sch-panel-add" onClick={(e) => startAdd(e, { day: panelDay })}>+ Add event on {dayLabel(panelDay, { month: 'short', day: 'numeric' })}</button>
+    </aside>
+  );
+
+  return (
+    <div ref={root} className={`sch ${loading ? 'is-loading' : ''} ${compact ? 'is-compact' : ''}`}>
+      <div className="sch-bar1">
+        <h1 className="sch-title">
+          {view === 'month' && title
+            ? title.map((p, i) => (p.type === 'year' ? <span key={i} className="yr">{p.value}</span> : <span key={i}>{p.value}</span>))
+            : weekTitle()}
+        </h1>
+        <div className="sch-nav">
+          <button type="button" className="btn ico" aria-label={view === 'week' ? 'Previous week' : 'Previous month'} onClick={() => go(-1)}>‹</button>
+          <button type="button" className="btn ico" aria-label={view === 'week' ? 'Next week' : 'Next month'} onClick={() => go(1)}>›</button>
+          <button type="button" className="btn" onClick={goToday}>Today</button>
+        </div>
+        <div className="sch-sp" />
+        <nav className="seg sch-views" aria-label="View">
+          <button type="button" className={view === 'month' ? 'on' : ''} onClick={() => switchView('month')}>Month</button>
+          {!compact && <button type="button" className={view === 'week' ? 'on' : ''} onClick={() => switchView('week')}>Week</button>}
+          <a href={props.listHref}>List</a>
+        </nav>
+        <a className="btn ico" href="/admin/calendar/settings" title="Calendar settings" aria-label="Calendar settings">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="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>
+        <div className="sch-new">
+          <button type="button" className="btn primary" onClick={() => openNew()}>New event</button>
+          <button type="button" className="btn primary sch-caret" aria-label="More ways to add" aria-expanded={menu} onClick={() => setMenu((m) => !m)}>▾</button>
+          {menu && (
+            <div className="sch-menu" role="menu" onMouseLeave={() => setMenu(false)}>
+              <button type="button" role="menuitem" onClick={() => { setMenu(false); openNew(); }}>Event <kbd>N</kbd></button>
+              {props.bookings && <a role="menuitem" href="/admin/calendar/bookings?block=1">Block time <small>room closed, time off</small></a>}
+              <a role="menuitem" href={`${props.listHref}?import=1`}>Import events… <small>.ics or .csv</small></a>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {legend.length > 0 && (
+        <div className="sch-legend" aria-label="Show or hide calendars">
+          {legend.map((c) => (
+            <button key={c.key} type="button" aria-pressed={!hidden.has(c.key)} className={`${hidden.has(c.key) ? 'off' : ''} ${c.booking ? 'bk' : ''}`} style={{ ['--c' as string]: c.color }} onClick={() => toggle(c.key)}>
+              <i />{c.name}{c.feed && <small>subscribed</small>}
+            </button>
+          ))}
+          <a className="sch-legend-edit" href="/admin/calendar/settings#calendars">Edit calendars</a>
+        </div>
+      )}
+
+      {error && <p className="notice warn sch-error">{error}</p>}
+
+      <div className="sch-stage">
+        {compact ? phone : view === 'week' ? weekGrid : monthGrid}
+        {!compact && panel}
+      </div>
+
+      {compact && panelDay && <div className="sch-sheet-layer" onClick={() => setPanelDay(null)}>{panel}</div>}
+      {peekBox}
+      {quick && (
+        <QuickAdd start={quick.start} mode={quick.mode} anchor={quick.anchor} calendars={calendars} defaultCalendarId={props.defaultCalendarId}
+          weekStart={weekStart} locale={locale} today={today} items={quick.mode === 'dialog' && view === 'week' ? undefined : data.items}
+          onDraft={quick.mode === 'popover' ? showDraft : undefined}
+          onClose={() => { setQuick(null); setDraft(null); }}
+          onSaved={(_id, status) => {
+            setQuick(null); setDraft(null);
+            setToast({ text: status === 'published' ? 'Event published' : 'Draft saved — it shows dashed until you publish it' });
+            void refresh();
+          }} />
+      )}
+      {ask && (
+        <div className="sch-peek-layer center" onMouseDown={(e) => { if (e.target === e.currentTarget) setAsk(null); }}>
+          <div className="sch-ask" role="alertdialog" aria-label={`Move ${ask.item.title}`}>
+            <b>Move “{ask.item.title}”?</b>
+            <p>This event repeats. Move only {dayLabel(ask.item.startDay, { weekday: 'long', month: 'short', day: 'numeric' })}, or every date in the series?</p>
+            <div className="sch-ask-actions">
+              <button type="button" className="btn primary" onClick={() => move(ask.item, ask.days, 'one', ask.to)}>Only this date</button>
+              <button type="button" className="btn" onClick={() => move(ask.item, ask.days, 'series', ask.to)}>Every date</button>
+              <button type="button" className="btn ghost" onClick={() => setAsk(null)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+      {toast && (
+        <div className={`sch-toast ${toast.error ? 'err' : ''}`} role="status">
+          {toast.text}
+          {toast.undo && <button type="button" onClick={() => undo(toast.undo!)}>Undo</button>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function shortTime(min: number) {
+  const hh = Math.floor(min / 60), mm = min % 60;
+  return `${hh % 12 || 12}${mm ? `:${String(mm).padStart(2, '0')}` : ''}${hh < 12 ? 'a' : 'p'}`;
+}
+
+function DayRow({ it, status, onOpen }: { it: BoardItem; status: string; onOpen: (e: ReactMouseEvent) => void }) {
+  const hollow = it.kind === 'booking' || it.kind === 'block' || it.status === 'draft' || it.status === 'scheduled';
+  return (
+    <button type="button" className={`sch-row ${hollow ? 'hollow' : ''} ${it.cancelled ? 'is-cancelled' : ''}`} style={{ ['--c' as string]: it.color }} onClick={onOpen}>
+      <i />
+      <span className="sch-row-main">
+        <b>{it.title}</b>
+        <small>{it.range}{it.calendarName ? ` · ${it.calendarName}` : ''}{it.recurring ? ` · ${it.repeat || 'Repeats'}` : ''}</small>
+      </span>
+      <span className="sch-row-st">{status || (it.kind === 'feed' ? 'Subscribed' : it.kind === 'block' ? 'Blocked' : it.kind === 'booking' ? 'Booking' : '')}</span>
+    </button>
+  );
+}
+