@remit/web-client 0.0.167 → 0.0.169

package/src/components/mail/MailboxPane.tsx

@@ -46,7 +46,6 @@ import {
 	useRef,
 	useState,
 } from "react";
-import type { ComposeMode } from "@/components/compose/ComposeProvider";
 import { Drawer } from "@/components/layout/Drawer";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DraftsView } from "@/components/mail/DraftsView";
@@ -116,8 +115,11 @@ import {
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
+	type ReplyMode,
 	useIsComposing,
+	useIsReplying,
 	useOpenCompose,
+	useOpenReply,
 	useRetainOpenPanels,
 } from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
@@ -199,11 +201,11 @@ interface MailboxPaneContextValue {
 	listCommandsRef: RefObject<MessageListCommands | null>;
 	onRetry: () => void;
 	// Toolbar / reading pane actions
-	toolbarComposeRequest: ComposeMode | null;
-	onToolbarReply: () => void;
-	onToolbarReplyAll: () => void;
-	onToolbarForward: () => void;
-	onClearComposeRequest: () => void;
+	/**
+	 * Answer the open conversation. Absent when none is open, which is what the
+	 * toolbar turns into its own explanation.
+	 */
+	onReply: ((mode: ReplyMode) => void) | undefined;
 	onToolbarDelete: () => void;
 	onToolbarStar: () => void;
 	onToolbarMove: (destMailboxId: string) => void;
@@ -541,19 +543,34 @@ function MailboxPaneProvider({
 
 	const getThreadMessageIds = useThreadMessageIds();
 
-	const { requestCompose: setToolbarComposeRequest } = toolbarActions;
-
-	const handleToolbarReply = useCallback(() => {
-		setToolbarComposeRequest("reply");
-	}, [setToolbarComposeRequest]);
-	const handleToolbarReplyAll = useCallback(() => {
-		setToolbarComposeRequest("reply_all");
-	}, [setToolbarComposeRequest]);
-	const handleToolbarForward = useCallback(() => {
-		setToolbarComposeRequest("forward");
-	}, [setToolbarComposeRequest]);
+	const openReply = useOpenReply();
+
+	// The toolbar answers the conversation on screen; the keyboard answers the
+	// row the cursor is on, which may be one the address has not opened yet. Both
+	// are one navigation, because the mode and the message it answers are
+	// segments of the same address.
+	const replyToOpenThread = useMemo(() => {
+		if (!selectedThread || !selectedMessageId) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: selectedThread.threadId,
+				messageId: selectedMessageId,
+				mode,
+			});
+	}, [openReply, selectedThread, selectedMessageId]);
+
+	const replyToFocusedThread = useMemo(() => {
+		if (!focusedThread) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: focusedThread.threadId,
+				messageId: focusedThread.messageId,
+				mode,
+			});
+	}, [openReply, focusedThread]);
 
 	const isComposing = useIsComposing();
