@remit/web-client 0.0.150 → 0.0.152

package/src/components/mail/MailboxPane.tsx

@@ -2,13 +2,13 @@
  * MailboxPane — compound component for the mailbox view.
  *
  * Encapsulates all state, hooks, and rendering for the /mail/$mailboxId view.
- * The parent (`mail.tsx`) mounts `<MailboxPane>` around the `AppShellSlotted`
- * and passes the sub-views into slots:
+ * The list layout route mounts `<MailboxPane>` around the shell and passes the
+ * sub-views into slots, with the reading pane as the `Outlet`:
  *
- *   <MailboxPane mailboxId={...} selectedMessageId={...}>
- *     <AppShellSlotted
+ *   <MailboxPane mailboxId={...} thread={useOpenThreadPath()}>
+ *     <MailShell
  *       list={<MailboxPane.List />}
- *       reading={<MailboxPane.Reading />}
+ *       reading={<Outlet />}
  *       intelligence={<MailboxPane.Intelligence />}
  *     />
  *   </MailboxPane>
@@ -40,7 +40,7 @@ import {
 	useMutation,
 	useQueryClient,
 } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
@@ -94,13 +94,11 @@ import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useSemanticSearch } from "@/hooks/useSemanticSearch";
 import { useThreadActions } from "@/hooks/useThreadActions";
 import { useThreadMessageIds } from "@/hooks/useThreadMessageIds";
+import { useThreadRow } from "@/hooks/useThreadRow";
 import { useToggleStar } from "@/hooks/useToggleStar";
 import { useTriageContext, useTriageLayer } from "@/hooks/useTriageLayer";
 import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
