@rapidmx/web-client 0.6.0 → 0.7.0

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

@@ -1,11 +1,47 @@
 import React from "react";
+import { Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { ConversationSummary } from "@rapidmx/react-shared/mail/conversationsApi.js";
 export interface ConversationListProps {
     conversations: ConversationSummary[];
-    selectedId: string | null;
-    onSelect: (conversation: ConversationSummary) => void;
+    /** The mailbox the conversations were listed from - `listConversationMessages()` is mailbox-scoped. */
+    mailboxUid: string;
+    /** The message currently open in the reading pane, so the row standing for it can be marked. */
+    selectedUid: string | null;
+    /**
+     * Opens a conversation in the reading pane, positioned at one of its messages: the one a child row
+     * stands for, or the conversation's own `latestMessageUid` for a parent row. The conversation goes
+     * with the uid because the pane shows the whole thread, not just that message.
+     */
+    onOpenMessage: (conversation: ConversationSummary, uid: string) => void;
+    /** Newer copies of messages this list already fetched - the reading pane marks the message it opens as
+     * read, which this list would otherwise keep showing as unread until the thread is collapsed and
+     * expanded again. */
+    messageOverrides?: Record<string, Message>;
+    /** Turns each parent row into a checkbox row: select mode here ticks whole conversations, since a
+     * conversation is what this list's rows are. A child row stays a plain "open this message" button - a
+     * mixed conversation/message selection has no sensible bulk semantics (see `MailListToolbar`). */
+    selectMode?: boolean;
+    /** The `conversationId`s currently ticked. */
+    selectedConversationIds?: Set<string>;
+    onToggleSelected?: (conversation: ConversationSummary) => void;
+    /**
+     * Whether a conversation's own messages read newest first, matching the order sense the rows themselves
+     * are in ("Newest on top"). `listConversationMessages()` always answers oldest first - the order a
+     * thread is read in - so this reverses that copy for display rather than asking for it differently.
+     */
+    newestFirst?: boolean;
 }
-/** The "By conversation" counterpart to the per-message list `apps/www/index.tsx` renders inline for
- * "By date" — conversations are mailbox-wide (see `conversationsApi.ts`), so there's no per-folder
- * empty/loading state to distinguish here beyond what the page itself already handles. */
-export default function ConversationList({ conversations, selectedId, onSelect }: ConversationListProps): React.JSX.Element;
+/**
+ * The nested, Outlook-style conversation list: one parent row per conversation - its participants, subject,
+ * message count, unread count, flag/attachment hints and the latest message's preview - expanding via its
+ * own chevron into the conversation's individual messages as child rows, fetched on first expand with
+ * `listConversationMessages()` (one request for the whole thread, across folders, oldest first).
+ *
+ * Opening a row opens the whole conversation in `ConversationThreadPane`, positioned at the message the row
+ * stands for: the latest one for a parent row, that one for a child row.
+ *
+ * The chevron is a button of its own beside the row's own button rather than inside it (a button can't
+ * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
+ * its own name.
+ */
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, selectMode, selectedConversationIds, onToggleSelected, newestFirst, }: ConversationListProps): React.JSX.Element;

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

