@rapidmx/web-client 0.28.0 → 0.29.0

package/dist/apps/www/calendar/index.js

@@ -17,19 +17,25 @@ import { moveOccurrence, resizeOccurrenceEnd } from "../../../lib/calendar/calen
 import { resolveDragAction } from "../../../lib/calendar/calendarDragIds.js";
 import { createFolder } from "../../../lib/mail/mailApi.js";
 import { expandAllOccurrences } from "../../../lib/calendar/recurrence.js";
+import { allOccurrences, initialMatchIndex, occurrencesInRange, searchOccurrences, searchTerms, stepSequenceIndex } from "../../../lib/calendar/eventSearch.js";
 import Drawer from "../../../lib/components/overlays/Drawer.js";
 import CalendarShell, { useCalendarShell } from "../../shared/components/calendar/layout/CalendarShell.js";
 import CalendarListSidebar from "../../shared/components/calendar/CalendarListSidebar.js";
+import CalendarSearchBox from "../../shared/components/calendar/CalendarSearchBox.js";
+import { ActiveOccurrenceContext } from "../../shared/components/calendar/activeOccurrence.js";
+import { isUpcoming, occurrenceDay } from "../../shared/components/calendar/allDay.js";
 import { useWritableMailboxes } from "../../shared/components/mail/writableMailboxes.js";
 import EventModal from "../../shared/components/calendar/EventModal.js";
 import FloatingActionButton from "../../shared/components/layout/FloatingActionButton.js";
 import { anchorOf } from "../../shared/components/calendar/EventShell.js";
 import MiniDatePicker from "../../../lib/components/pickers/MiniDatePicker.js";
+import ListView from "../../shared/components/calendar/ListView.js";
 import MonthView from "../../shared/components/calendar/MonthView.js";
 import SplitDayView from "../../shared/components/calendar/SplitDayView.js";
 import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
 import Alert from "../../../lib/components/feedback/Alert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { CALENDAR_VIEWS, getStoredCalendarView, isCalendarView, storeCalendarView } from "../../shared/components/calendar/calendarView.js";
 import { SWIPE_PERIOD_SHIFT } from "../../shared/components/calendar/swipeNavigation.js";
 import { nextHalfHour } from "../../shared/components/calendar/timePicker.js";
 import { useSwipeSlide } from "../../shared/gestures/useSwipeSlide.js";
@@ -41,13 +47,15 @@ import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { bookingSettingsHref } from "../../shared/calendar/bookingPlugin.js";
 import { redactedEventUidOf } from "../../shared/calendar/calendarLiveUpdates.js";
+/** The furthest instants a `Date` can hold: the List's "range" reaches both. */
+const MAX_DATE_MS = 8.64e15;
 function CalendarPage(props) {
     return (_jsx(CalendarShell, { ...props, children: _jsx(CalendarContent, { userUid: props.userUid, bookingHref: bookingSettingsHref(props.pluginNav) }) }));
 }
-const VIEW_TYPES = ["month", "week", "workWeek", "day", "split"];
-const VIEW_LABELS = { month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
-/** The shortcut that switches to a view (Outlook's Ctrl+Alt+1-4); the split view has none. */
+const VIEW_LABELS = { list: "List", month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
+/** The shortcut that switches to a view (Outlook's Ctrl+Alt+1-4, the List one more); the split view has none. */
 const VIEW_SHORTCUTS = {
+    list: SHORTCUTS.calendar.list,
     day: SHORTCUTS.calendar.day,
     workWeek: SHORTCUTS.calendar.workWeek,
     week: SHORTCUTS.calendar.week,
@@ -75,7 +83,20 @@ function CalendarContent({ userUid, bookingHref }) {
     // dnd-kit's own documented pattern for this exact conflict.
     const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 8 } }), useSensor(TouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } }));
     const [drawerOpen, setDrawerOpen] = useState(false);
