@rapidmx/web-client 0.36.0 → 0.37.0

package/apps/shared/components/settings/OpenPgpKeySetting.tsx

@@ -0,0 +1,240 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useState } from "react";
+import { type EncryptionPreference, type EndToEndFormat, findActivePublicKey } from "../../../../lib/crypto/keyvaultApi.js";
+import { MIN_EXPORT_PASSPHRASE_LENGTH } from "../../../../lib/crypto/keyExport.js";
+import { exportOpenPgpSecretKey } from "../../../../lib/crypto/openPgpKey.js";
+import { getMailbox, type Mailbox, updateMailbox } from "../../../../lib/mail/mailApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import PolicyLockedNotice from "./PolicyLockedNotice.js";
+import { useSettingsShell } from "./layout/SettingsShell.js";
+
+export interface OpenPgpKeySettingProps {
+    mailbox: Mailbox;
+    /** The caller owns the mailbox and isn't impersonating: only the owner may export its secret key. */
+    canManage: boolean;
+}
+
+const INPUT_CLASS = "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface";
+
+/** How long a download's object URL is kept, since some browsers (WebKit, older Firefox) still read it after the click returns. */
+const DOWNLOAD_URL_LIFETIME_MS = 60_000;
+
+/** Hands `text` to the browser as a file download. */
+function saveText(text: string, filename: string): void {
+    const url = URL.createObjectURL(new Blob([text], { type: "application/pgp-keys" }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), DOWNLOAD_URL_LIFETIME_MS);
+}
+
+/** `preference` advertising `format` - S/MIME is the default, so it is advertised by saying nothing. */
+function withPreferredFormat(preference: EncryptionPreference | undefined, format: EndToEndFormat): EncryptionPreference {
+    const { preferFormat: _previous, ...rest } = preference ?? { preferEncrypt: "nopreference" as const };
+    return format === "openpgp" ? { ...rest, preferFormat: "openpgp" } : rest;
+}
+
+/** A fingerprint in groups of four, for reading aloud. */
+function groupFingerprint(fingerprint: string): string {
+    return fingerprint.toUpperCase().replace(/(.{4})/g, "$1 ").trim();
+}
+
+/**
+ * The mailbox's OpenPGP key (restapi `specs/end-to-end_encryption.md` *OpenPGP Interoperability*): what it is for, its
+ * fingerprint, a download of its public key (to give a correspondent by hand), and an export of its secret key, protected by a
+ * passphrase, for reading this mailbox's OpenPGP mail in another app. Shows nothing while the mailbox has no OpenPGP key.
+ */
+export default function OpenPgpKeySetting({ mailbox, canManage }: OpenPgpKeySettingProps) {
+    const client = useApiClient();
+    const { patchMailbox } = useSettingsShell();
+    const [open, setOpen] = useState(false);
+    const [password, setPassword] = useState("");
+    const [passphrase, setPassphrase] = useState("");
+    const [confirmPassphrase, setConfirmPassphrase] = useState("");
+    const [exporting, setExporting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [format, setFormat] = useState<EndToEndFormat>(mailbox.encryptPreference?.preferFormat === "openpgp" ? "openpgp" : "smime");
+    const [savingFormat, setSavingFormat] = useState(false);
+    const key = findActivePublicKey(mailbox.keys ?? [], "encrypt", "openpgp");
+    if (!key) {
+        return null;
+    }
+    const address = mailbox.primarySmtpAddress;
+
+    function reset() {
+        setOpen(false);
+        setPassword("");
+        setPassphrase("");
+        setConfirmPassphrase("");
+        setError(null);
+    }
+
+    /** Advertises `next` as the format this mailbox would rather receive (restapi *Choosing the format*), to RapidMX servers through
+     * key discovery and the `RapidMX-Key` header. */
+    async function saveFormat(next: EndToEndFormat) {
+        const previous = format;
+        setFormat(next);
+        setSavingFormat(true);
+        try {
+            const write = async (current: Pick<Mailbox, "version" | "encryptPreference">): Promise<Pick<Mailbox, "version" | "encryptPreference">> => {
+                const encryptPreference: EncryptionPreference = withPreferredFormat(current.encryptPreference, next);
+                const saved = await updateMailbox({ uid: mailbox.uid, version: current.version, encryptPreference }, client);
+                return { version: saved.version, encryptPreference: saved.encryptPreference ?? encryptPreference };
+            };
+            let saved: Pick<Mailbox, "version" | "encryptPreference">;
+            try {
+                saved = await write(mailbox);
+            } catch (err) {
+                // Enrolling a key moves the mailbox's version on: read it again and retry once.
+                if (!(err instanceof ApiRequestError && err.status === 409)) {
+                    throw err;
+                }
+                saved = await write(await getMailbox(mailbox.uid, {}, client));
+            }
+            // Kept in the settings shell's copy of the mailbox, which this page is mounted from again on a switch back to it.
+            patchMailbox?.(mailbox.uid, saved);
+        } catch (err) {
+            setFormat(previous);
+            notifyApiError(err, "Couldn't save your preferred encryption format");
+        } finally {
+            setSavingFormat(false);
+        }
+    }
+
+    async function downloadPublicKey() {
+        const { armorPublicKey, readPublicKey } = await import("../../../../lib/crypto/openpgp.js");
+        const certificate = await readPublicKey(key!.publicKey);
+        if (certificate) {
+            saveText(armorPublicKey(certificate), `${address}-openpgp-public.asc`);
+        }
+    }
+
+    async function handleExport(e: React.FormEvent) {
+        e.preventDefault();
+        if (passphrase.length < MIN_EXPORT_PASSPHRASE_LENGTH) {
+            setError(`The file's passphrase must be at least ${MIN_EXPORT_PASSPHRASE_LENGTH} characters.`);
+            return;
+        }
+        if (passphrase !== confirmPassphrase) {
+            setError("The passphrases don't match.");
+            return;
+        }
+        setExporting(true);
+        setError(null);
+        try {
+            const { armored } = await exportOpenPgpSecretKey(mailbox.uid, password, passphrase, client);
+            saveText(armored, `${address}-openpgp-secret.asc`);
+            reset();
+        } catch (err) {
+            if (err instanceof ApiRequestError) {
+                notifyApiError(err, "Couldn't export your OpenPGP key");
+            } else {
+                setError("Incorrect password.");
+            }
+        } finally {
+            setExporting(false);
+        }
+    }
+
+    return (
+        <div>
+            <h2 className="text-sm font-semibold mb-2">OpenPGP key</h2>
+            <p className="text-sm text-text-muted mb-2">
+                People who use Proton Mail, Thunderbird or another OpenPGP app can send you encrypted mail with this key, and you can
+                send it to them. RapidMX publishes it for you; you can also give it to someone yourself. RapidMX uses S/MIME whenever a
+                recipient can receive it.
+            </p>
+            <p className="text-sm mb-2">
+                Fingerprint: <code className="text-xs break-all">{groupFingerprint(key.fingerprint)}</code>
+            </p>
+            <fieldset className="mb-3" disabled={!canManage || savingFormat}>
+                <legend className="text-sm font-semibold mb-1">Preferred format</legend>
+                <p className="text-xs text-text-muted mb-1">
+                    What other RapidMX servers use to encrypt to you when they could use either. Choose OpenPGP if you mostly read this
+                    mailbox in an OpenPGP app.
+                </p>
+                {(
+                    [
+                        ["smime", "S/MIME (recommended)"],
+                        ["openpgp", "OpenPGP"],
+                    ] as const
+                ).map(([value, label]) => (
+                    <label key={value} className="flex items-center gap-2 text-sm">
+                        <input type="radio" name={`preferred-format-${mailbox.uid}`} checked={format === value} onChange={() => void saveFormat(value)} />
+                        {label}
+                    </label>
+                ))}
+            </fieldset>
+            <div className="flex flex-wrap gap-2 mb-2">
+                <Button type="button" variant="secondary" className="!w-auto" onClick={() => void downloadPublicKey()}>
+                    Download public key
+                </Button>
+                {canManage && !open && (
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setOpen(true)}>
+                        Export secret key&hellip;
+                    </Button>
+                )}
+            </div>
+            {!canManage ? (
+                <PolicyLockedNotice>Only this mailbox&rsquo;s owner, signed in as themselves, can export its secret key.</PolicyLockedNotice>
+            ) : (
+                open && (
+                    <form onSubmit={(e) => void handleExport(e)} className="flex flex-col gap-2">
+                        <p className="text-sm text-text-muted">
+                            Anyone with the exported file and its passphrase can read this mailbox&rsquo;s OpenPGP mail and sign as you.
+                        </p>
+                        <input
+                            type="password"
+                            aria-label="Encryption password"
+                            placeholder="Encryption password"
+                            className={INPUT_CLASS}
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            disabled={exporting}
+                            autoComplete="current-password"
+                        />
+                        <input
+                            type="password"
+                            aria-label="Key passphrase"
+                            placeholder={`Key passphrase (at least ${MIN_EXPORT_PASSPHRASE_LENGTH} characters)`}
+                            className={INPUT_CLASS}
+                            value={passphrase}
+                            onChange={(e) => setPassphrase(e.target.value)}
+                            disabled={exporting}
+                            autoComplete="new-password"
+                        />
+                        <input
+                            type="password"
+                            aria-label="Confirm key passphrase"
+                            placeholder="Confirm key passphrase"
+                            className={INPUT_CLASS}
+                            value={confirmPassphrase}
+                            onChange={(e) => setConfirmPassphrase(e.target.value)}
+                            disabled={exporting}
+                            autoComplete="new-password"
+                        />
+                        {error && <Alert>{error}</Alert>}
+                        <div className="flex gap-2">
+                            <Button type="submit" className="!w-auto" loading={exporting} disabled={exporting || !password}>
+                                Export
+                            </Button>
+                            <Button type="button" variant="secondary" className="!w-auto" onClick={reset} disabled={exporting}>
+                                Cancel
+                            </Button>
+                        </div>
+                    </form>
+                )
+            )}
+        </div>
+    );
+}

