@remit/web-client 0.0.146 → 0.0.148

package/src/components/mail/conversation-reply-reach.render.test.ts

@@ -0,0 +1,223 @@
+/**
+ * Reading a message and answering it, on a desktop pane.
+ *
+ * The inline reply was held below the conversation rather than inside it. It
+ * took whatever height the message left over, which on a normal-length one is
+ * nothing: the recipient rows and the verbs stayed, the writing area went down
+ * to a couple of lines, and scrolling the message could not reach it because
+ * the thing to reach was already on screen and squeezed.
+ *
+ * The reply belongs to the conversation and scrolls with it, and the chevron
+ * beside the sender is the control that puts a message away — reclaiming the
+ * space is what a reader reaches for it to do.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapDescribeMessageResponse,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeAccount, makeThreadMessage } from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { ConversationView } from "./ConversationView";
+
+const ACCOUNT_ID = "acc-1";
+const THREAD_ID = "thread-1";
+const MAILBOX_ID = "mbx-inbox";
+const MESSAGE_ID = "msg-1";
+
+const account = makeAccount({ accountId: ACCOUNT_ID });
+
+const threadMessage: RemitImapThreadMessageResponse = makeThreadMessage({
+	messageId: MESSAGE_ID,
+	threadId: THREAD_ID,
+	mailboxId: MAILBOX_ID,
+	accountId: ACCOUNT_ID,
+	subject: "Lunch Thursday?",
+	fromName: "Ada Lovelace",
+	fromEmail: "ada@example.com",
+	// Already read: marking one read on open is a mutation this test has no
+	// business driving.
+	isRead: true,
+});
+
+const describeMessage: RemitImapDescribeMessageResponse = {
+	message: {
+		messageId: MESSAGE_ID,
+		mailboxId: MAILBOX_ID,
+		uid: 1,
+		rfc822Size: 512,
+		internalDate: 1_767_225_600_000,
+	},
+	envelope: {
+		messageId: MESSAGE_ID,
+		date: 1_767_225_600_000,
+		subject: "Lunch Thursday?",
+		messageIdValue: "<ada-1@example.com>",
+		from: [
+			{
+				addressId: "addr-ada",
+				displayName: "Ada Lovelace",
+				normalizedEmail: "ada@example.com",
+				addressRole: "from",
+				addressOrder: 0,
+			},
+		],
+		to: [
+			{
+				addressId: "addr-me",
+				normalizedEmail: "alice@example.com",
+				addressRole: "to",
+				addressOrder: 0,
+			},
+		],
+		cc: [],
+		bcc: [],
+		replyTo: [],
+		category: "uncategorized",
+		senderTrust: "unknown",
+	},
+	flags: ["\\Seen"],
+	bodyParts: [],
+	references: [],
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+// The conversation is what the mailbox route renders, and the per-message
+// action menu reads the route's own search — so it is mounted on a route
+// rather than beside one.
+const testRouter = (): AnyRouter => {
+	// The compose provider sits at the root the way `__root.tsx` mounts it.
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(ComposeProvider, null, createElement(Outlet)),
+	});
+	const routeTree = rootRoute.addChildren([
+		createRoute({
+			getParentRoute: () => rootRoute,
+			path: "/mail/$mailboxId",
+			validateSearch: (search: Record<string, unknown>) => search,
+			component: () =>
+				createElement(ConversationView, {
+					threadId: THREAD_ID,
+					mailboxId: MAILBOX_ID,
+					subject: "Lunch Thursday?",
+				}),
+		}),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [`/mail/${MAILBOX_ID}`] }),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (): Promise<DomHarness> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: [threadMessage] };
+		}
+		if (call.path.endsWith(`/messages/${MESSAGE_ID}`)) return describeMessage;
+		return { items: [] };
+	});
+
+	const router = testRouter();
+	await router.load();
+	harness = createDomHarness();
+	harness.renderApp(createElement(RouterProvider, { router }));
+	await harness.flush();
+	await harness.wait(20);
+	await harness.flush();
+	return harness;
+};
+
+/** The r shortcut the reading pane binds — how a reader opens the reply. */
+const pressReply = async (mounted: DomHarness): Promise<void> => {
+	mounted.dispatch(
+		mounted.window,
+		new mounted.window.KeyboardEvent("keydown", { key: "r", bubbles: true }),
+	);
+	await mounted.flush();
+	await mounted.wait(20);
+	await mounted.flush();
+};
+
+/**
+ * Which region of the pane a node belongs to — the pane's own child that holds
+ * it. Two nodes in the same region move together; two in different ones are
+ * separate bands of the pane, each with whatever height the other leaves.
+ */
+const paneRegionHolding = (pane: Element, node: Node): Element | null =>
+	[...pane.children].find((child) => child.contains(node)) ?? null;
+
+describe("answering the message that is open", () => {
+	it("puts the reply in the same scrolling region as the message", async () => {
+		const mounted = await mount();
+
+		await pressReply(mounted);
+
+		const pane = mounted.query("article");
+		assert.ok(pane, "the conversation pane is mounted");
+
+		const compose = mounted.query('[data-testid="compose-body-area"]');
+		assert.ok(compose, "the reply opened");
+
+		const message = mounted.query('[data-testid="message-date"]');
+		assert.ok(message, "the message is on screen");
+
+		// Compared as a boolean: an assertion over two DOM nodes serializes the
+		// whole jsdom graph into its failure message.
+		assert.ok(
+			paneRegionHolding(pane, compose) === paneRegionHolding(pane, message),
+			"the reply scrolls with the message instead of sitting in a band below it, where a long message leaves it no height",
+		);
+	});
+
+	it("collapses the message from the chevron beside the sender", async () => {
+		const mounted = await mount();
+
+		assert.ok(
+			mounted.text().includes("ada@example.com"),
+			"the message opens expanded",
+		);
+
+		const collapse = mounted.byLabel("Collapse message");
+		mounted.click(collapse);
+		await mounted.flush();
+
+		assert.ok(
+			mounted.query('[aria-label="Collapse message"]') === null,
+			"the chevron collapsed the message it belongs to",
+		);
+		assert.ok(
+			mounted.query('[role="button"][aria-expanded="false"]'),
+			"the message is back to a collapsed row",
+		);
+	});
+});