@@ -1,17 +1,91 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** The "By conversation" counterpart to the per-message list `apps/www/index.tsx` renders inline for
- * "By date" — conversations are mailbox-wide (see `conversationsApi.ts`), so there's no per-folder
- * empty/loading state to distinguish here beyond what the page itself already handles. */
-export default function ConversationList({ conversations, selectedId, onSelect }) {
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
+function participantNames(conversation) {
+    return conversation.participants.map((participant) => participant.displayName || participant.address).join(", ");
+}
+/**
+ * The nested, Outlook-style conversation list: one parent row per conversation - its participants, subject,
+ * message count, unread count, flag/attachment hints and the latest message's preview - expanding via its
+ * own chevron into the conversation's individual messages as child rows, fetched on first expand with
+ * `listConversationMessages()` (one request for the whole thread, across folders, oldest first).
+ *
+ * Opening a row opens the whole conversation in `ConversationThreadPane`, positioned at the message the row
+ * stands for: the latest one for a parent row, that one for a child row.
+ *
+ * The chevron is a button of its own beside the row's own button rather than inside it (a button can't
+ * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
+ * its own name.
+ */
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, selectMode, selectedConversationIds, onToggleSelected, newestFirst, }) {
+    const [expanded, setExpanded] = useState(new Set());
+    const [messagesById, setMessagesById] = useState({});
+    const [loadingIds, setLoadingIds] = useState(new Set());
+    const [errorsById, setErrorsById] = useState({});
+    function toggle(conversation) {
+        const id = conversation.conversationId;
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+        if (expanded.has(id) || messagesById[id] || loadingIds.has(id)) {
+            return;
+        }
+        setLoadingIds((prev) => new Set(prev).add(id));
+        setErrorsById((prev) => {
+            const next = { ...prev };
+            delete next[id];
+            return next;
+        });
+        listConversationMessages(mailboxUid, id)
+            .then((loaded) => setMessagesById((prev) => ({ ...prev, [id]: loaded })))
+            .catch((err) => setErrorsById((prev) => ({
+            ...prev,
+            [id]: err instanceof ApiRequestError ? err.message : "Could not load this conversation's messages.",
+        })))
+            .finally(() => setLoadingIds((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+        }));
+    }
     if (conversations.length === 0) {
-        return _jsx("p", { className: "p-4 text-sm text-text-muted", children: "No conversations in this mailbox." });
+        return _jsx("p", { className: "p-4 text-sm text-text-muted", children: "No conversations in this folder." });
     }
     return (_jsx("ul", { children: conversations.map((conversation) => {
+            const id = conversation.conversationId;
+            const isExpanded = expanded.has(id);
             const unread = conversation.unreadCount > 0;
-            return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onSelect(conversation), className: [
-                        "w-full text-left px-4 py-3 border-b border-border",
-                        conversation.conversationId === selectedId ? "bg-primary/10" : "hover:bg-surface-alt",
-                        unread ? "font-semibold" : "",
-                    ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: conversation.participants.map((p) => p.displayName || p.address).join(", ") }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: "text-sm truncate", children: conversation.subject || "(no subject)" }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/10 text-primary-dark font-semibold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && _jsx("span", { "aria-label": "Has attachments", children: "\uD83D\uDCCE" })] })] }) }, conversation.conversationId));
+            const loaded = messagesById[id];
+            // `listConversationMessages()` answers oldest first; the rows read in whichever sense the
+            // list itself is arranged in. Copied before reversing - the fetched array is cached.
+            const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
+            const panelId = `conversation-messages-${id}`;
+            const ticked = selectedConversationIds?.has(id) ?? false;
+            return (_jsxs("li", { children: [_jsxs("div", { className: [
+                            "flex items-stretch border-b border-border",
+                            conversation.latestMessageUid === selectedUid || ticked
+                                ? "bg-primary/10"
+                                : "hover:bg-surface-alt",
+                        ].join(" "), children: [selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: "shrink-0 px-2 text-text-muted hover:text-text", children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("button", { type: "button", onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["flex-1 min-w-0 text-left pr-4 py-3", unread ? "font-semibold" : ""].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: participantNames(conversation) }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: "text-sm truncate", children: conversation.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversation.latestPreview }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/10 text-primary-dark font-semibold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] })] }), _jsxs("ul", { id: panelId, hidden: !isExpanded, children: [errorsById[id] && (_jsx("li", { role: "alert", className: "pl-8 pr-4 py-2 text-xs text-danger border-b border-border", children: errorsById[id] })), loadingIds.has(id) && (_jsx("li", { className: "pl-8 pr-4 py-2 text-xs text-text-muted border-b border-border", children: "Loading messages\u2026" })), children?.map((fetched) => {
+                                const message = messageOverrides?.[fetched.uid] ?? fetched;
+                                return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onOpenMessage(conversation, message.uid), className: [
+                                            "w-full text-left pl-8 pr-4 py-2 border-b border-border",
+                                            message.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt",
+                                            message.flags.read ? "" : "font-semibold",
+                                        ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }) }, message.uid));
+                            })] })] }, id));
         }) }));
 }

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

@@ -1,23 +1,62 @@
 import React from "react";
