@rapidmx/web-client 0.3.0 → 0.4.0

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

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
+import { HiOutlineLockClosed } from "react-icons/hi2";
 import DOMPurify from "dompurify";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { approveReceipt, archiveMessage, attachmentContentUrl, cancelScheduledSend, classifyMessage, declineReceipt, getMessageRawContent, recallMessage, setMessageLabels, } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -12,6 +13,8 @@ import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
 import { evaluateMessageSecurity } from "@rapidmx/react-shared/crypto/messageSecurity.js";
 import { isLikelyMailingList } from "@rapidmx/react-shared/crypto/composeSecurity.js";
 import { useCompose } from "./compose/ComposeContext.js";
+import { useMailShell } from "./layout/MailShell.js";
+import { useUnlockPrompt } from "../layout/UnlockPromptProvider.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
@@ -68,6 +71,12 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
     const [receiptBusy, setReceiptBusy] = useState(null);
     const [receiptError, setReceiptError] = useState(null);
     const [security, setSecurity] = useState(null);
+    const { mailboxes } = useMailShell();
+    const { requestUnlock } = useUnlockPrompt();
+    // Bumped after a successful on-demand unlock to re-run the effect below - it's not a dependency the
+    // effect could read reactively otherwise (getUnlockedKeys() is a plain module-level read, not React
+    // state; see keySession.ts's own doc comment).
+    const [unlockRefresh, setUnlockRefresh] = useState(0);
     // Evaluates every message's security state, not just ones flagged `encrypted` - a detached
     // `multipart/signed` message needs its raw MIME read too (a sanitized HTML body never carries the
     // signature part) to tell "Signed & verified" apart from plain "Unprotected". A fetch/parse failure
@@ -95,7 +104,23 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
         return () => {
             cancelled = true;
         };
-    }, [message?.uid]);
+    }, [message?.uid, unlockRefresh]);
+    // Offered only when this device genuinely has no unlocked session for this message's mailbox at all
+    // (as opposed to being unlocked but still unable to decrypt - a wrong/since-rotated key, which
+    // re-unlocking the same session can't fix) - see `evaluateMessageSecurity()`'s own doc comment on why
+    // `decryptError` alone can't distinguish those two cases.
+    async function handleUnlockToView() {
+        // Only reachable via the button below, which never renders while `message` is null.
+        const mailboxUid = message.mailboxUid;
+        const mailboxKeys = mailboxes.find((mb) => mb.uid === mailboxUid)?.keys ?? [];
+        try {
+            await requestUnlock(mailboxUid, mailboxKeys);
+            setUnlockRefresh((n) => n + 1);
+        }
+        catch {
+            // User dismissed the unlock dialog - security state stays exactly as it was.
+        }
+    }
     if (!message) {
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a message to read it." });
     }
