@remit/ui 0.0.59 → 0.0.61

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

@@ -1,8 +1,17 @@
-import { Loader2, MailOpen, Trash2, X } from "lucide-react";
+import {
+	ArrowLeft,
+	FolderInput,
+	Loader2,
+	MailOpen,
+	ShieldAlert,
+	Sparkles,
+	Trash2,
+} 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 { PopoverMenu, type PopoverMenuItem } from "./popover-menu.js";
 import { ProgressBar } from "./progress-bar.js";
 
 const formatCount = (n: number): string => n.toLocaleString();
@@ -18,40 +27,82 @@ export interface SelectionTopBarNotice {
 	action?: SelectionTopBarNoticeAction;
 }
 
+export interface SelectionTopBarSelectAll {
+	checked: boolean;
+	indeterminate?: boolean;
+	onChange: () => void;
+}
+
 export interface SelectionTopBarProps {
+	/** Names the surface while nothing is ticked — the mailbox, the brief. */
+	title: string;
 	count: number;
+	/** Leaves selection, from the back arrow at the head of the bar. */
 	onCancel: () => void;
 	onDelete: () => void;
-	/** 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.
+	 * Opens the wizard on Move. Omitted where a destination cannot be resolved —
+	 * 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;
+	/** Moves the selection to Junk. Omitted in Junk itself, or with no Junk
+	 *  folder appointed. */
+	onJunk?: () => void;
+	/** Optional — dropped from the overflow menu while `isBusy`. */
+	onMarkRead?: () => void;
 	/**
-	 * True while a delete or move mutation is in flight. The delete button
-	 * shows a spinner and mark-read is hidden (never disabled — nothing here
-	 * disables, states that can't act are hidden instead).
+	 * The list header's own chrome, rendered only while nothing is ticked: the
+	 * nav button, the unread count beside the title, and the search affordance.
+	 * The bar is the list header, so these live here rather than on a second
+	 * row above it.
+	 */
+	navSlot?: ReactNode;
+	titleMeta?: ReactNode;
+	searchSlot?: ReactNode;
+	/**
+	 * The expanded search field, which owns the title's place for as long as it
+	 * is up. Idle only — a ticked row hands the row back to the count.
+	 */
+	searchField?: ReactNode;
+	/**
+	 * A row below the action row, up only while nothing is ticked — the
+	 * search's make-this-a-filter affordance. A selection's own verbs take the
+	 * bar over, so the second way into the same wizard stands down.
+	 */
+	idleSlot?: ReactNode;
+	/**
+	 * Extra rows at the foot of the overflow menu — the apply-label picker,
+	 * whose list belongs to the account rather than to the bar. Withdrawn while
+	 * `isBusy` or `isCounting`, like the other overflow verbs.
+	 */
+	overflowSlot?: ReactNode;
+	/**
+	 * True while a delete or move mutation is in flight. Delete shows a spinner
+	 * and every other verb drops out — nothing here disables, states that
+	 * cannot 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.
+	 * the verbs — the count they 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. The checkbox
-	 * itself stays visually small; a wrapping 44px hit area makes it tappable.
+	 * The labelled select-all control. Inline in the bar from 768px up, whether
+	 * or not anything is ticked; below that it takes a second row while
+	 * selecting, so row one stays a count and a row of verbs. `indeterminate`
+	 * renders the some-selected tri-state.
 	 */
-	selectAll?: {
-		checked: boolean;
-		indeterminate?: boolean;
-		onChange: () => void;
-	};
+	selectAll?: SelectionTopBarSelectAll;
 	/**
 	 * Overrides the default "{count} messages selected" text. Required once the
 	 * count's scope is anything other than "every loaded row is selected" —
@@ -74,22 +125,63 @@ 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".
-	 * Replaces the old `moveDisabledHint`/`failureHint` pair: a caller shows
-	 * at most one notice at a time.
 	 */
 	notice?: SelectionTopBarNotice;
 }
 
