@remit/web-client 0.0.103 → 0.0.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.103",
+  "version": "0.0.104",
   "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/lib/move-targets.test.ts

@@ -61,12 +61,15 @@ describe("buildMoveTargets — excluded destinations (#236, #976)", () => {
 	});
 
 	test("with no appointments at all, nothing is excluded by role (only Outbox by name)", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "m1", fullPath: "INBOX" }),
-			make({ mailboxId: "m2", fullPath: "Drafts" }),
-			make({ mailboxId: "m3", fullPath: "Outbox" }),
-			make({ mailboxId: "m4", fullPath: "Sent Mail" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "m1", fullPath: "INBOX" }),
+				make({ mailboxId: "m2", fullPath: "Drafts" }),
+				make({ mailboxId: "m3", fullPath: "Outbox" }),
+				make({ mailboxId: "m4", fullPath: "Sent Mail" }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId).sort();
 		assert.deepStrictEqual(ids, ["m1", "m2", "m4"]);
 	});
@@ -89,11 +92,14 @@ describe("buildMoveTargets — excluded destinations (#236, #976)", () => {
 	});
 
 	test("keeps user-defined folders", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "m1", fullPath: "INBOX" }),
-			make({ mailboxId: "m2", fullPath: "Project Alpha" }),
-			make({ mailboxId: "m3", fullPath: "Receipts/2025" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "m1", fullPath: "INBOX" }),
+				make({ mailboxId: "m2", fullPath: "Project Alpha" }),
+				make({ mailboxId: "m3", fullPath: "Receipts/2025" }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId);
 		assert.deepStrictEqual(ids.sort(), ["m1", "m2", "m3"]);
 	});
@@ -121,10 +127,13 @@ describe("buildMoveTargets — sort order", () => {
 	});
 
 	test("plain folders sort alphabetically, case-insensitively", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "b", fullPath: "banana" }),
-			make({ mailboxId: "a", fullPath: "Apple" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "b", fullPath: "banana" }),
+				make({ mailboxId: "a", fullPath: "Apple" }),
+			],
+			[],
+		);
 		assert.deepStrictEqual(
 			result.map((m) => m.mailboxId),
 			["a", "b"],
@@ -150,45 +159,57 @@ describe("buildMoveTargets — Outbox locale exclusion (#290)", () => {
 
 	for (const name of localizedOutboxNames) {
 		test(`drops localized Outbox "${name}"`, () => {
-			const result = buildMoveTargets([
-				make({ mailboxId: "inbox", fullPath: "INBOX" }),
-				make({ mailboxId: "outbox", fullPath: name }),
-			]);
+			const result = buildMoveTargets(
+				[
+					make({ mailboxId: "inbox", fullPath: "INBOX" }),
+					make({ mailboxId: "outbox", fullPath: name }),
+				],
+				[],
+			);
 			const ids = result.map((mailbox) => mailbox.mailboxId);
 			assert.deepStrictEqual(ids, ["inbox"]);
 		});
 	}
 
 	test("matches Outbox locale names case-insensitively", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "inbox", fullPath: "INBOX" }),
-			make({ mailboxId: "m1", fullPath: "POSTVAK UIT" }),
-			make({ mailboxId: "m2", fullPath: "postausgang" }),
-			make({ mailboxId: "m3", fullPath: "BOÎTE D'ENVOI" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+				make({ mailboxId: "m1", fullPath: "POSTVAK UIT" }),
+				make({ mailboxId: "m2", fullPath: "postausgang" }),
+				make({ mailboxId: "m3", fullPath: "BOÎTE D'ENVOI" }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId);
 		assert.deepStrictEqual(ids, ["inbox"]);
 	});
 
 	test("matches Outbox locale names with surrounding whitespace", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "inbox", fullPath: "INBOX" }),
-			make({ mailboxId: "m1", fullPath: "  Outbox  " }),
-			make({ mailboxId: "m2", fullPath: " Postvak UIT " }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+				make({ mailboxId: "m1", fullPath: "  Outbox  " }),
+				make({ mailboxId: "m2", fullPath: " Postvak UIT " }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId);
 		assert.deepStrictEqual(ids, ["inbox"]);
 	});
 
 	test("does not over-match unrelated mailbox names", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "inbox", fullPath: "INBOX" }),
