@remit/web-client 0.0.166 → 0.0.168

package/src/routing/reply.ts

@@ -0,0 +1,282 @@
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { useCallback, useMemo } from "react";
+import { z } from "zod";
+import type { MailListRoute } from "@/lib/mail-route";
+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;
+}
+
+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;
+}
+
+/**
+ * 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();
+	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,
+		};
+	}, [params]);
+}
+
+/**
+ * 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) => void {
+	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
+	const { list, mailboxId } = useBrowsedList();
+	const open = useReplySurface();
+
+	return useCallback(
+		(target: ReplyTarget) => {
+			navigate({
+				...replyTarget(list, mailboxId, target, inheritedDraft(open, target)),
+				search: (prev: Record<string, unknown>) => prev,
+				hash: retainPanels,
+			});
+		},
+		[navigate, retainPanels, list, mailboxId, open],
+	);
+}
+
+/**
+ * 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: (prev: Record<string, unknown>) => prev,
+				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 = (prev: Record<string, unknown>) => prev;
+		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/components/compose/InlineCompose.tsx

@@ -1,37 +0,0 @@
-import type {
-	RemitImapAccountResponse,
-	RemitImapDescribeMessageResponse,
-} from "@remit/api-http-client/types.gen.ts";
-import { ComposeForm } from "./ComposeForm";
-import type { ComposeMode } from "./ComposeProvider";
-
-interface InlineComposeProps {
-	mode: ComposeMode;
-	account?: RemitImapAccountResponse;
-	sourceMessage?: RemitImapDescribeMessageResponse;
-	onClose: () => void;
-}
-
-/**
- * The reply, as the top block of the conversation it answers. It takes no
- * height of its own: it is as tall as what has been written in it and pushes
- * the thread down as that grows, so the pane keeps the one scrollbar it had
- * before the reply opened. A height here would give the pane a second one, with
- * the caret in the inner track.
- */
-export const InlineCompose = ({
-	mode,
-	account,
-	sourceMessage,
-	onClose,
-}: InlineComposeProps) => (
-	<div className="border-b border-line bg-canvas">
-		<ComposeForm
-			layout="flow"
-			mode={mode}
-			account={account}
-			sourceMessage={sourceMessage}
-			onClose={onClose}
-		/>
-	</div>
-);

package/src/components/compose/compose-clears-open-thread.render.test.ts

