@remit/ui 0.0.13 → 0.0.15

package/src/components/selection-top-bar.render.test.ts

@@ -9,9 +9,15 @@ const handlers = {
 	onDelete: () => undefined,
 };
 
-/** SSR interleaves `<!-- -->` markers between interpolated text nodes; strip
- *  tags/comments so copy assertions match the rendered words. */
-const text = (html: string) => html.replace(/<[^>]*>/g, "");
+/** SSR interleaves `<!-- -->` markers between interpolated text nodes and
+ *  HTML-encodes entities; strip tags/comments and decode the handful of
+ *  entities copy assertions actually hit, so they match the rendered words. */
+const text = (html: string) =>
+	html
+		.replace(/<[^>]*>/g, "")
+		.replace(/&quot;/g, '"')
+		.replace(/&#x27;/g, "'")
+		.replace(/&amp;/g, "&");
 
 describe("SelectionTopBar", () => {
 	it("renders singular copy for one message", () => {
@@ -28,12 +34,41 @@ describe("SelectionTopBar", () => {
 		assert.match(text(html), /3 messages selected/);
 	});
 
+	it("applies thousands separators to the default count copy", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 3412 }),
+		);
+		assert.match(text(html), /3,412 messages selected/);
+	});
+
 	it("renders cancel and delete controls", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, { ...handlers, count: 2 }),
 		);
 		assert.match(html, /aria-label="Cancel selection"/);
-		assert.match(html, /aria-label="Delete selected messages"/);
+		assert.match(html, /aria-label="Move selected messages to Trash"/);
+	});
+
+	it("renders cancel, mark-read and delete at the 44px touch size", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				onMarkRead: () => undefined,
+			}),
+		);
+		const buttonCount = (html.match(/h-11 w-11/g) ?? []).length;
+		assert.equal(buttonCount, 3, "cancel, mark-read and delete are all 44px");
+	});
+
+	it("spaces delete at least 16px from its preceding sibling", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.match(
+			html,
+			/class="[^"]*\bml-4\b[^"]*"[^>]*aria-label="Move selected messages to Trash"/,
+		);
 	});
 
 	it("renders mark-read control when onMarkRead is provided", () => {
@@ -54,15 +89,27 @@ describe("SelectionTopBar", () => {
 		assert.doesNotMatch(html, /aria-label="Mark as read"/);
 	});
 
-	it("renders moveDisabledHint when provided", () => {
+	it("hides mark-read while busy instead of disabling it", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
 				count: 2,
-				moveDisabledHint: "Cross-account moves are not supported",
+				onMarkRead: () => undefined,
+				isBusy: true,
 			}),
 		);
-		assert.match(html, /Cross-account moves are not supported/);
+		assert.doesNotMatch(html, /aria-label="Mark as read"/);
+	});
+
+	it("hides delete while counting", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 0,
+				isCounting: true,
+			}),
+		);
+		assert.doesNotMatch(html, /aria-label="Move selected messages to Trash"/);
 	});
 
 	it("renders statusLabel in place of the count copy when provided", () => {
@@ -74,7 +121,7 @@ describe("SelectionTopBar", () => {
 			}),
 		);
 		assert.match(text(html), /Deleting 1,200 of 3,412…/);
-		assert.doesNotMatch(text(html), /3412 messages selected/);
+		assert.doesNotMatch(text(html), /3,412 messages selected/);
 	});
 
 	it("falls back to the count copy when statusLabel is absent", () => {
@@ -84,15 +131,14 @@ describe("SelectionTopBar", () => {
 		assert.match(text(html), /2 messages selected/);
 	});
 
-	it("renders failureHint when provided", () => {
+	it("marks the count/status line as a polite live region", () => {
 		const html = renderToString(
-			createElement(SelectionTopBar, {
-				...handlers,
-				count: 2,
-				failureHint: "340 failed to delete — retry?",
-			}),
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.match(
+			html,
+			/role="status"[^>]*aria-live="polite"[^>]*>2 messages selected/,
 		);
-		assert.match(html, /340 failed to delete — retry\?/);
 	});
 
 	it("omits the select-all control when selectAll is absent", () => {
@@ -141,7 +187,111 @@ describe("SelectionTopBar", () => {
 		);
 	});
 
-	it("omitting every new prop renders exactly the pre-existing bar", () => {
+	it("names the loaded scope by default once select-all is checked", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 47,
+				selectAll: {
+					checked: true,
+					indeterminate: false,
+					onChange: () => undefined,
+				},
+			}),
+		);
+		assert.match(text(html), /All 47 loaded selected/);
+		assert.doesNotMatch(text(html), /^47 messages selected/);
+	});
+
+	it("lets statusLabel override the scoped default for an escalated selection", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 3412,
+				selectAll: { checked: true, onChange: () => undefined },
+				statusLabel: 'All 3,412 matching "npm" selected',
+			}),
+		);
+		assert.match(text(html), /All 3,412 matching "npm" selected/);
+	});
+
+	it("gives the select-all checkbox a 44px hit area", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				selectAll: {
+					checked: false,
+					onChange: () => undefined,
+				},
+			}),
+		);
+		assert.match(html, /<label[^>]*size-11[^>]*>/);
+	});
+
+	it("renders the notice text and tone", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				notice: {
+					tone: "warning",
+					text: "Move only works within one account",
+				},
+			}),
+		);
+		assert.match(text(html), /Move only works within one account/);
+		assert.match(html, /role="status"/);
+	});
+
+	it("renders the notice's action as a real button, not prose", () => {
+		const onRetry = () => undefined;
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 340,
+				notice: {
+					tone: "danger",
+					text: "3,072 moved to Trash. 340 couldn't be deleted.",
+					action: { label: "Retry 340", onClick: onRetry },
+				},
+			}),
+		);
+		assert.match(html, /<button[^>]*>Retry 340<\/button>/);
+	});
+
+	it("omits the notice when absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		// Only the count/status line carries role="status" — no second one for
+		// an absent notice.
+		const statusRoles = (html.match(/role="status"/g) ?? []).length;
+		assert.equal(statusRoles, 1);
+	});
+
+	it("renders a determinate progress bar when progress is provided", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 3412,
+				statusLabel: "Deleting 1,200 of 3,412…",
+				isBusy: true,
+				progress: { value: 1200, max: 3412 },
+			}),
+		);
+		assert.match(html, /role="progressbar"/);
+		assert.match(html, /aria-valuenow="1200"/);
+	});
+
+	it("omits the progress bar when progress is absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.doesNotMatch(html, /role="progressbar"/);
+	});
+
+	it("omitting every new prop renders exactly the pre-existing bar shape", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, { ...handlers, count: 2 }),
 		);
