@rapidmx/web-client 0.30.0 → 0.32.0

package/dist/apps/shared/components/layout/AppShell.js

@@ -28,6 +28,8 @@ import { SIGN_OUT_CHANNEL, destroyAllLocalIndexes } from "../../search/localInde
 import { authApiFetch, setApiUnauthorizedObserver } from "../../../../lib/util/api.js";
 import { destroyUnlockedKeys } from "../../../../lib/crypto/keySession.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+import { resetNotifications } from "../../notifications/store.js";
+import { clearContactPhotoCache } from "../../../../lib/contacts/useContactPhotoSrc.js";
 import { pluginIcon } from "../../plugins/pluginIcons.js";
 import { mergePluginNavItems } from "../../plugins/pluginNav.js";
 import { useResolvedRailItems } from "../../plugins/useResolvedRailItems.js";
@@ -181,6 +183,9 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
             destroyUnlockedKeys();
             clearPinnedSignerCache();
             clearAppearanceCache();
+            clearContactPhotoCache();
+            // The notification history (meeting titles, error details) is this session's, and the tab's storage outlives it.
+            resetNotifications();
             // Bounded by its own timeout and never rejects - awaited so navigating doesn't kill the Worker mid-delete.
             void destroyAllLocalIndexes().then(() => {
                 window.location.href = authServerUrl ?? "/";
@@ -198,6 +203,8 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
         // Trusted signer pins read from contacts don't outlive the session either.
         clearPinnedSignerCache();
         clearAppearanceCache();
+        clearContactPhotoCache();
+        resetNotifications();
         // Open compose windows save edits still waiting on their autosave debounce while the session is still
         // valid - logout invalidates it. Bounded the same way as logout itself, and never rejects.
         await flushComposeDrafts(LOGOUT_TIMEOUT_MS);
@@ -221,6 +228,8 @@ export function AppChrome({ active, userUid, authServerUrl, impersonating, imper
             // handling, which surfaces via a full reload rather than an inline retry affordance.
         }
         finally {
+            // What the impersonated user's session raised (their meetings, their errors) must not be left for the administrator to read.
+            resetNotifications();
             window.location.href = "/admin";
         }
     }

package/dist/apps/shared/components/layout/KeyEnrollmentGate.js

@@ -11,12 +11,11 @@ import FormField from "../../../../lib/components/forms/FormField.js";
 import { enrollKey, getKeyVault, VaultAlreadyInitializedError } from "../../../../lib/crypto/keyvaultApi.js";
 import { UnopenableKeysNotice, unlockErrorMessage } from "./UnlockPromptProvider.js";
 import { FrameTakeover } from "../../navigation/frameContext.js";
-import { RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock } from "./RecoveryCodeUnlock.js";
+import { MIN_PASSWORD_LENGTH, RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock, } from "./RecoveryCodeUnlock.js";
 import { ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE, getUnlockedKeys, unlockWithPassword, } from "../../../../lib/crypto/keySession.js";
 import { buildAad, generateMasterKey, sealWithKey } from "../../../../lib/crypto/masterKey.js";
 import { buildPasswordWrap, buildRecoveryWraps } from "../../../../lib/crypto/masterKeyWraps.js";
 import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "../../../../lib/crypto/keys.js";
-const MIN_PASSWORD_LENGTH = 8;
 async function provisionEncryptionKey(mailboxUid, mailboxAddress, password) {
     const mk = generateMasterKey();
     const passwordWrap = await buildPasswordWrap(mailboxUid, mk, password);
@@ -180,7 +179,7 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
     }
     if (status === "setup_password" || status === "enrolling") {
         const enrolling = status === "enrolling";
-        return (_jsx(FrameTakeover, { children: _jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Protect your mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Choose a password to protect your encryption keys. This is separate from your sign-in password and is never sent to the server." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSetPassword, children: [_jsx(FormField, { label: "Encryption password", htmlFor: "key-enrollment-password", children: _jsx("input", { id: "key-enrollment-password", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: password, onChange: (e) => setPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(FormField, { label: "Confirm password", htmlFor: "key-enrollment-password-confirm", children: _jsx("input", { id: "key-enrollment-password-confirm", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(Button, { type: "submit", loading: enrolling, disabled: enrolling, children: "Continue" })] })] }) }) }));
+        return (_jsx(FrameTakeover, { children: _jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Protect your mailbox" }), _jsxs("p", { className: "text-sm text-text-muted mb-5", children: ["Choose a password to protect your encryption keys. This is separate from your sign-in password and is never sent to the server. Make it ", MIN_PASSWORD_LENGTH, " or more characters: a passphrase of several unrelated words is long enough and easy to remember."] }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSetPassword, children: [_jsx(FormField, { label: "Encryption password", htmlFor: "key-enrollment-password", children: _jsx("input", { id: "key-enrollment-password", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: password, onChange: (e) => setPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(FormField, { label: "Confirm password", htmlFor: "key-enrollment-password-confirm", children: _jsx("input", { id: "key-enrollment-password-confirm", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(Button, { type: "submit", loading: enrolling, disabled: enrolling, children: "Continue" })] })] }) }) }));
     }
     if (status === "already_set_up") {
         return (_jsx(FrameTakeover, { children: _jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Encryption is already set up" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "This mailbox\u2019s encryption was set up in another tab or on another device while this page was open, so nothing was changed here. Reload the page and unlock with the password chosen there." }), _jsx(Button, { type: "button", onClick: () => window.location.reload(), children: "Reload" })] }) }) }));

package/dist/apps/shared/components/layout/MailboxProvisioning.d.ts

@@ -13,4 +13,7 @@ import React from "react";
  * refused deliberately (a 4xx, e.g. "Automatic mailbox provisioning is not enabled.") so the caller and the
  * administrator they ask can tell why - see `unavailableReason()`.
  */
-export default function MailboxProvisioning(): React.JSX.Element;
+export default function MailboxProvisioning({ impersonating, impersonationBaseUrl }: {
+    impersonating?: boolean;
+    impersonationBaseUrl?: string;
+}): React.JSX.Element;

package/dist/apps/shared/components/layout/MailboxProvisioning.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
 import { ApiRequestError } from "../../../../lib/util/api.js";
-import { autoProvisionMailbox } from "../../../../lib/mail/mailApi.js";
+import { autoProvisionMailbox, stopImpersonating } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
@@ -43,7 +43,7 @@ function unavailableReason(err) {
  * refused deliberately (a 4xx, e.g. "Automatic mailbox provisioning is not enabled.") so the caller and the
  * administrator they ask can tell why - see `unavailableReason()`.
  */
-export default function MailboxProvisioning() {
+export default function MailboxProvisioning({ impersonating, impersonationBaseUrl }) {
     const client = useApiClient();
     const [status, setStatus] = useState("checking");
     const [options, setOptions] = useState([]);
@@ -55,6 +55,12 @@ export default function MailboxProvisioning() {
     // Bumped by "Retry" to re-run the check below.
     const [attempt, setAttempt] = useState(0);
     useEffect(() => {
+        if (impersonating) {
+            // An administrator viewing as a user must never create a mailbox for them just by looking: nothing is provisioned, and the way back is shown
+            // (this takeover hides the frame's own "Return to admin" bar).
+            setStatus("impersonating");
+            return;
+        }
         setStatus("checking");
         autoProvisionMailbox(undefined, client)
             .then((result) => {
@@ -87,6 +93,19 @@ export default function MailboxProvisioning() {
             }
         });
     }, [attempt]);
+    const [returning, setReturning] = useState(false);
+    async function handleReturnToAdmin() {
+        setReturning(true);
+        try {
+            await stopImpersonating(impersonationBaseUrl ?? "");
+        }
+        catch {
+            // Navigate either way, as the frame's own banner does: a failed call leaves the session as it was.
+        }
+        finally {
+            window.location.href = "/admin";
+        }
+    }
     async function handleConfirm() {
         // `selected` only ever takes a value from `options` itself (the initial default, or the
         // <select>'s own onChange, which can only report one of its own rendered <option> values), so
@@ -111,6 +130,9 @@ export default function MailboxProvisioning() {
         const creating = status === "creating";
         content = (_jsxs("div", { className: "w-full flex flex-col gap-3", children: [_jsx("p", { className: "text-sm text-text-muted text-center", children: "Choose your mailbox address to get started:" }), error && _jsx(Alert, { children: error }), _jsx("select", { "aria-label": "Mailbox address", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: selected, onChange: (e) => setSelected(e.target.value), disabled: creating, children: options.map((option) => (_jsx("option", { value: option.primarySmtpAddress, children: option.primarySmtpAddress }, option.primarySmtpAddress))) }), _jsx(Button, { type: "button", onClick: handleConfirm, loading: creating, disabled: creating, className: "!w-auto self-center", children: "Continue" })] }));
     }
+    else if (status === "impersonating") {
+        content = (_jsxs(_Fragment, { children: [_jsx("h1", { className: "text-lg font-bold uppercase tracking-wide", children: "No mailbox" }), _jsx("p", { className: "text-sm text-text-muted", children: "The user you are viewing as has no mailbox, and none is created for them while you are viewing as them." }), _jsx(Button, { type: "button", onClick: () => void handleReturnToAdmin(), loading: returning, disabled: returning, className: "!w-auto self-center", children: "Return to admin" })] }));
+    }
     else if (status === "retryable") {
         content = (_jsxs(_Fragment, { children: [_jsx("h1", { className: "text-lg font-bold uppercase tracking-wide", children: "Couldn\u2019t check right now" }), _jsx("p", { className: "text-sm text-text-muted", children: retryText }), _jsx(Button, { type: "button", onClick: () => setAttempt((n) => n + 1), className: "!w-auto self-center", children: "Retry" })] }));
     }

package/dist/apps/shared/components/layout/RecoveryCodeUnlock.d.ts

@@ -9,8 +9,10 @@
  */
 import React from "react";
 import { type PublicKey } from "../../../../lib/crypto/keyvaultApi.js";
-/** The same minimum every other "set an encryption password" form in this app uses. */
-export declare const MIN_PASSWORD_LENGTH = 8;
+/** The same minimum every other "set an encryption password" form in this app uses. The password is the only thing
+ * between an offline guesser holding the server's wrapped master key and the mailbox's private keys, so it is
+ * long: a passphrase of a few words clears it easily. */
+export declare const MIN_PASSWORD_LENGTH = 12;
 /** Where recovery codes are regenerated. */
 export declare const ENCRYPTION_SETTINGS_HREF = "/settings/encryption";
 /** Deliberately generic: a wrong code and a vault with no recovery codes fail the same way. */

package/dist/apps/shared/components/layout/RecoveryCodeUnlock.js

@@ -22,8 +22,10 @@ import Modal from "../../../../lib/components/overlays/Modal.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../lib/components/forms/FormField.js";
-/** The same minimum every other "set an encryption password" form in this app uses. */
-export const MIN_PASSWORD_LENGTH = 8;
+/** The same minimum every other "set an encryption password" form in this app uses. The password is the only thing
+ * between an offline guesser holding the server's wrapped master key and the mailbox's private keys, so it is
+ * long: a passphrase of a few words clears it easily. */
+export const MIN_PASSWORD_LENGTH = 12;
 /** Where recovery codes are regenerated. */
 export const ENCRYPTION_SETTINGS_HREF = "/settings/encryption";
 /** Deliberately generic: a wrong code and a vault with no recovery codes fail the same way. */

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

@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
 import MailAddress from "./MailAddress.js";
 import { EncryptedPreview, conversationLooksEncrypted, displaySubject } from "./reading/EncryptedPreview.js";
-import { decryptForDisplay, useDecryptedMessages, useUnlockEpoch } from "../../mail/decryptedMessages.js";
+import { decryptForDisplay, mapWithConcurrency, useDecryptedMessages, useUnlockEpoch } from "../../mail/decryptedMessages.js";
 import { listConversationMessages } from "../../../../lib/mail/conversationsApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
@@ -44,22 +44,64 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
     const unlockEpoch = useUnlockEpoch();
     // An encrypted conversation's row stands for its latest message, whose subject only decrypting can tell. Rows are decrypted as they are listed
     // whenever the mailbox is unlocked (and again once it is), the same way the message list does.
+    // A few at a time (the list can hold hundreds), and none more once the list has been replaced by a newer one.
     useEffect(() => {
-        for (const conversation of conversations) {
-            if (conversationLooksEncrypted(conversation)) {
-                void decryptForDisplay(conversation.latestMessageUid, conversation.mailboxUid ?? mailboxUid);
+        let stale = false;
+        void mapWithConcurrency(conversations.filter(conversationLooksEncrypted), 4, async (conversation) => {
+            if (!stale) {
+                await decryptForDisplay(conversation.latestMessageUid, conversation.mailboxUid ?? mailboxUid);
             }
-        }
+        });
+        return () => {
+            stale = true;
+        };
     }, [conversations, mailboxUid, unlockEpoch]);
     const [expanded, setExpanded] = useState(new Set());
     const [messagesById, setMessagesById] = useState({});
     const [loadingIds, setLoadingIds] = useState(new Set());
     const [errorsById, setErrorsById] = useState({});
+    // The messages each cached thread was fetched for (its `messageUids`): a list that now says otherwise has the thread fetched again.
+    const fetchedForRef = useRef({});
     // The answers given from a row's RSVP chip, by message uid: a row draws them at once, whichever row (the conversation's, or one of its messages) they were given from.
     const [answers, setAnswers] = useState({});
     function answered(updated) {
         setAnswers((prev) => ({ ...prev, [updated.uid]: updated.meetingResponse }));
     }
+    // New mail, a delete or a move changes a conversation's messages: what was fetched of it is out of date. An expanded thread is fetched again
+    // in place (the rows it shows stay until the new ones arrive); a collapsed one is forgotten, to be fetched when next opened. A conversation
+    // that left the list is forgotten too.
+    useEffect(() => {
+        const listed = new Set();
+        const stale = [];
+        for (const conversation of conversations) {
+            const id = conversationRowKey(conversation);
+            listed.add(id);
+            const fetchedFor = fetchedForRef.current[id];
+            if (fetchedFor === undefined || fetchedFor === conversation.messageUids.join(",")) {
+                continue;
+            }
+            if (expanded.has(id)) {
+                fetchedForRef.current[id] = conversation.messageUids.join(",");
+                listConversationMessages(conversation.mailboxUid ?? mailboxUid, conversation.conversationId, {}, client)
+                    .then((loaded) => setMessagesById((prev) => ({ ...prev, [id]: loaded })))
+                    .catch(() => undefined);
+            }
+            else {
+                stale.push(id);
+            }
+        }
+        for (const id of Object.keys(fetchedForRef.current)) {
+            if (!listed.has(id)) {
+                stale.push(id);
+            }
+        }
+        if (stale.length > 0) {
+            for (const id of stale) {
+                delete fetchedForRef.current[id];
+            }
+            setMessagesById((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => !stale.includes(id))));
+        }
+    }, [conversations]);
     function toggle(conversation) {
         const id = conversationRowKey(conversation);
         setExpanded((prev) => {
@@ -81,6 +123,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             delete next[id];
             return next;
         });
+        fetchedForRef.current[id] = conversation.messageUids.join(",");
         listConversationMessages(conversation.mailboxUid ?? mailboxUid, conversation.conversationId, {}, client)
             .then((loaded) => setMessagesById((prev) => ({ ...prev, [id]: loaded })))
             .catch((err) => setErrorsById((prev) => ({

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

@@ -316,7 +316,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                         }
                     },
                     track: trackMessageChange,
-                });
+                }, client);
             }
         }
     }, [expandedUids, messages, client]);

package/dist/apps/shared/components/mail/MenuButton.d.ts

@@ -1,78 +1,2 @@
-import React, { ReactNode } from "react";
-/** What every row has. `checked` turns it into a radio/checkbox item (the caller says which via `role`) and
- * draws the checkmark column; without it the row is a plain command. */
-interface MenuItemBase {
-    key: string;
-    label: string;
-    /** A one-line explanation under the label, for an item whose effect isn't obvious from its name. */
-    description?: string;
-    role?: "menuitem" | "menuitemradio" | "menuitemcheckbox";
-    /** `"mixed"` is ARIA's third checkbox state - some of the things this row acts on have it and some
-     * don't, which is what a label applied to only part of a multi-message selection looks like. */
-    checked?: boolean | "mixed";
-    /** A colour swatch before the label - a label's own colour. */
-    swatchColor?: string;
-    /** An icon before the label, for a menu whose rows are commands (the reading pane's "More actions"). */
-    icon?: ReactNode;
-    /** A tooltip for the row - the full text of a label the row truncates. */
-    title?: string;
-    disabled?: boolean;
-    /** Leaves the menu open after choosing this row, for a multi-select list where several rows are ticked
-     * before one command commits them all. */
-    keepOpen?: boolean;
-}
-/** A row that does something when chosen. */
-export interface MenuCommandSpec extends MenuItemBase {
-    onSelect: () => void;
-    submenu?: never;
-}
-/** A row that opens a submenu instead: choosing it replaces the menu's contents with these sections, under
- * a Back row. One level deep, which is all any menu here needs - so it has nothing of its own to do. */
-export interface MenuSubmenuSpec extends MenuItemBase {
-    submenu: MenuSectionSpec[];
-    onSelect?: never;
-}
-export type MenuItemSpec = MenuCommandSpec | MenuSubmenuSpec;
-/** A labelled group of items. Groups after the first are drawn with a separator above them. */
-export interface MenuSectionSpec {
-    key: string;
-    label?: string;
-    /** A short note under the group's items - e.g. why some of them are unavailable right now. */
-    note?: string;
-    items: MenuItemSpec[];
-}
-/** The height `PopoverPortal` is asked for - exact for a short menu, capped (the list scrolls) for a long one. */
-export declare function menuHeight(sections: MenuSectionSpec[], width?: number): number;
-export interface MenuButtonProps {
-    /** The trigger's visible label. Not drawn (nor is the chevron) with `iconOnly`, where `aria-label` is all the trigger says. */
-    label: ReactNode;
-    /** The trigger is just its `icon` - a round icon button like the reading pane's own command row, whose `className` it takes over
-     * completely. `aria-label` (and `title`) name it. */
-    iconOnly?: boolean;
-    /** The trigger's accessible name, which also names the menu itself - includes the current selection
-     * where there is one ("Filter: Unread"), so the button says what it's set to, not just what it does. */
-    "aria-label": string;
-    icon?: ReactNode;
-    disabled?: boolean;
-    title?: string;
-    sections: MenuSectionSpec[];
-    width?: number;
-    /** Extra classes for the trigger, on top of the shared toolbar-button styling. */
-    className?: string;
-    /** Told whenever the menu opens or closes - how a caller resets a draft it keeps for the menu's own
-     * multi-select rows (see `useLabelDraft()`). */
-    onOpenChange?: (open: boolean) => void;
-}
-/**
- * A toolbar button that opens an ARIA menu: `role="menu"` rows with checkmarks for the current choice,
- * full keyboard support (Enter/Space or Arrow Down to open, arrows/Home/End to move with wrap, Enter/Space
- * to choose, Escape or Tab to close with focus returning to the trigger) and a click outside to dismiss.
- *
- * Rendered through `PopoverPortal` rather than as an absolutely-positioned child: the mail list toolbar
- * lives inside the list's own `overflow-y-auto` scroll container, which clips an absolute popup however
- * high its `z-index` - the same reason Compose's own pickers portal out (see `PopoverPortal`'s own doc
- * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
- * semantics, roving focus and keyboard handling are this component's own.
- */
-export default function MenuButton({ label, iconOnly, icon, disabled, title, sections, width, className, "aria-label": ariaLabel, onOpenChange, }: MenuButtonProps): React.JSX.Element;
-export {};
+export { default, menuHeight } from "../../../../lib/components/menus/MenuButton.js";
+export type { MenuCommandSpec, MenuSubmenuSpec, MenuItemSpec, MenuSectionSpec, MenuButtonProps } from "../../../../lib/components/menus/MenuButton.js";

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

@@ -1,215 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useRef, useState } from "react";
-import { HiCheck, HiChevronDown, HiChevronLeft, HiChevronRight, HiMinus } from "react-icons/hi2";
-import PopoverPortal from "../../../../lib/components/overlays/PopoverPortal.js";
-// `PopoverPortal` positions a fixed-size box (it has no auto-height mode), so the menu's height is
-// computed from its own contents rather than measured - from whichever level is *shown*, so a submenu
-// isn't left standing in the parent menu's taller box. These are the exact heights the classes below
-// render at, so the box is never short enough to clip its last row: an item is `h-9`, a group label
-// `h-6`, a note as many `leading-4` lines as it wraps to, a separator a 1px rule inside `my-1`, and the
-// list itself `py-1`.
-const ITEM_HEIGHT = 36;
-const ITEM_DESCRIPTION_HEIGHT = 16;
-const GROUP_LABEL_HEIGHT = 24;
-const NOTE_LINE_HEIGHT = 16;
-const NOTE_PADDING = 4;
-/** A note wraps, so its height depends on how much of it fits a line: `text-xs` averages a little over 6px
- * a character, and the note sits inside the list's `px-3`. Rounded so the estimate is never *under* the
- * lines the browser actually draws - a box a few pixels too tall shows blank space, one too short clips. */
-const NOTE_CHAR_WIDTH = 6.4;
-const NOTE_PADDING_X = 24;
-const SEPARATOR_HEIGHT = 9;
-const LIST_PADDING = 8;
-const MENU_MAX_HEIGHT = 460;
-const DEFAULT_MENU_WIDTH = 248;
-/** How tall `note` renders at `width`, wrapped. */
-function noteHeight(note, width) {
-    const charsPerLine = Math.max(1, Math.floor((width - NOTE_PADDING_X) / NOTE_CHAR_WIDTH));
-    return Math.ceil(note.length / charsPerLine) * NOTE_LINE_HEIGHT + NOTE_PADDING;
-}
-/** The height `PopoverPortal` is asked for - exact for a short menu, capped (the list scrolls) for a long one. */
-export function menuHeight(sections, width = DEFAULT_MENU_WIDTH) {
-    let height = LIST_PADDING;
-    sections.forEach((section, index) => {
-        if (index > 0) {
-            height += SEPARATOR_HEIGHT;
-        }
-        if (section.label) {
-            height += GROUP_LABEL_HEIGHT;
-        }
-        for (const item of section.items) {
-            height += ITEM_HEIGHT + (item.description ? ITEM_DESCRIPTION_HEIGHT : 0);
-        }
-        if (section.note) {
-            height += noteHeight(section.note, width);
-        }
-    });
-    return Math.min(height, MENU_MAX_HEIGHT);
-}
-/**
- * A toolbar button that opens an ARIA menu: `role="menu"` rows with checkmarks for the current choice,
- * full keyboard support (Enter/Space or Arrow Down to open, arrows/Home/End to move with wrap, Enter/Space
- * to choose, Escape or Tab to close with focus returning to the trigger) and a click outside to dismiss.
- *
- * Rendered through `PopoverPortal` rather than as an absolutely-positioned child: the mail list toolbar
- * lives inside the list's own `overflow-y-auto` scroll container, which clips an absolute popup however
- * high its `z-index` - the same reason Compose's own pickers portal out (see `PopoverPortal`'s own doc
- * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
- * semantics, roving focus and keyboard handling are this component's own.
- */
-export default function MenuButton({ label, iconOnly = false, icon, disabled, title, sections, width = DEFAULT_MENU_WIDTH, className = "", "aria-label": ariaLabel, onOpenChange, }) {
-    const [open, setOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(0);
-    // The key of the item whose submenu is showing, or `null` at the top level. Held as a key, not as the
-    // item itself, because `sections` is rebuilt on every render.
-    const [submenuKey, setSubmenuKey] = useState(null);
-    const triggerRef = useRef(null);
-    const itemRefs = useRef([]);
-    // State, not a ref: `PopoverPortal` renders nothing at all until its own positioning effect has run, so
-    // the rows don't exist yet when this component's effects first fire. Keying the focus effect on the
-    // menu node itself makes it run again once they do.
-    const [menuNode, setMenuNode] = useState(null);
-    const openSubmenu = sections
-        .flatMap((section) => section.items)
-        .find((item) => item.key === submenuKey && !!item.submenu);
-    /** The row that leaves a submenu again - synthesized rather than asked of the caller, so every submenu
-     * has the same way back however it was built. */
-    const backItem = {
-        key: "__back",
-        label: `Back to ${ariaLabel}`,
-        keepOpen: true,
-        onSelect: () => leaveSubmenu(),
-    };
-    const shownSections = openSubmenu
-        ? [{ key: "__back", items: [backItem] }, ...openSubmenu.submenu]
-        : sections;
-    const items = shownSections.flatMap((section) => section.items);
-    const enabledIndexes = items.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index !== -1);
-    /** The row focus starts on: the current choice where there is one, else the first row that can take focus. */
-    function initialActiveIndex(within) {
-        const checked = within.findIndex((item) => item.checked === true && !item.disabled);
-        const enabled = within.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index !== -1);
-        return checked === -1 ? (enabled[0] ?? 0) : checked;
-    }
-    function openMenu() {
-        setSubmenuKey(null);
-        setActiveIndex(initialActiveIndex(sections.flatMap((section) => section.items)));
-        setOpen(true);
-        onOpenChange?.(true);
-    }
-    function closeMenu(returnFocus) {
-        setOpen(false);
-        setSubmenuKey(null);
-        onOpenChange?.(false);
-        if (returnFocus) {
-            triggerRef.current?.focus();
-        }
-    }
-    function enterSubmenu(item) {
-        setSubmenuKey(item.key);
-        const rows = item.submenu.flatMap((section) => section.items);
-        // Past the Back row, onto the first row of the submenu itself - or, when none of them can take focus (every row is unavailable right now), onto
-        // the Back row, so the keyboard still has a place to be.
-        setActiveIndex(rows.some((row) => !row.disabled) ? 1 + initialActiveIndex(rows) : 0);
-    }
-    function leaveSubmenu() {
-        // Back on the row the submenu was opened from.
-        const parentIndex = sections.flatMap((section) => section.items).findIndex((item) => item.key === submenuKey);
-        setSubmenuKey(null);
-        setActiveIndex(parentIndex);
-    }
-    /** What a row does when it is chosen: open its submenu, or run it and close unless it asked to stay. */
-    function selectItem(item) {
-        if (item.submenu) {
-            enterSubmenu(item);
-            return;
-        }
-        item.onSelect();
-        if (!item.keepOpen) {
-            closeMenu(true);
-        }
-    }
-    // Roving focus: only the active row is tabbable, and it takes DOM focus whenever it changes, so the
-    // arrow keys move the screen reader's cursor too rather than only a visual highlight.
-    useEffect(() => {
-        if (open && menuNode) {
-            // A disabled row can't take focus, so a menu with nothing enabled focuses its own container -
-            // otherwise the keys it handles would go to whatever had focus before it opened.
-            if (enabledIndexes.length === 0) {
-                menuNode.focus();
-            }
-            else {
-                itemRefs.current[activeIndex]?.focus();
-            }
-        }
-        // `submenuKey` too: drilling in or out can land on the same index in the other level's list, and
-        // the row that index *means* is a different button, which the effect must move focus to.
-    }, [open, activeIndex, submenuKey, menuNode]);
-    function moveActive(delta) {
-        if (enabledIndexes.length === 0) {
-            return;
-        }
-        const position = enabledIndexes.indexOf(activeIndex);
-        setActiveIndex(enabledIndexes[(position + delta + enabledIndexes.length) % enabledIndexes.length]);
-    }
-    function handleMenuKeyDown(e) {
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            moveActive(1);
-        }
-        else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            moveActive(-1);
-        }
-        else if (e.key === "Home") {
-            e.preventDefault();
-            setActiveIndex(enabledIndexes[0] ?? 0);
-        }
-        else if (e.key === "End") {
-            e.preventDefault();
-            setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? 0);
-        }
-        else if (e.key === "ArrowRight" && items[activeIndex]?.submenu) {
-            e.preventDefault();
-            enterSubmenu(items[activeIndex]);
-        }
-        else if ((e.key === "ArrowLeft" || e.key === "Escape") && openSubmenu) {
-            // ARIA's own submenu behaviour: Escape leaves the submenu for its parent menu rather than
-            // dismissing the whole thing.
-            e.preventDefault();
-            leaveSubmenu();
-        }
-        else if (e.key === "Escape" || e.key === "Tab") {
-            e.preventDefault();
-            closeMenu(true);
-        }
-    }
-    function handleTriggerKeyDown(e) {
-        if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-            e.preventDefault();
-            openMenu();
-        }
-    }
-    let itemIndex = -1;
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": ariaLabel, title: title, disabled: disabled, onClick: () => (open ? closeMenu(false) : openMenu()), onKeyDown: handleTriggerKeyDown, className: iconOnly
-                    ? className
-                    : [
-                        // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
-                        // whatever sits beside it in the toolbar off the edge of a 384px list column.
-                        "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
-                        className,
-                    ].join(" "), children: [icon, !iconOnly && _jsx("span", { className: "truncate", children: label }), !iconOnly && _jsx(HiChevronDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-muted" })] }), open && (_jsx(PopoverPortal, { anchorRef: triggerRef, onClose: () => closeMenu(false), width: width, height: menuHeight(shownSections, width), "aria-label": ariaLabel, children: _jsx("div", { ref: setMenuNode, role: "menu", tabIndex: -1, "aria-label": ariaLabel, onKeyDown: handleMenuKeyDown, className: "flex-1 overflow-y-auto py-1", children: shownSections.map((section, sectionIndex) => (_jsxs("div", { role: "group", "aria-label": section.label, className: sectionIndex > 0 ? "border-t border-border mt-1 pt-1" : "", children: [section.label && (_jsx("div", { "aria-hidden": "true", className: "h-6 flex items-center px-3 text-xs font-semibold uppercase tracking-wide text-text-muted", children: section.label })), section.items.map((item) => {
-                                itemIndex += 1;
-                                const index = itemIndex;
-                                const role = item.role ?? "menuitem";
-                                return (_jsxs("button", { ref: (node) => {
-                                        itemRefs.current[index] = node;
-                                    }, type: "button", role: role, disabled: item.disabled, title: item.title, tabIndex: index === activeIndex ? 0 : -1, ...(role === "menuitem"
-                                        ? {}
-                                        : { "aria-checked": item.checked === "mixed" ? "mixed" : !!item.checked }), ...(item.submenu ? { "aria-haspopup": "menu", "aria-expanded": false } : {}), onClick: () => selectItem(item), className: "w-full flex items-start gap-2 px-3 py-2 text-left text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsxs("span", { className: "w-4 shrink-0 flex justify-center pt-0.5", children: [item.key === "__back" && (_jsx(HiChevronLeft, { size: 14, "aria-hidden": "true", className: "text-text-muted" })), item.checked === "mixed" ? (_jsx(HiMinus, { size: 14, "aria-hidden": "true", className: "text-primary-dark" })) : (item.checked && _jsx(HiCheck, { size: 14, "aria-hidden": "true", className: "text-primary-dark" }))] }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex h-5 items-center gap-1.5", children: [item.icon && (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: item.icon })), item.swatchColor && (_jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: item.swatchColor } })), _jsx("span", { className: "truncate", children: item.label })] }), item.description && (_jsx("span", { className: "block h-4 text-xs leading-4 text-text-muted truncate font-normal", children: item.description }))] }), item.submenu && (_jsx(HiChevronRight, { size: 14, "aria-hidden": "true", className: "shrink-0 mt-0.5 text-text-muted" }))] }, item.key));
-                            }), section.note && _jsx("p", { className: "px-3 py-1 text-xs leading-4 text-text-muted", children: section.note })] }, section.key))) }) }))] }));
-}
+// `MenuButton` lives in `lib/components/menus` so shared form components (`ImageEditBadge`) can use it; this keeps the mail components' import path working.
+export { default, menuHeight } from "../../../../lib/components/menus/MenuButton.js";

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

