@rapidmx/web-client 0.9.0 → 0.10.0

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

@@ -5,11 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listAttachments, setMessageRead } from "@rapidmx/react-shared/mail/mailApi.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 { useMailShell } from "./layout/MailShell.js";
+import { setReadState } from "../../mail/messageReadState.js";
+import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, 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;
 /**
@@ -73,6 +76,15 @@ async function loadThread(mailboxUid, conversationId) {
     messages.reverse();
     return { messages, truncated: more };
 }
+/** Whether the browser is showing a focus ring on `element` - it was focused from the keyboard (or by a key press's handler), not by a click. */
+function hasFocusRing(element) {
+    try {
+        return element.matches(":focus-visible");
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * The reading pane for the conversation list: the whole thread, **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
@@ -90,7 +102,8 @@ async function loadThread(mailboxUid, conversationId) {
  * single-message pane, and each acts on the message it belongs to. A collapsed message mounts none of
  * that - mounting a body iframe per message up front would be wasteful in a long thread.
  */
-export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, }) {
+export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, shortcuts, }) {
+    const { trackMessageChange } = useMailShell();
     const [messages, setMessages] = useState([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState({});
     const [expandedUids, setExpandedUids] = useState(new Set());
@@ -192,8 +205,14 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                 scroller.scrollTop += top;
             }
         }
-        // `preventScroll` so focusing doesn't scroll it somewhere else again.
-        headerRefs.current[pendingFocusUid].focus({ preventScroll: true });
+        // A key press (j, k, the arrows) that opened this thread left the focus on its list row on purpose, so Enter goes on to open the
+        // message's page; taking the focus here would make Enter toggle this header instead. A click leaves no focus ring, and hands
+        // the focus to the thread as before.
+        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 });
+        }
         setPendingFocusUid(null);
     }, [pendingFocusUid, expandedUids]);
     // Keeps the message whose header was just clicked where it was on screen. Expanding one above the
@@ -230,20 +249,25 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                     attachmentsRequestedRef.current.delete(uid);
                 });
             }
-            if (!message.flags.read && !markReadRequestedRef.current.has(uid)) {
+            if (!markReadRequestedRef.current.has(uid)) {
+                // Asked once per opened conversation and per expanding of the message: a failure is not retried from here, because
+                // undoing the optimistic change changes `messages`, which would run this effect again and ask again, for ever. A message
+                // that is already read is asked about too (there is nothing to send), so marking it unread while it is open - the
+                // keyboard's Ctrl+U - doesn't make this run again and read it straight back.
                 markReadRequestedRef.current.add(uid);
-                // `message` is this render's copy, so the request carries its current `version`.
-                setMessageRead(message, true)
-                    .then((updated) => {
-                    if (generation !== generationRef.current)
-                        return;
-                    // `message` is the unread copy this pane just replaced - what tells the list's own
-                    // conversation row that its unread count has gone down by one.
-                    patchMessage(updated, message);
-                })
-                    .catch(() => {
-                    // Best-effort, as in `useMarkMessageRead`.
-                    markReadRequestedRef.current.delete(uid);
+                if (message.flags.read === true) {
+                    continue;
+                }
+                // `message` is this render's copy, so the request carries its current `version`. The row, the conversation row's
+                // unread count and the folder badge all change at once; `previous` is what tells the list's conversation row
+                // that its count moved (see `setReadState()`).
+                void setReadState(message, true, {
+                    patch: (updated, previous) => {
+                        if (generation === generationRef.current) {
+                            patchMessage(updated, previous);
+                        }
+                    },
+                    track: trackMessageChange,
                 });
             }
         }
@@ -260,6 +284,8 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
         onMessageRemoved(updated);
     }
     function toggleExpanded(uid) {
+        // Opening a message again asks to mark it read again - that is how one whose request failed is retried.
+        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 };
         setExpandedUids((prev) => {
@@ -273,6 +299,9 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             return next;
         });
     }
+    // The keyboard acts on the message that was opened - or the newest, when the opened one isn't in this thread - never on all the expanded
+    // ones at once (each is a `MessageDetailPane`, and two of them must not both answer Ctrl+R).
+    const keyboardUid = messages.some((message) => message.uid === selectedUid) ? selectedUid : messages[0]?.uid;
     function folderTypeOf(message) {
         return folders.find((folder) => folder.uid === message.folderUid)?.type;
     }
@@ -289,19 +318,15 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                     const uid = message.uid;
                     const expanded = expandedUids.has(uid);
                     const bodyId = `thread-message-${uid}`;
