@remit/web-client 0.0.108 → 0.0.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.108",
+  "version": "0.0.109",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/auth/AccountMenu.tsx

@@ -1,6 +1,5 @@
 import { Avatar } from "@remit/ui";
-import { useNavigate } from "@tanstack/react-router";
-import { LogOut, Settings } from "lucide-react";
+import { LogOut } from "lucide-react";
 import {
 	DropdownMenu,
 	DropdownMenuItem,
@@ -14,7 +13,6 @@ interface AccountMenuViewProps {
 }
 
 const AccountMenuView = ({ email, onSignOut }: AccountMenuViewProps) => {
-	const navigate = useNavigate();
 	const displayName = email ?? "Account";
 
 	return (
@@ -36,11 +34,6 @@ const AccountMenuView = ({ email, onSignOut }: AccountMenuViewProps) => {
 					<DropdownMenuSeparator />
 				</>
 			)}
-			<DropdownMenuItem onClick={() => navigate({ to: "/settings/accounts" })}>
-				<Settings className="size-4" />
-				Settings
-			</DropdownMenuItem>
-			<DropdownMenuSeparator />
 			<DropdownMenuItem onClick={onSignOut}>
 				<LogOut className="size-4" />
 				Sign out

package/src/components/layout/MailTopBar.tsx

@@ -1,15 +1,16 @@
 /**
  * MailTopBar — the app's one search surface and its global actions.
  *
- * Mounted by the `/mail` shell over the list, the reading pane and the
- * intelligence rail, starting on the list's left edge. It is the app's search,
- * not the list's: the list header drops its own field wherever this bar is
- * mounted, so exactly one search input exists on the page and the "/" shortcut
- * has one target.
+ * Mounted by the `/mail` shell across the top of the whole layout — the nav
+ * column, the list, the reading pane and the intelligence rail. It is the app's
+ * search, not the list's: the list header drops its own field wherever this bar
+ * is mounted, so exactly one search input exists on the page and the "/"
+ * shortcut has one target.
  *
  * The actions here are the ones that belong to the app rather than to whatever
- * is currently listed or open — compose, bug report, account. Reply, delete,
- * move and the rest stay on the reading pane's own toolbar, under this bar.
+ * is currently listed or open — the nav toggle, compose, bug report, settings,
+ * account. Reply, delete, move and the rest stay on the reading pane's own
+ * toolbar, under this bar.
  *
  * The field carries one chip: the scope of the view the user navigated into
  * (`in:spam` in Spam, nothing on the brief). Removing it goes to the brief and
@@ -19,8 +20,9 @@
  * sections instead, where the text is not repeated.
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { AppTopBar, Button, SearchBar } from "@remit/ui";
-import { SquarePen } from "lucide-react";
+import { AppTopBar, Button, NavToggleButton, SearchBar } from "@remit/ui";
+import { useNavigate } from "@tanstack/react-router";
+import { Settings, SquarePen } from "lucide-react";
 import { AccountMenu } from "@/auth/AccountMenu";
 import { BugReportButton } from "@/components/ui/BugReportButton";
 import { useGlobalCompose } from "@/hooks/useComposeTarget";
@@ -42,6 +44,7 @@ interface MailTopBarProps {
 export function MailTopBar({ accounts }: MailTopBarProps) {
 	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
 		useMailContext();
+	const navigate = useNavigate();
 	const compose = useGlobalCompose(accounts);
 	const { scope, clearScope } = useSearchScope(accounts);
 	const chips =
@@ -55,6 +58,7 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 
 	return (
 		<AppTopBar
+			leading={<NavToggleButton />}
 			search={
 				<SearchBar
 					value={searchInput}
@@ -64,7 +68,6 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 					chips={chips}
 					onRemoveChip={clearScope}
 					placeholder={placeholder}
-					size="lg"
 				/>
 			}
 			actions={
@@ -78,6 +81,14 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 						onClick={compose}
 					/>
 					<BugReportButton />
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Settings className="size-4" />}
+						title="Settings"
+						aria-label="Settings"
+						onClick={() => navigate({ to: "/settings/accounts" })}
+					/>
 					<AccountMenu />
 				</>
 			}

package/src/components/mail/MailListHeader.tsx

@@ -41,6 +41,7 @@
 import {
 	Button,
 	type FilterSheetProps,
+	FilterToggle,
 	isConvertible,
 	MakeFilterAction,
 	MobileSearchView,
@@ -435,9 +436,12 @@ export function MailListHeader({
 				/>
 			),
 			titleMeta: (
-				<span className="shrink-0 text-2xs text-fg-subtle">
-					{unreadCount.toLocaleString()} unread
-				</span>
+				<>
+					<span className="shrink-0 text-2xs text-fg-subtle">
+						{unreadCount.toLocaleString()} unread
+					</span>
+					{!hasQuery && <FilterToggle />}
+				</>
 			),
 			searchSlot: ownsSearch && !searchExpanded && (
 				<Button
@@ -488,6 +492,7 @@ export function MailListHeader({
 			chromeResults,
 			makeFilterAction,
 			searchConversion,
+			hasQuery,
 		],
 	);
 

package/src/components/mail/MailViewChrome.tsx

@@ -18,12 +18,13 @@
  * surface and the section headers flatten correctly when filtered).
  */
 import {
+	FilterPanelProvider,
 	type FilterPreset,
 	FilterSheet,
 	type FilterSheetProps,
 	type SearchResult,
 } from "@remit/ui";
-import { type ReactNode, useState } from "react";
+import type { ReactNode } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import { MailListHeader } from "./MailListHeader";
 
@@ -81,7 +82,6 @@ export function MailViewChrome({
 	relatedResultsLabel,
 	searchResultsInBody,
 }: MailViewChromeProps) {
-	const [expanded, setExpanded] = useState(false);
 	// A query owns the pane: the filter chrome and the search's own affordance
 	// narrow the same list from the same place, so the filter sheet stands down
 	// for as long as something is being searched. Its state survives — clearing
@@ -95,8 +95,6 @@ export function MailViewChrome({
 		sources: preset.sources,
 		selectedCategory,
 		activeFilters,
-		expanded,
-		onExpandedChange: setExpanded,
 		onSelectCategory,
 		onSelectSource,
 		onToggleFilter,
@@ -104,26 +102,28 @@ export function MailViewChrome({
 	};
 
 	return (
-		<MailListHeader
-			title={title}
-			unreadCount={unreadCount}
-			footer={footer}
-			searchFilter={filterConfig}
-			searchResults={searchResults}
-			searchLoading={searchLoading}
-			relatedResults={relatedResults}
-			relatedLoading={relatedLoading}
-			onSelectSearchResult={onSelectSearchResult}
-			searchResultsLabel={searchResultsLabel}
-			relatedResultsLabel={relatedResultsLabel}
-			searchResultsInBody={searchResultsInBody}
-		>
-			{/* One shell either way: the children's parent must not change when a
-			    query starts, or everything under it — including the header's own
-			    search field — remounts mid-keystroke. */}
-			<FilterSheet {...filterConfig} hideChrome={searching}>
-				{children}
-			</FilterSheet>
-		</MailListHeader>
+		<FilterPanelProvider>
+			<MailListHeader
+				title={title}
+				unreadCount={unreadCount}
+				footer={footer}
+				searchFilter={filterConfig}
+				searchResults={searchResults}
+				searchLoading={searchLoading}
+				relatedResults={relatedResults}
+				relatedLoading={relatedLoading}
+				onSelectSearchResult={onSelectSearchResult}
+				searchResultsLabel={searchResultsLabel}
+				relatedResultsLabel={relatedResultsLabel}
+				searchResultsInBody={searchResultsInBody}
+			>
+				{/* One shell either way: the children's parent must not change when a
+				    query starts, or everything under it — including the header's own
+				    search field — remounts mid-keystroke. */}
+				<FilterSheet {...filterConfig} hideChrome={searching}>
+					{children}
+				</FilterSheet>
+			</MailListHeader>
+		</FilterPanelProvider>
 	);
 }