@remit/web-client 0.0.90 → 0.0.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.90",
+  "version": "0.0.92",
   "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/DailyBrief.selection.test.ts

@@ -5,10 +5,9 @@ import { describe, it } from "node:test";
 import { fileURLToPath } from "node:url";
 
 /**
- * The brief raises two selection surfaces — the desktop toolbar and the touch
- * sheet — and they offer the same verbs. Select-all was wired into the sheet
- * only, so the same list could be selected whole on a phone and not on a
- * desktop (#453).
+ * The brief raises one selection surface at every width, and select-all is on
+ * it — wired into the touch sheet alone, the same list could be selected whole
+ * on a phone and not on a desktop (#453).
  *
  * As with `MessageList.selection.test.ts`, `DailyBrief` weaves routing, the
  * cursor and several data hooks together, so the rule is enforced by reading
@@ -27,23 +26,28 @@ const chromeBody = (): string => {
 };
 
 describe("the brief's select-all", () => {
-	it("reaches the desktop toolbar and the touch sheet from one derivation", () => {
+	it("reaches the one selection bar from one derivation", () => {
 		const body = chromeBody();
 		const derivations = body.match(/const selectAll = useMemo\(/g) ?? [];
-		assert.equal(
-			derivations.length,
-			1,
-			"one select-all, so the two surfaces cannot drift",
-		);
+		assert.equal(derivations.length, 1, "one select-all");
+		const bars = body.match(/<SelectionTopBar\b/g) ?? [];
+		assert.equal(bars.length, 1, "one surface, at every width (#480)");
 		const wired = body.match(/selectAll=\{selectAll\}/g) ?? [];
-		assert.equal(
-			wired.length,
-			2,
-			"both SelectionToolbar and SelectionSheet take it",
-		);
+		assert.equal(wired.length, 1, "the bar takes it");
 	});
 
 	it("is offered only when there are rows to select", () => {
 		assert.match(chromeBody(), /orderedIds\.length > 0/);
 	});
+
+	it("mounts the bar unconditionally — it is the list header (#480)", () => {
+		assert.match(
+			chromeBody(),
+			/const selectionBar = \(chrome: ListHeaderChrome\) => \(\s*<SelectionTopBar/,
+		);
+	});
+
+	it("keeps the free-text organize entry reachable, in the overflow", () => {
+		assert.match(chromeBody(), /onSomethingElse=\{/);
+	});
 });

package/src/components/mail/DailyBrief.tsx

@@ -16,9 +16,8 @@
  * the phone search takeover keeps its own copy of the filter sheet.
  *
  * Multi-select is the mailbox list's, not a copy of it: the same
- * `ThreadListInteraction` cursor and `useSelection` state, the same
- * `SelectionToolbar` replacing the pane header on desktop, and the same
- * peeking `SelectionSheet` on touch. A shift-range spans the rendered rows in
+ * `ThreadListInteraction` cursor and `useSelection` state, and the same
+ * `SelectionTopBar` in place of the pane header. A shift-range spans the rendered rows in
  * document order, so it crosses category sections exactly as the eye reads
  * them and never picks up a row hidden behind "Show N more" or a collapsed
  * header. Folder-scoped verbs (Move, Apply label, Organize) resolve their
@@ -43,9 +42,8 @@ import {
 	type FilterSheetProps,
 	type FilterSheetSource,
 	KeyboardHintBar,
-	SELECTION_SHEET_TEASER_HEIGHT,
 	type SearchResult,
-	SelectionSheet,
+	SelectionTopBar,
 	type ThreadRowData,
 	type ThreadSection,
 } from "@remit/ui";
@@ -65,6 +63,7 @@ import {
 	isSyncingPhase,
 	useInitialSyncProgress,
 } from "@/hooks/useInitialSyncProgress";
+import { useLabelList } from "@/hooks/useLabels";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
@@ -80,17 +79,17 @@ import {
 	toThreadRowData,
 } from "@/lib/brief";
 import { isServerError } from "@/lib/error-classifier";
+import type { ListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { relatedSearchResults, rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
-import { shouldShowSelectionSheet } from "@/lib/selection-sheet-mode";
+import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MailListHeader, type MailListHeaderProps } from "./MailListHeader";
 import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";
 import { MoveToTrigger } from "./MoveToTrigger";
 import { MobileOrganizeFlow } from "./organize/MobileOrganizeFlow";
 import { OrganizeDialog } from "./organize/OrganizeDialog";
-import { SelectionToolbar } from "./SelectionToolbar";
 import {
 	type OpenMessageOptions,
 	ThreadListInteraction,
@@ -290,7 +289,7 @@ interface BriefSelectionChromeProps {
 	/** Everything the header needs when no selection is active. */
 	header: Omit<
 		MailListHeaderProps,
