@remit/ui 0.0.1

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

@@ -0,0 +1,175 @@
+import {
+	Forward,
+	Mail,
+	MailOpen,
+	Reply,
+	ReplyAll,
+	Star,
+	Trash2,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { PopoverMenu, type PopoverMenuItem } from "./popover-menu.js";
+
+export type MobileMessageAction =
+	| "reply"
+	| "replyAll"
+	| "forward"
+	| "star"
+	| "delete"
+	| "toggleRead";
+
+export interface MobileMessageActionBarProps {
+	/** Whether a message is open. Gates the verbs (never disables). */
+	hasThread: boolean;
+	/* ---- Reply verbs ----
+	 * Per-message: replying targets the message this bar belongs to. Omit a
+	 * handler to drop that verb. */
+	onReply?: () => void;
+	onReplyAll?: () => void;
+	onForward?: () => void;
+	isStarred?: boolean;
+	onToggleStar?: () => void;
+	onDelete?: () => void;
+	isRead?: boolean;
+	onToggleRead?: () => void;
+	/**
+	 * Move-to-folder trigger. The kit owns the bar layout; the app supplies the
+	 * picker trigger so the kit needn't depend on folder data. Sized to match the
+	 * bar's touch buttons by the caller.
+	 */
+	moveSlot?: ReactNode;
+	/** Extra overflow rows appended after mark read/unread. */
+	overflowItems?: PopoverMenuItem[];
+	/** Fired when a verb is pressed with no message open, so the host can explain. */
+	onUnavailable?: (action: MobileMessageAction) => void;
+	/** One-line inline notice rendered under the bar when no message is open. */
+	unavailableHint?: ReactNode;
+	className?: string;
+}
+
+const TOUCH = "min-h-11 min-w-11 px-0";
+
+/**
+ * The per-message action bar for the narrow-width (single-pane) reading view.
+ * It belongs to one expanded message and owns that message's verbs — reply /
+ * reply-all / forward on the left, then star, move, delete and the overflow
+ * (mark read/unread) on the right — so reply targets this message and nothing
+ * repeats it. Intelligence is not here: it lives once in the top app bar and
+ * reflects the active message. No archive either — Remit is IMAP-backed and
+ * IMAP has no archive concept. Built from the kit `Button`, `PopoverMenu` and a
+ * caller-supplied `moveSlot`; buttons stay pressable with no message open and
+ * call `onUnavailable` rather than greying out.
+ */
+export function MobileMessageActionBar({
+	hasThread,
+	onReply,
+	onReplyAll,
+	onForward,
+	isStarred,
+	onToggleStar,
+	onDelete,
+	isRead,
+	onToggleRead,
+	moveSlot,
+	overflowItems = [],
+	onUnavailable,
+	unavailableHint,
+	className,
+}: MobileMessageActionBarProps) {
+	const act = (action: MobileMessageAction, handler?: () => void) => () => {
+		if (!hasThread) {
+			onUnavailable?.(action);
+			return;
+		}
+		handler?.();
+	};
+
+	const readItem: PopoverMenuItem[] = onToggleRead
+		? [
+				{
+					key: "toggle-read",
+					label: isRead ? "Mark as unread" : "Mark as read",
+					icon: isRead ? (
+						<Mail className="size-4" />
+					) : (
+						<MailOpen className="size-4" />
+					),
+					onSelect: act("toggleRead", onToggleRead),
+				},
+			]
+		: [];
+
+	return (
+		<div className={cn("relative", className)}>
+			<div className="flex h-12 shrink-0 items-center gap-0.5 border-y border-line bg-canvas px-1">
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Reply className="size-5" />}
+					onClick={act("reply", onReply)}
+					aria-label="Reply"
+					title="Reply"
+					className={TOUCH}
+				/>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<ReplyAll className="size-5" />}
+					onClick={act("replyAll", onReplyAll)}
+					aria-label="Reply all"
+					title="Reply all"
+					className={TOUCH}
+				/>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Forward className="size-5" />}
+					onClick={act("forward", onForward)}
+					aria-label="Forward"
+					title="Forward"
+					className={TOUCH}
+				/>
+				<div className="flex-1" />
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={
+						<Star
+							className={cn("size-5", isStarred && "fill-warning text-warning")}
+						/>
+					}
+					onClick={act("star", onToggleStar)}
+					aria-label={isStarred ? "Remove flag" : "Flag"}
+					aria-pressed={isStarred}
+					title={isStarred ? "Remove flag" : "Flag"}
+					className={TOUCH}
+				/>
+				{moveSlot}
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Trash2 className="size-5" />}
+					onClick={act("delete", onDelete)}
+					aria-label="Move to Trash"
+					title="Move to Trash"
+					className={TOUCH}
+				/>
+				<PopoverMenu
+					triggerLabel="More actions"
+					items={[...readItem, ...overflowItems]}
+				/>
+			</div>
+			{!hasThread && unavailableHint && (
+				// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
+				<p
+					role="status"
+					className="border-b border-line bg-surface-sunken px-3 py-1 text-2xs text-fg-subtle"
+				>
+					{unavailableHint}
+				</p>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,102 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { ThreadData } from "./app-shell-types.js";
+import type { IntelligenceData } from "./intelligence-panel.js";
+import { MobileReadingPane } from "./mobile-reading-pane.js";
+
+const thread: ThreadData = {
+	subject: "Q3 planning notes",
+	messages: [
+		{
+			id: "m1",
+			fromName: "Alex Rivera",
+			fromEmail: "alex@example.com",
+			toLabel: "you",
+			dateLabel: "Mon 9:42",
+			snippet: "Here are the notes.",
+			bodyHtml: "<p>Here are the notes.</p>",
+		},
+		{
+			id: "m2",
+			fromName: "Jamie Chen",
+			fromEmail: "jamie@example.com",
+			toLabel: "you",
+			dateLabel: "Mon 11:15",
+			snippet: "Thanks.",
+			bodyHtml: "<p>Thanks.</p>",
+		},
+		{
+			id: "m3",
+			fromName: "Alex Rivera",
+			fromEmail: "alex@example.com",
+			toLabel: "you",
+			dateLabel: "Tue 08:03",
+			snippet: "One more thing.",
+			bodyHtml: "<p>One more thing.</p>",
+			expanded: true,
+		},
+	],
+};
+
+const intelligence: IntelligenceData = {
+	sender: {
+		name: "Alex Rivera",
+		email: "alex@example.com",
+		trust: "wellknown",
+		firstSeenLabel: "Jan 2025",
+	},
+	authenticity: {
+		verdict: "aligned",
+		fromDomain: "example.com",
+		summary: "Verified.",
+	},
+	category: { value: "Personal" },
+	similar: [],
+};
+
+const countMatches = (html: string, needle: string) =>
+	html.split(needle).length - 1;
+
+describe("MobileReadingPane", () => {
+	it("renders the top bar with back, subject and the intelligence toggle", () => {
+		const html = renderToString(
+			createElement(MobileReadingPane, {
+				thread,
+				intelligence,
+				onBack: () => undefined,
+			}),
+		);
+		assert.match(html, /aria-label="Back to messages"/);
+		assert.match(html, /Q3 planning notes/);
+		assert.match(html, /aria-label="Show intelligence panel"/);
+	});
+
+	it("omits the intelligence toggle when no intelligence is given", () => {
+		const html = renderToString(
+			createElement(MobileReadingPane, { thread, onBack: () => undefined }),
+		);
+		assert.doesNotMatch(html, /aria-label="Show intelligence panel"/);
+	});
+
+	it("shows exactly one per-message action bar — the expanded message's", () => {
+		const html = renderToString(
+			createElement(MobileReadingPane, { thread, onBack: () => undefined }),
+		);
+		// One expanded message ⇒ one Reply / Flag / Trash cluster; the two
+		// collapsed rows carry no bar.
+		assert.equal(countMatches(html, 'aria-label="Reply"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Flag"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Move to Trash"'), 1);
+	});
+
+	it("has no thread-level reply footer (reply belongs to the message)", () => {
+		// The desktop/legacy footer carries a "Reply (r)" title; the per-message
+		// bar titles are plain "Reply". Assert the footer affordance is absent.
+		const html = renderToString(
+			createElement(MobileReadingPane, { thread, onBack: () => undefined }),
+		);
+		assert.doesNotMatch(html, /title="Reply \(r\)"/);
+	});
+});

package/src/components/mobile-reading-pane.tsx

@@ -0,0 +1,188 @@
+import { ArrowLeft, Info } from "lucide-react";
+import { type HTMLAttributes, type ReactNode, useState } from "react";
+import { cn } from "../lib/cn.js";
+import type { ThreadData } from "./app-shell-types.js";
+import { Button } from "./button.js";
+import { Dialog } from "./dialog.js";
+import {
+	type IntelligenceData,
+	IntelligencePanel,
+} from "./intelligence-panel.js";
+import { MobileMessageActionBar } from "./mobile-message-action-bar.js";
+import { CollapsedMessage, ExpandedMessage } from "./reading-pane.js";
+
+export interface MobileReadingMessageActions {
+	/** Expand / collapse a message row. */
+	onToggleExpand?: (id: string) => void;
+	onReply?: (id: string) => void;
+	onReplyAll?: (id: string) => void;
+	onForward?: (id: string) => void;
+	onToggleStar?: (id: string) => void;
+	onDelete?: (id: string) => void;
+	onToggleRead?: (id: string) => void;
+	/** Per-message move-to-folder trigger (the app supplies the folder picker). */
+	moveSlot?: (id: string) => ReactNode;
+}
+
+export interface MobileReadingPaneProps {
+	thread: ThreadData;
+	/** Back to the message list. */
+	onBack: () => void;
+	/**
+	 * Intelligence for the active (expanded) message. Drives the single top-bar
+	 * toggle; in a multi-message thread the caller passes the data for whichever
+	 * message is currently expanded. Omit to hide the toggle.
+	 */
+	intelligence?: IntelligenceData;
+	/** Controlled open state for the intelligence sheet. Omit for internal state. */
+	intelligenceOpen?: boolean;
+	onToggleIntelligence?: () => void;
+	actions?: MobileReadingMessageActions;
+	/**
+	 * Live message content. When provided it replaces the static
+	 * `thread.messages` rendering so the app can inject its own message cards
+	 * (each expanded card owns its `MobileMessageActionBar`). `thread.subject`
+	 * still drives the top bar.
+	 */
+	children?: ReactNode;
+	/** Touch handlers attached to the scroll area (swipe-between-messages). */
+	touchHandlers?: HTMLAttributes<HTMLDivElement>;
+}
+
+/**
+ * The narrow-width (single-pane) mobile reading view, and the one shared shell
+ * every mobile reading mock composes. The chrome is fixed: a top app bar with
+ * back, the email subject and — its only other control — the intelligence
+ * toggle for the active message. Each expanded message carries its own
+ * `MobileMessageActionBar` (reply / star / move / delete / overflow); collapsed
+ * rows carry none. There is no thread-level reply footer — reply belongs to the
+ * message it answers. Feed it a `thread` and per-message `actions`; it owns the
+ * layout so no mock hand-rolls it.
+ */
+export function MobileReadingPane({
+	thread,
+	onBack,
+	intelligence,
+	intelligenceOpen,
+	onToggleIntelligence,
+	actions,
+	children,
+	touchHandlers,
+}: MobileReadingPaneProps) {
+	const [localIntelligenceOpen, setLocalIntelligenceOpen] = useState(false);
+	const controlled = onToggleIntelligence !== undefined;
+	const isOpen = controlled
+		? (intelligenceOpen ?? false)
+		: localIntelligenceOpen;
+	const showIntelligenceToggle = Boolean(intelligence) || controlled;
+
+	const toggleIntelligence = () => {
+		if (controlled) {
+			onToggleIntelligence?.();
+			return;
+		}
+		setLocalIntelligenceOpen((value) => !value);
+	};
+
+	const closeIntelligence = () => {
+		if (controlled) {
+			if (isOpen) onToggleIntelligence?.();
+			return;
+		}
+		setLocalIntelligenceOpen(false);
+	};
+
+	return (
+		<article className="flex h-full w-full min-w-0 flex-col bg-canvas">
+			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line bg-surface px-row-inset">
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<ArrowLeft className="size-4" />}
+					onClick={onBack}
+					aria-label="Back to messages"
+					className="-ml-1 shrink-0"
+				/>
+				<h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
+					{thread.subject}
+				</h2>
+				{showIntelligenceToggle && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Info className="size-4" />}
+						onClick={toggleIntelligence}
+						aria-label={
+							isOpen ? "Hide intelligence panel" : "Show intelligence panel"
+						}
+						aria-pressed={isOpen}
+						title="Intelligence"
+						className={cn(
+							"shrink-0",
+							isOpen && "bg-accent-2-soft text-accent-2",
+						)}
+					/>
+				)}
+			</header>
+
+			<div
+				className="flex-1 overflow-y-auto"
+				style={touchHandlers ? { touchAction: "pan-y" } : undefined}
+				{...touchHandlers}
+			>
+				{children ??
+					thread.messages.map((message) => {
+						const bind = (handler?: (id: string) => void) =>
+							handler ? () => handler(message.id) : undefined;
+
+						if (!message.expanded) {
+							return (
+								<CollapsedMessage
+									key={message.id}
+									message={message}
+									onClick={bind(actions?.onToggleExpand)}
+								/>
+							);
+						}
+
+						return (
+							<ExpandedMessage
+								key={message.id}
+								message={message}
+								warning={thread.warning}
+								onHeaderClick={bind(actions?.onToggleExpand)}
+								actionBar={
+									<MobileMessageActionBar
+										hasThread
+										onReply={bind(actions?.onReply)}
+										onReplyAll={bind(actions?.onReplyAll)}
+										onForward={bind(actions?.onForward)}
+										onToggleStar={bind(actions?.onToggleStar)}
+										onDelete={bind(actions?.onDelete)}
+										onToggleRead={bind(actions?.onToggleRead)}
+										moveSlot={actions?.moveSlot?.(message.id)}
+									/>
+								}
+							/>
+						);
+					})}
+			</div>
+
+			{intelligence && !controlled && (
+				<Dialog
+					open={isOpen}
+					onClose={closeIntelligence}
+					title="Intelligence"
+					anchor="right"
+					className="p-0"
+				>
+					<IntelligencePanel
+						data={intelligence}
+						onClose={closeIntelligence}
+						className="h-full w-full border-l-0"
+					/>
+				</Dialog>
+			)}
+		</article>
+	);
+}

