@remit/web-client 0.0.207 → 0.0.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.207",
+  "version": "0.0.209",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/BriefPane.tsx

@@ -173,6 +173,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 
 	const actions = useThreadActions({
 		thread: selectedThread,
+		isOpen: true,
 		onAfterOptimisticRemove: handleDeselectIfRemoved,
 	});
 
@@ -197,7 +198,10 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 		[briefThreads, focusedThreadId],
 	);
 	const triageTarget = focusedThread ?? selectedThread;
-	const triageActions = useThreadActions({ thread: triageTarget });
+	const triageActions = useThreadActions({
+		thread: triageTarget,
+		isOpen: triageTarget?.messageId === selectedMessageId,
+	});
 
 	// The toolbar answers the conversation on screen; the keyboard answers the
 	// row the cursor is on, which may be one the address has not opened yet.

package/src/components/mail/FlaggedPane.tsx

@@ -179,6 +179,7 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 
 	const actions = useThreadActions({
 		thread: selectedThread,
+		isOpen: true,
 		onAfterOptimisticRemove: handleDeselectIfRemoved,
 	});
 
@@ -203,7 +204,10 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 		[threads, focusedThreadId],
 	);
 	const triageTarget = focusedThread ?? selectedThread;
-	const triageActions = useThreadActions({ thread: triageTarget });
+	const triageActions = useThreadActions({
+		thread: triageTarget,
+		isOpen: triageTarget?.messageId === selectedMessageId,
+	});
 
 	// The toolbar answers the conversation on screen; the keyboard answers the
 	// row the cursor is on, which may be one the address has not opened yet.

package/src/components/mail/MailboxPane.tsx