+                    const messageUnread = isUnread(message);
                     return (_jsxs("li", { ref: (node) => {
                             rowRefs.current[uid] = node;
-                        }, 
-                        // An expanded message is as tall as the list it scrolls in - `min-h-full`
-                        // against the `<ul>`'s own resolved height - so its `MessageDetailPane` below
-                        // has a full pane of height to fill and its body reaches the bottom of the
-                        // window whatever that window's size is. `min-` rather than `h-`: a message
-                        // whose header alone is taller than the pane still gets the room it needs.
-                        className: ["border-b border-border", expanded ? "flex flex-col min-h-full" : ""].join(" "), children: [_jsx("h2", { className: "shrink-0", children: _jsxs("button", { type: "button", ref: (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) => {
                                         headerRefs.current[uid] = node;
                                     }, onClick: () => toggleExpanded(uid), "aria-expanded": expanded, "aria-controls": bodyId, className: [
-                                        "w-full text-left px-4 py-3 hover:bg-surface-alt",
-                                        message.flags.read ? "" : "font-semibold",
-                                    ].join(" "), children: [_jsxs("span", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from }), _jsx("span", { className: "text-xs text-text-muted shrink-0", 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, 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));
+                                        "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));
                 }) })] }));
 }

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type MessageDetailPaneType from "./MessageDetailPane.js";
+import type ConversationThreadPaneType from "./ConversationThreadPane.js";
+/** Starts downloading the reading pane's code, for the page to call when it has nothing better to do. Never rejects. */
+export declare function prefetchReadingPane(): void;
+/** With nothing selected the pane is only its empty-state line, which needs none of the pane's code - so the chunk isn't
+ * requested until something is (or the page prefetches it). */
+export declare function LazyMessageDetailPane(props: React.ComponentProps<typeof MessageDetailPaneType>): React.JSX.Element;
+export declare function LazyConversationThreadPane(props: React.ComponentProps<typeof ConversationThreadPaneType>): React.JSX.Element;

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import 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";
+/**
+ * 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
+ * menus - so it is a chunk of its own, downloaded when the browser is idle after the list has loaded (`prefetchReadingPane()`)
+ * and, at the latest, on the first selection. Nothing about the pane changes: these wrap the same components, with a skeleton
+ * while the chunk loads and a reload prompt if it can't.
+ *
+ * Deliberately not `React.lazy()` + `<Suspense>`: a boundary that has shown its fallback holds the content back for up to 300 ms
+ * after the code arrives (React's fallback throttle), which would put a fifth of a second between a click and a pane whose
+ * 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) {
+    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. */
+    function start() {
+        loading ?? (loading = load().then((module) => (loaded = module.default), (err) => {
+            loading = undefined;
+            throw err;
+        }));
+        return loading;
+    }
+    function Lazy(props) {
+        const [, setLoadedNow] = useState(0);
+        const [failed, setFailed] = useState(false);
+        useEffect(() => {
+            if (loaded) {
+                return;
+            }
+            let cancelled = false;
+            start().then(() => !cancelled && setLoadedNow((n) => n + 1), () => !cancelled && setFailed(true));
+            return () => {
+                cancelled = true;
+            };
+        }, []);
+        if (loaded) {
+            const Component = loaded;
+            return _jsx(Component, { ...props });
+        }
+        return failed ? _jsx(ChunkFailed, {}) : _jsx(PaneSkeleton, {});
+    }
+    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"));
+/** 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);
+    conversationThreadPane.start().catch(() => undefined);
+}
+/** With nothing selected the pane is only its empty-state line, which needs none of the pane's code - so the chunk isn't
+ * requested until something is (or the page prefetches it). */
+export function LazyMessageDetailPane(props) {
+    if (!props.message) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a message to read it." });
+    }
+    return _jsx(messageDetailPane.Lazy, { ...props });
+}
+export function LazyConversationThreadPane(props) {
+    if (!props.conversation) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a conversation to read it." });
+    }
+    return _jsx(conversationThreadPane.Lazy, { ...props });
+}

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

