@remit/web-client 0.0.185 → 0.0.186

package/src/components/mail/ThreadListInteraction.test.ts

@@ -6,13 +6,22 @@
  * their headers, so what the consumer passed and what is rendered are different
  * lists. These cases mount rows directly and change them, which is the same
  * thing from the provider's point of view.
+ *
+ * The confirmation is worded from the folder the row is actually filed in
+ * (#855): this list spans mailboxes and accounts, and deleting mail that is
+ * already in Trash expunges it on the server rather than moving it.
  */
 import assert from "node:assert/strict";
 import { after, afterEach, before, beforeEach, describe, it } from "node:test";
-import type { Verb } from "@remit/ui";
+import { configOperationsGetConfigQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { ThreadRowData, Verb } from "@remit/ui";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { JSDOM } from "jsdom";
 import { act, createElement, createRef, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { AuthProviderProvider, noneAuthProvider } from "@/auth/provider";
+import { ErrorBannerProvider } from "@/components/ui/ErrorBannerProvider";
+import { makeAccount, makeConfig } from "@/test-support/fixtures";
 import type { MessageListCommands } from "./MessageList";
 import {
 	ThreadListInteraction,
@@ -57,6 +66,39 @@ afterEach(() => {
 	act(() => root.unmount());
 });
 
+const TRASH_MAILBOX_ID = "mbx-trash";
+
+const row = (id: string, mailboxId = "mbx-inbox"): ThreadRowData => ({
+	id,
+	accountId: "acc-1",
+	mailboxId,
+	threadId: `t-${id}`,
+	fromName: "Alice",
+	fromEmail: "alice@example.com",
+	subject: "Quarterly report",
+	snippet: "",
+	timeLabel: "9:42",
+});
+
+/**
+ * A client that already holds the account's folder appointments, so the
+ * confirmation's outcome is settled on the first render rather than arriving a
+ * frame later.
+ */
+const seededClient = (trashMailboxId: string): QueryClient => {
+	const client = new QueryClient();
+	client.setQueryData(
+		configOperationsGetConfigQueryKey(),
+		makeConfig([
+			makeAccount({
+				accountId: "acc-1",
+				folderAppointments: [{ role: "Trash", mailboxId: trashMailboxId }],
+			}),
+		]),
+	);
+	return client;
+};
+
 const rowElements = (ids: string[]) =>
 	ids.map((id) =>
 		createElement("button", { key: id, type: "button", "data-message-id": id }),
@@ -68,26 +110,44 @@ const rowElements = (ids: string[]) =>
  */
 function mountList(options: {
 	initialIds: string[];
+	rows?: readonly ThreadRowData[];
+	client?: QueryClient;
 	onDeleteMessages?: (ids: string[]) => void;
 	onSelectionVerb?: (verb: Verb) => void;
 }) {
 	const onDeleteMessages = options.onDeleteMessages ?? (() => undefined);
 	const onSelectionVerb = options.onSelectionVerb ?? (() => undefined);
+	const rows = options.rows ?? options.initialIds.map((id) => row(id));
+	const client = options.client ?? seededClient(TRASH_MAILBOX_ID);
+	const authProvider = noneAuthProvider;
 	const commandsRef = createRef<MessageListCommands | null>();
 	let setIds: ((ids: string[]) => void) | undefined;
 	const Harness = () => {
 		const [ids, set] = useState(options.initialIds);
 		setIds = set;
 		return createElement(
-			ThreadListInteraction,
-			{
-				selectedMessageId: undefined,
-				onOpen: () => undefined,
-				onDeleteMessages,
-				onSelectionVerb,
-				commandsRef,
-			},
-			...rowElements(ids),
+			AuthProviderProvider,
+			{ value: authProvider },
+			createElement(
+				QueryClientProvider,
+				{ client },
+				createElement(
+					ErrorBannerProvider,
+					null,
+					createElement(
+						ThreadListInteraction,
+						{
+							selectedMessageId: undefined,
+							rows,
+							onOpen: () => undefined,
+							onDeleteMessages,
+							onSelectionVerb,
+							commandsRef,
+						},
+						...rowElements(ids),
+					),
+				),
+			),
 		);
 	};
 	act(() => root.render(createElement(Harness)));
@@ -271,6 +331,111 @@ describe("ThreadListInteraction — delete confirms first", () => {
 	});
 });
 
+/**
+ * Issue #855. Flagged and the brief span mailboxes, so a row here can already
+ * be in its account's Trash — where the same keypress is an IMAP expunge, not a
+ * move. The confirmation used to promise "Move to Trash" over every one of
+ * them, collecting an answer to a question the user was never asked.
+ */
+describe("ThreadListInteraction — the confirmation states the outcome it will produce", () => {
+	const dialogText = (): string => dom.window.document.body.textContent ?? "";
+
+	const askDelete = (list: ReturnType<typeof mountList>) => {
+		act(() => list.commands().focusFirst());
+		act(() => {
+			list.commands().requestVerb("delete");
+		});
+	};
+
+	it("asks a row already in Trash as a permanent delete", () => {
+		const list = mountList({
+			initialIds: ["m1", "m2"],
+			rows: [row("m1", TRASH_MAILBOX_ID), row("m2")],
+		});
+
+		askDelete(list);
+
+		const text = dialogText();
+		assert.match(text, /Permanently delete 1 message\?/);
+		assert.match(text, /cannot be restored/);
+		assert.doesNotMatch(
+			text,
+			/Move 1 message to Trash\?/,
+			"a move is not what this delete does",
+		);
+	});
+
+	it("still offers the reversible move for a row filed outside Trash", () => {
+		const list = mountList({
+			initialIds: ["m1"],
+			rows: [row("m1")],
+		});
+
+		askDelete(list);
+
+		assert.match(dialogText(), /Move 1 message to Trash\?/);
+		assert.match(dialogText(), /restore them from Trash later/);
+	});
+
+	it("refuses a row with no account the same way", () => {
+		const deleted: string[][] = [];
+		const list = mountList({
+			initialIds: ["m1"],
+			rows: [{ ...row("m1"), accountId: undefined }],
+			onDeleteMessages: (ids) => deleted.push(ids),
+		});
+
+		act(() => list.commands().focusFirst());
+		act(() => {
+			assert.equal(list.commands().requestVerb("delete"), true);
+		});
+
+		assert.match(dialogText(), /Couldn.t delete this message/);
+		assert.deepEqual(deleted, []);
+	});
+
+	it("refuses a row it cannot place instead of opening a dialog nobody can answer", () => {
+		const deleted: string[][] = [];
+		const list = mountList({
+			initialIds: ["m1"],
+			rows: [],
+			onDeleteMessages: (ids) => deleted.push(ids),
+		});
+
+		act(() => list.commands().focusFirst());
+		act(() => {
+			assert.equal(
+				list.commands().requestVerb("delete"),
+				true,
+				"the press is still claimed — handing it back runs the pane’s own unconfirmed delete",
+			);
+		});
+
+		const text = dialogText();
+		assert.match(text, /Couldn.t delete this message/);
+		assert.match(text, /Nothing was deleted/);
+		assert.ok(
+			Array.from(
+				dom.window.document.querySelectorAll<HTMLAnchorElement>("a"),
+			).some((link) => link.textContent === "Reload the list"),
+			"the refusal offers the control its own sentence names",
+		);
+		assert.doesNotMatch(
+			text,
+			/Checking where this account files deleted mail/,
+			"no load is happening, so nothing may claim one is",
+		);
+		assert.equal(
+			Array.from(
+				dom.window.document.querySelectorAll<HTMLButtonElement>("button"),
+			).some((button) => button.textContent === "Move to Trash"),
+			false,
+			"and no confirmation stands behind the refusal",
+		);
+		assert.deepEqual(deleted, [], "nothing is deleted by a refusal");
+	});
+});
+
 /**
  * A background refresh drops the ids that left and keeps every survivor — the
  * same intersect-on-refresh guarantee `useSelection.test.ts` locks for the pure
@@ -280,6 +445,8 @@ describe("ThreadListInteraction — delete confirms first", () => {
  */
 function mountSelectableList(initialIds: string[]) {
 	const commandsRef = createRef<MessageListCommands | null>();
+	const client = seededClient(TRASH_MAILBOX_ID);
+	const authProvider = noneAuthProvider;
 	let setIds: ((ids: string[]) => void) | undefined;
 	let selected: string[] = [];
 	const Probe = () => {
@@ -291,16 +458,29 @@ function mountSelectableList(initialIds: string[]) {
 		const [ids, set] = useState(initialIds);
 		setIds = set;
 		return createElement(
-			ThreadListInteraction,
-			{
-				selectedMessageId: undefined,
-				onOpen: () => undefined,
-				onDeleteMessages: () => undefined,
-				onSelectionVerb: () => undefined,
-				commandsRef,
-			},
-			...rowElements(ids),
-			createElement(Probe, { key: "probe" }),
+			AuthProviderProvider,
+			{ value: authProvider },
+			createElement(
+				QueryClientProvider,
+				{ client },
+				createElement(
+					ErrorBannerProvider,
+					null,
+					createElement(
+						ThreadListInteraction,
+						{
+							selectedMessageId: undefined,
+							rows: initialIds.map((id) => row(id)),
+							onOpen: () => undefined,
+							onDeleteMessages: () => undefined,
+							onSelectionVerb: () => undefined,
+							commandsRef,
+						},
+						...rowElements(ids),
+						createElement(Probe, { key: "probe" }),
+					),
+				),
+			),
 		);
 	};
 	act(() => root.render(createElement(Harness)));

package/src/components/mail/ThreadListInteraction.tsx

@@ -17,8 +17,8 @@
  * verb acts on a message the user cannot see.
  */
 import {
-	ConfirmDialog,
 	SelectionTopBar,
+	type ThreadRowData,
 	useListCursor,
 	type Verb,
 } from "@remit/ui";
@@ -33,15 +33,27 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { useDeleteOutcome } from "@/hooks/useDeleteOutcome";
 import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
-import { formatDeleteToTrashTitle } from "@/lib/format";
+import type { DeleteTarget } from "@/lib/format";
 import { tabStopId } from "@/lib/list-focus";
 import { useListHeaderChrome } from "@/lib/list-header-chrome";
+import { DeleteConfirmDialog } from "./DeleteConfirmDialog";
 import type { MessageListCommands } from "./MessageList";
 import type { MessageRowSelection } from "./MessageRow";
 
+/** Nothing pending, as a stable identity so the outcome memo does not churn. */
+const NO_TARGETS: readonly DeleteTarget[] = [];
+
+interface PendingDelete {
+	ids: string[];
+	/** Where those rows were filed when the delete was asked for. */
+	targets: DeleteTarget[];
+}
+
 interface ThreadRowInteraction {
 	focused: boolean;
 	isTabStop: boolean;
@@ -147,6 +159,13 @@ export interface OpenMessageOptions {
 
 interface ThreadListInteractionProps {
 	selectedMessageId: string | undefined;
+	/**
+	 * The rows this list is showing. Read only to name the folder a row is
+	 * filed in, which is what decides whether deleting it moves it to Trash or
+	 * expunges it — this list spans mailboxes and accounts, so the answer is per
+	 * row and there is no route mailbox to take it from (#855).
+	 */
+	rows: readonly ThreadRowData[];
 	/** Opens a row — the same navigation a click performs. */
 	onOpen: (messageId: string, options?: OpenMessageOptions) => void;
 	/** Deletes a set of messages. Absent disables the delete key for this list. */
@@ -168,6 +187,7 @@ interface ThreadListInteractionProps {
 
 export function ThreadListInteraction({
 	selectedMessageId,
+	rows,
 	onOpen,
 	onDeleteMessages,
 	onSelectionVerb,
@@ -178,6 +198,7 @@ export function ThreadListInteraction({
 	children,
 }: ThreadListInteractionProps) {
 	const isDesktop = useIsDesktop();
+	const { pushError } = useErrorBanners();
 	const containerRef = useRef<HTMLDivElement>(null);
 	const orderedIds = useRenderedRowIds(containerRef);
 	const cursor = useListCursor({
@@ -255,11 +276,16 @@ export function ThreadListInteraction({
 		open: followOpen,
 	});
 
-	// Pending move-to-Trash for the row under the cursor, awaiting confirmation.
-	// The id is snapshotted at request time so a cursor move behind the dialog
-	// cannot retarget it. A delete over a selection is a bulk action and walks the
-	// wizard instead — the same contract the mailbox list's delete has.
-	const [pendingDelete, setPendingDelete] = useState<string[] | null>(null);
+	// Pending delete for the row under the cursor, awaiting confirmation. Both
+	// the id and the folder it is filed in are snapshotted at request time, so
+	// neither a cursor move nor a background refresh behind the dialog can
+	// retarget it or change the question it is asking. A delete over a selection
+	// is a bulk action and walks the wizard instead — the same contract the
+	// mailbox list's delete has.
+	const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(
+		null,
+	);
+	const deleteOutcome = useDeleteOutcome(pendingDelete?.targets ?? NO_TARGETS);
 
 	// A verb, routed the same way the bar routes its own (#477 1.4, #508). Over a
 	// selection every verb opens the wizard, so the keyboard cannot reach a bulk
@@ -276,15 +302,42 @@ export function ThreadListInteraction({
 				return true;
 			}
 			if (verb !== "delete" || !focusedMessageId) return false;
-			setPendingDelete([focusedMessageId]);
+			// A row this list cannot place is a row whose delete cannot be worded,
+			// and a confirmation nobody can answer is worse than no confirmation.
+			// The press is still claimed — handing it back runs the pane's own
+			// unconfirmed delete — and the refusal is said out loud, with the one
+			// control that can actually change the answer.
+			const pending = rows.find((row) => row.id === focusedMessageId);
+			if (!pending?.mailboxId || !pending.accountId) {
+				pushError({
+					title: "Couldn't delete this message",
+					detail:
+						"This list has lost track of which account and folder it is in, so reader can't tell whether deleting it would move it to Trash or erase it. Nothing was deleted.",
+					action: { label: "Reload the list", href: window.location.href },
+				});
+				return true;
+			}
+			setPendingDelete({
+				ids: [focusedMessageId],
+				targets: [
+					{ accountId: pending.accountId, mailboxId: pending.mailboxId },
+				],
+			});
 			return true;
 		},
-		[pendingDelete, selectedCount, onSelectionVerb, focusedMessageId],
+		[
+			pendingDelete,
+			selectedCount,
+			onSelectionVerb,
+			focusedMessageId,
+			rows,
+			pushError,
+		],
 	);
 
 	const confirmDelete = useCallback(() => {
 		if (pendingDelete === null) return;
-		onDeleteMessages(pendingDelete);
+		onDeleteMessages(pendingDelete.ids);
 		setPendingDelete(null);
 		exitSelection();
 	}, [pendingDelete, onDeleteMessages, exitSelection]);
@@ -416,13 +469,11 @@ export function ThreadListInteraction({
 			<div ref={containerRef} className="contents">
 				{children}
 			</div>
-			<ConfirmDialog
+			<DeleteConfirmDialog
 				isOpen={confirmOpen}
-				title={formatDeleteToTrashTitle(pendingDelete?.length ?? 0)}
-				description="You can restore them from Trash later."
-				confirmLabel="Move to Trash"
-				destructive
-				isBusy={isDeleting}
+				count={pendingDelete?.ids.length ?? 0}
+				outcome={deleteOutcome}
+				isDeleting={isDeleting}
 				onConfirm={confirmDelete}
 				onCancel={cancelDelete}
 			/>

package/src/hooks/useArchiveMailbox.ts

@@ -81,15 +81,45 @@ export const useJunkMailbox = (
 };
 
 /**
- * Returns the account's appointed Trash mailbox id. The delete confirmation
- * needs it to tell a move-to-Trash apart from a delete inside Trash, which is
- * an unrecoverable expunge and has to be asked as one (#845).
+ * Each account's appointed Trash mailbox, keyed by account. The delete
+ * confirmation needs it to tell a move-to-Trash apart from a delete inside
+ * Trash, which is an unrecoverable expunge and has to be asked as one (#845),
+ * and apart from an account that appoints no Trash at all, where the server
+ * refuses the delete outright (#846).
+ *
+ * A map rather than a set of ids, because the brief and Flagged answer for
+ * selections that span accounts (#855): "is this row in Trash" is a question
+ * about the row's own account, and "does any Trash exist" has to be answerable
+ * as "no" rather than as silence.
+ *
+ * `hasAppointments` is data presence, never `!isLoading`. React Query v5
+ * computes `isLoading` as `isPending && isFetching`, so an offline query is
+ * paused and reports neither loading nor error while `data` is still
+ * undefined — which read as "no Trash anywhere", and promised a reversible
+ * move over an expunge that would replay on reconnect.
  */
-export const useTrashMailbox = (
-	accountId: string | undefined,
-): { trashMailboxId: string | undefined; isLoading: boolean } => {
-	const { mailboxId, isLoading } = useFolderRoleMailbox(accountId, "Trash");
-	return { trashMailboxId: mailboxId, isLoading };
+export const useTrashByAccount = (): {
+	trashByAccount: ReadonlyMap<string, string | undefined>;
+	hasAppointments: boolean;
+	isError: boolean;
+} => {
+	const { data: config, isError } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	const trashByAccount = useMemo(() => {
+		const byAccount = new Map<string, string | undefined>();
+		for (const account of config?.accounts ?? []) {
+			byAccount.set(
+				account.accountId,
+				account.folderAppointments.find((fa) => fa.role === "Trash")?.mailboxId,
+			);
+		}
+		return byAccount;
+	}, [config]);
+
+	return { trashByAccount, hasAppointments: config !== undefined, isError };
 };
 
 /**

package/src/hooks/useDeleteOutcome.ts

@@ -0,0 +1,35 @@
+/**
+ * What a delete is about to do to a specific set of rows — the one derivation
+ * every delete confirmation words itself from (#845, #855).
+ *
+ * `MessageMoveService.deleteMessages` moves a message to its account's Trash
+ * unless it is already there, in which case the same keypress is an IMAP
+ * expunge and nothing survives it; and it refuses the call outright when the
+ * account appoints no Trash. That branch is per message and per account, not
+ * per view, so the mailbox list, the brief and Flagged all have to ask it of
+ * the rows they are actually about to delete — the brief and Flagged hold rows
+ * from several mailboxes and several accounts at once.
+ *
+ * The decision itself is `deleteOutcomeFor`, kept pure in `lib/format`; this is
+ * only the read that feeds it.
+ */
+import { useMemo } from "react";
+import {
+	type DeleteOutcome,
+	type DeleteTarget,
+	deleteOutcomeFor,
+} from "@/lib/format";
+import { useTrashByAccount } from "./useArchiveMailbox";
+
+/** The outcome of deleting `targets`. */
+export const useDeleteOutcome = (
+	targets: readonly DeleteTarget[],
+): DeleteOutcome => {
+	const { trashByAccount, hasAppointments, isError } = useTrashByAccount();
+
+	return useMemo(
+		() =>
+			deleteOutcomeFor({ targets, trashByAccount, hasAppointments, isError }),
+		[targets, trashByAccount, hasAppointments, isError],
+	);
+};

package/src/lib/bulk-action-copy.ts

@@ -1,4 +1,13 @@
-import { formatNumber } from "@/lib/format";
+import type { ErrorBannerSeverity } from "@/components/ui/error-banners";
+import type { BulkRunOutcome } from "@/lib/bulk-actions";
+import { type DeleteOutcome, formatNumber } from "@/lib/format";
+
+/** A run ending, as the list banners it. */
+export interface RunEndingBanner {
+	severity: ErrorBannerSeverity;
+	title: string;
+	detail?: string;
+}
 
 /**
  * Wording for the three bulk actions a selection can run (#114). One place
@@ -23,6 +32,16 @@ const pastTense: Record<BulkActionKind, string> = {
 	markRead: "marked as read",
 };
 
+/**
+ * What the run did, in the past tense. A delete inside Trash expunges rather
+ * than moves (#855), and that holds for a run that stopped halfway exactly as
+ * it does for one that finished — the half that ran is still erased.
+ */
+const pastTenseFor = (kind: BulkActionKind, outcome: DeleteOutcome): string =>
+	kind === "delete" && outcome === "permanent"
+		? "permanently deleted"
+		: pastTense[kind];
+
 const negated: Record<BulkActionKind, string> = {
 	delete: "couldn't be deleted",
 	move: "couldn't be moved",
@@ -52,12 +71,18 @@ export const bulkActionProgressLabel = (
  * Shown once a run finishes with nothing left over. The second sentence is
  * the honest part: the bulk endpoints enqueue the IMAP write, so the mail
  * server is still applying it when this appears.
+ *
+ * A delete inside Trash expunges rather than moves (#855), so the run that just
+ * finished is named by its outcome — telling a reader their mail is "moved to
+ * Trash" after it was erased is the same lie the confirmation stopped telling,
+ * one screen later.
  */
 export const bulkActionCompletionText = (
 	kind: BulkActionKind,
 	done: number,
+	outcome: DeleteOutcome = "trash",
 ): string =>
-	`${formatNumber(done)} ${pastTense[kind]}. Your mail server is still catching up.`;
+	`${formatNumber(done)} ${pastTenseFor(kind, outcome)}. Your mail server is still catching up.`;
 
 /**
  * Shown when a run ended before it covered what it was started against. The
@@ -72,8 +97,9 @@ export const bulkActionStoppedDetail = (
 	kind: BulkActionKind,
 	done: number,
 	total: number,
+	outcome: DeleteOutcome = "trash",
 ): string =>
-	`${formatNumber(done)} of ${formatNumber(total)} ${pastTense[kind]}. Nothing was sent for the rest, so they are untouched.`;
+	`${formatNumber(done)} of ${formatNumber(total)} ${pastTenseFor(kind, outcome)}. Nothing was sent for the rest, so they are untouched.`;
 
 /** Error-banner title for a run stopped by an infrastructure failure. */
 export const bulkActionFailureTitle = (
@@ -91,3 +117,43 @@ export const bulkActionFailureDetail = (kind: BulkActionKind): string =>
 export const bulkActionProgressTone = (
 	kind: BulkActionKind,
 ): "danger" | "info" => (kind === "delete" ? "danger" : "info");
+
+/**
+ * How a run that has already ended is announced, or `null` when it announces
+ * itself elsewhere.
+ *
+ * The run screen invites the user to close it and keeps going past that, so by
+ * the time a run ends there is often no screen of its own left to say how it
+ * went (#521) — the list says it instead. Three endings, and they are not the
+ * same news: a run stopped short is a warning, because mail the user asked to
+ * be acted on was left untouched; a run that covered everything is a passing
+ * note; and a run stopped by a thrown batch already bannered where it threw, so
+ * saying it twice is the one wrong answer.
+ *
+ * Pure, so the severity of each ending is pinned by its result rather than by
+ * the shape of the caller that produces it.
+ */
+export const runEndingBanner = (
+	kind: BulkActionKind,
+	matched: number,
+	outcome: BulkRunOutcome,
+	deleteOutcome: DeleteOutcome,
+): RunEndingBanner | null => {
+	if (outcome.error !== undefined) return null;
+	if (outcome.cancelled) {
+		return {
+			severity: "warning",
+			title: bulkActionStoppedTitle(outcome.done),
+			detail: bulkActionStoppedDetail(
+				kind,
+				outcome.done,
+				matched,
+				deleteOutcome,
+			),
+		};
+	}
+	return {
+		severity: "info",
+		title: bulkActionCompletionText(kind, outcome.done, deleteOutcome),
+	};
+};