@rapidmx/web-client 0.32.0 → 0.34.0

package/apps/shared/calendar/calendarReminders.ts

@@ -7,7 +7,7 @@
 
 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 const SNOOZE_MS = 5 * 60_000;
 
 /** The payload restapi's `CalendarReminderJob` publishes (`{ eventUid, title, startDate, location }`) as a `"CalendarEvent"`/`"reminder"` push event. */
@@ -49,17 +49,26 @@ export function joinMeetingUrl(location: string | null | undefined): string | un
     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: string): "Join" | "Open" {
+    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: string, startDate: string): string {
+    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: PushEvent): CalendarReminderNotice | undefined {
     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: string, now: number = Date.now()): number {
-    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: string, now: number = Date.now()): string {
     const time = new Date(startDate).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });

package/apps/shared/calendar/useCalendarReminders.ts

@@ -2,14 +2,12 @@
 // 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 { CalendarReminderNotice, 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 { CalendarReminderNotice, SNOOZE_MS, calendarReminderOf, reminderMessage, reminderNotificationId } from "./calendarReminders.js";
 
 export interface UseCalendarRemindersOptions {
     /** Nothing is shown without a signed-in user. */
@@ -18,76 +16,83 @@ export interface UseCalendarRemindersOptions {
     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 function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersOptions): void {
-    useEffect(() => {
-        if (!enabled || !userUid) {
+export function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersOptions): CalendarAlarms {
+    const [queue, setQueue] = useState<CalendarReminderNotice[]>([]);
+    // 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<ReturnType<typeof setTimeout>>());
+
+    const present = useCallback((notice: CalendarReminderNotice) => {
+        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 timers = new Set<ReturnType<typeof setTimeout>>();
+        const id = reminderNotificationId(notice.eventUid, notice.startDate);
+        setQueue((current) => (current.some((queued) => reminderNotificationId(queued.eventUid, queued.startDate) === id) ? current : [...current, notice]));
+        playNotificationSound("calendar");
+    }, []);
 
-        function show(notice: CalendarReminderNotice): void {
-            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);
-                        },
-                    },
-                ],
-            });
+    useEffect(() => {
+        if (!enabled || !userUid) {
+            return;
         }
-
         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/apps/shared/components/admin/diagnostics/SettingsTable.tsx

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useMemo, useState } from "react";
 import Button from "../../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 import type { DiagnosticsSetting } from "./diagnosticsApi.js";
 
 /** How many settings are listed at first, and how many more each "Show more" adds: an environment can be a hundred long. */
@@ -83,9 +84,19 @@ export default function SettingsTable({ title, description, id, settings }: Sett
                         <tbody>
                             {shown.map((item) => (
                                 <tr key={item.name}>
-                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">{item.name}</td>
                                     <td className="py-2 px-2.5 border-b border-border font-mono break-all">
-                                        {item.redacted ? <span className="text-text-muted">{HIDDEN_VALUE}</span> : item.value}
+                                        {item.name}
+                                        <CopyIconButton value={item.name} label={`Copy the name of ${item.name}`} />
+                                    </td>
+                                    <td className="py-2 px-2.5 border-b border-border font-mono break-all">
+                                        {item.redacted ? (
+                                            <span className="text-text-muted">{HIDDEN_VALUE}</span>
+                                        ) : (
+                                            <>
+                                                {item.value}
+                                                <CopyIconButton value={item.value ?? ""} label={`Copy the value of ${item.name}`} />
+                                            </>
+                                        )}
                                     </td>
                                 </tr>
                             ))}

package/apps/shared/components/admin/mailboxes/MailboxTable.tsx

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import { Mailbox } from "../../../../../lib/mail/mailApi.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 
 function formatBytes(bytes: number): string {
     if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(1)} GB`;
@@ -12,6 +13,16 @@ function formatBytes(bytes: number): string {
     return `${bytes} B`;
 }
 
+/** A cell's value with the icon button that copies it. */
+function Copyable({ value, label }: { value: string; label: string }) {
+    return (
+        <span className="inline-flex items-center gap-1">
+            {value}
+            <CopyIconButton value={value} label={label} />
+        </span>
+    );
+}
+
 export interface MailboxTableProps {
     mailboxes: Mailbox[];
 }
@@ -44,17 +55,26 @@ export default function MailboxTable({ mailboxes }: MailboxTableProps) {
                 <tbody>
                     {mailboxes.map((mailbox) => (
                         <tr key={mailbox.uid}>
-                            <td className="py-2.5 px-2.5 border-b border-border align-middle">{mailbox.primarySmtpAddress}</td>
-                            <td className="py-2.5 px-2.5 border-b border-border align-middle">{mailbox.displayName}</td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle">
-                                {mailbox.ownerUserUid ?? (
+                                <Copyable value={mailbox.primarySmtpAddress} label={`Copy the address of ${mailbox.primarySmtpAddress}`} />
+                            </td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">
+                                <Copyable value={mailbox.displayName} label={`Copy the display name of ${mailbox.primarySmtpAddress}`} />
+                            </td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">
+                                {mailbox.ownerUserUid ? (
+                                    <Copyable value={mailbox.ownerUserUid} label={`Copy the owner of ${mailbox.primarySmtpAddress}`} />
+                                ) : (
                                     <span className="inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">
                                         Shared
                                     </span>
                                 )}
                             </td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle">
-                                {formatBytes(mailbox.usedBytes)} / {formatBytes(mailbox.quotaBytes)}
+                                <Copyable
+                                    value={`${formatBytes(mailbox.usedBytes)} / ${formatBytes(mailbox.quotaBytes)}`}
+                                    label={`Copy the quota used of ${mailbox.primarySmtpAddress}`}
+                                />
                             </td>
                             <td className="py-2.5 px-2.5 border-b border-border align-middle text-right">
                                 <a

package/apps/shared/components/admin/settings/DomainDnsSetup.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from "react";
 import { DnsRecordCheck, Domain, getDnsSetup, getDomain, verifyDomain } from "../../../../../lib/admin/domainsApi.js";
 import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
-import CopyButton from "../../../../../lib/components/buttons/CopyButton.js";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
 import { actionErrorMessage } from "../elevation.js";
 
 const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
@@ -51,12 +51,12 @@ function splitSrvValue(value: string): { priority: string; weight: string; port:
     return match ? { priority: match[1], weight: match[2], port: match[3], target: match[4] } : null;
 }
 
-/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a Copy button beside it. */
+/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a copy icon button beside it. */
 function CopyableValue({ value, copyLabel }: { value: string; copyLabel: string }) {
     return (
         <div className="flex items-start gap-2">
             <code className="flex-1 min-w-0 text-xs break-all">{value}</code>
-            <CopyButton value={value} label={copyLabel} />
+            <CopyIconButton value={value} label={copyLabel} className="shrink-0" />
         </div>
     );
 }

package/apps/shared/components/calendar/CalendarAlarmDialog.tsx

@@ -0,0 +1,75 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+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 type { CalendarAlarms } from "../../calendar/useCalendarReminders.js";
+import { useNavigate } from "../../navigation/index.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) {
+    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 (
+        <Modal open onClose={dismiss} title={alarm.title}>
+            <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-1 text-sm">
+                    <p className="font-semibold">{reminderMessage(alarm.startDate)}</p>
+                    {location && <p className="text-text-muted break-words">{location}</p>}
+                    {waiting > 0 && (
+                        <p className="text-xs text-text-muted">
+                            {waiting} more alarm{waiting === 1 ? "" : "s"} after this one
+                        </p>
+                    )}
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        className="!w-auto"
+                        onClick={() => {
+                            navigate(calendarEventHref(alarm.eventUid, alarm.startDate));
+                            dismiss();
+                        }}
+                    >
+                        View
+                    </Button>
+                    {url && (
+                        <Button
+                            type="button"
+                            className="!w-auto"
+                            onClick={() => {
+                                window.open(url, "_blank", "noopener,noreferrer");
+                                dismiss();
+                            }}
+                        >
+                            {locationActionLabel(url)}
+                        </Button>
+                    )}
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={snooze}>
+                        Snooze
+                    </Button>
+                </div>
+                {url && <p className="text-xs text-text-muted">{`${locationActionLabel(url)} opens ${new URL(url).host}`}</p>}
+            </div>
+        </Modal>
+    );
+}

package/apps/shared/components/calendar/EventDetails.tsx

@@ -25,6 +25,7 @@ import { getVideoMeeting } from "../../../../lib/videoconf/videoMeetingsApi.js";
 import { describeTimeZone, deviceTimeZone } from "../../../../lib/util/timeZone.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
 import ParticipantLink from "../contacts/ParticipantLink.js";
 import EventDescriptionView from "./EventDescriptionView.js";
@@ -273,6 +274,15 @@ export default function EventDetails({
                                 </span>
                             )}
                         </div>
+                        {joinUrl && (
+                            // The link itself, for when the button is not enough (a blocked pop-up, a link to open in another browser or share).
+                            <div className="mt-1.5 flex items-center gap-1 min-w-0 text-xs text-text-muted">
+                                <a href={joinUrl} target="_blank" rel="noopener noreferrer" className="break-all underline hover:text-text">
+                                    {joinUrl}
+                                </a>
+                                <CopyIconButton value={joinUrl} label="Copy the video call link" className="shrink-0" />
+                            </div>
+                        )}
                     </DetailRow>
                 )}
 

package/apps/shared/components/calendar/EventFormParts.tsx

@@ -6,6 +6,7 @@ import React, { ReactNode, useRef, useState } from "react";
 import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineMapPin, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark } from "react-icons/hi2";
 import { AttendeeRole, EventVisibility, RecurrenceRule, WeekdayCode } from "../../../../lib/calendar/calendarApi.js";
 import Button from "../../../../lib/components/buttons/Button.js";
+import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
@@ -103,6 +104,15 @@ export function VideoConferencingRow({ c }: { c: EventFormController }) {
                     )}
                 </div>
             )}
+            {c.videoMeetingUid && c.joinUrl && (
+                // The link itself, for when the button is not enough (a blocked pop-up, a link to open in another browser or share).
+                <div className="mb-1 flex items-center gap-1 min-w-0 text-xs text-text-muted">
+                    <a href={c.joinUrl} target="_blank" rel="noopener noreferrer" className="break-all underline hover:text-text">
+                        {c.joinUrl}
+                    </a>
+                    <CopyIconButton value={c.joinUrl} label="Copy the video call link" className="shrink-0" />
+                </div>
+            )}
         </IconRow>
     );
 }

package/apps/shared/components/calendar/MonthView.tsx

@@ -27,15 +27,21 @@ export interface MonthViewProps {
     onSelectSlot?: (start: Date, end: Date, anchor: EventAnchor) => void;
 }
 
-/** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
+/** A real 6-week month grid (Sunday-start), matching Outlook/Gmail's month view. Multi-day and all-day
  * events are shown on every day they cover (see `allDay.ts`'s `occursOnDay`). */
 export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }: MonthViewProps) {
-    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
-    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+    const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 0 });
+    const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 0 });
     const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
 
     return (
-        <div className="flex-1 grid grid-cols-7 grid-rows-6 min-h-0" role="grid" aria-label="Month">
+        <div className="flex-1 grid grid-cols-7 grid-rows-[auto_repeat(6,minmax(0,1fr))] min-h-0" role="grid" aria-label="Month">
+            {days.slice(0, 7).map((day) => (
+                <div key={day.getDay()} role="columnheader" className="px-2 py-1 text-xs font-semibold text-text-muted border-b border-border">
+                    <span className="sm:hidden">{format(day, "EEEEE")}</span>
+                    <span className="hidden sm:inline">{format(day, "EEEE")}</span>
+                </div>
+            ))}
             {days.map((day) => (
                 <DayCell
                     key={day.toISOString()}

package/apps/shared/components/contacts/ContactCard.tsx

@@ -22,6 +22,7 @@ import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
 import { notify } from "../../notifications/store.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { APP_HREFS } from "../../navigation/appHrefs.js";
+import { closeAllOverlays } from "../../../../lib/components/overlays/overlayStack.js";
 import { useCompose } from "../mail/compose/ComposeContext.js";
 import { formatInviteWhen } from "../mail/invite/inviteFormat.js";
 import {
@@ -234,6 +235,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
     }
 
     function handleEmail() {
+        // Every card open, not just this one: it may have been reached from another (a guest of an event), which would stay on screen behind the new window.
+        closeAllOverlays();
         openCompose({ to: formatMailAddress(participant) });
         onClose();
     }
@@ -261,9 +264,8 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
                 {stored && <FavoriteStarButton favorite={!!stored.favorite} disabled={photoBusy} onToggle={() => void handleToggleFavorite(stored)} className="shrink-0 self-start" />}
             </div>
             <div className="mt-4 flex flex-wrap items-center gap-2">
-                <Button type="button" variant="secondary" className={`${ACTION_CLASS} inline-flex items-center gap-1.5`} onClick={handleEmail}>
+                <Button type="button" variant="secondary" aria-label="Email" title="Email" className={`${ACTION_CLASS} inline-flex items-center`} onClick={handleEmail}>
                     <HiOutlineEnvelope aria-hidden="true" className="size-4" />
-                    Email
                 </Button>
                 {stored ? (
                     <a

package/apps/shared/components/contacts/ContactsSidebar.tsx

@@ -13,6 +13,7 @@ import { notifyApiError } from "../../notifications/apiErrors.js";
 export type ContactsView =
     | { type: "all" }
     | { type: "favorites" }
+    | { type: "suggested" }
     | { type: "list"; uid: string; name: string }
     | { type: "deleted" }
     | { type: "category"; name: string };
@@ -49,6 +50,8 @@ export interface ContactsSidebarProps {
     contacts: Contact[];
     active: ContactsView;
     onSelect: (view: ContactsView) => void;
+    /** How many contacts the mailbox's Suggested Contacts folder holds; `undefined` when it has none to show (the folder isn't known), which hides the view. */
+    suggestedCount?: number;
     /** Whether to offer the "Deleted" view - restapi only honors `deleted=true` for a caller with delete and
      * update rights on the mailbox (anyone else silently gets the live contacts), so the parent hides it
      * otherwise. Defaults to `true`. */
@@ -91,13 +94,13 @@ function NavItem({
 }
 
 /**
- * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Your contact
+ * 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
  * 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
  * `ContactsShellContext` itself minimal (mailbox/folder resolution only).
  */
-export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true }: ContactsSidebarProps) {
+export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect, refreshToken, showDeleted = true, suggestedCount }: ContactsSidebarProps) {
     const client = useApiClient();
     const [lists, setLists] = useState<ContactList[]>([]);
     const [listsError, setListsError] = useState<string | null>(null);
@@ -165,6 +168,9 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
             <div className="flex flex-col gap-0.5">
                 <NavItem label="Your contacts" count={contacts.length} active={active.type === "all"} onClick={() => handleSelect({ type: "all" })} />
                 <NavItem label="Favorites" count={favoriteCount} active={active.type === "favorites"} onClick={() => handleSelect({ type: "favorites" })} />
+                {suggestedCount !== undefined && (
+                    <NavItem label="Suggested contacts" count={suggestedCount} active={active.type === "suggested"} onClick={() => handleSelect({ type: "suggested" })} />
+                )}
                 {showDeleted && <NavItem label="Deleted" active={active.type === "deleted"} onClick={() => handleSelect({ type: "deleted" })} />}
             </div>
 

package/apps/shared/components/contacts/ContactsToolbar.tsx

@@ -30,6 +30,8 @@ export interface ContactsToolbarProps {
     onToggleFavorite: () => void;
     onAddCategory: () => void;
     onExportVCard: () => void;
+    /** Turns the selected suggested contacts into contacts of the mailbox. Given only in the Suggested contacts view, which is also the only place the button is offered. */
+    onAddToContacts?: () => void;
     /** A `.vcf` file the user picked via the toolbar's own hidden file input — parsing/import is the
      * page's responsibility (it has the mailbox/folder context and the actual `createContact` calls). */
     onImportFile: (file: File) => void;
@@ -58,6 +60,7 @@ export default function ContactsToolbar({
     onToggleFavorite,
     onAddCategory,
     onExportVCard,
+    onAddToContacts,
     onImportFile,
     shortcuts,
     hideNew,
@@ -91,6 +94,9 @@ export default function ContactsToolbar({
             rank: 3,
         },
         { id: "category", label: "Add category", icon: HiOutlineTag, onClick: onAddCategory, disabled: !hasSelection, group: 2, rank: 2 },
+        ...(onAddToContacts
+            ? [{ id: "addToContacts", label: "Add to contacts", icon: HiOutlineUserPlus, onClick: onAddToContacts, disabled: !hasSelection, group: 1, rank: 7 }]
+            : []),
         { id: "export", label: "Export", icon: HiOutlineArrowUpTray, onClick: onExportVCard, disabled: !hasSelection, group: 3, rank: 1 },
         { id: "import", label: "Import", icon: HiOutlineArrowDownTray, onClick: () => importInputRef.current?.click(), group: 3, rank: 0 },
     ];

package/apps/shared/components/layout/AppShell.tsx

@@ -50,6 +50,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";
@@ -210,8 +211,8 @@ export function AppChrome({
     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.
@@ -459,6 +460,7 @@ export function AppChrome({
                         )}
                         {/* The one pop-up stack for the whole app: right under the header row, so it never covers the account menu. */}
                         <NotificationCenter />
+                        <CalendarAlarmDialog alarms={calendarAlarms} />
                         <div
                             id="app-content"
                             tabIndex={-1}