@remit/web-client 0.0.325 → 0.0.326

package/src/routing/outbox-draft.ts

@@ -1,44 +0,0 @@
-import { useNavigate, useParams } from "@tanstack/react-router";
-import { useCallback } from "react";
-import { withoutComposeSeed } from "@/lib/mail-search";
-import { useNavigateToBrowsedList } from "./browsed-list";
-import { useRetainOpenPanels } from "./fragment";
-
-/**
- * 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;
-}
-
-/** Open an outbox message in the reading pane. */
-export function useOpenOutboxDraft(): (outboxMessageId: string) => void {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
-
-	return useCallback(
-		(outboxMessageId: string) => {
-			navigate({
-				to: "/mail/outbox/draft/$outboxMessageId",
-				params: { outboxMessageId },
-				search: withoutComposeSeed,
-				hash: retainPanels,
-			});
-		},
-		[navigate, retainPanels],
-	);
-}
-
-/** Close it again, landing back on the outbox. */
-export function useCloseOutboxDraft(): () => void {
-	return useNavigateToBrowsedList();
-}

package/src/routing/reply.ts

@@ -1,335 +0,0 @@
-import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
-import { useCallback, useMemo } from "react";
-import { z } from "zod";
-import type { MailListRoute } from "@/lib/mail-route";
-import { type ComposeSeed, withoutComposeSeed } from "@/lib/mail-search";
-import { useBrowsedList } from "./browsed-list";
-import { useRetainOpenPanels } from "./fragment";
-
-/**
- * The three ways to answer a message. They are one path param rather than three
- * literal routes, so the reply is one address shape and the mode is a value the
- * composer reads.
- */
-export const replyModes = ["reply", "reply-all", "forward"] as const;
-
-export type ReplyMode = (typeof replyModes)[number];
-
-const replyModeSchema = z.enum(replyModes);
-
-/**
- * The reply route under each list that can have a conversation open. The outbox
- * has no thread segment, so it has no reply either.
- *
- * The draft is an optional segment of the same route rather than a child of it,
- * for the reason `compose/{-$outboxMessageId}` is: the first autosave adopts
- * the id it created while the reader is mid-sentence, and a child route would
- * unmount the composer to record it.
- */
-const BRIEF_REPLY =
-	"/mail/brief/$threadId/$messageId/$mode/{-$outboxMessageId}" as const;
-const FLAGGED_REPLY =
-	"/mail/flagged/$threadId/$messageId/$mode/{-$outboxMessageId}" as const;
-const MAILBOX_REPLY =
-	"/mail/$mailboxId/$threadId/$messageId/$mode/{-$outboxMessageId}" as const;
-
-/** The conversation and the turn inside it that a reply answers. */
-export interface ReplyTarget {
-	threadId: string;
-	messageId: string;
-	mode: ReplyMode;
-}
-
-/**
- * The reply the address names.
- *
- * `unknown` is a hand-typed segment naming no mode. It is a case rather than a
- * throw because the conversation behind it is still open and readable, and the
- * pane says so where the composer would have been.
- */
-export interface ReplyAddress {
-	mode: ReplyMode;
-	threadId: string;
-	/** The message being answered, which is the segment above this one. */
-	sourceMessageId: string;
-	/** The draft it writes to, once the first autosave has made one. */
-	outboxMessageId: string | undefined;
-	seed: ComposeSeed | undefined;
-}
-
-export type ReplySurface =
-	| ({ kind: "reply" } & ReplyAddress)
-	| { kind: "unknown"; segment: string };
-
-interface ReplyParams {
-	threadId: string;
-	messageId: string;
-	mode: string;
-	outboxMessageId?: string;
-}
-
-/**
- * The reply match, if the address has one. Each `from` names a real route, so a
- * segment that does not exist fails to compile.
- *
- * A path matches one list at a time, so at most one of these answers.
- */
-function useReplyParams(): ReplyParams | undefined {
-	const brief = useParams({ from: BRIEF_REPLY, shouldThrow: false });
-	const flagged = useParams({ from: FLAGGED_REPLY, shouldThrow: false });
-	const mailbox = useParams({ from: MAILBOX_REPLY, shouldThrow: false });
-	return brief ?? flagged ?? mailbox;
-}
-
-function useReplySeed(): string | undefined {
-	const brief = useSearch({ from: BRIEF_REPLY, shouldThrow: false });
-	const flagged = useSearch({ from: FLAGGED_REPLY, shouldThrow: false });
-	const mailbox = useSearch({ from: MAILBOX_REPLY, shouldThrow: false });
-	return (brief ?? flagged ?? mailbox)?.body;
-}
-
-const seededSearch =
-	(seed: ComposeSeed | undefined) =>
-	(prev: Record<string, unknown>): Record<string, unknown> =>
-		seed === undefined
-			? withoutComposeSeed(prev)
-			: { ...withoutComposeSeed(prev), body: seed.body };
-
-/**
- * The reply surface the address names, or none.
- *
- * The mode and the message it answers are both segments, so a reply cannot
- * exist without a source and neither fact has a second owner. The draft is the
- * segment under them, so a reload comes back to what was being written instead
- * of starting a second draft beside it.
- */
-export function useReplySurface(): ReplySurface | undefined {
-	const params = useReplyParams();
-	const seedBody = useReplySeed();
-	return useMemo(() => {
-		if (!params) return undefined;
-		const mode = replyModeSchema.safeParse(params.mode);
-		if (!mode.success) return { kind: "unknown", segment: params.mode };
-		return {
-			kind: "reply",
-			mode: mode.data,
-			threadId: params.threadId,
-			sourceMessageId: params.messageId,
-			outboxMessageId: params.outboxMessageId,
-			seed: seedBody === undefined ? undefined : { body: seedBody },
-		};
-	}, [params, seedBody]);
-}
-
-/**
- * Whether a composer is open inside the conversation.
- *
- * The list's keyboard layer suspends on this: with a reply up, r, R and f are
- * the composer's business, and a list still answering them would restart the
- * reply on screen — or aim one at whichever row the cursor happens to be on.
- * A segment naming no mode does not count: there is no composer to protect, and
- * r is then the way out of a hand-typed address.
- */
-export function useIsReplying(): boolean {
-	return useReplySurface()?.kind === "reply";
-}
-
-interface ReplyNavigation {
-	to: typeof BRIEF_REPLY | typeof FLAGGED_REPLY;
-	params: ReplyTarget & { outboxMessageId: string | undefined };
-}
-
-interface MailboxReplyNavigation {
-	to: typeof MAILBOX_REPLY;
-	params: ReplyTarget & {
-		mailboxId: string;
-		outboxMessageId: string | undefined;
-	};
-}
-
-/**
- * Where a reply opens: under the message, in the list the reader is browsing.
- *
- * The brief is the fallback for the reason compose falls back to it — it always
- * exists and always mounts the conversation — so the frame before a folder id
- * resolves opens a composer rather than reporting that it cannot.
- */
-function replyTarget(
-	list: MailListRoute["list"] | undefined,
-	mailboxId: string | undefined,
-	target: ReplyTarget,
-	outboxMessageId: string | undefined,
-): ReplyNavigation | MailboxReplyNavigation {
-	if (list === "flagged")
-		return { to: FLAGGED_REPLY, params: { ...target, outboxMessageId } };
-	if (list === "mailbox" && mailboxId)
-		return {
-			to: MAILBOX_REPLY,
-			params: { ...target, mailboxId, outboxMessageId },
-		};
-	return { to: BRIEF_REPLY, params: { ...target, outboxMessageId } };
-}
-
-/**
- * The draft a new reply address inherits: the one already being written, when
- * the reply on screen answers the same message.
- *
- * Reply All over a reply is the same message being written — the recipients
- * change and the text does not — so the draft segment travels with the mode.
- * Dropping it would say "a different document" to the composer, which blanks
- * the fields and leaves the draft reachable only from the Outbox. A different
- * message is a different reply and inherits nothing.
- */
-function inheritedDraft(
-	open: ReplySurface | undefined,
-	target: ReplyTarget,
-): string | undefined {
-	if (open?.kind !== "reply") return undefined;
-	if (open.threadId !== target.threadId) return undefined;
-	if (open.sourceMessageId !== target.messageId) return undefined;
-	return open.outboxMessageId;
-}
-
-/**
- * Answer a message: the mode and the turn it answers, as one navigation.
- *
- * The message travels with the mode, so replying from a row the address had not
- * named yet opens the conversation on it and the composer over it in the same
- * transition — there is no "open it first, then reply" for the second half to
- * be dropped from.
- *
- * A push, so Back leaves the reply and returns the message it was written
- * under, and the query travels with it.
- */
-export function useOpenReply(): (
-	target: ReplyTarget,
-	seed?: ComposeSeed,
-) => void {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
-	const { list, mailboxId } = useBrowsedList();
-	const open = useReplySurface();
-
-	return useCallback(
-		(target: ReplyTarget, seed?: ComposeSeed) => {
-			navigate({
-				...replyTarget(
-					list,
-					mailboxId,
-					target,
-					seed === undefined ? inheritedDraft(open, target) : undefined,
-				),
-				search: seededSearch(seed),
-				hash: retainPanels,
-			});
-		},
-		[navigate, retainPanels, list, mailboxId, open],
-	);
-}
-
-/**
- * Answer the conversation a list has open, from the segments naming it.
- *
- * The thread and the turn being answered are both in the path, so this is the
- * address answering for itself: a listing row still in flight cannot make the
- * verbs wait, and a thread request that fails outright cannot take them away.
- * Reading the thread id back off a fetched row was the same fact in two places.
- *
- * A plain function rather than a hook, because every list already holds both
- * values and the router state behind them. Reaching for them again here would
- * subscribe each pane to the router a second time, and a pane re-rendering on
- * every address change is felt by everything it wraps.
- *
- * `messageId` is the one thing the address can be silent about — a bare thread
- * address leaves which turn answers for the conversation to the thread, so the
- * caller passes the newest one once it knows. Absent until then, which is the
- * toolbar's to explain.
- */
-export function replyToThread(
-	openReply: (target: ReplyTarget) => void,
-	threadId: string | undefined,
-	messageId: string | undefined,
-): ((mode: ReplyMode) => void) | undefined {
-	if (!threadId || !messageId) return undefined;
-	return (mode: ReplyMode) => openReply({ threadId, messageId, mode });
-}
-
-/**
- * Record the draft the reply just created, in the address.
- *
- * A replace, and every panel left alone: the reader started one message, so the
- * draft arriving under it is neither another step of history nor a move away
- * from what they have open over the conversation.
- */
-export function useAdoptReplyDraft(): (outboxMessageId: string) => void {
-	const navigate = useNavigate();
-	const { list, mailboxId } = useBrowsedList();
-	const surface = useReplySurface();
-
-	return useCallback(
-		(outboxMessageId: string) => {
-			if (surface?.kind !== "reply") return;
-			navigate({
-				...replyTarget(
-					list,
-					mailboxId,
-					{
-						threadId: surface.threadId,
-						messageId: surface.sourceMessageId,
-						mode: surface.mode,
-					},
-					outboxMessageId,
-				),
-				search: seededSearch(undefined),
-				hash: true,
-				replace: true,
-			});
-		},
-		[navigate, list, mailboxId, surface],
-	);
-}
-
-/**
- * Close the reply, landing back on the message it was answering.
- *
- * A push, like opening it: dismissing a surface moves the reader on, and Back
- * is how they undo that. The conversation stayed matched behind the reply, so
- * this drops the segments below it rather than rebuilding an address.
- */
-export function useCloseReply(): () => void {
-	const navigate = useNavigate();
-	const retainPanels = useRetainOpenPanels();
-	const { list, mailboxId } = useBrowsedList();
-	const params = useReplyParams();
-
-	return useCallback(() => {
-		if (!params) return;
-		const search = seededSearch(undefined);
-		const hash = retainPanels;
-		const message = { threadId: params.threadId, messageId: params.messageId };
-		if (list === "flagged") {
-			navigate({
-				to: "/mail/flagged/$threadId/$messageId",
-				params: message,
-				search,
-				hash,
-			});
-			return;
-		}
-		if (list === "mailbox" && mailboxId) {
-			navigate({
-				to: "/mail/$mailboxId/$threadId/$messageId",
-				params: { ...message, mailboxId },
-				search,
-				hash,
-			});
-			return;
-		}
-		navigate({
-			to: "/mail/brief/$threadId/$messageId",
-			params: message,
-			search,
-			hash,
-		});
-	}, [navigate, retainPanels, list, mailboxId, params]);
-}

