@remit/web-client 0.0.149 → 0.0.151

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/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

@@ -1,8 +1,3 @@
-export {
-	type BriefThreadPath,
-	type BriefThreadTarget,
-	useBriefThreadPath,
-} from "./brief-thread";
 export {
 	type PanelFragment,
 	panelFragments,
@@ -10,3 +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";

package/src/routing/open-thread.ts

@@ -0,0 +1,58 @@
+import { useParams } from "@tanstack/react-router";
+import { useMemo } from "react";
+
+/** The conversation a list has open, as the address states it. */
+export interface OpenThreadPath {
+	threadId: string;
+	/**
+	 * Which message inside the thread is expanded and scrolled to. Absent on a
+	 * bare thread address, where the newest message answers for the conversation.
+	 */
+	messageId: string | undefined;
+}
+
+/**
+ * A conversation to open. The thread is what the pane fetches by; the message is
+ * the row the reader pointed at, so a list always knows both.
+ */
+export interface OpenThreadTarget {
+	threadId: string;
+	messageId: string;
+}
+
+/**
+ * The thread the address has open, whichever list is browsing it.
+ *
+ * The thread is a child route of the list, and the list layout mounts the pane
+ * above the `Outlet` — so it asks the router which of its children matched
+ * rather than reading a param it does not own. A path matches one list at a
+ * time, so one hook answers for every list rather than each list keeping its
+ * own copy of the same question. Each `from` names a real route, so a segment
+ * that does not exist fails to compile.
+ */
+export function useOpenThreadPath(): OpenThreadPath | undefined {
+	const briefThread = useParams({
+		from: "/mail/brief/$threadId",
+		shouldThrow: false,
+	});
+	const briefMessage = useParams({
+		from: "/mail/brief/$threadId/$messageId",
+		shouldThrow: false,
+	});
+	const mailboxThread = useParams({
+		from: "/mail/$mailboxId/$threadId",
+		shouldThrow: false,
+	});
+	const mailboxMessage = useParams({
+		from: "/mail/$mailboxId/$threadId/$messageId",
+		shouldThrow: false,
+	});
+
+	const threadId = briefThread?.threadId ?? mailboxThread?.threadId;
+	const messageId = briefMessage?.messageId ?? mailboxMessage?.messageId;
+
+	return useMemo(
+		() => (threadId ? { threadId, messageId } : undefined),
+		[threadId, messageId],
+	);
+}

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

package/src/lib/conversation-target.test.ts

@@ -1,68 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, test } from "node:test";
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { buildConversationTarget } from "./conversation-target.js";
-
-function thread(
-	overrides: Partial<RemitImapThreadMessageResponse> = {},
-): RemitImapThreadMessageResponse {
-	return {
-		messageId: "m1",
-		threadId: "t1",
-		mailboxId: "mb1",
-		subject: "Loaded subject",
-		isRead: false,
-		...overrides,
-	} as RemitImapThreadMessageResponse;
-}
-
-describe("buildConversationTarget", () => {
-	test("prefers the loaded thread, carrying its display fields", () => {
-		const authenticity = { dkimMismatch: true, fromDomain: "example.com" };
-		const target = buildConversationTarget(thread({ authenticity }), {
-			messageId: "m1",
-			threadId: "ignored",
-			mailboxId: "ignored",
-		});
-		assert.deepEqual(target, {
-			threadId: "t1",
-			mailboxId: "mb1",
-			subject: "Loaded subject",
-			messageId: "m1",
-			authenticity,
-		});
-	});
-
-	// The bug: a tapped semantic "Related" hit's message isn't in the loaded list,
-	// so there is no thread to resolve — it must still open from the URL hints.
-	test("falls back to the URL thread + mailbox when no thread is loaded", () => {
-		const target = buildConversationTarget(undefined, {
-			messageId: "m9",
-			threadId: "t9",
-			mailboxId: "mb9",
-		});
-		assert.deepEqual(target, {
-			threadId: "t9",
-			mailboxId: "mb9",
-			messageId: "m9",
-		});
-	});
-
-	test("returns undefined when the message is cleared (Back pressed)", () => {
-		const target = buildConversationTarget(undefined, {
-			messageId: undefined,
-			threadId: "t9",
-			mailboxId: "mb9",
-		});
-		assert.equal(target, undefined);
-	});
-
-	test("returns undefined without a threadId to open", () => {
-		const target = buildConversationTarget(undefined, {
-			messageId: "m9",
-			threadId: undefined,
-			mailboxId: "mb9",
-		});
-		assert.equal(target, undefined);
-	});
-});

