@remit/ui 0.0.59 → 0.0.61

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

@@ -5,6 +5,7 @@ import { renderToString } from "react-dom/server";
 import { SelectionTopBar } from "./selection-top-bar.js";
 
 const handlers = {
+	title: "Inbox",
 	onCancel: () => undefined,
 	onDelete: () => undefined,
 };
@@ -19,12 +20,115 @@ const text = (html: string) =>
 		.replace(/'/g, "'")
 		.replace(/&/g, "&");
 
+/** The bar's own rows, sliced out of the rendered markup so an assertion can
+ *  say which row a control landed on. Row one is the count and the verbs; the
+ *  select-all row exists only below 768px, while selecting. */
+const row = (html: string, name: "actions" | "select-all"): string => {
+	const open = html.indexOf(`data-selection-bar-row="${name}"`);
+	assert.notEqual(open, -1, `no ${name} row rendered`);
+	const rest = html.slice(open);
+	const next = rest.indexOf("data-selection-bar-row=", 1);
+	return next === -1 ? rest : rest.slice(0, next);
+};
+
+const hasRow = (html: string, name: "actions" | "select-all"): boolean =>
+	html.includes(`data-selection-bar-row="${name}"`);
+
+const INLINE_SELECT_ALL = /hidden shrink-0 pr-2 md:flex/;
+
+const selectAll = { checked: false, onChange: () => undefined };
+
 describe("SelectionTopBar", () => {
-	it("renders singular copy for one message", () => {
+	it("names the mailbox when nothing is ticked", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, { ...handlers, count: 0 }),
+		);
+		assert.match(text(html), /Inbox/);
+		assert.doesNotMatch(text(html), /messages selected/);
+	});
+
+	it("carries the list header's own chrome while nothing is ticked", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 0,
+				navSlot: createElement("button", { type: "button" }, "Menu"),
+				titleMeta: createElement("span", null, "12 unread"),
+				searchSlot: createElement("button", { type: "button" }, "Search"),
+			}),
+		);
+		assert.match(text(html), /Menu/);
+		assert.match(text(html), /12 unread/);
+		assert.match(text(html), /Search/);
+	});
+
+	it("hands the row to the count and the verbs from the first ticked row", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 1,
+				navSlot: createElement("button", { type: "button" }, "Menu"),
+				titleMeta: createElement("span", null, "12 unread"),
+				searchSlot: createElement("button", { type: "button" }, "Search"),
+			}),
+		);
+		assert.match(text(html), /1 message selected/);
+		assert.doesNotMatch(text(html), /12 unread/);
+		assert.doesNotMatch(text(html), /Search/);
+	});
+
+	it("lets the expanded search field take the title's place while idle", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 0,
+				searchField: createElement("input", { "aria-label": "Search mail" }),
+			}),
+		);
+		assert.match(html, /aria-label="Search mail"/);
+		assert.doesNotMatch(text(html), /Inbox/);
+	});
+
+	it("carries the make-filter row while nothing is ticked, and drops it once something is", () => {
+		const idleSlot = createElement("button", { type: "button" }, "Make filter");
+		assert.match(
+			text(
+				renderToString(
+					createElement(SelectionTopBar, { ...handlers, count: 0, idleSlot }),
+				),
+			),
+			/Make filter/,
+		);
+		assert.doesNotMatch(
+			text(
+				renderToString(
+					createElement(SelectionTopBar, { ...handlers, count: 2, idleSlot }),
+				),
+			),
+			/Make filter/,
+		);
+	});
+
+	it("keeps Junk and Mark read in the overflow menu, never as glyphs", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				onJunk: () => undefined,
+				onMarkRead: () => undefined,
+			}),
+		);
+		assert.match(html, /aria-label="More actions"/);
+		assert.doesNotMatch(row(html, "actions"), /aria-label="Junk"/);
+		assert.doesNotMatch(row(html, "actions"), /aria-label="Mark read"/);
+	});
+
+	it("replaces the title with the count from the first ticked row", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, { ...handlers, count: 1 }),
 		);
 		assert.match(text(html), /1 message selected/);
