@remit/web-client 0.0.325 → 0.0.327

package/src/components/settings/FilterEditorSurface.tsx

@@ -1,65 +0,0 @@
-import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	BottomSheet,
-	Dialog,
-	type FolderTreeNode,
-	type LabelOption,
-} from "@remit/ui";
-import { useIsDesktop } from "@/hooks/useMediaQuery";
-import { FilterEditor } from "./FilterEditor";
-
-interface FilterEditorSurfaceProps {
-	accountId: string;
-	filter: RemitImapFilterResponse;
-	folders: readonly FolderTreeNode[];
-	delimiter?: string;
-	labels: LabelOption[];
-	onClose: () => void;
-}
-
-/**
- * The settings filter editor in its responsive home: the centered dialog on
- * desktop, the bottom sheet on mobile (RFC 038 D1), mounting the same
- * {@link FilterEditor} so the two can never drift. Opened from a filter row in
- * Settings › Filters.
- */
-export function FilterEditorSurface({
-	accountId,
-	filter,
-	folders,
-	delimiter,
-	labels,
-	onClose,
-}: FilterEditorSurfaceProps) {
-	const isDesktop = useIsDesktop();
-
-	const editor = (
-		<FilterEditor
-			accountId={accountId}
-			filter={filter}
-			folders={folders}
-			delimiter={delimiter}
-			labels={labels}
-			onClose={onClose}
-		/>
-	);
-
-	if (isDesktop) {
-		return (
-			<Dialog open onClose={onClose} title="Filter rule">
-				{editor}
-			</Dialog>
-		);
-	}
-
-	return (
-		<BottomSheet
-			open
-			onClose={onClose}
-			label="Filter rule"
-			dismissLabel="Dismiss filter rule"
-		>
-			{editor}
-		</BottomSheet>
-	);
-}

package/src/components/settings/FiltersList.render.test.ts

