@rapidmx/web-client 0.3.1 → 0.5.0

package/dist/apps/shared/components/mail/compose/composeFlushRegistry.js

@@ -0,0 +1,50 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+const flushers = new Set();
+let signingOut = false;
+/**
+ * Marks the app as signing out (explicitly, or forced by a sign-out in another tab), so compose windows stop
+ * asking the browser to confirm leaving the page - the "Leave site?" prompt would otherwise let the user cancel
+ * the sign-out's own navigation and stay on a page whose session is being ended. Call it before flushing drafts
+ * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all).
+ */
+export function markSigningOut() {
+    signingOut = true;
+}
+/** Undoes `markSigningOut()`. */
+export function clearSigningOut() {
+    signingOut = false;
+}
+/** Whether `markSigningOut()` has been called (and not cleared). */
+export function isSigningOut() {
+    return signingOut;
+}
+/**
+ * Registers an open compose window's draft flush, so leaving the app on purpose (Sign Out) can save the
+ * last edits still waiting on the autosave debounce before the session ends. Returns the unregister
+ * function. Module-level rather than React context: `AppShell` (the sign-out handler) renders the
+ * `ComposeProvider` itself, so it can't read that provider's context.
+ */
+export function registerComposeFlush(flush) {
+    flushers.add(flush);
+    return () => {
+        flushers.delete(flush);
+    };
+}
+/**
+ * Runs every registered flush and waits for all of them, but no longer than `timeoutMs`. Resolves to `true`
+ * only when every window reported its content saved in time (a window whose save failed also shows the user
+ * why, with Discard / Keep editing). Never rejects.
+ */
+export async function flushComposeDrafts(timeoutMs) {
+    let timer;
+    const timeout = new Promise((resolve) => {
+        timer = setTimeout(() => resolve(false), timeoutMs);
+    });
+    const all = Promise.all([...flushers].map((flush) => flush().catch(() => false))).then((results) => results.every((result) => result !== false));
+    const saved = await Promise.race([all, timeout]);
+    clearTimeout(timer);
+    return saved;
+}

package/dist/apps/shared/components/mail/layout/MailShell.js