-    const [view, setView] = useState("month");
+    // Month, until the effects below know better: a remembered view, or the List on a phone (never read while rendering, so the server's markup and the
+    // first client render agree). A desktop always opens on the Month unless the link or a remembered Week, Work Week, Day, Split or Month says otherwise.
+    const [view, setViewState] = useState("month");
+    // Whether the view was decided by the URL, a remembered choice or the reader (and so is not the device's default to follow).
+    const viewChosenRef = useRef(false);
+    /** Switches the view; a reader's own choice (`remember`) is also what the Calendar opens on next time - except the List on a desktop, which
+     * only a phone opens on, so it is never written there (and so can never turn up as the next desktop visit's view). */
+    function setView(next, remember = true) {
+        viewChosenRef.current = true;
+        setViewState(next);
+        if (remember && (next !== "list" || isMobile)) {
+            storeCalendarView(next);
+        }
+    }
     const [viewDate, setViewDate] = useState(() => startOfDay(new Date()));
     const [events, setEvents] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -90,8 +111,14 @@ function CalendarContent({ userUid, bookingHref }) {
     useEffect(() => {
         const params = new URLSearchParams(window.location.search);
         const requestedView = params.get("view");
-        if (VIEW_TYPES.includes(requestedView ?? "")) {
-            setView(requestedView);
+        const storedView = getStoredCalendarView();
+        if (isCalendarView(requestedView)) {
+            // Asked for by the link: shown, but not remembered - it is not a choice of the reader's.
+            setView(requestedView, false);
+        }
+        else if (storedView && storedView !== "list") {
+            // A remembered List is not restored: it is the phone's default (below) and never the desktop's, whatever an older visit left in storage.
+            setView(storedView, false);
         }
         const requestedDate = params.get("date");
         // `parseISO()`, not `new Date()` - `?date=2026-06-16` is a local calendar day, but `new Date()` reads a
@@ -101,6 +128,13 @@ function CalendarContent({ userUid, bookingHref }) {
             setViewDate(startOfDay(parsedDate));
         }
     }, []);
+    // With nothing remembered the device decides: the List on a phone, the Month elsewhere (`useIsMobile()` only knows after mounting).
+    const isMobile = useIsMobile();
+    useEffect(() => {
+        if (!viewChosenRef.current) {
+            setViewState(isMobile ? "list" : "month");
+        }
+    }, [isMobile]);
     const checkedFolderUids = checkedFolderUidsState ?? new Set(calendarFolders.map((f) => f.uid));
     const folderColors = useMemo(() => Object.fromEntries(calendarFolders.map((f) => [f.uid, colorFor(f)])), [calendarFolders, colorFor]);
     function toggleCalendar(toggledUid) {
@@ -121,6 +155,10 @@ function CalendarContent({ userUid, bookingHref }) {
         reloadFolders();
     }
     const { rangeStart, rangeEnd, days } = useMemo(() => {
+        if (view === "list") {
+            // The list is not a range at all: every event, whenever it falls (a series bounded as the search bounds it - see `allOccurrences()`).
+            return { rangeStart: new Date(-MAX_DATE_MS), rangeEnd: new Date(MAX_DATE_MS), days: [] };
+        }
         if (view === "month") {
             const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
             const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
@@ -221,11 +259,103 @@ function CalendarContent({ userUid, bookingHref }) {
             }
         });
     }), [client]);
-    const occurrences = useMemo(() => expandAllOccurrences(events, rangeStart, rangeEnd), [events, rangeStart, rangeEnd]);
+    // Search: `searchText` is the box, `query` what it held once typing paused (or Enter was pressed) and is what is searched for. A search covers every
+    // event of the checked calendars whatever the view shows (see `searchOccurrences()`); while one runs the views show only its matches, and
+    // `activeKey` is the match being pointed at (Previous/Next match step through `matches`).
+    const [searchText, setSearchText] = useState("");
+    const [query, setQuery] = useState("");
+    const [activeKey, setActiveKey] = useState(null);
+    const searchInputRef = useRef(null);
+    const searching = searchTerms(query).length > 0;
+    useEffect(() => {
+        const timer = setTimeout(() => setQuery(searchText), 300);
+        return () => clearTimeout(timer);
+    }, [searchText]);
+    // The List shows only what is from today on, so that is all a search steps through there; the other views reach the past ones.
+    const matches = useMemo(() => {
+        const found = searching ? searchOccurrences(events, query) : [];
+        const today = new Date();
+        return view === "list" ? found.filter((occurrence) => isUpcoming(occurrence, today)) : found;
+    }, [events, query, searching, view]);
+    const activeIndex = matches.findIndex((m) => m.occurrenceKey === activeKey);
+    // What an open event card steps through, in order: the matches while a search runs, else every event of the checked calendars (bounded as a
+    // search is). The List holds only what is from today on, so that is all its card steps through. Worked out only when something needs it.
+    const everything = useMemo(() => (view === "list" || modal?.occurrence ? allOccurrences(events) : []), [events, view, !!modal?.occurrence]);
+    const sequence = useMemo(() => {
+        if (searching) {
+            return matches;
+        }
+        if (view === "list") {
+            const today = new Date();
+            return everything.filter((occurrence) => isUpcoming(occurrence, today));
+        }
+        return everything;
+    }, [searching, matches, view, everything]);
+    const occurrences = useMemo(() => {
+        if (view === "list") {
+            return sequence;
+        }
+        return searching ? occurrencesInRange(matches, rangeStart, rangeEnd) : expandAllOccurrences(events, rangeStart, rangeEnd);
+    }, [events, matches, searching, view, sequence, rangeStart, rangeEnd]);
+    /** Points at `match`, moving the view to the day it is on unless the view already shows it. */
+    function showMatch(match) {
+        setActiveKey(match.occurrenceKey);
+        // An event's card that is open moves on to it, so the card and the view stay together.
+        setModal((current) => (current?.occurrence ? { occurrence: match } : current));
+        if (occurrencesInRange([match], rangeStart, rangeEnd).length === 0) {
+            setViewDate(occurrenceDay(match));
+        }
+    }
+    // The step that moved an open event card on, for the card to slide in from the side of the button pressed (also on a wrap-around).
+    const [slide, setSlide] = useState(undefined);
+    // The card open is where the sequence stands; with none, the match the search is on. A search wraps round at either end, the events of the
+    // calendar do not.
+    const stepFrom = modal?.occurrence;
+    const stepIndex = (direction) => stepSequenceIndex(sequence, stepFrom?.occurrenceKey ?? activeKey, stepFrom ? new Date(stepFrom.startDate) : undefined, direction, searching);
+    function stepMatch(direction) {
+        const next = sequence[stepIndex(direction)];
+        if (next) {
+            setSlide({ from: direction === 1 ? "right" : "left", occurrenceKey: next.occurrenceKey });
+            showMatch(next);
+        }
+    }
+    function clearSearch() {
+        setSearchText("");
+        setQuery("");
+    }
+    function submitSearch(backwards) {
+        if (searchText !== query) {
+            setQuery(searchText);
+        }
+        else {
+            stepMatch(backwards ? -1 : 1);
+        }
+    }
+    // A new search goes to its first match: the first one in the view if there is one, else the first from the day being viewed on (the nearest
+    // before it when there is none after). Matches that change under the same query (a saved edit, a live update) leave the view where it is.
+    const searchedQueryRef = useRef("");
+    useEffect(() => {
+        if (!searching || matches.length === 0) {
+            searchedQueryRef.current = "";
+            setActiveKey(null);
+            return;
+        }
+        if (searchedQueryRef.current !== query) {
+            searchedQueryRef.current = query;
+            // The List holds every match: it starts at the first from the day being viewed on rather than the first of all.
+            const from = startOfDay(viewDate);
+            showMatch(matches[view === "list" ? initialMatchIndex(matches, from, rangeEnd, from) : initialMatchIndex(matches, rangeStart, rangeEnd, from)]);
+        }
+    }, [matches, query, searching]);
     const splitColumns = useMemo(() => calendarFolders
         .filter((f) => checkedFolderUids.has(f.uid))
         .map((f) => ({ folderUid: f.uid, name: f.name, color: colorFor(f) })), [calendarFolders, checkedFolderUidsKey, colorFor]);
     function shiftView(direction) {
+        if (view === "list") {
+            // Previous and Next move the list a month, from wherever it has been scrolled to (the list does the scrolling).
+            setListStep((step) => ({ direction, nonce: (step?.nonce ?? 0) + 1 }));
+            return;
+        }
         setViewDate((d) => view === "month"
             ? addMonths(d, direction)
             : view === "week" || view === "workWeek"
@@ -236,9 +366,8 @@ function CalendarContent({ userUid, bookingHref }) {
     // the Previous/Next buttons and shortcuts do, and it is off while an event is being dragged or the editor is open. The views
     // never scroll sideways (their columns share the width), so there is no horizontal scroller for the gesture to fight with.
     // The view follows the finger and, once the swipe commits, slides out while the next period slides in (see `useSwipeSlide()`).
-    const isMobile = useIsMobile();
     const swipe = useSwipeSlide({
-        enabled: isMobile && !dragging && !modal,
+        enabled: isMobile && !dragging && !modal && view !== "list",
         onShift: (direction) => shiftView(SWIPE_PERIOD_SHIFT[direction]),
     });
     // The desktop's mouse wheel steps through the months without end; in the views that scroll through the hours of a day it scrolls
@@ -249,7 +378,7 @@ function CalendarContent({ userUid, bookingHref }) {
     const arrivalEdge = useRef(null);
     const scrollerOf = () => swipe.ref.current?.querySelector("[data-calendar-scroller]") ?? null;
     useWheelPaging(swipe.ref, {
-        enabled: !isMobile && !dragging && !modal,
+        enabled: !isMobile && !dragging && !modal && view !== "list",
         getScroller: () => (view === "month" ? null : scrollerOf()),
         onStep: (direction, edge) => {
             arrivalEdge.current = edge;
@@ -265,11 +394,20 @@ function CalendarContent({ userUid, bookingHref }) {
             scroller.scrollTop = edge === "top" ? 0 : scroller.scrollHeight;
         }
     }, [viewDate]);
+    // Brings the match being pointed at into sight (the views scroll their own hours; the page may too).
+    useEffect(() => {
+        const marked = Array.from(swipe.ref.current.querySelectorAll("[data-occurrence-key]"));
+        marked.find((el) => el.dataset.occurrenceKey === activeKey)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }, [activeKey, view === "list" ? null : viewDate, view, loading]);
+    // The List scrolls to `viewDate` when this changes (Today, a day picked in the mini calendar), even when it is the date it already has.
+    const [jumpNonce, setJumpNonce] = useState(0);
+    const [listStep, setListStep] = useState(null);
     function goToday() {
         setViewDate(startOfDay(new Date()));
+        setJumpNonce((n) => n + 1);
     }
     function handleSelectDay(date) {
-        setView("day");
+        setView("day", false);
         setViewDate(startOfDay(date));
     }
     function openNewEvent(start, end, targetFolderUid, anchor, initialAllDay) {
@@ -288,6 +426,8 @@ function CalendarContent({ userUid, bookingHref }) {
         });
     }
     function openEvent(occurrence) {
+        setSlide(undefined);
+        setActiveKey(occurrence.occurrenceKey);
         setModal({ occurrence });
     }
     function closeModal() {
@@ -298,10 +438,15 @@ function CalendarContent({ userUid, bookingHref }) {
     useShortcut(SHORTCUTS.calendar.today, goToday);
     useShortcut(SHORTCUTS.calendar.previous, () => shiftView(-1));
     useShortcut(SHORTCUTS.calendar.next, () => shiftView(1));
+    useShortcut(SHORTCUTS.calendar.list, () => setView("list"));
     useShortcut(SHORTCUTS.calendar.day, () => setView("day"));
     useShortcut(SHORTCUTS.calendar.workWeek, () => setView("workWeek"));
     useShortcut(SHORTCUTS.calendar.week, () => setView("week"));
     useShortcut(SHORTCUTS.calendar.month, () => setView("month"));
+    useShortcut(SHORTCUTS.calendar.search, () => {
+        searchInputRef.current?.focus();
+        searchInputRef.current?.select();
+    });
     const newEventHint = useShortcutProps("New event", SHORTCUTS.calendar.create, !!mailboxUid && !!folderUid);
     const previousHint = useShortcutProps("Previous", SHORTCUTS.calendar.previous);
     const todayHint = useShortcutProps("Today", SHORTCUTS.calendar.today);
@@ -334,11 +479,13 @@ function CalendarContent({ userUid, bookingHref }) {
             notifyApiError(err, action.type === "move" ? "Couldn't move the event" : "Couldn't resize the event");
         }
     }
-    const title = view === "month"
-        ? format(viewDate, "MMMM yyyy")
-        : view === "week" || view === "workWeek"
-            ? `${format(rangeStart, "MMM d")} – ${format(rangeEnd, "MMM d, yyyy")}`
-            : format(viewDate, "EEEE, MMMM d, yyyy");
+    const title = view === "list"
+        ? "Upcoming events"
+        : view === "month"
+            ? format(viewDate, "MMMM yyyy")
+            : view === "week" || view === "workWeek"
+                ? `${format(rangeStart, "MMM d")} – ${format(rangeEnd, "MMM d, yyyy")}`
+                : format(viewDate, "EEEE, MMMM d, yyyy");
     const modalFolderUid = modal ? (modal.targetFolderUid ?? modal.occurrence?.folderUid ?? folderUid) : undefined;
     const modalMailboxUid = calendarFolders.find((f) => f.uid === modalFolderUid)?.mailboxUid ?? mailboxUid;
     const modalMailbox = mailboxes.find((mb) => mb.uid === modalMailboxUid);
@@ -348,8 +495,20 @@ function CalendarContent({ userUid, bookingHref }) {
     const mailboxOptions = useMemo(() => mailboxCalendars
         .filter((mc) => mc.calendarFolders.length > 0 && writableMailboxes.some((mb) => mb.uid === mc.mailbox.uid))
         .map((mc) => ({ mailbox: mc.mailbox, calendars: mc.calendarFolders.map((f) => ({ uid: f.uid, name: f.name })) })), [mailboxCalendars, writableMailboxes]);
-    const sidebarContent = (_jsxs(_Fragment, { children: [_jsx(MiniDatePicker, { selected: viewDate, onSelect: (date) => setViewDate(startOfDay(date)) }), _jsx(CalendarListSidebar, { mailboxCalendars: mailboxCalendars, checkedFolderUids: checkedFolderUids, onToggle: toggleCalendar, onAddCalendar: handleAddCalendar, colorFor: colorFor })] }));
-    return (_jsxs("div", { className: "flex-1 min-w-0 flex min-h-0", children: [_jsx("div", { className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto", children: sidebarContent }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Calendars", fullScreen: true, children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "lg:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0", "aria-label": "Open calendars", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), !isMobile && (_jsx(Button, { type: "button", onClick: (e) => openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below")), className: "!w-auto shrink-0", ...newEventHint, children: "+ New event" })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => shiftView(-1), "aria-label": "Previous", ...previousHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u2039" }), _jsx("button", { type: "button", onClick: goToday, ...todayHint, className: "px-2 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "Today" }), _jsx("button", { type: "button", onClick: () => shiftView(1), "aria-label": "Next", ...nextHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u203A" })] }), _jsx("h1", { className: "hidden md:block text-lg font-bold tracking-tight", children: title }), _jsx("div", { className: "ml-auto flex flex-wrap gap-1", children: VIEW_TYPES.map((v) => (_jsx(ViewButton, { view: v, current: view, onSelect: setView }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), _jsx("div", { ref: swipe.ref, className: "flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden", ...swipe.handlers, style: swipe.style, children: _jsx("div", { "data-swipe-phase": swipe.phase, className: "flex-1 min-w-0 flex flex-col min-h-0", style: swipe.contentStyle, children: _jsx("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", style: wheelSlide.style, children: loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragStart: () => setDragging(true), onDragEnd: handleDragEnd, onDragCancel: () => setDragging(false), children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent, onSelectSlot: (start, end, anchor) => openNewEvent(start, end, undefined, anchor, true) })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid, anchor) => openNewEvent(start, end, targetFolderUid, anchor) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: (start, end, anchor) => openNewEvent(start, end, undefined, anchor) })) })) }) }) }), modal && modalMailbox && (_jsx(EventModal, { open: true, onClose: closeModal, mailboxUid: modalMailbox.uid, folderUid: modalFolderUid, calendars: calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name })), mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: modalMailbox.primarySmtpAddress, organizerAliases: modalMailbox.aliasAddresses, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, initialAllDay: modal.initialAllDay, anchor: modal.anchor, bookingHref: bookingHref, onSaved: handleSaved, onDeleted: handleDeleted })), isMobile && mailboxUid && folderUid && !modal && _jsx(FloatingActionButton, { label: "New event", icon: HiOutlinePlus, onClick: () => openNewEvent() })] })] }));
+    const sidebarContent = (_jsxs(_Fragment, { children: [_jsx(MiniDatePicker, { selected: viewDate, onSelect: (date) => {
+                    setViewDate(startOfDay(date));
+                    setJumpNonce((n) => n + 1);
+                } }), _jsx(CalendarListSidebar, { mailboxCalendars: mailboxCalendars, checkedFolderUids: checkedFolderUids, onToggle: toggleCalendar, onAddCalendar: handleAddCalendar, colorFor: colorFor })] }));
+    return (_jsxs("div", { className: "flex-1 min-w-0 flex min-h-0", children: [_jsx("div", { className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto", children: sidebarContent }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Calendars", fullScreen: true, children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "lg:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0", "aria-label": "Open calendars", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), !isMobile && (_jsx(Button, { type: "button", onClick: (e) => openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below")), className: "!w-auto shrink-0", ...newEventHint, children: "+ New event" })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => shiftView(-1), "aria-label": "Previous", ...previousHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u2039" }), _jsx("button", { type: "button", onClick: goToday, ...todayHint, className: "px-2 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "Today" }), _jsx("button", { type: "button", onClick: () => shiftView(1), "aria-label": "Next", ...nextHint, className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u203A" })] }), _jsx("h1", { className: "hidden md:block text-lg font-bold tracking-tight", children: title }), _jsx(CalendarSearchBox, { value: searchText, onChange: setSearchText, onSubmit: submitSearch, onClear: clearSearch, onPrevious: () => stepMatch(-1), onNext: () => stepMatch(1), active: searching, count: matches.length, position: activeIndex, inputRef: searchInputRef }), _jsx("div", { className: "flex flex-wrap gap-1", children: CALENDAR_VIEWS.map((v) => (_jsx(ViewButton, { view: v, current: view, onSelect: setView }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), _jsx("div", { ref: swipe.ref, className: "flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden", ...swipe.handlers, style: swipe.style, children: _jsx("div", { "data-swipe-phase": swipe.phase, className: "flex-1 min-w-0 flex flex-col min-h-0", style: swipe.contentStyle, children: _jsx("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", style: wheelSlide.style, children: loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(ActiveOccurrenceContext.Provider, { value: searching ? activeKey : null, children: _jsx(DndContext, { sensors: sensors, onDragStart: () => setDragging(true), onDragEnd: handleDragEnd, onDragCancel: () => setDragging(false), children: view === "list" ? (_jsx(ListView, { occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, focusDate: viewDate, jumpNonce: jumpNonce, step: listStep })) : view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent, onSelectSlot: (start, end, anchor) => openNewEvent(start, end, undefined, anchor, true) })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid, anchor) => openNewEvent(start, end, targetFolderUid, anchor) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: (start, end, anchor) => openNewEvent(start, end, undefined, anchor) })) }) })) }) }) }), modal && modalMailbox && (_jsx(EventModal, { open: true, onClose: closeModal, mailboxUid: modalMailbox.uid, folderUid: modalFolderUid, calendars: calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name })), mailboxOptions: mailboxOptions, folderColors: folderColors, organizerAddress: modalMailbox.primarySmtpAddress, organizerAliases: modalMailbox.aliasAddresses, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, initialAllDay: modal.initialAllDay, anchor: modal.anchor, bookingHref: bookingHref, matchNav: modal.occurrence && sequence.length > 0
+                            ? {
+                                onPrevious: () => stepMatch(-1),
+                                onNext: () => stepMatch(1),
+                                canPrevious: stepIndex(-1) >= 0,
+                                canNext: stepIndex(1) >= 0,
+                                noun: searching ? "match" : "event",
+                                slide,
+                            }
+                            : undefined, onSaved: handleSaved, onDeleted: handleDeleted })), isMobile && mailboxUid && folderUid && !modal && _jsx(FloatingActionButton, { label: "New event", icon: HiOutlinePlus, onClick: () => openNewEvent() })] })] }));
 }
 export default CalendarPage;
 /** The tab's title: `Brand: Calendar` (see `pageTitle()`). */