@rapidmx/web-client 0.15.1 → 0.17.0

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

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 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";
@@ -11,8 +12,10 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import MessageDetailPane from "./MessageDetailPane.js";
 import { EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
+import PendingMessageCard from "./reading/PendingMessageCard.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
+import { adoptedOutgoing, belongsToThread, settleOutgoing, useOutgoingReplies } from "../../mail/outbox/outgoingReplies.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;
@@ -77,6 +80,20 @@ async function loadThread(mailboxUid, conversationId) {
     messages.reverse();
     return { messages, truncated: more };
 }
+/**
+ * `next` - the thread as it was just read again - for the pane to show in place of `previous`. A message the pane holds a newer copy of (one that
+ * was read, flagged or labelled here a moment ago, whose change the read may have started before) keeps that copy, and a read that changed
+ * nothing gives back `previous` itself, so the pane is not drawn again.
+ */
+function mergeThread(previous, next) {
+    const held = new Map(previous.map((message) => [message.uid, message]));
+    const merged = next.map((message) => {
+        const own = held.get(message.uid);
+        return own && own.version > message.version ? own : message;
+    });
+    const unchanged = merged.length === previous.length && merged.every((message, index) => message.uid === previous[index].uid && message.version === previous[index].version);
+    return unchanged ? previous : merged;
+}
 /** 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 {
@@ -105,7 +122,9 @@ function hasFocusRing(element) {
  * 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, shortcuts, }) {
-    const { trackMessageChange } = useMailShell();
+    const { trackMessageChange, live } = useMailShell();
+    // The replies and forwards this tab has sent, drawn at the top of the thread they continue until the server's own copy is in it.
+    const outgoing = useOutgoingReplies();
     const [messages, setMessages] = useState([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState({});
     const [expandedUids, setExpandedUids] = useState(new Set());
@@ -134,11 +153,19 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     /** 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);
+    /** The pending cards that have already been scrolled to, so that only a message that has just been sent takes the view and the focus. */
+    const announcedRef = useRef(new Set());
+    /** Messages that left the thread here (archived, moved, a scheduled send taken back): a read of the thread again still lists them, since a conversation spans folders. */
+    const removedRef = useRef(new Set());
+    /** The last live update this pane has answered - one already in the shell's hands when the pane opened is not news. */
+    const seenLiveRef = useRef(live);
     const conversationId = conversation?.conversationId;
     useEffect(() => {
         const generation = ++generationRef.current;
         markReadRequestedRef.current = new Set();
         attachmentsRequestedRef.current = new Set();
+        announcedRef.current = new Set();
+        removedRef.current = new Set();
         appliedSelectionRef.current = null;
         loadedIdRef.current = null;
         setMessages([]);
@@ -159,6 +186,8 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             if (generation !== generationRef.current)
                 return;
             loadedIdRef.current = conversationId;
+            // A message sent from here whose Sent Items copy is already in the thread is drawn as that copy, not as a pending card.
+            settleOutgoing(mailboxUid, loaded.messages);
             setMessages(loaded.messages);
             setTruncated(loaded.truncated);
         })
@@ -283,6 +312,77 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             }
         }
     }, [expandedUids, messages]);