@@ -245,7 +270,7 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
                             .filter((l) => !!l)
                             .map((l) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt", children: [_jsx("span", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: l.color ?? "#6366f1" } }), l.name] }, l.uid))) })), isInbox && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2", children: [_jsx(Button, { type: "button", variant: "text", loading: classifying, disabled: classifying, onClick: () => handleClassify(message.inferenceClassification === "other" ? "focused" : "other"), children: message.inferenceClassification === "other" ? "Move to Focused" : "Move to Other" }), _jsxs("label", { className: "flex items-center gap-1.5 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: alwaysForSender, onChange: (e) => setAlwaysForSender(e.target.checked) }), "Always for this sender"] })] })), classifyError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: classifyError }) })), ["delivery", "read"]
                         .filter((type) => (type === "delivery" ? message.deliveryReceiptPending : message.readReceiptPending))
-                        .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [message.from.displayName || message.from.address, " requested a ", type, " receipt for this message."] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: receiptBusy === type, disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "approve"), children: "Send receipt" }), _jsx(Button, { type: "button", variant: "text", disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "decline"), children: "Decline" })] }, type))), receiptError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: receiptError }) })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 mt-3", children: attachments.map((attachment) => (_jsx("li", { children: _jsxs("a", { href: attachmentContentUrl(attachment.uid), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: [attachment.filename, " (", formatBytes(attachment.sizeBytes), ")"] }) }, attachment.uid))) }))] }), security?.decryptError && (_jsx("div", { className: "px-4 pt-2", children: _jsx(Alert, { children: security.decryptError }) })), security?.html !== undefined ? (_jsx("iframe", { title: message.subject || "Message content", srcDoc: DOMPurify.sanitize(security.html), sandbox: "", className: "flex-1 w-full border-0" }, message.uid)) : (_jsx("iframe", { title: message.subject || "Message content", src: `/api/mail/messages/${encodeURIComponent(message.uid)}/content`, sandbox: "", className: "flex-1 w-full border-0" }, message.uid)), _jsxs(Modal, { open: confirming, onClose: () => setConfirming(false), title: "Recall this message?", children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: "This asks every original recipient's mail system to delete their copy, but only if it's still unread there \u2014 there's no way to guarantee it, and no confirmation once it either succeeds or fails. Recipients who already read the message will keep it." }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", loading: recalling, disabled: recalling, onClick: handleRecall, className: "!w-auto", children: "Recall message" }), _jsx(Button, { type: "button", variant: "secondary", disabled: recalling, onClick: () => setConfirming(false), className: "!w-auto", children: "Cancel" })] })] }), _jsxs(Modal, { open: labelsOpen, onClose: () => setLabelsOpen(false), title: "Labels", children: [labelsError && _jsx(Alert, { children: labelsError }), _jsx("ul", { className: "flex flex-col gap-1", children: (labels ?? []).map((l) => {
+                        .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [message.from.displayName || message.from.address, " requested a ", type, " receipt for this message."] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: receiptBusy === type, disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "approve"), children: "Send receipt" }), _jsx(Button, { type: "button", variant: "text", disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "decline"), children: "Decline" })] }, type))), receiptError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: receiptError }) })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 mt-3", children: attachments.map((attachment) => (_jsx("li", { children: _jsxs("a", { href: attachmentContentUrl(attachment.uid), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: [attachment.filename, " (", formatBytes(attachment.sizeBytes), ")"] }) }, attachment.uid))) }))] }), security?.decryptError && (_jsxs("div", { className: "px-4 pt-2", children: [_jsx(Alert, { children: security.decryptError }), message && !getUnlockedKeys(message.mailboxUid) && (_jsxs("button", { type: "button", onClick: handleUnlockToView, className: "mt-1.5 inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to view this message"] }))] })), security?.html !== undefined ? (_jsx("iframe", { title: message.subject || "Message content", srcDoc: DOMPurify.sanitize(security.html), sandbox: "", className: "flex-1 w-full border-0" }, message.uid)) : (_jsx("iframe", { title: message.subject || "Message content", src: `/api/mail/messages/${encodeURIComponent(message.uid)}/content`, sandbox: "", className: "flex-1 w-full border-0" }, message.uid)), _jsxs(Modal, { open: confirming, onClose: () => setConfirming(false), title: "Recall this message?", children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: "This asks every original recipient's mail system to delete their copy, but only if it's still unread there \u2014 there's no way to guarantee it, and no confirmation once it either succeeds or fails. Recipients who already read the message will keep it." }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", loading: recalling, disabled: recalling, onClick: handleRecall, className: "!w-auto", children: "Recall message" }), _jsx(Button, { type: "button", variant: "secondary", disabled: recalling, onClick: () => setConfirming(false), className: "!w-auto", children: "Cancel" })] })] }), _jsxs(Modal, { open: labelsOpen, onClose: () => setLabelsOpen(false), title: "Labels", children: [labelsError && _jsx(Alert, { children: labelsError }), _jsx("ul", { className: "flex flex-col gap-1", children: (labels ?? []).map((l) => {
                             const checked = message.labelUids?.includes(l.uid) ?? false;
                             return (_jsx("li", { children: _jsxs("label", { className: "flex items-center gap-2 py-1.5 px-1 text-sm rounded-sm hover:bg-surface-alt", children: [_jsx("input", { type: "checkbox", checked: checked, disabled: togglingLabelUid === l.uid, onChange: () => handleToggleLabel(l.uid) }), _jsx("span", { className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: l.color ?? "#6366f1" } }), l.name] }) }, l.uid));
                         }) })] })] }));

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

