@remit/web-client 0.0.149 → 0.0.151

package/src/components/mail/MessageRow.tsx

@@ -4,9 +4,9 @@
  * The mailbox list, the daily brief and Flagged used to carry three
  * near-identical rows (#149). They differ in two axes only, both props here:
  *
- * - `linkMailboxId` — set for the mailbox list, whose rows are real links so a
- *   plain click routes and a middle click opens a tab. Omitted for the brief
- *   and Flagged, whose rows report the tap through `onClick`.
+ * - `link` — set for the mailbox list, whose rows are real links so a plain
+ *   click routes and a middle click opens a tab. Omitted for the brief and
+ *   Flagged, whose rows report the tap through `onClick`.
  * - `selection` — set where multi-select is available. Absent renders the
  *   avatar alone with no checkbox, which is what "non-selectable mode" means.
  */
@@ -73,8 +73,11 @@ export interface MessageRowProps {
 	 * orphan `option` is invalid ARIA and costs the row its button semantics.
 	 */
 	inListbox?: boolean;
-	/** Mailbox whose route the row links to; omit for callback-driven rows. */
-	linkMailboxId?: string;
+	/**
+	 * The address the row links to: the folder being browsed and the conversation
+	 * this row opens. Omit for callback-driven rows.
+	 */
+	link?: { mailboxId: string; threadId: string };
 	/** Called when the row is opened by a plain click on a non-linking row. */
 	onClick?: () => void;
 	/** Called when the row takes DOM focus, so the roving cursor follows it. */
@@ -91,7 +94,7 @@ const MessageRowComponent = ({
 	badge,
 	selection: selectionProp,
 	inListbox = false,
-	linkMailboxId,
+	link,
 	onClick,
 	onFocusRow: onFocusRowProp,
 }: MessageRowProps) => {
@@ -240,7 +243,7 @@ const MessageRowComponent = ({
 			/>
 		);
 
-	if (linkMailboxId === undefined) {
+	if (link === undefined) {
 		return (
 			<button type="button" {...interactionProps} className={className}>
 				{body}
@@ -250,9 +253,9 @@ const MessageRowComponent = ({
 
 	return (
 		<NavLink
-			to="/mail/$mailboxId"
-			params={{ mailboxId: linkMailboxId }}
-			search={(prev) => ({ ...prev, selectedMessageId: messageId })}
+			to="/mail/$mailboxId/$threadId/$messageId"
+			params={{ ...link, messageId }}
+			search={(prev) => prev}
 			variant="row"
 			{...interactionProps}
 			className={className}

package/src/components/mail/OutboxPane.tsx

@@ -1,12 +1,12 @@
 /**
  * OutboxPane — compound component for the outbox view (/mail/outbox route).
  *
- * Usage in mail.tsx:
+ * Usage in the list layout route:
  *
- *   <OutboxPane>
- *     <AppShellSlotted
+ *   <OutboxPane outboxMessageId={useOutboxDraftId()}>
+ *     <MailShell
  *       list={<OutboxPane.List />}
- *       reading={<OutboxPane.Reading />}
+ *       reading={<Outlet />}
  *     />
  *   </OutboxPane>
  *
@@ -29,7 +29,7 @@ import {
 	useRovingFocus,
 } from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import {
 	AlertCircle,
 	AlertTriangle,
@@ -143,9 +143,11 @@ interface OutboxPaneContextValue {
 	/** True when that query asks for a filter the outbox cannot apply. */
 	unsupportedQuery: boolean;
 	isLoading: boolean;
+	/** The message the address names, which is the one the list highlights. */
 	selectedMessageId: string | undefined;
 	selectedMessage: RemitImapOutboxMessageResponse | undefined;
-	onSelectMessage: (id: string | undefined) => void;
+	onOpenMessage: (outboxMessageId: string) => void;
+	onCloseMessage: () => void;
 }
 
 const OutboxPaneCtx = createContext<OutboxPaneContextValue | null>(null);
@@ -161,16 +163,16 @@ function useOutboxPane(): OutboxPaneContextValue {
 /* ------------------------------------------------------------------ */
 
 interface OutboxPaneProps {
+	/** The open message, as the address states it. */
+	outboxMessageId: string | undefined;
 	children: ReactNode;
 }
 
-function OutboxPaneProvider({ children }: OutboxPaneProps) {
+function OutboxPaneProvider({
+	outboxMessageId: selectedMessageId,
+	children,
+}: OutboxPaneProps) {
 	const navigate = useNavigate();
-	// Read selectedOutboxMessageId from the URL directly — this avoids threading
-	// a prop through the parent shell for a param that only outbox uses.
-	const { selectedOutboxMessageId: selectedMessageId } = useSearch({
-		strict: false,
-	}) as { selectedOutboxMessageId?: string };
 
 	const { data: outboxResponse, isLoading } = useQuery(
 		outboxOperationsListOutboxMessagesOptions(),
@@ -210,19 +212,21 @@ function OutboxPaneProvider({ children }: OutboxPaneProps) {
 		[messages, selectedMessageId],
 	);
 
-	const handleSelectMessage = useCallback(
-		(id: string | undefined) => {
+	const handleOpenMessage = useCallback(
+		(outboxMessageId: string) => {
 			navigate({
-				to: "/mail/outbox",
-				search: (prev) => ({
-					...prev,
-					selectedOutboxMessageId: id,
-				}),
+				to: "/mail/outbox/draft/$outboxMessageId",
+				params: { outboxMessageId },
+				search: (prev) => prev,
 			});
 		},
 		[navigate],
 	);
 
+	const handleCloseMessage = useCallback(() => {
+		navigate({ to: "/mail/outbox", search: (prev) => prev });
+	}, [navigate]);
+
 	const ctx: OutboxPaneContextValue = {
 		messages,
 		hasQuery,
@@ -230,7 +234,8 @@ function OutboxPaneProvider({ children }: OutboxPaneProps) {
 		isLoading,
 		selectedMessageId,
 		selectedMessage,
-		onSelectMessage: handleSelectMessage,
+		onOpenMessage: handleOpenMessage,
+		onCloseMessage: handleCloseMessage,
 	};
 
 	return (
@@ -438,7 +443,7 @@ function OutboxList() {
 		unsupportedQuery,
 		isLoading,
 		selectedMessageId,
-		onSelectMessage,
+		onOpenMessage,
 	} = useOutboxPane();
 	const listRef = useRef<HTMLDivElement>(null);
 	useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
@@ -482,7 +487,7 @@ function OutboxList() {
 						key={message.outboxMessageId}
 						message={message}
 						isSelected={selectedMessageId === message.outboxMessageId}
-						onSelect={() => onSelectMessage(message.outboxMessageId)}
+						onSelect={() => onOpenMessage(message.outboxMessageId)}
 					/>
 				))}
 			</div>
@@ -529,7 +534,8 @@ function OutboxPhone() {
 		isLoading,
 		selectedMessageId,
 		selectedMessage,
-		onSelectMessage,
+		onOpenMessage,
+		onCloseMessage,
 	} = useOutboxPane();
 	const listRef = useRef<HTMLDivElement>(null);
 	useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
@@ -544,10 +550,7 @@ function OutboxPhone() {
 
 	if (selectedMessage) {
 		return (
-			<OutboxMessageDetail
-				message={selectedMessage}
-				onBack={() => onSelectMessage(undefined)}
-			/>
+			<OutboxMessageDetail message={selectedMessage} onBack={onCloseMessage} />
 		);
 	}
 
@@ -579,7 +582,7 @@ function OutboxPhone() {
 						key={message.outboxMessageId}
 						message={message}
 						isSelected={selectedMessageId === message.outboxMessageId}
-						onSelect={() => onSelectMessage(message.outboxMessageId)}
+						onSelect={() => onOpenMessage(message.outboxMessageId)}
 					/>
 				))}
 			</div>

package/src/components/mail/SwipeableMessageRow.modifier-select.test.ts

@@ -64,6 +64,10 @@ const mailRoute = createRoute({
 	getParentRoute: () => rootRoute,
 	path: "/mail/$mailboxId",
 });
+const messageRoute = createRoute({
+	getParentRoute: () => mailRoute,
+	path: "$threadId/$messageId",
+});
 
 interface Mounted {
 	row: HTMLElement;
@@ -74,7 +78,7 @@ interface Mounted {
 const mountRow = (selectionTakesIt = true): Mounted => {
 	const selects: SelectionModifiers[] = [];
 	const router = createRouter({
-		routeTree: rootRoute.addChildren([mailRoute]),
+		routeTree: rootRoute.addChildren([mailRoute.addChildren([messageRoute])]),
 		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
 	}) as unknown as AnyRouter;
 	const created = createDomHarness({ viewportWidth: HALF_SCREEN_WIDTH });
@@ -148,9 +152,10 @@ const click = (
 		}),
 	);
 
+// The conversation the row opened is the address, so the message it named is the
+// last segment of the path.
 const openedMessageId = (router: AnyRouter): string | undefined =>
-	(router.state.location.search as { selectedMessageId?: string })
-		.selectedMessageId;
+	router.state.location.pathname.split("/")[4];
 
 describe("SwipeableMessageRow — modifier selection below the desktop width", () => {
 	it("takes a shift-press for selection instead of opening the message", async () => {

package/src/components/mail/SwipeableMessageRow.tsx

@@ -13,11 +13,6 @@ import { formatEmailDate } from "@/lib/format";
 import { MessageListItem } from "./MessageListItem";
 import { useModifierSelect } from "./useModifierSelect";
 
-interface MailboxLinkSearch {
-	selectedMessageId?: string;
-	q?: string;
-}
-
 interface SwipeableMessageRowProps {
 	thread: RemitImapThreadMessageResponse;
 	mailboxId: string;
@@ -103,14 +98,15 @@ export const SwipeableMessageRow = ({
 
 	const handleOpen = useCallback(() => {
 		navigate({
-			to: "/mail/$mailboxId",
-			params: { mailboxId },
-			search: (prev: MailboxLinkSearch) => ({
-				...prev,
-				selectedMessageId: thread.messageId,
-			}),
+			to: "/mail/$mailboxId/$threadId/$messageId",
+			params: {
+				mailboxId,
+				threadId: thread.threadId,
+				messageId: thread.messageId,
+			},
+			search: (prev) => prev,
 		});
-	}, [navigate, mailboxId, thread.messageId]);
+	}, [navigate, mailboxId, thread.threadId, thread.messageId]);
 
 	const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);
 

package/src/hooks/useIntelligenceData.ts

@@ -363,6 +363,7 @@ export function useIntelligenceData(
 			.filter((r) => r.messageId !== thread.messageId)
 			.map((r) => ({
 				id: r.messageId,
+				threadId: r.threadId,
 				// Prefer the mailbox the user is already viewing when the message also
 				// lives there, so opening a similar message stays in the same folder;
 				// otherwise fall back to the first mailbox it lives in.

package/src/lib/conversation-target.ts

@@ -1,14 +1,12 @@
 /**
- * The minimal data needed to open a conversation. A list view normally opens the
- * thread it already has loaded, but a semantic "Related" search hit can point at a
- * message that isn't in the loaded list at all. Such a hit still carries its
- * `threadId` and `mailboxId`, and `ConversationView` fetches by `threadId`, so we
- * can open it directly from those alone — no dependency on the loaded list.
+ * What the reading pane needs to show a conversation.
+ *
+ * The thread is the whole address — `ConversationView` fetches by it — and the
+ * rest is what the list already knows about the row the reader pointed at, so
+ * the pane paints a subject before the thread's own messages arrive. A thread no
+ * list holds carries none of it and still opens.
  */
-import type {
-	RemitImapMessageAuthenticity,
-	RemitImapThreadMessageResponse,
-} from "@remit/api-http-client/types.gen.ts";
+import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
 
 export interface ConversationTarget {
 	threadId: string;
@@ -17,43 +15,3 @@ export interface ConversationTarget {
 	messageId?: string;
 	authenticity?: RemitImapMessageAuthenticity;
 }
-
-function threadToConversationTarget(
-	thread: RemitImapThreadMessageResponse,
-): ConversationTarget {
-	return {
-		threadId: thread.threadId,
-		mailboxId: thread.mailboxId,
-		subject: thread.subject,
-		messageId: thread.messageId,
-		authenticity: thread.authenticity,
-	};
-}
-
-/**
- * Resolve the conversation to open. Prefer the fully loaded thread (it carries
- * the subject, authenticity and read state the reading pane wants); otherwise
- * fall back to the `threadId` + `mailboxId` carried in the URL by a tapped
- * "Related" hit so a message outside the loaded list still opens.
- */
-export function buildConversationTarget(
-	selectedThread: RemitImapThreadMessageResponse | undefined,
-	fallback: {
-		messageId?: string;
-		threadId?: string;
-		mailboxId?: string;
-	},
-): ConversationTarget | undefined {
-	if (selectedThread) return threadToConversationTarget(selectedThread);
-	// Require the messageId too: it's always set alongside the threadId when a
-	// result is tapped, and gating on it means clearing `selectedMessageId` (e.g.
-	// pressing Back) closes the conversation even if a stale threadId lingers.
-	if (fallback.messageId && fallback.threadId && fallback.mailboxId) {
-		return {
-			threadId: fallback.threadId,
-			mailboxId: fallback.mailboxId,
-			messageId: fallback.messageId,
-		};
-	}
-	return undefined;
-}

package/src/lib/mail-search.ts

@@ -16,7 +16,7 @@ const listSearch = z.object({ q: z.string().optional() });
  * The brief's open thread and the message inside it are path segments
  * (`/mail/brief/<thread>/<message>`), so the query carries nothing but the
  * search. An old link's selection params are dropped here, which is what
- * "tolerated and ignored" means until the other three lists follow.
+ * "tolerated and ignored" means until the remaining lists follow.
  */
 export const briefSearchSchema = listSearch.extend({});
 
@@ -24,17 +24,19 @@ export const flaggedSearchSchema = listSearch.extend({
 	selectedMessageId: z.string().optional(),
 });
 
-export const outboxSearchSchema = listSearch.extend({
-	selectedOutboxMessageId: z.string().optional(),
-});
+/**
+ * The outbox's open message is a path segment
+ * (`/mail/outbox/draft/<outboxMessageId>`), so the query carries nothing but
+ * the search. An old link's selection param is dropped here.
+ */
+export const outboxSearchSchema = listSearch.extend({});
 
-export const mailboxSearchSchema = listSearch.extend({
-	selectedMessageId: z.string().optional(),
-	// A tapped semantic "Related" hit can point at a message outside the loaded
-	// list; carrying its thread lets the mailbox open it directly (the mailbox is
-	// the route param). See `buildConversationTarget`.
-	selectedThreadId: z.string().optional(),
-});
+/**
+ * A folder's open thread and the message inside it are path segments
+ * (`/mail/<mailbox>/<thread>/<message>`), so the query carries nothing but the
+ * search.
+ */
+export const mailboxSearchSchema = listSearch.extend({});
 
 /**
  * `/mail` itself only redirects to the brief, so it accepts what the brief

package/src/routeTree.gen.ts

@@ -28,12 +28,16 @@ import { Route as SettingsLabelsRouteImport } from './routes/settings/labels'
 import { Route as SettingsSendersRouteImport } from './routes/settings/senders'
 import { Route as SettingsSuggestedVipsRouteImport } from './routes/settings/suggested-vips'
 import { Route as MailMailboxIdIndexRouteImport } from './routes/mail/$mailboxId/index'
+import { Route as MailMailboxIdThreadIdRouteImport } from './routes/mail/$mailboxId/$threadId'
 import { Route as MailBriefIndexRouteImport } from './routes/mail/brief/index'
 import { Route as MailBriefThreadIdRouteImport } from './routes/mail/brief/$threadId'
 import { Route as MailFlaggedIndexRouteImport } from './routes/mail/flagged/index'
 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 MailBriefThreadIdIndexRouteImport } from './routes/mail/brief/$threadId/index'
 import { Route as MailBriefThreadIdMessageIdRouteImport } from './routes/mail/brief/$threadId/$messageId'
+import { Route as MailOutboxDraftOutboxMessageIdRouteImport } from './routes/mail/outbox/draft/$outboxMessageId'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
@@ -130,6 +134,11 @@ const MailMailboxIdIndexRoute = MailMailboxIdIndexRouteImport.update({
   path: '/',
   getParentRoute: () => MailMailboxIdRoute,
 } as any)
+const MailMailboxIdThreadIdRoute = MailMailboxIdThreadIdRouteImport.update({
+  id: '/$threadId',
+  path: '/$threadId',
+  getParentRoute: () => MailMailboxIdRoute,
+} as any)
 const MailBriefIndexRoute = MailBriefIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -150,6 +159,18 @@ const MailOutboxIndexRoute = MailOutboxIndexRouteImport.update({
   path: '/',
   getParentRoute: () => MailOutboxRoute,
 } as any)
+const MailMailboxIdThreadIdIndexRoute =
+  MailMailboxIdThreadIdIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => MailMailboxIdThreadIdRoute,
+  } as any)
+const MailMailboxIdThreadIdMessageIdRoute =
+  MailMailboxIdThreadIdMessageIdRouteImport.update({
+    id: '/$messageId',
+    path: '/$messageId',
+    getParentRoute: () => MailMailboxIdThreadIdRoute,
+  } as any)
 const MailBriefThreadIdIndexRoute = MailBriefThreadIdIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -161,6 +182,12 @@ const MailBriefThreadIdMessageIdRoute =
     path: '/$messageId',
     getParentRoute: () => MailBriefThreadIdRoute,
   } as any)
+const MailOutboxDraftOutboxMessageIdRoute =
+  MailOutboxDraftOutboxMessageIdRouteImport.update({
+    id: '/draft/$outboxMessageId',
+    path: '/draft/$outboxMessageId',
+    getParentRoute: () => MailOutboxRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -181,12 +208,16 @@ export interface FileRoutesByFullPath {
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail/': typeof MailIndexRoute
   '/settings/': typeof SettingsIndexRoute
+  '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdRouteWithChildren
   '/mail/brief/$threadId': typeof MailBriefThreadIdRouteWithChildren
   '/mail/$mailboxId/': typeof MailMailboxIdIndexRoute
   '/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/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
+  '/mail/$mailboxId/$threadId/': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRoutesByTo {
@@ -206,7 +237,10 @@ 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/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
+  '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRoutesById {
@@ -229,12 +263,16 @@ export interface FileRoutesById {
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail/': typeof MailIndexRoute
   '/settings/': typeof SettingsIndexRoute
+  '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdRouteWithChildren
   '/mail/brief/$threadId': typeof MailBriefThreadIdRouteWithChildren
   '/mail/$mailboxId/': typeof MailMailboxIdIndexRoute
   '/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/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
+  '/mail/$mailboxId/$threadId/': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRouteTypes {
@@ -258,12 +296,16 @@ export interface FileRouteTypes {
     | '/settings/suggested-vips'
     | '/mail/'
     | '/settings/'
+    | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
     | '/mail/$mailboxId/'
     | '/mail/brief/'
     | '/mail/flagged/'
     | '/mail/outbox/'
+    | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/outbox/draft/$outboxMessageId'
+    | '/mail/$mailboxId/$threadId/'
     | '/mail/brief/$threadId/'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -283,7 +325,10 @@ export interface FileRouteTypes {
     | '/mail/brief'
     | '/mail/flagged'
     | '/mail/outbox'
+    | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/outbox/draft/$outboxMessageId'
+    | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
   id:
     | '__root__'
@@ -305,12 +350,16 @@ export interface FileRouteTypes {
     | '/settings/suggested-vips'
     | '/mail/'
     | '/settings/'
+    | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
     | '/mail/$mailboxId/'
     | '/mail/brief/'
     | '/mail/flagged/'
     | '/mail/outbox/'
+    | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/outbox/draft/$outboxMessageId'
+    | '/mail/$mailboxId/$threadId/'
     | '/mail/brief/$threadId/'
   fileRoutesById: FileRoutesById
 }
@@ -456,6 +505,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailMailboxIdIndexRouteImport
       parentRoute: typeof MailMailboxIdRoute
     }
+    '/mail/$mailboxId/$threadId': {
+      id: '/mail/$mailboxId/$threadId'
+      path: '/$threadId'
+      fullPath: '/mail/$mailboxId/$threadId'
+      preLoaderRoute: typeof MailMailboxIdThreadIdRouteImport
+      parentRoute: typeof MailMailboxIdRoute
+    }
     '/mail/brief/': {
       id: '/mail/brief/'
       path: '/'
@@ -484,6 +540,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailOutboxIndexRouteImport
       parentRoute: typeof MailOutboxRoute
     }
+    '/mail/$mailboxId/$threadId/': {
+      id: '/mail/$mailboxId/$threadId/'
+      path: '/'
+      fullPath: '/mail/$mailboxId/$threadId/'
+      preLoaderRoute: typeof MailMailboxIdThreadIdIndexRouteImport
+      parentRoute: typeof MailMailboxIdThreadIdRoute
+    }
+    '/mail/$mailboxId/$threadId/$messageId': {
+      id: '/mail/$mailboxId/$threadId/$messageId'
+      path: '/$messageId'
+      fullPath: '/mail/$mailboxId/$threadId/$messageId'
+      preLoaderRoute: typeof MailMailboxIdThreadIdMessageIdRouteImport
+      parentRoute: typeof MailMailboxIdThreadIdRoute
+    }
     '/mail/brief/$threadId/': {
       id: '/mail/brief/$threadId/'
       path: '/'
@@ -498,14 +568,38 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailBriefThreadIdMessageIdRouteImport
       parentRoute: typeof MailBriefThreadIdRoute
     }
+    '/mail/outbox/draft/$outboxMessageId': {
+      id: '/mail/outbox/draft/$outboxMessageId'
+      path: '/draft/$outboxMessageId'
+      fullPath: '/mail/outbox/draft/$outboxMessageId'
+      preLoaderRoute: typeof MailOutboxDraftOutboxMessageIdRouteImport
+      parentRoute: typeof MailOutboxRoute
+    }
   }
 }
 
+interface MailMailboxIdThreadIdRouteChildren {
+  MailMailboxIdThreadIdMessageIdRoute: typeof MailMailboxIdThreadIdMessageIdRoute
+  MailMailboxIdThreadIdIndexRoute: typeof MailMailboxIdThreadIdIndexRoute
+}
+
+const MailMailboxIdThreadIdRouteChildren: MailMailboxIdThreadIdRouteChildren = {
+  MailMailboxIdThreadIdMessageIdRoute: MailMailboxIdThreadIdMessageIdRoute,
+  MailMailboxIdThreadIdIndexRoute: MailMailboxIdThreadIdIndexRoute,
+}
+
+const MailMailboxIdThreadIdRouteWithChildren =
+  MailMailboxIdThreadIdRoute._addFileChildren(
+    MailMailboxIdThreadIdRouteChildren,
+  )
+
 interface MailMailboxIdRouteChildren {
+  MailMailboxIdThreadIdRoute: typeof MailMailboxIdThreadIdRouteWithChildren
   MailMailboxIdIndexRoute: typeof MailMailboxIdIndexRoute
 }
 
 const MailMailboxIdRouteChildren: MailMailboxIdRouteChildren = {
+  MailMailboxIdThreadIdRoute: MailMailboxIdThreadIdRouteWithChildren,
   MailMailboxIdIndexRoute: MailMailboxIdIndexRoute,
 }
 
@@ -554,10 +648,12 @@ const MailFlaggedRouteWithChildren = MailFlaggedRoute._addFileChildren(
 
 interface MailOutboxRouteChildren {
   MailOutboxIndexRoute: typeof MailOutboxIndexRoute
+  MailOutboxDraftOutboxMessageIdRoute: typeof MailOutboxDraftOutboxMessageIdRoute
 }
 
 const MailOutboxRouteChildren: MailOutboxRouteChildren = {
   MailOutboxIndexRoute: MailOutboxIndexRoute,
+  MailOutboxDraftOutboxMessageIdRoute: MailOutboxDraftOutboxMessageIdRoute,
 }
 
 const MailOutboxRouteWithChildren = MailOutboxRoute._addFileChildren(

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

@@ -0,0 +1,19 @@
+/**
+ * /mail/$mailboxId/$threadId/$messageId — the same conversation, with one of its
+ * messages expanded and scrolled to.
+ *
+ * A message is not addressable on its own: `GET /messages/{messageId}` answers
+ * 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.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { MailboxPane } from "@/components/mail/MailboxPane";
+
+function MailboxMessagePane() {
+	return <MailboxPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/$mailboxId/$threadId/$messageId")({
+	component: MailboxMessagePane,
+});

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

@@ -0,0 +1,14 @@
+/**
+ * The thread with no message named. The pane opens on the newest message, the
+ * same as for a thread whose row the reader never pointed at.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { MailboxPane } from "@/components/mail/MailboxPane";
+
+function MailboxThreadPane() {
+	return <MailboxPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/$mailboxId/$threadId/")({
+	component: MailboxThreadPane,
+});

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

@@ -0,0 +1,12 @@
+/**
+ * /mail/$mailboxId/$threadId — a conversation open in a folder's reading pane.
+ *
+ * The folder in the address is the list being browsed, not the thread's home:
+ * a cross-folder search hit opens here too, and every message it holds names
+ * its own mailbox. A layout, because the message segment nests under it.
+ */
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/mail/$mailboxId/$threadId")({
+	component: Outlet,
+});