@remit/web-client 0.0.170 → 0.0.171

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.170",
+  "version": "0.0.171",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/BriefPane.tsx

@@ -45,6 +45,7 @@ import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
 	type ReplyMode,
+	replyToThread,
 	useIsComposing,
 	useIsReplying,
 	useOpenReply,
@@ -221,15 +222,10 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 	const isComposing = useIsComposing();
 	const isReplying = useIsReplying();
 	const openReply = useOpenReply();
-	const replyToOpenThread = useMemo(() => {
-		if (!selectedThread || !selectedMessageId) return undefined;
-		return (mode: ReplyMode) =>
-			openReply({
-				threadId: selectedThread.threadId,
-				messageId: selectedMessageId,
-				mode,
-			});
-	}, [openReply, selectedThread, selectedMessageId]);
+	const replyToOpenThread = useMemo(
+		() => replyToThread(openReply, threadId, selectedMessageId),
+		[openReply, threadId, selectedMessageId],
+	);
 
 	const replyToFocusedThread = useMemo(() => {
 		if (!triageTarget) return undefined;

package/src/components/mail/ConversationView.tsx

@@ -303,11 +303,19 @@ export const ConversationView = ({
 		return <LoadingSkeleton />;
 	}
 
+	// A reply addressed over a conversation that never arrived says why the
+	// composer is not there, rather than repeating the read failure unchanged —
+	// otherwise pressing Reply on a failed thread changes the address and nothing
+	// on screen, which is the shape of a broken button.
 	if (isError) {
 		return (
 			<div className="flex h-full items-center justify-center">
 				<ErrorState
-					title="Couldn't load this conversation"
+					title={
+						reply
+							? "Couldn't load this conversation, so there is nothing to answer"
+							: "Couldn't load this conversation"
+					}
 					error={error}
 					onRetry={() => refetch()}
 				/>

package/src/components/mail/FlaggedPane.tsx

@@ -56,6 +56,7 @@ import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
 	type ReplyMode,
+	replyToThread,
 	useIsComposing,
 	useIsReplying,
 	useOpenReply,
@@ -227,15 +228,10 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 	const isComposing = useIsComposing();
 	const isReplying = useIsReplying();
 	const openReply = useOpenReply();
-	const replyToOpenThread = useMemo(() => {
-		if (!selectedThread || !selectedMessageId) return undefined;
-		return (mode: ReplyMode) =>
-			openReply({
-				threadId: selectedThread.threadId,
-				messageId: selectedMessageId,
-				mode,
-			});
-	}, [openReply, selectedThread, selectedMessageId]);
+	const replyToOpenThread = useMemo(
+		() => replyToThread(openReply, threadId, selectedMessageId),
+		[openReply, threadId, selectedMessageId],
+	);
 
 	const replyToFocusedThread = useMemo(() => {
 		if (!triageTarget) return undefined;

package/src/components/mail/MailboxPane.tsx

@@ -116,6 +116,7 @@ import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
 	type ReplyMode,
+	replyToThread,
 	useIsComposing,
 	useIsReplying,
 	useOpenCompose,
@@ -549,15 +550,10 @@ function MailboxPaneProvider({
 	// 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 replyToOpenThread = useMemo(
+		() => replyToThread(openReply, threadId, selectedMessageId),
+		[openReply, threadId, selectedMessageId],
+	);
 
 	const replyToFocusedThread = useMemo(() => {
 		if (!focusedThread) return undefined;

package/src/components/mail/MessageToolbar.tsx

@@ -63,6 +63,14 @@ export interface MessageToolbarProps {
 
 const OPEN_FIRST = "Open a message first";
 
+/**
+ * A thread is open and the verb still has nothing to act on — the conversation
+ * has not said which turn answers for it yet. A press has to say so: the
+ * shared toolbar only explains itself when there is no thread at all, so an
+ * unwired handler under an open one would be swallowed in silence (#803).
+ */
+const NOT_LOADED_YET = "This conversation hasn't loaded yet";
+
 export const MessageToolbar = ({
 	hasThread,
 	intelligenceOpen,
@@ -80,6 +88,9 @@ export const MessageToolbar = ({
 	const [hint, setHint] = useState<string | null>(null);
 	const canDeleteResolved = canDelete ?? hasThread;
 	const explain = (message: string) => () => setHint(message);
+	// Every verb the bar renders answers a press, wired or not.
+	const wired = (handler: (() => void) | undefined) =>
+		handler ?? explain(NOT_LOADED_YET);
 
 	return (
 		<MailActionToolbar
@@ -92,11 +103,11 @@ export const MessageToolbar = ({
 			forwardTitle={`Forward ${tooltipForAction("forward")}`}
 			deleteTitle={`Move to Trash ${tooltipForAction("delete")}`}
 			flagTitle={`Star ${tooltipForAction("toggleStar")}`}
-			onReply={onReply}
-			onReplyAll={onReplyAll}
-			onForward={onForward}
-			onDelete={canDeleteResolved ? onDelete : explain(OPEN_FIRST)}
-			onToggleStar={onToggleStar}
+			onReply={wired(onReply)}
+			onReplyAll={wired(onReplyAll)}
+			onForward={wired(onForward)}
+			onDelete={canDeleteResolved ? wired(onDelete) : explain(OPEN_FIRST)}
+			onToggleStar={wired(onToggleStar)}
 			onMove={explain(OPEN_FIRST)}
 			moveSlot={
 				moveContext ? (

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

@@ -0,0 +1,235 @@
+/**
+ * Reply, Reply All and Forward answer the thread the address names (#803).
+ *
+ * The thread and the turn being answered are both path segments, so the verbs
+ * have everything they need the moment the address is read. They used to wait
+ * for the listing row instead — a reload or a bookmarked thread left all three
+ * pressable and silent for a full round trip, and for good when the request
+ * failed.
+ *
+ * The toolbar is mounted the way the route mounts it: the brief's provider over
+ * the address, with the reading pane below it. Each case is what one address
+ * does with the thread request unresolved, so nothing here can pass on a row
+ * that arrived.
+ */
+
+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 { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { useOpenThreadPath } from "@/routing";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeAccount } from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { BriefPane } from "./BriefPane";
+import { MessageToolbar } from "./MessageToolbar";
+
+const ACCOUNT_ID = "acc-1";
+const THREAD_ID = "thread-1";
+const MESSAGE_ID = "msg-1";
+const MESSAGE_PATH = `/mail/brief/${THREAD_ID}/${MESSAGE_ID}`;
+
+const account = makeAccount({ accountId: ACCOUNT_ID });
+
+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 brief's real shape: the list is a layout route, the thread and the
+ * message are the segments under it, and the mode is the segment under those.
+ */
+const testRouter = (href: string): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(ComposeProvider, null, createElement(Outlet)),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	// Present so `useBrowsedList` has the route its `from` names, the way the
+	// generated tree does.
+	const mailboxRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/$mailboxId",
+		component: Outlet,
+	});
+	const briefRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/brief",
+		component: BriefLayout,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => briefRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () => createElement(BriefPane.Reading),
+	});
+	const replyRoute = createRoute({
+		getParentRoute: () => messageRoute,
+		path: "$mode/{-$outboxMessageId}",
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			mailboxRoute,
+			briefRoute.addChildren([
+				threadRoute.addChildren([messageRoute.addChildren([replyRoute])]),
+			]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+/** How `routes/mail/brief.tsx` mounts it: the provider over the reading slot. */
+function BriefLayout() {
+	return createElement(BriefPane, {
+		thread: useOpenThreadPath(),
+		// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+		children: createElement(Outlet),
+	});
+}
+
+type ThreadRequest = "hangs" | "fails";
+
+const mountAt = async (
+	href: string,
+	threadRequest: ThreadRequest,
+): Promise<[DomHarness, AnyRouter]> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			// A request in flight, and one that came back with nothing — the two
+			// states in which no row exists to reply from.
+			if (threadRequest === "fails") {
+				return new Response("upstream unavailable", { status: 502 });
+			}
+			return new Promise(() => undefined);
+		}
+		return { items: [] };
+	});
+
+	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, router];
+};
+
+const press = async (mounted: DomHarness, label: string): Promise<void> => {
+	mounted.click(mounted.byLabel(label));
+	await mounted.flush();
+	await mounted.wait(20);
+	await mounted.flush();
+};
+
+describe("the reply verbs answer the thread the address names (#803)", () => {
+	const cases: Array<[label: string, segment: string]> = [
+		["Reply", "reply"],
+		["Reply all", "reply-all"],
+		["Forward", "forward"],
+	];
+
+	for (const [label, segment] of cases) {
+		it(`${label} opens its mode while the thread request is still in flight`, async () => {
+			const [mounted, router] = await mountAt(MESSAGE_PATH, "hangs");
+
+			await press(mounted, label);
+
+			assert.equal(
+				router.state.location.pathname,
+				`${MESSAGE_PATH}/${segment}`,
+				`${label} answered the message in the address rather than waiting for a row`,
+			);
+		});
+	}
+
+	// The failure case is permanent: no row is ever coming, so a verb that waits
+	// for one is dead for as long as the reader stays on the address.
+	it("answers a message whose thread request came back an error", async () => {
+		const [mounted, router] = await mountAt(MESSAGE_PATH, "fails");
+
+		await press(mounted, "Reply");
+
+		assert.equal(router.state.location.pathname, `${MESSAGE_PATH}/reply`);
+	});
+
+	it("says the conversation never arrived where the composer would be", async () => {
+		const [mounted] = await mountAt(`${MESSAGE_PATH}/reply`, "fails");
+
+		assert.match(
+			mounted.text(),
+			/nothing to answer/,
+			"the reply address over a failed conversation explains itself rather than repeating the read error",
+		);
+	});
+});
+
+/**
+ * The backstop for the one thing the address can be silent about: a bare thread
+ * address leaves which turn answers to the thread itself. The shared toolbar
+ * only explains a press when there is no thread at all, so an unwired verb
+ * under an open one has to be answered here.
+ */
+describe("no toolbar verb is pressable and silent (#803)", () => {
+	const mountToolbar = (): DomHarness => {
+		const mounted = createDomHarness();
+		harness = mounted;
+		mounted.renderApp(
+			createElement(MessageToolbar, {
+				hasThread: true,
+				intelligenceOpen: false,
+				canToggleIntelligence: false,
+				onToggleIntelligence: () => undefined,
+			}),
+		);
+		return mounted;
+	};
+
+	for (const label of ["Reply", "Reply all", "Forward"]) {
+		it(`${label} explains itself with a thread open and no handler wired`, async () => {
+			const mounted = mountToolbar();
+
+			mounted.click(mounted.byLabel(label));
+			await mounted.flush();
+
+			const status = mounted.query('[role="status"]');
+			assert.ok(
+				status,
+				`${label} said nothing at all — a press must never be swallowed`,
+			);
+			assert.match(status.textContent ?? "", /hasn't loaded yet/);
+		});
+	}
+});

package/src/routing/index.ts

@@ -32,6 +32,7 @@ export {
 	type ReplySurface,
 	type ReplyTarget,
 	replyModes,
+	replyToThread,
 	useAdoptReplyDraft,
 	useCloseReply,
 	useIsReplying,

package/src/routing/reply.ts

@@ -201,6 +201,33 @@ export function useOpenReply(): (target: ReplyTarget) => void {
 	);
 }
 
+/**
+ * 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.
  *