@remit/web-client 0.0.1

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

@@ -0,0 +1,195 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import type {
+	RemitImapFolderAppointment,
+	RemitImapMailboxResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { buildMoveTargets } from "./move-targets.js";
+
+const make = (
+	overrides: Partial<RemitImapMailboxResponse> & {
+		mailboxId: string;
+		fullPath: string;
+	},
+): RemitImapMailboxResponse =>
+	({
+		accountId: "acct-1",
+		namespaceType: "personal",
+		namespacePrefix: "",
+		hierarchyDelimiter: "/",
+		messageCount: 0,
+		unseenCount: 0,
+		deletedCount: 0,
+		createdAt: 0,
+		updatedAt: 0,
+		...overrides,
+	}) as RemitImapMailboxResponse;
+
+const appoint = (
+	role: RemitImapFolderAppointment["role"],
+	mailboxId: string,
+): RemitImapFolderAppointment => ({ role, mailboxId });
+
+describe("buildMoveTargets — excluded destinations (#236, #976)", () => {
+	test("drops the account's appointed Drafts and Sent mailboxes", () => {
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "m1", fullPath: "INBOX" }),
+				make({ mailboxId: "m2", fullPath: "Drafts" }),
+				make({ mailboxId: "m3", fullPath: "Sent" }),
+			],
+			[appoint("Drafts", "m2"), appoint("Sent", "m3")],
+		);
+		const ids = result.map((mailbox) => mailbox.mailboxId);
+		assert.deepStrictEqual(ids, ["m1"]);
+	});
+
+	test("keeps an UNappointed Drafts/Sent look-alike — exclusion follows the appointment, not the name", () => {
+		// Hostnet-style: INBOX/Drafts carries the flag but is empty; the user
+		// appointed INBOX/Concepten instead. INBOX/Drafts is now just a plain
+		// folder and a valid move destination.
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+				make({ mailboxId: "empty-drafts", fullPath: "INBOX/Drafts" }),
+				make({ mailboxId: "concepten", fullPath: "INBOX/Concepten" }),
+			],
+			[appoint("Drafts", "concepten")],
+		);
+		const ids = result.map((mailbox) => mailbox.mailboxId).sort();
+		assert.deepStrictEqual(ids, ["empty-drafts", "inbox"]);
+	});
+
+	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 ids = result.map((mailbox) => mailbox.mailboxId).sort();
+		assert.deepStrictEqual(ids, ["m1", "m2", "m4"]);
+	});
+
+	test("keeps Trash and Spam — both are valid manual destinations", () => {
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "trash", fullPath: "Trash" }),
+				make({ mailboxId: "spam", fullPath: "Spam" }),
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+			],
+			[
+				appoint("Trash", "trash"),
+				appoint("Junk", "spam"),
+				appoint("Inbox", "inbox"),
+			],
+		);
+		const ids = result.map((mailbox) => mailbox.mailboxId).sort();
+		assert.deepStrictEqual(ids, ["inbox", "spam", "trash"]);
+	});
+
+	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 ids = result.map((mailbox) => mailbox.mailboxId);
+		assert.deepStrictEqual(ids.sort(), ["m1", "m2", "m3"]);
+	});
+});
+
+describe("buildMoveTargets — sort order", () => {
+	test("orders appointed system folders by role priority, ahead of plain folders", () => {
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "custom", fullPath: "Project Alpha" }),
+				make({ mailboxId: "trash", fullPath: "Trash" }),
+				make({ mailboxId: "archive", fullPath: "Archive" }),
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+			],
+			[
+				appoint("Trash", "trash"),
+				appoint("Archive", "archive"),
+				appoint("Inbox", "inbox"),
+			],
+		);
+		assert.deepStrictEqual(
+			result.map((m) => m.mailboxId),
+			["inbox", "archive", "trash", "custom"],
+		);
+	});
+
+	test("plain folders sort alphabetically, case-insensitively", () => {
+		const result = buildMoveTargets([
+			make({ mailboxId: "b", fullPath: "banana" }),
+			make({ mailboxId: "a", fullPath: "Apple" }),
+		]);
+		assert.deepStrictEqual(
+			result.map((m) => m.mailboxId),
+			["a", "b"],
+		);
+	});
+});
+
+describe("buildMoveTargets — Outbox locale exclusion (#290)", () => {
+	// Outbox has no IMAP special-use flag and isn't a canonical role, so we
+	// recognize it by name across the locales the curated list covers.
+	const localizedOutboxNames: readonly string[] = [
+		"Outbox",
+		"Postvak UIT",
+		"Boîte d'envoi",
+		"Postausgang",
+		"Buzón de salida",
+		"Posta in uscita",
+		"送信トレイ",
+		"送件匣",
+		"发件箱",
+		"Skrzynka nadawcza",
+	];
+
+	for (const name of localizedOutboxNames) {
+		test(`drops localized Outbox "${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 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 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 ids = result.map((mailbox) => mailbox.mailboxId).sort();
+		assert.deepStrictEqual(ids, ["custom", "inbox", "outboxy", "trash"]);
+	});
+});

package/src/lib/move-targets.ts

@@ -0,0 +1,74 @@
+import type {
+	RemitImapFolderAppointment,
+	RemitImapMailboxResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	buildMailboxRoleMap,
+	getMailboxDisplayName,
+	ROLE_PRIORITY,
+} from "./folder-roles.js";
+
+// Outbox has no IMAP special-use flag (RFC 6154 doesn't define one) and isn't
+// a canonical role (RFC 032 exclusive-folder-appointment) either — it's
+// Remit's own concept, so it isn't in the account's role map. KISS: covers the
+// languages we expect to encounter; extend as needed. Stored lowercased and
+// trimmed; comparisons normalize the input the same way.
+const OUTBOX_LOCALE_NAMES: ReadonlySet<string> = new Set([
+	"outbox",
+	"postvak uit",
+	"boîte d'envoi",
+	"postausgang",
+	"buzón de salida",
+	"posta in uscita",
+	"送信トレイ",
+	"送件匣",
+	"发件箱",
+	"skrzynka nadawcza",
+]);
+
+const isOutboxDestination = (mailbox: RemitImapMailboxResponse): boolean => {
+	const leaf = getMailboxDisplayName(mailbox.fullPath).trim().toLowerCase();
+	return OUTBOX_LOCALE_NAMES.has(leaf);
+};
+
+const NON_SYSTEM_PRIORITY = ROLE_PRIORITY.length;
+
+/**
+ * Filter and order a flat mailbox list for the Move-to picker (RFC 032
+ * exclusive-folder-appointment, #976).
+ *
+ * Drops the account's appointed Drafts and Sent mailboxes (issue #236) —
+ * compose/SMTP flows manage those, moving an arbitrary message into them
+ * would break the invariant that they only hold messages the user authored —
+ * and Outbox by locale name. Everything else, including a Drafts/Sent
+ * look-alike the user hasn't actually appointed (e.g. an empty `INBOX/Drafts`
+ * twin next to the real `INBOX/Concepten`), is a perfectly valid destination:
+ * the exclusion follows the account's role appointment, not folder-name or
+ * SPECIAL-USE guessing. Sorts by the same role priority the sidebar pins by,
+ * then alphabetically.
+ */
+export const buildMoveTargets = (
+	mailboxes: readonly RemitImapMailboxResponse[],
+	folderAppointments: readonly RemitImapFolderAppointment[] = [],
+): RemitImapMailboxResponse[] => {
+	const roleMap = buildMailboxRoleMap(folderAppointments);
+	const filtered = mailboxes.filter((mailbox) => {
+		const role = roleMap.get(mailbox.mailboxId);
+		if (role === "drafts" || role === "sent") return false;
+		return !isOutboxDestination(mailbox);
+	});
+	return [...filtered].sort((a, b) => {
+		const aPriority = roleMap.has(a.mailboxId)
+			? ROLE_PRIORITY.indexOf(roleMap.get(a.mailboxId) ?? "inbox")
+			: NON_SYSTEM_PRIORITY;
+		const bPriority = roleMap.has(b.mailboxId)
+			? ROLE_PRIORITY.indexOf(roleMap.get(b.mailboxId) ?? "inbox")
+			: NON_SYSTEM_PRIORITY;
+		if (aPriority !== bPriority) return aPriority - bPriority;
+		return getMailboxDisplayName(a.fullPath).localeCompare(
+			getMailboxDisplayName(b.fullPath),
+			undefined,
+			{ sensitivity: "base", numeric: true },
+		);
+	});
+};

package/src/lib/onboarding-completion.test.ts

@@ -0,0 +1,64 @@
+/**
+ * The onboarding wizard creates the account server-side, then the user clicks
+ * "Go to inbox". The /mail first-run guard redirects back to /onboarding while
+ * the cached config still reports zero accounts, so completion must refresh
+ * config and wait for it before navigating — otherwise the user loops back into
+ * the wizard.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { completeOnboarding } from "./onboarding-completion.js";
+
+describe("completeOnboarding", () => {
+	it("navigates to the inbox only after config is refreshed", async () => {
+		const order: string[] = [];
+		let resolveRefetch: (() => void) | undefined;
+
+		const refetchQueries = () => {
+			order.push("refetch:start");
+			return new Promise<void>((resolve) => {
+				resolveRefetch = () => {
+					order.push("refetch:done");
+					resolve();
+				};
+			});
+		};
+
+		const done = completeOnboarding({
+			queryClient: { refetchQueries },
+			recordCompleted: () => order.push("recorded"),
+			navigateToInbox: () => order.push("navigate"),
+		});
+
+		// Refetch is in flight; navigation must not have happened yet.
+		await Promise.resolve();
+		assert.deepEqual(order, ["recorded", "refetch:start"]);
+
+		resolveRefetch?.();
+		await done;
+
+		assert.deepEqual(order, [
+			"recorded",
+			"refetch:start",
+			"refetch:done",
+			"navigate",
+		]);
+	});
+
+	it("refreshes the config query", async () => {
+		let refetchedKey: unknown;
+		await completeOnboarding({
+			queryClient: {
+				refetchQueries: (filters) => {
+					refetchedKey = (filters as { queryKey?: unknown }).queryKey;
+					return Promise.resolve();
+				},
+			},
+			recordCompleted: () => {},
+			navigateToInbox: () => {},
+		});
+
+		assert.ok(refetchedKey, "refetchQueries called with a query key");
+	});
+});

package/src/lib/onboarding-completion.ts

@@ -0,0 +1,23 @@
+import { configOperationsGetConfigQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { QueryClient } from "@tanstack/react-query";
+
+/**
+ * Finishing onboarding creates the account server-side, but the cached config
+ * still reports zero accounts. The /mail route's first-run guard redirects to
+ * /onboarding whenever config reports no accounts, so navigating to the inbox
+ * before the cache is refreshed bounces the user straight back into the wizard.
+ *
+ * Refresh config and wait for it to settle before navigating, so the guard sees
+ * the freshly created account.
+ */
+export async function completeOnboarding(deps: {
+	queryClient: Pick<QueryClient, "refetchQueries">;
+	recordCompleted: () => void;
+	navigateToInbox: () => void;
+}): Promise<void> {
+	deps.recordCompleted();
+	await deps.queryClient.refetchQueries({
+		queryKey: configOperationsGetConfigQueryKey(),
+	});
+	deps.navigateToInbox();
+}

package/src/lib/organize/filter-status.test.ts

@@ -0,0 +1,99 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	filterDisplayStatus,
+	formatExpiresAt,
+	pickedDateToExpiresAt,
+} from "./filter-status";
+
+const NOW = Date.parse("2026-07-12T12:00:00Z");
+
+describe("filterDisplayStatus", () => {
+	it("treats a Standing filter as always Active", () => {
+		assert.equal(
+			filterDisplayStatus({ scope: "Standing", state: "Active" }, NOW),
+			"Active",
+		);
+	});
+
+	it("treats a Temporary filter past its expiresAt as Expired even when state still caches Active (RFC 034 Decision 1.2)", () => {
+		assert.equal(
+			filterDisplayStatus(
+				{
+					scope: "Temporary",
+					state: "Active",
+					expiresAt: "2026-07-10T00:00:00Z",
+				},
+				NOW,
+			),
+			"Expired",
+		);
+	});
+
+	it("treats a Temporary filter before its expiresAt as Active", () => {
+		assert.equal(
+			filterDisplayStatus(
+				{
+					scope: "Temporary",
+					state: "Active",
+					expiresAt: "2026-07-20T00:00:00Z",
+				},
+				NOW,
+			),
+			"Active",
+		);
+	});
+
+	it("honors a state the server already flipped to Expired", () => {
+		assert.equal(
+			filterDisplayStatus(
+				{
+					scope: "Temporary",
+					state: "Expired",
+					expiresAt: "2026-07-20T00:00:00Z",
+				},
+				NOW,
+			),
+			"Expired",
+		);
+	});
+});
+
+describe("formatExpiresAt", () => {
+	it("returns undefined for a missing value", () => {
+		assert.equal(formatExpiresAt(undefined), undefined);
+	});
+
+	it("returns undefined for an unparseable value", () => {
+		assert.equal(formatExpiresAt("not-a-date"), undefined);
+	});
+
+	it("renders a parseable date", () => {
+		assert.equal(typeof formatExpiresAt("2026-07-16T23:59:59+02:00"), "string");
+	});
+});
+
+describe("pickedDateToExpiresAt", () => {
+	it("returns undefined for empty input", () => {
+		assert.equal(pickedDateToExpiresAt(""), undefined);
+	});
+
+	it("returns undefined for a non date-only string", () => {
+		assert.equal(pickedDateToExpiresAt("2026/07/16"), undefined);
+	});
+
+	it("produces an ISO 8601 timestamp with a zone offset at end of the picked day", () => {
+		const utcReference = new Date("2026-07-12T12:00:00Z");
+		const result = pickedDateToExpiresAt("2026-07-16", utcReference);
+		assert.equal(result, "2026-07-16T23:59:59+00:00");
+	});
+
+	it("round-trips back to the same calendar day it was expiring on", () => {
+		const iso = pickedDateToExpiresAt(
+			"2026-07-16",
+			new Date("2026-07-12T12:00:00Z"),
+		);
+		assert.ok(iso);
+		assert.equal(new Date(Date.parse(iso)).getUTCDate(), 16);
+	});
+});

package/src/lib/organize/filter-status.ts

@@ -0,0 +1,86 @@
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+
+export type FilterDisplayStatus = "Active" | "Expired";
+
+/**
+ * The displayed Active/Expired status of a filter.
+ *
+ * RFC 034 Decision 1.2: `expiresAt` is the source of truth, `state` is only a
+ * lazily-patched cache. A `Temporary` filter whose `expiresAt` is in the past
+ * is Expired the instant that comparison is made, even if the server has not
+ * yet patched `state` to `Expired`. So the client compares `expiresAt` against
+ * `now` directly and also honors a `state` the server already flipped.
+ *
+ * An `Expired` filter is never hidden — it stays listed so the user can see
+ * what it was and when it stopped (RFC 034 Decision 1.2, "stops on its own").
+ */
+export const filterDisplayStatus = (
+	filter: Pick<RemitImapFilterResponse, "scope" | "expiresAt" | "state">,
+	now: number,
+): FilterDisplayStatus => {
+	if (filter.state === "Expired") return "Expired";
+	if (filter.scope !== "Temporary") return "Active";
+	if (!filter.expiresAt) return "Active";
+
+	const expiresAtMs = Date.parse(filter.expiresAt);
+	if (Number.isNaN(expiresAtMs)) return "Active";
+	return expiresAtMs <= now ? "Expired" : "Active";
+};
+
+/**
+ * Human-readable rendering of an expiry timestamp, e.g. "Jul 16, 2026".
+ * Returns `undefined` for an absent or unparseable value so a standing filter
+ * (no `expiresAt`) renders nothing.
+ */
+export const formatExpiresAt = (
+	expiresAt: string | undefined,
+): string | undefined => {
+	if (!expiresAt) return undefined;
+	const ms = Date.parse(expiresAt);
+	if (Number.isNaN(ms)) return undefined;
+	return new Date(ms).toLocaleDateString(undefined, {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+	});
+};
+
+/**
+ * Turn a plain picked calendar date (`YYYY-MM-DD`, from a native date input)
+ * into an ISO 8601 timestamp with the local zone offset, at end of that day —
+ * the filter is meant to stay active through the whole picked day (RFC 034
+ * Decision 1.1, a zoned civil date). Returns `undefined` for empty input.
+ */
+export const pickedDateToExpiresAt = (
+	pickedDate: string,
+	referenceDate: Date = new Date(),
+): string | undefined => {
+	if (!pickedDate) return undefined;
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(pickedDate);
+	if (!match) return undefined;
+
+	const [, year, month, day] = match;
+	const local = new Date(
+		Number(year),
+		Number(month) - 1,
+		Number(day),
+		23,
+		59,
+		59,
+		0,
+	);
+	if (Number.isNaN(local.getTime())) return undefined;
+
+	const offsetMinutes = -referenceDate.getTimezoneOffset();
+	const sign = offsetMinutes >= 0 ? "+" : "-";
+	const abs = Math.abs(offsetMinutes);
+	const offHours = String(Math.floor(abs / 60)).padStart(2, "0");
+	const offMins = String(abs % 60).padStart(2, "0");
+
+	const pad = (value: number) => String(value).padStart(2, "0");
+	return (
+		`${local.getFullYear()}-${pad(local.getMonth() + 1)}-${pad(local.getDate())}` +
+		`T${pad(local.getHours())}:${pad(local.getMinutes())}:${pad(local.getSeconds())}` +
+		`${sign}${offHours}:${offMins}`
+	);
+};

package/src/lib/organize/organize-copy.test.ts

@@ -0,0 +1,93 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	commitButtonLabel,
+	commitDisabledReason,
+	scopeActionCount,
+} from "./organize-copy";
+import type { OrganizeDraft } from "./organize-model";
+
+const draft = (overrides: Partial<OrganizeDraft> = {}): OrganizeDraft => ({
+	matchOperator: "And",
+	literalClauses: [],
+	...overrides,
+});
+
+describe("commitDisabledReason", () => {
+	it("blocks with a labeling explanation when no folder is chosen", () => {
+		const reason = commitDisabledReason({
+			draft: draft(),
+			scope: "just-these",
+			name: "",
+			pickedDate: "",
+		});
+		assert.match(reason ?? "", /Pick a folder/);
+	});
+
+	it("requires a name for a standing filter", () => {
+		const reason = commitDisabledReason({
+			draft: draft({ moveMailboxId: "mbx-1" }),
+			scope: "standing",
+			name: "  ",
+			pickedDate: "",
+		});
+		assert.match(reason ?? "", /Name this filter/);
+	});
+
+	it("requires a date for a temporary filter", () => {
+		const reason = commitDisabledReason({
+			draft: draft({ moveMailboxId: "mbx-1" }),
+			scope: "temporary",
+			name: "Trip",
+			pickedDate: "",
+		});
+		assert.match(reason ?? "", /Pick the date/);
+	});
+
+	it("is undefined when a move target is set for a one-time scope", () => {
+		assert.equal(
+			commitDisabledReason({
+				draft: draft({ moveMailboxId: "mbx-1" }),
+				scope: "all-like-these",
+				name: "",
+				pickedDate: "",
+			}),
+			undefined,
+		);
+	});
+
+	it("is undefined for a fully-specified temporary filter", () => {
+		assert.equal(
+			commitDisabledReason({
+				draft: draft({ moveMailboxId: "mbx-1" }),
+				scope: "temporary",
+				name: "Trip",
+				pickedDate: "2026-07-16",
+			}),
+			undefined,
+		);
+	});
+});
+
+describe("commitButtonLabel", () => {
+	it("pluralizes the one-time labels", () => {
+		assert.equal(commitButtonLabel("just-these", 1), "Move 1 message");
+		assert.equal(
+			commitButtonLabel("all-like-these", 48),
+			"Organize 48 messages",
+		);
+	});
+
+	it("uses standing copy for the persisted scopes", () => {
+		assert.equal(commitButtonLabel("standing", 48), "Always do this");
+		assert.equal(commitButtonLabel("temporary", 48), "Do this until then");
+	});
+});
+
+describe("scopeActionCount", () => {
+	it("uses the selection for just-these and the match set otherwise", () => {
+		assert.equal(scopeActionCount("just-these", 3, 48), 3);
+		assert.equal(scopeActionCount("all-like-these", 3, 48), 48);
+		assert.equal(scopeActionCount("standing", 3, 48), 48);
+	});
+});

package/src/lib/organize/organize-copy.ts

@@ -0,0 +1,61 @@
+import type { OrganizeScope } from "./organize-model";
+import { hasCommittableAction, type OrganizeDraft } from "./organize-model";
+
+export interface CommitContext {
+	draft: OrganizeDraft;
+	scope: OrganizeScope;
+	/** The filter name, required for the two standing scopes. */
+	name: string;
+	/** The raw picked date (`YYYY-MM-DD`), required for the temporary scope. */
+	pickedDate: string;
+}
+
+/**
+ * Why the commit button is disabled, or `undefined` when it is actionable.
+ * Never disable a control without saying why (ux.md), so the caller renders
+ * this string next to the button.
+ */
+export const commitDisabledReason = ({
+	draft,
+	scope,
+	name,
+	pickedDate,
+}: CommitContext): string | undefined => {
+	if (!hasCommittableAction(draft)) {
+		return "Pick a folder to move these into — labeling isn't available yet.";
+	}
+	if ((scope === "standing" || scope === "temporary") && name.trim() === "") {
+		return "Name this filter so you can find it later.";
+	}
+	if (scope === "temporary" && pickedDate === "") {
+		return "Pick the date this should stop on.";
+	}
+	return undefined;
+};
+
+/** The commit button label for each scope. */
+export const commitButtonLabel = (
+	scope: OrganizeScope,
+	matchedTotal: number,
+): string => {
+	switch (scope) {
+		case "just-these":
+			return `Move ${matchedTotal} message${matchedTotal === 1 ? "" : "s"}`;
+		case "all-like-these":
+			return `Organize ${matchedTotal} message${matchedTotal === 1 ? "" : "s"}`;
+		case "standing":
+			return "Always do this";
+		case "temporary":
+			return "Do this until then";
+	}
+};
+
+/**
+ * The count a scope acts on: the current selection for "just these", the
+ * widened match set for every scope that reaches similar mail.
+ */
+export const scopeActionCount = (
+	scope: OrganizeScope,
+	selectionCount: number,
+	matchedCount: number,
+): number => (scope === "just-these" ? selectionCount : matchedCount);