@remit/web-client 0.0.194 → 0.0.196

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.194",
+  "version": "0.0.196",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {
@@ -75,6 +75,7 @@
   "dependencies": {
     "@hookform/resolvers": "*",
     "@remit/api-http-client": "*",
+    "@remit/data-ports": "*",
     "@remit/domain-enums": "*",
     "@remit/ui": "*",
     "@tanstack/react-query": "^5",

package/src/components/settings/DeleteFolderDialog.render.test.ts

@@ -64,6 +64,7 @@ i18n.use(initReactI18next).init({
 
 let container: HTMLElement;
 let root: Root;
+let queryClient: QueryClient;
 const originalFetch = globalThis.fetch;
 
 interface FetchCall {
@@ -71,7 +72,7 @@ interface FetchCall {
 	method: string;
 	body: string;
 }
-type FetchRoute = (call: FetchCall) => Response;
+type FetchRoute = (call: FetchCall) => Response | Promise<Response>;
 let route: FetchRoute = () => new Response("{}", { status: 200 });
 
 const json = (body: unknown): Response =>
@@ -80,6 +81,31 @@ const json = (body: unknown): Response =>
 		headers: { "Content-Type": "application/json" },
 	});
 
+/**
+ * `GET /sync/status`, the read the empty-folder delete waits on. `lastSyncedAt`
+ * only advances once `POST /sync` has been answered, so a count read before the
+ * trigger is distinguishable from one a triggered round wrote.
+ */
+const syncStatus = (
+	counts: Readonly<Record<string, number>>,
+	rounds: number,
+) => ({
+	accountId: "acc-1",
+	syncPhase: "complete",
+	mailboxes: mailboxes.map((box) => ({
+		mailboxId: box.mailboxId,
+		fullPath: box.fullPath,
+		phase: "complete",
+		messagesTotal: counts[box.mailboxId] ?? box.messageCount,
+		messagesSynced: 0,
+		lastSyncedAt: 1000 + rounds,
+	})),
+});
+
+const isSyncStatus = (url: string): boolean => url.includes("/sync/status");
+const isSyncTrigger = (url: string, method: string): boolean =>
+	method === "POST" && url.endsWith("/sync");
+
 const threadItems = (ids: readonly string[]) => ({
 	items: ids.map((id) => ({
 		threadMessageId: `t-${id}`,
@@ -95,16 +121,22 @@ beforeEach(() => {
 	container = document.createElement("div");
 	document.body.appendChild(container);
 	root = createRoot(container);
+	queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
 	globalThis.fetch = (async (input: RequestInfo | URL) => {
 		const request = input as Request;
 		const body = request.method === "GET" ? "" : await request.clone().text();
-		return route({ url: request.url, method: request.method, body });
+		return await route({ url: request.url, method: request.method, body });
 	}) as typeof fetch;
 });
 
 afterEach(() => {
 	act(() => root.unmount());
 	container.remove();
+	// Drops the cached queries with their gc timers, which otherwise hold the
+	// test process open for their full gcTime.
+	queryClient.clear();
 	globalThis.fetch = originalFetch;
 });
 
@@ -122,7 +154,7 @@ const render = (props: {
 				{ i18n },
 				createElement(
 					QueryClientProvider,
-					{ client: new QueryClient() },
+					{ client: queryClient },
 					createElement(DeleteFolderDialog, {
 						open: props.open,
 						accountId: "acc-1",
@@ -353,9 +385,17 @@ describe("DeleteFolderDialog", () => {
 
 	it("deletes an empty folder and closes on success", async () => {
 		let closed = false;
-		route = ({ method }) => {
+		let rounds = 0;
+		let triggered = 0;
+		route = ({ url, method }) => {
 			if (method === "DELETE") return new Response(null, { status: 204 });
-			return new Response("{}", { status: 200 });
+			if (isSyncStatus(url)) return json(syncStatus({}, rounds));
+			if (isSyncTrigger(url, method)) {
+				triggered += 1;
+				rounds += 1;
+				return json({ triggered: true, message: "ok" });
+			}
+			return json({ items: mailboxes });
 		};
 		render({
 			open: true,
@@ -368,9 +408,184 @@ describe("DeleteFolderDialog", () => {
 			buttonByText(/^Delete folder$/)?.click();
 		});
 		await flush();
+		assert.equal(triggered, 1, "the delete asks the server for a sync round");
 		assert.equal(closed, true);
 	});
 
+	it("refuses to delete a folder the server says still holds mail", async () => {
+		let deleted = false;
+		let closed = false;
+		let rounds = 0;
+		route = ({ url, method }) => {
+			if (method === "DELETE") {
+				deleted = true;
+				return new Response(null, { status: 204 });
+			}
+			// Mail landed in Empty since its last sync round, so the count the
+			// round reports contradicts the zero the dialog opened on.
+			if (isSyncStatus(url)) return json(syncStatus({ empty: 2 }, rounds));
+			if (isSyncTrigger(url, method)) {
+				rounds += 1;
+				return json({ triggered: true, message: "ok" });
+			}
+			return json({ items: mailboxes });
+		};
+		render({
+			open: true,
+			folder: mailboxes[2] as RemitImapMailboxResponse,
+			onClose: () => {
+				closed = true;
+			},
+		});
+		assert.match(container.textContent ?? "", /empty and will be removed/);
+		await act(async () => {
+			buttonByText(/^Delete folder$/)?.click();
+		});
+		await flush();
+		assert.equal(deleted, false, "a fresh count above zero blocks the delete");
+		assert.equal(closed, false, "the dialog stays open on the mail it found");
+		assert.match(container.textContent ?? "", /This folder is not empty/);
+		assert.match(container.textContent ?? "", /reports 2 emails/);
+		assert.match(container.textContent ?? "", /holds 2 emails/);
+		assert.ok(
+			buttonByText(/Move them to another folder/),
+			"the non-empty flow takes over",
+		);
+	});
+
+	it("refuses the delete when the count cannot be read", async () => {
+		let deleted = false;
+		route = ({ url, method }) => {
+			if (method === "DELETE") {
+				deleted = true;
+				return new Response(null, { status: 204 });
+			}
+			if (isSyncStatus(url))
+				return new Response(JSON.stringify({ detail: "server exploded" }), {
+					status: 500,
+					headers: { "Content-Type": "application/json" },
+				});
+			if (isSyncTrigger(url, method))
+				return json({ triggered: true, message: "ok" });
+			return json({ items: mailboxes });
+		};
+		render({ open: true, folder: mailboxes[2] as RemitImapMailboxResponse });
+		await act(async () => {
+			buttonByText(/^Delete folder$/)?.click();
+		});
+		await flush();
+		assert.equal(deleted, false, "an unreadable count is not an empty folder");
+		assert.ok(
+			buttonByText(/^Close$/),
+			"the failure is stated, not swallowed into a delete",
+		);
+	});
+
+	it("does not delete when the dialog is closed mid-check", async () => {
+		let deleted = false;
+		let closed = false;
+		let rounds = 0;
+		let releaseStatus: (() => void) | undefined;
+		route = ({ url, method }) => {
+			if (method === "DELETE") {
+				deleted = true;
+				return new Response(null, { status: 204 });
+			}
+			if (isSyncStatus(url)) {
+				const answer = json(syncStatus({}, rounds));
+				if (rounds === 0) return answer;
+				// The round has landed but the answer is still in flight; the user
+				// gets to cancel before it arrives.
+				return new Promise<Response>((resolve) => {
+					releaseStatus = () => resolve(answer);
+				});
+			}
+			if (isSyncTrigger(url, method)) {
+				rounds += 1;
+				return json({ triggered: true, message: "ok" });
+			}
+			return json({ items: mailboxes });
+		};
+		render({
+			open: true,
+			folder: mailboxes[2] as RemitImapMailboxResponse,
+			onClose: () => {
+				closed = true;
+			},
+		});
+		await act(async () => {
+			buttonByText(/^Delete folder$/)?.click();
+		});
+		await flush();
+		assert.ok(releaseStatus, "the check is waiting on the server");
+		await act(async () => {
+			container
+				.querySelector<HTMLButtonElement>('button[aria-label="Cancel"]')
+				?.click();
+		});
+		await act(async () => {
+			releaseStatus?.();
+		});
+		await flush();
+		assert.equal(closed, true, "the cancel closes the dialog");
+		assert.equal(deleted, false, "a cancelled check never reaches the delete");
+	});
+
+	it("asks whether to keep waiting, and resumes without a second round", async () => {
+		let deleted = false;
+		let reported = false;
+		let triggered = 0;
+		route = ({ url, method }) => {
+			if (method === "DELETE") {
+				deleted = true;
+				return new Response(null, { status: 204 });
+			}
+			if (isSyncStatus(url)) return json(syncStatus({}, reported ? 1 : 0));
+			if (isSyncTrigger(url, method)) {
+				triggered += 1;
+				return json({ triggered: true, message: "ok" });
+			}
+			return json({ items: mailboxes });
+		};
+		render({ open: true, folder: mailboxes[2] as RemitImapMailboxResponse });
+
+		// A sync fans the whole account out, so the folder's round can land long
+		// after the trigger. Run the clock forward instead of waiting on it.
+		const realNow = Date.now;
+		let fake = realNow();
+		// Past the segment in one step, so the stall is reached without a poll
+		// sleeping through it.
+		Date.now = () => {
+			fake += 200_000;
+			return fake;
+		};
+		try {
+			await act(async () => {
+				buttonByText(/^Delete folder$/)?.click();
+			});
+			await flush();
+		} finally {
+			Date.now = realNow;
+			// The reads taken under the fake clock cached a future timestamp, which
+			// reads as fresh once the real clock is back; drop them so the resumed
+			// wait talks to the server again.
+			queryClient.clear();
+		}
+
+		assert.equal(triggered, 1, "one round is asked for");
+		assert.equal(deleted, false, "an unreported folder is not deleted");
+		assert.match(container.textContent ?? "", /hasn't reported back/);
+		assert.ok(buttonByText(/^Keep waiting$/), "the wait is the user's call");
+
+		reported = true;
+		await act(async () => {
+			buttonByText(/^Keep waiting$/)?.click();
+		});
+		await flush();
+		assert.equal(triggered, 1, "resuming asks for no second round");
+		assert.equal(deleted, true, "the reported count settles the delete");
+	});
+
 	it("moves the mail in batches then deletes the emptied folder", async () => {
 		let closed = false;
 		let moved: string[] = [];

package/src/components/settings/DeleteFolderDialog.tsx

@@ -14,7 +14,11 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useDeleteFolder } from "@/hooks/useDeleteFolder";
 import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
-import { initialStage, moveProgressLabel } from "@/lib/delete-folder";
+import {
+	elapsedLabel,
+	initialStage,
+	moveProgressLabel,
+} from "@/lib/delete-folder";
 import { buildMailboxRoleMap, labelForMailbox } from "@/lib/folder-roles";
 import { buildMoveOptions } from "@/lib/move-options";
 
@@ -37,11 +41,14 @@ 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.
+ * Per-folder delete wizard. An empty folder is a single destructive confirm,
+ * settled against a sync round asked for on the spot rather than the folder's
+ * last synced count — a wait the user can watch, keep, or cancel, and which
+ * deletes nothing until the server answers; a folder with mail asks what
+ * happens to the messages first — 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,
@@ -54,6 +61,7 @@ export function DeleteFolderDialog({
 	const [stage, setStage] = useState<FateStage>(() =>
 		initialStage(folder.messageCount),
 	);
+	const [arrivedSinceSync, setArrivedSinceSync] = useState<number>();
 	const [destinationId, setDestinationId] = useState<string>();
 	const { createFolderIn } = useCreateMailbox(accountId);
 	const translator = useFolderLabelTranslator();
@@ -61,7 +69,9 @@ export function DeleteFolderDialog({
 		phase,
 		progress,
 		errorMessage,
+		checkStartedAt,
 		deleteMailbox,
+		deleteIfEmpty,
 		moveThenDelete,
 		cancel,
 		reset,
@@ -70,12 +80,30 @@ export function DeleteFolderDialog({
 		mailboxId: folder.mailboxId,
 		onDeleted: onClose,
 	});
+	const [checkElapsed, setCheckElapsed] = useState("0:00");
+
+	// The check has no progress to report — only that it is still waiting — so
+	// the wait itself is what the surface shows, ticking, for as long as it runs.
+	const waiting = phase === "checking" || phase === "check-stalled";
+	useEffect(() => {
+		if (!waiting || checkStartedAt === undefined) return;
+		const update = () =>
+			setCheckElapsed(elapsedLabel(Date.now() - checkStartedAt));
+		update();
+		const timer = setInterval(update, 1000);
+		return () => clearInterval(timer);
+	}, [waiting, checkStartedAt]);
 
+	// Opening the dialog stages it; a count arriving later deliberately does not.
+	// The refusal below invalidates the folder list on purpose, and re-staging on
+	// the count that refetch brings back would wipe the refusal off the screen.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: folder.messageCount is read at open and must not re-run this.
 	useEffect(() => {
 		if (!open) return;
 		setStage(initialStage(folder.messageCount));
+		setArrivedSinceSync(undefined);
 		reset();
-	}, [open, folder.messageCount, reset]);
+	}, [open, reset]);
 
 	useEffect(() => {
 		if (!open) return;
@@ -89,6 +117,13 @@ export function DeleteFolderDialog({
 		onClose();
 	}, [cancel, onClose]);
 
+	const handleDeleteEmpty = useCallback(async () => {
+		const outcome = await deleteIfEmpty();
+		if (outcome.status !== "blocked") return;
+		setArrivedSinceSync(outcome.messageCount);
+		setStage("choose-fate");
+	}, [deleteIfEmpty]);
+
 	const destinations = useMemo<FolderTreeNode[]>(
 		() =>
 			buildMoveOptions({
@@ -117,6 +152,7 @@ export function DeleteFolderDialog({
 	if (!open) return null;
 
 	const title = `Delete ${name}`;
+	const messageCount = arrivedSinceSync ?? folder.messageCount;
 
 	const body = (() => {
 		if (phase === "moving") {
@@ -131,6 +167,42 @@ export function DeleteFolderDialog({
 			);
 		}
 
+		if (phase === "checking") {
+			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">
+						Checking the folder on the mail server…
+					</p>
+					<p className="text-xs text-fg-muted" role="status" aria-live="polite">
+						{`Waiting ${checkElapsed}. Nothing is deleted until the server answers.`}
+					</p>
+				</div>
+			);
+		}
+
+		if (phase === "check-stalled") {
+			return (
+				<div className="space-y-4 px-5 py-4">
+					<Banner tone="warning" variant="soft">
+						{`The mail server hasn't reported back on this folder yet — ${checkElapsed} so far. Nothing has been deleted.`}
+					</Banner>
+					<p className="text-xs text-fg-muted">
+						A sync covers the whole account, so a busy mailbox can take a while
+						to come round to this folder.
+					</p>
+					<div className="flex justify-end gap-2">
+						<Button variant="secondary" size="sm" onClick={handleClose}>
+							Cancel
+						</Button>
+						<Button size="sm" onClick={() => handleDeleteEmpty()}>
+							Keep waiting
+						</Button>
+					</div>
+				</div>
+			);
+		}
+
 		if (phase === "deleting" || phase === "done") {
 			return (
 				<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
@@ -178,7 +250,7 @@ export function DeleteFolderDialog({
 							variant="danger"
 							size="sm"
 							icon={<Trash2 className="size-3.5" />}
-							onClick={() => deleteMailbox()}
+							onClick={() => handleDeleteEmpty()}
 						>
 							Delete folder
 						</Button>
@@ -191,9 +263,14 @@ export function DeleteFolderDialog({
 			return (
 				<>
 					<div className="space-y-3 px-5 py-4 text-sm text-fg-muted">
+						{arrivedSinceSync !== undefined && (
+							<Banner tone="warning" variant="soft">
+								{`This folder is not empty: the mail server reports ${emailCount(arrivedSinceSync)} in it. Nothing was deleted.`}
+							</Banner>
+						)}
 						<p>
 							<strong className="text-fg">{name}</strong> holds{" "}
-							{emailCount(folder.messageCount)}. What should happen to them?
+							{emailCount(messageCount)}. What should happen to them?
 						</p>
 						<div className="space-y-2">
 							<button
@@ -244,8 +321,8 @@ export function DeleteFolderDialog({
 					<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.
+							{emailCount(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">
@@ -272,7 +349,7 @@ export function DeleteFolderDialog({
 		return (
 			<div className="flex h-[26rem] flex-col">
 				<p className="px-5 pt-4 text-sm text-fg-muted">
-					Move the {emailCount(folder.messageCount)} in{" "}
+					Move the {emailCount(messageCount)} in{" "}
 					<strong className="text-fg">{name}</strong> to:
 				</p>
 				<div className="flex min-h-0 flex-1 overflow-hidden">
@@ -301,7 +378,7 @@ export function DeleteFolderDialog({
 							className="h-11 w-full font-semibold"
 						>
 							<span className="truncate">
-								{`Move ${emailCount(folder.messageCount)} to ${destination.label}`}
+								{`Move ${emailCount(messageCount)} to ${destination.label}`}
 							</span>
 						</Button>
 					</footer>

package/src/hooks/useAutoMovedBadge.ts

@@ -3,6 +3,7 @@ import type {
 	RemitImapAutoMovedInfo,
 	RemitImapMessageSpamReport,
 } from "@remit/api-http-client/types.gen.ts";
+import { mailboxLeafName } from "@remit/data-ports/mailbox-name";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 import {
@@ -11,7 +12,6 @@ import {
 	resolveUndoTargetMailboxId,
 	spamReportLabel,
 } from "@/lib/auto-moved";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { useInboxMailbox, useJunkMailbox } from "./useArchiveMailbox";
 import { useMoveMessages } from "./useMoveMessages";
 import { useReportSpam } from "./useReportSpam";
@@ -132,7 +132,7 @@ export const useAutoMovedBadge = ({
 	const sourceFolderName = autoMoved.fromMailboxId
 		? mailboxes?.items
 				.filter((mailbox) => mailbox.mailboxId === autoMoved.fromMailboxId)
-				.map((mailbox) => getMailboxDisplayName(mailbox.fullPath))[0]
+				.map((mailbox) => mailboxLeafName(mailbox))[0]
 		: undefined;
 
 	return {

package/src/hooks/useCreateMailbox.render.test.ts

@@ -67,6 +67,7 @@ const mount = (
 				mailboxId: `mbx-${body.fullPath}`,
 				accountId: ACCOUNT,
 				fullPath: body.fullPath,
+				hierarchyDelimiter: "/",
 				syncStatus: createdSyncStatus,
 			} as RemitImapMailboxResponse);
 			return { mailboxId: `mbx-${body.fullPath}`, fullPath: body.fullPath };
@@ -173,6 +174,7 @@ describe("useCreateMailbox.createFolder validation", () => {
 					mailboxId: `mbx-${body.fullPath}`,
 					accountId: ACCOUNT,
 					fullPath: body.fullPath,
+					hierarchyDelimiter: "/",
 				} as RemitImapMailboxResponse);
 				return { mailboxId: `mbx-${body.fullPath}`, fullPath: body.fullPath };
 			}

package/src/hooks/useCreateMailbox.ts

@@ -3,10 +3,10 @@ import {
 	mailboxOperationsListMailboxesOptions,
 	mailboxOperationsListMailboxesQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { mailboxLeafName } from "@remit/data-ports/mailbox-name";
 import type { FolderTreeNode } from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useRef } from "react";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { waitForMailboxSynced } from "@/lib/mailbox-sync-wait";
 import {
 	composeFolderPath,
@@ -136,7 +136,7 @@ export function useCreateMailbox(accountId: string | undefined) {
 			pendingByPath.current.delete(fullPath);
 			return {
 				id: confirmed.mailboxId,
-				label: getMailboxDisplayName(confirmed.fullPath),
+				label: mailboxLeafName(confirmed),
 				path: confirmed.fullPath,
 			};
 		},