@remit/ui 0.0.2 → 0.0.4

package/package.json

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

package/src/components/app-top-bar.render.test.ts

@@ -0,0 +1,54 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { AppTopBar, type AppTopBarProps } from "./app-top-bar.js";
+
+const slot = (testId: string) =>
+	createElement("div", { "data-testid": testId }, testId);
+
+const render = (overrides: Partial<AppTopBarProps> = {}): string =>
+	renderToString(
+		createElement(AppTopBar, {
+			search: slot("search"),
+			...overrides,
+		}),
+	);
+
+describe("AppTopBar", () => {
+	it("renders the search slot — the bar's reason to exist", () => {
+		assert.match(render(), /data-testid="search"/);
+	});
+
+	it("renders the leading and action slots when supplied", () => {
+		const html = render({
+			leading: slot("leading"),
+			actions: slot("actions"),
+		});
+		assert.match(html, /data-testid="leading"/);
+		assert.match(html, /data-testid="actions"/);
+	});
+
+	it("omits the optional slots entirely rather than leaving empty boxes", () => {
+		const html = render();
+		assert.doesNotMatch(html, /data-testid="leading"/);
+		assert.doesNotMatch(html, /data-testid="actions"/);
+	});
+
+	it("lays the bar out leading · search · actions", () => {
+		const html = render({
+			leading: slot("leading"),
+			actions: slot("actions"),
+		});
+		assert.ok(
+			html.indexOf("leading") < html.indexOf("search") &&
+				html.indexOf("search") < html.indexOf("actions"),
+			"slots render in reading order",
+		);
+	});
+
+	it("is a banner landmark spanning the app, not a pane header", () => {
+		assert.match(render(), /<header/);
+		assert.match(render(), /w-full/);
+	});
+});

