@remit/web-client 0.0.149 → 0.0.150

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.149",
+  "version": "0.0.150",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/MailSidebarAdapter.tsx

@@ -244,7 +244,7 @@ export function MailSidebarAdapter({
 			return (
 				<NavLink
 					to="/mail/outbox"
-					search={{ q: undefined, selectedOutboxMessageId: undefined }}
+					search={{ q: undefined }}
 					onClick={() => onClick?.()}
 					className={className}
 					aria-label={ariaLabel}

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/lib/mail-search.ts

@@ -24,9 +24,12 @@ 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(),

package/src/routeTree.gen.ts

@@ -34,6 +34,7 @@ import { Route as MailFlaggedIndexRouteImport } from './routes/mail/flagged/inde
 import { Route as MailOutboxIndexRouteImport } from './routes/mail/outbox/index'
 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: '/',
@@ -161,6 +162,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
@@ -187,6 +194,7 @@ export interface FileRoutesByFullPath {
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRoutesByTo {
@@ -207,6 +215,7 @@ export interface FileRoutesByTo {
   '/mail/flagged': typeof MailFlaggedIndexRoute
   '/mail/outbox': typeof MailOutboxIndexRoute
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/brief/$threadId': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRoutesById {
@@ -235,6 +244,7 @@ export interface FileRoutesById {
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRouteTypes {
@@ -264,6 +274,7 @@ export interface FileRouteTypes {
     | '/mail/flagged/'
     | '/mail/outbox/'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/brief/$threadId/'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -284,6 +295,7 @@ export interface FileRouteTypes {
     | '/mail/flagged'
     | '/mail/outbox'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/brief/$threadId'
   id:
     | '__root__'
@@ -311,6 +323,7 @@ export interface FileRouteTypes {
     | '/mail/flagged/'
     | '/mail/outbox/'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/brief/$threadId/'
   fileRoutesById: FileRoutesById
 }
@@ -498,6 +511,13 @@ 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
+    }
   }
 }
 
@@ -554,10 +574,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/outbox/draft/$outboxMessageId.tsx

@@ -0,0 +1,19 @@
+/**
+ * /mail/outbox/draft/$outboxMessageId — one outbox message open in the
+ * reading pane.
+ *
+ * An outbox message is addressable on its own: it belongs to no thread and no
+ * folder, so the id is the whole address. The `draft/` prefix keeps the id in a
+ * named segment, so the literal siblings the outbox will grow stay
+ * distinguishable from it.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { OutboxPane } from "@/components/mail/OutboxPane";
+
+function OutboxDraftPane() {
+	return <OutboxPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/outbox/draft/$outboxMessageId")({
+	component: OutboxDraftPane,
+});

package/src/routes/mail/outbox.tsx

@@ -1,18 +1,23 @@
 /**
  * /mail/outbox — one of the four list layouts. Two panes, list and reading;
  * there is no intelligence rail for mail that has not been sent yet.
+ *
+ * The open message is the segment below this one, 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 { OutboxPane } from "@/components/mail/OutboxPane";
 import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { outboxSearchSchema } from "@/lib/mail-search";
+import { useOutboxDraftId } from "@/routing";
 
 function OutboxLayout() {
+	const outboxMessageId = useOutboxDraftId();
 	useSearchMirror({ to: "/mail/outbox" });
 
 	return (
-		<OutboxPane>
+		<OutboxPane outboxMessageId={outboxMessageId}>
 			<MailShell
 				phone={<OutboxPane.Phone />}
 				list={<OutboxPane.List />}

package/src/routing/index.ts

@@ -10,3 +10,4 @@ export {
 	useOpenPanel,
 } from "./fragment";
 export { NavLink, type NavLinkProps } from "./nav-link";
+export { useOutboxDraftId } from "./outbox-draft";

package/src/routing/outbox-draft.ts

@@ -0,0 +1,17 @@
+import { useParams } from "@tanstack/react-router";
+
+/**
+ * The outbox message the reader has open, read off the path.
+ *
+ * The message is a child route of the list, and the list layout mounts the
+ * panes above the `Outlet` — so it asks the router which of its children
+ * matched rather than reading a param it does not own. The `from` names a real
+ * route, so a segment that does not exist fails to compile.
+ */
+export function useOutboxDraftId(): string | undefined {
+	const draft = useParams({
+		from: "/mail/outbox/draft/$outboxMessageId",
+		shouldThrow: false,
+	});
+	return draft?.outboxMessageId;
+}