@rapidmx/web-client 0.5.0 → 0.7.0

package/apps/shared/components/mail/ConversationThreadPane.tsx

@@ -1,216 +1,434 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Attachment, Folder, Message, getMessage, listAttachments, setMessageRead } 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";
-import MessageDetailPane from "./MessageDetailPane.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-
-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. */
-    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. */
-    labels?: Label[];
-}
-
-/**
- * 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.
- */
-export default function ConversationThreadPane({ conversation, folders, labels }: ConversationThreadPaneProps) {
-    const [messages, setMessages] = useState<Record<string, Message>>({});
-    const [attachmentsByUid, setAttachmentsByUid] = useState<Record<string, Attachment[]>>({});
-    const [expandedUids, setExpandedUids] = useState<Set<string>>(new Set());
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    // Bumped on every conversation switch - any 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<Set<string>>(new Set());
-    const attachmentsRequestedRef = useRef<Set<string>>(new Set());
-
-    useEffect(() => {
-        const generation = ++generationRef.current;
-        markReadRequestedRef.current = new Set();
-        attachmentsRequestedRef.current = new Set();
-        setMessages({});
-        setAttachmentsByUid({});
-        setExpandedUids(new Set());
-        if (!conversation) {
-            setLoading(false);
-            return;
-        }
-        setLoading(true);
-        setError(null);
-        Promise.all(conversation.messageUids.map((uid) => getMessage(uid)))
-            .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]));
-            })
-            .catch((err) => {
-                if (generation !== generationRef.current) return;
-                setError(err instanceof ApiRequestError ? err.message : "Could not load this conversation.");
-            })
-            .finally(() => {
-                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.
-    useEffect(() => {
-        const generation = generationRef.current;
-        for (const uid of expandedUids) {
-            const message = messages[uid];
-            if (!message) continue;
-            if (message.hasAttachments && !attachmentsRequestedRef.current.has(uid)) {
-                attachmentsRequestedRef.current.add(uid);
-                listAttachments(message.folderUid, uid)
-                    .then((loaded) => {
-                        if (generation === generationRef.current) {
-                            setAttachmentsByUid((prev) => ({ ...prev, [uid]: loaded }));
-                        }
-                    })
-                    .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.
-                        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);
-                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 }));
-                    })
-                    .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.
-                        markReadRequestedRef.current.delete(uid);
-                    });
-            }
-        }
-    }, [expandedUids, messages]);
-
-    function toggleExpanded(uid: string) {
-        setExpandedUids((prev) => {
-            const next = new Set(prev);
-            if (next.has(uid)) {
-                next.delete(uid);
-            } else {
-                next.add(uid);
-            }
-            return next;
-        });
-    }
-
-    if (!conversation) {
-        return <p className="p-8 text-sm text-text-muted">Select a conversation to read it.</p>;
-    }
-    if (loading) {
-        return <p className="p-8 text-sm text-text-muted">Loading&hellip;</p>;
-    }
-    if (error) {
-        return (
-            <div className="p-4 flex-1">
-                <Alert>{error}</Alert>
-            </div>
-        );
-    }
-
-    return (
-        <div className="flex-1 min-w-0 flex flex-col overflow-y-auto">
-            <div className="border-b border-border p-4">
-                <h1 className="text-lg font-bold tracking-tight">{conversation.subject || "(no subject)"}</h1>
-                <p className="text-sm text-text-muted mt-1">
-                    {conversation.messageCount} message{conversation.messageCount === 1 ? "" : "s"}
-                </p>
-            </div>
-            {conversation.messageUids.map((uid) => {
-                const message = messages[uid];
-                if (!message) {
-                    return null;
-                }
-                const expanded = expandedUids.has(uid);
-                if (!expanded) {
-                    return (
-                        <button
-                            key={uid}
-                            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(" ")}
-                        >
-                            <div className="flex items-center justify-between gap-2 text-sm">
-                                <span className="truncate">{message.from.displayName || message.from.address}</span>
-                                <span className="text-xs text-text-muted shrink-0">
-                                    {new Date(message.receivedDate).toLocaleString()}
-                                </span>
-                            </div>
-                            <div className="text-xs text-text-muted truncate font-normal">{message.bodyPreview}</div>
-                        </button>
-                    );
-                }
-                return (
-                    <div key={uid} className="border-b border-border">
-                        <button
-                            type="button"
-                            onClick={() => toggleExpanded(uid)}
-                            className="w-full text-left px-4 pt-2 text-xs text-text-muted hover:text-text"
-                        >
-                            Collapse
-                        </button>
-                        <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 }))}
-                        />
-                    </div>
-                );
-            })}
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Attachment, Folder, Message, listAttachments, setMessageRead } from "@rapidmx/react-shared/mail/mailApi.js";
+import { ConversationSummary, listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
+import { Label } from "@rapidmx/react-shared/mail/labelsApi.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;
+
+export interface ConversationThreadPaneProps {
+    conversation: ConversationSummary | null;
+    /** 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, 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;
+}
+
+/**
+ * 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.
+ */
+function expandedFrom(messages: Message[], selectedUid: string | null): Set<string> {
+    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: HTMLElement): HTMLElement {
+    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: string, conversationId: string): Promise<{ messages: Message[]; truncated: boolean }> {
+    const messages: Message[] = [];
+    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,
+}: ConversationThreadPaneProps) {
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [attachmentsByUid, setAttachmentsByUid] = useState<Record<string, Attachment[]>>({});
+    const [expandedUids, setExpandedUids] = useState<Set<string>>(new Set());
+    const [truncated, setTruncated] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    /** The message to scroll to and focus once it has rendered, or `null` once that has happened. */
+    const [pendingFocusUid, setPendingFocusUid] = useState<string | null>(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);
+    const markReadRequestedRef = useRef<Set<string>>(new Set());
+    const attachmentsRequestedRef = useRef<Set<string>>(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<string | null>(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<string | null>(null);
+    const rowRefs = useRef<Record<string, HTMLLIElement | null>>({});
+    const headerRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+    /** 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<{ uid: string; top: number } | null>(null);
+
+    const conversationId = conversation?.conversationId;
+
+    useEffect(() => {
+        const generation = ++generationRef.current;
+        markReadRequestedRef.current = new Set();
+        attachmentsRequestedRef.current = new Set();
+        appliedSelectionRef.current = null;
+        loadedIdRef.current = null;
+        setMessages([]);
+        setAttachmentsByUid({});
+        setExpandedUids(new Set());
+        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);
+        loadThread(mailboxUid, conversationId)
+            .then((loaded) => {
+                if (generation !== generationRef.current) return;
+                loadedIdRef.current = conversationId;
+                setMessages(loaded.messages);
+                setTruncated(loaded.truncated);
+            })
+            .catch((err) => {
+                if (generation !== generationRef.current) return;
+                setError(err instanceof ApiRequestError ? err.message : "Could not load this conversation.");
+            })
+            .finally(() => {
+                if (generation === generationRef.current) setLoading(false);
+            });
+    }, [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 message of messages) {
+            const uid = message.uid;
+            if (!expandedUids.has(uid)) continue;
+            if (message.hasAttachments && !attachmentsRequestedRef.current.has(uid)) {
+                attachmentsRequestedRef.current.add(uid);
+                listAttachments(message.folderUid, uid)
+                    .then((loaded) => {
+                        if (generation === generationRef.current) {
+                            setAttachmentsByUid((prev) => ({ ...prev, [uid]: loaded }));
+                        }
+                    })
+                    .catch(() => {
+                        // Best-effort, as in `useMessageAttachments`: no attachments render meanwhile, and
+                        // forgetting the request lets a later re-expand retry it.
+                        attachmentsRequestedRef.current.delete(uid);
+                    });
+            }
+            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;
+                        // `message` is the unread copy this pane just replaced - what tells the list's own
+                        // conversation row that its unread count has gone down by one.
+                        patchMessage(updated, message);
+                    })
+                    .catch(() => {
+                        // Best-effort, as in `useMarkMessageRead`.
+                        markReadRequestedRef.current.delete(uid);
+                    });
+            }
+        }
+    }, [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: Message, previous?: Message) {
+        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: Message) {
+        setMessages((prev) => prev.filter((message) => message.uid !== updated.uid));
+        onMessageRemoved(updated);
+    }
+
+    function toggleExpanded(uid: string) {
+        // 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)) {
+                next.delete(uid);
+            } else {
+                next.add(uid);
+            }
+            return next;
+        });
+    }
+
+    function folderTypeOf(message: Message): string | undefined {
+        return folders.find((folder) => folder.uid === message.folderUid)?.type;
+    }
+
+    if (!conversation) {
+        return <p className="p-8 text-sm text-text-muted">Select a conversation to read it.</p>;
+    }
+    if (loading) {
+        return <p className="p-8 text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (error) {
+        return (
+            <div className="p-4 flex-1">
+                <Alert>{error}</Alert>
+            </div>
+        );
+    }
+
+    return (
+        // The pane is the window's height, not the thread's: a full-height flex column whose heading is
+        // fixed and whose list of messages is the one scrolling, growing child (`min-h-0`, or the list
+        // would stretch the column past the pane instead of scrolling inside it). That is what gives an
+        // expanded message's own `min-h-full` row - and therefore its body iframe, which can't measure
+        // itself - a real height to resolve against at any window size.
+        <div className="flex-1 min-w-0 min-h-0 flex flex-col">
+            <div className="shrink-0 border-b border-border p-4">
+                <h1 className="text-lg font-bold tracking-tight">{conversation.subject || "(no subject)"}</h1>
+                <p className="text-sm text-text-muted mt-1">
+                    {messages.length} message{messages.length === 1 ? "" : "s"}
+                </p>
+                {truncated && (
+                    <p className="text-xs text-text-muted mt-1">
+                        Only the oldest {THREAD_MESSAGE_LIMIT} messages of this conversation are shown here. The rest
+                        are still in the message list.
+                    </p>
+                )}
+            </div>
+            <ul className="flex-1 min-h-0 overflow-y-auto">
+                {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 (
+                        <li
+                            key={uid}
+                            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(" ")}
+                        >
+                            <h2 className="shrink-0">
+                                <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(" ")}
+                                >
+                                    <span className="flex items-center justify-between gap-2 text-sm">
+                                        <span className="truncate">{sender}</span>
+                                        <span className="text-xs text-text-muted shrink-0">
+                                            {new Date(message.receivedDate).toLocaleString()}
+                                        </span>
+                                    </span>
+                                    {!expanded && (
+                                        <span className="block text-xs text-text-muted truncate font-normal">
+                                            {message.bodyPreview}
+                                        </span>
+                                    )}
+                                </button>
+                            </h2>
+                            <div id={bodyId} hidden={!expanded} className={expanded ? "flex-1 min-h-0 flex" : undefined}>
+                                {expanded && (
+                                    <MessageDetailPane
+                                        inThread
+                                        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}
+                                    />
+                                )}
+                            </div>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+}