@@ -14,7 +14,17 @@ import AppShell from "../../layout/AppShell.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { useCompose } from "../compose/ComposeContext.js";
-const MailShellContext = createContext({ mailboxes: [], folders: [] });
+import LocalIndexLifecycle from "../../../search/LocalIndexLifecycle.js";
+/** The well-known mail folder types an "aggregate" pseudo-folder can merge across every accessible
+ * mailbox - a fixed, small set: `outbox` is deliberately excluded (transient per-mailbox send-queue
+ * state, not a "merge across mailboxes" concept), and there's no aggregate concept for `calendar`/
+ * `contacts`/`tasks`/`notes`/`user` folders (Mail's own sidebar already excludes those - see
+ * `MAIL_FOLDER_TYPES`). */
+export const AGGREGATE_FOLDER_TYPES = ["inbox", "sent_items", "drafts", "deleted_items", "junk"];
+function isAggregateFolderType(value) {
+    return !!value && AGGREGATE_FOLDER_TYPES.includes(value);
+}
+const MailShellContext = createContext({ mailboxes: [], mailboxFolders: [] });
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
 export function useMailShell() {
     return useContext(MailShellContext);
@@ -41,6 +51,14 @@ function folderSortKey(folder) {
     const idx = FOLDER_ORDER.indexOf(folder.type);
     return idx === -1 ? FOLDER_ORDER.length : idx;
 }
+function sortedFoldersOf(folders) {
+    return [...folders].sort((a, b) => folderSortKey(a) - folderSortKey(b) || a.name.localeCompare(b.name));
+}
+function aggregateUnreadCount(mailboxFolders, type) {
+    return mailboxFolders.reduce((total, mf) => total + (mf.folders.find((f) => f.type === type)?.unreadCount ?? 0), 0);
+}
+/** Page size of the one `listMailboxes()` call this shell makes. */
+export const MAILBOX_LIST_LIMIT = 100;
 /**
  * A separate component (not inlined into `MailShell`'s own render) so `useCompose()` resolves against
  * `ComposeProvider` correctly: that provider is rendered *inside* the `AppShell` that `MailShell` itself
@@ -48,39 +66,51 @@ function folderSortKey(folder) {
  * own function body would see only whatever context exists *above* `MailShell`, never a provider one of
  * its own descendants creates. This button, rendered as part of `AppShell`'s `children`, sits correctly
  * inside that subtree.
+ *
+ * Opens with no mailbox: a fresh message defaults to the caller's own mailbox, and the compose window's
+ * own From field is where the sender is chosen.
  */
-function ComposeButton({ mailboxUid }) {
+function ComposeButton() {
     const { openCompose } = useCompose();
-    return (_jsx("button", { type: "button", onClick: () => openCompose({ mailboxUid }), className: "block text-center w-full py-2.5 px-4 rounded-sm font-semibold text-sm bg-primary text-white hover:bg-primary-dark", children: "Compose" }));
+    return (_jsx("button", { type: "button", onClick: () => openCompose({}), className: "block text-center w-full py-2.5 px-4 rounded-sm font-semibold text-sm bg-primary text-white hover:bg-primary-dark", children: "Compose" }));
 }
 /**
- * Mail's own contextual sidebar (mailbox switcher + folder tree) + content area, rendered inside the shared
- * `AppShell` chrome (icon rail, header, impersonation banner — see that component). There is no client-side
- * router in this framework (see `ReactRoute`'s file-convention resolver) — the selected mailbox/folder live
- * in the URL's `?mailboxUid=`/`?folderUid=` query params, read once on mount (never during the initial
- * render itself, matching every other query-param reader in this codebase — e.g. `apps/admin/quarantine`'s
- * `readMailboxUid()` — so the server-rendered and just-hydrated client markup match).
+ * Mail's own contextual sidebar (every accessible mailbox's own folder tree, plus a merged "All Mailboxes"
+ * aggregate section) + content area, rendered inside the shared `AppShell` chrome (icon rail, header,
+ * impersonation banner — see that component). There is no client-side router in this framework (see
+ * `ReactRoute`'s file-convention resolver) — the selected mailbox/folder (or aggregate pseudo-folder) live
+ * in the URL's `?mailboxUid=`/`?folderUid=`/`?aggregate=` query params, read once on mount (never during
+ * the initial render itself, matching every other query-param reader in this codebase — e.g.
+ * `apps/admin/quarantine`'s `readMailboxUid()` — so the server-rendered and just-hydrated client markup
+ * match).
+ *
+ * Every accessible mailbox's folder tree renders at once - there is no "switch mailbox" affordance
+ * anymore (the mailbox `<select>` this shell used to have is gone) - so a single-mailbox user sees zero
+ * behavior change from before this, and a multi-mailbox user sees every mailbox's folders (and the new
+ * aggregate section) simultaneously, matching the shared-mailbox feature's own "display as a separate set
+ * of folders" requirement.
  */
 export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [mailboxes, setMailboxes] = useState([]);
-    const [folders, setFolders] = useState([]);
+    const [mailboxFolders, setMailboxFolders] = useState([]);
     const [foldersLoading, setFoldersLoading] = useState(true);
-    const [folderError, setFolderError] = useState(null);
     const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
     const [requestedFolderUid, setRequestedFolderUid] = useState(null);
+    const [requestedAggregateType, setRequestedAggregateType] = useState(null);
     const [drawerOpen, setDrawerOpen] = useState(false);
     useEffect(() => {
         const params = new URLSearchParams(window.location.search);
         setRequestedMailboxUid(params.get("mailboxUid"));
         setRequestedFolderUid(params.get("folderUid"));
+        setRequestedAggregateType(params.get("aggregate"));
     }, []);
     useEffect(() => {
         if (!userUid) {
             return;
         }
-        listMailboxes({ limit: 100 })
+        listMailboxes({ limit: MAILBOX_LIST_LIMIT })
             .then((result) => {
             setMailboxes(result);
             setStatus("ready");
@@ -90,27 +120,54 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
             setStatus("error");
         });
     }, [userUid]);
-    const mailboxUid = (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-        mailboxes[0]?.uid;
+    const aggregateFolderType = isAggregateFolderType(requestedAggregateType)
+        ? requestedAggregateType
+        : undefined;
+    const mailboxUid = aggregateFolderType
+        ? undefined
+        : (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
+            mailboxes[0]?.uid;
+    // Fans out one listFolders() call per accessible mailbox in parallel - each call catches its own
+    // failure into an MailboxFolders.error rather than letting Promise.all reject, so one mailbox's fetch
+    // failure renders that section's own inline Alert instead of blanking out every other mailbox's
+    // folder tree.
     useEffect(() => {
-        if (!mailboxUid) {
-            setFolders([]);
+        if (mailboxes.length === 0) {
+            // Deliberately leaves foldersLoading as-is: this also runs once before listMailboxes() has
+            // resolved, and clearing it here would briefly render an empty sidebar the moment mailboxes
+            // arrive, before their folders do. A genuinely mailbox-less caller gets MailboxProvisioning.
+            setMailboxFolders([]);
             return;
         }
-        setFolderError(null);
         setFoldersLoading(true);
-        listFolders(mailboxUid)
-            .then((result) => setFolders(result.filter((f) => MAIL_FOLDER_TYPES.has(f.type))))
-            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load folders."))
+        void Promise.all(mailboxes.map((mailbox) => listFolders(mailbox.uid)
+            .then((result) => ({ mailbox, folders: result.filter((f) => MAIL_FOLDER_TYPES.has(f.type)) }))
+            .catch((err) => ({
+            mailbox,
+            folders: [],
+            error: err instanceof ApiRequestError ? err.message : "Could not load folders.",
+        }))))
+            .then(setMailboxFolders)
             .finally(() => setFoldersLoading(false));
-    }, [mailboxUid]);
-    const folderUid = (requestedFolderUid && folders.some((f) => f.uid === requestedFolderUid) ? requestedFolderUid : undefined) ??
-        folders.find((f) => f.type === "inbox")?.uid;
-    const contextValue = useMemo(() => ({ mailboxUid, folderUid, mailboxes, folders }), [mailboxUid, folderUid, mailboxes, folders]);
-    const sortedFolders = useMemo(() => [...folders].sort((a, b) => folderSortKey(a) - folderSortKey(b) || a.name.localeCompare(b.name)), [folders]);
-    // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else
-    // for a mailbox-less caller to do here yet, so the icon rail/header/folder tree don't render at all.
-    if (userUid && status === "ready" && !mailboxUid) {
+    }, [mailboxes]);
+    const selectedMailboxFolders = mailboxFolders.find((mf) => mf.mailbox.uid === mailboxUid)?.folders ?? [];
+    const folderUid = aggregateFolderType
+        ? undefined
+        : (requestedFolderUid && selectedMailboxFolders.some((f) => f.uid === requestedFolderUid) ? requestedFolderUid : undefined) ??
+            selectedMailboxFolders.find((f) => f.type === "inbox")?.uid;
+    // The mailbox `KeyEnrollmentGate`/`LocalIndexLifecycle`/`ComposeButton` treat as "the" mailbox when
+    // there's no single selected one to use (aggregate mode) - the caller's own owned mailbox if they
+    // have one, else whichever accessible mailbox happens to be first. See MailShell's own doc comment on
+    // this being an accepted limitation: an aggregate-view message from a *different*, not-yet-visited
+    // mailbox may still need that mailbox's own folder view opened directly to unlock/decrypt it.
+    const defaultMailboxUid = mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
+    const activeMailboxUid = mailboxUid ?? defaultMailboxUid;
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders]);
+    // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else for a
+    // mailbox-less caller to do here yet, so the icon rail/header/folder tree don't render at all. Checks
+    // `mailboxes.length` directly (not `!mailboxUid`) since `mailboxUid` is legitimately undefined in
+    // aggregate mode even with mailboxes present.
+    if (userUid && status === "ready" && mailboxes.length === 0) {
         return _jsx(MailboxProvisioning, {});
     }
     let inner = null;
@@ -125,17 +182,22 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
     else if (userUid && status === "ready") {
         // A function, not a plain JSX constant — it's rendered twice (desktop `<aside>` + mobile
         // `Drawer`), possibly *simultaneously* mounted (the aside is only CSS-hidden below `md`, not
-        // unmounted), so the mailbox-switcher `<select>`'s `id`/its `<label>`'s `htmlFor` need a distinct
-        // value per instance. Two elements sharing one id breaks label association (and is invalid HTML).
-        const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, { mailboxUid: mailboxUid }) }), mailboxes.length > 1 && (_jsxs("div", { className: "px-3 pb-2", children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
-                                window.location.href = `/?mailboxUid=${encodeURIComponent(e.target.value)}`;
-                            }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && (_jsx("div", { className: "px-3 pb-2", children: _jsx(Alert, { children: folderError }) })), _jsx("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-0.5", children: foldersLoading ? (_jsx(SkeletonList, { count: 5, className: "pt-1" })) : (sortedFolders.map((folder) => (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailboxUid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
-                            "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
-                            folder.uid === folderUid
-                                ? "bg-primary/10 text-primary-dark font-semibold"
-                                : "text-text hover:bg-surface-alt",
-                        ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[folder.type] ?? folder.name }), folder.unreadCount > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: folder.unreadCount }))] }, folder.uid)))) })] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", children: _jsx("div", { className: "flex flex-col", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
+        // unmounted).
+        const sidebarContent = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, {}) }), foldersLoading ? (_jsx("div", { className: "flex-1 overflow-y-auto px-3 pb-3", children: _jsx(SkeletonList, { count: 6, className: "pt-1" }) })) : (_jsxs("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-3", children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5", children: "All Mailboxes" }), _jsx("div", { className: "flex flex-col gap-0.5", children: AGGREGATE_FOLDER_TYPES.map((type) => {
+                                        const unread = aggregateUnreadCount(mailboxFolders, type);
+                                        return (_jsxs("a", { href: `/?aggregate=${encodeURIComponent(type)}`, className: [
+                                                "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
+                                                aggregateFolderType === type
+                                                    ? "bg-primary/10 text-primary-dark font-semibold"
+                                                    : "text-text hover:bg-surface-alt",
+                                            ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[type] }), unread > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: unread }))] }, type));
+                                    }) })] })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate", children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: sortedFoldersOf(folders).map((folder) => (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
+                                            "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
+                                            folder.uid === folderUid
+                                                ? "bg-primary/10 text-primary-dark font-semibold"
+                                                : "text-text hover:bg-surface-alt",
+                                        ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[folder.type] ?? folder.name }), folder.unreadCount > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: folder.unreadCount }))] }, folder.uid))) })] }, mailbox.uid)))] }))] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent() }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", children: _jsx("div", { className: "flex flex-col", children: sidebarContent() }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     // Wraps AppShell unconditionally, at a stable tree position regardless of whether mailboxUid has
     // resolved yet - KeyEnrollmentGate itself passes `children` through untouched until a real
