@remit/web-client 0.0.153 → 0.0.155

package/src/hooks/useSearchMirror.ts

@@ -31,10 +31,9 @@ export type SearchMirrorTarget =
  * When a query *goes* active it also closes the reading pane (#539): an open
  * message from the pre-search list is not meaningful in the search result set.
  * The close is a navigation to the list route, which unmatches the thread that
- * was open under it — plus, until the remaining lists move their selection into
- * the path, dropping the params they still read it from. Any other write keeps
- * the address it found: mirroring a query the reader is editing, or clearing
- * one, must not shut the conversation they are reading.
+ * was open under it. Any other write keeps the address it found: mirroring a
+ * query the reader is editing, or clearing one, must not shut the conversation
+ * they are reading.
  *
  * Only on that transition, though — tapping a search result commits the same `q`
  * with the open thread, so when the URL already says the query the conversation
@@ -71,13 +70,6 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 		const search = (prev: Record<string, unknown>) => ({
 			...prev,
 			q: committedQuery || undefined,
-			...(queryGoesActive
-				? {
-						selectedMessageId: undefined,
-						selectedThreadId: undefined,
-						selectedMailboxId: undefined,
-					}
-				: {}),
 		});
 		if (!queryGoesActive) {
 			navigate({ to: ".", search, replace: true });

package/src/lib/mail-search.ts

@@ -16,13 +16,12 @@ 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 remaining lists follow.
+ * "tolerated and ignored" means.
  */
 export const briefSearchSchema = listSearch.extend({});
 
-export const flaggedSearchSchema = listSearch.extend({
-	selectedMessageId: z.string().optional(),
-});
+/** The same, for `/mail/flagged/<thread>/<message>`. */
+export const flaggedSearchSchema = listSearch.extend({});
 
 /**
  * The outbox's open message is a path segment

package/src/routeTree.gen.ts

@@ -32,11 +32,14 @@ import { Route as MailMailboxIdThreadIdRouteImport } from './routes/mail/$mailbo
 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 MailFlaggedThreadIdRouteImport } from './routes/mail/flagged/$threadId'
 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 MailFlaggedThreadIdIndexRouteImport } from './routes/mail/flagged/$threadId/index'
+import { Route as MailFlaggedThreadIdMessageIdRouteImport } from './routes/mail/flagged/$threadId/$messageId'
 import { Route as MailOutboxDraftOutboxMessageIdRouteImport } from './routes/mail/outbox/draft/$outboxMessageId'
 
 const IndexRoute = IndexRouteImport.update({
@@ -154,6 +157,11 @@ const MailFlaggedIndexRoute = MailFlaggedIndexRouteImport.update({
   path: '/',
   getParentRoute: () => MailFlaggedRoute,
 } as any)
+const MailFlaggedThreadIdRoute = MailFlaggedThreadIdRouteImport.update({
+  id: '/$threadId',
+  path: '/$threadId',
+  getParentRoute: () => MailFlaggedRoute,
+} as any)
 const MailOutboxIndexRoute = MailOutboxIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -182,6 +190,18 @@ const MailBriefThreadIdMessageIdRoute =
     path: '/$messageId',
     getParentRoute: () => MailBriefThreadIdRoute,
   } as any)
+const MailFlaggedThreadIdIndexRoute =
+  MailFlaggedThreadIdIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => MailFlaggedThreadIdRoute,
+  } as any)
+const MailFlaggedThreadIdMessageIdRoute =
+  MailFlaggedThreadIdMessageIdRouteImport.update({
+    id: '/$messageId',
+    path: '/$messageId',
+    getParentRoute: () => MailFlaggedThreadIdRoute,
+  } as any)
 const MailOutboxDraftOutboxMessageIdRoute =
   MailOutboxDraftOutboxMessageIdRouteImport.update({
     id: '/draft/$outboxMessageId',
@@ -210,15 +230,18 @@ export interface FileRoutesByFullPath {
   '/settings/': typeof SettingsIndexRoute
   '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdRouteWithChildren
   '/mail/brief/$threadId': typeof MailBriefThreadIdRouteWithChildren
+  '/mail/flagged/$threadId': typeof MailFlaggedThreadIdRouteWithChildren
   '/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/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId/': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
+  '/mail/flagged/$threadId/': typeof MailFlaggedThreadIdIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -239,9 +262,11 @@ export interface FileRoutesByTo {
   '/mail/outbox': typeof MailOutboxIndexRoute
   '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId': typeof MailBriefThreadIdIndexRoute
+  '/mail/flagged/$threadId': typeof MailFlaggedThreadIdIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -265,15 +290,18 @@ export interface FileRoutesById {
   '/settings/': typeof SettingsIndexRoute
   '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdRouteWithChildren
   '/mail/brief/$threadId': typeof MailBriefThreadIdRouteWithChildren
+  '/mail/flagged/$threadId': typeof MailFlaggedThreadIdRouteWithChildren
   '/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/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId/': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
+  '/mail/flagged/$threadId/': typeof MailFlaggedThreadIdIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -298,15 +326,18 @@ export interface FileRouteTypes {
     | '/settings/'
     | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
+    | '/mail/flagged/$threadId'
     | '/mail/$mailboxId/'
     | '/mail/brief/'
     | '/mail/flagged/'
     | '/mail/outbox/'
     | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/flagged/$threadId/$messageId'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId/'
     | '/mail/brief/$threadId/'
+    | '/mail/flagged/$threadId/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -327,9 +358,11 @@ export interface FileRouteTypes {
     | '/mail/outbox'
     | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/flagged/$threadId/$messageId'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
+    | '/mail/flagged/$threadId'
   id:
     | '__root__'
     | '/'
@@ -352,15 +385,18 @@ export interface FileRouteTypes {
     | '/settings/'
     | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
+    | '/mail/flagged/$threadId'
     | '/mail/$mailboxId/'
     | '/mail/brief/'
     | '/mail/flagged/'
     | '/mail/outbox/'
     | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/flagged/$threadId/$messageId'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId/'
     | '/mail/brief/$threadId/'
+    | '/mail/flagged/$threadId/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -533,6 +569,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailFlaggedIndexRouteImport
       parentRoute: typeof MailFlaggedRoute
     }
+    '/mail/flagged/$threadId': {
+      id: '/mail/flagged/$threadId'
+      path: '/$threadId'
+      fullPath: '/mail/flagged/$threadId'
+      preLoaderRoute: typeof MailFlaggedThreadIdRouteImport
+      parentRoute: typeof MailFlaggedRoute
+    }
     '/mail/outbox/': {
       id: '/mail/outbox/'
       path: '/'
@@ -568,6 +611,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailBriefThreadIdMessageIdRouteImport
       parentRoute: typeof MailBriefThreadIdRoute
     }
+    '/mail/flagged/$threadId/': {
+      id: '/mail/flagged/$threadId/'
+      path: '/'
+      fullPath: '/mail/flagged/$threadId/'
+      preLoaderRoute: typeof MailFlaggedThreadIdIndexRouteImport
+      parentRoute: typeof MailFlaggedThreadIdRoute
+    }
+    '/mail/flagged/$threadId/$messageId': {
+      id: '/mail/flagged/$threadId/$messageId'
+      path: '/$messageId'
+      fullPath: '/mail/flagged/$threadId/$messageId'
+      preLoaderRoute: typeof MailFlaggedThreadIdMessageIdRouteImport
+      parentRoute: typeof MailFlaggedThreadIdRoute
+    }
     '/mail/outbox/draft/$outboxMessageId': {
       id: '/mail/outbox/draft/$outboxMessageId'
       path: '/draft/$outboxMessageId'
@@ -634,11 +691,26 @@ const MailBriefRouteWithChildren = MailBriefRoute._addFileChildren(
   MailBriefRouteChildren,
 )
 
+interface MailFlaggedThreadIdRouteChildren {
+  MailFlaggedThreadIdMessageIdRoute: typeof MailFlaggedThreadIdMessageIdRoute
+  MailFlaggedThreadIdIndexRoute: typeof MailFlaggedThreadIdIndexRoute
+}
+
+const MailFlaggedThreadIdRouteChildren: MailFlaggedThreadIdRouteChildren = {
+  MailFlaggedThreadIdMessageIdRoute: MailFlaggedThreadIdMessageIdRoute,
+  MailFlaggedThreadIdIndexRoute: MailFlaggedThreadIdIndexRoute,
+}
+
+const MailFlaggedThreadIdRouteWithChildren =
+  MailFlaggedThreadIdRoute._addFileChildren(MailFlaggedThreadIdRouteChildren)
+
 interface MailFlaggedRouteChildren {
+  MailFlaggedThreadIdRoute: typeof MailFlaggedThreadIdRouteWithChildren
   MailFlaggedIndexRoute: typeof MailFlaggedIndexRoute
 }
 
 const MailFlaggedRouteChildren: MailFlaggedRouteChildren = {
+  MailFlaggedThreadIdRoute: MailFlaggedThreadIdRouteWithChildren,
   MailFlaggedIndexRoute: MailFlaggedIndexRoute,
 }
 

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

@@ -0,0 +1,19 @@
+/**
+ * /mail/flagged/$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 { FlaggedPane } from "@/components/mail/FlaggedPane";
+
+function FlaggedMessagePane() {
+	return <FlaggedPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/flagged/$threadId/$messageId")({
+	component: FlaggedMessagePane,
+});

package/src/routes/mail/flagged/$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 { FlaggedPane } from "@/components/mail/FlaggedPane";
+
+function FlaggedThreadPane() {
+	return <FlaggedPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/flagged/$threadId/")({
+	component: FlaggedThreadPane,
+});

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

@@ -0,0 +1,16 @@
+/**
+ * /mail/flagged/$threadId — a conversation open in the flagged list's reading
+ * pane.
+ *
+ * Starred mail spans accounts and folders, and the thread is still the whole
+ * address: the folder its mail is filed in comes from the thread's own data,
+ * since `GET /threads/{threadId}/messages` answers with rows that each name
+ * their mailbox.
+ *
+ * A layout, because the message segment nests under it.
+ */
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/mail/flagged/$threadId")({
+	component: Outlet,
+});

