@remit/ui 0.0.83 → 0.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "type": "module",
   "files": [
     "src"

package/src/components/filter-rule-editor.create.test.ts

@@ -1,10 +1,10 @@
 /**
- * The move-to "New folder…" affordance: the option shows only when
- * `onCreateFolder` is wired; choosing it reveals a name field, and a resolved
- * create picks the new folder as the destination. Mounted against jsdom for the
- * select interaction, the inline field state, and the async resolve. React is
- * imported after the jsdom globals are installed so the controlled value tracker
- * binds to jsdom's prototypes.
+ * The move-to destination as the browsable folder tree: what it says before a
+ * folder is chosen, that a nested folder is told apart from a same-named
+ * sibling, and that a folder can be made inside another one from here. Mounted
+ * against jsdom for the tree interaction, the create form state and the async
+ * resolve. React is imported after the jsdom globals are installed so the
+ * controlled value tracker binds to jsdom's prototypes.
  */
 import assert from "node:assert/strict";
 import { after, afterEach, before, beforeEach, describe, it } from "node:test";
@@ -12,14 +12,26 @@ import type { JSDOM } from "jsdom";
 import type {
 	act as reactAct,
 	createElement as reactCreateElement,
+	useState as reactUseState,
 } from "react";
 import type { Root, createRoot as reactCreateRoot } from "react-dom/client";
-import type { FilterRule, FolderOption, PreviewCount } from "./filter-rule.js";
+import type { FilterRule, PreviewCount } from "./filter-rule.js";
 import type { FilterRuleEditor as FilterRuleEditorType } from "./filter-rule-editor.js";
+import type { FolderTreeNode } from "./folder-tree-picker.js";
 
-const folders: FolderOption[] = [
-	{ id: "mbx-inbox", label: "Inbox" },
-	{ id: "mbx-archive", label: "Archive" },
+// `Prullenbak` labelled Trash is the account's own naming; two folders named
+// Receipts at different depths are what a flat list of leaf names cannot tell
+// apart.
+const folders: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX" },
+	{ id: "mbx-trash", label: "Trash", path: "INBOX/Prullenbak" },
+	{ id: "mbx-receipts", label: "Receipts", path: "INBOX/Receipts" },
+	{ id: "mbx-travel", label: "Travel", path: "INBOX/Travel" },
+	{
+		id: "mbx-travel-receipts",
+		label: "Receipts",
+		path: "INBOX/Travel/Receipts",
+	},
 ];
 
 const rule: FilterRule = {
@@ -35,6 +47,7 @@ let container: HTMLElement;
 let root: Root;
 let act: typeof reactAct;
 let createElement: typeof reactCreateElement;
+let useState: typeof reactUseState;
 let createRoot: typeof reactCreateRoot;
 let FilterRuleEditor: typeof FilterRuleEditorType;
 
@@ -56,10 +69,15 @@ before(async () => {
 	(
 		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
 	).IS_REACT_ACT_ENVIRONMENT = true;
+	Object.defineProperty(dom.window.HTMLElement.prototype, "scrollIntoView", {
+		configurable: true,
+		value: () => undefined,
+	});
 
 	const react = await import("react");
 	act = react.act;
 	createElement = react.createElement;
+	useState = react.useState;
 	({ createRoot } = await import("react-dom/client"));
 	({ FilterRuleEditor } = await import("./filter-rule-editor.js"));
 });
@@ -76,174 +94,262 @@ beforeEach(() => {
 	root = createRoot(container);
 });
 
-afterEach(() => {
-	act(() => {
+afterEach(async () => {
+	await act(async () => {
 		root.unmount();
 	});
 });
 
-function destinationSelect(): HTMLSelectElement {
-	return container.querySelector(
-		'select[aria-label="Destination folder"]',
-	) as HTMLSelectElement;
-}
-
-function createOption(): HTMLOptionElement | undefined {
-	return Array.from(destinationSelect().querySelectorAll("option")).find(
-		(option) => option.textContent?.includes("New folder"),
-	);
+interface MountOptions {
+	/** The destination the rule already carries when the editor opens. */
+	initialDestination?: string;
+	onCreateFolder?: (
+		name: string,
+		parentPath: string,
+		signal?: AbortSignal,
+	) => Promise<FolderTreeNode>;
+	onChangeMove?: (id: string) => void;
 }
 
-function chooseCreateOption() {
-	const select = destinationSelect();
-	const value = createOption()?.value ?? "";
-	const setter = Object.getOwnPropertyDescriptor(
-		dom.window.HTMLSelectElement.prototype,
-		"value",
-	)?.set;
-	setter?.call(select, value);
-	act(() => {
-		select.dispatchEvent(new dom.window.Event("change", { bubbles: true }));
+/** Holds the destination the way the app does, so a pick shows on screen. */
+const mount = async ({
+	initialDestination,
+	onCreateFolder,
+	onChangeMove,
+}: MountOptions = {}) => {
+	const Controlled = () => {
+		const [moveMailboxId, setMoveMailboxId] = useState<string | undefined>(
+			initialDestination,
+		);
+		return createElement(FilterRuleEditor, {
+			rule: { ...rule, moveMailboxId },
+			folders,
+			preview,
+			onChangeMove: (id: string) => {
+				setMoveMailboxId(id || undefined);
+				onChangeMove?.(id);
+			},
+			onCreateFolder,
+			onCommit: () => {},
+			onCancel: () => {},
+		});
+	};
+	await act(async () => {
+		root.render(createElement(Controlled));
 	});
-}
+};
 
-function setInput(el: HTMLInputElement, value: string) {
-	const setter = Object.getOwnPropertyDescriptor(
-		dom.window.HTMLInputElement.prototype,
-		"value",
-	)?.set;
-	setter?.call(el, value);
-	act(() => {
-		el.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
+const click = async (element: Element | null | undefined) => {
+	if (!(element instanceof dom.window.HTMLElement))
+		assert.fail("control not rendered");
+	await act(async () => {
+		element.click();
 	});
-}
+};
+
+const byAriaLabel = (label: string): HTMLElement | null =>
+	container.querySelector(`[aria-label="${label}"]`);
 
-function button(text: string): HTMLButtonElement | undefined {
-	return Array.from(container.querySelectorAll("button")).find(
+const byText = (text: string): HTMLButtonElement | undefined =>
+	Array.from(container.querySelectorAll("button")).find(
 		(candidate) => candidate.textContent?.trim() === text,
 	);
-}
 
-function mount(overrides: {
-	onCreateFolder?: (name: string) => Promise<FolderOption>;
-	onChangeMove?: (id: string) => void;
-}) {
-	act(() => {
-		root.render(
-			createElement(FilterRuleEditor, {
-				rule,
-				folders,
-				preview,
-				onCommit: () => {},
-				onCancel: () => {},
-				...overrides,
-			}),
-		);
+const rows = (): HTMLElement[] =>
+	Array.from(container.querySelectorAll('[role="treeitem"]'));
+
+const receiptRows = (): HTMLElement[] =>
+	rows().filter((row) => row.getAttribute("aria-label") === "Move to Receipts");
+
+const rowLabels = (): string[] =>
+	rows().map((row) => row.getAttribute("aria-label") ?? "");
+
+const openTree = async () => {
+	await click(byText("Choose a folder"));
+};
+
+const openFolder = async (label: string) => {
+	await click(byAriaLabel(`Move to ${label}`));
+};
+
+const nameField = (): HTMLInputElement | null => {
+	const label = Array.from(container.querySelectorAll("label")).find(
+		(node) => node.textContent?.trim() === "Folder name",
+	);
+	const id = label?.getAttribute("for");
+	return id
+		? (container.querySelector(`input[id="${id}"]`) as HTMLInputElement | null)
+		: null;
+};
+
+const typeName = async (value: string) => {
+	const input = nameField();
+	assert.ok(input, "the folder name field is on screen");
+	await act(async () => {
+		Object.getOwnPropertyDescriptor(
+			dom.window.HTMLInputElement.prototype,
+			"value",
+		)?.set?.call(input, value);
+		input.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
 	});
-}
+};
 
-describe("FilterRuleEditor new-folder option", () => {
-	it("does not offer the create option without onCreateFolder", () => {
-		mount({});
-		assert.equal(createOption(), undefined);
+describe("FilterRuleEditor move destination", () => {
+	it("keeps the tree closed until a destination is asked for", async () => {
+		await mount();
+		assert.equal(rows().length, 0);
+		assert.match(container.textContent ?? "", /No folder yet/);
+		await openTree();
+		assert.ok(rows().length > 0, "the folder tree is on screen");
 	});
 
-	it("offers the create option when onCreateFolder is wired", () => {
-		mount({ onCreateFolder: async () => ({ id: "x", label: "x" }) });
-		assert.ok(createOption(), "the ＋ New folder… option is present");
+	it("names a folder as the account names it, not as the provider paths it", async () => {
+		await mount();
+		await openTree();
+		await openFolder("Inbox");
+		assert.ok(
+			rowLabels().includes("Move to Trash"),
+			"the renamed folder reads as Trash",
+		);
+		assert.ok(
+			!rowLabels().some((label) => label.includes("Prullenbak")),
+			"the provider leaf is never what the row reads as",
+		);
 	});
 
-	it("reveals the name field only after the option is chosen", () => {
-		mount({ onCreateFolder: async () => ({ id: "x", label: "x" }) });
-		assert.equal(
-			container.querySelector('input[aria-label="New folder name"]'),
-			null,
+	it("tells a nested folder apart from its same-named sibling", async () => {
+		await mount();
+		await openTree();
+		await openFolder("Inbox");
+		// The nested Receipts is out of reach until Travel is opened, so the two
+		// same-named folders are never two identical entries in one list.
+		assert.equal(receiptRows().length, 1);
+		await openFolder("Travel");
+		const nested = receiptRows();
+		assert.equal(nested.length, 2);
+		assert.deepEqual(
+			nested.map((row) => row.getAttribute("aria-level")),
+			["2", "3"],
 		);
-		chooseCreateOption();
+		await click(nested[1]);
 		assert.ok(
-			container.querySelector('input[aria-label="New folder name"]'),
-			"the name field appears",
+			byText("Move matches to Inbox / Travel / Receipts"),
+			"the destination reads as its trail, not a bare leaf name",
 		);
 	});
 
-	it("creates the folder and selects it as the destination", async () => {
-		const moved: string[] = [];
-		mount({
-			onChangeMove: (id) => moved.push(id),
-			onCreateFolder: async (name) => ({ id: "mbx-created", label: name }),
-		});
-		chooseCreateOption();
-		const nameInput = container.querySelector(
-			'input[aria-label="New folder name"]',
-		) as HTMLInputElement;
-		setInput(nameInput, "Receipts");
-		await act(async () => {
-			button("Create folder")?.click();
+	it("re-points the rule only on the confirmation, never on the way past", async () => {
+		const picked: string[] = [];
+		await mount({ onChangeMove: (id) => picked.push(id) });
+		await openTree();
+		await openFolder("Inbox");
+		await openFolder("Travel");
+		await click(receiptRows()[1]);
+		assert.deepEqual(picked, [], "browsing changes nothing");
+		await click(byText("Move matches to Inbox / Travel / Receipts"));
+		assert.deepEqual(picked, ["mbx-travel-receipts"]);
+	});
+
+	it("leaves the destination alone when the tree is cancelled", async () => {
+		const picked: string[] = [];
+		await mount({ onChangeMove: (id) => picked.push(id) });
+		await openTree();
+		await openFolder("Inbox");
+		await click(byAriaLabel("Move to Trash"));
+		await click(byText("Cancel"));
+		assert.deepEqual(picked, []);
+		assert.match(container.textContent ?? "", /No folder yet/);
+	});
+
+	it("opens on the branch holding the destination the rule already has", async () => {
+		await mount({ initialDestination: "mbx-travel-receipts" });
+		assert.match(container.textContent ?? "", /Inbox \/ Travel \/ Receipts/);
+		await openTree();
+		const selected = rows().filter(
+			(row) => row.getAttribute("aria-selected") === "true",
+		);
+		assert.deepEqual(
+			selected.map((row) => row.getAttribute("aria-level")),
+			["3"],
+		);
+	});
+
+	it("drops the move action so a rule can apply a label alone", async () => {
+		const picked: string[] = [];
+		await mount({
+			initialDestination: "mbx-receipts",
+			onChangeMove: (id) => picked.push(id),
 		});
-		assert.deepEqual(moved, ["mbx-created"]);
+		await click(byText("Don't move matches"));
+		assert.deepEqual(picked, [""]);
 	});
 
-	it("keeps the name field open and surfaces the rejection message when create fails", async () => {
-		const moved: string[] = [];
-		mount({
-			onChangeMove: (id) => moved.push(id),
-			onCreateFolder: async () => {
-				throw new Error("A folder with that name already exists.");
+	it("offers no create affordance without onCreateFolder", async () => {
+		await mount();
+		await openTree();
+		assert.equal(byAriaLabel("New folder"), null);
+	});
+
+	it("creates a folder inside another and makes it the destination", async () => {
+		const created: { name: string; parentPath: string }[] = [];
+		const picked: string[] = [];
+		await mount({
+			onChangeMove: (id) => picked.push(id),
+			onCreateFolder: async (name, parentPath) => {
+				created.push({ name, parentPath });
+				return {
+					id: "mbx-created",
+					label: name,
+					path: `${parentPath}/${name}`,
+				};
 			},
 		});
-		chooseCreateOption();
-		const nameInput = container.querySelector(
-			'input[aria-label="New folder name"]',
-		) as HTMLInputElement;
-		setInput(nameInput, "Archive");
-		await act(async () => {
-			button("Create folder")?.click();
+		await openTree();
+		await openFolder("Inbox");
+		await openFolder("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await typeName("Car hire");
+		await click(byText("Create folder"));
+		assert.deepEqual(created, [
+			{ name: "Car hire", parentPath: "INBOX/Travel" },
+		]);
+		await click(byText("Move matches to Inbox / Travel / Car hire"));
+		assert.deepEqual(picked, ["mbx-created"]);
+	});
+
+	it("offers a created folder before the caller's folder list refetches", async () => {
+		await mount({
+			onCreateFolder: async (name, parentPath) => ({
+				id: "mbx-created",
+				label: name,
+				path: parentPath ? `${parentPath}/${name}` : name,
+			}),
 		});
-		assert.deepEqual(moved, []);
-		assert.ok(
-			container.querySelector('input[aria-label="New folder name"]'),
-			"the name field stays open",
-		);
-		assert.match(
-			container.querySelector('[role="alert"]')?.textContent ?? "",
-			/already exists/,
-		);
+		await openTree();
+		await click(byAriaLabel("New folder"));
+		await typeName("Receipts 2026");
+		await click(byText("Create folder"));
+		await click(byText("Move matches to Receipts 2026"));
+		assert.match(container.textContent ?? "", /Receipts 2026/);
 	});
 
-	it("falls back to the generic message for a non-Error rejection", async () => {
-		mount({
+	it("states a failed create where it happened and binds no destination", async () => {
+		const picked: string[] = [];
+		await mount({
+			onChangeMove: (id) => picked.push(id),
 			onCreateFolder: async () => {
-				throw "opaque";
+				throw new Error("A folder with that name already exists.");
 			},
 		});
-		chooseCreateOption();
-		const nameInput = container.querySelector(
-			'input[aria-label="New folder name"]',
-		) as HTMLInputElement;
-		setInput(nameInput, "Receipts");
-		await act(async () => {
-			button("Create folder")?.click();
-		});
+		await openTree();
+		await click(byAriaLabel("New folder"));
+		await typeName("Receipts");
+		await click(byText("Create folder"));
+		assert.deepEqual(picked, []);
+		assert.ok(nameField(), "the name field stays open");
 		assert.match(
 			container.querySelector('[role="alert"]')?.textContent ?? "",
-			/Couldn't create that folder/,
-		);
-	});
-
-	it("cancels the create field and leaves the destination unchanged", () => {
-		const moved: string[] = [];
-		mount({
-			onChangeMove: (id) => moved.push(id),
-			onCreateFolder: async (name) => ({ id: "mbx-created", label: name }),
-		});
-		chooseCreateOption();
-		act(() => {
-			button("Cancel")?.click();
-		});
-		assert.equal(
-			container.querySelector('input[aria-label="New folder name"]'),
-			null,
+			/already exists/,
 		);
-		assert.deepEqual(moved, []);
 	});
 });

package/src/components/filter-rule-editor.stories.tsx

@@ -13,7 +13,6 @@ import {
 	demoSubjectPrefillRule,
 	demoVocabularyRule,
 	type FilterRule,
-	type FolderOption,
 	type LabelOption,
 	type PreviewCount,
 	type RuleClause,
@@ -24,6 +23,7 @@ import {
 	FilterRuleEditor,
 	type FilterRuleEditorProps,
 } from "./filter-rule-editor.js";
+import type { FolderTreeNode } from "./folder-tree-picker.js";
 
 const meta: Meta<typeof FilterRuleEditor> = {
 	title: "FilterRuleEditor",
@@ -75,8 +75,9 @@ function LiveEditor({
 	labels?: LabelOption[];
 	onCreateFolder?: (
 		name: string,
+		parentPath: string,
 		signal?: AbortSignal,
-	) => Promise<FolderOption>;
+	) => Promise<FolderTreeNode>;
 	onCreateLabel?: (name: string) => Promise<LabelOption>;
 }) {
 	const [rule, setRule] = useState<FilterRule>(initialRule);
@@ -323,95 +324,184 @@ export const SubjectClauseStaysFreeText: Story = {
 	),
 };
 
+const tick = () => new Promise((resolve) => setTimeout(resolve, 60));
+
+// The play functions fail loudly rather than quietly rendering a story that
+// documents a state it never reached.
+const clickText = (canvasElement: HTMLElement, label: string) => {
+	const button = Array.from(
+		canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+	).find((candidate) => candidate.textContent?.trim() === label);
+	if (!button) throw new Error(`no button reading "${label}"`);
+	button.click();
+};
+
+const clickAriaLabel = (canvasElement: HTMLElement, label: string) => {
+	const control = canvasElement.querySelector<HTMLElement>(
+		`[aria-label="${label}"]`,
+	);
+	if (!control) throw new Error(`no control labelled "${label}"`);
+	control.click();
+};
+
+const setInputValue = (input: HTMLInputElement, value: string) => {
+	Object.getOwnPropertyDescriptor(
+		HTMLInputElement.prototype,
+		"value",
+	)?.set?.call(input, value);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+};
+
+/** The create form's name field, found by the label the kit gives it. */
+const typeFolderName = (canvasElement: HTMLElement, name: string) => {
+	const label = Array.from(canvasElement.querySelectorAll("label")).find(
+		(node) => node.textContent?.trim() === "Folder name",
+	);
+	const id = label?.getAttribute("for");
+	const input = id
+		? canvasElement.querySelector<HTMLInputElement>(`input[id="${id}"]`)
+		: null;
+	if (!input) throw new Error("the folder name field is not on screen");
+	setInputValue(input, name);
+};
+
+/** Opens the destination tree, which the field keeps closed until it is asked for. */
+const openDestinationTree = async (canvasElement: HTMLElement) => {
+	clickText(canvasElement, "Choose a folder");
+	await tick();
+};
+
+/** Opens a folder in the tree; tapping it both picks it and reveals its children. */
+const openFolder = async (canvasElement: HTMLElement, label: string) => {
+	clickAriaLabel(canvasElement, `Move to ${label}`);
+	await tick();
+};
+
+/**
+ * Drive the destination tree into its create form and submit it. `inside` names
+ * the folder the new one is made in; omitted makes it at the top level. Used by
+ * the pending and error stories below so each lands in the state it documents.
+ */
+async function createFolderFromTree(
+	canvasElement: HTMLElement,
+	folderName: string,
+	inside?: string,
+) {
+	await openDestinationTree(canvasElement);
+	if (inside) {
+		await openFolder(canvasElement, "Inbox");
+		await openFolder(canvasElement, inside);
+		clickAriaLabel(canvasElement, `New folder inside ${inside}`);
+	} else {
+		clickAriaLabel(canvasElement, "New folder");
+	}
+	await tick();
+	typeFolderName(canvasElement, folderName);
+	await tick();
+	clickText(canvasElement, "Create folder");
+}
+
 let newFolderSeq = 0;
-const mockCreateFolder = (name: string): Promise<FolderOption> =>
+const mockCreateFolder = (
+	name: string,
+	parentPath: string,
+): Promise<FolderTreeNode> =>
 	new Promise((resolve) => {
 		newFolderSeq += 1;
 		setTimeout(
-			() => resolve({ id: `mbx-new-${newFolderSeq}`, label: name }),
+			() =>
+				resolve({
+					id: `mbx-new-${newFolderSeq}`,
+					label: name,
+					path: parentPath ? `${parentPath}/${name}` : name,
+				}),
 			400,
 		);
 	});
 
 /**
- * The move destination offers a "＋ New folder…" option because `onCreateFolder`
- * is wired. Choosing it reveals a name field; on resolve the folder is added to
- * the select and picked as the destination. Without the prop the option never
- * shows — the editor stays data-agnostic.
+ * The destination is chosen from the same browsable tree every other picker
+ * uses: open a folder to see what is inside it, filter to narrow, and make a
+ * new one where you are looking.
  */
-export const WithNewFolderOption: Story = {
+export const DestinationTree: Story = {
+	name: "Destination — browse the folder tree",
 	render: () => (
 		<LiveEditor initialRule={demoRule} onCreateFolder={mockCreateFolder} />
 	),
+	play: async ({ canvasElement }) => {
+		await openDestinationTree(canvasElement);
+	},
 };
 
 /**
- * Drive the destination field into its create sub-form: pick "＋ New folder…",
- * type a name, and press "Create folder". Used by the pending and error stories
- * below so each lands in the state it documents without a manual click-through.
+ * Two folders named Receipts, one at the top level and one inside Travel. The
+ * tree tells them apart by where they sit; a list of leaf names could not.
  */
-async function openCreateAndSubmit(
-	canvasElement: HTMLElement,
-	folderName: string,
-) {
-	const setSelectValue = Object.getOwnPropertyDescriptor(
-		HTMLSelectElement.prototype,
-		"value",
-	)?.set;
-	const setInputValue = Object.getOwnPropertyDescriptor(
-		HTMLInputElement.prototype,
-		"value",
-	)?.set;
-	const select = canvasElement.querySelector<HTMLSelectElement>(
-		'select[aria-label="Destination folder"]',
-	);
-	if (!select) return;
-	setSelectValue?.call(select, CREATE_FOLDER_STORY_VALUE);
-	select.dispatchEvent(new Event("change", { bubbles: true }));
-	const input = canvasElement.querySelector<HTMLInputElement>(
-		'input[aria-label="New folder name"]',
-	);
-	if (!input) return;
-	setInputValue?.call(input, folderName);
-	input.dispatchEvent(new Event("input", { bubbles: true }));
-	const createButton = Array.from(
-		canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-	).find((button) => button.textContent?.trim() === "Create folder");
-	createButton?.click();
-}
+export const DestinationNestedFolders: Story = {
+	name: "Destination — a nested folder and its same-named sibling",
+	render: () => (
+		<LiveEditor initialRule={demoRule} onCreateFolder={mockCreateFolder} />
+	),
+	play: async ({ canvasElement }) => {
+		await openDestinationTree(canvasElement);
+		await openFolder(canvasElement, "Inbox");
+		await openFolder(canvasElement, "Travel");
+	},
+};
 
-/** Matches the internal CREATE_FOLDER_VALUE option in the destination select. */
-const CREATE_FOLDER_STORY_VALUE = "__filter_create_folder__";
+/**
+ * A new folder is made inside the folder the tree is looking at, so a filter can
+ * point at `Travel/Car hire` without leaving the editor.
+ */
+export const NewFolderInsideAnother: Story = {
+	name: "New folder — inside the folder you opened",
+	render: () => (
+		<LiveEditor initialRule={demoRule} onCreateFolder={mockCreateFolder} />
+	),
+	play: async ({ canvasElement }) => {
+		await openDestinationTree(canvasElement);
+		await openFolder(canvasElement, "Inbox");
+		await openFolder(canvasElement, "Travel");
+		clickAriaLabel(canvasElement, "New folder inside Travel");
+		await tick();
+		typeFolderName(canvasElement, "Car hire");
+	},
+};
 
 /** Mirrors the web-client wait's honest timeout copy. */
 const TIMEOUT_MESSAGE =
 	"The folder was created but the mail server hasn't confirmed it yet, so nothing was attached to it. It's in your folder list — try again in a moment.";
 
-const tick = () => new Promise((resolve) => setTimeout(resolve, 60));
-
-const neverResolvesCreateFolder = (): Promise<FolderOption> =>
-	new Promise<FolderOption>(() => undefined);
+const neverResolvesCreateFolder = (): Promise<FolderTreeNode> =>
+	new Promise<FolderTreeNode>(() => undefined);
 
-const rejectingCreateFolder = (message: string) => (): Promise<FolderOption> =>
-	Promise.reject(new Error(message));
+const rejectingCreateFolder =
+	(message: string) => (): Promise<FolderTreeNode> =>
+		Promise.reject(new Error(message));
 
 /** Rejects the first attempt, resolves the retry — the resume the hook performs. */
 const failThenSucceedCreateFolder = () => {
 	let attempts = 0;
-	return (name: string): Promise<FolderOption> => {
+	return (name: string, parentPath: string): Promise<FolderTreeNode> => {
 		attempts += 1;
 		return attempts === 1
 			? Promise.reject(new Error(TIMEOUT_MESSAGE))
-			: Promise.resolve({ id: "mbx-created", label: name });
+			: Promise.resolve({
+					id: "mbx-created",
+					label: name,
+					path: parentPath ? `${parentPath}/${name}` : name,
+				});
 	};
 };
 
 /** Never resolves on its own; rejects with an AbortError when the signal aborts. */
 const abortAwareCreateFolder = (
 	_name: string,
+	_parentPath: string,
 	signal?: AbortSignal,
-): Promise<FolderOption> =>
-	new Promise<FolderOption>((_resolve, reject) => {
+): Promise<FolderTreeNode> =>
+	new Promise<FolderTreeNode>((_resolve, reject) => {
 		signal?.addEventListener("abort", () =>
 			reject(new DOMException("Aborted", "AbortError")),
 		);
@@ -420,8 +510,7 @@ const abortAwareCreateFolder = (
 /**
  * The folder is a dependent write for the filter, so creating it waits for the
  * mail server to confirm the folder before it can be picked as the destination.
- * The wait shows as "Creating folder…" — held for the whole confirmation, not
- * just a fast optimistic round-trip.
+ * The wait is held in the form, which refuses a second submit while it runs.
  */
 export const NewFolderCreating: Story = {
 	name: "New folder — creating (waiting for the server)",
@@ -432,7 +521,7 @@ export const NewFolderCreating: Story = {
 		/>
 	),
 	play: async ({ canvasElement }) => {
-		await openCreateAndSubmit(canvasElement, "Receipts");
+		await createFolderFromTree(canvasElement, "Receipts");
 	},
 };
 
@@ -452,7 +541,7 @@ export const NewFolderCreateFailed: Story = {
 		/>
 	),
 	play: async ({ canvasElement }) => {
-		await openCreateAndSubmit(canvasElement, "Receipts");
+		await createFolderFromTree(canvasElement, "Receipts");
 	},
 };
 
@@ -470,7 +559,7 @@ export const NewFolderCreateTimedOut: Story = {
 		/>
 	),
 	play: async ({ canvasElement }) => {
-		await openCreateAndSubmit(canvasElement, "Receipts");
+		await createFolderFromTree(canvasElement, "Receipts");
 	},
 };
 
@@ -489,19 +578,16 @@ export const NewFolderCreateRetrySucceeds: Story = {
 		/>
 	),
 	play: async ({ canvasElement }) => {
-		await openCreateAndSubmit(canvasElement, "Receipts");
+		await createFolderFromTree(canvasElement, "Receipts", "Travel");
 		await tick();
-		const retry = Array.from(
-			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-		).find((button) => button.textContent?.trim() === "Create folder");
-		retry?.click();
+		clickText(canvasElement, "Create folder");
 	},
 };
 
 /**
- * Cancelling while "Creating folder…" is in flight aborts the wait: the create
- * promise rejects with an AbortError the field swallows, so no destination binds
- * after the user backed out — the sub-form just closes.
+ * Cancelling while the create is in flight aborts the wait: the create promise
+ * rejects with an AbortError the form swallows, so no destination binds after
+ * the user backed out — the form just closes.
  */
 export const NewFolderCreateCancelledMidWait: Story = {
 	name: "New folder — cancel aborts the wait",
@@ -512,12 +598,9 @@ export const NewFolderCreateCancelledMidWait: Story = {
 		/>
 	),
 	play: async ({ canvasElement }) => {
-		await openCreateAndSubmit(canvasElement, "Receipts");
+		await createFolderFromTree(canvasElement, "Receipts");
 		await tick();
-		const cancel = Array.from(
-			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-		).find((button) => button.textContent?.trim() === "Cancel");
-		cancel?.click();
+		clickText(canvasElement, "Cancel");
 	},
 };
 

package/src/components/filter-rule-editor.tsx

@@ -1,12 +1,5 @@
-import {
-	Fragment,
-	type ReactNode,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import { isAbortError } from "../lib/abort.js";
+import { Fragment, type ReactNode, useMemo, useState } from "react";
+import type { FolderTreeNode } from "../lib/folder-tree.js";
 import { Button } from "./button.js";
 import {
 	AddChipButton,
@@ -21,7 +14,6 @@ import {
 	commitBlockedReason,
 	commitLabel,
 	type FilterRule,
-	type FolderOption,
 	type LabelOption,
 	type MatchOperator,
 	matchJoinWord,
@@ -32,6 +24,7 @@ import {
 	type RuleMatchMode,
 	type RuleScope,
 } from "./filter-rule.js";
+import { FolderTreePicker } from "./folder-tree-picker.js";
 import { Input } from "./input.js";
 import { LabelChip } from "./label-chip.js";
 import { SegmentedControl } from "./segmented-control.js";
@@ -47,7 +40,10 @@ export interface ClauseEditState {
 
 export interface FilterRuleEditorProps {
 	rule: FilterRule;
-	folders: FolderOption[];
+	/** Destinations as the app has them — labelled, and pathed by the provider. */
+	folders: readonly FolderTreeNode[];
+	/** The provider's hierarchy separator, which the destination tree nests on. */
+	delimiter?: string;
 	/** The account's labels the apply-label action can target (issue #26). */
 	labels?: LabelOption[];
 	preview: PreviewCount;
@@ -113,16 +109,19 @@ export interface FilterRuleEditorProps {
 	onChangeMatchOperator?: (operator: MatchOperator) => void;
 	onChangeMove?: (mailboxId: string) => void;
 	/**
-	 * Create a new destination folder from within the editor. Given a folder name
-	 * and an abort signal, resolves to the created folder once the mail server
-	 * confirms it. The editor aborts the signal on unmount or cancel. When absent,
-	 * the "New folder…" option is not offered — the editor stays data-agnostic, so
-	 * stories and consumers without wiring render unchanged.
+	 * Create a new destination folder from within the editor, inside the folder
+	 * the tree is looking at. Creating a folder is an IMAP mutation, so this
+	 * resolves only once the mail server confirms it
+	 * (docs/architecture/imap-mutations.md); the picker holds the wait, states a
+	 * failure where it happened, and aborts the signal on unmount or cancel, so
+	 * the editor can never commit a filter against a folder that does not exist.
+	 * Absent renders no create affordance.
 	 */
 	onCreateFolder?: (
 		name: string,
+		parentPath: string,
 		signal?: AbortSignal,
-	) => Promise<FolderOption>;
+	) => Promise<FolderTreeNode>;
 	onChangeLabel?: (labelId: string) => void;
 	/**
 	 * Create a new label from within the editor (issue #26). Given a label
@@ -153,47 +152,43 @@ const scopeOptions: { value: RuleScope; label: string }[] = [
 	{ value: "until", label: "Until a date" },
 ];
 
-const CREATE_FOLDER_VALUE = "__filter_create_folder__";
 const CREATE_LABEL_VALUE = "__filter_create_label__";
 
 /**
- * The move-to destination select, plus an inline "New folder…" affordance when
- * the consumer wires `onCreateFolder`. Selecting the create option reveals a
- * name field; on resolve the new folder is added to the local option set (so it
- * is selectable even before the caller's folder list refetches) and picked as
- * the destination. Without `onCreateFolder` this is the bare select.
+ * The move-to destination: the same browsable folder tree every other picker
+ * uses, opened from a line that states where matches go now. A folder is
+ * labelled as the app labels it, nested where the provider nests it, and a new
+ * one is made wherever the tree is looking.
+ *
+ * Tapping a folder both picks it and opens it, so the rule is re-pointed on an
+ * explicit confirmation rather than on the way past — otherwise looking inside
+ * a folder on the way to a nested one would rewrite the filter with no undo.
  *
- * The destination is a dependent write: the filter this editor commits binds to
- * the folder, so `onCreateFolder` resolves only once the folder is confirmed on
- * the mail server, not when the create is merely queued. The pending state holds
- * "Creating folder…" for that whole wait, and a create that fails or never
- * confirms rejects with its own message here — the folder is never selected, so
- * the caller cannot commit a filter against a folder that does not exist.
+ * The destination is a dependent write — the filter binds to the folder — so a
+ * created folder is offered only once the mail server has confirmed it. It is
+ * held here as well as returned, so it is pickable before the caller's folder
+ * list has refetched.
  */
 function MoveDestinationField({
 	folders,
 	value,
+	delimiter = "/",
 	onChangeMove,
 	onCreateFolder,
 }: {
-	folders: FolderOption[];
-	value: string;
+	folders: readonly FolderTreeNode[];
+	value?: string;
+	delimiter?: string;
 	onChangeMove?: (mailboxId: string) => void;
 	onCreateFolder?: (
 		name: string,
+		parentPath: string,
 		signal?: AbortSignal,
-	) => Promise<FolderOption>;
+	) => Promise<FolderTreeNode>;
 }) {
-	const [creating, setCreating] = useState(false);
-	const [name, setName] = useState("");
-	const [pending, setPending] = useState(false);
-	const [error, setError] = useState<string>();
-	const [createdFolders, setCreatedFolders] = useState<FolderOption[]>([]);
-	// The create waits for the mail server to confirm the folder; abort it on
-	// unmount or cancel so a late confirmation never binds the destination after
-	// the editor is gone or the sub-form dismissed.
-	const createAbort = useRef<AbortController | null>(null);
-	useEffect(() => () => createAbort.current?.abort(), []);
+	const [browsing, setBrowsing] = useState(false);
+	const [picked, setPicked] = useState<string>();
+	const [createdFolders, setCreatedFolders] = useState<FolderTreeNode[]>([]);
 
 	const options = useMemo(() => {
 		const known = new Set(folders.map((folder) => folder.id));
@@ -203,127 +198,114 @@ function MoveDestinationField({
 		];
 	}, [folders, createdFolders]);
 
-	const handleSelectChange = (next: string) => {
-		if (next === CREATE_FOLDER_VALUE) {
-			setError(undefined);
-			setCreating(true);
-			return;
-		}
-		onChangeMove?.(next);
-	};
-
-	const submit = () => {
-		if (!onCreateFolder) return;
-		const trimmed = name.trim();
-		if (trimmed === "") return;
-		setPending(true);
-		setError(undefined);
-		createAbort.current?.abort();
-		const controller = new AbortController();
-		createAbort.current = controller;
-		onCreateFolder(trimmed, controller.signal)
-			.then((folder) => {
-				setCreatedFolders((prev) =>
-					prev.some((entry) => entry.id === folder.id)
-						? prev
-						: [...prev, folder],
-				);
-				onChangeMove?.(folder.id);
-				setCreating(false);
-				setName("");
-				setPending(false);
+	const createFolder = useMemo(() => {
+		if (!onCreateFolder) return undefined;
+		return async (name: string, parentPath: string, signal?: AbortSignal) => {
+			const created = await onCreateFolder(name, parentPath, signal);
+			setCreatedFolders((prev) =>
+				prev.some((entry) => entry.id === created.id)
+					? prev
+					: [...prev, created],
+			);
+			return created;
+		};
+	}, [onCreateFolder]);
+
+	const chosen = options.find((folder) => folder.id === value);
+	const pending = options.find((folder) => folder.id === picked);
+
+	/** Two folders can share a leaf name, so a destination reads as its trail. */
+	const trail = (folder: FolderTreeNode): string => {
+		const segments = folder.path.split(delimiter);
+		return segments
+			.map((segment, index) => {
+				const path = segments.slice(0, index + 1).join(delimiter);
+				return options.find((option) => option.path === path)?.label ?? segment;
 			})
-			.catch((error: unknown) => {
-				if (isAbortError(error)) return;
-				setError(
-					error instanceof Error
-						? error.message
-						: "Couldn't create that folder. Please try again.",
-				);
-				setPending(false);
-			});
+			.join(" / ");
 	};
 
-	const cancel = () => {
-		createAbort.current?.abort();
-		setCreating(false);
-		setName("");
-		setError(undefined);
-		setPending(false);
+	const close = () => {
+		setBrowsing(false);
+		setPicked(undefined);
 	};
 
-	return (
-		<div className="space-y-2">
-			<Select
-				aria-label="Destination folder"
-				value={value}
-				onChange={(event) => handleSelectChange(event.target.value)}
-			>
-				<option value="">Choose a folder…</option>
-				{options.map((folder) => (
-					<option key={folder.id} value={folder.id}>
-						{folder.label}
-					</option>
-				))}
-				{onCreateFolder && (
-					<option value={CREATE_FOLDER_VALUE}>＋ New folder…</option>
-				)}
-			</Select>
-			{creating && (
-				<div className="space-y-2 rounded-md border border-line bg-surface-sunken p-2">
-					<Input
-						value={name}
-						onChange={(event) => setName(event.target.value)}
-						placeholder="Folder name"
-						aria-label="New folder name"
-						disabled={pending}
-						autoFocus
-						onKeyDown={(event) => {
-							if (event.key === "Enter") {
-								event.preventDefault();
-								submit();
-							}
-							if (event.key === "Escape") {
-								event.preventDefault();
-								cancel();
-							}
+	if (!browsing) {
+		return (
+			<div className="rounded-md border border-line bg-surface-sunken p-3">
+				<p className="text-sm font-medium text-fg">
+					{chosen ? trail(chosen) : "No folder yet"}
+				</p>
+				<div className="mt-1 flex flex-wrap items-center gap-3">
+					<Button
+						variant="ghost"
+						size="sm"
+						className="px-0"
+						onClick={() => {
+							setPicked(value);
+							setBrowsing(true);
 						}}
-					/>
-					{error && (
-						<p className="text-2xs text-danger" role="alert">
-							{error}
-						</p>
-					)}
-					<div className="flex gap-2">
-						<Button
-							variant="primary"
-							size="sm"
-							onClick={submit}
-							disabled={pending || name.trim() === ""}
-						>
-							{pending ? "Creating folder…" : "Create folder"}
-						</Button>
+					>
+						Choose a folder
+					</Button>
+					{chosen && (
 						<Button
 							variant="ghost"
 							size="sm"
-							onClick={cancel}
-							disabled={pending}
+							className="px-0"
+							onClick={() => onChangeMove?.("")}
 						>
-							Cancel
+							Don't move matches
 						</Button>
-					</div>
+					)}
 				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-2">
+			<div className="flex h-72 min-h-0 overflow-hidden rounded-md border border-line bg-surface">
+				<FolderTreePicker
+					folders={options}
+					selectedId={picked}
+					delimiter={delimiter}
+					onSelect={setPicked}
+					onCreateFolder={createFolder}
+					onCancel={close}
+					labels={{
+						createPending: "Waiting for the mail server to confirm the folder…",
+					}}
+				/>
+			</div>
+			{pending ? (
+				<Button
+					variant="primary"
+					onClick={() => {
+						onChangeMove?.(pending.id);
+						close();
+					}}
+					className="w-full"
+				>
+					<span className="truncate">{`Move matches to ${trail(pending)}`}</span>
+				</Button>
+			) : (
+				<p className="text-2xs text-fg-subtle">
+					Tap a folder to open it, or make a new one where you want it.
+				</p>
 			)}
+			<Button variant="ghost" size="sm" onClick={close} className="w-full">
+				Cancel
+			</Button>
 		</div>
 	);
 }
 
 /**
  * The apply-label select, plus an inline "New label…" affordance when the
- * consumer wires `onCreateLabel` (issue #26). Mirrors `MoveDestinationField`:
- * selecting the create option reveals a name field, and the created label is
- * added to the local option set and picked immediately, before the caller's
- * label list refetches.
+ * consumer wires `onCreateLabel` (issue #26). Selecting the create option
+ * reveals a name field, and the created label is added to the local option set
+ * and picked immediately, before the caller's label list refetches.
  */
 function LabelDestinationField({
 	labels,
@@ -468,6 +450,7 @@ function LabelDestinationField({
 export function FilterRuleEditor({
 	rule,
 	folders,
+	delimiter,
 	labels = [],
 	preview,
 	notice,
@@ -622,7 +605,8 @@ export function FilterRuleEditor({
 					<p className="text-xs font-medium text-fg-muted">Move matches to</p>
 					<MoveDestinationField
 						folders={folders}
-						value={rule.moveMailboxId ?? ""}
+						value={rule.moveMailboxId}
+						delimiter={delimiter}
 						onChangeMove={onChangeMove}
 						onCreateFolder={onCreateFolder}
 					/>

package/src/components/filter-rule.render.test.ts

@@ -20,7 +20,6 @@ import {
 	demoSenderFallbackRule,
 	demoVocabularyRule,
 	type FilterRule,
-	type FolderOption,
 	type LabelOption,
 	matchJoinWord,
 	matchOperatorLabel,
@@ -34,14 +33,15 @@ import {
 	FilterRuleEditor,
 	type FilterRuleEditorProps,
 } from "./filter-rule-editor.js";
+import type { FolderTreeNode } from "./folder-tree-picker.js";
 
 /** SSR splits interpolations with comment markers; sentences read across them. */
 const render = (element: Parameters<typeof renderToString>[0]) =>
 	renderToString(element).replaceAll("<!-- -->", "");
 
-const FOLDERS: FolderOption[] = [
-	{ id: "mbx-inbox", label: "Inbox" },
-	{ id: "mbx-archive", label: "Archive" },
+const FOLDERS: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX" },
+	{ id: "mbx-archive", label: "Archive", path: "INBOX/Archive" },
 ];
 
 const LABELS: LabelOption[] = [

package/src/components/filter-rule.ts

@@ -7,6 +7,7 @@
  * Naming tracks the RFC: rule, clause, widen, scope.
  */
 
+import type { FolderTreeNode } from "../lib/folder-tree.js";
 import type { Suggestion } from "./suggest-list.js";
 
 /**
@@ -105,11 +106,6 @@ export interface FilterRule {
 	name?: string;
 }
 
-export interface FolderOption {
-	id: string;
-	label: string;
-}
-
 export interface LabelOption {
 	id: string;
 	name: string;
@@ -313,12 +309,22 @@ export function commitBlockedReason(
 	return previewSettledReason(preview);
 }
 
-export const demoFolders: FolderOption[] = [
-	{ id: "mbx-inbox", label: "Inbox" },
-	{ id: "mbx-archive", label: "Archive" },
-	{ id: "mbx-receipts", label: "Receipts" },
-	{ id: "mbx-travel", label: "Travel" },
-	{ id: "mbx-junk", label: "Junk" },
+// Two folders named Receipts at different depths, and a Trash labelled by its
+// role rather than its provider leaf: what a flat list of leaf names cannot
+// tell apart.
+export const demoFolders: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX" },
+	{ id: "mbx-archive", label: "Archive", path: "INBOX/Archive" },
+	{ id: "mbx-receipts", label: "Receipts", path: "INBOX/Receipts" },
+	{ id: "mbx-receipts-2026", label: "2026", path: "INBOX/Receipts/2026" },
+	{ id: "mbx-travel", label: "Travel", path: "INBOX/Travel" },
+	{
+		id: "mbx-travel-receipts",
+		label: "Receipts",
+		path: "INBOX/Travel/Receipts",
+	},
+	{ id: "mbx-junk", label: "Junk", path: "INBOX/Junk" },
+	{ id: "mbx-trash", label: "Trash", path: "INBOX/Prullenbak" },
 ];
 
 export const demoLabels: LabelOption[] = [

package/src/components/folder-tree-picker.tsx

@@ -146,7 +146,12 @@ export const FolderTreePicker = ({
 }: FolderTreePickerProps) => {
 	const text = { ...defaultLabels, ...labels };
 	const [query, setQuery] = useState("");
-	const [opened, setOpened] = useState<ReadonlySet<string>>(new Set());
+	// A destination chosen before the picker opened is out of reach behind its
+	// ancestors, so the branch holding it starts open and the choice is on screen.
+	const [opened, setOpened] = useState<ReadonlySet<string>>(() => {
+		const selected = folders.find((folder) => folder.id === selectedId);
+		return new Set(selected ? folderAncestors(selected.path, delimiter) : []);
+	});
 	const [draft, setDraft] = useState<Draft | null>(null);
 	const [draftName, setDraftName] = useState("");
 	const [draftError, setDraftError] = useState<string>();

package/src/index.ts

@@ -170,7 +170,6 @@ export {
 	demoSubjectPrefillRule,
 	demoVocabularyRule,
 	type FilterRule,
-	type FolderOption,
 	hasActiveWiden,
 	type LabelOption,
 	type MatchOperator,