@remit/ui 0.0.59 → 0.0.61

package/src/components/selection-wizard.tsx

@@ -28,6 +28,7 @@ import {
 	matchPhrase,
 	matchSummary,
 	type RunCopy,
+	type RunOutcome,
 	type RunState,
 	runCopy,
 	type SampleEmptyReason,
@@ -133,7 +134,16 @@ export function WizardScreen({
 }: WizardScreenProps) {
 	const active = stepIndex(steps, step);
 	return (
-		<div className="fixed inset-0 z-50 flex flex-col font-sans text-fg md:items-center md:justify-center md:bg-black/40 md:p-6">
+		// A modal at every width: full-bleed below 768px it covers the list rather
+		// than sitting beside it, so the list behind must leave the accessibility
+		// tree with it — otherwise the verbs that opened the wizard are still
+		// reachable underneath the screen that replaced them.
+		<div
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			className="fixed inset-0 z-50 flex flex-col font-sans text-fg md:items-center md:justify-center md:bg-black/40 md:p-6"
+		>
 			<div className="flex min-h-0 w-full flex-1 flex-col bg-canvas md:h-[45rem] md:max-h-[calc(100dvh-3rem)] md:w-[35rem] md:max-w-[calc(100vw-3rem)] md:flex-none md:overflow-hidden md:rounded-xl md:border md:border-line md:shadow-lg">
 				<header className="shrink-0 border-b border-line px-3 pb-2 pt-3">
 					<div className="flex items-center gap-1">
@@ -190,6 +200,12 @@ export interface ChoiceCardProps {
 	children?: ReactNode;
 }
 
+/**
+ * Nothing disables (#477 1.7). An unavailable choice is dimmed and stays
+ * pressable, because pressing it is what takes the user somewhere that works —
+ * `aria-disabled` would announce it as a control that does nothing and take that
+ * away. What makes it unavailable is announced with it instead.
+ */
 export function ChoiceCard({
 	selected,
 	title,
@@ -198,13 +214,14 @@ export function ChoiceCard({
 	onSelect,
 	children,
 }: ChoiceCardProps) {
+	const hintId = useId();
 	return (
 		<div className="space-y-1.5">
 			<button
 				type="button"
 				onClick={onSelect}
 				aria-pressed={selected}
-				aria-disabled={unavailable || undefined}
+				aria-describedby={unavailable && children ? hintId : undefined}
 				className={cn(
 					"flex w-full items-start gap-3 rounded-lg border p-3 text-left transition-colors",
 					selected
@@ -228,7 +245,7 @@ export function ChoiceCard({
 					</span>
 				</span>
 			</button>
-			{children}
+			{children && <div id={hintId}>{children}</div>}
 		</div>
 	);
 }
@@ -244,6 +261,12 @@ export interface SelectionSampleProps {
 	label: string;
 	/** Why there are no rows. Defaults to nothing matching, never to a bare empty state. */
 	emptyReason?: SampleEmptyReason;
+	/**
+	 * The rows are still being fetched. No rows yet is not the same answer as no
+	 * rows at all, and "nothing matches" beside a server count that says otherwise
+	 * is the wrong conclusion (#477 3.5).
+	 */
+	loading?: boolean;
 }
 
 const sampleFooter = (count: MatchCount, shown: number): string => {
@@ -266,6 +289,7 @@ export function SelectionSample({
 	count,
 	label,
 	emptyReason,
+	loading,
 }: SelectionSampleProps) {
 	return (
 		<section className="flex flex-col rounded-lg border border-line bg-surface">
@@ -274,7 +298,9 @@ export function SelectionSample({
 			</h2>
 			{messages.length === 0 ? (
 				<p className="px-3 py-4 text-xs text-fg-muted">
-					{sampleEmptyCopy(emptyReason ?? "noMatch")}
+					{loading
+						? "Fetching the messages this covers…"
+						: sampleEmptyCopy(emptyReason ?? "noMatch")}
 				</p>
 			) : (
 				<>
@@ -316,6 +342,13 @@ export interface FooterNavProps {
 	nudged?: boolean;
 }
 
+/**
+ * Nothing disables (#477 1.7). A Continue with an answer still missing is dimmed
+ * and stays pressable — and stays pressable to assistive technology too, which
+ * `aria-disabled` would have taken away along with the reason. The reason is on
+ * the control the whole time it applies, through `aria-describedby`; pressing it
+ * is what brings the reason on screen.
+ */
 export function FooterNav({
 	backLabel = "Back",
 	onBack,
@@ -325,10 +358,15 @@ export function FooterNav({
 	blockedReason,
 	nudged,
 }: FooterNavProps) {
+	const reasonId = useId();
 	return (
 		<div className="space-y-2">
-			{nudged && blockedReason && (
-				<p role="status" className="px-1 text-2xs text-warning">
+			{blockedReason && (
+				<p
+					id={reasonId}
+					role={nudged ? "status" : undefined}
+					className={cn("px-1 text-2xs text-warning", !nudged && "sr-only")}
+				>
 					{blockedReason}
 				</p>
 			)}
@@ -346,7 +384,7 @@ export function FooterNav({
 					variant={nextVariant}
 					size="touch"
 					onClick={onNext}
-					aria-disabled={blockedReason ? true : undefined}
+					aria-describedby={blockedReason ? reasonId : undefined}
 					className={cn("flex-1", blockedReason && "opacity-55")}
 				>
 					{nextLabel}
@@ -366,6 +404,12 @@ export interface MatchStepProps {
 	 * of the deployment: the door stays pressable and dimmed.
 	 */
 	semanticUnavailable?: boolean;
+	/**
+	 * What the mail server said when the widen was asked to run and failed. A
+	 * failure is a reason the door cannot run, so it dims the door like any other
+	 * — with the server's own words under it rather than a generic line.
+	 */
+	semanticErrorDetail?: string;
 	/** The dimmed door was pressed and the senders were filled in instead. */
 	semanticFallbackTaken?: boolean;
 	onSemanticFallback: () => void;
@@ -377,6 +421,7 @@ export function MatchStepBody({
 	mode,
 	onModeChange,
 	semanticUnavailable,
+	semanticErrorDetail,
 	semanticFallbackTaken,
 	onSemanticFallback,
 	sample,
@@ -401,6 +446,11 @@ export function MatchStepBody({
 					title={matchDoorLabel("similar", selectedCount)}
 					description={matchDoorHint("similar")}
 				>
+					{semanticErrorDetail && (
+						<p role="status" className="px-1 text-2xs text-danger">
+							Couldn't find similar messages: {semanticErrorDetail}
+						</p>
+					)}
 					{semanticFallbackTaken && (
 						<p role="status" className="px-1 text-2xs text-fg-subtle">
 							Similar-mail matching is unavailable right now — matching on the
@@ -568,6 +618,12 @@ export interface FolderStepProps {
 		name: string,
 		signal?: AbortSignal,
 	) => Promise<MoveMailboxOption>;
+	/**
+	 * Why there is no folder list to choose from — a selection spanning accounts
+	 * has no single account whose folders these could be (#477 5.5). Said here
+	 * rather than left as an empty picker.
+	 */
+	restriction?: string;
 }
 
 export function FolderStepBody({
@@ -575,14 +631,21 @@ export function FolderStepBody({
 	mailboxId,
 	onSelect,
 	onCreateFolder,
+	restriction,
 }: FolderStepProps) {
 	const chosen = mailboxes.find((mailbox) => mailbox.id === mailboxId);
 	return (
 		<div className="flex min-h-0 flex-col gap-3">
-			<p className="px-1 text-xs text-fg-muted">
-				{chosen
-					? `Moving to ${chosen.label}.`
-					: "Search for a folder, or type a name that doesn't exist yet to make one."}
+			<p
+				className={cn(
+					"px-1 text-xs",
+					restriction ? "text-warning" : "text-fg-muted",
+				)}
+			>
+				{restriction ??
+					(chosen
+						? `Moving to ${chosen.label}.`
+						: "Search for a folder, or type a name that doesn't exist yet to make one.")}
 			</p>
 			<div className="overflow-hidden rounded-lg border border-line bg-surface">
 				<MoveMailboxPicker
@@ -611,16 +674,26 @@ export interface RuleStepProps {
 	draft: WizardDraft;
 	onScopeChange: (scope: RuleScope) => void;
 	onUntilChange: (until: string) => void;
+	/**
+	 * Why the two persisting scopes cannot be reached from here — a selection
+	 * spanning accounts has no single account to create the rule for (#477 5.5).
+	 * They stay pressable and say this; the one-off scope is unaffected.
+	 */
+	restriction?: string;
 }
 
 export function RuleStepBody({
 	draft,
 	onScopeChange,
 	onUntilChange,
+	restriction,
 }: RuleStepProps) {
 	const untilId = useId();
 	const { scope, until = "" } = draft;
 	const unreadable = unreadableDraftClauses(draft).length > 0;
+	const restricted = restriction && (
+		<p className="px-1 text-2xs text-warning">{restriction}</p>
+	);
 
 	return (
 		<div className="space-y-2">
@@ -638,16 +711,21 @@ export function RuleStepBody({
 			</ChoiceCard>
 			<ChoiceCard
 				selected={scope === "standing"}
+				unavailable={Boolean(restriction)}
 				onSelect={() => onScopeChange("standing")}
 				title={scopeLabel("standing")}
 				description="Saves a rule and applies it to new mail as it arrives, and to the mail already in your mailbox. You'll name it next."
-			/>
+			>
+				{restricted}
+			</ChoiceCard>
 			<ChoiceCard
 				selected={scope === "until"}
+				unavailable={Boolean(restriction)}
 				onSelect={() => onScopeChange("until")}
 				title={scopeLabel("until")}
 				description="The same rule, and it stops on a day you pick."
 			>
+				{restricted}
 				{scope === "until" && (
 					<div className="rounded-lg border border-line bg-surface p-2">
 						<FieldLabel htmlFor={untilId}>Stops on</FieldLabel>
@@ -753,7 +831,7 @@ export function ReviewStepBody({
 				<p className="text-sm text-fg">
 					<span className="font-semibold">{label}</span>{" "}
 					{matchPhrase(description)}
-					{verb === "move" && folder ? ` to ${folder}` : ""}
+					{folder ? ` to ${folder}` : ""}
 					{persists && (
 						<>
 							{" "}
@@ -818,10 +896,25 @@ export interface RunStepProps {
 	applied: number;
 	/** The messages the mail server rejected, named one by one. */
 	failures: readonly WizardMessage[];
+	/**
+	 * How many the mail server rejected, when that is more than can be named. A
+	 * server-side pass reports its own failure count without handing back the
+	 * messages behind it; defaults to the ones named here.
+	 */
+	failedCount?: number;
 	onRetry: () => void;
 	onDismiss: () => void;
 }
 
+const runOutcomeOf = (props: RunStepProps): RunOutcome => ({
+	state: props.state,
+	verb: props.verb,
+	scope: props.scope,
+	matched: props.matched,
+	applied: props.applied,
+	failed: props.failedCount ?? props.failures.length,
+});
+
 const runIcon = (tone: RunCopy["tone"]): ReactNode => {
 	if (tone === "progress") {
 		return <Loader2 className="size-10 animate-spin text-accent" />;
@@ -837,22 +930,10 @@ const runIcon = (tone: RunCopy["tone"]): ReactNode => {
 	);
 };
 
-export function RunStepBody({
-	state,
-	verb,
-	scope,
-	matched,
-	applied,
-	failures,
-}: RunStepProps) {
-	const copy = runCopy({
-		state,
-		verb,
-		scope,
-		matched,
-		applied,
-		failed: failures.length,
-	});
+export function RunStepBody(props: RunStepProps) {
+	const { matched, applied, failures } = props;
+	const outcome = runOutcomeOf(props);
+	const copy = runCopy(outcome);
 
 	return (
 		<div className="space-y-4 pt-2">
@@ -866,7 +947,7 @@ export function RunStepBody({
 				<ProgressBar
 					value={applied}
 					max={matched}
-					tone={failures.length > 0 ? "warning" : "success"}
+					tone={outcome.failed > 0 ? "warning" : "success"}
 				/>
 			)}
 
@@ -894,24 +975,9 @@ export function RunStepBody({
 	);
 }
 
-export function RunFooter({
-	state,
-	verb,
-	scope,
-	matched,
-	applied,
-	failures,
-	onRetry,
-	onDismiss,
-}: RunStepProps) {
-	const copy = runCopy({
-		state,
-		verb,
-		scope,
-		matched,
-		applied,
-		failed: failures.length,
-	});
+export function RunFooter(props: RunStepProps) {
+	const { onRetry, onDismiss } = props;
+	const copy = runCopy(runOutcomeOf(props));
 
 	if (copy.retryLabel === undefined) {
 		return (
@@ -1036,12 +1102,17 @@ export function SelectionWizard(props: SelectionWizardProps) {
 		if (step === "run") return <RunFooter {...stepProps(props.run, step)} />;
 		if (step === "review") {
 			const review = stepProps(props.review, step);
+			// The commit is a Continue like any other: a match that reaches nothing,
+			// or a count still moving, dims it and says so rather than committing a
+			// bulk action over nothing and reporting it as done.
 			return (
 				<FooterNav
 					onBack={onBack}
 					nextLabel={review.scope ? commitLabel(review.scope) : label}
 					nextVariant={destructive ? "danger" : "primary"}
 					onNext={onCommit}
+					blockedReason={props.blockedReason}
+					nudged={props.nudged}
 				/>
 			);
 		}
@@ -1058,8 +1129,7 @@ export function SelectionWizard(props: SelectionWizardProps) {
 
 	const title = (): string => {
 		if (step !== "run") return screen.title ?? label;
-		const run = stepProps(props.run, step);
-		return runCopy({ ...run, failed: run.failures.length }).screenTitle;
+		return runCopy(runOutcomeOf(stepProps(props.run, step))).screenTitle;
 	};
 
 	return (

package/src/index.ts

@@ -469,21 +469,12 @@ export {
 	type SegmentedOption,
 } from "./components/segmented-control.js";
 export { Select, type SelectProps } from "./components/select.js";
-export {
-	resolveSheetSnap,
-	SELECTION_SHEET_TEASER_HEIGHT,
-	SelectionSheet,
-	type SelectionSheetMode,
-	type SelectionSheetNotice,
-	type SelectionSheetNoticeAction,
-	type SelectionSheetProps,
-	type SheetSnapInput,
-} from "./components/selection-sheet.js";
 export {
 	SelectionTopBar,
 	type SelectionTopBarNotice,
 	type SelectionTopBarNoticeAction,
 	type SelectionTopBarProps,
+	type SelectionTopBarSelectAll,
 } from "./components/selection-top-bar.js";
 export {
 	FolderStepBody,
@@ -671,6 +662,8 @@ export {
 	backExits,
 	clauseSentence,
 	clauseWords,
+	crossAccountDestinationReason,
+	crossAccountRuleReason,
 	type MatchCount,
 	type MatchDescription,
 	type MatchMode,

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",
 		};