@@ -1,312 +0,0 @@
-/**
- * Issue #703: compose state opened with nothing mounting the surface, so the
- * button looked dead and the window turned up on the next navigation.
- */
-
-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, useEffect, useState } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { type HttpMock, mockFetch } from "../../test-support/http";
-import { ComposeProvider, useCompose } from "./ComposeProvider";
-
-let harness: DomHarness | undefined;
-let http: HttpMock | undefined;
-let releaseMailboxes: (() => void) | undefined;
-
-afterEach(() => {
-	releaseMailboxes?.();
-	releaseMailboxes = undefined;
-	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;
-
-const ACCOUNT_ID = "acc-1";
-const INBOX_ID = "mbx-inbox";
-
-const ComposeProbe = () => {
-	const { state, openCompose } = useCompose();
-	return createElement(
-		"button",
-		{
-			type: "button",
-			"data-open": String(state.isOpen),
-			onClick: () => openCompose({ mode: "new" }),
-		},
-		"Compose",
-	);
-};
-
-// The provider sits at the root the way `__root.tsx` mounts it, so navigation
-// reaches it the way it does in the app.
-const RootLayout = () =>
-	createElement(
-		ComposeProvider,
-		null,
-		createElement(ComposeProbe),
-		createElement(Outlet),
-	);
-
-/**
- * The folder's real shape: the thread and the message are segments under the
- * list, so an open conversation is something the address holds and compose has
- * to navigate out of.
- */
-const routerAt = (href: string, layout = RootLayout): AnyRouter => {
-	const rootRoute = createRootRoute({ component: layout });
-	const mailboxRoute = createRoute({
-		getParentRoute: () => rootRoute,
-		path: "/mail/$mailboxId",
-		validateSearch: (search: Record<string, unknown>) => search,
-		component: Outlet,
-	});
-	const threadRoute = createRoute({
-		getParentRoute: () => mailboxRoute,
-		path: "/$threadId",
-		component: Outlet,
-	});
-	const messageRoute = createRoute({
-		getParentRoute: () => threadRoute,
-		path: "/$messageId",
-		component: () => null,
-	});
-	const routeTree = rootRoute.addChildren([
-		createRoute({
-			getParentRoute: () => rootRoute,
-			path: "/mail/outbox",
-			validateSearch: (search: Record<string, unknown>) => search,
-			component: () => null,
-		}),
-		mailboxRoute.addChildren([threadRoute.addChildren([messageRoute])]),
-		createRoute({
-			getParentRoute: () => rootRoute,
-			path: "/settings",
-			component: () => null,
-		}),
-	]);
-	return createRouter({
-		routeTree,
-		history: createMemoryHistory({ initialEntries: [href] }),
-	}) as unknown as AnyRouter;
-};
-
-interface MountOptions {
-	/** Hold the folder list open, so no target has resolved at press time. */
-	holdMailboxes?: boolean;
-	/** Answer with an account that has no folders at all. */
-	noMailboxes?: boolean;
-}
-
-const mount = async (
-	router: AnyRouter,
-	options: MountOptions = {},
-): Promise<DomHarness> => {
-	const held = options.holdMailboxes
-		? new Promise<void>((resolve) => {
-				releaseMailboxes = resolve;
-			})
-		: undefined;
-
-	http = mockFetch(async (call) => {
-		if (call.path.endsWith("/config")) {
-			return {
-				accounts: [
-					{
-						accountId: ACCOUNT_ID,
-						email: "me@example.com",
-						folderAppointments: [{ role: "Inbox", mailboxId: INBOX_ID }],
-					},
-				],
-			};
-		}
-		if (call.path.endsWith("/mailboxes")) {
-			if (held) await held;
-			if (options.noMailboxes) return { items: [] };
-			return { items: [{ mailboxId: INBOX_ID, fullPath: "INBOX" }] };
-		}
-		return {};
-	});
-
-	const created = createDomHarness();
-	harness = created;
-	// Resolve the first match before mounting: `RouterProvider` renders its
-	// pending state until the router has loaded, and nothing here waits for it.
-	await router.load();
-	created.renderApp(createElement(RouterProvider, { router }));
-	await created.flush();
-	await created.wait(20);
-	return created;
-};
-
-const press = async (mounted: DomHarness): Promise<HTMLElement> => {
-	const button = mounted.byText("button", "Compose");
-	mounted.click(button);
-	await mounted.flush();
-	await mounted.wait(20);
-	return button;
-};
-
-const THREAD_HREF = `/mail/${INBOX_ID}/th-1/msg-1`;
-
-describe("opening compose over an open message (#703)", () => {
-	it("walks up to the list so the pane can render the surface", async () => {
-		const router = routerAt(THREAD_HREF);
-		const mounted = await mount(router);
-
-		const button = mounted.byText("button", "Compose");
-		assert.equal(button.getAttribute("data-open"), "false");
-
-		await press(mounted);
-
-		assert.equal(button.getAttribute("data-open"), "true");
-		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
-	});
-
-	it("keeps the query, so the search the user typed survives", async () => {
-		const router = routerAt(`${THREAD_HREF}?q=invoice`);
-		const mounted = await mount(router);
-
-		await press(mounted);
-
-		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
-		assert.match(router.history.location.search, /q=invoice/);
-	});
-
-	it("leaves the message one Back away rather than erasing it", async () => {
-		const router = routerAt(THREAD_HREF);
-		const mounted = await mount(router);
-
-		await press(mounted);
-		router.history.back();
-		await mounted.flush();
-
-		assert.equal(router.history.location.pathname, THREAD_HREF);
-	});
-
-	it("adds no history entry when the pane had nothing open", async () => {
-		const router = routerAt(`/mail/${INBOX_ID}`);
-		const mounted = await mount(router);
-		const entries = router.history.length;
-
-		await press(mounted);
-
-		assert.equal(router.history.length, entries);
-	});
-
-	it("carries a compose started off the outbox to a route that mounts it", async () => {
-		const router = routerAt("/mail/outbox");
-		const mounted = await mount(router);
-
-		const button = await press(mounted);
-
-		assert.equal(button.getAttribute("data-open"), "true");
-		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
-	});
-});
-
-// Walking off the routes that mount the surface closes it. That rule reads the
-// live location, which this harness does not advance — `RouterProvider` here
-// serves its first match and stays there — so it is pinned in the e2e suite
-// (`compose-over-open-message.spec.ts`) instead. What is checked here is the
-// half that would break it: opening compose navigates, and the surface has to
-// survive its own navigation.
-describe("compose survives the navigation that opens it (#703)", () => {
-	it("stays open when the press carried the user to another route", async () => {
-		const router = routerAt("/mail/outbox");
-		const mounted = await mount(router);
-
-		const button = await press(mounted);
-
-		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
-		assert.equal(button.getAttribute("data-open"), "true");
-	});
-});
-
-describe("the open call is stable", () => {
-	// A fresh `openCompose` on every render is a loop, not a nuisance: callers
-	// hold it in dependency arrays, and one of them opens compose from an effect.
-	it("hands back the same function across a re-render", async () => {
-		const identities = new Set<unknown>();
-		const CountingProbe = () => {
-			const { openCompose } = useCompose();
-			const [bumped, setBumped] = useState(0);
-			useEffect(() => {
-				identities.add(openCompose);
-			}, [openCompose]);
-			return createElement(
-				"button",
-				{ type: "button", onClick: () => setBumped(bumped + 1) },
-				`Bump ${bumped}`,
-			);
-		};
-		const CountingLayout = () =>
-			createElement(
-				ComposeProvider,
-				null,
-				createElement(CountingProbe),
-				createElement(Outlet),
-			);
-
-		const mounted = await mount(routerAt(`/mail/${INBOX_ID}`, CountingLayout));
-		// The target legitimately settles as config and the folder list land. What
-		// must not happen is another identity after that, on a render that has
-		// nothing to do with compose.
-		const settled = identities.size;
-
-		mounted.click(mounted.byText("button", "Bump"));
-		await mounted.flush();
-		await mounted.wait(20);
-
-		assert.equal(mounted.byText("button", "Bump").textContent, "Bump 1");
-		assert.equal(identities.size, settled);
-	});
-});
-
-describe("a compose with nowhere to land says so", () => {
-	it("opens nothing and reports it while the folder list is in flight", async () => {
-		const router = routerAt("/mail/outbox");
-		const mounted = await mount(router, { holdMailboxes: true });
-
-		const button = await press(mounted);
-
-		assert.equal(button.getAttribute("data-open"), "false");
-		assert.equal(router.history.location.pathname, "/mail/outbox");
-		assert.match(mounted.text(), /Not ready to write yet/);
-	});
-
-	it("names the fix when no account has a folder", async () => {
-		const router = routerAt("/mail/outbox");
-		const mounted = await mount(router, { noMailboxes: true });
-
-		const button = await press(mounted);
-
-		assert.equal(button.getAttribute("data-open"), "false");
-		assert.match(mounted.text(), /Nowhere to write from/);
-		assert.match(mounted.text(), /Settings/);
-	});
-
-	it("asks the API for nothing off the mail routes", async () => {
-		const router = routerAt("/settings");
-		await mount(router);
-
-		assert.deepEqual(
-			(http?.calls ?? []).map((call) => call.path),
-			[],
-		);
-	});
-});

package/src/hooks/useComposeTargetMailbox.ts

@@ -1,75 +0,0 @@
-/**
- * Where a compose started off a mailbox route has to land.
- *
- * `FullCompose` is mounted by the mailbox route only, so compose started from
- * the daily brief, flagged or the outbox has to carry the user to a mailbox
- * first. The target is the first account's inbox, falling back to its first
- * mailbox.
- */
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { useQueries } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { buildMailboxRoleMap } from "@/lib/folder-roles";
-
-/**
- * The mailbox to land on, or why there is none: a folder list still in flight
- * is a different answer to the user than an account with no folders at all.
- */
-export type ComposeTarget =
-	| { status: "ready"; mailboxId: string }
-	| { status: "loading" }
-	| { status: "none" };
-
-/**
- * Accounts resolve in order and an account whose mailbox query is still in
- * flight blocks rather than being skipped: skipping hands back a later
- * account's inbox and then silently swaps the target once the earlier query
- * settles.
- *
- * The answer is memoised on the two values it is made of. A fresh object every
- * render would rebuild `openCompose` on every render of the provider, and a
- * caller with it in a dependency array then never settles.
- */
-export function useComposeTarget(
-	accounts: RemitImapAccountResponse[],
-): ComposeTarget {
-	const mailboxQueries = useQueries({
-		queries: accounts.map((account) => ({
-			...mailboxOperationsListMailboxesOptions({
-				path: { accountId: account.accountId },
-			}),
-			staleTime: Infinity,
-		})),
-	});
-
-	let status: ComposeTarget["status"] = "none";
-	let readyMailboxId: string | undefined;
-	for (const [index, account] of accounts.entries()) {
-		const query = mailboxQueries[index];
-		if (!query || query.isPending) {
-			status = "loading";
-			break;
-		}
-		const mailboxes = query.data?.items ?? [];
-		if (mailboxes.length === 0) continue;
-		const roleMap = buildMailboxRoleMap(account.folderAppointments);
-		const inbox = mailboxes.find(
-			(mailbox) => roleMap.get(mailbox.mailboxId) === "inbox",
-		);
-		const mailboxId = (inbox ?? mailboxes[0])?.mailboxId;
-		if (mailboxId) {
-			status = "ready";
-			readyMailboxId = mailboxId;
-			break;
-		}
-	}
-
-	return useMemo(
-		() =>
-			status === "ready" && readyMailboxId
-				? { status: "ready", mailboxId: readyMailboxId }
-				: { status: status === "ready" ? "none" : status },
-		[status, readyMailboxId],
-	);
-}