@remit/ui 0.0.13 → 0.0.15

package/src/components/spam-results-offer.render.test.ts

@@ -0,0 +1,26 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { SpamResultsOffer } from "./spam-results-offer.js";
+
+const noop = () => {};
+
+describe("SpamResultsOffer", () => {
+	it("states the count and offers a way into Spam", () => {
+		const html = renderToString(
+			createElement(SpamResultsOffer, { count: 3, onScopeToSpam: noop }),
+		);
+		assert.match(html, />3</);
+		assert.match(html, /results from Spam/);
+		assert.match(html, /View them/);
+	});
+
+	it("reads in the singular for one match", () => {
+		const html = renderToString(
+			createElement(SpamResultsOffer, { count: 1, onScopeToSpam: noop }),
+		);
+		assert.match(html, /result from Spam/);
+		assert.doesNotMatch(html, /results from Spam/);
+	});
+});

package/src/components/spam-results-offer.stories.tsx

@@ -0,0 +1,41 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { SpamResultsOffer } from "./spam-results-offer.js";
+
+/** Frames the offer at the width of the list pane it sits at the top of. */
+const listPaneFrame: Decorator = (Story) => (
+	<div
+		className="overflow-hidden rounded-lg border border-line bg-canvas"
+		style={{ width: 360 }}
+	>
+		<Story />
+	</div>
+);
+
+const meta: Meta<typeof SpamResultsOffer> = {
+	title: "Components/SpamResultsOffer",
+	component: SpamResultsOffer,
+	parameters: { layout: "centered" },
+	decorators: [listPaneFrame],
+};
+export default meta;
+
+type Story = StoryObj<typeof SpamResultsOffer>;
+
+/**
+ * Spam matches a global search held out of its results. Deliberately quiet —
+ * an offer, not a warning — and the action scopes the search to Spam rather
+ * than opening a view of its own.
+ */
+export const Default: Story = {
+	args: { count: 3, onScopeToSpam: () => {} },
+};
+
+/** One match reads in the singular. */
+export const SingleResult: Story = {
+	args: { count: 1, onScopeToSpam: () => {} },
+};
+
+/** Large counts stay on one line; the figure is tabular so it does not jitter. */
+export const ManyResults: Story = {
+	args: { count: 128, onScopeToSpam: () => {} },
+};

package/src/components/spam-results-offer.tsx

@@ -0,0 +1,52 @@
+import { Banner } from "./banner.js";
+import { Button } from "./button.js";
+
+export interface SpamResultsOfferProps {
+	/** How many matches the search found in Spam. */
+	count: number;
+	/**
+	 * Scope the search to Spam. This is a shortcut to the state reached by
+	 * navigating to Spam with the query carried over — the same scoped search,
+	 * with the same `in:spam` chip — not a separate result mode.
+	 */
+	onScopeToSpam: () => void;
+}
+
+const plural = (n: number): string => (n === 1 ? "result" : "results");
+
+/**
+ * Spam matches held out of a global search, offered rather than mixed in. Spam
+ * is the one folder a search that reaches everywhere does not inline, because
+ * the whole point of the folder is that its contents are unwanted until asked
+ * for. Taking the offer scopes the search to Spam.
+ *
+ * Quiet on purpose: this is an offer, not a warning. Presentational — the
+ * caller owns what "scope to spam" does.
+ */
+export function SpamResultsOffer({
+	count,
+	onScopeToSpam,
+}: SpamResultsOfferProps) {
+	return (
+		<Banner
+			tone="info"
+			variant="soft"
+			className="items-center justify-between gap-3 rounded-none border-b border-line"
+		>
+			<div className="flex items-center justify-between gap-3">
+				<p className="min-w-0 text-xs text-fg-muted">
+					<span className="font-semibold text-fg tabular-nums">{count}</span>{" "}
+					{`${plural(count)} from Spam`}
+				</p>
+				<Button
+					variant="ghost"
+					size="sm"
+					onClick={onScopeToSpam}
+					className="shrink-0 text-accent"
+				>
+					View them
+				</Button>
+			</div>
+		</Banner>
+	);
+}

package/src/components/swipeable-row.render.test.ts

@@ -103,4 +103,33 @@ describe("SwipeableRow", () => {
 		assert.doesNotMatch(html, /<a /);
 		assert.match(html, /<button[^>]*>/);
 	});
