@remit/web-client 0.0.119 → 0.0.120

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.119",
+  "version": "0.0.120",
   "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/FilterEditor.render.test.ts

@@ -35,8 +35,8 @@ afterEach(() => {
 const ACCOUNT_ID = "acc-1";
 
 const FOLDERS = [
-	{ id: "mbx-receipts", label: "Receipts" },
-	{ id: "mbx-archive", label: "Archive" },
+	{ id: "mbx-receipts", label: "Receipts", path: "INBOX/Receipts" },
+	{ id: "mbx-archive", label: "Archive", path: "INBOX/Archive" },
 ];
 
 const filterFixture = (

package/src/components/settings/FilterEditor.tsx

@@ -5,7 +5,7 @@ import {
 	type ClauseField,
 	type FilterRule,
 	FilterRuleEditor,
-	type FolderOption,
+	type FolderTreeNode,
 	type LabelOption,
 	type MatchOperator,
 	previewCountSummary,
@@ -34,7 +34,9 @@ import {
 interface FilterEditorProps {
 	accountId: string;
 	filter: RemitImapFilterResponse;
-	folders: FolderOption[];
+	folders: readonly FolderTreeNode[];
+	/** The provider hierarchy separator the destination tree nests on. */
+	delimiter?: string;
 	labels: LabelOption[];
 	/**
 	 * This deployment ships no vector pipeline, so a semantic anchor cannot be
@@ -61,6 +63,7 @@ export function FilterEditor({
 	accountId,
 	filter,
 	folders,
+	delimiter,
 	labels,
 	semanticUnavailable = false,
 	onClose,
@@ -77,7 +80,7 @@ export function FilterEditor({
 	const { count: preview } = useRulePreview(accountId, rulePredicate(rule));
 	const update = useUpdateFilter(accountId, filter.filterId);
 	const organizeJob = useOrganizeJob(accountId);
-	const { createFolder } = useCreateMailbox(accountId);
+	const { createFolderIn } = useCreateMailbox(accountId);
 	const { createLabel } = useCreateLabel(accountId);
 	const onCreateLabel = async (name: string): Promise<LabelOption> => {
 		const label = await createLabel(name);
@@ -219,6 +222,7 @@ export function FilterEditor({
 		<FilterRuleEditor
 			rule={rule}
 			folders={folders}
+			delimiter={delimiter}
 			labels={labels}
 			preview={preview}
 			// The update endpoint carries no anchor field at all (reader #266), so a
@@ -240,7 +244,7 @@ export function FilterEditor({
 			onCancelClause={() => setClauseEdit(undefined)}
 			onChangeMatchOperator={changeMatchOperator}
 			onChangeMove={changeMove}
-			onCreateFolder={createFolder}
+			onCreateFolder={createFolderIn}
 			onChangeLabel={changeLabel}
 			onCreateLabel={onCreateLabel}
 			onChangeName={changeName}

package/src/components/settings/FilterEditorSurface.tsx

@@ -2,7 +2,7 @@ import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.t
 import {
 	BottomSheet,
 	Dialog,
-	type FolderOption,
+	type FolderTreeNode,
 	type LabelOption,
 } from "@remit/ui";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
@@ -11,7 +11,8 @@ import { FilterEditor } from "./FilterEditor";
 interface FilterEditorSurfaceProps {
 	accountId: string;
 	filter: RemitImapFilterResponse;
-	folders: FolderOption[];
+	folders: readonly FolderTreeNode[];
+	delimiter?: string;
 	labels: LabelOption[];
 	semanticUnavailable?: boolean;
 	onClose: () => void;
@@ -27,6 +28,7 @@ export function FilterEditorSurface({
 	accountId,
 	filter,
 	folders,
+	delimiter,
 	labels,
 	semanticUnavailable,
 	onClose,
@@ -38,6 +40,7 @@ export function FilterEditorSurface({
 			accountId={accountId}
 			filter={filter}
 			folders={folders}
+			delimiter={delimiter}
 			labels={labels}
 			semanticUnavailable={semanticUnavailable}
 			onClose={onClose}

package/src/components/settings/settings-filter.stories.tsx

@@ -1,5 +1,5 @@
 import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import { BottomSheet, type FolderOption, type LabelOption } from "@remit/ui";
+import { BottomSheet, type FolderTreeNode, type LabelOption } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
@@ -17,11 +17,20 @@ import { FilterEditor } from "./FilterEditor";
 
 const ACCOUNT_ID = "acc-1";
 
-const FOLDERS: FolderOption[] = [
-	{ id: "mbx-inbox", label: "Inbox" },
-	{ id: "mbx-archive", label: "Archive" },
-	{ id: "mbx-receipts", label: "Receipts" },
-	{ id: "mbx-travel", label: "Travel" },
+// Two folders named Receipts at different depths, and a Trash the account has
+// renamed: the destination reads as the user names it and nests where the
+// provider puts it.
+const FOLDERS: 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-travel", label: "Travel", path: "INBOX/Travel" },
+	{
+		id: "mbx-travel-receipts",
+		label: "Receipts",
+		path: "INBOX/Travel/Receipts",
+	},
+	{ id: "mbx-trash", label: "Trash", path: "INBOX/Prullenbak" },
 ];
 
 const LABELS: LabelOption[] = [

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

@@ -16,7 +16,7 @@ import type {
 	RemitImapMailboxResponse,
 } from "@remit/api-http-client/types.gen.ts";
 import { MailboxSyncStatus } from "@remit/domain-enums";
-import type { FolderOption } from "@remit/ui";
+import type { FolderTreeNode } from "@remit/ui";
 import { act, createElement } from "react";
 import { MAILBOX_SYNC_FAILED_MESSAGE } from "../lib/mailbox-sync-wait";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
@@ -28,7 +28,7 @@ const ACCOUNT = "acc-1";
 let harness: DomHarness | undefined;
 let http: HttpMock | undefined;
 let createFolder:
-	| ((name: string, signal?: AbortSignal) => Promise<FolderOption>)
+	| ((name: string, signal?: AbortSignal) => Promise<FolderTreeNode>)
 	| undefined;
 
 afterEach(() => {
@@ -132,7 +132,7 @@ describe("useCreateMailbox.createFolder validation", () => {
 
 	it("passes a valid name through and resolves once the folder is confirmed synced", async () => {
 		mount([mailbox("INBOX", "/")]);
-		let result: FolderOption | undefined;
+		let result: FolderTreeNode | undefined;
 		await act(async () => {
 			result = await createFolder?.("Taxes");
 		});
@@ -202,7 +202,7 @@ describe("useCreateMailbox.createFolder validation", () => {
 
 		// The server confirms; the user presses "Create folder" again, same name.
 		status = MailboxSyncStatus.synced;
-		let result: FolderOption | undefined;
+		let result: FolderTreeNode | undefined;
 		await act(async () => {
 			result = await createFolder?.("Taxes");
 		});

package/src/routes/settings/-filters.test.ts

@@ -2,6 +2,7 @@
 import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
 import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import { MailboxSyncStatus } from "@remit/domain-enums";
 import { createElement } from "react";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { makeAccount, makeMailbox } from "../../test-support/fixtures";
@@ -31,15 +32,32 @@ const account = makeAccount({
 });
 
 // Dutch leaf names for the appointed Drafts and Sent: only the appointment can
-// exclude them, so a name-based filter would not pass this.
+// exclude them, so a name-based filter would not pass this. `Receipts` renamed
+// to `Bonnetjes`, and a second `Receipts` inside Travel, are what the
+// destination has to read and nest correctly.
 const mailboxes = [
-	makeMailbox({ mailboxId: "mbx-receipts", fullPath: "INBOX/Receipts" }),
+	makeMailbox({
+		mailboxId: "mbx-receipts",
+		fullPath: "INBOX/Receipts",
+		displayNameOverride: "Bonnetjes",
+	}),
 	makeMailbox({ mailboxId: "mbx-concepten", fullPath: "INBOX/Concepten" }),
 	makeMailbox({ mailboxId: "mbx-verzonden", fullPath: "INBOX/Verzonden" }),
 	makeMailbox({ mailboxId: "mbx-archief", fullPath: "INBOX/Archief" }),
 	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
+	makeMailbox({ mailboxId: "mbx-travel", fullPath: "INBOX/Travel" }),
+	makeMailbox({
+		mailboxId: "mbx-travel-receipts",
+		fullPath: "INBOX/Travel/Receipts",
+	}),
 ];
 
+const createdFolder = makeMailbox({
+	mailboxId: "mbx-created",
+	fullPath: "INBOX/Travel/Hotels",
+	syncStatus: MailboxSyncStatus.synced,
+});
+
 const filter: RemitImapFilterResponse = {
 	filterId: "f-1",
 	accountConfigId: ACCOUNT_ID,
@@ -74,9 +92,46 @@ const settleUntil = async (
 	}
 };
 
-const offeredDestinations = async (): Promise<string[]> => {
+const rowLabels = (dom: DomHarness): string[] =>
+	dom
+		.queryAll("[role=treeitem]")
+		.map((row) => row.getAttribute("aria-label") ?? "");
+
+const buttonWithText = (
+	dom: DomHarness,
+	text: string,
+): HTMLElement | undefined =>
+	dom
+		.queryAll<HTMLButtonElement>("button")
+		.find((button) => button.textContent?.trim() === text);
+
+/** The create form's name field, found by the label the kit gives it. */
+const folderNameField = (dom: DomHarness): HTMLInputElement | undefined => {
+	const label = dom
+		.queryAll<HTMLLabelElement>("label")
+		.find((node) => node.textContent?.trim() === "Folder name");
+	const id = label?.getAttribute("for");
+	return id
+		? ((dom.query(`input[id="${id}"]`) as HTMLInputElement | null) ?? undefined)
+		: undefined;
+};
+
+/**
+ * Opens the filter for editing and asks its destination field for the tree. The
+ * filter already moves matches into `INBOX/Receipts`, so the tree opens on the
+ * branch holding it.
+ */
+const openDestinationTree = async (
+	posted?: Record<string, unknown>[],
+): Promise<DomHarness> => {
+	const live = [...mailboxes];
 	http = mockFetch((call) => {
-		if (call.path.endsWith("/mailboxes")) return { items: mailboxes };
+		if (call.path.endsWith("/mailboxes") && call.method === "POST") {
+			posted?.push(call.body ?? {});
+			live.push(createdFolder);
+			return createdFolder;
+		}
+		if (call.path.endsWith("/mailboxes")) return { items: live };
 		if (call.path.endsWith("/filters")) return { items: [filter] };
 		if (call.path.endsWith("/labels")) return { items: [] };
 		if (call.path.endsWith("/organize/preview"))
@@ -91,24 +146,64 @@ const offeredDestinations = async (): Promise<string[]> => {
 		() => !!dom.query('[aria-label="Edit filter Receipts"]'),
 	);
 	dom.click(dom.byLabel("Edit filter Receipts"));
-	await settleUntil(
-		dom,
-		() => !!dom.query('select[aria-label="Destination folder"]'),
-	);
-	return dom
-		.queryAll<HTMLOptionElement>(
-			'select[aria-label="Destination folder"] option',
-		)
-		.map((option) => option.value)
-		.filter((value) => value.startsWith("mbx-"));
+	await settleUntil(dom, () => !!buttonWithText(dom, "Choose a folder"));
+	const choose = buttonWithText(dom, "Choose a folder");
+	assert.ok(choose, "the destination field offers the folder tree");
+	dom.click(choose);
+	await settleUntil(dom, () => rowLabels(dom).length > 0);
+	return dom;
+};
+
+const openFolder = async (dom: DomHarness, label: string): Promise<void> => {
+	dom.click(dom.byLabel(`Move to ${label}`));
+	await dom.flush();
 };
 
-describe("Settings › Filters — move destinations (#236, #540)", () => {
-	it("offers every folder but the appointed Drafts and Sent, in role order", async () => {
-		assert.deepEqual(await offeredDestinations(), [
-			"mbx-inbox",
-			"mbx-archief",
-			"mbx-receipts",
+describe("Settings › Filters — move destination (#236, #540, #549)", () => {
+	it("offers every folder but the appointed Drafts and Sent", async () => {
+		const dom = await openDestinationTree();
+		assert.deepEqual(rowLabels(dom), [
+			"Move to INBOX",
+			"Move to Archief",
+			"Move to Bonnetjes",
+			"Move to Travel",
+		]);
+	});
+
+	it("reads a renamed folder as the name the account gave it", async () => {
+		const dom = await openDestinationTree();
+		assert.ok(rowLabels(dom).includes("Move to Bonnetjes"));
+		assert.ok(
+			!rowLabels(dom).some((label) => label.includes("Receipts")),
+			"the provider leaf is never what the row reads as",
+		);
+	});
+
+	it("nests a folder under the one holding it", async () => {
+		const dom = await openDestinationTree();
+		await openFolder(dom, "Travel");
+		const nested = dom
+			.queryAll("[role=treeitem]")
+			.filter((row) => row.getAttribute("aria-label") === "Move to Receipts");
+		assert.equal(nested.length, 1);
+		assert.equal(nested[0].getAttribute("aria-level"), "3");
+	});
+
+	it("creates a folder inside the one the tree is looking at", async () => {
+		const posted: Record<string, unknown>[] = [];
+		const dom = await openDestinationTree(posted);
+		await openFolder(dom, "Travel");
+		dom.click(dom.byLabel("New folder inside Travel"));
+		await dom.flush();
+		const name = folderNameField(dom);
+		assert.ok(name, "the folder name field is on screen");
+		dom.type(name, "Hotels");
+		const create = buttonWithText(dom, "Create folder");
+		assert.ok(create, "the create button is on screen");
+		dom.click(create);
+		await settleUntil(dom, () => posted.length > 0);
+		assert.deepEqual(posted, [
+			{ fullPath: "INBOX/Travel/Hotels", namespaceType: "personal" },
 		]);
 	});
 });

package/src/routes/settings/filters.tsx

@@ -11,9 +11,10 @@ import { FilterEditorSurface } from "@/components/settings/FilterEditorSurface";
 import { FiltersList } from "@/components/settings/FiltersList";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useDeleteFilter, useFilterList } from "@/hooks/useFilters";
+import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
 import { useLabelList } from "@/hooks/useLabels";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
-import { buildMoveTargets } from "@/lib/move-targets";
+import { buildMailboxRoleMap, labelForMailbox } from "@/lib/folder-roles";
+import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
 
 export const Route = createFileRoute("/settings/filters")({
@@ -50,27 +51,33 @@ export function AccountFilters({
 		staleTime: Infinity,
 	});
 
+	const translator = useFolderLabelTranslator();
+	const roleMap = useMemo(
+		() => buildMailboxRoleMap(account.folderAppointments),
+		[account.folderAppointments],
+	);
+
 	const mailboxName = useCallback(
 		(mailboxId: string): string | undefined => {
 			const mailbox = mailboxesData?.items.find(
 				(item) => item.mailboxId === mailboxId,
 			);
-			return mailbox ? getMailboxDisplayName(mailbox.fullPath) : undefined;
+			if (!mailbox) return undefined;
+			return labelForMailbox(mailbox, roleMap.get(mailboxId), translator);
 		},
-		[mailboxesData?.items],
+		[mailboxesData?.items, roleMap, translator],
 	);
 
 	const folders = useMemo(
 		() =>
-			buildMoveTargets(
-				mailboxesData?.items ?? [],
-				account.folderAppointments,
-			).map((mailbox) => ({
-				id: mailbox.mailboxId,
-				label: getMailboxDisplayName(mailbox.fullPath),
-			})),
-		[mailboxesData?.items, account.folderAppointments],
+			buildMoveOptions({
+				mailboxes: mailboxesData?.items ?? [],
+				folderAppointments: account.folderAppointments,
+				translator,
+			}),
+		[mailboxesData?.items, account.folderAppointments, translator],
 	);
+	const delimiter = folderDelimiter(mailboxesData?.items ?? []);
 
 	const { labels: labelItems } = useLabelList(accountId);
 	const labels: LabelOption[] = useMemo(
@@ -99,6 +106,7 @@ export function AccountFilters({
 					accountId={accountId}
 					filter={editingFilter}
 					folders={folders}
+					delimiter={delimiter}
 					labels={labels}
 					onClose={() => setEditingFilterId(undefined)}
 				/>