package/apps/shared/components/settings/ZeroAccessSetting.tsx

@@ -8,7 +8,12 @@ import { getMailbox, type Mailbox, updateMailbox } from "../../../../lib/mail/ma
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
+import { useSettingsShell } from "./layout/SettingsShell.js";
 import PolicyLockedNotice from "./PolicyLockedNotice.js";
+import ZeroAccessTypes from "./ZeroAccessTypes.js";
+
+/** The data types this client can protect with zero-access encryption - each joins as its protection is implemented end to end. */
+export const ZERO_ACCESS_SUPPORTED_TYPES = ["mail", "calendar", "contacts", "tasks"] as const;
 
 /** Why zero-access encryption can't be changed here, when it can't - mirrors restapi's `ZeroAccessStatus` reasons that the user can't fix
  * by ticking the box. */
@@ -28,6 +33,7 @@ export interface ZeroAccessSettingProps {
  */
 export default function ZeroAccessSetting({ mailbox, canManage }: ZeroAccessSettingProps) {
     const client = useApiClient();
+    const { patchMailbox } = useSettingsShell();
     const [enabled, setEnabled] = useState(mailbox.zeroAccessEnabled !== false);
     const [blocker, setBlocker] = useState<Blocker | null | undefined>(undefined);
     const [saving, setSaving] = useState(false);
@@ -57,16 +63,20 @@ export default function ZeroAccessSetting({ mailbox, canManage }: ZeroAccessSett
         setEnabled(next);
         try {
             const write = (version: number) => updateMailbox({ uid: mailbox.uid, version, zeroAccessEnabled: next }, client);
+            let saved: Mailbox;
             try {
-                await write(mailbox.version);
+                saved = await write(mailbox.version);
             } catch (err) {
                 // Enrolling a key (which happens on unlock) moves the mailbox's version on, so the copy this page was given may be
                 // behind: read it again and retry once.
                 if (!(err instanceof ApiRequestError && err.status === 409)) {
                     throw err;
                 }
-                await write((await getMailbox(mailbox.uid, {}, client)).version);
+                saved = await write((await getMailbox(mailbox.uid, {}, client)).version);
             }
+            // The server's answer: turning it on decides every type the owner left undecided (restapi `settleZeroAccessTypes()`), which
+            // "What to protect" then shows.
+            patchMailbox?.(mailbox.uid, { zeroAccessEnabled: next, zeroAccessTypes: saved.zeroAccessTypes ?? mailbox.zeroAccessTypes, version: saved.version });
         } catch (err) {
             setEnabled(previous);
             notifyApiError(err, "Couldn't save the zero-access encryption setting");
@@ -97,6 +107,7 @@ export default function ZeroAccessSetting({ mailbox, canManage }: ZeroAccessSett
                     </span>
                 </span>
             </label>
+            {!locked && enabled && <ZeroAccessTypes mailbox={mailbox} types={ZERO_ACCESS_SUPPORTED_TYPES} canManage={canManage} disabled={saving} />}
             {blocker === "disabled_by_admin" && (
                 <PolicyLockedNotice>
                     Your administrator has turned off zero-access encryption for this server, so new mail is stored without it. Mail

package/apps/shared/components/settings/ZeroAccessTypes.tsx

@@ -0,0 +1,175 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useState } from "react";
+import { getMailbox, type Mailbox, updateMailbox, type ZeroAccessDataType, type ZeroAccessTypes as ChosenTypes } from "../../../../lib/mail/mailApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import { useSettingsShell } from "./layout/SettingsShell.js";
+
+/** What each data type's protection covers, what stays readable and why, and what it breaks on a phone or Outlook - the copy restapi
+ * `specs/search.md` §3 *What It Covers* requires settings to state plainly. */
+export const ZERO_ACCESS_TYPE_INFO: Record<ZeroAccessDataType, { label: string; encrypted: string; readable: string; onDevices: string }> = {
+    mail: {
+        label: "Mail",
+        encrypted: "Message bodies, subjects, previews and attachments",
+        readable: "Sender, recipients, dates, size, flags and folder - to deliver, thread and search your mail",
+        onDevices: "can't open protected mail until you install your exported keys on it (Export keys below)",
+    },
+    calendar: {
+        label: "Calendar",
+        encrypted: "Event titles, locations and descriptions",
+        readable: "Times, repeats, time zone, attendees, responses and busy status - for free/busy, invitations and reminders",
+        onDevices:
+            "shows protected events only as busy blocks named “Protected event”, and attendees aren't told when it changes a meeting (a phone) or sends one (Outlook) - send those from RapidMX",
+    },
+    contacts: {
+        label: "Contacts",
+        encrypted: "Names, company, job title, phone numbers, postal addresses, notes, categories and photos",
+        readable: "Email addresses - the server needs them to deliver mail and to find each contact's encryption keys",
+        onDevices: "shows protected contacts by their email address only",
+    },
+    tasks: {
+        label: "Tasks",
+        encrypted: "Task titles and notes",
+        readable: "Due dates, reminders, priority, completion and list",
+        onDevices: "shows protected tasks as “Protected task”",
+    },
+};
+
+/** Whether `type` is included: the owner's choice, else (undecided) mail on and the rest off - restapi's `zeroAccessTypeIncluded()`. */
+export function typeIncluded(types: ChosenTypes | undefined, type: ZeroAccessDataType): boolean {
+    const chosen = types?.[type];
+    return typeof chosen === "boolean" ? chosen : type === "mail";
+}
+
+/** The names of the owner's ActiveSync devices that sync `type`, and Outlook when it syncs the mailbox. */
+export function devicesSyncing(mailbox: Pick<Mailbox, "syncClients">, type: ZeroAccessDataType): string[] {
+    const names = (mailbox.syncClients?.activesync?.devices ?? []).filter((device) => device.types.includes(type)).map((device) => device.model || "A phone");
+    return [...new Set(names), ...(mailbox.syncClients?.mapi ? ["Outlook"] : [])];
+}
+
+export interface ZeroAccessTypesProps {
+    mailbox: Mailbox;
+    /** The data types this client can protect, in order - each one's switch appears once its protection is implemented. */
+    types: readonly ZeroAccessDataType[];
+    /** The owner, not impersonating: only they change it. */
+    canManage: boolean;
+    /** Zero-access is being turned on: the server is still deciding the undecided types, so nothing is changed before it has. */
+    disabled?: boolean;
+}
+
+/**
+ * "What to protect": one switch per data type zero-access encryption covers, each saying what it encrypts and - for a type one of the
+ * owner's ActiveSync devices or Outlook syncs - plainly what that device will no longer show (restapi `specs/search.md` §3 *What It
+ * Covers*). Then the table of what stays readable to the server and why.
+ */
+export default function ZeroAccessTypes({ mailbox, types, canManage, disabled = false }: ZeroAccessTypesProps) {
+    const client = useApiClient();
+    const { patchMailbox } = useSettingsShell();
+    const [chosen, setChosen] = useState<ChosenTypes>(mailbox.zeroAccessTypes ?? {});
+    const [saving, setSaving] = useState(false);
+    // What the server saved, once the mailbox has it (turning zero-access on decides the undecided types there): shown instead of what this
+    // was mounted with - set while rendering, so the stale switches are never drawn.
+    const storedTypes = JSON.stringify(mailbox.zeroAccessTypes ?? {});
+    const [shownTypes, setShownTypes] = useState(storedTypes);
+    if (shownTypes !== storedTypes) {
+        setShownTypes(storedTypes);
+        setChosen(JSON.parse(storedTypes) as ChosenTypes);
+    }
+
+    async function save(type: ZeroAccessDataType, on: boolean) {
+        const previous = chosen;
+        const next = { ...chosen, [type]: on };
+        setChosen(next);
+        setSaving(true);
+        try {
+            const write = (version: number) => updateMailbox({ uid: mailbox.uid, version, zeroAccessTypes: { [type]: on } }, client);
+            let saved: Mailbox;
+            try {
+                saved = await write(mailbox.version);
+            } catch (err) {
+                // The server records devices on the mailbox, moving its version on: read it again and retry once.
+                if (!(err instanceof ApiRequestError && err.status === 409)) {
+                    throw err;
+                }
+                saved = await write((await getMailbox(mailbox.uid, {}, client)).version);
+            }
+            // Kept by the shell, so turning zero-access off and on again (which mounts this anew) shows what was saved: the server's merge of
+            // this choice into the stored one.
+            const merged = saved.zeroAccessTypes ?? next;
+            setChosen(merged);
+            patchMailbox?.(mailbox.uid, { zeroAccessTypes: merged, version: saved.version });
+        } catch (err) {
+            setChosen(previous);
+            notifyApiError(err, "Couldn't save what zero-access encryption protects");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="mt-3">
+            <h3 className="text-sm font-semibold mb-1">What to protect</h3>
+            <ul className="flex flex-col gap-2">
+                {types.map((type) => {
+                    const info = ZERO_ACCESS_TYPE_INFO[type];
+                    const devices = devicesSyncing(mailbox, type);
+                    const on = typeIncluded(chosen, type);
+                    const keyInstalled = type === "mail" && !!mailbox.zeroAccessKeysExportedAt;
+                    return (
+                        <li key={type}>
+                            <label className="flex items-start gap-2 text-sm">
+                                <input
+                                    type="checkbox"
+                                    className="mt-1"
+                                    checked={on}
+                                    disabled={!canManage || saving || disabled}
+                                    onChange={(e) => void save(type, e.target.checked)}
+                                />
+                                <span>
+                                    <span className="font-semibold block">{info.label}</span>
+                                    <span className="text-xs text-text-muted block">{info.encrypted}.</span>
+                                    {devices.length > 0 && !keyInstalled && (
+                                        <span role={on ? "alert" : undefined} className={`text-xs block ${on ? "text-danger" : "text-text-muted"}`}>
+                                            {on ? "Breaks: " : "Left off because "}
+                                            {devices.join(", ")} {devices.length === 1 ? "syncs" : "sync"} this - {on ? "it " : "protected, it "}
+                                            {info.onDevices}.
+                                        </span>
+                                    )}
+                                </span>
+                            </label>
+                        </li>
+                    );
+                })}
+            </ul>
+            <details className="mt-3 text-sm">
+                <summary className="cursor-pointer font-semibold">What&rsquo;s encrypted, and what isn&rsquo;t</summary>
+                <table className="mt-2 w-full text-xs border-collapse">
+                    <thead>
+                        <tr className="text-left">
+                            <th className="py-1 pr-2">Type</th>
+                            <th className="py-1 pr-2">Encrypted</th>
+                            <th className="py-1">Readable by the server, and why</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {types.map((type) => (
+                            <tr key={type} className="border-t border-border align-top">
+                                <td className="py-1 pr-2 font-semibold">{ZERO_ACCESS_TYPE_INFO[type].label}</td>
+                                <td className="py-1 pr-2">{typeIncluded(chosen, type) ? ZERO_ACCESS_TYPE_INFO[type].encrypted : "Nothing - not protected"}</td>
+                                <td className="py-1">{ZERO_ACCESS_TYPE_INFO[type].readable}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+                <p className="mt-2 text-xs text-text-muted">
+                    For every type, the server can also see folder and list names, how many items there are and when they change. Zero-access
+                    encryption protects what is stored: the server sees what you save while it saves it, then keeps only the encrypted copy.
+                </p>
+            </details>
+        </div>
+    );
+}

package/apps/shared/components/settings/layout/SettingsShell.tsx

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { createContext, PropsWithChildren, ReactNode, useContext, useEffect, useMemo, useState } from "react";
+import React, { createContext, PropsWithChildren, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import type { IconType } from "react-icons";
 import {
     HiOutlineArrowUturnLeft,
@@ -82,6 +82,9 @@ export interface SettingsShellContextValue {
      * every settings section so far (Automatic Replies) edits mailbox-scoped fields. */
     mailboxUid?: string;
     mailboxes: Mailbox[];
+    /** Merges what a section just saved of a mailbox (its new `version` included) into the shell's copy, so a section mounted again for
+     * it - after the mailbox switcher, say - starts from what was saved rather than from the list loaded once. */
+    patchMailbox?: (mailboxUid: string, patch: Partial<Mailbox>) => void;
 }
 
 const SettingsShellContext = createContext<SettingsShellContextValue>({ mailboxes: [] });
@@ -151,7 +154,11 @@ export default function SettingsShell({
         (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
         primaryMailboxUid(mailboxes, userUid);
 
-    const contextValue = useMemo<SettingsShellContextValue>(() => ({ mailboxUid, mailboxes }), [mailboxUid, mailboxes]);
+    const patchMailbox = useCallback(
+        (uid: string, patch: Partial<Mailbox>) => setMailboxes((list) => list.map((mb) => (mb.uid === uid ? { ...mb, ...patch } : mb))),
+        [],
+    );
+    const contextValue = useMemo<SettingsShellContextValue>(() => ({ mailboxUid, mailboxes, patchMailbox }), [mailboxUid, mailboxes, patchMailbox]);
 
     // A full-screen takeover, not nested inside the rest of the app's chrome — same as ContactsShell/
     // TasksShell, there's nothing else for a mailbox-less caller to configure here yet.