@@ -48,7 +48,7 @@ import LabelMenuButton from "./labelMenu.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import EncryptedBody from "./reading/EncryptedBody.js";
 import { ENCRYPTED_SUBJECT_PLACEHOLDER, displaySubject } from "./reading/EncryptedPreview.js";
-import { rememberDecrypted } from "../../mail/decryptedMessages.js";
+import { mapWithConcurrency, rememberDecrypted } from "../../mail/decryptedMessages.js";
 import MessageBody, { BodySkeleton } from "./reading/MessageBody.js";
 import { BODY_FONT_STYLE, CardShell, SenderAvatar, SubjectCard } from "./reading/MessageCard.js";
 import MessageMoreMenu from "./reading/MessageMoreMenu.js";
@@ -210,6 +210,8 @@ function subjectCore(subject) {
 function sameSubject(subject, threadSubject) {
     return subjectCore(subject) === subjectCore(threadSubject);
 }
+/** How many earlier messages of a conversation are loaded at once when printing it. */
+const PRINT_CONCURRENCY = 4;
 function formatBytes(bytes) {
     if (bytes >= 1000000)
         return `${(bytes / 1000000).toFixed(1)} MB`;
@@ -779,10 +781,11 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         (verifiedOrSealed || security.state === "encrypted" || security.state === "encrypted_unverified_signer" || security.state === "signature_failed")
         ? security.attachments
         : undefined;
-    // Any state that involves a signature shows the address actually signed for (the protected From when the message
+    // Any state with a valid signature shows the address actually signed for (the protected From when the message
     // carries one - it equals the outer From's address, or verification would have failed) next to the badge, never a
-    // display name alone: anyone can put "ceo@corp.com" in the name of a message sent from x@corp-pay.com.
-    const signatureShown = security !== null && security.state !== "unprotected" && security.state !== "encrypted";
+    // display name alone: anyone can put "ceo@corp.com" in the name of a message sent from x@corp-pay.com. A failed
+    // signature vouches for nothing, so its message shows the outer address like an unsigned one.
+    const signatureShown = security !== null && (verifiedOrSealed || UNVERIFIED_SIGNER_STATES.has(security.state));
     const senderAddress = (signatureShown ? extractAddresses(security.protectedHeaders?.from)[0] : undefined) ?? message.from.address;
     const senderName = message.from.displayName;
     const senderNameCheck = checkSenderName(senderName, senderAddress);
@@ -841,11 +844,12 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         try {
             const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version));
             const older = await olderConversationMessages(message, client).catch(() => []);
-            const earlier = await Promise.all(older.map((other) => printableOlderMessage(other).catch(() => ({
+            // A few at a time: a long conversation is hundreds of messages, each of them several requests.
+            const earlier = await mapWithConcurrency(older, PRINT_CONCURRENCY, (other) => printableOlderMessage(other).catch(() => ({
                 subject: other.subject || "(no subject)",
                 headers: printHeaders(other, formatMailAddress(other.from)),
                 content: { kind: "text", text: "This message could not be loaded, so it is not printed." },
-            }))));
+            })));
             const printable = buildConversationPrintDocument(shownSubject, [
                 {
                     subject: shownSubject,