@rapidmx/web-client 0.10.0 → 0.11.0

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import { ReadingPaneSkeleton } from "./reading/MessageCard.js";
 /**
  * The reading pane (`MessageDetailPane`, and the thread pane that stacks it) is only rendered once a message is selected, and
  * it is the heaviest piece of the inbox after the compose window - message security, the body sanitizer, the labels and move
@@ -19,7 +19,7 @@ import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
  * code was already fetched. This reads the loaded component synchronously when there is one, so an already-loaded pane renders
  * on the click's own frame, and it can retry a failed download.
  */
-function lazyComponent(load) {
+function lazyComponent(load, skeleton) {
     let loaded;
     let loading;
     /** Starts (once) loading the component's code. Rejects if it can't be downloaded - and then a later call tries again. */
@@ -47,20 +47,21 @@ function lazyComponent(load) {
             const Component = loaded;
             return _jsx(Component, { ...props });
         }
-        return failed ? _jsx(ChunkFailed, {}) : _jsx(PaneSkeleton, {});
+        return failed ? _jsx(ChunkFailed, {}) : skeleton(props);
     }
     return { Lazy, start };
 }
-function PaneSkeleton() {
-    return (_jsxs("div", { role: "status", "aria-busy": "true", className: "flex-1 p-6 flex flex-col gap-3", children: [_jsx("span", { className: "sr-only", children: "Loading the message" }), _jsx(Skeleton, { width: "w-2/3", height: "h-6" }), _jsx(Skeleton, { width: "w-1/3" }), _jsx(Skeleton, { height: "h-40" })] }));
-}
 /** A chunk that can't be downloaded (offline, or replaced by a deploy since this page loaded) is the one failure a reading
  * pane can't recover from by itself: say so, with the fix, rather than leaving a blank pane. */
 function ChunkFailed() {
     return (_jsx("div", { className: "flex-1 p-6", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: "This part of the page couldn\u2019t be loaded. Check your connection, then reload." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => window.location.reload(), children: "Reload" })] }) }));
 }
-const messageDetailPane = lazyComponent(() => import("./MessageDetailPane.js"));
-const conversationThreadPane = lazyComponent(() => import("./ConversationThreadPane.js"));
+// While the code loads the pane already draws its frame - the header card with the subject the list row knows, and a card of placeholder lines - so
+// the click is answered on its own frame and the messages only fill in.
+const messageDetailPane = lazyComponent(() => import("./MessageDetailPane.js"), 
+// `LazyMessageDetailPane` renders the empty state, not this, for no message.
+(props) => _jsx(ReadingPaneSkeleton, { subject: props.message.subject }));
+const conversationThreadPane = lazyComponent(() => import("./ConversationThreadPane.js"), (props) => _jsx(ReadingPaneSkeleton, { subject: props.conversation.subject, messageCount: props.conversation.messageCount }));
 /** Starts downloading the reading pane's code, for the page to call when it has nothing better to do. Never rejects. */
 export function prefetchReadingPane() {
     messageDetailPane.start().catch(() => undefined);

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

@@ -36,15 +36,14 @@ export interface MailSelectionBarProps {
     onArchive: () => void;
     /** Moves the selection into `folderUid`, resolving once the bulk update has settled. It resolves
      * whether or not that update was rejected: a bulk update is applied element by element, so a failure
-     * is explained in this bar (along with the reload it triggers) rather than in the prompt, which would
-     * be claiming the move simply didn't happen. */
+     * is explained by a pop-up (see `notifyApiError()`), raised by the page along with the reload it triggers, rather than in the
+     * prompt, which would be claiming the move simply didn't happen. */
     onMoveTo: (folderUid: string) => Promise<void>;
     onReportJunk: () => void;
     onDelete: () => void;
     /** A bulk action is in flight - every action is held until it settles, since the next one would send
      * `version`s the first has already superseded. */
     busy: boolean;
-    error: string | null;
     /** The keyboard acts on this selection (Delete, Ctrl+Q, Ctrl+U, Insert - registered by the page): Mark read, Mark unread, Flag and
      * Delete name their shortcut in the tooltip and `aria-keyshortcuts`. */
     shortcuts?: boolean;
@@ -59,4 +58,4 @@ export interface MailSelectionBarProps {
  * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, error, shortcuts, }: MailSelectionBarProps): React.JSX.Element;
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, }: MailSelectionBarProps): React.JSX.Element;

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

@@ -4,7 +4,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import LabelMenuButton from "./labelMenu.js";
 import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
 import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
@@ -23,7 +22,7 @@ function actionClassName() {
  * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, error, shortcuts, }) {
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, }) {
     const env = useKeyEnvironment();
     /** `title` and `aria-keyshortcuts` for an action the keyboard also does; `reason` (why it is disabled) wins the tooltip. */
     const hint = (label, shortcut, reason) => shortcuts
@@ -52,5 +51,5 @@ export default function MailSelectionBar({ selected, listed, totals, onSelectAll
     const appliedToSome = labels.filter((label) => selected.some((m) => m.labelUids?.includes(label.uid)) && !appliedToAll.includes(label));
     return (_jsxs("div", { className: "border-b border-border", children: [_jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: mailboxUid, folders: folders, currentFolderUid: currentFolderUid, count: selected.length, onMove: onMoveTo, onFolderCreated: onFolderCreated }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-surface-alt", children: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-semibold text-text", children: [selectedCount, totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : "", " selected"] }), _jsx("button", { type: "button", onClick: onSelectAll, disabled: allSelected || listedCount === 0, className: actionClassName(), children: "Select all" }), _jsx("button", { type: "button", onClick: onClearSelection, disabled: selectedCount === 0, className: actionClassName(), children: "Clear" }), _jsx("button", { type: "button", onClick: onCancel, className: `${actionClassName()} ml-auto`, children: "Cancel" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1", children: [_jsx("button", { type: "button", onClick: () => onSetRead(true), disabled: none || busy, className: actionClassName(), ...hint("Mark read", SHORTCUTS.mail.markRead), children: "Mark read" }), _jsx("button", { type: "button", onClick: () => onSetRead(false), disabled: none || busy, className: actionClassName(), ...hint("Mark unread", SHORTCUTS.mail.markUnread), children: "Mark unread" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(true), disabled: none || busy, className: actionClassName(), ...hint("Flag", SHORTCUTS.mail.flag), children: "Flag" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(false), disabled: none || busy, className: actionClassName(), children: "Unflag" }), _jsx("button", { type: "button", onClick: onArchive, disabled: none || busy || !!archiveReason, title: archiveReason, className: actionClassName(), children: "Archive" }), _jsx(LabelMenuButton, { "aria-label": "Apply label", label: "Apply label", className: "text-sm", labels: labels, mailboxUid: mailboxUid, onLabelCreated: onLabelCreated, applied: appliedToAll.map((label) => label.uid), partial: appliedToSome.map((label) => label.uid), onCommit: onApplyLabels, busy: busy, disabled: none || busy, note: selected.length === 1
                             ? "Ticked labels are applied, unticked ones removed."
-                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy || !!deleteReason, className: actionClassName(), ...hint("Delete", SHORTCUTS.mail.delete, deleteReason), children: "Delete" })] }), error && (_jsx("div", { className: "px-3 pb-2", children: _jsx(Alert, { children: error }) }))] }));
+                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy || !!deleteReason, className: actionClassName(), ...hint("Delete", SHORTCUTS.mail.delete, deleteReason), children: "Delete" })] })] }));
 }

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

