@remit/ui 0.0.74 → 0.0.75

package/package.json

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

package/src/components/brief-sections.tsx

@@ -16,7 +16,7 @@ import {
 import type { BriefRowComponent } from "./message-row.js";
 
 /* Composable brief filters — each is an additive predicate over a thread row. */
-type BriefFilterId = "unread" | "attachment" | "contacts" | "today";
+export type BriefFilterId = "unread" | "attachment" | "contacts" | "today";
 
 /* "Today" prefers the real `sentDate` timestamp; it falls back to the fixture
    convention that same-day rows render a HH:MM timeLabel (fixtures carry no
@@ -56,7 +56,40 @@ export const briefFilterChips: FilterSheetFilter[] = briefFilterDefs.map(
 	({ id, label }) => ({ id, label }),
 );
 
-export interface BriefSectionsProps {
+/**
+ * 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
+ * surface — the phone search takeover — reads one definition of what "Unread" or
+ * "Today" means.
+ */
+export function matchesBriefFilters(
+	thread: ThreadRowData,
+	activeFilters: ReadonlySet<BriefFilterId>,
+): boolean {
+	return briefFilterDefs.every(
+		(f) => !activeFilters.has(f.id) || f.match(thread),
+	);
+}
+
+/**
+ * The attribute chips are either this component's own or entirely the
+ * consumer's. A consumer narrowing the same rows on a second surface (the phone
+ * search takeover) holds the set so both surfaces answer to one selection, and
+ * takes every control over it with the set.
+ */
+type BriefFilterControl =
+	| {
+			activeFilters: ReadonlySet<BriefFilterId>;
+			onToggleFilter: (id: BriefFilterId) => void;
+			onClearFilters: () => void;
+	  }
+	| {
+			activeFilters?: never;
+			onToggleFilter?: never;
+			onClearFilters?: never;
+	  };
+
+interface BriefSectionsBaseProps {
 	sections: ThreadSection[];
 	briefCategory?: BriefCategoryFilter;
 	selectedThreadId?: string;
@@ -73,10 +106,17 @@ export interface BriefSectionsProps {
 	sourcesNote?: string;
 	/** Called when the user selects a source/account pill. */
 	onSelectSource?: (id: string) => void;
+	/**
+	 * Drop the filter row and its panel, keeping the rows where they are. See
+	 * `FilterSheetProps`.
+	 */
+	hideChrome?: boolean;
 	/** Seeds the filter panel open on first render (stories / deep links). */
 	defaultExpanded?: boolean;
 }
 
+export type BriefSectionsProps = BriefSectionsBaseProps & BriefFilterControl;
+
 /**
  * The daily-brief list body: category pills (single-select) + attribute chips
  * (additive) + one capped section per category (see {@link BriefSection}). Owns
@@ -95,9 +135,15 @@ export function BriefSections({
 	sources,
 	sourcesNote,
 	onSelectSource,
+	activeFilters,
+	onToggleFilter,
+	onClearFilters,
+	hideChrome,
 	defaultExpanded = false,
 }: BriefSectionsProps) {
-	const [active, setActive] = useState<ReadonlySet<BriefFilterId>>(new Set());
+	const [ownFilters, setOwnFilters] = useState<ReadonlySet<BriefFilterId>>(
+		new Set(),
+	);
 	const [sheetExpanded, setSheetExpanded] = useState(defaultExpanded);
 	const listRef = useRef<HTMLDivElement>(null);
 	useRovingFocus({
@@ -105,8 +151,14 @@ export function BriefSections({
 		itemSelector: LIST_ROW_SELECTOR,
 	});
 
+	const active = activeFilters ?? ownFilters;
+
 	const toggleFilter = (id: BriefFilterId) => {
-		setActive((prev) => {
+		if (onToggleFilter) {
+			onToggleFilter(id);
+			return;
+		}
+		setOwnFilters((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
 			else next.add(id);
@@ -114,10 +166,9 @@ export function BriefSections({
 		});
 	};
 
-	const predicates = briefFilterDefs.filter((f) => active.has(f.id));
 	const matches = (t: ThreadRowData) =>
 		(briefCategory === "all" || t.category === briefCategory) &&
-		predicates.every((f) => f.match(t));
+		matchesBriefFilters(t, active);
 
 	// One section per category only earns its keep at the "all" scope. Narrow to
 	// a single category and the headers are redundant: render a plain flat list.
@@ -142,7 +193,11 @@ export function BriefSections({
 
 	const clearFilters = () => {
 		onSelectBriefCategory?.("all");
-		setActive(new Set());
+		if (onClearFilters) {
+			onClearFilters();
+			return;
+		}
+		setOwnFilters(new Set());
 	};
 
 	const empty = showSections ? filtered.length === 0 : flatRows.length === 0;
@@ -200,6 +255,7 @@ export function BriefSections({
 			onSelectSource={onSelectSource}
 			onToggleFilter={(id) => toggleFilter(id as BriefFilterId)}
 			onClear={clearFilters}
+			hideChrome={hideChrome}
 		>
 			{listBody}
 		</FilterSheet>

package/src/components/filter-sheet.tsx

@@ -121,6 +121,8 @@ interface FilterPanelState {
 	/** Whether the sheet under this provider is narrowing the list right now. */
 	active: boolean;
 	setActive: (active: boolean) => void;
+	/** Whether a sheet is mounted for the caret to open. */
+	hasSheet: boolean;
 }
 
 const FilterPanelCtx = createContext<FilterPanelState | null>(null);
@@ -130,29 +132,52 @@ const FilterPanelCtx = createContext<FilterPanelState | null>(null);
  * under it, which are siblings in the tree. Wrap both: the header renders a
  * `FilterToggle`, the sheet drops its own trigger row, and the sheet keeps its
  * filter state exactly where it already lives.
+ *
+ * A view whose body is sometimes something other than the filtered list — a
+ * skeleton, an empty state, an error — says so with `hasSheet`, and the caret
+ * stands down for as long as there is no panel behind it.
  */
-export function FilterPanelProvider({ children }: { children: ReactNode }) {
+export function FilterPanelProvider({
+	children,
+	hasSheet = true,
+}: {
+	children: ReactNode;
+	hasSheet?: boolean;
+}) {
 	const [open, setOpen] = useState(false);
 	const [active, setActive] = useState(false);
 	const value = useMemo(
-		() => ({ open, setOpen, active, setActive }),
-		[open, active],
+		() => ({ open, setOpen, active, setActive, hasSheet }),
+		[open, active, hasSheet],
 	);
 	return (
 		<FilterPanelCtx.Provider value={value}>{children}</FilterPanelCtx.Provider>
 	);
 }
 
+/**
+ * Detaches whatever it wraps from an enclosing `FilterPanelProvider`. A
+ * full-screen surface that covers the list — the phone search takeover — carries
+ * its own filter chrome, and the caret it would otherwise borrow belongs to a
+ * header that is not on screen.
+ */
+export function FilterPanelBoundary({ children }: { children: ReactNode }) {
+	return (
+		<FilterPanelCtx.Provider value={null}>{children}</FilterPanelCtx.Provider>
+	);
+}
+
 /**
  * The filter caret, for a list header to render beside its unread count. It is
  * the view's whole filter affordance; the panel it opens still belongs to the
  * sheet, inline above the rows.
  *
- * Renders nothing outside a `FilterPanelProvider` — there is no panel to open.
+ * Renders nothing outside a `FilterPanelProvider`, and nothing while that
+ * provider reports no sheet — there is no panel to open.
  */
 export function FilterToggle() {
 	const panel = useContext(FilterPanelCtx);
-	if (!panel) return null;
+	if (!panel?.hasSheet) return null;
 	const { open, active, setOpen } = panel;
 	return (
 		<button
@@ -225,7 +250,9 @@ export function FilterSheet({
 
 	const setPanelActive = panel?.setActive;
 	useEffect(() => {
-		setPanelActive?.(hasActive);
+		if (!setPanelActive) return;
+		setPanelActive(hasActive);
+		return () => setPanelActive(false);
 	}, [hasActive, setPanelActive]);
 
 	const clearSource = useCallback(() => {

package/src/components/mobile-search-view.render.test.ts

@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
+import { FilterPanelProvider } from "./filter-sheet.js";
 import { MobileSearchView } from "./mobile-search-view.js";
 import type { SearchResult } from "./search-result-row.js";
 
@@ -66,6 +67,26 @@ describe("MobileSearchView filter chrome", () => {
 		);
 		assert.match(html, /Expand filters/);
 	});
+
+	// The takeover covers the list whose header carries the caret, so it cannot
+	// borrow that caret: it renders over the header, not under it. Without the
+	// boundary the sheet reads the list's panel and drops its own trigger row,
+	// leaving the takeover with no way to open its filters at all.
+	it("keeps its own filter row over a list that has a filter panel", () => {
+		const html = renderToString(
+			createElement(
+				FilterPanelProvider,
+				null,
+				createElement(MobileSearchView, {
+					...base,
+					value: "",
+					sections: [],
+					filter,
+				}),
+			),
+		);
+		assert.match(html, /Expand filters/);
+	});
 });
 
 describe("MobileSearchView search scope", () => {

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

@@ -1,7 +1,11 @@
 import { X } from "lucide-react";
 import type { ReactNode } from "react";
 import { Button } from "./button.js";
-import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
+import {
+	FilterPanelBoundary,
+	FilterSheet,
+	type FilterSheetProps,
+} from "./filter-sheet.js";
 import { SearchBar } from "./search-bar.js";
 import type { SearchChip, SearchFieldSuggest } from "./search-chip-input.js";
 import type { SearchResult } from "./search-result-row.js";
@@ -146,7 +150,9 @@ export function MobileSearchView({
 			{suggestList}
 
 			{filter && value.trim().length === 0 ? (
-				<FilterSheet {...filter}>{body}</FilterSheet>
+				<FilterPanelBoundary>
+					<FilterSheet {...filter}>{body}</FilterSheet>
+				</FilterPanelBoundary>
 			) : (
 				<div className="flex-1 overflow-y-auto">{body}</div>
 			)}

package/src/index.ts

@@ -86,8 +86,10 @@ export {
 	SECTION_ROW_CAP,
 } from "./components/brief-section.js";
 export {
+	type BriefFilterId,
 	BriefSections,
 	type BriefSectionsProps,
+	matchesBriefFilters,
 } from "./components/brief-sections.js";
 export {
 	Button,