@remit/web-client 0.0.190 → 0.0.192

package/src/components/mail/empty-trash-bar.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EmptyTrashBar } from "@/components/mail/EmptyTrashBar";
+
+/**
+ * Emptying Trash from the mailbox pane, and the three refusals the server can
+ * answer with (#847).
+ *
+ * The strip sits where the Spam rescue banner sits — above the list, in flow —
+ * and the button always acts. Nothing here is pre-refused from what the client
+ * believes the Trash appointment is: the press reaches the server and the 409
+ * is the authority, so a folder nobody has tried to empty carries no warning.
+ * A refusal is a standing fact about the account rather than an event, so it
+ * lands under the button and stays there until the user repairs it.
+ */
+const meta: Meta<typeof EmptyTrashBar> = {
+	title: "Flows/Mail/Empty Trash",
+	component: EmptyTrashBar,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof EmptyTrashBar>;
+
+const noop = () => {};
+
+const TrashList = () => (
+	<ul className="divide-y divide-line">
+		{[
+			["Re: invoice 4421", "Bookkeeping"],
+			["Your parcel could not be delivered", "PostNL"],
+			["Weekly digest", "Hacker Newsletter"],
+		].map(([subject, from]) => (
+			<li key={subject} className="px-row-inset py-3">
+				<p className="text-sm text-fg">{subject}</p>
+				<p className="text-2xs text-fg-subtle">{from}</p>
+			</li>
+		))}
+	</ul>
+);
+
+const base = {
+	messageCount: 128,
+	isEmptying: false,
+	trashFolderLabel: "Deleted Items",
+	onEmpty: noop,
+	onRepair: noop,
+	children: <TrashList />,
+};
+
+const Frame = ({ children }: { children: React.ReactNode }) => (
+	<div className="h-[520px] w-full max-w-2xl overflow-hidden border border-line bg-canvas">
+		{children}
+	</div>
+);
+
+/** The folder holds mail, so the verb is offered — quietly, and to the right. */
+export const Idle: Story = {
+	render: () => (
+		<Frame>
+			<EmptyTrashBar {...base} />
+		</Frame>
+	),
+};
+
+/** The press is in flight: the button says so and refuses a second one. */
+export const Emptying: Story = {
+	render: () => (
+		<Frame>
+			<EmptyTrashBar {...base} isEmptying />
+		</Frame>
+	),
+};
+
+/**
+ * What the run reported, straight from the service. A second press re-marks
+ * the same rows and honestly reports the same N — never 0 over an expunge.
+ */
+export const Emptied: Story = {
+	render: () => (
+		<Frame>
+			<EmptyTrashBar {...base} deletedCount={128} />
+		</Frame>
+	),
+};
+
+/**
+ * reader matched the folder by name and nobody confirmed it. The words are
+ * `deleteConfirmationCopy`'s, so the dialog and this strip say the same thing.
+ */
+export const RefusedUnconfirmed: Story = {
+	name: "Refused (unconfirmed)",
+	render: () => (
+		<Frame>
+			<EmptyTrashBar {...base} refusalReason="unconfirmed" />
+		</Frame>
+	),
+};
+
+/** The folder the user chose is gone from the mail server, and is named. */
+export const RefusedStale: Story = {
+	name: "Refused (stale)",
+	render: () => (
+		<Frame>
+			<EmptyTrashBar
+				{...base}
+				refusalReason="stale"
+				staleFolderLabel="Archive/Bin"
+			/>
+		</Frame>
+	),
+};
+
+/** Nothing on this account is set as Trash, so there is nothing to empty. */
+export const RefusedNone: Story = {
+	name: "Refused (none)",
+	render: () => (
+		<Frame>
+			<EmptyTrashBar {...base} refusalReason="none" />
+		</Frame>
+	),
+};

package/src/components/ui/folder-role-refusal.test.ts

@@ -0,0 +1,94 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	isFolderRoleRefusal,
+	isMailboxNotSettledRefusal,
+} from "./folder-role-refusal.js";
+
+const refusal = {
+	code: "folder_role_unresolved",
+	message: "No folder is appointed as Trash",
+	details: { role: "Trash", reason: "none", accountId: "acct-1" },
+};
+
+describe("isFolderRoleRefusal", () => {
+	it("carries the account and the reason the prompt needs", () => {
+		assert.deepEqual(isFolderRoleRefusal(refusal), {
+			reason: "none",
+			role: "Trash",
+			accountId: "acct-1",
+		});
+	});
+
+	it("reads every reason the API declares", () => {
+		for (const reason of ["none", "stale", "unconfirmed"]) {
+			assert.equal(
+				isFolderRoleRefusal({
+					...refusal,
+					details: { ...refusal.details, reason },
+				})?.reason,
+				reason,
+			);
+		}
+	});
+
+	it("does not open the prompt for a 409 without the code", () => {
+		assert.equal(
+			isFolderRoleRefusal({
+				message: "No folder is appointed as Trash",
+				details: refusal.details,
+			}),
+			undefined,
+		);
+		assert.equal(
+			isFolderRoleRefusal({ ...refusal, code: "mailbox_not_settled" }),
+			undefined,
+		);
+	});
+
+	it("never guesses at a message string", () => {
+		assert.equal(
+			isFolderRoleRefusal(new Error("folder_role_unresolved: Trash")),
+			undefined,
+		);
+	});
+
+	it("refuses a body missing anything the prompt has to have", () => {
+		assert.equal(isFolderRoleRefusal({ ...refusal, details: {} }), undefined);
+		assert.equal(
+			isFolderRoleRefusal({
+				...refusal,
+				details: { role: "Trash", reason: "sideways", accountId: "acct-1" },
+			}),
+			undefined,
+		);
+		assert.equal(
+			isFolderRoleRefusal({
+				...refusal,
+				details: { role: "Trash", reason: "none" },
+			}),
+			undefined,
+		);
+	});
+
+	it("survives anything a network layer might throw", () => {
+		for (const value of [undefined, null, "boom", 409, []]) {
+			assert.equal(isFolderRoleRefusal(value), undefined);
+		}
+	});
+});
+
+describe("isMailboxNotSettledRefusal", () => {
+	it("matches only the appointment write's own refusal", () => {
+		assert.equal(
+			isMailboxNotSettledRefusal({
+				code: "mailbox_not_settled",
+				message: "Mailbox is still being created",
+				details: { mailboxId: "mbx-1", syncStatus: "pending" },
+			}),
+			true,
+		);
+		assert.equal(isMailboxNotSettledRefusal(refusal), false);
+		assert.equal(isMailboxNotSettledRefusal(new Error("pending")), false);
+	});
+});

