@remit/web-client 0.0.90 → 0.0.91

package/src/components/mail/MessageList.tsx

@@ -5,8 +5,7 @@ import {
 	type MessageListFilter,
 	MessageListLoadingMore,
 	MessageListPane,
-	SELECTION_SHEET_TEASER_HEIGHT,
-	SelectionSheet,
+	SelectionTopBar,
 } from "@remit/ui";
 import { useBlocker, useNavigate } from "@tanstack/react-router";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -22,6 +21,7 @@ import {
 	useEscalatedActions,
 } from "@/hooks/useEscalatedActions";
 import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
+import { useLabelList } from "@/hooks/useLabels";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import {
@@ -46,19 +46,16 @@ import {
 } from "@/lib/escalation-label";
 import { formatDeleteToTrashTitle, formatNumber } from "@/lib/format";
 import { tabStopId } from "@/lib/list-focus";
+import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import {
 	deriveIsMultiSelectMode,
 	shouldExitSelectionOnNavigate,
 } from "@/lib/selection-mode";
-import {
-	resolveSelectionSheetMode,
-	shouldShowSelectionSheet,
-} from "@/lib/selection-sheet-mode";
 import { cn } from "@/lib/utils";
+import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MoveToTrigger } from "./MoveToTrigger";
 import { MobileOrganizeFlow } from "./organize/MobileOrganizeFlow";
 import { OrganizeDialog } from "./organize/OrganizeDialog";
