@remit/web-client 0.0.71 → 0.0.72

package/src/components/settings/DeleteFolderDialog.tsx

@@ -0,0 +1,308 @@
+import type {
+	RemitImapFolderAppointment,
+	RemitImapMailboxResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	Banner,
+	Button,
+	Dialog,
+	type MoveMailboxOption,
+	MoveMailboxPicker,
+} from "@remit/ui";
+import { AlertTriangle, FolderInput, Loader2, Trash2, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCreateMailbox } from "@/hooks/useCreateMailbox";
+import { useDeleteFolder } from "@/hooks/useDeleteFolder";
+import {
+	excludeFolder,
+	initialStage,
+	moveProgressLabel,
+} from "@/lib/delete-folder";
+import { getMailboxDisplayName } from "@/lib/folder-roles";
+import { buildMoveTargets } from "@/lib/move-targets";
+
+interface DeleteFolderDialogProps {
+	open: boolean;
+	accountId: string;
+	folder: RemitImapMailboxResponse;
+	mailboxes: readonly RemitImapMailboxResponse[];
+	appointments: readonly RemitImapFolderAppointment[];
+	onClose: () => void;
+}
+
+type FateStage =
+	| "confirm-empty"
+	| "choose-fate"
+	| "confirm-delete-all"
+	| "pick-destination";
+
+const folderLabel = (folder: RemitImapMailboxResponse): string =>
+	folder.displayNameOverride?.trim() || getMailboxDisplayName(folder.fullPath);
+
+const emailCount = (count: number): string =>
+	`${count} ${count === 1 ? "email" : "emails"}`;
+
+/**
+ * Per-folder delete wizard. An empty folder is a single destructive confirm; a
+ * folder with mail first asks what happens to the messages — delete them with
+ * the folder, or move them elsewhere (batched, with visible progress) before
+ * the now-empty folder is removed. Closing mid-move keeps already-moved mail
+ * moved; re-opening enumerates what's left and continues.
+ */
+export function DeleteFolderDialog({
+	open,
+	accountId,
+	folder,
+	mailboxes,
+	appointments,
+	onClose,
+}: DeleteFolderDialogProps) {
+	const [stage, setStage] = useState<FateStage>(() =>
+		initialStage(folder.messageCount),
+	);
+	const { createFolder } = useCreateMailbox(accountId);
+	const {
+		phase,
+		progress,
+		errorMessage,
+		deleteMailbox,
+		moveThenDelete,
+		cancel,
+		reset,
+	} = useDeleteFolder({
+		accountId,
+		mailboxId: folder.mailboxId,
+		onDeleted: onClose,
+	});
+
+	useEffect(() => {
+		if (!open) return;
+		setStage(initialStage(folder.messageCount));
+		reset();
+	}, [open, folder.messageCount, reset]);
+
+	useEffect(() => cancel, [cancel]);
+
+	const handleClose = useCallback(() => {
+		cancel();
+		onClose();
+	}, [cancel, onClose]);
+
+	const destinations = useMemo<MoveMailboxOption[]>(
+		() =>
+			excludeFolder(
+				buildMoveTargets(mailboxes, appointments),
+				folder.mailboxId,
+			).map((mailbox) => ({
+				id: mailbox.mailboxId,
+				label: getMailboxDisplayName(mailbox.fullPath),
+				searchValue: mailbox.fullPath,
+			})),
+		[mailboxes, appointments, folder.mailboxId],
+	);
+
+	const handleCreateFolder = async (
+		name: string,
+	): Promise<MoveMailboxOption> => {
+		const created = await createFolder(name);
+		return { id: created.id, label: created.label };
+	};
+
+	if (!open) return null;
+
+	const name = folderLabel(folder);
+	const title = `Delete ${name}`;
+
+	const body = (() => {
+		if (phase === "moving") {
+			return (
+				<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
+					<Loader2 className="size-8 animate-spin text-accent-2" />
+					<p className="text-sm font-medium text-fg">Moving emails…</p>
+					<p className="text-xs text-fg-muted" role="status" aria-live="polite">
+						{progress ? moveProgressLabel(progress) : "Moved 0 of 0"}
+					</p>
+				</div>
+			);
+		}
+
+		if (phase === "deleting" || phase === "done") {
+			return (
+				<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
+					<Loader2 className="size-8 animate-spin text-accent-2" />
+					<p className="text-sm font-medium text-fg">Deleting folder…</p>
+				</div>
+			);
+		}
+
+		if (phase === "error") {
+			return (
+				<div className="space-y-4 px-5 py-4">
+					<Banner tone="danger" variant="soft">
+						{errorMessage ?? "Something went wrong. Please try again."}
+					</Banner>
+					{progress && (
+						<p className="text-xs text-fg-muted">
+							{moveProgressLabel(progress)}. Already-moved emails stay moved —
+							re-open delete to continue with the rest.
+						</p>
+					)}
+					<div className="flex justify-end">
+						<Button variant="secondary" size="sm" onClick={handleClose}>
+							Close
+						</Button>
+					</div>
+				</div>
+			);
+		}
+
+		if (stage === "confirm-empty") {
+			return (
+				<>
+					<div className="space-y-3 px-5 py-4 text-sm text-fg-muted">
+						<p>
+							Delete <strong className="text-fg">{name}</strong>? This folder is
+							empty and will be removed from the server.
+						</p>
+					</div>
+					<footer className="flex items-center justify-end gap-2 border-t border-line px-5 py-3">
+						<Button variant="secondary" size="sm" onClick={handleClose}>
+							Cancel
+						</Button>
+						<Button
+							variant="danger"
+							size="sm"
+							icon={<Trash2 className="size-3.5" />}
+							onClick={() => deleteMailbox()}
+						>
+							Delete folder
+						</Button>
+					</footer>
+				</>
+			);
+		}
+
+		if (stage === "choose-fate") {
+			return (
+				<>
+					<div className="space-y-3 px-5 py-4 text-sm text-fg-muted">
+						<p>
+							<strong className="text-fg">{name}</strong> holds{" "}
+							{emailCount(folder.messageCount)}. What should happen to them?
+						</p>
+						<div className="space-y-2">
+							<button
+								type="button"
+								onClick={() => setStage("confirm-delete-all")}
+								className="flex w-full items-center gap-3 rounded-sm border border-line px-3 py-2.5 text-left hover:bg-surface-raised"
+							>
+								<Trash2 className="size-4 shrink-0 text-danger" />
+								<span className="flex-1">
+									<span className="block text-sm font-medium text-fg">
+										Delete them with the folder
+									</span>
+									<span className="block text-xs text-fg-muted">
+										The emails are removed from the server and can't be
+										recovered.
+									</span>
+								</span>
+							</button>
+							<button
+								type="button"
+								onClick={() => setStage("pick-destination")}
+								className="flex w-full items-center gap-3 rounded-sm border border-line px-3 py-2.5 text-left hover:bg-surface-raised"
+							>
+								<FolderInput className="size-4 shrink-0 text-accent-2" />
+								<span className="flex-1">
+									<span className="block text-sm font-medium text-fg">
+										Move them to another folder
+									</span>
+									<span className="block text-xs text-fg-muted">
+										Keep the emails, then delete the emptied folder.
+									</span>
+								</span>
+							</button>
+						</div>
+					</div>
+					<footer className="flex items-center justify-end gap-2 border-t border-line px-5 py-3">
+						<Button variant="secondary" size="sm" onClick={handleClose}>
+							Cancel
+						</Button>
+					</footer>
+				</>
+			);
+		}
+
+		if (stage === "confirm-delete-all") {
+			return (
+				<>
+					<div className="space-y-3 px-5 py-4 text-sm text-fg-muted">
+						<p>
+							Delete <strong className="text-fg">{name}</strong> and its{" "}
+							{emailCount(folder.messageCount)}? The messages are removed from
+							the server with the folder and can't be recovered.
+						</p>
+					</div>
+					<footer className="flex items-center justify-end gap-2 border-t border-line px-5 py-3">
+						<Button
+							variant="secondary"
+							size="sm"
+							onClick={() => setStage("choose-fate")}
+						>
+							Back
+						</Button>
+						<Button
+							variant="danger"
+							size="sm"
+							icon={<Trash2 className="size-3.5" />}
+							onClick={() => deleteMailbox()}
+						>
+							Delete folder and emails
+						</Button>
+					</footer>
+				</>
+			);
+		}
+
+		return (
+			<div className="flex h-80 flex-col">
+				<p className="px-5 pt-4 text-sm text-fg-muted">
+					Move the {emailCount(folder.messageCount)} in{" "}
+					<strong className="text-fg">{name}</strong> to:
+				</p>
+				<div className="min-h-0 flex-1 px-2 py-2">
+					<MoveMailboxPicker
+						mailboxes={destinations}
+						onSelect={(destinationMailboxId) =>
+							moveThenDelete(destinationMailboxId)
+						}
+						onCreateFolder={handleCreateFolder}
+						onCancel={() => setStage("choose-fate")}
+						labels={{
+							searchPlaceholder: "Move emails to…",
+							optionLabel: (label) => `Move to ${label}`,
+							createLabel: (query) => `Create "${query}"`,
+						}}
+					/>
+				</div>
+			</div>
+		);
+	})();
+
+	return (
+		<Dialog open={open} onClose={handleClose} title={title}>
+			<header className="flex items-center gap-2 border-b border-line px-5 py-3">
+				<AlertTriangle className="size-4 shrink-0 text-danger" />
+				<span className="flex-1 text-sm font-semibold text-fg">{title}</span>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<X className="size-3.5" />}
+					onClick={handleClose}
+					aria-label="Cancel"
+				/>
+			</header>
+			{body}
+		</Dialog>
+	);
+}