package/src/components/ui/folder-role-refusal.ts

@@ -0,0 +1,81 @@
+/**
+ * The coded 409 a destructive action is refused with when the folder role it
+ * needs is unsettled (#887). Read the `code`, never the message: the copy is
+ * free to change and a message-string match would silently start opening the
+ * appointment prompt over an unrelated conflict. A 409 without one of these
+ * codes is somebody else's error and keeps today's banner.
+ */
+import type {
+	ApiError,
+	RemitImapCanonicalMailboxRole,
+} from "@remit/api-http-client/types.gen.ts";
+import { CanonicalMailboxRole } from "@remit/domain-enums";
+
+/** Why the role is unresolved, as the API's `details.reason` spells it. */
+export type FolderRoleRefusalReason = "none" | "stale" | "unconfirmed";
+
+/** `FolderRoleConflict`'s `details`, narrowed to the values the prompt needs. */
+export interface FolderRoleRefusal {
+	reason: FolderRoleRefusalReason;
+	role: RemitImapCanonicalMailboxRole;
+	accountId: string;
+}
+
+const REASONS: ReadonlySet<string> = new Set<FolderRoleRefusalReason>([
+	"none",
+	"stale",
+	"unconfirmed",
+]);
+
+const ROLES: ReadonlySet<string> = new Set(Object.values(CanonicalMailboxRole));
+
+/**
+ * The wire body as `handleError` emits it — flat, so `code` and `details` sit
+ * at the top level. Everything is re-checked at runtime: this is a network
+ * boundary, and the type only says what the contract promises.
+ */
+const bodyOf = (error: unknown): Partial<ApiError> | undefined =>
+	typeof error === "object" && error !== null
+		? (error as Partial<ApiError>)
+		: undefined;
+
+const stringAt = (
+	details: ApiError["details"],
+	key: string,
+): string | undefined => {
+	const value = details?.[key];
+	return typeof value === "string" ? value : undefined;
+};
+
+/**
+ * The refusal, or `undefined` for every other failure. Every fact the prompt
+ * needs travels with it: the account to appoint on (the delete endpoint's body
+ * carries none), the role, and the reason, which decides the framing.
+ */
+export const isFolderRoleRefusal = (
+	error: unknown,
+): FolderRoleRefusal | undefined => {
+	const body = bodyOf(error);
+	if (body?.code !== "folder_role_unresolved") return undefined;
+	const { details } = body;
+	if (typeof details !== "object" || details === null) return undefined;
+	const reason = stringAt(details, "reason");
+	const role = stringAt(details, "role");
+	const accountId = stringAt(details, "accountId");
+	if (!reason || !REASONS.has(reason)) return undefined;
+	if (!role || !ROLES.has(role) || !accountId) return undefined;
+	return {
+		reason: reason as FolderRoleRefusalReason,
+		role: role as RemitImapCanonicalMailboxRole,
+		accountId,
+	};
+};
+
+/**
+ * The appointment write's own refusal: the mailbox is still being created or
+ * deleted on the mail server, so it cannot hold a role yet. A different
+ * sentence with a different remedy from a network failure — waiting fixes this
+ * one, retrying does not.
+ */
+export const isMailboxNotSettledRefusal = (error: unknown): boolean =>
+	bodyOf(error)?.code === "mailbox_not_settled";

