@remit/ui 0.0.14 → 0.0.16

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

@@ -75,7 +75,12 @@ export {
 	BriefSections,
 	type BriefSectionsProps,
 } from "./components/brief-sections.js";
-export { Button, type ButtonProps } from "./components/button.js";
+export {
+	Button,
+	ButtonLink,
+	type ButtonLinkProps,
+	type ButtonProps,
+} from "./components/button.js";
 export {
 	Card,
 	CardBody,
@@ -235,10 +240,39 @@ export {
 	type PopoverMenuItem,
 	type PopoverMenuProps,
 } from "./components/popover-menu.js";
+export {
+	ProgressBar,
+	type ProgressBarProps,
+} from "./components/progress-bar.js";
 export {
 	PullToRefresh,
 	type PullToRefreshProps,
 } from "./components/pull-to-refresh.js";
+export {
+	QuarantineBugDialog,
+	type QuarantineBugDialogProps,
+} from "./components/quarantine-bug-dialog.js";
+export {
+	QuarantineEntryRow,
+	type QuarantineEntryRowProps,
+} from "./components/quarantine-entry-row.js";
+export { quarantineDemoEntries } from "./components/quarantine-fixtures.js";
+export {
+	formatQuarantineReport,
+	QUARANTINE_REPORT_DISCLAIMER,
+	type QuarantineEntry,
+	type QuarantineFailureCode,
+	type QuarantineFailureStage,
+	type QuarantineMimeNode,
+	type QuarantineReportSections,
+	quarantineIssueTitle,
+	quarantineReportSections,
+	quarantineSummary,
+} from "./components/quarantine-report.js";
+export {
+	QuarantineSection,
+	type QuarantineSectionProps,
+} from "./components/quarantine-section.js";
 export {
 	QuotedText,
 	type QuotedTextProps,
@@ -336,6 +370,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 {