@remit/ui 0.0.12 → 0.0.14

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

@@ -64,4 +64,93 @@ describe("SelectionTopBar", () => {
 		);
 		assert.match(html, /Cross-account moves are not supported/);
 	});
+
+	it("renders statusLabel in place of the count copy when provided", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 3412,
+				statusLabel: "Deleting 1,200 of 3,412…",
+			}),
+		);
+		assert.match(text(html), /Deleting 1,200 of 3,412…/);
+		assert.doesNotMatch(text(html), /3412 messages selected/);
+	});
+
+	it("falls back to the count copy when statusLabel is absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.match(text(html), /2 messages selected/);
+	});
+
+	it("renders failureHint when provided", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				failureHint: "340 failed to delete — retry?",
+			}),
+		);
+		assert.match(html, /340 failed to delete — retry\?/);
+	});
+
+	it("omits the select-all control when selectAll is absent", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.doesNotMatch(html, /aria-label="Select all"/);
+	});
+
+	it("renders the select-all control, unchecked, in the some-selected state", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				selectAll: {
+					checked: false,
+					indeterminate: true,
+					onChange: () => undefined,
+				},
+			}),
+		);
+		assert.match(html, /aria-label="Select all"/);
+		assert.doesNotMatch(
+			html,
+			/aria-label="Select all"[^>]*checked=""/,
+			"some-selected is not the checked state",
+		);
+	});
+
+	it("renders the select-all control checked in the all-selected state", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 12,
+				selectAll: {
+					checked: true,
+					indeterminate: false,
+					onChange: () => undefined,
+				},
+			}),
+		);
+		assert.match(
+			html,
+			/aria-label="Select all"[^>]*checked=""/,
+			"all-selected renders the checkbox checked",
+		);
+	});
+
+	it("omitting every new prop renders exactly the pre-existing bar", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+		);
+		assert.doesNotMatch(
+			html,
+			/aria-label="Select all"/,
+			"no select-all control",
+		);
+		assert.match(text(html), /2 messages selected/, "default count copy");
+		assert.doesNotMatch(html, /role="status"/, "no status line rendered");
+	});
 });

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

