@rapidmx/web-client 0.15.1 → 0.16.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, 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/MailSelectionBar.d.ts

@@ -47,6 +47,11 @@ export interface MailSelectionBarProps {
     /** 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,
@@ -58,4 +63,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, shortcuts, }: MailSelectionBarProps): React.JSX.Element;
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }: MailSelectionBarProps): React.JSX.Element;

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

@@ -22,7 +22,7 @@ function actionClassName() {
  * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, }) {
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, 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
@@ -49,7 +49,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(), ...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 || !!deleteReason, className: actionClassName(), ...hint("Delete", SHORTCUTS.mail.delete, deleteReason), children: "Delete" })] })] }));
 }

package/dist/apps/shared/components/mail/compose/ComposeWindow.js

@@ -10,6 +10,7 @@ import { assembleDraft, attachmentContentUrl, createDraft, deleteMessage, getMai
 import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
 import { buildComposeBodyHtml } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
 import { peekMailboxWritability, useMailboxWritability } from "../writableMailboxes.js";
+import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import { resolveRecipientEncryption } from "@rapidmx/react-shared/crypto/composeSecurity.js";
 import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
 import { findActivePublicKey, getEncryptionPolicy, lookupKeys } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
@@ -219,11 +220,13 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
             if (cancelled) {
                 return;
             }
-            setMailboxes(result);
+            // Listed with the caller's own (primary) mailbox first, and defaulted to below.
+            const ordered = orderMailboxes(result, userUid);
+            setMailboxes(ordered);
             // Never default to a mailbox already known to be view-only (see the effect below for one
             // that turns out to be).
-            const candidates = result.filter((mb) => peekMailboxWritability(mb, userUid, trusted) !== false);
-            setFromMailboxUid((current) => current ?? (candidates.find((mb) => mb.ownerUserUid === userUid) ?? candidates[0])?.uid);
+            const candidates = ordered.filter((mb) => peekMailboxWritability(mb, userUid, trusted) !== false);
+            setFromMailboxUid((current) => current ?? primaryMailboxUid(candidates, userUid));
         })
             .catch((err) => {
             // Only fatal when there's no mailbox to fall back on - a session that already names one just
@@ -481,7 +484,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         if (!fromIsViewOnly || hasUploads) {
             return;
         }
-        const ordered = [...mailboxes.filter((mb) => mb.ownerUserUid === userUid), ...mailboxes.filter((mb) => mb.ownerUserUid !== userUid)];
+        const ordered = orderMailboxes(mailboxes, userUid);
         const alternative = ordered.find((mb) => writability[mb.uid] === true) ?? ordered.find((mb) => writability[mb.uid] === undefined);
         if (alternative) {
             handleFromChange(alternative.uid);
@@ -685,6 +688,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
                 encryptRequested: current.encryptRequested,
                 forcePlaintext,
                 saved: saveInFlightRef.current,
+                threading: session.threading,
             };
             if (request.to.length === 0) {
                 setSendError("At least one recipient is required.");

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

@@ -22,6 +22,26 @@ export interface RecipientInputProps {
     disabled?: boolean;
     /** Focuses the input when it mounts - a new message starts in To. */
     autoFocus?: boolean;
+    /** Called whenever the field's entries change: every committed entry (chips - a picked suggestion, a finished or
+     * pasted one, or a typed one committed by Enter or leaving the field) and the text still being typed (`""` after a
+     * commit). Lets a field that keeps its entries as something other than text (attendees) read them without parsing
+     * `value` and guessing which part of it is still being typed. */
+    onEdit?: (chips: string[], pending: string) => void;
+    /** Text being typed already when the input mounts (the last recipient of `value`), so a field that is remounted
+     * (a popover growing into a form) keeps it in the input instead of turning it into a chip. */
+    initialPending?: string;
+    /** Chips this returns true for are not drawn (they stay in the value, and out of the suggestions): a field that
+     * lists some entries itself. Backspace in an empty input removes the last chip that is drawn. */
+    hideChip?: (chip: string) => boolean;
+    placeholder?: string;
+    /** The input's accessible name, for a field without a `<label htmlFor>`. */
+    ariaLabel?: string;
+    /** The chip list's accessible name; `${label} recipients` by default. */
+    listLabel?: string;
+    /** Classes for the field's outer element, after its own (a border, padding). */
+    className?: string;
+    /** The suggestions' `z-index`, for a field inside an overlay that stacks above the default's (`z-[60]`). */
+    dropdownZIndex?: number;
 }
 /**
  * A To/Cc/Bcc field: committed recipients as removable chips, and a WAI-ARIA combobox for the one being typed that
@@ -33,4 +53,4 @@ export interface RecipientInputProps {
  * least two characters, and a newer query aborts an older request. Arrow keys move through them, Enter or Tab picks
  * one (as `Name <address>`), Escape closes them, and Backspace in an empty input removes the last chip.
  */
