@remit/web-client 0.0.118 → 0.0.120

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.118",
+  "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/mail/SelectionWizardHost.tsx

@@ -719,7 +719,10 @@ function SelectionWizardSession({
 				state,
 				matched: progress.matchedCount,
 				applied: progress.appliedCount,
-				failed: state === "backApplyFailed" ? progress.failedCount : 0,
+				failed:
+					state === "backApplyFailed" || state === "backApplyRestartFailed"
+						? progress.failedCount
+						: 0,
 				failures: [],
 			};
 		},

package/src/components/mail/organize-run-state.test.ts

@@ -59,6 +59,24 @@ describe("organizeRunState", () => {
 		);
 	});
 
+	it("keeps a finished pass's ending when the retry over it could not be started", () => {
+		// #552: the retry is a second create, and a create that failed over a pass
+		// that already moved mail is not a pass that never ran.
+		for (const ruleSaved of [true, false]) {
+			assert.equal(
+				organizeRunState(
+					reading({
+						ruleSaved,
+						isDone: true,
+						failedCount: 84,
+						failure: { kind: "restartFailed", error: new Error("offline") },
+					}),
+				),
+				"backApplyRestartFailed",
+			);
+		}
+	});
+
 	it("says nothing happened only when the create itself failed", () => {
 		assert.equal(
 			organizeRunState(

package/src/components/mail/organize-run-state.ts

@@ -20,6 +20,10 @@ export interface OrganizeJobReading {
  * not a job that never started (#526), so what the job is doing is read before
  * what failed: a dropped poll leaves a running pass running and a finished one
  * finished, and only a create that never returned an id says nothing happened.
+ *
+ * A create that failed over a pass that already ran is that same distinction on
+ * the create path (#552): the counts of the pass that ran stand, and what failed
+ * is the retry.
  */
 export const organizeRunState = ({
 	failure,
@@ -29,6 +33,7 @@ export const organizeRunState = ({
 	failedCount,
 	ruleSaved,
 }: OrganizeJobReading): RunState => {
+	if (failure?.kind === "restartFailed") return "backApplyRestartFailed";
 	if (failure?.kind === "startFailed") {
 		return ruleSaved ? "backApplyStartFailed" : "commitFailed";
 	}

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/hooks/useOrganizeJob.render.test.ts

@@ -1,8 +1,9 @@
 /**
- * useOrganizeJob — the back-apply job seam. It reports two failures that are not
- * the same fact (#526): a create that never returned a job id, and a status poll
- * that could not be read over a job the server is already running. Looking at
- * that job again is a separate move from starting one.
+ * useOrganizeJob — the back-apply job seam. It reports three failures that are
+ * not the same fact (#526, #552): a create that never returned a job id, that
+ * same create over a pass that already ran, and a status poll that could not be
+ * read over a job the server is already running. Looking at that job again is a
+ * separate move from starting one.
  */
 
 import assert from "node:assert/strict";
@@ -75,6 +76,36 @@ const startJob = async (status: () => unknown): Promise<void> => {
 	await settle();
 };
 
+const COMPLETED_PASS = {
+	organizeJobId: JOB,
+	state: "Complete",
+	matchedCount: 1284,
+	appliedCount: 1200,
+	failedCount: 84,
+};
+
+/** Run one pass to a finish, then answer the next create with `restart`. */
+const restartAfterPass = async (restart: () => unknown): Promise<void> => {
+	let created = false;
+	http = mockFetch((call) => {
+		if (call.method !== "POST") return COMPLETED_PASS;
+		if (created) return restart();
+		created = true;
+		return { organizeJobId: JOB, state: "Pending" };
+	});
+	harness = createDomHarness();
+	harness.renderApp(createElement(Probe));
+	await act(async () => {
+		current().start(DRAFT);
+	});
+	await settle();
+	assert.equal(current().isDone, true, "the first pass never finished");
+	await act(async () => {
+		current().start(DRAFT);
+	});
+	await settle();
+};
+
 const posts = (): number =>
 	(http?.calls ?? []).filter((call) => call.method === "POST").length;
 
@@ -128,6 +159,23 @@ describe("useOrganizeJob status reporting", () => {
 		assert.equal(current().progress.matchedCount, 1284);
 	});
 
+	it("reads a create that failed over a finished pass as a restart, with that pass's counts", async () => {
+		await restartAfterPass(dropped);
+		assert.equal(current().failure?.kind, "restartFailed");
+		assert.equal(current().progress.matchedCount, 1284);
+		assert.equal(current().progress.appliedCount, 1200);
+		assert.equal(current().progress.failedCount, 84);
+		assert.equal(current().isDone, true);
+	});
+
+	it("reports a restart that is under way as its own pass, not the one before it", async () => {
+		await restartAfterPass(() => new Promise<never>(() => {}));
+		assert.equal(current().isStarting, true);
+		assert.equal(current().isDone, false);
+		assert.equal(current().failure, undefined);
+		assert.equal(current().progress.matchedCount, 0);
+	});
+
 	it("stops reporting a job as running once it reaches a terminal state", async () => {
 		await startJob(() => ({
 			organizeJobId: JOB,

package/src/hooks/useOrganizeJob.ts

@@ -23,20 +23,28 @@ export interface OrganizeJobProgress {
 }
 
 /**
- * Why the job is not reporting, which is two separate facts (#526). A create
- * that never returned an id means nothing was started; a status read that
- * failed means a job is out there and this client cannot see how far it got.
+ * Why the job is not reporting, which is three separate facts (#526, #552). A
+ * create that never returned an id means nothing was started; the same create
+ * over a pass that already ran means that pass stands and only the retry never
+ * left; a status read that failed means a job is out there and this client
+ * cannot see how far it got.
  */
 export interface OrganizeJobFailure {
-	kind: "startFailed" | "statusUnreadable";
+	kind: "startFailed" | "restartFailed" | "statusUnreadable";
 	error: unknown;
 }
 
 const organizeJobFailure = (
 	createError: unknown,
 	statusError: unknown,
+	passAlreadyRun: boolean,
 ): OrganizeJobFailure | undefined => {
-	if (createError) return { kind: "startFailed", error: createError };
+	if (createError) {
+		return {
+			kind: passAlreadyRun ? "restartFailed" : "startFailed",
+			error: createError,
+		};
+	}
 	if (statusError) return { kind: "statusUnreadable", error: statusError };
 	return undefined;
 };
@@ -76,7 +84,6 @@ export const useOrganizeJob = (accountId: string | undefined) => {
 	const start = useCallback(
 		(draft: OrganizeDraft) => {
 			if (!accountId) return;
-			setOrganizeJobId(undefined);
 			createJob({
 				path: { accountId },
 				body: buildOrganizeInput(draft),
@@ -92,7 +99,11 @@ export const useOrganizeJob = (accountId: string | undefined) => {
 		void refetch();
 	}, [refetch]);
 
-	const job = jobQuery.data;
+	// The last pass this client read. A restart replaces it only once the server
+	// hands back a job id: while the create is in flight those counts are not this
+	// pass's, and a create that fails leaves them standing (#552).
+	const lastPass = jobQuery.data;
+	const job = createMutation.isPending ? undefined : lastPass;
 	const state = job?.state ?? createMutation.data?.state;
 	const isDone = isTerminalJobState(job?.state);
 
@@ -111,6 +122,10 @@ export const useOrganizeJob = (accountId: string | undefined) => {
 		isStarting: createMutation.isPending,
 		isRunning: !!organizeJobId && !isDone,
 		isDone,
-		failure: organizeJobFailure(createMutation.error, jobQuery.error),
+		failure: organizeJobFailure(
+			createMutation.error,
+			jobQuery.error,
+			!!lastPass,
+		),
 	};
 };

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)}
 				/>