@remit/ui 0.0.6 → 0.0.7

package/package.json

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

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

@@ -105,6 +105,37 @@ describe("AppShellSlotted slot rendering", () => {
 		);
 	});
 
+	it("renders the top bar above the panes, at every width", () => {
+		const topBarEl = createElement("div", { "data-testid": "topbar" }, "Bar");
+		for (const initialWidth of [800, 1100, 1400]) {
+			const html = render({ initialWidth, topBar: topBarEl });
+			assert.match(
+				html,
+				/data-testid="topbar"/,
+				`top bar at ${initialWidth}px`,
+			);
+			assert.ok(
+				html.indexOf('data-testid="topbar"') <
+					html.indexOf('data-testid="list"'),
+				`top bar precedes the pane group at ${initialWidth}px`,
+			);
+		}
+	});
+
+	it("omits the top bar when the caller passes none", () => {
+		const html = render({ initialWidth: 1100 });
+		assert.doesNotMatch(html, /data-testid="topbar"/);
+	});
+
+	it("hides the top bar with the rest of the layout while loading", () => {
+		const html = render({
+			isLoading: true,
+			skeleton: createElement("div", { "data-testid": "skeleton" }, "Loading"),
+			topBar: createElement("div", { "data-testid": "topbar" }, "Bar"),
+		});
+		assert.doesNotMatch(html, /data-testid="topbar"/);
+	});
+
 	it("renders the overlay regardless of width", () => {
 		const overlayEl = createElement("div", { "data-testid": "overlay" }, "FAB");
 		const narrowHtml = render({ initialWidth: 800, overlay: overlayEl });

package/src/components/app-shell-slotted.tsx

@@ -59,6 +59,13 @@ export interface AppShellSlottedProps {
 	 * The web-client injects the app-specific bar (hamburger / title / search).
 	 */
 	header?: ReactNode;
+	/**
+	 * Full-width row above every pane, including the nav. Unlike `header` it is
+	 * rendered at whatever width the caller mounts it, and it spans the whole
+	 * shell rather than sitting inside a pane — that width is what makes the
+	 * search field in it read as the app's search rather than the list's.
+	 */
+	topBar?: ReactNode;
 	/**
 	 * Content rendered outside the pane group (e.g., the compose FAB). Floats
 	 * over the layout regardless of width.
@@ -130,6 +137,7 @@ export function AppShellSlotted({
 	hasThread = true,
 	density = "comfortable",
 	header,
+	topBar,
 	overlay,
 	skeleton,
 	isLoading = false,
@@ -178,6 +186,8 @@ export function AppShellSlotted({
 					skeleton
 				) : (
 					<>
+						{topBar}
+
 						{/* Narrow top bar: rendered only when the nav is a slide-over
 						    (< 1024px). Desktop has no slim bar. */}
 						{!showNavPane && header && <div className="shrink-0">{header}</div>}

package/src/components/mail-header.render.test.ts

@@ -2,7 +2,9 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
+import { AppTopBar } from "./app-top-bar.js";
 import { MailHeader, type MailHeaderProps } from "./mail-header.js";
+import { SearchBar } from "./search-bar.js";
 
 function render(overrides: Partial<MailHeaderProps> = {}): string {
 	return renderToString(
@@ -67,3 +69,58 @@ describe("MailHeader", () => {
 		assert.match(html, /Daily brief/);
 	});
 });
+
+/**
+ * One search field per page (#49).
+ *
+ * Moving search into `AppTopBar` puts a second `SearchBar` on the same screen
+ * as the list header's own. Two mounted fields compete for the "/" shortcut and
+ * for focus, and phase 1's review already found a pair colliding on a shared
+ * DOM id. `showSearch` is what holds the count at one, so the count is what
+ * these assert.
+ */
+describe("MailHeader search ownership", () => {
+	const countSearchInputs = (html: string): number =>
+		html.match(/aria-label="Search mail"/g)?.length ?? 0;
+
+	const topBar = (): string =>
+		renderToString(
+			createElement(AppTopBar, {
+				search: createElement(SearchBar, {
+					value: "",
+					onChange: () => undefined,
+					onClear: () => undefined,
+					size: "lg",
+				}),
+			}),
+		);
+
+	it("mounts no search field, and no magnifier, when showSearch is false", () => {
+		const html = render({ isDesktop: true, showSearch: false });
+		assert.equal(countSearchInputs(html), 0);
+		assert.doesNotMatch(html, /aria-label="Search"/);
+	});
+
+	it("keeps the title and unread count when search lives elsewhere", () => {
+		const html = render({ isDesktop: true, showSearch: false });
+		assert.match(html, /Daily brief/);
+		assert.match(html, /15,338 unread/);
+	});
+
+	it("suppresses the field below desktop too, where the takeover owns search", () => {
+		assert.equal(
+			countSearchInputs(render({ isDesktop: false, showSearch: false })),
+			0,
+		);
+	});
+
+	it("leaves exactly one field on screen beside the app top bar", () => {
+		const combined = topBar() + render({ isDesktop: true, showSearch: false });
+		assert.equal(countSearchInputs(combined), 1);
+	});
+
+	it("would be two fields if the header kept its own — the premise being guarded", () => {
+		const combined = topBar() + render({ isDesktop: true });
+		assert.equal(countSearchInputs(combined), 2);
+	});
+});

package/src/components/mail-header.tsx

@@ -22,6 +22,12 @@ export interface MailHeaderProps {
 	/** Mobile only: whether the inline search is expanded over the title. */
 	searchOpen: boolean;
 	onSearchOpenChange: (open: boolean) => void;
+	/**
+	 * Whether this header owns a search surface at all. Defaults to true. Set
+	 * false where an enclosing `AppTopBar` already carries the search field, so
+	 * the page never mounts two search inputs competing for the same focus.
+	 */
+	showSearch?: boolean;
 }
 
 /**
@@ -44,6 +50,7 @@ export function MailHeader({
 	onSearchClear,
 	searchOpen,
 	onSearchOpenChange,
+	showSearch = true,
 }: MailHeaderProps) {
 	const unreadLabel = `${unreadCount.toLocaleString()} unread`;
 	const clearSearch = onSearchClear ?? (() => onSearchChange(""));
@@ -75,7 +82,17 @@ export function MailHeader({
 	return (
 		<header className="flex shrink-0 flex-col bg-canvas">
 			<div className="flex h-12 items-center gap-2 px-row-inset">
-				{isDesktop ? (
+				{!showSearch ? (
+					<>
+						{menuButton}
+						<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
+							{title}
+						</h1>
+						<span className="shrink-0 text-2xs text-fg-subtle">
+							{unreadLabel}
+						</span>
+					</>
+				) : isDesktop ? (
 					<>
 						{menuButton}
 						<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">