+		assert.doesNotMatch(text(html), /Inbox/);
 	});
 
 	it("renders plural copy for many messages", () => {
@@ -41,75 +145,147 @@ describe("SelectionTopBar", () => {
 		assert.match(text(html), /3,412 messages selected/);
 	});
 
-	it("renders cancel and delete controls", () => {
+	describe("at 375px", () => {
 		const html = renderToString(
-			createElement(SelectionTopBar, { ...handlers, count: 2 }),
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 3,
+				selectAll,
+				onOrganize: () => undefined,
+				onMove: () => undefined,
+			}),
 		);
-		assert.match(html, /aria-label="Cancel selection"/);
-		assert.match(html, /aria-label="Move selected messages to Trash"/);
+
+		it("carries the count and the three verbs on row one", () => {
+			const actions = row(html, "actions");
+			assert.match(actions, /3 messages selected/);
+			assert.match(actions, /aria-label="Move selected messages to Trash"/);
+			assert.match(actions, /aria-label="Move selected messages"/);
+			assert.match(actions, /aria-label="Organize selected messages"/);
+		});
+
+		it("puts select-all on a second row, out of the way of the verbs", () => {
+			assert.ok(hasRow(html, "select-all"));
+			const secondRow = row(html, "select-all");
+			assert.match(secondRow, /Select all/);
+			assert.match(
+				secondRow,
+				/md:hidden/,
+				"the second row exists only below 768px",
+			);
+			assert.match(
+				row(html, "actions"),
+				INLINE_SELECT_ALL,
+				"the inline copy is the one that stands down below 768px",
+			);
+		});
+
+		it("offers a back arrow to leave selection", () => {
+			assert.match(row(html, "actions"), /aria-label="Cancel selection"/);
+		});
+	});
+
+	describe("at 1024px", () => {
+		it("keeps select-all inline in the bar with zero rows ticked", () => {
+			const html = renderToString(
+				createElement(SelectionTopBar, { ...handlers, count: 0, selectAll }),
+			);
+			const actions = row(html, "actions");
+			assert.match(actions, /Select all/);
+			assert.match(actions, INLINE_SELECT_ALL, "inline from 768px up");
+			assert.doesNotMatch(
+				actions,
+				/aria-label="Cancel selection"/,
+				"nothing to leave with nothing ticked",
+			);
+			assert.equal(
+				hasRow(html, "select-all"),
+				false,
+				"no second row when nothing is ticked",
+			);
+		});
 	});
 
-	it("renders cancel, mark-read and delete at the 44px touch size", () => {
+	it("renders Junk and Mark read in the overflow menu, not the verb row", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
 				count: 2,
+				onJunk: () => undefined,
 				onMarkRead: () => undefined,
 			}),
 		);
-		const buttonCount = (html.match(/h-11 w-11/g) ?? []).length;
-		assert.equal(buttonCount, 3, "cancel, mark-read and delete are all 44px");
+		assert.match(html, /aria-label="More actions"/);
+		assert.match(html, /aria-haspopup="menu"/);
+		assert.doesNotMatch(row(html, "actions"), /aria-label="Mark as read"/);
 	});
 
-	it("spaces delete at least 16px from its preceding sibling", () => {
+	it("keeps the overflow menu for an overflowSlot with no verbs of its own", () => {
 		const html = renderToString(
-			createElement(SelectionTopBar, { ...handlers, count: 2 }),
-		);
-		assert.match(
-			html,
-			/class="[^"]*\bml-4\b[^"]*"[^>]*aria-label="Move selected messages to Trash"/,
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				overflowSlot: createElement("span", null, "Apply label"),
+			}),
 		);
+		assert.match(html, /aria-label="More actions"/);
 	});
 
-	it("renders mark-read control when onMarkRead is provided", () => {
+	it("withdraws the overflowSlot while busy", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
 				count: 2,
-				onMarkRead: () => undefined,
+				isBusy: true,
+				overflowSlot: createElement("span", null, "Apply label"),
 			}),
 		);
-		assert.match(html, /aria-label="Mark as read"/);
+		assert.doesNotMatch(html, /aria-label="More actions"/);
 	});
 
