@remit/ui 0.0.61 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "type": "module",
   "files": [
     "src"

package/src/components/blocked-reason.render.test.ts

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { BlockedReason } from "./blocked-reason.js";
+
+const REASON = "Pick a destination first.";
+
+/**
+ * Nothing disables (#477 1.7), so a dimmed control has to say what it is missing
+ * two ways: a description that is there for as long as the block is, and an
+ * announcement that happens when the control is pressed.
+ *
+ * They are separate elements because a live region announces what is written
+ * into it. One element that already holds the reason and gains `role="status"`
+ * on the press has nothing written into it, so nothing is announced — which is
+ * how a wizard comes to have a visual-only answer to "why can't I continue".
+ */
+describe("BlockedReason", () => {
+	it("describes the control before anything is pressed, silently", () => {
+		const html = renderToString(
+			createElement(BlockedReason, { id: "reason", reason: REASON }),
+		);
+		assert.match(html, /<p id="reason"[^>]*sr-only/);
+		assert.match(html, new RegExp(REASON));
+		// The live region is mounted and empty: there is nothing to announce yet.
+		assert.match(html, /role="status"[^>]*><\/span>/);
+	});
+
+	it("shows and announces the same reason once it has been pressed", () => {
+		const html = renderToString(
+			createElement(BlockedReason, {
+				id: "reason",
+				reason: REASON,
+				nudged: true,
+				className: "text-warning",
+			}),
+		);
+		assert.doesNotMatch(html, /role="status"[^>]*><\/span>/);
+		assert.match(html, new RegExp(`role="status"[^>]*>${REASON}`));
+		assert.doesNotMatch(html, /<p id="reason"[^>]*sr-only/);
+		assert.match(html, /text-warning/);
+	});
+});

package/src/components/blocked-reason.tsx

@@ -0,0 +1,41 @@
+import { cn } from "../lib/cn.js";
+
+export interface BlockedReasonProps {
+	/** What `aria-describedby` on the dimmed control points at. */
+	id: string;
+	reason: string;
+	/** The control was pressed while blocked, so the reason comes on screen. */
+	nudged?: boolean;
+	className?: string;
+}
+
+/**
+ * What a dimmed control is still missing (#477 1.7). Nothing disables, so the
+ * reason has to reach the user two ways, and they are not the same element.
+ *
+ * The description carries the reason for as long as it applies, so anything
+ * reading the control through the accessibility tree finds it without pressing
+ * anything; the press is what unhides it.
+ *
+ * The announcement is a live region that is mounted with the block and empty
+ * until the press, because a live region announces what is written into it and
+ * not what it was already holding. Marking the description live at the moment
+ * it becomes visible announces nothing.
+ */
+export function BlockedReason({
+	id,
+	reason,
+	nudged,
+	className,
+}: BlockedReasonProps) {
+	return (
+		<>
+			<p id={id} className={cn(className, !nudged && "sr-only")}>
+				{reason}
+			</p>
+			<span role="status" aria-live="polite" className="sr-only">
+				{nudged ? reason : ""}
+			</span>
+		</>
+	);
+}

package/src/components/filter-rule.ts

@@ -261,6 +261,16 @@ export const ruleBlockedCopy = {
 	recounting: "Recounting matches — save once the count settles.",
 } as const;
 
+/**
+ * What the count region says when there is no count to be had. The vector-free
+ * matcher will not read message bodies, so a `HasWords` clause cannot be counted
+ * before it is saved — which is a different answer from a count of zero, and
+ * the only one that keeps an empty sample from reading as "this matches
+ * nothing".
+ */
+export const UNCOUNTABLE_PREDICATE_REASON =
+	"Can't count matches — “has the words” reads message bodies, which only a saved rule does.";
+
 /**
  * Why the count on screen is not yet the count that will be applied, or
  * `undefined` once it has settled. This is what makes RFC 038's

package/src/components/message-list-pane.tsx

@@ -1,6 +1,6 @@
 import { Menu } from "lucide-react";
 import type { ReactNode } from "react";
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
 import type { AppShellProps, TouchSeed } from "./app-shell-types.js";
 import { BriefSections } from "./brief-sections.js";
@@ -125,7 +125,27 @@ export function MessageListPane({
 			? new Set(seededRows.slice(0, 2).map((t) => t.id))
 			: new Set(),
 	);
+	// What the fallback bar's verbs have done to the mock rows. A demo bar whose
+	// Trash only closes the bar is a Trash that deletes nothing, which is the one
+	// thing a selection bar must never be — so these verbs act on the rows the
+	// mock owns, the same way `refresh` below fakes a refresh visibly.
+	const [trashedIds, setTrashedIds] = useState<ReadonlySet<string>>(new Set());
+	const [readIds, setReadIds] = useState<ReadonlySet<string>>(new Set());
 	const [refreshing, setRefreshing] = useState(false);
+	const touchSections = useMemo(
+		() =>
+			trashedIds.size === 0 && readIds.size === 0
+				? sections
+				: sections.map((section) => ({
+						...section,
+						threads: section.threads
+							.filter((thread) => !trashedIds.has(thread.id))
+							.map((thread) =>
+								readIds.has(thread.id) ? { ...thread, isRead: true } : thread,
+							),
+					})),
+		[sections, trashedIds, readIds],
+	);
 	const initialPeek: SwipePeek | undefined =
 		initialTouchState === "peek-trailing"
 			? "trailing"
@@ -150,6 +170,14 @@ export function MessageListPane({
 		setSelectionMode(false);
 		setCheckedIds(new Set());
 	};
+	const trashChecked = () => {
+		setTrashedIds((prev) => new Set([...prev, ...checkedIds]));
+		cancelSelection();
+	};
+	const markCheckedRead = () => {
+		setReadIds((prev) => new Set([...prev, ...checkedIds]));
+		cancelSelection();
+	};
 	const refresh = () => {
 		setRefreshing(true);
 		setTimeout(() => setRefreshing(false), 1400);
@@ -168,8 +196,8 @@ export function MessageListPane({
 						title={listTitle}
 						count={checkedIds.size}
 						onCancel={cancelSelection}
-						onMarkRead={cancelSelection}
-						onDelete={cancelSelection}
+						onMarkRead={markCheckedRead}
+						onDelete={trashChecked}
 					/>
 				) : hideHeader ? null : (
 					<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
@@ -230,7 +258,7 @@ export function MessageListPane({
 				listBody
 			) : touchTriage ? (
 				<TouchListBody
-					sections={sections}
+					sections={touchSections}
 					selectedThreadId={selectedThreadId}
 					selectionMode={selectionMode}
 					checkedIds={checkedIds}

package/src/components/mobile-search-view.stories.tsx

@@ -186,7 +186,7 @@ function Harness({
 	sections,
 	preset,
 	scope,
-	makeFilterDisabledReason,
+	makeFilterBlockedReason,
 	suggestions = [],
 }: {
 	initialValue?: string;
@@ -196,7 +196,7 @@ function Harness({
 	preset: Preset;
 	scope?: SearchScope;
 	/** Renders the conversion inert with a reason; it is offered either way. */
-	makeFilterDisabledReason?: string;
+	makeFilterBlockedReason?: string;
 	/** Completions for the term being typed. */
 	suggestions?: Suggestion[];
 }) {
@@ -282,7 +282,7 @@ function Harness({
 			scope={scope}
 			makeFilter={{
 				onClick: () => undefined,
-				disabledReason: makeFilterDisabledReason,
+				blockedReason: makeFilterBlockedReason,
 			}}
 			suggest={{
 				comboboxProps: suggest.comboboxProps,
@@ -343,9 +343,9 @@ export const ScopedSearch: Story = {
 };
 
 /**
- * A query with nothing a filter could match on: the conversion is offered inert
- * with the reason, rather than withheld and leaving the row to appear and vanish
- * as the user types.
+ * A query with nothing a filter could match on: the conversion stays offered and
+ * dimmed, rather than withheld and leaving the row to appear and vanish as the
+ * user types. Pressing it puts the reason on screen.
  */
 export const NothingToConvert: Story = {
 	render: () => (
@@ -353,7 +353,7 @@ export const NothingToConvert: Story = {
 			initialValue="has:attachment"
 			sections={resultSections}
 			preset="inbox"
-			makeFilterDisabledReason="Add a sender or words to filter on"
+			makeFilterBlockedReason="Add a sender or words to filter on"
 		/>
 	),
 };

package/src/components/search-results.render.test.ts

@@ -99,16 +99,17 @@ describe("SearchResults", () => {
 		assert.doesNotMatch(html, /disabled=""/);
 	});
 
-	it("disables the filter offer with its reason when nothing converts", () => {
+	it("keeps the filter offer pressable when nothing converts, carrying its reason", () => {
 		const html = renderToString(
 			createElement(SearchResults, {
 				value: "has:attachment",
 				sections: [{ id: "results", label: "Results", results: [] }],
-				makeFilter: { onClick: noop, disabledReason: "Add a sender or words" },
+				makeFilter: { onClick: noop, blockedReason: "Add a sender or words" },
 			}),
 		);
 		assert.match(html, /Make this a filter/);
-		assert.match(html, /disabled/);
+		assert.doesNotMatch(html, /disabled/);
+		assert.match(html, /aria-describedby/);
 		assert.match(html, /Add a sender or words/);
 	});
 

package/src/components/search-results.stories.tsx

@@ -190,15 +190,18 @@ export const WithMakeFilter: Story = {
 	),
 };
 
-/** The filter offer disabled — a search of only non-clause facets has nothing to convert. */
-export const MakeFilterDisabled: Story = {
+/**
+ * The filter offer dimmed — a search of only non-clause facets has nothing to
+ * convert. It stays pressable, and pressing it puts the reason on screen.
+ */
+export const MakeFilterBlocked: Story = {
 	render: () => (
 		<Harness
 			value="has:attachment"
 			sections={resultSections}
 			makeFilter={{
 				onClick: () => {},
-				disabledReason: "Add a sender or words to filter on",
+				blockedReason: "Add a sender or words to filter on",
 			}}
 		/>
 	),

package/src/components/search-results.tsx

@@ -1,6 +1,7 @@
 import { ChevronDown, Clock, Filter } from "lucide-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { BlockedReason } from "./blocked-reason.js";
 import type { FolderRole } from "./folder-role.js";
 import { type SearchResult, SearchResultRow } from "./search-result-row.js";
 import { SearchTokenChips } from "./search-token-chip.js";
@@ -86,21 +87,22 @@ export interface SearchResultsProps {
 	scope?: SearchScope;
 	/**
 	 * "Make this a filter" (RFC 038 D5) — offered above the results while a query
-	 * is active, converting the search to a pre-filled rule. Omit to drop the
-	 * affordance; a `disabledReason` renders it inert with the reason (a search of
-	 * only non-clause facets has nothing to convert).
+	 * is active, opening the selection wizard on clauses derived from it. Omit to
+	 * drop the affordance; a `blockedReason` dims it and states what is missing (a
+	 * search of only non-clause facets has nothing to convert).
 	 */
 	makeFilter?: MakeFilterActionProps;
 }
 
 export interface MakeFilterActionProps {
 	onClick: () => void;
-	/** Renders the action inert and states why, e.g. nothing in the query converts. */
-	disabledReason?: string;
+	/** What the query is still missing. Dims the action; never disables it. */
+	blockedReason?: string;
 }
 
 /**
- * "Make this a filter" — the conversion entry offered while a search is active.
+ * "Make this a filter" — the wizard's second entry, offered while a search is
+ * active.
  *
  * A standalone row rather than a part of the results body, because a search is
  * shown in more than one way: the read-only `SearchResults` panel, and a list
@@ -108,34 +110,47 @@ export interface MakeFilterActionProps {
  * not to either rendering, so the caller mounts it above whichever body is up and
  * it stays put when the body swaps. `SearchResults` renders it inline as a
  * convenience for callers that show only the panel.
+ *
+ * Nothing disables (#477 1.7). A query with nothing to convert dims the action
+ * and leaves it pressable — pressing it is what brings the reason on screen,
+ * which `disabled` would take away along with the control itself.
  */
 export function MakeFilterAction({
 	onClick,
-	disabledReason,
+	blockedReason,
 }: MakeFilterActionProps) {
-	const disabled = disabledReason !== undefined;
+	const reasonId = useId();
+	const [nudged, setNudged] = useState(false);
 	return (
 		<div className="border-b border-line px-row-inset py-1.5">
 			<button
 				type="button"
-				onClick={onClick}
-				disabled={disabled}
-				title={disabledReason}
+				onClick={() => {
+					if (blockedReason) {
+						setNudged(true);
+						return;
+					}
+					onClick();
+				}}
+				aria-describedby={blockedReason ? reasonId : undefined}
 				className={cn(
 					"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs font-medium transition-colors",
-					disabled
-						? "cursor-not-allowed text-fg-subtle"
+					blockedReason
+						? "text-fg-subtle opacity-55"
 						: "text-accent hover:bg-surface-sunken",
 				)}
 			>
 				<Filter className="size-3.5 shrink-0" aria-hidden="true" />
 				<span>Make this a filter</span>
-				{disabled && (
-					<span className="ml-auto truncate text-2xs font-normal text-fg-subtle">
-						{disabledReason}
-					</span>
-				)}
 			</button>
+			{blockedReason && (
+				<BlockedReason
+					id={reasonId}
+					reason={blockedReason}
+					nudged={nudged}
+					className="px-2 pt-1 text-2xs text-warning"
+				/>
+			)}
 		</div>
 	);
 }
@@ -286,12 +301,7 @@ export function SearchResults({
 	const chips = tokens && tokens.length > 0 && (
 		<SearchTokenChips tokens={tokens} />
 	);
-	const filterAction = makeFilter && (
-		<MakeFilterAction
-			onClick={makeFilter.onClick}
-			disabledReason={makeFilter.disabledReason}
-		/>
-	);
+	const filterAction = makeFilter && <MakeFilterAction {...makeFilter} />;
 
 	if (loading) {
 		return (

package/src/components/selection-top-bar.stories.tsx

@@ -236,12 +236,10 @@ export const EscalationAvailable: Story = {
  * query's total, not a materialized id count, and the notice offers a way
  * back to the bounded selection.
  *
- * Every verb the bar carries stays available here (#114). An escalated
- * selection is a predicate rather than an id list, so the web-client runs
- * move and mark-read by paging that predicate the same way delete does —
- * from the bar's side nothing changes, which is the point: an escalated
- * selection that could only be deleted forced anyone wanting to file those
- * messages back to the loaded page.
+ * Every verb the bar carries stays available here (#114), and every one of
+ * them opens the wizard, which names the predicate and states its count before
+ * anything runs (#508). From the bar's side nothing changes, which is the
+ * point: an escalated selection is a selection.
  */
 export const Escalated: Story = {
 	args: {
@@ -306,22 +304,6 @@ export const DeletingWithProgress: Story = {
 	},
 };
 
-/**
- * After a bulk delete finishes with some batches failed: the count reflects
- * only what's still selected — the failures — not the original selection,
- * and Retry is a real button naming how many.
- */
-export const PartialFailure: Story = {
-	args: {
-		count: 340,
-		notice: {
-			tone: "danger",
-			text: "3,072 moved to Trash. 340 couldn't be deleted.",
-			action: { label: "Retry 340", onClick: () => undefined },
-		},
-	},
-};
-
 /**
  * A move over an escalated selection: same chunked run as a delete, worded for
  * the action that is running and toned as ordinary progress rather than
@@ -345,18 +327,3 @@ export const MarkingReadWithProgress: Story = {
 		progress: { value: 1200, max: 3412, tone: "info" },
 	},
 };
-
-/**
- * Partial failure of a move rather than a delete: the notice names the action
- * that ran, and Retry resends that same action against what is still selected.
- */
-export const PartialFailureMove: Story = {
-	args: {
-		count: 340,
-		notice: {
-			tone: "danger",
-			text: "3,072 moved. 340 couldn't be moved.",
-			action: { label: "Retry 340", onClick: () => undefined },
-		},
-	},
-};

package/src/components/selection-top-bar.tsx

@@ -45,12 +45,6 @@ export interface SelectionTopBarProps {
 	 * a selection spanning accounts, or a surface with no owning mailbox.
 	 */
 	onMove?: () => void;
-	/**
-	 * The Move verb for a selection the wizard cannot take: an escalated
-	 * predicate, which no bounded list of ids stands in for, so it keeps the
-	 * caller's own folder picker. Rendered only in `onMove`'s place.
-	 */
-	moveSlot?: ReactNode;
 	/** Opens Organize for the selection. Omitted where organize cannot be
 	 *  scoped to one account. */
 	onOrganize?: () => void;
@@ -124,7 +118,7 @@ export interface SelectionTopBarProps {
 	/**
 	 * Toned status line below the action row, sometimes carrying an action
 	 * button — a cross-account move restriction, a "Select all N matching…"
-	 * escalation, a "Stop" during counting, or a partial-failure "Retry N".
+	 * escalation, or a "Stop" during counting.
 	 */
 	notice?: SelectionTopBarNotice;
 }
@@ -172,7 +166,6 @@ export function SelectionTopBar({
 	onCancel,
 	onDelete,
 	onMove,
-	moveSlot,
 	onOrganize,
 	onJunk,
 	onMarkRead,
@@ -278,19 +271,16 @@ export function SelectionTopBar({
 							aria-busy={isBusy || undefined}
 							className="shrink-0"
 						/>
-						{!isBusy &&
-							(onMove ? (
-								<Button
-									variant="ghost"
-									size="touch"
-									icon={<FolderInput className="size-5" />}
-									onClick={onMove}
-									aria-label="Move selected messages"
-									className="shrink-0"
-								/>
-							) : (
-								moveSlot
-							))}
+						{!isBusy && onMove && (
+							<Button
+								variant="ghost"
+								size="touch"
+								icon={<FolderInput className="size-5" />}
+								onClick={onMove}
+								aria-label="Move selected messages"
+								className="shrink-0"
+							/>
+						)}
 						{!isBusy && onOrganize && (
 							<Button
 								variant="ghost"