@@ -24,9 +24,6 @@ export declare function trustSignerErrorMessage(err: unknown): string;
 /** Groups a fingerprint into 4-character blocks (`AB12 CD34 ...`), ignoring any separators it came with, so it can be
  * read out and compared with the sender over another channel. */
 export declare function formatFingerprint(fingerprint: string): string;
-/** Sanitizes a client-rendered body for `srcDoc` (DOMPurify plus every remote resource reference stripped - see
- * react-shared's `messageBodySanitizer.ts`), with the CSP meta as its very first element. */
-export declare function buildSecureSrcDoc(html: string): string;
 export interface MessageDetailPaneProps {
     message: Message | null;
     attachments: Attachment[];
@@ -86,10 +83,23 @@ export interface MessageDetailPaneProps {
     /** Handed a label created from the Labels menu, for the caller to add to `labels`. Without it the menu
      * offers no "New label" row, only the link to where labels are managed. */
     onLabelCreated?: (label: Label) => void;
-    /** Rendered as one message of a thread (`ConversationThreadPane`) rather than as the pane itself: the
-     * subject becomes a heading under the thread's own, since a document has one `h1` and the thread's is
-     * the conversation. Everything else - the badges, the actions, the body - is identical. */
+    /** Rendered as one message of a thread (`ConversationThreadPane`) rather than as the pane itself: only its card is drawn - the thread
+     * owns the subject card, the scrolling and the `h1` - and the message's own subject appears (as an `h3`) only when it differs from the
+     * thread's (`threadSubject`). Everything else - the badges, the actions, the body - is identical. */
     inThread?: boolean;
+    /** The thread's subject, for a message of a thread to tell whether its own subject is worth showing. */
+    threadSubject?: string;
+    /** In a thread, what makes the sender line of this expanded card the button that collapses it: the id of the body it controls, whether the
+     * message is unread (which draws the accent bar and tint), what it does, and where to put its ref. */
+    threadHeader?: {
+        bodyId: string;
+        unread: boolean;
+        onToggle: () => void;
+        buttonRef: (node: HTMLButtonElement | null) => void;
+    };
+    /** Draw the Reply and Forward buttons at the foot of the card - by default for the single-message pane, and in a thread only where the
+     * caller asks (the newest expanded message). */
+    footer?: boolean;
     /**
      * Registers this pane's keyboard shortcuts - Reply, Reply all, Forward, Archive, Move to - so they act on this message. Only the message
      * the keyboard is acting on should set it: the one pane beside the list, or the opened message of a thread (each expanded message of a
@@ -98,7 +108,8 @@ export interface MessageDetailPaneProps {
     shortcuts?: boolean;
 }
 /**
- * A message's reading pane — header (subject/from/to/attachments) plus a sandboxed iframe for the body.
+ * A message's reading pane - a subject card, and under it the message as a card: header (sender, recipients, time, actions), notices, attachments,
+ * the body (`reading/MessageBody`: an isolated frame exactly as tall as its content, or text) and a footer. Rendered with `inThread`, only the card.
  * Shared by the desktop inline pane (`apps/www/index.tsx`, always visible alongside the message list),
  * and the mobile detail route (`apps/www/messages/[uid].tsx`, a full page on its own reached by tapping
  * a message row) — see each call site for how `message`/`attachments`/`isSentItems` are sourced. The

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

@@ -4,11 +4,10 @@ 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 { HiOutlineArchiveBox, HiOutlineArrowUturnLeft, HiOutlineArrowUturnRight, HiOutlineCheck, HiOutlineExclamationTriangle, HiOutlineFolderArrowDown, HiOutlineLockClosed, } from "react-icons/hi2";
+import { HiOutlineArchiveBox, HiOutlineArrowUturnLeft, HiOutlineArrowUturnRight, HiOutlineCheck, HiOutlineExclamationTriangle, HiOutlineFolderArrowDown, HiOutlineLockClosed, HiOutlineMoon, HiOutlineSun, } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { approveReceipt, archiveMessage, attachmentContentUrl, cancelScheduledSend, declineReceipt, getMailbox, getMessage, getMessageRawContent, moveMessage, recallMessage, setMessageLabels, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { buildForwardQuote, buildReplyQuote, buildReplyRecipients, buildReplyThreading, forwardSubject, replySubject, } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
-import { sanitizeMessageBodyHtml } from "@rapidmx/react-shared/mail/messageBodySanitizer.js";
 import MoveToFolderDialog from "./MoveToFolderDialog.js";
 import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
 import { extractAddresses } from "@rapidmx/react-shared/crypto/mime.js";
@@ -23,7 +22,7 @@ import { prefetchComposeWindow, useCompose } from "./compose/ComposeContext.js";
 import { loadOriginalMessage, prefetchOriginalMessage } from "./compose/quotedBody.js";
 import { formatRecipient } from "./compose/recipients.js";
 import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
-import { RecipientLine } from "./MailAddress.js";
+import MailAddress, { RecipientLine } from "./MailAddress.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
 import { SHORTCUTS } from "../../keyboard/keymap.js";
@@ -35,6 +34,12 @@ import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import LabelMenuButton from "./labelMenu.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import EncryptedBody from "./reading/EncryptedBody.js";
+import { displaySubject } from "./reading/EncryptedPreview.js";
+import MessageBody, { BodySkeleton } from "./reading/MessageBody.js";
+import { BODY_FONT_STYLE, CardShell, SenderAvatar, SubjectCard } from "./reading/MessageCard.js";
+import { useViewOriginal } from "./reading/viewOriginal.js";
+import { ROW_FOCUS_CLASS, UnreadLabel, dateClass, senderClass } from "./unreadStyle.js";
 /** Labels/styling for `specs/end-to-end_encryption.md`'s "Message Security Indicators" table - kept as
  * plain data (not JSX) so `SecurityIndicator` below stays a trivial lookup. "Signature failed" MUST NOT
  * read as a muted variant of "verified" (a failed signature is a stronger negative than no signature at
@@ -141,7 +146,9 @@ function IconAction({ icon, label, onClick, disabled, busy, onPrefetch, shortcut
 function SecurityIndicator({ security }) {
     const { label, className } = SECURITY_INDICATOR[security.state];
     if (security.state !== "verified_at_first_open") {
-        return _jsx("span", { className: `text-xs font-medium shrink-0 py-1 px-2.5 rounded-pill ${className}`, children: label });
+        // Every encrypted state carries a small lock, so the badge reads at a glance; the words are unchanged.
+        const encrypted = security.state.startsWith("encrypted");
+        return (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium shrink-0 py-1 px-2.5 rounded-pill ${className}`, children: [encrypted && _jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), label] }));
     }
     return (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium shrink-0 py-1 px-2.5 rounded-pill ${security.laterCompromised ? LATER_COMPROMISED_INDICATOR_CLASS : className}`, children: [security.laterCompromised ? (_jsx(HiOutlineExclamationTriangle, { size: 12, "aria-hidden": "true" })) : (_jsx(HiOutlineCheck, { size: 12, "aria-hidden": "true" })), label] }));
 }
@@ -160,14 +167,13 @@ const GENERIC_SIGNATURE_FAILURE_MESSAGE = "This message's digital signature coul
 /** Fallback when the raw MIME for an encrypted message can't even be fetched/evaluated - an encrypted
  * message must never be mislabeled "Unprotected" just because loading failed. */
 const ENCRYPTED_LOAD_ERROR = "Couldn't load this message's encrypted content.";
-/** Content Security Policy prepended to every client-rendered (decrypted/verified) body's `srcDoc` - the
- * backstop behind the sanitizer below: nothing in the document may load any remote resource at all, only
- * inline styles and `data:`/`cid:` images. */
-const BODY_CSP_META = "<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; img-src data: cid:; style-src 'unsafe-inline'\">";
-/** Sanitizes a client-rendered body for `srcDoc` (DOMPurify plus every remote resource reference stripped - see
- * react-shared's `messageBodySanitizer.ts`), with the CSP meta as its very first element. */
-export function buildSecureSrcDoc(html) {
-    return BODY_CSP_META + sanitizeMessageBodyHtml(html);
+/** A subject without its \`Re:\`/\`Fwd:\` prefixes, lower-cased - what makes two messages of one thread the same subject. */
+function subjectCore(subject) {
+    return (subject ?? "").replace(/^(\s*(re|fw|fwd|aw|sv)\s*:)+/i, "").trim().toLowerCase();
+}
+/** Whether a message's subject says nothing its thread's subject doesn't. */
+function sameSubject(subject, threadSubject) {
+    return subjectCore(subject) === subjectCore(threadSubject);
 }
 function formatBytes(bytes) {
     if (bytes >= 1000000)
@@ -177,7 +183,8 @@ function formatBytes(bytes) {
     return `${bytes} B`;
 }
 /**
- * A message's reading pane — header (subject/from/to/attachments) plus a sandboxed iframe for the body.
+ * A message's reading pane - a subject card, and under it the message as a card: header (sender, recipients, time, actions), notices, attachments,
+ * the body (`reading/MessageBody`: an isolated frame exactly as tall as its content, or text) and a footer. Rendered with `inThread`, only the card.
  * Shared by the desktop inline pane (`apps/www/index.tsx`, always visible alongside the message list),
  * and the mobile detail route (`apps/www/messages/[uid].tsx`, a full page on its own reached by tapping
  * a message row) — see each call site for how `message`/`attachments`/`isSentItems` are sourced. The
@@ -199,7 +206,7 @@ export default function MessageDetailPane(props) {
 function needsRawSecurityEvaluation(message) {
     return !!message.encrypted || message.hasAttachments;
 }
-function MessageDetailContent({ message: messageProp, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, folders, onMoved, onFolderCreated, onReceiptHandled, onArchived, labels, onLabelsChanged, onLabelCreated, inThread, shortcuts, }) {
+function MessageDetailContent({ message: messageProp, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, folders, onMoved, onFolderCreated, onReceiptHandled, onArchived, labels, onLabelsChanged, onLabelCreated, inThread, threadSubject, threadHeader, footer, shortcuts, }) {
     // A copy re-read from the server after an Outbox action was refused (409/403) or a send lease ran out - see
     // `reloadMessage()`. A prop copy newer by `version` wins; an equal-version reload is kept, since claiming a send
     // lease need not bump `version`.
@@ -249,6 +256,14 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
     // 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);
+    // "View original": this message exactly as its author wrote it instead of adapted to the theme, remembered for the session. Offered only
+    // once the body says adapting would change something (`MessageBody`'s `onAdaptable`), or when the reader already chose it.
+    const [viewOriginal, setViewOriginal] = useViewOriginal(messageProp.uid);
+    const [adaptable, setAdaptable] = useState(viewOriginal);
+    // The locked body's Unlock button is waiting on the unlock prompt; and, once it has answered, the focus is to move to the body region.
+    const [unlocking, setUnlocking] = useState(false);
+    const focusBodyRef = useRef(false);
+    const bodyRegionRef = useRef(null);
     // The newest copy of this message known to the Labels popover - normally just the `message` prop,
     // but a successful label toggle's server response is held here too, so a follow-up toggle always
     // builds on the latest `labelUids`/`version` even before (or without) the caller patching its own
@@ -365,14 +380,32 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
             cancelled = true;
         };
     }, [message.uid, message.mailboxUid, message.from.address, message.encrypted, rawEvaluationNeeded, unlockRefresh, readerAddressesKey]);
+    // Whether the body is the locked state right now (an encrypted message this device holds no unlocked keys for), for the subscription below.
+    const lockedRef = useRef(false);
+    lockedRef.current = security?.decryptError !== undefined && !getUnlockedKeys(message.mailboxUid);
+    // After an unlock from the button, the message (or the reason it can't be read) is where the reader's attention is: the focus moves to it once it is
+    // there, since the button that had it is gone.
+    useEffect(() => {
+        if (focusBodyRef.current && security !== null) {
+            focusBodyRef.current = false;
+            bodyRegionRef.current?.focus({ preventScroll: true });
+        }
+    }, [security]);
     // Decrypted plaintext must not outlive the key session that produced it: the moment this mailbox's
     // keys are destroyed (logout, idle timeout, explicit lock), drop the recovered html/text and
-    // re-evaluate - an encrypted message then falls back to its "Unlock to view" state.
+    // re-evaluate - an encrypted message then falls back to its locked state. And the other way round: keys unlocked
+    // from anywhere (compose, another message, the unlock prompt) open a message that was waiting on them, in place.
     useEffect(() => subscribeKeySession((event) => {
-        if (event.mailboxUid === message.mailboxUid && event.state === "locked") {
+        if (event.mailboxUid !== message.mailboxUid) {
+            return;
+        }
+        if (event.state === "locked") {
             setSecurity(null);
             setUnlockRefresh((n) => n + 1);
         }
+        else if (lockedRef.current) {
+            setUnlockRefresh((n) => n + 1);
+        }
     }), [message.mailboxUid]);
     // While restapi's ScheduledSendJob holds a send lease the message is being relayed: cancelling or moving it would be
     // refused (409/403), so the Outbox controls are replaced by "Sending...". When the lease runs out the message is
@@ -405,13 +438,19 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
     async function handleUnlockToView() {
         const mailboxUid = message.mailboxUid;
         const mailboxKeys = mailboxes.find((mb) => mb.uid === mailboxUid)?.keys ?? [];
+        setUnlocking(true);
         try {
             await requestUnlock(mailboxUid, mailboxKeys);
+            // The Unlock button is about to be replaced by the message (or by why it can't be read): the focus goes there, once it has been evaluated.
+            focusBodyRef.current = true;
             setUnlockRefresh((n) => n + 1);
         }
         catch {
             // User dismissed the unlock dialog - security state stays exactly as it was.
         }
+        finally {
+            setUnlocking(false);
+        }
     }
     // Only ever invoked from the "Trust this signer" dialog, which only opens for an unverified-signer result carrying
     // `signerCertificate`. The pin goes on the contact in the mailbox the message belongs to; the evaluation is then
@@ -691,40 +730,46 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
     const recordedConflict = keyChanged && sameFingerprint(senderKeyState?.conflict?.observedKey.fingerprint, keyChanged.signerFingerprint)
         ? senderKeyState.conflict
         : undefined;
-    const shownSubject = (protectedSubject ?? message.subject) || "(no subject)";
-    /**
-     * How tall the message body is - the one thing on this pane worth every pixel it can have.
-     *
-     * The same rule in both places: the pane is a full-height flex column and the body is its one growing
-     * child, so it fills whatever the header leaves (`min-h-0` on both, or a tall body would stretch the
-     * column past the pane instead of scrolling inside it). Inside a thread that height comes from the
-     * message's own row, which `ConversationThreadPane` gives `min-h-full` of its scrolling list - so the
-     * height is still the window's, resolved down the flex chain rather than written here as a `vh`
-     * number, and it follows a resize with no breakpoint to cross.
-     *
-     * Why not size it to its content: that would need the document *inside* the frame to measure and
-     * report itself, and these frames are `sandbox=""` - scripts off - because they render mail from
-     * strangers. So a message longer than the pane keeps its own scrollbar, and everything shorter shows
-     * whole with the frame reaching the bottom of the pane either way.
-     */
-    const bodyClassName = "flex-1 min-h-0 w-full";
-    return (_jsxs("div", { className: `flex-1 min-w-0 min-h-0 flex flex-col${inThread ? "" : " h-full"}`, children: [_jsxs("div", { className: "border-b border-border p-4", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block mb-2", children: "\u2190 Back to messages" })), _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [inThread ? (_jsx("h3", { className: "text-sm font-semibold truncate", children: shownSubject })) : (_jsx("h1", { className: "text-lg font-bold tracking-tight truncate", children: shownSubject })), security && _jsx(SecurityIndicator, { security: security })] }), sendInProgress && (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Sending\u2026" })), isSentItems &&
-                                (message.recallRequestedAt ? (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Recall requested" })) : (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => setConfirming(true), children: "Recall this message" }))), inOutbox && !sendInProgress && message.scheduledSendTime && (_jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("span", { className: "text-xs font-medium text-text-muted py-1 px-2.5 rounded-pill bg-surface-alt", children: ["Scheduled for ", new Date(message.scheduledSendTime).toLocaleString()] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Cancel" })] })), inOutbox && !sendInProgress && !message.scheduledSendTime && draftsFolderUid && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Move to Drafts" }))] }), inOutbox && message.scheduledSendError && (_jsx("div", { className: "mt-2", children: _jsxs(Alert, { children: ["This message wasn\u2019t sent: ", message.scheduledSendError] }) })), cancelError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: cancelError }) })), keyChangeNotice && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: keyChangeNotice })), security && UNVERIFIED_SIGNER_STATES.has(security.state) && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: ["Signed, but the signer isn\u2019t a trusted contact key, so the sender isn\u2019t verified.", security.signerEmails && security.signerEmails.length > 0 && _jsxs(_Fragment, { children: [" Certificate for ", security.signerEmails.join(", "), "."] }), security.signerFingerprint && (_jsxs(_Fragment, { children: [" ", "Fingerprint ", _jsx("span", { className: "font-mono text-xs break-all", children: security.signerFingerprint }), "."] }))] })), pendingConflict && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["This sender has a signing key change waiting for your review, so this signer can\u2019t be trusted from here.", " ", _jsx("a", { href: `/contacts/${encodeURIComponent(senderKeyState.contactUid)}`, className: "font-medium text-primary-dark hover:underline", children: "Review it in Contacts" })] })), trustableCertificate && (_jsx("div", { className: "mt-1.5", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => {
+    const shownSubject = (protectedSubject ?? displaySubject(message.subject)) || "(no subject)";
+    // What the body area shows. Text or HTML the client recovered from a signed or encrypted message is shown as it is (its own sanitizing
+    // happens in `MessageBody`, like every body's); anything else is the server's own `/content`. An encrypted message has nothing worth
+    // fetching until it has been decrypted (the server only has the ciphertext), so it shows the skeleton meanwhile.
+    const bodyContent = security?.text !== undefined
+        ? { kind: "text", text: security.text }
+        : security?.html !== undefined
+            ? { kind: "html", html: security.html }
+            : undefined;
+    const bodyTitle = message.subject || "Message content";
+    const answered = message.flags.answered === true;
+    const forwarded = message.flags.forwarded === true;
+    const cardUnread = threadHeader?.unread ?? false;
+    const showFooter = footer ?? !inThread;
+    const senderRecipient = { displayName: senderName, address: senderAddress };
+    const sendingStatus = (_jsxs(_Fragment, { children: [sendInProgress && (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Sending\u2026" })), isSentItems &&
+                (message.recallRequestedAt ? (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Recall requested" })) : (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => setConfirming(true), children: "Recall this message" }))), inOutbox && !sendInProgress && message.scheduledSendTime && (_jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("span", { className: "text-xs font-medium text-text-muted py-1 px-2.5 rounded-pill bg-surface-alt", children: ["Scheduled for ", new Date(message.scheduledSendTime).toLocaleString()] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Cancel" })] })), inOutbox && !sendInProgress && !message.scheduledSendTime && draftsFolderUid && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Move to Drafts" }))] }));
+    const card = (_jsxs(CardShell, { unread: cardUnread, children: [_jsxs("div", { className: ["flex flex-wrap items-start gap-x-3 gap-y-1 px-4 pt-3 pb-2", cardUnread ? "bg-primary/[0.07]" : ""].join(" "), children: [_jsx(SenderAvatar, { from: senderRecipient }), _jsxs("div", { className: "flex-1 min-w-[12rem]", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [threadHeader ? (_jsx("h2", { className: "min-w-0 flex-1", style: BODY_FONT_STYLE, children: _jsxs("button", { type: "button", ref: threadHeader.buttonRef, onClick: threadHeader.onToggle, "aria-expanded": true, "aria-controls": threadHeader.bodyId, className: [
+                                                "w-full text-left rounded-sm text-sm",
+                                                ROW_FOCUS_CLASS,
+                                            ].join(" "), children: [_jsx(UnreadLabel, { unread: cardUnread }), _jsx(MailAddress, { recipient: senderRecipient, className: senderClass(cardUnread) })] }) })) : (_jsxs("p", { className: "text-sm break-words min-w-0", children: ["From ", _jsx("span", { className: "font-semibold text-text", children: senderLabel })] })), security && _jsx(SecurityIndicator, { security: security })] }), senderNameCheck.misleading && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["The sender\u2019s name \u201C", senderName, "\u201D looks like an email address, but this message was sent from ", _jsx("span", { className: "font-medium", children: senderAddress }), ". Don\u2019t trust it based on the name."] })), _jsx(RecipientLine, { label: "To", recipients: message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc") }), _jsx(RecipientLine, { label: "Cc", recipients: message.recipients.filter((r) => r.type === "cc") }), _jsx(RecipientLine, { label: "Bcc", recipients: message.recipients.filter((r) => r.type === "bcc") })] }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-1", children: [_jsx("time", { dateTime: message.receivedDate, className: ["text-xs mr-1", dateClass(cardUnread)].join(" "), children: new Date(message.receivedDate).toLocaleString() }), adaptable && (_jsx("button", { type: "button", "aria-label": "View original", "aria-pressed": viewOriginal, title: viewOriginal ? "Follow the theme" : "View original", onClick: () => setViewOriginal(!viewOriginal), className: [
+                                    "inline-flex items-center justify-center p-1.5 rounded-md border border-border text-sm text-text hover:bg-surface-alt",
+                                    viewOriginal ? "bg-primary/10" : "",
+                                ].join(" "), children: viewOriginal ? _jsx(HiOutlineMoon, { size: 16, "aria-hidden": "true" }) : _jsx(HiOutlineSun, { size: 16, "aria-hidden": "true" }) })), _jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true" }), label: "Reply", shortcut: keyboard ? SHORTCUTS.mail.reply : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("reply") }), _jsx(IconAction, { icon: _jsxs("span", { className: "inline-flex items-center", "aria-hidden": "true", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16 }), _jsx(HiOutlineArrowUturnLeft, { size: 16, className: "-ml-2.5" })] }), label: "Reply All", shortcut: keyboard ? SHORTCUTS.mail.replyAll : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("replyAll") }), _jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnRight, { size: 16, "aria-hidden": "true" }), label: "Forward", shortcut: keyboard ? SHORTCUTS.mail.forward : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("forward") }), archivable && (_jsx(IconAction, { icon: _jsx(HiOutlineArchiveBox, { size: 16, "aria-hidden": "true" }), label: "Archive", shortcut: keyboard ? SHORTCUTS.mail.archive : undefined, busy: archiving, disabled: archiving, onClick: handleArchive })), movable && (_jsx(IconAction, { icon: _jsx(HiOutlineFolderArrowDown, { size: 16, "aria-hidden": "true" }), label: "Move to", shortcut: keyboard ? SHORTCUTS.mail.move : undefined, onClick: () => setMovePrompt(true) })), labels && labels.length > 0 && (_jsx(LabelMenuButton, { "aria-label": "Labels", label: "Labels", className: "border border-border py-1.5", labels: labels, mailboxUid: message.mailboxUid, onLabelCreated: onLabelCreated, applied: currentLabelsMessage.labelUids ?? [], onCommit: (labelUids) => void handleApplyLabels(labelUids), busy: savingLabels, note: "Ticked labels are applied to this message and unticked ones removed.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }))] })] }), (answered || forwarded) && (_jsx("p", { className: "px-4 py-1.5 text-xs text-text-muted bg-surface-alt border-y border-border", children: answered && forwarded ? "You replied to and forwarded this message." : answered ? "You replied to this message." : "You forwarded this message." })), _jsxs("div", { id: threadHeader?.bodyId, className: "px-4 pb-3 flex flex-col gap-2", children: [inThread && (subjectDiffers || !sameSubject(shownSubject, threadSubject)) && (_jsx("h3", { className: "text-sm font-semibold break-words", children: shownSubject })), _jsx("div", { className: "flex flex-wrap items-center gap-2 empty:hidden", children: sendingStatus }), inOutbox && message.scheduledSendError && _jsxs(Alert, { children: ["This message wasn\u2019t sent: ", message.scheduledSendError] }), cancelError && _jsx(Alert, { children: cancelError }), keyChangeNotice && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: keyChangeNotice })), security && UNVERIFIED_SIGNER_STATES.has(security.state) && (_jsxs("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: ["Signed, but the signer isn\u2019t a trusted contact key, so the sender isn\u2019t verified.", security.signerEmails && security.signerEmails.length > 0 && _jsxs(_Fragment, { children: [" Certificate for ", security.signerEmails.join(", "), "."] }), security.signerFingerprint && (_jsxs(_Fragment, { children: [" ", "Fingerprint ", _jsx("span", { className: "font-mono text-xs break-all", children: security.signerFingerprint }), "."] }))] })), pendingConflict && (_jsxs("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["This sender has a signing key change waiting for your review, so this signer can\u2019t be trusted from here.", " ", _jsx("a", { href: `/contacts/${encodeURIComponent(senderKeyState.contactUid)}`, className: "font-medium text-primary-dark hover:underline", children: "Review it in Contacts" })] })), trustableCertificate && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => {
                                 setTrustError(null);
                                 setTrustConfirmOpen(true);
-                            }, children: "Trust this signer" }) })), subjectDiffers && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: ["The subject shown above is the one the sender signed. It differs from the subject this message was delivered with (\u201C", message.subject, "\u201D), which may have been changed on the way, e.g. by a mailing list."] })), security?.headerTamperDetected && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: "This message's visible From/To/Cc/Date/Subject don't match what the sender actually signed or encrypted \u2014 an intermediary may have altered them after sending. Treat the fields shown above with caution." }) })), security?.state === "verified_at_first_open" && (_jsx("p", { role: "status", className: `mt-2 py-2 px-3 rounded-sm text-sm text-text ${security.laterCompromised ? "bg-warning/15" : "bg-surface-alt"}`, children: verifiedAtFirstOpenMessage(security) })), keyChanged && (_jsxs("section", { "aria-label": "Signing key changed", className: "mt-2 py-3 px-3 rounded-sm text-sm bg-warning/15 text-text flex flex-col gap-2", children: [_jsx("h2", { className: "font-semibold", children: "This sender\u2019s signing key changed" }), _jsxs("p", { children: ["The signature on this message is valid and its certificate names ", senderAddress, ", but it was made with a different key than the one you trust for this sender", keyChanged.state === "verified_at_first_open" ? "." : _jsx(_Fragment, { children: ", so it isn\u2019t verified." })] }), _jsx(KeyChangeReview, { mailboxUid: message.mailboxUid, address: senderAddress, useType: "sign", ownerName: "the sender", current: pinnedSignerKey && { fingerprint: pinnedSignerKey.fingerprint, since: senderKeyState.pinnedSince }, proposed: {
+                            }, children: "Trust this signer" }) })), subjectDiffers && (_jsxs("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: ["The subject shown above is the one the sender signed. It differs from the subject this message was delivered with (\u201C", message.subject, "\u201D), which may have been changed on the way, e.g. by a mailing list."] })), security?.headerTamperDetected && (_jsx(Alert, { children: "This message's visible From/To/Cc/Date/Subject don't match what the sender actually signed or encrypted \u2014 an intermediary may have altered them after sending. Treat the fields shown above with caution." })), security?.state === "verified_at_first_open" && (_jsx("p", { role: "status", className: `py-2 px-3 rounded-sm text-sm text-text ${security.laterCompromised ? "bg-warning/15" : "bg-surface-alt"}`, children: verifiedAtFirstOpenMessage(security) })), keyChanged && (_jsxs("section", { "aria-label": "Signing key changed", className: "py-3 px-3 rounded-sm text-sm bg-warning/15 text-text flex flex-col gap-2", children: [_jsx("h2", { className: "font-semibold", children: "This sender\u2019s signing key changed" }), _jsxs("p", { children: ["The signature on this message is valid and its certificate names ", senderAddress, ", but it was made with a different key than the one you trust for this sender", keyChanged.state === "verified_at_first_open" ? "." : _jsx(_Fragment, { children: ", so it isn\u2019t verified." })] }), _jsx(KeyChangeReview, { mailboxUid: message.mailboxUid, address: senderAddress, useType: "sign", ownerName: "the sender", current: pinnedSignerKey && { fingerprint: pinnedSignerKey.fingerprint, since: senderKeyState.pinnedSince }, proposed: {
                                     fingerprint: keyChanged.signerFingerprint,
                                     emails: keyChanged.signerEmails,
                                     observedAt: recordedConflict?.observedAt,
                                     source: recordedConflict?.source,
-                                }, certificate: keyChanged.signerCertificate, canReject: recordedConflict !== undefined, canResolve: canUpdateMailbox, onResolved: (action) => refreshAfterKeyChange(action === "reject" ? KEPT_CURRENT_SIGNING_KEY_MESSAGE : null), onPinnedKeyChanged: () => refreshAfterKeyChange(KEY_CHANGE_STALE_MESSAGE) })] })), security?.state === "signature_failed" && !keyChanged && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: security.signatureFailureReason
+                                }, certificate: keyChanged.signerCertificate, canReject: recordedConflict !== undefined, canResolve: canUpdateMailbox, onResolved: (action) => refreshAfterKeyChange(action === "reject" ? KEPT_CURRENT_SIGNING_KEY_MESSAGE : null), onPinnedKeyChanged: () => refreshAfterKeyChange(KEY_CHANGE_STALE_MESSAGE) })] })), security?.state === "signature_failed" && !keyChanged && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: security.signatureFailureReason
                             ? SIGNATURE_FAILURE_MESSAGE[security.signatureFailureReason]