@@ -227,6 +227,8 @@ interface MailboxPaneContextValue {
 	onReply: ((mode: ReplyMode) => void) | undefined;
 	onToolbarDelete: () => void;
 	onToolbarStar: () => void;
+	/** Whether the open message is starred, as the conversation reports it. */
+	isStarred: boolean | undefined;
 	onToolbarMove: (destMailboxId: string) => void;
 	// Phone actions
 	onBack: () => void;
@@ -515,6 +517,7 @@ function MailboxPaneProvider({
 
 	const toolbarActions = useThreadActions({
 		thread: selectedThread,
+		isOpen: true,
 		mailboxId,
 		accountId: mailboxAccountId,
 		onAfterOptimisticRemove: handleDeselectIfRemoved,
@@ -806,6 +809,7 @@ function MailboxPaneProvider({
 		onReply: replyToOpenThread,
 		onToolbarDelete: toolbarActions.deleteThread,
 		onToolbarStar: toolbarActions.toggleStar,
+		isStarred: toolbarActions.isStarred,
 		onToolbarMove: toolbarActions.moveThread,
 		onBack: goBack,
 		nextThread: adjacentThread(nextMessageId),
@@ -1080,6 +1084,7 @@ function MailboxReading() {
 		onReply,
 		onToolbarDelete,
 		onToolbarStar,
+		isStarred,
 		onToolbarMove,
 		handleDeselectIfRemoved,
 		intelligenceRef,
@@ -1137,7 +1142,7 @@ function MailboxReading() {
 					onForward={onReply ? () => onReply("forward") : undefined}
 					onDelete={hasThread ? onToolbarDelete : undefined}
 					onToggleStar={hasThread ? onToolbarStar : undefined}
-					isStarred={selectedThread?.hasStars}
+					isStarred={isStarred}
 					moveContext={
 						hasThread && mailboxAccountId
 							? {

package/src/components/mail/MoveToTrigger.render.test.ts

@@ -65,8 +65,40 @@ const FOLDERS = [
 	makeMailbox({ mailboxId: "mbx-receipts", fullPath: "Receipts" }),
 ];
 
+// The desktop picker renders through a portal into document.body, so its
+// content sits outside the render container these helpers normally scope to.
+const pickerRoot = (dom: DomHarness): ParentNode => {
+	const trigger = dom.byLabel("Move to folder");
+	return trigger.getAttribute("aria-haspopup") === "dialog"
+		? dom.container
+		: dom.document.body;
+};
+
 const rowText = (dom: DomHarness): string[] =>
-	dom.queryAll("[role=treeitem]").map((row) => row.textContent ?? "");
+	[...pickerRoot(dom).querySelectorAll("[role=treeitem]")].map(
+		(row) => row.textContent ?? "",
+	);
+
+const pickerText = (dom: DomHarness): string =>
+	pickerRoot(dom).textContent ?? "";
+
+const pickerByLabel = (dom: DomHarness, label: string): HTMLElement => {
+	const found = pickerRoot(dom).querySelector(`[aria-label="${label}"]`);
+	if (!found) throw new Error(`no picker element labelled "${label}"`);
+	return found as HTMLElement;
+};
+
+const pickerByText = (
+	dom: DomHarness,
+	selector: string,
+	text: string,
+): HTMLElement => {
+	const found = [...pickerRoot(dom).querySelectorAll(selector)].find((node) =>
+		(node.textContent ?? "").includes(text),
+	);
+	if (!found) throw new Error(`no picker ${selector} containing "${text}"`);
+	return found as HTMLElement;
+};
 
 describe("MoveToTrigger", () => {
 	it("reports itself as collapsed until it is opened", () => {
@@ -103,7 +135,7 @@ describe("MoveToTrigger", () => {
 			false,
 		);
 
-		dom.click(dom.byLabel("Move to Work"));
+		dom.click(pickerByLabel(dom, "Move to Work"));
 		assert.ok(rowText(dom).some((label) => label.includes("Clients")));
 	});
 
@@ -117,10 +149,10 @@ describe("MoveToTrigger", () => {
 
 		// Picking a folder also opens it, so the move is a separate press —
 		// otherwise the first tap would fire before anything nested was reachable.
-		dom.click(dom.byLabel("Move to Work"));
+		dom.click(pickerByLabel(dom, "Move to Work"));
 		assert.deepEqual(moved, []);
 
-		dom.click(dom.byText("button", "Move to Work"));
+		dom.click(pickerByText(dom, "button", "Move to Work"));
 		assert.deepEqual(moved, ["mbx-work"]);
 		assert.equal(
 			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
@@ -131,10 +163,10 @@ describe("MoveToTrigger", () => {
 	it("names the destination on the button that runs the move", () => {
 		const dom = mount({ mailboxes: FOLDERS });
 		dom.click(dom.byLabel("Move to folder"));
-		dom.click(dom.byLabel("Move to Work"));
-		dom.click(dom.byLabel("Move to Clients"));
+		dom.click(pickerByLabel(dom, "Move to Work"));
+		dom.click(pickerByLabel(dom, "Move to Clients"));
 
-		assert.match(dom.text(), /Move to Clients/);
+		assert.match(pickerText(dom), /Move to Clients/);
 	});
 
 	it("closes on Escape and on a click outside it", () => {
@@ -159,6 +191,56 @@ describe("MoveToTrigger", () => {
 		assert.equal(isOpen(), false);
 	});
 
+	it("renders the desktop picker outside its own subtree (#601)", () => {
+		// Regression: an in-place absolute popover is clipped by the reading
+		// pane's overflow-hidden shell and painted underneath the thread list.
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+
+		const trigger = dom.byLabel("Move to folder");
+		const tree = pickerRoot(dom).querySelector("[role=tree]");
+		assert.ok(tree, "the picker is open");
+		assert.ok(
+			!trigger.parentElement?.contains(tree),
+			"the picker escapes the trigger's subtree via a portal",
+		);
+	});
+
+	it("stays open when the press lands inside the portalled panel (#601)", () => {
+		// The panel is not in the trigger's subtree any more, so the outside-press
+		// guard has to recognise it by its own ref — otherwise the first press on
+		// a folder closes the picker before it can be picked.
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+
+		dom.dispatch(
+			pickerByLabel(dom, "Move to Work"),
+			new dom.window.MouseEvent("mousedown", { bubbles: true }),
+		);
+
+		assert.equal(
+			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
+			"true",
+		);
+	});
+
+	it("takes the keyboard into the picker and hands it back on close", () => {
+		// Regression: with the panel on the body, Tab from the trigger walked on
+		// to the next toolbar button instead of entering the picker.
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+
+		const filter = pickerRoot(dom).querySelector('input[type="search"]');
+		assert.ok(filter, "the picker has a filter field");
+		assert.equal(dom.document.activeElement, filter);
+
+		dom.dispatch(
+			dom.window.document,
+			new dom.window.KeyboardEvent("keydown", { key: "Escape" }),
+		);
+		assert.equal(dom.document.activeElement, dom.byLabel("Move to folder"));
+	});
+
 	it("refuses to open, and says why, when the selection spans accounts", () => {
 		const hint = "Select messages from one account to move them";
 		const dom = mount({ mailboxes: FOLDERS, disabledHint: hint });
@@ -212,6 +294,6 @@ describe("MoveToTrigger", () => {
 		dom.click(dom.byLabel("Move to folder"));
 		// No cached mailboxes and no network in the test harness: the picker
 		// shows its loading state rather than an empty list of destinations.
-		assert.match(dom.text(), /Loading folders/);
+		assert.match(pickerText(dom), /Loading folders/);
 	});
 });

package/src/components/mail/MoveToTrigger.tsx

@@ -1,5 +1,11 @@
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { Button, cn, type FolderTreeNode, FolderTreePicker } from "@remit/ui";
+import {
+	Button,
+	cn,
+	type FolderTreeNode,
+	FolderTreePicker,
+	PopoverMenuPortal,
+} from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { FolderInput } from "lucide-react";
 import {
@@ -75,6 +81,8 @@ export const MoveToTrigger = ({
 	const [pickedId, setPickedId] = useState<string>();
 	const isDesktop = useIsDesktop();
 	const containerRef = useRef<HTMLDivElement>(null);
+	const panelRef = useRef<HTMLDivElement>(null);
+	const triggerRef = useRef<HTMLButtonElement>(null);
 	const triggerLabel = label ?? "Move to folder";
 	const popoverId = useId();
 	const { t } = useTranslation("mail", { useSuspense: false });
@@ -119,6 +127,13 @@ export const MoveToTrigger = ({
 	const close = useCallback(() => {
 		setIsOpen(false);
 		setPickedId(undefined);
+		// The panel is about to unmount. Where the keyboard was inside it, hand
+		// focus back to the trigger rather than dropping it on the body; where it
+		// was elsewhere — a press that landed outside — leave it where it is.
+		const active = document.activeElement;
+		if (active && panelRef.current?.contains(active)) {
+			triggerRef.current?.focus();
+		}
 	}, []);
 
 	// Tapping a folder both picks it and opens it, so the move waits for a
@@ -134,12 +149,13 @@ export const MoveToTrigger = ({
 	useEffect(() => {
 		if (!isOpen || !isDesktop) return;
 		const handlePointer = (event: MouseEvent) => {
-			if (
-				containerRef.current &&
-				!containerRef.current.contains(event.target as Node)
-			) {
-				close();
-			}
+			const target = event.target as Node;
+			if (containerRef.current?.contains(target)) return;
+			// The picker renders through a portal into document.body, so it
+			// sits outside the trigger's subtree — count presses on it as
+			// inside, or picking a folder would close the picker first.
+			if (panelRef.current?.contains(target)) return;
+			close();
 		};
 		// The popover owns Escape while it is open (#732). The global triage
 		// layer listens on window and maps Escape to `back`, which closes the
@@ -159,11 +175,15 @@ export const MoveToTrigger = ({
 		};
 	}, [isOpen, isDesktop, close]);
 
+	const anchorRect = () =>
+		containerRef.current?.getBoundingClientRect() ?? null;
+
 	const isTriggerDisabled = disabled || !!disabledHint;
 
 	const TriggerButton = (
 		<button
 			type="button"
+			ref={triggerRef}
 			onClick={(event) => {
 				event.stopPropagation();
 				if (isTriggerDisabled) return;
@@ -204,6 +224,10 @@ export const MoveToTrigger = ({
 			onSelect={setPickedId}
 			onCreateFolder={createFolderIn}
 			onCancel={close}
+			// The desktop panel is portalled onto the body, so Tab from the
+			// trigger would otherwise walk on to the next toolbar button. The
+			// drawer runs its own focus and must not raise a phone keyboard.
+			autoFocusFilter={isDesktop}
 			labels={{
 				filterPlaceholder: t("move_picker_filter_placeholder", {
 					defaultValue: "Filter folders…",
@@ -260,18 +284,27 @@ export const MoveToTrigger = ({
 	return (
 		<div ref={containerRef} className="relative inline-block">
 			{TriggerButton}
-			{isOpen && (
+			{/* Portalled + fixed-positioned: an in-place absolute popover is
+			    clipped by the reading pane's overflow-hidden shell and ends up
+			    painted underneath the thread list (#601). */}
+			<PopoverMenuPortal
+				open={isOpen}
+				align="end"
+				panelRef={panelRef}
+				getAnchor={anchorRect}
+			>
 				<div
 					id={popoverId}
+					ref={panelRef}
 					className={cn(
-						"absolute right-0 mt-1 z-50 w-72 max-h-96 flex flex-col",
+						"w-72 max-h-96 flex flex-col",
 						"bg-surface border border-line rounded-md shadow-lg",
 					)}
 				>
 					{pickerBody}
 					{confirmBar}
 				</div>
-			)}
+			</PopoverMenuPortal>
 		</div>
 	);
 };

package/src/hooks/useThreadActions.star.test.ts

@@ -0,0 +1,200 @@
+/**
+ * Regression cover for issue #602 — the reading pane's star did not toggle and
+ * never showed the open message as starred.
+ *
+ * Both symptoms were one cause: the control answered from the list row that
+ * represented the conversation, not from the conversation. A row is a copy that
+ * stops being refreshed the moment the mail no longer matches the browsed
+ * predicate, so the star read unstarred however many times it had been set, and
+ * every press asked the server to star a message that already was.
+ *
+ * Each case mounts the real toolbar over a mocked server and lets the
+ * conversation's own listing disagree with the stale list row.
+ */
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { threadDetailOperationsListThreadMessagesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { MessageToolbar } from "@/components/mail/MessageToolbar";
+import { useThreadActions } from "@/hooks/useThreadActions";
+import { createDomHarness, type DomHarness } from "../test-support/dom";
+import { makeConfig, makeThreadMessage } from "../test-support/fixtures";
+import { type HttpMock, mockFetch } from "../test-support/http";
+
+const MESSAGE_ID = "msg-1";
+const THREAD_ID = "thread-1";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+interface ServerState {
+	starred: boolean;
+}
+
+const conversationKey = threadDetailOperationsListThreadMessagesQueryKey({
+	path: { threadId: THREAD_ID },
+});
+
+const conversationRow = (starred: boolean) =>
+	makeThreadMessage({
+		messageId: MESSAGE_ID,
+		threadId: THREAD_ID,
+		hasStars: starred,
+	});
+
+/**
+ * The message as the conversation endpoint serves it, and the list row as the
+ * mailbox listing served it — which is deliberately allowed to disagree.
+ */
+const mountToolbar = async (options: {
+	server: ServerState;
+	row: Partial<RemitImapThreadMessageResponse>;
+	/** Defaults to the reading pane's case: this thread is the one on screen. */
+	isOpen?: boolean;
+}) => {
+	const { server, isOpen = true } = options;
+	http = mockFetch((call) => {
+		if (call.method === "PATCH") {
+			const body = call.body as { isStarred?: boolean } | undefined;
+			server.starred = body?.isStarred === true;
+			return {
+				messageId: MESSAGE_ID,
+				isRead: true,
+				isStarred: server.starred,
+			};
+		}
+		if (call.path.includes("/config")) return makeConfig([]);
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: [conversationRow(server.starred)] };
+		}
+		return { items: [] };
+	});
+
+	const thread = makeThreadMessage({
+		messageId: MESSAGE_ID,
+		threadId: THREAD_ID,
+		...options.row,
+	});
+
+	const Harness = () => {
+		const actions = useThreadActions({ thread, isOpen });
+		return createElement(MessageToolbar, {
+			hasThread: true,
+			intelligenceOpen: false,
+			canToggleIntelligence: false,
+			onToggleIntelligence: () => undefined,
+			onToggleStar: actions.toggleStar,
+			isStarred: actions.isStarred,
+		});
+	};
+
+	harness = createDomHarness();
+	// The conversation as the server has it, in the cache before the first
+	// render — the pane answers from this, not from the list row.
+	harness.queryClient.setQueryData(conversationKey, {
+		items: [conversationRow(server.starred)],
+	});
+	harness.renderApp(createElement(Harness));
+	await harness.flush();
+	await harness.wait(20);
+	await harness.flush();
+	return harness;
+};
+
+const starButton = (dom: DomHarness) => dom.byLabel("Star");
+
+const rendersStarred = (dom: DomHarness): boolean =>
+	starButton(dom).getAttribute("aria-pressed") === "true";
+
+const conversationRequests = (): number =>
+	http?.to(`/threads/${THREAD_ID}/messages`).length ?? 0;
+
+const starRequests = (): Array<boolean | undefined> =>
+	(http?.calls ?? [])
+		.filter((call) => call.method === "PATCH")
+		.map(
+			(call) => (call.body as { isStarred?: boolean } | undefined)?.isStarred,
+		);
+
+describe("the reading pane's star follows the open message (#602)", () => {
+	it("shows the message starred when the conversation says so, though its list row does not", async () => {
+		const dom = await mountToolbar({
+			server: { starred: true },
+			// What the mailbox listing last said about this message, from before
+			// it was starred — the state the pane used to answer from (#602).
+			row: { hasStars: false },
+		});
+
+		assert.equal(
+			rendersStarred(dom),
+			true,
+			"the star answers from the conversation, not the list row",
+		);
+	});
+
+	it("asks for the star to come off when a lit star is pressed", async () => {
+		const server: ServerState = { starred: true };
+		const dom = await mountToolbar({ server, row: { hasStars: false } });
+
+		dom.click(starButton(dom));
+		await dom.flush();
+		assert.deepEqual(
+			starRequests(),
+			[false],
+			"pressing a lit star unstars the message",
+		);
+	});
+
+	it("stars, then unstars, on consecutive presses", async () => {
+		const server: ServerState = { starred: false };
+		const dom = await mountToolbar({ server, row: { hasStars: false } });
+		assert.equal(rendersStarred(dom), false);
+
+		dom.click(starButton(dom));
+		await dom.flush();
+		assert.equal(server.starred, true);
+		assert.deepEqual(starRequests(), [true]);
+
+		// Nothing is put into the cache by hand here: the settle-invalidate has
+		// to re-read the conversation, which the mock now serves starred. Seeding
+		// it would make the second press pass even if the refresh never happened.
+		await dom.wait(20);
+		await dom.flush();
+		assert.equal(
+			rendersStarred(dom),
+			true,
+			"the star lights from the refreshed conversation",
+		);
+
+		dom.click(starButton(dom));
+		await dom.flush();
+		assert.equal(server.starred, false, "the second press unstars");
+		assert.deepEqual(starRequests(), [true, false]);
+	});
+
+	it("asks for no conversation for a thread the pane has not opened", async () => {
+		// The triage cursor moves a row at a time. A conversation pulled for the
+		// row under the cursor would be a request per keystroke, so a target that
+		// is not the open thread answers from its own listing row.
+		const dom = await mountToolbar({
+			server: { starred: false },
+			row: { hasStars: true },
+			isOpen: false,
+		});
+
+		assert.equal(conversationRequests(), 0);
+		assert.equal(
+			rendersStarred(dom),
+			true,
+			"the cursor target answers from the row it came from",
+		);
+	});
+});

package/src/hooks/useThreadActions.ts

@@ -15,10 +15,22 @@ import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { useThreadMessageIds } from "@/hooks/useThreadMessageIds";
+import { useThreadConversation } from "@/hooks/useThreadRow";
 import { useToggleStar } from "@/hooks/useToggleStar";
 
 interface UseThreadActionsOptions {
 	thread: RemitImapThreadMessageResponse | undefined;
+	/**
+	 * Whether the pane has this thread open, so its conversation is on screen
+	 * and already fetched. The star then answers from that conversation: a list
+	 * row is a copy that survives its listing, and once the mail no longer
+	 * matches the browsed predicate the row stops being refreshed, so a star
+	 * read off it is whatever was true when it was last listed (#602).
+	 *
+	 * A cursor target is not open — it answers from its own live listing row,
+	 * because pulling a conversation for it would be a request per keystroke.
+	 */
+	isOpen?: boolean;
 	/** Mailbox whose listings the mutations patch. Defaults to the thread's own. */
 	mailboxId?: string;
 	/** Account the move picker offers folders from. Defaults to the thread's own. */
@@ -37,6 +49,7 @@ export interface ThreadActions {
 
 export const useThreadActions = ({
 	thread,
+	isOpen = false,
 	mailboxId,
 	accountId,
 	onAfterOptimisticRemove,
@@ -67,9 +80,22 @@ export const useThreadActions = ({
 		onAfterOptimisticRemove,
 	});
 
+	// The conversation the pane has open, off the entry `ConversationView` and
+	// `useThreadRow` already hold, so the toolbar and the message card answer
+	// from the same row for no extra request.
+	const conversation = useThreadConversation(
+		isOpen ? thread?.threadId : undefined,
+	);
+
+	const openMessage = conversation.find(
+		(message) => message.messageId === thread?.messageId,
+	);
+	const isStarred = openMessage?.hasStars ?? thread?.hasStars;
+
 	const { toggleStar: toggleStarFor } = useToggleStar({
 		threadId: thread?.threadId ?? "",
 		mailboxId: resolvedMailboxId ?? "",
+		messages: conversation,
 	});
 
 	const deleteThread = useCallback(() => {
@@ -87,13 +113,13 @@ export const useThreadActions = ({
 
 	const toggleStar = useCallback(() => {
 		if (!thread) return;
-		toggleStarFor(thread.messageId, thread.hasStars);
-	}, [thread, toggleStarFor]);
+		toggleStarFor(thread.messageId, isStarred ?? false);
+	}, [thread, isStarred, toggleStarFor]);
 
 	return {
 		mailboxId: resolvedMailboxId,
 		accountId: resolvedAccountId,
-		isStarred: thread?.hasStars,
+		isStarred,
 		deleteThread,
 		moveThread,
 		toggleStar,

package/src/hooks/useThreadRow.ts

@@ -2,6 +2,28 @@ import { threadDetailOperationsListThreadMessagesOptions } from "@remit/api-http
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useQuery } from "@tanstack/react-query";
 
+const NO_MESSAGES: RemitImapThreadMessageResponse[] = [];
+
+/**
+ * The messages a conversation holds, on the key the reading pane already uses.
+ *
+ * The single owner of `GET /threads/{threadId}/messages` for the client's
+ * hooks: everything that needs the conversation resolves off this one cache
+ * entry rather than a round trip of its own. A `threadId` of `undefined` asks
+ * for nothing.
+ */
+export const useThreadConversation = (
+	threadId: string | undefined,
+): RemitImapThreadMessageResponse[] => {
+	const { data } = useQuery({
+		...threadDetailOperationsListThreadMessagesOptions({
+			path: { threadId: threadId ?? "" },
+		}),
+		enabled: Boolean(threadId),
+	});
+	return data?.items ?? NO_MESSAGES;
+};
+
 /**
  * A thread's own row for the message the reader pointed at.
  *
@@ -9,8 +31,7 @@ import { useQuery } from "@tanstack/react-query";
  * cross-folder search hit, or an address pasted into a fresh tab.
  * `GET /threads/{threadId}/messages` returns the same row shape a listing does,
  * `mailboxId` included, so the thread id is the whole address even though the
- * mail is filed in some folder. The reading pane already makes that request, so
- * this resolves off the same cache entry rather than a round trip of its own.
+ * mail is filed in some folder.
  *
  * A thread spans folders — the reader's own reply sits in Sent — so `messageId`
  * picks the row they pointed at. With none, the newest message answers.
@@ -19,14 +40,7 @@ export const useThreadRow = (
 	threadId: string | undefined,
 	messageId: string | undefined,
 ): RemitImapThreadMessageResponse | undefined => {
-	const { data } = useQuery({
-		...threadDetailOperationsListThreadMessagesOptions({
-			path: { threadId: threadId ?? "" },
-		}),
-		enabled: Boolean(threadId),
-	});
-
-	const items = data?.items ?? [];
+	const items = useThreadConversation(threadId);
 	const pointedAt = messageId
 		? items.find((item) => item.messageId === messageId)
 		: undefined;