-	it("omits mark-read control when onMarkRead is absent", () => {
+	it("renders no overflow trigger when neither overflow verb is wired", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, { ...handlers, count: 2 }),
 		);
-		assert.doesNotMatch(html, /aria-label="Mark as read"/);
+		assert.doesNotMatch(html, /aria-label="More actions"/);
 	});
 
-	it("hides mark-read while busy instead of disabling it", () => {
+	it("drops the overflow verbs while busy instead of disabling them", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
 				count: 2,
 				onMarkRead: () => undefined,
+				onJunk: () => undefined,
 				isBusy: true,
 			}),
 		);
-		assert.doesNotMatch(html, /aria-label="Mark as read"/);
+		assert.doesNotMatch(html, /aria-label="More actions"/);
 	});
 
-	it("hides delete while counting", () => {
+	it("renders the verbs at the 44px touch size", () => {
+		const html = renderToString(
+			createElement(SelectionTopBar, {
+				...handlers,
+				count: 2,
+				onOrganize: () => undefined,
+			}),
+		);
+		const buttonCount = (html.match(/h-11 w-11/g) ?? []).length;
+		assert.equal(buttonCount, 3, "back, delete and organize are all 44px");
+	});
+
+	it("hides the verbs while counting", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
 				count: 0,
 				isCounting: true,
+				onOrganize: () => undefined,
 			}),
 		);
 		assert.doesNotMatch(html, /aria-label="Move selected messages to Trash"/);
