@rapidmx/web-client 0.10.0 → 0.12.0

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
@@ -8,11 +8,12 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listAttachments } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import MailAddress from "./MailAddress.js";
 import MessageDetailPane from "./MessageDetailPane.js";
+import { EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
+import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
-import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, senderClass } from "./unreadStyle.js";
+import { dateClass, isUnread, senderClass } from "./unreadStyle.js";
 /** One request's worth of the thread. The server's own default for `listConversationMessages()`. */
 export const THREAD_PAGE_SIZE = 100;
 /**
@@ -86,7 +87,8 @@ function hasFocusRing(element) {
     }
 }
 /**
- * The reading pane for the conversation list: the whole thread, **newest at the top**, opened at the message
+ * The reading pane for the conversation list: the conversation's subject in a card of its own, pinned at the top, and under it the whole thread as
+ * a stack of message cards (each exactly as tall as its message; the list scrolls as a whole), **newest at the top**, opened at the message
  * the reader picked. Every message from that one through to the newest is expanded - which in this order is
  * the opened message and the entries above it - and the older ones, below it, are collapsed to a one-line
  * summary (sender, date, preview) that expands on click or Enter. So opening the newest message shows just
@@ -129,6 +131,9 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     /** Where the toggled message's header sat in the viewport before it expanded, so the run below can put
      * it back there - expanding a message above the one being read must not shove that one off-screen. */
     const anchorRef = useRef(null);
+    /** The message whose header button had the focus when it was toggled: expanding or collapsing swaps that button for the other state's, so the
+     * focus is put back on the new one. */
+    const refocusRef = useRef(null);
     const conversationId = conversation?.conversationId;
     useEffect(() => {
         const generation = ++generationRef.current;
@@ -211,7 +216,8 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         const active = document.activeElement;
         if (!(active instanceof HTMLElement && active.hasAttribute("data-row-open") && hasFocusRing(active))) {
             // `preventScroll` so focusing doesn't scroll it somewhere else again.
-            headerRefs.current[pendingFocusUid].focus({ preventScroll: true });
+            // (A card's header button is drawn by the message pane, which registers it; a stand-in pane that doesn't has none to focus.)
+            headerRefs.current[pendingFocusUid]?.focus({ preventScroll: true });
         }
         setPendingFocusUid(null);
     }, [pendingFocusUid, expandedUids]);
@@ -225,6 +231,11 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         // The row is still there: the anchor was taken from a rendered row, and toggling never removes one.
         const row = rowRefs.current[anchor.uid];
         scrollingAncestor(row).scrollTop += row.getBoundingClientRect().top - anchor.top;
+        // The button the reader had focused is gone (a collapsed card and an expanded one each draw their own): keep them where they were.
+        if (refocusRef.current === anchor.uid) {
+            headerRefs.current[anchor.uid]?.focus({ preventScroll: true });
+        }
+        refocusRef.current = null;
     }, [expandedUids]);
     // Attachments and mark-as-read, for expanded messages only - mirrors `mailDetailHooks.ts`'s
     // `useMessageAttachments`/`useMarkMessageRead`, reimplemented here (rather than called in a loop, which
@@ -288,6 +299,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         markReadRequestedRef.current.delete(uid);
         // The row this button lives in has rendered, so its ref is set.
         anchorRef.current = { uid, top: rowRefs.current[uid].getBoundingClientRect().top };
+        refocusRef.current = document.activeElement === headerRefs.current[uid] ? uid : null;
         setExpandedUids((prev) => {
             const next = new Set(prev);
             if (next.has(uid)) {
@@ -308,25 +320,35 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     if (!conversation) {
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a conversation to read it." });
     }
-    if (loading) {
-        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading\u2026" });
-    }
-    if (error) {
-        return (_jsx("div", { className: "p-4 flex-1", children: _jsx(Alert, { children: error }) }));
-    }
-    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col", children: [_jsxs("div", { className: "shrink-0 border-b border-border p-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: conversation.subject || "(no subject)" }), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: [messages.length, " message", messages.length === 1 ? "" : "s"] }), truncated && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] }))] }), _jsx("ul", { className: "flex-1 min-h-0 overflow-y-auto", children: messages.map((message) => {
+    const subject = displaySubject(conversation.subject) || "(no subject)";
+    // The newest message that is open carries the Reply / Forward buttons at the foot of its card.
+    const footerUid = messages.find((message) => expandedUids.has(message.uid))?.uid;
+    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col", children: [_jsx(SubjectCard, { subject: subject, meta: loading
+                    ? conversation.messageCount > 1
+                        ? `${conversation.messageCount} messages`
+                        : undefined
+                    : error
+                        ? undefined
+                        : `${messages.length} message${messages.length === 1 ? "" : "s"}`, children: truncated && !loading && !error && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] })) }), loading ? (_jsx(SkeletonCards, { messageCount: conversation.messageCount })) : error ? (_jsx("div", { className: "p-2 sm:p-3", children: _jsx(Alert, { children: error }) })) : (_jsx("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: messages.map((message) => {
                     const uid = message.uid;
                     const expanded = expandedUids.has(uid);
                     const bodyId = `thread-message-${uid}`;
                     const messageUnread = isUnread(message);
-                    return (_jsxs("li", { ref: (node) => {
+                    return (_jsx("li", { ref: (node) => {
                             rowRefs.current[uid] = node;
-                        }, "data-unread": messageUnread ? "true" : undefined, className: ["relative border-b border-border", expanded ? "flex flex-col min-h-full" : ""].join(" "), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsx("h2", { className: "shrink-0", children: _jsxs("button", { type: "button", ref: (node) => {
+                        }, "data-unread": messageUnread ? "true" : undefined, children: expanded ? (_jsx(MessageDetailPane, { inThread: true, threadSubject: subject, threadHeader: {
+                                bodyId,
+                                unread: messageUnread,
+                                onToggle: () => toggleExpanded(uid),
+                                buttonRef: (node) => {
+                                    headerRefs.current[uid] = node;
+                                },
+                            }, footer: uid === footerUid, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) : (_jsxs(_Fragment, { children: [_jsx(CollapsedCard, { from: message.from, date: new Date(message.receivedDate).toLocaleString(), preview: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : ""), unread: messageUnread, senderClassName: senderClass(messageUnread), dateClassName: dateClass(messageUnread), buttonRef: (node) => {
                                         headerRefs.current[uid] = node;
-                                    }, onClick: () => toggleExpanded(uid), "aria-expanded": expanded, "aria-controls": bodyId, className: [
-                                        "w-full text-left px-4 py-3",
-                                        messageUnread ? "bg-primary/[0.07] hover:bg-primary/10" : "hover:bg-surface-alt",
-                                        ROW_FOCUS_CLASS,
-                                    ].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("span", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleString() })] }), !expanded && (_jsx("span", { className: "block text-xs text-text-muted truncate font-normal", children: message.bodyPreview }))] }) }), _jsx("div", { id: bodyId, hidden: !expanded, className: expanded ? "flex-1 min-h-0 flex" : undefined, children: expanded && (_jsx(MessageDetailPane, { inThread: true, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) })] }, uid));
-                }) })] }));
+                                    }, buttonProps: {
+                                        onClick: () => toggleExpanded(uid),
+                                        "aria-expanded": false,
+                                        "aria-controls": bodyId,
+                                    } }), _jsx("div", { id: bodyId, hidden: true })] })) }, uid));
+                }) }))] }));
 }

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