@@ -151,6 +301,6 @@ describe("SelectionTopBar", () => {
 			"no select-all control",
 		);
 		assert.match(text(html), /2 messages selected/, "default count copy");
-		assert.doesNotMatch(html, /role="status"/, "no status line rendered");
+		assert.doesNotMatch(html, /role="progressbar"/, "no progress bar");
 	});
 });

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

@@ -10,8 +10,10 @@ const meta: Meta<typeof SelectionTopBar> = {
 		onMarkRead: () => undefined,
 		onDelete: () => undefined,
 	},
+	// Full viewport width — a fixed w-[390px] wrapper inside a 390px Storybook
+	// viewport clipped the delete button off-screen in every story here.
 	render: (args) => (
-		<div className="w-[390px] rounded-md border border-line">
+		<div className="w-full rounded-md border border-line">
 			<SelectionTopBar {...args} />
 		</div>
 	),
@@ -33,12 +35,14 @@ export const Busy: Story = { args: { count: 2, isBusy: true } };
 export const CrossAccountHint: Story = {
 	args: {
 		count: 4,
-		moveDisabledHint:
-			"Move only works within one account — clear selection or pick messages from a single account",
+		notice: {
+			tone: "warning",
+			text: "Move only works within one account — clear selection or pick messages from a single account",
+		},
 	},
 };
 