-import {
-	buildConversationTarget,
-	type ConversationTarget,
-} from "@/lib/conversation-target";
+import type { ConversationTarget } from "@/lib/conversation-target";
 import { dedupeThreadMessages } from "@/lib/dedupe-thread-messages";
 import {
 	filterReach,
@@ -116,11 +114,6 @@ import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
 import { isRescueCandidate } from "@/lib/rescue-candidates";
 import { recordRescueSentToJunk } from "@/lib/rescue-telemetry";
-import {
-	isSearchPending as computeIsSearchPending,
-	resolveOpenThread,
-	resolveSelectedThread,
-} from "@/lib/search-pending";
 import { normalizeSearchQuery } from "@/lib/search-query";
 import {
 	relatedSearchResults,
@@ -132,6 +125,7 @@ import {
 	applyResidualTokens,
 	threadSearchTokens,
 } from "@/lib/thread-search-tokens";
+import type { OpenThreadPath, OpenThreadTarget } from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
 
 /* ------------------------------------------------------------------ */
@@ -140,10 +134,13 @@ import { MailViewChrome } from "./MailViewChrome";
 
 interface MailboxPaneContextValue {
 	mailboxId: string;
+	/** The row the reader pointed at, which is the one the list highlights. */
 	selectedMessageId: string | undefined;
 	selectedThread: RemitImapThreadMessageResponse | undefined;
-	/** The conversation to open — the loaded thread, or a tapped "Related" hit. */
+	/** The conversation the pane shows, or none when the address names no thread. */
 	conversation: ConversationTarget | undefined;
+	/** Opens a conversation in this folder's reading pane. */
+	onOpenThread: (target: OpenThreadTarget) => void;
 	threads: RemitImapThreadMessageResponse[];
 	isLoading: boolean;
 	isError: boolean;
@@ -222,8 +219,9 @@ interface MailboxPaneContextValue {
 	hasRemitDraftOpen: boolean;
 	// Phone actions
 	onBack: () => void;
-	nextMessageId: string | undefined;
-	previousMessageId: string | undefined;
+	/** The rows either side of the open one — the phone's swipe gestures. */
+	nextThread: OpenThreadTarget | undefined;
+	previousThread: OpenThreadTarget | undefined;
 }
 
 /** The server's own default page size (`DEFAULT_THREADS_PAGE_SIZE`), sent so the
@@ -252,23 +250,25 @@ function useMailboxPane(): MailboxPaneContextValue {
 
 interface MailboxPaneProps {
 	mailboxId: string;
-	selectedMessageId: string | undefined;
+	/** The open conversation, as the address states it. */
+	thread: OpenThreadPath | undefined;
 	children: ReactNode;
 }
 
 function MailboxPaneProvider({
 	mailboxId,
-	selectedMessageId,
+	thread,
 	children,
 }: MailboxPaneProps) {
 	const navigate = useNavigate();
+	const threadId = thread?.threadId;
+	const pointedAtMessageId = thread?.messageId;
 	const tier = useLayoutTier();
 	const isDesktop = tier === "desktop";
 	const telemetry = useTelemetry();
 	const {
 		accounts,
 		searchQuery,
-		searchInput,
 		intelligenceOpen,
 		onToggleIntelligence,
 		onSetIntelligenceOpen,
@@ -387,39 +387,9 @@ function MailboxPaneProvider({
 				: undefined,
 	});
 
-	const handleDeselectIfRemoved = useCallback(
-		(removedIds: string[]) => {
-			if (!selectedMessageId) return;
-			if (!removedIds.includes(selectedMessageId)) return;
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: (prev: Record<string, unknown>) => ({
-					...prev,
-					selectedMessageId: undefined,
-					selectedThreadId: undefined,
-				}),
-			});
-		},
-		[selectedMessageId, mailboxId, navigate],
-	);
-
-	const { deleteMessages: handleDeleteMessages, isPending: isDeleting } =
-		useDeleteMessages({
-			mailboxId,
-			onAfterOptimisticRemove: handleDeselectIfRemoved,
-		});
-
 	const { accountId: mailboxAccountId } = useMailboxAccount(mailboxId);
 	const mailboxName = useCurrentMailboxName({ accounts });
 
-	const { moveMessages: handleMoveMessages, isPending: isMoving } =
-		useMoveMessages({
-			mailboxId,
-			accountId: mailboxAccountId,
-			onAfterOptimisticRemove: handleDeselectIfRemoved,
-		});
-
 	// The server answered the active predicate, so these rows are the list: the
 	// dedupe spans pages and the deleted drop repeats the server's own
 	// `excludeDeleted`, and neither result changes when another page loads.
@@ -468,49 +438,74 @@ function MailboxPaneProvider({
 			}
 		: undefined;
 
-	const isSearchPending = computeIsSearchPending(searchInput, searchQuery);
-	const listedThread = resolveSelectedThread(
-		threads,
-		selectedMessageId,
-		isSearchPending,
+	// The row this folder itself lists, preferred because a mutation patches it in
+	// place. A thread the loaded pages do not hold — a chip that paged it out, a
+	// cross-folder hit, a cold address — is in no listing here and answers for
+	// itself, which is what the snapshot and the URL's spare thread id used to
+	// stand in for.
+	const listedThread = threadId
+		? (threads.find((t) => t.messageId === pointedAtMessageId) ??
+			threads.find((t) => t.threadId === threadId))
+		: undefined;
+	const ownRow = useThreadRow(threadId, pointedAtMessageId);
+	const selectedThread = listedThread ?? ownRow;
+
+	const selectedMessageId = pointedAtMessageId ?? selectedThread?.messageId;
+
+	const conversation = useMemo<ConversationTarget | undefined>(() => {
+		if (!threadId) return undefined;
+		return {
+			threadId,
+			mailboxId: selectedThread?.mailboxId ?? mailboxId,
+			subject: selectedThread?.subject,
+			messageId: selectedMessageId,
+			authenticity: selectedThread?.authenticity,
+		};
+	}, [threadId, selectedThread, selectedMessageId, mailboxId]);
+
+	// Esc unwinds one step at a time: an active selection first (handled by the
+	// triage layer), then the open thread — which is a navigation up to the list,
+	// so nothing is left mounted below it.
+	const closeThread = useCallback(() => {
+		navigate({
+			to: "/mail/$mailboxId",
+			params: { mailboxId },
+			search: (prev) => prev,
+		});
+	}, [mailboxId, navigate]);
+
+	const handleOpenThread = useCallback(
+		(target: OpenThreadTarget) => {
+			navigate({
+				to: "/mail/$mailboxId/$threadId/$messageId",
+				params: { mailboxId, ...target },
+				search: (prev) => prev,
+			});
+		},
+		[mailboxId, navigate],
 	);
-	// There is no unfiltered set in the client any more, so a chip the open
-	// message does not match would otherwise close the reading pane under the
-	// user. Snapshot what they opened and let it answer for itself.
-	const [openedThread, setOpenedThread] = useState<
-		RemitImapThreadMessageResponse | undefined
-	>(undefined);
-	useEffect(() => {
-		if (listedThread) setOpenedThread(listedThread);
-	}, [listedThread]);
-	const selectedThread = resolveOpenThread(
-		listedThread,
-		openedThread,
-		selectedMessageId,
-		isSearchPending,
+
+	const handleDeselectIfRemoved = useCallback(
+		(removedIds: string[]) => {
+			if (!selectedMessageId) return;
+			if (!removedIds.includes(selectedMessageId)) return;
+			closeThread();
+		},
+		[selectedMessageId, closeThread],
 	);
 
-	// A semantic "Related" hit can point at a message outside the loaded list, so
-	// it carries its threadId through the URL; fall back to it (the mailbox is the
-	// route param) so the conversation still opens.
-	const { selectedThreadId } = useSearch({ strict: false }) as {
-		selectedThreadId?: string;
-	};
-	const conversation = useMemo(
-		() =>
-			buildConversationTarget(selectedThread, {
-				messageId: selectedMessageId,
-				threadId: isSearchPending ? undefined : selectedThreadId,
-				mailboxId,
-			}),
-		[
-			selectedThread,
-			selectedMessageId,
-			selectedThreadId,
-			isSearchPending,
+	const { deleteMessages: handleDeleteMessages, isPending: isDeleting } =
+		useDeleteMessages({
 			mailboxId,
-		],
-	);
+			onAfterOptimisticRemove: handleDeselectIfRemoved,
+		});
+
+	const { moveMessages: handleMoveMessages, isPending: isMoving } =
+		useMoveMessages({
+			mailboxId,
+			accountId: mailboxAccountId,
+			onAfterOptimisticRemove: handleDeselectIfRemoved,
+		});
 
 	const triage = useTriageContext();
 	const {
@@ -635,20 +630,6 @@ function MailboxPaneProvider({
 		closeCompose,
 	]);
 
-	// Esc unwinds one step at a time: an active selection first (handled by the
-	// triage layer), then the open thread.
-	const closeThread = useCallback(() => {
-		navigate({
-			to: "/mail/$mailboxId",
-			params: { mailboxId },
-			search: (prev: Record<string, unknown>) => ({
-				...prev,
-				selectedMessageId: undefined,
-				selectedThreadId: undefined,
-			}),
-		});
-	}, [mailboxId, navigate]);
-
 	const messageIdsForFocusedThread = useCallback(
 		(thread: typeof focusedThread): string[] => {
 			if (!thread) return [];
@@ -694,16 +675,11 @@ function MailboxPaneProvider({
 
 	const ensureFocusedOpen = useCallback(() => {
 		if (selectedMessageId || !triageFocusedId) return false;
-		navigate({
-			to: "/mail/$mailboxId",
-			params: { mailboxId },
-			search: (prev: Record<string, unknown>) => ({
-				...prev,
-				selectedMessageId: triageFocusedId,
-			}),
-		});
+		const row = threads.find((t) => t.messageId === triageFocusedId);
+		if (!row) return false;
+		handleOpenThread({ threadId: row.threadId, messageId: triageFocusedId });
 		return true;
-	}, [selectedMessageId, triageFocusedId, mailboxId, navigate]);
+	}, [selectedMessageId, triageFocusedId, threads, handleOpenThread]);
 
 	const triageReply = useCallback(() => {
 		if (ensureFocusedOpen()) return;
@@ -864,11 +840,23 @@ function MailboxPaneProvider({
 		bindings: [{ key: "Escape", handler: closeCompose, preventDefault: true }],
 	});
 
+	// The swipe gestures open a whole conversation, so the adjacent row has to
+	// name its thread. This folder's own listing is where that is looked up, so a
+	// row it does not hold offers no gesture rather than a tap that goes nowhere.
+	const adjacentThread = (
+		messageId: string | undefined,
+	): OpenThreadTarget | undefined => {
+		if (!messageId) return undefined;
+		const row = threads.find((t) => t.messageId === messageId);
+		return row ? { threadId: row.threadId, messageId } : undefined;
+	};
+
 	const ctx: MailboxPaneContextValue = {
 		mailboxId,
 		selectedMessageId,
 		selectedThread,
 		conversation,
+		onOpenThread: handleOpenThread,
 		threads,
 		isLoading,
 		isError,
@@ -920,8 +908,8 @@ function MailboxPaneProvider({
 		closeCompose,
 		hasRemitDraftOpen,
 		onBack: goBack,
-		nextMessageId,
-		previousMessageId,
+		nextThread: adjacentThread(nextMessageId),
+		previousThread: adjacentThread(previousMessageId),
 	};
 
 	return (
@@ -1036,28 +1024,33 @@ function MailboxList() {
 			),
 		[semanticHits, threads, resultFolderIndex],
 	);
+	// The two-engine results panel, whose semantic hits are in no list at all —
+	// each one carries the thread it belongs to.
 	const handleSelectSearchResult = useCallback(
-		(result: SearchResult) =>
+		(result: SearchResult) => {
+			const threadId =
+				result.threadId ??
+				threads.find((thread) => thread.messageId === result.id)?.threadId;
+			if (!threadId) return;
 			navigate({
-				to: "/mail/$mailboxId",
+				to: "/mail/$mailboxId/$threadId/$messageId",
 				// Both sections are scoped to this mailbox, so a result's own
 				// mailbox is normally this one; keep reading it off the result so a
 				// row can never open under a mailbox it does not belong to.
-				params: { mailboxId: result.mailboxId ?? mailboxId },
-				search: (prev: Record<string, unknown>) => ({
-					...prev,
-					// Commit the active query alongside the selection. The debounced
-					// q-mirror (`useSearchMirror`) strips the selection whenever it sees the
-					// query go active; the row can be tapped before the debounce settles
-					// (it shows in the still-unfiltered list), so use the *live*
-					// `searchInput` here — committing `q` makes the mirror a no-op and
-					// keeps the opened result from being stripped out from under us.
-					q: searchInput || undefined,
-					selectedMessageId: result.id,
-					selectedThreadId: result.threadId,
-				}),
-			}),
-		[mailboxId, navigate, searchInput],
+				params: {
+					mailboxId: result.mailboxId ?? mailboxId,
+					threadId,
+					messageId: result.id,
+				},
+				// Commit the active query with the open so the debounced q-mirror —
+				// which walks back up to the list when the query goes active — is
+				// already satisfied and leaves the conversation alone. The *live*
+				// `searchInput`: a row can be tapped before the debounce settles, when
+				// the committed query is still empty.
+				search: (prev) => ({ ...prev, q: searchInput || undefined }),
+			});
+		},
+		[mailboxId, navigate, searchInput, threads],
 	);
 
 	// Drafts keep their own dedicated view (and header); they don't carry the
@@ -1273,28 +1266,17 @@ function MailboxPhone() {
 		mailboxAccountId,
 		selectedThread,
 		conversation,
+		onOpenThread,
 		intelligenceOpen,
 		onToggleIntelligence,
 		onBack,
-		nextMessageId,
-		previousMessageId,
+		nextThread,
+		previousThread,
 		composeState,
 		handleDeselectIfRemoved,
 	} = useMailboxPane();
-	const navigate = useNavigate();
 
 	if (conversation) {
-		const openMessage = (messageId: string) =>
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: (prev: Record<string, unknown>) => ({
-					...prev,
-					selectedMessageId: messageId,
-					selectedThreadId: undefined,
-				}),
-			});
-
 		return (
 			<>
 				<ConversationView
@@ -1305,11 +1287,9 @@ function MailboxPhone() {
 					authenticity={conversation.authenticity}
 					onBack={onBack}
 					onOpenIntelligence={onToggleIntelligence}
-					onSwipeNext={
-						nextMessageId ? () => openMessage(nextMessageId) : undefined
-					}
+					onSwipeNext={nextThread ? () => onOpenThread(nextThread) : undefined}
 					onSwipePrevious={
-						previousMessageId ? () => openMessage(previousMessageId) : undefined
+						previousThread ? () => onOpenThread(previousThread) : undefined
 					}
 					mobileIntelligenceOpen={intelligenceOpen}
 				/>

package/src/components/mail/MessageActionMenu.tsx

@@ -35,6 +35,7 @@ import {
 	type ThreadListSnapshotEntry,
 	threadListCacheKeys,
 } from "@/lib/thread-list-cache";
+import { useOpenThreadPath } from "@/routing";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 interface ThreadMessagesData {
@@ -103,9 +104,15 @@ export const MessageActionMenu = ({
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
 	const { pushError } = useErrorBanners();
-	const { selectedMessageId } = useSearch({ strict: false }) as {
+	// Which message the address has open. The brief and a folder say so in their
+	// path; the flagged list, still to move, says so in `?selectedMessageId=`.
+	const openThread = useOpenThreadPath();
+	const { selectedMessageId: selectedFromQuery } = useSearch({
+		strict: false,
+	}) as {
 		selectedMessageId?: string;
 	};
+	const selectedMessageId = openThread?.messageId ?? selectedFromQuery;
 
 	const { mutate: updateFlags, isPending: isUpdatingFlags } = useMutation({
 		...messageBulkOperationsUpdateFlagsMutation(),
@@ -182,10 +189,10 @@ export const MessageActionMenu = ({
 		},
 	});
 
-	// Deselect the thread before the server response arrives if the message
+	// Close the conversation before the server response arrives if the message
 	// being deleted is the one currently routed to. Mirrors the bulk-delete
-	// flow on the mailbox route — without this, the URL keeps a stale
-	// `selectedMessageId` after the row vanishes from the list.
+	// flow on the mailbox route — without this, the address keeps naming a
+	// message after the row vanishes from the list.
 	const handleAfterOptimisticRemove = useCallback(
 		(removedIds: string[]) => {
 			if (!selectedMessageId) return;
@@ -193,10 +200,7 @@ export const MessageActionMenu = ({
 			navigate({
 				to: "/mail/$mailboxId",
 				params: { mailboxId },
-				search: (prev: Record<string, unknown>) => ({
-					...prev,
-					selectedMessageId: undefined,
-				}),
+				search: (prev) => prev,
 			});
 		},
 		[selectedMessageId, mailboxId, navigate],

package/src/components/mail/MessageList.selection.test.ts

@@ -172,18 +172,17 @@ describe("MessageList escalation reaches desktop (#212)", () => {
 });
 
 /**
- * A confirmed delete used to open the surviving neighbour by writing
- * `selectedMessageId` into the URL. On desktop that fills the reading pane
- * beside the list; on a single-pane mobile layout the same navigation replaced
- * the list with a full-screen message, so the delete read as "jumped into a
- * random message" rather than "the row is gone" (#202). Mobile now stays on the
- * list and raises a completion banner instead.
+ * A confirmed delete opens the surviving neighbour. On desktop that fills the
+ * reading pane beside the list; on a single-pane mobile layout the same
+ * navigation replaced the list with a full-screen message, so the delete read as
+ * "jumped into a random message" rather than "the row is gone" (#202). Mobile
+ * now stays on the list and raises a completion banner instead.
  */
 describe("MessageList confirmed delete stays on the list on mobile (#202)", () => {
 	it("only the desktop two-pane opens the surviving neighbour after a delete", () => {
 		assert.match(
 			source,
-			/if \(isDesktop\) \{\s*navigate\(\{\s*to: "\/mail\/\$mailboxId",\s*params: \{ mailboxId \},\s*search: \(prev\) => \(\{ \.\.\.prev, selectedMessageId: nextFocus \}\),\s*replace: true,\s*\}\);\s*\}/,
+			/if \(isDesktop\) \{\s*openRow\(nextFocus, \{ replace: true \}\);\s*\}/,
 		);
 	});
 

package/src/components/mail/MessageList.tsx

@@ -621,16 +621,31 @@ export const MessageList = ({
 		],
 	);
 
-	// Enter: open the focused row in the reading pane (sets selected/URL). This
-	// is the focus→open transition of the 2-state model.
+	// Opening a row is a navigation to the conversation under this folder. Every
+	// row the list renders names its thread, which is what the reading pane
+	// fetches by — a row the list no longer holds cannot be opened from here.
+	const openRow = useCallback(
+		(messageId: string, options?: { replace?: boolean }) => {
+			const threadId = threads.find(
+				(thread) => thread.messageId === messageId,
+			)?.threadId;
+			if (!threadId) return;
+			navigate({
+				to: "/mail/$mailboxId/$threadId/$messageId",
+				params: { mailboxId, threadId, messageId },
+				search: (prev) => prev,
+				replace: options?.replace,
+			});
+		},
+		[navigate, mailboxId, threads],
+	);
+
+	// Enter: open the focused row in the reading pane. This is the focus→open
+	// transition of the 2-state model.
 	const handleOpenFocused = useCallback(() => {
 		if (!focusedMessageId) return;
-		navigate({
-			to: "/mail/$mailboxId",
-			params: { mailboxId },
-			search: (prev) => ({ ...prev, selectedMessageId: focusedMessageId }),
-		});
-	}, [focusedMessageId, navigate, mailboxId]);
+		openRow(focusedMessageId);
+	}, [focusedMessageId, openRow]);
 
 	// The reading pane follows the cursor on desktop: j/k load the row they land
 	// on, without the user having to press Enter for every message. It replaces
@@ -643,15 +658,8 @@ export const MessageList = ({
 	// Suspended off desktop too, where the reading pane replaces the list
 	// entirely, so following the cursor would throw the user off the list.
 	const followFocusOpen = useCallback(
-		(messageId: string) => {
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: (prev) => ({ ...prev, selectedMessageId: messageId }),
-				replace: true,
-			});
-		},
-		[navigate, mailboxId],
+		(messageId: string) => openRow(messageId, { replace: true }),
+		[openRow],
 	);
 	useFollowFocusOpen({
 		keyboardFocusedMessageId,
@@ -724,12 +732,7 @@ export const MessageList = ({
 			// like it opened a random neighbour instead of removing the rows (#202).
 			// Mobile keeps the cursor move but stays on the list.
 			if (isDesktop) {
-				navigate({
-					to: "/mail/$mailboxId",
-					params: { mailboxId },
-					search: (prev) => ({ ...prev, selectedMessageId: nextFocus }),
-					replace: true,
-				});
+				openRow(nextFocus, { replace: true });
 			}
 		}
 
@@ -744,8 +747,7 @@ export const MessageList = ({
 		threads,
 		onDeleteMessages,
 		exitSelection,
-		navigate,
-		mailboxId,
+		openRow,
 		isDesktop,
 		setFocusedMessageId,
 	]);
@@ -1323,13 +1325,7 @@ export const MessageList = ({
 				onReportError={handleReportError}
 				density={density}
 				selectedThreadId={selectedMessageId}
-				onSelectThread={(id) =>
-					navigate({
-						to: "/mail/$mailboxId",
-						params: { mailboxId },
-						search: (prev) => ({ ...prev, selectedMessageId: id }),
-					})
-				}
+				onSelectThread={(id) => openRow(id)}
 				isDesktop={isDesktop}
 				hideHeader={hideHeader}
 				selectionBar={activeSelectionBar}

package/src/components/mail/MessageListItem.tsx

@@ -45,6 +45,7 @@ export const threadToRowData = (
 	id: thread.messageId,
 	accountId: thread.accountId,
 	mailboxId: thread.mailboxId,
+	threadId: thread.threadId,
 	fromName: thread.fromName ?? thread.fromEmail ?? "Unknown",
 	fromEmail: thread.fromEmail ?? "",
 	subject: thread.subject ?? "(No subject)",
@@ -81,7 +82,7 @@ const MessageListItemComponent = ({
 }: MessageListItemProps) => (
 	<MessageRow
 		thread={threadToRowData(thread, messageCount)}
-		linkMailboxId={mailboxId}
+		link={{ mailboxId, threadId: thread.threadId }}
 		inListbox
 		active={isSelected}
 		focused={isFocused}