@remit/web-client 0.0.325 → 0.0.327

package/src/routing/search-mirror-convergence.render.test.ts

@@ -1,198 +0,0 @@
-/**
- * The mirror corrects an address that has drifted from the settled query
- * (#808).
- *
- * Typing lands more than one navigation: the debounce settles mid-word, the
- * mirror writes that prefix, and the word is finished while that write is still
- * in flight. The two can commit out of order, and an e2e run caught the result
- * — the field holding `invoice`, the address holding `q=invo`, and neither
- * moving again for the remaining two minutes of the test. The mirror compared
- * against the URL without re-running on it, so a disagreement it had not caused
- * was permanent.
- *
- * Driven through a real router, because the state under test is one only the
- * router can produce: the address is moved out from under a mirror that has
- * already settled, with the field and the committed query left where they were.
- * The re-render is provoked rather than awaited — this harness does not
- * propagate a router store change into React on its own, where the running app
- * renders on every `q` — so what each case actually asks is whether the mirror
- * reconsiders once it renders again.
- */
-
-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, useState } from "react";
-import { MailContext, type MailContextValue } from "@/lib/mail-context";
-import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
-import { createDomHarness, type DomHarness } from "../test-support/dom";
-import { useSearchMirror } from "./search-mirror";
-
-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 LIST_PATH = "/mail/brief";
-const RENDER_AGAIN = "render again";
-
-const mailContext = (input: string, committed: string): MailContextValue => ({
-	accounts: [],
-	mailboxNameIndex: new Map(),
-	accountNameIndex: new Map(),
-	resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
-	searchQuery: committed,
-	searchInput: input,
-	searchViewKey: LIST_PATH,
-	onSearchChange: () => {},
-	onSearchClear: () => {},
-	onSearchClearQuery: () => {},
-	intelligenceOpen: false,
-	onToggleIntelligence: () => {},
-	onRaiseIntelligence: () => {},
-});
-
-/**
- * The brief on its own. Where a correcting write lands, and what it may close
- * under it, is `search-mirror-detail.render.test.ts`'s question; this file asks
- * only whether the address ends up saying the settled query.
- */
-const buildRouter = (href: string): AnyRouter => {
-	const passthrough = (search: Record<string, unknown>) => search;
-	const rootRoute = createRootRoute({ component: Outlet });
-	const mailRoute = createRoute({
-		getParentRoute: () => rootRoute,
-		path: "/mail",
-		validateSearch: passthrough,
-		component: Outlet,
-	});
-	const briefRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: "/brief",
-		validateSearch: passthrough,
-		component: function BriefLayout() {
-			const [renders, setRenders] = useState(0);
-			useSearchMirror({ to: LIST_PATH });
-			return createElement(
-				"div",
-				null,
-				createElement(
-					"button",
-					{
-						type: "button",
-						"aria-label": RENDER_AGAIN,
-						onClick: () => setRenders(renders + 1),
-					},
-					String(renders),
-				),
-				createElement(Outlet),
-			);
-		},
-	});
-	const routeTree = rootRoute.addChildren([
-		mailRoute.addChildren([briefRoute]),
-	]);
-	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;
-};
-
-/**
- * The write that was still in flight, landing after the one that followed it,
- * and then the next render of the list it landed under.
- */
-const driftTo = async (
-	created: DomHarness,
-	router: AnyRouter,
-	q: string | undefined,
-): Promise<void> => {
-	void router.navigate({ to: ".", search: { q }, replace: true });
-	await created.wait(20);
-	created.click(created.byLabel(RENDER_AGAIN));
-	await created.wait(50);
-};
-
-describe("an address that drifts from the settled query", () => {
-	it("is written again, rather than left on the prefix", async () => {
-		const router = buildRouter(`${LIST_PATH}?q=invoice`);
-		const created = await mount(router, "invoice", "invoice");
-		assert.match(router.history.location.search, /q=invoice/);
-
-		await driftTo(created, router, "invo");
-
-		assert.match(
-			router.history.location.search,
-			/q=invoice/,
-			"the mirror never reconsidered the address it had already agreed with",
-		);
-		assert.equal(router.history.location.pathname, LIST_PATH);
-	});
-
-	it("is written again when the query was dropped from it entirely", async () => {
-		const router = buildRouter(`${LIST_PATH}?q=invoice`);
-		const created = await mount(router, "invoice", "invoice");
-
-		await driftTo(created, router, undefined);
-
-		assert.match(router.history.location.search, /q=invoice/);
-	});
-
-	it("leaves an address that already says the settled query alone", async () => {
-		const router = buildRouter(`${LIST_PATH}?q=invoice`);
-		const created = await mount(router, "invoice", "invoice");
-		const before = router.history.length;
-
-		await driftTo(created, router, "invoice");
-
-		assert.match(router.history.location.search, /q=invoice/);
-		assert.equal(router.history.length, before);
-	});
-
-	it("does not fight a query arriving mid-debounce", async () => {
-		// A deep link lands while the field is still catching
-		// up. The committed query is the previous one, so the mirror has nothing
-		// settled to write and must not strip what just arrived.
-		const router = buildRouter(`${LIST_PATH}?q=receipts`);
-		const created = await mount(router, "invoice", "");
-
-		created.click(created.byLabel(RENDER_AGAIN));
-		await created.wait(50);
-
-		assert.match(router.history.location.search, /q=receipts/);
-	});
-});

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

