@remit/web-client 0.0.146 → 0.0.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.146",
+  "version": "0.0.148",
   "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/compose/InlineCompose.tsx

@@ -21,7 +21,12 @@ export const InlineCompose = ({
 	// Capped against the viewport as well as in pixels: on a short one — a phone
 	// in landscape, or one with the keyboard up — a flat 400px is taller than
 	// the pane, and the surface's own header scrolls off before its verbs do.
-	<div className="border-t border-line bg-canvas max-h-[min(400px,60dvh)] flex flex-col">
+	//
+	// A desktop pane has room a phone does not, so the surface takes a height
+	// there rather than a ceiling. Left to size itself, the recipient rows and
+	// the verbs come first and the writing area gets its 120px floor — a couple
+	// of lines to answer a message in.
+	<div className="border-t border-line bg-canvas max-h-[min(400px,60dvh)] flex flex-col lg:h-[min(560px,55dvh)] lg:max-h-none">
 		<ComposeForm
 			mode={mode}
 			account={account}

package/src/components/layout/ComposeFab.tsx

@@ -2,6 +2,7 @@ import { useLocation } from "@tanstack/react-router";
 import { Pencil } from "lucide-react";
 import { useCallback } from "react";
 import { useCompose } from "@/components/compose/ComposeProvider";
+import { locationOpensDetail } from "@/lib/mail-route";
 
 /**
  * Floating Action Button for composing a new message. Mobile-only.
@@ -12,8 +13,9 @@ import { useCompose } from "@/components/compose/ComposeProvider";
  *     `/mail` shell also stops mounting the FAB above that width; the
  *     `lg:hidden` class covers the pre-hydration frame.
  *   - The compose surface is already open.
- *   - The user is reading a thread (`?selectedMessageId=…`) — the single
- *     pane is the conversation, and its reply bar is under this corner.
+ *   - The user is reading a thread — the single pane is the conversation, and
+ *     its reply bar is under this corner. The brief says so in its path; the
+ *     lists still to move say so in `?selectedMessageId=…`.
  *   - The user is off `/mail`, which is every route with no mail in it.
  */
 export const ComposeFab = () => {
@@ -24,7 +26,9 @@ export const ComposeFab = () => {
 	}, [openCompose]);
 
 	const search = location.search as Record<string, unknown> | undefined;
-	const isReadingThread = Boolean(search?.selectedMessageId);
+	const isReadingThread =
+		Boolean(search?.selectedMessageId) ||
+		locationOpensDetail(location.pathname);
 
 	if (!location.pathname.startsWith("/mail") || state.isOpen || isReadingThread)
 		return null;

package/src/components/mail/BriefPane.tsx

@@ -1,12 +1,12 @@
 /**
- * BriefPane — compound component for the daily-brief view (/mail route).
+ * BriefPane — compound component for the daily brief.
  *
- * Usage in mail.tsx:
+ * Usage in the list layout route:
  *
- *   <BriefPane selectedMessageId={...}>
- *     <AppShellSlotted
+ *   <BriefPane thread={useBriefThreadPath()}>
+ *     <MailShell
  *       list={<BriefPane.List />}
- *       reading={<BriefPane.Reading />}
+ *       reading={<Outlet />}
  *     />
  *   </BriefPane>
  *
@@ -14,13 +14,9 @@
  */
 import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	ReadingPaneEmpty,
-	type SearchResult,
-	useAppShellLayout,
-} from "@remit/ui";
+import { ReadingPaneEmpty, useAppShellLayout } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
@@ -37,32 +33,34 @@ import type { OpenMessageOptions } from "@/components/mail/ThreadListInteraction
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
+import { useThreadRow } from "@/hooks/useThreadRow";
 import {
 	type TriageContext,
 	useTriageContext,
 	useTriageLayer,
 } from "@/hooks/useTriageLayer";
-import {
-	buildConversationTarget,
-	type ConversationTarget,
-} from "@/lib/conversation-target";
+import type { ConversationTarget } from "@/lib/conversation-target";
 import { useMailContext } from "@/lib/mail-context";
+import type { BriefThreadPath, BriefThreadTarget } from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Context                                                              */
 /* ------------------------------------------------------------------ */
 
 interface BriefPaneContextValue {
+	/** 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;
-	onSelectMessage: (id: string, options?: OpenMessageOptions) => void;
-	onSelectSearchResult: (
-		result: SearchResult,
+	onOpenThread: (
+		target: BriefThreadTarget,
 		options?: OpenMessageOptions,
 	) => void;
 	onCloseThread: () => void;
+	/** The rows either side of the open one — the phone's swipe gestures. */
+	nextThread: BriefThreadTarget | undefined;
+	previousThread: BriefThreadTarget | undefined;
 	/**
 	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
 	 * account — the brief spans accounts, so there is no route mailbox to key by.
@@ -71,8 +69,6 @@ interface BriefPaneContextValue {
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
-	nextMessageId: string | undefined;
-	previousMessageId: string | undefined;
 	/**
 	 * Deselects the open message when it's the one a mutation just removed
 	 * from view — wired into every mutation that can take the open message out
@@ -95,93 +91,79 @@ function useBriefPane(): BriefPaneContextValue {
 /* ------------------------------------------------------------------ */
 
 interface BriefPaneProps {
-	selectedMessageId: string | undefined;
+	/** The open conversation, as the address states it. */
+	thread: BriefThreadPath | undefined;
 	children: ReactNode;
 }
 
-function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
+function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 	const navigate = useNavigate();
 	const { searchInput } = useMailContext();
-	const { selectedThreadId, selectedMailboxId } = useSearch({
-		strict: false,
-	}) as { selectedThreadId?: string; selectedMailboxId?: string };
+	const threadId = thread?.threadId;
+	const pointedAtMessageId = thread?.messageId;
 
 	const { data: threadsData } = useQuery({
 		...unifiedThreadOperationsListAllThreadsOptions(),
 		staleTime: 60_000,
 	});
+	const briefThreads = useMemo(() => threadsData?.items ?? [], [threadsData]);
 
-	const selectedThread = useMemo(() => {
-		if (!selectedMessageId) return undefined;
-		return threadsData?.items.find((t) => t.messageId === selectedMessageId);
-	}, [threadsData, selectedMessageId]);
-
-	// A literal hit resolves to a loaded thread; a semantic "Related" hit may not
-	// be in the capped brief list, so fall back to the thread + mailbox the hit
-	// carried through the URL.
-	const conversation = useMemo(
-		() =>
-			buildConversationTarget(selectedThread, {
-				messageId: selectedMessageId,
-				threadId: selectedThreadId,
-				mailboxId: selectedMailboxId,
-			}),
-		[selectedThread, selectedMessageId, selectedThreadId, selectedMailboxId],
-	);
-
-	const handleSelectMessage = useCallback(
-		(id: string, options?: OpenMessageOptions) => {
-			navigate({
-				to: "/mail/brief",
-				search: (prev) => ({
-					...prev,
-					selectedMessageId: id,
-					selectedThreadId: undefined,
-					selectedMailboxId: undefined,
-				}),
-				replace: options?.replace,
-			});
-		},
-		[navigate],
-	);
-
-	const handleSelectSearchResult = useCallback(
-		(result: SearchResult, options?: OpenMessageOptions) => {
+	// The row the brief itself lists, preferred because a mutation patches it in
+	// place. A thread reached from a cross-folder search hit or a cold address is
+	// in no listing here, and answers for itself — which is where
+	// `selectedMailboxId` used to come in: the folder a thread is filed in is the
+	// thread's own data, so the brief spanning folders costs the URL nothing.
+	const listedThread = useMemo(() => {
+		if (!threadId) return undefined;
+		return (
+			briefThreads.find((t) => t.messageId === pointedAtMessageId) ??
+			briefThreads.find((t) => t.threadId === threadId)
+		);
+	}, [briefThreads, threadId, pointedAtMessageId]);
+	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 ?? "",
+			subject: selectedThread?.subject,
+			messageId: selectedMessageId,
+			authenticity: selectedThread?.authenticity,
+		};
+	}, [threadId, selectedThread, selectedMessageId]);
+
+	const handleOpenThread = useCallback(
+		(target: BriefThreadTarget, options?: OpenMessageOptions) => {
 			navigate({
-				to: "/mail/brief",
+				to: "/mail/brief/$threadId/$messageId",
+				params: target,
 				replace: options?.replace,
-				search: (prev) => ({
-					...prev,
-					// Commit the active query with the selection so the debounced
-					// q-mirror (`useSearchMirror`) — which strips the selection when the query
-					// goes active — is already satisfied and leaves the opened result
-					// alone. Use the *live* `searchInput`: the row can be tapped before
-					// the debounce settles, when the committed query is still empty.
-					q: searchInput || undefined,
-					selectedMessageId: result.id,
-					selectedThreadId: result.threadId,
-					selectedMailboxId: result.mailboxId,
-				}),
+				// 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 }),
 			});
 		},
 		[navigate, searchInput],
 	);
 
+	const handleCloseThread = useCallback(() => {
+		navigate({ to: "/mail/brief", search: (prev) => prev });
+	}, [navigate]);
+
 	const handleDeselectIfRemoved = useCallback(
 		(removedIds: string[]) => {
 			if (!selectedMessageId) return;
 			if (!removedIds.includes(selectedMessageId)) return;
-			navigate({
-				to: "/mail/brief",
-				search: (prev) => ({
-					...prev,
-					selectedMessageId: undefined,
-					selectedThreadId: undefined,
-					selectedMailboxId: undefined,
-				}),
-			});
+			handleCloseThread();
 		},
-		[selectedMessageId, navigate],
+		[selectedMessageId, handleCloseThread],
 	);
 
 	const actions = useThreadActions({
@@ -189,24 +171,11 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		onAfterOptimisticRemove: handleDeselectIfRemoved,
 	});
 
-	const handleCloseThread = useCallback(() => {
-		navigate({
-			to: "/mail/brief",
-			search: (prev) => ({
-				...prev,
-				selectedMessageId: undefined,
-				selectedThreadId: undefined,
-				selectedMailboxId: undefined,
-			}),
-		});
-	}, [navigate]);
-
 	const triage = useTriageContext();
 
 	// A brief selection spans accounts and mailboxes, so the listings these
 	// patch are resolved from each message's own mailbox — the open thread's is
 	// only the fallback.
-	const briefThreads = useMemo(() => threadsData?.items ?? [], [threadsData]);
 	const { deleteMessages } = useDeleteMessages({
 		mailboxId: selectedThread?.mailboxId ?? "",
 		messages: briefThreads,
@@ -219,8 +188,8 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 
 	const focusedThreadId = triage.focusedMessageId;
 	const focusedThread = useMemo(
-		() => threadsData?.items.find((t) => t.messageId === focusedThreadId),
-		[threadsData, focusedThreadId],
+		() => briefThreads.find((t) => t.messageId === focusedThreadId),
+		[briefThreads, focusedThreadId],
 	);
 	const triageTarget = focusedThread ?? selectedThread;
 	const triageActions = useThreadActions({ thread: triageTarget });
@@ -252,18 +221,29 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		},
 	});
 
