@remit/web-client 0.0.71 → 0.0.72

package/src/lib/delete-folder.test.ts

@@ -0,0 +1,186 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	advanceMove,
+	appointedRole,
+	beginMove,
+	excludeFolder,
+	type FolderNode,
+	failMove,
+	guardFolderDeletion,
+	hasChildFolders,
+	initialStage,
+	moveProgressLabel,
+} from "./delete-folder.js";
+
+const folder = (
+	over: Partial<FolderNode> & { mailboxId: string },
+): FolderNode => ({
+	fullPath: over.mailboxId,
+	hierarchyDelimiter: "/",
+	messageCount: 0,
+	...over,
+});
+
+describe("guardFolderDeletion", () => {
+	it("blocks the inbox by its reserved path, case-insensitively", () => {
+		const target = folder({ mailboxId: "a", fullPath: "InBoX" });
+		const guard = guardFolderDeletion(target, [target], []);
+		assert.equal(guard.deletable, false);
+		assert.equal(guard.reason, "inbox");
+		assert.match(guard.message ?? "", /inbox can't be deleted/i);
+	});
+
+	it("blocks a folder appointed to a canonical role and names the role", () => {
+		const target = folder({ mailboxId: "arch", fullPath: "Archive" });
+		const guard = guardFolderDeletion(
+			target,
+			[target],
+			[{ role: "Archive", mailboxId: "arch" }],
+		);
+		assert.equal(guard.deletable, false);
+		assert.equal(guard.reason, "role");
+		assert.match(guard.message ?? "", /Archive/);
+	});
+
+	it("blocks a folder that has subfolders", () => {
+		const target = folder({ mailboxId: "work", fullPath: "Work" });
+		const child = folder({ mailboxId: "sub", fullPath: "Work/Shop" });
+		const guard = guardFolderDeletion(target, [target, child], []);
+		assert.equal(guard.deletable, false);
+		assert.equal(guard.reason, "children");
+		assert.match(guard.message ?? "", /subfolders/i);
+	});
+
+	it("allows a plain leaf folder with no role and no children", () => {
+		const target = folder({
+			mailboxId: "r",
+			fullPath: "Receipts",
+			messageCount: 4,
+		});
+		const other = folder({ mailboxId: "n", fullPath: "News" });
+		const guard = guardFolderDeletion(
+			target,
+			[target, other],
+			[{ role: "Archive", mailboxId: "other-box" }],
+		);
+		assert.deepEqual(guard, { deletable: true });
+	});
+
+	it("ignores an unfilled role appointment with no mailbox", () => {
+		const target = folder({ mailboxId: "r", fullPath: "Receipts" });
+		const guard = guardFolderDeletion(target, [target], [{ role: "Junk" }]);
+		assert.equal(guard.deletable, true);
+	});
+});
+
+describe("hasChildFolders", () => {
+	it("treats a delimiter-separated nested path as a child", () => {
+		const parent = {
+			mailboxId: "p",
+			fullPath: "Work",
+			hierarchyDelimiter: "/",
+		};
+		const kids = [{ mailboxId: "c", fullPath: "Work/Q3" }];
+		assert.equal(hasChildFolders(parent, [...kids, parent]), true);
+	});
+
+	it("does not treat a shared string prefix without a delimiter as a child", () => {
+		const parent = {
+			mailboxId: "p",
+			fullPath: "Work",
+			hierarchyDelimiter: "/",
+		};
+		const lookalike = [{ mailboxId: "w", fullPath: "Workshop" }];
+		assert.equal(hasChildFolders(parent, [...lookalike, parent]), false);
+	});
+
+	it("honours a non-slash delimiter", () => {
+		const parent = {
+			mailboxId: "p",
+			fullPath: "INBOX",
+			hierarchyDelimiter: ".",
+		};
+		const kids = [{ mailboxId: "c", fullPath: "INBOX.Sub" }];
+		assert.equal(hasChildFolders(parent, [...kids, parent]), true);
+	});
+});
+
+describe("appointedRole", () => {
+	it("returns the role a mailbox fills", () => {
+		assert.equal(
+			appointedRole("a", [{ role: "Trash", mailboxId: "a" }]),
+			"Trash",
+		);
+	});
+
+	it("returns undefined when the mailbox fills no role", () => {
+		assert.equal(
+			appointedRole("a", [{ role: "Trash", mailboxId: "b" }]),
+			undefined,
+		);
+	});
+});
+
+describe("excludeFolder", () => {
+	it("drops the folder being deleted from the destination list", () => {
+		const targets = [
+			{ mailboxId: "a" },
+			{ mailboxId: "b" },
+			{ mailboxId: "c" },
+		];
+		assert.deepEqual(excludeFolder(targets, "b"), [
+			{ mailboxId: "a" },
+			{ mailboxId: "c" },
+		]);
+	});
+});
+
+describe("move progress", () => {
+	it("begins at zero and moving for a non-empty set", () => {
+		assert.deepEqual(beginMove(120), { total: 120, moved: 0, phase: "moving" });
+	});
+
+	it("begins already moved for an empty set", () => {
+		assert.deepEqual(beginMove(0), { total: 0, moved: 0, phase: "moved" });
+	});
+
+	it("advances by the batch size and finishes at the total", () => {
+		let progress = beginMove(150);
+		progress = advanceMove(progress, 100);
+		assert.deepEqual(progress, { total: 150, moved: 100, phase: "moving" });
+		progress = advanceMove(progress, 50);
+		assert.deepEqual(progress, { total: 150, moved: 150, phase: "moved" });
+	});
+
+	it("clamps moved to the total if the folder shrank underneath the count", () => {
+		const progress = advanceMove(beginMove(80), 100);
+		assert.equal(progress.moved, 80);
+		assert.equal(progress.phase, "moved");
+	});
+
+	it("stops progress on failure and does not advance afterwards", () => {
+		const failed = failMove(beginMove(150), "boom");
+		assert.equal(failed.phase, "failed");
+		assert.equal(failed.moved, 0);
+		const after = advanceMove(failed, 100);
+		assert.deepEqual(after, failed);
+	});
+
+	it("labels progress as moved-of-total", () => {
+		assert.equal(
+			moveProgressLabel({ total: 150, moved: 100, phase: "moving" }),
+			"Moved 100 of 150",
+		);
+	});
+});
+
+describe("initialStage", () => {
+	it("opens on the empty confirm for a folder with no mail", () => {
+		assert.equal(initialStage(0), "confirm-empty");
+	});
+
+	it("opens on the fate choice for a folder holding mail", () => {
+		assert.equal(initialStage(3), "choose-fate");
+	});
+});

package/src/lib/delete-folder.ts

@@ -0,0 +1,151 @@
+export const MOVE_BATCH_SIZE = 100;
+
+export interface FolderNode {
+	mailboxId: string;
+	fullPath: string;
+	hierarchyDelimiter: string;
+	messageCount: number;
+}
+
+export interface RoleAppointment {
+	role: string;
+	mailboxId?: string | null;
+}
+
+export type DeleteBlockReason = "inbox" | "role" | "children";
+
+export interface DeleteGuard {
+	deletable: boolean;
+	reason?: DeleteBlockReason;
+	message?: string;
+}
+
+const isInboxPath = (fullPath: string): boolean =>
+	fullPath.trim().toLowerCase() === "inbox";
+
+/**
+ * A folder has children when another mailbox's path is nested under it — the
+ * folder's own path followed by the hierarchy delimiter. The delimiter matters:
+ * `Work` is not a parent of `Workshop`, only of `Work/Shop`.
+ */
+export const hasChildFolders = (
+	folder: Pick<FolderNode, "mailboxId" | "fullPath" | "hierarchyDelimiter">,
+	all: readonly Pick<FolderNode, "mailboxId" | "fullPath">[],
+): boolean => {
+	const prefix = `${folder.fullPath}${folder.hierarchyDelimiter}`;
+	return all.some(
+		(other) =>
+			other.mailboxId !== folder.mailboxId && other.fullPath.startsWith(prefix),
+	);
+};
+
+/** The canonical role a mailbox is appointed to, or `undefined` when unfilled. */
+export const appointedRole = (
+	mailboxId: string,
+	appointments: readonly RoleAppointment[],
+): string | undefined =>
+	appointments.find((a) => a.mailboxId != null && a.mailboxId === mailboxId)
+		?.role;
+
+/**
+ * Why a folder can't be deleted, or `{ deletable: true }` when it can. The
+ * inbox is reserved, a folder that fills a canonical role must be released
+ * first, and a folder with subfolders must have them handled before it goes.
+ */
+export function guardFolderDeletion(
+	folder: FolderNode,
+	all: readonly FolderNode[],
+	appointments: readonly RoleAppointment[],
+): DeleteGuard {
+	if (isInboxPath(folder.fullPath))
+		return {
+			deletable: false,
+			reason: "inbox",
+			message: "The inbox can't be deleted.",
+		};
+
+	const role = appointedRole(folder.mailboxId, appointments);
+	if (role)
+		return {
+			deletable: false,
+			reason: "role",
+			message: `This folder is your ${role} folder. Reassign that role before deleting it.`,
+		};
+
+	if (hasChildFolders(folder, all))
+		return {
+			deletable: false,
+			reason: "children",
+			message: "This folder has subfolders. Delete them first.",
+		};
+
+	return { deletable: true };
+}
+
+/** Destinations with the folder being deleted removed. */
+export function excludeFolder<T extends { mailboxId: string }>(
+	targets: readonly T[],
+	excludeMailboxId: string,
+): T[] {
+	return targets.filter((target) => target.mailboxId !== excludeMailboxId);
+}
+
+export type MovePhase = "moving" | "moved" | "failed";
+
+export interface MoveProgress {
+	total: number;
+	moved: number;
+	phase: MovePhase;
+	error?: string;
+}
+
+/** Progress at the start of a move; an empty set is already `moved`. */
+export function beginMove(total: number): MoveProgress {
+	return { total, moved: 0, phase: total === 0 ? "moved" : "moving" };
+}
+
+/**
+ * Count a successful batch. Clamps to `total` so a folder that grew mid-move
+ * never shows more moved than started, and only a still-`moving` progress
+ * advances — a failed or finished move stays put.
+ */
+export function advanceMove(
+	progress: MoveProgress,
+	batchSize: number,
+): MoveProgress {
+	if (progress.phase !== "moving") return progress;
+	const moved = Math.min(
+		progress.total,
+		progress.moved + Math.max(0, batchSize),
+	);
+	return {
+		...progress,
+		moved,
+		phase: moved >= progress.total ? "moved" : "moving",
+	};
+}
+
+/** A failed batch stops progress and surfaces the error; nothing advances after. */
+export function failMove(progress: MoveProgress, error: string): MoveProgress {
+	return { ...progress, phase: "failed", error };
+}
+
+export function moveProgressLabel(progress: MoveProgress): string {
+	return `Moved ${progress.moved} of ${progress.total}`;
+}
+
+export type DeleteStage =
+	| "confirm-empty"
+	| "choose-fate"
+	| "confirm-delete-all"
+	| "pick-destination"
+	| "moving"
+	| "deleting"
+	| "error";
+
+/** Where the wizard opens: a straight confirm for an empty folder, otherwise the fate step. */
+export function initialStage(
+	messageCount: number,
+): "confirm-empty" | "choose-fate" {
+	return messageCount > 0 ? "choose-fate" : "confirm-empty";
+}

package/src/routes/settings/folders.tsx

@@ -22,9 +22,12 @@ import {
 } from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { Trash2 } from "lucide-react";
 import { useState } from "react";
+import { DeleteFolderDialog } from "@/components/settings/DeleteFolderDialog";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
+import { guardFolderDeletion } from "@/lib/delete-folder";
 import {
 	CANONICAL_TO_NAV_ROLE,
 	getMailboxDisplayName,
@@ -209,6 +212,8 @@ function AccountFolderRoles({
 		},
 	});
 
+	const [deletingMailboxId, setDeletingMailboxId] = useState<string>();
+
 	const handleAppoint = (role: FolderRole, mailboxId: string | null) => {
 		appointMutation.mutate({
 			path: { accountId, role: NAV_ROLE_TO_CANONICAL[role] },
@@ -284,20 +289,53 @@ function AccountFolderRoles({
 			/>
 			<NewFolder accountId={accountId} mailboxes={data.items} />
 			<ul className="space-y-1" aria-label={`All folders for ${account.email}`}>
-				{data.items.map((mailbox) => (
-					<li
-						key={mailbox.mailboxId}
-						className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-fg"
-					>
-						<span className="truncate">
-							{getMailboxDisplayName(mailbox.fullPath)}
-						</span>
-						<span className="shrink-0 text-xs text-fg-muted">
-							{mailbox.fullPath}
-						</span>
-					</li>
-				))}
+				{data.items.map((mailbox) => {
+					const guard = guardFolderDeletion(
+						mailbox,
+						data.items,
+						account.folderAppointments,
+					);
+					const name = getMailboxDisplayName(mailbox.fullPath);
+					return (
+						<li
+							key={mailbox.mailboxId}
+							className="flex items-center gap-2 rounded-sm px-2 py-1 text-sm text-fg"
+						>
+							<span className="truncate">{name}</span>
+							<span className="ml-auto shrink-0 text-xs text-fg-muted">
+								{mailbox.fullPath}
+							</span>
+							<Button
+								variant="ghost"
+								size="sm"
+								icon={<Trash2 className="size-3.5" />}
+								aria-label={`Delete ${name}`}
+								disabled={!guard.deletable}
+								title={guard.deletable ? undefined : guard.message}
+								onClick={() => setDeletingMailboxId(mailbox.mailboxId)}
+								className={guard.deletable ? undefined : "opacity-40"}
+							/>
+						</li>
+					);
+				})}
 			</ul>
+			{deletingMailboxId &&
+				(() => {
+					const folder = data.items.find(
+						(box) => box.mailboxId === deletingMailboxId,
+					);
+					if (!folder) return null;
+					return (
+						<DeleteFolderDialog
+							open
+							accountId={accountId}
+							folder={folder}
+							mailboxes={data.items}
+							appointments={account.folderAppointments}
+							onClose={() => setDeletingMailboxId(undefined)}
+						/>
+					);
+				})()}
 		</div>
 	);
 }