@@ -1,226 +0,0 @@
-/**
- * Where the search mirror writes, now that a list'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 each list's real route shape, because the
- * whole question is what the router resolves a destination to from a thread
- * route under it. Reasoning about `to: "."` is not evidence. The brief and the
- * flagged list share this exact shape — a flat/sectioned list with a
- * `$threadId/$messageId` pair below it — so the two are driven through the
- * same cases rather than one covering for the other.
- */
-
-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 "./search-mirror";
-
-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,
-	searchViewKey: string,
-): MailContextValue => ({
-	accounts: [],
-	mailboxNameIndex: new Map(),
-	accountNameIndex: new Map(),
-	resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
-	searchQuery: committed,
-	searchInput: input,
-	searchViewKey,
-	onSearchChange: () => {},
-	onSearchClear: () => {},
-	onSearchClearQuery: () => {},
-	intelligenceOpen: false,
-	onToggleIntelligence: () => {},
-	onRaiseIntelligence: () => {},
-});
-
-type ListPath = "/mail/brief" | "/mail/flagged";
-
-/**
- * Both lists' 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 = (listPath: ListPath, href: string): AnyRouter => {
-	const listSegment = listPath.slice("/mail".length);
-	const rootRoute = createRootRoute({ component: Outlet });
-	const passthrough = (search: Record<string, unknown>) => search;
-	const mailRoute = createRoute({
-		getParentRoute: () => rootRoute,
-		path: "/mail",
-		validateSearch: passthrough,
-		component: Outlet,
-	});
-	const listRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: listSegment,
-		validateSearch: passthrough,
-		component: () => {
-			useSearchMirror({ to: listPath });
-			return createElement(Outlet);
-		},
-	});
-	const threadRoute = createRoute({
-		getParentRoute: () => listRoute,
-		path: "/$threadId",
-		component: Outlet,
-	});
-	const messageRoute = createRoute({
-		getParentRoute: () => threadRoute,
-		path: "/$messageId",
-		component: () => null,
-	});
-	const routeTree = rootRoute.addChildren([
-		mailRoute.addChildren([
-			listRoute.addChildren([threadRoute.addChildren([messageRoute])]),
-		]),
-	]);
-	return createRouter({
-		routeTree,
-		history: createMemoryHistory({ initialEntries: [href] }),
-	}) as unknown as AnyRouter;
-};
-
-const mount = async (
-	router: AnyRouter,
-	input: string,
-	committed: string,
-	searchViewKey: string,
-): Promise<DomHarness> => {
-	const created = createDomHarness();
-	harness = created;
-	await router.load();
-	created.renderApp(
-		createElement(
-			MailContext.Provider,
-			{ value: mailContext(input, committed, searchViewKey) },
-			createElement(RouterProvider, { router }),
-		),
-	);
-	await created.flush();
-	await created.wait(20);
-	return created;
-};
-
-const LIST_PATHS: ListPath[] = ["/mail/brief", "/mail/flagged"];
-
-for (const listPath of LIST_PATHS) {
-	const threadHref = `${listPath}/${THREAD_ID}/${MESSAGE_ID}`;
-
-	describe(`mirroring a query that goes active (${listPath})`, () => {
-		it("walks up to the list, so no thread stays matched behind the results", async () => {
-			const router = routerAt(listPath, threadHref);
-			await mount(router, "invoice", "invoice", listPath);
-
-			assert.equal(router.history.location.pathname, listPath);
-			assert.match(router.history.location.search, /q=invoice/);
-		});
-
-		it("closes the pane from a bare thread address too", async () => {
-			const router = routerAt(listPath, `${listPath}/${THREAD_ID}`);
-			await mount(router, "invoice", "invoice", listPath);
-
-			assert.equal(router.history.location.pathname, listPath);
-		});
-
-		it("replaces rather than pushes, so Back is not a search step", async () => {
-			const router = routerAt(listPath, threadHref);
-			const before = router.history.length;
-			await mount(router, "invoice", "invoice", listPath);
-
-			assert.equal(router.history.length, before);
-		});
-	});
-
-	describe(`mirroring a cleared query (${listPath})`, () => {
-		it("keeps the conversation open — dropping the search is not closing it", async () => {
-			const router = routerAt(listPath, `${threadHref}?q=invoice`);
-			await mount(router, "", "", listPath);
-
-			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(listPath, `${threadHref}?q=invoice`);
-			await mount(router, "invoice", "invoice", listPath);
-
-			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(listPath, threadHref);
-			await mount(router, "invo", "", listPath);
-
-			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 address the router committed for a real navigation, so the keys
- * under test are the ones path segments produce rather than ids written out
- * here.
- */
-describe("the view key of an open thread", () => {
-	const viewKeyAt = async (
-		listPath: ListPath,
-		href: string,
-	): Promise<string> => {
-		const router = routerAt(listPath, href);
-		await router.load();
-		return mailViewKey(router.state.location.pathname);
-	};
-
-	for (const listPath of LIST_PATHS) {
-		it(`is the list's own, thread and message segments alike (${listPath})`, async () => {
-			const list = await viewKeyAt(listPath, listPath);
-			assert.notEqual(list, "", "the list resolves to a view key at all");
-			assert.equal(await viewKeyAt(listPath, `${listPath}/${THREAD_ID}`), list);
-			assert.equal(
-				await viewKeyAt(listPath, `${listPath}/${THREAD_ID}/${MESSAGE_ID}`),
-				list,
-			);
-		});
-	}
-});

