@remit/web-client 0.0.56 → 0.0.58

package/src/components/mail/SelectionToolbar.stories.tsx

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SelectionToolbar } from "./SelectionToolbar";
+
+/**
+ * The desktop bulk-action bar. It keeps its bounded verbs (mark-read, move,
+ * delete, organize) and, from issue #212, gains the search-escalation states
+ * the mobile `SelectionSheet` already carries: the "Select all N matching…"
+ * offer, a running count, the escalated predicate, a chunked run's progress,
+ * and a partial-failure Retry. Both surfaces read the same derivations in
+ * `MessageList`, so these stories and the kit `SelectionTopBar` stories track
+ * the one state matrix.
+ *
+ * The Move verb needs the account-scoped `MoveToTrigger` (its own query and
+ * folder data), so it is left out here to keep these stories provider-free —
+ * its visual is covered by the kit `SelectionTopBar` stories' move slot. The
+ * escalated stories below still assert verb parity through the mark-read and
+ * delete verbs remaining available over the predicate.
+ */
+const meta: Meta<typeof SelectionToolbar> = {
+	title: "Screens/WebClient/SelectionToolbar",
+	component: SelectionToolbar,
+	parameters: { layout: "padded" },
+	args: {
+		selectedCount: 3,
+		onDelete: () => undefined,
+		onClearSelection: () => undefined,
+		onMarkAsRead: () => undefined,
+	},
+	render: (args) => (
+		<div className="w-full rounded-md border border-line">
+			<SelectionToolbar {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof SelectionToolbar>;
+
+/** A plain bounded selection: the count in words, mark-read and delete. */
+export const Bounded: Story = {};
+
+export const OneSelected: Story = { args: { selectedCount: 1 } };
+
+/**
+ * Some but not all loaded rows checked while searching: the select-all control
+ * renders the tri-state dash.
+ */
+export const SelectAllIndeterminate: Story = {
+	args: {
+		selectAll: {
+			checked: false,
+			indeterminate: true,
+			onChange: () => undefined,
+		},
+	},
+};
+
+/**
+ * Every loaded row checked. The label names the loaded scope — "All 47 loaded
+ * selected" — rather than a bare count next to a fully ticked box.
+ */
+export const AllLoadedSelected: Story = {
+	args: {
+		selectedCount: 47,
+		selectAll: { checked: true, onChange: () => undefined },
+	},
+};
+
+/**
+ * Search has more matches than are loaded: an escalation offer naming the
+ * scope (a real button, not prose). Tapping it pays for the real count.
+ */
+export const EscalationAvailable: Story = {
+	args: {
+		selectedCount: 47,
+		selectAll: { checked: true, onChange: () => undefined },
+		notice: {
+			tone: "info",
+			text: "",
+			action: {
+				label: 'Select all matching "npm"',
+				onClick: () => undefined,
+			},
+		},
+	},
+};
+
+/**
+ * The result set is still paging to its total: a running count, Delete hidden
+ * (the count it would act on isn't known yet), and an explicit Stop.
+ */
+export const Counting: Story = {
+	args: {
+		selectedCount: 47,
+		isCounting: true,
+		statusLabel: "Counting… 1,900 so far",
+		selectAll: { checked: true, onChange: () => undefined },
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Stop", onClick: () => undefined },
+		},
+	},
+};
+
+/** Past ~10s the counting state says so rather than looking stuck. */
+export const CountingLargeResultSet: Story = {
+	args: {
+		selectedCount: 0,
+		isCounting: true,
+		statusLabel: "Counting… 12,400 so far. This is a big result set.",
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Stop", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * The selection is now the search predicate: the count names the query's total,
+ * every verb stays available over it (#114 — not delete-only), and the notice
+ * offers a way back to the bounded selection.
+ */
+export const Escalated: Story = {
+	args: {
+		selectedCount: 3412,
+		statusLabel: 'All 3,412 matching "npm" selected',
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Clear selection", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * A chunked delete over the predicate: a running total and a determinate
+ * progress bar, the verbs off screen (the bar is the only thing that can act
+ * mid-run), toned as destructive.
+ */
+export const DeletingWithProgress: Story = {
+	args: {
+		selectedCount: 3412,
+		statusLabel: "Deleting 1,200 of 3,412…",
+		progress: { value: 1200, max: 3412, tone: "danger" },
+	},
+};
+
+/** A move over the escalated selection: the same run, toned as ordinary
+ *  progress and worded for the action that is running. */
+export const MovingWithProgress: Story = {
+	args: {
+		selectedCount: 3412,
+		statusLabel: "Moving 1,200 of 3,412…",
+		progress: { value: 1200, max: 3412, tone: "info" },
+	},
+};
+
+/** Mark-read over the escalated selection. */
+export const MarkingReadWithProgress: Story = {
+	args: {
+		selectedCount: 3412,
+		statusLabel: "Marking 1,200 of 3,412 as read…",
+		progress: { value: 1200, max: 3412, tone: "info" },
+	},
+};
+
+/**
+ * A run left some messages unreached: the notice names how many landed, the
+ * count reflects only what is still selected (the failures), and Retry targets
+ * exactly that.
+ */
+export const PartialFailure: Story = {
+	args: {
+		selectedCount: 340,
+		notice: {
+			tone: "danger",
+			text: "3,072 moved to Trash. 340 couldn't be deleted.",
+			action: { label: "Retry 340", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * A selection spanning accounts: Move is withdrawn (it only works within one
+ * account) and the reason is stated inline.
+ */
+export const CrossAccountHint: Story = {
+	args: {
+		moveDisabledHint:
+			"Move only works within one account — clear selection or pick messages from a single account",
+	},
+};

package/src/components/mail/SelectionToolbar.tsx

@@ -1,7 +1,14 @@
+import { Banner, type BannerTone, Checkbox, ProgressBar } from "@remit/ui";
 import { Loader2, MailOpen, Sparkles, Trash2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MoveToTrigger } from "./MoveToTrigger";
 
+export interface SelectionToolbarNotice {
+	tone: BannerTone;
+	text: string;
+	action?: { label: string; onClick: () => void };
+}
+
 interface SelectionToolbarProps {
 	selectedCount: number;
 	onDelete: () => void;
@@ -33,6 +40,42 @@ interface SelectionToolbarProps {
 	 * Move only works within one account.
 	 */
 	moveDisabledHint?: string;
+	/**
+	 * Select-all-loaded control, rendered between the clear button and the
+	 * count. Presence renders the checkbox; `indeterminate` is the some-selected
+	 * tri-state. Wired only while searching, where escalating past the loaded
+	 * page is possible (issue #212).
+	 */
+	selectAll?: {
+		checked: boolean;
+		indeterminate?: boolean;
+		onChange: () => void;
+	};
+	/**
+	 * Overrides the "{count} messages selected" text. Names the scope once it is
+	 * anything other than a materialized selection — an escalated predicate
+	 * ("All 3,412 matching \"npm\" selected"), a running count ("Counting… 1,900
+	 * so far"), or bulk-run progress ("Deleting 1,200 of 3,412…").
+	 */
+	statusLabel?: string;
+	/**
+	 * True while a search result set is still paging to its total. Hides Delete
+	 * (and Move) — the count they would act on isn't known yet.
+	 */
+	isCounting?: boolean;
+	/**
+	 * Determinate progress for a chunked/escalated run in flight. Renders a
+	 * `ProgressBar` below the action row and takes the verbs off screen — the
+	 * bar is the only thing that can act mid-run.
+	 */
+	progress?: { value: number; max: number; tone?: BannerTone };
+	/**
+	 * At-most-one toned status line below the action row, optionally carrying an
+	 * action button — the "Select all N matching…" escalation offer, a "Stop"
+	 * during counting, a "Clear selection" once escalated, or a partial-failure
+	 * "Retry N" (issue #212).
+	 */
+	notice?: SelectionToolbarNotice;
 }
 
 export const SelectionToolbar = ({
@@ -47,93 +90,164 @@ export const SelectionToolbar = ({
 	accountId,
 	currentMailboxId,
 	moveDisabledHint,
+	selectAll,
+	statusLabel,
+	isCounting = false,
+	progress,
+	notice,
 }: SelectionToolbarProps) => {
-	const isBusy = isDeleting || isMoving;
 	if (selectedCount === 0) return null;
 
+	// A chunked/escalated run owns the bar: the progress bar is the only signal
+	// that can act, so the verbs come off screen until it ends (issue #212).
+	const isRunning = progress !== undefined;
+	const isBusy = isDeleting || isMoving || isRunning;
+	// The verbs are suppressed while a run is in flight or a count is still
+	// paging; an escalated-but-idle selection keeps every verb (verb parity).
+	const showVerbs = !isRunning && !isCounting;
+
 	const canShowMove = !!onMove && !!accountId && !!currentMailboxId;
+	// Organize has no escalated-predicate path — it acts on the materialized
+	// selection — so it's withdrawn the moment the selection escalates or a run
+	// takes over (any state that names itself through `statusLabel`).
 	const canShowOrganize =
-		!!onOrganize && !!accountId && !!currentMailboxId && !moveDisabledHint;
+		!!onOrganize &&
+		!!accountId &&
+		!!currentMailboxId &&
+		!moveDisabledHint &&
+		!statusLabel;
+
+	const defaultLabel = selectAll?.checked
+		? `All ${selectedCount} loaded selected`
+		: `${selectedCount} ${selectedCount === 1 ? "message" : "messages"} selected`;
 
 	return (
-		<div className="sticky top-0 z-10 flex items-center justify-between px-3 py-2 bg-surface-sunken border-b border-line">
-			<div className="flex items-center gap-3">
-				<button
-					type="button"
-					onClick={onClearSelection}
-					className="min-h-11 min-w-11 inline-flex items-center justify-center rounded hover:bg-surface-raised transition-colors"
-					aria-label="Clear selection"
-				>
-					<X className="size-4 text-fg-muted" />
-				</button>
-				<span className="text-sm font-medium">
-					{selectedCount} {selectedCount === 1 ? "message" : "messages"}{" "}
-					selected
-				</span>
-				{moveDisabledHint && (
-					// biome-ignore lint/a11y/useSemanticElements: <span> with role="status" keeps inline layout; <output> would shift flow
-					<span
-						className="text-xs text-fg-muted"
-						role="status"
-						aria-live="polite"
-					>
-						{moveDisabledHint}
-					</span>
-				)}
-			</div>
-			<div className="flex items-center gap-1">
-				{canShowOrganize && onOrganize && (
-					<button
-						type="button"
-						onClick={isBusy ? undefined : onOrganize}
-						className="min-h-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors hover:bg-surface-raised"
-						aria-label="Organize similar messages"
-					>
-						<Sparkles className="size-4" />
-						<span className="hidden sm:inline">Organize</span>
-					</button>
-				)}
-				{onMarkAsRead && (
+		<div className="sticky top-0 z-10 flex flex-col bg-surface-sunken border-b border-line">
+			<div className="flex items-center justify-between px-3 py-2">
+				<div className="flex items-center gap-3">
 					<button
 						type="button"
-						onClick={isBusy ? undefined : onMarkAsRead}
-						className="min-h-11 min-w-11 inline-flex items-center justify-center rounded text-sm font-medium transition-colors hover:bg-surface-raised"
-						aria-label="Mark as read"
-						aria-busy={isBusy}
+						onClick={onClearSelection}
+						className="min-h-11 min-w-11 inline-flex items-center justify-center rounded hover:bg-surface-raised transition-colors"
+						aria-label="Clear selection"
 					>
-						<MailOpen className="size-4" />
+						<X className="size-4 text-fg-muted" />
 					</button>
-				)}
-				{canShowMove && onMove && accountId && currentMailboxId && (
-					<MoveToTrigger
-						accountId={accountId}
-						currentMailboxId={currentMailboxId}
-						onMove={isBusy ? () => {} : onMove}
-						disabledHint={moveDisabledHint}
-						variant="icon-only"
-						label="Move selected messages"
-					/>
-				)}
-				<button
-					type="button"
-					onClick={isBusy ? undefined : onDelete}
-					className={cn(
-						"min-h-11 min-w-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors",
-						"bg-danger text-canvas hover:bg-danger/90",
+					{selectAll && (
+						// biome-ignore lint/a11y/noLabelWithoutControl: the label wraps Checkbox's own input, giving the 20px control a 44px hit area
+						<label className="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>
 					)}
-					aria-label="Delete selected messages"
-					aria-busy={isDeleting}
-				>
-					{isDeleting ? (
-						<Loader2 className="size-4 animate-spin" />
-					) : (
-						<Trash2 className="size-4" />
-					)}
-					<span className="hidden sm:inline">
-						{isDeleting ? "Deleting..." : "Delete"}
+					<span className="text-sm font-medium">
+						{statusLabel ?? defaultLabel}
 					</span>
-				</button>
+					{moveDisabledHint && !notice && (
+						<span
+							className="text-xs text-fg-muted"
+							role="status"
+							aria-live="polite"
+						>
+							{moveDisabledHint}
+						</span>
+					)}
+				</div>
+				<div className="flex items-center gap-1">
+					{canShowOrganize && onOrganize && (
+						<button
+							type="button"
+							onClick={isBusy ? undefined : onOrganize}
+							className="min-h-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors hover:bg-surface-raised"
+							aria-label="Organize similar messages"
+						>
+							<Sparkles className="size-4" />
+							<span className="hidden sm:inline">Organize</span>
+						</button>
+					)}
+					{showVerbs && onMarkAsRead && (
+						<button
+							type="button"
+							onClick={isBusy ? undefined : onMarkAsRead}
+							className="min-h-11 min-w-11 inline-flex items-center justify-center rounded text-sm font-medium transition-colors hover:bg-surface-raised"
+							aria-label="Mark as read"
+							aria-busy={isBusy}
+						>
+							<MailOpen className="size-4" />
+						</button>
+					)}
+					{showVerbs &&
+						canShowMove &&
+						onMove &&
+						accountId &&
+						currentMailboxId && (
+							<MoveToTrigger
+								accountId={accountId}
+								currentMailboxId={currentMailboxId}
+								onMove={isBusy ? () => {} : onMove}
+								disabledHint={moveDisabledHint}
+								variant="icon-only"
+								label="Move selected messages"
+							/>
+						)}
+					{showVerbs && (
+						<button
+							type="button"
+							onClick={isBusy ? undefined : onDelete}
+							className={cn(
+								"min-h-11 min-w-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors",
+								"bg-danger text-canvas hover:bg-danger/90",
+							)}
+							aria-label="Delete selected messages"
+							aria-busy={isDeleting}
+						>
+							{isDeleting ? (
+								<Loader2 className="size-4 animate-spin" />
+							) : (
+								<Trash2 className="size-4" />
+							)}
+							<span className="hidden sm:inline">
+								{isDeleting ? "Deleting..." : "Delete"}
+							</span>
+						</button>
+					)}
+				</div>
 			</div>
+			{progress && (
+				<div className="px-3 pb-2">
+					<ProgressBar
+						value={progress.value}
+						max={progress.max}
+						tone={progress.tone}
+					/>
+				</div>
+			)}
+			{notice && (
+				<Banner
+					tone={notice.tone}
+					variant="soft"
+					role="status"
+					aria-live="polite"
+					className="mx-3 mb-2"
+				>
+					<div className="flex items-center justify-between gap-2">
+						{notice.text && <span>{notice.text}</span>}
+						{notice.action && (
+							<button
+								type="button"
+								onClick={notice.action.onClick}
+								className="-my-1 min-h-11 shrink-0 inline-flex items-center px-3 rounded text-sm font-medium transition-colors hover:bg-surface-raised"
+							>
+								{notice.action.label}
+							</button>
+						)}
+					</div>
+				</Banner>
+			)}
 		</div>
 	);
 };

package/src/components/mail/organize/MobileOrganizeFlow.render.test.ts

@@ -0,0 +1,45 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ErrorBannerProvider } from "@/components/ui/ErrorBannerProvider";
+import type { OrganizeEntry } from "@/lib/organize/mobile-organize-flow";
+import { MobileOrganizeFlow } from "./MobileOrganizeFlow";
+
+// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
+// runtime, which references a global `React`. Vite uses the automatic runtime,
+// so this shim only exists for the SSR test harness.
+(globalThis as { React?: typeof React }).React = React;
+
+const render = (entry: OrganizeEntry) =>
+	renderToString(
+		createElement(
+			QueryClientProvider,
+			{ client: new QueryClient() },
+			createElement(
+				ErrorBannerProvider,
+				null,
+				createElement(MobileOrganizeFlow, {
+					entry,
+					accountId: "acc-1",
+					mailboxId: "mbx-inbox",
+					selectedMessageIds: ["msg-1", "msg-2"],
+					onClose: () => undefined,
+				}),
+			),
+		) as never,
+	);
+
+describe("MobileOrganizeFlow", () => {
+	it("select-similar opens on the widening state before the preview resolves", () => {
+		const html = render("select-similar");
+		assert.match(html, /Finding similar messages/);
+	});
+
+	it("something-else opens on the shortcuts + plain-language input", () => {
+		const html = render("something-else");
+		assert.match(html, /What should Remit do\?/);
+		assert.match(html, /Tell Remit what to do/);
+	});
+});

package/src/components/mail/organize/MobileOrganizeFlow.tsx

@@ -0,0 +1,138 @@
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { BottomSheet, Button } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useOrganizePreview } from "@/hooks/useOrganizePreview";
+import { getMailboxDisplayName } from "@/lib/folder-roles";
+import { buildMoveTargets } from "@/lib/move-targets";
+import {
+	type OrganizeEntry,
+	type OrganizeSeed,
+	type PreviewStatus,
+	resolveOrganizeStage,
+} from "@/lib/organize/mobile-organize-flow";
+import { OrganizePanel } from "./OrganizePanel";
+import { SomethingElsePanel } from "./SomethingElsePanel";
+
+interface MobileOrganizeFlowProps {
+	entry: OrganizeEntry;
+	accountId: string;
+	mailboxId: string;
+	selectedMessageIds: string[];
+	junkMailboxId?: string;
+	/** Close the flow and return to the list — dismiss, "Not now", and Done all use it. */
+	onClose: () => void;
+}
+
+const previewStatusOf = (
+	isError: boolean,
+	isPending: boolean,
+	matchedCount: number | undefined,
+): PreviewStatus => {
+	if (isError) return "error";
+	if (isPending) return "pending";
+	return matchedCount !== undefined ? "success" : "idle";
+};
+
+/**
+ * The guided select-similar → organize flow, the mobile home for organizing
+ * (issue #211). Entered from the selection sheet, it widens the selection once
+ * with the read-only matcher (POST /organize/preview), shows a brief widening
+ * state, and renders the organize sentence inside a bottom sheet on that
+ * widened set — the same {@link OrganizePanel} the desktop dialog uses, so the
+ * two never drift. "Something else" collects a folder/scope seed first; a widen
+ * that matches nothing falls back to organizing the selection. Desktop keeps
+ * its `OrganizeDialog` — this is the touch surface only.
+ */
+export function MobileOrganizeFlow({
+	entry,
+	accountId,
+	mailboxId,
+	selectedMessageIds,
+	junkMailboxId,
+	onClose,
+}: MobileOrganizeFlowProps) {
+	const anchorMessageId = selectedMessageIds[0];
+	const [seed, setSeed] = useState<OrganizeSeed | undefined>();
+
+	const { preview, matchedCount, isPending, isError, error } =
+		useOrganizePreview(accountId);
+
+	useEffect(() => {
+		if (!anchorMessageId) return;
+		preview({ anchorMessageId, matchOperator: "And", literalClauses: [] });
+	}, [anchorMessageId, preview]);
+
+	const { data: mailboxesData } = useQuery({
+		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+		staleTime: Number.POSITIVE_INFINITY,
+	});
+
+	const folderOptions = useMemo(
+		() =>
+			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
+				id: mailbox.mailboxId,
+				label: getMailboxDisplayName(mailbox.fullPath),
+			})),
+		[mailboxesData?.items],
+	);
+
+	const stage = resolveOrganizeStage({
+		entry,
+		hasSeed: seed !== undefined,
+		previewStatus: previewStatusOf(isError, isPending, matchedCount),
+		matchedCount,
+	});
+
+	return (
+		<BottomSheet open onClose={onClose} dismissLabel="Dismiss organize">
+			{stage.kind === "something-else" && (
+				<SomethingElsePanel
+					folderOptions={folderOptions}
+					junkMailboxId={junkMailboxId}
+					onSeed={setSeed}
+				/>
+			)}
+
+			{stage.kind === "widening" && <WideningState />}
+
+			{stage.kind === "error" && (
+				<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
+					<p className="text-sm font-medium text-danger">
+						Couldn't find similar messages
+					</p>
+					<p className="max-w-xs text-xs text-fg-muted">
+						{error instanceof Error ? error.message : "Please try again."}
+					</p>
+					<Button variant="ghost" onClick={onClose} className="mt-2">
+						Close
+					</Button>
+				</div>
+			)}
+
+			{stage.kind === "organize" && (
+				<OrganizePanel
+					accountId={accountId}
+					mailboxId={mailboxId}
+					selectedMessageIds={selectedMessageIds}
+					anchorMessageId={anchorMessageId}
+					matchedCount={stage.matchedCount}
+					initialScope={seed?.scope}
+					seedMailboxId={seed?.moveMailboxId}
+					fallback={stage.fallback}
+					onClose={onClose}
+				/>
+			)}
+		</BottomSheet>
+	);
+}
+
+function WideningState() {
+	return (
+		<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
+			<Loader2 className="size-8 animate-spin text-accent-2" />
+			<p className="text-sm font-medium text-fg">Finding similar messages…</p>
+		</div>
+	);
+}