+		assert.doesNotMatch(html, /aria-label="Organize selected messages"/);
 	});
 
 	it("renders statusLabel in place of the count copy when provided", () => {
@@ -124,13 +300,6 @@ describe("SelectionTopBar", () => {
 		assert.doesNotMatch(text(html), /3,412 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("marks the count/status line as a polite live region", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, { ...handlers, count: 2 }),
@@ -145,10 +314,10 @@ describe("SelectionTopBar", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, { ...handlers, count: 2 }),
 		);
-		assert.doesNotMatch(html, /aria-label="Select all"/);
+		assert.doesNotMatch(text(html), /Select all/);
 	});
 
-	it("renders the select-all control, unchecked, in the some-selected state", () => {
+	it("renders select-all unchecked in the some-selected state", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
@@ -160,15 +329,11 @@ describe("SelectionTopBar", () => {
 				},
 			}),
 		);
-		assert.match(html, /aria-label="Select all"/);
-		assert.doesNotMatch(
-			html,
-			/aria-label="Select all"[^>]*checked=""/,
-			"some-selected is not the checked state",
-		);
+		assert.match(text(html), /Select all/);
+		assert.doesNotMatch(html, /type="checkbox"[^>]*checked=""/);
 	});
 
-	it("renders the select-all control checked in the all-selected state", () => {
+	it("names the control by what pressing it does once everything is ticked", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
@@ -180,11 +345,8 @@ describe("SelectionTopBar", () => {
 				},
 			}),
 		);
-		assert.match(
-			html,
-			/aria-label="Select all"[^>]*checked=""/,
-			"all-selected renders the checkbox checked",
-		);
+		assert.match(html, /type="checkbox"[^>]*checked=""/);
+		assert.match(text(html), /Deselect all/);
 	});
 
 	it("names the loaded scope by default once select-all is checked", () => {
@@ -200,7 +362,6 @@ describe("SelectionTopBar", () => {
 			}),
 		);
 		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", () => {
@@ -215,20 +376,6 @@ describe("SelectionTopBar", () => {
 		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, {
@@ -245,7 +392,6 @@ describe("SelectionTopBar", () => {
 	});
 
 	it("renders the notice's action as a real button, not prose", () => {
-		const onRetry = () => undefined;
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
@@ -253,7 +399,7 @@ describe("SelectionTopBar", () => {
 				notice: {
 					tone: "danger",
 					text: "3,072 moved to Trash. 340 couldn't be deleted.",
-					action: { label: "Retry 340", onClick: onRetry },
+					action: { label: "Retry 340", onClick: () => undefined },
 				},
 			}),
 		);
@@ -290,17 +436,4 @@ describe("SelectionTopBar", () => {
 		);
 		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 }),
-		);
-		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="progressbar"/, "no progress bar");
-	});
 });

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

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { FolderInput } from "lucide-react";
+import { Menu, Search, Tag } from "lucide-react";
+import { Button } from "./button.js";
+import { PopoverMenu } from "./popover-menu.js";
+import { SearchBar } from "./search-bar.js";
 import { SelectionTopBar } from "./selection-top-bar.js";
 
 const meta: Meta<typeof SelectionTopBar> = {
@@ -7,8 +10,12 @@ const meta: Meta<typeof SelectionTopBar> = {
 	component: SelectionTopBar,
 	parameters: { layout: "padded" },
 	args: {
+		title: "Inbox",
 		onCancel: () => undefined,
 		onMarkRead: () => undefined,
+		onJunk: () => undefined,
+		onMove: () => undefined,
+		onOrganize: () => undefined,
 		onDelete: () => undefined,
 	},
 	// Full viewport width — a fixed w-[390px] wrapper inside a 390px Storybook
@@ -23,31 +30,152 @@ export default meta;
 
 type Story = StoryObj<typeof SelectionTopBar>;
 
-/** Stand-in for the caller's move-to-folder trigger, which owns its own
- *  folder-picker data. The bar only reserves the slot. */
-const MoveSlot = () => (
-	<button
-		type="button"
-		aria-label="Move selected messages"
-		className="inline-flex size-11 shrink-0 items-center justify-center rounded text-fg-muted hover:bg-surface-raised"
-	>
-		<FolderInput className="size-4" />
-	</button>
+/** Stand-in for the caller's apply-label picker, whose list belongs to the
+ *  account. A worded row, so it reads as one of the menu's actions. */
+const LabelSlot = () => (
+	<PopoverMenu
+		triggerLabel="Apply label to selected messages"
+		triggerIcon={<Tag className="size-4 text-fg-subtle" />}
+		triggerText="Apply label"
+		align="start"
+		nested
+		touch={false}
+		triggerClassName="min-h-11 w-full justify-start gap-3 px-4 py-2.5 text-sm font-normal text-fg"
+		items={[
+			{ key: "work", label: "Work", onSelect: () => undefined },
+			{ key: "receipts", label: "Receipts", onSelect: () => undefined },
+		]}
+	/>
 );
 
-export const One: Story = { args: { count: 1 } };
+const selectAll = {
+	checked: false,
+	indeterminate: true,
+	onChange: () => undefined,
+};
+
+/** The list header's own chrome, which the bar carries while nothing is
+ *  ticked. The live app builds these in `MailListHeader`. */
+const chrome = {
+	navSlot: (
+		<Button
+			variant="ghost"
+			size="touch"
+			icon={<Menu className="size-5" />}
+			aria-label="Menu"
+			className="-ml-2 shrink-0"
+		/>
+	),
+	titleMeta: (
+		<span className="shrink-0 text-2xs text-fg-subtle">15,338 unread</span>
+	),
+	searchSlot: (
+		<Button
+			variant="ghost"
+			size="touch"
+			icon={<Search className="size-5" />}
+			aria-label="Search"
+			className="shrink-0"
+		/>
+	),
+};
+
+/**
+ * Nothing ticked: the surface is the list header and names the mailbox. From
+ * 768px up the select-all control is already there — the same bar, one state
+ * earlier, rather than a second surface that appears on the first tick.
+ */
+export const Idle: Story = {
+	args: {
+		...chrome,
+		count: 0,
+		selectAll: { checked: false, onChange: () => undefined },
+	},
+};
 
-export const Many: Story = { args: { count: 3 } };
+/** The same idle bar with search expanded over the title, which is what the
+ *  tablet header does once a query is in play, and the make-filter row the
+ *  search offers under it. */
+export const IdleSearching: Story = {
+	args: {
+		...chrome,
+		count: 0,
+		selectAll: { checked: false, onChange: () => undefined },
+		idleSlot: (
+			<button
+				type="button"
+				className="flex min-h-11 w-full items-center px-row-inset text-left text-sm text-accent"
+			>
+				Make this a filter
+			</button>
+		),
+		searchField: (
+			<>
+				<div className="min-w-0 flex-1">
+					<SearchBar
+						value="npm"
+						onChange={() => undefined}
+						onClear={() => undefined}
+						globalFocusKey={false}
+						showClearButton={false}
+					/>
+				</div>
+				<Button
+					variant="ghost"
+					size="touch"
+					icon={<Search className="size-5" />}
+					aria-label="Close search"
+					className="shrink-0"
+				/>
+			</>
+		),
+	},
+};
 
-export const WithoutMarkRead: Story = {
-	args: { count: 2, onMarkRead: undefined },
+/**
+ * One ticked row. The count takes the title's place and the header's own
+ * chrome stands down; the verbs arrive with it: Delete, Move and Organize
+ * carry a glyph, Junk and Mark read live under the kebab. Every one of them
+ * opens the wizard. Below 768px select-all takes a second row, so row one
+ * stays a count and a
+ * row of verbs with a back arrow out of selection.
+ */
+export const One: Story = {
+	args: { ...chrome, count: 1, selectAll },
 };
 
-export const Busy: Story = { args: { count: 2, isBusy: true } };
+export const Many: Story = {
+	args: { count: 3, selectAll },
+};
+
+/**
+ * The overflow menu with the account's label picker at its foot. Labels carry
+ * no verb on the bar (#477), so this is where applying one lives.
+ */
+export const WithLabelPicker: Story = {
+	args: {
+		count: 3,
+		selectAll,
+		overflowSlot: <LabelSlot />,
+	},
+};
+
+/** A selection spanning folders or accounts has no move target and no
+ *  account to file a rule under: the bar carries Delete and the overflow. */
+export const WithoutMoveOrOrganize: Story = {
+	args: { count: 2, onMove: undefined, onOrganize: undefined, selectAll },
+};
+
+/** A mutation in flight: Delete carries the spinner and every other verb
+ *  stands down, because nothing else can act until it lands. */
+export const Busy: Story = {
+	args: { count: 2, isBusy: true, selectAll },
+};
 
 export const CrossAccountHint: Story = {
 	args: {
 		count: 4,
+		selectAll,
 		notice: {
 			tone: "warning",
 			text: "Move only works within one account — clear selection or pick messages from a single account",
@@ -55,24 +183,11 @@ export const CrossAccountHint: Story = {
 	},
 };
 
-/** 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: {
-		count: 3,
-		selectAll: {
-			checked: false,
-			indeterminate: true,
-			onChange: () => undefined,
-		},
-	},
-};
-
 /**
- * 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.
+ * Every loaded row checked. The control now says what pressing it does, and
+ * 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: {
@@ -132,7 +247,6 @@ export const Escalated: Story = {
 	args: {
 		count: 3412,
 		statusLabel: 'All 3,412 matching "npm" selected',
-		moveSlot: <MoveSlot />,
 		notice: {
 			tone: "info",
 			text: "",
@@ -143,9 +257,8 @@ export const Escalated: Story = {
 
 /**
  * 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").
+ * yet — a running total instead of a static "Counting…", the verbs hidden
+ * (nothing to act on with an unknown total), and an explicit Stop.
  */
 export const Counting: Story = {
 	args: {
@@ -182,7 +295,7 @@ export const CountingLargeResultSet: Story = {
 /**
  * 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.
+ * disables) and the overflow verbs drop out — nothing here can act mid-delete.
  */
 export const DeletingWithProgress: Story = {
 	args: {
@@ -209,23 +322,10 @@ export const PartialFailure: Story = {
 	},
 };
 
-/**
- * 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 },
-};
-
 /**
  * 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
- * destructive. Mark-read and the move slot are hidden while it runs — nothing
- * here can act mid-run.
+ * destructive.
  */
 export const MovingWithProgress: Story = {
 	args: {
@@ -253,7 +353,6 @@ export const MarkingReadWithProgress: Story = {
 export const PartialFailureMove: Story = {
 	args: {
 		count: 340,
-		moveSlot: <MoveSlot />,
 		notice: {
 			tone: "danger",
 			text: "3,072 moved. 340 couldn't be moved.",