@remit/ui 0.0.60 → 0.0.62

package/src/lib/wizard-steps.test.ts

@@ -80,24 +80,25 @@ describe("stepsFor — the step ids for every verb × match mode × scope", () =
 		]);
 	});
 
-	it("gives Organize a scope step, and a naming step only where the scope persists", () => {
+	it("gives Organize a destination and a scope step, and a naming step only where the scope persists", () => {
 		assert.deepEqual(stepsFor({ verb: "organize", mode: "selected" }), [
 			"match",
+			"folder",
 			"rule",
 			"review",
 			"run",
 		]);
 		assert.deepEqual(
 			stepsFor({ verb: "organize", mode: "selected", scope: "once" }),
-			["match", "rule", "review", "run"],
+			["match", "folder", "rule", "review", "run"],
 		);
 		assert.deepEqual(
 			stepsFor({ verb: "organize", mode: "similar", scope: "standing" }),
-			["match", "rule", "name", "review", "run"],
+			["match", "folder", "rule", "name", "review", "run"],
 		);
 		assert.deepEqual(
 			stepsFor({ verb: "organize", mode: "properties", scope: "until" }),
-			["match", "properties", "rule", "name", "review", "run"],
+			["match", "properties", "folder", "rule", "name", "review", "run"],
 		);
 	});
 
@@ -109,7 +110,7 @@ describe("stepsFor — the step ids for every verb × match mode × scope", () =
 				scope: "standing",
 				fromSearch: true,
 			}),
-			["properties", "rule", "name", "review", "run"],
+			["properties", "folder", "rule", "name", "review", "run"],
 		);
 		assert.deepEqual(
 			stepsFor({ verb: "move", mode: "properties", fromSearch: true }),
@@ -171,14 +172,21 @@ describe("stepsFor — a branching answer only adds or drops a step after itself
 			mode: "selected",
 			scope: "standing",
 		});
-		assert.deepEqual(standing, ["match", "rule", "name", "review", "run"]);
+		assert.deepEqual(standing, [
+			"match",
+			"folder",
+			"rule",
+			"name",
+			"review",
+			"run",
+		]);
 
 		const once = stepsFor({
 			verb: "organize",
 			mode: "selected",
 			scope: "once",
 		});
-		assert.deepEqual(once, ["match", "rule", "review", "run"]);
+		assert.deepEqual(once, ["match", "folder", "rule", "review", "run"]);
 
 		// The user is on Review when they go back and change the scope to once.
 		// Held by number, index 3 lands them on Run — the action taken without the
@@ -222,7 +230,7 @@ describe("stepsFor — a branching answer only adds or drops a step after itself
 		const shortened = stepsFor({ verb: "organize", mode: "selected" });
 		assert.equal(shortened.includes("properties"), false);
 		assert.equal(stepIndex(shortened, "properties"), 0);
-		assert.equal(stepIndex(shortened, "rule"), 1);
+		assert.equal(stepIndex(shortened, "rule"), 2);
 	});
 });
 
@@ -370,6 +378,27 @@ describe("stepBlockedReason", () => {
 		);
 	});
 
+	it("refuses to commit a match that reaches nothing", () => {
+		// A settled zero is a whole answer: committing it would report a bulk
+		// action over no mail. The reload path lands here too — the step comes
+		// back in the URL and the ticked rows do not come back with it.
+		const reason = stepBlockedReason("review", draft(), {
+			status: "ready",
+			count: 0,
+		});
+		assert.ok(reason);
+		assert.match(reason, /nothing to do/);
+		// A zero that is still being recounted is not that answer yet.
+		assert.equal(
+			stepBlockedReason("review", draft(), {
+				status: "ready",
+				count: 0,
+				stale: true,
+			}),
+			ruleBlockedCopy.recounting,
+		);
+	});
+
 	it("waits on no count where a widened door never had one", () => {
 		assert.equal(stepBlockedReason("review", draft(), UNCOUNTED), undefined);
 	});

package/src/lib/wizard-steps.ts