package/src/routes/mail/flagged.tsx

@@ -2,7 +2,9 @@
  * /mail/flagged — the Flagged virtual mailbox, one of the four list layouts.
  *
  * A flat starred list across accounts; same slots as the brief, intelligence
- * rail included.
+ * rail included. The reading pane is the `Outlet`, so what it shows is whatever
+ * route matched below this one, and the open thread and the message inside it
+ * are the segments there rather than a selection read out of the query.
  */
 import {
 	createFileRoute,
@@ -14,6 +16,7 @@ import { FlaggedPane } from "@/components/mail/FlaggedPane";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { flaggedSearchSchema } from "@/lib/mail-search";
+import { useOpenThreadPath } from "@/routing";
 
 const FlaggedError = ({ error, reset }: ErrorComponentProps) => (
 	<div className="flex h-full items-center justify-center bg-canvas p-4">
@@ -26,17 +29,17 @@ const FlaggedError = ({ error, reset }: ErrorComponentProps) => (
 );
 
 function FlaggedLayout() {
-	const { selectedMessageId } = Route.useSearch();
+	const thread = useOpenThreadPath();
 	useSearchMirror({ to: "/mail/flagged" });
 
 	return (
-		<FlaggedPane selectedMessageId={selectedMessageId}>
+		<FlaggedPane thread={thread}>
 			<MailShell
 				phone={<FlaggedPane.Phone />}
 				list={<FlaggedPane.List />}
 				reading={<Outlet />}
 				intelligence={<FlaggedPane.Intelligence />}
-				hasThread={Boolean(selectedMessageId)}
+				hasThread={Boolean(thread)}
 			/>
 		</FlaggedPane>
 	);

package/src/routing/open-thread.ts

@@ -39,6 +39,14 @@ export function useOpenThreadPath(): OpenThreadPath | undefined {
 		from: "/mail/brief/$threadId/$messageId",
 		shouldThrow: false,
 	});
+	const flaggedThread = useParams({
+		from: "/mail/flagged/$threadId",
+		shouldThrow: false,
+	});
+	const flaggedMessage = useParams({
+		from: "/mail/flagged/$threadId/$messageId",
+		shouldThrow: false,
+	});
 	const mailboxThread = useParams({
 		from: "/mail/$mailboxId/$threadId",
 		shouldThrow: false,
@@ -48,8 +56,12 @@ export function useOpenThreadPath(): OpenThreadPath | undefined {
 		shouldThrow: false,
 	});
 
-	const threadId = briefThread?.threadId ?? mailboxThread?.threadId;
-	const messageId = briefMessage?.messageId ?? mailboxMessage?.messageId;
+	const threadId =
+		briefThread?.threadId ?? flaggedThread?.threadId ?? mailboxThread?.threadId;
+	const messageId =
+		briefMessage?.messageId ??
+		flaggedMessage?.messageId ??
+		mailboxMessage?.messageId;
 
 	return useMemo(
 		() => (threadId ? { threadId, messageId } : undefined),