@remit/ui 0.0.79 → 0.0.80

package/package.json

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

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

@@ -213,6 +213,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;

package/src/components/app-shell.tsx

@@ -244,11 +244,10 @@ 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}

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/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", () => {

package/src/components/message-list-pane.stories.tsx

@@ -68,7 +68,6 @@ const meta: Meta<typeof MessageListPane> = {
 		listMeta: "3 conversations",
 		sections,
 		onSelectThread: () => undefined,
-		onSelectBriefCategory: () => undefined,
 	},
 };
 export default meta;

package/src/components/message-list-pane.tsx

@@ -8,7 +8,7 @@ import type {
 	MessageListSelection,
 	TouchSeed,
 } from "./app-shell-types.js";
-import { BriefSections } from "./brief-sections.js";
+import { type BriefFilterSurface, BriefSections } from "./brief-sections.js";
 import { Button } from "./button.js";
 import { KeyboardHintBar } from "./keyboard-hint-bar.js";
 import {
@@ -46,11 +46,10 @@ export function MessageListPane({
 	errorMessage,
 	onRetry,
 	onReportError,
-	briefCategory,
+	briefFilter,
 	selectedThreadId,
 	density = "comfortable",
 	onSelectThread,
-	onSelectBriefCategory,
 	onOpenNav,
 	isDesktop,
 	initialTouchState,
@@ -71,11 +70,9 @@ export function MessageListPane({
 	| "errorMessage"
 	| "onRetry"
 	| "onReportError"
-	| "briefCategory"
 	| "selectedThreadId"
 	| "density"
 	| "onSelectThread"
-	| "onSelectBriefCategory"
 > & {
 	/**
 	 * The active category filter, when the caller has one. Without it the empty
@@ -84,6 +81,14 @@ export function MessageListPane({
 	 * unfiltered, so a surface that filters must pass this.
 	 */
 	listFilter?: MessageListFilter;
+	/**
+	 * The brief's category scope, account pills and attribute chips, held by the
+	 * caller. The cross-account brief is segmented from this panel, and a caller
+	 * narrowing the same rows on a second surface hands both the one set it
+	 * holds. Absent, the chips are the brief's own, no source row is offered and
+	 * every category is in scope.
+	 */
+	briefFilter?: BriefFilterSurface;
 	/** Name of the collection, e.g. "Inbox". Passed to the empty state. */
 	listScopeLabel?: string;
 	/** When set, the list header shows a folders/menu button that opens the nav
@@ -250,12 +255,11 @@ export function MessageListPane({
 				/>
 			) : briefFilters ? (
 				<BriefSections
+					{...(briefFilter ?? {})}
 					sections={sections}
-					briefCategory={briefCategory}
 					selectedThreadId={selectedThreadId}
 					Row={BriefRow}
 					onSelectThread={onSelectThread}
-					onSelectBriefCategory={onSelectBriefCategory}
 				/>
 			) : listBody != null ? (
 				/* Consumer-provided body wins on every width — it owns the rows

package/src/index.ts

@@ -29,6 +29,7 @@ export {
 	categoryTone,
 	type Density,
 	INTELLIGENCE_MIN_WIDTH,
+	isBriefCategory,
 	type MessageListSelection,
 	type NarrowView,
 	type NavAccount,
@@ -87,9 +88,14 @@ export {
 	SECTION_ROW_CAP,
 } from "./components/brief-section.js";
 export {
+	type BriefCategoryControl,
+	type BriefFilterControl,
 	type BriefFilterId,
+	type BriefFilterSurface,
 	BriefSections,
 	type BriefSectionsProps,
+	type BriefSourceControl,
+	isBriefFilterId,
 	matchesBriefFilters,
 } from "./components/brief-sections.js";
 export {