@remit/web-client 0.0.150 → 0.0.152

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/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/hooks/useLayoutTier.ts

@@ -1,5 +1,8 @@
-import { DESKTOP_MEDIA_QUERY, DESKTOP_MIN_WIDTH } from "@remit/ui";
-import { useMediaQuery } from "./useMediaQuery";
+import {
+	DESKTOP_MEDIA_QUERY,
+	DESKTOP_MIN_WIDTH,
+	useMatchMedia,
+} from "@remit/ui";
 
 /**
  * Responsive layout tiers for the mail shell:
@@ -46,11 +49,11 @@ export const isSinglePaneTier = (tier: LayoutTier): boolean =>
 
 /**
  * Returns the current layout tier. SSR-safe (falls back to `phone` before
- * hydration, matching `useMediaQuery`'s server default).
+ * hydration, matching `useMatchMedia`'s server default).
  */
 export const useLayoutTier = (): LayoutTier => {
-	const isTabletUp = useMediaQuery(`(min-width: ${TABLET_MIN_WIDTH}px)`);
-	const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);
+	const isTabletUp = useMatchMedia(`(min-width: ${TABLET_MIN_WIDTH}px)`);
+	const isDesktop = useMatchMedia(DESKTOP_MEDIA_QUERY);
 	if (isDesktop) return "desktop";
 	if (isTabletUp) return "tablet";
 	return "phone";

package/src/hooks/useMediaQuery.ts

@@ -1,31 +1,4 @@
-import { DESKTOP_MEDIA_QUERY } from "@remit/ui";
-import { useEffect, useState } from "react";
-
-/**
- * Subscribes to a CSS media query and returns its current `matches` value.
- * SSR-safe: returns `false` on the server / initial render before hydration.
- *
- * Layout breakpoints are exported by `@remit/ui` alongside the Tailwind
- * variants they mirror — pass those, not a hand-written width.
- */
-export const useMediaQuery = (query: string): boolean => {
-	const [matches, setMatches] = useState(() => {
-		if (typeof window === "undefined" || !window.matchMedia) return false;
-		return window.matchMedia(query).matches;
-	});
-
-	useEffect(() => {
-		if (typeof window === "undefined" || !window.matchMedia) return;
-		const mql = window.matchMedia(query);
-		const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
-		// Sync state on mount in case the SSR/initial render disagreed.
-		setMatches(mql.matches);
-		mql.addEventListener("change", handler);
-		return () => mql.removeEventListener("change", handler);
-	}, [query]);
-
-	return matches;
-};
+import { DESKTOP_MEDIA_QUERY, useMatchMedia } from "@remit/ui";
 
 /**
  * True at desktop (Tailwind `lg:` and up): at least 1024px wide and not a
@@ -37,4 +10,4 @@ export const useMediaQuery = (query: string): boolean => {
  * `lg` variant is redefined in `@remit/ui`'s token sheet with the same
  * condition — change `DESKTOP_MEDIA_QUERY` and both move together.
  */
-export const useIsDesktop = (): boolean => useMediaQuery(DESKTOP_MEDIA_QUERY);
+export const useIsDesktop = (): boolean => useMatchMedia(DESKTOP_MEDIA_QUERY);

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({});
 
@@ -31,13 +31,12 @@ export const flaggedSearchSchema = listSearch.extend({
  */
 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,10 +28,13 @@ 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'
@@ -131,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: '/',
@@ -151,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: '/',
@@ -188,13 +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 {
@@ -214,8 +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 {
@@ -238,13 +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 {
@@ -268,13 +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:
@@ -294,8 +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__'
@@ -317,13 +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
 }
@@ -469,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: '/'
@@ -497,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: '/'
@@ -521,11 +578,28 @@ declare module '@tanstack/react-router' {
   }
 }
 
+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,
 }
 

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

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

@@ -4,26 +4,30 @@
  *
  * The literal lists are declared as siblings and TanStack matches literals
  * first, so a mailbox id can never be read as one of them.
+ *
+ * The open thread and the message inside it are the segments below, which is why
+ * nothing here reads a selection out of the query.
  */
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { MailShell } from "@/components/layout/MailShell";
 import { MailboxPane } from "@/components/mail/MailboxPane";
 import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { mailboxSearchSchema } from "@/lib/mail-search";
+import { useOpenThreadPath } from "@/routing";
 
 function MailboxLayout() {
 	const { mailboxId } = Route.useParams();
-	const { selectedMessageId } = Route.useSearch();
+	const thread = useOpenThreadPath();
 	useSearchMirror({ to: "/mail/$mailboxId", params: { mailboxId } });
 
 	return (
-		<MailboxPane mailboxId={mailboxId} selectedMessageId={selectedMessageId}>
+		<MailboxPane mailboxId={mailboxId} thread={thread}>
 			<MailShell
 				phone={<MailboxPane.Phone />}
 				list={<MailboxPane.List />}
 				reading={<Outlet />}
 				intelligence={<MailboxPane.Intelligence />}
-				hasThread={Boolean(selectedMessageId)}
+				hasThread={Boolean(thread)}
 			/>
 		</MailboxPane>
 	);

package/src/routes/mail/brief.tsx

@@ -17,7 +17,7 @@ import { BriefPane } from "@/components/mail/BriefPane";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { briefSearchSchema } from "@/lib/mail-search";
-import { useBriefThreadPath } from "@/routing";
+import { useOpenThreadPath } from "@/routing";
 
 const BriefError = ({ error, reset }: ErrorComponentProps) => (
 	<div className="flex h-full items-center justify-center bg-canvas p-4">
@@ -30,7 +30,7 @@ const BriefError = ({ error, reset }: ErrorComponentProps) => (
 );
 
 function BriefLayout() {
-	const thread = useBriefThreadPath();
+	const thread = useOpenThreadPath();
 	useSearchMirror({ to: "/mail/brief" });
 
 	return (

package/src/routing/index.ts

@@ -1,8 +1,3 @@
-export {
-	type BriefThreadPath,
-	type BriefThreadTarget,
-	useBriefThreadPath,
-} from "./brief-thread";
 export {
 	type PanelFragment,
 	panelFragments,
@@ -10,4 +5,9 @@ export {
 	useOpenPanel,
 } from "./fragment";
 export { NavLink, type NavLinkProps } from "./nav-link";
+export {
+	type OpenThreadPath,
+	type OpenThreadTarget,
+	useOpenThreadPath,
+} from "./open-thread";
 export { useOutboxDraftId } from "./outbox-draft";