+    /**
+     * Reads the thread again, quietly: what is on screen stays until the answer is here (a read that fails changes nothing), a message that arrived
+     * is added at the top, and the reader's expanded and collapsed cards are left as they are. A message this tab sent - which the server has
+     * now filed in Sent Items under the same `uid` - takes the place of its pending card, expanded as that card was, with the focus if the
+     * card had it. A thread that has not finished its first load is not read again: that load is the fresh read.
+     */
+    function refreshThread() {
+        const id = loadedIdRef.current;
+        if (!id) {
+            return;
+        }
+        const generation = generationRef.current;
+        loadThread(mailboxUid, id).then((loaded) => {
+            if (generation !== generationRef.current)
+                return;
+            const current = loaded.messages.filter((message) => !removedRef.current.has(message.uid));
+            const adopted = adoptedOutgoing(mailboxUid, current);
+            const refocus = adopted.find((uid) => document.activeElement === headerRefs.current[uid]);
+            // Drawn first, and only then is the pending card forgotten: there is never a frame with neither it nor the real message.
+            flushSync(() => {
+                setMessages((previous) => mergeThread(previous, current));
+                setTruncated(loaded.truncated);
+                if (adopted.length > 0) {
+                    setExpandedUids((previous) => new Set([...previous, ...adopted]));
+                }
+                if (refocus) {
+                    setPendingFocusUid(refocus);
+                }
+            });
+            settleOutgoing(mailboxUid, current);
+        }, 
+        // Quietly: the next live update reads it again, and what is shown is still right.
+        () => undefined);
+    }
+    // Another message of this conversation may have arrived - a recipient's reply, one sent from another tab or device, or this tab's own reply
+    // filed in Sent Items - whenever the shell announces a live update that touched one of this mailbox's folders (or does not say which).
+    useEffect(() => {
+        if (live === seenLiveRef.current)
+            return;
+        seenLiveRef.current = live;
+        if (live.folderUids === null || folders.some((folder) => live.folderUids.has(folder.uid))) {
+            refreshThread();
+        }
+    }, [live]);
+    // The server has relayed a message this tab sent: its Sent Items copy is read for at once, without waiting for the live update that follows.
+    const sentKey = outgoing
+        .filter((reply) => reply.state === "sent" && reply.mailboxUid === mailboxUid)
+        .map((reply) => reply.uid)
+        .join(",");
+    useEffect(() => {
+        if (sentKey) {
+            refreshThread();
+        }
+    }, [sentKey]);
+    // The messages sent from here that continue this thread and whose real copy it does not hold yet, newest first (the pane's order). A message
+    // that replies to nothing here - a new message, or a reply to another conversation - is not in this list, and never is.
+    const pendingCards = outgoing
+        .filter((reply) => reply.mailboxUid === mailboxUid && !messages.some((message) => message.uid === reply.uid) && belongsToThread(reply, messages))
+        .reverse();
+    // A message that has just been sent is scrolled into view and takes the focus - the compose window it was sent from has just closed, and the focus
+    // with it - once. A failed one, or one that was already there when the thread was opened, is left where it is.
+    const pendingKey = pendingCards.map((reply) => reply.uid).join(",");
+    useEffect(() => {
+        const fresh = pendingCards.filter((reply) => reply.state === "sending" && !announcedRef.current.has(reply.uid));
+        if (fresh.length === 0)
+            return;
+        for (const reply of fresh) {
+            announcedRef.current.add(reply.uid);
+        }
+        setPendingFocusUid(fresh[0].uid);
+    }, [pendingKey]);
     /** A newer copy of one of the thread's messages, kept here and handed to the list - with the copy it
      * replaces where the caller was given one, so a conversation row can tell what actually changed. */
     function patchMessage(updated, previous) {
@@ -291,6 +391,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     }
     /** A message that left the folder being listed - it leaves the thread too, as it left the list. */
     function removeMessage(updated) {
+        removedRef.current.add(updated.uid);
         setMessages((prev) => prev.filter((message) => message.uid !== updated.uid));
         onMessageRemoved(updated);
     }