@@ -1,202 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import type { LabelOption } from "@remit/ui";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import type { FilterRunStatus } from "@/lib/organize/filter-run";
-import { FiltersList } from "./FiltersList";
-
-// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
-// runtime, which references a global `React`. Vite uses the automatic runtime,
-// so this shim only exists for the SSR test harness.
-(globalThis as { React?: typeof React }).React = React;
-
-const NOW = Date.parse("2026-07-12T12:00:00Z");
-
-const filter = (
-	overrides: Partial<RemitImapFilterResponse>,
-): RemitImapFilterResponse => ({
-	filterId: "f-1",
-	accountConfigId: "acc-1",
-	name: "Travel",
-	scope: "Standing",
-	state: "Active",
-	disabledReason: "None",
-	ruleChangedAt: 0,
-	actionChangedAt: 0,
-	matchOperator: "And",
-	literalClauses: [],
-	actionLabelId: "None",
-	actionMailboxId: "mbx-travel",
-	createdAt: 0,
-	updatedAt: 0,
-	...overrides,
-});
-
-const render = (
-	filters: RemitImapFilterResponse[],
-	labelById: Map<string, LabelOption> = new Map(),
-	run: { runFilterId?: string; runStatus?: FilterRunStatus } = {},
-) =>
-	renderToString(
-		createElement(FiltersList, {
-			filters,
-			mailboxName: (id: string) => (id === "mbx-travel" ? "Travel" : undefined),
-			labelById,
-			onEdit: () => undefined,
-			onDelete: () => undefined,
-			onToggle: () => undefined,
-			onRunNow: () => undefined,
-			...run,
-			now: NOW,
-		}) as never,
-	);
-
-describe("FiltersList", () => {
-	it("renders the empty state with a pointer to Organize", () => {
-		const html = render([]);
-		assert.match(html, /No filters yet/);
-	});
-
-	it("marks a standing filter Active and shows its move target", () => {
-		const html = render([filter({})]);
-		assert.match(html, /Active/);
-		assert.match(html, /Moves matches to Travel/);
-		assert.match(html, /always/);
-	});
-
-	it("opens the row's rule in the editor", () => {
-		const html = render([filter({})]);
-		assert.match(html, /Edit filter Travel/);
-	});
-
-	it("shows the applied label's chip when the filter has a label action (issue #26)", () => {
-		const labelById = new Map<string, LabelOption>([
-			["lbl-1", { id: "lbl-1", name: "Receipts", color: "Blue" }],
-		]);
-		const html = render([filter({ actionLabelId: "lbl-1" })], labelById);
-		assert.match(html, /Receipts/);
-	});
-
-	it("shows no label chip when the filter has no label action", () => {
-		const html = render([filter({ actionLabelId: "None" })]);
-		assert.doesNotMatch(html, /bg-blue-500|bg-red-500|bg-green-500/);
-	});
-
-	it("keeps an expired temporary filter visible and marks it Expired (RFC 034 Decision 1.2)", () => {
-		const html = render([
-			filter({
-				filterId: "f-2",
-				name: "Lisbon trip",
-				scope: "Temporary",
-				state: "Active",
-				expiresAt: "2026-07-10T00:00:00Z",
-			}),
-		]);
-		assert.match(html, /Lisbon trip/);
-		assert.match(html, /Expired/);
-		assert.match(html, /expired/);
-	});
-
-	it("offers to turn a running filter off", () => {
-		const html = render([filter({})]);
-		assert.match(html, /Turn off filter Travel/);
-		assert.doesNotMatch(html, /Disabled/);
-	});
-
-	const reasons = [
-		["UserDisabled", /Turned off\./],
-		["AwaitingFolder", /Off until its folder exists on the mail server/],
-		["FolderCreateFailed", /refused to create its folder/],
-		["FolderMissing", /no longer exists/],
-	] as const;
-
-	it("drops the turns-on-by-itself copy once the user picked a folder", () => {
-		const html = render([
-			filter({
-				state: "Disabled",
-				disabledReason: "AwaitingFolder",
-				actionMailboxId: "mbx-travel",
-			}),
-		]);
-		assert.doesNotMatch(html, /turns on by itself/);
-		assert.match(html, /Turned off\./);
-	});
-
-	for (const [reason, copy] of reasons) {
-		it(`marks a filter disabled for ${reason} with its reason and a way back on (#1103)`, () => {
-			const html = render([
-				filter({
-					state: "Disabled",
-					disabledReason: reason,
-					actionMailboxId: "None",
-				}),
-			]);
-			assert.match(html, /Disabled/);
-			assert.match(html, copy);
-			assert.match(html, /Turn on filter Travel/);
-		});
-	}
-
-	it("offers Run now on an active filter with an action (#1354)", () => {
-		const html = render([filter({})]);
-		assert.match(html, /Run now: filter Travel/);
-		assert.match(html, />Run now</);
-	});
-
-	it("offers no Run now on a turned-off or expired filter", () => {
-		const html = render([
-			filter({ state: "Disabled", disabledReason: "UserDisabled" }),
-			filter({
-				filterId: "f-2",
-				name: "Lisbon trip",
-				scope: "Temporary",
-				expiresAt: "2026-07-10T00:00:00Z",
-			}),
-		]);
-		assert.doesNotMatch(html, /Run now/);
-	});
-
-	it("offers no Run now on a filter with nothing to do", () => {
-		const html = render([
-			filter({ actionMailboxId: "None", actionLabelId: "None" }),
-		]);
-		assert.doesNotMatch(html, /Run now/);
-	});
-
-	it("says the run is going on the filter that was run, and holds the button", () => {
-		const html = render([filter({})], new Map(), {
-			runFilterId: "f-1",
-			runStatus: { kind: "running" },
-		});
-		assert.match(html, /role="status"/);
-		assert.match(html, /Running over the inbox/);
-		assert.match(html, /disabled=""/);
-	});
-
-	it("reports what the run filed once the job is done", () => {
-		const html = render([filter({})], new Map(), {
-			runFilterId: "f-1",
-			runStatus: { kind: "done", matched: 3, applied: 2 },
-		});
-		assert.match(html, /Filed 2 of 3 matching messages in the inbox/);
-	});
-
-	it("says so when nothing in the inbox matched", () => {
-		const html = render([filter({})], new Map(), {
-			runFilterId: "f-1",
-			runStatus: { kind: "done", matched: 0, applied: 0 },
-		});
-		assert.match(html, /Nothing in the inbox matched/);
-	});
-
-	it("puts no stale status on the row when the run failed", () => {
-		const html = render([filter({})], new Map(), {
-			runFilterId: "f-1",
-			runStatus: { kind: "failed", error: new Error("turned off") },
-		});
-		assert.doesNotMatch(html, /role="status"/);
-		assert.match(html, />Run now</);
-	});
-});

package/src/components/settings/FiltersList.stories.tsx