package/src/lib/search-pending.test.ts

@@ -1,99 +0,0 @@
-// Regression test for #623: search results must be openable once the query
-// settles. The route computes `isSearchPending = searchInput !== searchQuery`
-// to decide whether to suppress the reading pane, then resolves the selected
-// thread via `resolveSelectedThread`.
-//
-// - `searchInput` is the live (pre-debounce) value the user is typing.
-// - `searchQuery` is the debounced (committed) value sent to the API.
-// - The pane is suppressed only while the two differ (a debounce is in flight).
-// - Once settled, a selected result should be shown in the reading pane.
-
-import assert from "node:assert";
-import { describe, test } from "node:test";
-import {
-	isSearchPending,
-	resolveOpenThread,
-	resolveSelectedThread,
-} from "./search-pending.ts";
-
-describe("isSearchPending (reading-pane suppression guard)", () => {
-	test("no search: both empty — not pending", () => {
-		assert.equal(isSearchPending("", ""), false);
-	});
-
-	test("settled search: input matches debounced query — not pending", () => {
-		assert.equal(isSearchPending("amazon", "amazon"), false);
-	});
-
-	test("user starts typing: input differs from query — pending", () => {
-		assert.equal(isSearchPending("ama", ""), true);
-	});
-
-	test("mid-debounce: partial input vs previous query — pending", () => {
-		assert.equal(isSearchPending("amaz", "amazon"), true);
-	});
-});
-
-describe("resolveSelectedThread (#623 reading-pane resolution)", () => {
-	const threads = [{ messageId: "msg-001" }, { messageId: "msg-002" }];
-
-	test("regression #623: settled query with a matching selection opens the thread", () => {
-		const pending = isSearchPending("amazon", "amazon");
-		assert.equal(pending, false);
-
-		const selectedThread = resolveSelectedThread(threads, "msg-001", pending);
-		assert.deepEqual(selectedThread, { messageId: "msg-001" });
-	});
-
-	test("pending search suppresses the reading pane even with a matching selection", () => {
-		const pending = isSearchPending("amaz", "amazon");
-		assert.equal(pending, true);
-
-		const selectedThread = resolveSelectedThread(threads, "msg-001", pending);
-		assert.equal(selectedThread, undefined);
-	});
-
-	test("settled query but selection absent from results — no thread", () => {
-		const selectedThread = resolveSelectedThread(threads, "msg-999", false);
-		assert.equal(selectedThread, undefined);
-	});
-
-	test("settled query with no selection — no thread", () => {
-		const selectedThread = resolveSelectedThread(threads, undefined, false);
-		assert.equal(selectedThread, undefined);
-	});
-});
-
-describe("resolveOpenThread (#306 filtered list)", () => {
-	const listed = { messageId: "msg-001", subject: "listed" };
-	const snapshot = { messageId: "msg-001", subject: "snapshot" };
-
-	test("prefers the row the list returned", () => {
-		assert.equal(resolveOpenThread(listed, snapshot, "msg-001", false), listed);
-	});
-
-	test("keeps the open thread when a filter pages it out of the list", () => {
-		assert.equal(
-			resolveOpenThread(undefined, snapshot, "msg-001", false),
-			snapshot,
-		);
-	});
-
-	test("drops a snapshot of a message that is no longer selected", () => {
-		assert.equal(
-			resolveOpenThread(undefined, snapshot, "msg-002", false),
-			undefined,
-		);
-		assert.equal(
-			resolveOpenThread(undefined, snapshot, undefined, false),
-			undefined,
-		);
-	});
-
-	test("a pending search still closes the pane (#539)", () => {
-		assert.equal(
-			resolveOpenThread(undefined, snapshot, "msg-001", true),
-			undefined,
-		);
-	});
-});