+	// The swipe gestures open a whole conversation, so the adjacent row has to
+	// name its thread. The brief'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 = useCallback(
+		(messageId: string | undefined): BriefThreadTarget | undefined => {
+			if (!messageId) return undefined;
+			const row = briefThreads.find((t) => t.messageId === messageId);
+			return row ? { threadId: row.threadId, messageId } : undefined;
+		},
+		[briefThreads],
+	);
+
 	const ctx: BriefPaneContextValue = {
 		selectedMessageId,
 		selectedThread,
 		conversation,
-		onSelectMessage: handleSelectMessage,
-		onSelectSearchResult: handleSelectSearchResult,
+		onOpenThread: handleOpenThread,
 		onCloseThread: handleCloseThread,
+		nextThread: adjacentThread(nextMessageId),
+		previousThread: adjacentThread(previousMessageId),
 		actions,
 		triage,
 		onDeleteMessages: deleteMessages,
-		nextMessageId,
-		previousMessageId,
 		handleDeselectIfRemoved,
 	};
 
@@ -278,21 +258,15 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
  * Daily brief list. Mount in the `list` slot of `AppShellSlotted`.
  */
 function BriefList() {
-	const {
-		selectedMessageId,
-		onSelectMessage,
-		onSelectSearchResult,
-		triage,
-		onDeleteMessages,
-	} = useBriefPane();
+	const { selectedMessageId, onOpenThread, triage, onDeleteMessages } =
+		useBriefPane();
 	const { accounts } = useMailContext();
 
 	return (
 		<DailyBrief
 			accounts={accounts}
 			selectedMessageId={selectedMessageId}
-			onSelectMessage={onSelectMessage}
-			onSelectSearchResult={onSelectSearchResult}
+			onOpenThread={onOpenThread}
 			commandsRef={triage.listCommandsRef}
 			onTriageContextChange={triage.onTriageContextChange}
 			onDeleteMessages={onDeleteMessages}
@@ -386,10 +360,10 @@ function BriefPhone() {
 	const {
 		selectedThread,
 		conversation,
-		onSelectMessage,
+		onOpenThread,
 		onCloseThread,
-		nextMessageId,
-		previousMessageId,
+		nextThread,
+		previousThread,
 		handleDeselectIfRemoved,
 	} = useBriefPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
@@ -405,13 +379,9 @@ function BriefPhone() {
 					authenticity={conversation.authenticity}
 					onBack={onCloseThread}
 					onOpenIntelligence={onToggleIntelligence}
-					onSwipeNext={
-						nextMessageId ? () => onSelectMessage(nextMessageId) : undefined
-					}
+					onSwipeNext={nextThread ? () => onOpenThread(nextThread) : undefined}
 					onSwipePrevious={
-						previousMessageId
-							? () => onSelectMessage(previousMessageId)
-							: undefined
+						previousThread ? () => onOpenThread(previousThread) : undefined
 					}
 					mobileIntelligenceOpen={intelligenceOpen}
 				/>

package/src/components/mail/ConversationView.tsx

@@ -322,8 +322,8 @@ export const ConversationView = ({
 		onComposeClose?.();
 	}, [onComposeClose]);
 
-	// Single-pane compose opens below the message, which on a long one is several
-	// screens down: without this, replying to it looks like nothing happening.
+	// Compose opens below the message, which on a long one is several screens
+	// down: without this, replying to it looks like nothing happening.
 	//
 	// Aligned on its bottom edge, where the send and discard verbs are, and held
 	// there while it changes height. It mounts before the message it quotes has
@@ -483,15 +483,23 @@ export const ConversationView = ({
 					onOpenIntelligence={onOpenIntelligence}
 				/>
 			)}
-			<div className="flex-1 overflow-auto">{renderMessages(false)}</div>
-			{composeMode !== null && (
-				<InlineCompose
-					mode={composeMode}
-					account={activeAccount}
-					sourceMessage={latestMessageData}
-					onClose={handleCloseCompose}
-				/>
-			)}
+			{/* The reply is part of the conversation, so it scrolls with it. Held
+			    below the pane instead, it took whatever height the message left
+			    over — nothing on a long one — and no amount of scrolling could
+			    reach it. */}
+			<div className="min-h-0 flex-1 overflow-auto">
+				{renderMessages(false)}
+				{composeMode !== null && (
+					<div ref={composeRef}>
+						<InlineCompose
+							mode={composeMode}
+							account={activeAccount}
+							sourceMessage={latestMessageData}
+							onClose={handleCloseCompose}
+						/>
+					</div>
+				)}
+			</div>
 		</article>
 	);
 };

package/src/components/mail/DailyBrief.tsx

@@ -105,6 +105,7 @@ import {
 	type SelectionWizardControl,
 	useSelectionWizard,
 } from "@/lib/wizard-history";
+import type { BriefThreadTarget } from "@/routing";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MailListHeader, type MailListHeaderProps } from "./MailListHeader";
 import type { MessageListCommands } from "./MessageList";
@@ -378,14 +379,13 @@ function BriefSelectionChrome({
 interface DailyBriefProps {
 	accounts: RemitImapAccountResponse[];
 	selectedMessageId?: string;
-	/** Opens an in-list brief row (resolved by messageId against the loaded list). */
-	onSelectMessage?: (id: string, options?: OpenMessageOptions) => void;
 	/**
-	 * Opens a search result. A semantic "Related" hit carries its thread + mailbox
-	 * so it opens even when its message isn't in the loaded brief list.
+	 * Opens a row. Every row the brief renders names its thread, so the row the
+	 * search widened in from another folder opens by exactly the same route as one
+	 * from the unified inbox.
 	 */
-	onSelectSearchResult?: (
-		result: SearchResult,
+	onOpenThread?: (
+		target: BriefThreadTarget,
 		options?: OpenMessageOptions,
 	) => void;
 	/** Where the list publishes the commands the keyboard layer drives. */
@@ -398,8 +398,7 @@ interface DailyBriefProps {
 export function DailyBrief({
 	accounts,
 	selectedMessageId,
-	onSelectMessage,
-	onSelectSearchResult,
+	onOpenThread,
 	commandsRef,
 	onTriageContextChange,
 	onDeleteMessages,
@@ -618,26 +617,29 @@ export function DailyBrief({
 	);
 
 	// A committed query puts rows the widened cross-folder search found into the
-	// body, and those messages are in folders the brief itself never loads. The
-	// reading pane resolves a bare `selectedMessageId` against the brief's own
-	// thread list, so such a row opens nothing; it goes through the search path
-	// instead, which carries the thread and mailbox the conversation is fetched
-	// by (#635).
+	// body, and those messages are in folders the brief itself never loads. They
+	// open like any other row: what the address carries is the thread, which
+	// every row names, and the conversation is fetched by it (#635).
 	const openRow = useCallback(
 		(id: string, options?: OpenMessageOptions) => {
-			const row = sq
-				? bodyRows.find((candidate) => candidate.id === id)
-				: undefined;
-			if (row?.threadId && row.mailboxId && onSelectSearchResult) {
-				onSelectSearchResult(
-					rowToSearchResult(row, resultFolderIndex),
-					options,
-				);
-				return;
-			}
-			onSelectMessage?.(id, options);
+			const threadId = filteredRows.find((row) => row.id === id)?.threadId;
+			if (!threadId) return;
+			onOpenThread?.({ threadId, messageId: id }, options);
+		},
+		[filteredRows, onOpenThread],
+	);
+
+	// The two-engine results panel, whose semantic hits are in no list at all —
+	// each one carries the thread it belongs to.
+	const openResult = useCallback(
+		(result: SearchResult) => {
+			const threadId =
+				result.threadId ??
+				filteredRows.find((row) => row.id === result.id)?.threadId;
+			if (!threadId) return;
+			onOpenThread?.({ threadId, messageId: result.id });
 		},
-		[sq, bodyRows, resultFolderIndex, onSelectSearchResult, onSelectMessage],
+		[filteredRows, onOpenThread],
 	);
 
 	const accountSources = useMemo<FilterSheetSource[]>(() => {
@@ -903,7 +905,7 @@ export function DailyBrief({
 						searchLoading: isLoading || searchFetching,
 						relatedResults,
 						relatedLoading,
-						onSelectSearchResult,
+						onSelectSearchResult: openResult,
 						// The body already narrows to the committed query
 						// (`matchesBriefSearch` + `matchesSearchTokens` + the server `query`,
 						// above), so a committed search is a selectable list here exactly as

package/src/components/mail/MailSidebarAdapter.tsx

@@ -229,7 +229,7 @@ export function MailSidebarAdapter({
 			return (
 				<NavLink
 					to="/mail/brief"
-					search={{ q: undefined, selectedMessageId: undefined }}
+					search={{ q: undefined }}
 					activeOptions={{ includeSearch: false }}
 					onClick={() => onClick?.()}
 					className={className}
@@ -340,10 +340,7 @@ export function MailSidebarAdapter({
 	const handleSelectSavedSearch = useCallback(
 		(query: string) => {
 			onSearchChange(query);
-			navigate({
-				to: "/mail/brief",
-				search: { q: query, selectedMessageId: undefined },
-			});
+			navigate({ to: "/mail/brief", search: { q: query } });
 			onMailboxSelect?.();
 		},
 		[onSearchChange, navigate, onMailboxSelect],