@remit/web-client 0.0.190 → 0.0.192

package/src/components/mail/EmptyTrashBar.tsx

@@ -0,0 +1,181 @@
+import { Banner, Button, ConfirmDialog } from "@remit/ui";
+import { Trash2 } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import type { FolderRoleRefusalReason } from "@/components/ui/folder-role-refusal";
+import { deleteConfirmationCopy, formatNumber } from "@/lib/format";
+
+const quantified = (count: number): string =>
+	count === 1 ? "1 message" : `${formatNumber(count)} messages`;
+
+export interface EmptyTrashConfirmCopy {
+	title: string;
+	description: string;
+	confirmLabel: string;
+}
+
+/** The confirmation the button opens, worded for an expunge. */
+export const emptyTrashConfirmCopy = (
+	count: number,
+): EmptyTrashConfirmCopy => ({
+	title: "Empty Trash?",
+	description: `${quantified(count)} ${count === 1 ? "is" : "are"} erased from the mail server and cannot be restored.`,
+	confirmLabel: "Empty Trash",
+});
+
+export interface EmptyTrashRefusalCopy {
+	headline: string;
+	body: string;
+	actionLabel: string;
+}
+
+export interface EmptyTrashRefusalContext {
+	/** The folder reader guessed, for `unconfirmed`. */
+	trashFolderLabel?: string;
+	/** The folder that vanished, for `stale`. */
+	staleFolderLabel?: string;
+}
+
+/**
+ * What the strip says when the server refused. `unconfirmed` borrows
+ * `deleteConfirmationCopy`'s words so the dialog and this strip cannot drift
+ * apart on the one refusal both can raise (#887 F4).
+ */
+export const emptyTrashRefusalCopy = (
+	reason: FolderRoleRefusalReason,
+	context: EmptyTrashRefusalContext = {},
+): EmptyTrashRefusalCopy => {
+	const { trashFolderLabel, staleFolderLabel } = context;
+
+	if (reason === "unconfirmed") {
+		const copy = deleteConfirmationCopy(0, "unconfirmed", { trashFolderLabel });
+		return {
+			headline: copy.title,
+			body: copy.description,
+			actionLabel: copy.confirmLabel,
+		};
+	}
+	if (reason === "stale") {
+		return {
+			headline: "Nothing was emptied.",
+			body: staleFolderLabel
+				? `The folder you chose for Trash — ${staleFolderLabel} — is gone from the mail server.`
+				: "The folder you chose for Trash is gone from the mail server.",
+			actionLabel: "Pick another folder",
+		};
+	}
+	return {
+		headline: "Nothing was emptied.",
+		body: "No folder on this account is set as Trash.",
+		actionLabel: "Pick a folder",
+	};
+};
+
+export interface EmptyTrashBarProps extends EmptyTrashRefusalContext {
+	/** Messages the open Trash folder holds. */
+	messageCount: number;
+	isEmptying: boolean;
+	/** The service's own count, from the run that just finished. */
+	deletedCount?: number;
+	/** The reason the server refused, kept until the user acts on it. */
+	refusalReason?: FolderRoleRefusalReason;
+	onEmpty: () => void;
+	/** Opens the appointment prompt for the standing refusal. */
+	onRepair: () => void;
+	children: ReactNode;
+}
+
+/**
+ * The Empty Trash strip above the Trash folder's list, and the refusals the
+ * server answers it with (#847). The button always acts — it is never
+ * pre-refused from what the client thinks the appointment is, because the 409
+ * is the authority and a warning over a folder nobody has tried to empty is
+ * noise.
+ */
+export function EmptyTrashBar({
+	messageCount,
+	isEmptying,
+	deletedCount,
+	refusalReason,
+	trashFolderLabel,
+	staleFolderLabel,
+	onEmpty,
+	onRepair,
+	children,
+}: EmptyTrashBarProps) {
+	const [confirming, setConfirming] = useState(false);
+
+	// The folder is emptied and nothing was refused: there is no verb left to
+	// offer. A standing refusal or a report of what went outlives the rows,
+	// so the user is never left to guess what the press did.
+	if (
+		messageCount < 1 &&
+		refusalReason === undefined &&
+		deletedCount === undefined
+	)
+		return <>{children}</>;
+
+	const refusal = refusalReason
+		? emptyTrashRefusalCopy(refusalReason, {
+				trashFolderLabel,
+				staleFolderLabel,
+			})
+		: undefined;
+	const confirm = emptyTrashConfirmCopy(messageCount);
+
+	return (
+		<div className="relative flex h-full min-h-0 flex-col">
+			<div className="shrink-0 px-row-inset pt-2">
+				<div className="flex flex-col gap-2 rounded-md border border-line px-3 py-2">
+					<div className="flex items-center justify-end gap-2">
+						{deletedCount !== undefined && (
+							<p className="mr-auto text-2xs text-fg-subtle" role="status">
+								{`${quantified(deletedCount)} erased from the mail server.`}
+							</p>
+						)}
+						<Button
+							variant="ghost"
+							size="sm"
+							icon={<Trash2 className="size-3.5" aria-hidden />}
+							disabled={isEmptying || messageCount < 1}
+							aria-busy={isEmptying}
+							onClick={() => setConfirming(true)}
+						>
+							{isEmptying ? "Emptying…" : "Empty Trash"}
+						</Button>
+					</div>
+					{refusal && (
+						<Banner tone="warning" variant="soft">
+							<div className="flex flex-col gap-2">
+								<p className="font-semibold text-fg">{refusal.headline}</p>
+								<p className="text-sm">{refusal.body}</p>
+								<Button
+									variant="primary"
+									size="sm"
+									className="self-start"
+									onClick={onRepair}
+								>
+									{refusal.actionLabel}
+								</Button>
+							</div>
+						</Banner>
+					)}
+				</div>
+			</div>
+			<div className="min-h-0 flex-1">{children}</div>
+			<ConfirmDialog
+				isOpen={confirming}
+				title={confirm.title}
+				description={confirm.description}
+				confirmLabel={confirm.confirmLabel}
+				destructive
+				// The dialog hands the decision over and closes; the in-flight state
+				// lives on the strip's own button, which is where the verb is.
+				onConfirm={() => {
+					setConfirming(false);
+					onEmpty();
+				}}
+				onCancel={() => setConfirming(false)}
+			/>
+		</div>
+	);
+}