package/src/routing/search-field.render.test.ts

@@ -1,216 +0,0 @@
-/**
- * A query typed as the reader arrives on a list (#808).
- *
- * Three e2e specs hung their whole timeout on `waitForURL(/q=invoice/)` because
- * the query never reached the address at all. Typing in the window between the
- * router committing the next mailbox and React rendering it put the keystroke
- * and the view change in one render, where the view-change re-seed took the
- * field back to the destination's `q` — empty. The field held nothing, so the
- * mirror had nothing to write, and no later render had any reason to reconsider.
- *
- * Driven through a real router, because the window under test is the router's
- * own: the address commits before the matches swap, and a route the reader has
- * not visited yet has its component to fetch before it can. Reasoning about
- * that from the outside is not evidence, so the mailbox route here loads on a
- * delay the way an unvisited one does.
- *
- * The other half is here too: a query ending with the view it was typed in
- * (#47). That window is the same one, read the other way round — the address
- * has moved and the matches have not — and the field must re-seed from the
- * address rather than from the query the outgoing list still answers with.
- * `lib/search-view.test.ts` drives the rules themselves.
- */
-
-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 { createDomHarness, type DomHarness } from "../test-support/dom";
-import { useSearchField } from "./search-field";
-
-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 FIELD_LABEL = "Search mail";
-const MAILBOX_ID = "9f1c-abc";
-const RENDER_AGAIN = "render again";
-
-/** What the field committed, so a test can assert what the mirror would write. */
-let committed = "";
-
-/**
- * The field, plus a way to make it render on demand. Typing renders it; a
- * navigation on its own does not, because this harness does not propagate a
- * router store change into React the way the running app does — so a test that
- * only navigates is asking nothing.
- */
-function SearchField() {
-	const { searchInput, committedQuery, setSearchInput } = useSearchField();
-	const [renders, setRenders] = useState(0);
-	committed = committedQuery;
-	return createElement(
-		"div",
-		null,
-		createElement("input", {
-			"aria-label": FIELD_LABEL,
-			value: searchInput,
-			onChange: (event: { target: { value: string } }) =>
-				setSearchInput(event.target.value),
-		}),
-		createElement(
-			"button",
-			{
-				type: "button",
-				"aria-label": RENDER_AGAIN,
-				onClick: () => setRenders(renders + 1),
-			},
-			String(renders),
-		),
-	);
-}
-
-/**
- * The mail shell over its four lists. Only the mailbox route loads on a delay:
- * it stands for the list the reader has not been to yet, which is the one they
- * navigate to and then type on.
- */
-const buildRouter = (
-	mailboxLoadMs: number,
-	href = "/mail/brief",
-): AnyRouter => {
-	const passthrough = (search: Record<string, unknown>) => search;
-	const rootRoute = createRootRoute({ component: Outlet });
-	const mailRoute = createRoute({
-		getParentRoute: () => rootRoute,
-		path: "/mail",
-		validateSearch: passthrough,
-		component: () => createElement(SearchField, null),
-	});
-	const briefRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: "/brief",
-		validateSearch: passthrough,
-		component: () => null,
-	});
-	const mailboxRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: "/$mailboxId",
-		validateSearch: passthrough,
-		loader: async () => {
-			await new Promise((resolve) => setTimeout(resolve, mailboxLoadMs));
-			return null;
-		},
-		component: () => null,
-	});
-	const routeTree = rootRoute.addChildren([
-		mailRoute.addChildren([briefRoute, mailboxRoute]),
-	]);
-	return createRouter({
-		routeTree,
-		history: createMemoryHistory({ initialEntries: [href] }),
-	}) as unknown as AnyRouter;
-};
-
-const mount = async (
-	router: AnyRouter,
-): Promise<{ created: DomHarness; field: HTMLInputElement }> => {
-	const created = createDomHarness();
-	harness = created;
-	committed = "";
-	await router.load();
-	created.renderApp(createElement(RouterProvider, { router }));
-	await created.flush();
-	return {
-		created,
-		field: created.byLabel(FIELD_LABEL) as HTMLInputElement,
-	};
-};
-
-/** Long enough for the 200 ms debounce to settle on whatever the field holds. */
-const DEBOUNCE_SETTLED = 400;
-
-const openMailbox = (router: AnyRouter, mailboxId: string): void => {
-	void router.navigate({ to: "/mail/$mailboxId", params: { mailboxId } });
-};
-
-describe("a query the reader left behind on the previous list (#47)", () => {
-	// The sidebar link drops `q`, so the destination's address carries none. The
-	// field is re-seeded from that address and the mirror then has nothing to
-	// write, which is what keeps the query out of the next mailbox's URL.
-	for (const mailboxLoadMs of [0, 300]) {
-		it(`does not follow them into the next list (list ready in ${mailboxLoadMs}ms)`, async () => {
-			const router = buildRouter(mailboxLoadMs, "/mail/brief?q=invoice");
-			const { created, field } = await mount(router);
-			assert.equal(field.value, "invoice");
-
-			openMailbox(router, MAILBOX_ID);
-			await created.wait(10);
-			// The render inside the window the address has moved in and the
-			// matches have not: the outgoing list still answers `q=invoice`, and
-			// re-seeding from it hands the query to the mailbox being opened.
-			created.click(created.byLabel(RENDER_AGAIN));
-			await created.wait(mailboxLoadMs + DEBOUNCE_SETTLED);
-			created.click(created.byLabel(RENDER_AGAIN));
-			await created.wait(DEBOUNCE_SETTLED);
-
-			assert.equal(field.value, "");
-			assert.equal(committed, "");
-		});
-	}
-
-	it("arrives with a query the destination carries", async () => {
-		// The scope chip sends the reader to the brief to search everything, so
-		// the query travels in the address it navigates to and is kept.
-		const router = buildRouter(0, "/mail/9f1c-abc?q=invoice");
-		const { created, field } = await mount(router);
-
-		void router.navigate({ to: "/mail/brief", search: { q: "invoice" } });
-		await created.wait(10);
-		created.click(created.byLabel(RENDER_AGAIN));
-		await created.wait(DEBOUNCE_SETTLED);
-
-		assert.equal(field.value, "invoice");
-		assert.equal(committed, "invoice");
-	});
-});
-
-describe("a query typed as the reader arrives on a mailbox", () => {
-	// The address is already the mailbox — that is what `waitForURL` returns on
-	// — so the text was typed on the mailbox and is the mailbox's query.
-	for (const mailboxLoadMs of [0, 300]) {
-		it(`survives the view change it followed (list ready in ${mailboxLoadMs}ms)`, async () => {
-			const router = buildRouter(mailboxLoadMs);
-			const { created, field } = await mount(router);
-
-			openMailbox(router, MAILBOX_ID);
-			await created.wait(10);
-			assert.equal(
-				router.state.location.pathname,
-				`/mail/${MAILBOX_ID}`,
-				"the address moves before the list is on screen",
-			);
-
-			created.type(field, "invoice");
-			await created.wait(mailboxLoadMs + DEBOUNCE_SETTLED);
-
-			assert.equal(field.value, "invoice");
-			assert.equal(committed, "invoice");
-		});
-	}
-});