package/src/lib/search-pending.ts

@@ -1,49 +0,0 @@
-// Reading-pane suppression guard for the mail search bar (#539, #623).
-//
-// `searchInput` is the live (pre-debounce) value the user is typing;
-// `searchQuery` is the debounced (committed) value sent to the API. A debounce
-// is in flight whenever the two differ — during that window the reading pane is
-// kept closed so it clears the instant a new search starts (#539). Once the
-// query settles, a selected result is honored so search results can be opened
-// (#623).
-export const isSearchPending = (
-	searchInput: string,
-	searchQuery: string,
-): boolean => searchInput !== searchQuery;
-
-// Resolve the thread to show in the reading pane. Returns `undefined` while a
-// search debounce is pending or when nothing is selected; otherwise looks the
-// selected message up in the loaded thread list.
-export const resolveSelectedThread = <T extends { messageId: string }>(
-	threads: T[],
-	selectedMessageId: string | undefined,
-	pending: boolean,
-): T | undefined => {
-	if (pending || !selectedMessageId) return undefined;
-	return threads.find((t) => t.messageId === selectedMessageId);
-};
-
-/**
- * The thread the reading pane shows, once the list is a server-side query
- * (#306).
- *
- * The list used to hold every loaded row and filter a copy, so an open thread
- * could always be found again in the unfiltered set. A filtered list is now the
- * server's answer to one predicate, and a chip the open message does not match
- * pages it out — so what the user opened is kept as a snapshot and answers for
- * itself until they open something else. That is a derivation over the user's
- * own selection, which stays on this side of the boundary.
- *
- * The snapshot is ignored while a search debounce is pending, so the pane still
- * clears the instant a new search starts (#539).
- */
-export const resolveOpenThread = <T extends { messageId: string }>(
-	listed: T | undefined,
-	opened: T | undefined,
-	selectedMessageId: string | undefined,
-	pending: boolean,
-): T | undefined => {
-	if (listed) return listed;
-	if (pending || !selectedMessageId) return undefined;
-	return opened?.messageId === selectedMessageId ? opened : undefined;
-};

package/src/routing/brief-thread.ts

@@ -1,47 +0,0 @@
-import { useParams } from "@tanstack/react-router";
-import { useMemo } from "react";
-
-/** The conversation the brief has open, as the address states it. */
-export interface BriefThreadPath {
-	threadId: string;
-	/**
-	 * Which message inside the thread is expanded and scrolled to. Absent on a
-	 * bare thread address, where the newest message answers for the conversation.
-	 */
-	messageId: string | undefined;
-}
-
-/**
- * A conversation to open. The thread is what the pane fetches by; the message is
- * the row the reader pointed at, so a list always knows both.
- */
-export interface BriefThreadTarget {
-	threadId: string;
-	messageId: string;
-}
-
-/**
- * The thread the brief has open, read off the path.
- *
- * The thread is a child route of the list, and the list layout mounts the pane
- * above the `Outlet` — so it asks the router which of its children matched
- * rather than reading a param it does not own. Each `from` names a real route,
- * so a segment that does not exist fails to compile.
- */
-export function useBriefThreadPath(): BriefThreadPath | undefined {
-	const thread = useParams({
-		from: "/mail/brief/$threadId",
-		shouldThrow: false,
-	});
-	const message = useParams({
-		from: "/mail/brief/$threadId/$messageId",
-		shouldThrow: false,
-	});
-	const threadId = thread?.threadId;
-	const messageId = message?.messageId;
-
-	return useMemo(
-		() => (threadId ? { threadId, messageId } : undefined),
-		[threadId, messageId],
-	);
-}