-                            : GENERIC_SIGNATURE_FAILURE_MESSAGE })), verifiedOrSealed && !security.protectedHeaders && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The signature covers this message\u2019s content and attachments only. Its Subject, To and Cc weren\u2019t signed, so they could have been changed after it was sent." })), security?.notAddressedToReader && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The recipients this message was signed or encrypted for don\u2019t include this mailbox - it may have been forwarded or re-sent to you unchanged, or you were Bcc\u2019d." })), _jsxs("p", { className: "text-sm text-text-muted mt-1 break-words", children: ["From ", _jsx("span", { className: "font-medium text-text", children: senderLabel }), " \u00B7", " ", new Date(message.receivedDate).toLocaleString()] }), senderNameCheck.misleading && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["The sender\u2019s name \u201C", senderName, "\u201D looks like an email address, but this message was sent from ", _jsx("span", { className: "font-medium", children: senderAddress }), ". Don\u2019t trust it based on the name."] })), _jsx(RecipientLine, { label: "To", recipients: message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc") }), _jsx(RecipientLine, { label: "Cc", recipients: message.recipients.filter((r) => r.type === "cc") }), _jsx(RecipientLine, { label: "Bcc", recipients: message.recipients.filter((r) => r.type === "bcc") }), _jsxs("div", { className: "flex flex-wrap gap-1 mt-3", children: [_jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnLeft, { size: 16, "aria-hidden": "true" }), label: "Reply", shortcut: keyboard ? SHORTCUTS.mail.reply : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("reply") }), _jsx(IconAction, { icon: _jsxs("span", { className: "inline-flex items-center", "aria-hidden": "true", children: [_jsx(HiOutlineArrowUturnLeft, { size: 16 }), _jsx(HiOutlineArrowUturnLeft, { size: 16, className: "-ml-2.5" })] }), label: "Reply All", shortcut: keyboard ? SHORTCUTS.mail.replyAll : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("replyAll") }), _jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnRight, { size: 16, "aria-hidden": "true" }), label: "Forward", shortcut: keyboard ? SHORTCUTS.mail.forward : undefined, disabled: preparingCompose, onPrefetch: prefetchReply, onClick: () => void handleReplyOrForward("forward") }), archivable && (_jsx(IconAction, { icon: _jsx(HiOutlineArchiveBox, { size: 16, "aria-hidden": "true" }), label: "Archive", shortcut: keyboard ? SHORTCUTS.mail.archive : undefined, busy: archiving, disabled: archiving, onClick: handleArchive })), movable && (_jsx(IconAction, { icon: _jsx(HiOutlineFolderArrowDown, { size: 16, "aria-hidden": "true" }), label: "Move to", shortcut: keyboard ? SHORTCUTS.mail.move : undefined, onClick: () => setMovePrompt(true) })), labels && labels.length > 0 && (_jsx(LabelMenuButton, { "aria-label": "Labels", label: "Labels", className: "border border-border py-1.5", labels: labels, mailboxUid: message.mailboxUid, onLabelCreated: onLabelCreated, applied: currentLabelsMessage.labelUids ?? [], onCommit: (labelUids) => void handleApplyLabels(labelUids), busy: savingLabels, note: "Ticked labels are applied to this message and unticked ones removed.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }))] }), archiveError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: archiveError }) })), labelsError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: labelsError }) })), labels && (currentLabelsMessage.labelUids?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 mt-2", children: currentLabelsMessage
+                            : GENERIC_SIGNATURE_FAILURE_MESSAGE })), verifiedOrSealed && !security.protectedHeaders && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The signature covers this message\u2019s content and attachments only. Its Subject, To and Cc weren\u2019t signed, so they could have been changed after it was sent." })), security?.notAddressedToReader && !isSentItems && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The recipients this message was signed or encrypted for don\u2019t include this mailbox - it may have been forwarded or re-sent to you unchanged, or you were Bcc\u2019d." })), archiveError && _jsx(Alert, { children: archiveError }), labelsError && _jsx(Alert, { children: labelsError }), labels && (currentLabelsMessage.labelUids?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: currentLabelsMessage
                             .labelUids.map((uid) => labels.find((l) => l.uid === uid))
                             .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))) })), ["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: [senderLabel, " 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 }) })), security?.state === "signature_failed" && innerAttachments && innerAttachments.length > 0 && (_jsx("p", { role: "status", className: "mt-3 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: "These attachments come from a message whose signature couldn\u2019t be verified. Open them only if you trust the sender." })), innerAttachments
-                        ? innerAttachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 mt-3", children: innerAttachments.map((attachment, index) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => downloadMimeAttachment(attachment), 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 ?? `Unnamed ${attachment.contentType} attachment` }) }, `${index}:${attachment.filename ?? ""}`))) }))
-                        : 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 }), !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?.text !== undefined ? (_jsx("pre", { "aria-label": message.subject || "Message content", className: `${bodyClassName} overflow-auto p-4 m-0 text-sm font-sans whitespace-pre-wrap break-words`, children: security.text })) : security?.html !== undefined ? (_jsx("iframe", { title: message.subject || "Message content", srcDoc: buildSecureSrcDoc(security.html), sandbox: "", className: `${bodyClassName} border-0` }, message.uid)) : (_jsx("iframe", { title: message.subject || "Message content", src: `/api/mail/messages/${encodeURIComponent(message.uid)}/content`, sandbox: "", className: `${bodyClassName} border-0` }, message.uid)), _jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: message.mailboxUid, folders: folders ?? [], currentFolderUid: message.folderUid, onMove: handleMove, onFolderCreated: onFolderCreated }), _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" })] })] }), _jsx(Modal, { open: trustConfirmOpen && !!trustableCertificate, onClose: () => !trusting && setTrustConfirmOpen(false), title: "Trust this signer?", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("p", { children: ["Mail from ", _jsx("span", { className: "font-medium", children: senderAddress }), " signed with this certificate will show as verified."] }), _jsxs("dl", { className: "flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "Certificate issued to" }), _jsx("dd", { children: security?.signerEmails?.length ? security.signerEmails.join(", ") : "No email address" }), _jsx("dt", { className: "text-xs text-text-muted", children: "Fingerprint" }), _jsx("dd", { className: "font-mono text-xs break-all", children: security?.signerFingerprint ? formatFingerprint(security.signerFingerprint) : "Unknown" })] }), _jsx("p", { className: "text-text-muted", children: "Anyone can create a certificate naming any address. Before trusting it, confirm this fingerprint with the sender through another channel, such as a phone call." }), trustError && _jsx(Alert, { children: trustError }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", className: "!w-auto", loading: trusting, disabled: trusting, onClick: () => handleTrustSigner(senderAddress, trustableCertificate), children: "Trust" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => setTrustConfirmOpen(false), children: "Cancel" })] })] }) })] }));
+                        .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [senderLabel, " 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(Alert, { children: receiptError }), security?.state === "signature_failed" && innerAttachments && innerAttachments.length > 0 && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: "These attachments come from a message whose signature couldn\u2019t be verified. Open them only if you trust the sender." })), innerAttachments
+                        ? innerAttachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", children: innerAttachments.map((attachment, index) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => downloadMimeAttachment(attachment), 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 ?? `Unnamed ${attachment.contentType} attachment` }) }, `${index}:${attachment.filename ?? ""}`))) }))
+                        : attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", 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))) })), _jsx("div", { ref: bodyRegionRef, tabIndex: -1, className: "outline-none", children: message.encrypted && security === null ? (_jsx(BodySkeleton, {})) : security?.decryptError !== undefined ? (_jsx(EncryptedBody, { locked: lockedRef.current, reason: security.decryptError, unlocking: unlocking, onUnlock: () => void handleUnlockToView() })) : (_jsx(MessageBody, { messageUid: message.uid, messageVersion: message.version, title: bodyTitle, content: bodyContent, attachments: attachments, inlineParts: innerAttachments, original: viewOriginal, onAdaptable: setAdaptable })) })] }), showFooter && (_jsxs("div", { className: "flex flex-wrap gap-2 px-4 py-3 border-t border-border print:hidden", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Reply to this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("reply"), children: "Reply" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Forward this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("forward"), children: "Forward" })] }))] }));
+    return (_jsxs("div", { className: inThread ? "min-w-0" : "flex-1 min-w-0 min-h-0 flex flex-col h-full", children: [inThread ? (card) : (_jsxs(_Fragment, { children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block px-4 pt-3", children: "\u2190 Back to messages" })), _jsx(SubjectCard, { subject: shownSubject }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: card })] })), _jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: message.mailboxUid, folders: folders ?? [], currentFolderUid: message.folderUid, onMove: handleMove, onFolderCreated: onFolderCreated }), _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" })] })] }), _jsx(Modal, { open: trustConfirmOpen && !!trustableCertificate, onClose: () => !trusting && setTrustConfirmOpen(false), title: "Trust this signer?", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("p", { children: ["Mail from ", _jsx("span", { className: "font-medium", children: senderAddress }), " signed with this certificate will show as verified."] }), _jsxs("dl", { className: "flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "Certificate issued to" }), _jsx("dd", { children: security?.signerEmails?.length ? security.signerEmails.join(", ") : "No email address" }), _jsx("dt", { className: "text-xs text-text-muted", children: "Fingerprint" }), _jsx("dd", { className: "font-mono text-xs break-all", children: security?.signerFingerprint ? formatFingerprint(security.signerFingerprint) : "Unknown" })] }), _jsx("p", { className: "text-text-muted", children: "Anyone can create a certificate naming any address. Before trusting it, confirm this fingerprint with the sender through another channel, such as a phone call." }), trustError && _jsx(Alert, { children: trustError }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", className: "!w-auto", loading: trusting, disabled: trusting, onClick: () => handleTrustSigner(senderAddress, trustableCertificate), children: "Trust" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => setTrustConfirmOpen(false), children: "Cancel" })] })] }) })] }));
 }

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { OutboxFolderStatus } from "../../mail/outbox/outboxState.js";
+export interface OutboxBadgeProps {
+    /** How many messages the Outbox holds: the folder's own count, which already includes what this tab has just sent. */
+    total: number;
+    /** What they are doing, when known (`useOutboxStatus()`). */
+    status?: OutboxFolderStatus;
+    /** How many of this mailbox's messages this tab is still handing to the server. */
+    pendingHere: number;
+}
+/**
+ * The Outbox's count, next to its name: a small pill. While anything is on its way it says so - an animated dot and an accent colour (the dot's
+ * animation is CSS, off under `prefers-reduced-motion`); when a message failed and is waiting for the user it is red; otherwise it is the plain
+ * count every "how many are in here" folder shows. Screen readers get the same as text ("2 messages sending"), in a polite live region so a
+ * change - a message going out, a failure - is announced.
+ */
+export default function OutboxBadge({ total, status, pendingHere }: OutboxBadgeProps): React.JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { outboxLabel } from "../../mail/outbox/outboxState.js";
+/**
+ * The Outbox's count, next to its name: a small pill. While anything is on its way it says so - an animated dot and an accent colour (the dot's
+ * animation is CSS, off under `prefers-reduced-motion`); when a message failed and is waiting for the user it is red; otherwise it is the plain
+ * count every "how many are in here" folder shows. Screen readers get the same as text ("2 messages sending"), in a polite live region so a
+ * change - a message going out, a failure - is announced.
+ */
+export default function OutboxBadge({ total, status, pendingHere }) {
+    const failed = status?.failed ?? 0;
+    const inFlight = (status ? status.sending + status.retrying : 0) + pendingHere;
+    const state = failed > 0 ? "failed" : inFlight > 0 ? "sending" : "idle";
+    const label = outboxLabel(total, status, pendingHere);
+    return (_jsxs("span", { "data-testid": "outbox-badge", "data-state": state, title: label, "aria-live": "polite", className: [
+            "inline-flex items-center gap-1 rounded-pill px-1.5 py-0.5 text-xs",
+            state === "failed" ? "bg-danger font-bold text-white" : state === "sending" ? "bg-primary/15 font-bold text-primary-dark" : "font-medium text-text-muted",
+        ].join(" "), children: [state === "sending" && _jsx("span", { "aria-hidden": "true", className: "rr-sending-dot h-1.5 w-1.5 rounded-full bg-primary" }), _jsx("span", { "aria-hidden": "true", children: total }), _jsxs("span", { className: "sr-only", children: [" ", label] })] }));
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { Message } from "@rapidmx/react-shared/mail/mailApi.js";
+/**
+ * The state line an Outbox list row carries under its subject: "Sending...", "Retrying (attempt 2, at 10:15)", "Not sent: <reason>" or
+ * "Scheduled for ...". Read from the message's own `scheduledSend*` fields (see `outboxItemStatus()`), so it follows the list as the server's
+ * events refresh it. A failed one is the one that needs the user: red, and its reason is spelled out.
+ */
+export default function OutboxRowStatus({ message }: {
+    message: Message;
+}): React.JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { outboxItemStatus } from "../../mail/outbox/outboxState.js";
+/**
+ * The state line an Outbox list row carries under its subject: "Sending...", "Retrying (attempt 2, at 10:15)", "Not sent: <reason>" or
+ * "Scheduled for ...". Read from the message's own `scheduledSend*` fields (see `outboxItemStatus()`), so it follows the list as the server's
+ * events refresh it. A failed one is the one that needs the user: red, and its reason is spelled out.
+ */
+export default function OutboxRowStatus({ message }) {
+    const status = outboxItemStatus(message);
+    const at = status.at === undefined ? "" : new Date(status.at).toLocaleString();
+    const text = status.state === "failed"
+        ? `Not sent: ${status.error}`
+        : status.state === "retrying"
+            ? `Retrying (attempt ${status.attempts + 1}${at ? `, ${at}` : ""})`
+            : status.state === "scheduled"
+                ? `Scheduled for ${at}`
+                : "Sending…";
+    return (_jsxs("div", { "data-testid": "outbox-row-status", "data-state": status.state, className: ["flex items-center gap-1.5 text-xs", status.state === "failed" ? "font-semibold text-danger" : "text-text-muted"].join(" "), children: [status.state === "sending" && _jsx("span", { "aria-hidden": "true", className: "rr-sending-dot h-1.5 w-1.5 shrink-0 rounded-full bg-primary" }), _jsx("span", { className: "truncate", children: text })] }));
+}

package/dist/apps/shared/components/mail/compose/ComposeContext.d.ts

@@ -1,5 +1,8 @@
 import React, { PropsWithChildren } from "react";
 import { DraftThreading } from "@rapidmx/react-shared/mail/mailApi.js";
+import { ResumeCompose } from "../../../mail/outbox/composeBridge.js";
+/** The CSS variable (on `<html>`) that holds how far down the screen the open compose windows start, in px. */
+export declare const COMPOSE_TOP_VAR = "--rr-compose-top";
 /**
  * Starts downloading the compose window's code without opening one - on hover/focus of a Compose or Reply button and when
  * the browser is idle after the inbox has loaded - so that clicking it finds the chunk already in memory. Safe to call
@@ -32,6 +35,8 @@ export interface ComposeSession {
     quotePending?: boolean;
     /** What `OpenComposeInput.pending` resolved with, once it has - see `ComposeLateInput`. */
     late?: ComposeLateInput;
+    /** See `OpenComposeInput.resume`. */
+    resume?: ResumeCompose;
     minimized: boolean;
 }
 /** What a reply or forward could only work out after its window was already open (see `OpenComposeInput.pending`). */
@@ -83,6 +88,9 @@ export interface OpenComposeInput {
      * until it resolves.
      */
     pending?: Promise<ComposeLateInput | undefined>;
+    /** Re-opens a message that was already composed - a failed send's "Open draft": the window continues that server draft, with every field
+     * exactly as it was typed, instead of starting a new one. */
+    resume?: ResumeCompose;
 }
 export interface ComposeContextValue {
     /** Opens a new compose window, stacked alongside any already open (Gmail allows several at once). */