package/src/routing/search-mirror.ts

@@ -1,130 +0,0 @@
-import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { useEffect } from "react";
-import { useMailContext } from "@/lib/mail-context";
-import { addressQuery } from "@/lib/mail-route";
-import { shouldMirrorQuery } from "@/lib/search-view";
-import { useIsComposing } from "./compose";
-import { useIsReplying } from "./reply";
-
-/**
- * The list the mirror writes to. Each list calls the hook with its own route,
- * so the query lands on the list rather than on whatever is open below it.
- */
-export type SearchMirrorTarget =
-	| { to: "/mail/brief" | "/mail/flagged" | "/mail/outbox" }
-	| { to: "/mail/$mailboxId"; params: { mailboxId: string } };
-
-/**
- * Mirrors the settled search into the URL so links are shareable and a refresh
- * restores the query.
- *
- * Within a view this is one-directional — the URL is not read back into state,
- * so there is no sync loop — and it writes only once the debounce agrees with
- * the field, so a query arriving by URL is never overwritten mid-debounce, and
- * the query the user just left behind is never written onto the view they landed
- * on (`shouldMirrorQuery`).
- *
- * It watches the URL as well as the field, so a settled query that the address
- * stops agreeing with is written again rather than left (#808). Typing lands
- * more than one navigation — the debounce settles mid-word, and the word is
- * finished while that write is still in flight — and the two can commit out of
- * order, leaving the address on the prefix. Comparing against the URL without
- * re-running on it made that final: the field said `invoice`, the address said
- * `invo`, and nothing was left to disagree with. Re-running cannot start a
- * loop, because every write makes the URL equal the committed query and the
- * next run has nothing to do. The `q` it compares against is the committed
- * address's, the same place the pathname below comes from: the matched route
- * answers with the outgoing list's query for a render after the address has
- * moved on, and a mirror reading one from each would write against a URL that
- * no longer exists.
- *
- * It also writes only while the reader is still on this list. A list stays
- * mounted, effects and all, until the list they navigated to is ready to paint,
- * and by then the address is already the new one — so a debounce settling in
- * that window would fire a navigation to *this* list, superseding the load in
- * 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 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. 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.
- *
- * A composer is not the pre-search list's leftover either. It is the reader's
- * own unsent message, so a search started while it is up narrows the list
- * behind it and leaves it standing. A reply, a reply-all and a forward hold
- * unsent text the same way and are spared the same way. Both are read off the
- * path, so neither has to be kept in step with the surface that is showing.
- */
-export function useSearchMirror(target: SearchMirrorTarget): void {
-	const navigate = useNavigate();
-	const { searchInput, searchQuery: committedQuery } = useMailContext();
-	const urlQuery = useRouterState({
-		select: (s) => addressQuery(s.location.search),
-	});
-	const pathname = useRouterState({ select: (s) => s.location.pathname });
-	const isComposing = useIsComposing();
-	const isReplying = useIsReplying();
-	const isWriting = isComposing || isReplying;
-
-	const { to } = target;
-	const mailboxId = "params" in target ? target.params.mailboxId : undefined;
-	const listPath = mailboxId ? `/mail/${mailboxId}` : to;
-
-	useEffect(() => {
-		const mayWrite = shouldMirrorQuery({
-			searchInput,
-			committedQuery,
-			urlQuery,
-			pathname,
-			listPath,
-		});
-		if (!mayWrite) return;
-		const queryGoesActive =
-			Boolean(committedQuery) && urlQuery !== committedQuery;
-		// A message being written is the reader's own, not a leftover of the list
-		// they were on, so a query going active narrows the list behind it and
-		// leaves it where it is.
-		const closesTheOpenSurface = queryGoesActive && !isWriting;
-		const search = (prev: Record<string, unknown>) => ({
-			...prev,
-			q: committedQuery || undefined,
-		});
-		// A query is a mode of the view the reader is already in, so the panels
-		// they have up are not ones they navigated away from.
-		if (!closesTheOpenSurface) {
-			navigate({ to: ".", search, hash: true, replace: true });
-			return;
-		}
-		if (to === "/mail/$mailboxId") {
-			if (!mailboxId) return;
-			navigate({
-				to,
-				params: { mailboxId },
-				search,
-				hash: true,
-				replace: true,
-			});
-			return;
-		}
-		navigate({ to, search, hash: true, replace: true });
-	}, [
-		searchInput,
-		committedQuery,
-		urlQuery,
-		navigate,
-		to,
-		mailboxId,
-		listPath,
-		pathname,
-		isWriting,
-	]);
-}

