@remit/ui 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "type": "module",
   "files": [
     "src"

package/src/components/app-shell.render.test.ts

@@ -109,8 +109,9 @@ describe("AppShell render honors the pane layout (#784)", () => {
 		thread,
 		intelligence,
 	};
-	// The reading pane's toolbar is the only place "Search mail" renders.
-	const readingPaneMarker = /Search mail/;
+	// The desktop reading-pane toolbar keeps the kit's default shortcut hints;
+	// the mobile pane passes its own labels without them.
+	const readingPaneMarker = /title="Reply \(r\)"/;
 	// "Known sender" is the wellknown trust label, rendered only by the rail.
 	const intelligenceMarker = /Known sender/;
 
@@ -175,7 +176,7 @@ describe("AppShell narrow message view: width-gated in-place swap", () => {
 	// narrow single pane is showing the message view.
 	const messageViewMarker = /aria-label="Back to messages"/;
 	// The desktop reading-pane toolbar — present only at/above 1024.
-	const readingPaneMarker = /Search mail/;
+	const readingPaneMarker = /title="Reply \(r\)"/;
 
 	it("below 1024 defaults to the list, not the message view", () => {
 		const html = render({ ...withThread, initialWidth: 800 });

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

@@ -37,6 +37,32 @@ describe("ComfortableRow", () => {
 	});
 });
 
+describe("ComfortableRow selection slot", () => {
+	it("renders no checkbox without a selection (non-selectable mode)", () => {
+		const html = renderToString(
+			createElement(ComfortableRow, { thread: { ...base, isRead: true } }),
+		);
+		assert.doesNotMatch(html, /Select message/);
+	});
+
+	it("renders a checkbox reflecting the checked state", () => {
+		const unchecked = renderToString(
+			createElement(ComfortableRow, {
+				thread: { ...base, isRead: true },
+				selection: { checked: false, onToggle: () => undefined },
+			}),
+		);
+		const checked = renderToString(
+			createElement(ComfortableRow, {
+				thread: { ...base, isRead: true },
+				selection: { checked: true, onToggle: () => undefined },
+			}),
+		);
+		assert.match(unchecked, /Select message/);
+		assert.match(checked, /Deselect message/);
+	});
+});
+
 describe("CompactRow", () => {
 	it("renders fromName and subject", () => {
 		const html = renderToString(

package/src/components/message-row.stories.tsx

@@ -112,10 +112,40 @@ export const Compact: Story = {
 export const States: Story = {
 	render: () => (
 		<List>
-			<ComfortableRow thread={unread} />
-			<ComfortableRow thread={read} />
+			<ComfortableRow thread={unread} active />
+			<ComfortableRow thread={read} focused />
 			<ComfortableRow thread={starred} />
 			<ComfortableRow thread={suspicious} />
 		</List>
 	),
 };
+
+/**
+ * Selectable rows. The checkbox layers over the avatar: hidden until hover
+ * while unchecked, pinned visible once checked or while the list is in
+ * multi-select mode. A row rendered without `selection` — the brief and
+ * Flagged before they gained selection — shows the avatar alone.
+ */
+export const Selectable: Story = {
+	render: () => (
+		<List>
+			<ComfortableRow
+				thread={unread}
+				selection={{ checked: true, onToggle: () => undefined }}
+			/>
+			<ComfortableRow
+				thread={read}
+				selection={{ checked: false, onToggle: () => undefined }}
+			/>
+			<ComfortableRow
+				thread={starred}
+				selection={{
+					checked: false,
+					alwaysVisible: true,
+					onToggle: () => undefined,
+				}}
+			/>
+			<ComfortableRow thread={withCategory} />
+		</List>
+	),
+};

package/src/components/message-row.tsx

@@ -1,5 +1,5 @@
-import { Paperclip, ShieldAlert, Star } from "lucide-react";
-import type { ReactNode } from "react";
+import { Check, Paperclip, ShieldAlert, Star } from "lucide-react";
+import type { ComponentType, ReactNode } from "react";
 import { cn } from "../lib/cn.js";
 import { LIST_ROW_ATTRIBUTE } from "../lib/roving-focus.js";
 import { categoryTone, type ThreadRowData } from "./app-shell-types.js";
@@ -173,18 +173,89 @@ export function ComfortableRowTextContent({
 }
 
 /**
- * Full inner body of a comfortable row (unread dot + avatar + text content).
- * Place inside any wrapper element that uses `comfortableRowClass()`.
+ * Checkbox state for a selectable row. Absent on a row that cannot be
+ * multi-selected (the brief and Flagged before they gained selection), which
+ * renders the avatar alone.
  */
-export function ComfortableRowBody({ thread }: { thread: ThreadRowData }) {
+export interface RowSelection {
+	checked: boolean;
+	/** Keep the checkbox visible instead of revealing it on hover (mobile). */
+	alwaysVisible?: boolean;
+	onToggle: (event: React.MouseEvent) => void;
+}
+
+/**
+ * Leading slot of a comfortable row: the avatar, with a checkbox layered over
+ * it when the row is selectable. Fixed 28px so the row never reflows as the
+ * checkbox appears.
+ */
+export function ComfortableRowLeading({
+	thread,
+	selection,
+}: {
+	thread: ThreadRowData;
+	selection?: RowSelection;
+}) {
+	if (!selection) {
+		return <Avatar name={thread.fromName} email={thread.fromEmail} size="sm" />;
+	}
+	const { checked, alwaysVisible } = selection;
+	return (
+		<span className="relative size-7 shrink-0">
+			<Avatar
+				name={thread.fromName}
+				email={thread.fromEmail}
+				size="sm"
+				className={cn(
+					"absolute inset-0 transition-opacity sm:group-hover:opacity-0",
+					(checked || alwaysVisible) && "opacity-0",
+				)}
+			/>
+			<button
+				type="button"
+				// Out of the tab order: the row is the list's single tab stop, and this
+				// control is `opacity-0` until hover, so a tabbable one would put focus
+				// on something invisible on every row.
+				tabIndex={-1}
+				onClick={selection.onToggle}
+				className={cn(
+					"absolute inset-0 size-7 items-center justify-center rounded-full border transition-opacity",
+					alwaysVisible ? "flex" : "hidden sm:flex",
+					checked
+						? "bg-accent border-accent text-accent-fg opacity-100"
+						: alwaysVisible
+							? "border-fg-subtle/40 bg-canvas opacity-100"
+							: "border-fg-subtle/40 bg-canvas opacity-0 group-hover:opacity-100",
+				)}
+				aria-label={checked ? "Deselect message" : "Select message"}
+			>
+				{checked && <Check className="size-3" />}
+			</button>
+		</span>
+	);
+}
+
+/**
+ * Full inner body of a comfortable row (unread dot + leading slot + text
+ * content). Place inside any wrapper element that uses `comfortableRowClass()`.
+ */
+export function ComfortableRowBody({
+	thread,
+	selection,
+	badge,
+}: {
+	thread: ThreadRowData;
+	selection?: RowSelection;
+	badge?: ReactNode;
+}) {
 	const unread = !thread.isRead;
 	return (
 		<>
 			{unread && (
 				<span className="absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" />
 			)}
-			<Avatar name={thread.fromName} email={thread.fromEmail} size="sm" />
-			<ComfortableRowTextContent thread={thread} />
+			<ComfortableRowLeading thread={thread} selection={selection} />
+			<ComfortableRowTextContent thread={thread} badge={badge} />
 		</>
 	);
 }
@@ -192,10 +263,12 @@ export function ComfortableRowBody({ thread }: { thread: ThreadRowData }) {
 export function CompactRow({
 	thread,
 	active,
+	focused,
 	onClick,
 }: {
 	thread: ThreadRowData;
 	active?: boolean;
+	focused?: boolean;
 	onClick?: () => void;
 }) {
 	return (
@@ -203,7 +276,7 @@ export function CompactRow({
 			type="button"
 			{...LIST_ROW_ATTRIBUTE}
 			onClick={onClick}
-			className={compactRowClass({ active })}
+			className={compactRowClass({ active, focused })}
 		>
 			<CompactRowBody thread={thread} />
 		</button>
@@ -213,10 +286,14 @@ export function CompactRow({
 export function ComfortableRow({
 	thread,
 	active,
+	focused,
+	selection,
 	onClick,
 }: {
 	thread: ThreadRowData;
 	active?: boolean;
+	focused?: boolean;
+	selection?: RowSelection;
 	onClick?: () => void;
 }) {
 	return (
@@ -224,17 +301,17 @@ export function ComfortableRow({
 			type="button"
 			{...LIST_ROW_ATTRIBUTE}
 			onClick={onClick}
-			className={comfortableRowClass({ active })}
+			className={cn("group", comfortableRowClass({ active, focused }))}
 		>
-			<ComfortableRowBody thread={thread} />
+			<ComfortableRowBody thread={thread} selection={selection} />
 		</button>
 	);
 }
 
 /** A row renderer the brief drives — Comfortable/Compact rows or a consumer's
  *  own (e.g. the web client's navigation-aware row) all satisfy this shape. */
-export type BriefRowComponent = (props: {
+export type BriefRowComponent = ComponentType<{
 	thread: ThreadRowData;
 	active?: boolean;
 	onClick?: () => void;
-}) => React.ReactNode;
+}>;

package/src/components/reading-pane.render.test.ts

@@ -53,9 +53,10 @@ describe("ReadingPane", () => {
 		assert.match(html, /Select a thread to read/);
 	});
 
-	it("renders the toolbar with the search input", () => {
+	it("renders the message verbs and no search field — search is the app top bar's", () => {
 		const html = renderToString(createElement(ReadingPane, { thread }));
-		assert.match(html, /Search mail/);
+		assert.match(html, /title="Reply \(r\)"/);
+		assert.doesNotMatch(html, /Search mail/);
 	});
 });
 

package/src/components/reading-pane.tsx

@@ -1,17 +1,9 @@
-import {
-	ChevronDown,
-	ChevronRight,
-	Search,
-	ShieldAlert,
-	SquarePen,
-} from "lucide-react";
+import { ChevronDown, ChevronRight, ShieldAlert } from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { isSelfRowActivation } from "../lib/row-keyboard.js";
 import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
-import { Button } from "./button.js";
-import { Input } from "./input.js";
 import { IntelligenceToggle } from "./intelligence-toggle.js";
 import { MailActionToolbar } from "./mail-action-toolbar.js";
 import { MessageBodyView } from "./message-body-view.js";
@@ -252,13 +244,14 @@ export function ExpandedMessage({
 }
 
 /**
- * Message action toolbar on the pane-header datum: the reading pane's
- * verbs (reply/reply-all/forward, delete/move/flag) plus search and
- * compose, Apple Mail-style above the message area. Built on the shared
- * `MailActionToolbar` so the mail verbs stay pressable with no
- * thread open and explain inline rather than greying out (the never-disable
- * tenet). The intelligence toggle is the exception: it holds its slot and greys
- * out when there is no rail to open (#52).
+ * Message action toolbar on the pane-header datum: the reading pane's verbs
+ * (reply/reply-all/forward, delete/move/flag) and the intelligence toggle.
+ * Everything here acts on the open message; search, compose and the account
+ * menu belong to the app and live in the `AppTopBar` above every pane. Built on
+ * the shared `MailActionToolbar` so the mail verbs stay pressable with no thread
+ * open and explain inline rather than greying out (the never-disable tenet). The
+ * intelligence toggle is the exception: it holds its slot and greys out when
+ * there is no rail to open (#52).
  */
 function MessageToolbar({
 	hasThread,
@@ -278,21 +271,6 @@ function MessageToolbar({
 			onUnavailable={() => setHint("Open a message first")}
 			unavailableHint={hint}
 		>
-			{/* Apple Mail geometry: search sits top-right over the message
-			    area but still filters the current list / brief */}
-			<Input
-				icon={<Search className="size-4" />}
-				placeholder="Search mail"
-				className="h-8 w-64 min-w-40 shrink"
-			/>
-			<span className="mx-1 h-4 w-px bg-line" aria-hidden />
-			<Button
-				variant="ghost"
-				size="sm"
-				icon={<SquarePen className="size-4" />}
-				title="Compose (⌘N)"
-				aria-label="Compose"
-			/>
 			<IntelligenceToggle
 				open={intelligenceOpen}
 				enabled={canToggleIntelligence}

package/src/index.ts

@@ -203,11 +203,13 @@ export {
 	type BriefRowComponent,
 	ComfortableRow,
 	ComfortableRowBody,
+	ComfortableRowLeading,
 	ComfortableRowTextContent,
 	CompactRow,
 	CompactRowBody,
 	comfortableRowClass,
 	compactRowClass,
+	type RowSelection,
 } from "./components/message-row.js";
 export {
 	type MobileMessageAction,