@remit/web-client 0.0.166 → 0.0.167

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/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,
 	]);
 }

package/src/lib/mail-route.test.ts

@@ -131,6 +131,34 @@ describe("mailViewKey", () => {
 		}
 	});
 
+	// Same trap one surface over: compose is a child of the list, and a key that
+	// moved when it opened would wipe the query the reader was mid-search on.
+	it("gives a list and its compose surface the same key", () => {
+		assert.equal(
+			mailViewKey(
+				matches([
+					MAIL_BRIEF_ROUTE_ID,
+					`${MAIL_BRIEF_ROUTE_ID}/compose/{-$outboxMessageId}`,
+				]),
+			),
+			mailViewKey(brief),
+		);
+		assert.equal(
+			mailViewKey(
+				matches(
+					[
+						MAIL_MAILBOX_ROUTE_ID,
+						`${MAIL_MAILBOX_ROUTE_ID}/compose/{-$outboxMessageId}`,
+					],
+					{
+						mailboxId: "inbox-1",
+					},
+				),
+			),
+			mailViewKey(mailbox),
+		);
+	});
+
 	it("gives a list and its reading-pane index child the same key", () => {
 		assert.equal(
 			mailViewKey(matches([MAIL_BRIEF_ROUTE_ID, `${MAIL_BRIEF_ROUTE_ID}/`])),
@@ -157,7 +185,7 @@ describe("locationIsOnList", () => {
 		);
 		assert.equal(locationIsOnList("/mail/brief/", "/mail/brief"), true);
 		assert.equal(
-			locationIsOnList("/mail/inbox-1/compose", "/mail/inbox-1"),
+			locationIsOnList("/mail/inbox-1/compose/ob-1", "/mail/inbox-1"),
 			true,
 		);
 	});
@@ -191,6 +219,12 @@ describe("locationOpensDetail", () => {
 		assert.equal(locationOpensDetail("/mail/inbox-1/thread-1"), true);
 	});
 
+	it("is true for the compose surface, which the FAB must not sit over", () => {
+		assert.equal(locationOpensDetail("/mail/brief/compose"), true);
+		assert.equal(locationOpensDetail("/mail/inbox-1/compose"), true);
+		assert.equal(locationOpensDetail("/mail/inbox-1/compose/ob-1"), true);
+	});
+
 	it("is false on a bare list, trailing slash and query included", () => {
 		assert.equal(locationOpensDetail("/mail/brief"), false);
 		assert.equal(locationOpensDetail("/mail/brief/"), false);

package/src/lib/mail-route.ts

@@ -95,7 +95,8 @@ export function locationIsOnList(pathname: string, listPath: string): boolean {
 
 /**
  * Whether the address names something the list has open below it — a thread, a
- * message. A list on its own, and its bare reading pane, do not.
+ * message, the compose surface. A list on its own, and its bare reading pane,
+ * do not.
  *
  * Answers what an open thread used to be asked of the query. Anything sharing
  * the single pane with the conversation reads it from here rather than keeping a

package/src/routeTree.gen.ts

@@ -36,10 +36,14 @@ import { Route as MailFlaggedThreadIdRouteImport } from './routes/mail/flagged/$
 import { Route as MailOutboxIndexRouteImport } from './routes/mail/outbox/index'
 import { Route as MailMailboxIdThreadIdIndexRouteImport } from './routes/mail/$mailboxId/$threadId/index'
 import { Route as MailMailboxIdThreadIdMessageIdRouteImport } from './routes/mail/$mailboxId/$threadId/$messageId'
+import { Route as MailMailboxIdComposeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/$mailboxId/compose.{-$outboxMessageId}'
 import { Route as MailBriefThreadIdIndexRouteImport } from './routes/mail/brief/$threadId/index'
 import { Route as MailBriefThreadIdMessageIdRouteImport } from './routes/mail/brief/$threadId/$messageId'
+import { Route as MailBriefComposeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/brief/compose.{-$outboxMessageId}'
 import { Route as MailFlaggedThreadIdIndexRouteImport } from './routes/mail/flagged/$threadId/index'
 import { Route as MailFlaggedThreadIdMessageIdRouteImport } from './routes/mail/flagged/$threadId/$messageId'
+import { Route as MailFlaggedComposeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/flagged/compose.{-$outboxMessageId}'
+import { Route as MailOutboxComposeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/outbox/compose.{-$outboxMessageId}'
 import { Route as MailOutboxDraftOutboxMessageIdRouteImport } from './routes/mail/outbox/draft/$outboxMessageId'
 
 const IndexRoute = IndexRouteImport.update({
@@ -179,6 +183,12 @@ const MailMailboxIdThreadIdMessageIdRoute =
     path: '/$messageId',
     getParentRoute: () => MailMailboxIdThreadIdRoute,
   } as any)
+const MailMailboxIdComposeChar123OutboxMessageIdChar125Route =
+  MailMailboxIdComposeChar123OutboxMessageIdChar125RouteImport.update({
+    id: '/compose/{-$outboxMessageId}',
+    path: '/compose/{-$outboxMessageId}',
+    getParentRoute: () => MailMailboxIdRoute,
+  } as any)
 const MailBriefThreadIdIndexRoute = MailBriefThreadIdIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -190,6 +200,12 @@ const MailBriefThreadIdMessageIdRoute =
     path: '/$messageId',
     getParentRoute: () => MailBriefThreadIdRoute,
   } as any)
+const MailBriefComposeChar123OutboxMessageIdChar125Route =
+  MailBriefComposeChar123OutboxMessageIdChar125RouteImport.update({
+    id: '/compose/{-$outboxMessageId}',
+    path: '/compose/{-$outboxMessageId}',
+    getParentRoute: () => MailBriefRoute,
+  } as any)
 const MailFlaggedThreadIdIndexRoute =
   MailFlaggedThreadIdIndexRouteImport.update({
     id: '/',
@@ -202,6 +218,18 @@ const MailFlaggedThreadIdMessageIdRoute =
     path: '/$messageId',
     getParentRoute: () => MailFlaggedThreadIdRoute,
   } as any)
+const MailFlaggedComposeChar123OutboxMessageIdChar125Route =
+  MailFlaggedComposeChar123OutboxMessageIdChar125RouteImport.update({
+    id: '/compose/{-$outboxMessageId}',
+    path: '/compose/{-$outboxMessageId}',
+    getParentRoute: () => MailFlaggedRoute,
+  } as any)
+const MailOutboxComposeChar123OutboxMessageIdChar125Route =
+  MailOutboxComposeChar123OutboxMessageIdChar125RouteImport.update({
+    id: '/compose/{-$outboxMessageId}',
+    path: '/compose/{-$outboxMessageId}',
+    getParentRoute: () => MailOutboxRoute,
+  } as any)
 const MailOutboxDraftOutboxMessageIdRoute =
   MailOutboxDraftOutboxMessageIdRouteImport.update({
     id: '/draft/$outboxMessageId',
@@ -236,8 +264,12 @@ export interface FileRoutesByFullPath {
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
   '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
+  '/mail/$mailboxId/compose/{-$outboxMessageId}': typeof MailMailboxIdComposeChar123OutboxMessageIdChar125Route
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/brief/compose/{-$outboxMessageId}': typeof MailBriefComposeChar123OutboxMessageIdChar125Route
   '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
+  '/mail/flagged/compose/{-$outboxMessageId}': typeof MailFlaggedComposeChar123OutboxMessageIdChar125Route
+  '/mail/outbox/compose/{-$outboxMessageId}': typeof MailOutboxComposeChar123OutboxMessageIdChar125Route
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId/': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
@@ -261,8 +293,12 @@ export interface FileRoutesByTo {
   '/mail/flagged': typeof MailFlaggedIndexRoute
   '/mail/outbox': typeof MailOutboxIndexRoute
   '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
+  '/mail/$mailboxId/compose/{-$outboxMessageId}': typeof MailMailboxIdComposeChar123OutboxMessageIdChar125Route
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/brief/compose/{-$outboxMessageId}': typeof MailBriefComposeChar123OutboxMessageIdChar125Route
   '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
+  '/mail/flagged/compose/{-$outboxMessageId}': typeof MailFlaggedComposeChar123OutboxMessageIdChar125Route
+  '/mail/outbox/compose/{-$outboxMessageId}': typeof MailOutboxComposeChar123OutboxMessageIdChar125Route
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId': typeof MailBriefThreadIdIndexRoute
@@ -296,8 +332,12 @@ export interface FileRoutesById {
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
   '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
+  '/mail/$mailboxId/compose/{-$outboxMessageId}': typeof MailMailboxIdComposeChar123OutboxMessageIdChar125Route
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/brief/compose/{-$outboxMessageId}': typeof MailBriefComposeChar123OutboxMessageIdChar125Route
   '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
+  '/mail/flagged/compose/{-$outboxMessageId}': typeof MailFlaggedComposeChar123OutboxMessageIdChar125Route
+  '/mail/outbox/compose/{-$outboxMessageId}': typeof MailOutboxComposeChar123OutboxMessageIdChar125Route
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId/': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
@@ -332,8 +372,12 @@ export interface FileRouteTypes {
     | '/mail/flagged/'
     | '/mail/outbox/'
     | '/mail/$mailboxId/$threadId/$messageId'
+    | '/mail/$mailboxId/compose/{-$outboxMessageId}'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/brief/compose/{-$outboxMessageId}'
     | '/mail/flagged/$threadId/$messageId'
+    | '/mail/flagged/compose/{-$outboxMessageId}'
+    | '/mail/outbox/compose/{-$outboxMessageId}'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId/'
     | '/mail/brief/$threadId/'
@@ -357,8 +401,12 @@ export interface FileRouteTypes {
     | '/mail/flagged'
     | '/mail/outbox'
     | '/mail/$mailboxId/$threadId/$messageId'
+    | '/mail/$mailboxId/compose/{-$outboxMessageId}'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/brief/compose/{-$outboxMessageId}'
     | '/mail/flagged/$threadId/$messageId'
+    | '/mail/flagged/compose/{-$outboxMessageId}'
+    | '/mail/outbox/compose/{-$outboxMessageId}'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
@@ -391,8 +439,12 @@ export interface FileRouteTypes {
     | '/mail/flagged/'
     | '/mail/outbox/'
     | '/mail/$mailboxId/$threadId/$messageId'
+    | '/mail/$mailboxId/compose/{-$outboxMessageId}'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/brief/compose/{-$outboxMessageId}'
     | '/mail/flagged/$threadId/$messageId'
+    | '/mail/flagged/compose/{-$outboxMessageId}'
+    | '/mail/outbox/compose/{-$outboxMessageId}'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId/'
     | '/mail/brief/$threadId/'
@@ -597,6 +649,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailMailboxIdThreadIdMessageIdRouteImport
       parentRoute: typeof MailMailboxIdThreadIdRoute
     }
+    '/mail/$mailboxId/compose/{-$outboxMessageId}': {
+      id: '/mail/$mailboxId/compose/{-$outboxMessageId}'
+      path: '/compose/{-$outboxMessageId}'
+      fullPath: '/mail/$mailboxId/compose/{-$outboxMessageId}'
+      preLoaderRoute: typeof MailMailboxIdComposeChar123OutboxMessageIdChar125RouteImport
+      parentRoute: typeof MailMailboxIdRoute
+    }
     '/mail/brief/$threadId/': {
       id: '/mail/brief/$threadId/'
       path: '/'
@@ -611,6 +670,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailBriefThreadIdMessageIdRouteImport
       parentRoute: typeof MailBriefThreadIdRoute
     }
+    '/mail/brief/compose/{-$outboxMessageId}': {
+      id: '/mail/brief/compose/{-$outboxMessageId}'
+      path: '/compose/{-$outboxMessageId}'
+      fullPath: '/mail/brief/compose/{-$outboxMessageId}'
+      preLoaderRoute: typeof MailBriefComposeChar123OutboxMessageIdChar125RouteImport
+      parentRoute: typeof MailBriefRoute
+    }
     '/mail/flagged/$threadId/': {
       id: '/mail/flagged/$threadId/'
       path: '/'
@@ -625,6 +691,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailFlaggedThreadIdMessageIdRouteImport
       parentRoute: typeof MailFlaggedThreadIdRoute
     }
+    '/mail/flagged/compose/{-$outboxMessageId}': {
+      id: '/mail/flagged/compose/{-$outboxMessageId}'
+      path: '/compose/{-$outboxMessageId}'
+      fullPath: '/mail/flagged/compose/{-$outboxMessageId}'
+      preLoaderRoute: typeof MailFlaggedComposeChar123OutboxMessageIdChar125RouteImport
+      parentRoute: typeof MailFlaggedRoute
+    }
+    '/mail/outbox/compose/{-$outboxMessageId}': {
+      id: '/mail/outbox/compose/{-$outboxMessageId}'
+      path: '/compose/{-$outboxMessageId}'
+      fullPath: '/mail/outbox/compose/{-$outboxMessageId}'
+      preLoaderRoute: typeof MailOutboxComposeChar123OutboxMessageIdChar125RouteImport
+      parentRoute: typeof MailOutboxRoute
+    }
     '/mail/outbox/draft/$outboxMessageId': {
       id: '/mail/outbox/draft/$outboxMessageId'
       path: '/draft/$outboxMessageId'
@@ -653,11 +733,14 @@ const MailMailboxIdThreadIdRouteWithChildren =
 interface MailMailboxIdRouteChildren {
   MailMailboxIdThreadIdRoute: typeof MailMailboxIdThreadIdRouteWithChildren
   MailMailboxIdIndexRoute: typeof MailMailboxIdIndexRoute
+  MailMailboxIdComposeChar123OutboxMessageIdChar125Route: typeof MailMailboxIdComposeChar123OutboxMessageIdChar125Route
 }
 
 const MailMailboxIdRouteChildren: MailMailboxIdRouteChildren = {
   MailMailboxIdThreadIdRoute: MailMailboxIdThreadIdRouteWithChildren,
   MailMailboxIdIndexRoute: MailMailboxIdIndexRoute,
+  MailMailboxIdComposeChar123OutboxMessageIdChar125Route:
+    MailMailboxIdComposeChar123OutboxMessageIdChar125Route,
 }
 
 const MailMailboxIdRouteWithChildren = MailMailboxIdRoute._addFileChildren(
@@ -680,11 +763,14 @@ const MailBriefThreadIdRouteWithChildren =
 interface MailBriefRouteChildren {
   MailBriefThreadIdRoute: typeof MailBriefThreadIdRouteWithChildren
   MailBriefIndexRoute: typeof MailBriefIndexRoute
+  MailBriefComposeChar123OutboxMessageIdChar125Route: typeof MailBriefComposeChar123OutboxMessageIdChar125Route
 }
 
 const MailBriefRouteChildren: MailBriefRouteChildren = {
   MailBriefThreadIdRoute: MailBriefThreadIdRouteWithChildren,
   MailBriefIndexRoute: MailBriefIndexRoute,
+  MailBriefComposeChar123OutboxMessageIdChar125Route:
+    MailBriefComposeChar123OutboxMessageIdChar125Route,
 }
 
 const MailBriefRouteWithChildren = MailBriefRoute._addFileChildren(
@@ -707,11 +793,14 @@ const MailFlaggedThreadIdRouteWithChildren =
 interface MailFlaggedRouteChildren {
   MailFlaggedThreadIdRoute: typeof MailFlaggedThreadIdRouteWithChildren
   MailFlaggedIndexRoute: typeof MailFlaggedIndexRoute
+  MailFlaggedComposeChar123OutboxMessageIdChar125Route: typeof MailFlaggedComposeChar123OutboxMessageIdChar125Route
 }
 
 const MailFlaggedRouteChildren: MailFlaggedRouteChildren = {
   MailFlaggedThreadIdRoute: MailFlaggedThreadIdRouteWithChildren,
   MailFlaggedIndexRoute: MailFlaggedIndexRoute,
+  MailFlaggedComposeChar123OutboxMessageIdChar125Route:
+    MailFlaggedComposeChar123OutboxMessageIdChar125Route,
 }
 
 const MailFlaggedRouteWithChildren = MailFlaggedRoute._addFileChildren(
@@ -720,11 +809,14 @@ const MailFlaggedRouteWithChildren = MailFlaggedRoute._addFileChildren(
 
 interface MailOutboxRouteChildren {
   MailOutboxIndexRoute: typeof MailOutboxIndexRoute
+  MailOutboxComposeChar123OutboxMessageIdChar125Route: typeof MailOutboxComposeChar123OutboxMessageIdChar125Route
   MailOutboxDraftOutboxMessageIdRoute: typeof MailOutboxDraftOutboxMessageIdRoute
 }
 
 const MailOutboxRouteChildren: MailOutboxRouteChildren = {
   MailOutboxIndexRoute: MailOutboxIndexRoute,
+  MailOutboxComposeChar123OutboxMessageIdChar125Route:
+    MailOutboxComposeChar123OutboxMessageIdChar125Route,
   MailOutboxDraftOutboxMessageIdRoute: MailOutboxDraftOutboxMessageIdRoute,
 }
 

package/src/routes/mail/$mailboxId/compose.{-$outboxMessageId}.tsx

@@ -0,0 +1,14 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+/**
+ * /mail/$mailboxId/compose — the compose surface, open over a folder, and
+ * /mail/$mailboxId/compose/<outboxMessageId> for the draft it is editing. The
+ * Drafts folder's own rows open here.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { FullCompose } from "@/components/compose/FullCompose";
+
+export const Route = createFileRoute(
+	"/mail/$mailboxId/compose/{-$outboxMessageId}",
+)({
+	component: FullCompose,
+});

package/src/routes/mail/brief/compose.{-$outboxMessageId}.tsx

@@ -0,0 +1,22 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+/**
+ * /mail/brief/compose — the compose surface, open over the daily brief, and
+ * /mail/brief/compose/<outboxMessageId> once it has a draft to write to.
+ *
+ * A sibling of the thread route, so navigating here unmatches whatever the list
+ * had open in the same transition: nothing has to be closed first, and "opened"
+ * and "rendered" are one fact.
+ *
+ * The draft is an optional segment of this one route rather than a child route,
+ * because the first autosave adopts the id it just created while the reader is
+ * still typing. Two routes would unmount the composer mid-sentence; one route
+ * with a param that arrives is a rewritten address and nothing more.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { FullCompose } from "@/components/compose/FullCompose";
+
+export const Route = createFileRoute("/mail/brief/compose/{-$outboxMessageId}")(
+	{
+		component: FullCompose,
+	},
+);

package/src/routes/mail/flagged/compose.{-$outboxMessageId}.tsx

@@ -0,0 +1,13 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+/**
+ * /mail/flagged/compose — the compose surface, open over the starred list, and
+ * /mail/flagged/compose/<outboxMessageId> once it has a draft to write to.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { FullCompose } from "@/components/compose/FullCompose";
+
+export const Route = createFileRoute(
+	"/mail/flagged/compose/{-$outboxMessageId}",
+)({
+	component: FullCompose,
+});

package/src/routes/mail/outbox/compose.{-$outboxMessageId}.tsx

@@ -0,0 +1,17 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+/**
+ * /mail/outbox/compose — the compose surface, open over the outbox, and
+ * /mail/outbox/compose/<outboxMessageId> for the draft it is editing.
+ *
+ * `draft/<outboxMessageId>` beside it reads an outbox message; this writes one.
+ * The two are separate addresses because they are separate surfaces, and "Edit
+ * as draft" is the move from one to the other.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { FullCompose } from "@/components/compose/FullCompose";
+
+export const Route = createFileRoute(
+	"/mail/outbox/compose/{-$outboxMessageId}",
+)({
+	component: FullCompose,
+});

package/src/routes/mail.tsx

@@ -13,7 +13,6 @@ import {
 } from "@tanstack/react-router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
-import { useCompose } from "@/components/compose/ComposeProvider";
 import { ComposeFab } from "@/components/layout/ComposeFab";
 import { MailShellProvider } from "@/components/layout/MailShell";
 import { MailTopBar } from "@/components/layout/MailTopBar";
@@ -26,7 +25,6 @@ import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxNameIndex } from "@/hooks/useMailboxNameIndex";
 import { useResultFolderIndex } from "@/hooks/useResultFolderIndex";
 import { useStaleAccountSync } from "@/hooks/useStaleAccountSync";
-import { hostsComposeSurface } from "@/lib/compose-routes";
 import {
 	readIntelligencePref,
 	resolveRailOpen,
@@ -34,13 +32,15 @@ import {
 } from "@/lib/intelligence-pref";
 import { MailContext } from "@/lib/mail-context";
 import { MailFreshnessProvider } from "@/lib/mail-freshness";
-import { mailViewKey } from "@/lib/mail-route";
+import { mailListRoute, mailViewKey } from "@/lib/mail-route";
 import { buildAccountNameIndex } from "@/lib/search-token-index";
 import { committedSearchQuery, searchInputForView } from "@/lib/search-view";
 import { wizardEntryValue, wizardStepValue } from "@/lib/wizard-history";
 import {
 	isOverlayPanel,
 	type OverlayPanel,
+	useIsComposing,
+	useOpenCompose,
 	useOpenPanels,
 	useOpenThreadPath,
 	useSetOpenPanels,
@@ -166,7 +166,6 @@ function MailLayout() {
 	// the render before committing and nothing is painted with the stale query.
 	// An effect would commit one frame carrying the previous view's text, which
 	// the mirror then has to be defended against.
-	const pathname = useRouterState({ select: (s) => s.location.pathname });
 	const viewKey = useRouterState({ select: (s) => mailViewKey(s.matches) });
 	const [searchViewKey, setSearchViewKey] = useState(viewKey);
 	if (searchViewKey !== viewKey) {
@@ -214,14 +213,19 @@ function MailLayout() {
 
 	// `c` / ⌘N off the mailbox routes — the brief, Flagged, the outbox. On a
 	// mailbox the pane's own triage layer owns the key, so this is disabled there
-	// rather than firing a second compose alongside it.
-	const { openCompose } = useCompose();
+	// rather than firing a second compose alongside it, and while the composer is
+	// up the key belongs to whatever is being typed.
+	const openCompose = useOpenCompose();
+	const isComposing = useIsComposing();
+	const onMailbox = useRouterState({
+		select: (s) => mailListRoute(s.matches)?.list === "mailbox",
+	});
 	const composeHandlers = useMemo(
-		() => ({ compose: () => openCompose({ mode: "new" }) }),
+		() => ({ compose: openCompose }),
 		[openCompose],
 	);
 	useTriageKeyboard({
-		enabled: !hostsComposeSurface(pathname),
+		enabled: !onMailbox && !isComposing,
 		handlers: composeHandlers,
 	});