package/src/hooks/search-mirror-detail.render.test.ts

@@ -0,0 +1,205 @@
+/**
+ * Where the search mirror writes, now that the brief's open thread is a path
+ * segment (#718).
+ *
+ * Mirroring `q` used to be one navigation with one destination, because the
+ * thread travelled in the query and `...prev` carried it along. It is now two:
+ * a query going active closes the reading pane, and that close is the address
+ * walking up to the list — while every other write has to keep the address it
+ * found, or clearing the search would shut the conversation being read.
+ *
+ * Driven through a real router over the brief's real route shape, because the
+ * whole question is what the router resolves a destination to from a thread
+ * route. Reasoning about `to: "."` is not evidence.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { MailContext, type MailContextValue } from "@/lib/mail-context";
+import { mailViewKey } from "@/lib/mail-route";
+import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
+import { createDomHarness, type DomHarness } from "../test-support/dom";
+import { useSearchMirror } from "./useSearchMirror";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const THREAD_ID = "th-1";
+const MESSAGE_ID = "msg-1";
+
+const mailContext = (input: string, committed: string): MailContextValue => ({
+	accounts: [],
+	mailboxNameIndex: new Map(),
+	accountNameIndex: new Map(),
+	resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
+	searchQuery: committed,
+	searchInput: input,
+	searchViewKey: "/mail/brief",
+	onSearchChange: () => {},
+	onSearchClear: () => {},
+	onSearchClearQuery: () => {},
+	intelligenceOpen: false,
+	onToggleIntelligence: () => {},
+	onSetIntelligenceOpen: () => {},
+});
+
+/**
+ * The brief's shape: the list is a layout route and the thread and message are
+ * segments under it, so a write from the list has a matched child to lose.
+ */
+const routerAt = (href: string): AnyRouter => {
+	const rootRoute = createRootRoute({ component: Outlet });
+	const passthrough = (search: Record<string, unknown>) => search;
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: passthrough,
+		component: Outlet,
+	});
+	const briefRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/brief",
+		validateSearch: passthrough,
+		component: () => {
+			useSearchMirror({ to: "/mail/brief" });
+			return createElement(Outlet);
+		},
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => briefRoute,
+		path: "/$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "/$messageId",
+		component: () => null,
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			briefRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (
+	router: AnyRouter,
+	input: string,
+	committed: string,
+): Promise<DomHarness> => {
+	const created = createDomHarness();
+	harness = created;
+	await router.load();
+	created.renderApp(
+		createElement(
+			MailContext.Provider,
+			{ value: mailContext(input, committed) },
+			createElement(RouterProvider, { router }),
+		),
+	);
+	await created.flush();
+	await created.wait(20);
+	return created;
+};
+
+const threadHref = `/mail/brief/${THREAD_ID}/${MESSAGE_ID}`;
+
+describe("mirroring a query that goes active", () => {
+	it("walks up to the list, so no thread stays matched behind the results", async () => {
+		const router = routerAt(threadHref);
+		await mount(router, "invoice", "invoice");
+
+		assert.equal(router.history.location.pathname, "/mail/brief");
+		assert.match(router.history.location.search, /q=invoice/);
+	});
+
+	it("closes the pane from a bare thread address too", async () => {
+		const router = routerAt(`/mail/brief/${THREAD_ID}`);
+		await mount(router, "invoice", "invoice");
+
+		assert.equal(router.history.location.pathname, "/mail/brief");
+	});
+
+	it("replaces rather than pushes, so Back is not a search step", async () => {
+		const router = routerAt(threadHref);
+		const before = router.history.length;
+		await mount(router, "invoice", "invoice");
+
+		assert.equal(router.history.length, before);
+	});
+});
+
+describe("mirroring a cleared query", () => {
+	it("keeps the conversation open — dropping the search is not closing it", async () => {
+		const router = routerAt(`${threadHref}?q=invoice`);
+		await mount(router, "", "");
+
+		assert.equal(router.history.location.pathname, threadHref);
+		assert.equal(router.history.location.search.includes("q="), false);
+	});
+
+	it("leaves the address alone when there is nothing to write", async () => {
+		const router = routerAt(`${threadHref}?q=invoice`);
+		await mount(router, "invoice", "invoice");
+
+		assert.equal(router.history.location.pathname, threadHref);
+		assert.match(router.history.location.search, /q=invoice/);
+	});
+
+	it("waits for the debounce rather than writing the previous query", async () => {
+		const router = routerAt(threadHref);
+		await mount(router, "invo", "");
+
+		assert.equal(router.history.location.pathname, threadHref);
+		assert.equal(router.history.location.search.includes("q="), false);
+	});
+});
+
+/**
+ * The other half of why a typed query survives an opened thread: the field
+ * re-seeds on a view change, so the view key of the list and of the thread route
+ * under it must be equal.
+ *
+ * Read off the matches the router resolved for a real address, so the ids under
+ * test are the ones path segments produce rather than ids written out here.
+ */
+describe("the view key of an open brief thread", () => {
+	const viewKeyAt = async (href: string): Promise<string> => {
+		const router = routerAt(href);
+		await router.load();
+		return mailViewKey(
+			router.state.matches.map((match: { routeId: string }) => ({
+				routeId: match.routeId,
+			})),
+		);
+	};
+
+	it("is the brief's own, thread and message segments alike", async () => {
+		const list = await viewKeyAt("/mail/brief");
+		assert.notEqual(list, "", "the brief resolves to a view key at all");
+		assert.equal(await viewKeyAt(`/mail/brief/${THREAD_ID}`), list);
+		assert.equal(await viewKeyAt(threadHref), list);
+	});
+});

