@remit/web-client 0.0.149 → 0.0.151

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.149",
+  "version": "0.0.151",
   "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/ComposeProvider.tsx

@@ -8,7 +8,7 @@ import type {
 	RemitImapDescribeMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useLocation, useNavigate } from "@tanstack/react-router";
+import { useLocation, useNavigate, useParams } from "@tanstack/react-router";
 import {
 	createContext,
 	useCallback,
@@ -21,6 +21,7 @@ import {
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { useComposeTarget } from "@/hooks/useComposeTargetMailbox";
 import { hostsComposeSurface } from "@/lib/compose-routes";
+import { locationOpensDetail } from "@/lib/mail-route";
 export type ComposeMode = "reply" | "reply_all" | "forward" | "new";
 
 export interface ComposeState {
@@ -66,6 +67,7 @@ export const ComposeProvider = ({
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
 	const location = useLocation();
+	const routeParams = useParams({ strict: false, shouldThrow: false });
 	const { pushError } = useErrorBanners();
 	// Compose is a mail action, so its target only has to be known under `/mail`.
 	// Resolving it from the root otherwise costs `/settings` and `/onboarding` a
@@ -114,9 +116,14 @@ export const ComposeProvider = ({
 	const openCompose = useCallback(
 		(params: Omit<ComposeState, "isOpen">) => {
 			const search = location.search as Record<string, unknown>;
-			const showsThread = Boolean(
-				search.selectedMessageId ?? search.selectedThreadId,
-			);
+			// A folder names its open conversation in the path, so leaving it is a
+			// navigation up to the list; the lists still to move name it in the query.
+			const threadMailboxId = locationOpensDetail(location.pathname)
+				? routeParams?.mailboxId
+				: undefined;
+			const showsThread =
+				Boolean(threadMailboxId) ||
+				Boolean(search.selectedMessageId ?? search.selectedThreadId);
 			if (!hostsComposeSurface(location.pathname)) {
 				if (target.status === "loading") {
 					pushError({
@@ -145,6 +152,14 @@ export const ComposeProvider = ({
 			setState({ ...params, isOpen: true });
 			if (!showsThread) return;
 			// A push, so Back reopens the message.
+			if (threadMailboxId) {
+				navigate({
+					to: "/mail/$mailboxId",
+					params: { mailboxId: threadMailboxId },
+					search: (prev) => prev,
+				});
+				return;
+			}
 			navigate({
 				to: ".",
 				search: (prev: Record<string, unknown>) => ({
@@ -154,7 +169,14 @@ export const ComposeProvider = ({
 				}),
 			});
 		},
-		[navigate, location.pathname, location.search, target, pushError],
+		[
+			navigate,
+			location.pathname,
+			location.search,
+			routeParams?.mailboxId,
+			target,
+			pushError,
+		],
 	);
 
 	const closeCompose = useCallback(() => {

package/src/components/layout/ComposeFab.tsx

@@ -14,8 +14,9 @@ import { locationOpensDetail } from "@/lib/mail-route";
  *     `lg:hidden` class covers the pre-hydration frame.
  *   - The compose surface is already open.
  *   - 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=…`.
+ *     its reply bar is under this corner. The brief and a folder say so in
+ *     their path; the flagged list, still to move, says so in
+ *     `?selectedMessageId=…`.
  *   - The user is off `/mail`, which is every route with no mail in it.
  */
 export const ComposeFab = () => {

package/src/components/mail/BriefPane.tsx

@@ -3,7 +3,7 @@
  *
  * Usage in the list layout route:
  *
- *   <BriefPane thread={useBriefThreadPath()}>
+ *   <BriefPane thread={useOpenThreadPath()}>
  *     <MailShell
  *       list={<BriefPane.List />}
  *       reading={<Outlet />}
@@ -41,7 +41,7 @@ import {
 } from "@/hooks/useTriageLayer";
 import type { ConversationTarget } from "@/lib/conversation-target";
 import { useMailContext } from "@/lib/mail-context";
-import type { BriefThreadPath, BriefThreadTarget } from "@/routing";
+import type { OpenThreadPath, OpenThreadTarget } from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Context                                                              */
@@ -54,13 +54,13 @@ interface BriefPaneContextValue {
 	/** The conversation the pane shows, or none when the address names no thread. */
 	conversation: ConversationTarget | undefined;
 	onOpenThread: (
-		target: BriefThreadTarget,
+		target: OpenThreadTarget,
 		options?: OpenMessageOptions,
 	) => void;
 	onCloseThread: () => void;
 	/** The rows either side of the open one — the phone's swipe gestures. */
-	nextThread: BriefThreadTarget | undefined;
-	previousThread: BriefThreadTarget | undefined;
+	nextThread: OpenThreadTarget | undefined;
+	previousThread: OpenThreadTarget | 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.
@@ -92,7 +92,7 @@ function useBriefPane(): BriefPaneContextValue {
 
 interface BriefPaneProps {
 	/** The open conversation, as the address states it. */
-	thread: BriefThreadPath | undefined;
+	thread: OpenThreadPath | undefined;
 	children: ReactNode;
 }
 
@@ -137,7 +137,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 	}, [threadId, selectedThread, selectedMessageId]);
 
 	const handleOpenThread = useCallback(
-		(target: BriefThreadTarget, options?: OpenMessageOptions) => {
+		(target: OpenThreadTarget, options?: OpenMessageOptions) => {
 			navigate({
 				to: "/mail/brief/$threadId/$messageId",
 				params: target,
@@ -225,7 +225,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 	// 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 => {
+		(messageId: string | undefined): OpenThreadTarget | undefined => {
 			if (!messageId) return undefined;
 			const row = briefThreads.find((t) => t.messageId === messageId);
 			return row ? { threadId: row.threadId, messageId } : undefined;

package/src/components/mail/DailyBrief.tsx

@@ -105,7 +105,7 @@ import {
 	type SelectionWizardControl,
 	useSelectionWizard,
 } from "@/lib/wizard-history";
-import type { BriefThreadTarget } from "@/routing";
+import type { OpenThreadTarget } from "@/routing";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MailListHeader, type MailListHeaderProps } from "./MailListHeader";
 import type { MessageListCommands } from "./MessageList";
@@ -385,7 +385,7 @@ interface DailyBriefProps {
 	 * from the unified inbox.
 	 */
 	onOpenThread?: (
-		target: BriefThreadTarget,
+		target: OpenThreadTarget,
 		options?: OpenMessageOptions,
 	) => void;
 	/** Where the list publishes the commands the keyboard layer drives. */
@@ -825,11 +825,7 @@ export function DailyBrief({
 						navigate({
 							to: "/mail/$mailboxId",
 							params: { mailboxId: briefSpamOffer.mailboxId },
-							search: {
-								q: searchQuery || undefined,
-								selectedMessageId: undefined,
-								selectedThreadId: undefined,
-							},
+							search: { q: searchQuery || undefined },
 						})
 					}
 				/>

package/src/components/mail/DraftsView.tsx

@@ -189,10 +189,14 @@ export function DraftsView({
 	};
 
 	const handleImapDraftOpen = (messageId: string) => {
+		const threadId = imapThreads.find(
+			(thread) => thread.messageId === messageId,
+		)?.threadId;
+		if (!threadId) return;
 		navigate({
-			to: "/mail/$mailboxId",
-			params: { mailboxId },
-			search: { selectedMessageId: messageId },
+			to: "/mail/$mailboxId/$threadId/$messageId",
+			params: { mailboxId, threadId, messageId },
+			search: (prev) => prev,
 		});
 	};
 

package/src/components/mail/IntelligencePane.tsx

@@ -310,15 +310,16 @@ function WiredPanel({
 	// preserving deep-linking, middle-click, and existing search params.
 	const similarLinkComponent: SimilarMessageLinkComponent = ({
 		mailboxId: rowMailboxId,
+		threadId,
 		messageId,
 		className,
 		ariaLabel,
 		children,
 	}) => (
 		<NavLink
-			to="/mail/$mailboxId"
-			params={{ mailboxId: rowMailboxId }}
-			search={(prev) => ({ ...prev, selectedMessageId: messageId })}
+			to="/mail/$mailboxId/$threadId/$messageId"
+			params={{ mailboxId: rowMailboxId, threadId, messageId }}
+			search={(prev) => prev}
 			variant="row"
 			className={className}
 			aria-label={ariaLabel}

package/src/components/mail/MailListHeader.tsx

@@ -323,11 +323,7 @@ export function MailListHeader({
 					navigate({
 						to: "/mail/$mailboxId",
 						params: { mailboxId: spamOffer.mailboxId },
-						search: {
-							q: searchQuery || undefined,
-							selectedMessageId: undefined,
-							selectedThreadId: undefined,
-						},
+						search: { q: searchQuery || undefined },
 					}),
 			}
 		: routeScope;

package/src/components/mail/MailSidebarAdapter.tsx

@@ -244,7 +244,7 @@ export function MailSidebarAdapter({
 			return (
 				<NavLink
 					to="/mail/outbox"
-					search={{ q: undefined, selectedOutboxMessageId: undefined }}
+					search={{ q: undefined }}
 					onClick={() => onClick?.()}
 					className={className}
 					aria-label={ariaLabel}
@@ -285,8 +285,9 @@ export function MailSidebarAdapter({
 			<NavLink
 				to="/mail/$mailboxId"
 				params={{ mailboxId: navId }}
-				// Drop any stale search query / selected message when switching mailbox.
-				search={{ q: undefined, selectedMessageId: undefined }}
+				// Drop any stale search query when switching mailbox; the list route
+				// is above the open conversation, so it leaves nothing behind.
+				search={{ q: undefined }}
 				onClick={() => {
 					invalidateMailboxThreads(navId);
 					onClick?.();