-		"children" | "selectionBar" | "selectionSheet"
+		"children" | "selectionBar" | "paneOverlay"
 	>;
 	/** The rows the list is showing, for resolving the selection's scope. */
 	rows: readonly ThreadRowData[];
@@ -300,10 +299,9 @@ interface BriefSelectionChromeProps {
 }
 
 /**
- * The brief's selection chrome: the same two surfaces the mailbox list raises,
- * in the same places. Desktop replaces the pane header with `SelectionToolbar`;
- * touch leaves the header alone and raises the peeking `SelectionSheet` at two
- * or more selected. The selection itself comes from the enclosing
+ * The brief's selection chrome: the same surface the mailbox list raises, in
+ * the same place. The pane header carries the count and the verbs from the
+ * first ticked row. The selection itself comes from the enclosing
  * `ThreadListInteraction`, so the brief and the mailbox list run one model.
  */
 function BriefSelectionChrome({
@@ -328,6 +326,7 @@ function BriefSelectionChrome({
 		[rows, selectedIds],
 	);
 	const { junkMailboxId } = useJunkMailbox(scope.accountId);
+	const { labels } = useLabelList(scope.accountId);
 	const { moveMessages, isPending: isMoving } = useMoveMessages({
 		mailboxId: scope.mailboxId ?? "",
 		accountId: scope.accountId,
@@ -395,33 +394,65 @@ function BriefSelectionChrome({
 		[orderedIds.length, allSelected, selectedCount, toggleAllLoaded],
 	);
 
-	const selectionBar =
-		isDesktop && selectedCount > 0 ? (
-			<SelectionToolbar
-				selectedCount={selectedCount}
-				onDelete={requestDeleteSelection}
-				onClearSelection={exitSelection}
-				onMarkAsRead={onMarkMessagesRead ? handleMarkAsRead : undefined}
-				onMove={scoped ? handleMove : undefined}
-				onOrganize={() => setOrganizeOpen(true)}
-				isMoving={isMoving}
-				accountId={scope.accountId}
-				currentMailboxId={scope.mailboxId}
-				selectedMessageIds={selectedMessageIds}
-				moveDisabledHint={scope.moveDisabledHint}
-				selectAll={selectAll}
-			/>
-		) : undefined;
-
-	// The mobile sheet has no inline hint slot, so the scope restriction rides
-	// in as a notice — the same fold-in the mailbox list does.
+	// The bar shows one notice at a time, so the scope restriction rides in as
+	// a notice — the same fold-in the mailbox list does.
 	const notice = scope.moveDisabledHint
 		? { tone: "warning" as const, text: scope.moveDisabledHint }
 		: undefined;
-	const showSheet =
-		!isDesktop &&
-		selectedCount > 0 &&
-		shouldShowSelectionSheet(selectedCount, "idle", notice !== undefined);
+
+	const selectionBar = (chrome: ListHeaderChrome) => (
+		<SelectionTopBar
+			title={chrome.title}
+			navSlot={chrome.navSlot}
+			titleMeta={chrome.titleMeta}
+			searchSlot={chrome.searchSlot}
+			searchField={chrome.searchField}
+			idleSlot={chrome.makeFilterSlot}
+			count={selectedCount}
+			onCancel={exitSelection}
+			onDelete={requestDeleteSelection}
+			onOrganize={
+				scoped
+					? () =>
+							isDesktop
+								? setOrganizeOpen(true)
+								: setMobileOrganizeEntry("select-similar")
+					: undefined
+			}
+			onJunk={canJunk ? handleJunk : undefined}
+			onMarkRead={onMarkMessagesRead ? handleMarkAsRead : undefined}
+			onSomethingElse={
+				scoped && !isDesktop
+					? () => setMobileOrganizeEntry("something-else")
+					: undefined
+			}
+			moveSlot={
+				scoped && scope.accountId && scope.mailboxId ? (
+					<MoveToTrigger
+						accountId={scope.accountId}
+						currentMailboxId={scope.mailboxId}
+						onMove={isMoving ? () => {} : handleMove}
+						label="Move selected messages"
+					/>
+				) : undefined
+			}
+			overflowSlot={
+				scope.accountId &&
+				scope.mailboxId &&
+				selectedCount > 0 &&
+				labels.length > 0 ? (
+					<LabelApplyTrigger
+						accountId={scope.accountId}
+						mailboxId={scope.mailboxId}
+						messageIds={selectedMessageIds}
+					/>
+				) : undefined
+			}
+			isBusy={isMoving}
+			selectAll={selectAll}
+			notice={notice}
+		/>
+	);
 
 	const organizeFlow =
 		mobileOrganizeEntry &&
@@ -441,64 +472,14 @@ function BriefSelectionChrome({
 			/>
 		) : undefined;
 
-	const selectionSheet =
-		showSheet || organizeFlow ? (
-			<>
-				{showSheet && (
-					<SelectionSheet
-						count={selectedCount}
-						onCancel={exitSelection}
-						onDelete={requestDeleteSelection}
-						onJunk={canJunk ? handleJunk : undefined}
-						onMarkRead={onMarkMessagesRead ? handleMarkAsRead : undefined}
-						onSelectSimilar={
-							scoped
-								? () => setMobileOrganizeEntry("select-similar")
-								: undefined
-						}
-						onSomethingElse={
-							scoped
-								? () => setMobileOrganizeEntry("something-else")
-								: undefined
-						}
-						moveSlot={
-							scoped && scope.accountId && scope.mailboxId ? (
-								<MoveToTrigger
-									accountId={scope.accountId}
-									currentMailboxId={scope.mailboxId}
-									onMove={isMoving ? () => {} : handleMove}
-									label="Move selected messages"
-								/>
-							) : undefined
-						}
-						isBusy={isMoving}
-						selectAll={selectAll}
-						notice={notice}
-					/>
-				)}
-				{organizeFlow}
-			</>
-		) : undefined;
-
 	return (
 		<>
 			<MailListHeader
 				{...header}
 				selectionBar={selectionBar}
-				selectionSheet={selectionSheet}
+				paneOverlay={organizeFlow}
 			>
-				{/* Shrink the body by the teaser's height rather than letting the
-				    last rows hide behind it. */}
-				<div
-					className="h-full"
-					style={
-						showSheet
-							? { paddingBottom: SELECTION_SHEET_TEASER_HEIGHT }
-							: undefined
-					}
-				>
-					{children}
-				</div>
+				{children}
 			</MailListHeader>
 			{organizeOpen && scope.accountId && (
 				<OrganizeDialog
@@ -531,7 +512,7 @@ interface DailyBriefProps {
 	commandsRef?: RefObject<MessageListCommands | null>;
 	/** Cursor / selection / display order, reported up to the triage layer. */
 	onTriageContextChange?: (context: TriageContextUpdate) => void;
-	onDeleteMessages?: (messageIds: string[]) => void;
+	onDeleteMessages: (messageIds: string[]) => void;
 	onMarkMessagesRead?: (messageIds: string[]) => void;
 }
 

package/src/components/mail/FlaggedList.tsx

@@ -30,6 +30,7 @@ import {
 	toThreadRowData,
 } from "@/lib/brief";
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
@@ -55,7 +56,7 @@ interface FlaggedListProps {
 	commandsRef?: RefObject<MessageListCommands | null>;
 	/** Cursor / selection / display order, reported up to the triage layer. */
 	onTriageContextChange?: (context: TriageContextUpdate) => void;
-	onDeleteMessages?: (messageIds: string[]) => void;
+	onDeleteMessages: (messageIds: string[]) => void;
 	onMarkMessagesRead?: (messageIds: string[]) => void;
 }
 
@@ -146,42 +147,32 @@ export function FlaggedList({
 		window.open(url, "_blank", "noopener,noreferrer");
 	}, []);
 
+	const chrome = useListHeaderChrome();
 	const listBody = (
-		<ThreadListInteraction
-			selectedMessageId={selectedMessageId}
-			onOpen={(id, options) => onSelectMessage?.(id, options)}
-			onDeleteMessages={onDeleteMessages}
-			commandsRef={commandsRef}
-			onTriageContextChange={onTriageContextChange}
-		>
-			<div className="flex h-full min-h-0 flex-col">
-				{onDeleteMessages ? (
-					<ThreadListSelectionBar onMarkAsRead={onMarkMessagesRead} />
-				) : null}
-				<div className="flex-1 overflow-y-auto">
-					<div className="divide-y divide-line">
-						{rows.map((thread) => (
-							<MessageRow
-								key={thread.id}
-								thread={thread}
-								active={thread.id === selectedMessageId}
-								onClick={() => onSelectMessage?.(thread.id)}
-							/>
-						))}
-					</div>
-					{hasNextPage ? (
-						<button
-							type="button"
-							className="w-full py-3 text-sm text-muted hover:text-fg disabled:opacity-50"
-							onClick={() => fetchNextPage()}
-							disabled={isFetchingNextPage}
-						>
-							{isFetchingNextPage ? "Loading…" : "Load more"}
-						</button>
-					) : null}
+		<div className="flex h-full min-h-0 flex-col">
+			<div className="flex-1 overflow-y-auto">
+				<div className="divide-y divide-line">
+					{rows.map((thread) => (
+						<MessageRow
+							key={thread.id}
+							thread={thread}
+							active={thread.id === selectedMessageId}
+							onClick={() => onSelectMessage?.(thread.id)}
+						/>
+					))}
 				</div>
+				{hasNextPage ? (
+					<button
+						type="button"
+						className="w-full py-3 text-sm text-muted hover:text-fg disabled:opacity-50"
+						onClick={() => fetchNextPage()}
+						disabled={isFetchingNextPage}
+					>
+						{isFetchingNextPage ? "Loading…" : "Load more"}
+					</button>
+				) : null}
 			</div>
-		</ThreadListInteraction>
+		</div>
 	);
 
 	return (
@@ -198,22 +189,39 @@ export function FlaggedList({
 			searchLoading={isLoading}
 			onSelectSearchResult={(result) => onSelectMessage?.(result.id)}
 		>
-			<MessageListPane
-				listTitle="Starred"
-				sections={[{ id: "flagged", threads: rows }]}
-				flatList
-				hideHeader
-				listState={listState}
-				searchQuery={sq ? searchQuery : undefined}
-				errorMessage={isError ? formatErrorMessage(error) : undefined}
-				onRetry={() => refetch()}
-				onReportError={handleReportError}
-				selectedThreadId={selectedMessageId}
-				onSelectThread={onSelectMessage}
-				onSelectBriefCategory={() => undefined}
-				isDesktop={isDesktop}
-				listBody={listState === "ready" ? listBody : undefined}
-			/>
+			<ThreadListInteraction
+				selectedMessageId={selectedMessageId}
+				onOpen={(id, options) => onSelectMessage?.(id, options)}
+				onDeleteMessages={onDeleteMessages}
+				commandsRef={commandsRef}
+				onTriageContextChange={onTriageContextChange}
+			>
+				<MessageListPane
+					listTitle="Starred"
+					sections={[{ id: "flagged", threads: rows }]}
+					flatList
+					hideHeader
+					listState={chrome.searchResults ? "ready" : listState}
+					searchQuery={sq ? searchQuery : undefined}
+					errorMessage={isError ? formatErrorMessage(error) : undefined}
+					onRetry={() => refetch()}
+					onReportError={handleReportError}
+					selectedThreadId={selectedMessageId}
+					onSelectThread={onSelectMessage}
+					onSelectBriefCategory={() => undefined}
+					isDesktop={isDesktop}
+					selectionBar={
+						<ThreadListSelectionBar
+							title="Starred"
+							onMarkAsRead={onMarkMessagesRead}
+						/>
+					}
+					listBody={
+						chrome.searchResults ??
+						(listState === "ready" ? listBody : undefined)
+					}
+				/>
+			</ThreadListInteraction>
 		</MailViewChrome>
 	);
 }

package/src/components/mail/LabelApplyTrigger.tsx

@@ -17,10 +17,11 @@ interface LabelApplyTriggerProps {
 
 /**
  * "Apply label" for a selection — the manual "just these" scope (issue #26,
- * RFC 034 recap). A kebab-style menu of the account's labels; picking one
- * applies it to every selected message. Renders nothing when the account has
- * no labels yet — an empty menu offering only "create one in Settings" is
- * dead weight in the toolbar; Settings › Labels is where creation lives.
+ * RFC 034 recap). A worded row at the foot of the selection bar's overflow
+ * menu, opening the account's labels; picking one applies it to every selected
+ * message. Renders nothing when the account has no labels yet — an empty menu
+ * offering only "create one in Settings" is dead weight; Settings › Labels is
+ * where creation lives.
  */
 export function LabelApplyTrigger({
 	accountId,
@@ -54,8 +55,13 @@ export function LabelApplyTrigger({
 	return (
 		<PopoverMenu
 			triggerLabel="Apply label to selected messages"
-			triggerIcon={<Tag className="size-4" />}
+			triggerIcon={<Tag className="size-4 text-fg-subtle" />}
+			triggerText="Apply label"
 			items={items}
+			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"
 		/>
 	);
 }