@@ -143,6 +205,19 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
     // position) would make AppShell itself remount the moment mailboxUid resolves, tearing down
     // whatever state/effects it had already started (confirmed by direct reproduction: the
     // impersonation banner's own internal state was lost exactly at that transition).
-    const selectedMailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
-    return (_jsx(KeyEnrollmentGate, { mailboxUid: mailboxUid, mailboxAddress: selectedMailbox?.primarySmtpAddress, mailboxKeys: selectedMailbox?.keys, children: _jsx(AppShell, { active: "mail", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }) }));
+    const activeMailbox = mailboxes.find((mb) => mb.uid === activeMailboxUid);
+    return (_jsxs(KeyEnrollmentGate, { mailboxUid: activeMailboxUid, mailboxAddress: activeMailbox?.primarySmtpAddress, mailboxKeys: activeMailbox?.keys, 
+        // Unlocking is only actually required to sign/encrypt a compose, read an already-encrypted
+        // message, or change encryption settings - not merely to open Mail. Those specific call sites
+        // (ComposeWindow, MessageDetailPane) request an unlock on demand via useUnlockPrompt() instead.
+        // First-time provisioning (a mailbox with no vault at all yet) still always blocks - see this
+        // prop's own doc comment on KeyEnrollmentGateProps.
+        blocking: false, 
+        // A shared/delegated mailbox the caller doesn't own is never provisioned from here - its keys
+        // belong to its owner (or its admins), not to whoever happens to open it first - and neither is
+        // the impersonated user's own mailbox: an administrator must never choose its password/recovery codes.
+        canProvision: !impersonating && activeMailbox?.ownerUserUid === userUid, children: [_jsx(LocalIndexLifecycle, { mailboxUid: activeMailboxUid, mailboxKeys: activeMailbox?.keys, folders: mailboxFolders.find((mf) => mf.mailbox.uid === activeMailboxUid)?.folders ?? [], 
+                // A full page may be truncated - pruning against it would delete indexes of accessible mailboxes
+                // beyond the limit, so it's only trusted as the complete list when it came back short.
+                accessibleMailboxUids: status === "ready" && mailboxes.length < MAILBOX_LIST_LIMIT ? mailboxes.map((mb) => mb.uid) : undefined }), _jsx(AppShell, { active: "mail", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner })] }));
 }