@@ -18,7 +18,7 @@ export function useCompose() {
  * opening Compose from Contacts' "Email" action, for instance, overlays the window on top of whatever
  * app is currently showing, exactly like opening it from Mail's own sidebar button.
  */
-export default function ComposeProvider({ children }) {
+export default function ComposeProvider({ children, userUid }) {
     const [sessions, setSessions] = useState([]);
     const isMobile = useIsMobile();
     function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning }) {
@@ -52,5 +52,5 @@ export default function ComposeProvider({ children }) {
     // non-minimized one) once whatever's currently "on top" is closed or minimized.
     const lastNonMinimizedId = isMobile ? [...sessions].reverse().find((s) => !s.minimized)?.id : undefined;
     const visibleSessions = isMobile ? sessions.filter((s) => s.minimized || s.id === lastNonMinimizedId) : sessions;
-    return (_jsxs(ComposeContext.Provider, { value: value, children: [children, visibleSessions.length > 0 && (_jsx("div", { className: "fixed bottom-0 right-6 flex items-end gap-3 z-50", children: visibleSessions.map((session) => (_jsx(ComposeWindow, { session: session, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) }, session.id))) }))] }));
+    return (_jsxs(ComposeContext.Provider, { value: value, children: [children, visibleSessions.length > 0 && (_jsx("div", { className: "fixed bottom-0 right-6 flex items-end gap-3 z-50", children: visibleSessions.map((session) => (_jsx(ComposeWindow, { session: session, userUid: userUid, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) }, session.id))) }))] }));
 }

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

@@ -4,13 +4,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
-import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineChevronDown, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
+import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineChevronDown, HiOutlineLockClosed, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { assembleDraft, assembleDraftRaw, attachmentContentUrl, createDraft, getMailbox, listFolders, sendMessage, setMessageRequestReceipt, setMessageScheduledSendTime, uploadAttachment, } from "@rapidmx/react-shared/mail/mailApi.js";
+import { assembleDraft, assembleDraftRaw, attachmentContentUrl, createDraft, deleteMessage, getMailbox, listFolders, listMailboxes, sendMessage, setMessageRequestReceipt, setMessageScheduledSendTime, uploadAttachment, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
 import { decideMessageEncryption, resolveRecipientEncryption } from "@rapidmx/react-shared/crypto/composeSecurity.js";
 import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
-import { getEncryptionPolicy, lookupKeys } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { findActivePublicKey, getEncryptionPolicy, lookupKeys } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { useUnlockPrompt } from "../../layout/UnlockPromptProvider.js";
 import { fromBase64 } from "@rapidmx/react-shared/crypto/encoding.js";
 import { applyBaselineOuterHeaders, assembleOutboundMime, buildEncryptedMessage, buildSignedOnlyMessage } from "@rapidmx/react-shared/crypto/smimeMessage.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
@@ -53,9 +54,22 @@ function HeaderButton({ label, onClick, icon: Icon }) {
  * see `ComposeContext.tsx`'s own doc comment for how that interacts with several sessions being open at
  * once.
  */
-export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
-    const { id, mailboxUid, initialTo, initialCc, initialSubject, initialQuotedHtml, signatureContext, suppressSigning, minimized } = session;
+export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid }) {
+    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, signatureContext, suppressSigning, minimized } = session;
+    // The sending ("From") mailbox. A reply/forward session names the original message's mailbox; a fresh
+    // compose leaves it unset and defaults to the caller's own mailbox once `listMailboxes()` resolves.
+    // Everything mailbox-scoped below (Drafts folder, draft, signatures, crypto context) keys off this.
+    const [fromMailboxUid, setFromMailboxUid] = useState(session.mailboxUid);
+    const mailboxUid = fromMailboxUid;
+    const [mailboxes, setMailboxes] = useState([]);
+    // Attachments and inline images upload onto the current draft's uid, which lives in one mailbox's
+    // Drafts folder - so once anything has been uploaded the sender can no longer be switched.
+    const [hasUploads, setHasUploads] = useState(false);
     const isMobile = useIsMobile();
+    const { requestUnlock } = useUnlockPrompt();
+    // Bumped after a successful on-demand unlock to force a re-render - `getUnlockedKeys()` below is a
+    // plain read from a module-level store, not React state, so nothing else would pick up the change.
+    const [, setUnlockRefresh] = useState(0);
     const windowRef = useRef(null);
     const [draftsFolderUid, setDraftsFolderUid] = useState();
     const [folderError, setFolderError] = useState(null);
