@rapidmx/web-client 0.33.0 → 0.35.0

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/tasks/index.tsx

@@ -11,6 +11,7 @@ import {
     TaskPriority,
     createTask,
     deleteTask,
+    getTask,
     listTasks,
     setTaskCompleted,
     setTaskMyDay,
@@ -34,6 +35,13 @@ import { SHORTCUTS } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+import { changedItemOf, useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
+
+/** The published model class name of a task on either database (`TaskMongo`, `TaskSQL`) - not a `TaskList`'s. */
+const TASK_MODEL = /^Task(Mongo|SQL)$/;
+
+/** The push client channel group (`PushClient.setChannels()`) the page's tasks folder is subscribed under. */
+const TASKS_CHANNEL_GROUP = "tasks";
 
 const INPUT_CLASS =
     "text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -146,6 +154,40 @@ function TasksContent() {
         void reload();
     }, [folderUid]);
 
+    // A task 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 replaces (or joins) the list while it is still in this folder; one that is gone (a delete, a 404, or moved to another folder) leaves it. A
+    // failed fetch changes nothing: the next load shows it as it is.
+    useFolderLiveUpdates(
+        TASKS_CHANNEL_GROUP,
+        folderUid ? [folderUid] : [],
+        (event) => changedItemOf(event, TASK_MODEL),
+        (change) => {
+            const remove = () => setTasks((previous) => previous.filter((existing) => existing.uid !== change.uid));
+            if (change.deleted) {
+                remove();
+                return;
+            }
+            void getTask(change.uid, client).then(
+                (fresh) => {
+                    if (fresh.folderUid !== folderUid) {
+                        remove();
+                        return;
+                    }
+                    setTasks((previous) =>
+                        previous.some((existing) => existing.uid === fresh.uid)
+                            ? previous.map((existing) => (existing.uid === fresh.uid ? fresh : existing))
+                            : [...previous, fresh],
+                    );
+                },
+                (err: unknown) => {
+                    if (err instanceof ApiRequestError && err.status === 404) {
+                        remove();
+                    }
+                },
+            );
+        },
+    );
+
     useEffect(() => {
         setTargetMailboxUid(undefined);
         setAddedElsewhere(null);

package/dist/apps/shared/calendar/calendarLiveUpdates.js

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 /** Pure helper behind the calendar page's live updates: which push events say "an event changed". */
+import { changedItemOf } from "../live/useFolderLiveUpdates.js";
 /** The published model name of a calendar event on either database (`CalendarEventMongo`, `CalendarEventSQL`) - and not the reminder's `"CalendarEvent"`,
  * which has its own action. */
 const EVENT_MODEL = /^CalendarEvent(Mongo|SQL)$/;
@@ -16,9 +17,5 @@ const EVENT_MODEL = /^CalendarEvent(Mongo|SQL)$/;
  * changed event is handled that way, an ordinary one (an invitation arriving, an edit on another device) included.
  */
 export function changedEventOf(event) {
-    if (!EVENT_MODEL.test(event.type) || (event.action !== "create" && event.action !== "update" && event.action !== "delete")) {
-        return undefined;
-    }
-    const data = event.data;
-    return typeof data?.uid === "string" ? { uid: data.uid, deleted: event.action === "delete" } : undefined;
+    return changedItemOf(event, EVENT_MODEL);
 }

package/dist/apps/shared/calendar/calendarReminders.d.ts

@@ -1,7 +1,7 @@
 /** Pure helpers behind `useCalendarReminders.ts` - kept apart from the hook so the push-payload parsing, the snooze
  * arithmetic and the pop-up's wording are each testable without a React tree or a socket. */
 import type { PushEvent } from "../../../lib/mail/pushClient.js";
-/** How long "Snooze" waits before the reminder reappears - or less, if the meeting starts sooner (`snoozeDelayMs()`). */
+/** How long "Snooze" waits before the alarm comes back. */
 export declare const SNOOZE_MS: number;
 /** The payload restapi's `CalendarReminderJob` publishes (`{ eventUid, title, startDate, location }`) as a `"CalendarEvent"`/`"reminder"` push event. */
 export interface CalendarReminderNotice {
@@ -17,11 +17,13 @@ export interface CalendarReminderNotice {
  * else (a room name, an address, free-text instructions are all real, common `location` values this must not
  * treat as a link). Trimmed first, so incidental whitespace never hides a real link. */
 export declare function joinMeetingUrl(location: string | null | undefined): string | undefined;
+/** What the alarm's button that opens an event's location URL is called: "Join" for a video meeting (a conferencing service's link, or any link that says
+ * it is one to join), "Open" for any other web address. */
+export declare function locationActionLabel(url: string): "Join" | "Open";
+/** Where an alarm's View button leads: the Calendar, with the event (and the occurrence due) open. */
+export declare function calendarEventHref(eventUid: string, startDate: string): string;
 /** The reminder `event` carries, or `undefined` for anything else the shared push connection delivers (mail, folders, appearance, ...). */
 export declare function calendarReminderOf(event: PushEvent): CalendarReminderNotice | undefined;
-/** How long "Snooze" waits before showing the reminder again: `SNOOZE_MS`, or less if the meeting starts first - never negative (snoozing a
- * reminder for a meeting that has already started shows it again at once rather than waiting a further five minutes). */
-export declare function snoozeDelayMs(startDate: string, now?: number): number;
 /** The pop-up's message line: when the meeting starts, relative to `now`. */
 export declare function reminderMessage(startDate: string, now?: number): string;
 /** The one notification id a reminder, and every "Snooze" of it, reuses - so snoozing replaces the same pop-up rather than stacking a new one. */

package/dist/apps/shared/calendar/calendarReminders.js

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 /** Pure helpers behind `useCalendarReminders.ts` - kept apart from the hook so the push-payload parsing, the snooze
  * arithmetic and the pop-up's wording are each testable without a React tree or a socket. */
-/** How long "Snooze" waits before the reminder reappears - or less, if the meeting starts sooner (`snoozeDelayMs()`). */
+/** How long "Snooze" waits before the alarm comes back. */
 export const SNOOZE_MS = 5 * 60000;
 function isReminderNotice(data) {
     const notice = data;
@@ -31,15 +31,23 @@ export function joinMeetingUrl(location) {
     }
     return url.protocol === "http:" || url.protocol === "https:" ? trimmed : undefined;
 }
+/** What the alarm's button that opens an event's location URL is called: "Join" for a video meeting (a conferencing service's link, or any link that says
+ * it is one to join), "Open" for any other web address. */
+export function locationActionLabel(url) {
+    const { hostname, pathname } = new URL(url);
+    const host = hostname.toLowerCase();
+    const conferencing = /(^|\.)(zoom\.us|zoom\.com|zoomgov\.com|webex\.com|gotomeeting\.com|goto\.com|whereby\.com|bluejeans\.com|chime\.aws|meet\.jit\.si)$/;
+    const known = conferencing.test(host) || host === "meet.google.com" || host === "teams.microsoft.com" || host === "teams.live.com";
+    return known || /\/(join|meet|meeting|room|call)(\/|$)/i.test(pathname) || /^(meet|video|call|conference)\./.test(host) ? "Join" : "Open";
+}
+/** Where an alarm's View button leads: the Calendar, with the event (and the occurrence due) open. */
+export function calendarEventHref(eventUid, startDate) {
+    return `/calendar?event=${encodeURIComponent(eventUid)}&start=${encodeURIComponent(startDate)}`;
+}
 /** The reminder `event` carries, or `undefined` for anything else the shared push connection delivers (mail, folders, appearance, ...). */
 export function calendarReminderOf(event) {
     return event.type === "CalendarEvent" && event.action === "reminder" && isReminderNotice(event.data) ? event.data : undefined;
 }
-/** How long "Snooze" waits before showing the reminder again: `SNOOZE_MS`, or less if the meeting starts first - never negative (snoozing a
- * reminder for a meeting that has already started shows it again at once rather than waiting a further five minutes). */
-export function snoozeDelayMs(startDate, now = Date.now()) {
-    return Math.max(0, Math.min(SNOOZE_MS, new Date(startDate).getTime() - now));
-}
 /** The pop-up's message line: when the meeting starts, relative to `now`. */
 export function reminderMessage(startDate, now = Date.now()) {
     const time = new Date(startDate).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });

package/dist/apps/shared/calendar/useCalendarReminders.d.ts

@@ -1,23 +1,33 @@
-/** Where a reminder's title leads. There is no per-event deep link yet (the calendar opens an event by local state, not a URL - see
- * `apps/www/calendar/index.tsx`'s `openEvent()`), so every reminder opens the calendar itself. */
-export declare const CALENDAR_HREF = "/calendar";
+import { CalendarReminderNotice } from "./calendarReminders.js";
 export interface UseCalendarRemindersOptions {
     /** Nothing is shown without a signed-in user. */
     userUid?: string;
     /** Runs only while true - the persistent app frame turns it on, like `useMailConnection`'s identical option. */
     enabled: boolean;
 }
+/** The calendar alarms waiting on the person, as `CalendarAlarmDialog` draws them. */
+export interface CalendarAlarms {
+    /** The alarm on screen: the oldest one not yet answered. `undefined` when there is none. */
+    current?: CalendarReminderNotice;
+    /** How many more are waiting behind `current`. */
+    waiting: number;
+    /** Closes `current` and brings it back after `SNOOZE_MS` (five minutes). */
+    snooze: () => void;
+    /** Closes `current` for good. */
+    dismiss: () => void;
+}
 /**
- * Pop-up meeting reminders. restapi's `CalendarReminderJob` fires a `"CalendarEvent"`/`"reminder"` push event (`{ eventUid, title, startDate }`)
- * when an event's `reminderMinutesBeforeStart` comes due, over the same shared push connection Mail already keeps open
- * (`getPushClient()`) - every accessible mailbox's own channel is already subscribed (`useMailLiveUpdates`'s `pushChannelsFor()`, and the
- * event is published to the mailbox channel as well as the folder's own), so this hook only has to listen, never to manage channels of its
- * own. Lives in the persistent app frame (`AppShell`), like `useSigningEnrollmentWatcher`, so a reminder shows wherever the user is signed in -
- * Mail, Calendar, Contacts, Settings.
+ * Calendar alarms. restapi's `CalendarReminderJob` fires a `"CalendarEvent"`/`"reminder"` push event (`{ eventUid, title, startDate, location }`)
+ * when an event's `reminderMinutesBeforeStart` comes due, over the same shared push connection Mail already keeps open (`getPushClient()`) -
+ * every accessible mailbox's own channel is already subscribed (`useMailLiveUpdates`'s `pushChannelsFor()`, and the event is published to the
+ * mailbox channel as well as the folder's own), so this hook only has to listen, never to manage channels of its own. Lives in the persistent
+ * app frame (`AppShell`), like `useSigningEnrollmentWatcher`, so an alarm shows wherever the user is signed in - Mail, Calendar, Contacts, Settings.
+ *
+ * An alarm is a modal (`CalendarAlarmDialog`), with a bell: not a pop-up that goes by itself, since a meeting missed to a toast that timed out
+ * is the failure an alarm exists to prevent. Alarms that arrive together queue, one dialog at a time. **Snooze** closes it and brings it back -
+ * with the bell again - after exactly `SNOOZE_MS`. A snooze is this tab's own `setTimeout`, cleared on unmount or sign-out; like the alarm itself (the
+ * push event is never replayed), it does not survive the tab closing.
  *
- * Each reminder is a sticky pop-up (`notify()`, kind `"calendar"`) with two actions: **Dismiss** closes it and does nothing else. **Snooze**
- * closes it and shows it again - reusing the same notification id, so it replaces rather than stacks - after `SNOOZE_MS` (five minutes), or
- * sooner if the meeting starts first (`snoozeDelayMs()`). A snooze is this tab's own `setTimeout`, cleared on unmount or sign-out; like the
- * reminder itself (the push event is never replayed), it does not survive the tab closing.
+ * With pop-ups turned off (`getNotificationsEnabled()`) no dialog is shown and nothing is heard: the alarm is only recorded in "Recent notifications".
  */
-export declare function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersOptions): void;
+export declare function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersOptions): CalendarAlarms;

package/dist/apps/shared/calendar/useCalendarReminders.js

@@ -2,80 +2,73 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { getPushClient } from "../../../lib/mail/pushClient.js";
+import { getNotificationsEnabled } from "../notifications/preferences.js";
+import { playNotificationSound } from "../notifications/sounds.js";
 import { notify } from "../notifications/store.js";
-import { calendarReminderOf, joinMeetingUrl, reminderMessage, reminderNotificationId, snoozeDelayMs } from "./calendarReminders.js";
-/** Where a reminder's title leads. There is no per-event deep link yet (the calendar opens an event by local state, not a URL - see
- * `apps/www/calendar/index.tsx`'s `openEvent()`), so every reminder opens the calendar itself. */
-export const CALENDAR_HREF = "/calendar";
+import { SNOOZE_MS, calendarReminderOf, reminderMessage, reminderNotificationId } from "./calendarReminders.js";
 /**
- * Pop-up meeting reminders. restapi's `CalendarReminderJob` fires a `"CalendarEvent"`/`"reminder"` push event (`{ eventUid, title, startDate }`)
- * when an event's `reminderMinutesBeforeStart` comes due, over the same shared push connection Mail already keeps open
- * (`getPushClient()`) - every accessible mailbox's own channel is already subscribed (`useMailLiveUpdates`'s `pushChannelsFor()`, and the
- * event is published to the mailbox channel as well as the folder's own), so this hook only has to listen, never to manage channels of its
- * own. Lives in the persistent app frame (`AppShell`), like `useSigningEnrollmentWatcher`, so a reminder shows wherever the user is signed in -
- * Mail, Calendar, Contacts, Settings.
+ * Calendar alarms. restapi's `CalendarReminderJob` fires a `"CalendarEvent"`/`"reminder"` push event (`{ eventUid, title, startDate, location }`)
+ * when an event's `reminderMinutesBeforeStart` comes due, over the same shared push connection Mail already keeps open (`getPushClient()`) -
+ * every accessible mailbox's own channel is already subscribed (`useMailLiveUpdates`'s `pushChannelsFor()`, and the event is published to the
+ * mailbox channel as well as the folder's own), so this hook only has to listen, never to manage channels of its own. Lives in the persistent
+ * app frame (`AppShell`), like `useSigningEnrollmentWatcher`, so an alarm shows wherever the user is signed in - Mail, Calendar, Contacts, Settings.
  *
- * Each reminder is a sticky pop-up (`notify()`, kind `"calendar"`) with two actions: **Dismiss** closes it and does nothing else. **Snooze**
- * closes it and shows it again - reusing the same notification id, so it replaces rather than stacks - after `SNOOZE_MS` (five minutes), or
- * sooner if the meeting starts first (`snoozeDelayMs()`). A snooze is this tab's own `setTimeout`, cleared on unmount or sign-out; like the
- * reminder itself (the push event is never replayed), it does not survive the tab closing.
+ * An alarm is a modal (`CalendarAlarmDialog`), with a bell: not a pop-up that goes by itself, since a meeting missed to a toast that timed out
+ * is the failure an alarm exists to prevent. Alarms that arrive together queue, one dialog at a time. **Snooze** closes it and brings it back -
+ * with the bell again - after exactly `SNOOZE_MS`. A snooze is this tab's own `setTimeout`, cleared on unmount or sign-out; like the alarm itself (the
+ * push event is never replayed), it does not survive the tab closing.
+ *
+ * With pop-ups turned off (`getNotificationsEnabled()`) no dialog is shown and nothing is heard: the alarm is only recorded in "Recent notifications".
  */
 export function useCalendarReminders({ userUid, enabled }) {
+    const [queue, setQueue] = useState([]);
+    // The queue as of the last render, for the callbacks below to read (a state updater must not start a timer: React may run it twice).
+    const queueRef = useRef(queue);
+    queueRef.current = queue;
+    const timers = useRef(new Set());
+    const present = useCallback((notice) => {
+        if (!getNotificationsEnabled()) {
+            // Off: only the history keeps it.
+            notify({ id: reminderNotificationId(notice.eventUid, notice.startDate), kind: "calendar", title: notice.title, message: reminderMessage(notice.startDate) });
+            return;
+        }
+        const id = reminderNotificationId(notice.eventUid, notice.startDate);
+        setQueue((current) => (current.some((queued) => reminderNotificationId(queued.eventUid, queued.startDate) === id) ? current : [...current, notice]));
+        playNotificationSound("calendar");
+    }, []);
     useEffect(() => {
         if (!enabled || !userUid) {
             return;
         }
-        const timers = new Set();
-        function show(notice) {
-            const joinUrl = joinMeetingUrl(notice.location);
-            notify({
-                id: reminderNotificationId(notice.eventUid, notice.startDate),
-                kind: "calendar",
-                title: notice.title,
-                message: reminderMessage(notice.startDate),
-                // Anyone who can invite you can put any address in an event's location: the button says where it goes.
-                hint: joinUrl ? `Join Meeting opens ${new URL(joinUrl).host}` : undefined,
-                href: CALENDAR_HREF,
-                sticky: true,
-                actions: [
-                    ...(joinUrl
-                        ? [
-                            {
-                                label: "Join Meeting",
-                                onClick: () => window.open(joinUrl, "_blank", "noopener,noreferrer"),
-                                // Joining isn't resolving the reminder - Dismiss/Snooze are still there afterward.
-                                keepOpen: true,
-                            },
-                        ]
-                        : []),
-                    { label: "Dismiss" },
-                    {
-                        label: "Snooze",
-                        onClick: () => {
-                            const timer = setTimeout(() => {
-                                timers.delete(timer);
-                                show(notice);
-                            }, snoozeDelayMs(notice.startDate));
-                            timers.add(timer);
-                        },
-                    },
-                ],
-            });
-        }
         const offEvent = getPushClient().onEvent((event) => {
             const notice = calendarReminderOf(event);
             if (notice) {
-                show(notice);
+                present(notice);
             }
         });
+        const pending = timers.current;
         return () => {
             offEvent();
-            for (const timer of timers) {
+            for (const timer of pending) {
                 clearTimeout(timer);
             }
-            timers.clear();
+            pending.clear();
+            setQueue([]);
         };
-    }, [enabled, userUid]);
+    }, [enabled, userUid, present]);
+    const dismiss = useCallback(() => setQueue((current) => current.slice(1)), []);
+    const snooze = useCallback(() => {
+        const first = queueRef.current[0];
+        if (first) {
+            const timer = setTimeout(() => {
+                timers.current.delete(timer);
+                present(first);
+            }, SNOOZE_MS);
+            timers.current.add(timer);
+        }
+        setQueue((current) => current.slice(1));
+    }, [present]);
+    return { current: queue[0], waiting: Math.max(0, queue.length - 1), snooze, dismiss };
 }