@@ -45,6 +45,9 @@ export interface MailSelectionBarProps {
      * `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;
 }
 /**
  * The header that replaces the list's own toolbar while select mode is on: how many rows are selected,
@@ -56,4 +59,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, }: 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, error, shortcuts, }: MailSelectionBarProps): React.JSX.Element;

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

@@ -7,6 +7,9 @@ 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";
+import { SHORTCUTS } from "../../keyboard/keymap.js";
+import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
 function actionClassName() {
     return "px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent";
 }
@@ -20,7 +23,12 @@ 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, }) {
+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, }) {
+    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
+        ? { title: reason ?? withHint(label, shortcut, env), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, env) }
+        : { title: reason };
     const selectedCount = totals?.selected ?? selected.length;
     const listedCount = totals?.listed ?? listed.length;
     // Counted on the rows that were ticked, but *emptied* on the messages: a ticked conversation whose
@@ -42,7 +50,7 @@ export default function MailSelectionBar({ selected, listed, totals, onSelectAll
     // partially applied, and is left exactly as it is unless the reader touches that row.
     const appliedToAll = labels.filter((label) => !none && selected.every((m) => m.labelUids?.includes(label.uid)));
     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(), children: "Mark read" }), _jsx("button", { type: "button", onClick: () => onSetRead(false), disabled: none || busy, className: actionClassName(), children: "Mark unread" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(true), disabled: none || busy, className: actionClassName(), 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
+    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, title: deleteReason, className: actionClassName(), 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" })] }), error && (_jsx("div", { className: "px-3 pb-2", children: _jsx(Alert, { children: error }) }))] }));
 }

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Attachment, Folder, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
-import { MessageSecurityResult } from "@rapidmx/react-shared/crypto/messageSecurity.js";
+import type { MessageSecurityResult } from "@rapidmx/react-shared/crypto/messageSecurity.js";
 /** The detail line under a `verified_at_first_open` badge. */
 export declare function verifiedAtFirstOpenMessage(result: MessageSecurityResult): string;
 export interface SenderNameCheck {
@@ -90,6 +90,12 @@ export interface MessageDetailPaneProps {
      * 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. */
     inThread?: 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
+     * thread is a pane, and two of them must not both claim Ctrl+R). Also puts the shortcut in those buttons' tooltips.
+     */
+    shortcuts?: boolean;
 }
 /**
  * A message's reading pane — header (subject/from/to/attachments) plus a sandboxed iframe for the body.

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

@@ -11,7 +11,6 @@ import { buildForwardQuote, buildReplyQuote, buildReplyRecipients, buildReplyThr
 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 { evaluateMessageSecurity, evaluateMessageSecurityWithSeal, } from "@rapidmx/react-shared/crypto/messageSecurity.js";
 import { extractAddresses } from "@rapidmx/react-shared/crypto/mime.js";
 import { SignerKeyConflictError, signingKeyFingerprints, trustSigner } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
 import { isLikelyMailingList } from "@rapidmx/react-shared/crypto/composeSecurity.js";
@@ -20,12 +19,16 @@ import { currentVerificationSeal, getVaultGeneration, sendVerificationSeal } fro
 import { getMyMailboxAccess } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
 import KeyChangeReview from "../contacts/KeyChangeReview.js";
 import { KEY_CHANGE_STALE_MESSAGE, sameFingerprint } from "../contacts/contactKeys.js";
-import { useCompose } from "./compose/ComposeContext.js";
-import { loadOriginalMessage } from "./compose/quotedBody.js";
+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 { useMailShell } from "./layout/MailShell.js";
+import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
+import { SHORTCUTS } from "../../keyboard/keymap.js";
+import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
+import { useShortcut } from "../../keyboard/useShortcut.js";
 import { useUnlockPrompt } from "../layout/UnlockPromptProvider.js";
 import { moveLocalEntity } from "../../search/localIndexRpcClient.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
@@ -131,8 +134,9 @@ function downloadMimeAttachment(attachment) {
  * A plain `<button>` rather than react-shared's `Button`, whose padding and minimum width are sized for a
  * text label. Ordinary DOM order, so the keyboard reaches these in the order they are read.
  */
-function IconAction({ icon, label, onClick, disabled, busy, }) {
-    return (_jsx("button", { type: "button", "aria-label": label, title: label, "aria-busy": busy || undefined, disabled: disabled, onClick: onClick, className: "inline-flex items-center justify-center p-1.5 rounded-md border border-border text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: icon }));
+function IconAction({ icon, label, onClick, disabled, busy, onPrefetch, shortcut, }) {
+    const env = useKeyEnvironment();
+    return (_jsx("button", { type: "button", "aria-label": label, title: shortcut ? withHint(label, shortcut, env) : label, "aria-keyshortcuts": shortcut ? ariaKeyShortcuts(shortcut, env) : undefined, "aria-busy": busy || undefined, disabled: disabled, onClick: onClick, onPointerEnter: onPrefetch, onFocus: onPrefetch, className: "inline-flex items-center justify-center p-1.5 rounded-md border border-border text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: icon }));
 }
 function SecurityIndicator({ security }) {
     const { label, className } = SECURITY_INDICATOR[security.state];
@@ -195,7 +199,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, }) {
+function MessageDetailContent({ message: messageProp, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, folders, onMoved, onFolderCreated, onReceiptHandled, onArchived, labels, onLabelsChanged, onLabelCreated, inThread, 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`.
@@ -239,7 +243,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
     const [keyChangeNotice, setKeyChangeNotice] = useState(null);
     // "Now", for deciding whether a scheduled send's lease is still live - advanced when the lease runs out.
     const [nowMs, setNowMs] = useState(() => Date.now());
-    const { mailboxes } = useMailShell();
+    const { mailboxes, trackMessageChange } = useMailShell();
     const { requestUnlock } = useUnlockPrompt();
     // Bumped after a successful on-demand unlock to re-run the effect below - it's not a dependency the
     // effect could read reactively otherwise (getUnlockedKeys() is a plain module-level read, not React
@@ -293,6 +297,9 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
             if (cancelled) {
                 return;
             }
+            // The S/MIME code (PKI.js and the ASN.1/X.509 libraries) loads here, only for a message that is signed or
+            // encrypted - it is over half a megabyte, and the pane opens plain messages without it.
+            const messageSecurity = await import("@rapidmx/react-shared/crypto/messageSecurity.js");
             const [primaryAddress, ...aliasAddresses] = readerAddressesKey ? readerAddressesKey.split(" ") : [];
             const ownAddresses = readerAddressesKey.toLowerCase().split(" ");
             const ownKeys = ownAddresses.includes(senderAddress.toLowerCase()) ? (readerMailbox.keys ?? []) : [];
@@ -310,7 +317,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                     ...(sealContext.keyState?.previous ?? []),
                     ...ownKeys,
                 ];