-/** Some but not all rows checked: the select-all control renders the
+/** Some but not all loaded rows checked: the select-all control renders the
  *  `Checkbox` tri-state dash, not the box or the tick. */
 export const SelectAll: Story = {
 	args: {
@@ -51,44 +55,130 @@ export const SelectAll: Story = {
 	},
 };
 
-/** Every row checked: the select-all control renders as a plain checked box. */
+/**
+ * Every loaded row checked. The count line names its scope by default —
+ * "All 47 loaded selected" — instead of a bare "47 messages selected" next
+ * to a fully ticked box, which reads as "everything" to anyone who has used
+ * a select-all checkbox before.
+ */
 export const AllSelected: Story = {
 	args: {
-		count: 12,
+		count: 47,
+		selectAll: {
+			checked: true,
+			indeterminate: false,
+			onChange: () => undefined,
+		},
+	},
+};
+
+/**
+ * The search has more matches than are loaded: an escalation notice offers a
+ * real button (not prose) naming the total. Tapping it is what flips the
+ * selection's identity from an id set to the search query (out of scope for
+ * this kit — the caller supplies the count once paging resolves it).
+ */
+export const EscalationAvailable: Story = {
+	args: {
+		count: 47,
 		selectAll: {
 			checked: true,
 			indeterminate: false,
 			onChange: () => undefined,
 		},
+		notice: {
+			tone: "info",
+			text: "",
+			action: {
+				label: 'Select all 3,412 matching "npm"',
+				onClick: () => undefined,
+			},
+		},
 	},
 };
 
-/** While a search result set is still paging, the exact count isn't known yet —
- *  `statusLabel` replaces the "{count} selected" text with a counting message. */
+/**
+ * Selection has been escalated to the search query: the count names the
+ * query's total, not a materialized id count, and the notice offers a way
+ * back to the bounded selection.
+ */
+export const Escalated: Story = {
+	args: {
+		count: 3412,
+		statusLabel: 'All 3,412 matching "npm" selected',
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Clear selection", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * While a search result set is still paging, the exact count isn't known
+ * yet — a running total instead of a static "Counting…", delete hidden
+ * (nothing to act on with an unknown total), and an explicit Stop rather
+ * than overloading the X (which still means "cancel selection").
+ */
 export const Counting: Story = {
 	args: {
 		count: 0,
-		statusLabel: "Counting matching messages…",
+		isCounting: 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 reports a running total via `statusLabel`, and
- *  the delete button shows its busy spinner (never disables). */
+/** Past ~10s the counting state says so, rather than looking stuck. */
+export const CountingLargeResultSet: Story = {
+	args: {
+		count: 0,
+		isCounting: true,
+		statusLabel: "Counting… 12,400 so far. This is a big result set.",
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Stop", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * A bulk delete in progress reports a running total via `statusLabel` and a
+ * determinate `ProgressBar`; the delete button shows its busy spinner (never
+ * disables) and mark-read is hidden — nothing here can act mid-delete.
+ */
 export const DeletingWithProgress: Story = {
 	args: {
 		count: 3412,
 		statusLabel: "Deleting 1,200 of 3,412…",
 		isBusy: true,
+		progress: { value: 1200, max: 3412 },
 	},
 };
 
-/** After a bulk delete finishes with some batches failed, `failureHint`
- *  surfaces the shortfall in danger tone — independent of `moveDisabledHint`,
- *  which is muted and cross-account-specific. */
+/**
+ * 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: 3412,
-		failureHint: "3,072 deleted, 340 failed to delete — retry?",
+		count: 340,
+		notice: {
+			tone: "danger",
+			text: "3,072 moved to Trash. 340 couldn't be deleted.",
+			action: { label: "Retry 340", onClick: () => undefined },
+		},
 	},
 };
 

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

@@ -1,34 +1,51 @@
 import { Loader2, MailOpen, Trash2, X } from "lucide-react";
 import type { ReactNode } from "react";
+import { Banner, type BannerTone } from "./banner.js";
 import { Button } from "./button.js";
 import { Checkbox } from "./checkbox.js";
+import { ProgressBar } from "./progress-bar.js";
+
+const formatCount = (n: number): string => n.toLocaleString();
+
+export interface SelectionTopBarNoticeAction {
+	label: string;
+	onClick: () => void;
+}
+
+export interface SelectionTopBarNotice {
+	tone: BannerTone;
+	text: string;
+	action?: SelectionTopBarNoticeAction;
+}
 
 export interface SelectionTopBarProps {
 	count: number;
 	onCancel: () => void;
 	onDelete: () => void;
-	/** Optional — hide the mark-read button when omitted. */
+	/** Optional — hide the mark-read button when omitted, or while `isBusy`. */
 	onMarkRead?: () => void;
 	/**
 	 * Slot for a move-to-folder trigger. Rendered between mark-read and delete.
 	 * Kept as a render prop so the caller controls API dependencies.
 	 */
 	moveSlot?: ReactNode;
-	/**
-	 * Cross-account hint surfaced below the action row. When set, Move is
-	 * expected to be suppressed by the caller (via moveSlot).
-	 */
-	moveDisabledHint?: string;
 	/**
 	 * True while a delete or move mutation is in flight. The delete button
-	 * shows a spinner; other actions no-op. Never disables controls.
+	 * shows a spinner and mark-read is hidden (never disabled — nothing here
+	 * disables, states that can't act are hidden instead).
 	 */
 	isBusy?: boolean;
+	/**
+	 * True while a search result set is still paging to find its total. Hides
+	 * delete — the count it would act on isn't known yet.
+	 */
+	isCounting?: boolean;
 	/**
 	 * Select-all control rendered between cancel and the count label. Presence
 	 * of this prop is what renders the checkbox — omit it for a bar with no
 	 * select-all affordance. `indeterminate` renders the some-selected tri-state
-	 * (`Checkbox`'s dash), `checked` is the all-selected state.
+	 * (`Checkbox`'s dash), `checked` is the all-selected state. The checkbox
+	 * itself stays visually small; a wrapping 44px hit area makes it tappable.
 	 */
 	selectAll?: {
 		checked: boolean;
@@ -36,18 +53,31 @@ export interface SelectionTopBarProps {
 		onChange: () => void;
 	};
 	/**
-	 * Overrides the "{count} messages selected" text. For states where the
-	 * count itself isn't the useful thing to show yet — "Counting…" while a
-	 * search result set is still paging, or "Deleting 1,200 of 3,412…" progress
-	 * during a bulk delete.
+	 * Overrides the default "{count} messages selected" text. Required once the
+	 * count's scope is anything other than "every loaded row is selected" —
+	 * an escalated selection ("All 3,412 matching \"npm\" selected"), a
+	 * counting state ("Counting… 1,900 so far"), or bulk-delete progress
+	 * ("Deleting 1,200 of 3,412…"). When `selectAll.checked` is true and this
+	 * is omitted, the default text names the loaded-scope itself ("All 47
+	 * loaded selected") rather than a bare count — a ticked select-all box
+	 * next to a bare number reads as "everything", which is only true for the
+	 * escalated case.
 	 */
 	statusLabel?: string;
 	/**
-	 * Danger-toned status line below the action row, for a partial failure
-	 * after a bulk operation (e.g. some batches failed to delete). Independent
-	 * of `moveDisabledHint` — a caller shows one or the other, never both.
+	 * Determinate progress for a bulk operation in flight (e.g. a chunked
+	 * delete). Renders a `ProgressBar` below the action row. Independent of
+	 * `notice` — a caller can show progress and a notice at the same time.
+	 */
+	progress?: { value: number; max: number; tone?: BannerTone };
+	/**
+	 * 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".
+	 * Replaces the old `moveDisabledHint`/`failureHint` pair: a caller shows
+	 * at most one notice at a time.
 	 */
-	failureHint?: string;
+	notice?: SelectionTopBarNotice;
 }
 
 /**
@@ -60,83 +90,106 @@ export function SelectionTopBar({
 	onMarkRead,
 	onDelete,
 	moveSlot,
-	moveDisabledHint,
 	isBusy = false,
+	isCounting = false,
 	selectAll,
 	statusLabel,
-	failureHint,
+	progress,
+	notice,
 }: SelectionTopBarProps) {
+	const defaultLabel = selectAll?.checked
+		? `All ${formatCount(count)} loaded selected`
+		: `${formatCount(count)} ${count === 1 ? "message" : "messages"} selected`;
+
 	return (
 		<header className="flex shrink-0 flex-col border-b border-line bg-surface-sunken">
 			<div className="flex h-pane-header items-center gap-2 px-row-inset">
 				<Button
 					variant="ghost"
-					size="sm"
+					size="touch"
 					icon={<X className="size-4" />}
 					onClick={onCancel}
 					aria-label="Cancel selection"
-					className="-ml-1 shrink-0"
+					className="-ml-2 shrink-0"
 				/>
 				{selectAll && (
-					<Checkbox
-						aria-label="Select all"
-						checked={selectAll.checked}
-						indeterminate={selectAll.indeterminate}
-						onChange={selectAll.onChange}
-						className="shrink-0"
-					/>
+					// biome-ignore lint/a11y/noLabelWithoutControl: label wraps Checkbox's own input, giving the 20px control a real 44px hit area
+					<label className="-ml-1.5 flex size-11 shrink-0 cursor-pointer items-center justify-center">
+						<Checkbox
+							aria-label="Select all"
+							checked={selectAll.checked}
+							indeterminate={selectAll.indeterminate}
+							onChange={selectAll.onChange}
+						/>
+					</label>
 				)}
-				<span className="min-w-0 flex-1 truncate text-sm font-medium text-fg">
-					{statusLabel ??
-						`${count} ${count === 1 ? "message" : "messages"} selected`}
+				<span
+					className="min-w-0 flex-1 truncate text-sm font-medium text-fg"
+					role="status"
+					aria-live="polite"
+				>
+					{statusLabel ?? defaultLabel}
 				</span>
-				{onMarkRead && (
+				{onMarkRead && !isBusy && (
 					<Button
 						variant="ghost"
-						size="sm"
+						size="touch"
 						icon={<MailOpen className="size-4" />}
-						onClick={isBusy ? undefined : onMarkRead}
+						onClick={onMarkRead}
 						aria-label="Mark as read"
-						aria-busy={isBusy || undefined}
 						className="shrink-0"
 					/>
 				)}
 				{moveSlot}
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={
-						isBusy ? (
-							<Loader2 className="size-4 animate-spin" />
-						) : (
-							<Trash2 className="size-4 text-danger" />
-						)
-					}
-					onClick={isBusy ? undefined : onDelete}
-					aria-label="Delete selected messages"
-					aria-busy={isBusy || undefined}
-					className="shrink-0"
-				/>
+				{!isCounting && (
+					<Button
+						variant="ghost"
+						size="touch"
+						icon={
+							isBusy ? (
+								<Loader2 className="size-4 animate-spin" />
+							) : (
+								<Trash2 className="size-4 text-danger" />
+							)
+						}
+						onClick={isBusy ? undefined : onDelete}
+						aria-label="Move selected messages to Trash"
+						aria-busy={isBusy || undefined}
+						className="ml-4 shrink-0"
+					/>
+				)}
 			</div>
-			{moveDisabledHint && (
-				// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
-				<p
-					className="px-row-inset pb-2 text-xs text-fg-muted"
-					role="status"
-					aria-live="polite"
-				>
-					{moveDisabledHint}
-				</p>
+			{progress && (
+				<div className="px-row-inset pb-2">
+					<ProgressBar
+						value={progress.value}
+						max={progress.max}
+						tone={progress.tone}
+					/>
+				</div>
 			)}
-			{failureHint && (
-				// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
-				<p
-					className="px-row-inset pb-2 text-xs text-danger"
+			{notice && (
+				<Banner
+					tone={notice.tone}
+					variant="soft"
 					role="status"
 					aria-live="polite"
+					className="mx-row-inset mb-2"
 				>
-					{failureHint}
-				</p>
+					<div className="flex items-center justify-between gap-2">
+						{notice.text && <span>{notice.text}</span>}
+						{notice.action && (
+							<Button
+								variant="ghost"
+								size="md"
+								onClick={notice.action.onClick}
+								className="-my-1 min-h-11 shrink-0"
+							>
+								{notice.action.label}
+							</Button>
+						)}
+					</div>
+				</Banner>
 			)}
 		</header>
 	);