package/dist/apps/shared/components/mail/pinnedSigners.js

@@ -0,0 +1,98 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The trusted signing-key fingerprints for a received message's sender, for `evaluateMessageSecurity()`'s
+ * `pinnedSignerFingerprints`: the keys key discovery already pinned on the contacts in the reading mailbox's own
+ * contacts folder(s). Reads only stored contacts - never triggers a Discovery lookup, which must not happen on
+ * message receipt.
+ *
+ * `MessageDetailPane` renders once per opened message (and once per message in a thread), so each mailbox's
+ * contact list is fetched once and reused for `CONTACTS_CACHE_TTL_MS`; a failed load isn't cached. Any failure
+ * leaves the caller with no pins, which `evaluateMessageSecurity()` reports as an unverified signer - never as
+ * verified.
+ *
+ * The cache is dropped (`clearPinnedSignerCache()`) whenever a key session locks (subscribed on first use), on sign-out
+ * (`AppShell`), and after the reader adds, edits or deletes contacts (the contacts pages) - so a contact removed
+ * because its key was revoked doesn't keep vouching for signatures until the TTL runs out.
+ */
+import { PINNED_FINGERPRINT_MAX_PAGES, PINNED_FINGERPRINT_PAGE_SIZE, listContacts, pinnedSigningFingerprintsFor, signerKeyStateFor, } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import { keyPinnedSince } from "../contacts/contactKeys.js";
+import { listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+import { subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
+/** How long one mailbox's loaded contact list is reused before it is fetched again. */
+export const CONTACTS_CACHE_TTL_MS = 60000;
+const contactsCache = new Map();
+/** Forgets every cached contact list - on sign-out, a key-session lock, after the reader changes their contacts, and
+ * in tests. */
+export function clearPinnedSignerCache() {
+    contactsCache.clear();
+}
+let lockSubscribed = false;
+/** Subscribes (once, lazily - a module-level subscription would run in every page that merely imports this) to key
+ * session changes, clearing the cache whenever any mailbox's keys are locked. */
+function subscribeToLocksOnce() {
+    if (lockSubscribed) {
+        return;
+    }
+    lockSubscribed = true;
+    subscribeKeySession((event) => {
+        if (event.state === "locked") {
+            clearPinnedSignerCache();
+        }
+    });
+}
+async function loadMailboxContacts(mailboxUid) {
+    const folders = await listFolders(mailboxUid);
+    const contacts = [];
+    for (const folder of folders.filter((f) => f.type === "contacts")) {
+        for (let page = 0; page < PINNED_FINGERPRINT_MAX_PAGES; page++) {
+            const batch = await listContacts(folder.uid, { limit: PINNED_FINGERPRINT_PAGE_SIZE, page });
+            contacts.push(...batch);
+            if (batch.length < PINNED_FINGERPRINT_PAGE_SIZE) {
+                break;
+            }
+        }
+    }
+    return contacts;
+}
+/** `mailboxUid`'s contacts, from the cache when fresh. Rejects if they can't be loaded. */
+function cachedMailboxContacts(mailboxUid) {
+    subscribeToLocksOnce();
+    let entry = contactsCache.get(mailboxUid);
+    if (!entry || Date.now() - entry.loadedAt > CONTACTS_CACHE_TTL_MS) {
+        const created = { loadedAt: Date.now(), contacts: loadMailboxContacts(mailboxUid) };
+        contactsCache.set(mailboxUid, created);
+        created.contacts.catch(() => {
+            if (contactsCache.get(mailboxUid) === created) {
+                contactsCache.delete(mailboxUid);
+            }
+        });
+        entry = created;
+    }
+    return entry.contacts;
+}
+/** The sender `address`'s pinned signing fingerprints from `mailboxUid`'s contacts. Rejects if they can't be loaded. */
+export async function getPinnedSignerFingerprints(mailboxUid, address) {
+    return pinnedSigningFingerprintsFor(await cachedMailboxContacts(mailboxUid), address);
+}
+/** The sender `address`'s signing-key state from `mailboxUid`'s (cached) contacts, for a "signing key changed" comparison
+ * or to spot a recorded conflict. Reads stored contacts only. Rejects if they can't be loaded. */
+export async function getSignerKeyState(mailboxUid, address) {
+    const contacts = await cachedMailboxContacts(mailboxUid);
+    const state = signerKeyStateFor(contacts, address);
+    const wanted = address.trim().toLowerCase();
+    const matching = contacts.filter((contact) => contact.emails.some((email) => email.address.trim().toLowerCase() === wanted));
+    // `signerKeyStateFor()` keeps the contacts' own key objects, so the holder is found by identity.
+    const pinned = state.pinned[0];
+    const holder = matching.find((candidate) => (candidate.keys ?? []).includes(pinned));
+    const contact = holder ??
+        matching.find((candidate) => (candidate.keyConflicts ?? []).some((conflict) => conflict.useType === "sign")) ??
+        matching[0];
+    return {
+        ...state,
+        ...(contact ? { contactUid: contact.uid } : {}),
+        ...(holder ? { pinnedSince: keyPinnedSince(holder, pinned) } : {}),
+    };
+}

package/dist/apps/shared/components/mail/verificationSeals.js

@@ -0,0 +1,112 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The web client's side of verification seals (`@rapidmx/react-shared`'s `crypto/verificationSeal.ts`): the vault's
+ * current `masterKeyGeneration` a seal is checked and written under, and best-effort seal writes.
+ *
+ * **Vault generation.** `getVaultGeneration()` reads `KeyVault.masterKeyGeneration` once per mailbox and reuses it for
+ * `VAULT_GENERATION_TTL_MS`; a failed read isn't cached. A vault that doesn't report a non-negative integer generation
+ * (a server predating it) counts as unavailable, and callers then evaluate without seals at all. The cache is dropped
+ * whenever a key session locks (subscribed on first use), so a rekey followed by a re-unlock is picked up.
+ *
+ * **Writes.** `sendVerificationSeal()` stores `sealToWrite` with `setMessageVerificationSeal()` and never rejects. Each
+ * message is written at most once per master key generation per page session - a seal carries the time it was built,
+ * so every evaluation of the same message produces a different one, and sending each would only draw 409s. A `409`
+ * (the server kept its seal), `400`, `403` or `404` is final; any other failure (a network error) lets a later
+ * evaluation try again, never a retry loop. A stored seal is remembered (`currentVerificationSeal()`) so a message
+ * reopened before its list copy is refreshed opens that seal instead of building another.
+ */
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { getKeyVault } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
+import { setMessageVerificationSeal } from "@rapidmx/react-shared/mail/mailApi.js";
+/** How long one mailbox's vault generation is reused before it is read again. */
+export const VAULT_GENERATION_TTL_MS = 60000;
+/** Statuses after which a seal write is never attempted again for that message and generation. */
+const FINAL_WRITE_STATUSES = new Set([400, 403, 404, 409]);
+const generationCache = new Map();
+/** `messageUid:generation` for every write sent (or in flight) this session. */
+const attemptedWrites = new Set();
+/** Seals this session stored, by message uid. */
+const storedSeals = new Map();
+let lockSubscribed = false;
+/** Forgets the cached vault generations and this session's seal writes - in tests. */
+export function clearVerificationSealCache() {
+    generationCache.clear();
+    attemptedWrites.clear();
+    storedSeals.clear();
+}
+function subscribeToLocksOnce() {
+    if (lockSubscribed) {
+        return;
+    }
+    lockSubscribed = true;
+    subscribeKeySession((event) => {
+        if (event.state === "locked") {
+            generationCache.clear();
+        }
+    });
+}
+/** Reads `mailboxUid`'s current vault `masterKeyGeneration`, uncached: `undefined` when the vault can't be read or
+ * reports none. Never rejects. */
+export async function readVaultGeneration(mailboxUid) {
+    try {
+        const { masterKeyGeneration } = await getKeyVault(mailboxUid);
+        return Number.isSafeInteger(masterKeyGeneration) && masterKeyGeneration >= 0 ? masterKeyGeneration : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** `mailboxUid`'s current vault `masterKeyGeneration`, or `undefined` when it can't be read. Never rejects. */
+export function getVaultGeneration(mailboxUid) {
+    subscribeToLocksOnce();
+    const entry = generationCache.get(mailboxUid);
+    if (entry && Date.now() - entry.loadedAt <= VAULT_GENERATION_TTL_MS) {
+        return entry.generation;
+    }
+    const created = { loadedAt: Date.now(), generation: readVaultGeneration(mailboxUid) };
+    generationCache.set(mailboxUid, created);
+    void created.generation.then((generation) => {
+        // Only a readable generation is reused; an unavailable one is read again next time.
+        if (generation === undefined && generationCache.get(mailboxUid) === created) {
+            generationCache.delete(mailboxUid);
+        }
+    });
+    return created.generation;
+}
+/** The seal to check `message` against: the one this session stored for it when that is newer than the message's own
+ * copy (which may predate the write), else the message's `verificationSeal`/`verificationSealGeneration`. */
+export function currentVerificationSeal(message) {
+    const stored = storedSeals.get(message.uid);
+    if (stored && (message.verificationSealGeneration === undefined || stored.masterKeyGeneration > message.verificationSealGeneration)) {
+        return { seal: stored.seal, sealGeneration: stored.masterKeyGeneration };
+    }
+    return { seal: message.verificationSeal, sealGeneration: message.verificationSealGeneration };
+}
+/** Whether `sendVerificationSeal()` would still send a seal for `messageUid` at `generation`. */
+export function verificationSealPending(messageUid, generation) {
+    return !attemptedWrites.has(`${messageUid}:${generation}`);
+}
+/** Stores `sealToWrite` on `messageUid`, best effort - see this module's doc comment. Resolves `true` when a request was
+ * sent, `false` when the write was skipped as already attempted. Never rejects. */
+export async function sendVerificationSeal(messageUid, sealToWrite) {
+    const key = `${messageUid}:${sealToWrite.masterKeyGeneration}`;
+    if (attemptedWrites.has(key)) {
+        return false;
+    }
+    attemptedWrites.add(key);
+    try {
+        await setMessageVerificationSeal(messageUid, sealToWrite.seal, sealToWrite.masterKeyGeneration);
+        storedSeals.set(messageUid, sealToWrite);
+    }
+    catch (err) {
+        // `VerificationSealConflictError` is an `ApiRequestError` with status 409.
+        if (!(err instanceof ApiRequestError && FINAL_WRITE_STATUSES.has(err.status))) {
+            attemptedWrites.delete(key);
+        }
+    }
+    return true;
+}

package/dist/apps/shared/components/mail/writableMailboxes.js

@@ -0,0 +1,87 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Which of the caller's accessible mailboxes they can actually create things in (send from, create
+ * events/contacts/to-dos in). `listMailboxes()` returns view-only shares too, and `Mailbox` itself carries
+ * no per-caller access role, so a "viewer" delegate used to be offered mailboxes every create would 403 in.
+ *
+ * The signal: an owned mailbox (or any mailbox, for a trusted caller) is always writable; for any other,
+ * `getMyMailboxAccess()`'s `canCreate` - the server's own ACL evaluation of the exact action a create needs.
+ * One request per mailbox per page load: results are cached in a module-level map, with concurrent callers
+ * sharing one in-flight request. A failure (network, an older server without that route) is "unknown" and
+ * isn't cached: the server still enforces access on the create itself, and hiding a usable mailbox over a
+ * transient error would be worse than offering one that later errors.
+ *
+ * Nothing waits on these checks: pickers list every mailbox straight away and drop view-only ones as each
+ * answer arrives.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { getMyMailboxAccess } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+const inFlight = new Map();
+const settled = new Map();
+/** Forgets every cached answer - for tests, and anything that changes the caller's access mid-session. */
+export function clearMailboxWritabilityCache() {
+    inFlight.clear();
+    settled.clear();
+}
+function isImplicitlyWritable(mailbox, userUid, trusted) {
+    return !!trusted || (!!userUid && mailbox.ownerUserUid === userUid);
+}
+/** The already-known answer for `mailbox`, without making a request. */
+export function peekMailboxWritability(mailbox, userUid, trusted) {
+    return isImplicitlyWritable(mailbox, userUid, trusted) ? true : settled.get(mailbox.uid);
+}
+/** Whether the caller can create items in `mailbox`. Never rejects. */
+export function getMailboxWritability(mailbox, userUid, trusted) {
+    const known = peekMailboxWritability(mailbox, userUid, trusted);
+    if (known !== undefined) {
+        return Promise.resolve(known);
+    }
+    let request = inFlight.get(mailbox.uid);
+    if (!request) {
+        request = getMyMailboxAccess(mailbox.uid).then((access) => {
+            settled.set(mailbox.uid, access.canCreate);
+            inFlight.delete(mailbox.uid);
+            return access.canCreate;
+        }, () => {
+            // Not cached - a later check may succeed.
+            inFlight.delete(mailbox.uid);
+            return undefined;
+        });
+        inFlight.set(mailbox.uid, request);
+    }
+    return request;
+}
+/** Per-mailbox writability answers for `mailboxes`, filled in as each one arrives (already-known answers are
+ * present from the first render). */
+export function useMailboxWritability(mailboxes, userUid, trusted) {
+    const [answers, setAnswers] = useState({});
+    useEffect(() => {
+        let cancelled = false;
+        for (const mailbox of mailboxes) {
+            void getMailboxWritability(mailbox, userUid, trusted).then((writable) => {
+                if (!cancelled) {
+                    setAnswers((prev) => ({ ...prev, [mailbox.uid]: writable }));
+                }
+            });
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxes, userUid, trusted]);
+    return useMemo(() => {
+        const merged = {};
+        for (const mailbox of mailboxes) {
+            merged[mailbox.uid] = answers[mailbox.uid] ?? peekMailboxWritability(mailbox, userUid, trusted);
+        }
+        return merged;
+    }, [answers, mailboxes, userUid, trusted]);
+}
+/** `mailboxes` minus any known to be view-only, always keeping `keepUid` (the picker's current/default value,
+ * so the control never shows a value missing from its own options). Lists everything until told otherwise. */
+export function useWritableMailboxes(mailboxes, userUid, keepUid, trusted) {
+    const writability = useMailboxWritability(mailboxes, userUid, trusted);
+    return useMemo(() => mailboxes.filter((mb) => mb.uid === keepUid || writability[mb.uid] !== false), [mailboxes, writability, keepUid]);
+}