-import { SelectionToolbar } from "./SelectionToolbar";
 import { SwipeableMessageRow } from "./SwipeableMessageRow";
 
 /**
@@ -243,6 +240,8 @@ export const MessageList = ({
 		"select-similar" | "something-else" | null
 	>(null);
 	const isSearching = !!searchQuery?.trim();
+	const listHeaderChrome = useListHeaderChrome();
+	const { labels } = useLabelList(accountId);
 
 	// Roving focus cursor (#429): the keyboard "where am I" pointer, distinct
 	// from the open thread (`selectedMessageId` in the URL). j/k move this
@@ -1282,37 +1281,15 @@ export const MessageList = ({
 							}
 						: undefined;
 
-	// The mobile sheet has no inline hint slot, so the cross-account move
-	// restriction rides in as the lowest-priority notice.
-	const mobileNotice =
+	// The bar shows one notice at a time, so the cross-account move restriction
+	// rides in behind the escalation states.
+	const selectionNotice =
 		escalationNotice ??
 		(moveDisabledHint
 			? { tone: "warning" as const, text: moveDisabledHint }
 			: 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(
-			selectionCount,
-			mobileMode,
-			mobileNotice !== undefined,
-		);
-
-	const mobileMoveSlot =
+	const selectionMoveSlot =
 		(onMoveMessages || escalation.phase.kind === "escalated") &&
 		accountId &&
 		mailboxId ? (
@@ -1325,9 +1302,8 @@ export const MessageList = ({
 			/>
 		) : undefined;
 
-	// The guided organize flow (issue #211) overlays the same positioned pane
-	// ancestor as the sheet, so it is rendered from the sheet slot. The sheet
-	// stays mounted underneath as the flow's dimmed backdrop.
+	// The guided organize flow (issue #211) covers the pane, which is its
+	// positioned ancestor.
 	const mobileOrganizeFlow =
 		mobileOrganizeEntry && accountId && !isDesktop && selectedCount > 0 ? (
 			<MobileOrganizeFlow
@@ -1343,72 +1319,66 @@ export const MessageList = ({
 			/>
 		) : undefined;
 
-	const mobileSelectionSheet = showMobileSheet ? (
-		<SelectionSheet
+	// Organize acts on the materialized selection within one account, so it is
+	// withdrawn the moment the selection escalates to a predicate or a run
+	// takes over — both of which name themselves through `statusLabel`.
+	const canOrganize =
+		!!accountId && !!mailboxId && !moveDisabledHint && !selectionStatusLabel;
+
+	// One selection surface at every width, always mounted: it is the list
+	// header. With nothing ticked it names the mailbox and carries the header's
+	// own chrome; from the first ticked row the count and the verbs take that
+	// title's place, and the escalation states (issue #212) — the offer,
+	// counting, the escalated predicate, a chunked run's progress — ride on the
+	// same bar rather than a second one.
+	const activeSelectionBar = (
+		<SelectionTopBar
+			title={listHeaderChrome.title || listTitle}
+			navSlot={listHeaderChrome.navSlot}
+			titleMeta={listHeaderChrome.titleMeta}
+			searchSlot={listHeaderChrome.searchSlot}
+			searchField={listHeaderChrome.searchField}
+			idleSlot={listHeaderChrome.makeFilterSlot}
 			count={selectionCount}
-			mode={mobileMode}
 			onCancel={handleSelectionCancel}
 			onDelete={handleSelectionDelete}
+			onOrganize={
+				canOrganize
+					? () =>
+							isDesktop
+								? setOrganizeOpen(true)
+								: setMobileOrganizeEntry("select-similar")
+					: undefined
+			}
 			onJunk={
 				junkMailboxId && junkMailboxId !== mailboxId && !moveDisabledHint
 					? handleJunk
 					: undefined
 			}
 			onMarkRead={handleMarkAsRead}
-			onSelectSimilar={
-				accountId ? () => setMobileOrganizeEntry("select-similar") : undefined
-			}
 			onSomethingElse={
-				accountId ? () => setMobileOrganizeEntry("something-else") : undefined
+				canOrganize && !isDesktop
+					? () => setMobileOrganizeEntry("something-else")
+					: undefined
+			}
+			moveSlot={selectionMoveSlot}
+			overflowSlot={
+				accountId && mailboxId && selectedCount > 0 && labels.length > 0 ? (
+					<LabelApplyTrigger
+						accountId={accountId}
+						mailboxId={mailboxId}
+						messageIds={Array.from(selectedIds)}
+					/>
+				) : undefined
 			}
-			moveSlot={mobileMoveSlot}
 			isBusy={selectionIsBusy}
+			isCounting={escalation.phase.kind === "counting"}
 			selectAll={selectionSelectAll}
 			statusLabel={selectionStatusLabel}
 			progress={selectionProgress}
-			notice={mobileNotice}
+			notice={selectionNotice}
 		/>
-	) : undefined;
-
-	// Both mobile overlays share the pane's positioned ancestor via the sheet
-	// slot: the peeking sheet, and the guided organize flow above it.
-	const mobileSelectionSurface =
-		mobileSelectionSheet || mobileOrganizeFlow ? (
-			<>
-				{mobileSelectionSheet}
-				{mobileOrganizeFlow}
-			</>
-		) : undefined;
-
-	// Desktop selection toolbar replaces the pane header when any rows are
-	// selected. It gains the same search-escalation states the mobile sheet
-	// carries (issue #212) — the offer, counting, the escalated predicate and a
-	// chunked run's progress — from the shared derivations above; the
-	// cross-account move hint stays inline (the toolbar has a slot for it).
-	const desktopSelectionBar =
-		hasSelection && isDesktop ? (
-			<SelectionToolbar
-				selectedCount={selectionCount}
-				onDelete={handleSelectionDelete}
-				onClearSelection={handleSelectionCancel}
-				onMarkAsRead={handleMarkAsRead}
-				onMove={onMoveMessages ? handleMoveSelected : undefined}
-				onOrganize={() => setOrganizeOpen(true)}
-				isDeleting={isDeleting}
-				isMoving={isMoving}
-				accountId={accountId}
-				currentMailboxId={mailboxId}
-				selectedMessageIds={Array.from(selectedIds)}
-				moveDisabledHint={moveDisabledHint}
-				selectAll={escalationEnabled ? selectionSelectAll : undefined}
-				statusLabel={selectionStatusLabel}
-				isCounting={escalation.phase.kind === "counting"}
-				progress={selectionProgress}
-				notice={escalationNotice}
-			/>
-		) : 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
@@ -1440,13 +1410,6 @@ 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. */}
@@ -1531,7 +1494,9 @@ export const MessageList = ({
 				listMeta={listMeta}
 				sections={sections}
 				flatList
-				listState={listState}
+				// The results panel is a body, not a list state: it stands in for the
+				// rows and must not fall behind a skeleton while the query re-keys.
+				listState={listHeaderChrome.searchResults ? "ready" : listState}
 				searchQuery={isSearching ? searchQuery : undefined}
 				listFilter={listFilter}
 				listScopeLabel={listScopeLabel}
@@ -1551,8 +1516,11 @@ export const MessageList = ({
 				isDesktop={isDesktop}
 				hideHeader={hideHeader}
 				selectionBar={activeSelectionBar}
-				selectionSheet={mobileSelectionSurface}
-				listBody={listState === "ready" ? virtualBody : undefined}
+				paneOverlay={mobileOrganizeFlow}
+				listBody={
+					listHeaderChrome.searchResults ??
+					(listState === "ready" ? virtualBody : undefined)
+				}
 			/>
 			<ConfirmDialog
 				isOpen={pendingDelete !== null}

package/src/components/mail/MoveToTrigger.tsx

@@ -180,7 +180,7 @@ export const MoveToTrigger = ({
 			title={disabledHint}
 			className={variant === "icon-only" ? ICON_TRIGGER : COMPACT_TRIGGER}
 		>
-			<FolderInput className="size-4" />
+			<FolderInput className={variant === "icon-only" ? "size-5" : "size-4"} />
 			{variant === "compact" && <span className="hidden sm:inline">Move</span>}
 		</button>
 	);

package/src/components/mail/ThreadListInteraction.test.ts

@@ -69,6 +69,7 @@ function mountList(options: {
 	initialIds: string[];
 	onDeleteMessages?: (ids: string[]) => void;
 }) {
+	const onDeleteMessages = options.onDeleteMessages ?? (() => undefined);
 	const commandsRef = createRef<MessageListCommands | null>();
 	let setIds: ((ids: string[]) => void) | undefined;
 	const Harness = () => {
@@ -79,7 +80,7 @@ function mountList(options: {
 			{
 				selectedMessageId: undefined,
 				onOpen: () => undefined,
-				onDeleteMessages: options.onDeleteMessages,
+				onDeleteMessages,
 				commandsRef,
 			},
 			...rowElements(ids),
@@ -222,7 +223,12 @@ function mountSelectableList(initialIds: string[]) {
 		setIds = set;
 		return createElement(
 			ThreadListInteraction,
-			{ selectedMessageId: undefined, onOpen: () => undefined, commandsRef },
+			{
+				selectedMessageId: undefined,
+				onOpen: () => undefined,
+				onDeleteMessages: () => undefined,
+				commandsRef,
+			},
 			...rowElements(ids),
 			createElement(Probe, { key: "probe" }),
 		);

package/src/components/mail/ThreadListInteraction.tsx

@@ -16,6 +16,7 @@
  * are not rendered: focus stops moving, the highlight disappears, and the next
  * verb acts on a message the user cannot see.
  */
+import { SelectionTopBar } from "@remit/ui";
 import {
 	createContext,
 	type ReactNode,
@@ -34,9 +35,9 @@ import { useIsDesktop } from "@/hooks/useMediaQuery";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import { formatDeleteToTrashTitle } from "@/lib/format";
 import { tabStopId } from "@/lib/list-focus";
+import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import type { MessageListCommands } from "./MessageList";
 import type { MessageRowSelection } from "./MessageRow";
-import { SelectionToolbar } from "./SelectionToolbar";
 
 interface ThreadRowInteraction {
 	focused: boolean;
@@ -142,7 +143,7 @@ interface ThreadListInteractionProps {
 	/** Opens a row — the same navigation a click performs. */
 	onOpen: (messageId: string, options?: OpenMessageOptions) => void;
 	/** Deletes a set of messages. Absent disables the delete key for this list. */
-	onDeleteMessages?: (messageIds: string[]) => void;
+	onDeleteMessages: (messageIds: string[]) => void;
 	isDeleting?: boolean;
 	commandsRef?: RefObject<MessageListCommands | null>;
 	onTriageContextChange?: (context: TriageContextUpdate) => void;
@@ -241,14 +242,11 @@ export function ThreadListInteraction({
 	// the same contract the mailbox list's delete has.
 	const [pendingDelete, setPendingDelete] = useState<string[] | null>(null);
 
-	const requestDeleteIds = useCallback(
-		(ids: string[]): boolean => {
-			if (!onDeleteMessages || ids.length === 0) return false;
-			setPendingDelete(ids);
-			return true;
-		},
-		[onDeleteMessages],
-	);
+	const requestDeleteIds = useCallback((ids: string[]): boolean => {
+		if (ids.length === 0) return false;
+		setPendingDelete(ids);
+		return true;
+	}, []);
 
 	const requestDeleteSelection = useCallback(() => {
 		requestDeleteIds(Array.from(selectedIds));
@@ -272,7 +270,7 @@ export function ThreadListInteraction({
 
 	const confirmDelete = useCallback(() => {
 		if (pendingDelete === null) return;
-		onDeleteMessages?.(pendingDelete);
+		onDeleteMessages(pendingDelete);
 		setPendingDelete(null);
 		exitSelection();
 	}, [pendingDelete, onDeleteMessages, exitSelection]);
@@ -416,25 +414,35 @@ export function ThreadListInteraction({
 }
 
 interface ThreadListSelectionBarProps {
+	/** The view's own name, used until the enclosing header supplies one. */
+	title: string;
 	onMarkAsRead?: (messageIds: string[]) => void;
 	isDeleting?: boolean;
 }
 
 /**
- * Reduced selection bar for Flagged, mounted inside `ThreadListInteraction`.
+ * The starred list's header, which is also its selection bar — the same
+ * surface the mailbox list and the brief raise.
  *
- * Move is not offered here: Flagged spans accounts and mailboxes, and a move
- * picker needs one account and one source folder to be honest about where the
- * messages go. Delete and mark-read carry no such scope. The brief resolves
- * that scope from the selection instead and mounts the mailbox list's full
- * `SelectionToolbar` — see `DailyBrief`.
+ * Move is not offered here: starred mail spans accounts and mailboxes, and a
+ * move picker needs one account and one source folder to be honest about where
+ * the messages go. Delete and mark-read carry no such scope.
  */
 export function ThreadListSelectionBar({
+	title,
 	onMarkAsRead,
 	isDeleting,
 }: ThreadListSelectionBarProps) {
-	const { selectedIds, selectedCount, exitSelection, requestDeleteSelection } =
-		useThreadListSelection();
+	const chrome = useListHeaderChrome();
+	const {
+		selectedIds,
+		selectedCount,
+		exitSelection,
+		requestDeleteSelection,
+		orderedIds,
+		allSelected,
+		toggleAllLoaded,
+	} = useThreadListSelection();
 
 	const handleMarkAsRead = useCallback(() => {
 		onMarkAsRead?.(Array.from(selectedIds));
@@ -442,12 +450,27 @@ export function ThreadListSelectionBar({
 	}, [onMarkAsRead, selectedIds, exitSelection]);
 
 	return (
-		<SelectionToolbar
-			selectedCount={selectedCount}
+		<SelectionTopBar
+			title={chrome.title || title}
+			navSlot={chrome.navSlot}
+			titleMeta={chrome.titleMeta}
+			searchSlot={chrome.searchSlot}
+			searchField={chrome.searchField}
+			idleSlot={chrome.makeFilterSlot}
+			count={selectedCount}
+			onCancel={exitSelection}
 			onDelete={requestDeleteSelection}
-			onClearSelection={exitSelection}
-			onMarkAsRead={onMarkAsRead ? handleMarkAsRead : undefined}
-			isDeleting={isDeleting}
+			onMarkRead={onMarkAsRead ? handleMarkAsRead : undefined}
+			isBusy={isDeleting}
+			selectAll={
+				orderedIds.length > 0
+					? {
+							checked: allSelected,
+							indeterminate: selectedCount > 0 && !allSelected,
+							onChange: toggleAllLoaded,
+						}
+					: undefined
+			}
 		/>
 	);
 }

package/src/hooks/useInitialSyncProgress.render.test.ts

@@ -69,6 +69,9 @@ function Probe({
 /** The account id in `/accounts/{id}/sync/status`. */
 const accountOf = (path: string): string => path.split("/")[2] ?? "";
 
+const progress = (dom: DomHarness): InitialSyncProgress =>
+	JSON.parse(dom.text());
+
 const mount = async (
 	accountIds: string[],
 	answer: (accountId: string) => unknown,
@@ -77,14 +80,17 @@ const mount = async (
 	http = mockFetch((call) => answer(accountOf(call.path)));
 	harness = createDomHarness();
 	harness.renderApp(createElement(Probe, { accountIds, enabled }));
-	await harness.flush();
-	await harness.flush();
+	// Settle on the hook's own answer rather than on a fixed number of turns:
+	// a query that lands on a timer instead of a microtask needs real time to
+	// pass, and a loaded machine is where that difference shows up.
+	for (let turn = 0; turn < 20; turn += 1) {
+		await harness.flush();
+		if (progress(harness).resolved) break;
+		await harness.wait(1);
+	}
 	return harness;
 };
 
-const progress = (dom: DomHarness): InitialSyncProgress =>
-	JSON.parse(dom.text());
-
 describe("isSyncingPhase", () => {
 	it("is true only for the phases a running sync round writes", () => {
 		assert.equal(isSyncingPhase("discovering_mailboxes"), true);

package/src/lib/list-header-chrome.ts

@@ -0,0 +1,50 @@
+import { createContext, type ReactNode, useContext } from "react";
+
+/**
+ * The list header's own chrome, as rendered nodes.
+ *
+ * The list header and the selection bar are one surface (#480), so the nav
+ * button, the unread count and the search affordance belong on the same row as
+ * the count and the verbs. That row is rendered by the body — the list owns the
+ * selection — while the search state it needs belongs to `MailListHeader`.
+ * Handing the built nodes down keeps one definition of the chrome and keeps the
+ * bar's two states in the same commit: nothing here is derived from a state
+ * update that lands after paint.
+ */
+export interface ListHeaderChrome {
+	/** The view's name, carried while nothing is ticked. */
+	title: string;
+	/** Hamburger for the nav slide-over; absent where the nav is a pane. */
+	navSlot: ReactNode;
+	/** Unread count, beside the title. */
+	titleMeta: ReactNode;
+	/** Magnifier that opens search, on the tiers whose header owns a field. */
+	searchSlot: ReactNode;
+	/** The expanded field, which takes the title's place for as long as it is up. */
+	searchField: ReactNode;
+	/**
+	 * The read-only two-engine results panel, when a query is being typed and
+	 * this view answers it with the panel rather than its own rows. The body
+	 * renders it in place of its list; `MailListHeader` cannot swap the body
+	 * out from above, because the header is inside it.
+	 */
+	searchResults: ReactNode;
+	/** The search's make-this-a-filter row, up only while nothing is ticked. */
+	makeFilterSlot: ReactNode;
+}
+
+const NO_CHROME: ListHeaderChrome = {
+	title: "",
+	navSlot: null,
+	titleMeta: null,
+	searchSlot: null,
+	searchField: null,
+	searchResults: null,
+	makeFilterSlot: null,
+};
+
+export const ListHeaderChromeContext =
+	createContext<ListHeaderChrome>(NO_CHROME);
+
+export const useListHeaderChrome = (): ListHeaderChrome =>
+	useContext(ListHeaderChromeContext);