@@ -329,26 +430,30 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                         : 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 (_jsx("li", { ref: (node) => {
-                            rowRefs.current[uid] = 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) => {
+                        : `${messages.length + pendingCards.length} message${messages.length + pendingCards.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 }) })) : (_jsxs("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: [pendingCards.map((reply) => (_jsx("li", { ref: (node) => {
+                            rowRefs.current[reply.uid] = node;
+                        }, "data-outgoing": "true", children: _jsx(PendingMessageCard, { reply: reply, headerRef: (node) => {
+                                headerRefs.current[reply.uid] = node;
+                            } }) }, reply.uid))), messages.map((message) => {
+                        const uid = message.uid;
+                        const expanded = expandedUids.has(uid);
+                        const bodyId = `thread-message-${uid}`;
+                        const messageUnread = isUnread(message);
+                        return (_jsx("li", { ref: (node) => {
+                                rowRefs.current[uid] = 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;
-                                    }, buttonProps: {
-                                        onClick: () => toggleExpanded(uid),
-                                        "aria-expanded": false,
-                                        "aria-controls": bodyId,
-                                    } }), _jsx("div", { id: bodyId, hidden: true })] })) }, uid));
-                }) }))] }));
+                                    },
+                                }, 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, onChanged: patchMessage, 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;
+                                        }, buttonProps: {
+                                            onClick: () => toggleExpanded(uid),
+                                            "aria-expanded": false,
+                                            "aria-controls": bodyId,
+                                        } }), _jsx("div", { id: bodyId, hidden: true })] })) }, uid));
+                    })] }))] }));
 }

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

@@ -0,0 +1,18 @@
+import React from "react";
+export interface EmptyFolderBarProps {
+    /** The folder the list is showing ("Deleted Items", "Junk Email"). */
+    folderName: string;
+    /** How many messages it holds, when that is known. */
+    count?: number;
+    /** Nothing to empty, or not allowed to. */
+    disabled: boolean;
+    /** Why, shown as the button's tooltip while it is disabled. */
+    disabledReason?: string;
+    onEmpty: () => void;
+}
+/**
+ * Outlook's "Empty folder", at the top of the list of Deleted Items and of Junk Email: the whole folder is permanently deleted, after the
+ * page has asked (this only reports the click). A row of its own under the toolbar rather than a toolbar button, so the toolbar keeps the
+ * width a phone gives it and the action is never taken for one of the list's arrangement controls.
+ */
+export default function EmptyFolderBar({ folderName, count, disabled, disabledReason, onEmpty }: EmptyFolderBarProps): React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineTrash } from "react-icons/hi2";
+/**
+ * Outlook's "Empty folder", at the top of the list of Deleted Items and of Junk Email: the whole folder is permanently deleted, after the
+ * page has asked (this only reports the click). A row of its own under the toolbar rather than a toolbar button, so the toolbar keeps the
+ * width a phone gives it and the action is never taken for one of the list's arrangement controls.
+ */
+export default function EmptyFolderBar({ folderName, count, disabled, disabledReason, onEmpty }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-1 border-b border-border text-xs text-text-muted", children: [_jsx("span", { children: count === undefined ? "" : `${count} ${count === 1 ? "item" : "items"}` }), _jsxs("button", { type: "button", onClick: onEmpty, disabled: disabled, title: disabled ? disabledReason : `Permanently delete everything in ${folderName}`, className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-sm text-danger hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsx(HiOutlineTrash, { size: 16, "aria-hidden": "true", className: "shrink-0" }), `Empty ${folderName}`] })] }));
+}

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

@@ -40,22 +40,32 @@ export interface MailSelectionBarProps {
      * prompt, which would be claiming the move simply didn't happen. */
     onMoveTo: (folderUid: string) => Promise<void>;
     onReportJunk: () => void;
+    /** Delete: moves the selection to Deleted Items - or, when `deletesPermanently`, permanently deletes it (the page asks first). */
     onDelete: () => void;
+    /** The selection is in Deleted Items, so Delete is the permanent one: the button says "Delete permanently" and is styled as the destructive
+     * action it is. The page decides (a search over several mailboxes lists messages from more than one folder, so the folder being viewed is not
+     * always the answer). */
+    deletesPermanently?: boolean;
     /** 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;
     /** 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;
+    /** Why Move to is unavailable, when the selection is spread over mailboxes and a folder can only belong to one (search results over several
+     * mailboxes). Shown as the button's tooltip. */
+    moveDisabledReason?: string;
+    /** The same for Apply label: a label belongs to one mailbox, and `labels` are one mailbox's. */
+    labelsDisabledReason?: string;
 }
 /**
  * The header that replaces the list's own toolbar while select mode is on: how many rows are selected,
  * select-all/clear, and the bulk actions Outlook offers for a multi-selection - mark read/unread, flag,
  * archive, move, report junk and delete.
  *
- * "Delete" means *move to Deleted Items*, never a permanent erase: there is no bulk permanent-delete API,
- * and the collection-level DELETE truncates the folder rather than removing a selection. An action whose
- * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
+ * "Delete" means *move to Deleted Items* - except on messages that are already in Deleted Items (`deletesPermanently`),
+ * where it is "Delete permanently": the page confirms, then erases them for good, as Outlook's Delete does there. An
+ * action whose 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, 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, deletesPermanently, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }: MailSelectionBarProps): React.JSX.Element;

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

@@ -9,25 +9,23 @@ 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";
+function actionClassName(destructive = false) {
+    return `px-2 py-1 rounded-md text-sm ${destructive ? "text-danger font-semibold" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
 }
 /**
  * The header that replaces the list's own toolbar while select mode is on: how many rows are selected,
  * select-all/clear, and the bulk actions Outlook offers for a multi-selection - mark read/unread, flag,
  * archive, move, report junk and delete.
  *
- * "Delete" means *move to Deleted Items*, never a permanent erase: there is no bulk permanent-delete API,
- * and the collection-level DELETE truncates the folder rather than removing a selection. An action whose
- * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
+ * "Delete" means *move to Deleted Items* - except on messages that are already in Deleted Items (`deletesPermanently`),
+ * where it is "Delete permanently": the page confirms, then erases them for good, as Outlook's Delete does there. An
+ * action whose 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, shortcuts, }) {
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, deletesPermanently = false, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }) {
     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 };
+    /** `title` and `aria-keyshortcuts` for an action the keyboard also does. */
+    const hint = (label, shortcut) => shortcuts ? { title: withHint(label, shortcut, env), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, env) } : {};
     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
@@ -44,12 +42,12 @@ export default function MailSelectionBar({ selected, listed, totals, onSelectAll
     // them is already being in the folder they would move to.
     const archiveReason = currentType === "archive" ? "These messages are already in Archive" : undefined;
     const junkReason = currentType === "junk" ? "These messages are already in Junk" : undefined;
-    const deleteReason = currentType === "deleted_items" ? "These messages are already in Deleted Items" : undefined;
+    const deleteLabel = deletesPermanently ? "Delete permanently" : "Delete";
     // A label every selected message already carries starts ticked; one only some of them carry starts
     // 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(), ...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
+    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 || !!labelsDisabledReason, title: labelsDisabledReason, 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" })] })] }));
+                            : "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 || !!moveDisabledReason, title: moveDisabledReason, 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, className: actionClassName(deletesPermanently), ...hint(deleteLabel, SHORTCUTS.mail.delete), children: deleteLabel })] })] }));
 }

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

@@ -12,6 +12,10 @@ interface MenuItemBase {
     checked?: boolean | "mixed";
     /** A colour swatch before the label - a label's own colour. */
     swatchColor?: string;
+    /** An icon before the label, for a menu whose rows are commands (the reading pane's "More actions"). */
+    icon?: ReactNode;
+    /** A tooltip for the row - the full text of a label the row truncates. */
+    title?: string;
     disabled?: boolean;
     /** Leaves the menu open after choosing this row, for a multi-select list where several rows are ticked
      * before one command commits them all. */
@@ -40,8 +44,11 @@ export interface MenuSectionSpec {
 /** The height `PopoverPortal` is asked for - exact for a short menu, capped (the list scrolls) for a long one. */
 export declare function menuHeight(sections: MenuSectionSpec[], width?: number): number;
 export interface MenuButtonProps {
-    /** The trigger's visible label. */
+    /** The trigger's visible label. Not drawn (nor is the chevron) with `iconOnly`, where `aria-label` is all the trigger says. */
     label: ReactNode;
+    /** The trigger is just its `icon` - a round icon button like the reading pane's own command row, whose `className` it takes over
+     * completely. `aria-label` (and `title`) name it. */
+    iconOnly?: boolean;
     /** The trigger's accessible name, which also names the menu itself - includes the current selection
      * where there is one ("Filter: Unread"), so the button says what it's set to, not just what it does. */
     "aria-label": string;
@@ -67,5 +74,5 @@ export interface MenuButtonProps {
  * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
  * semantics, roving focus and keyboard handling are this component's own.
  */
-export default function MenuButton({ label, icon, disabled, title, sections, width, className, "aria-label": ariaLabel, onOpenChange, }: MenuButtonProps): React.JSX.Element;
+export default function MenuButton({ label, iconOnly, icon, disabled, title, sections, width, className, "aria-label": ariaLabel, onOpenChange, }: MenuButtonProps): React.JSX.Element;
 export {};

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

@@ -61,7 +61,7 @@ export function menuHeight(sections, width = DEFAULT_MENU_WIDTH) {
  * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
  * semantics, roving focus and keyboard handling are this component's own.
  */
-export default function MenuButton({ label, icon, disabled, title, sections, width = DEFAULT_MENU_WIDTH, className = "", "aria-label": ariaLabel, onOpenChange, }) {
+export default function MenuButton({ label, iconOnly = false, icon, disabled, title, sections, width = DEFAULT_MENU_WIDTH, className = "", "aria-label": ariaLabel, onOpenChange, }) {
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
     // The key of the item whose submenu is showing, or `null` at the top level. Held as a key, not as the
@@ -111,8 +111,10 @@ export default function MenuButton({ label, icon, disabled, title, sections, wid
     }
     function enterSubmenu(item) {
         setSubmenuKey(item.key);
-        // Past the Back row, onto the first row of the submenu itself.
-        setActiveIndex(1 + initialActiveIndex(item.submenu.flatMap((section) => section.items)));
+        const rows = item.submenu.flatMap((section) => section.items);
+        // Past the Back row, onto the first row of the submenu itself - or, when none of them can take focus (every row is unavailable right now), onto
+        // the Back row, so the keyboard still has a place to be.
+        setActiveIndex(rows.some((row) => !row.disabled) ? 1 + initialActiveIndex(rows) : 0);
     }
     function leaveSubmenu() {
         // Back on the row the submenu was opened from.
@@ -193,19 +195,21 @@ export default function MenuButton({ label, icon, disabled, title, sections, wid
         }
     }
     let itemIndex = -1;
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": ariaLabel, title: title, disabled: disabled, onClick: () => (open ? closeMenu(false) : openMenu()), onKeyDown: handleTriggerKeyDown, className: [
-                    // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
-                    // whatever sits beside it in the toolbar off the edge of a 384px list column.
-                    "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
-                    className,
-                ].join(" "), children: [icon, _jsx("span", { className: "truncate", children: label }), _jsx(HiChevronDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-muted" })] }), open && (_jsx(PopoverPortal, { anchorRef: triggerRef, onClose: () => closeMenu(false), width: width, height: menuHeight(shownSections, width), "aria-label": ariaLabel, children: _jsx("div", { ref: setMenuNode, role: "menu", tabIndex: -1, "aria-label": ariaLabel, onKeyDown: handleMenuKeyDown, className: "flex-1 overflow-y-auto py-1", children: shownSections.map((section, sectionIndex) => (_jsxs("div", { role: "group", "aria-label": section.label, className: sectionIndex > 0 ? "border-t border-border mt-1 pt-1" : "", children: [section.label && (_jsx("div", { "aria-hidden": "true", className: "h-6 flex items-center px-3 text-xs font-semibold uppercase tracking-wide text-text-muted", children: section.label })), section.items.map((item) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": ariaLabel, title: title, disabled: disabled, onClick: () => (open ? closeMenu(false) : openMenu()), onKeyDown: handleTriggerKeyDown, className: iconOnly
+                    ? className
+                    : [
+                        // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
+                        // whatever sits beside it in the toolbar off the edge of a 384px list column.
+                        "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
+                        className,
+                    ].join(" "), children: [icon, !iconOnly && _jsx("span", { className: "truncate", children: label }), !iconOnly && _jsx(HiChevronDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-muted" })] }), open && (_jsx(PopoverPortal, { anchorRef: triggerRef, onClose: () => closeMenu(false), width: width, height: menuHeight(shownSections, width), "aria-label": ariaLabel, children: _jsx("div", { ref: setMenuNode, role: "menu", tabIndex: -1, "aria-label": ariaLabel, onKeyDown: handleMenuKeyDown, className: "flex-1 overflow-y-auto py-1", children: shownSections.map((section, sectionIndex) => (_jsxs("div", { role: "group", "aria-label": section.label, className: sectionIndex > 0 ? "border-t border-border mt-1 pt-1" : "", children: [section.label && (_jsx("div", { "aria-hidden": "true", className: "h-6 flex items-center px-3 text-xs font-semibold uppercase tracking-wide text-text-muted", children: section.label })), section.items.map((item) => {
                                 itemIndex += 1;
                                 const index = itemIndex;
                                 const role = item.role ?? "menuitem";
                                 return (_jsxs("button", { ref: (node) => {
                                         itemRefs.current[index] = node;
-                                    }, type: "button", role: role, disabled: item.disabled, tabIndex: index === activeIndex ? 0 : -1, ...(role === "menuitem"
+                                    }, type: "button", role: role, disabled: item.disabled, title: item.title, tabIndex: index === activeIndex ? 0 : -1, ...(role === "menuitem"
                                         ? {}
-                                        : { "aria-checked": item.checked === "mixed" ? "mixed" : !!item.checked }), ...(item.submenu ? { "aria-haspopup": "menu", "aria-expanded": false } : {}), onClick: () => selectItem(item), className: "w-full flex items-start gap-2 px-3 py-2 text-left text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsxs("span", { className: "w-4 shrink-0 flex justify-center pt-0.5", children: [item.key === "__back" && (_jsx(HiChevronLeft, { size: 14, "aria-hidden": "true", className: "text-text-muted" })), item.checked === "mixed" ? (_jsx(HiMinus, { size: 14, "aria-hidden": "true", className: "text-primary-dark" })) : (item.checked && _jsx(HiCheck, { size: 14, "aria-hidden": "true", className: "text-primary-dark" }))] }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex h-5 items-center gap-1.5", children: [item.swatchColor && (_jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: item.swatchColor } })), _jsx("span", { className: "truncate", children: item.label })] }), item.description && (_jsx("span", { className: "block h-4 text-xs leading-4 text-text-muted truncate font-normal", children: item.description }))] }), item.submenu && (_jsx(HiChevronRight, { size: 14, "aria-hidden": "true", className: "shrink-0 mt-0.5 text-text-muted" }))] }, item.key));
+                                        : { "aria-checked": item.checked === "mixed" ? "mixed" : !!item.checked }), ...(item.submenu ? { "aria-haspopup": "menu", "aria-expanded": false } : {}), onClick: () => selectItem(item), className: "w-full flex items-start gap-2 px-3 py-2 text-left text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsxs("span", { className: "w-4 shrink-0 flex justify-center pt-0.5", children: [item.key === "__back" && (_jsx(HiChevronLeft, { size: 14, "aria-hidden": "true", className: "text-text-muted" })), item.checked === "mixed" ? (_jsx(HiMinus, { size: 14, "aria-hidden": "true", className: "text-primary-dark" })) : (item.checked && _jsx(HiCheck, { size: 14, "aria-hidden": "true", className: "text-primary-dark" }))] }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex h-5 items-center gap-1.5", children: [item.icon && (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: item.icon })), item.swatchColor && (_jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: item.swatchColor } })), _jsx("span", { className: "truncate", children: item.label })] }), item.description && (_jsx("span", { className: "block h-4 text-xs leading-4 text-text-muted truncate font-normal", children: item.description }))] }), item.submenu && (_jsx(HiChevronRight, { size: 14, "aria-hidden": "true", className: "shrink-0 mt-0.5 text-text-muted" }))] }, item.key));
                             }), section.note && _jsx("p", { className: "px-3 py-1 text-xs leading-4 text-text-muted", children: section.note })] }, section.key))) }) }))] }));
 }

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

@@ -72,6 +72,11 @@ export interface MessageDetailPaneProps {
      * server-side 400 guard); Drafts is detected via `draftsFolderUid` (already passed by every caller
      * for the Outbox-cancel flow) rather than a new prop. */
     onArchived?: (updated: Message) => void;
+    /** Called with the server's updated copy (and the copy it replaces) after the card's More actions menu marked the message read or unread, or
+     * flagged or unflagged it - it stays where it is, so a caller patches it in place, as it does for `onLabelsChanged`. The menu's Delete, Report
+     * junk and Block move the message out of its folder and are reported through `onMoved`, which is what makes a thread's card leave it and the
+     * pane advance, exactly as after Archive. */
+    onChanged?: (updated: Message, previous?: Message) => void;
     /** Every label defined in this message's mailbox, for the label-assignment popover below — each
      * caller fetches its own mailbox's labels the same way it already resolves `draftsFolderUid`
      * (`listLabels()`). Absent/empty simply hides the Labels control - there's nothing to assign. */