@@ -37,3 +37,69 @@ export const CrossAccountHint: Story = {
 			"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
+ *  `Checkbox` tri-state dash, not the box or the tick. */
+export const SelectAll: Story = {
+	args: {
+		count: 3,
+		selectAll: {
+			checked: false,
+			indeterminate: true,
+			onChange: () => undefined,
+		},
+	},
+};
+
+/** Every row checked: the select-all control renders as a plain checked box. */
+export const AllSelected: Story = {
+	args: {
+		count: 12,
+		selectAll: {
+			checked: true,
+			indeterminate: false,
+			onChange: () => 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. */
+export const Counting: Story = {
+	args: {
+		count: 0,
+		statusLabel: "Counting matching messages…",
+	},
+};
+
+/** A bulk delete in progress reports a running total via `statusLabel`, and
+ *  the delete button shows its busy spinner (never disables). */
+export const DeletingWithProgress: Story = {
+	args: {
+		count: 3412,
+		statusLabel: "Deleting 1,200 of 3,412…",
+		isBusy: true,
+	},
+};
+
+/** 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. */
+export const PartialFailure: Story = {
+	args: {
+		count: 3412,
+		failureHint: "3,072 deleted, 340 failed to delete — retry?",
+	},
+};
+
+/**
+ * count === 0 is unreachable in production: both the kit
+ * (`message-list-pane.tsx`'s `toggleCheck`) and the web-client
+ * (`MessageList.tsx`'s multi-select effect) auto-exit selection mode the
+ * instant the last checked row is unchecked. `SelectionTopBar` itself has no
+ * floor on `count` — this story pins the contract that no caller should ever
+ * leave it mounted here.
+ */
+export const ZeroSelected: Story = {
+	args: { count: 0 },
+};

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

@@ -1,6 +1,7 @@
 import { Loader2, MailOpen, Trash2, X } from "lucide-react";
 import type { ReactNode } from "react";
 import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
 
 export interface SelectionTopBarProps {
 	count: number;
@@ -23,6 +24,30 @@ export interface SelectionTopBarProps {
 	 * shows a spinner; other actions no-op. Never disables controls.
 	 */
 	isBusy?: 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.
+	 */
+	selectAll?: {
+		checked: boolean;
+		indeterminate?: boolean;
+		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.
+	 */
+	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.
+	 */
+	failureHint?: string;
 }
 
 /**
@@ -37,6 +62,9 @@ export function SelectionTopBar({
 	moveSlot,
 	moveDisabledHint,
 	isBusy = false,
+	selectAll,
+	statusLabel,
+	failureHint,
 }: SelectionTopBarProps) {
 	return (
 		<header className="flex shrink-0 flex-col border-b border-line bg-surface-sunken">
@@ -49,8 +77,18 @@ export function SelectionTopBar({
 					aria-label="Cancel selection"
 					className="-ml-1 shrink-0"
 				/>
+				{selectAll && (
+					<Checkbox
+						aria-label="Select all"
+						checked={selectAll.checked}
+						indeterminate={selectAll.indeterminate}
+						onChange={selectAll.onChange}
+						className="shrink-0"
+					/>
+				)}
 				<span className="min-w-0 flex-1 truncate text-sm font-medium text-fg">
-					{count} {count === 1 ? "message" : "messages"} selected
+					{statusLabel ??
+						`${count} ${count === 1 ? "message" : "messages"} selected`}
 				</span>
 				{onMarkRead && (
 					<Button
@@ -90,6 +128,16 @@ export function SelectionTopBar({
 					{moveDisabledHint}
 				</p>
 			)}
+			{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"
+					role="status"
+					aria-live="polite"
+				>
+					{failureHint}
+				</p>
+			)}
 		</header>
 	);
 }

package/src/components/spam-results-offer.render.test.ts

@@ -0,0 +1,26 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { SpamResultsOffer } from "./spam-results-offer.js";
+
+const noop = () => {};
+
+describe("SpamResultsOffer", () => {
+	it("states the count and offers a way into Spam", () => {
+		const html = renderToString(
+			createElement(SpamResultsOffer, { count: 3, onScopeToSpam: noop }),
+		);
+		assert.match(html, />3</);
+		assert.match(html, /results from Spam/);
+		assert.match(html, /View them/);
+	});
+
+	it("reads in the singular for one match", () => {
+		const html = renderToString(
+			createElement(SpamResultsOffer, { count: 1, onScopeToSpam: noop }),
+		);
+		assert.match(html, /result from Spam/);
+		assert.doesNotMatch(html, /results from Spam/);
+	});
+});

package/src/components/spam-results-offer.stories.tsx

@@ -0,0 +1,41 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { SpamResultsOffer } from "./spam-results-offer.js";
+
+/** Frames the offer at the width of the list pane it sits at the top of. */
+const listPaneFrame: Decorator = (Story) => (
+	<div
+		className="overflow-hidden rounded-lg border border-line bg-canvas"
+		style={{ width: 360 }}
+	>
+		<Story />
+	</div>
+);
+
+const meta: Meta<typeof SpamResultsOffer> = {
+	title: "Components/SpamResultsOffer",
+	component: SpamResultsOffer,
+	parameters: { layout: "centered" },
+	decorators: [listPaneFrame],
+};
+export default meta;
+
+type Story = StoryObj<typeof SpamResultsOffer>;
+
+/**
+ * Spam matches a global search held out of its results. Deliberately quiet —
+ * an offer, not a warning — and the action scopes the search to Spam rather
+ * than opening a view of its own.
+ */
+export const Default: Story = {
+	args: { count: 3, onScopeToSpam: () => {} },
+};
+
+/** One match reads in the singular. */
+export const SingleResult: Story = {
+	args: { count: 1, onScopeToSpam: () => {} },
+};
+
+/** Large counts stay on one line; the figure is tabular so it does not jitter. */
+export const ManyResults: Story = {
+	args: { count: 128, onScopeToSpam: () => {} },
+};

package/src/components/spam-results-offer.tsx

@@ -0,0 +1,52 @@
+import { Banner } from "./banner.js";
+import { Button } from "./button.js";
+
+export interface SpamResultsOfferProps {
+	/** How many matches the search found in Spam. */
+	count: number;
+	/**
+	 * Scope the search to Spam. This is a shortcut to the state reached by
+	 * navigating to Spam with the query carried over — the same scoped search,
+	 * with the same `in:spam` chip — not a separate result mode.
+	 */
+	onScopeToSpam: () => void;
+}
+
+const plural = (n: number): string => (n === 1 ? "result" : "results");
+
+/**
+ * Spam matches held out of a global search, offered rather than mixed in. Spam
+ * is the one folder a search that reaches everywhere does not inline, because
+ * the whole point of the folder is that its contents are unwanted until asked
+ * for. Taking the offer scopes the search to Spam.
+ *
+ * Quiet on purpose: this is an offer, not a warning. Presentational — the
+ * caller owns what "scope to spam" does.
+ */
+export function SpamResultsOffer({
+	count,
+	onScopeToSpam,
+}: SpamResultsOfferProps) {
+	return (
+		<Banner
+			tone="info"
+			variant="soft"
+			className="items-center justify-between gap-3 rounded-none border-b border-line"
+		>
+			<div className="flex items-center justify-between gap-3">
+				<p className="min-w-0 text-xs text-fg-muted">
+					<span className="font-semibold text-fg tabular-nums">{count}</span>{" "}
+					{`${plural(count)} from Spam`}
+				</p>
+				<Button
+					variant="ghost"
+					size="sm"
+					onClick={onScopeToSpam}
+					className="shrink-0 text-accent"
+				>
+					View them
+				</Button>
+			</div>
+		</Banner>
+	);
+}

package/src/components/swipeable-row.stories.tsx

@@ -55,6 +55,20 @@ export const PeekedLeading: Story = { args: { peek: "leading" } };
 
 export const PeekedTrailing: Story = { args: { peek: "trailing" } };
 
+/**
+ * In selection mode the leading avatar is REPLACED by a checkbox affordance
+ * — unchecked below, checked in the next story. `baseArgs` never flips
+ * `selectionMode`/`checked`, so this row-level toggle had zero coverage.
+ */
+export const SelectionUnchecked: Story = {
+	args: { peek: "none", selectionMode: true, checked: false },
+};
+
+/** Selection mode, row checked: the circle fills accent and shows a tick. */
+export const SelectionChecked: Story = {
+	args: { peek: "none", selectionMode: true, checked: true },
+};
+
 /**
  * The open affordance is rendered as a real `<a href>` via `linkComponent`,
  * so deep-link, middle-click and open-in-new-tab work. Consumers pass their

package/src/components/touch-list-body.stories.tsx

@@ -74,3 +74,22 @@ export const Refreshing: Story = { args: { refreshing: true } };
 export const SelectionMode: Story = {
 	args: { selectionMode: true, checkedIds: new Set(["t1", "t3"]) },
 };
+
+/** Every row checked — the ceiling a select-all control drives toward. */
+export const SelectionModeAllChecked: Story = {
+	args: {
+		selectionMode: true,
+		checkedIds: new Set(
+			sections.flatMap((section) => section.threads.map((t) => t.id)),
+		),
+	},
+};
+
+/**
+ * Selection mode with nothing checked. `TouchListBody` itself has no floor —
+ * the auto-exit-at-zero contract belongs to the caller (`MessageListPane`,
+ * production `MessageList.tsx`), which this component doesn't own.
+ */
+export const SelectionModeNoneChecked: Story = {
+	args: { selectionMode: true, checkedIds: new Set<string>() },
+};

package/src/index.ts

@@ -121,7 +121,10 @@ export {
 export {
 	canonicalRoleLabel,
 	type FolderRole,
+	isVirtualFolderRole,
+	provenanceFolderLabel,
 	providerLeaf,
+	type ResultFolder,
 	roleIcon,
 } from "./components/folder-role.js";
 export {
@@ -304,9 +307,11 @@ export {
 	type SearchResultTone,
 } from "./components/search-result-row.js";
 export {
+	partitionSpamResults,
 	type SearchResultSection,
 	SearchResults,
 	type SearchResultsProps,
+	type SearchScope,
 } from "./components/search-results.js";
 export {
 	SearchChipRow,
@@ -358,6 +363,10 @@ export {
 	SlidePanel,
 	type SlidePanelProps,
 } from "./components/slide-panel.js";
+export {
+	SpamResultsOffer,
+	type SpamResultsOfferProps,
+} from "./components/spam-results-offer.js";
 export {
 	commitPeek,
 	SwipeableRow,