@remit/web-client 0.0.166 → 0.0.168

package/src/components/mail/MailboxPane.tsx

@@ -16,8 +16,6 @@
  * On phone, use `<MailboxPane.Phone />` instead of the slot sub-views.
  */
 import {
-	outboxDetailOperationsDeleteOutboxMessageMutation,
-	outboxOperationsListOutboxMessagesQueryKey,
 	threadOperationsListThreadsQueryKey,
 	threadOperationsSearchThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
@@ -35,11 +33,7 @@ import {
 	type SearchResult,
 	useAppShellLayout,
 } from "@remit/ui";
-import {
-	useInfiniteQuery,
-	useMutation,
-	useQueryClient,
-} from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
@@ -52,9 +46,6 @@ import {
 	useRef,
 	useState,
 } from "react";
-import type { ComposeMode } from "@/components/compose/ComposeProvider";
-import { useCompose } from "@/components/compose/ComposeProvider";
-import { FullCompose } from "@/components/compose/FullCompose";
 import { Drawer } from "@/components/layout/Drawer";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DraftsView } from "@/components/mail/DraftsView";
@@ -66,8 +57,6 @@ import {
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
 import { PullToRefresh } from "@/components/mail/PullToRefresh";
 import { SpamRescue } from "@/components/mail/SpamRescue";
-import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
-import { buildMutationErrorBanner } from "@/components/ui/error-banners";
 import {
 	useArchiveMailbox,
 	useDraftsMailbox,
@@ -83,7 +72,6 @@ import {
 } from "@/hooks/useDeleteMessages";
 import type { EscalationSearchQuery } from "@/hooks/useEscalatedActions";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
-import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
@@ -127,6 +115,11 @@ import {
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
+	type ReplyMode,
+	useIsComposing,
+	useIsReplying,
+	useOpenCompose,
+	useOpenReply,
 	useRetainOpenPanels,
 } from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
@@ -208,18 +201,14 @@ interface MailboxPaneContextValue {
 	listCommandsRef: RefObject<MessageListCommands | null>;
 	onRetry: () => void;
 	// Toolbar / reading pane actions
-	toolbarComposeRequest: ComposeMode | null;
-	onToolbarReply: () => void;
-	onToolbarReplyAll: () => void;
-	onToolbarForward: () => void;
-	onClearComposeRequest: () => void;
+	/**
+	 * Answer the open conversation. Absent when none is open, which is what the
+	 * toolbar turns into its own explanation.
+	 */
+	onReply: ((mode: ReplyMode) => void) | undefined;
 	onToolbarDelete: () => void;
 	onToolbarStar: () => void;
-	onToolbarDiscardDraft: () => void;
 	onToolbarMove: (destMailboxId: string) => void;
-	composeState: ReturnType<typeof useCompose>["state"];
-	closeCompose: () => void;
-	hasRemitDraftOpen: boolean;
 	// Phone actions
 	onBack: () => void;
 	/** The rows either side of the open one — the phone's swipe gestures. */
@@ -539,9 +528,6 @@ function MailboxPaneProvider({
 	// so there is no fallback: until the mailbox resolves there is no number.
 	const unreadCount = useCurrentMailboxUnseenCount({ accounts }) ?? 0;
 
-	const queryClient = useQueryClient();
-	const { pushError } = useErrorBanners();
-
 	const toolbarActions = useThreadActions({
 		thread: selectedThread,
 		mailboxId,
@@ -557,60 +543,35 @@ function MailboxPaneProvider({
 
 	const getThreadMessageIds = useThreadMessageIds();
 
-	const { requestCompose: setToolbarComposeRequest } = toolbarActions;
-
-	const handleToolbarReply = useCallback(() => {
-		setToolbarComposeRequest("reply");
-	}, [setToolbarComposeRequest]);
-	const handleToolbarReplyAll = useCallback(() => {
-		setToolbarComposeRequest("reply_all");
-	}, [setToolbarComposeRequest]);
-	const handleToolbarForward = useCallback(() => {
-		setToolbarComposeRequest("forward");
-	}, [setToolbarComposeRequest]);
-
-	const { state: composeState, openCompose, closeCompose } = useCompose();
+	const openReply = useOpenReply();
+
+	// 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. Both
+	// are one navigation, because the mode and the message it answers are
+	// segments of the same address.
+	const replyToOpenThread = useMemo(() => {
+		if (!selectedThread || !selectedMessageId) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: selectedThread.threadId,
+				messageId: selectedMessageId,
+				mode,
+			});
+	}, [openReply, selectedThread, selectedMessageId]);
+
+	const replyToFocusedThread = useMemo(() => {
+		if (!focusedThread) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: focusedThread.threadId,
+				messageId: focusedThread.messageId,
+				mode,
+			});
+	}, [openReply, focusedThread]);
 
-	const handleNewCompose = useCallback(() => {
-		openCompose({ mode: "new" });
-	}, [openCompose]);
-
-	// A thread opening closes compose. Only a selection arriving counts, so this
-	// cannot close the compose that just cleared one.
-	const previousSelectionRef = useRef(selectedMessageId);
-	useEffect(() => {
-		const previous = previousSelectionRef.current;
-		previousSelectionRef.current = selectedMessageId;
-		if (!selectedMessageId || selectedMessageId === previous) return;
-		closeCompose();
-	}, [selectedMessageId, closeCompose]);
-
-	const deleteOutboxMutation = useMutation({
-		...outboxDetailOperationsDeleteOutboxMessageMutation(),
-		onError: (mutationError) => {
-			pushError(
-				buildMutationErrorBanner(
-					"Couldn't discard draft",
-					"The draft wasn't deleted.",
-					mutationError,
-				),
-			);
-		},
-	});
-	const handleToolbarDiscardDraft = useCallback(() => {
-		const outboxMessageId = composeState.outboxMessageId;
-		if (!outboxMessageId) return;
-		deleteOutboxMutation.mutate({ path: { outboxMessageId } });
-		queryClient.invalidateQueries({
-			queryKey: outboxOperationsListOutboxMessagesQueryKey(),
-		});
-		closeCompose();
-	}, [
-		composeState.outboxMessageId,
-		deleteOutboxMutation,
-		queryClient,
-		closeCompose,
-	]);
+	const isComposing = useIsComposing();
+	const isReplying = useIsReplying();
+	const openCompose = useOpenCompose();
 
 	const messageIdsForFocusedThread = useCallback(
 		(thread: typeof focusedThread): string[] => {
@@ -655,26 +616,18 @@ function MailboxPaneProvider({
 		senderEmail: focusedThread?.fromEmail ?? undefined,
 	});
 
-	const ensureFocusedOpen = useCallback(() => {
-		if (selectedMessageId || !triageFocusedId) return false;
-		const row = threads.find((t) => t.messageId === triageFocusedId);
-		if (!row) return false;
-		handleOpenThread({ threadId: row.threadId, messageId: triageFocusedId });
-		return true;
-	}, [selectedMessageId, triageFocusedId, threads, handleOpenThread]);
-
-	const triageReply = useCallback(() => {
-		if (ensureFocusedOpen()) return;
-		if (selectedThread) setToolbarComposeRequest("reply");
-	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
-	const triageReplyAll = useCallback(() => {
-		if (ensureFocusedOpen()) return;
-		if (selectedThread) setToolbarComposeRequest("reply_all");
-	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
-	const triageForward = useCallback(() => {
-		if (ensureFocusedOpen()) return;
-		if (selectedThread) setToolbarComposeRequest("forward");
-	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
+	const triageReply = useCallback(
+		() => replyToFocusedThread?.("reply"),
+		[replyToFocusedThread],
+	);
+	const triageReplyAll = useCallback(
+		() => replyToFocusedThread?.("reply-all"),
+		[replyToFocusedThread],
+	);
+	const triageForward = useCallback(
+		() => replyToFocusedThread?.("forward"),
+		[replyToFocusedThread],
+	);
 
 	const triageTargetMessageIds = useCallback(
 		(): string[] => messageIdsForFocusedThread(focusedThread),
@@ -784,17 +737,14 @@ function MailboxPaneProvider({
 		}
 	}, [normalizedSearchQuery, mailboxType, telemetry]);
 
-	const hasRemitDraftOpen =
-		isDraftsMailbox &&
-		composeState.isOpen &&
-		!!composeState.outboxMessageId &&
-		!selectedThread;
-
 	const { goBack, nextMessageId, previousMessageId } = useTriageLayer({
 		context: triage,
 		orderedIds: threads.map((t) => t.messageId),
 		selectedMessageId,
-		enabled: !composeState.isOpen,
+		// The list stays mounted under both writing surfaces, so the triage keys
+		// would otherwise fire at the message behind whatever is being typed — or
+		// answer a row the cursor moved to while a reply was open.
+		enabled: !isComposing && !isReplying,
 		onClose: closeThread,
 		handlers: {
 			reply: triageReply,
@@ -808,7 +758,7 @@ function MailboxPaneProvider({
 			vipSender: triageVip,
 			markJunk: triageMarkJunk,
 			toggleIntelligence: selectedThread ? onToggleIntelligence : undefined,
-			compose: handleNewCompose,
+			compose: openCompose,
 			goBrief: () => goToRoute("/mail/brief"),
 			goInbox: () => goToRoute("/mail/brief"),
 			goSent: () => goToRoute("/mail/brief"),
@@ -817,11 +767,6 @@ function MailboxPaneProvider({
 		},
 	});
 
-	useKeyboardNavigation({
-		enabled: composeState.isOpen,
-		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.
@@ -877,18 +822,10 @@ function MailboxPaneProvider({
 		onTriageContextChange: handleTriageContextChange,
 		listCommandsRef,
 		onRetry: () => refetch(),
-		toolbarComposeRequest: toolbarActions.composeRequest,
-		onToolbarReply: handleToolbarReply,
-		onToolbarReplyAll: handleToolbarReplyAll,
-		onToolbarForward: handleToolbarForward,
-		onClearComposeRequest: toolbarActions.clearComposeRequest,
+		onReply: replyToOpenThread,
 		onToolbarDelete: toolbarActions.deleteThread,
 		onToolbarStar: toolbarActions.toggleStar,
-		onToolbarDiscardDraft: handleToolbarDiscardDraft,
 		onToolbarMove: toolbarActions.moveThread,
-		composeState,
-		closeCompose,
-		hasRemitDraftOpen,
 		onBack: goBack,
 		nextThread: adjacentThread(nextMessageId),
 		previousThread: adjacentThread(previousMessageId),
@@ -1138,19 +1075,12 @@ function MailboxReading() {
 		mailboxAccountId,
 		selectedThread,
 		conversation,
-		hasRemitDraftOpen,
 		intelligenceOpen,
 		onToggleIntelligence,
-		toolbarComposeRequest,
-		onToolbarReply,
-		onToolbarReplyAll,
-		onToolbarForward,
-		onClearComposeRequest,
+		onReply,
 		onToolbarDelete,
 		onToolbarStar,
-		onToolbarDiscardDraft,
 		onToolbarMove,
-		composeState,
 		handleDeselectIfRemoved,
 	} = useMailboxPane();
 	// Which surface intelligence has here: the rail between 1280 and up, the
@@ -1197,25 +1127,20 @@ function MailboxReading() {
 	const intelligenceShowing =
 		hasThread && (railFits ? intelligenceOpen : drawerOpen);
 
-	const detailPane =
-		composeState.isOpen && !conversation ? (
-			<FullCompose />
-		) : conversation ? (
-			<ConversationView
-				threadId={conversation.threadId}
-				mailboxId={conversation.mailboxId}
-				subject={conversation.subject}
-				selectedMessageId={conversation.messageId}
-				authenticity={conversation.authenticity}
-				onOpenIntelligence={
-					conversation.authenticity?.dkimMismatch ? openIntelligence : undefined
-				}
-				composeRequest={toolbarComposeRequest}
-				onComposeClose={onClearComposeRequest}
-			/>
-		) : (
-			<ReadingPaneEmpty />
-		);
+	const detailPane = conversation ? (
+		<ConversationView
+			threadId={conversation.threadId}
+			mailboxId={conversation.mailboxId}
+			subject={conversation.subject}
+			selectedMessageId={conversation.messageId}
+			authenticity={conversation.authenticity}
+			onOpenIntelligence={
+				conversation.authenticity?.dkimMismatch ? openIntelligence : undefined
+			}
+		/>
+	) : (
+		<ReadingPaneEmpty />
+	);
 
 	return (
 		<>
@@ -1225,17 +1150,11 @@ function MailboxReading() {
 					intelligenceOpen={intelligenceShowing}
 					canToggleIntelligence={hasThread}
 					onToggleIntelligence={toggleIntelligence}
-					onReply={hasThread ? onToolbarReply : undefined}
-					onReplyAll={hasThread ? onToolbarReplyAll : undefined}
-					onForward={hasThread ? onToolbarForward : undefined}
-					canDelete={hasThread || hasRemitDraftOpen}
-					onDelete={
-						hasThread
-							? onToolbarDelete
-							: hasRemitDraftOpen
-								? onToolbarDiscardDraft
-								: undefined
-					}
+					onReply={onReply ? () => onReply("reply") : undefined}
+					onReplyAll={onReply ? () => onReply("reply-all") : undefined}
+					onForward={onReply ? () => onReply("forward") : undefined}
+					canDelete={hasThread}
+					onDelete={hasThread ? onToolbarDelete : undefined}
 					onToggleStar={hasThread ? onToolbarStar : undefined}
 					isStarred={selectedThread?.hasStars}
 					moveContext={
@@ -1309,7 +1228,6 @@ function MailboxPhone() {
 		onBack,
 		nextThread,
 		previousThread,
-		composeState,
 		handleDeselectIfRemoved,
 	} = useMailboxPane();
 
@@ -1349,14 +1267,6 @@ function MailboxPhone() {
 		);
 	}
 
-	if (composeState.isOpen) {
-		return (
-			<div className="h-full">
-				<FullCompose />
-			</div>
-		);
-	}
-
 	return <MailboxList />;
 }
 

package/src/components/mail/OutboxPane.tsx

@@ -48,7 +48,6 @@ import {
 	useMemo,
 	useRef,
 } from "react";
-import { useCompose } from "@/components/compose/ComposeProvider";
 import { MessageBody } from "@/components/mail/MessageBody";
 import { NavMenuButton } from "@/components/mail/NavMenuButton";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
@@ -63,7 +62,7 @@ import {
 import { isOutboxListRow, isUnsendableStatus } from "@/lib/outbox-status";
 import { normalizeSearchQuery } from "@/lib/search-query";
 import { parseSearchTokens } from "@/lib/search-tokens";
-import { useRetainOpenPanels } from "@/routing";
+import { useEditDraft, useRetainOpenPanels } from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Helpers (shared between List, Reading, Phone sub-views)             */
@@ -266,7 +265,7 @@ function OutboxMessageRow({
 	onSelect,
 }: OutboxMessageRowProps) {
 	const queryClient = useQueryClient();
-	const { openCompose } = useCompose();
+	const editDraft = useEditDraft();
 	const { pushError } = useErrorBanners();
 
 	const invalidateOutbox = useCallback(() => {
@@ -331,12 +330,7 @@ function OutboxMessageRow({
 					: undefined
 			}
 			retrying={retryMutation.isPending}
-			onEdit={() =>
-				openCompose({
-					mode: "new",
-					outboxMessageId: message.outboxMessageId,
-				})
-			}
+			onEdit={() => editDraft(message.outboxMessageId)}
 			onDelete={() =>
 				deleteMutation.mutate({
 					path: { outboxMessageId: message.outboxMessageId },

package/src/components/mail/conversation-reply-reach.render.test.ts

@@ -126,35 +126,55 @@ afterEach(() => {
 // `window`.
 (globalThis as { self?: typeof globalThis }).self ??= globalThis;
 
-// The conversation is what the mailbox route renders, and the per-message
-// action menu reads the route's own search — so it is mounted on a route
-// rather than beside one.
-const testRouter = (): AnyRouter => {
+const MESSAGE_PATH = `/mail/${MAILBOX_ID}/${THREAD_ID}/${MESSAGE_ID}`;
+const REPLY_PATH = `${MESSAGE_PATH}/reply`;
+
+// The conversation is what the message route renders, and the reply is the
+// segment under it — so the tree here is the app's: the folder, the thread, the
+// message, and the mode below it. The address is what opens the reply, so the
+// cases below mount at one or the other.
+const testRouter = (href: string): AnyRouter => {
 	// The compose provider sits at the root the way `__root.tsx` mounts it.
 	const rootRoute = createRootRoute({
 		component: () =>
 			createElement(ComposeProvider, null, createElement(Outlet)),
 	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail/$mailboxId",
+		validateSearch: (search: Record<string, unknown>) => search,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () =>
+			createElement(ConversationView, {
+				threadId: THREAD_ID,
+				mailboxId: MAILBOX_ID,
+				subject: "Lunch Thursday?",
+				selectedMessageId: MESSAGE_ID,
+			}),
+	});
+	const replyRoute = createRoute({
+		getParentRoute: () => messageRoute,
+		path: "$mode/{-$outboxMessageId}",
+	});
 	const routeTree = rootRoute.addChildren([
-		createRoute({
-			getParentRoute: () => rootRoute,
-			path: "/mail/$mailboxId",
-			validateSearch: (search: Record<string, unknown>) => search,
-			component: () =>
-				createElement(ConversationView, {
-					threadId: THREAD_ID,
-					mailboxId: MAILBOX_ID,
-					subject: "Lunch Thursday?",
-				}),
-		}),
+		mailboxRoute.addChildren([
+			threadRoute.addChildren([messageRoute.addChildren([replyRoute])]),
+		]),
 	]);
 	return createRouter({
 		routeTree,
-		history: createMemoryHistory({ initialEntries: [`/mail/${MAILBOX_ID}`] }),
+		history: createMemoryHistory({ initialEntries: [href] }),
 	}) as unknown as AnyRouter;
 };
 
-const mount = async (): Promise<DomHarness> => {
+const mountAt = async (href: string): Promise<[DomHarness, AnyRouter]> => {
 	http = mockFetch((call) => {
 		if (call.path.endsWith("/config")) return { accounts: [account] };
 		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
@@ -164,17 +184,39 @@ const mount = async (): Promise<DomHarness> => {
 		return { items: [] };
 	});
 
-	const router = testRouter();
+	const router = testRouter(href);
 	await router.load();
 	harness = createDomHarness();
 	harness.renderApp(createElement(RouterProvider, { router }));
 	await harness.flush();
 	await harness.wait(20);
 	await harness.flush();
-	return harness;
+	return [harness, router];
 };
 
-/** The r shortcut the reading pane binds — how a reader opens the reply. */
+/** The conversation, with nothing being written under it. */
+const mount = async (): Promise<DomHarness> => {
+	const [mounted] = await mountAt(MESSAGE_PATH);
+	return mounted;
+};
+
+/**
+ * The same conversation at the address that names a reply — which is the whole
+ * of what opens one.
+ *
+ * A cold load rather than a press: a navigation inside this harness moves the
+ * router but never re-renders the tree, so nothing here can say what the pane
+ * does as an address changes under it. Every case below is what one address
+ * renders, and the transitions between two of them — the reply opening, and its
+ * closing again with the conversation left standing — are asserted in
+ * `packages/e2e/specs/detail-routes.spec.ts`, against a real browser.
+ */
+const mountReplying = async (): Promise<DomHarness> => {
+	const [mounted] = await mountAt(REPLY_PATH);
+	return mounted;
+};
+
+/** The r shortcut the reading pane binds — how a reader asks for the reply. */
 const pressReply = async (mounted: DomHarness): Promise<void> => {
 	mounted.dispatch(
 		mounted.window,
@@ -224,9 +266,7 @@ const verticalScrollers = (root: Element): Element[] =>
 
 describe("answering the message that is open", () => {
 	it("puts the reply in the same scrolling region as the message", async () => {
-		const mounted = await mount();
-
-		await pressReply(mounted);
+		const mounted = await mountReplying();
 
 		const pane = mounted.query("article");
 		assert.ok(pane, "the conversation pane is mounted");
@@ -246,9 +286,7 @@ describe("answering the message that is open", () => {
 	});
 
 	it("leads the pane with the reply, above the thread it answers", async () => {
-		const mounted = await mount();
-
-		await pressReply(mounted);
+		const mounted = await mountReplying();
 
 		const compose = mounted.query('[data-testid="compose-body-area"]');
 		assert.ok(compose, "the reply opened");
@@ -313,7 +351,7 @@ describe("answering the message that is open", () => {
 		);
 	});
 
-	it("gives the pane one scrollbar, reply open or not", async () => {
+	it("gives the pane one scrollbar with nothing being written", async () => {
 		const mounted = await mount();
 
 		const pane = mounted.query("article");
@@ -323,9 +361,13 @@ describe("answering the message that is open", () => {
 			1,
 			"reading a thread scrolls one thing",
 		);
+	});
 
-		await pressReply(mounted);
+	it("gives the pane one scrollbar with the reply open", async () => {
+		const mounted = await mountReplying();
 
+		const pane = mounted.query("article");
+		assert.ok(pane, "the conversation pane is mounted");
 		assert.equal(
 			verticalScrollers(pane).length,
 			1,
@@ -333,6 +375,17 @@ describe("answering the message that is open", () => {
 		);
 	});
 
+	// The address is the whole of what opens a reply, so what the key does is
+	// move it: the mode lands under the message that was open, and the thread
+	// that was matched behind it stays matched.
+	it("moves the address to the reply under the open message", async () => {
+		const [mounted, router] = await mountAt(MESSAGE_PATH);
+
+		await pressReply(mounted);
+
+		assert.equal(router.state.location.pathname, REPLY_PATH);
+	});
+
 	it("collapses the message from the chevron beside the sender", async () => {
 		const mounted = await mount();
 

package/src/hooks/useSaveDraft.ts

@@ -52,8 +52,19 @@ export const useSaveDraft = ({
 	const propIdRef = useRef(outboxMessageId);
 	const targetIdRef = useRef(outboxMessageId);
 	if (propIdRef.current !== outboxMessageId) {
+		// A write waiting out the debounce holds the document that has just been
+		// left, aimed at whatever entry is current when it fires. Leaving one is
+		// therefore dropping it: otherwise it lands on the next draft, or — with
+		// no entry to land on at all — creates one holding the last message's
+		// content, which is what a second Compose press used to do.
+		//
+		// Adoption is the exception, as it is everywhere: the id arriving is this
+		// session's own draft coming back, and a save scheduled while it was in
+		// flight is still the right content for it.
+		const leavingADocument = propIdRef.current !== undefined;
 		propIdRef.current = outboxMessageId;
 		targetIdRef.current = outboxMessageId;
+		if (leavingADocument && timerRef.current) clearTimeout(timerRef.current);
 	}
 
 	const createMutation = useMutation(

package/src/hooks/useSearchMirror.ts

@@ -2,6 +2,7 @@ import { useNavigate, useRouterState, useSearch } from "@tanstack/react-router";
 import { useEffect, useRef } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import { shouldMirrorQuery } from "@/lib/search-view";
+import { useIsComposing } from "@/routing";
 
 /**
  * The list the mirror writes to. Each list calls the hook with its own route,
@@ -40,12 +41,17 @@ export type SearchMirrorTarget =
  * was opened under it (not a pre-search leftover) and must survive. The close
  * otherwise raced the tap: the row shows before the debounce settles, so this
  * mirror can land just after the open and undo it.
+ *
+ * A composer is not the pre-search list's leftover either. It is the reader's
+ * own unsent message, so a search started while it is up narrows the list
+ * behind it and leaves it standing.
  */
 export function useSearchMirror(target: SearchMirrorTarget): void {
 	const navigate = useNavigate();
 	const { searchInput, searchQuery: committedQuery } = useMailContext();
 	const { q: urlQuery = "" } = useSearch({ from: "/mail" });
 	const pathname = useRouterState({ select: (s) => s.location.pathname });
+	const isComposing = useIsComposing();
 
 	// Read at effect time rather than depended on: the URL is what the mirror
 	// compares against, not what re-triggers it.
@@ -67,13 +73,17 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 		if (!mayWrite) return;
 		const queryGoesActive =
 			Boolean(committedQuery) && urlQueryRef.current !== committedQuery;
+		// The composer is the reader's own unsent message, not a leftover of the
+		// list they were on, so a query going active narrows the list behind it and
+		// leaves it where it is.
+		const closesTheOpenSurface = queryGoesActive && !isComposing;
 		const search = (prev: Record<string, unknown>) => ({
 			...prev,
 			q: committedQuery || undefined,
 		});
 		// A query is a mode of the view the reader is already in, so the panels
 		// they have up are not ones they navigated away from.
-		if (!queryGoesActive) {
+		if (!closesTheOpenSurface) {
 			navigate({ to: ".", search, hash: true, replace: true });
 			return;
 		}
@@ -97,5 +107,6 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 		mailboxId,
 		listPath,
 		pathname,
+		isComposing,
 	]);
 }