@remit/web-client 0.0.101 → 0.0.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.101",
+  "version": "0.0.102",
   "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/mail/MoveToTrigger.render.test.ts

@@ -1,7 +1,8 @@
 /**
  * The move-to-folder picker. It only fetches folders once it is opened, it
- * marks the folder the messages are already in rather than offering it as a
- * destination, and on desktop Escape or a click outside puts it away.
+ * opens on the account's top level with nested folders behind the one holding
+ * them, it marks the folder the messages are already in rather than offering it
+ * as a destination, and on desktop Escape or a click outside puts it away.
  */
 
 import assert from "node:assert/strict";
@@ -54,19 +55,23 @@ const mount = (
 const FOLDERS = [
 	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
 	makeMailbox({ mailboxId: "mbx-work", fullPath: "Work" }),
+	makeMailbox({ mailboxId: "mbx-clients", fullPath: "Work/Clients" }),
 	makeMailbox({ mailboxId: "mbx-receipts", fullPath: "Receipts" }),
 ];
 
+const rowText = (dom: DomHarness): string[] =>
+	dom.queryAll("[role=treeitem]").map((row) => row.textContent ?? "");
+
 describe("MoveToTrigger", () => {
 	it("reports itself as collapsed until it is opened", () => {
 		const dom = mount({ mailboxes: FOLDERS });
 		const trigger = dom.byLabel("Move to folder");
 		assert.equal(trigger.getAttribute("aria-expanded"), "false");
 		assert.equal(trigger.getAttribute("aria-controls"), null);
-		assert.equal(dom.query('[role="listbox"], input'), null);
+		assert.equal(dom.query('[role="tree"], input'), null);
 	});
 
-	it("opens a listbox of destinations and marks the folder we are in", () => {
+	it("opens the top level and marks the folder we are in", () => {
 		const dom = mount({ mailboxes: FOLDERS });
 		dom.click(dom.byLabel("Move to folder"));
 
@@ -74,9 +79,7 @@ describe("MoveToTrigger", () => {
 			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
 			"true",
 		);
-		const labels = dom
-			.queryAll("[role=option]")
-			.map((option) => option.textContent ?? "");
+		const labels = rowText(dom);
 		assert.ok(labels.some((label) => label.includes("Work")));
 		assert.ok(labels.some((label) => label.includes("Receipts")));
 
@@ -86,15 +89,32 @@ describe("MoveToTrigger", () => {
 		assert.ok(current, "the source folder is marked as the current one");
 	});
 
-	it("moves to the folder the user picks and closes itself", () => {
+	it("keeps a nested folder behind the folder that holds it", () => {
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+		assert.equal(
+			rowText(dom).some((label) => label.includes("Clients")),
+			false,
+		);
+
+		dom.click(dom.byLabel("Move to Work"));
+		assert.ok(rowText(dom).some((label) => label.includes("Clients")));
+	});
+
+	it("waits for the move to be confirmed, then closes itself", () => {
 		const moved: string[] = [];
 		const dom = mount({
 			mailboxes: FOLDERS,
 			onMove: (id) => moved.push(id),
 		});
 		dom.click(dom.byLabel("Move to folder"));
-		dom.click(dom.byText("[role=option]", "Work"));
 
+		// Picking a folder also opens it, so the move is a separate press —
+		// otherwise the first tap would fire before anything nested was reachable.
+		dom.click(dom.byLabel("Move to Work"));
+		assert.deepEqual(moved, []);
+
+		dom.click(dom.byText("button", "Move to Work"));
 		assert.deepEqual(moved, ["mbx-work"]);
 		assert.equal(
 			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
@@ -102,6 +122,15 @@ describe("MoveToTrigger", () => {
 		);
 	});
 
+	it("names the destination on the button that runs the move", () => {
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+		dom.click(dom.byLabel("Move to Work"));
+		dom.click(dom.byLabel("Move to Clients"));
+
+		assert.match(dom.text(), /Move to Clients/);
+	});
+
 	it("closes on Escape and on a click outside it", () => {
 		const dom = mount({ mailboxes: FOLDERS });
 		const isOpen = () =>
@@ -144,7 +173,7 @@ describe("MoveToTrigger", () => {
 
 	it("asks for the folder list only once the picker is opened", () => {
 		const dom = mount();
-		assert.equal(dom.queryAll("[role=option]").length, 0);
+		assert.equal(dom.queryAll("[role=treeitem]").length, 0);
 		dom.click(dom.byLabel("Move to folder"));
 		// No cached mailboxes and no network in the test harness: the picker
 		// shows its loading state rather than an empty list of destinations.

package/src/components/mail/MoveToTrigger.tsx

@@ -1,5 +1,5 @@
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { type MoveMailboxOption, MoveMailboxPicker } from "@remit/ui";
+import { Button, type FolderTreeNode, FolderTreePicker } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { FolderInput } from "lucide-react";
 import {
@@ -17,7 +17,7 @@ import { useFolderAppointments } from "@/hooks/useArchiveMailbox";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
-import { buildMoveOptions } from "@/lib/move-options";
+import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
 import { cn } from "@/lib/utils";
 
 interface MoveToTriggerProps {
@@ -66,6 +66,7 @@ export const MoveToTrigger = ({
 	label,
 }: MoveToTriggerProps) => {
 	const [isOpen, setIsOpen] = useState(false);
+	const [pickedId, setPickedId] = useState<string>();
 	const isDesktop = useIsDesktop();
 	const containerRef = useRef<HTMLDivElement>(null);
 	const triggerLabel = label ?? "Move to folder";
@@ -88,9 +89,9 @@ export const MoveToTrigger = ({
 		enabled: isOpen,
 	});
 	const folderAppointments = useFolderAppointments(accountId);
-	const { createFolder } = useCreateMailbox(accountId);
+	const { createFolderIn } = useCreateMailbox(accountId);
 
-	const options = useMemo<MoveMailboxOption[]>(
+	const options = useMemo<FolderTreeNode[]>(
 		() =>
 			buildMoveOptions({
 				mailboxes: mailboxesResponse?.items ?? [],
@@ -105,22 +106,23 @@ export const MoveToTrigger = ({
 			translator,
 		],
 	);
+	const delimiter = folderDelimiter(mailboxesResponse?.items ?? []);
 
-	const handleSelect = useCallback(
-		(destinationMailboxId: string) => {
-			setIsOpen(false);
-			onMove(destinationMailboxId);
-		},
-		[onMove],
-	);
+	const picked = options.find((option) => option.id === pickedId);
 
-	const handleCreateFolder = useCallback(
-		async (name: string, signal?: AbortSignal): Promise<MoveMailboxOption> => {
-			const folder = await createFolder(name, signal);
-			return { id: folder.id, label: folder.label };
-		},
-		[createFolder],
-	);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		setPickedId(undefined);
+	}, []);
+
+	// Tapping a folder both picks it and opens it, so the move waits for a
+	// confirmation — otherwise the first tap would fire before the user could
+	// reach anything nested inside it.
+	const handleMove = useCallback(() => {
+		if (!picked) return;
+		close();
+		onMove(picked.id);
+	}, [picked, close, onMove]);
 
 	// Desktop popover: dismiss on outside click + Escape.
 	useEffect(() => {
@@ -130,11 +132,11 @@ export const MoveToTrigger = ({
 				containerRef.current &&
 				!containerRef.current.contains(event.target as Node)
 			) {
-				setIsOpen(false);
+				close();
 			}
 		};
 		const handleKey = (event: KeyboardEvent) => {
-			if (event.key === "Escape") setIsOpen(false);
+			if (event.key === "Escape") close();
 		};
 		document.addEventListener("mousedown", handlePointer);
 		document.addEventListener("keydown", handleKey);
@@ -142,7 +144,7 @@ export const MoveToTrigger = ({
 			document.removeEventListener("mousedown", handlePointer);
 			document.removeEventListener("keydown", handleKey);
 		};
-	}, [isOpen, isDesktop]);
+	}, [isOpen, isDesktop, close]);
 
 	const isTriggerDisabled = disabled || !!disabledHint;
 
@@ -156,10 +158,10 @@ export const MoveToTrigger = ({
 			}}
 			aria-label={triggerLabel}
 			// Mobile opens a vaul Drawer (modal dialog), desktop opens a
-			// non-modal popover whose only content is the listbox of
-			// destinations. Reflect each surface accurately so screen readers
-			// announce the right structure.
-			aria-haspopup={isDesktop ? "listbox" : "dialog"}
+			// non-modal popover whose only content is the folder tree. Reflect
+			// each surface accurately so screen readers announce the right
+			// structure.
+			aria-haspopup={isDesktop ? "tree" : "dialog"}
 			aria-expanded={isOpen}
 			aria-controls={isOpen ? popoverId : undefined}
 			title={disabledHint}
@@ -182,33 +184,44 @@ export const MoveToTrigger = ({
 			/>
 		</div>
 	) : (
-		<MoveMailboxPicker
-			mailboxes={options}
-			onSelect={handleSelect}
-			onCreateFolder={handleCreateFolder}
-			onCancel={() => setIsOpen(false)}
-			autoFocus={!isDesktop}
+		<FolderTreePicker
+			folders={options}
+			selectedId={pickedId}
+			delimiter={delimiter}
+			onSelect={setPickedId}
+			onCreateFolder={createFolderIn}
+			onCancel={close}
 			labels={{
-				createLabel: (folderName) => `Create "${folderName}"`,
-				searchPlaceholder: t("move_picker_placeholder", {
-					defaultValue: "Move to…",
+				filterPlaceholder: t("move_picker_filter_placeholder", {
+					defaultValue: "Filter folders…",
 				}),
-				searchAriaLabel: t("move_picker_filter_label", {
+				filterAriaLabel: t("move_picker_filter_label", {
 					defaultValue: "Filter folders",
 				}),
-				optionLabel: (folderLabel) => `Move to ${folderLabel}`,
-				currentSuffix: "(current folder)",
-				currentTag: "current",
-				emptyMessage: (query) => `No folders match "${query}"`,
 			}}
 		/>
 	);
 
+	const confirmBar = picked && (
+		<div className="shrink-0 border-t border-line p-2">
+			<Button
+				variant="primary"
+				onClick={handleMove}
+				className="h-11 w-full font-semibold"
+			>
+				{`Move to ${picked.label}`}
+			</Button>
+		</div>
+	);
+
 	if (!isDesktop) {
 		return (
 			<>
 				{TriggerButton}
-				<Drawer.Root open={isOpen} onOpenChange={setIsOpen}>
+				<Drawer.Root
+					open={isOpen}
+					onOpenChange={(next) => (next ? setIsOpen(true) : close())}
+				>
 					<Drawer.Portal>
 						<Drawer.Overlay className="fixed inset-0 z-40 bg-black/40" />
 						<Drawer.Content
@@ -220,7 +233,10 @@ export const MoveToTrigger = ({
 							<Drawer.Title className="px-4 py-2 text-base font-semibold border-b border-line">
 								Move to folder
 							</Drawer.Title>
-							<div className="flex-1 overflow-hidden">{pickerBody}</div>
+							<div className="flex min-h-0 flex-1 overflow-hidden">
+								{pickerBody}
+							</div>
+							{confirmBar}
 						</Drawer.Content>
 					</Drawer.Portal>
 				</Drawer.Root>
@@ -240,6 +256,7 @@ export const MoveToTrigger = ({
 					)}
 				>
 					{pickerBody}
+					{confirmBar}
 				</div>
 			)}
 		</div>

package/src/components/mail/SelectionWizardHost.tsx

@@ -7,10 +7,10 @@ import {
 	derivePropertyClauses,
 	deriveSenderClauses,
 	dominantSender,
+	type FolderTreeNode,
 	type MatchCount,
 	type MatchDoor,
 	type MatchMode,
-	type MoveMailboxOption,
 	type RuleClause,
 	type RunState,
 	type SearchConversion,
@@ -50,7 +50,7 @@ import { useSelectedSubjects } from "@/hooks/useSelectedSubjects";
 import type { BulkActionProgress, BulkRunOutcome } from "@/lib/bulk-actions";
 import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
-import { buildMoveOptions } from "@/lib/move-options";
+import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
 import {
 	buildWizardDraft,
 	canBackApplyDraft,
@@ -388,7 +388,7 @@ function SelectionWizardSession({
 	});
 	const folderAppointments = useFolderAppointments(accountId);
 	const translator = useFolderLabelTranslator();
-	const mailboxes = useMemo<MoveMailboxOption[]>(
+	const mailboxes = useMemo<FolderTreeNode[]>(
 		() =>
 			buildMoveOptions({
 				mailboxes: mailboxesData?.items ?? [],
@@ -398,7 +398,7 @@ function SelectionWizardSession({
 			}),
 		[mailboxesData?.items, folderAppointments, mailboxId, translator],
 	);
-	const { createFolder } = useCreateMailbox(accountId);
+	const { createFolderIn } = useCreateMailbox(accountId);
 
 	const folderLabel = mailboxes.find(
 		(mailbox) => mailbox.id === draft.moveMailboxId,
@@ -946,11 +946,12 @@ function SelectionWizardSession({
 				sample: { ...sample, label: "What this matches" },
 			}}
 			folder={{
-				mailboxes,
+				folders: mailboxes,
 				mailboxId: named.moveMailboxId,
+				delimiter: folderDelimiter(mailboxesData?.items ?? []),
 				onSelect: (moveMailboxId) =>
 					setDraft((held) => ({ ...held, moveMailboxId })),
-				onCreateFolder: accountId ? createFolder : undefined,
+				onCreateFolder: accountId ? createFolderIn : undefined,
 				restriction: folderRestriction,
 			}}
 			rule={{

package/src/components/mail/SpamRescue.tsx

@@ -1,6 +1,6 @@
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import {
-	type MoveMailboxOption,
+	type FolderTreeNode,
 	RescueBanner,
 	type RescueCandidate,
 	RescueFromSpamFlow,
@@ -19,7 +19,7 @@ import {
 	useInboxMailbox,
 } from "@/hooks/useArchiveMailbox";
 import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
-import { buildMoveOptions } from "@/lib/move-options";
+import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
 import {
 	recordRescueCandidatesSurfaced,
 	recordRescueCommitted,
@@ -60,7 +60,7 @@ export function SpamRescue({
 		staleTime: Infinity,
 	});
 
-	const folders = useMemo<MoveMailboxOption[]>(
+	const folders = useMemo<FolderTreeNode[]>(
 		() =>
 			buildMoveOptions({
 				mailboxes: mailboxesResponse?.items ?? [],
@@ -117,6 +117,7 @@ export function SpamRescue({
 				candidates={candidates}
 				defaultDestinationId={defaultDestinationId}
 				availableFolders={folders}
+				delimiter={folderDelimiter(mailboxesResponse?.items ?? [])}
 				onConfirmMove={handleConfirmMove}
 				onCancel={() => setOpen(false)}
 			/>

package/src/components/settings/DeleteFolderDialog.tsx

@@ -83,23 +83,16 @@ export function DeleteFolderDialog({
 		onClose();
 	}, [cancel, onClose]);
 
-	// `buildMoveOptions` carries the label and the searchable path but not the
-	// provider path the tree nests by, so the path is joined back on by id here.
-	const destinations = useMemo<FolderTreeNode[]>(() => {
-		const pathById = new Map(
-			mailboxes.map((mailbox) => [mailbox.mailboxId, mailbox.fullPath]),
-		);
-		return buildMoveOptions({
-			mailboxes,
-			folderAppointments: appointments,
-			excludeMailboxId: folder.mailboxId,
-			translator,
-		}).map((option) => ({
-			id: option.id,
-			label: option.label,
-			path: pathById.get(option.id) ?? option.label,
-		}));
-	}, [mailboxes, appointments, folder.mailboxId, translator]);
+	const destinations = useMemo<FolderTreeNode[]>(
+		() =>
+			buildMoveOptions({
+				mailboxes,
+				folderAppointments: appointments,
+				excludeMailboxId: folder.mailboxId,
+				translator,
+			}),
+		[mailboxes, appointments, folder.mailboxId, translator],
+	);
 
 	const name = useMemo(
 		() =>

package/src/lib/move-options.test.ts

@@ -6,7 +6,7 @@ import type {
 	RemitImapFolderAppointment,
 	RemitImapMailboxResponse,
 } from "@remit/api-http-client/types.gen.ts";
-import { buildMoveOptions } from "./move-options.js";
+import { buildMoveOptions, folderDelimiter } from "./move-options.js";
 
 const englishBundle = JSON.parse(
 	readFileSync(
@@ -100,16 +100,15 @@ describe("buildMoveOptions", () => {
 		assert.equal(labelOf(options, "mb-receipts"), "Receipts");
 	});
 
-	test("the full provider path stays searchable", () => {
+	test("a role label keeps the provider path it nests under", () => {
 		const options = buildMoveOptions({
 			mailboxes: applePaths,
 			folderAppointments: appleAppointments,
 			translator: translate,
 		});
-		assert.equal(
-			options.find((option) => option.id === "mb-trash")?.searchValue,
-			"INBOX/Deleted Messages",
-		);
+		const trash = options.find((option) => option.id === "mb-trash");
+		assert.equal(trash?.label, "Trash");
+		assert.equal(trash?.path, "INBOX/Deleted Messages");
 	});
 
 	test("the current mailbox is marked and nothing else is", () => {
@@ -138,3 +137,18 @@ describe("buildMoveOptions", () => {
 		);
 	});
 });
+
+describe("folderDelimiter", () => {
+	test("takes the account's own hierarchy separator", () => {
+		assert.equal(
+			folderDelimiter([
+				make({ mailboxId: "mb-1", fullPath: "INBOX", hierarchyDelimiter: "." }),
+			]),
+			".",
+		);
+	});
+
+	test("falls back to a slash when there are no mailboxes yet", () => {
+		assert.equal(folderDelimiter([]), "/");
+	});
+});

package/src/lib/move-options.ts

@@ -2,7 +2,7 @@ import type {
 	RemitImapFolderAppointment,
 	RemitImapMailboxResponse,
 } from "@remit/api-http-client/types.gen.ts";
-import type { MoveMailboxOption } from "@remit/ui";
+import type { FolderTreeNode } from "@remit/ui";
 import { excludeFolder } from "./delete-folder.js";
 import { buildMailboxRoleMap, labelForMailbox } from "./folder-roles.js";
 import { buildMoveTargets } from "./move-targets.js";
@@ -19,11 +19,20 @@ interface MoveOptionsInput {
 	translator?: Translator;
 }
 
+/**
+ * The account's hierarchy separator, which the tree splits paths on. Every
+ * mailbox of an account reports the same one, so the first is the account's.
+ */
+export const folderDelimiter = (
+	mailboxes: readonly RemitImapMailboxResponse[],
+): string => mailboxes[0]?.hierarchyDelimiter ?? "/";
+
 /**
  * The single shaping of a mailbox list into Move-to picker options. Labels
  * follow the account's role appointments (RFC 032, #976) and any
  * `displayNameOverride`, so a picker reads `Inbox`/`Trash` rather than the
- * provider's leaf; the full path stays searchable.
+ * provider's leaf, while the provider path it nests and filters under stays
+ * untouched.
  */
 export const buildMoveOptions = ({
 	mailboxes,
@@ -31,7 +40,7 @@ export const buildMoveOptions = ({
 	currentMailboxId,
 	excludeMailboxId,
 	translator,
-}: MoveOptionsInput): MoveMailboxOption[] => {
+}: MoveOptionsInput): FolderTreeNode[] => {
 	const targets = buildMoveTargets(mailboxes, folderAppointments);
 	const roleMap = buildMailboxRoleMap(folderAppointments);
 	const destinations = excludeMailboxId
@@ -40,7 +49,7 @@ export const buildMoveOptions = ({
 	return destinations.map((mailbox) => ({
 		id: mailbox.mailboxId,
 		label: labelForMailbox(mailbox, roleMap.get(mailbox.mailboxId), translator),
-		searchValue: mailbox.fullPath,
+		path: mailbox.fullPath,
 		isCurrent: mailbox.mailboxId === currentMailboxId,
 	}));
 };