@@ -98,6 +112,31 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
     // send that happens to race this fetch can't silently skip encryption the spec says should apply.
     const [cryptoContextReady, setCryptoContextReady] = useState(false);
     useEffect(() => {
+        let cancelled = false;
+        listMailboxes({ limit: 100 })
+            .then((result) => {
+            if (cancelled) {
+                return;
+            }
+            setMailboxes(result);
+            setFromMailboxUid((current) => current ?? (result.find((mb) => mb.ownerUserUid === userUid) ?? result[0])?.uid);
+        })
+            .catch((err) => {
+            // Only fatal when there's no mailbox to fall back on - a session that already names one just
+            // loses the From picker.
+            if (!cancelled && !session.mailboxUid) {
+                setFolderError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (!mailboxUid) {
+            return;
+        }
         let cancelled = false;
         setCryptoContextReady(false);
         let mailboxSettled = false;
@@ -134,9 +173,26 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
         };
     }, [mailboxUid]);
     useEffect(() => {
+        if (!mailboxUid) {
+            return;
+        }
+        // Cancellable so a slow response for a mailbox the user has since switched away from can't point
+        // the new draft at the wrong mailbox's Drafts folder.
+        let cancelled = false;
         listFolders(mailboxUid)
-            .then((folders) => setDraftsFolderUid(folders.find((f) => f.type === "drafts")?.uid))
-            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load your Drafts folder."));
+            .then((folders) => {
+            if (!cancelled) {
+                setDraftsFolderUid(folders.find((f) => f.type === "drafts")?.uid);
+            }
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setFolderError(err instanceof ApiRequestError ? err.message : "Could not load your Drafts folder.");
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
     }, [mailboxUid]);
     /**
      * Runs discovery for whichever of `addresses` haven't already been looked up this compose session,
@@ -154,7 +210,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
         const ownPrefersMutual = mailbox.encryptPreference?.preferEncrypt === "mutual";
         const unchecked = addresses.filter((r) => !(r.address in recipientStatuses));
         for (const recipient of unchecked) {
-            lookupKeys(mailboxUid, recipient.address)
+            lookupKeys(mailbox.uid, recipient.address)
                 .catch(() => undefined)
                 .then((lookup) => {
                 const status = resolveRecipientEncryption(mailbox.primarySmtpAddress, ownPrefersMutual, encryptionPolicy, recipient.address, lookup);
@@ -171,6 +227,11 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
     // signature is a completely legitimate outcome, so this falls back to just the quoted content
     // (if any) rather than surfacing an error over what's a cosmetic nicety.
     useEffect(() => {
+        // Seeds the body once, from whichever mailbox is the sender when compose opens - switching From
+        // later must not overwrite what the user has already written (the editor itself never re-syncs).
+        if (!mailboxUid || contentReady) {
+            return;
+        }
         listMailSignatures(mailboxUid)
             .then((signatures) => {
             const signature = signatures.find((s) => signatureContext === "new" ? s.isDefaultForNewMessages : s.isDefaultForReplyForward);
@@ -181,13 +242,48 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
             .finally(() => setContentReady(true));
     }, [mailboxUid, signatureContext, initialQuotedHtml]);
     useEffect(() => {
-        if (!draftsFolderUid || draft) {
+        if (!mailboxUid || !draftsFolderUid || draft) {
             return;
         }
+        let cancelled = false;
         createDraft(mailboxUid, draftsFolderUid)
-            .then(setDraft)
-            .catch((err) => setDraftError(err instanceof ApiRequestError ? err.message : "Could not start a new draft."));
+            .then((created) => {
+            if (cancelled) {
+                // The sender changed while this was in flight - discard the now-orphaned draft.
+                void deleteMessage(created.uid, created.version).catch(() => undefined);
+                return;
+            }
+            setDraft(created);
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setDraftError(err instanceof ApiRequestError ? err.message : "Could not start a new draft.");
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
     }, [mailboxUid, draftsFolderUid, draft]);
+    /** Switches the sending mailbox: discards the current (unsent, upload-free) draft and resets the
+     * per-mailbox state, so the effects above start a fresh draft and crypto context in the new mailbox.
+     * Recipients, subject, and body are kept. */
+    function handleFromChange(nextMailboxUid) {
+        if (nextMailboxUid === mailboxUid || hasUploads) {
+            return;
+        }
+        if (draft) {
+            void deleteMessage(draft.uid, draft.version).catch(() => undefined);
+        }
+        setDraft(null);
+        setDraftsFolderUid(undefined);
+        setDraftError(null);
+        setFolderError(null);
+        setMailbox(null);
+        setRecipientStatuses({});
+        setEncryptRequested(false);
+        setEncryptionBlocked(null);
+        setFromMailboxUid(nextMailboxUid);
+    }
     /**
      * Click-and-drag resize, from the window's own top/left edges (and the top-left corner, for both
      * at once) — the window is anchored bottom-right (see `ComposeContext.tsx`'s stack), so growing it
@@ -241,6 +337,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
         }
         try {
             const attachment = await uploadAttachment(draft.uid, file);
+            setHasUploads(true);
             return attachmentContentUrl(attachment.uid);
         }
         catch (err) {
@@ -260,6 +357,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
         for (const file of files) {
             try {
                 const attachment = await uploadAttachment(draft.uid, file);
+                setHasUploads(true);
                 setAttachments((prev) => [...prev, attachment]);
             }
             catch (err) {
@@ -285,6 +383,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
      * requirement, just without a live UI reflecting it before Send is clicked.
      */
     async function assembleForSend(toRecipients, ccRecipients, bccRecipients, forcePlaintext) {
+        // Only reachable once a draft exists, which itself requires `mailboxUid` to have resolved.
         const unlocked = getUnlockedKeys(mailboxUid);
         // `mailbox` is required to build protected headers (own From address) whenever signing or
         // encrypting - not just guarded on the encryption branch below, since a signed-only message
@@ -396,9 +495,30 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
             setSending(false);
         }
     }
+    async function handleUnlockForCrypto() {
+        try {
+            // Only reachable via the button below, which never renders unless needsUnlockForCrypto is
+            // true - which itself requires mailbox.keys to already contain a real enrolled key (see
+            // hasEnrolledSigningKey/hasEnrolledEncryptionKey), so it's never empty/undefined here either.
+            await requestUnlock(mailbox.uid, mailbox.keys);
+            setUnlockRefresh((n) => n + 1);
+        }
+        catch {
+            // User dismissed the unlock dialog - nothing to do, the toggles below simply stay hidden.
+        }
+    }
     // A plain read from keySession.ts's module-level session store, not React state - see that module's
     // own doc comment. Cheap enough to read fresh on every render rather than caching in state.
-    const unlockedKeys = getUnlockedKeys(mailboxUid);
+    const unlockedKeys = mailboxUid ? getUnlockedKeys(mailboxUid) : undefined;
+    const hasEnrolledSigningKey = !!findActivePublicKey(mailbox?.keys ?? [], "sign");
+    const hasEnrolledEncryptionKey = !!findActivePublicKey(mailbox?.keys ?? [], "encrypt");
+    // This mailbox has a real signing/encryption key on file, but this session hasn't unlocked it yet -
+    // the sign/encrypt toggles below stay hidden until it has, so this is the only way to reach them
+    // without first stumbling into Mail generally (which no longer force-prompts on its own - see
+    // `MailShell`'s `blocking={false}`). `getUnlockedKeys()` is re-read as a plain module value above, so
+    // bumping `unlockRefresh` after a successful unlock is what makes this line (and the toggles it
+    // gates) reflect it on the next render.
+    const needsUnlockForCrypto = (hasEnrolledSigningKey || hasEnrolledEncryptionKey) && !unlockedKeys;
     const title = subject.trim() || "New Message";
     const titleId = `compose-title-${id}`;
     if (minimized) {
@@ -412,7 +532,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
         ].join(" "), children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: onClose, icon: HiOutlineXMark })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError) && (_jsxs("div", { className: "px-3 pt-2", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError })] })), encryptionBlocked && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["This message can\u2019t be encrypted for everyone: ", encryptionBlocked.map((r) => r.address).join(", "), encryptionBlocked[0]?.prohibitedReason ? ` — ${encryptionBlocked[0].prohibitedReason}` : " has no encryption key on file", ". Remove ", encryptionBlocked.length > 1 ? "these recipients" : "this recipient", " from To/Cc/Bcc, or send the whole message in plaintext."] }), _jsx(Button, { type: "button", onClick: () => {
                                         setEncryptionBlocked(null);
                                         void handleSend(true);
-                                    }, children: "Send without encryption" })] }) })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx("input", { id: `compose-to-${id}`, type: "text", className: FIELD_INPUT, value: to, onChange: (e) => setTo(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(to)) }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx("input", { id: `compose-cc-${id}`, type: "text", className: FIELD_INPUT, value: cc, onChange: (e) => setCc(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(cc)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx("input", { id: `compose-bcc-${id}`, type: "text", className: FIELD_INPUT, value: bcc, onChange: (e) => setBcc(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(bcc)) })] })] })), (() => {
+                                    }, children: "Send without encryption" })] }) })), mailboxes.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, value: mailboxUid ?? "", disabled: hasUploads || sending, title: hasUploads ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx("input", { id: `compose-to-${id}`, type: "text", className: FIELD_INPUT, value: to, onChange: (e) => setTo(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(to)) }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx("input", { id: `compose-cc-${id}`, type: "text", className: FIELD_INPUT, value: cc, onChange: (e) => setCc(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(cc)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx("input", { id: `compose-bcc-${id}`, type: "text", className: FIELD_INPUT, value: bcc, onChange: (e) => setBcc(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(bcc)) })] })] })), (() => {
                         const knownRecipients = [...parseAddresses(to), ...parseAddresses(cc), ...parseAddresses(bcc)]
                             .map((r) => recipientStatuses[r.address])
                             .filter((status) => !!status);
@@ -420,5 +540,5 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
                             return null;
                         }
                         return (_jsx("ul", { className: "flex flex-wrap gap-1.5 px-3 pt-1.5", "aria-label": "Recipient encryption availability", children: knownRecipients.map((status) => (_jsxs("li", { className: `text-xs font-medium py-0.5 px-2 rounded-pill ${status.canEncrypt ? "bg-primary/10 text-primary-dark" : "bg-surface-alt text-text-muted"}`, children: [status.address, " ", status.canEncrypt ? "supports encryption" : "no encryption key found"] }, status.address))) }));
-                    })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && _jsx(RichTextEditor, { value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage }) }), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsx("li", { className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted", children: attachment.filename }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleSend(), disabled: !draft || sending || !cryptoContextReady, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: sending ? "Sending…" : "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || sending || !cryptoContextReady, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: onClose, className: "ml-auto w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }));
+                    })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && _jsx(RichTextEditor, { value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage }) }), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsx("li", { className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted", children: attachment.filename }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), needsUnlockForCrypto && (_jsx("div", { className: "px-3 pb-1", children: _jsxs("button", { type: "button", onClick: handleUnlockForCrypto, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to sign or encrypt this message"] }) })), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleSend(), disabled: !draft || sending || !cryptoContextReady, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: sending ? "Sending…" : "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || sending || !cryptoContextReady, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: onClose, className: "ml-auto w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }));
 }

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,12 @@ 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);
+}
 /**
  * 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,33 +64,45 @@ 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) {
@@ -90,27 +118,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."))
+        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 +180,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 +203,12 @@ 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, children: [_jsx(LocalIndexLifecycle, { mailboxUid: activeMailboxUid, mailboxKeys: activeMailbox?.keys, folders: mailboxFolders.find((mf) => mf.mailbox.uid === activeMailboxUid)?.folders ?? [] }), _jsx(AppShell, { active: "mail", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner })] }));
 }

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -22,6 +22,7 @@ export const SETTINGS_SECTIONS = [
     { id: "read-receipts", href: "/settings/read-receipts", label: "Read Receipts" },
     { id: "booking-types", href: "/settings/booking-types", label: "Booking Links" },
     { id: "encryption", href: "/settings/encryption", label: "Encryption" },
+    { id: "sharing", href: "/settings/sharing", label: "Sharing" },
     { id: "privacy", href: "/settings/privacy", label: "Privacy & Data" },
 ];
 const SettingsShellContext = createContext({ mailboxes: [] });