@rapidmx/web-client 0.32.0 → 0.34.0

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

@@ -10,6 +10,7 @@ import {
     HiOutlineArrowUturnLeft,
     HiOutlineBell,
     HiOutlineBellAlert,
+    HiOutlineSpeakerWave,
     HiOutlineClock,
     HiOutlineCog6Tooth,
     HiOutlineCommandLine,
@@ -34,7 +35,12 @@ import {
     requestDesktopPermission,
     setDesktopOfferDismissed,
 } from "../../mail/newMailNotifications.js";
-import { getNotificationsEnabled, setNotificationsEnabled } from "../../notifications/preferences.js";
+import {
+    getNotificationSoundsEnabled,
+    getNotificationsEnabled,
+    setNotificationSoundsEnabled,
+    setNotificationsEnabled,
+} from "../../notifications/preferences.js";
 import { dismissAll } from "../../notifications/store.js";
 
 export interface UserMenuProps {
@@ -134,6 +140,7 @@ export default function UserMenu({
     const menuRef = useRef<HTMLDivElement>(null);
     const [detectedAdmin, setDetectedAdmin] = useState(false);
     const [popups, setPopups] = useState(true);
+    const [sounds, setSounds] = useState(true);
     const [permission, setPermission] = useState<DesktopPermission>("unsupported");
     const [profile, setProfile] = useState<Profile | undefined>(undefined);
     // Whether the profile lookup has answered, with a profile or without: the fallback names are only worth asking for after that.
@@ -230,10 +237,16 @@ export default function UserMenu({
     useEffect(() => {
         if (open && showNotificationSettings) {
             setPopups(getNotificationsEnabled());
+            setSounds(getNotificationSoundsEnabled());
             setPermission(desktopPermission());
         }
     }, [open, showNotificationSettings]);
 
+    function toggleSounds() {
+        setNotificationSoundsEnabled(!sounds);
+        setSounds(!sounds);
+    }
+
     function togglePopups() {
         setNotificationsEnabled(!popups);
         setPopups(!popups);
@@ -386,6 +399,21 @@ export default function UserMenu({
                             <span className="text-xs font-semibold text-text-muted">{popups ? "On" : "Off"}</span>
                         </button>
                     )}
+                    {showNotificationSettings && (
+                        <button
+                            role="menuitemcheckbox"
+                            aria-checked={sounds}
+                            type="button"
+                            onClick={toggleSounds}
+                            className="flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt"
+                        >
+                            <span className="flex items-center gap-2">
+                                <HiOutlineSpeakerWave size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
+                                Notification sounds
+                            </span>
+                            <span className="text-xs font-semibold text-text-muted">{sounds ? "On" : "Off"}</span>
+                        </button>
+                    )}
                     {showNotificationSettings && permission === "default" && (
                         <button
                             role="menuitem"

package/apps/shared/components/mail/ConversationThreadPane.tsx

@@ -15,7 +15,8 @@ import { ENCRYPTED_SUBJECT_PLACEHOLDER, EncryptedPreview, displaySubject } from
 import { useDecryptedMessages } from "../../mail/decryptedMessages.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import PendingMessageCard from "./reading/PendingMessageCard.js";
-import { InlineComposeSlot, useInlineCompose } from "./compose/ComposeContext.js";
+import { InlineComposeSlot, useCompose, useInlineCompose } from "./compose/ComposeContext.js";
+import { resumeFromDraft } from "./compose/draftResume.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
 import { adoptedOutgoing, belongsToThread, settleOutgoing, useOutgoingReplies } from "../../mail/outbox/outgoingReplies.js";
@@ -206,6 +207,11 @@ export default function ConversationThreadPane({
     // The Reply / Reply all / Forward compose windows of this thread's messages, drawn as cards at the top of the list; the thread's messages are
     // what makes the compose provider open a reply here rather than floating at the bottom right.
     const inlineSessions = useInlineCompose(messages.map((message) => message.uid));
+    const { openCompose } = useCompose();
+    /** The draft this pane has already opened an editor for, so it is opened once per visit - closing the editor leaves the draft as a message to read. */
+    const openedDraftRef = useRef<string | null>(null);
+    const selectedUidRef = useRef(selectedUid);
+    selectedUidRef.current = selectedUid;
 
     // Bumped on every conversation switch - an in-flight load/attachments/mark-read response carrying an
     // older generation belongs to a superseded conversation and is dropped rather than applied.
@@ -291,6 +297,26 @@ export default function ConversationThreadPane({
         setPendingFocusUid([...expanded][expanded.size - 1]);
     }, [conversationId, selectedUid, messages]);
 
+    // A draft the reader opens is edited where it is read: its compose window opens as the card at the top of the thread, with the draft as it was
+    // saved. It is opened once per visit to the draft (an encrypted draft, which only the server holds the ciphertext of, stays a message to read).
+    useEffect(() => {
+        if (openedDraftRef.current !== null && openedDraftRef.current !== selectedUid) {
+            openedDraftRef.current = null;
+        }
+        if (loading || loadedIdRef.current !== conversationId || !selectedUid || openedDraftRef.current === selectedUid) return;
+        const draft = messages.find((message) => message.uid === selectedUid);
+        if (!draft || folders.find((folder) => folder.uid === draft.folderUid)?.type !== "drafts") return;
+        openedDraftRef.current = draft.uid;
+        void resumeFromDraft(draft, client)
+            .then((resume) => {
+                // The reader may have moved on while it loaded.
+                if (resume && selectedUidRef.current === draft.uid) {
+                    openCompose({ mailboxUid: draft.mailboxUid, resume, inlineFor: draft.uid });
+                }
+            })
+            .catch(() => undefined);
+    }, [conversationId, selectedUid, messages, loading, folders]);
+
     useLayoutEffect(() => {
         if (!pendingFocusUid) return;
         // The row is always rendered by now: this runs after the DOM update that added the message it
@@ -301,7 +327,9 @@ export default function ConversationThreadPane({
         // took the app header and the folder rail off the screen - so the adjustment goes on whichever
         // ancestor actually scrolls, exactly as the toggle below already does it. When that is the page
         // itself, nothing inside the pane scrolls and the row is already in view, so it is left alone.
-        const row = rowRefs.current[pendingFocusUid]!;
+        const row = rowRefs.current[pendingFocusUid];
+        // None for a draft opened as the editor card (see the effect above): the card takes the view when it is placed.
+        if (!row) return;
         const scroller = scrollingAncestor(row);
         if (scroller !== document.documentElement) {
             const rect = row.getBoundingClientRect();
@@ -571,6 +599,10 @@ export default function ConversationThreadPane({
                 ))}
                 {messages.map((message) => {
                     const uid = message.uid;
+                    // A draft being edited here is the editor card above, not a message to read as well.
+                    if (inlineSessions.some((session) => session.draftUid === uid)) {
+                        return null;
+                    }
                     const expanded = expandedUids.has(uid);
                     const bodyId = `thread-message-${uid}`;
                     const messageUnread = isUnread(message);

package/apps/shared/components/mail/compose/ComposeContext.tsx

@@ -198,6 +198,8 @@ export interface InlineComposeSession {
     id: string;
     /** The uid of the message the window answers. */
     inlineFor: string;
+    /** The uid of the draft the window continues, when it was opened to edit one: the draft is then the card, not a message beside it. */
+    draftUid?: string;
 }
 
 interface InlineComposeValue {
@@ -258,6 +260,9 @@ export function useCompose(): ComposeContextValue {
  */
 export default function ComposeProvider({ children, userUid, trusted }: PropsWithChildren<{ userUid?: string; trusted?: boolean }>) {
     const [sessions, setSessions] = useState<ComposeSession[]>([]);
+    // The sessions as of the last render, for `openCompose()` to read at the click.
+    const sessionsRef = useRef(sessions);
+    sessionsRef.current = sessions;
     const client = useApiClient();
     const isMobile = useIsMobile();
     const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
@@ -283,7 +288,7 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
     const isInline = (session: ComposeSession) => !!session.inlineFor && !parked.has(session.id) && hosted.has(session.inlineFor);
     const inlineKey = sessions.filter(isInline).map((session) => `${session.id}:${session.inlineFor}`).join("|");
     const inlineSessions = useMemo<InlineComposeSession[]>(
-        () => sessions.filter(isInline).map((session) => ({ id: session.id, inlineFor: session.inlineFor! })),
+        () => sessions.filter(isInline).map((session) => ({ id: session.id, inlineFor: session.inlineFor!, draftUid: session.resume?.draft.uid })),
         [inlineKey],
     );
     const inlineValue = useMemo<InlineComposeValue>(
@@ -354,6 +359,19 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
         resume,
         inlineFor,
     }: OpenComposeInput) {
+        // A draft already being edited has its window: it is brought back to the pane that was holding it rather than opened a second time.
+        const editing = resume && sessionsRef.current.find((session) => session.resume?.draft.uid === resume.draft.uid);
+        if (editing) {
+            setParked((prev) => {
+                if (!prev.has(editing.id)) {
+                    return prev;
+                }
+                const next = new Set(prev);
+                next.delete(editing.id);
+                return next;
+            });
+            return;
+        }
         const id = crypto.randomUUID();
         markComposePhase(id, "click");
         // The window's own element, attached to the page from the start (it is moved to its slot or the stack as soon as that is drawn).

package/apps/shared/components/mail/compose/draftResume.ts

@@ -0,0 +1,54 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { type Message, type Recipient, type RecipientType, listAttachments } from "../../../../../lib/mail/mailApi.js";
+import { formatMailAddress } from "../../../../../lib/mail/mailAddress.js";
+import type { ApiClient } from "../../../../../lib/util/api.js";
+import type { ResumeCompose } from "../../../mail/outbox/composeBridge.js";
+import { loadOriginalMessage } from "./quotedBody.js";
+
+/** The comma-separated address text a recipient field holds, for the recipients of one type. */
+function recipientText(recipients: Recipient[], type: RecipientType): string {
+    return recipients
+        .filter((recipient) => recipient.type === type)
+        .map((recipient) => formatMailAddress(recipient))
+        .join(", ");
+}
+
+/** Plain text as the HTML paragraphs the editor holds. */
+function textToHtml(text: string): string {
+    const escape = (value: string): string => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return text
+        .split(/\n{2,}/)
+        .map((paragraph) => `<p>${escape(paragraph).replace(/\n/g, "<br>")}</p>`)
+        .join("");
+}
+
+/**
+ * What the compose window needs to continue `draft` - a message in the Drafts folder the reader opened rather than one a window of this tab
+ * saved - read back from the server: its recipients and subject from the record, its body from the server's copy (with its embedded pictures)
+ * and its attachments. `undefined` for a draft that cannot be edited here: an encrypted one holds only its ciphertext, which is never opened.
+ * Never rejects for a body that could not be loaded - the draft then opens with the preview, as a reply's quote does.
+ */
+export async function resumeFromDraft(draft: Message, client?: ApiClient): Promise<ResumeCompose | undefined> {
+    if (draft.encrypted) {
+        return undefined;
+    }
+    const [original, attachments] = await Promise.all([loadOriginalMessage(draft, null), listAttachments(draft.folderUid, draft.uid, client)]);
+    const html =
+        original.body.html !== undefined ? original.body.html : original.body.text !== undefined ? textToHtml(original.body.text) : textToHtml(draft.bodyPreview ?? "");
+    return {
+        draft,
+        mailboxUid: draft.mailboxUid,
+        to: recipientText(draft.recipients, "to"),
+        cc: recipientText(draft.recipients, "cc"),
+        bcc: recipientText(draft.recipients, "bcc"),
+        subject: draft.subject,
+        html,
+        attachments,
+        requestReceipt: !!draft.requestReceipt,
+        signEnabled: false,
+        encryptRequested: false,
+    };
+}

package/apps/shared/notifications/preferences.ts

@@ -34,3 +34,30 @@ export function setNotificationsEnabled(enabled: boolean): void {
         // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
     }
 }
+
+/**
+ * `localStorage` key of the switch for the sounds that go with notifications (a chime for new mail, a bell for a calendar alarm, a buzz for an
+ * error). Absent means on; `"off"` means the user turned them off. Independent of the pop-ups themselves.
+ */
+export const NOTIFICATION_SOUNDS_KEY = "rapidmx-notification-sounds";
+
+/** Whether notification sounds are on (the default). */
+export function getNotificationSoundsEnabled(): boolean {
+    try {
+        return localStorage.getItem(NOTIFICATION_SOUNDS_KEY) !== "off";
+    } catch {
+        return true;
+    }
+}
+
+export function setNotificationSoundsEnabled(enabled: boolean): void {
+    try {
+        if (enabled) {
+            localStorage.removeItem(NOTIFICATION_SOUNDS_KEY);
+        } else {
+            localStorage.setItem(NOTIFICATION_SOUNDS_KEY, "off");
+        }
+    } catch {
+        // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
+    }
+}

package/apps/shared/notifications/sounds.ts

@@ -0,0 +1,135 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { getNotificationSoundsEnabled } from "./preferences.js";
+
+/**
+ * The sounds that go with the app's notifications: a chime for new mail, a bell for a calendar alarm and a low double buzz for an error. They are
+ * made with the Web Audio API as they are played - no audio files to download, cache or ship - so they work offline and cost nothing until used.
+ *
+ * Browsers only let a page make sound after the person has interacted with it; until then the audio context stays suspended and a sound is silently
+ * skipped (it is resumed, and plays from then on, as soon as the page has had a click or a key press). A sound is never an error: whatever
+ * goes wrong with the audio is swallowed. The same sound is not played twice within `MIN_GAP_MS`, so a burst of notifications is one sound, not a clatter.
+ */
+export type NotificationSound = "mail" | "calendar" | "error";
+
+/** The shortest time between two plays of the same sound. */
+export const MIN_GAP_MS = 750;
+
+interface Tone {
+    /** Pitch in Hz at the start. */
+    frequency: number;
+    /** Pitch in Hz at the end, when it slides. */
+    endFrequency?: number;
+    /** Seconds after the sound starts. */
+    start: number;
+    /** Seconds it takes to die away. */
+    duration: number;
+    type: OscillatorType;
+    /** Peak loudness, 0 to 1. */
+    gain: number;
+}
+
+/** A soft two-note rising chime. */
+const CHIME: Tone[] = [
+    { frequency: 1046.5, start: 0, duration: 0.5, type: "sine", gain: 0.16 },
+    { frequency: 1568, start: 0.14, duration: 0.8, type: "sine", gain: 0.14 },
+];
+
+/** A struck bell, twice: a fundamental with the inharmonic partials of a bell, each dying away slowly. */
+const BELL: Tone[] = [0, 0.75].flatMap((start) =>
+    [
+        { ratio: 1, gain: 0.16, duration: 1.4 },
+        { ratio: 2.76, gain: 0.08, duration: 1.0 },
+        { ratio: 5.4, gain: 0.04, duration: 0.7 },
+        { ratio: 8.93, gain: 0.02, duration: 0.4 },
+    ].map<Tone>((partial) => ({ frequency: 880 * partial.ratio, start, duration: partial.duration, type: "sine", gain: partial.gain })),
+);
+
+/** Two short falling buzzes - nothing like the other two. */
+const ERROR: Tone[] = [
+    { frequency: 300, endFrequency: 190, start: 0, duration: 0.2, type: "sawtooth", gain: 0.09 },
+    { frequency: 300, endFrequency: 190, start: 0.26, duration: 0.2, type: "sawtooth", gain: 0.09 },
+];
+
+const SOUNDS: Record<NotificationSound, Tone[]> = { mail: CHIME, calendar: BELL, error: ERROR };
+
+let context: AudioContext | undefined;
+const lastPlayed: Partial<Record<NotificationSound, number>> = {};
+
+function audioContext(): AudioContext | undefined {
+    if (context) {
+        return context;
+    }
+    const Ctor: typeof AudioContext | undefined =
+        typeof window === "undefined" ? undefined : (window.AudioContext ?? (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext);
+    if (!Ctor) {
+        return undefined;
+    }
+    try {
+        context = new Ctor();
+    } catch {
+        return undefined;
+    }
+    return context;
+}
+
+function playTone(audio: AudioContext, tone: Tone): void {
+    const begin = audio.currentTime + tone.start;
+    const end = begin + tone.duration;
+    const oscillator = audio.createOscillator();
+    const volume = audio.createGain();
+    oscillator.type = tone.type;
+    oscillator.frequency.setValueAtTime(tone.frequency, begin);
+    if (tone.endFrequency !== undefined) {
+        oscillator.frequency.exponentialRampToValueAtTime(tone.endFrequency, end);
+    }
+    // A short attack so it doesn't click, then an exponential die-away.
+    volume.gain.setValueAtTime(0.0001, begin);
+    volume.gain.exponentialRampToValueAtTime(tone.gain, begin + 0.01);
+    volume.gain.exponentialRampToValueAtTime(0.0001, end);
+    oscillator.connect(volume);
+    volume.connect(audio.destination);
+    oscillator.start(begin);
+    oscillator.stop(end + 0.05);
+}
+
+/** Plays `sound`, unless the person turned notification sounds off, the same sound just played, or the browser won't make sound yet. Never throws. */
+export function playNotificationSound(sound: NotificationSound, now: number = Date.now()): void {
+    if (!getNotificationSoundsEnabled()) {
+        return;
+    }
+    const last = lastPlayed[sound];
+    if (last !== undefined && now - last < MIN_GAP_MS) {
+        return;
+    }
+    try {
+        const audio = audioContext();
+        if (!audio) {
+            return;
+        }
+        lastPlayed[sound] = now;
+        const play = (): void => {
+            for (const tone of SOUNDS[sound]) {
+                playTone(audio, tone);
+            }
+        };
+        if (audio.state === "suspended") {
+            // Allowed once the page has been interacted with; until then this is refused and the sound is skipped.
+            void audio.resume().then(play, () => undefined);
+        } else {
+            play();
+        }
+    } catch {
+        // Audio is a nicety: a failure to make a sound never reaches the notification.
+    }
+}
+
+/** Forgets the audio context and what was played when - for tests. */
+export function resetNotificationSounds(): void {
+    context = undefined;
+    for (const key of Object.keys(lastPlayed) as NotificationSound[]) {
+        delete lastPlayed[key];
+    }
+}

package/apps/shared/notifications/store.ts

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { getNotificationsEnabled } from "./preferences.js";
+import { playNotificationSound } from "./sounds.js";
 
 /**
  * The app's one notification store: every pop-up - new mail, a failed send, an API error, an expired session - goes through
@@ -390,6 +391,14 @@ export function notify(input: NotifyInput): string {
         emit();
         return id;
     }
+    // What is shown is heard: a chime for new mail, a bell for a calendar notice, a buzz for an error.
+    if (entry.kind === "mail") {
+        playNotificationSound("mail");
+    } else if (entry.kind === "calendar") {
+        playNotificationSound("calendar");
+    } else if (entry.kind === "error") {
+        playNotificationSound("error");
+    }
     const room = visibleCount() < MAX_VISIBLE;
     entries.push(entry);
     if (room) {

package/apps/www/calendar/index.tsx

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { pageTitle } from "../../shared/navigation/pageTitle.js";
+import { useLocation, useNavigate } from "../../shared/navigation/index.js";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DndContext, DragEndEvent, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { HiOutlineBars3, HiOutlinePlus } from "react-icons/hi2";
@@ -28,7 +29,7 @@ import { getPushClient } from "../../../lib/mail/pushClient.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 } from "../../../lib/calendar/recurrence.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 Drawer from "../../../lib/components/overlays/Drawer.js";
@@ -217,13 +218,13 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             return { rangeStart: new Date(-MAX_DATE_MS), rangeEnd: new Date(MAX_DATE_MS), days: [] as Date[] };
         }
         if (view === "month") {
-            const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
-            const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+            const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 0 });
+            const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 0 });
             return { rangeStart: start, rangeEnd: end, days: [] as Date[] };
         }
         if (view === "week") {
-            const start = startOfWeek(viewDate, { weekStartsOn: 1 });
-            const end = endOfWeek(viewDate, { weekStartsOn: 1 });
+            const start = startOfWeek(viewDate, { weekStartsOn: 0 });
+            const end = endOfWeek(viewDate, { weekStartsOn: 0 });
             return { rangeStart: start, rangeEnd: end, days: eachDayOfInterval({ start, end }) };
         }
         if (view === "workWeek") {
@@ -538,6 +539,35 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
         setModal(null);
     }
 
+    // `?event=<uid>&start=<iso>` opens that event's card on the day it is on - where a calendar alarm's View button leads. `start` names which occurrence
+    // of a recurring event. Read from the page's own location, so it also works from the Calendar itself (a shallow navigation), and then taken off the
+    // address so a reload doesn't open it again.
+    const { search: locationSearch } = useLocation();
+    const navigateTo = useNavigate();
+    const openedFromAddressRef = useRef("");
+    useEffect(() => {
+        const params = new URLSearchParams(locationSearch);
+        const eventUid = params.get("event");
+        const wanted = `${eventUid}|${params.get("start")}`;
+        if (!eventUid || openedFromAddressRef.current === wanted) {
+            return;
+        }
+        openedFromAddressRef.current = wanted;
+        const requestedStart = new Date(params.get("start") ?? "");
+        navigateTo("/calendar", { replace: true });
+        getCalendarEvent(eventUid, client)
+            .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];
+                if (match) {
+                    setViewDate(occurrenceDay(match));
+                    openEvent(match);
+                }
+            })
+            .catch((err) => notifyApiError(err, "Couldn't open the event"));
+    }, [locationSearch]);
+
     // Keyboard shortcuts - the toolbar's own actions. (A dialog open - the event editor - silences them.)
     useShortcut(SHORTCUTS.calendar.create, () => openNewEvent(), { enabled: !!mailboxUid && !!folderUid });
     useShortcut(SHORTCUTS.calendar.today, goToday);

package/apps/www/contacts/index.tsx

@@ -11,6 +11,7 @@ import {
     createContact,
     deleteContact,
     listContacts,
+    ensureSuggestedContacts,
     listContactsInFolders,
     listDeletedContacts,
     setContactFavorite,
@@ -91,6 +92,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
     const client = useApiClient();
     const [contacts, setContacts] = useState<Contact[]>([]);
     const [deletedContacts, setDeletedContacts] = useState<Contact[]>([]);
+    // The mailbox's Suggested Contacts folder - the people it has corresponded with - once the server has made it; `null` while unknown (an older server has none).
+    const [suggestedFolderUid, setSuggestedFolderUid] = useState<string | null>(null);
+    const [suggestedContacts, setSuggestedContacts] = useState<Contact[]>([]);
     const [deletedLoading, setDeletedLoading] = useState(false);
     const [deletedError, setDeletedError] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
@@ -121,6 +125,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         }
         setLoading(true);
         setError(null);
+        if (suggestedFolderUid) {
+            void loadSuggested(suggestedFolderUid);
+        }
         return listAllPages((page) => listContacts(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
             .then((result) => {
                 setContacts(result.items);
@@ -134,6 +141,31 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         void reload();
     }, [folderUid]);
 
+    /** Reads the Suggested Contacts folder's contacts. A failure leaves the list as it was. */
+    function loadSuggested(suggestedUid: string): Promise<void> {
+        return listAllPages((page) => listContacts(suggestedUid, { limit: LIST_PAGE_SIZE, page }, client))
+            .then((result) => setSuggestedContacts(result.items))
+            .catch(() => undefined);
+    }
+
+    // Asks the server to turn the people this mailbox has corresponded with into suggested contacts (it does so once for each person, so this is cheap when
+    // nothing is new), then lists them. An older server, or one that refuses, simply has no such view.
+    useEffect(() => {
+        let cancelled = false;
+        // `ContactsShell` only renders this with a resolved mailbox (see the Deleted view's comment above).
+        void ensureSuggestedContacts(mailboxUid!, client)
+            .then(async (result) => {
+                if (!cancelled) {
+                    setSuggestedFolderUid(result.folderUid);
+                    await loadSuggested(result.folderUid);
+                }
+            })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxUid]);
+
     // 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
@@ -196,6 +228,8 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                 return contacts;
             case "favorites":
                 return contacts.filter((c) => c.favorite);
+            case "suggested":
+                return suggestedContacts;
             case "list":
                 return contacts.filter((c) => c.contactListUid === view.uid);
             case "category":
@@ -203,7 +237,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
             case "deleted":
                 return deletedContacts;
         }
-    }, [contacts, deletedContacts, view]);
+    }, [contacts, deletedContacts, suggestedContacts, view]);
 
     const filtered = useMemo(() => {
         const q = query.trim().toLowerCase();
@@ -226,7 +260,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         return arr;
     }, [filtered, sortColumn, sortDesc]);
 
-    const selected = contacts.find((c) => c.uid === selectedUid) ?? null;
+    const selected = contacts.find((c) => c.uid === selectedUid) ?? suggestedContacts.find((c) => c.uid === selectedUid) ?? null;
     const isDeletedView = view.type === "deleted";
     const checkedContacts = sorted.filter((c) => checkedUids.has(c.uid));
     const allChecked = sorted.length > 0 && sorted.every((c) => checkedUids.has(c.uid));
@@ -392,6 +426,36 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         await reload();
     });
 
+    // 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) {
+            try {
+                await createContact(
+                    {
+                        mailboxUid: contact.mailboxUid,
+                        folderUid: folderUid!,
+                        displayName: contact.displayName,
+                        givenName: contact.givenName,
+                        surname: contact.surname,
+                        emails: contact.emails,
+                        phones: contact.phones,
+                        addresses: contact.addresses,
+                        company: contact.company,
+                        jobTitle: contact.jobTitle,
+                        notes: contact.notes,
+                        categories: contact.categories,
+                    },
+                    client,
+                );
+                await deleteContact(contact.uid, contact.version, client);
+            } catch (err) {
+                notifyApiError(err, "Couldn't add some of the contacts");
+            }
+        }
+        setCheckedUids(new Set());
+        await reload();
+    });
+
     function handleExportVCard() {
         downloadTextFile(
             checkedContacts.length === 1 ? `${checkedContacts[0].displayName}.vcf` : "contacts.vcf",
@@ -447,7 +511,14 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         // open-ended, so a column's `overflow` would otherwise never apply); on a phone the whole page scrolls, as it always did. Below `lg` the
         // contacts menu is a drawer (a button above the columns), so the list and the detail pane keep a usable width.
         <div className="flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row md:flex-none md:h-[calc(100dvh_-_var(--rr-header-h,4rem))] md:overflow-hidden">
-            <ContactsSidebar mailboxUid={mailboxUid} contacts={contacts} active={view} onSelect={handleSelectView} showDeleted={canViewDeleted} />
+            <ContactsSidebar
+                mailboxUid={mailboxUid}
+                contacts={contacts}
+                active={view}
+                onSelect={handleSelectView}
+                showDeleted={canViewDeleted}
+                suggestedCount={suggestedFolderUid ? suggestedContacts.length : undefined}
+            />
             <div className="flex-1 min-w-0 min-h-0 flex">
             {/* Hidden on mobile while the "new contact" form (the one form-pane state mobile keeps
                 in-place — see the pane's own comment below) is showing, so the two never compete for the
@@ -469,6 +540,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                     onToggleFavorite={handleToggleFavorite}
                     onAddCategory={handleAddCategory}
                     onExportVCard={handleExportVCard}
+                    onAddToContacts={view.type === "suggested" ? handleAddToContacts : undefined}
                     onImportFile={handleImportFile}
                     shortcuts
                     hideNew={isMobile}

package/apps/www/tasks/index.tsx

@@ -61,7 +61,7 @@ function bucketFor(task: Task, now: Date): Bucket {
     if (isToday(due)) {
         return "Today";
     }
-    if (!isAfter(due, endOfWeek(now, { weekStartsOn: 1 }))) {
+    if (!isAfter(due, endOfWeek(now, { weekStartsOn: 0 }))) {
         return "This Week";
     }
     return "Later";