-import { Folder } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Folder, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { ConversationSummary } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
+/** One request's worth of the thread. The server's own default for `listConversationMessages()`. */
+export declare const THREAD_PAGE_SIZE = 100;
+/**
+ * How many of a conversation's messages this pane will load. The server reads at most
+ * `CONVERSATION_SCAN_LIMIT` (500) messages when it groups conversations, so a `ConversationSummary` never
+ * describes more than this many anyway; the cap is here so a thread that somehow reports more can't turn
+ * into an unbounded run of requests. Past it the pane says so and the rest stay readable from the list.
+ */
+export declare const THREAD_MESSAGE_LIMIT = 500;
 export interface ConversationThreadPaneProps {
     conversation: ConversationSummary | null;
-    /** The mailbox's full folder list — a conversation can span folders (e.g. an Inbox message and the
-     * Sent Items copy of its reply), so each message's own recall eligibility is looked up individually
-     * against its own `folderUid` rather than assuming one folder for the whole thread. */
+    /** The mailbox the conversation was listed from - `listConversationMessages()` is mailbox-scoped. */
+    mailboxUid: string;
+    /**
+     * The message the reader opened: the thread is scrolled to it, it takes focus, and it is the *oldest*
+     * message left expanded (see `expandedFrom()`). `null`, or a uid this thread doesn't hold, falls back
+     * to the newest message - which is also what a parent row means by "open the conversation".
+     */
+    selectedUid: string | null;
+    /** The mailbox's full folder list. A conversation spans folders (an Inbox message and the Sent Items
+     * copy of its reply), so each message's own folder type is looked up against its own `folderUid`. */
     folders: Folder[];
-    /** The mailbox's labels, fetched once by the parent (`apps/www/index.tsx`) and passed through to
-     * every expanded message's own `MessageDetailPane` — see that component's own `labels` prop. */
+    /** The mailbox's labels, passed through to every expanded message's own `MessageDetailPane`. */
     labels?: Label[];
+    /**
+     * A newer copy of one of the thread's messages - read, flagged, labelled, classified, recalled - for
+     * the caller's own list to stay in step with what was done in here.
+     *
+     * `previous` is the copy this pane held before the change, where it has one: the conversation row this
+     * thread came from is a *summary* (a message count, an unread count), so a list showing those rows has
+     * no way to tell "this message has just been read" from "this already-read message was relabelled"
+     * without it - which is what left a row reporting "2 unread" after both had been read.
+     */
+    onMessagePatched: (updated: Message, previous?: Message) => void;
+    /** A message that left the folder being listed (archived, or a scheduled send sent back to Drafts). */
+    onMessageRemoved: (updated: Message) => void;
+    onLabelCreated?: (label: Label) => void;
+    /** A folder created from a message's own Move to prompt, for the folder sidebar to pick up. */
+    onFolderCreated?: (folder: Folder) => void;
 }
 /**
- * The merged, Gmail-style reading pane for "By conversation" mode — every message in the conversation
- * fetched and stacked oldest-to-newest, all but the most recent collapsed to a one-line summary
- * (sender + subject) until clicked. Reuses `MessageDetailPane` for each *expanded* message's own
- * header/attachments/body-iframe rendering rather than re-implementing it; a collapsed row is its own
- * lightweight summary, since mounting a full `MessageDetailPane` (and its iframe) for every message in
- * a long thread up front would be wasteful.
+ * 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
+ * the opened message and the entries above it - and the older ones, below it, are collapsed to a one-line
+ * summary (sender, date, preview) that expands on click or Enter. So opening the newest message shows just
+ * the top entry expanded, and opening 5 of 10 expands 10 down to 5.
+ *
+ * Newest first regardless of how the *list* is sorted: the list's own order arranges rows to pick from,
+ * while this is one conversation being read, and the entry a conversation row stands for - its latest
+ * message - is the one that should be at the top of the pane every time it is opened.
+ *
+ * Each *expanded* message is a `MessageDetailPane` of its own rather than a reimplementation of it, so the
+ * signature and verification badges, the verification-seal and decryption behaviour, the labels chips and
+ * menu, the attachments and Reply/Reply All/Forward/Archive all behave exactly as they do in the
+ * 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, folders, labels }: ConversationThreadPaneProps): React.JSX.Element;
+export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, }: ConversationThreadPaneProps): React.JSX.Element;

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

@@ -3,56 +3,145 @@ 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, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { getMessage, listAttachments, setMessageRead } from "@rapidmx/react-shared/mail/mailApi.js";
-import MessageDetailPane from "./MessageDetailPane.js";
+import { listAttachments, setMessageRead } 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 MessageDetailPane from "./MessageDetailPane.js";
+/** One request's worth of the thread. The server's own default for `listConversationMessages()`. */
+export const THREAD_PAGE_SIZE = 100;
+/**
+ * How many of a conversation's messages this pane will load. The server reads at most
+ * `CONVERSATION_SCAN_LIMIT` (500) messages when it groups conversations, so a `ConversationSummary` never
+ * describes more than this many anyway; the cap is here so a thread that somehow reports more can't turn
+ * into an unbounded run of requests. Past it the pane says so and the rest stay readable from the list.
+ */
+export const THREAD_MESSAGE_LIMIT = 500;
 /**
- * The merged, Gmail-style reading pane for "By conversation" mode — every message in the conversation
- * fetched and stacked oldest-to-newest, all but the most recent collapsed to a one-line summary
- * (sender + subject) until clicked. Reuses `MessageDetailPane` for each *expanded* message's own
- * header/attachments/body-iframe rendering rather than re-implementing it; a collapsed row is its own
- * lightweight summary, since mounting a full `MessageDetailPane` (and its iframe) for every message in
- * a long thread up front would be wasteful.
+ * Every message from `selectedUid` through to the newest - the run the reader is reading. Anything older
+ * stays collapsed to its one-line summary. Selecting the newest message therefore expands just that one.
+ *
+ * The pane lists newest first (see `loadThread()`), so that run is the opened message together with
+ * everything *above* it, and the opened message is the set's **last** entry rather than its first.
  */