@@ -1,113 +0,0 @@
-import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FiltersList } from "./FiltersList";
-
-const NOW = Date.parse("2026-09-25T12:00:00Z");
-
-const meta: Meta<typeof FiltersList> = {
-	title: "Playground/Shipped/Settings/Filters/FiltersList",
-	component: FiltersList,
-	parameters: { layout: "padded" },
-	decorators: [
-		(Story) => (
-			<div className="mx-auto max-w-md">
-				<Story />
-			</div>
-		),
-	],
-	args: {
-		mailboxName: (mailboxId: string) =>
-			mailboxId === "mbx-invoices" ? "Invoices" : undefined,
-		labelById: new Map(),
-		onEdit: () => undefined,
-		onDelete: () => undefined,
-		onToggle: () => undefined,
-		onRunNow: () => undefined,
-		now: NOW,
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof FiltersList>;
-
-const makeFilter = (
-	overrides: Partial<RemitImapFilterResponse>,
-): RemitImapFilterResponse => ({
-	filterId: "flt-1",
-	accountConfigId: "acc-1",
-	name: "Invoices",
-	scope: "Standing",
-	state: "Active",
-	disabledReason: "None",
-	ruleChangedAt: 0,
-	actionChangedAt: 0,
-	matchOperator: "And",
-	literalClauses: [{ field: "From", value: "billing@example.com" }],
-	actionLabelId: "None",
-	actionMailboxId: "mbx-invoices",
-	createdAt: 0,
-	updatedAt: 0,
-	...overrides,
-});
-
-const disabled = (
-	reason: RemitImapFilterResponse["disabledReason"],
-	overrides: Partial<RemitImapFilterResponse> = {},
-): RemitImapFilterResponse[] => [
-	makeFilter({ state: "Disabled", disabledReason: reason, ...overrides }),
-];
-
-export const Active: Story = {
-	args: { filters: [makeFilter({})] },
-};
-
-export const TurnedOffByUser: Story = {
-	args: { filters: disabled("UserDisabled") },
-};
-
-export const AwaitingFolder: Story = {
-	args: { filters: disabled("AwaitingFolder", { actionMailboxId: "None" }) },
-};
-
-export const FolderCreateFailed: Story = {
-	args: {
-		filters: disabled("FolderCreateFailed", { actionMailboxId: "None" }),
-	},
-};
-
-export const FolderMissing: Story = {
-	args: {
-		filters: disabled("FolderMissing", { actionMailboxId: "mbx-deleted" }),
-	},
-};
-
-export const Toggling: Story = {
-	args: {
-		filters: disabled("UserDisabled"),
-		togglingFilterId: "flt-1",
-	},
-};
-
-export const RunNowRunning: Story = {
-	args: {
-		filters: [makeFilter({})],
-		runFilterId: "flt-1",
-		runStatus: { kind: "running" },
-	},
-};
-
-export const RunNowDone: Story = {
-	args: {
-		filters: [makeFilter({})],
-		runFilterId: "flt-1",
-		runStatus: { kind: "done", matched: 3, applied: 3 },
-	},
-};
-
-export const RunNowMatchedNothing: Story = {
-	args: {
-		filters: [makeFilter({})],
-		runFilterId: "flt-1",
-		runStatus: { kind: "done", matched: 0, applied: 0 },
-	},
-};

package/src/components/settings/FiltersList.tsx

@@ -1,191 +0,0 @@
-import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import { Badge, Button, LabelChip, type LabelOption } from "@remit/ui";
-import { Trash2 } from "lucide-react";
-import type { FilterRunStatus } from "@/lib/organize/filter-run";
-import {
-	disabledReasonCopy,
-	filterDisplayStatus,
-	formatExpiresAt,
-} from "@/lib/organize/filter-status";
-import { NO_ACTION } from "@/lib/organize/organize-model";
-
-const runStatusLine = (status: FilterRunStatus): string | undefined => {
-	switch (status.kind) {
-		case "queuing":
-		case "running":
-			return "Running over the inbox…";
-		case "done":
-			return status.matched === 0
-				? "Done. Nothing in the inbox matched."
-				: `Done. Filed ${status.applied} of ${status.matched} matching messages in the inbox.`;
-		case "failed":
-			return undefined;
-	}
-};
-
-interface FiltersListProps {
-	filters: RemitImapFilterResponse[];
-	/** Resolve a destination mailbox id to a folder name for display. */
-	mailboxName: (mailboxId: string) => string | undefined;
-	/** Resolve a label id to its name/color for the applied-label chip (issue #26). */
-	labelById: Map<string, LabelOption>;
-	/** Open the row's rule in the editor (RFC 038 D6). */
-	onEdit: (filterId: string) => void;
-	onDelete: (filterId: string) => void;
-	deletingFilterId?: string;
-	onToggle: (filterId: string, enabled: boolean) => void;
-	togglingFilterId?: string;
-	/** Run the filter over the inbox now (#1354). */
-	onRunNow: (filterId: string) => void;
-	/** The filter the last Run now was for. */
-	runFilterId?: string;
-	/** How that run stands; a failure is reported above the list. */
-	runStatus?: FilterRunStatus;
-	/** Injected for deterministic status in tests; defaults to now. */
-	now?: number;
-}
-
-/**
- * The account's standing filters, each opening its rule in the editor (RFC 038
- * D6). Expired temporary filters stay listed and are marked Expired distinctly
- * rather than hidden (RFC 034 Decision 1.2).
- */
-export function FiltersList({
-	filters,
-	mailboxName,
-	labelById,
-	onEdit,
-	onDelete,
-	deletingFilterId,
-	onToggle,
-	togglingFilterId,
-	onRunNow,
-	runFilterId,
-	runStatus,
-	now = Date.now(),
-}: FiltersListProps) {
-	if (filters.length === 0) {
-		return (
-			<p className="py-6 text-sm text-fg-muted">
-				No filters yet. Select a few messages in the inbox and choose Organize
-				to make one.
-			</p>
-		);
-	}
-
-	return (
-		<ul className="divide-y divide-line rounded-md border border-line">
-			{filters.map((filter) => {
-				const status = filterDisplayStatus(filter, now);
-				const expired = status === "Expired";
-				const disabled = status === "Disabled";
-				const reason = disabled ? disabledReasonCopy(filter) : undefined;
-				const folder =
-					filter.actionMailboxId !== NO_ACTION
-						? mailboxName(filter.actionMailboxId)
-						: undefined;
-				const label =
-					filter.actionLabelId !== NO_ACTION
-						? labelById.get(filter.actionLabelId)
-						: undefined;
-				const expiresLabel = formatExpiresAt(filter.expiresAt);
-				const run = runFilterId === filter.filterId ? runStatus : undefined;
-				const busy = run?.kind === "queuing" || run?.kind === "running";
-				const runLine = run ? runStatusLine(run) : undefined;
-				const runnable =
-					status === "Active" &&
-					(filter.actionMailboxId !== NO_ACTION ||
-						filter.actionLabelId !== NO_ACTION);
-
-				return (
-					<li
-						key={filter.filterId}
-						className="flex items-start gap-3 px-3 py-2.5"
-					>
-						<button
-							type="button"
-							onClick={() => onEdit(filter.filterId)}
-							aria-label={`Edit filter ${filter.name}`}
-							className="min-w-0 flex-1 rounded-sm text-left hover:opacity-80"
-						>
-							<div className="flex items-center gap-2">
-								<span
-									className={`truncate text-sm font-medium ${
-										expired || disabled ? "text-fg-muted" : "text-fg"
-									}`}
-								>
-									{filter.name}
-								</span>
-								<Badge
-									tone={expired ? "neutral" : disabled ? "warning" : "positive"}
-									dot
-								>
-									{status}
-								</Badge>
-							</div>
-							<p className="mt-0.5 text-xs text-fg-subtle">
-								{folder ? `Moves matches to ${folder}` : "No move action"}
-								{filter.scope === "Temporary" && expiresLabel
-									? expired
-										? ` · expired ${expiresLabel}`
-										: ` · until ${expiresLabel}`
-									: filter.scope === "Standing"
-										? " · always"
-										: ""}
-							</p>
-							{reason && (
-								<p className="mt-0.5 text-xs text-warning">{reason}</p>
-							)}
-							{runLine && (
-								<p role="status" className="mt-0.5 text-xs text-fg-muted">
-									{runLine}
-								</p>
-							)}
-							{label && (
-								<div className="mt-1.5 flex flex-wrap gap-1.5">
-									<LabelChip
-										label={{
-											labelId: label.id,
-											name: label.name,
-											color: label.color,
-										}}
-									/>
-								</div>
-							)}
-						</button>
-						{runnable && (
-							<Button
-								variant="ghost"
-								size="sm"
-								onClick={() => onRunNow(filter.filterId)}
-								disabled={busy}
-								aria-label={`Run now: filter ${filter.name}`}
-							>
-								{busy ? "Running…" : "Run now"}
-							</Button>
-						)}
-						{!expired && (
-							<Button
-								variant="ghost"
-								size="sm"
-								onClick={() => onToggle(filter.filterId, disabled)}
-								disabled={togglingFilterId === filter.filterId}
-								aria-label={`${disabled ? "Turn on" : "Turn off"} filter ${filter.name}`}
-							>
-								{disabled ? "Turn on" : "Turn off"}
-							</Button>
-						)}
-						<Button
-							variant="ghost"
-							size="sm"
-							icon={<Trash2 className="size-4 text-danger" />}
-							onClick={() => onDelete(filter.filterId)}
-							disabled={deletingFilterId === filter.filterId}
-							aria-label={`Delete filter ${filter.name}`}
-						/>
-					</li>
-				);
-			})}
-		</ul>
-	);
-}

package/src/components/settings/LabelsList.stories.tsx

@@ -1,134 +0,0 @@
-import type { RemitImapLabelResponse } from "@remit/api-http-client/types.gen.ts";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { LabelsList } from "./LabelsList";
-
-const meta: Meta<typeof LabelsList> = {
-	title: "Playground/Shipped/Settings/Labels/LabelsList",
-	component: LabelsList,
-	parameters: { layout: "padded" },
-	decorators: [
-		(Story) => (
-			<div className="mx-auto max-w-md">
-				<Story />
-			</div>
-		),
-	],
-	args: {
-		onRename: () => undefined,
-		onRecolor: () => undefined,
-		onDelete: () => undefined,
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof LabelsList>;
-
-const makeLabel = (
-	overrides: Partial<RemitImapLabelResponse>,
-): RemitImapLabelResponse => ({
-	labelId: "lbl-1",
-	accountConfigId: "acc-1",
-	name: "Receipts",
-	color: "Blue",
-	createdAt: 0,
-	updatedAt: 0,
-	filterCount: 0,
-	...overrides,
-});
-
-const fewLabels: RemitImapLabelResponse[] = [
-	makeLabel({
-		labelId: "lbl-1",
-		name: "Receipts",
-		color: "Blue",
-		filterCount: 0,
-	}),
-	makeLabel({
-		labelId: "lbl-2",
-		name: "Travel",
-		color: "Green",
-		filterCount: 1,
-	}),
-	makeLabel({ labelId: "lbl-3", name: "Urgent", color: "Red", filterCount: 3 }),
-];
-
-const manyLabels: RemitImapLabelResponse[] = [
-	...fewLabels,
-	makeLabel({
-		labelId: "lbl-4",
-		name: "Newsletters",
-		color: "Yellow",
-		filterCount: 2,
-	}),
-	makeLabel({
-		labelId: "lbl-5",
-		name: "Work",
-		color: "Purple",
-		filterCount: 0,
-	}),
-	makeLabel({
-		labelId: "lbl-6",
-		name: "Family",
-		color: "Teal",
-		filterCount: 0,
-	}),
-	makeLabel({
-		labelId: "lbl-7",
-		name: "Finance",
-		color: "Orange",
-		filterCount: 4,
-	}),
-	makeLabel({
-		labelId: "lbl-8",
-		name: "Recruiting",
-		color: "Gray",
-		filterCount: 1,
-	}),
-	makeLabel({
-		labelId: "lbl-9",
-		name: "Quarterly compliance filings that need a second look",
-		color: "Default",
-		filterCount: 1,
-	}),
-];
-
-/** No labels yet — the empty-state copy points at the create form below. */
-export const Empty: Story = {
-	args: { labels: [] },
-};
-
-/** A few labels, each showing its filter-usage line. */
-export const Few: Story = {
-	args: { labels: fewLabels },
-};
-
-/** The same few labels, on the dark theme. */
-export const FewDark: Story = {
-	name: "Few (dark)",
-	parameters: { theme: "dark" },
-	args: { labels: fewLabels },
-};
-
-/** Many labels, including one with a long name that truncates in its chip. */
-export const Many: Story = {
-	args: { labels: manyLabels },
-};
-
-/**
- * Renaming inline: clicking a label's chip swaps it for a focused text input.
- * Driven here rather than passed as a prop — `editingId` is internal state.
- */
-export const Renaming: Story = {
-	args: { labels: fewLabels },
-	play: async ({ canvasElement }) => {
-		const renameButton = canvasElement.querySelector<HTMLButtonElement>(
-			'button[aria-label="Rename label Receipts"]',
-		);
-		renameButton?.click();
-	},
-};
-
-/** A delete in flight — the row's delete button disables. */
-export const Deleting: Story = {
-	args: { labels: fewLabels, deletingLabelId: "lbl-2" },
-};