package/dist/apps/shared/components/calendar/CalendarAlarmDialog.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { CalendarAlarms } from "../../calendar/useCalendarReminders.js";
+export interface CalendarAlarmDialogProps {
+    alarms: CalendarAlarms;
+}
+/**
+ * The modal an event's alarm raises (see `useCalendarReminders()`): what is starting and when, where, and three actions. **View** opens the event's card
+ * in the Calendar. **Join** or **Open** - named for what the event's location is, a video meeting or any other web address - opens that address in a new
+ * tab; it is only there when the location is a web address, and says which site it goes to, since anyone who can invite you can put any address in an
+ * event. **Snooze** closes the dialog and brings it back after five minutes. Closing it with the close button or Escape dismisses the alarm.
+ * View and Join/Open also dismiss it: the person has answered it.
+ */
+export default function CalendarAlarmDialog({ alarms }: CalendarAlarmDialogProps): React.JSX.Element | null;

package/dist/apps/shared/components/calendar/CalendarAlarmDialog.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "../../../../lib/components/buttons/Button.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
+import { calendarEventHref, joinMeetingUrl, locationActionLabel, reminderMessage } from "../../calendar/calendarReminders.js";
+import { useNavigate } from "../../navigation/index.js";
+/**
+ * The modal an event's alarm raises (see `useCalendarReminders()`): what is starting and when, where, and three actions. **View** opens the event's card
+ * in the Calendar. **Join** or **Open** - named for what the event's location is, a video meeting or any other web address - opens that address in a new
+ * tab; it is only there when the location is a web address, and says which site it goes to, since anyone who can invite you can put any address in an
+ * event. **Snooze** closes the dialog and brings it back after five minutes. Closing it with the close button or Escape dismisses the alarm.
+ * View and Join/Open also dismiss it: the person has answered it.
+ */
+export default function CalendarAlarmDialog({ alarms }) {
+    const navigate = useNavigate();
+    const { current: alarm, waiting, snooze, dismiss } = alarms;
+    if (!alarm) {
+        return null;
+    }
+    const url = joinMeetingUrl(alarm.location);
+    const location = alarm.location?.trim();
+    return (_jsx(Modal, { open: true, onClose: dismiss, title: alarm.title, children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1 text-sm", children: [_jsx("p", { className: "font-semibold", children: reminderMessage(alarm.startDate) }), location && _jsx("p", { className: "text-text-muted break-words", children: location }), waiting > 0 && (_jsxs("p", { className: "text-xs text-text-muted", children: [waiting, " more alarm", waiting === 1 ? "" : "s", " after this one"] }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => {
+                                navigate(calendarEventHref(alarm.eventUid, alarm.startDate));
+                                dismiss();
+                            }, children: "View" }), url && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => {
+                                window.open(url, "_blank", "noopener,noreferrer");
+                                dismiss();
+                            }, children: locationActionLabel(url) })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: snooze, children: "Snooze" })] }), url && _jsx("p", { className: "text-xs text-text-muted", children: `${locationActionLabel(url)} opens ${new URL(url).host}` })] }) }));
+}

