@remit/web-client 0.0.105 → 0.0.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "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": {

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

@@ -150,6 +150,30 @@ const flush = async () => {
 	}
 };
 
+const pickRow = async (label: string) => {
+	const row = container.querySelector<HTMLButtonElement>(
+		`button[aria-label="Move to ${label}"]`,
+	);
+	assert.ok(row, `the picker offers ${label}`);
+	await act(async () => {
+		row.click();
+	});
+};
+
+const confirmMove = async (label: RegExp) => {
+	const confirm = buttonByText(label);
+	assert.ok(confirm, `the confirm reads ${label}`);
+	await act(async () => {
+		confirm.click();
+	});
+};
+
+const clickMoveToArchive = async () => {
+	act(() => buttonByText(/Move them to another folder/)?.click());
+	await pickRow("Archive");
+	await confirmMove(/^Move 3 emails to Archive$/);
+};
+
 describe("DeleteFolderDialog", () => {
 	it("renders nothing when closed", () => {
 		render({ open: false, folder: mailboxes[1] as RemitImapMailboxResponse });
@@ -210,6 +234,123 @@ describe("DeleteFolderDialog", () => {
 		assert.match(options, /Archive/);
 	});
 
+	it("opens a branch without moving anything, and commits only on confirm", async () => {
+		const nested = [
+			...mailboxes,
+			mailbox({ mailboxId: "work", fullPath: "Work" }),
+			mailbox({ mailboxId: "clients", fullPath: "Work/Clients" }),
+		];
+		const moveCalls: string[][] = [];
+		const movedOnServer = new Set<string>();
+		let deleted = false;
+		route = ({ url, method, body: reqBody }) => {
+			if (method === "DELETE") {
+				deleted = true;
+				return new Response(null, { status: 204 });
+			}
+			if (url.includes("/messages/move")) {
+				const body = JSON.parse(reqBody) as { messageIds: string[] };
+				moveCalls.push(body.messageIds);
+				for (const id of body.messageIds) movedOnServer.add(id);
+				return json({ moved: body.messageIds.length });
+			}
+			if (url.includes("/threads"))
+				return json(threadItems(["m1"].filter((id) => !movedOnServer.has(id))));
+			return json({ items: nested });
+		};
+		render({
+			open: true,
+			folder: mailboxes[1] as RemitImapMailboxResponse,
+			allMailboxes: nested,
+		});
+		act(() => buttonByText(/Move them to another folder/)?.click());
+		assert.equal(
+			buttonByText(/^Move 3 emails to/),
+			undefined,
+			"nothing is armed before a destination is picked",
+		);
+		await pickRow("Work");
+		await flush();
+		assert.deepEqual(moveCalls, [], "opening a branch starts no move");
+		assert.equal(deleted, false, "opening a branch deletes nothing");
+		assert.ok(
+			container.querySelector('button[aria-label="Move to Clients"]'),
+			"the tap opened the branch so the nested destination is reachable",
+		);
+
+		await pickRow("Clients");
+		await confirmMove(/^Move 3 emails to Clients$/);
+		await flush();
+		assert.deepEqual(moveCalls, [["m1"]], "the confirm commits the move");
+		assert.equal(deleted, true, "the emptied folder is deleted");
+	});
+
+	it("arms rather than commits when a folder is created to move into", async () => {
+		const filed = mailbox({
+			mailboxId: "filed",
+			fullPath: "Filed",
+			syncStatus: "synced",
+		});
+		const moveCalls: string[][] = [];
+		let deleted = false;
+		let createdOnServer = false;
+		route = ({ url, method, body: reqBody }) => {
+			if (method === "DELETE") {
+				deleted = true;
+				return new Response(null, { status: 204 });
+			}
+			if (url.includes("/messages/move")) {
+				const body = JSON.parse(reqBody) as { messageIds: string[] };
+				moveCalls.push(body.messageIds);
+				return json({ moved: body.messageIds.length });
+			}
+			if (url.includes("/threads")) return json(threadItems(["m1"]));
+			if (method === "POST" && url.includes("/mailboxes")) {
+				createdOnServer = true;
+				return json(filed);
+			}
+			return json({
+				items: createdOnServer ? [...mailboxes, filed] : mailboxes,
+			});
+		};
+		render({ open: true, folder: mailboxes[1] as RemitImapMailboxResponse });
+		await flush();
+		act(() => buttonByText(/Move them to another folder/)?.click());
+		act(() =>
+			container
+				.querySelector<HTMLButtonElement>('button[aria-label="New folder"]')
+				?.click(),
+		);
+		const nameField = container.querySelector<HTMLInputElement>(
+			'input:not([aria-label="Filter folders"])',
+		);
+		assert.ok(nameField, "the new-folder form is open");
+		act(() => {
+			Object.getOwnPropertyDescriptor(
+				HTMLInputElement.prototype,
+				"value",
+			)?.set?.call(nameField, "Filed");
+			nameField.dispatchEvent(new Event("input", { bubbles: true }));
+		});
+		await act(async () => {
+			buttonByText(/^Create folder$/)?.click();
+		});
+		await flush();
+		assert.deepEqual(moveCalls, [], "a created folder starts no move");
+		assert.equal(deleted, false, "a created folder deletes nothing");
+
+		render({
+			open: true,
+			folder: mailboxes[1] as RemitImapMailboxResponse,
+			allMailboxes: [...mailboxes, filed],
+		});
+		assert.ok(
+			buttonByText(/^Move 3 emails to Filed$/),
+			"the created folder is armed as the destination",
+		);
+		assert.deepEqual(moveCalls, [], "arming it is still not a move");
+	});
+
 	it("deletes an empty folder and closes on success", async () => {
 		let closed = false;
 		route = ({ method }) => {
@@ -274,14 +415,7 @@ describe("DeleteFolderDialog", () => {
 				closed = true;
 			},
 		});
-		act(() => buttonByText(/Move them to another folder/)?.click());
-		await act(async () => {
-			(
-				container.querySelector('button[aria-label="Move to Archive"]') as
-					| HTMLButtonElement
-					| undefined
-			)?.click();
-		});
+		await clickMoveToArchive();
 		await flush();
 		assert.deepEqual(moved.sort(), ["m1", "m2", "m3"]);
 		assert.equal(closed, true);
@@ -323,30 +457,12 @@ describe("DeleteFolderDialog", () => {
 				closed = true;
 			},
 		});
-		act(() => buttonByText(/Move them to another folder/)?.click());
-		await act(async () => {
-			(
-				container.querySelector('button[aria-label="Move to Archive"]') as
-					| HTMLButtonElement
-					| undefined
-			)?.click();
-		});
+		await clickMoveToArchive();
 		await flush();
 		assert.match(container.textContent ?? "", /stay moved/);
 		assert.equal(closed, false);
 	});
 
-	const clickMoveToArchive = async () => {
-		act(() => buttonByText(/Move them to another folder/)?.click());
-		await act(async () => {
-			(
-				container.querySelector('button[aria-label="Move to Archive"]') as
-					| HTMLButtonElement
-					| undefined
-			)?.click();
-		});
-	};
-
 	it("iterates multiple batches and deletes only after the folder drains", async () => {
 		let deleted = false;
 		const moveCalls: string[][] = [];

package/src/components/settings/DeleteFolderDialog.tsx

@@ -54,6 +54,7 @@ export function DeleteFolderDialog({
 	const [stage, setStage] = useState<FateStage>(() =>
 		initialStage(folder.messageCount),
 	);
+	const [destinationId, setDestinationId] = useState<string>();
 	const { createFolderIn } = useCreateMailbox(accountId);
 	const translator = useFolderLabelTranslator();
 	const {
@@ -76,6 +77,11 @@ export function DeleteFolderDialog({
 		reset();
 	}, [open, folder.messageCount, reset]);
 
+	useEffect(() => {
+		if (!open) return;
+		setDestinationId(undefined);
+	}, [open]);
+
 	useEffect(() => cancel, [cancel]);
 
 	const handleClose = useCallback(() => {
@@ -94,6 +100,10 @@ export function DeleteFolderDialog({
 		[mailboxes, appointments, folder.mailboxId, translator],
 	);
 
+	const destination = destinations.find(
+		(option) => option.id === destinationId,
+	);
+
 	const name = useMemo(
 		() =>
 			labelForMailbox(
@@ -265,18 +275,37 @@ export function DeleteFolderDialog({
 					Move the {emailCount(folder.messageCount)} in{" "}
 					<strong className="text-fg">{name}</strong> to:
 				</p>
-				<div className="min-h-0 flex-1">
+				<div className="flex min-h-0 flex-1 overflow-hidden">
 					<FolderTreePicker
 						folders={destinations}
+						selectedId={destinationId}
 						delimiter={mailboxes[0]?.hierarchyDelimiter ?? "/"}
-						onSelect={(destinationMailboxId) =>
-							moveThenDelete(destinationMailboxId)
-						}
+						onSelect={setDestinationId}
 						onCreateFolder={createFolderIn}
-						onCancel={() => setStage("choose-fate")}
+						onCancel={() => {
+							setDestinationId(undefined);
+							setStage("choose-fate");
+						}}
 						labels={{ filterPlaceholder: "Move emails to…" }}
 					/>
 				</div>
+				{/* Tapping a folder both picks it and opens it, so the move and the
+				delete wait for this confirmation — otherwise the first tap on the way
+				to a nested destination would empty the folder and remove it, with no
+				undo. */}
+				{destination && (
+					<footer className="shrink-0 border-t border-line p-2">
+						<Button
+							variant="danger"
+							onClick={() => moveThenDelete(destination.id)}
+							className="h-11 w-full font-semibold"
+						>
+							<span className="truncate">
+								{`Move ${emailCount(folder.messageCount)} to ${destination.label}`}
+							</span>
+						</Button>
+					</footer>
+				)}
 			</div>
 		);
 	})();