@rapidmx/web-client 0.34.0 → 0.36.0

package/apps/www/calendar/index.tsx

@@ -25,15 +25,26 @@ import { ApiRequestError } from "../../../lib/util/api.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
 import useIsMobile from "../../../lib/util/useIsMobile.js";
 import { CalendarEvent, getCalendarEvent, listCalendarEvents } from "../../../lib/calendar/calendarApi.js";
-import { getPushClient } from "../../../lib/mail/pushClient.js";
+import { openSealedEvent, openSealedEvents } from "../../shared/calendar/sealedEvents.js";
+import { useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
 import { moveOccurrence, resizeOccurrenceEnd } from "../../../lib/calendar/calendarMutations.js";
 import { resolveDragAction } from "../../../lib/calendar/calendarDragIds.js";
 import { createFolder } from "../../../lib/mail/mailApi.js";
 import { CalendarOccurrence, expandAllOccurrences, expandOccurrences } from "../../../lib/calendar/recurrence.js";
 import { useDayKey } from "../../../lib/calendar/useDayKey.js";
-import { allOccurrences, initialMatchIndex, occurrencesInRange, searchOccurrences, searchTerms, stepSequenceIndex } from "../../../lib/calendar/eventSearch.js";
+import {
+    allOccurrences,
+    initialMatchIndex,
+    occurrencesInRange,
+    searchOccurrences,
+    searchTerms,
+    stepSequenceIndex,
+} from "../../../lib/calendar/eventSearch.js";
 import Drawer from "../../../lib/components/overlays/Drawer.js";
-import CalendarShell, { CalendarShellProps, useCalendarShell } from "../../shared/components/calendar/layout/CalendarShell.js";
+import CalendarShell, {
+    CalendarShellProps,
+    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";
@@ -49,7 +60,13 @@ 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, CalendarView, getStoredCalendarView, isCalendarView, storeCalendarView } from "../../shared/components/calendar/calendarView.js";
+import {
+    CALENDAR_VIEWS,
+    CalendarView,
+    getStoredCalendarView,
+    isCalendarView,
+    storeCalendarView,
+} from "../../shared/components/calendar/calendarView.js";
 import { SlideFrom } from "../../shared/components/calendar/SlideIn.js";
 import { SWIPE_PERIOD_SHIFT } from "../../shared/components/calendar/swipeNavigation.js";
 import { nextHalfHour } from "../../shared/components/calendar/timePicker.js";
@@ -63,6 +80,9 @@ import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { bookingSettingsHref } from "../../shared/calendar/bookingPlugin.js";
 import { changedEventOf } from "../../shared/calendar/calendarLiveUpdates.js";
 
+/** The push client channel group (`PushClient.setChannels()`) the page's calendars are subscribed under. */
+const CALENDAR_CHANNEL_GROUP = "calendar";
+
 /** The furthest instants a `Date` can hold: the List's "range" reaches both. */
 const MAX_DATE_MS = 8.64e15;
 
@@ -75,7 +95,14 @@ function CalendarPage(props: CalendarShellProps) {
 }
 
 type ViewType = CalendarView;
-const VIEW_LABELS: Record<ViewType, string> = { list: "List", month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
+const VIEW_LABELS: Record<ViewType, string> = {
+    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: Partial<Record<ViewType, ShortcutDef>> = {
     list: SHORTCUTS.calendar.list,
@@ -86,7 +113,15 @@ const VIEW_SHORTCUTS: Partial<Record<ViewType, ShortcutDef>> = {
 };
 
 /** One of the view switcher's buttons, with its shortcut in the tooltip. */
-function ViewButton({ view, current, onSelect }: { view: ViewType; current: ViewType; onSelect: (view: ViewType) => void }) {
+function ViewButton({
+    view,
+    current,
+    onSelect,
+}: {
+    view: ViewType;
+    current: ViewType;
+    onSelect: (view: ViewType) => void;
+}) {
     const shortcut = VIEW_SHORTCUTS[view];
     const hint = useShortcutProps(VIEW_LABELS[view], shortcut ?? SHORTCUTS.calendar.day, !!shortcut);
     return (
@@ -121,7 +156,8 @@ interface ModalState {
 }
 
 function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHref?: string }) {
-    const { mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor } = useCalendarShell();
+    const { mailboxUid, folderUid, calendarFolders, mailboxCalendars, mailboxes, reloadFolders, colorFor } =
+        useCalendarShell();
     const client = useApiClient();
     // `PointerSensor` alone activates a drag on the very first touch-move, indistinguishable from a
     // scroll gesture on a touch device. `MouseSensor` (a small `distance` — desktop drags still start
@@ -130,7 +166,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     // 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 } }),
+        useSensor(TouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } })
     );
 
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -191,7 +227,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     const checkedFolderUids = checkedFolderUidsState ?? new Set(calendarFolders.map((f) => f.uid));
     const folderColors = useMemo(
         () => Object.fromEntries(calendarFolders.map((f) => [f.uid, colorFor(f)])),
-        [calendarFolders, colorFor],
+        [calendarFolders, colorFor]
     );
 
     function toggleCalendar(toggledUid: string) {
@@ -254,7 +290,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         }
         setLoading(true);
         setError(null);
-        void Promise.allSettled(targets.map((f) => listCalendarEvents(f.uid, client)))
+        void Promise.allSettled(targets.map((f) => listCalendarEvents(f.uid, client).then(openSealedEvents)))
             .then((results) => {
                 if (seq !== reloadSeqRef.current) {
                     return;
@@ -292,7 +328,10 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
 
     // Keyed on stable string summaries (not the array/set objects themselves, which are new references
     // every render) so this only re-fires when the actual set of folders to fetch changes.
-    const calendarFolderUidsKey = calendarFolders.map((f) => f.uid).sort().join(",");
+    const calendarFolderUidsKey = calendarFolders
+        .map((f) => f.uid)
+        .sort()
+        .join(",");
     const checkedFolderUidsKey = Array.from(checkedFolderUids).sort().join(",");
     useEffect(reload, [calendarFolderUidsKey, checkedFolderUidsKey]);
 
@@ -302,25 +341,27 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     // fetch changes nothing: the next load shows the event as it is.
     const checkedFolderUidsRef = useRef(checkedFolderUids);
     checkedFolderUidsRef.current = checkedFolderUids;
-    useEffect(
-        () =>
-            getPushClient().onEvent((event) => {
-                const change = changedEventOf(event);
-                if (!change) {
-                    return;
-                }
-                const { uid } = change;
-                if (change.deleted) {
-                    setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
-                    return;
-                }
-                void getCalendarEvent(uid, client).then(
+    // Those events are published on the calendar's own channel, so the page subscribes to every calendar it lists - checked or not, so checking
+    // one needs no new subscription - while it is open.
+    useFolderLiveUpdates(
+        CALENDAR_CHANNEL_GROUP,
+        calendarFolders.map((f) => f.uid),
+        changedEventOf,
+        (change) => {
+            const { uid } = change;
+            if (change.deleted) {
+                setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
+                return;
+            }
+            void getCalendarEvent(uid, client)
+                .then(openSealedEvent)
+                .then(
                     (fresh) => {
                         if (checkedFolderUidsRef.current.has(fresh.folderUid)) {
                             setEvents((previous) =>
                                 previous.some((existing) => existing.uid === fresh.uid)
                                     ? previous.map((existing) => (existing.uid === fresh.uid ? fresh : existing))
-                                    : [...previous, fresh],
+                                    : [...previous, fresh]
                             );
                         }
                     },
@@ -328,10 +369,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                         if (err instanceof ApiRequestError && err.status === 404) {
                             setEvents((previous) => previous.filter((existing) => existing.uid !== uid));
                         }
-                    },
+                    }
                 );
-            }),
-        [client],
+        }
     );
 
     // 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
@@ -359,7 +399,10 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
 
     // 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 everything = useMemo(
+        () => (view === "list" || modal?.occurrence ? allOccurrences(events) : []),
+        [events, view, !!modal?.occurrence]
+    );
     const sequence = useMemo(() => {
         if (searching) {
             return matches;
@@ -375,7 +418,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         if (view === "list") {
             return sequence;
         }
-        return searching ? occurrencesInRange(matches, rangeStart, rangeEnd) : expandAllOccurrences(events, rangeStart, rangeEnd);
+        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. */
@@ -395,7 +440,13 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     // calendar do not.
     const stepFrom = modal?.occurrence;
     const stepIndex = (direction: 1 | -1) =>
-        stepSequenceIndex(sequence, stepFrom?.occurrenceKey ?? activeKey, stepFrom ? new Date(stepFrom.startDate) : undefined, direction, searching);
+        stepSequenceIndex(
+            sequence,
+            stepFrom?.occurrenceKey ?? activeKey,
+            stepFrom ? new Date(stepFrom.startDate) : undefined,
+            direction,
+            searching
+        );
 
     function stepMatch(direction: 1 | -1) {
         const next = sequence[stepIndex(direction)];
@@ -431,17 +482,22 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             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)]);
+            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],
+        [calendarFolders, checkedFolderUidsKey, colorFor]
     );
 
     function shiftView(direction: 1 | -1) {
@@ -455,7 +511,7 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                 ? addMonths(d, direction)
                 : view === "week" || view === "workWeek"
                   ? addWeeks(d, direction)
-                  : addDays(d, direction),
+                  : addDays(d, direction)
         );
     }
 
@@ -474,7 +530,8 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     const wheelSlide = useEnterSlide();
     /** Where the scroller of the page a wheel step arrived at starts: its top after going on, its bottom after going back. */
     const arrivalEdge = useRef<WheelEdge | null>(null);
-    const scrollerOf = (): HTMLElement | null => swipe.ref.current?.querySelector<HTMLElement>("[data-calendar-scroller]") ?? null;
+    const scrollerOf = (): HTMLElement | null =>
+        swipe.ref.current?.querySelector<HTMLElement>("[data-calendar-scroller]") ?? null;
     useWheelPaging(swipe.ref, {
         enabled: !isMobile && !dragging && !modal && view !== "list",
         getScroller: () => (view === "month" ? null : scrollerOf()),
@@ -496,7 +553,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     // 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<HTMLElement>("[data-occurrence-key]"));
-        marked.find((el) => el.dataset.occurrenceKey === activeKey)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+        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.
@@ -512,7 +571,13 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         setViewDate(startOfDay(date));
     }
 
-    function openNewEvent(start?: Date, end?: Date, targetFolderUid?: string, anchor?: EventAnchor, initialAllDay?: boolean) {
+    function openNewEvent(
+        start?: Date,
+        end?: Date,
+        targetFolderUid?: string,
+        anchor?: EventAnchor,
+        initialAllDay?: boolean
+    ) {
         if (!mailboxUid || !folderUid) {
             return;
         }
@@ -556,10 +621,17 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         const requestedStart = new Date(params.get("start") ?? "");
         navigateTo("/calendar", { replace: true });
         getCalendarEvent(eventUid, client)
+            .then(openSealedEvent)
             .then((event) => {
                 const from = isNaN(requestedStart.getTime()) ? new Date(event.startDate) : requestedStart;
-                const candidates = expandOccurrences(event, new Date(from.getTime() - 86_400_000), new Date(from.getTime() + 86_400_000));
-                const match = candidates.find((occurrence) => new Date(occurrence.startDate).getTime() === from.getTime()) ?? candidates[0];
+                const candidates = expandOccurrences(
+                    event,
+                    new Date(from.getTime() - 86_400_000),
+                    new Date(from.getTime() + 86_400_000)
+                );
+                const match =
+                    candidates.find((occurrence) => new Date(occurrence.startDate).getTime() === from.getTime()) ??
+                    candidates[0];
                 if (match) {
                     setViewDate(occurrenceDay(match));
                     openEvent(match);
@@ -623,9 +695,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             ? "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");
+              : 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;
@@ -636,9 +708,14 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     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],
+                .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 = (
@@ -662,7 +739,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
 
     return (
         <div className="flex-1 min-w-0 flex min-h-0">
-            <div className="hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto">{sidebarContent}</div>
+            <div className="hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto">
+                {sidebarContent}
+            </div>
             <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Calendars" fullScreen>
                 <div className="flex flex-col">{sidebarContent}</div>
             </Drawer>
@@ -679,18 +758,42 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                     </button>
                     {/* On a phone New event is the floating button at the bottom of the page instead, as in Mail. */}
                     {!isMobile && (
-                        <Button type="button" onClick={(e) => openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below"))} className="!w-auto shrink-0" {...newEventHint}>
+                        <Button
+                            type="button"
+                            onClick={(e) =>
+                                openNewEvent(undefined, undefined, undefined, anchorOf(e.currentTarget, "below"))
+                            }
+                            className="!w-auto shrink-0"
+                            {...newEventHint}
+                        >
                             + New event
                         </Button>
                     )}
                     <div className="flex items-center gap-1">
-                        <button type="button" onClick={() => shiftView(-1)} aria-label="Previous" {...previousHint} className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button
+                            type="button"
+                            onClick={() => shiftView(-1)}
+                            aria-label="Previous"
+                            {...previousHint}
+                            className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt"
+                        >
                             &lsaquo;
                         </button>
-                        <button type="button" onClick={goToday} {...todayHint} className="px-2 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button
+                            type="button"
+                            onClick={goToday}
+                            {...todayHint}
+                            className="px-2 h-7 text-sm rounded-sm hover:bg-surface-alt"
+                        >
                             Today
                         </button>
-                        <button type="button" onClick={() => shiftView(1)} aria-label="Next" {...nextHint} className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt">
+                        <button
+                            type="button"
+                            onClick={() => shiftView(1)}
+                            aria-label="Next"
+                            {...nextHint}
+                            className="w-7 h-7 text-sm rounded-sm hover:bg-surface-alt"
+                        >
                             &rsaquo;
                         </button>
                     </div>
@@ -720,8 +823,17 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                     </div>
                 )}
 
-                <div ref={swipe.ref} className="flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden" {...swipe.handlers} style={swipe.style}>
-                    <div data-swipe-phase={swipe.phase} className="flex-1 min-w-0 flex flex-col min-h-0" style={swipe.contentStyle}>
+                <div
+                    ref={swipe.ref}
+                    className="flex-1 min-w-0 flex flex-col min-h-0 overflow-hidden"
+                    {...swipe.handlers}
+                    style={swipe.style}
+                >
+                    <div
+                        data-swipe-phase={swipe.phase}
+                        className="flex-1 min-w-0 flex flex-col min-h-0"
+                        style={swipe.contentStyle}
+                    >
                         <div className="flex-1 min-w-0 flex flex-col min-h-0" style={wheelSlide.style}>
                             {loading ? (
                                 <p className="p-4 text-sm text-text-muted">Loading&hellip;</p>
@@ -749,7 +861,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                                                 folderColors={folderColors}
                                                 onSelectDay={handleSelectDay}
                                                 onSelectEvent={openEvent}
-                                                onSelectSlot={(start, end, anchor) => openNewEvent(start, end, undefined, anchor, true)}
+                                                onSelectSlot={(start, end, anchor) =>
+                                                    openNewEvent(start, end, undefined, anchor, true)
+                                                }
                                             />
                                         ) : view === "split" ? (
                                             <SplitDayView
@@ -757,7 +871,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                                                 columns={splitColumns}
                                                 occurrences={occurrences}
                                                 onSelectEvent={openEvent}
-                                                onSelectSlot={(start, end, targetFolderUid, anchor) => openNewEvent(start, end, targetFolderUid, anchor)}
+                                                onSelectSlot={(start, end, targetFolderUid, anchor) =>
+                                                    openNewEvent(start, end, targetFolderUid, anchor)
+                                                }
                                             />
                                         ) : (
                                             <TimeGridView
@@ -765,7 +881,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                                                 occurrences={occurrences}
                                                 folderColors={folderColors}
                                                 onSelectEvent={openEvent}
-                                                onSelectSlot={(start, end, anchor) => openNewEvent(start, end, undefined, anchor)}
+                                                onSelectSlot={(start, end, anchor) =>
+                                                    openNewEvent(start, end, undefined, anchor)
+                                                }
                                             />
                                         )}
                                     </DndContext>
@@ -785,7 +903,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                         onClose={closeModal}
                         mailboxUid={modalMailbox.uid}
                         folderUid={modalFolderUid!}
-                        calendars={calendarFolders.filter((f) => f.mailboxUid === modalMailbox.uid).map((f) => ({ uid: f.uid, name: f.name }))}
+                        calendars={calendarFolders
+                            .filter((f) => f.mailboxUid === modalMailbox.uid)
+                            .map((f) => ({ uid: f.uid, name: f.name }))}
                         mailboxOptions={mailboxOptions}
                         folderColors={folderColors}
                         organizerAddress={modalMailbox.primarySmtpAddress}
@@ -814,7 +934,9 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
                 )}
                 {/* The phone layout's New event: the old toolbar button's action (its quick form is a bottom sheet there, so no anchor), offered
                     only where that button could act - a calendar to put the event in - and not while the editor or its sheet is open. */}
-                {isMobile && mailboxUid && folderUid && !modal && <FloatingActionButton label="New event" icon={HiOutlinePlus} onClick={() => openNewEvent()} />}
+                {isMobile && mailboxUid && folderUid && !modal && (
+                    <FloatingActionButton label="New event" icon={HiOutlinePlus} onClick={() => openNewEvent()} />
+                )}
             </div>
         </div>
     );

package/apps/www/contacts/index.tsx

@@ -10,6 +10,7 @@ import {
     Contact,
     createContact,
     deleteContact,
+    getContact,
     listContacts,
     ensureSuggestedContacts,
     listContactsInFolders,
@@ -42,6 +43,18 @@ import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { notify } from "../../shared/notifications/store.js";
+import { changedItemOf, useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
+
+/** The published model class name of a contact on either database (`ContactMongo`, `ContactSQL`) - not a `ContactList`'s. */
+const CONTACT_MODEL = /^Contact(Mongo|SQL)$/;
+
+/** The push client channel group (`PushClient.setChannels()`) the page's contacts folders are subscribed under. */
+const CONTACTS_CHANNEL_GROUP = "contacts";
+
+/** `list` with `contact` in place of the one with its uid, or added when it has none. */
+function upsertContact(list: Contact[], contact: Contact): Contact[] {
+    return list.some((existing) => existing.uid === contact.uid) ? list.map((existing) => (existing.uid === contact.uid ? contact : existing)) : [...list, contact];
+}
 
 const INPUT_CLASS =
     "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -166,6 +179,45 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         };
     }, [mailboxUid]);
 
+    // A contact created, changed or deleted anywhere - another tab, a phone over ActiveSync - is announced on its folder's channel. It is fetched again by
+    // its uid and filed in the list of the folder it is in now (the mailbox's contacts, or its suggested contacts), and taken out of the other; one that is
+    // gone (a delete, or a 404) leaves both. A failed fetch changes nothing: the next load shows it as it is.
+    useFolderLiveUpdates(
+        CONTACTS_CHANNEL_GROUP,
+        [folderUid, suggestedFolderUid].filter((uid): uid is string => !!uid),
+        (event) => changedItemOf(event, CONTACT_MODEL),
+        (change) => {
+            const remove = (uid: string) => {
+                setContacts((previous) => previous.filter((existing) => existing.uid !== uid));
+                setSuggestedContacts((previous) => previous.filter((existing) => existing.uid !== uid));
+            };
+            if (change.deleted) {
+                remove(change.uid);
+                return;
+            }
+            void getContact(change.uid, client).then(
+                (fresh) => {
+                    if (fresh.deleted === true) {
+                        remove(fresh.uid);
+                    } else if (fresh.folderUid === folderUid) {
+                        setContacts((previous) => upsertContact(previous, fresh));
+                        setSuggestedContacts((previous) => previous.filter((existing) => existing.uid !== fresh.uid));
+                    } else if (fresh.folderUid === suggestedFolderUid) {
+                        setSuggestedContacts((previous) => upsertContact(previous, fresh));
+                        setContacts((previous) => previous.filter((existing) => existing.uid !== fresh.uid));
+                    } else {
+                        remove(fresh.uid);
+                    }
+                },
+                (err: unknown) => {
+                    if (err instanceof ApiRequestError && err.status === 404) {
+                        remove(change.uid);
+                    }
+                },
+            );
+        },
+    );
+
     // restapi only honors `?deleted=true` for a caller with both delete and update rights on the contacts *folder*
     // (its ACL, which inherits the mailbox's but can carry its own records) - anyone else silently gets the *live*
     // contacts back, which the Deleted view would then present as deleted. There is no client API for the caller's
@@ -228,6 +280,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                 return contacts;
             case "favorites":
                 return contacts.filter((c) => c.favorite);
+            case "everyone":
+                // The mailbox's own contacts and its suggested ones in one list (a person is in only one of them: a suggestion that is accepted is moved).
+                return [...contacts, ...suggestedContacts];
             case "suggested":
                 return suggestedContacts;
             case "list":
@@ -428,7 +483,8 @@ function ContactsContent({ userUid }: { userUid?: string }) {
 
     // A suggested contact becomes one of the mailbox's own: a copy in its contacts folder, and the suggestion removed (the person is not suggested again).
     const handleAddToContacts = singleFlight(async () => {
-        for (const contact of checkedContacts) {
+        // In the All contacts view the selection can hold contacts that already are the mailbox's own: only the suggested ones are added.
+        for (const contact of checkedContacts.filter((checked) => checked.folderUid === suggestedFolderUid)) {
             try {
                 await createContact(
                     {
@@ -540,7 +596,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                     onToggleFavorite={handleToggleFavorite}
                     onAddCategory={handleAddCategory}
                     onExportVCard={handleExportVCard}
-                    onAddToContacts={view.type === "suggested" ? handleAddToContacts : undefined}
+                    onAddToContacts={view.type === "suggested" || view.type === "everyone" ? handleAddToContacts : undefined}
                     onImportFile={handleImportFile}
                     shortcuts
                     hideNew={isMobile}

package/apps/www/index.tsx

@@ -160,11 +160,18 @@ async function decryptEncryptedRows(messages: Message[], unlocked: UnlockedKeys)
         DECRYPT_CONCURRENCY,
         async (message): Promise<[string, DecryptedRow] | null> => {
             try {
-                const rawMime = await getMessageRawContent(message.uid);
                 // Loaded here, on first use: the S/MIME code (PKI.js, ASN.1, X.509) is over half a megabyte and an inbox with
                 // no encrypted mail in it never needs it.
-                const { evaluateMessageSecurity } = await (securityModule ??= import("../../lib/crypto/messageSecurity.js"));
-                const security = await evaluateMessageSecurity(rawMime, unlocked);
+                const securityApi = await (securityModule ??= import("../../lib/crypto/messageSecurity.js"));
+                // A message sealed at rest carries its subject and preview sealed on the row: no download needed.
+                const summary = message.zeroAccess ? await securityApi.openZeroAccessSummary(message.zeroAccess.sealedSummary, unlocked.zeroAccessKeys) : undefined;
+                if (summary) {
+                    const preview = summary.preview.slice(0, LIST_PREVIEW_MAX_LENGTH);
+                    rememberDecrypted(message.uid, message.mailboxUid, { subject: summary.subject, preview });
+                    return [message.uid, { subject: summary.subject, preview }];
+                }
+                const rawMime = await getMessageRawContent(message.uid);
+                const security = await securityApi.evaluateMessageSecurity(rawMime, unlocked);
                 if (!security.subject && !security.html) {
                     markDecryptFailed(message.uid);
                     return null;

package/apps/www/settings/encryption/index.tsx

@@ -51,6 +51,8 @@ import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../lib/components/overlays/Modal.js";
+import ZeroAccessSetting from "../../../shared/components/settings/ZeroAccessSetting.js";
+import KeyExportSetting from "../../../shared/components/settings/KeyExportSetting.js";
 import SigningCertificateCard, { SigningCertificateMode } from "../../../shared/components/settings/SigningCertificateCard.js";
 import { readStoredSignEnrollment, storeSignEnrollment } from "../../../shared/signing/enrollmentStorage.js";
 import {
@@ -975,6 +977,9 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
                     )}
                 </div>
 
+                <ZeroAccessSetting mailbox={mailbox} canManage={canManageKeys} />
+                <KeyExportSetting mailbox={mailbox} canManage={canManageKeys} />
+
                 <div>
                     <h2 className="text-sm font-semibold mb-2">Digital signatures</h2>
                     {activeSigningKey && signingStatus !== "pending" && (

package/apps/www/settings/privacy/index.tsx

@@ -174,7 +174,8 @@ function ExportSection({ mailboxUid, mailboxLabel }: { mailboxUid?: string; mail
             <p className="text-xs text-text-muted mb-3">
                 Requests a copy of <strong>{mailboxLabel}</strong>&rsquo;s messages, contacts, calendar, tasks, and notes. This runs
                 in the background and can take a few minutes — check back here for a download link once it&rsquo;s
-                ready.
+                ready. Mail stored with zero-access encryption is exported encrypted: open it in a mail app that has your
+                exported keys (Settings &rsaquo; Encryption).
             </p>
 
             <form onSubmit={handleCreate} className="flex items-end gap-3 mb-5">