-                result = await evaluateMessageSecurityWithSeal(rawMime, unlocked, pinned, primaryAddress, {
+                result = await messageSecurity.evaluateMessageSecurityWithSeal(rawMime, unlocked, pinned, primaryAddress, {
                     mailboxUid: message.mailboxUid,
                     messageUid: message.uid,
                     ...currentVerificationSeal(message),
@@ -318,14 +325,14 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                     signerKeys,
                 }).catch(() => 
                 // Only a lock while sealing throws: evaluate as locked (the lock itself re-evaluates too).
-                evaluateMessageSecurity(rawMime, undefined, pinned, primaryAddress));
+                messageSecurity.evaluateMessageSecurity(rawMime, undefined, pinned, primaryAddress));
                 if (result.sealToWrite) {
                     // Best effort and in the background: never awaited, never shown.
                     void sendVerificationSeal(message.uid, result.sealToWrite);
                 }
             }
             else {
-                result = await evaluateMessageSecurity(rawMime, unlocked, pinned, primaryAddress);
+                result = await messageSecurity.evaluateMessageSecurity(rawMime, unlocked, pinned, primaryAddress);
             }
             // Only one reader address can be checked per evaluation: a message sent to one of this mailbox's
             // aliases isn't "not addressed to you", so each alias is tried before saying so.
@@ -333,7 +340,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                 if (!result.notAddressedToReader) {
                     break;
                 }
-                const viaAlias = await evaluateMessageSecurity(rawMime, unlocked, pinned, alias);
+                const viaAlias = await messageSecurity.evaluateMessageSecurity(rawMime, unlocked, pinned, alias);
                 result = { ...result, notAddressedToReader: viaAlias.notAddressedToReader };
             }
             const unpinned = contactPins.loaded && pins.length === 0;
@@ -442,46 +449,72 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         const mailbox = readerMailbox ?? (await getMailbox(message.mailboxUid).catch(() => undefined));
         return mailbox ? [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])] : [];
     }