-export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions, debounceMs, disabled, autoFocus, }: RecipientInputProps): React.JSX.Element;
+export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions, debounceMs, disabled, autoFocus, onEdit, initialPending, hideChip, placeholder, ariaLabel, listLabel, className, dropdownZIndex, }: RecipientInputProps): React.JSX.Element;

package/dist/apps/shared/components/mail/compose/RecipientInput.js

@@ -41,8 +41,8 @@ function dropdownPosition(anchor) {
  * least two characters, and a newer query aborts an older request. Arrow keys move through them, Enter or Tab picks
  * one (as `Name <address>`), Escape closes them, and Backspace in an empty input removes the last chip.
  */
-export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions = fetchRecipientSuggestions, debounceMs = RECIPIENT_SUGGESTION_DEBOUNCE_MS, disabled, autoFocus, }) {
-    const [pending, setPending] = useState("");
+export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions = fetchRecipientSuggestions, debounceMs = RECIPIENT_SUGGESTION_DEBOUNCE_MS, disabled, autoFocus, onEdit, initialPending = "", hideChip, placeholder, ariaLabel, listLabel, className, dropdownZIndex, }) {
+    const [pending, setPending] = useState(initialPending);
     const [suggestions, setSuggestions] = useState([]);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
@@ -58,6 +58,8 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
     const chips = pendingActive ? tokens.slice(0, -1) : tokens;
     const inputValue = pendingActive ? pending : "";
     const query = pendingActive ? pendingText : "";
+    const drawn = chips.map((chip, index) => ({ chip, index })).filter(({ chip }) => !hideChip?.(chip));
+    const lastDrawn = drawn.length > 0 ? drawn[drawn.length - 1].index : -1;
     const listboxId = `${id}-suggestions`;
     const optionId = (index) => `${id}-suggestion-${index}`;
     useEffect(() => {
@@ -113,6 +115,7 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
     });
     function emit(nextChips, nextPending) {
         onChange([...nextChips, nextPending.trim()].filter((part) => part.length > 0).join(", "));
+        onEdit?.(nextChips, nextPending.trim());
     }
     function handleInputChange(e) {
         const { finished, rest } = splitTypedRecipients(e.target.value);
@@ -122,17 +125,22 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
         emit([...chips, ...finished], nextPending);
     }
     function commitPending() {
-        const next = [...chips, pendingText].filter((part) => part.length > 0).join(", ");
+        const committed = [...chips, pendingText].filter((part) => part.length > 0);
         setPending("");
         setOpen(false);
-        return next;
+        if (pendingText) {
+            onEdit?.(committed, "");
+        }
+        return committed.join(", ");
     }
     function select(suggestion) {
-        const next = [...chips, formatRecipient({ address: suggestion.address, displayName: suggestion.displayName || undefined })].join(", ");
+        const committed = [...chips, formatRecipient({ address: suggestion.address, displayName: suggestion.displayName || undefined })];
+        const next = committed.join(", ");
         setPending("");
         setOpen(false);
         setSuggestions([]);
         onChange(next);
+        onEdit?.(committed, "");
         onCommit?.(next);
     }
     function removeChip(index) {
@@ -181,9 +189,9 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
                 }
                 return;
             case "Backspace":
-                if (inputValue === "" && chips.length > 0) {
+                if (inputValue === "" && lastDrawn >= 0) {
                     e.preventDefault();
-                    emit(chips.slice(0, -1), "");
+                    emit(chips.filter((_, i) => i !== lastDrawn), "");
                 }
                 return;
         }
@@ -192,12 +200,12 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
         const next = commitPending();
         onBlur?.(next);
     }