+/** Words, not a bare box: a tick with no legend never says what "all" covers. */
+function SelectAllToggle({
+	selectAll,
+	selecting,
+	className,
+}: {
+	selectAll: SelectionTopBarSelectAll;
+	selecting: boolean;
+	className: string;
+}) {
+	return (
+		<Checkbox
+			className={className}
+			checked={selectAll.checked}
+			indeterminate={selectAll.indeterminate}
+			onChange={selectAll.onChange}
+			label={
+				<span className="font-medium text-accent">
+					{selectAll.checked && selecting ? "Deselect all" : "Select all"}
+				</span>
+			}
+		/>
+	);
+}
+
 /**
- * Replaces the list header in narrow-width multi-select: a count plus the bulk
- * verbs (cancel, mark read, move, delete). Real Buttons that never disable.
+ * The list header and the selection action bar, as one surface. With nothing
+ * ticked it names the mailbox; from the first ticked row it carries the count
+ * and the verbs in place of that title, in the same place at the top of the
+ * pane.
+ *
+ * Delete, Move and Organize carry a glyph; Junk, Mark read and whatever
+ * `overflowSlot` adds live in the overflow menu. Select-all is a labelled control — permanent from 768px up,
+ * where row one has the room to carry it, and a second row below that, where
+ * row one is a count and the verbs. A back arrow leaves selection at every
+ * width, so a partial selection is always one press from being dropped.
  */
 export function SelectionTopBar({
+	title,
 	count,
 	onCancel,
-	onMarkRead,
 	onDelete,
+	onMove,
 	moveSlot,
+	onOrganize,
+	onJunk,
+	onMarkRead,
+	navSlot,
+	titleMeta,
+	searchSlot,
+	searchField,
+	idleSlot,
+	overflowSlot,
 	isBusy = false,
 	isCounting = false,
 	selectAll,
@@ -97,68 +189,143 @@ export function SelectionTopBar({
 	progress,
 	notice,
 }: SelectionTopBarProps) {
+	const selecting = count > 0 || isCounting;
 	const defaultLabel = selectAll?.checked
 		? `All ${formatCount(count)} loaded selected`
 		: `${formatCount(count)} ${count === 1 ? "message" : "messages"} selected`;
 
+	const overflowItems: PopoverMenuItem[] = [];
+	if (onJunk && !isBusy && !isCounting) {
+		overflowItems.push({
+			key: "junk",
+			label: "Junk",
+			icon: <ShieldAlert className="size-4" />,
+			onSelect: onJunk,
+		});
+	}
+	if (onMarkRead && !isBusy && !isCounting) {
+		overflowItems.push({
+			key: "mark-read",
+			label: "Mark read",
+			icon: <MailOpen className="size-4" />,
+			onSelect: onMarkRead,
+		});
+	}
 	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="touch"
-					icon={<X className="size-4" />}
-					onClick={onCancel}
-					aria-label="Cancel selection"
-					className="-ml-2 shrink-0"
-				/>
-				{selectAll && (
-					// 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"
-					role="status"
-					aria-live="polite"
-				>
-					{statusLabel ?? defaultLabel}
-				</span>
-				{onMarkRead && !isBusy && (
+		<header
+			data-selection-bar=""
+			className="flex shrink-0 flex-col border-b border-line bg-surface-sunken"
+		>
+			<div
+				data-selection-bar-row="actions"
+				className="flex h-pane-header items-center gap-1 px-row-inset"
+			>
+				{selecting ? (
 					<Button
 						variant="ghost"
 						size="touch"
-						icon={<MailOpen className="size-4" />}
-						onClick={onMarkRead}
-						aria-label="Mark as read"
-						className="shrink-0"
+						icon={<ArrowLeft className="size-5" />}
+						onClick={onCancel}
+						aria-label="Cancel selection"
+						className="-ml-2 shrink-0"
 					/>
+				) : (
+					navSlot
 				)}
-				{moveSlot}
-				{!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"
+				{selectAll && (
+					<SelectAllToggle
+						selectAll={selectAll}
+						selecting={selecting}
+						className="hidden shrink-0 pr-2 md:flex"
 					/>
 				)}
+				{selecting ? (
+					<span
+						data-selection-count=""
+						className="min-w-0 flex-1 truncate px-1 text-sm font-medium text-fg"
+						role="status"
+						aria-live="polite"
+					>
+						{statusLabel ?? defaultLabel}
+					</span>
+				) : searchField ? (
+					<div className="flex min-w-0 flex-1 items-center gap-1">
+						{searchField}
+					</div>
+				) : (
+					<>
+						<h1 className="min-w-0 flex-1 truncate px-1 text-sm font-semibold text-fg">
+							{title}
+						</h1>
+						{titleMeta}
+						{searchSlot}
+					</>
+				)}
+				{selecting && !isCounting && (
+					<>
+						<Button
+							variant="ghost"
+							size="touch"
+							icon={
+								isBusy ? (
+									<Loader2 className="size-5 animate-spin" />
+								) : (
+									<Trash2 className="size-5 text-danger" />
+								)
+							}
+							onClick={isBusy ? undefined : onDelete}
+							aria-label="Move selected messages to Trash"
+							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 && onOrganize && (
+							<Button
+								variant="ghost"
+								size="touch"
+								icon={<Sparkles className="size-5" />}
+								onClick={onOrganize}
+								aria-label="Organize selected messages"
+								className="shrink-0"
+							/>
+						)}
+					</>
+				)}
+				{selecting && (
+					<PopoverMenu
+						triggerLabel="More actions"
+						items={overflowItems}
+						className="shrink-0"
+					>
+						{!isBusy && !isCounting && overflowSlot}
+					</PopoverMenu>
+				)}
 			</div>
+			{!selecting && idleSlot}
+			{selecting && selectAll && (
+				<div
+					data-selection-bar-row="select-all"
+					className="px-row-inset pb-2 md:hidden"
+				>
+					<SelectAllToggle
+						selectAll={selectAll}
+						selecting={selecting}
+						className="w-full"
+					/>
+				</div>
+			)}
 			{progress && (
 				<div className="px-row-inset pb-2">
 					<ProgressBar
@@ -170,6 +337,7 @@ export function SelectionTopBar({
 			)}
 			{notice && (
 				<Banner
+					data-selection-notice=""
 					tone={notice.tone}
 					variant="soft"
 					role="status"

package/src/components/selection-wizard.render.test.ts

@@ -581,7 +581,7 @@ describe("SelectionWizard", () => {
 				wizardProps({ verb: "organize", steps, step: "properties" }),
 			),
 		);
-		assert.match(text(html), /Step 1 of 4 · Apply to/);
+		assert.match(text(html), /Step 1 of 5 · Apply to/);
 		assert.match(html, /What should this apply to\?/);
 		assert.match(html, /These 2 messages/);
 		assert.doesNotMatch(html, /Match properties/);
@@ -657,23 +657,41 @@ describe("SelectionWizard", () => {
 				}),
 			),
 		);
-		assert.match(html, /Add a property to match on\./);
-		assert.match(html, /aria-disabled="true"/);
+		assert.match(text(html), /Add a property to match on\./);
+		assert.match(html, /opacity-55/);
+		// Nothing disables (#477 1.7), and `aria-disabled` disables it for
+		// everyone driving the page by anything other than a mouse.
+		assert.doesNotMatch(html, /aria-disabled/);
 		assert.doesNotMatch(html, /<button[^>]*disabled=""/);
 	});
 
-	it("holds the blocked reason back until Continue is pressed", () => {
-		const html = renderToString(
+	it("carries the blocked reason on the control before it is pressed, and shows it after", () => {
+		const quiet = renderToString(
+			createElement(
+				SelectionWizard,
+				wizardProps({
+					step: "properties",
+					blockedReason: "Add a property to match on.",
+				}),
+			),
+		);
+		// Described, so it is heard on the control; not on screen until pressed.
+		assert.match(quiet, /aria-describedby="/);
+		assert.match(quiet, /sr-only/);
+		assert.doesNotMatch(quiet, /role="status"/);
+
+		const nudged = renderToString(
 			createElement(
 				SelectionWizard,
 				wizardProps({
 					step: "properties",
 					blockedReason: "Add a property to match on.",
+					nudged: true,
 				}),
 			),
 		);
-		assert.doesNotMatch(html, /Add a property to match on\./);
-		assert.match(html, /aria-disabled="true"/);
+		assert.match(nudged, /role="status"/);
+		assert.doesNotMatch(nudged, /sr-only/);
 	});
 
 	it("commits under the scope's own label, in the verb's own tone", () => {