-export default function ConversationThreadPane({ conversation, folders, labels }) {
-    const [messages, setMessages] = useState({});
+function expandedFrom(messages, selectedUid) {
+    const index = messages.findIndex((message) => message.uid === selectedUid);
+    // `messages` is never empty here (the callers below check), so -1 means "not in this thread" and the
+    // newest message - the first entry - is the anchor, exactly as a parent row's own click means.
+    const anchor = index === -1 ? 0 : index;
+    return new Set(messages.slice(0, anchor + 1).map((message) => message.uid));
+}
+/**
+ * The element a message of this thread actually scrolls inside. The pane is not itself the scroll
+ * container in the mail shell - `MailShell`'s own `<main>` is - so an adjustment has to be applied where
+ * the scrolling really happens, which is whichever ancestor is both scrollable and overflowing.
+ */
+function scrollingAncestor(node) {
+    for (let el = node.parentElement; el; el = el.parentElement) {
+        const overflowY = getComputedStyle(el).overflowY;
+        if ((overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight) {
+            return el;
+        }
+    }
+    // Nothing between the row and the root scrolls, so the page itself does - which in standards mode is
+    // `documentElement`, the same element `document.scrollingElement` names there.
+    return document.documentElement;
+}
+/**
+ * The thread's messages, **newest first**, in pages of `THREAD_PAGE_SIZE` up to `THREAD_MESSAGE_LIMIT`.
+ *
+ * `listConversationMessages()` pages oldest first and has no order of its own to ask for, so the pages are
+ * collected in that order - which is also the order the `THREAD_MESSAGE_LIMIT` cap has to apply in, since it
+ * is the oldest messages that are dropped when a thread is too long to load - and reversed once at the end.
+ * The pane reads newest first always, whatever the *list* is sorted by: it is the reading order for mail,
+ * and it means the message a conversation row stands for is the entry at the top.
+ */
+async function loadThread(mailboxUid, conversationId) {
+    const messages = [];
+    let more = true;
+    while (more && messages.length < THREAD_MESSAGE_LIMIT) {
+        const page = await listConversationMessages(mailboxUid, conversationId, {
+            page: messages.length / THREAD_PAGE_SIZE,
+            limit: THREAD_PAGE_SIZE,
+        });
+        messages.push(...page);
+        // A short page is the last one; a full page means asking for another.
+        more = page.length === THREAD_PAGE_SIZE;
+    }
+    messages.reverse();
+    return { messages, truncated: more };
+}
+/**
+ * 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
+ * the opened message and the entries above it - and the older ones, below it, are collapsed to a one-line
+ * summary (sender, date, preview) that expands on click or Enter. So opening the newest message shows just
+ * the top entry expanded, and opening 5 of 10 expands 10 down to 5.
+ *
+ * Newest first regardless of how the *list* is sorted: the list's own order arranges rows to pick from,
+ * while this is one conversation being read, and the entry a conversation row stands for - its latest
+ * message - is the one that should be at the top of the pane every time it is opened.
+ *
+ * Each *expanded* message is a `MessageDetailPane` of its own rather than a reimplementation of it, so the
+ * signature and verification badges, the verification-seal and decryption behaviour, the labels chips and
+ * menu, the attachments and Reply/Reply All/Forward/Archive all behave exactly as they do in the
+ * 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, }) {
+    const [messages, setMessages] = useState([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState({});
     const [expandedUids, setExpandedUids] = useState(new Set());
+    const [truncated, setTruncated] = useState(false);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    // Bumped on every conversation switch - any in-flight load/attachments/mark-read response carrying an
+    /** The message to scroll to and focus once it has rendered, or `null` once that has happened. */
+    const [pendingFocusUid, setPendingFocusUid] = useState(null);
+    // Bumped on every conversation switch - an in-flight load/attachments/mark-read response carrying an
     // older generation belongs to a superseded conversation and is dropped rather than applied.
     const generationRef = useRef(0);
-    // Message uids a mark-read / attachments request has already been issued for in the current
-    // generation, so re-running the effect below (every `messages`/`expandedUids` change) while one is
-    // still in flight never fires a duplicate - which for mark-read would also carry a stale `version`.
     const markReadRequestedRef = useRef(new Set());
     const attachmentsRequestedRef = useRef(new Set());
+    /** The `conversationId:selectedUid` the expansion run below has already been applied for, so patching
+     * a message (which changes `messages`) doesn't re-expand what the reader has since collapsed. */
+    const appliedSelectionRef = useRef(null);
+    /** Which conversation the messages currently in state belong to. A render with a new conversation and
+     * the previous one's messages still in state happens before the load effect has cleared them, and the
+     * expansion run below must sit that render out rather than anchor on a message from another thread. */
+    const loadedIdRef = useRef(null);
+    const rowRefs = useRef({});
+    const headerRefs = useRef({});
+    /** Where the toggled message's header sat in the viewport before it expanded, so the run below can put
+     * it back there - expanding a message above the one being read must not shove that one off-screen. */
+    const anchorRef = useRef(null);
+    const conversationId = conversation?.conversationId;
     useEffect(() => {
         const generation = ++generationRef.current;
         markReadRequestedRef.current = new Set();
         attachmentsRequestedRef.current = new Set();
-        setMessages({});
+        appliedSelectionRef.current = null;
+        loadedIdRef.current = null;
+        setMessages([]);
         setAttachmentsByUid({});
         setExpandedUids(new Set());
-        if (!conversation) {
+        setTruncated(false);
+        setError(null);
+        // The message the previous conversation was to be scrolled to went with it; leaving it set would
+        // point the run below at a row that is no longer rendered.
+        setPendingFocusUid(null);
+        if (!conversationId) {
             setLoading(false);
             return;
         }
         setLoading(true);
-        setError(null);
-        Promise.all(conversation.messageUids.map((uid) => getMessage(uid)))
+        loadThread(mailboxUid, conversationId)
             .then((loaded) => {
             if (generation !== generationRef.current)
                 return;
-            setMessages(Object.fromEntries(loaded.map((m) => [m.uid, m])));
-            // `messageUids` always has at least one entry — a `ConversationSummary` only ever
-            // exists because it was grouped from real messages (see
-            // `BaseMessageRoute.conversations()`).
-            const latestUid = conversation.messageUids[conversation.messageUids.length - 1];
-            setExpandedUids(new Set([latestUid]));
+            loadedIdRef.current = conversationId;
+            setMessages(loaded.messages);
+            setTruncated(loaded.truncated);
         })
             .catch((err) => {
             if (generation !== generationRef.current)
@@ -63,16 +152,68 @@ export default function ConversationThreadPane({ conversation, folders, labels }
             if (generation === generationRef.current)
                 setLoading(false);
         });
-    }, [conversation?.conversationId]);
-    // Lazily loads attachments and marks-as-read only for messages the reader has actually expanded —
-    // mirrors `mailDetailHooks.ts`'s `useMessageAttachments`/`useMarkMessageRead`, reimplemented here
-    // (rather than called in a loop, which the rules of hooks don't allow) since a thread can expand
-    // more than one message at once, unlike the single-selected-message case those hooks were built for.
+    }, [conversationId, mailboxUid]);
+    // Opening the thread, and opening a different message of the same thread, both set the run of expanded
+    // messages and ask for that message to be scrolled to. `messages` is a dependency because the thread's
+    // messages arrive after the click that selected one of them; the ref guard keeps a later change to
+    // `messages` (a patched copy) from re-running it.
+    useEffect(() => {
+        if (messages.length === 0 || loadedIdRef.current !== conversationId)
+            return;
+        const key = `${conversationId}:${selectedUid}`;
+        if (appliedSelectionRef.current === key)
+            return;
+        appliedSelectionRef.current = key;
+        const expanded = expandedFrom(messages, selectedUid);
+        setExpandedUids(expanded);
+        // The oldest expanded message is the one that was opened - `expandedFrom()`'s own anchor - which in
+        // this newest-first order is the *last* of the run, not the first.
+        setPendingFocusUid([...expanded][expanded.size - 1]);
+    }, [conversationId, selectedUid, messages]);
+    useLayoutEffect(() => {
+        if (!pendingFocusUid)
+            return;
+        // The row is always rendered by now: this runs after the DOM update that added the message it
+        // names, and that message came out of `messages` in the first place.
+        //
+        // Scrolled inside the thread's own list and nowhere else. `scrollIntoView()` scrolls *every*
+        // scrollable ancestor, the window included, which with a run of full-height messages expanded
+        // took the app header and the folder rail off the screen - so the adjustment goes on whichever
+        // ancestor actually scrolls, exactly as the toggle below already does it. When that is the page
+        // itself, nothing inside the pane scrolls and the row is already in view, so it is left alone.
+        const row = rowRefs.current[pendingFocusUid];
+        const scroller = scrollingAncestor(row);
+        if (scroller !== document.documentElement) {
+            const rect = row.getBoundingClientRect();
+            const top = rect.top - scroller.getBoundingClientRect().top;
+            // "nearest": the least that brings it into view, and nothing at all when it is already there.
+            if (top < 0 || top + rect.height > scroller.clientHeight) {
+                scroller.scrollTop += top;
+            }
+        }
+        // `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
+    // message being read otherwise pushes everything below it down by however tall the new body is.
+    useLayoutEffect(() => {
+        const anchor = anchorRef.current;
+        if (!anchor)
+            return;
+        anchorRef.current = null;
+        // The row is still there: the anchor was taken from a rendered row, and toggling never removes one.
+        const row = rowRefs.current[anchor.uid];
+        scrollingAncestor(row).scrollTop += row.getBoundingClientRect().top - anchor.top;
+    }, [expandedUids]);
+    // Attachments and mark-as-read, for expanded messages only - mirrors `mailDetailHooks.ts`'s
+    // `useMessageAttachments`/`useMarkMessageRead`, reimplemented here (rather than called in a loop, which
+    // the rules of hooks don't allow) because a thread expands several messages at once.
     useEffect(() => {
         const generation = generationRef.current;
-        for (const uid of expandedUids) {
-            const message = messages[uid];
-            if (!message)
+        for (const message of messages) {
+            const uid = message.uid;
+            if (!expandedUids.has(uid))
                 continue;
             if (message.hasAttachments && !attachmentsRequestedRef.current.has(uid)) {
                 attachmentsRequestedRef.current.add(uid);
@@ -83,31 +224,43 @@ export default function ConversationThreadPane({ conversation, folders, labels }
                     }
                 })
                     .catch(() => {
-                    // Best-effort, same as the mark-as-read catch below — `attachmentsByUid[uid] ??
-                    // []` already renders no attachments while this stays unset; forgetting the
-                    // request just lets a later re-expand retry it.
+                    // Best-effort, as in `useMessageAttachments`: no attachments render meanwhile, and
+                    // forgetting the request lets a later re-expand retry it.
                     attachmentsRequestedRef.current.delete(uid);
                 });
             }
-            // `message` is this render's latest copy, so the request carries its current `version`.
             if (!message.flags.read && !markReadRequestedRef.current.has(uid)) {
                 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;
-                    // Never clobber a newer copy another action (label/classify/...) already patched in.
-                    setMessages((prev) => (prev[uid].version > updated.version ? prev : { ...prev, [uid]: updated }));
+                    // `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 — matches `useMarkMessageRead`'s own doc comment. Forgetting the
-                    // request lets a later effect run (e.g. a re-expand) retry with a fresh copy.
+                    // Best-effort, as in `useMarkMessageRead`.
                     markReadRequestedRef.current.delete(uid);
                 });
             }
         }
     }, [expandedUids, messages]);
+    /** 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) {
+        setMessages((prev) => prev.map((message) => (message.uid === updated.uid ? updated : message)));
+        onMessagePatched(updated, previous);
+    }
+    /** A message that left the folder being listed - it leaves the thread too, as it left the list. */
+    function removeMessage(updated) {
+        setMessages((prev) => prev.filter((message) => message.uid !== updated.uid));
+        onMessageRemoved(updated);
+    }
     function toggleExpanded(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) => {
             const next = new Set(prev);
             if (next.has(uid)) {
@@ -119,6 +272,9 @@ export default function ConversationThreadPane({ conversation, folders, labels }
             return next;
         });
     }
+    function folderTypeOf(message) {
+        return folders.find((folder) => folder.uid === message.folderUid)?.type;
+    }
     if (!conversation) {
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a conversation to read it." });
     }
@@ -128,23 +284,24 @@ export default function ConversationThreadPane({ conversation, folders, labels }
     if (error) {
         return (_jsx("div", { className: "p-4 flex-1", children: _jsx(Alert, { children: error }) }));
     }
-    return (_jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-y-auto", children: [_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: conversation.subject || "(no subject)" }), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: [conversation.messageCount, " message", conversation.messageCount === 1 ? "" : "s"] })] }), conversation.messageUids.map((uid) => {
-                const message = messages[uid];
-                if (!message) {
-                    return null;
-                }
-                const expanded = expandedUids.has(uid);
-                if (!expanded) {
-                    return (_jsxs("button", { type: "button", onClick: () => toggleExpanded(uid), className: [
-                            "w-full text-left px-4 py-3 border-b border-border hover:bg-surface-alt",
-                            message.flags.read ? "" : "font-semibold",
-                        ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleString() })] }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: message.bodyPreview })] }, uid));
-                }
-                return (_jsxs("div", { className: "border-b border-border", children: [_jsx("button", { type: "button", onClick: () => toggleExpanded(uid), className: "w-full text-left px-4 pt-2 text-xs text-text-muted hover:text-text", children: "Collapse" }), _jsx(MessageDetailPane, { message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folders.find((f) => f.uid === message.folderUid)?.type === "sent_items", onRecalled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), isOutbox: folders.find((f) => f.uid === message.folderUid)?.type === "outbox", draftsFolderUid: folders.find((f) => f.type === "drafts")?.uid, 
-                            // Unlike `apps/www/index.tsx`'s list-removal behavior, this patches the
-                            // message in place (same as `onRecalled` above) rather than removing it from
-                            // the conversation — `conversation.messageUids` is owned by the parent, not
-                            // this component, so there's no membership list here to remove it from.
-                            onScheduledSendCanceled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), isInbox: folders.find((f) => f.uid === message.folderUid)?.type === "inbox", onClassified: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), onReceiptHandled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), onArchived: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), labels: labels, onLabelsChanged: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })) })] }, uid));
-            })] }));
+    return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col", children: [_jsxs("div", { className: "shrink-0 border-b border-border p-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: conversation.subject || "(no subject)" }), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: [messages.length, " message", messages.length === 1 ? "" : "s"] }), truncated && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] }))] }), _jsx("ul", { className: "flex-1 min-h-0 overflow-y-auto", children: messages.map((message) => {
+                    const uid = message.uid;
+                    const expanded = expandedUids.has(uid);
+                    const bodyId = `thread-message-${uid}`;
+                    const sender = message.from.displayName || message.from.address;
+                    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) => {
+                                        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("span", { className: "truncate", children: sender }), _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));
+                }) })] }));
 }