@@ -112,8 +112,9 @@ export interface WizardAnswers {
 
 /**
  * The steps this flow walks, in order. The property door earns an editor step,
- * Move earns a destination step, Organize earns a scope step, and a scope that
- * persists earns a naming step.
+ * Move and Organize both earn a destination step — a rule that moves nothing is
+ * a rule with nothing to commit — Organize earns a scope step after it, and a
+ * scope that persists earns a naming step.
  */
 export const stepsFor = ({
 	verb,
@@ -129,9 +130,9 @@ export const stepsFor = ({
 	if (verb === "move") return [...opening, "folder", "review", "run"];
 	if (verb === "organize") {
 		if (scope === "standing" || scope === "until") {
-			return [...opening, "rule", "name", "review", "run"];
+			return [...opening, "folder", "rule", "name", "review", "run"];
 		}
-		return [...opening, "rule", "review", "run"];
+		return [...opening, "folder", "rule", "review", "run"];
 	}
 	return [...opening, "review", "run"];
 };
@@ -200,6 +201,27 @@ export const unreadableDraftClauses = (draft: WizardDraft): RuleClause[] =>
  */
 export type MatchCount = PreviewCount | { status: "uncounted" };
 
+/**
+ * Why a selection spanning accounts cannot become a rule (#477 5.5). A filter
+ * belongs to the account it was created for, so the two persisting scopes have
+ * nothing to attach to; the one-off scope acts on the messages themselves and is
+ * unaffected.
+ */
+export const crossAccountRuleReason =
+	"A rule only works within one account — clear the selection, or pick messages from a single account.";
+
+/** The same restriction on the step that asks for a folder. */
+export const crossAccountDestinationReason =
+	"A destination only works within one account — clear the selection, or pick messages from a single account.";
+
+/**
+ * The match reached nothing, so committing it would report a bulk action that
+ * touched no mail. Reachable both from a predicate that matches nothing and from
+ * a wizard restored by a reload, whose ticked rows did not come back with it.
+ */
+const EMPTY_MATCH =
+	"This matches no messages, so there is nothing to do. Go back and change what it applies to.";
+
 /** A clause chip that was added but never filled in. The rule editor has no equivalent — it holds its draft until the value is typed. */
 const INCOMPLETE_CLAUSE = "Fill in every property, or take the empty one off.";
 const NO_DESTINATION = "Pick a destination first.";
@@ -244,9 +266,11 @@ export const stepBlockedReason = (
 	}
 	if (step === "name" && !draft.name?.trim()) return ruleBlockedCopy.unnamed;
 	if (step === "review") {
-		return count.status === "uncounted"
-			? undefined
-			: previewSettledReason(count);
+		if (count.status === "uncounted") return undefined;
+		if (count.status === "ready" && count.count === 0 && !count.stale) {
+			return EMPTY_MATCH;
+		}
+		return previewSettledReason(count);
 	}
 	return undefined;
 };
@@ -364,7 +388,7 @@ export const runCopy = ({
 			title: standing ? "Rule saved and applied" : `${past} ${applied}`,
 			detail: standing
 				? `${applied} of ${matched} already in your mailbox ${done}. New mail follows the rule as it arrives.`
-				: `Every message the match reached was ${done}.`,
+				: `Every message the match reached was ${done}. Your mail server is still catching up, so the list can lag behind.`,
 			tone: "success",
 			dismissLabel: "Done",
 		};

package/src/components/selection-sheet.render.test.ts

@@ -1,169 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { SelectionSheet, type SelectionSheetProps } from "./selection-sheet.js";
-
-const noop = () => {};
-
-const base: SelectionSheetProps = {
-	count: 3,
-	onCancel: noop,
-	onDelete: noop,
-};
-
-describe("SelectionSheet", () => {
-	it("teases collapsed with the count and the swipe hint", () => {
-		const html = renderToString(createElement(SelectionSheet, base));
-		assert.match(html, /3 messages selected/);
-		assert.match(html, /Swipe up for actions/);
-		assert.match(html, /role="slider"/);
-		// Collapsed: no cancel/mark-read in the header yet.
-		assert.doesNotMatch(html, /aria-label="Cancel selection"/);
-		// The clipped body is inert while collapsed, so its offscreen verbs stay
-		// out of the tab order and the a11y tree.
-		assert.match(html, /inert=""/);
-	});
-
-	it("expanded shows the quick actions, cancel, and the smart-flow rows", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				startExpanded: true,
-				onMarkRead: noop,
-				onJunk: noop,
-				onSelectSimilar: noop,
-				onSomethingElse: noop,
-				moveSlot: createElement("span", null, "move-here"),
-			}),
-		);
-		assert.match(html, /aria-label="Move selected messages to Trash"/);
-		assert.match(html, /aria-label="Move selected messages to Junk"/);
-		assert.match(html, /aria-label="Mark as read"/);
-		assert.match(html, /aria-label="Cancel selection"/);
-		assert.match(html, /move-here/);
-		assert.match(html, /Select similar messages/);
-		assert.match(html, /Something else/);
-		// Expanded: the body is live, not inert.
-		assert.doesNotMatch(html, /inert=""/);
-	});
-
-	it("names the loaded scope and renders the select-all control", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 47,
-				startExpanded: true,
-				selectAll: { checked: true, indeterminate: false, onChange: noop },
-			}),
-		);
-		assert.match(html, /All 47 loaded selected/);
-		assert.match(html, /aria-label="Select all"/);
-	});
-
-	it("counting replaces the quick actions with the status and a Stop", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 0,
-				mode: "counting",
-				statusLabel: "Counting… 1,900 so far",
-				notice: {
-					tone: "info",
-					text: "",
-					action: { label: "Stop", onClick: noop },
-				},
-			}),
-		);
-		assert.match(html, /Counting… 1,900 so far/);
-		assert.match(html, /Stop/);
-		// No quick actions while counting.
-		assert.doesNotMatch(html, /aria-label="Move selected messages to Trash"/);
-	});
-
-	it("running shows a progress bar and no quick actions", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 3412,
-				mode: "running",
-				isBusy: true,
-				statusLabel: "Deleting 1,200 of 3,412…",
-				progress: { value: 1200, max: 3412 },
-			}),
-		);
-		assert.match(html, /Deleting 1,200 of 3,412…/);
-		assert.match(html, /role="progressbar"/);
-		assert.doesNotMatch(html, /Select similar messages/);
-	});
-
-	it("escalated keeps the verbs and a clear-selection notice", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 3412,
-				mode: "escalated",
-				startExpanded: true,
-				statusLabel: 'All 3,412 matching "npm" selected',
-				moveSlot: createElement("span", null, "move-here"),
-				notice: {
-					tone: "info",
-					text: "",
-					action: { label: "Clear selection", onClick: noop },
-				},
-			}),
-		);
-		assert.match(html, /All 3,412 matching/);
-		assert.match(html, /aria-label="Move selected messages to Trash"/);
-		assert.match(html, /Clear selection/);
-		// Not a bounded selection, so no select-similar entry.
-		assert.doesNotMatch(html, /Select similar messages/);
-	});
-
-	/**
-	 * jsdom lays nothing out, so these assert the constraint itself rather than a
-	 * measured height: the sheet must not carry a fixed pixel ceiling (which sat
-	 * below its own content at 411×759 and clipped the last action), and its body
-	 * must scroll rather than clip whatever the ceiling does cut off (#405).
-	 */
-	it("caps the expanded height against the viewport, not a fixed pixel ceiling", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, { ...base, startExpanded: true }),
-		);
-		assert.match(html, /max-height:70dvh/);
-		assert.doesNotMatch(html, /max-height:min\(/);
-	});
-
-	it("scrolls the expanded actions instead of clipping them", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				startExpanded: true,
-				onSelectSimilar: noop,
-				onSomethingElse: noop,
-			}),
-		);
-		assert.match(html, /class="flex min-h-0 flex-1 flex-col overflow-y-auto /);
-		assert.doesNotMatch(
-			html,
-			/class="flex min-h-0 flex-1 flex-col overflow-hidden /,
-		);
-	});
-
-	it("renders a partial-failure notice with a Retry action", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 340,
-				startExpanded: true,
-				notice: {
-					tone: "danger",
-					text: "3,072 moved to Trash. 340 couldn't be deleted.",
-					action: { label: "Retry 340", onClick: noop },
-				},
-			}),
-		);
-		assert.match(html, /3,072 moved to Trash/);
-		assert.match(html, /Retry 340/);
-	});
-});

