@remit/web-client 0.0.55 → 0.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/MessageList.selection.test.ts

@@ -70,13 +70,14 @@ describe("MessageList escalated actions", () => {
 	});
 
 	it("keeps mark-read and the move slot on an escalated selection", () => {
+		// The mobile sheet always carries the mark-read verb (it hides it itself
+		// while counting or busy); an escalated selection must never lose it.
+		assert.match(source, /onMarkRead=\{handleMarkAsRead\}/);
+		// The move slot is offered for a bounded selection or an escalated one —
+		// #114's rule that an escalated selection is never delete-only.
 		assert.match(
 			source,
-			/onMarkRead=\{\s*escalation\.phase\.kind === "counting" \? undefined : handleMarkAsRead/,
-		);
-		assert.match(
-			source,
-			/moveSlot=\{\s*escalation\.phase\.kind !== "counting"/,
+			/onMoveMessages \|\| escalation\.phase\.kind === "escalated"/,
 		);
 	});
 

package/src/components/mail/MessageList.tsx

@@ -3,15 +3,17 @@ import {
 	Banner,
 	type Density,
 	MessageListPane,
-	SelectionTopBar,
+	SELECTION_SHEET_TEASER_HEIGHT,
+	SelectionSheet,
 } from "@remit/ui";
 import { useBlocker, useNavigate } from "@tanstack/react-router";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { Search, Sparkles } from "lucide-react";
+import { Search } from "lucide-react";
 import type { RefObject } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
+import { useJunkMailbox } from "@/hooks/useArchiveMailbox";
 import {
 	type EscalatedAction,
 	type EscalationSearchQuery,
@@ -45,6 +47,10 @@ import {
 	deriveIsMultiSelectMode,
 	shouldExitSelectionOnNavigate,
 } from "@/lib/selection-mode";
+import {
+	resolveSelectionSheetMode,
+	shouldShowSelectionSheet,
+} from "@/lib/selection-sheet-mode";
 import { cn } from "@/lib/utils";
 import { MoveToTrigger } from "./MoveToTrigger";
 import { OrganizeDialog } from "./organize/OrganizeDialog";
@@ -244,6 +250,10 @@ export const MessageList = ({
 	// Swipe-to-read toggle hook
 	const { toggleReadFor } = useToggleReadFor({ mailboxId });
 
+	// The Junk quick action moves the selection to the account's appointed Junk
+	// mailbox — the message-flags API has no `$Junk` field, so "junk" is a move.
+	const { junkMailboxId } = useJunkMailbox(accountId);
+
 	// Selection state
 	const {
 		selectedIds,
@@ -742,6 +752,14 @@ export const MessageList = ({
 		],
 	);
 
+	// Junk quick action (mobile sheet): move the selection to the appointed Junk
+	// mailbox. Reuses the same bounded/escalated move path as any other move, so
+	// the chunked run and the cross-account guard apply unchanged.
+	const handleJunk = useCallback(() => {
+		if (!junkMailboxId) return;
+		handleMoveSelected(junkMailboxId);
+	}, [junkMailboxId, handleMoveSelected]);
+
 	// Cross-account guard: every selected thread row must belong to the
 	// same account as the current mailbox. The list is already scoped to
 	// one mailbox so in practice this is always single-account, but we
@@ -1174,61 +1192,73 @@ export const MessageList = ({
 							? { tone: "warning" as const, text: moveDisabledHint }
 							: undefined;
 
-	// Mobile multi-select bar replaces the pane header during selection mode.
-	const mobileSelectionBar =
-		isMultiSelectMode && !isDesktop ? (
-			<SelectionTopBar
-				count={mobileCount}
-				onCancel={handleMobileCancel}
-				onDelete={handleMobileDelete}
-				onMarkRead={
-					escalation.phase.kind === "counting" ? undefined : handleMarkAsRead
-				}
-				isBusy={mobileIsBusy}
-				isCounting={escalation.phase.kind === "counting"}
-				statusLabel={mobileStatusLabel}
-				selectAll={mobileSelectAll}
-				progress={
-					escalation.runningAction && escalation.progress
-						? {
-								value: escalation.progress.done,
-								max: escalation.progress.total,
-								tone: bulkActionProgressTone(escalation.runningAction.kind),
-							}
-						: undefined
-				}
-				notice={mobileNotice}
-				moveSlot={
-					escalation.phase.kind !== "counting" &&
-					!escalation.isRunning &&
-					(onMoveMessages || escalation.phase.kind === "escalated") &&
-					accountId &&
-					mailboxId ? (
-						<>
-							{escalation.phase.kind === "idle" && !moveDisabledHint && (
-								<button
-									type="button"
-									onClick={() => setOrganizeOpen(true)}
-									className="min-h-11 min-w-11 inline-flex shrink-0 items-center justify-center rounded text-fg-muted hover:bg-surface-raised"
-									aria-label="Organize similar messages"
-								>
-									<Sparkles className="size-4" />
-								</button>
-							)}
-							<MoveToTrigger
-								accountId={accountId}
-								currentMailboxId={mailboxId}
-								onMove={isDeleting || isMoving ? () => {} : handleMoveSelected}
-								disabledHint={moveDisabledHint}
-								label="Move selected messages"
-							/>
-						</>
-					) : undefined
-				}
+	// Mobile: which content the peeking sheet routes to, from the escalation
+	// machinery. `running` (a chunked delete/move/mark-read) and `counting` (a
+	// predicate still paging) replace the idle quick actions with status and
+	// progress; `escalated` keeps the verbs over the whole predicate.
+	const mobileMode = resolveSelectionSheetMode({
+		isRunning: escalation.isRunning,
+		isCounting: escalation.phase.kind === "counting",
+		isEscalated: escalation.phase.kind === "escalated",
+	});
+
+	// The sheet is the sole mobile selection surface. It rises at 2+ selected
+	// (the prototype threshold) or in any non-idle escalation state — a single
+	// selected row enters selection mode without raising it, matching today.
+	const showMobileSheet =
+		!isDesktop &&
+		isMultiSelectMode &&
+		shouldShowSelectionSheet(
+			mobileCount,
+			mobileMode,
+			mobileNotice !== undefined,
+		);
+
+	const mobileMoveSlot =
+		(onMoveMessages || escalation.phase.kind === "escalated") &&
+		accountId &&
+		mailboxId ? (
+			<MoveToTrigger
+				accountId={accountId}
+				currentMailboxId={mailboxId}
+				onMove={isDeleting || isMoving ? () => {} : handleMoveSelected}
+				disabledHint={moveDisabledHint}
+				label="Move selected messages"
 			/>
 		) : undefined;
 
-	const activeSelectionBar = desktopSelectionBar ?? mobileSelectionBar;
+	const mobileSelectionSheet = showMobileSheet ? (
+		<SelectionSheet
+			count={mobileCount}
+			mode={mobileMode}
+			onCancel={handleMobileCancel}
+			onDelete={handleMobileDelete}
+			onJunk={
+				junkMailboxId && junkMailboxId !== mailboxId && !moveDisabledHint
+					? handleJunk
+					: undefined
+			}
+			onMarkRead={handleMarkAsRead}
+			onSelectSimilar={accountId ? () => setOrganizeOpen(true) : undefined}
+			onSomethingElse={accountId ? () => setOrganizeOpen(true) : undefined}
+			moveSlot={mobileMoveSlot}
+			isBusy={mobileIsBusy}
+			selectAll={mobileSelectAll}
+			statusLabel={mobileStatusLabel}
+			progress={
+				escalation.runningAction && escalation.progress
+					? {
+							value: escalation.progress.done,
+							max: escalation.progress.total,
+							tone: bulkActionProgressTone(escalation.runningAction.kind),
+						}
+					: undefined
+			}
+			notice={mobileNotice}
+		/>
+	) : undefined;
+
+	const activeSelectionBar = desktopSelectionBar;
 
 	// Roving tabindex: exactly one row is in the tab order, so Tab moves focus
 	// into the list at the cursor and Shift+Tab moves back out to the side panel
@@ -1257,6 +1287,13 @@ export const MessageList = ({
 				aria-multiselectable
 				aria-label={listTitle}
 				className="flex-1 overflow-y-auto"
+				// Pad the list so its last rows clear the peeking teaser (~56px)
+				// rather than hiding behind it.
+				style={
+					showMobileSheet
+						? { paddingBottom: SELECTION_SHEET_TEASER_HEIGHT }
+						: undefined
+				}
 			>
 				{/* Virtualizer scaffolding — presentational so the listbox sees the
 				    rows as its options rather than these positioning wrappers. */}
@@ -1364,6 +1401,7 @@ export const MessageList = ({
 				isDesktop={isDesktop}
 				hideHeader={hideHeader}
 				selectionBar={activeSelectionBar}
+				selectionSheet={mobileSelectionSheet}
 				listBody={listState === "ready" ? virtualBody : undefined}
 			/>
 			<ConfirmDialog

package/src/lib/selection-sheet-mode.test.ts

@@ -0,0 +1,105 @@
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import {
+	resolveSelectionSheetMode,
+	SELECTION_SHEET_MIN_COUNT,
+	shouldShowSelectionSheet,
+} from "./selection-sheet-mode";
+
+describe("resolveSelectionSheetMode", () => {
+	test("is idle for a plain bounded selection", () => {
+		assert.equal(
+			resolveSelectionSheetMode({
+				isRunning: false,
+				isCounting: false,
+				isEscalated: false,
+			}),
+			"idle",
+		);
+	});
+
+	test("is escalated once the selection is the search predicate", () => {
+		assert.equal(
+			resolveSelectionSheetMode({
+				isRunning: false,
+				isCounting: false,
+				isEscalated: true,
+			}),
+			"escalated",
+		);
+	});
+
+	test("is counting while the predicate is still paging to a total", () => {
+		assert.equal(
+			resolveSelectionSheetMode({
+				isRunning: false,
+				isCounting: true,
+				isEscalated: false,
+			}),
+			"counting",
+		);
+	});
+
+	test("running wins over escalated — a chunked run is both", () => {
+		assert.equal(
+			resolveSelectionSheetMode({
+				isRunning: true,
+				isCounting: false,
+				isEscalated: true,
+			}),
+			"running",
+		);
+	});
+
+	test("running wins over counting", () => {
+		assert.equal(
+			resolveSelectionSheetMode({
+				isRunning: true,
+				isCounting: true,
+				isEscalated: false,
+			}),
+			"running",
+		);
+	});
+
+	test("counting wins over escalated", () => {
+		assert.equal(
+			resolveSelectionSheetMode({
+				isRunning: false,
+				isCounting: true,
+				isEscalated: true,
+			}),
+			"counting",
+		);
+	});
+});
+
+describe("shouldShowSelectionSheet", () => {
+	test("hides at a single selected row while idle", () => {
+		assert.equal(shouldShowSelectionSheet(1, "idle"), false);
+	});
+
+	test("shows at the two-row threshold", () => {
+		assert.equal(
+			shouldShowSelectionSheet(SELECTION_SHEET_MIN_COUNT, "idle"),
+			true,
+		);
+	});
+
+	test("shows for any non-idle state even below the threshold", () => {
+		assert.equal(shouldShowSelectionSheet(0, "counting"), true);
+		assert.equal(shouldShowSelectionSheet(1, "running"), true);
+		assert.equal(shouldShowSelectionSheet(0, "escalated"), true);
+	});
+
+	test("shows a pending notice at a single idle row so it is never dropped", () => {
+		// A bulk delete that leaves one message behind returns to idle at count 1
+		// with a "1 couldn't be deleted / Retry" notice; the escalation offer can
+		// likewise sit at one loaded row. The sheet must mount to surface either.
+		assert.equal(shouldShowSelectionSheet(1, "idle", true), true);
+	});
+
+	test("still hides a single idle row with no notice", () => {
+		assert.equal(shouldShowSelectionSheet(1, "idle", false), false);
+	});
+});

package/src/lib/selection-sheet-mode.ts

@@ -0,0 +1,49 @@
+import type { SelectionSheetMode } from "@remit/ui";
+
+/**
+ * Routes the mobile selection sheet to one of its four content states from the
+ * escalation machinery's flags. Pure so the routing — which is what decides
+ * whether the sheet shows idle quick actions or the counting / running /
+ * escalated status — is testable without the sheet or a DOM.
+ *
+ * Precedence, highest first:
+ * 1. `running` — a chunked delete/move/mark-read is in flight; progress owns
+ *    the sheet even over an escalated selection (an escalated run is both).
+ * 2. `counting` — a search predicate is still paging to its total.
+ * 3. `escalated` — the selection is the search predicate, not a loaded id set.
+ * 4. `idle` — a bounded selection with the quick actions and smart-flow rows.
+ */
+export const resolveSelectionSheetMode = (input: {
+	isRunning: boolean;
+	isCounting: boolean;
+	isEscalated: boolean;
+}): SelectionSheetMode => {
+	if (input.isRunning) return "running";
+	if (input.isCounting) return "counting";
+	if (input.isEscalated) return "escalated";
+	return "idle";
+};
+
+/**
+ * The count threshold the peeking teaser rises at — two or more selected, the
+ * prototype's threshold. Below it selection mode is still entered (rows show
+ * their checkboxes) but no sheet appears, matching today's single-select
+ * behaviour of leaving the list chrome alone.
+ */
+export const SELECTION_SHEET_MIN_COUNT = 2;
+
+/**
+ * Whether the mobile sheet should be mounted: two or more rows selected, or any
+ * non-idle escalation state (counting, running, escalated), or a pending notice
+ * that has to be surfaced. The last case is why a single-row selection can still
+ * raise the sheet — a bulk run that leaves exactly one message behind returns to
+ * idle at count 1 with a "1 couldn't be deleted / Retry" notice, and a search
+ * with one loaded row plus more matches carries the escalation offer at count 1.
+ * Suppressing the sheet there would drop the notice with no way to retry.
+ */
+export const shouldShowSelectionSheet = (
+	count: number,
+	mode: SelectionSheetMode,
+	hasNotice = false,
+): boolean =>
+	count >= SELECTION_SHEET_MIN_COUNT || mode !== "idle" || hasNotice;