-    return (_jsxs("div", { ref: anchorRef, className: "flex-1 min-w-0 flex flex-wrap items-center gap-1", children: [chips.length > 0 && (_jsx("ul", { role: "list", "aria-label": `${label} recipients`, className: "contents", children: chips.map((chip, index) => {
+    return (_jsxs("div", { ref: anchorRef, className: `flex-1 min-w-0 flex flex-wrap items-center gap-1${className ? ` ${className}` : ""}`, children: [drawn.length > 0 && (_jsx("ul", { role: "list", "aria-label": listLabel ?? `${label} recipients`, className: "contents", children: drawn.map(({ chip, index }) => {
                     const recipient = parseRecipient(chip);
                     const valid = isValidRecipientAddress(recipient.address);
                     const name = recipient.displayName || recipient.address;
                     return (_jsxs("li", { title: chip, className: `flex items-center gap-1 max-w-full min-w-0 rounded-pill border pl-2 pr-0.5 py-px text-xs ${valid ? "bg-surface-alt border-border text-text" : "bg-danger-bg border-danger text-danger"}`, children: [_jsx("span", { className: "truncate", children: name }), !valid && _jsx("span", { className: "sr-only", children: " (not a valid email address)" }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": `Remove ${recipient.address}`, disabled: disabled, onMouseDown: (e) => e.preventDefault(), onClick: () => removeChip(index), className: "shrink-0 w-4 h-4 flex items-center justify-center rounded-pill text-text-muted hover:bg-border hover:text-text", children: _jsx(HiOutlineXMark, { size: 10 }) })] }, `${index}-${chip}`));
-                }) })), _jsx("input", { ref: inputRef, id: id, type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-expanded": expanded, "aria-controls": listboxId, "aria-activedescendant": expanded ? optionId(active) : undefined, disabled: disabled, autoFocus: autoFocus, className: "flex-1 min-w-[6rem] text-sm bg-transparent outline-none py-0.5", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: expanded ? `${visible.length} ${visible.length === 1 ? "suggestion" : "suggestions"}` : "" }), expanded &&
+                }) })), _jsx("input", { ref: inputRef, id: id, type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-label": ariaLabel, placeholder: placeholder, "aria-expanded": expanded, "aria-controls": listboxId, "aria-activedescendant": expanded ? optionId(active) : undefined, disabled: disabled, autoFocus: autoFocus, className: "flex-1 min-w-[6rem] text-sm bg-transparent outline-none py-0.5", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: expanded ? `${visible.length} ${visible.length === 1 ? "suggestion" : "suggestions"}` : "" }), expanded &&
                 position &&
-                createPortal(_jsx("ul", { id: listboxId, role: "listbox", "aria-label": `${label} suggestions`, onMouseDown: (e) => e.preventDefault(), style: { position: "fixed", left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight }, className: "z-[60] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1", children: visible.map((suggestion, index) => (_jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === active, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setActiveIndex(index), onClick: () => select(suggestion), className: `flex items-center gap-2 px-3 py-1.5 cursor-pointer ${index === active ? "bg-primary/10" : ""}`, children: [_jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block truncate text-sm text-text", children: suggestion.displayName || suggestion.address }), suggestion.displayName && _jsx("span", { className: "block truncate text-xs text-text-muted", children: suggestion.address })] }), _jsx("span", { className: "shrink-0 text-[11px] leading-4 px-1.5 rounded-pill bg-surface-alt text-text-muted", children: KIND_LABELS[suggestion.kind] ?? "Directory" })] }, `${index}-${suggestion.address}`))) }), document.body)] }));
+                createPortal(_jsx("ul", { id: listboxId, role: "listbox", "aria-label": `${label} suggestions`, onMouseDown: (e) => e.preventDefault(), style: { position: "fixed", left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight, zIndex: dropdownZIndex }, className: "z-[60] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1", children: visible.map((suggestion, index) => (_jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === active, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setActiveIndex(index), onClick: () => select(suggestion), className: `flex items-center gap-2 px-3 py-1.5 cursor-pointer ${index === active ? "bg-primary/10" : ""}`, children: [_jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block truncate text-sm text-text", children: suggestion.displayName || suggestion.address }), suggestion.displayName && _jsx("span", { className: "block truncate text-xs text-text-muted", children: suggestion.address })] }), _jsx("span", { className: "shrink-0 text-[11px] leading-4 px-1.5 rounded-pill bg-surface-alt text-text-muted", children: KIND_LABELS[suggestion.kind] ?? "Directory" })] }, `${index}-${suggestion.address}`))) }), document.body)] }));
 }

package/dist/apps/shared/components/mail/layout/FolderBadgeChip.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FolderBadge } from "../../../mail/folderCounts.js";
+/** A folder's badge: an accent pill with the unread count, or - for the folders that show how many they hold - plain muted text. */
+export default function FolderBadgeChip({ badge }: {
+    badge: FolderBadge;
+}): React.JSX.Element;

package/dist/apps/shared/components/mail/layout/FolderBadgeChip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { badgeLabel } from "../../../mail/folderCounts.js";
+/** A folder's badge: an accent pill with the unread count, or - for the folders that show how many they hold - plain muted text. */
+export default function FolderBadgeChip({ badge }) {
+    return (_jsxs("span", { className: [
+            "text-xs rounded-pill py-0.5 px-1.5",
+            badge.kind === "unread" ? "font-bold bg-primary/15 text-primary-dark" : "font-medium text-text-muted",
+        ].join(" "), children: [_jsx("span", { "aria-hidden": "true", children: badge.value }), _jsxs("span", { className: "sr-only", children: [" ", badgeLabel(badge)] })] }));
+}

package/dist/apps/shared/components/mail/layout/MailShell.d.ts

@@ -83,5 +83,10 @@ export { MAILBOX_LIST_LIMIT };
  * behavior change from before this, and a multi-mailbox user sees every mailbox's folders (and the new
  * aggregate section) simultaneously, matching the shared-mailbox feature's own "display as a separate set
  * of folders" requirement.
+ *
+ * An address that names nothing opens "All Mailboxes > Inbox" when there is more than one mailbox (that is when the section exists), and
+ * the one mailbox's own Inbox otherwise; a `?mailboxUid=`, `?folderUid=` or `?aggregate=` always wins. Nothing is selected until the address
+ * has been read. What needs a single mailbox while an all-mailboxes view is open (Compose, the new-message shortcut, key unlocking) uses the
+ * primary mailbox.
  */
 export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }: PropsWithChildren<MailShellProps>): React.JSX.Element;