@remit/web-client 0.0.165 → 0.0.167

package/src/components/mail/intelligence-drawer.stories.tsx

@@ -0,0 +1,208 @@
+import { type IntelligenceData, IntelligencePanel } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronLeft, Info } from "lucide-react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import { Drawer } from "@/components/layout/Drawer";
+import { resolveRailOpen } from "@/lib/intelligence-pref";
+import { parseOpenPanels, retainOpenPanelsAtTier } from "@/routing";
+
+/**
+ * The intelligence drawer below the desktop tier (#777).
+ *
+ * There is no fourth pane here: the rail is a full-screen drawer over the open
+ * message, so it belongs to the thread it was opened for. The address is the
+ * only place its open state lives, and a navigation drops it — otherwise a DKIM
+ * mismatch on one message leaves the drawer covering every message opened
+ * after it.
+ *
+ * Both rules are the app's own: the fragment goes through
+ * `retainOpenPanelsAtTier`, and what is up is `resolveRailOpen`.
+ */
+const meta: Meta = {
+	title: "Flows/Reading/Intelligence Drawer",
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+const PHONE_WIDTH = 390;
+const PHONE_HEIGHT = 720;
+
+const retainOnPhone = retainOpenPanelsAtTier(false);
+
+const intelligence: IntelligenceData = {
+	sender: {
+		name: "Mondial Relay",
+		email: "delivery.notice.4421@gmail.example",
+		trust: "unknown",
+		firstSeenLabel: "today",
+		inboundCount: 1,
+		replyCount: 0,
+	},
+	authenticity: {
+		verdict: "mismatch",
+		fromDomain: "mondialrelay.fr",
+		dkimDomain: "gmail.example",
+		claimedBrand: "Mondial Relay",
+		summary:
+			"The display name claims “Mondial Relay”, but the message was sent and signed by a personal gmail.example mailbox — not mondialrelay.fr.",
+		similarCount: 15,
+	},
+	category: { value: "automated" },
+	similar: [],
+};
+
+interface Message {
+	id: string;
+	from: string;
+	subject: string;
+	body: string;
+}
+
+const messages: readonly Message[] = [
+	{
+		id: "msg-parcel",
+		from: "Mondial Relay",
+		subject: "Your parcel could not be delivered",
+		body: "We attempted to deliver your parcel today and nobody was home. Pay the outstanding €2.40 redelivery fee within 24 hours.",
+	},
+	{
+		id: "msg-standup",
+		from: "Alex Rivera",
+		subject: "Standup moved to 10:15",
+		body: "Pushing today's standup back fifteen minutes — the room is taken until then.",
+	},
+];
+
+/**
+ * The phone reader, driven by the address alone: `hash` is the whole state,
+ * and every navigation writes it through the same helper the panes use.
+ */
+const PhoneReader = ({ initialHash = "" }: { initialHash?: string }) => {
+	const [hash, setHash] = useState(initialHash);
+	const [openId, setOpenId] = useState<string | undefined>(messages[0]?.id);
+	const open = messages.find((message) => message.id === openId);
+	const drawerOpen = resolveRailOpen({
+		panels: parseOpenPanels(hash),
+		prefersOpen: true,
+		isDesktop: false,
+		hasThread: open !== undefined,
+	});
+	const navigate = (nextId: string | undefined) => {
+		setHash(retainOnPhone(hash));
+		setOpenId(nextId);
+	};
+
+	return (
+		<div className="flex flex-col gap-2">
+			<div
+				className="flex flex-col overflow-hidden rounded-lg border border-line bg-canvas"
+				// The transform makes the frame a containing block, so the drawer's
+				// `position: fixed` resolves against the phone instead of the canvas.
+				style={{
+					width: PHONE_WIDTH,
+					height: PHONE_HEIGHT,
+					transform: "translateZ(0)",
+				}}
+			>
+				{open ? (
+					<>
+						<header className="flex items-center gap-1 border-b border-line px-2 py-2">
+							<button
+								type="button"
+								aria-label="Back"
+								onClick={() => navigate(undefined)}
+								className="inline-flex size-11 items-center justify-center rounded-md text-fg hover:bg-surface-raised"
+							>
+								<ChevronLeft className="size-5" />
+							</button>
+							<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
+								{open.subject}
+							</h1>
+							<button
+								type="button"
+								aria-label="Message details"
+								onClick={() => setHash("intelligence")}
+								className="inline-flex size-11 items-center justify-center rounded-md text-fg hover:bg-surface-raised"
+							>
+								<Info className="size-5" />
+							</button>
+						</header>
+						<div className="min-h-0 flex-1 overflow-y-auto px-4 py-3 text-sm text-fg">
+							<p className="mb-2 text-2xs text-fg-subtle">{open.from}</p>
+							<p>{open.body}</p>
+						</div>
+					</>
+				) : (
+					<ul className="flex flex-col">
+						{messages.map((message) => (
+							<li key={message.id}>
+								<button
+									type="button"
+									onClick={() => navigate(message.id)}
+									className="flex w-full flex-col items-start gap-0.5 border-b border-line px-4 py-3 text-left hover:bg-surface-raised"
+								>
+									<span className="text-sm font-semibold text-fg">
+										{message.from}
+									</span>
+									<span className="text-sm text-fg-muted">
+										{message.subject}
+									</span>
+								</button>
+							</li>
+						))}
+					</ul>
+				)}
+				<Drawer
+					isOpen={drawerOpen}
+					onClose={() => setHash("")}
+					ariaLabel="Message details"
+					side="right"
+				>
+					<IntelligencePanel data={intelligence} hideCloseButton />
+				</Drawer>
+			</div>
+			<p className="font-mono text-2xs text-fg-subtle">
+				{`/mail/inbox${open ? `/${open.id}` : ""}${hash ? `#${hash}` : ""}`}
+			</p>
+		</div>
+	);
+};
+
+/** A message with no drawer over it: the address names no panel. */
+export const Closed: Story = {
+	render: () => <PhoneReader />,
+};
+
+/**
+ * The drawer over the message it was opened for — here by a DKIM mismatch,
+ * which opens it without being asked.
+ */
+export const OpenOverThread: Story = {
+	render: () => <PhoneReader initialHash="intelligence" />,
+};
+
+/**
+ * The same drawer, then Back and another message. The fragment is dropped on
+ * the way out, so the second message is not covered by a panel opened for the
+ * first. Press Back with the drawer up to walk it.
+ */
+export const DroppedByNavigation: Story = {
+	render: () => <PhoneReader initialHash="intelligence" />,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByLabelText("Back"));
+		await userEvent.click(canvas.getByText("Standup moved to 10:15"));
+		await expect(canvas.queryByRole("dialog")).toBeNull();
+		await expect(canvas.getByText("/mail/inbox/msg-standup")).toBeVisible();
+	},
+};
+
+/** The drawer over the dark theme. */
+export const OpenOverThreadDark: Story = {
+	name: "Open Over Thread (dark)",
+	parameters: { theme: "dark" },
+	render: () => <PhoneReader initialHash="intelligence" />,
+};

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