@remit/ui 0.0.79 → 0.0.81

package/package.json

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

package/src/components/app-shell-types.ts

@@ -6,6 +6,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import type { TriageHandlers } from "../lib/keymap.js";
 import type { SelectionModifiers } from "../lib/use-selection.js";
 import type {
 	IntelligenceData,
@@ -84,6 +85,25 @@ export interface MessageListSelection {
 	onRowSelect?: (id: string, modifiers: SelectionModifiers) => boolean;
 }
 
+/**
+ * The keyboard layer above the list, owned by whoever mounts it. The handler
+ * table is what the pane reads: it offers the keys that table answers, draws
+ * the cursor the ones it answers move, and keeps its own arrow-key traversal
+ * for the ones it does not. A layer that answers nothing offers nothing, so a
+ * host cannot advertise a key it has not wired.
+ *
+ * `useListKeyboard` builds it; the pane hands `ref` back the element the layer
+ * listens on.
+ */
+export interface MessageListKeyboard {
+	/** The row the cursor sits on. */
+	focusedId: string | undefined;
+	/** What the layer answers, and therefore what the footer offers. */
+	handlers: TriageHandlers;
+	/** Takes the pane element the layer binds its keys to. */
+	ref: (element: HTMLElement | null) => void;
+}
+
 /**
  * Measures an element's OWN width via ResizeObserver — a container query, not a
  * viewport one. The shell reflows by the space it actually occupies (so it works
@@ -213,6 +233,15 @@ export const briefCategories: ReadonlyArray<{
 	{ id: "social", label: "Social" },
 ];
 
+/**
+ * Whether an id names one of the brief's category scopes. A host holding one
+ * category across views whose sheets speak plain strings narrows it with this
+ * rather than asserting it.
+ */
+export function isBriefCategory(id: string): id is BriefCategoryFilter {
+	return briefCategories.some((c) => c.id === id);
+}
+
 export interface ThreadRowLabel {
 	labelId: string;
 	name: string;
@@ -354,6 +383,8 @@ export interface AppShellProps {
 	selectionBar?: ReactNode;
 	/** The list's selection, forwarded to `MessageListPane`. */
 	selection?: MessageListSelection;
+	/** The list's keyboard layer, forwarded to `MessageListPane`. */
+	keyboard?: MessageListKeyboard;
 	intelligence?: IntelligenceData;
 	/** Pane 4 visible. Defaults to true when intelligence is present. */
 	intelligenceOpen?: boolean;

package/src/components/app-shell.tsx

@@ -71,6 +71,7 @@ export function AppShell({
 	initialNarrowView = "list",
 	initialTouchState,
 	selection,
+	keyboard,
 	selectionBar,
 	intelligence,
 	intelligenceOpen = true,
@@ -129,6 +130,7 @@ export function AppShell({
 			onSelectBriefCategory={selectCategory}
 			initialTouchState={initialTouchState}
 			selection={selection}
+			keyboard={keyboard}
 			selectionBar={selectionBar}
 		/>
 	);
@@ -190,6 +192,7 @@ function AppShellList({
 	onSelectBriefCategory,
 	initialTouchState,
 	selection,
+	keyboard,
 	selectionBar,
 }: Pick<
 	AppShellProps,
@@ -209,6 +212,7 @@ function AppShellList({
 	| "onSelectThread"
 	| "initialTouchState"
 	| "selection"
+	| "keyboard"
 	| "selectionBar"
 > & {
 	narrowView: NarrowView;
@@ -244,15 +248,15 @@ function AppShellList({
 			searchQuery={searchQuery}
 			onRetry={onRetry}
 			onReportError={onReportError}
-			briefCategory={briefCategory}
+			briefFilter={{ briefCategory, onSelectBriefCategory }}
 			selectedThreadId={selectedThreadId}
 			density={density}
 			onSelectThread={onSelectThread}
-			onSelectBriefCategory={onSelectBriefCategory}
 			onOpenNav={showNavPane ? undefined : layout?.openNav}
 			isDesktop={showReadingPane}
 			initialTouchState={initialTouchState}
 			selection={selection}
+			keyboard={keyboard}
 			selectionBar={selectionBar}
 		/>
 	);

package/src/components/brief-sections.tsx

@@ -56,6 +56,16 @@ export const briefFilterChips: FilterSheetFilter[] = briefFilterDefs.map(
 	({ id, label }) => ({ id, label }),
 );
 
+/**
+ * Whether an id names one of the brief's attribute chips. A consumer holding
+ * one filter set across several views — the workbench shell, whose mailbox
+ * sheet offers chips of its own — narrows that set to the brief's own with
+ * this rather than asserting it.
+ */
+export function isBriefFilterId(id: string): id is BriefFilterId {
+	return briefFilterDefs.some((f) => f.id === id);
+}
+
 /**
  * Whether a thread survives a set of attribute chips, as the brief's own list
  * applies them. Exported so a consumer narrowing the same rows on another
@@ -77,7 +87,7 @@ export function matchesBriefFilters(
  * search takeover) holds the set so both surfaces answer to one selection, and
  * takes every control over it with the set.
  */
-type BriefFilterControl =
+export type BriefFilterControl =
 	| {
 			activeFilters: ReadonlySet<BriefFilterId>;
 			onToggleFilter: (id: BriefFilterId) => void;
@@ -89,13 +99,8 @@ type BriefFilterControl =
 			onClearFilters?: never;
 	  };
 
-interface BriefSectionsBaseProps {
-	sections: ThreadSection[];
-	briefCategory?: BriefCategoryFilter;
-	selectedThreadId?: string;
-	Row: BriefRowComponent;
-	onSelectThread?: (id: string) => void;
-	onSelectBriefCategory?: (category: BriefCategoryFilter) => void;
+/** The accounts the aggregate is segmented by, as the FilterSheet draws them. */
+export interface BriefSourceControl {
 	/**
 	 * Account/source pills, passed straight through to the FilterSheet. Selection
 	 * is encoded per source via `active`; the row only renders when more than one
@@ -106,6 +111,31 @@ interface BriefSectionsBaseProps {
 	sourcesNote?: string;
 	/** Called when the user selects a source/account pill. */
 	onSelectSource?: (id: string) => void;
+}
+
+/** The single category the sections are scoped to. */
+export interface BriefCategoryControl {
+	briefCategory?: BriefCategoryFilter;
+	onSelectBriefCategory?: (category: BriefCategoryFilter) => void;
+}
+
+/**
+ * The brief's whole filter surface as a host holds it: the category scope, the
+ * account pills and the attribute chips. A host with a second surface over the
+ * same rows — the phone search takeover — holds this one set and hands it to
+ * both, so a filter set on either is set on both.
+ */
+export type BriefFilterSurface = BriefCategoryControl &
+	BriefSourceControl &
+	BriefFilterControl;
+
+interface BriefSectionsBaseProps
+	extends BriefCategoryControl,
+		BriefSourceControl {
+	sections: ThreadSection[];
+	selectedThreadId?: string;
+	Row: BriefRowComponent;
+	onSelectThread?: (id: string) => void;
 	/**
 	 * Drop the filter row and its panel, keeping the rows where they are. See
 	 * `FilterSheetProps`.

package/src/components/filter-sheet.tsx

@@ -138,19 +138,35 @@ const FilterPanelCtx = createContext<FilterPanelState | null>(null);
  * body is sometimes something else — a skeleton, an empty state, an error —
  * would otherwise inherit a caret over nothing by saying nothing. Compute it
  * from what the body renders, in the same pass that renders it.
+ *
+ * `open`/`onOpenChange` hand the panel's state to the host, for a view whose
+ * second surface — the phone search takeover — replaces this provider while it
+ * is up. Omit both and the provider keeps the state itself.
  */
 export function FilterPanelProvider({
 	children,
 	hasSheet,
+	open: openProp,
+	onOpenChange,
 }: {
 	children?: ReactNode;
 	hasSheet: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
 }) {
-	const [open, setOpen] = useState(false);
+	const [internalOpen, setInternalOpen] = useState(false);
 	const [active, setActive] = useState(false);
+	const open = openProp ?? internalOpen;
+	const setOpen = useCallback(
+		(next: boolean) => {
+			if (openProp === undefined) setInternalOpen(next);
+			onOpenChange?.(next);
+		},
+		[openProp, onOpenChange],
+	);
 	const value = useMemo(
 		() => ({ open, setOpen, active, setActive, hasSheet }),
-		[open, active, hasSheet],
+		[open, setOpen, active, hasSheet],
 	);
 	return (
 		<FilterPanelCtx.Provider value={value}>{children}</FilterPanelCtx.Provider>
@@ -296,11 +312,15 @@ export function FilterSheet({
 	);
 
 	const sourceRow = sources && sources.length > 1 && (
-		<div className="flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-2 pt-2">
+		<fieldset
+			aria-label="Accounts"
+			className="min-w-0 flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-2 pt-2"
+		>
 			{sources.map((source) => (
 				<button
 					key={source.id}
 					type="button"
+					aria-pressed={Boolean(source.active)}
 					onClick={() => onSelectSource?.(source.id)}
 					className={cn(
 						"flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-2xs transition-colors",
@@ -320,17 +340,21 @@ export function FilterSheet({
 					{sourcesNote}
 				</span>
 			)}
-		</div>
+		</fieldset>
 	);
 
 	const categoryRow = (
-		<div className="flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-1.5 pt-1.5">
+		<fieldset
+			aria-label="Categories"
+			className="min-w-0 flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-1.5 pt-1.5"
+		>
 			{categories.map((cat) => {
 				const selected = selectedCategory === cat.id;
 				return (
 					<button
 						key={cat.id}
 						type="button"
+						aria-pressed={selected}
 						onClick={() => onSelectCategory(cat.id)}
 						className={cn(
 							"shrink-0 rounded-full transition-opacity",
@@ -343,17 +367,21 @@ export function FilterSheet({
 					</button>
 				);
 			})}
-		</div>
+		</fieldset>
 	);
 
 	const filterRow = (
-		<div className="flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-2 pt-1.5">
+		<fieldset
+			aria-label="Attributes"
+			className="min-w-0 flex flex-wrap items-center gap-1.5 border-b border-line px-row-inset pb-2 pt-1.5"
+		>
 			{filters.map((f) => {
 				const on = activeFilters.has(f.id);
 				return (
 					<button
 						key={f.id}
 						type="button"
+						aria-pressed={on}
 						onClick={() => onToggleFilter(f.id)}
 						className={cn(
 							"shrink-0 rounded-full border px-2.5 py-0.5 text-2xs transition-colors",
@@ -376,7 +404,7 @@ export function FilterSheet({
 					Clear
 				</button>
 			)}
-		</div>
+		</fieldset>
 	);
 
 	return (

package/src/components/keyboard-hint-bar.render.test.ts

@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { keyboardHintsFor } from "../lib/keymap.js";
+import { KeyboardHintBar } from "./keyboard-hint-bar.js";
+
+describe("KeyboardHintBar", () => {
+	it("offers the app's own set by default", () => {
+		const html = renderToString(createElement(KeyboardHintBar));
+		assert.match(html, /<span>navigate<\/span>/);
+		assert.match(html, /<span>mute<\/span>/);
+		assert.match(html, /<span>all shortcuts<\/span>/);
+	});
+
+	it("offers only what the host's handlers answer", () => {
+		const hints = keyboardHintsFor({ focusNext: () => undefined });
+		const html = renderToString(createElement(KeyboardHintBar, { hints }));
+		assert.match(html, /<span>navigate<\/span>/);
+		assert.doesNotMatch(html, /<span>mute<\/span>/);
+		assert.doesNotMatch(html, /<span>all shortcuts<\/span>/);
+	});
+
+	it("renders nothing for a host that serves none of them", () => {
+		const hints = keyboardHintsFor({ toggleStar: () => undefined });
+		assert.deepEqual(hints, []);
+		assert.equal(renderToString(createElement(KeyboardHintBar, { hints })), "");
+	});
+});

package/src/components/keyboard-hint-bar.tsx

@@ -1,27 +1,14 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn.js";
+import { defaultKeyboardHints, type KeyboardHint } from "../lib/keymap.js";
 import { Kbd } from "./kbd.js";
 
-export interface KeyboardHint {
-	/** One or more keys shown as `Kbd` chips. */
-	keys: string[];
-	/** What the keys do. */
-	label: string;
-}
-
 export interface KeyboardHintBarProps {
 	/** Override the default hint set. */
 	hints?: KeyboardHint[];
 	className?: string;
 }
 
-/** The persistent message-list footer hint set (desktop). */
-export const defaultKeyboardHints: KeyboardHint[] = [
-	{ keys: ["j", "k"], label: "navigate" },
-	{ keys: ["m"], label: "mute" },
-	{ keys: ["?"], label: "all shortcuts" },
-];
-
 /**
  * The keyboard-shortcut hint footer under the message list. Keyboard-first
  * discoverability — the shortcuts aren't hidden behind the `?` modal. The host
@@ -32,6 +19,7 @@ export function KeyboardHintBar({
 	hints = defaultKeyboardHints,
 	className,
 }: KeyboardHintBarProps) {
+	if (hints.length === 0) return null;
 	return (
 		<footer
 			className={cn(

package/src/components/message-list-pane.brief-filter.test.ts

@@ -0,0 +1,185 @@
+/**
+ * The cross-account brief's account pills reach the panel through the pane that
+ * renders the brief, not only through `BriefSections` mounted on its own. The
+ * caret has to be pressed for the panel to be up, so this mounts against jsdom
+ * rather than `renderToString`.
+ */
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { ThreadSection } from "./app-shell-types.js";
+import type { BriefFilterSurface } from "./brief-sections.js";
+import { MessageListPane } from "./message-list-pane.js";
+
+const sections: ThreadSection[] = [
+	{
+		id: "personal",
+		label: "Personal",
+		threads: [
+			{
+				id: "t1",
+				accountId: "acc_personal",
+				fromName: "Priya Nair",
+				fromEmail: "priya@example.com",
+				subject: "Design review tomorrow",
+				snippet: "Can we move it to 2pm?",
+				timeLabel: "8:15",
+				isRead: false,
+				category: "personal",
+			},
+		],
+	},
+];
+
+const sources = [
+	{ id: "all", label: "All", active: true },
+	{ id: "acc_personal", label: "Personal", count: 4 },
+	{ id: "acc_work", label: "Work", count: 7 },
+];
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.MouseEvent = dom.window.MouseEvent;
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+after(() => {
+	dom.window.close();
+});
+
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+
+function mount(briefFilter?: BriefFilterSurface) {
+	act(() => {
+		root.render(
+			createElement(MessageListPane, {
+				listTitle: "Daily brief",
+				sections,
+				briefFilters: true,
+				isDesktop: true,
+				briefFilter,
+			}),
+		);
+	});
+}
+
+function click(element: Element) {
+	act(() => {
+		element.dispatchEvent(
+			new dom.window.MouseEvent("click", { bubbles: true, cancelable: true }),
+		);
+	});
+}
+
+function openPanel() {
+	const caret = container.querySelector('[aria-label="Expand filters"]');
+	assert.ok(caret, "the pane offers a way to open the filter panel");
+	click(caret);
+}
+
+function labels(selector: string): string[] {
+	return Array.from(container.querySelectorAll(selector)).map((node) =>
+		(node.textContent ?? "").trim(),
+	);
+}
+
+describe("the brief's filter panel inside the message list pane", () => {
+	it("carries the account pills and the muted note it is given", () => {
+		mount({
+			sources,
+			sourcesNote: "+1 muted",
+			onSelectSource: () => undefined,
+		});
+		openPanel();
+		const pills = labels("button");
+		assert.ok(
+			pills.includes("Personal4"),
+			"a pill per account, with its count",
+		);
+		assert.ok(pills.includes("Work7"));
+		assert.match(container.textContent ?? "", /\+1 muted/);
+	});
+
+	it("reports the pill the user picks", () => {
+		let picked: string | undefined;
+		mount({
+			sources,
+			onSelectSource: (id) => {
+				picked = id;
+			},
+		});
+		openPanel();
+		const work = Array.from(container.querySelectorAll("button")).find(
+			(node) => (node.textContent ?? "").trim() === "Work7",
+		);
+		assert.ok(work);
+		click(work);
+		assert.equal(picked, "acc_work");
+	});
+
+	it("offers no source row without pills", () => {
+		mount();
+		openPanel();
+		assert.doesNotMatch(container.textContent ?? "", /Work/);
+	});
+
+	it("draws the chips the caller holds and reports a toggle", () => {
+		let toggled: string | undefined;
+		mount({
+			sources,
+			activeFilters: new Set(["unread"]),
+			onToggleFilter: (id) => {
+				toggled = id;
+			},
+			onClearFilters: () => undefined,
+		});
+		openPanel();
+		const unread = Array.from(container.querySelectorAll("button")).find(
+			(node) => (node.textContent ?? "").trim() === "Unread",
+		);
+		assert.ok(unread);
+		assert.equal(
+			unread.getAttribute("aria-pressed"),
+			"true",
+			"the held chip reads as active",
+		);
+		const attachment = Array.from(container.querySelectorAll("button")).find(
+			(node) => (node.textContent ?? "").trim() === "Has attachment",
+		);
+		assert.ok(attachment);
+		click(attachment);
+		assert.equal(toggled, "attachment");
+	});
+});

package/src/components/message-list-pane.render.test.ts

@@ -37,7 +37,6 @@ const baseProps = {
 	sections,
 	flatList: true,
 	onSelectThread: () => undefined,
-	onSelectBriefCategory: () => undefined,
 };
 
 describe("MessageListPane", () => {