@remit/web-client 0.0.166 → 0.0.168

package/src/hooks/useThreadActions.ts

@@ -1,14 +1,16 @@
 /**
  * useThreadActions — the reading pane's verbs for one open thread.
  *
- * Delete, move, star and the compose requests (reply / reply-all / forward),
- * over the same mutation hooks the mailbox list uses. The mailbox view keys
- * them by its route; the brief and Flagged are cross-account, so they key by
- * the open thread's own `mailboxId` / `accountId` (#149).
+ * Delete, move and star, over the same mutation hooks the mailbox list uses.
+ * The mailbox view keys them by its route; the brief and Flagged are
+ * cross-account, so they key by the open thread's own `mailboxId` /
+ * `accountId` (#149).
+ *
+ * Answering a message is not here: reply, reply-all and forward are a segment
+ * under the message, so they are a navigation rather than a verb a pane holds.
  */
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { useCallback, useState } from "react";
-import type { ComposeMode } from "@/components/compose/ComposeProvider";
+import { useCallback } from "react";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useMoveMessages } from "@/hooks/useMoveMessages";
@@ -31,9 +33,6 @@ export interface ThreadActions {
 	deleteThread: () => void;
 	moveThread: (destinationMailboxId: string) => void;
 	toggleStar: () => void;
-	composeRequest: ComposeMode | null;
-	requestCompose: (mode: ComposeMode) => void;
-	clearComposeRequest: () => void;
 }
 
 export const useThreadActions = ({
@@ -91,11 +90,6 @@ export const useThreadActions = ({
 		toggleStarFor(thread.messageId, thread.hasStars);
 	}, [thread, toggleStarFor]);
 
-	const [composeRequest, setComposeRequest] = useState<ComposeMode | null>(
-		null,
-	);
-	const clearComposeRequest = useCallback(() => setComposeRequest(null), []);
-
 	return {
 		mailboxId: resolvedMailboxId,
 		accountId: resolvedAccountId,
@@ -103,8 +97,5 @@ export const useThreadActions = ({
 		deleteThread,
 		moveThread,
 		toggleStar,
-		composeRequest,
-		requestCompose: setComposeRequest,
-		clearComposeRequest,
 	};
 };

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,11 +36,18 @@ 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'
+import { Route as MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/$mailboxId/$threadId/$messageId/$mode.{-$outboxMessageId}'
+import { Route as MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/brief/$threadId/$messageId/$mode.{-$outboxMessageId}'
+import { Route as MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport } from './routes/mail/flagged/$threadId/$messageId/$mode.{-$outboxMessageId}'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
@@ -179,6 +186,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 +203,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,12 +221,48 @@ 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',
     path: '/draft/$outboxMessageId',
     getParentRoute: () => MailOutboxRoute,
   } as any)
+const MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route =
+  MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport.update(
+    {
+      id: '/$mode/{-$outboxMessageId}',
+      path: '/$mode/{-$outboxMessageId}',
+      getParentRoute: () => MailMailboxIdThreadIdMessageIdRoute,
+    } as any,
+  )
+const MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route =
+  MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport.update(
+    {
+      id: '/$mode/{-$outboxMessageId}',
+      path: '/$mode/{-$outboxMessageId}',
+      getParentRoute: () => MailBriefThreadIdMessageIdRoute,
+    } as any,
+  )
+const MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125Route =
+  MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport.update(
+    {
+      id: '/$mode/{-$outboxMessageId}',
+      path: '/$mode/{-$outboxMessageId}',
+      getParentRoute: () => MailFlaggedThreadIdMessageIdRoute,
+    } as any,
+  )
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -235,13 +290,20 @@ export interface FileRoutesByFullPath {
   '/mail/brief/': typeof MailBriefIndexRoute
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
-  '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
-  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
-  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
+  '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRouteWithChildren
+  '/mail/$mailboxId/compose/{-$outboxMessageId}': typeof MailMailboxIdComposeChar123OutboxMessageIdChar125Route
+  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRouteWithChildren
+  '/mail/brief/compose/{-$outboxMessageId}': typeof MailBriefComposeChar123OutboxMessageIdChar125Route
+  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRouteWithChildren
+  '/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
   '/mail/flagged/$threadId/': typeof MailFlaggedThreadIdIndexRoute
+  '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+  '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+  '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -260,13 +322,20 @@ export interface FileRoutesByTo {
   '/mail/brief': typeof MailBriefIndexRoute
   '/mail/flagged': typeof MailFlaggedIndexRoute
   '/mail/outbox': typeof MailOutboxIndexRoute
-  '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
-  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
-  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
+  '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRouteWithChildren
+  '/mail/$mailboxId/compose/{-$outboxMessageId}': typeof MailMailboxIdComposeChar123OutboxMessageIdChar125Route
+  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRouteWithChildren
+  '/mail/brief/compose/{-$outboxMessageId}': typeof MailBriefComposeChar123OutboxMessageIdChar125Route
+  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRouteWithChildren
+  '/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
   '/mail/flagged/$threadId': typeof MailFlaggedThreadIdIndexRoute
+  '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+  '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+  '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -295,13 +364,20 @@ export interface FileRoutesById {
   '/mail/brief/': typeof MailBriefIndexRoute
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
-  '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
-  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
-  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
+  '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRouteWithChildren
+  '/mail/$mailboxId/compose/{-$outboxMessageId}': typeof MailMailboxIdComposeChar123OutboxMessageIdChar125Route
+  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRouteWithChildren
+  '/mail/brief/compose/{-$outboxMessageId}': typeof MailBriefComposeChar123OutboxMessageIdChar125Route
+  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRouteWithChildren
+  '/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
   '/mail/flagged/$threadId/': typeof MailFlaggedThreadIdIndexRoute
+  '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+  '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+  '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}': typeof MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -332,12 +408,19 @@ 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/'
     | '/mail/flagged/$threadId/'
+    | '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
+    | '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}'
+    | '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -357,12 +440,19 @@ 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'
     | '/mail/flagged/$threadId'
+    | '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
+    | '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}'
+    | '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}'
   id:
     | '__root__'
     | '/'
@@ -391,12 +481,19 @@ 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/'
     | '/mail/flagged/$threadId/'
+    | '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
+    | '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}'
+    | '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -597,6 +694,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 +715,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 +736,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'
@@ -632,16 +757,53 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailOutboxDraftOutboxMessageIdRouteImport
       parentRoute: typeof MailOutboxRoute
     }
+    '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}': {
+      id: '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
+      path: '/$mode/{-$outboxMessageId}'
+      fullPath: '/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}'
+      preLoaderRoute: typeof MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport
+      parentRoute: typeof MailMailboxIdThreadIdMessageIdRoute
+    }
+    '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}': {
+      id: '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}'
+      path: '/$mode/{-$outboxMessageId}'
+      fullPath: '/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}'
+      preLoaderRoute: typeof MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport
+      parentRoute: typeof MailBriefThreadIdMessageIdRoute
+    }
+    '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}': {
+      id: '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}'
+      path: '/$mode/{-$outboxMessageId}'
+      fullPath: '/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}'
+      preLoaderRoute: typeof MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125RouteImport
+      parentRoute: typeof MailFlaggedThreadIdMessageIdRoute
+    }
   }
 }
 
+interface MailMailboxIdThreadIdMessageIdRouteChildren {
+  MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route: typeof MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+}
+
+const MailMailboxIdThreadIdMessageIdRouteChildren: MailMailboxIdThreadIdMessageIdRouteChildren =
+  {
+    MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route:
+      MailMailboxIdThreadIdMessageIdModeChar123OutboxMessageIdChar125Route,
+  }
+
+const MailMailboxIdThreadIdMessageIdRouteWithChildren =
+  MailMailboxIdThreadIdMessageIdRoute._addFileChildren(
+    MailMailboxIdThreadIdMessageIdRouteChildren,
+  )
+
 interface MailMailboxIdThreadIdRouteChildren {
-  MailMailboxIdThreadIdMessageIdRoute: typeof MailMailboxIdThreadIdMessageIdRoute
+  MailMailboxIdThreadIdMessageIdRoute: typeof MailMailboxIdThreadIdMessageIdRouteWithChildren
   MailMailboxIdThreadIdIndexRoute: typeof MailMailboxIdThreadIdIndexRoute
 }
 
 const MailMailboxIdThreadIdRouteChildren: MailMailboxIdThreadIdRouteChildren = {
-  MailMailboxIdThreadIdMessageIdRoute: MailMailboxIdThreadIdMessageIdRoute,
+  MailMailboxIdThreadIdMessageIdRoute:
+    MailMailboxIdThreadIdMessageIdRouteWithChildren,
   MailMailboxIdThreadIdIndexRoute: MailMailboxIdThreadIdIndexRoute,
 }
 
@@ -653,24 +815,42 @@ 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(
   MailMailboxIdRouteChildren,
 )
 
+interface MailBriefThreadIdMessageIdRouteChildren {
+  MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route: typeof MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+}
+
+const MailBriefThreadIdMessageIdRouteChildren: MailBriefThreadIdMessageIdRouteChildren =
+  {
+    MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route:
+      MailBriefThreadIdMessageIdModeChar123OutboxMessageIdChar125Route,
+  }
+
+const MailBriefThreadIdMessageIdRouteWithChildren =
+  MailBriefThreadIdMessageIdRoute._addFileChildren(
+    MailBriefThreadIdMessageIdRouteChildren,
+  )
+
 interface MailBriefThreadIdRouteChildren {
-  MailBriefThreadIdMessageIdRoute: typeof MailBriefThreadIdMessageIdRoute
+  MailBriefThreadIdMessageIdRoute: typeof MailBriefThreadIdMessageIdRouteWithChildren
   MailBriefThreadIdIndexRoute: typeof MailBriefThreadIdIndexRoute
 }
 
 const MailBriefThreadIdRouteChildren: MailBriefThreadIdRouteChildren = {
-  MailBriefThreadIdMessageIdRoute: MailBriefThreadIdMessageIdRoute,
+  MailBriefThreadIdMessageIdRoute: MailBriefThreadIdMessageIdRouteWithChildren,
   MailBriefThreadIdIndexRoute: MailBriefThreadIdIndexRoute,
 }
 
@@ -680,24 +860,43 @@ 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(
   MailBriefRouteChildren,
 )
 
+interface MailFlaggedThreadIdMessageIdRouteChildren {
+  MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125Route: typeof MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125Route
+}
+
+const MailFlaggedThreadIdMessageIdRouteChildren: MailFlaggedThreadIdMessageIdRouteChildren =
+  {
+    MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125Route:
+      MailFlaggedThreadIdMessageIdModeChar123OutboxMessageIdChar125Route,
+  }
+
+const MailFlaggedThreadIdMessageIdRouteWithChildren =
+  MailFlaggedThreadIdMessageIdRoute._addFileChildren(
+    MailFlaggedThreadIdMessageIdRouteChildren,
+  )
+
 interface MailFlaggedThreadIdRouteChildren {
-  MailFlaggedThreadIdMessageIdRoute: typeof MailFlaggedThreadIdMessageIdRoute
+  MailFlaggedThreadIdMessageIdRoute: typeof MailFlaggedThreadIdMessageIdRouteWithChildren
   MailFlaggedThreadIdIndexRoute: typeof MailFlaggedThreadIdIndexRoute
 }
 
 const MailFlaggedThreadIdRouteChildren: MailFlaggedThreadIdRouteChildren = {
-  MailFlaggedThreadIdMessageIdRoute: MailFlaggedThreadIdMessageIdRoute,
+  MailFlaggedThreadIdMessageIdRoute:
+    MailFlaggedThreadIdMessageIdRouteWithChildren,
   MailFlaggedThreadIdIndexRoute: MailFlaggedThreadIdIndexRoute,
 }
 
@@ -707,11 +906,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 +922,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/$threadId/$messageId/$mode.{-$outboxMessageId}.tsx

@@ -0,0 +1,14 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+/**
+ * The reply, reply-all or forward under a conversation opened from a folder.
+ *
+ * The same shape as the brief's: a child of the message so the source is the
+ * address, the mode as one param rather than three literal routes, and the
+ * draft as an optional segment so recording it does not unmount the composer.
+ * The conversation reads it off the address and opens it at its head.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+	"/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}",
+)({});

package/src/routes/mail/$mailboxId/$threadId/$messageId.tsx

@@ -6,6 +6,10 @@
  * with no thread, so the pane has nothing to fetch by. The segment names which
  * message inside the thread the reader pointed at, and the surface it renders is
  * the thread's.
+ *
+ * It mounts the pane rather than delegating to an index route, because the
+ * reply is a segment under it: a conversation that came back on a child match
+ * would collapse and scroll to the top the moment someone pressed Reply.
  */
 import { createFileRoute } from "@tanstack/react-router";
 import { MailboxPane } from "@/components/mail/MailboxPane";

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/$threadId/$messageId/$mode.{-$outboxMessageId}.tsx

@@ -0,0 +1,26 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+/**
+ * /mail/brief/<thread>/<message>/reply — the answer to that message, written at
+ * the head of the conversation it answers, and
+ * /mail/brief/<thread>/<message>/reply/<outboxMessageId> once it has a draft.
+ *
+ * A child of the message, so a reply cannot exist without a source and the
+ * conversation stays matched behind it. `reply`, `reply-all` and `forward` are
+ * one param rather than three literal routes: they differ in what the composer
+ * opens on, not in what the address mounts.
+ *
+ * The draft is an optional segment of this one route rather than a child of it,
+ * 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.
+ *
+ * The route declares the segments and mounts nothing itself. The composer opens
+ * inside the conversation, above the turn it answers, and the conversation is
+ * the single pane on a phone — where there is no reading `Outlet` to fill — so
+ * the pane reads the reply off the address, the way the shell reads compose.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+	"/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}",
+)({});

package/src/routes/mail/brief/$threadId/$messageId.tsx

@@ -6,6 +6,10 @@
  * with no thread, so the pane has nothing to fetch by. The segment names which
  * message inside the thread the reader pointed at, and the surface it renders is
  * the thread's.
+ *
+ * It mounts the pane rather than delegating to an index route, because the
+ * reply is a segment under it: a conversation that came back on a child match
+ * would collapse and scroll to the top the moment someone pressed Reply.
  */
 import { createFileRoute } from "@tanstack/react-router";
 import { BriefPane } from "@/components/mail/BriefPane";