package/src/components/mail/MailboxPane.tsx

@@ -47,6 +47,7 @@ import {
 } from "react";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DraftsView } from "@/components/mail/DraftsView";
+import { EmptyTrashBar } from "@/components/mail/EmptyTrashBar";
 import { IntelligenceDrawer } from "@/components/mail/IntelligenceDrawer";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import {
@@ -60,8 +61,11 @@ import {
 	useArchiveMailbox,
 	useDraftsMailbox,
 	useJunkMailbox,
+	useTrashByAccount,
+	useTrashMailbox,
 } from "@/hooks/useArchiveMailbox";
 import {
+	useCurrentMailboxMessageCount,
 	useCurrentMailboxName,
 	useCurrentMailboxUnseenCount,
 } from "@/hooks/useCurrentMailboxName";
@@ -69,6 +73,7 @@ import {
 	dropDeletedThreads,
 	useDeleteMessages,
 } from "@/hooks/useDeleteMessages";
+import { useEmptyTrash } from "@/hooks/useEmptyTrash";
 import type { EscalationSearchQuery } from "@/hooks/useEscalatedActions";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
 import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
@@ -886,6 +891,18 @@ function MailboxList() {
 	const listTitle = mailboxName ?? "Inbox";
 	const preset = useMemo(() => inboxFilterConfig(), []);
 
+	// Empty Trash, on the same test the Spam rescue strip uses: the open mailbox
+	// is the one this account appoints to the role. Whether it may be emptied is
+	// never decided here — the press goes to the server and the 409 answers it.
+	const { trashMailboxId } = useTrashMailbox(mailboxAccountId);
+	const trashMessageCount = useCurrentMailboxMessageCount({ accounts });
+	const { trashByAccount } = useTrashByAccount();
+	const emptyTrash = useEmptyTrash({
+		accountId: mailboxAccountId,
+		mailboxId,
+	});
+	const isTrashFolder = trashMailboxId != null && trashMailboxId === mailboxId;
+
 	// The account owning this folder — undefined for the instant before
 	// `useMailboxAccount` resolves it, which simply means there is nothing to
 	// refresh yet.
@@ -1025,7 +1042,7 @@ function MailboxList() {
 			messageList
 		);
 
-	const body =
+	const spamBody =
 		isSpamFolder && rescueCandidates.length > 0 && mailboxAccountId ? (
 			<SpamRescue
 				accountId={mailboxAccountId}
@@ -1039,6 +1056,27 @@ function MailboxList() {
 			listBody
 		);
 
+	const body = isTrashFolder ? (
+		<EmptyTrashBar
+			messageCount={trashMessageCount}
+			isEmptying={emptyTrash.isEmptying}
+			deletedCount={emptyTrash.deletedCount}
+			refusalReason={emptyTrash.refusal?.reason}
+			trashFolderLabel={mailboxName ?? undefined}
+			staleFolderLabel={
+				mailboxAccountId
+					? trashByAccount.get(mailboxAccountId)?.staleFolderPath
+					: undefined
+			}
+			onEmpty={emptyTrash.emptyTrash}
+			onRepair={emptyTrash.repair}
+		>
+			{spamBody}
+		</EmptyTrashBar>
+	) : (
+		spamBody
+	);
+
 	return (
 		<MailViewChrome
 			title={listTitle}

package/src/components/mail/MessageList.tsx

@@ -304,7 +304,11 @@ export const MessageList = ({
 		() => [{ accountId, mailboxId }],
 		[accountId, mailboxId],
 	);
-	const deleteOutcome = useDeleteOutcome(deleteScope);
+	const {
+		outcome: deleteOutcome,
+		trashIsUnconfirmed,
+		staleFolderLabel,
+	} = useDeleteOutcome(deleteScope);
 
 	// Selection state
 	const {
@@ -688,76 +692,75 @@ export const MessageList = ({
 
 	// Confirm handler: run the actual delete, then clear selection and move
 	// focus to a sensible neighbor (the row after the first deleted one).
-	const handleConfirmDelete = useCallback(() => {
-		if (!pendingDelete) return;
-
-		const ids = pendingDelete;
-		if (ids.length === 0) {
-			setPendingDelete(null);
-			return;
-		}
-
-		const deletedSet = new Set(ids);
-		const firstDeletedIndex = threads.findIndex((t) =>
-			deletedSet.has(t.messageId),
-		);
-		// Next surviving row at or after the first deleted row, else the one
-		// before it. Computed against the pre-delete order.
-		let nextFocus: string | undefined;
-		for (let i = firstDeletedIndex + 1; i < threads.length; i++) {
-			if (!deletedSet.has(threads[i].messageId)) {
-				nextFocus = threads[i].messageId;
-				break;
+	const handleConfirmDelete = useCallback(
+		(ids: string[]) => {
+			if (ids.length === 0) {
+				setPendingDelete(null);
+				return;
 			}
-		}
-		if (nextFocus === undefined) {
-			for (let i = firstDeletedIndex - 1; i >= 0; i--) {
+
+			const deletedSet = new Set(ids);
+			const firstDeletedIndex = threads.findIndex((t) =>
+				deletedSet.has(t.messageId),
+			);
+			// Next surviving row at or after the first deleted row, else the one
+			// before it. Computed against the pre-delete order.
+			let nextFocus: string | undefined;
+			for (let i = firstDeletedIndex + 1; i < threads.length; i++) {
 				if (!deletedSet.has(threads[i].messageId)) {
 					nextFocus = threads[i].messageId;
 					break;
 				}
 			}
-		}
+			if (nextFocus === undefined) {
+				for (let i = firstDeletedIndex - 1; i >= 0; i--) {
+					if (!deletedSet.has(threads[i].messageId)) {
+						nextFocus = threads[i].messageId;
+						break;
+					}
+				}
+			}
 
-		onDeleteMessages?.(ids);
-		exitSelection();
-		focusBeforeConfirmRef.current = null;
-		setPendingDelete(null);
+			onDeleteMessages?.(ids);
+			exitSelection();
+			focusBeforeConfirmRef.current = null;
+			setPendingDelete(null);
 
-		if (nextFocus !== undefined) {
-			// Same hand-back as cancelling, aimed at the surviving neighbour
-			// instead: confirming also closes a dialog that held DOM focus.
-			pendingDomFocusRef.current = nextFocus;
-			cursorMovedByPointerRef.current = false;
-			setFocusedMessageId(nextFocus);
-			// Desktop is two-pane: opening the neighbour fills the reading pane
-			// beside the list. On a single-pane mobile layout the same navigation
-			// replaces the list with a full-screen message, so a bulk delete looks
-			// like it opened a random neighbour instead of removing the rows (#202).
-			// Mobile keeps the cursor move but stays on the list.
-			if (isDesktop) {
-				openRow(nextFocus, { replace: true });
+			if (nextFocus !== undefined) {
+				// Same hand-back as cancelling, aimed at the surviving neighbour
+				// instead: confirming also closes a dialog that held DOM focus.
+				pendingDomFocusRef.current = nextFocus;
+				cursorMovedByPointerRef.current = false;
+				setFocusedMessageId(nextFocus);
+				// Desktop is two-pane: opening the neighbour fills the reading pane
+				// beside the list. On a single-pane mobile layout the same navigation
+				// replaces the list with a full-screen message, so a bulk delete looks
+				// like it opened a random neighbour instead of removing the rows (#202).
+				// Mobile keeps the cursor move but stays on the list.
+				if (isDesktop) {
+					openRow(nextFocus, { replace: true });
+				}
 			}
-		}
 
-		// Mobile keeps the list up, so it needs its own signal the delete landed
-		// (#202). On desktop the rows leaving the list beside the reading pane is
-		// signal enough.
-		if (!isDesktop) {
-			setCompletionBanner(
-				bulkActionCompletionText("delete", ids.length, deleteOutcome),
-			);
-		}
-	}, [
-		pendingDelete,
-		threads,
-		onDeleteMessages,
-		exitSelection,
-		openRow,
-		isDesktop,
-		setFocusedMessageId,
-		deleteOutcome,
-	]);
+			// Mobile keeps the list up, so it needs its own signal the delete landed
+			// (#202). On desktop the rows leaving the list beside the reading pane is
+			// signal enough.
+			if (!isDesktop) {
+				setCompletionBanner(
+					bulkActionCompletionText("delete", ids.length, deleteOutcome),
+				);
+			}
+		},
+		[
+			threads,
+			onDeleteMessages,
+			exitSelection,
+			openRow,
+			isDesktop,
+			setFocusedMessageId,
+			deleteOutcome,
+		],
+	);
 
 	// Every way out of the confirmation that isn't the delete — Escape, Cancel,
 	// the backdrop — arrives here, so this is the one place the keyboard has to
@@ -1343,8 +1346,14 @@ export const MessageList = ({
 			/>
 			<DeleteConfirmDialog
 				isOpen={pendingDelete !== null}
-				count={pendingDelete?.length ?? 0}
+				messageIds={pendingDelete ?? []}
 				outcome={deleteOutcome}
+				accountId={accountId}
+				// Every row here is filed in the open mailbox, so on an expunge that
+				// mailbox is the Trash the copy has to name.
+				trashFolderLabel={listTitle}
+				staleFolderLabel={staleFolderLabel}
+				trashIsUnconfirmed={trashIsUnconfirmed}
 				isDeleting={isDeleting}
 				onConfirm={handleConfirmDelete}
 				onCancel={handleCancelDelete}