+    /** Starts fetching what Reply/Reply All/Forward will need (the compose window's code, the original's body) as the
+     * pointer or keyboard reaches one of their buttons, so the click itself finds it already on its way or here. */
+    function prefetchReply() {
+        prefetchComposeWindow();
+        prefetchOriginalMessage(message);
+    }
+    /**
+     * Opens the compose window at once from what is already in memory - the message's own subject and sender, and the
+     * mailbox it was read in - and fetches what needs the network meanwhile: the original's body to quote, and for Reply All
+     * the recipients its headers name. Both reach the window through `OpenComposeInput.pending` when they arrive, so the
+     * window is on screen on the click's own frame rather than after two or three sequential requests.
+     */
     async function handleReplyOrForward(kind) {
         setPreparingCompose(true);
         try {
-            const [original, own] = await Promise.all([
-                loadOriginalMessage(message, security, { recipients: kind === "replyAll" }),
-                kind === "forward" ? [] : ownAddresses(),
-            ]);
             const encrypt = !!message.encrypted;
             // What makes the new message part of this one's thread rather than a conversation of its own:
             // the server composes the MIME from the recipients, subject and HTML alone, so nothing else
             // recovers what is being replied to. A forward carries it for the same reason - it continues
             // the thread it came from, which is where its recipient will file the reply to it.
             const threading = buildReplyThreading(message);
+            const format = (list) => list.map((r) => formatRecipient(r)).join(", ");
+            // Known without a request when the shell has already listed the mailbox; otherwise fetched with the body, and
+            // the window's recipients are corrected by `late` below if that changes who they are.
+            const knownOwn = readerAddressesKey ? readerAddressesKey.split(" ") : undefined;
+            // Never rejects: loadOriginalMessage() and ownAddresses() don't, and the rest is pure.
+            const late = (async () => {
+                const [original, own] = await Promise.all([
+                    loadOriginalMessage(message, security, { recipients: kind === "replyAll" }),
+                    kind === "forward" ? [] : (knownOwn ?? ownAddresses()),
+                ]);
+                if (kind === "forward") {
+                    return { quotedHtml: buildForwardQuote(message, original.body) };
+                }
+                // The message's own recipients are only the envelope recipient of a delivered message, so Reply All
+                // answers whoever its headers actually name, with anything the record holds that they don't.
+                const known = new Set((original.recipients ?? []).map((r) => r.address.trim().toLowerCase()));
+                const recipients = buildReplyRecipients({ ...message, recipients: [...(original.recipients ?? []), ...message.recipients.filter((r) => !known.has(r.address.trim().toLowerCase()))] }, own, kind === "replyAll");
+                return { quotedHtml: buildReplyQuote(message, original.body), to: format(recipients.to), cc: format(recipients.cc) };
+            })();
             if (kind === "forward") {
                 openCompose({
                     mailboxUid: message.mailboxUid,
                     subject: forwardSubject(message.subject),
-                    quotedHtml: buildForwardQuote(message, original.body),
                     signatureContext: "reply_forward",
                     encrypt,
                     threading,
+                    pending: late,
                 });
-                return;
             }
-            // The message's own recipients are only the envelope recipient of a delivered message, so Reply All
-            // answers whoever its headers actually name, with anything the record holds that they don't.
-            const known = new Set((original.recipients ?? []).map((r) => r.address.trim().toLowerCase()));
-            const recipients = buildReplyRecipients({ ...message, recipients: [...(original.recipients ?? []), ...message.recipients.filter((r) => !known.has(r.address.trim().toLowerCase()))] }, own, kind === "replyAll");
-            const format = (list) => list.map((r) => formatRecipient(r)).join(", ");
-            openCompose({
-                mailboxUid: message.mailboxUid,
-                to: format(recipients.to),
-                cc: recipients.cc.length > 0 ? format(recipients.cc) : undefined,
-                subject: replySubject(message.subject),
-                quotedHtml: buildReplyQuote(message, original.body),
-                signatureContext: "reply_forward",
-                suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
-                encrypt,
-                threading,
-            });
+            else {
+                const first = buildReplyRecipients(message, knownOwn ?? [], kind === "replyAll");
+                openCompose({
+                    mailboxUid: message.mailboxUid,
+                    to: format(first.to),
+                    cc: first.cc.length > 0 ? format(first.cc) : undefined,
+                    subject: replySubject(message.subject),
+                    signatureContext: "reply_forward",
+                    suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
+                    encrypt,
+                    threading,
+                    pending: late,
+                });
+            }
+            // Held until the quote is in, so a second click can't open a second window for the same message meanwhile.
+            await late;
         }
         finally {
             setPreparingCompose(false);
@@ -517,6 +550,8 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
             const updated = await cancelScheduledSend(message, draftsFolderUid);
             // Keeps a `folder:`-scoped Tier 2 local search from still finding it in its old folder.
             void moveLocalEntity(updated.mailboxUid, updated.uid, updated.folderUid);
+            // Out of Outbox, into Drafts: both folders' badges.
+            trackMessageChange(message, updated).settle();
             onScheduledSendCanceled?.(updated);
         }
         catch (err) {
@@ -541,6 +576,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         try {
             const updated = await archiveMessage(message.uid);
             void moveLocalEntity(updated.mailboxUid, updated.uid, updated.folderUid);
+            trackMessageChange(message, updated).settle();
             onArchived?.(updated);
         }
         catch (err) {
@@ -585,8 +621,21 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
      */
     async function handleMove(folderUid) {
         const updated = await moveMessage(message, folderUid);
+        // Move to, Delete and Report junk are all this: the source folder's badge goes down, the target's up.
+        trackMessageChange(message, updated).settle();
         onMoved?.(updated);
     }
+    // Keyboard shortcuts for the message this pane shows. They call the same handlers as the buttons below, and exist only where the
+    // button does (Archive not for Drafts/Outbox, Move to only with folders to move to). A shortcut pressed while its action is already
+    // running is consumed and does nothing, exactly as the disabled button would: a browser must not act on Ctrl+R meanwhile.
+    const archivable = !inOutbox && message.folderUid !== draftsFolderUid;
+    const movable = !!folders && folders.length > 0;
+    const keyboard = !!shortcuts;
+    useShortcut(SHORTCUTS.mail.reply, () => void (!preparingCompose && handleReplyOrForward("reply")), { enabled: keyboard });
+    useShortcut(SHORTCUTS.mail.replyAll, () => void (!preparingCompose && handleReplyOrForward("replyAll")), { enabled: keyboard });
+    useShortcut(SHORTCUTS.mail.forward, () => void (!preparingCompose && handleReplyOrForward("forward")), { enabled: keyboard });
+    useShortcut(SHORTCUTS.mail.archive, () => void (!archiving && handleArchive()), { enabled: keyboard && archivable });
+    useShortcut(SHORTCUTS.mail.move, () => setMovePrompt(true), { enabled: keyboard && movable });
     // Only ever invoked from the pending-receipt banner below, which itself only renders once `message`
     // is loaded — same real invariant as every other handler above.
     async function handleReceipt(type, action) {
@@ -670,7 +719,7 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                                     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
                             ? 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", disabled: preparingCompose, 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", disabled: preparingCompose, onClick: () => void handleReplyOrForward("replyAll") }), _jsx(IconAction, { icon: _jsx(HiOutlineArrowUturnRight, { size: 16, "aria-hidden": "true" }), label: "Forward", disabled: preparingCompose, onClick: () => void handleReplyOrForward("forward") }), !inOutbox && message.folderUid !== draftsFolderUid && (_jsx(IconAction, { icon: _jsx(HiOutlineArchiveBox, { size: 16, "aria-hidden": "true" }), label: "Archive", busy: archiving, disabled: archiving, onClick: handleArchive })), folders && folders.length > 0 && (_jsx(IconAction, { icon: _jsx(HiOutlineFolderArrowDown, { size: 16, "aria-hidden": "true" }), label: "Move to", 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: "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
                             .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"]

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

@@ -0,0 +1,19 @@
+import React from "react";
+import type { NewMailNotice } from "../../mail/newMailNotifications.js";
+export interface NewMailToastsProps {
+    /** The pop-ups to show, oldest first. */
+    toasts: NewMailNotice[];
+    onDismiss: (uid: string) => void;
+    /** Show the "Turn on desktop notifications" offer in the first pop-up. */
+    offerDesktop: boolean;
+    onEnableDesktop: () => void;
+    onDeclineDesktop: () => void;
+}
+/**
+ * The new-mail pop-ups, stacked at the top right (`fixed`, above everything). The container is always rendered - a live region
+ * has to exist before its content changes to be announced - and is a polite `status` region, so an arrival is read out without
+ * interrupting. Each pop-up shows the sender's name and address, the subject and a short preview, as text; clicking it opens the
+ * message; it has a dismiss button and goes by itself after a few seconds (see `ToastItem`). Motion is CSS-only and switched off
+ * by `prefers-reduced-motion` (`.rr-toast-in` in `app.css`).
+ */
+export default function NewMailToasts({ toasts, onDismiss, offerDesktop, onEnableDesktop, onDeclineDesktop }: NewMailToastsProps): React.JSX.Element;