@remit/ui 0.0.72 → 0.0.74

package/package.json

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

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

@@ -122,15 +122,15 @@ describe("AppShellSlotted slot rendering", () => {
 		}
 	});
 
-	it("keeps the nav column beside the top bar, not under it", () => {
+	it("spans the top bar over the nav column too", () => {
 		const html = render({
 			initialWidth: 1400,
 			topBar: createElement("div", { "data-testid": "topbar" }, "Bar"),
 			reading: createElement("div", { "data-testid": "reading" }, "Reading"),
 		});
 		assert.ok(
-			html.indexOf('data-testid="nav"') < html.indexOf('data-testid="topbar"'),
-			"nav opens the layout so the bar starts on the list's edge",
+			html.indexOf('data-testid="topbar"') < html.indexOf('data-testid="nav"'),
+			"the bar opens the layout, so it runs the full width",
 		);
 	});
 

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

@@ -60,10 +60,9 @@ export interface AppShellSlottedProps {
 	 */
 	header?: ReactNode;
 	/**
-	 * Row above the list, reading and intelligence panes, spanning all three.
-	 * The nav column runs the full height beside it and is never covered, so the
-	 * bar starts on the list's left edge — its span is what makes the search
-	 * field in it read as the app's search rather than the list's.
+	 * Row across the top of the shell, spanning the nav, list, reading and
+	 * intelligence panes. Its full width is what makes the search field in it
+	 * read as the app's search rather than the list's.
 	 */
 	topBar?: ReactNode;
 	/**
@@ -108,6 +107,14 @@ export interface AppShellLayoutContext {
 	showNavPane: boolean;
 	/** Open the nav slide-over. Call from list-header "folders" buttons. */
 	openNav: () => void;
+	/** True when the nav pane is collapsed away at a width that would show it. */
+	navCollapsed: boolean;
+	/**
+	 * Show or hide the nav at whichever tier is current — it collapses the pane
+	 * where the nav is a column and opens the slide-over where it is not, so one
+	 * control in the top bar covers both.
+	 */
+	toggleNav: () => void;
 	/** True when the reading pane is active (width ≥ 1024px). */
 	showReadingPane: boolean;
 	/** True when the intelligence rail can show (width ≥ 1280px). */
@@ -148,7 +155,11 @@ export function AppShellSlotted({
 }: AppShellSlottedProps) {
 	const [containerRef, containerWidth] = useContainerWidth(initialWidth);
 	const panes = resolvePaneLayout(containerWidth ?? 0);
+	const [navCollapsed, setNavCollapsed] = useState(false);
+	// The tier, not the current visibility: consumers read it to decide whether
+	// nav access is theirs to offer, and it stays the top bar's while collapsed.
 	const showNavPane = panes.nav;
+	const navPaneVisible = showNavPane && !navCollapsed;
 	const showReadingPane = panes.reading && Boolean(reading);
 	const isWide = panes.intelligence;
 
@@ -167,11 +178,22 @@ export function AppShellSlotted({
 	const showIntelligencePanel =
 		isWide && intelligenceOpen && hasThread && Boolean(intelligence);
 
+	const toggleNav = () => {
+		if (!showNavPane) {
+			if (navOpen) closeNav();
+			else openNav();
+			return;
+		}
+		setNavCollapsed((collapsed) => !collapsed);
+	};
+
 	const layoutCtx: AppShellLayoutContext = {
 		panes,
 		containerWidth,
 		showNavPane,
 		openNav,
+		navCollapsed,
+		toggleNav,
 		showReadingPane,
 		showIntelligencePane: isWide,
 	};
@@ -225,8 +247,6 @@ export function AppShellSlotted({
 
 	const content = (
 		<div className="flex min-h-0 min-w-0 flex-1 flex-col">
-			{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>}
@@ -245,7 +265,9 @@ export function AppShellSlotted({
 					skeleton
 				) : (
 					<>
-						{showNavPane ? (
+						{topBar}
+
+						{navPaneVisible ? (
 							<ResizablePanelGroup
 								direction="horizontal"
 								className="min-h-0 flex-1"

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

@@ -156,7 +156,6 @@ describe("AppShell nav: pane vs slide-over by width (#784)", () => {
 	it("≥1024px: nav is a persistent pane, no trigger", () => {
 		const html = render({ flatList: true, initialWidth: 1100 });
 		assert.match(html, navMarker, "nav renders as a pane");
-		assert.match(html, /Settings/, "the desktop nav pins a Settings footer");
 		assert.doesNotMatch(
 			html,
 			navTriggerMarker,

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

@@ -29,14 +29,25 @@ describe("AppTopBar", () => {
 		assert.doesNotMatch(render(), /data-testid="actions"/);
 	});
 
-	it("lays the bar out search · actions", () => {
-		const html = render({ actions: slot("actions") });
+	it("lays the bar out leading · search · actions", () => {
+		const html = render({ leading: slot("leading"), actions: slot("actions") });
 		assert.ok(
-			html.indexOf("search") < html.indexOf("actions"),
+			html.indexOf("leading") < html.indexOf("search") &&
+				html.indexOf("search") < html.indexOf("actions"),
 			"slots render in reading order",
 		);
 	});
 
+	it("omits the leading box when no control is supplied", () => {
+		assert.doesNotMatch(render(), /data-testid="leading"/);
+	});
+
+	it("widens the field on focus rather than resting wide", () => {
+		const html = render();
+		assert.match(html, /max-w-xs/, "resting width is modest");
+		assert.match(html, /focus-within:max-w-lg/, "focus widens it");
+	});
+
 	it("carries no brand mark — the bar is search, not a masthead", () => {
 		assert.doesNotMatch(render(), /remit/i);
 	});

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

@@ -83,19 +83,17 @@ const Bar = ({
 
 /** 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 bg-canvas">
-		<div className="w-56 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
-			Nav — full height, beside the bar
-		</div>
-		<div className="flex min-w-0 flex-1 flex-col">
-			{children}
-			<div className="flex min-h-0 flex-1">
-				<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 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 — under the bar, like every other pane
+			</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>
@@ -157,8 +155,8 @@ export const ScopedToOutbox: Story = {
 	),
 };
 
-/** The arrangement: one bar over the list and the message pane, lined up with
- *  the list's left edge, with the nav column running the full height beside it. */
+/** The arrangement: one bar across the top of the shell, over the nav, the list
+ *  and the message pane alike. */
 export const OverTheLayout: Story = {
 	render: () => (
 		<WithPanes>

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

@@ -2,6 +2,11 @@ import type { ReactNode } from "react";
 import { cn } from "../lib/cn.js";
 
 export interface AppTopBarProps {
+	/**
+	 * Controls at the bar's left edge, over the nav column — the nav toggle.
+	 * Anything that acts on the shell itself rather than on the mail in it.
+	 */
+	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.
@@ -17,31 +22,41 @@ export interface AppTopBarProps {
 }
 
 /**
- * The application top bar: one row over the list, reading and intelligence
- * panes, carrying search and the global actions.
+ * The application top bar: one row across the top of the shell, over the nav,
+ * list, reading and intelligence panes, 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 span is what
- * says so. It starts on the list's left edge: the nav column runs the full
- * height beside the bar rather than under it, so the field lines up with the
- * columns it searches. The search field takes the room it needs, then the
- * global actions.
+ * says so. The search field takes the room it needs, then the global actions.
  *
  * Presentational and slot-driven; the host supplies the wired field and
  * action controls.
  */
-export function AppTopBar({ search, actions, className }: AppTopBarProps) {
+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",
+				"flex min-h-pane-header w-full shrink-0 items-center gap-2 border-b border-line bg-canvas px-row-inset py-1",
 				className,
 			)}
 		>
+			{leading && (
+				<div className="flex shrink-0 items-center gap-1">{leading}</div>
+			)}
 			<div className="flex min-w-0 flex-1 justify-start">
-				<div className="w-full max-w-2xl">{search}</div>
+				{/* Resting width is enough to read a query back, not enough to make an
+				    empty field the loudest thing in the bar; focus widens it to where
+				    a long query and its chips still fit on one line. */}
+				<div className="w-full max-w-xs transition-[max-width] duration-150 ease-out focus-within:max-w-lg">
+					{search}
+				</div>
 			</div>
 			{actions && (
 				<div className="flex shrink-0 items-center gap-1">{actions}</div>

package/src/components/dialog.render.test.ts

@@ -24,23 +24,19 @@ describe("Dialog backdrop", () => {
 		assert.doesNotMatch(left, /backdrop-blur/, "left drawer has no blur");
 	});
 
-	it("dims with a plain scrim; left slide-over has no background wash", () => {
-		assert.match(render({}), /bg-canvas\/80/, "center modal keeps a dim scrim");
-		assert.doesNotMatch(
-			render({ anchor: "left" }),
-			/bg-canvas/,
-			"left drawer backdrop is transparent (no wash)",
-		);
+	it("dims what it covers, at every anchor", () => {
+		for (const anchor of ["center", "left", "right"] as const) {
+			assert.match(
+				render(anchor === "center" ? {} : { anchor }),
+				/bg-canvas\/80/,
+				`${anchor} dialog dims the content behind it`,
+			);
+		}
 	});
 
-	it("right slide-over mirrors left: transparent backdrop, pinned right edge", () => {
+	it("right slide-over mirrors left, pinned to the other edge", () => {
 		const right = render({ anchor: "right" });
 		assert.doesNotMatch(right, /backdrop-blur/, "right drawer has no blur");
-		assert.doesNotMatch(
-			right,
-			/bg-canvas\/80/,
-			"right drawer backdrop is transparent (no wash)",
-		);
 		assert.match(right, /justify-end/, "panel is pinned to the right edge");
 		assert.match(right, /border-l/, "right drawer has a left hairline");
 	});

package/src/components/dialog.tsx

@@ -62,7 +62,6 @@ export function Dialog({
 
 	const isLeft = anchor === "left";
 	const isRight = anchor === "right";
-	const isSlideOver = isLeft || isRight;
 
 	return (
 		// biome-ignore lint/a11y/noStaticElementInteractions: outer overlay closes dialog on click; role=presentation lets inner role=dialog own the AT semantics
@@ -78,7 +77,7 @@ export function Dialog({
 			role="presentation"
 			onClick={onClose}
 		>
-			<div className={cn("absolute inset-0", !isSlideOver && "bg-canvas/80")} />
+			<div className="absolute inset-0 bg-canvas/80" />
 			<div
 				ref={dialogRef}
 				role="dialog"

package/src/components/filter-sheet.render.test.ts

@@ -2,7 +2,12 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
-import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
+import {
+	FilterPanelProvider,
+	FilterSheet,
+	type FilterSheetProps,
+	FilterToggle,
+} from "./filter-sheet.js";
 
 const categories = [
 	{ id: "all", label: "All", tone: "neutral" as const },
@@ -74,3 +79,45 @@ describe("FilterSheet", () => {
 		assert.doesNotMatch(html, /role="slider"/);
 	});
 });
+
+describe("FilterSheet under a FilterPanelProvider", () => {
+	const underProvider = (overrides: Partial<FilterSheetProps> = {}) =>
+		renderToString(
+			createElement(
+				FilterPanelProvider,
+				null,
+				createElement(FilterToggle),
+				createElement(FilterSheet, {
+					categories,
+					filters,
+					sources,
+					selectedCategory: "all",
+					activeFilters: new Set<string>(),
+					onSelectCategory: () => undefined,
+					onSelectSource: () => undefined,
+					onToggleFilter: () => undefined,
+					onClear: () => undefined,
+					...overrides,
+				}),
+			),
+		);
+
+	it("spends no row of its own on a trigger — the header carries the caret", () => {
+		const html = underProvider();
+		assert.equal(
+			html.match(/aria-label="Expand filters"/g)?.length,
+			1,
+			"exactly one filter control on the page",
+		);
+		assert.doesNotMatch(html, /h-section-row/, "no trigger row");
+	});
+
+	it("starts collapsed even where a nearer component asks to be expanded", () => {
+		const html = underProvider({ expanded: true });
+		assert.doesNotMatch(html, /work@acme\.com/, "panel is closed");
+	});
+
+	it("renders nothing for a toggle with no panel above it", () => {
+		assert.equal(renderToString(createElement(FilterToggle)), "");
+	});
+});

package/src/components/filter-sheet.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useState } from "react";
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
 import { cn } from "../lib/cn.js";
 import { isSelfRowActivation } from "../lib/row-keyboard.js";
 import { Badge } from "./badge.js";
@@ -107,6 +115,67 @@ function Close({ className }: { className?: string }) {
 	);
 }
 
+interface FilterPanelState {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	/** Whether the sheet under this provider is narrowing the list right now. */
+	active: boolean;
+	setActive: (active: boolean) => void;
+}
+
+const FilterPanelCtx = createContext<FilterPanelState | null>(null);
+
+/**
+ * Shares one filter panel's open state between a list header and the sheet
+ * 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.
+ */
+export function FilterPanelProvider({ children }: { children: ReactNode }) {
+	const [open, setOpen] = useState(false);
+	const [active, setActive] = useState(false);
+	const value = useMemo(
+		() => ({ open, setOpen, active, setActive }),
+		[open, active],
+	);
+	return (
+		<FilterPanelCtx.Provider value={value}>{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.
+ */
+export function FilterToggle() {
+	const panel = useContext(FilterPanelCtx);
+	if (!panel) return null;
+	const { open, active, setOpen } = panel;
+	return (
+		<button
+			type="button"
+			onClick={() => setOpen(!open)}
+			aria-expanded={open}
+			aria-label={open ? "Collapse filters" : "Expand filters"}
+			title="Filters"
+			className={cn(
+				"flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-surface-sunken",
+				active ? "text-accent-2" : "text-fg-subtle hover:text-fg-muted",
+			)}
+		>
+			<ChevronDown
+				className={cn(
+					"size-3 transition-transform duration-200",
+					open ? "rotate-180" : "rotate-0",
+				)}
+			/>
+		</button>
+	);
+}
+
 export function FilterSheet({
 	categories,
 	filters,
@@ -123,17 +192,21 @@ export function FilterSheet({
 	hideChrome = false,
 	children,
 }: FilterSheetProps) {
+	const panel = useContext(FilterPanelCtx);
 	const isControlled = expandedProp !== undefined;
 	const [internalOpen, setInternalOpen] = useState(false);
 
-	const open = isControlled ? expandedProp : internalOpen;
+	// A provider is the composition owner opting the caret into a header above
+	// this sheet, so it outranks a nearer component's own expanded state.
+	const open = panel?.open ?? (isControlled ? expandedProp : internalOpen);
 
 	const setOpen = useCallback(
 		(next: boolean) => {
 			if (!isControlled) setInternalOpen(next);
+			panel?.setOpen(next);
 			onExpandedChange?.(next);
 		},
-		[isControlled, onExpandedChange],
+		[isControlled, onExpandedChange, panel],
 	);
 
 	const defaultCategory = categories[0];
@@ -150,6 +223,11 @@ export function FilterSheet({
 		activeFilters.size > 0 ||
 		(!isDefaultSource && !!activeSource);
 
+	const setPanelActive = panel?.setActive;
+	useEffect(() => {
+		setPanelActive?.(hasActive);
+	}, [hasActive, setPanelActive]);
+
 	const clearSource = useCallback(() => {
 		if (defaultSource) onSelectSource?.(defaultSource.id);
 	}, [defaultSource, onSelectSource]);
@@ -277,7 +355,9 @@ export function FilterSheet({
 			{/* The toggle is a div-button (not a real <button>) so the Clear
 			    control can be a real nested <button> without invalid
 			    button-in-button nesting. */}
-			{!hideChrome && (
+			{/* A `FilterPanelProvider` means the list header carries the caret, so
+			    the sheet spends no row of its own on one. */}
+			{!hideChrome && !panel && (
 				// biome-ignore lint/a11y/useSemanticElements: nested <button> inside would be invalid button-in-button
 				<div
 					role="button"

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

@@ -28,9 +28,20 @@ describe("MailHeader", () => {
 		assert.match(html, /15,338 unread/);
 	});
 
-	it("renders the menu (hamburger) control", () => {
-		assert.match(render(), /aria-label="Menu"/);
-		assert.match(render({ isDesktop: true }), /aria-label="Menu"/);
+	it("renders the menu (hamburger) control when it has somewhere to go", () => {
+		const onMenuClick = () => undefined;
+		assert.match(render({ onMenuClick }), /aria-label="Menu"/);
+		assert.match(render({ onMenuClick, isDesktop: true }), /aria-label="Menu"/);
+	});
+
+	it("drops the hamburger where the nav is a pane, rather than leaving a dead control", () => {
+		assert.doesNotMatch(render(), /aria-label="Menu"/);
+		assert.doesNotMatch(render({ isDesktop: true }), /aria-label="Menu"/);
+	});
+
+	it("sits on the pane-header datum once the top bar carries search", () => {
+		assert.match(render({ showSearch: false }), /h-pane-header/);
+		assert.match(render(), /h-section-row/);
 	});
 
 	it("does not render an account chip row (accounts live in the filter / nav)", () => {

package/src/components/mail-header.tsx

@@ -1,4 +1,6 @@
 import { Menu, Search, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { SearchBar } from "./search-bar.js";
 import type { SearchFieldSuggest } from "./search-chip-input.js";
@@ -29,6 +31,12 @@ export interface MailHeaderProps {
 	 * the page never mounts two search inputs competing for the same focus.
 	 */
 	showSearch?: boolean;
+	/**
+	 * The view's filter control, rendered beside the unread count — a
+	 * `FilterToggle` over a `FilterSheet` under the same `FilterPanelProvider`.
+	 * The header row already exists, so the filter costs the list no second row.
+	 */
+	filterToggle?: ReactNode;
 	/**
 	 * Completions for what is being typed; see `SearchChipInput`. The list is
 	 * not rendered here — the header is a fixed-height row, so the consumer
@@ -59,6 +67,7 @@ export function MailHeader({
 	searchOpen,
 	onSearchOpenChange,
 	showSearch = true,
+	filterToggle,
 	searchSuggest,
 }: MailHeaderProps) {
 	const unreadLabel = `${unreadCount.toLocaleString()} unread`;
@@ -79,38 +88,46 @@ export function MailHeader({
 		/>
 	);
 
-	const menuButton = (
+	// Without its own field the row is a plain title bar and sits on the
+	// pane-header datum, so the control shrinks with it. Carrying the field means
+	// carrying touch targets too, which need the taller row.
+	const menuButton = onMenuClick && (
 		<Button
 			variant="ghost"
-			icon={<Menu className="size-5" />}
+			size={showSearch ? undefined : "sm"}
+			icon={<Menu className={showSearch ? "size-5" : "size-4"} />}
 			onClick={onMenuClick}
 			aria-label="Menu"
-			className="min-h-11 min-w-11 shrink-0 px-0"
+			className={
+				showSearch ? "min-h-11 min-w-11 shrink-0 px-0" : "-ml-1 shrink-0"
+			}
 		/>
 	);
 
+	const titleRow = (
+		<>
+			{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>
+			{filterToggle}
+		</>
+	);
+
 	return (
 		<header className="flex shrink-0 flex-col bg-canvas">
-			<div className="flex h-12 items-center gap-2 px-row-inset">
+			<div
+				className={cn(
+					"flex items-center gap-2 border-b border-line px-row-inset",
+					showSearch ? "h-section-row" : "h-pane-header",
+				)}
+			>
 				{!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>
-					</>
+					titleRow
 				) : isDesktop ? (
 					<>
-						{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>
+						{titleRow}
 						<div className="w-64 max-w-[40%] shrink-0">
 							{renderSearchBar(true)}
 						</div>
@@ -128,13 +145,7 @@ export function MailHeader({
 					</div>
 				) : (
 					<>
-						{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>
+						{titleRow}
 						<Button
 							variant="ghost"
 							icon={<Search className="size-5" />}

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

@@ -1,6 +1,6 @@
 import { Menu } from "lucide-react";
 import type { ReactNode } from "react";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
 import type { AppShellProps, TouchSeed } from "./app-shell-types.js";
 import { BriefSections } from "./brief-sections.js";
@@ -12,7 +12,12 @@ import {
 	type MessageListFilter,
 	MessageListLoading,
 } from "./message-list-state.js";
-import { ComfortableRow, CompactRow } from "./message-row.js";
+import {
+	type BriefRowComponent,
+	ComfortableRow,
+	CompactRow,
+	type RowToggleEvent,
+} from "./message-row.js";
 import { SelectionTopBar } from "./selection-top-bar.js";
 import type { SwipePeek } from "./swipeable-row.js";
 import { TouchListBody } from "./touch-list.js";
@@ -120,8 +125,10 @@ export function MessageListPane({
 	const [selectionMode, setSelectionMode] = useState(
 		initialTouchState === "selection",
 	);
+	// The seed is a touch-triage state; desktop starts unselected and gets there
+	// through the row checkboxes.
 	const [checkedIds, setCheckedIds] = useState<ReadonlySet<string>>(() =>
-		initialTouchState === "selection"
+		initialTouchState === "selection" && !isDesktop
 			? new Set(seededRows.slice(0, 2).map((t) => t.id))
 			: new Set(),
 	);
@@ -153,7 +160,7 @@ export function MessageListPane({
 				? "leading"
 				: undefined;
 
-	const toggleCheck = (id: string) => {
+	const toggleCheck = useCallback((id: string) => {
 		setCheckedIds((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
@@ -161,7 +168,7 @@ export function MessageListPane({
 			if (next.size === 0) setSelectionMode(false);
 			return next;
 		});
-	};
+	}, []);
 	const enterSelection = (id: string) => {
 		setSelectionMode(true);
 		setCheckedIds(new Set([id]));
@@ -183,10 +190,48 @@ export function MessageListPane({
 		setTimeout(() => setRefreshing(false), 1400);
 	};
 
+	// Desktop rows carry the checkbox the app's own rows have: it takes the
+	// avatar's place on hover, and checking one puts the pane in selection.
+	const desktopSelectable = isDesktop && !selectionBar && listState === "ready";
+	const rowSelection = useCallback(
+		(id: string) =>
+			desktopSelectable
+				? {
+						checked: checkedIds.has(id),
+						onToggle: (event: RowToggleEvent) => {
+							event.preventDefault();
+							event.stopPropagation();
+							toggleCheck(id);
+						},
+					}
+				: undefined,
+		[desktopSelectable, checkedIds, toggleCheck],
+	);
+
+	// The brief drives rows through a `BriefRowComponent`, whose props carry no
+	// selection — a consumer's own row (the web client's) wires its checkbox
+	// itself. Binding it here keeps the kit's rows selectable there too.
+	const BriefRow: BriefRowComponent = useCallback(
+		(props) => <Row {...props} selection={rowSelection(props.thread.id)} />,
+		[Row, rowSelection],
+	);
+
+	const selectableIds = seededRows.map((thread) => thread.id);
+	const allChecked =
+		selectableIds.length > 0 && selectableIds.every((id) => checkedIds.has(id));
+	const selectAll = {
+		checked: allChecked,
+		indeterminate: checkedIds.size > 0 && !allChecked,
+		onChange: () =>
+			setCheckedIds(allChecked ? new Set() : new Set(selectableIds)),
+	};
+
 	// When the caller supplies a selectionBar slot, it owns selection state.
-	// Fall back to the built-in touch-triage bar only when no external bar is given.
+	// Fall back to the built-in bar only when no external bar is given.
 	const inBuiltinSelection =
-		!selectionBar && touchTriage && selectionMode && checkedIds.size > 0;
+		!selectionBar &&
+		checkedIds.size > 0 &&
+		(desktopSelectable || (touchTriage && selectionMode));
 
 	return (
 		<section className="relative flex h-full w-full flex-col bg-surface">
@@ -195,6 +240,7 @@ export function MessageListPane({
 					<SelectionTopBar
 						title={listTitle}
 						count={checkedIds.size}
+						selectAll={desktopSelectable ? selectAll : undefined}
 						onCancel={cancelSelection}
 						onMarkRead={markCheckedRead}
 						onDelete={trashChecked}
@@ -246,7 +292,7 @@ export function MessageListPane({
 					sections={sections}
 					briefCategory={briefCategory}
 					selectedThreadId={selectedThreadId}
-					Row={Row}
+					Row={BriefRow}
 					onSelectThread={onSelectThread}
 					onSelectBriefCategory={onSelectBriefCategory}
 				/>
@@ -291,6 +337,7 @@ export function MessageListPane({
 										key={thread.id}
 										thread={thread}
 										active={thread.id === selectedThreadId}
+										selection={rowSelection(thread.id)}
 										onClick={() => onSelectThread?.(thread.id)}
 									/>
 								))}

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

@@ -112,14 +112,13 @@ describe("NavSidebar arrow-key traversal", () => {
 		assert.equal(dom.window.document.activeElement, items[1]);
 	});
 
-	it("End reaches the Settings footer and Home returns to the top", () => {
+	it("End reaches the last mailbox and Home returns to the top", () => {
 		mount();
 		const items = navItems();
 		act(() => items[0]?.focus());
 		act(() => pressKey(items[0] as Element, "End"));
 		const last = items[items.length - 1];
 		assert.equal(dom.window.document.activeElement, last);
-		assert.match(last?.textContent ?? "", /Settings/);
 
 		act(() => pressKey(last as Element, "Home"));
 		assert.equal(dom.window.document.activeElement, items[0]);

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

@@ -107,41 +107,19 @@ describe("NavSidebar", () => {
 		assert.match(html, /text-accent-2/);
 	});
 
-	it("pins a Settings footer on the desktop variant", () => {
-		const html = renderToString(
-			createElement(NavSidebar, {
-				accounts,
-				selectedNavId: "personal-inbox",
-				onSelectNav: () => undefined,
-			}),
-		);
-		assert.match(html, /Settings/);
-		assert.match(html, /lucide-settings/);
-	});
-
-	it("renders the Settings footer as an anchor via linkComponent", () => {
-		const html = renderToString(
-			createElement(NavSidebar, {
-				accounts,
-				selectedNavId: "personal-inbox",
-				onSelectNav: () => undefined,
-				linkComponent: hrefLink,
-			}),
-		);
-		assert.match(html, /<a href="\/mail\/settings"/);
-	});
-
-	it("omits the Settings footer on the drawer variant", () => {
-		const html = renderToString(
-			createElement(NavSidebar, {
-				accounts,
-				selectedNavId: "personal-inbox",
-				onSelectNav: () => undefined,
-				variant: "drawer",
-			}),
-		);
-		assert.doesNotMatch(html, /Settings/);
-		assert.doesNotMatch(html, /lucide-settings/);
+	it("carries no Settings entry — it lives in the top bar, by the avatar", () => {
+		for (const variant of [undefined, "drawer" as const]) {
+			const html = renderToString(
+				createElement(NavSidebar, {
+					accounts,
+					selectedNavId: "personal-inbox",
+					onSelectNav: () => undefined,
+					variant,
+				}),
+			);
+			assert.doesNotMatch(html, /Settings/);
+			assert.doesNotMatch(html, /lucide-settings/);
+		}
 	});
 
 	it("renders navigation entries as anchors via linkComponent", () => {

package/src/components/nav-sidebar.tsx

@@ -12,7 +12,6 @@ import {
 	Mails,
 	Search,
 	Send,
-	Settings,
 	Sparkles,
 	Star,
 	Trash2,
@@ -648,21 +647,7 @@ export function NavSidebar({
 			ref={containerRef}
 			className="flex h-full w-full flex-col bg-surface-sunken"
 		>
-			{/* no toolbar over the sidebar (Apple Mail-style): nav content
-			    starts at the top; the datum bar exists only over the
-			    list/reading/intelligence panes */}
 			{navBody}
-			<div className="border-t border-line px-2 py-2">
-				<NavItem
-					navId="settings"
-					linkComponent={linkComponent}
-					icon={<Settings className="size-4" />}
-					label="Settings"
-					ariaLabel="Settings"
-					active={selectedNavId === "settings"}
-					onClick={() => onSelectNav?.("settings")}
-				/>
-			</div>
 		</aside>
 	);
 }

package/src/components/nav-toggle-button.tsx

@@ -0,0 +1,31 @@
+/**
+ * NavToggleButton — the top bar's control over the nav column.
+ *
+ * One button for both tiers: it collapses and restores the nav pane where the
+ * nav is a column, and opens the slide-over where it is not. It sits in the top
+ * bar's leading slot, over the column it acts on, which is why no pane header
+ * carries a hamburger of its own at desktop widths.
+ *
+ * Renders nothing outside an `AppShellSlotted` — there is no nav to act on.
+ */
+import { Menu } from "lucide-react";
+import { useAppShellLayout } from "./app-shell-slotted.js";
+import { Button } from "./button.js";
+
+export function NavToggleButton() {
+	const layout = useAppShellLayout();
+	if (!layout) return null;
+	const shown = layout.showNavPane ? !layout.navCollapsed : false;
+	return (
+		<Button
+			variant="ghost"
+			size="sm"
+			icon={<Menu className="size-4" />}
+			onClick={layout.toggleNav}
+			aria-label={shown ? "Hide folders" : "Show folders"}
+			aria-expanded={shown}
+			title="Folders"
+			className="shrink-0"
+		/>
+	);
+}

package/src/components/selection-wizard.render.test.ts

@@ -582,6 +582,25 @@ describe("RunStepBody", () => {
 		assert.match(html, /Nothing has changed\./);
 	});
 
+	// A poll that could not be read is not a run that never started (#526): the
+	// screen keeps the counts it has and says what it cannot see.
+	it("keeps a run that is going when its progress could not be read", () => {
+		const html = renderToString(
+			createElement(RunStepBody, {
+				...runProps,
+				state: "statusUnknown",
+				scope: "once",
+				matched: 1284,
+				applied: 40,
+			}),
+		);
+		assert.match(html, /progress unknown/);
+		assert.match(html, /carries on either way/);
+		assert.match(html, /role="progressbar"/);
+		assert.doesNotMatch(html, /Nothing has changed/);
+		assert.doesNotMatch(html, /never started/);
+	});
+
 	it("says a filter saved with nothing to back-apply is live", () => {
 		const html = renderToString(
 			createElement(RunStepBody, {
@@ -620,6 +639,18 @@ describe("RunFooter", () => {
 		assert.match(html, /Not now/);
 	});
 
+	it("offers another look, not another run, when the progress could not be read", () => {
+		const html = renderToString(
+			createElement(RunFooter, {
+				...runProps,
+				state: "statusUnknown",
+				scope: "once",
+			}),
+		);
+		assert.match(html, /Check again/);
+		assert.match(html, /Close/);
+	});
+
 	it("offers only a way out once there is nothing outstanding", () => {
 		const html = renderToString(createElement(RunFooter, runProps));
 		assert.match(html, /Done/);

package/src/index.ts

@@ -188,11 +188,13 @@ export {
 	type FilterRuleEditorProps,
 } from "./components/filter-rule-editor.js";
 export {
+	FilterPanelProvider,
 	FilterSheet,
 	type FilterSheetCategory,
 	type FilterSheetFilter,
 	type FilterSheetProps,
 	type FilterSheetSource,
+	FilterToggle,
 } from "./components/filter-sheet.js";
 export {
 	FolderManageActions,
@@ -325,6 +327,7 @@ export {
 	NavSidebar,
 	type NavSidebarProps,
 } from "./components/nav-sidebar.js";
+export { NavToggleButton } from "./components/nav-toggle-button.js";
 export {
 	NewFolderAction,
 	type NewFolderActionProps,

package/src/lib/wizard-steps.test.ts

@@ -477,6 +477,7 @@ describe("runCopy", () => {
 			"backApplyComplete",
 			"backApplyFailed",
 			"backApplyStartFailed",
+			"statusUnknown",
 			"filterSaved",
 			"runStopped",
 			"commitFailed",
@@ -539,6 +540,25 @@ describe("runCopy", () => {
 		assert.equal(started.showProgress, false);
 	});
 
+	it("keeps a run that is going when its progress could not be read", () => {
+		// A poll that failed says nothing about the job behind it (#526), so the
+		// screen never claims the action never started, and the way out of it is a
+		// second look rather than a second run.
+		const once = outcome("statusUnknown", "once");
+		assert.equal(once.title, "Moving — progress unknown");
+		assert.match(once.detail, /carries on either way/);
+		assert.doesNotMatch(once.detail, /Nothing has changed/);
+		assert.equal(once.tone, "warning");
+		assert.equal(once.retryLabel, "Check again");
+		assert.equal(once.screenTitle, "Move");
+
+		const standing = outcome("statusUnknown", "standing");
+		assert.match(standing.title, /Rule saved/);
+		assert.doesNotMatch(standing.detail, /never started/);
+		assert.match(standing.detail, /keeps working on new mail/);
+		assert.equal(standing.retryLabel, "Check again");
+	});
+
 	it("says a filter saved with nothing to back-apply is still live", () => {
 		const saved = outcome("filterSaved", "standing");
 		assert.equal(saved.title, "Filter saved");
@@ -559,6 +579,8 @@ describe("runCopy", () => {
 		assert.equal(outcome("backApplyRunning", "standing").showProgress, true);
 		assert.equal(outcome("backApplyComplete", "once").showProgress, true);
 		assert.equal(outcome("backApplyFailed", "once").showProgress, true);
+		// The last counts read are still the last counts read.
+		assert.equal(outcome("statusUnknown", "once").showProgress, true);
 	});
 
 	it("names the failure list in the verb's own past tense", () => {

package/src/lib/wizard-steps.ts

@@ -301,6 +301,7 @@ export type RunState =
 	| "backApplyComplete"
 	| "backApplyFailed"
 	| "backApplyStartFailed"
+	| "statusUnknown"
 	| "filterSaved"
 	| "runStopped"
 	| "commitFailed";
@@ -374,7 +375,10 @@ export const runCopy = ({
 	const { label, present, past } = verbCopy(verb);
 	const done = past.toLowerCase();
 	const standing = scope === "standing" || scope === "until";
-	const inFlight = state === "saving" || state === "backApplyRunning";
+	const inFlight =
+		state === "saving" ||
+		state === "backApplyRunning" ||
+		state === "statusUnknown";
 	const shared = {
 		// A create that failed did not finish, so the header does not say it did.
 		screenTitle: inFlight || state === "commitFailed" ? label : "Done",
@@ -382,6 +386,7 @@ export const runCopy = ({
 			state === "backApplyRunning" ||
 			state === "backApplyComplete" ||
 			state === "backApplyFailed" ||
+			state === "statusUnknown" ||
 			state === "runStopped",
 		failureListLabel: `Not ${done}`,
 	};
@@ -407,6 +412,20 @@ export const runCopy = ({
 			cancelLabel: "Stop the run",
 		};
 	}
+	if (state === "statusUnknown") {
+		return {
+			...shared,
+			title: standing
+				? "Rule saved. Its progress over your existing mail is unknown"
+				: `${present} — progress unknown`,
+			detail: standing
+				? "The connection dropped, so the bar shows the last that was read. The pass runs on the mail server, and the rule keeps working on new mail either way. This keeps checking."
+				: "The connection dropped, so the bar shows the last that was read. The run is on the mail server and carries on either way. This keeps checking.",
+			tone: "warning",
+			dismissLabel: "Close",
+			retryLabel: "Check again",
+		};
+	}
 	if (state === "backApplyComplete") {
 		return {
 			...shared,