package/src/routing/search-field.ts

@@ -1,85 +0,0 @@
-import { useRouter, useRouterState } from "@tanstack/react-router";
-import { useCallback, useState } from "react";
-import { useDebouncedValue } from "@/hooks/useDebouncedValue";
-import { addressQuery, mailViewKey } from "@/lib/mail-route";
-import { committedSearchQuery, searchInputForView } from "@/lib/search-view";
-
-export interface SearchField {
-	/** The live field text, which every search surface binds. */
-	searchInput: string;
-	/** The debounced query the search APIs run and the mirror writes. */
-	committedQuery: string;
-	/** The view the field is searching (`lib/mail-route.ts`). */
-	viewKey: string;
-	/** Every write to the field — typed, cleared, or a chip edited. */
-	setSearchInput: (query: string) => void;
-}
-
-/**
- * The one search field, held by the /mail shell so it outlives every child
- * route, and the query it commits.
- *
- * Within a view the URL's `q` seeds it and is a one-directional write target:
- * the committed value drives the search APIs and each list's `useSearchMirror`
- * writes it back. Across views the URL wins again — search is a mode of the
- * view it was typed in, so leaving that view re-seeds the field from wherever
- * the reader lands (#47), empty when the sidebar dropped `q` and the carried
- * query when the scope chip sent them to the brief to search everything.
- *
- * The re-seed is adjusted during render, not in an effect: React's documented
- * "adjusting state when a prop changes" pattern, so nothing is painted carrying
- * the previous view's text. An effect would commit one frame with the stale
- * query in it, which the mirror then has to be defended against.
- *
- * Text carries the view it was typed in, rather than the field simply taking
- * whatever the last render's view key was (#808). The address moves a render
- * ahead of React — a keystroke and the view change it followed arrive in the
- * same render, and the re-seed cannot tell them apart from what it has on
- * screen. Stamping the view at the keystroke, off the address the router has
- * already committed, says which of the two came second: type into the field
- * once the address names the next mailbox and that text is the new view's, not
- * a leftover of the one being left. Without it a query typed in that window was
- * wiped in the render that followed, and since the field then held nothing the
- * mirror had nothing to write — the query never reached the URL at all.
- *
- * Which view and which query both come off the committed address, never one
- * from the address and the other from the matched route. The matches swap a
- * render behind the address, so mixing the two reads the destination's view
- * against the outgoing list's `q` and re-seeds the field with the query the
- * reader has just navigated away from — the stamp then calls that text the new
- * view's, and nothing reconsiders it (#47).
- */
-export function useSearchField(): SearchField {
-	const router = useRouter();
-	const viewKey = useRouterState({
-		select: (state) => mailViewKey(state.location.pathname),
-	});
-	const urlQuery = useRouterState({
-		select: (state) => addressQuery(state.location.search),
-	});
-
-	const [searchInput, setInput] = useState(urlQuery);
-	const debouncedSearchInput = useDebouncedValue(searchInput, 200);
-
-	const [typedInView, setTypedInView] = useState(viewKey);
-	if (typedInView !== viewKey) {
-		const seeded = searchInputForView(typedInView, viewKey, urlQuery);
-		setTypedInView(viewKey);
-		if (seeded !== undefined) setInput(seeded);
-	}
-
-	const setSearchInput = useCallback(
-		(query: string) => {
-			setTypedInView(mailViewKey(router.state.location.pathname));
-			setInput(query);
-		},
-		[router],
-	);
-
-	return {
-		searchInput,
-		committedQuery: committedSearchQuery(searchInput, debouncedSearchInput),
-		viewKey,
-		setSearchInput,
-	};
-}