package/src/components/selection-sheet.stories.tsx

@@ -1,179 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FolderInput } from "lucide-react";
-import { SelectionSheet } from "./selection-sheet.js";
-
-const meta: Meta<typeof SelectionSheet> = {
-	title: "Screens/Kit/SelectionSheet",
-	component: SelectionSheet,
-	parameters: { layout: "fullscreen" },
-	args: {
-		count: 3,
-		onCancel: () => undefined,
-		onDelete: () => undefined,
-		onMarkRead: () => undefined,
-		onJunk: () => undefined,
-		onSelectSimilar: () => undefined,
-		onSomethingElse: () => undefined,
-	},
-	decorators: [
-		(Story) => (
-			<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[720px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
-				{/* Inbox backdrop, so the peeking sheet reads against a list. */}
-				<div className="divide-y divide-line opacity-50">
-					{Array.from({ length: 11 }).map((_, i) => (
-						<div
-							// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton rows
-							key={i}
-							className="flex items-start gap-3 px-row-inset py-2.5"
-						>
-							<div className="mt-0.5 size-7 shrink-0 rounded-full bg-surface-sunken" />
-							<div className="min-w-0 flex-1 space-y-1">
-								<div className="h-2.5 w-1/3 rounded bg-surface-sunken" />
-								<div className="h-2 w-2/3 rounded bg-surface-sunken" />
-							</div>
-						</div>
-					))}
-				</div>
-				<Story />
-			</div>
-		),
-	],
-};
-export default meta;
-
-type Story = StoryObj<typeof SelectionSheet>;
-
-/** Stand-in for the caller's move-to-folder trigger (an icon button that opens
- *  a folder picker). The sheet only reserves the slot. */
-const MoveSlot = () => (
-	<button
-		type="button"
-		aria-label="Move selected messages"
-		className="inline-flex size-11 shrink-0 items-center justify-center rounded text-fg-muted hover:bg-surface-raised"
-	>
-		<FolderInput className="size-4" />
-	</button>
-);
-
-/** Collapsed — the slim ~56px teaser that rises at 2+ selected. */
-export const Teaser: Story = {
-	args: { moveSlot: <MoveSlot /> },
-};
-
-/** Expanded — quick actions (Delete / Move / Junk) plus the select-similar and
- *  "Something else" entries. */
-export const Expanded: Story = {
-	args: { startExpanded: true, moveSlot: <MoveSlot /> },
-};
-
-/**
- * The same expanded sheet on the shortest phone viewport a real device reports
- * (411×759 — Android Chrome with its address bar and system nav showing). This
- * is the tallest the content ever gets: select-all, all three quick actions and
- * both smart-flow rows. A fixed height ceiling cut "Something else" off here
- * with no way to reach it (#405); the sheet now takes the height its content
- * needs, and scrolls only when the viewport genuinely can't hold it.
- */
-export const ExpandedShortViewport: Story = {
-	globals: { viewport: { value: "mobileShort" } },
-	args: {
-		startExpanded: true,
-		moveSlot: <MoveSlot />,
-		selectAll: {
-			checked: false,
-			indeterminate: true,
-			onChange: () => undefined,
-		},
-	},
-};
-
-/** While a search result set pages to its total: the count isn't known, the
- *  quick actions are replaced by the running total and an explicit Stop. */
-export const Counting: Story = {
-	args: {
-		count: 0,
-		mode: "counting",
-		startExpanded: true,
-		statusLabel: "Counting… 1,900 so far",
-		selectAll: {
-			checked: true,
-			indeterminate: false,
-			onChange: () => undefined,
-		},
-		notice: {
-			tone: "info",
-			text: "",
-			action: { label: "Stop", onClick: () => undefined },
-		},
-	},
-};
-
-/** A bulk delete in progress — a running total and a determinate progress bar,
- *  the delete busy, no quick actions to act mid-run. */
-export const RunningProgress: Story = {
-	args: {
-		count: 3412,
-		mode: "running",
-		startExpanded: true,
-		isBusy: true,
-		statusLabel: "Deleting 1,200 of 3,412…",
-		progress: { value: 1200, max: 3412 },
-	},
-};
-
-/**
- * Every loaded row checked and the search has more matches: the sheet offers to
- * escalate the selection to the whole result set.
- */
-export const EscalationAvailable: Story = {
-	args: {
-		count: 47,
-		startExpanded: true,
-		moveSlot: <MoveSlot />,
-		selectAll: {
-			checked: true,
-			indeterminate: false,
-			onChange: () => undefined,
-		},
-		notice: {
-			tone: "info",
-			text: "",
-			action: {
-				label: 'Select all matching "npm"',
-				onClick: () => undefined,
-			},
-		},
-	},
-};
-
-/** Selection escalated to the search predicate: the count names the query's
- *  total, every verb still acts, and the notice offers a way back. */
-export const Escalated: Story = {
-	args: {
-		count: 3412,
-		mode: "escalated",
-		startExpanded: true,
-		moveSlot: <MoveSlot />,
-		statusLabel: 'All 3,412 matching "npm" selected',
-		notice: {
-			tone: "info",
-			text: "",
-			action: { label: "Clear selection", onClick: () => undefined },
-		},
-	},
-};
-
-/** After a bulk delete with some batches failed: the count reflects only what
- *  is still selected — the failures — and Retry names how many. */
-export const PartialFailure: Story = {
-	args: {
-		count: 340,
-		startExpanded: true,
-		moveSlot: <MoveSlot />,
-		notice: {
-			tone: "danger",
-			text: "3,072 moved to Trash. 340 couldn't be deleted.",
-			action: { label: "Retry 340", onClick: () => undefined },
-		},
-	},
-};

package/src/components/selection-sheet.test.ts

@@ -1,88 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { resolveSheetSnap } from "./selection-sheet.js";
-
-const base = {
-	expandedHeight: 320,
-	teaserHeight: 56,
-	flickVelocity: 0.5,
-};
-
-describe("resolveSheetSnap", () => {
-	it("flicks up expand regardless of how far the drag travelled", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: false, delta: -4, velocity: -1.2 }),
-			true,
-		);
-	});
-
-	it("flicks down collapse regardless of how far the drag travelled", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: true, delta: 4, velocity: 1.2 }),
-			false,
-		);
-	});
-
-	it("a slow upward drag past the midpoint expands from the teaser", () => {
-		// midpoint = (320 - 56) / 2 = 132; -140 crosses it going up.
-		assert.equal(
-			resolveSheetSnap({
-				...base,
-				expanded: false,
-				delta: -140,
-				velocity: 0.1,
-			}),
-			true,
-		);
-	});
-
-	it("a slow upward drag short of the midpoint settles back to the teaser", () => {
-		assert.equal(
-			resolveSheetSnap({
-				...base,
-				expanded: false,
-				delta: -100,
-				velocity: 0.1,
-			}),
-			false,
-		);
-	});
-
-	it("a slow downward drag past the midpoint collapses from expanded", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: true, delta: 140, velocity: 0.1 }),
-			false,
-		);
-	});
-
-	it("a slow downward drag short of the midpoint stays expanded", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: true, delta: 100, velocity: 0.1 }),
-			true,
-		);
-	});
-
-	it("a barely-moved release keeps the current snap state", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: true, delta: 0, velocity: 0 }),
-			true,
-		);
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: false, delta: 0, velocity: 0 }),
-			false,
-		);
-	});
-
-	it("defaults the flick threshold when omitted", () => {
-		assert.equal(
-			resolveSheetSnap({
-				expanded: false,
-				delta: -4,
-				velocity: -1,
-				expandedHeight: 320,
-				teaserHeight: 56,
-			}),
-			true,
-		);
-	});
-});