package/src/hooks/useArchiveMailbox.ts

@@ -5,6 +5,7 @@ import type {
 } from "@remit/api-http-client/types.gen.ts";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
+import type { TrashResolution } from "@/lib/format";
 
 /**
  * RFC 032 exclusive-folder-appointment (#976): every "which mailbox plays
@@ -80,6 +81,17 @@ export const useJunkMailbox = (
 	return { junkMailboxId: mailboxId, isLoading };
 };
 
+/**
+ * Returns the account's appointed Trash mailbox id, which is how the mailbox
+ * pane tells it is looking at Trash and may offer to empty it (#847).
+ */
+export const useTrashMailbox = (
+	accountId: string | undefined,
+): { trashMailboxId: string | undefined; isLoading: boolean } => {
+	const { mailboxId, isLoading } = useFolderRoleMailbox(accountId, "Trash");
+	return { trashMailboxId: mailboxId, isLoading };
+};
+
 /**
  * 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
@@ -99,7 +111,7 @@ export const useJunkMailbox = (
  * move over an expunge that would replay on reconnect.
  */
 export const useTrashByAccount = (): {
-	trashByAccount: ReadonlyMap<string, string | undefined>;
+	trashByAccount: ReadonlyMap<string, TrashResolution>;
 	hasAppointments: boolean;
 	isError: boolean;
 } => {
@@ -109,12 +121,16 @@ export const useTrashByAccount = (): {
 	});
 
 	const trashByAccount = useMemo(() => {
-		const byAccount = new Map<string, string | undefined>();
+		const byAccount = new Map<string, TrashResolution>();
 		for (const account of config?.accounts ?? []) {
-			byAccount.set(
-				account.accountId,
-				account.folderAppointments.find((fa) => fa.role === "Trash")?.mailboxId,
+			const trash = account.folderAppointments.find(
+				(appointment) => appointment.role === "Trash",
 			);
+			byAccount.set(account.accountId, {
+				mailboxId: trash?.mailboxId,
+				source: trash?.source ?? "None",
+				staleFolderPath: trash?.staleAppointmentPath,
+			});
 		}
 		return byAccount;
 	}, [config]);

package/src/hooks/useCurrentMailboxName.ts

@@ -97,3 +97,36 @@ export const useCurrentMailboxUnseenCount = ({
 
 	return null;
 };
+
+/**
+ * The current mailbox's total message count, from the same warm-cache mailbox
+ * query. `0` while it is unresolvable, so a surface gated on "holds at least
+ * one message" — Empty Trash (#847) — stays down rather than offering a verb
+ * over a folder nothing is known about yet.
+ */
+export const useCurrentMailboxMessageCount = ({
+	accounts,
+}: UseCurrentMailboxNameOptions): number => {
+	const params = useParams({ strict: false });
+	const mailboxId = (params as { mailboxId?: string }).mailboxId;
+
+	const queries = useQueries({
+		queries: accounts.map((account) => ({
+			...mailboxOperationsListMailboxesOptions({
+				path: { accountId: account.accountId },
+			}),
+			staleTime: Infinity,
+		})),
+	});
+
+	if (!mailboxId) return 0;
+
+	for (const query of queries) {
+		const items = query.data?.items;
+		if (!items) continue;
+		const match = items.find((mailbox) => mailbox.mailboxId === mailboxId);
+		if (match) return match.messageCount;
+	}
+
+	return 0;
+};

package/src/hooks/useDeleteMessages.ts

@@ -5,9 +5,11 @@ import {
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import { useRoleAppointmentPrompt } from "@/components/mail/RoleAppointmentPromptProvider";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorDetail } from "@/components/ui/error-banners";
+import { isFolderRoleRefusal } from "@/components/ui/folder-role-refusal";
 import { resolveMailboxesForMessages } from "@/hooks/useMarkAsRead";
 import { runChunkedMutation } from "@/lib/bulk-actions";
 import {
@@ -75,6 +77,14 @@ export const useDeleteMessages = ({
 }: UseDeleteMessagesOptions) => {
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
+	const { requestAppointment } = useRoleAppointmentPrompt();
+
+	// The refused chunk is not what the user asked for. The whole selection is
+	// held here so the appointment's confirm replays all of it (#887).
+	const selectionRef = useRef<string[]>([]);
+	const runRef = useRef<(messageIds: string[]) => Promise<void>>(
+		async () => {},
+	);
 
 	const { mutateAsync, isPending } = useMutation({
 		...messageBulkOperationsDeleteMessagesMutation(),
@@ -149,6 +159,21 @@ export const useDeleteMessages = ({
 				}
 				restoreThreadListQueries(queryClient, context.previousThreadsList);
 			}
+			// A provenance refusal is answered by the prompt, not by a banner: the
+			// generic banner is suppressed for this one error, and every other
+			// failure keeps today's.
+			const refusal = isFolderRoleRefusal(err);
+			if (refusal) {
+				const replay = selectionRef.current;
+				requestAppointment({
+					accountId: refusal.accountId,
+					role: refusal.role,
+					reason: refusal.reason,
+					action: { kind: "delete", count: replay.length },
+					onAppointed: () => runRef.current(replay),
+				});
+				return;
+			}
 			const count = vars.body.messageIds?.length ?? 0;
 			pushError({
 				title:
@@ -177,14 +202,25 @@ export const useDeleteMessages = ({
 		},
 	});
 
+	const runSelection = useCallback(
+		(messageIds: string[]): Promise<void> =>
+			runChunkedMutation(messageIds, (chunk) =>
+				mutateAsync({ body: { messageIds: chunk } }),
+			),
+		[mutateAsync],
+	);
+
+	useEffect(() => {
+		runRef.current = runSelection;
+	}, [runSelection]);
+
 	const deleteMessages = useCallback(
 		(messageIds: string[]) => {
 			if (messageIds.length === 0) return;
-			void runChunkedMutation(messageIds, (chunk) =>
-				mutateAsync({ body: { messageIds: chunk } }),
-			);
+			selectionRef.current = messageIds;
+			void runSelection(messageIds);
 		},
-		[mutateAsync],
+		[runSelection],
 	);
 
 	return { deleteMessages, isPending };

package/src/hooks/useDeleteOutcome.ts

@@ -11,7 +11,9 @@
  * 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.
+ * only the read that feeds it. The two facts beside it are what the copy needs
+ * to name a folder: whether the Trash it resolved is a name match nobody
+ * confirmed (D4a), and the folder a stale appointment lost.
  */
 import { useMemo } from "react";
 import {
@@ -21,15 +23,43 @@ import {
 } from "@/lib/format";
 import { useTrashByAccount } from "./useArchiveMailbox";
 
+export interface DeleteOutcomeResult {
+	outcome: DeleteOutcome;
+	/** The Trash these rows resolve to was matched by name, never confirmed. */
+	trashIsUnconfirmed: boolean;
+	/** The folder the user appointed, when it is gone from the mail server. */
+	staleFolderLabel?: string;
+}
+
 /** The outcome of deleting `targets`. */
 export const useDeleteOutcome = (
 	targets: readonly DeleteTarget[],
-): DeleteOutcome => {
+): DeleteOutcomeResult => {
 	const { trashByAccount, hasAppointments, isError } = useTrashByAccount();
 
-	return useMemo(
-		() =>
-			deleteOutcomeFor({ targets, trashByAccount, hasAppointments, isError }),
-		[targets, trashByAccount, hasAppointments, isError],
-	);
+	return useMemo(() => {
+		const outcome = deleteOutcomeFor({
+			targets,
+			trashByAccount,
+			hasAppointments,
+			isError,
+		});
+		const trashFor = (target: DeleteTarget) =>
+			target.accountId ? trashByAccount.get(target.accountId) : undefined;
+		return {
+			outcome,
+			// Only the rows the delete would actually expunge — a row filed
+			// somewhere else says nothing about the folder it is moving into.
+			trashIsUnconfirmed: targets.some((target) => {
+				const trash = trashFor(target);
+				return (
+					trash?.source === "Proposed" && trash.mailboxId === target.mailboxId
+				);
+			}),
+			// The account `deleteOutcomeFor` refused on, found the way it found it.
+			staleFolderLabel: targets
+				.map(trashFor)
+				.find((trash) => trash?.source === "Stale")?.staleFolderPath,
+		};
+	}, [targets, trashByAccount, hasAppointments, isError]);
 };