package/src/components/mobile-search-view.stories.tsx

@@ -0,0 +1,247 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+	briefFilterConfig,
+	type FilterAccount,
+	inboxFilterConfig,
+} from "../filter-presets.js";
+import { MobileSearchView } from "./mobile-search-view.js";
+import type { SearchResult } from "./search-result-row.js";
+import type { SearchResultSection } from "./search-results.js";
+
+const phoneFrame: Decorator = (Story) => (
+	<div
+		className="overflow-hidden rounded-lg border border-line"
+		style={{ width: 390, height: 720 }}
+	>
+		<Story />
+	</div>
+);
+
+const accounts: FilterAccount[] = [
+	{ id: "personal", label: "matthijs@", count: 42, active: true },
+	{ id: "work", label: "work@acme", count: 17 },
+];
+
+const recentSearches = ["invoice march", "from: stripe", "flight confirmation"];
+
+const topMatches: SearchResult[] = [
+	{
+		id: "r1",
+		sender: "Stripe",
+		subject: "Your invoice for March is ready",
+		snippet: "Invoice #4821 — €149.00 paid on Visa ending 4242.",
+		date: "9:42",
+		unread: true,
+		category: { label: "Receipt", tone: "positive" },
+	},
+	{
+		id: "r2",
+		sender: "Hetzner Online",
+		subject: "Invoice 2026-03 available in your account",
+		snippet: "Dear customer, your invoice for the period is attached.",
+		date: "Mar 3",
+		category: { label: "Finance", tone: "accent" },
+	},
+	{
+		id: "r3",
+		sender: "Anna de Vries",
+		subject: "Re: Q1 invoice approval",
+		snippet: "Approved — can you forward the PDF invoice to finance?",
+		date: "Mar 1",
+		flagged: true,
+	},
+	{
+		id: "r4",
+		sender: "AWS Billing",
+		subject: "Your invoice is now available",
+		snippet: "Your total for February was $312.55 across 6 services.",
+		date: "Feb 28",
+		category: { label: "Finance", tone: "accent" },
+	},
+];
+
+// Semantic "Related" hits carry their own thread + mailbox so they open directly
+// — the matching message often lives outside the loaded list.
+const related: SearchResult[] = [
+	{
+		id: "r5",
+		sender: "QuickBooks",
+		subject: "Reminder: 2 invoices awaiting payment",
+		snippet: "You have outstanding invoices totalling €430.00.",
+		date: "Feb 20",
+		category: { label: "Reminder", tone: "warning" },
+		threadId: "thread-quickbooks",
+		mailboxId: "mailbox-personal",
+	},
+	{
+		id: "r6",
+		sender: "noreply@vendor.io",
+		subject: "Overdue invoice notice",
+		snippet: "This invoice is now 14 days overdue. Please remit payment.",
+		date: "Feb 12",
+		category: { label: "Overdue", tone: "danger" },
+		threadId: "thread-vendor",
+		mailboxId: "mailbox-personal",
+	},
+];
+
+const resultSections: SearchResultSection[] = [
+	{ id: "top", label: "Top matches", results: topMatches },
+	{ id: "related", label: "Related", results: related },
+];
+
+const emptySections: SearchResultSection[] = [
+	{ id: "top", label: "Top matches", results: [] },
+	{ id: "related", label: "Related", results: [] },
+];
+
+type Preset = "brief" | "inbox";
+
+function Harness({
+	initialValue = "",
+	loading,
+	sections,
+	preset,
+}: {
+	initialValue?: string;
+	loading?: boolean;
+	sections?: SearchResultSection[];
+	preset: Preset;
+}) {
+	const [value, setValue] = useState(initialValue);
+	const [selectedCategory, setSelectedCategory] = useState("all");
+	const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
+	const [activeSource, setActiveSource] = useState("personal");
+	const [expanded, setExpanded] = useState(false);
+	const [opened, setOpened] = useState<SearchResult | null>(null);
+
+	const base =
+		preset === "brief"
+			? briefFilterConfig(
+					accounts.map((account) => ({
+						...account,
+						active: account.id === activeSource,
+					})),
+				)
+			: inboxFilterConfig();
+
+	if (opened) {
+		return (
+			<div className="flex h-full flex-col items-center justify-center gap-2 bg-canvas p-6 text-center text-sm">
+				<p className="font-semibold text-fg">Opened conversation</p>
+				<p className="text-fg-muted">{opened.subject}</p>
+				<p className="text-2xs text-fg-subtle">
+					thread {opened.threadId ?? "(none)"} · mailbox{" "}
+					{opened.mailboxId ?? "(none)"}
+				</p>
+				<button
+					type="button"
+					className="mt-2 text-2xs text-accent underline"
+					onClick={() => setOpened(null)}
+				>
+					Back to search
+				</button>
+			</div>
+		);
+	}
+
+	return (
+		<MobileSearchView
+			value={value}
+			onChange={setValue}
+			onClear={() => setValue("")}
+			onCancel={() => undefined}
+			filter={{
+				...base,
+				selectedCategory,
+				activeFilters,
+				expanded,
+				onExpandedChange: setExpanded,
+				onSelectCategory: setSelectedCategory,
+				onSelectSource: setActiveSource,
+				onToggleFilter: (id) =>
+					setActiveFilters((current) => {
+						const next = new Set(current);
+						if (next.has(id)) next.delete(id);
+						else next.add(id);
+						return next;
+					}),
+				onClear: () => {
+					setSelectedCategory("all");
+					setActiveFilters(new Set());
+				},
+			}}
+			recentSearches={recentSearches}
+			onPickRecent={setValue}
+			sections={sections}
+			loading={loading}
+			onSelectResult={setOpened}
+		/>
+	);
+}
+
+const meta: Meta<typeof MobileSearchView> = {
+	title: "Kit/MobileSearchView",
+	component: MobileSearchView,
+	parameters: { layout: "centered" },
+	decorators: [phoneFrame],
+};
+export default meta;
+
+type Story = StoryObj<typeof MobileSearchView>;
+
+/**
+ * Global search — the daily-brief preset, so the FilterSheet carries the account
+ * source row (matthijs@ / work@acme) on top of the shared categories + filters.
+ * The header carries a single X that clears the query AND dismisses the takeover.
+ */
+export const GlobalSearch: Story = {
+	render: () => (
+		<Harness initialValue="invoice" sections={resultSections} preset="brief" />
+	),
+};
+
+/**
+ * Scoped search — a single inbox, so the inbox preset drops the account row
+ * entirely (the view is already scoped); same categories and filters otherwise.
+ */
+export const ScopedSearch: Story = {
+	render: () => (
+		<Harness initialValue="invoice" sections={resultSections} preset="inbox" />
+	),
+};
+
+/** Empty query: recent searches under the brief filter chrome. */
+export const Idle: Story = {
+	render: () => <Harness preset="brief" />,
+};
+
+/** A query that matches nothing. */
+export const NoResults: Story = {
+	render: () => (
+		<Harness initialValue="asdfqwer" sections={emptySections} preset="brief" />
+	),
+};
+
+/** Results still loading. */
+export const Loading: Story = {
+	render: () => <Harness initialValue="invoice" loading preset="brief" />,
+};
+
+/**
+ * Selecting a "Related" (semantic) hit. These rows carry their own thread +
+ * mailbox, so tapping one opens the conversation directly — even though the
+ * matching message lives outside the loaded list. Tap a row under "Related" to
+ * see the thread + mailbox the result hands the app to open. Regression cover for
+ * the brief bug where a tapped related result selected nothing.
+ */
+export const RelatedSelectable: Story = {
+	render: () => (
+		<Harness
+			initialValue="invoice"
+			sections={[{ id: "related", label: "Related", results: related }]}
+			preset="brief"
+		/>
+	),
+};