-			make({ mailboxId: "trash", fullPath: "Trash" }),
-			make({ mailboxId: "custom", fullPath: "Custom Folder" }),
-			// Substring of a locale name must not trigger the filter — only
-			// the exact normalized leaf matches.
-			make({ mailboxId: "outboxy", fullPath: "Outbox Archive" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+				make({ mailboxId: "trash", fullPath: "Trash" }),
+				make({ mailboxId: "custom", fullPath: "Custom Folder" }),
+				// Substring of a locale name must not trigger the filter — only
+				// the exact normalized leaf matches.
+				make({ mailboxId: "outboxy", fullPath: "Outbox Archive" }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId).sort();
 		assert.deepStrictEqual(ids, ["custom", "inbox", "outboxy", "trash"]);
 	});

package/src/lib/move-targets.ts

@@ -49,7 +49,7 @@ const NON_SYSTEM_PRIORITY = ROLE_PRIORITY.length;
  */
 export const buildMoveTargets = (
 	mailboxes: readonly RemitImapMailboxResponse[],
-	folderAppointments: readonly RemitImapFolderAppointment[] = [],
+	folderAppointments: readonly RemitImapFolderAppointment[],
 ): RemitImapMailboxResponse[] => {
 	const roleMap = buildMailboxRoleMap(folderAppointments);
 	const filtered = mailboxes.filter((mailbox) => {

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

@@ -0,0 +1,114 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+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 { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { makeAccount, makeMailbox } from "../../test-support/fixtures";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { AccountFilters } from "./filters.tsx";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const ACCOUNT_ID = "acc-1";
+
+const account = makeAccount({
+	accountId: ACCOUNT_ID,
+	folderAppointments: [
+		{ role: "Inbox", mailboxId: "mbx-inbox" },
+		{ role: "Drafts", mailboxId: "mbx-concepten" },
+		{ role: "Sent", mailboxId: "mbx-verzonden" },
+		{ role: "Archive", mailboxId: "mbx-archief" },
+	],
+});
+
+// Dutch leaf names for the appointed Drafts and Sent: only the appointment can
+// exclude them, so a name-based filter would not pass this.
+const mailboxes = [
+	makeMailbox({ mailboxId: "mbx-receipts", fullPath: "INBOX/Receipts" }),
+	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" }),
+];
+
+const filter: RemitImapFilterResponse = {
+	filterId: "f-1",
+	accountConfigId: ACCOUNT_ID,
+	name: "Receipts",
+	scope: "Standing",
+	state: "Active",
+	hasAnchor: false,
+	ruleChangedAt: 0,
+	actionChangedAt: 0,
+	matchOperator: "And",
+	literalClauses: [{ field: "From", value: "receipts@stripe.com" }],
+	actionLabelId: "None",
+	actionMailboxId: "mbx-receipts",
+	createdAt: 0,
+	updatedAt: 0,
+};
+
+/**
+ * Wait on the DOM answering rather than on a turn count: how much React work
+ * lands per turn varies with the machine, so a fixed flush is a flake and a
+ * ceiling is what keeps a surface that never renders a failure, not a hang.
+ */
+const settleUntil = async (
+	dom: DomHarness,
+	done: () => boolean,
+): Promise<void> => {
+	const deadline = Date.now() + 5000;
+	for (;;) {
+		await dom.flush();
+		if (done() || Date.now() >= deadline) return;
+		await dom.wait(10);
+	}
+};
+
+const offeredDestinations = async (): Promise<string[]> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/mailboxes")) return { items: mailboxes };
+		if (call.path.endsWith("/filters")) return { items: [filter] };
+		if (call.path.endsWith("/labels")) return { items: [] };
+		if (call.path.endsWith("/organize/preview"))
+			return { matchedCount: 0, messageIds: [] };
+		return {};
+	});
+	const dom = createDomHarness();
+	harness = dom;
+	dom.renderApp(createElement(AccountFilters, { account }));
+	await settleUntil(
+		dom,
+		() => !!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-"));
+};
+
+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",
+		]);
+	});
+});

package/src/routes/settings/filters.tsx

@@ -34,7 +34,11 @@ const filtersHelp = (
 	</div>
 );
 
-function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
+export function AccountFilters({
+	account,
+}: {
+	account: RemitImapAccountResponse;
+}) {
 	const accountId = account.accountId;
 	const { filters, isPending, isError, error, refetch } =
 		useFilterList(accountId);
@@ -58,11 +62,14 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 
 	const folders = useMemo(
 		() =>
-			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
+			buildMoveTargets(
+				mailboxesData?.items ?? [],
+				account.folderAppointments,
+			).map((mailbox) => ({
 				id: mailbox.mailboxId,
 				label: getMailboxDisplayName(mailbox.fullPath),
 			})),
-		[mailboxesData?.items],
+		[mailboxesData?.items, account.folderAppointments],
 	);
 
 	const { labels: labelItems } = useLabelList(accountId);