package/src/hooks/useDeleteFolder.ts

@@ -0,0 +1,267 @@
+import {
+	configOperationsGetConfigQueryKey,
+	mailboxOperationsListMailboxesQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	mailboxDetailOperationsDeleteMailbox,
+	mailboxOperationsListMailboxes,
+	messageBulkOperationsMoveMessages,
+	threadOperationsListThreads,
+} from "@remit/api-http-client/sdk.gen.ts";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useRef, useState } from "react";
+import {
+	advanceMove,
+	beginMove,
+	failMove,
+	MOVE_BATCH_SIZE,
+	type MoveProgress,
+} from "@/lib/delete-folder";
+
+const PAGE_CAP = 50;
+
+type Outcome<T> = { ok: true; value: T } | { ok: false; error: string };
+
+const errorText = (error: unknown): string =>
+	error instanceof Error ? error.message : "Something went wrong.";
+
+/**
+ * Run a network call to a branchable result instead of a thrown exception, so
+ * the caller can surface a failed batch to the UI without a block catch (the
+ * fail-fast lint rule reserves those for rethrows).
+ */
+const attempt = <T>(work: Promise<T>): Promise<Outcome<T>> =>
+	work.then(
+		(value) => ({ ok: true as const, value }),
+		(error) => ({ ok: false as const, error: errorText(error) }),
+	);
+
+/**
+ * Collect up to `limit` message ids still living in the mailbox, skipping ones
+ * already moved this run and anything flagged deleted. Reads fresh from the
+ * server every call so a resumed or interrupted move enumerates what is
+ * actually left, never a stale snapshot.
+ */
+const collectMovableIds = async (
+	mailboxId: string,
+	alreadyMoved: ReadonlySet<string>,
+	limit: number,
+	signal: AbortSignal,
+): Promise<string[]> => {
+	const ids: string[] = [];
+	let continuationToken: string | undefined;
+	for (let page = 0; page < PAGE_CAP; page += 1) {
+		if (signal.aborted) return ids;
+		const { data } = await threadOperationsListThreads({
+			path: { mailboxId },
+			query: { order: "desc", continuationToken },
+			throwOnError: true,
+		});
+		for (const item of data.items) {
+			if (item.isDeleted) continue;
+			if (alreadyMoved.has(item.messageId)) continue;
+			if (ids.includes(item.messageId)) continue;
+			ids.push(item.messageId);
+			if (ids.length >= limit) return ids;
+		}
+		if (!data.continuationToken) break;
+		continuationToken = data.continuationToken;
+	}
+	return ids;
+};
+
+/**
+ * Count live messages still listed in the mailbox with no `moved`-set filtering,
+ * an independent read the move loop cannot fool. The delete gates on this: if any
+ * message still shows here — including one that lags in the source listing after a
+ * move — the folder is not emptied yet and must not be deleted.
+ */
+const liveMessageCount = async (
+	mailboxId: string,
+	signal: AbortSignal,
+): Promise<number> => {
+	let count = 0;
+	let continuationToken: string | undefined;
+	for (let page = 0; page < PAGE_CAP; page += 1) {
+		if (signal.aborted) return count;
+		const { data } = await threadOperationsListThreads({
+			path: { mailboxId },
+			query: { order: "desc", continuationToken },
+			throwOnError: true,
+		});
+		for (const item of data.items) {
+			if (item.isDeleted) continue;
+			count += 1;
+		}
+		if (!data.continuationToken) break;
+		continuationToken = data.continuationToken;
+	}
+	return count;
+};
+
+export type DeleteFolderPhase =
+	| "idle"
+	| "moving"
+	| "deleting"
+	| "done"
+	| "error";
+
+interface UseDeleteFolderOptions {
+	accountId: string;
+	mailboxId: string;
+	onDeleted: () => void;
+}
+
+export function useDeleteFolder({
+	accountId,
+	mailboxId,
+	onDeleted,
+}: UseDeleteFolderOptions) {
+	const queryClient = useQueryClient();
+	const [phase, setPhase] = useState<DeleteFolderPhase>("idle");
+	const [progress, setProgress] = useState<MoveProgress | null>(null);
+	const [errorMessage, setErrorMessage] = useState<string>();
+	const abortRef = useRef<AbortController | null>(null);
+
+	const invalidate = useCallback(() => {
+		queryClient.invalidateQueries({
+			queryKey: mailboxOperationsListMailboxesQueryKey({ path: { accountId } }),
+		});
+		queryClient.invalidateQueries({
+			queryKey: configOperationsGetConfigQueryKey(),
+		});
+	}, [queryClient, accountId]);
+
+	const deleteMailbox = useCallback(async () => {
+		setPhase("deleting");
+		const outcome = await attempt(
+			mailboxDetailOperationsDeleteMailbox({
+				path: { accountId, mailboxId },
+				throwOnError: true,
+			}),
+		);
+		if (!outcome.ok) {
+			setErrorMessage(outcome.error);
+			setPhase("error");
+			return;
+		}
+		invalidate();
+		setPhase("done");
+		onDeleted();
+	}, [accountId, mailboxId, invalidate, onDeleted]);
+
+	const remainingCount = useCallback(
+		(): Promise<number> =>
+			mailboxOperationsListMailboxes({
+				path: { accountId },
+				throwOnError: true,
+			}).then(
+				({ data }) =>
+					data.items.find((box) => box.mailboxId === mailboxId)?.messageCount ??
+					0,
+			),
+		[accountId, mailboxId],
+	);
+
+	const cancel = useCallback(() => {
+		abortRef.current?.abort();
+	}, []);
+
+	const moveThenDelete = useCallback(
+		async (destinationMailboxId: string) => {
+			const controller = new AbortController();
+			abortRef.current = controller;
+			const { signal } = controller;
+			setPhase("moving");
+			setErrorMessage(undefined);
+
+			const counted = await attempt(remainingCount());
+			if (signal.aborted) return;
+			if (!counted.ok) {
+				setErrorMessage(counted.error);
+				setPhase("error");
+				return;
+			}
+			let current = beginMove(counted.value);
+			setProgress(current);
+
+			const moved = new Set<string>();
+			while (true) {
+				if (signal.aborted) return;
+				const collected = await attempt(
+					collectMovableIds(mailboxId, moved, MOVE_BATCH_SIZE, signal),
+				);
+				if (signal.aborted) return;
+				if (!collected.ok) {
+					current = failMove(current, collected.error);
+					setProgress(current);
+					setErrorMessage(collected.error);
+					setPhase("error");
+					return;
+				}
+				const batch = collected.value;
+				if (batch.length === 0) break;
+
+				const movedBatch = await attempt(
+					messageBulkOperationsMoveMessages({
+						body: { messageIds: batch, destinationMailboxId },
+						throwOnError: true,
+					}),
+				);
+				if (signal.aborted) return;
+				if (!movedBatch.ok) {
+					current = failMove(current, movedBatch.error);
+					setProgress(current);
+					setErrorMessage(movedBatch.error);
+					setPhase("error");
+					return;
+				}
+				for (const id of batch) moved.add(id);
+				current = advanceMove(current, batch.length);
+				setProgress(current);
+			}
+
+			const remaining = await attempt(liveMessageCount(mailboxId, signal));
+			if (signal.aborted) return;
+			if (!remaining.ok) {
+				current = failMove(current, remaining.error);
+				setProgress(current);
+				setErrorMessage(remaining.error);
+				setPhase("error");
+				return;
+			}
+			if (remaining.value > 0) {
+				const message = `${remaining.value} ${
+					remaining.value === 1 ? "email is" : "emails are"
+				} still syncing. Re-open delete to finish removing this folder.`;
+				current = failMove(current, message);
+				setProgress(current);
+				setErrorMessage(message);
+				setPhase("error");
+				invalidate();
+				return;
+			}
+
+			await deleteMailbox();
+		},
+		[mailboxId, remainingCount, deleteMailbox, invalidate],
+	);
+
+	const reset = useCallback(() => {
+		abortRef.current?.abort();
+		abortRef.current = null;
+		setPhase("idle");
+		setProgress(null);
+		setErrorMessage(undefined);
+	}, []);
+
+	return {
+		phase,
+		progress,
+		errorMessage,
+		deleteMailbox,
+		moveThenDelete,
+		cancel,
+		reset,
+	};
+}