@remit/web-client 0.0.178 → 0.0.180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.178",
+  "version": "0.0.180",
   "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/MailboxPane.tsx

@@ -144,6 +144,7 @@ interface MailboxPaneContextValue {
 	isError: boolean;
 	error: unknown;
 	mailboxAccountId: string | undefined;
+	mailboxAccountLoading: boolean;
 	mailboxName: string | null;
 	unreadCount: number;
 	isDraftsMailbox: boolean;
@@ -375,7 +376,8 @@ function MailboxPaneProvider({
 				: undefined,
 	});
 
-	const { accountId: mailboxAccountId } = useMailboxAccount(mailboxId);
+	const { accountId: mailboxAccountId, isLoading: mailboxAccountLoading } =
+		useMailboxAccount(mailboxId);
 	const mailboxName = useCurrentMailboxName({ accounts });
 
 	// The server answered the active predicate, so these rows are the list: the
@@ -769,6 +771,7 @@ function MailboxPaneProvider({
 		isError,
 		error,
 		mailboxAccountId,
+		mailboxAccountLoading,
 		mailboxName,
 		unreadCount,
 		isDraftsMailbox,
@@ -1053,6 +1056,7 @@ function MailboxReading() {
 	const {
 		mailboxId,
 		mailboxAccountId,
+		mailboxAccountLoading,
 		selectedThread,
 		conversation,
 		intelligenceOpen,
@@ -1127,13 +1131,13 @@ function MailboxReading() {
 			<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 				<MessageToolbar
 					hasThread={hasThread}
+					messageId={conversation?.messageId}
 					intelligenceOpen={intelligenceShowing}
 					canToggleIntelligence={hasThread}
 					onToggleIntelligence={toggleIntelligence}
 					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}
 					isStarred={selectedThread?.hasStars}
@@ -1146,6 +1150,7 @@ function MailboxReading() {
 								}
 							: undefined
 					}
+					moveContextLoading={mailboxAccountLoading}
 				/>
 				<div className="min-h-0 flex-1 overflow-hidden">{detailPane}</div>
 			</section>

package/src/components/mail/MessageToolbar.interaction.test.ts

@@ -0,0 +1,250 @@
+/**
+ * The inline notice under the toolbar belongs to the press that produced it and
+ * to nothing after it (#818). It came out of #803 as a stored sentence with no
+ * reset, and #807 took away the render gate that had been hiding it, so one
+ * refused press labelled every later message on the pane.
+ *
+ * Two invariants hold underneath: no press ends in silence, and no sentence
+ * outlives the reason it was written for.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { makeMailbox } from "../../test-support/fixtures";
+import { MessageToolbar, type MessageToolbarProps } from "./MessageToolbar";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const VERBS = [
+	"Reply",
+	"Reply all",
+	"Forward",
+	"Move to Trash",
+	"Move to mailbox",
+	"Star",
+];
+
+const show = (
+	mounted: DomHarness,
+	props: Partial<MessageToolbarProps>,
+): void => {
+	mounted.renderApp(
+		createElement(MessageToolbar, {
+			hasThread: true,
+			intelligenceOpen: false,
+			canToggleIntelligence: false,
+			onToggleIntelligence: () => undefined,
+			...props,
+		}),
+	);
+};
+
+/** A fresh pane. */
+const mount = (props: Partial<MessageToolbarProps>): DomHarness => {
+	harness?.close();
+	harness = createDomHarness();
+	show(harness, props);
+	return harness;
+};
+
+/** The same pane, re-rendered — state survives, as it does under a navigation
+ *  the router answers without remounting. */
+const update = (props: Partial<MessageToolbarProps>): void => {
+	if (!harness) throw new Error("nothing mounted");
+	show(harness, props);
+};
+
+const notice = (mounted: DomHarness): string | null =>
+	mounted.query('[role="status"]')?.textContent ?? null;
+
+const press = async (mounted: DomHarness, label: string): Promise<void> => {
+	mounted.click(mounted.byLabel(label));
+	await mounted.flush();
+};
+
+describe("no toolbar press ends in silence (#818)", () => {
+	for (const label of VERBS) {
+		it(`${label} explains itself with nothing open, handler or no handler`, async () => {
+			let acted = 0;
+			const act = () => {
+				acted += 1;
+			};
+			const mounted = mount({
+				hasThread: false,
+				messageId: undefined,
+				onReply: act,
+				onReplyAll: act,
+				onForward: act,
+				onDelete: act,
+				onToggleStar: act,
+			});
+
+			await press(mounted, label);
+
+			assert.ok(
+				notice(mounted),
+				`${label} did nothing and said nothing — the worst outcome`,
+			);
+			assert.equal(acted, 0, `${label} acted with no message open`);
+		});
+	}
+});
+
+describe("the toolbar notice clears when its reason goes (#818)", () => {
+	it("takes the notice down when another message opens", async () => {
+		const mounted = mount({ messageId: "message-1" });
+
+		await press(mounted, "Reply");
+		assert.match(
+			notice(mounted) ?? "",
+			/hasn't loaded yet/,
+			"a press with no handler behind it must explain itself",
+		);
+
+		update({ messageId: "message-2" });
+		await mounted.flush();
+
+		assert.equal(
+			notice(mounted),
+			null,
+			"the sentence belongs to the message it was pressed on, not the next one",
+		);
+	});
+
+	it("invites the press again once the verb it named can act", async () => {
+		const mounted = mount({ messageId: "message-1" });
+
+		await press(mounted, "Reply");
+		assert.match(notice(mounted) ?? "", /hasn't loaded yet/);
+
+		update({ messageId: "message-1", onReply: () => undefined });
+		await mounted.flush();
+
+		assert.match(
+			notice(mounted) ?? "",
+			/Reply is ready — press it again/,
+			"the press was never acted on; dropping the notice drops it silently",
+		);
+	});
+
+	it("lets a verb that acts take down an earlier verb's complaint", async () => {
+		let starred = 0;
+		const mounted = mount({
+			messageId: "message-1",
+			onToggleStar: () => {
+				starred += 1;
+			},
+		});
+
+		await press(mounted, "Reply");
+		assert.match(notice(mounted) ?? "", /hasn't loaded yet/);
+
+		await press(mounted, "Star");
+
+		assert.equal(starred, 1);
+		assert.equal(
+			notice(mounted),
+			null,
+			"a star that worked must not sit under a sentence saying nothing loaded",
+		);
+	});
+});
+
+describe("a loading action is not an unavailable one (#818)", () => {
+	const openMessage: Partial<MessageToolbarProps> = {
+		messageId: "message-1",
+		onReply: () => undefined,
+		onDelete: () => undefined,
+		onToggleStar: () => undefined,
+	};
+
+	it("does not tell the reader to open a message that is already open", async () => {
+		const mounted = mount({
+			...openMessage,
+			moveContext: undefined,
+			moveContextLoading: true,
+		});
+
+		await press(mounted, "Move to mailbox");
+
+		const said = notice(mounted);
+		assert.ok(said, "a Move press must never be swallowed in silence");
+		assert.doesNotMatch(
+			said,
+			/Open a message first/,
+			"the message is on screen — the mailbox list is what has not arrived",
+		);
+		assert.match(said, /mailbox list hasn't loaded yet/);
+	});
+
+	it("does not promise a lookup that already settled with nothing", async () => {
+		const mounted = mount({
+			...openMessage,
+			moveContext: undefined,
+			moveContextLoading: false,
+		});
+
+		await press(mounted, "Move to mailbox");
+
+		const said = notice(mounted);
+		assert.ok(said);
+		assert.doesNotMatch(
+			said,
+			/hasn't loaded yet/,
+			"nothing is in flight — waiting will never make this one arrive",
+		);
+		assert.match(said, /reload to try again/, "a dead end needs a next step");
+	});
+
+	it("still says why with nothing open at all", async () => {
+		const mounted = mount({ hasThread: false });
+
+		await press(mounted, "Move to mailbox");
+
+		assert.match(notice(mounted) ?? "", /Open a message first/);
+	});
+
+	it("carries a Move pressed during the lookup through to the picker", async () => {
+		const mounted = mount({
+			...openMessage,
+			moveContext: undefined,
+			moveContextLoading: true,
+		});
+		mounted.queryClient.setQueryData(
+			mailboxOperationsListMailboxesQueryKey({ path: { accountId: "acc-1" } }),
+			{ items: [makeMailbox({ mailboxId: "mbx-work", fullPath: "Work" })] },
+		);
+
+		await press(mounted, "Move to mailbox");
+
+		update({
+			...openMessage,
+			moveContextLoading: false,
+			moveContext: {
+				accountId: "acc-1",
+				currentMailboxId: "mbx-inbox",
+				onMove: () => undefined,
+			},
+		});
+		await mounted.flush();
+
+		assert.equal(
+			mounted.byLabel("Move to mailbox").getAttribute("aria-expanded"),
+			"true",
+			"the press asked for the picker; the context arriving must not lose it",
+		);
+		assert.equal(
+			notice(mounted),
+			null,
+			"the press was honoured, so there is nothing left to repeat",
+		);
+	});
+});

package/src/components/mail/MessageToolbar.tsx

@@ -24,6 +24,12 @@ import { MoveToTrigger } from "./MoveToTrigger";
  */
 export interface MessageToolbarProps {
 	hasThread: boolean;
+	/**
+	 * The message the verbs act on, as the address states it. The inline notice
+	 * a press leaves behind belongs to that message and to nothing after it, so
+	 * opening another one takes the sentence down (#818).
+	 */
+	messageId?: string;
 	intelligenceOpen: boolean;
 	/**
 	 * Whether pressing the intelligence toggle would open anything: the view has
@@ -40,12 +46,6 @@ export interface MessageToolbarProps {
 	onForward?: () => void;
 	/** Delete all messages in the open thread. */
 	onDelete?: () => void;
-	/**
-	 * Override the enabled state of the delete button. Defaults to `hasThread`.
-	 * Pass `true` when a non-thread item (e.g. a Remit draft) is active so the
-	 * trash icon acts without acting on the other thread-scoped verbs.
-	 */
-	canDelete?: boolean;
 	/** Toggle the star on the most-recent message in the thread. */
 	onToggleStar?: () => void;
 	/** Whether the most-recent message is starred. */
@@ -59,6 +59,12 @@ export interface MessageToolbarProps {
 		currentMailboxId: string;
 		onMove: (destinationMailboxId: string) => void;
 	};
+	/**
+	 * Whether the lookup behind `moveContext` is still in flight. Absent context
+	 * is either a read that has not landed or one that settled holding nothing,
+	 * and the two owe the reader different sentences (#818).
+	 */
+	moveContextLoading?: boolean;
 }
 
 const OPEN_FIRST = "Open a message first";
@@ -71,8 +77,41 @@ const OPEN_FIRST = "Open a message first";
  */
 const NOT_LOADED_YET = "This conversation hasn't loaded yet";
 
+/**
+ * Move alone waits on a second read — the account owning this mailbox, found by
+ * fanning out over every account's mailbox list. With the message on screen and
+ * that fan-out still in flight, "open a message first" is simply false (#818).
+ */
+const MAILBOXES_LOADING = "The mailbox list hasn't loaded yet";
+
+/** The same read, settled and holding no account for this mailbox: it errored,
+ *  or no account lists the folder. Waiting will not fix either one. */
+const MAILBOXES_MISSING =
+	"Couldn't find this mailbox's account — reload to try again";
+
+/** The accessible name of each verb's button, for the sentence that invites a
+ *  press to be repeated once what it waited for arrives. */
+const LABELS: Record<MailAction, string> = {
+	reply: "Reply",
+	replyAll: "Reply all",
+	forward: "Forward",
+	delete: "Move to Trash",
+	move: "Move to mailbox",
+	flag: "Star",
+};
+
+interface Press {
+	action: MailAction;
+	messageId: string | null;
+	/** Whether a thread was open when the press was made. A Move made over an
+	 *  open message is carried into the picker; one made over an empty pane
+	 *  asked for nothing that could still arrive. */
+	overThread: boolean;
+}
+
 export const MessageToolbar = ({
 	hasThread,
+	messageId,
 	intelligenceOpen,
 	canToggleIntelligence,
 	onToggleIntelligence,
@@ -80,35 +119,80 @@ export const MessageToolbar = ({
 	onReplyAll,
 	onForward,
 	onDelete,
-	canDelete,
 	onToggleStar,
 	isStarred,
 	moveContext,
+	moveContextLoading,
 }: MessageToolbarProps) => {
-	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);
+	const [press, setPress] = useState<Press | null>(null);
+	const actingOn = messageId ?? null;
+
+	// The one place availability is decided. It agrees with `MailActionToolbar`
+	// by construction — a null reason implies both a thread and a handler, which
+	// is exactly what the shared bar requires before it calls one — so no press
+	// can fall between the two and end in silence.
+	const whyUnavailable = (action: MailAction): string | null => {
+		if (!hasThread) return OPEN_FIRST;
+		if (action === "move") {
+			if (moveContext) return null;
+			return moveContextLoading ? MAILBOXES_LOADING : MAILBOXES_MISSING;
+		}
+		const handler = {
+			reply: onReply,
+			replyAll: onReplyAll,
+			forward: onForward,
+			delete: onDelete,
+			flag: onToggleStar,
+		}[action];
+		return handler ? null : NOT_LOADED_YET;
+	};
+
+	// Derived rather than stored: the sentence is re-read from the press on every
+	// render, so it leaves the moment its reason does. What it leaves behind is
+	// an invitation, not nothing — the press was made and never acted on.
+	const pressed = press && press.messageId === actingOn ? press : null;
+	const reason = pressed ? whyUnavailable(pressed.action) : null;
+	// Move is the exception: its press is carried into the picker below, which
+	// mounts already open, so there is nothing left to ask for.
+	const carriedMove =
+		pressed?.action === "move" && pressed.overThread && Boolean(moveContext);
+	const hint =
+		reason ??
+		(pressed && !carriedMove
+			? `${LABELS[pressed.action]} is ready — press it again`
+			: null);
+
+	const record = (action: MailAction) =>
+		setPress({ action, messageId: actingOn, overThread: hasThread });
+	const explain = (action: MailAction) => () => record(action);
+	// Every verb the bar renders answers a press, wired or not — and a press
+	// that acts takes down whatever an earlier one left behind, so a stale
+	// complaint never reads as this verb's failure.
+	const wired = (action: MailAction, handler: (() => void) | undefined) =>
+		handler
+			? () => {
+					setPress(null);
+					handler();
+				}
+			: explain(action);
 
 	return (
 		<MailActionToolbar
 			hasThread={hasThread}
 			isStarred={isStarred}
-			onUnavailable={(_action: MailAction) => setHint(OPEN_FIRST)}
+			onUnavailable={record}
 			unavailableHint={hint}
 			replyTitle={`Reply ${tooltipForAction("reply")}`}
 			replyAllTitle={`Reply all ${tooltipForAction("replyAll")}`}
 			forwardTitle={`Forward ${tooltipForAction("forward")}`}
 			deleteTitle={`Move to Trash ${tooltipForAction("delete")}`}
 			flagTitle={`Star ${tooltipForAction("toggleStar")}`}
-			onReply={wired(onReply)}
-			onReplyAll={wired(onReplyAll)}
-			onForward={wired(onForward)}
-			onDelete={canDeleteResolved ? wired(onDelete) : explain(OPEN_FIRST)}
-			onToggleStar={wired(onToggleStar)}
-			onMove={explain(OPEN_FIRST)}
+			onReply={wired("reply", onReply)}
+			onReplyAll={wired("replyAll", onReplyAll)}
+			onForward={wired("forward", onForward)}
+			onDelete={wired("delete", onDelete)}
+			onToggleStar={wired("flag", onToggleStar)}
+			onMove={explain("move")}
 			moveSlot={
 				moveContext ? (
 					<MoveToTrigger
@@ -116,6 +200,7 @@ export const MessageToolbar = ({
 						currentMailboxId={moveContext.currentMailboxId}
 						onMove={moveContext.onMove}
 						label="Move to mailbox"
+						defaultOpen={carriedMove}
 					/>
 				) : undefined
 			}

package/src/components/mail/MoveToTrigger.tsx

@@ -40,6 +40,12 @@ interface MoveToTriggerProps {
 	 * Optional accessible label override for the trigger button.
 	 */
 	label?: string;
+	/**
+	 * Mount with the picker already open. Carries a Move pressed before the
+	 * account behind the mailbox had resolved through to the picker it asked
+	 * for, rather than dropping the press once the button appears (#818).
+	 */
+	defaultOpen?: boolean;
 }
 
 const TRIGGER_BASE =
@@ -63,8 +69,9 @@ export const MoveToTrigger = ({
 	disabledHint,
 	variant = "icon-only",
 	label,
+	defaultOpen = false,
 }: MoveToTriggerProps) => {
-	const [isOpen, setIsOpen] = useState(false);
+	const [isOpen, setIsOpen] = useState(defaultOpen);
 	const [pickedId, setPickedId] = useState<string>();
 	const isDesktop = useIsDesktop();
 	const containerRef = useRef<HTMLDivElement>(null);