package/dist/apps/shared/components/contacts/ContactsSidebar.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 import { Contact } from "../../../../lib/contacts/contactsApi.js";
 export type ContactsView = {
     type: "all";
+} | {
+    type: "everyone";
 } | {
     type: "favorites";
 } | {
@@ -35,7 +37,7 @@ export interface ContactsSidebarProps {
     refreshToken?: number;
 }
 /**
- * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Suggested contacts" (the people the mailbox has corresponded with, when there are any), "Your contact
+ * Contacts' Outlook-style left sidebar: "All contacts" (the mailbox's own and its suggested ones together, when there are suggested ones), "Your contacts" (the mailbox's own, with count), "Favorites", "Suggested contacts" (the people the mailbox has corresponded with, when there are any), "Your contact
  * lists" (real `ContactList` records, fetched here), "Deleted", and "Categories" (derived from the
  * distinct `categories` values across the loaded contacts — no separate category registry exists
  * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping

package/dist/apps/shared/components/contacts/ContactsSidebar.js

@@ -39,7 +39,7 @@ function NavItem({ label, count, active, onClick, swatch, }) {
         ].join(" "), children: [_jsxs("span", { className: "flex items-center gap-2 min-w-0", children: [swatch && _jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: swatch } }), _jsx("span", { className: "truncate", children: label })] }), count !== undefined && _jsx("span", { className: "text-xs text-text-muted shrink-0", children: count })] }));
 }
 /**
- * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Suggested contacts" (the people the mailbox has corresponded with, when there are any), "Your contact
+ * Contacts' Outlook-style left sidebar: "All contacts" (the mailbox's own and its suggested ones together, when there are suggested ones), "Your contacts" (the mailbox's own, with count), "Favorites", "Suggested contacts" (the people the mailbox has corresponded with, when there are any), "Your contact
  * lists" (real `ContactList` records, fetched here), "Deleted", and "Categories" (derived from the
  * distinct `categories` values across the loaded contacts — no separate category registry exists
  * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
@@ -104,6 +104,6 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
     // A function, not a plain JSX constant — rendered both in the desktop `<nav>` and the mobile
     // `Drawer` (see MailShell/ContactsShell for the identical pattern and the duplicate-id reasoning
     // behind the `idPrefix`).
-    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), suggestedCount !== undefined && (_jsx(NavItem, { label: "Suggested contacts", count: suggestedCount, active: active.type === "suggested", onClick: () => handleSelect({ type: "suggested" }) })), showDeleted && _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
+    const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [suggestedCount !== undefined && (_jsx(NavItem, { label: "All contacts", count: contacts.length + suggestedCount, active: active.type === "everyone", onClick: () => handleSelect({ type: "everyone" }) })), _jsx(NavItem, { label: "Your contacts", count: contacts.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsx(NavItem, { label: "Favorites", count: favoriteCount, active: active.type === "favorites", onClick: () => handleSelect({ type: "favorites" }) }), suggestedCount !== undefined && (_jsx(NavItem, { label: "Suggested contacts", count: suggestedCount, active: active.type === "suggested", onClick: () => handleSelect({ type: "suggested" }) })), showDeleted && _jsx(NavItem, { label: "Deleted", active: active.type === "deleted", onClick: () => handleSelect({ type: "deleted" }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Your contact lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New contact list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] }), categories.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted px-2.5 mb-1", children: "Categories" }), _jsx("div", { className: "flex flex-col gap-0.5", children: categories.map((name) => (_jsx(NavItem, { label: name, swatch: categoryColor(name), active: active.type === "category" && active.name === name, onClick: () => handleSelect({ type: "category", name }) }, name))) })] }))] }));
     return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open contacts menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Contacts", className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Contacts", fullScreen: true, children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }

package/dist/apps/shared/components/contacts/contactCardData.d.ts

@@ -26,8 +26,8 @@ export declare function findContact(folders: readonly Folder[], address: string,
 export declare function loadRecentMessages(mailboxes: readonly Mailbox[], address: string, client?: ApiClient): Promise<Message[]>;
 /** The next `CARD_LIST_SIZE` events within `UPCOMING_DAYS` from `now` that `address` organizes or is invited to, soonest first. */
 export declare function loadUpcomingEvents(folders: readonly Folder[], address: string, now: Date, client?: ApiClient): Promise<CalendarOccurrence[]>;
-/** A vCard attachment's text. */
-export declare function fetchVCardText(attachmentUid: string): Promise<string>;
+/** A vCard attachment's text - through `client` (its origin and token) when given, else the cookie request it always was. */
+export declare function fetchVCardText(attachmentUid: string, client?: ApiClient): Promise<string>;
 /**
  * The vCard of the context message that describes `participant`: the first attachment holding a card with their address, else - only for the
  * message's sender, whose own vCard it presumably is - the first card there is. `undefined` when there is none, and for any failure to read one:

package/dist/apps/shared/components/contacts/contactCardData.js

@@ -63,8 +63,11 @@ export async function loadUpcomingEvents(folders, address, now, client) {
         .sort((a, b) => Date.parse(a.startDate) - Date.parse(b.startDate))
         .slice(0, CARD_LIST_SIZE);
 }
-/** A vCard attachment's text. */
-export async function fetchVCardText(attachmentUid) {
+/** A vCard attachment's text - through `client` (its origin and token) when given, else the cookie request it always was. */
+export async function fetchVCardText(attachmentUid, client) {
+    if (client) {
+        return (await client.fetchBlob(`/mail/attachments/${encodeURIComponent(attachmentUid)}/content`)).text();
+    }
     const res = await fetch(attachmentContentUrl(attachmentUid), { credentials: "include" });
     if (!res.ok) {
         throw new ApiRequestError(res.statusText || "Could not load this contact card.", res.status);
@@ -87,7 +90,7 @@ export async function loadParticipantCard(participant, context, client) {
         const isSender = !!context.message && normalizeAddress(context.message.from.address) === normalizeAddress(participant.address);
         let fallback;
         for (const attachment of await vCardAttachments(context, client)) {
-            const cards = parseVCards(await fetchVCardText(attachment.uid));
+            const cards = parseVCards(await fetchVCardText(attachment.uid, client));
             const match = cardForAddress(cards, participant.address, false);
             if (match) {
                 return match;

package/dist/apps/shared/components/layout/AppShell.js

@@ -44,6 +44,7 @@ import { MailConnectionContext, useMailConnection } from "../../mail/useMailConn
 import { useUnreadTitle } from "../../mail/useUnreadTitle.js";
 import UnlockBridge from "../../mail/outbox/UnlockBridge.js";
 import NotificationCenter from "../../notifications/NotificationCenter.js";
+import CalendarAlarmDialog from "../calendar/CalendarAlarmDialog.js";
 import { useHeaderHeightRef } from "../../notifications/headerOffset.js";
 import NotificationHistoryDialog from "../../notifications/NotificationHistoryDialog.js";
 import { notifySessionExpired, setSignInUrl } from "../../notifications/apiErrors.js";
@@ -128,8 +129,8 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
     const mail = useMailConnection({ userUid, enabled: inFrame, open: navigate });
     // A signing certificate the user asked for is announced when it is issued (or fails), on whichever page they are - see the hook.
     useSigningEnrollmentWatcher({ userUid, mailboxes: mail.mailboxes, enabled: inFrame });
-    // A meeting reminder pops up on whichever page they are - see the hook.
-    useCalendarReminders({ userUid, enabled: inFrame });
+    // An event's alarm raises a modal (drawn by `CalendarAlarmDialog`, below) on whichever page they are - see the hook.
+    const calendarAlarms = useCalendarReminders({ userUid, enabled: inFrame });
     // A refused refresh means the sign-in has ended: open compose windows save what they hold (the access token still works for a while) and the
     // browser goes to sign-in. Not while viewing as another user - the refresh cookie is the admin's own, and refreshing would end the impersonation.
     useSessionRefresh(userUid, authServerUrl, { paused: impersonating, beforeRedirect: () => flushComposeDrafts(LOGOUT_TIMEOUT_MS) });
@@ -277,7 +278,7 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
                                                                     id === active
                                                                         ? "bg-primary/10 text-primary-dark"
                                                                         : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                                                ].join(" "), children: _jsxs("span", { className: "relative inline-flex", children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), _jsx(NavBadge, { count: badge })] }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx("div", { id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
+                                                                ].join(" "), children: _jsxs("span", { className: "relative inline-flex", children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), _jsx(NavBadge, { count: badge })] }) }, id)))] })), !hideChrome && _jsx(BottomTabBar, { apps: apps, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [!hideChrome && !customHeader && (_jsxs("header", { ref: headerRef, className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeLabel }), renderUserMenu("down")] })), _jsx(NotificationCenter, {}), _jsx(CalendarAlarmDialog, { alarms: calendarAlarms }), _jsx("div", { id: "app-content", tabIndex: -1, "aria-busy": busy || undefined, className: ["flex-1 flex min-h-0 outline-none", hideChrome ? "" : "pb-14 md:pb-0"].join(" "), children: children })] })] }), !hideChrome && _jsx(FrameBrandingFooter, { parsed: footer, userMenu: menuInFooter ? renderUserMenu("up") : undefined, appTitle: activeLabel })] }) }) })] }), _jsx(NotificationHistoryDialog, { open: historyOpen, onClose: () => setHistoryOpen(false) })] }) }) }));
 }
 /**
  * What a page's own shell (`MailShell`, `CalendarShell`, ...) renders around its content. Outside the client-side router it