@remit/ui 0.0.60 → 0.0.62

package/src/components/selection-wizard.tsx

@@ -28,6 +28,7 @@ import {
 	matchPhrase,
 	matchSummary,
 	type RunCopy,
+	type RunOutcome,
 	type RunState,
 	runCopy,
 	type SampleEmptyReason,
@@ -41,6 +42,7 @@ import {
 	type WizardDraft,
 } from "../lib/wizard-steps.js";
 import { Badge } from "./badge.js";
+import { BlockedReason } from "./blocked-reason.js";
 import { Button } from "./button.js";
 import { FieldLabel } from "./field-label.js";
 import {
@@ -133,7 +135,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 +201,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 +215,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 +246,7 @@ export function ChoiceCard({
 					</span>
 				</span>
 			</button>
-			{children}
+			{children && <div id={hintId}>{children}</div>}
 		</div>
 	);
 }
@@ -244,6 +262,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 => {
@@ -256,6 +280,25 @@ const sampleFooter = (count: MatchCount, shown: number): string => {
 	return previewCountSummary(count);
 };
 
+/**
+ * What an empty sample says. A count that could not be taken says so; only a
+ * count that came back empty may say nothing matches (#477 3.5).
+ *
+ * A body-text clause is the case that makes the difference load-bearing: the
+ * vector-free matcher refuses to evaluate it, so there is no count and no rows,
+ * and "nothing matches this yet" is not merely unexplained but wrong — the rule
+ * matches, once a saved rule is what runs it.
+ */
+const sampleEmptyLine = (
+	count: MatchCount,
+	emptyReason: SampleEmptyReason | undefined,
+	loading: boolean | undefined,
+): string => {
+	if (loading) return "Fetching the messages this covers…";
+	if (count.status === "error") return count.reason;
+	return sampleEmptyCopy(emptyReason ?? "noMatch");
+};
+
 /**
  * The members of the match, closing every screen that names one. A named match
  * with no members shown is an unseen bulk action, so the rows scroll in their own
@@ -266,6 +309,7 @@ export function SelectionSample({
 	count,
 	label,
 	emptyReason,
+	loading,
 }: SelectionSampleProps) {
 	return (
 		<section className="flex flex-col rounded-lg border border-line bg-surface">
@@ -274,7 +318,7 @@ export function SelectionSample({
 			</h2>
 			{messages.length === 0 ? (
 				<p className="px-3 py-4 text-xs text-fg-muted">
-					{sampleEmptyCopy(emptyReason ?? "noMatch")}
+					{sampleEmptyLine(count, emptyReason, loading)}
 				</p>
 			) : (
 				<>
@@ -316,6 +360,12 @@ 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. `BlockedReason`
+ * carries the two ways that reason reaches the user.
+ */
 export function FooterNav({
 	backLabel = "Back",
 	onBack,
@@ -325,12 +375,16 @@ 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>
+			{blockedReason && (
+				<BlockedReason
+					id={reasonId}
+					reason={blockedReason}
+					nudged={nudged}
+					className="px-1 text-2xs text-warning"
+				/>
 			)}
 			<div className="flex items-center gap-3">
 				<Button
@@ -346,7 +400,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 +420,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 +437,7 @@ export function MatchStepBody({
 	mode,
 	onModeChange,
 	semanticUnavailable,
+	semanticErrorDetail,
 	semanticFallbackTaken,
 	onSemanticFallback,
 	sample,
@@ -401,6 +462,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 +634,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 +647,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 +690,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 +727,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 +847,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 +912,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 +946,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 +963,7 @@ export function RunStepBody({
 				<ProgressBar
 					value={applied}
 					max={matched}
-					tone={failures.length > 0 ? "warning" : "success"}
+					tone={outcome.failed > 0 ? "warning" : "success"}
 				/>
 			)}
 
@@ -894,24 +991,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 +1118,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 +1145,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

@@ -67,6 +67,10 @@ export {
 	type BannerTone,
 	type BannerVariant,
 } from "./components/banner.js";
+export {
+	BlockedReason,
+	type BlockedReasonProps,
+} from "./components/blocked-reason.js";
 export {
 	BottomSheet,
 	type BottomSheetProps,
@@ -174,6 +178,7 @@ export {
 	type RuleWiden,
 	ruleBlockedCopy,
 	scopeLabel,
+	UNCOUNTABLE_PREDICATE_REASON,
 	unreadableBodyClauses,
 	widenChipLabel,
 } from "./components/filter-rule.js";
@@ -469,16 +474,6 @@ 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,
@@ -638,11 +633,11 @@ export {
 } from "./lib/roving-focus.js";
 export { type RuleNameParts, suggestRuleName } from "./lib/rule-name.js";
 export {
-	buildSearchRule,
 	type DroppedFacet,
 	type DroppedFacetType,
 	isConvertible,
 	type SearchConversion,
+	searchConversionNotice,
 } from "./lib/search-rule.js";
 export {
 	collapsibleDomain,
@@ -672,6 +667,8 @@ export {
 	backExits,
 	clauseSentence,
 	clauseWords,
+	crossAccountDestinationReason,
+	crossAccountRuleReason,
 	type MatchCount,
 	type MatchDescription,
 	type MatchMode,

package/src/lib/search-rule.test.ts

@@ -1,9 +1,9 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import {
-	buildSearchRule,
 	isConvertible,
 	type SearchConversion,
+	searchConversionNotice,
 } from "./search-rule.js";
 
 const conversion = (
@@ -43,31 +43,32 @@ describe("isConvertible", () => {
 	});
 });
 
-describe("buildSearchRule", () => {
-	it("builds a standing rule with stable clause ids, no widen, empty name", () => {
-		const rule = buildSearchRule(
+describe("searchConversionNotice", () => {
+	it("names the folder the search was scoped to and every facet dropped", () => {
+		const notice = searchConversionNotice(
 			conversion({
-				clauses: [
-					{ field: "From", value: "a@b.com" },
-					{ field: "HasWords", value: "nightly" },
-				],
+				clauses: [{ field: "HasWords", value: "npm" }],
+				keptTerms: true,
+				scopedOut: { mailboxId: "mbx-archive", label: "Archive" },
+				droppedFacets: [{ type: "isUnread", label: "Unread" }],
+				droppedSemantic: true,
 			}),
 		);
-		assert.equal(rule.scope, "standing");
-		assert.equal(rule.widen, undefined);
-		assert.equal(rule.name, "");
-		assert.deepEqual(
-			rule.clauses.map((clause) => clause.id),
-			["search-0", "search-1"],
-		);
+		assert.deepEqual(notice, {
+			scopedOutFolder: "Archive",
+			droppedFacets: ["Unread"],
+			droppedSemantic: true,
+		});
 	});
 
-	it("honors an explicit scope and move target", () => {
-		const rule = buildSearchRule(
-			conversion({ clauses: [{ field: "HasWords", value: "nightly" }] }),
-			{ scope: "once", moveMailboxId: "mbx-archive" },
+	it("states nothing for a conversion that carried everything", () => {
+		const notice = searchConversionNotice(
+			conversion({ clauses: [{ field: "From", value: "a@b.com" }] }),
 		);
-		assert.equal(rule.scope, "once");
-		assert.equal(rule.moveMailboxId, "mbx-archive");
+		assert.deepEqual(notice, {
+			scopedOutFolder: undefined,
+			droppedFacets: [],
+			droppedSemantic: false,
+		});
 	});
 });

package/src/lib/search-rule.ts

@@ -1,16 +1,12 @@
 /**
- * What a search converts to, and the rule built from it (RFC 038 D5). The shape
- * carries the clauses alongside everything the search held that a filter cannot,
- * so a conversion can never drop a facet without saying so; `search-conversion.ts`
- * beside it owns the copy that states it.
+ * What a search converts to (RFC 038 D5). The shape carries the clauses
+ * alongside everything the search held that a filter cannot, so a conversion can
+ * never drop a facet without saying so; `search-conversion.ts` beside it owns
+ * the copy that states it.
  */
 
-import type {
-	ClauseField,
-	FilterRule,
-	MatchOperator,
-	RuleScope,
-} from "../components/filter-rule.js";
+import type { ClauseField, MatchOperator } from "../components/filter-rule.js";
+import type { SearchConversionNotice } from "../components/search-conversion.js";
 
 /**
  * A search facet a filter has no clause for. Attachment, read state, starred,
@@ -68,29 +64,15 @@ export interface SearchConversion {
 export const isConvertible = (conversion: SearchConversion): boolean =>
 	conversion.clauses.length > 0;
 
-interface BuildRuleOptions {
-	scope?: RuleScope;
-	moveMailboxId?: string;
-}
-
 /**
- * The rule the editor opens on, from a conversion. A search-derived rule defaults
- * to a standing filter — "make this a filter" is a request to keep applying it —
- * and the editor lets the user drop it back to a one-time apply. It carries no
- * widen: a free-text query has no message anchor, so the semantic chip is not
- * offered on this surface (its loss is stated in the conversion notice instead).
+ * The conversion as the notice reads it. One mapping, beside both shapes, so
+ * every surface that opens on a converted search states the same losses in the
+ * same words.
  */
-export const buildSearchRule = (
+export const searchConversionNotice = (
 	conversion: SearchConversion,
-	{ scope = "standing", moveMailboxId }: BuildRuleOptions = {},
-): FilterRule => ({
-	clauses: conversion.clauses.map((clause, index) => ({
-		id: `search-${index}`,
-		field: clause.field,
-		value: clause.value,
-	})),
-	matchOperator: conversion.matchOperator,
-	moveMailboxId,
-	scope,
-	name: "",
+): SearchConversionNotice => ({
+	scopedOutFolder: conversion.scopedOut?.label,
+	droppedFacets: conversion.droppedFacets.map((facet) => facet.label),
+	droppedSemantic: conversion.droppedSemantic,
 });