package/src/hooks/useSearchMirror.ts

@@ -28,14 +28,19 @@ export type SearchMirrorTarget =
  * flight and replacing the entry the reader had just pushed. They would click
  * Inbox and land back on the brief.
  *
- * When a query *goes* active it also strips the selection so the reading pane
- * closes (#539): an open message from the pre-search list is not meaningful in
- * the search result set. Only on that transition though — tapping a search
- * result commits the same `q` with the selection, so when `prev.q` already
- * equals the query the result was opened under it (not a pre-search leftover)
- * and must survive. The strip otherwise raced the tap: the row shows before the
- * debounce settles, so this mirror can land just after the open and close it
- * again.
+ * 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.
+ *
+ * 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
+ * was opened under it (not a pre-search leftover) and must survive. The close
+ * otherwise raced the tap: the row shows before the debounce settles, so this
+ * mirror can land just after the open and undo it.
  */
 export function useSearchMirror(target: SearchMirrorTarget): void {
 	const navigate = useNavigate();
@@ -61,20 +66,23 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 			listPath,
 		});
 		if (!mayWrite) return;
-		const search = (prev: Record<string, unknown>) => {
-			const queryAlreadyActive = prev.q === committedQuery;
-			return {
-				...prev,
-				q: committedQuery || undefined,
-				...(committedQuery && !queryAlreadyActive
-					? {
-							selectedMessageId: undefined,
-							selectedThreadId: undefined,
-							selectedMailboxId: undefined,
-						}
-					: {}),
-			};
-		};
+		const queryGoesActive =
+			Boolean(committedQuery) && urlQueryRef.current !== committedQuery;
+		const search = (prev: Record<string, unknown>) => ({
+			...prev,
+			q: committedQuery || undefined,
+			...(queryGoesActive
+				? {
+						selectedMessageId: undefined,
+						selectedThreadId: undefined,
+						selectedMailboxId: undefined,
+					}
+				: {}),
+		});
+		if (!queryGoesActive) {
+			navigate({ to: ".", search, replace: true });
+			return;
+		}
 		if (to === "/mail/$mailboxId") {
 			if (!mailboxId) return;
 			navigate({ to, params: { mailboxId }, search, replace: true });

package/src/hooks/useSearchScope.ts

@@ -39,7 +39,7 @@ export function useSearchScope(accounts: RemitImapAccountResponse[]): {
 			if (chipId !== SEARCH_SCOPE_CHIP_ID) return;
 			navigate({
 				to: "/mail/brief",
-				search: { q: searchInput || undefined, selectedMessageId: undefined },
+				search: { q: searchInput || undefined },
 			});
 		},
 		[navigate, searchInput],

package/src/hooks/useThreadRow.ts

@@ -0,0 +1,35 @@
+import { threadDetailOperationsListThreadMessagesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+
+/**
+ * A thread's own row for the message the reader pointed at.
+ *
+ * This is how a conversation answers for itself when no list holds it — a
+ * cross-folder search hit, or an address pasted into a fresh tab.
+ * `GET /threads/{threadId}/messages` returns the same row shape a listing does,
+ * `mailboxId` included, so the thread id is the whole address even though the
+ * mail is filed in some folder. The reading pane already makes that request, so
+ * this resolves off the same cache entry rather than a round trip of its own.
+ *
+ * A thread spans folders — the reader's own reply sits in Sent — so `messageId`
+ * picks the row they pointed at. With none, the newest message answers.
+ */
+export const useThreadRow = (
+	threadId: string | undefined,
+	messageId: string | undefined,
+): RemitImapThreadMessageResponse | undefined => {
+	const { data } = useQuery({
+		...threadDetailOperationsListThreadMessagesOptions({
+			path: { threadId: threadId ?? "" },
+		}),
+		enabled: Boolean(threadId),
+	});
+
+	const items = data?.items ?? [];
+	const pointedAt = messageId
+		? items.find((item) => item.messageId === messageId)
+		: undefined;
+	const newest = items.length > 0 ? items[items.length - 1] : undefined;
+	return pointedAt ?? newest;
+};

package/src/lib/mail-route.test.ts

@@ -20,6 +20,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import {
 	locationIsOnList,
+	locationOpensDetail,
 	MAIL_BRIEF_ROUTE_ID,
 	MAIL_FLAGGED_ROUTE_ID,
 	MAIL_MAILBOX_ROUTE_ID,
@@ -178,3 +179,28 @@ describe("locationIsOnList", () => {
 		assert.equal(locationIsOnList("/mail/outbox-2024", "/mail/outbox"), false);
 	});
 });
+
+/**
+ * What "a thread is open" used to be asked of the query. Everything sharing the
+ * single pane with the conversation reads it from the address instead.
+ */
+describe("locationOpensDetail", () => {
+	it("is true for a thread and for the message inside it", () => {
+		assert.equal(locationOpensDetail("/mail/brief/thread-1"), true);
+		assert.equal(locationOpensDetail("/mail/brief/thread-1/message-1"), true);
+		assert.equal(locationOpensDetail("/mail/inbox-1/thread-1"), true);
+	});
+
+	it("is false on a bare list, trailing slash and query included", () => {
+		assert.equal(locationOpensDetail("/mail/brief"), false);
+		assert.equal(locationOpensDetail("/mail/brief/"), false);
+		assert.equal(locationOpensDetail("/mail/brief?q=invoice"), false);
+		assert.equal(locationOpensDetail("/mail/inbox-1"), false);
+		assert.equal(locationOpensDetail("/mail"), false);
+	});
+
+	it("is false outside the mail shell", () => {
+		assert.equal(locationOpensDetail("/settings/accounts"), false);
+		assert.equal(locationOpensDetail("/onboarding"), false);
+	});
+});

package/src/lib/mail-route.ts

@@ -92,3 +92,16 @@ export function locationIsOnList(pathname: string, listPath: string): boolean {
 	if (pathname === listPath) return true;
 	return pathname.startsWith(`${listPath}/`);
 }
+
+/**
+ * Whether the address names something the list has open below it — a thread, a
+ * message. A list on its own, and its bare reading pane, do not.
+ *
+ * Answers what an open thread used to be asked of the query. Anything sharing
+ * the single pane with the conversation reads it from here rather than keeping a
+ * second opinion about what is on screen.
+ */
+export function locationOpensDetail(pathname: string): boolean {
+	const segments = pathname.split(/[?#]/)[0].split("/").filter(Boolean);
+	return segments[0] === "mail" && segments.length > 2;
+}

package/src/lib/mail-search.ts

@@ -12,13 +12,13 @@ import { z } from "zod";
 /** What every list carries, whatever else it carries. */
 const listSearch = z.object({ q: z.string().optional() });
 
-export const briefSearchSchema = listSearch.extend({
-	selectedMessageId: z.string().optional(),
-	// A tapped semantic "Related" hit can point at a message outside the loaded
-	// brief list; carrying its thread + mailbox lets the brief open it directly.
-	selectedThreadId: z.string().optional(),
-	selectedMailboxId: 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.
+ */
+export const briefSearchSchema = listSearch.extend({});
 
 export const flaggedSearchSchema = listSearch.extend({
 	selectedMessageId: z.string().optional(),