+	const isReplying = useIsReplying();
 	const openCompose = useOpenCompose();
 
 	const messageIdsForFocusedThread = useCallback(
@@ -599,26 +616,18 @@ function MailboxPaneProvider({
 		senderEmail: focusedThread?.fromEmail ?? undefined,
 	});
 
-	const ensureFocusedOpen = useCallback(() => {
-		if (selectedMessageId || !triageFocusedId) return false;
-		const row = threads.find((t) => t.messageId === triageFocusedId);
-		if (!row) return false;
-		handleOpenThread({ threadId: row.threadId, messageId: triageFocusedId });
-		return true;
-	}, [selectedMessageId, triageFocusedId, threads, handleOpenThread]);
-
-	const triageReply = useCallback(() => {
-		if (ensureFocusedOpen()) return;
-		if (selectedThread) setToolbarComposeRequest("reply");
-	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
-	const triageReplyAll = useCallback(() => {
-		if (ensureFocusedOpen()) return;
-		if (selectedThread) setToolbarComposeRequest("reply_all");
-	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
-	const triageForward = useCallback(() => {
-		if (ensureFocusedOpen()) return;
-		if (selectedThread) setToolbarComposeRequest("forward");
-	}, [ensureFocusedOpen, selectedThread, setToolbarComposeRequest]);
+	const triageReply = useCallback(
+		() => replyToFocusedThread?.("reply"),
+		[replyToFocusedThread],
+	);
+	const triageReplyAll = useCallback(
+		() => replyToFocusedThread?.("reply-all"),
+		[replyToFocusedThread],
+	);
+	const triageForward = useCallback(
+		() => replyToFocusedThread?.("forward"),
+		[replyToFocusedThread],
+	);
 
 	const triageTargetMessageIds = useCallback(
 		(): string[] => messageIdsForFocusedThread(focusedThread),
@@ -732,9 +741,10 @@ function MailboxPaneProvider({
 		context: triage,
 		orderedIds: threads.map((t) => t.messageId),
 		selectedMessageId,
-		// The list stays mounted under the compose surface, so the triage keys
-		// would otherwise fire at the message behind whatever is being typed.
-		enabled: !isComposing,
+		// The list stays mounted under both writing surfaces, so the triage keys
+		// would otherwise fire at the message behind whatever is being typed — or
+		// answer a row the cursor moved to while a reply was open.
+		enabled: !isComposing && !isReplying,
 		onClose: closeThread,
 		handlers: {
 			reply: triageReply,
@@ -812,11 +822,7 @@ function MailboxPaneProvider({
 		onTriageContextChange: handleTriageContextChange,
 		listCommandsRef,
 		onRetry: () => refetch(),
-		toolbarComposeRequest: toolbarActions.composeRequest,
-		onToolbarReply: handleToolbarReply,
-		onToolbarReplyAll: handleToolbarReplyAll,
-		onToolbarForward: handleToolbarForward,
-		onClearComposeRequest: toolbarActions.clearComposeRequest,
+		onReply: replyToOpenThread,
 		onToolbarDelete: toolbarActions.deleteThread,
 		onToolbarStar: toolbarActions.toggleStar,
 		onToolbarMove: toolbarActions.moveThread,
@@ -1071,11 +1077,7 @@ function MailboxReading() {
 		conversation,
 		intelligenceOpen,
 		onToggleIntelligence,
-		toolbarComposeRequest,
-		onToolbarReply,
-		onToolbarReplyAll,
-		onToolbarForward,
-		onClearComposeRequest,
+		onReply,
 		onToolbarDelete,
 		onToolbarStar,
 		onToolbarMove,
@@ -1135,8 +1137,6 @@ function MailboxReading() {
 			onOpenIntelligence={
 				conversation.authenticity?.dkimMismatch ? openIntelligence : undefined
 			}
-			composeRequest={toolbarComposeRequest}
-			onComposeClose={onClearComposeRequest}
 		/>
 	) : (
 		<ReadingPaneEmpty />
@@ -1150,9 +1150,9 @@ function MailboxReading() {
 					intelligenceOpen={intelligenceShowing}
 					canToggleIntelligence={hasThread}
 					onToggleIntelligence={toggleIntelligence}
-					onReply={hasThread ? onToolbarReply : undefined}
-					onReplyAll={hasThread ? onToolbarReplyAll : undefined}
-					onForward={hasThread ? onToolbarForward : undefined}
+					onReply={onReply ? () => onReply("reply") : undefined}
+					onReplyAll={onReply ? () => onReply("reply-all") : undefined}
+					onForward={onReply ? () => onReply("forward") : undefined}
 					canDelete={hasThread}
 					onDelete={hasThread ? onToolbarDelete : undefined}
 					onToggleStar={hasThread ? onToolbarStar : undefined}

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

@@ -126,35 +126,55 @@ afterEach(() => {
 // `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 => {
+const MESSAGE_PATH = `/mail/${MAILBOX_ID}/${THREAD_ID}/${MESSAGE_ID}`;
+const REPLY_PATH = `${MESSAGE_PATH}/reply`;
+
+// The conversation is what the message route renders, and the reply is the
+// segment under it — so the tree here is the app's: the folder, the thread, the
+// message, and the mode below it. The address is what opens the reply, so the
+// cases below mount at one or the other.
+const testRouter = (href: string): AnyRouter => {
 	// The compose provider sits at the root the way `__root.tsx` mounts it.
 	const rootRoute = createRootRoute({
 		component: () =>
 			createElement(ComposeProvider, null, createElement(Outlet)),
 	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail/$mailboxId",
+		validateSearch: (search: Record<string, unknown>) => search,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () =>
+			createElement(ConversationView, {
+				threadId: THREAD_ID,
+				mailboxId: MAILBOX_ID,
+				subject: "Lunch Thursday?",
+				selectedMessageId: MESSAGE_ID,
+			}),
+	});
+	const replyRoute = createRoute({
+		getParentRoute: () => messageRoute,
+		path: "$mode/{-$outboxMessageId}",
+	});
 	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?",
-				}),
-		}),
+		mailboxRoute.addChildren([
+			threadRoute.addChildren([messageRoute.addChildren([replyRoute])]),
+		]),
 	]);
 	return createRouter({
 		routeTree,
-		history: createMemoryHistory({ initialEntries: [`/mail/${MAILBOX_ID}`] }),
+		history: createMemoryHistory({ initialEntries: [href] }),
 	}) as unknown as AnyRouter;
 };
 
-const mount = async (): Promise<DomHarness> => {
+const mountAt = async (href: string): Promise<[DomHarness, AnyRouter]> => {
 	http = mockFetch((call) => {
 		if (call.path.endsWith("/config")) return { accounts: [account] };
 		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
@@ -164,17 +184,39 @@ const mount = async (): Promise<DomHarness> => {
 		return { items: [] };
 	});
 
-	const router = testRouter();
+	const router = testRouter(href);
 	await router.load();
 	harness = createDomHarness();
 	harness.renderApp(createElement(RouterProvider, { router }));
 	await harness.flush();
 	await harness.wait(20);
 	await harness.flush();
-	return harness;
+	return [harness, router];
 };
 
-/** The r shortcut the reading pane binds — how a reader opens the reply. */
+/** The conversation, with nothing being written under it. */
+const mount = async (): Promise<DomHarness> => {
+	const [mounted] = await mountAt(MESSAGE_PATH);
+	return mounted;
+};
+
+/**
+ * The same conversation at the address that names a reply — which is the whole
+ * of what opens one.
+ *
+ * A cold load rather than a press: a navigation inside this harness moves the
+ * router but never re-renders the tree, so nothing here can say what the pane
+ * does as an address changes under it. Every case below is what one address
+ * renders, and the transitions between two of them — the reply opening, and its
+ * closing again with the conversation left standing — are asserted in
+ * `packages/e2e/specs/detail-routes.spec.ts`, against a real browser.
+ */
+const mountReplying = async (): Promise<DomHarness> => {
+	const [mounted] = await mountAt(REPLY_PATH);
+	return mounted;
+};
+
+/** The r shortcut the reading pane binds — how a reader asks for the reply. */
 const pressReply = async (mounted: DomHarness): Promise<void> => {
 	mounted.dispatch(
 		mounted.window,
@@ -224,9 +266,7 @@ const verticalScrollers = (root: Element): Element[] =>
 
 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 mounted = await mountReplying();
 
 		const pane = mounted.query("article");
 		assert.ok(pane, "the conversation pane is mounted");
@@ -246,9 +286,7 @@ describe("answering the message that is open", () => {
 	});
 
 	it("leads the pane with the reply, above the thread it answers", async () => {
-		const mounted = await mount();
-
-		await pressReply(mounted);
+		const mounted = await mountReplying();
 
 		const compose = mounted.query('[data-testid="compose-body-area"]');
 		assert.ok(compose, "the reply opened");
@@ -313,7 +351,7 @@ describe("answering the message that is open", () => {
 		);
 	});
 
-	it("gives the pane one scrollbar, reply open or not", async () => {
+	it("gives the pane one scrollbar with nothing being written", async () => {
 		const mounted = await mount();
 
 		const pane = mounted.query("article");
@@ -323,9 +361,13 @@ describe("answering the message that is open", () => {
 			1,
 			"reading a thread scrolls one thing",
 		);
+	});
 
-		await pressReply(mounted);
+	it("gives the pane one scrollbar with the reply open", async () => {
+		const mounted = await mountReplying();
 
+		const pane = mounted.query("article");
+		assert.ok(pane, "the conversation pane is mounted");
 		assert.equal(
 			verticalScrollers(pane).length,
 			1,
@@ -333,6 +375,17 @@ describe("answering the message that is open", () => {
 		);
 	});
 
+	// The address is the whole of what opens a reply, so what the key does is
+	// move it: the mode lands under the message that was open, and the thread
+	// that was matched behind it stays matched.
+	it("moves the address to the reply under the open message", async () => {
+		const [mounted, router] = await mountAt(MESSAGE_PATH);
+
+		await pressReply(mounted);
+
+		assert.equal(router.state.location.pathname, REPLY_PATH);
+	});
+
 	it("collapses the message from the chevron beside the sender", async () => {
 		const mounted = await mount();
 

package/src/hooks/useSearchMirror.ts

@@ -2,7 +2,7 @@ import { useNavigate, useRouterState, useSearch } from "@tanstack/react-router";
 import { useEffect, useRef } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import { shouldMirrorQuery } from "@/lib/search-view";
-import { useIsComposing } from "@/routing";
+import { useIsComposing, useIsReplying } from "@/routing";
 
 /**
  * The list the mirror writes to. Each list calls the hook with its own route,
@@ -44,7 +44,9 @@ export type SearchMirrorTarget =
  *
  * 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.
+ * 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();
@@ -52,6 +54,8 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 	const { q: urlQuery = "" } = useSearch({ from: "/mail" });
 	const pathname = useRouterState({ select: (s) => s.location.pathname });
 	const isComposing = useIsComposing();
+	const isReplying = useIsReplying();
+	const isWriting = isComposing || isReplying;
 
 	// Read at effect time rather than depended on: the URL is what the mirror
 	// compares against, not what re-triggers it.
@@ -73,10 +77,10 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 		if (!mayWrite) return;
 		const queryGoesActive =
 			Boolean(committedQuery) && urlQueryRef.current !== committedQuery;
-		// The composer is the reader's own unsent message, not a leftover of the
-		// list they were on, so a query going active narrows the list behind it and
+		// 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 && !isComposing;
+		const closesTheOpenSurface = queryGoesActive && !isWriting;
 		const search = (prev: Record<string, unknown>) => ({
 			...prev,
 			q: committedQuery || undefined,
@@ -107,6 +111,6 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 		mailboxId,
 		listPath,
 		pathname,
-		isComposing,
+		isWriting,
 	]);
 }

package/src/hooks/useThreadActions.ts

@@ -1,14 +1,16 @@
 /**
  * useThreadActions — the reading pane's verbs for one open thread.
  *
- * Delete, move, star and the compose requests (reply / reply-all / forward),
- * over the same mutation hooks the mailbox list uses. The mailbox view keys
- * them by its route; the brief and Flagged are cross-account, so they key by
- * the open thread's own `mailboxId` / `accountId` (#149).
+ * Delete, move and star, over the same mutation hooks the mailbox list uses.
+ * The mailbox view keys them by its route; the brief and Flagged are
+ * cross-account, so they key by the open thread's own `mailboxId` /
+ * `accountId` (#149).
+ *
+ * Answering a message is not here: reply, reply-all and forward are a segment
+ * under the message, so they are a navigation rather than a verb a pane holds.
  */
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { useCallback, useState } from "react";
-import type { ComposeMode } from "@/components/compose/ComposeProvider";
+import { useCallback } from "react";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useMoveMessages } from "@/hooks/useMoveMessages";
@@ -31,9 +33,6 @@ export interface ThreadActions {
 	deleteThread: () => void;
 	moveThread: (destinationMailboxId: string) => void;
 	toggleStar: () => void;
-	composeRequest: ComposeMode | null;
-	requestCompose: (mode: ComposeMode) => void;
-	clearComposeRequest: () => void;
 }
 
 export const useThreadActions = ({
@@ -91,11 +90,6 @@ export const useThreadActions = ({
 		toggleStarFor(thread.messageId, thread.hasStars);
 	}, [thread, toggleStarFor]);
 
-	const [composeRequest, setComposeRequest] = useState<ComposeMode | null>(
-		null,
-	);
-	const clearComposeRequest = useCallback(() => setComposeRequest(null), []);
-
 	return {
 		mailboxId: resolvedMailboxId,
 		accountId: resolvedAccountId,
@@ -103,8 +97,5 @@ export const useThreadActions = ({
 		deleteThread,
 		moveThread,
 		toggleStar,
-		composeRequest,
-		requestCompose: setComposeRequest,
-		clearComposeRequest,
 	};
 };