package/src/routing/search-navigation.ts

@@ -1,43 +0,0 @@
-import { useNavigate } from "@tanstack/react-router";
-import { useCallback } from "react";
-
-/**
- * Search everything, carrying the query.
- *
- * "Everything" is the daily brief — the cross-account view whose scope is
- * nothing — so dropping the scope chip is a navigation rather than an edit of
- * the query text: the chip mirrors the route (see `lib/search-scope.ts`), so
- * editing the text would leave the chip up and the list still narrowed.
- */
-export function useSearchEverything(): (query: string) => void {
-	const navigate = useNavigate();
-	return useCallback(
-		(query: string) => {
-			navigate({ to: "/mail/brief", search: { q: query || undefined } });
-		},
-		[navigate],
-	);
-}
-
-/**
- * Narrow the search to one mailbox, carrying the query.
- *
- * The route is the scope, so the offer to look in Spam for what a global search
- * held back goes to Spam rather than rewriting the query with an `in:` term.
- */
-export function useScopeSearchToMailbox(): (
-	mailboxId: string,
-	query: string,
-) => void {
-	const navigate = useNavigate();
-	return useCallback(
-		(mailboxId: string, query: string) => {
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: { q: query || undefined },
-			});
-		},
-		[navigate],
-	);
-}

package/src/routing/sections.ts

@@ -1,55 +0,0 @@
-import { useNavigate } from "@tanstack/react-router";
-import { useCallback } from "react";
-
-/**
- * A top-level destination, as the sidebar and the keyboard name it. These are
- * the moves that leave whatever the reader is on rather than open something
- * under it, so they carry no panels and no query.
- */
-export type AppSection =
-	| "brief"
-	| "flagged"
-	| "outbox"
-	| "settings"
-	| "accounts"
-	| "importConfig";
-
-const sectionRoute = {
-	brief: "/mail/brief",
-	flagged: "/mail/flagged",
-	outbox: "/mail/outbox",
-	settings: "/settings",
-	accounts: "/settings/accounts",
-	importConfig: "/import",
-} as const satisfies Record<AppSection, string>;
-
-/** Go to a top-level section by name, so no caller writes a path. */
-export function useGoToSection(): (section: AppSection) => void {
-	const navigate = useNavigate();
-	return useCallback(
-		(section: AppSection) => {
-			navigate({ to: sectionRoute[section] });
-		},
-		[navigate],
-	);
-}
-
-/**
- * Open one account's settings on its outgoing-mail fields.
- *
- * The account and the field to land on ride the address, so the banner that
- * sends the reader there is not also responsible for telling the settings pane
- * what it was about.
- */
-export function useConfigureAccountSmtp(): (accountId: string) => void {
-	const navigate = useNavigate();
-	return useCallback(
-		(accountId: string) => {
-			navigate({
-				to: "/settings/accounts",
-				search: { editAccountId: accountId, focusSmtp: true },
-			});
-		},
-		[navigate],
-	);
-}