+
+	it("gives the row checkbox semantics while in selection mode", () => {
+		const checked = render("none", { selectionMode: true, checked: true });
+		assert.match(checked, /role="checkbox"/);
+		assert.match(checked, /aria-checked="true"/);
+
+		const unchecked = render("none", { selectionMode: true, checked: false });
+		assert.match(unchecked, /aria-checked="false"/);
+	});
+
+	it("does not put checkbox semantics on the outer row outside selection mode", () => {
+		// Outside selection mode the row's own open control (the outer button)
+		// stays a plain button — only the nested leading-avatar toggle carries
+		// checkbox semantics, asserted separately below.
+		const html = render("none");
+		const outerTag = html.match(
+			/^<div class="relative overflow-hidden"><button type="button"[^>]*>/,
+		)?.[0];
+		assert.ok(outerTag, "outer row button found");
+		assert.doesNotMatch(outerTag as string, /role="checkbox"/);
+	});
+
+	it("renders the leading avatar as a focusable checkbox-role toggle outside selection mode", () => {
+		const html = render("none");
+		assert.match(
+			html,
+			/role="checkbox"[^>]*aria-label="Select message from Alex Rivera"/,
+		);
+	});
 });

package/src/components/swipeable-row.tsx

@@ -2,8 +2,8 @@ import { Check, Mail, MailOpen, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import type { ThreadRowData } from "./app-shell-types.js";
+import { Avatar } from "./avatar.js";
 import {
-	ComfortableRowBody,
 	ComfortableRowTextContent,
 	comfortableRowClass,
 } from "./message-row.js";
@@ -192,6 +192,14 @@ export function SwipeableRow({
 		transition: dragX === null ? "transform 150ms ease" : "none",
 		minHeight: 44,
 	};
+	const unread = !thread.isRead;
+
+	// Stops the row's own pointer-gesture handlers (long-press, swipe axis
+	// detection) from also firing for a tap that started on the nested avatar
+	// toggle — the row and the toggle are two separate controls sharing the
+	// same leading 28px slot.
+	const stopRowGesture = (e: React.PointerEvent) => e.stopPropagation();
+
 	const body = selectionMode ? (
 		<>
 			<span
@@ -207,7 +215,36 @@ export function SwipeableRow({
 			<ComfortableRowTextContent thread={thread} />
 		</>
 	) : (
-		<ComfortableRowBody thread={thread} />
+		<>
+			{unread && (
+				<span className="absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" />
+			)}
+			{/*
+			 * Tappable, focusable entry point into selection mode — long-press is
+			 * never the only way in. Nested inside the row's own open control
+			 * (button or, via linkComponent, an anchor); mirrors the leading-slot
+			 * toggle already shipped in the web client's row.
+			 */}
+			{/* biome-ignore lint/a11y/useSemanticElements: a native <input type="checkbox"> can't host the Avatar as its visible content; role="checkbox" on a button mirrors the row-checkbox pattern already shipped in MessageListItem.tsx */}
+			<button
+				type="button"
+				role="checkbox"
+				aria-checked={checked}
+				aria-label={`Select message from ${thread.fromName}`}
+				onPointerDown={stopRowGesture}
+				onPointerMove={stopRowGesture}
+				onPointerUp={stopRowGesture}
+				onClick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					onLongPress();
+				}}
+				className="inline-flex size-7 shrink-0 items-center justify-center rounded-full"
+			>
+				<Avatar name={thread.fromName} email={thread.fromEmail} size="sm" />
+			</button>
+			<ComfortableRowTextContent thread={thread} />
+		</>
 	);
 
 	return (
@@ -251,8 +288,11 @@ export function SwipeableRow({
 					children: body,
 				})
 			) : (
+				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: role is only ever "checkbox" (aria-checked's owning role) when selectionMode is true; the ternaries are linked, biome can't see that statically
 				<button
 					type="button"
+					role={selectionMode ? "checkbox" : undefined}
+					aria-checked={selectionMode ? checked : undefined}
 					onPointerDown={onPointerDown}
 					onPointerMove={onPointerMove}
 					onPointerUp={onPointerUp}

package/src/components/touch-list-body.render.test.ts

@@ -63,4 +63,29 @@ describe("TouchListBody", () => {
 		const html = renderToString(createElement(TouchListBody, baseProps));
 		assert.match(html, /Pull to refresh/);
 	});
+
+	it("dims and suppresses taps on every row while busy", () => {
+		const html = renderToString(
+			createElement(TouchListBody, {
+				...baseProps,
+				selectionMode: true,
+				checkedIds: new Set(["t1", "t2"]),
+				busy: true,
+			}),
+		);
+		const dimmed = (html.match(/pointer-events-none opacity-50/g) ?? []).length;
+		assert.equal(dimmed, 2, "both seeded rows are dimmed");
+	});
+
+	it("hides pull to refresh while busy", () => {
+		const html = renderToString(
+			createElement(TouchListBody, { ...baseProps, busy: true }),
+		);
+		assert.doesNotMatch(html, /Pull to refresh/);
+	});
+
+	it("renders rows undimmed when not busy", () => {
+		const html = renderToString(createElement(TouchListBody, baseProps));
+		assert.doesNotMatch(html, /pointer-events-none/);
+	});
 });

package/src/components/touch-list-body.stories.tsx

@@ -93,3 +93,18 @@ export const SelectionModeAllChecked: Story = {
 export const SelectionModeNoneChecked: Story = {
 	args: { selectionMode: true, checkedIds: new Set<string>() },
 };
+
+/**
+ * A bulk delete is running against the checked rows: they stay checked but
+ * dim, and stop responding to taps — no more opening a message that's
+ * mid-delete. Pairs with `SelectionTopBar`'s `DeletingWithProgress` story.
+ */
+export const SelectionModeBusy: Story = {
+	args: {
+		selectionMode: true,
+		checkedIds: new Set(
+			sections.flatMap((section) => section.threads.map((t) => t.id)),
+		),
+		busy: true,
+	},
+};

package/src/components/touch-list.tsx

@@ -14,6 +14,7 @@ export function TouchListBody({
 	onOpenThread,
 	onRefresh,
 	refreshing,
+	busy = false,
 }: {
 	sections: ThreadSection[];
 	selectedThreadId?: string;
@@ -25,6 +26,12 @@ export function TouchListBody({
 	onOpenThread: (id: string) => void;
 	onRefresh: () => void;
 	refreshing: boolean;
+	/**
+	 * A bulk operation (e.g. delete) is running against the checked set. Rows
+	 * dim and stop responding to taps instead of sitting normal, undimmed and
+	 * still tappable while a count above them claims they're being deleted.
+	 */
+	busy?: boolean;
 }) {
 	// Local copy so the mock can act on a swipe: delete removes the row,
 	// toggle-read flips its state. The live client owns real mutation.
@@ -56,24 +63,28 @@ export function TouchListBody({
 			)}
 			<div className="divide-y divide-line">
 				{items.map((thread) => (
-					<SwipeableRow
+					<div
 						key={thread.id}
-						thread={thread}
-						selectionMode={selectionMode}
-						checked={checkedIds.has(thread.id)}
-						active={thread.id === selectedThreadId}
-						peek={peek?.id === thread.id ? peek.side : "none"}
-						onPeek={(next) =>
-							setPeek(next === "none" ? null : { id: thread.id, side: next })
-						}
-						onToggleCheck={() => onToggleCheck(thread.id)}
-						onLongPress={() => onEnterSelection(thread.id)}
-						onOpen={() => onOpenThread(thread.id)}
-						onAct={(side) => act(thread.id, side)}
-					/>
+						className={busy ? "pointer-events-none opacity-50" : undefined}
+					>
+						<SwipeableRow
+							thread={thread}
+							selectionMode={selectionMode}
+							checked={checkedIds.has(thread.id)}
+							active={thread.id === selectedThreadId}
+							peek={peek?.id === thread.id ? peek.side : "none"}
+							onPeek={(next) =>
+								setPeek(next === "none" ? null : { id: thread.id, side: next })
+							}
+							onToggleCheck={() => onToggleCheck(thread.id)}
+							onLongPress={() => onEnterSelection(thread.id)}
+							onOpen={() => onOpenThread(thread.id)}
+							onAct={(side) => act(thread.id, side)}
+						/>
+					</div>
 				))}
 			</div>
-			{!selectionMode && !refreshing && (
+			{!selectionMode && !refreshing && !busy && (
 				<button
 					type="button"
 					onClick={onRefresh}

package/src/index.ts

@@ -121,7 +121,10 @@ export {
 export {
 	canonicalRoleLabel,
 	type FolderRole,
+	isVirtualFolderRole,
+	provenanceFolderLabel,
 	providerLeaf,
+	type ResultFolder,
 	roleIcon,
 } from "./components/folder-role.js";
 export {
@@ -232,6 +235,10 @@ export {
 	type PopoverMenuItem,
 	type PopoverMenuProps,
 } from "./components/popover-menu.js";
+export {
+	ProgressBar,
+	type ProgressBarProps,
+} from "./components/progress-bar.js";
 export {
 	PullToRefresh,
 	type PullToRefreshProps,
@@ -304,9 +311,11 @@ export {
 	type SearchResultTone,
 } from "./components/search-result-row.js";
 export {
+	partitionSpamResults,
 	type SearchResultSection,
 	SearchResults,
 	type SearchResultsProps,
+	type SearchScope,
 } from "./components/search-results.js";
 export {
 	SearchChipRow,
@@ -331,6 +340,8 @@ export {
 export { Select, type SelectProps } from "./components/select.js";
 export {
 	SelectionTopBar,
+	type SelectionTopBarNotice,
+	type SelectionTopBarNoticeAction,
 	type SelectionTopBarProps,
 } from "./components/selection-top-bar.js";
 export {
@@ -358,6 +369,10 @@ export {
 	SlidePanel,
 	type SlidePanelProps,
 } from "./components/slide-panel.js";
+export {
+	SpamResultsOffer,
+	type SpamResultsOfferProps,
+} from "./components/spam-results-offer.js";
 export {
 	commitPeek,
 	SwipeableRow,