package/src/components/app-top-bar.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Bug, Menu, SquarePen } from "lucide-react";
+import { useState } from "react";
+import { AppTopBar } from "./app-top-bar.js";
+import { Avatar } from "./avatar.js";
+import { Button } from "./button.js";
+import { type SearchChip, SearchChipInput } from "./search-chip-input.js";
+
+const meta: Meta<typeof AppTopBar> = {
+	title: "Mail/AppTopBar",
+	component: AppTopBar,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AppTopBar>;
+
+const Brand = () => (
+	<>
+		<Button
+			variant="ghost"
+			icon={<Menu className="size-5" />}
+			aria-label="Menu"
+			className="px-0 lg:hidden"
+		/>
+		<span className="px-1 text-sm font-semibold tracking-tight text-fg">
+			remit
+		</span>
+	</>
+);
+
+const Actions = () => (
+	<>
+		<Button
+			variant="ghost"
+			size="sm"
+			icon={<SquarePen className="size-4" />}
+			title="Compose"
+			aria-label="Compose"
+		/>
+		<Button
+			variant="ghost"
+			size="sm"
+			icon={<Bug className="size-4" />}
+			title="Report a bug"
+			aria-label="Report a bug"
+		/>
+		<Avatar name="Matthijs van Henten" email="mvh@example.com" size="sm" />
+	</>
+);
+
+const SCOPE: SearchChip = { id: "in:spam", label: "in:spam", tone: "scope" };
+
+const Bar = ({ initialChips = [] }: { initialChips?: SearchChip[] }) => {
+	const [chips, setChips] = useState<SearchChip[]>(initialChips);
+	const [value, setValue] = useState("");
+	return (
+		<AppTopBar
+			leading={<Brand />}
+			actions={<Actions />}
+			search={
+				<SearchChipInput
+					size="lg"
+					chips={chips}
+					onRemoveChip={(id) => setChips((cs) => cs.filter((c) => c.id !== id))}
+					value={value}
+					onChange={setValue}
+					onClear={() => {
+						setValue("");
+						setChips([]);
+					}}
+					onClearQuery={() => setValue("")}
+					globalFocusKey={false}
+					placeholder="Search all mail"
+				/>
+			}
+		/>
+	);
+};
+
+/** Over the panes it spans, so the arrangement reads the way it will in the app. */
+const WithPanes = ({ children }: { children: React.ReactNode }) => (
+	<div className="flex h-96 flex-col bg-canvas">
+		{children}
+		<div className="flex min-h-0 flex-1">
+			<div className="w-56 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
+				Nav
+			</div>
+			<div className="w-72 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
+				Message list
+			</div>
+			<div className="min-w-0 flex-1 p-3 text-xs text-fg-muted">
+				Message pane — its own toolbar lives here, under the bar
+			</div>
+		</div>
+	</div>
+);
+
+/** The daily brief's state: search unscoped, nothing narrowing it. */
+export const Unscoped: Story = {
+	render: () => <Bar />,
+};
+
+/**
+ * A narrowing scope in the bar, tinted to mark it as the view the user is in
+ * rather than a filter they typed. Removing it widens the search again.
+ */
+export const Scoped: Story = {
+	render: () => <Bar initialChips={[SCOPE]} />,
+};
+
+/** The arrangement: one bar over the nav, the list, and the message pane. */
+export const OverTheLayout: Story = {
+	render: () => (
+		<WithPanes>
+			<Bar initialChips={[SCOPE]} />
+		</WithPanes>
+	),
+};
+
+export const SearchOnly: Story = {
+	render: () => (
+		<AppTopBar
+			search={
+				<SearchChipInput
+					size="lg"
+					value=""
+					onChange={() => undefined}
+					onClear={() => undefined}
+					globalFocusKey={false}
+					placeholder="Search all mail"
+				/>
+			}
+		/>
+	),
+};

package/src/components/app-top-bar.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface AppTopBarProps {
+	/**
+	 * Leading slot — the brand mark, and on narrow widths the nav trigger.
+	 * Sits over the nav column, so keep it to the nav pane's width budget.
+	 */
+	leading?: ReactNode;
+	/**
+	 * The search field. Spans the bar's middle and is the only thing that
+	 * grows, so the bar reads as one search surface for the whole app.
+	 */
+	search: ReactNode;
+	/**
+	 * Global actions — compose, feedback, avatar. Actions that belong to the
+	 * app rather than to whatever is currently listed or open; message-context
+	 * verbs live in the message pane's own toolbar, under this bar.
+	 */
+	actions?: ReactNode;
+	className?: string;
+}
+
+/**
+ * The application top bar: one full-width row above every pane, carrying
+ * search and the global actions.
+ *
+ * Search sits here rather than over the message list because it is not the
+ * list's search — it reads across the whole app, and the bar's width is what
+ * says so. Leading brand and nav trigger, then the search field taking the
+ * room it needs, then the global actions.
+ *
+ * Presentational and slot-driven; the host supplies the wired field and
+ * action controls.
+ */
+export function AppTopBar({
+	leading,
+	search,
+	actions,
+	className,
+}: AppTopBarProps) {
+	return (
+		<header
+			className={cn(
+				// min-h, not a fixed height: the search field grows when its chips
+				// wrap onto a second line.
+				"flex min-h-16 w-full shrink-0 items-center gap-3 border-b border-line bg-canvas px-3 py-2",
+				className,
+			)}
+		>
+			{leading && (
+				<div className="flex shrink-0 items-center gap-2">{leading}</div>
+			)}
+			<div className="flex min-w-0 flex-1 justify-start">
+				<div className="w-full max-w-2xl">{search}</div>
+			</div>
+			{actions && (
+				<div className="flex shrink-0 items-center gap-1">{actions}</div>
+			)}
+		</header>
+	);
+}

package/src/components/mail-action-toolbar.render.test.ts

@@ -11,7 +11,7 @@ describe("MailActionToolbar", () => {
 		);
 		assert.match(html, /aria-label="Reply"/);
 		assert.match(html, /aria-label="Move to Trash"/);
-		assert.match(html, /aria-label="Flag"/);
+		assert.match(html, /aria-label="Star"/);
 		assert.match(html, /aria-label="Move to mailbox"/);
 		// No archive verb — Remit is IMAP-backed (move-to-folder is the equivalent).
 		assert.doesNotMatch(html, /aria-label="Archive"/);
@@ -27,7 +27,7 @@ describe("MailActionToolbar", () => {
 		assert.match(html, /aria-label="Forward"/);
 		assert.doesNotMatch(html, /aria-label="Archive"/);
 		assert.doesNotMatch(html, /aria-label="Move to Trash"/);
-		assert.doesNotMatch(html, /aria-label="Flag"/);
+		assert.doesNotMatch(html, /aria-label="Star"/);
 		assert.doesNotMatch(html, /aria-label="Move to mailbox"/);
 	});
 

package/src/components/mail-action-toolbar.tsx

@@ -81,7 +81,7 @@ export function MailActionToolbar({
 	replyAllTitle = "Reply all (a)",
 	forwardTitle = "Forward (f)",
 	deleteTitle = "Move to Trash (#)",
-	flagTitle = "Flag (s)",
+	flagTitle = "Star (s)",
 	children,
 	className,
 }: MailActionToolbarProps) {
@@ -158,7 +158,7 @@ export function MailActionToolbar({
 								/>
 							}
 							title={flagTitle}
-							aria-label="Flag"
+							aria-label="Star"
 							onClick={act("flag", onToggleStar)}
 						/>
 					</>

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

@@ -20,7 +20,7 @@ describe("MobileMessageActionBar", () => {
 				}),
 			}),
 		);
-		assert.equal(countMatches(html, 'aria-label="Flag"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Star"'), 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"/);
@@ -30,7 +30,7 @@ describe("MobileMessageActionBar", () => {
 		const html = renderToString(
 			createElement(MobileMessageActionBar, { ...base, isStarred: true }),
 		);
-		assert.match(html, /aria-label="Remove flag"/);
+		assert.match(html, /aria-label="Unstar"/);
 		assert.match(html, /aria-pressed="true"/);
 	});
 

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

@@ -141,9 +141,9 @@ export function MobileMessageActionBar({
 						/>
 					}
 					onClick={act("star", onToggleStar)}
-					aria-label={isStarred ? "Remove flag" : "Flag"}
+					aria-label={isStarred ? "Unstar" : "Star"}
 					aria-pressed={isStarred}
-					title={isStarred ? "Remove flag" : "Flag"}
+					title={isStarred ? "Unstar" : "Star"}
 					className={TOUCH}
 				/>
 				{moveSlot}

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

@@ -87,7 +87,7 @@ describe("MobileReadingPane", () => {
 		// 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="Star"'), 1);
 		assert.equal(countMatches(html, 'aria-label="Move to Trash"'), 1);
 	});
 

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

@@ -6,6 +6,7 @@ import {
 	inboxFilterConfig,
 } from "../filter-presets.js";
 import { MobileSearchView } from "./mobile-search-view.js";
+import type { SearchChip } from "./search-chip-input.js";
 import type { SearchResult } from "./search-result-row.js";
 import type { SearchResultSection } from "./search-results.js";
 
@@ -100,16 +101,19 @@ type Preset = "brief" | "inbox";
 
 function Harness({
 	initialValue = "",
+	initialChips = [],
 	loading,
 	sections,
 	preset,
 }: {
 	initialValue?: string;
+	initialChips?: SearchChip[];
 	loading?: boolean;
 	sections?: SearchResultSection[];
 	preset: Preset;
 }) {
 	const [value, setValue] = useState(initialValue);
+	const [chips, setChips] = useState<SearchChip[]>(initialChips);
 	const [selectedCategory, setSelectedCategory] = useState("all");
 	const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
 	const [activeSource, setActiveSource] = useState("personal");
@@ -152,6 +156,8 @@ function Harness({
 			onChange={setValue}
 			onClear={() => setValue("")}
 			onCancel={() => undefined}
+			chips={chips}
+			onRemoveChip={(id) => setChips((cs) => cs.filter((c) => c.id !== id))}
 			filter={{
 				...base,
 				selectedCategory,
@@ -245,3 +251,20 @@ export const RelatedSelectable: Story = {
 		/>
 	),
 };
+
+/**
+ * The narrowing expression on mobile: the same `SearchChipInput` the desktop
+ * top bar uses, inside the full-screen takeover's own chrome. The chip is
+ * removable in place — backspace at the start of the text reaches it just as it
+ * does on desktop.
+ */
+export const ScopedByChip: Story = {
+	render: () => (
+		<Harness
+			initialValue="invoice"
+			initialChips={[{ id: "in:spam", label: "in:spam" }]}
+			sections={resultSections}
+			preset="inbox"
+		/>
+	),
+};

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

@@ -2,6 +2,7 @@ import { X } from "lucide-react";
 import { Button } from "./button.js";
 import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
 import { SearchBar } from "./search-bar.js";
+import type { SearchChip } from "./search-chip-input.js";
 import type { SearchResult } from "./search-result-row.js";
 import { type SearchResultSection, SearchResults } from "./search-results.js";
 
@@ -30,6 +31,15 @@ export interface MobileSearchViewProps {
 	onSelectResult?: (result: SearchResult) => void;
 	/** Active filter-token chips parsed from the query; see `SearchResultsProps`. */
 	tokens?: { label: string; onRemove: () => void }[];
+	/**
+	 * Narrowing terms rendered inline inside the search field, as part of the
+	 * editable expression — the same `SearchChipInput` the desktop top bar uses.
+	 * Supersedes `tokens` for chips the user can act on: `tokens` renders them as
+	 * a static row above the results, `chips` puts them in the field where
+	 * backspace and the caret keys reach them.
+	 */
+	chips?: readonly SearchChip[];
+	onRemoveChip?: (id: string) => void;
 }
 
 /**
@@ -55,6 +65,8 @@ export function MobileSearchView({
 	loading,
 	onSelectResult,
 	tokens,
+	chips,
+	onRemoveChip,
 }: MobileSearchViewProps) {
 	const body = (
 		<SearchResults
@@ -76,6 +88,8 @@ export function MobileSearchView({
 						value={value}
 						onChange={onChange}
 						onClear={onClear}
+						chips={chips}
+						onRemoveChip={onRemoveChip}
 						globalFocusKey={false}
 						showClearButton={false}
 					/>

package/src/components/nav-sidebar.render.test.ts

@@ -69,6 +69,18 @@ describe("NavSidebar", () => {
 		assert.match(html, /Daily brief/);
 	});
 
+	it("labels the \\Flagged virtual mailbox 'Starred'", () => {
+		const html = renderToString(
+			createElement(NavSidebar, {
+				accounts,
+				selectedNavId: "flagged",
+				onSelectNav: () => undefined,
+			}),
+		);
+		assert.match(html, /Starred/);
+		assert.doesNotMatch(html, /Flagged/);
+	});
+
 	it("renders system and custom mailbox names", () => {
 		const html = renderToString(
 			createElement(NavSidebar, {

package/src/components/nav-sidebar.tsx

@@ -580,8 +580,8 @@ export function NavSidebar({
 				navId="flagged"
 				linkComponent={linkComponent}
 				icon={<Star className="size-4" />}
-				label="Flagged"
-				ariaLabel="Flagged"
+				label="Starred"
+				ariaLabel="Starred"
 				active={selectedNavId === "flagged"}
 				onClick={() => onSelectNav?.("flagged")}
 			/>

package/src/components/search-bar.render.test.ts

@@ -53,3 +53,20 @@ describe("SearchBar", () => {
 		assert.match(html, /value="receipt"/);
 	});
 });
+
+describe("SearchBar narrowing chips", () => {
+	it("carries the chips inside the field, alongside the typed text", () => {
+		const html = renderToString(
+			createElement(SearchBar, {
+				value: "invoice",
+				onChange: noop,
+				onClear: noop,
+				chips: [{ id: "in:spam", label: "in:spam" }],
+				onRemoveChip: noop,
+			}),
+		);
+		assert.match(html, /in:spam/);
+		assert.match(html, /aria-label="Remove filter: in:spam"/);
+		assert.match(html, /value="invoice"/);
+	});
+});

package/src/components/search-bar.stories.tsx

@@ -41,6 +41,8 @@ export const WithQuery: Story = {
 export const Focused: Story = {
 	render: () => <Interactive />,
 	play: async ({ canvasElement }) => {
-		canvasElement.querySelector<HTMLInputElement>("#mail-search")?.focus();
+		canvasElement
+			.querySelector<HTMLInputElement>('input[aria-label="Search mail"]')
+			?.focus();
 	},
 };

package/src/components/search-bar.tsx

@@ -1,6 +1,10 @@
-import { Search, X } from "lucide-react";
-import { useCallback, useEffect, useRef } from "react";
-import { cn } from "../lib/cn.js";
+import {
+	type SearchChip,
+	SearchChipInput,
+	type SearchChipInputProps,
+} from "./search-chip-input.js";
+
+export type { SearchChip };
 
 export interface SearchBarProps {
 	value: string;
@@ -16,6 +20,12 @@ export interface SearchBarProps {
 	 * `onClear` when omitted.
 	 */
 	onClearQuery?: () => void;
+	/**
+	 * Narrowing terms shown inline ahead of the typed text. Omit for a plain
+	 * text field; see `SearchChipInput` for the expression semantics.
+	 */
+	chips?: readonly SearchChip[];
+	onRemoveChip?: (id: string) => void;
 	placeholder?: string;
 	/**
 	 * Bind the global "/" shortcut that focuses the field from anywhere on the
@@ -28,91 +38,49 @@ export interface SearchBarProps {
 	 * clear-and-close so there is exactly one X (Esc still clears the query).
 	 */
 	showClearButton?: boolean;
+	/** Field scale — `lg` for the global top bar. See `SearchChipInput`. */
+	size?: SearchChipInputProps["size"];
+	/**
+	 * DOM id of the text input. Defaults to a generated, per-instance id; see
+	 * `SearchChipInput`, which explains why a shared default breaks the field's
+	 * enclosing label.
+	 */
+	inputId?: string;
+	className?: string;
 }
 
-const isEditableTarget = (target: EventTarget | null): boolean => {
-	if (!(target instanceof HTMLElement)) return false;
-	return (
-		target.tagName === "INPUT" ||
-		target.tagName === "TEXTAREA" ||
-		target.isContentEditable
-	);
-};
-
+/**
+ * The mail search field. A thin naming layer over `SearchChipInput`, which owns
+ * the chips-plus-text expression and its keyboard contract; every search
+ * surface (list header, mobile takeover, global top bar) renders this one
+ * field so the behaviour cannot drift between them.
+ */
 export const SearchBar = ({
 	value,
 	onChange,
 	onClear,
 	onClearQuery,
+	chips,
+	onRemoveChip,
 	placeholder = "Search mail...",
 	globalFocusKey = true,
 	showClearButton = true,
-}: SearchBarProps) => {
-	const inputRef = useRef<HTMLInputElement>(null);
-	const clearQuery = onClearQuery ?? onClear;
-
-	const handleClear = useCallback(() => {
-		onClear();
-		inputRef.current?.focus();
-	}, [onClear]);
-
-	const handleKeyDown = useCallback(
-		(event: React.KeyboardEvent<HTMLInputElement>) => {
-			if (event.key !== "Escape") return;
-			if (value) {
-				clearQuery();
-				return;
-			}
-			inputRef.current?.blur();
-		},
-		[value, clearQuery],
-	);
-
-	useEffect(() => {
-		if (!globalFocusKey) return;
-		const handleGlobalSlash = (event: KeyboardEvent) => {
-			if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey) {
-				return;
-			}
-			if (isEditableTarget(event.target)) return;
-			event.preventDefault();
-			inputRef.current?.focus();
-		};
-		window.addEventListener("keydown", handleGlobalSlash);
-		return () => window.removeEventListener("keydown", handleGlobalSlash);
-	}, [globalFocusKey]);
-
-	return (
-		<div className="relative w-full">
-			<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-fg-muted pointer-events-none" />
-			<input
-				ref={inputRef}
-				id="mail-search"
-				name="q"
-				type="text"
-				aria-label="Search mail"
-				value={value}
-				onChange={(e) => onChange(e.target.value)}
-				onKeyDown={handleKeyDown}
-				placeholder={placeholder}
-				className={cn(
-					"w-full pl-9 pr-9 py-1.5 text-sm rounded-md",
-					"bg-surface-sunken/50 border border-transparent",
-					"focus:bg-canvas focus:border-line focus:outline-none focus:ring-2 focus:ring-ring",
-					"placeholder:text-fg-muted",
-					"transition-colors",
-				)}
-			/>
-			{value && showClearButton && (
-				<button
-					type="button"
-					onClick={handleClear}
-					className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-surface-raised transition-colors"
-					aria-label="Clear search"
-				>
-					<X className="size-4 text-fg-muted" />
-				</button>
-			)}
-		</div>
-	);
-};
+	size,
+	inputId,
+	className,
+}: SearchBarProps) => (
+	<SearchChipInput
+		value={value}
+		onChange={onChange}
+		onClear={onClear}
+		onClearQuery={onClearQuery}
+		chips={chips}
+		onRemoveChip={onRemoveChip}
+		placeholder={placeholder}
+		globalFocusKey={globalFocusKey}
+		showClearButton={showClearButton}
+		size={size}
+		inputId={inputId}
+		className={className}
+	/>
+);