@remit/ui 0.0.1

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

@@ -0,0 +1,48 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { ThreadRowData } from "./app-shell-types.js";
+import { ComfortableRow, CompactRow } from "./message-row.js";
+
+const base: ThreadRowData = {
+	id: "t1",
+	accountId: "a1",
+	fromName: "Alex Rivera",
+	fromEmail: "alex@example.com",
+	subject: "Q3 planning notes",
+	snippet: "Pushed the deck to the shared drive.",
+	timeLabel: "9:42",
+};
+
+describe("ComfortableRow", () => {
+	it("renders fromName, subject and snippet", () => {
+		const html = renderToString(
+			createElement(ComfortableRow, { thread: { ...base, isRead: true } }),
+		);
+		assert.match(html, /Alex Rivera/);
+		assert.match(html, /Q3 planning notes/);
+		assert.match(html, /Pushed the deck/);
+	});
+
+	it("renders unread styling differently from read", () => {
+		const unread = renderToString(
+			createElement(ComfortableRow, { thread: { ...base, isRead: false } }),
+		);
+		const read = renderToString(
+			createElement(ComfortableRow, { thread: { ...base, isRead: true } }),
+		);
+		assert.notEqual(unread, read);
+		assert.match(unread, /font-semibold/);
+	});
+});
+
+describe("CompactRow", () => {
+	it("renders fromName and subject", () => {
+		const html = renderToString(
+			createElement(CompactRow, { thread: { ...base, isRead: true } }),
+		);
+		assert.match(html, /Alex Rivera/);
+		assert.match(html, /Q3 planning notes/);
+	});
+});

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ThreadRowData } from "./app-shell-types.js";
+import { ComfortableRow, CompactRow } from "./message-row.js";
+
+const read: ThreadRowData = {
+	id: "r-read",
+	accountId: "a1",
+	fromName: "Alex Rivera",
+	fromEmail: "alex@example.com",
+	subject: "Re: Q3 planning notes",
+	snippet: "Sounds good — I pushed the deck to the shared drive.",
+	timeLabel: "9:42",
+	isRead: true,
+};
+
+const unread: ThreadRowData = {
+	id: "r-unread",
+	accountId: "a1",
+	fromName: "Priya Nair",
+	fromEmail: "priya@example.com",
+	subject: "Design review tomorrow",
+	snippet: "Can we move it to 2pm? I have a conflict in the morning.",
+	timeLabel: "8:15",
+	isRead: false,
+	messageCount: 3,
+};
+
+const starred: ThreadRowData = {
+	id: "r-starred",
+	accountId: "a1",
+	fromName: "Sam Okafor",
+	fromEmail: "sam@example.com",
+	subject: "Contract signed",
+	snippet: "Attaching the countersigned PDF for your records.",
+	timeLabel: "Mon",
+	isRead: true,
+	starred: true,
+};
+
+const suspicious: ThreadRowData = {
+	id: "r-suspicious",
+	accountId: "a1",
+	fromName: "Account Security",
+	fromEmail: "no-reply@secure-update.example",
+	subject: "Verify your account immediately",
+	snippet: "Your account will be suspended unless you confirm now.",
+	timeLabel: "Tue",
+	isRead: false,
+	suspicious: true,
+};
+
+const withAttachment: ThreadRowData = {
+	id: "r-attachment",
+	accountId: "a1",
+	fromName: "Dana Lopez",
+	fromEmail: "dana@example.com",
+	subject: "Invoice for May",
+	snippet: "Please find the attached invoice, due end of month.",
+	timeLabel: "Wed",
+	isRead: true,
+	hasAttachment: true,
+};
+
+const withCategory: ThreadRowData = {
+	id: "r-category",
+	accountId: "a1",
+	fromName: "The Weekly Brief",
+	fromEmail: "hello@weekly.example",
+	subject: "This week in product",
+	snippet: "Five stories you might have missed this week.",
+	timeLabel: "Thu",
+	isRead: false,
+	category: "newsletter",
+};
+
+const all = [read, unread, starred, suspicious, withAttachment, withCategory];
+
+const meta: Meta = {
+	title: "Primitives/MessageRow",
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+const List = ({ children }: { children: React.ReactNode }) => (
+	<div className="w-md divide-y divide-line rounded-md border border-line">
+		{children}
+	</div>
+);
+
+export const Comfortable: Story = {
+	render: () => (
+		<List>
+			{all.map((thread) => (
+				<ComfortableRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};
+
+export const Compact: Story = {
+	render: () => (
+		<List>
+			{all.map((thread) => (
+				<CompactRow key={thread.id} thread={thread} />
+			))}
+		</List>
+	),
+};
+
+export const States: Story = {
+	render: () => (
+		<List>
+			<ComfortableRow thread={unread} />
+			<ComfortableRow thread={read} />
+			<ComfortableRow thread={starred} />
+			<ComfortableRow thread={suspicious} />
+		</List>
+	),
+};

package/src/components/message-row.tsx

@@ -0,0 +1,231 @@
+import { Paperclip, ShieldAlert, Star } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+import { categoryTone, type ThreadRowData } from "./app-shell-types.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+
+/**
+ * Returns the CSS classes for a compact row outer element.
+ * `active` = open/selected; `focused` = keyboard-focused (left accent rail).
+ */
+export const compactRowClass = ({
+	active,
+	focused,
+}: {
+	active?: boolean;
+	focused?: boolean;
+}) =>
+	cn(
+		"relative flex h-8 w-full items-center gap-2 px-row-inset text-left",
+		active
+			? "bg-accent-2-soft"
+			: focused
+				? "bg-surface-sunken"
+				: "hover:bg-surface-sunken",
+		focused &&
+			!active &&
+			"before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-accent-2",
+	);
+
+/**
+ * Returns the CSS classes for a comfortable row outer element.
+ * `active` = open/selected; `focused` = keyboard-focused (left accent rail).
+ */
+export const comfortableRowClass = ({
+	active,
+	focused,
+}: {
+	active?: boolean;
+	focused?: boolean;
+}) =>
+	cn(
+		// full-bleed highlight; content inset with a clear unread-dot gutter
+		"relative flex w-full items-start gap-3 py-2 pl-5 pr-row-inset text-left transition-colors",
+		active
+			? "bg-accent-2-soft"
+			: focused
+				? "bg-surface-sunken"
+				: "hover:bg-surface-sunken",
+		focused &&
+			!active &&
+			"before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-accent-2",
+	);
+
+/**
+ * Inner body of a compact (mutt-mode) row. Place inside any wrapper element.
+ * The wrapper should use `compactRowClass()` for the outer CSS.
+ */
+export function CompactRowBody({ thread }: { thread: ThreadRowData }) {
+	const unread = !thread.isRead;
+	return (
+		<>
+			<span className="flex w-4 shrink-0 items-center justify-center">
+				{thread.suspicious ? (
+					<ShieldAlert className="size-3.5 text-danger" />
+				) : thread.starred ? (
+					<Star className="size-3 fill-warning text-warning" />
+				) : unread ? (
+					<span className="size-1.5 rounded-full bg-accent" />
+				) : null}
+			</span>
+			<span
+				className={cn(
+					"w-36 shrink-0 truncate text-xs",
+					unread ? "font-semibold text-fg" : "text-fg-muted",
+				)}
+			>
+				{thread.fromName}
+			</span>
+			<span className="min-w-0 flex-1 truncate text-xs">
+				<span className={cn(unread ? "font-medium text-fg" : "text-fg-muted")}>
+					{thread.subject}
+				</span>
+				<span className="text-fg-subtle"> — {thread.snippet}</span>
+			</span>
+			{thread.hasAttachment && (
+				<Paperclip className="size-3 shrink-0 text-fg-subtle" />
+			)}
+			<span className="w-11 shrink-0 text-right text-2xs text-fg-subtle tabular-nums">
+				{thread.timeLabel}
+			</span>
+		</>
+	);
+}
+
+/**
+ * Text/glyph content block of a comfortable row (everything after the leading
+ * avatar/slot). Consumers provide their own leading element (Avatar, checkbox,
+ * etc.) and the unread dot (via the absolute-positioned sibling). Use this with
+ * `comfortableRowClass()` and render the leading slot + unread dot separately.
+ */
+export function ComfortableRowTextContent({
+	thread,
+	badge,
+}: {
+	thread: ThreadRowData;
+	/** Extra chip rendered after the category badge (e.g. an auto-moved indicator). */
+	badge?: ReactNode;
+}) {
+	const unread = !thread.isRead;
+	return (
+		<span className="min-w-0 flex-1">
+			<span className="flex items-baseline justify-between gap-2">
+				<span
+					className={cn(
+						"flex min-w-0 items-center gap-1.5 truncate text-sm",
+						unread ? "font-semibold text-fg" : "font-medium text-fg-muted",
+					)}
+				>
+					{thread.trust === "vip" && (
+						<span className="size-1.5 shrink-0 rounded-full bg-accent-2" />
+					)}
+					<span className="truncate">{thread.fromName}</span>
+					{thread.messageCount != null && thread.messageCount > 1 && (
+						<span className="shrink-0 text-2xs font-normal text-fg-subtle">
+							{thread.messageCount}
+						</span>
+					)}
+				</span>
+				<span className="shrink-0 text-2xs text-fg-subtle tabular-nums">
+					{thread.timeLabel}
+				</span>
+			</span>
+			<span className="flex items-center gap-1.5">
+				<span
+					className={cn(
+						"truncate text-sm",
+						unread ? "text-fg" : "text-fg-muted",
+					)}
+				>
+					{thread.subject}
+				</span>
+				{thread.suspicious && (
+					<ShieldAlert className="size-3.5 shrink-0 text-danger" />
+				)}
+				{thread.starred && (
+					<Star className="size-3 shrink-0 fill-warning text-warning" />
+				)}
+				{thread.hasAttachment && (
+					<Paperclip className="size-3 shrink-0 text-fg-subtle" />
+				)}
+			</span>
+			<span className="flex items-center gap-1.5">
+				<span className="line-clamp-1 min-w-0 flex-1 text-xs text-fg-subtle">
+					{thread.snippet}
+				</span>
+				{thread.category && thread.category !== "personal" && (
+					<Badge tone={categoryTone[thread.category]} className="shrink-0">
+						{thread.category}
+					</Badge>
+				)}
+				{badge}
+			</span>
+		</span>
+	);
+}
+
+/**
+ * Full inner body of a comfortable row (unread dot + avatar + text content).
+ * Place inside any wrapper element that uses `comfortableRowClass()`.
+ */
+export function ComfortableRowBody({ thread }: { thread: ThreadRowData }) {
+	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} />
+		</>
+	);
+}
+
+export function CompactRow({
+	thread,
+	active,
+	onClick,
+}: {
+	thread: ThreadRowData;
+	active?: boolean;
+	onClick?: () => void;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={compactRowClass({ active })}
+		>
+			<CompactRowBody thread={thread} />
+		</button>
+	);
+}
+
+export function ComfortableRow({
+	thread,
+	active,
+	onClick,
+}: {
+	thread: ThreadRowData;
+	active?: boolean;
+	onClick?: () => void;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={comfortableRowClass({ active })}
+		>
+			<ComfortableRowBody thread={thread} />
+		</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: {
+	thread: ThreadRowData;
+	active?: boolean;
+	onClick?: () => void;
+}) => React.ReactNode;

package/src/components/mobile-message-action-bar.render.test.ts

@@ -0,0 +1,87 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { MobileMessageActionBar } from "./mobile-message-action-bar.js";
+
+const base = { hasThread: true } as const;
+
+const countMatches = (html: string, needle: string) =>
+	html.split(needle).length - 1;
+
+describe("MobileMessageActionBar", () => {
+	it("renders exactly one star and one trash, and no archive (IMAP has no archive)", () => {
+		const html = renderToString(
+			createElement(MobileMessageActionBar, {
+				...base,
+				moveSlot: createElement("button", {
+					type: "button",
+					"aria-label": "Move to folder",
+				}),
+			}),
+		);
+		assert.equal(countMatches(html, 'aria-label="Flag"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Move to folder"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Move to Trash"'), 1);
+		assert.doesNotMatch(html, /aria-label="Archive"/);
+	});
+
+	it("flips the star label when starred", () => {
+		const html = renderToString(
+			createElement(MobileMessageActionBar, { ...base, isStarred: true }),
+		);
+		assert.match(html, /aria-label="Remove flag"/);
+		assert.match(html, /aria-pressed="true"/);
+	});
+
+	it("renders the move slot the caller supplies", () => {
+		const html = renderToString(
+			createElement(MobileMessageActionBar, {
+				...base,
+				moveSlot: createElement("button", {
+					type: "button",
+					"aria-label": "Move to folder",
+				}),
+			}),
+		);
+		assert.match(html, /aria-label="Move to folder"/);
+	});
+
+	it("shows the overflow trigger when a mark-read handler is present", () => {
+		const html = renderToString(
+			createElement(MobileMessageActionBar, {
+				...base,
+				onToggleRead: () => undefined,
+			}),
+		);
+		assert.match(html, /aria-label="More actions"/);
+	});
+
+	it("omits the overflow trigger with no overflow actions", () => {
+		const html = renderToString(createElement(MobileMessageActionBar, base));
+		assert.doesNotMatch(html, /aria-label="More actions"/);
+	});
+
+	it("renders the per-message reply verbs and no intelligence toggle", () => {
+		const html = renderToString(createElement(MobileMessageActionBar, base));
+		assert.match(html, /aria-label="Reply"/);
+		assert.match(html, /aria-label="Reply all"/);
+		assert.match(html, /aria-label="Forward"/);
+		assert.doesNotMatch(html, /intelligence panel/);
+	});
+
+	it("keeps verbs pressable rather than disabling them", () => {
+		const html = renderToString(createElement(MobileMessageActionBar, base));
+		assert.doesNotMatch(html, /disabled=""/);
+	});
+
+	it("surfaces the unavailable hint when no message is open", () => {
+		const html = renderToString(
+			createElement(MobileMessageActionBar, {
+				hasThread: false,
+				unavailableHint: "Open a message first",
+			}),
+		);
+		assert.match(html, /Open a message first/);
+	});
+});

package/src/components/mobile-message-action-bar.stories.tsx

@@ -0,0 +1,57 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { FolderInput } from "lucide-react";
+import { Button } from "./button.js";
+import { MobileMessageActionBar } from "./mobile-message-action-bar.js";
+
+const moveSlot = (
+	<Button
+		variant="ghost"
+		size="sm"
+		icon={<FolderInput className="size-5" />}
+		aria-label="Move to folder"
+		title="Move to folder"
+		className="min-h-11 min-w-11 px-0"
+	/>
+);
+
+const meta: Meta<typeof MobileMessageActionBar> = {
+	title: "Kit/MobileMessageActionBar",
+	component: MobileMessageActionBar,
+	parameters: { layout: "centered" },
+	decorators: [
+		((Story) => (
+			<div
+				className="overflow-hidden rounded-lg border border-line"
+				style={{ width: 390 }}
+			>
+				<Story />
+			</div>
+		)) satisfies Decorator,
+	],
+	args: {
+		hasThread: true,
+		moveSlot,
+		onReply: () => undefined,
+		onReplyAll: () => undefined,
+		onForward: () => undefined,
+		onToggleStar: () => undefined,
+		onDelete: () => undefined,
+		onToggleRead: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof MobileMessageActionBar>;
+
+export const Default: Story = {};
+
+export const Starred: Story = { args: { isStarred: true } };
+
+/** No message open: the verbs no-op and the bar surfaces a one-line reason
+ *  instead of disabling. */
+export const NoMessageOpen: Story = {
+	args: {
+		hasThread: false,
+		unavailableHint: "Open a message first",
+	},
+};