@remit/web-client 0.0.324 → 0.0.326

package/dist/src/components/mail/MailListHeader.js

@@ -0,0 +1,303 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MailListHeader — the header-only list-pane shell shared by every list view.
+ *
+ * Composes the kit `MailHeader` (hamburger + title + unread + search) and the
+ * `<section>` column shell with an optional pinned footer. It owns no filter
+ * surface: the daily brief lets the kit `BriefSections` own the filter row,
+ * while `MailViewChrome` slots a `FilterSheet` into the body for the inbox /
+ * flagged views.
+ *
+ * Search comes from `MailContext` (one source of truth, mirrored to the URL).
+ * On phone the magnifier opens a full-screen `MobileSearchView` takeover instead
+ * of expanding over the title; tablet and desktop keep the inline header search
+ * and, once a query is present, swap the list-pane body to the same kit
+ * `SearchResults` sections. Consumers feed the filter chrome and query-narrowed
+ * results; both tiers render identical rows.
+ *
+ * The field offers what the search API can be told: token names for a bare word,
+ * that token's values once its name is committed. The list sits under the field
+ * on both tiers, in flow, so it takes its own space instead of covering the
+ * query it completes.
+ *
+ * An active query owns the pane. The filter chrome is not rendered while one is
+ * present — the two narrow the same list by the same intent and would sit in the
+ * same place — and its place is taken by `MakeFilterAction`, which the pane mounts
+ * itself so it is there for every search on every view, whichever body is showing
+ * the results.
+ *
+ * Results render as one section; an empty section drops out kit-side. The
+ * hamburger opens the nav drawer via the enclosing `AppShellSlotted`.
+ *
+ * This is also the one place the route's scope reaches the results list, so both
+ * tiers agree on it: a global search labels every row with the folder it came
+ * from and offers the spam it held out, and a scoped search does neither. See
+ * `resultsScopeForRoute` and `lib/spam-offer.ts`.
+ */
+import { Button, FilterToggle, isConvertible, MakeFilterAction, MobileSearchView, makeFilterBlockedCopy, SearchBar, SearchResults, SuggestList, useAppShellLayout, useSuggestList, } from "@remit/ui";
+import { Menu, Search, X } from "lucide-react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { isSinglePaneTier, useLayoutTier } from "../../hooks/useLayoutTier";
+import { useSearchScope } from "../../hooks/useSearchScope";
+import { useSearchSuggestions } from "../../hooks/useSearchSuggestions";
+import { useSearchTokenContext } from "../../hooks/useSearchTokenContext";
+import { ListHeaderChromeContext, } from "../../lib/list-header-chrome";
+import { useMailContext } from "../../lib/mail-context";
+import { convertSearchToRule } from "../../lib/organize/search-to-rule";
+import { loadRecentSearches, saveRecentSearch, } from "../../lib/recent-searches";
+import { SearchConversionContext } from "../../lib/search-conversion";
+import { resultsScopeForRoute, routeMailboxId } from "../../lib/search-scope";
+import { applySearchSuggestion } from "../../lib/search-suggestions";
+import { showInlineSearchResults } from "../../lib/search-surface";
+import { parseSearchTokens, removeSearchToken, searchTokenLabel, } from "../../lib/search-tokens";
+import { useBrowsedList, useOpenWizard, useScopeSearchToMailbox, } from "../../routing";
+const HeaderSearchContext = createContext(null);
+/**
+ * The expanded field, which subscribes to its own state instead of being handed
+ * it (#506).
+ *
+ * What is typed, where the caret is and which suggestion is highlighted change
+ * on every keystroke and belong to the field alone. Building the field into the
+ * chrome object made each of those a new chrome, and the chrome reaches the
+ * virtualized list through context, so the list re-rendered for a character it
+ * does not show. The chrome carries the slot; the slot reads the rest itself.
+ */
+function ListHeaderSearchField() {
+    const search = useContext(HeaderSearchContext);
+    const { searchInput, onSearchChange, onSearchClear } = useMailContext();
+    // Only `MailListHeader` puts this slot on the chrome, and it does so inside
+    // its own provider, so there is no reachable path here without one. Say so
+    // rather than rendering nothing: a search field that silently disappears is
+    // indistinguishable from a view that has no search.
+    if (!search)
+        throw new Error("ListHeaderSearchField rendered outside MailListHeader's HeaderSearchContext provider");
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(SearchBar, { value: searchInput, onChange: onSearchChange, onClear: onSearchClear, globalFocusKey: false, showClearButton: false, suggest: search.suggest }) }), _jsx(Button, { variant: "ghost", size: "touch", icon: _jsx(X, { className: "size-5" }), onClick: search.onClose, "aria-label": "Close search", className: "shrink-0" }), _jsx(FilterToggle, {})] }));
+}
+export function MailListHeader({ title, unreadCount, children, selectionBar, paneOverlay, footer, searchFilter, searchResults, searchLoading, onSelectSearchResult, searchResultsLabel = "Top matches", searchResultsInBody = false, spamOffer, refreshControl, }) {
+    const { accounts, resultFolderIndex, searchQuery, searchInput, onSearchChange, onSearchClear, searchViewKey, } = useMailContext();
+    const tokenContext = useSearchTokenContext();
+    const scopeSearchToMailbox = useScopeSearchToMailbox();
+    const layout = useAppShellLayout();
+    const tier = useLayoutTier();
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [recentSearches, setRecentSearches] = useState(loadRecentSearches);
+    const openWizard = useOpenWizard();
+    // Leaving the view ends the search: the shell drops the query, and the chrome
+    // it opened — the phone takeover, the expanded tablet field — closes with it
+    // rather than sitting there empty over the new mailbox (#47).
+    const searchViewRef = useRef(searchViewKey);
+    useEffect(() => {
+        if (searchViewRef.current === searchViewKey)
+            return;
+        searchViewRef.current = searchViewKey;
+        setSearchOpen(false);
+    }, [searchViewKey]);
+    // What the box offers for the term being typed. The field says where the
+    // caret is; the caret decides whether the offer is a token name or one
+    // token's values, and picking one replaces that term and leaves the caret
+    // ready for the next. Typing always wins — the list only ever inserts, and a
+    // term it has nothing for leaves the field the plain text box it is.
+    //
+    // An empty field belongs to the recent searches and the filter row, as it
+    // does everywhere else in this pane, so the offer starts with the first
+    // character typed. The caret on the whitespace after a finished token is a
+    // term of its own, which is where the whole vocabulary is offered again.
+    const [caretPosition, setCaretPosition] = useState(0);
+    const [fieldFocused, setFieldFocused] = useState(false);
+    const [caretRequest, setCaretRequest] = useState(undefined);
+    const suggestions = useSearchSuggestions({
+        query: searchInput,
+        cursor: caretPosition,
+        enabled: fieldFocused && searchInput.trim().length > 0,
+    });
+    const applySuggestion = useCallback((suggestion) => {
+        const applied = applySearchSuggestion(searchInput, caretPosition, suggestion);
+        onSearchChange(applied.query);
+        setCaretRequest({ cursor: applied.cursor });
+    }, [searchInput, caretPosition, onSearchChange]);
+    const suggest = useSuggestList({
+        count: suggestions.length,
+        onAccept: (index) => {
+            const suggestion = suggestions[index];
+            if (suggestion)
+                applySuggestion(suggestion);
+        },
+    });
+    // Stable while nothing about the field changes: it reaches the field through
+    // its own context rather than the chrome, so moving the highlight repaints
+    // the field and leaves the list under it alone.
+    const { comboboxProps, handleKeyDown } = suggest;
+    const searchSuggest = useMemo(() => ({
+        comboboxProps,
+        onKeyDown: handleKeyDown,
+        onCaretChange: setCaretPosition,
+        onFocusChange: setFieldFocused,
+        ...(caretRequest ? { caret: caretRequest } : {}),
+    }), [comboboxProps, handleKeyDown, caretRequest]);
+    const closeSearch = useCallback(() => {
+        onSearchClear();
+        setSearchOpen(false);
+    }, [onSearchClear]);
+    const headerSearch = useMemo(() => ({ suggest: searchSuggest, onClose: closeSearch }), [searchSuggest, closeSearch]);
+    // Under the field and in flow, on both tiers: a phone's soft keyboard owns
+    // the lower half of the screen, and a list floating over the field would
+    // cover the query it is completing.
+    const suggestList = suggest.open ? (_jsx(SuggestList, { id: suggest.listId, suggestions: suggestions, activeIndex: suggest.activeIndex, optionId: suggest.optionId, onPick: applySuggestion, onHighlight: suggest.setActiveIndex, label: "Search suggestions", className: "mx-row-inset mt-1 shrink-0" })) : null;
+    const hasQuery = searchInput.trim().length > 0;
+    // Filter tokens (`from:`, `has:attachment`, `account:`, …) parsed live from
+    // the typed query render as removable chips above the sections; removing one
+    // edits the query text directly, which re-parses on the next render. The
+    // parse runs through `useSearchTokenContext`, the same one the engines use,
+    // so a chip appears only for a term that is actually being applied — on a
+    // scoped view `in:` is not resolved and so is never chipped here.
+    // Memoized on the stable name indexes (not the fresh context object) so the
+    // filter dialog receives a stable parse and does not re-run its seed preview
+    // every render.
+    const { mailboxesByName, accountsByName } = tokenContext;
+    const parsed = useMemo(() => parseSearchTokens(searchInput, { mailboxesByName, accountsByName }), [searchInput, mailboxesByName, accountsByName]);
+    const tokenChips = useMemo(() => parsed.tokens.map((token) => ({
+        label: searchTokenLabel(token),
+        onRemove: () => onSearchChange(removeSearchToken(searchInput, token)),
+    })), [parsed, searchInput, onSearchChange]);
+    const topMatches = useMemo(() => searchResults ?? [], [searchResults]);
+    // Offer the section while a query is present; the kit drops it when empty and
+    // shows its empty state. The empty-query case (recent searches) is the kit's job.
+    const sections = useMemo(() => hasQuery
+        ? [{ id: "top", label: searchResultsLabel, results: topMatches }]
+        : [], [hasQuery, searchResultsLabel, topMatches]);
+    // Skeleton only while nothing is in yet.
+    const resultsLoading = topMatches.length === 0 && searchLoading === true;
+    // The mailbox's appointed role is what lets a search scoped to Spam show its
+    // rows rather than drop them.
+    const { scope } = useSearchScope(accounts);
+    const browsed = useBrowsedList();
+    const scopedMailboxId = routeMailboxId(browsed);
+    const scopedRole = scopedMailboxId
+        ? resultFolderIndex.get(scopedMailboxId)?.role
+        : undefined;
+    const routeScope = useMemo(() => resultsScopeForRoute(browsed, scope, scopedRole), [browsed, scope, scopedRole]);
+    // The offer is made for the *committed* query, so that is the query it carries
+    // into Spam. Both halves come from the view that owns the search: the number
+    // is the server's count of every junk folder it reached, and the destination
+    // the folder holding most of them. Counting the rows this panel happens to
+    // hold would count a page and call it a folder (#313).
+    const offer = routeScope.kind === "global" ? spamOffer : undefined;
+    const resultsScope = useMemo(() => offer
+        ? {
+            kind: "global",
+            spamCount: offer.count,
+            onScopeToSpam: () => scopeSearchToMailbox(offer.mailboxId, searchQuery),
+        }
+        : routeScope, [offer, routeScope, scopeSearchToMailbox, searchQuery]);
+    // Make-this-a-filter (#477 clause 1.8): the search is the wizard's second
+    // entry. It opens on the properties step with the clauses `convertSearchToRule`
+    // derives from the query, nothing ticked, and the notice for what the query
+    // could not be turned into. The conversion is computed once, here, and reaches
+    // the wizard through its own context — the reason the affordance gives and the
+    // clauses the wizard seeds from are the same answer, without the per-keystroke
+    // object riding on the chrome the list reads.
+    //
+    // It belongs to the search, not to any one way of showing it. The affordance
+    // therefore sits in the pane, above whichever body is up — the read-only
+    // results panel, or a list whose own rows narrow to the committed query — and
+    // is mounted on the same condition as the query itself. Rendering it inside
+    // the results panel made it a mailbox's flash: the panel shows while the query
+    // is being typed and hands back to `MessageList` the moment the query commits
+    // to the URL, taking the affordance down with it a few hundred milliseconds
+    // after it appeared. Mounting it here instead keeps it up through that
+    // hand-back on every view.
+    const conversion = useMemo(() => convertSearchToRule(parsed), [parsed]);
+    const searchConversion = hasQuery ? conversion : undefined;
+    // The wizard is a full-screen surface, so the phone takeover it was pressed
+    // from stands down rather than sitting under it — and the list underneath,
+    // which hosts the wizard, is mounted again by the time the step lands.
+    const openFilterWizard = useCallback(() => {
+        setSearchOpen(false);
+        openWizard("properties", "search");
+    }, [openWizard]);
+    // Keyed on the copy the affordance shows, not on the conversion it is derived
+    // from: the conversion is a fresh object for every character typed, while the
+    // reason it yields is the same string for all of them, and this row travels to
+    // the virtualized list on the chrome (#506).
+    const blockedReason = isConvertible(conversion)
+        ? undefined
+        : makeFilterBlockedCopy(conversion.droppedFacets.map((facet) => facet.label));
+    const makeFilter = useMemo(() => (hasQuery ? { onClick: openFilterWizard, blockedReason } : undefined), [hasQuery, blockedReason, openFilterWizard]);
+    // Handed to the bar rather than rendered here: the bar knows whether rows
+    // are ticked, and a selection's own verbs own the surface while they are up.
+    const makeFilterAction = useMemo(() => (makeFilter ? _jsx(MakeFilterAction, { ...makeFilter }) : null), [makeFilter]);
+    // Tablet + desktop keep the inline toolbar search; while a query is being
+    // typed the list-pane body swaps to the same sectioned results the phone
+    // takeover shows, under the same FilterSheet. A view whose own body renders
+    // the committed search as a selectable list (`searchResultsInBody` — the
+    // mailbox route, the brief, Starred) keeps the panel only until the query
+    // commits to the URL, then hands back to its own rows so multi-select (and,
+    // on the mailbox route, the "Select all N matching" escalation) is reachable
+    // (#212). Clearing the query restores the normal list.
+    const showInlineResults = showInlineSearchResults({
+        tier,
+        hasLiveInput: hasQuery,
+        hasCommittedQuery: searchQuery.trim().length > 0,
+        bodyRendersCommittedResults: searchResultsInBody,
+    });
+    const handleSelectInlineResult = useCallback((result) => {
+        setRecentSearches(saveRecentSearch(searchInput));
+        onSelectSearchResult?.(result);
+    }, [searchInput, onSelectSearchResult]);
+    const results = useMemo(() => (_jsx(SearchResults, { value: searchInput, sections: sections, loading: resultsLoading, onSelectResult: handleSelectInlineResult, tokens: tokenChips, scope: resultsScope })), [
+        searchInput,
+        sections,
+        resultsLoading,
+        handleSelectInlineResult,
+        tokenChips,
+        resultsScope,
+    ]);
+    // The header lives inside `children` for every view whose selection sits
+    // below this one, so swapping the body out from here would take the header
+    // with it — the pane would lose its title, its search field mid-keystroke,
+    // and its selection bar. Those views get the panel through the chrome and
+    // put it where their own rows go; the brief, whose header this component
+    // renders, keeps the plain swap.
+    const bodyOwnsHeader = selectionBar === undefined;
+    const resultsPane = useMemo(() => showInlineResults ? (_jsx("div", { className: "h-full overflow-y-auto", children: results })) : null, [showInlineResults, results]);
+    const body = resultsPane && !bodyOwnsHeader ? resultsPane : children;
+    const chromeResults = resultsPane && bodyOwnsHeader ? resultsPane : null;
+    // Desktop mounts the app top bar, which owns search for the whole shell — the
+    // list header shows no field there, so the page never has two search inputs
+    // competing for "/" and for focus. Below desktop the header keeps a compact
+    // magnifier: on phone it opens the full-screen takeover above, on tablet it
+    // expands over the title. `isSinglePaneTier` is the same predicate the shell
+    // gates the top bar on, so the two cannot drift into zero or two fields.
+    const ownsSearch = isSinglePaneTier(tier);
+    const searchExpanded = ownsSearch && (searchOpen || hasQuery);
+    const chrome = useMemo(() => ({
+        title,
+        searchResults: chromeResults,
+        makeFilterSlot: makeFilterAction,
+        navSlot: layout && !layout.showNavPane && (_jsx(Button, { variant: "ghost", size: "touch", icon: _jsx(Menu, { className: "size-5" }), onClick: () => layout.openNav(), "aria-label": "Menu", className: "-ml-2 shrink-0" })),
+        titleMeta: (_jsxs(_Fragment, { children: [unreadCount === null ? null : (_jsxs("span", { className: "shrink-0 text-2xs text-fg-subtle", children: [unreadCount.toLocaleString(), " unread"] })), _jsx(FilterToggle, {}), refreshControl] })),
+        searchSlot: ownsSearch && !searchExpanded && (_jsx(Button, { variant: "ghost", size: "touch", icon: _jsx(Search, { className: "size-5" }), onClick: () => setSearchOpen(true), "aria-label": "Search", className: "shrink-0" })),
+        searchField: searchExpanded && _jsx(ListHeaderSearchField, {}),
+    }), [
+        title,
+        unreadCount,
+        layout,
+        ownsSearch,
+        searchExpanded,
+        chromeResults,
+        makeFilterAction,
+        refreshControl,
+    ]);
+    if (tier === "phone" && searchOpen) {
+        const handleSelectResult = (result) => {
+            setRecentSearches(saveRecentSearch(searchInput));
+            setSearchOpen(false);
+            onSelectSearchResult?.(result);
+        };
+        return (_jsx(HeaderSearchContext.Provider, { value: headerSearch, children: _jsx(SearchConversionContext.Provider, { value: searchConversion, children: _jsxs(ListHeaderChromeContext.Provider, { value: chrome, children: [_jsx(MobileSearchView, { value: searchInput, onChange: onSearchChange, onClear: onSearchClear, onCancel: () => {
+                                setSearchOpen(false);
+                                onSearchClear();
+                            }, filter: searchFilter, recentSearches: recentSearches, onPickRecent: onSearchChange, makeFilter: makeFilter, sections: sections, loading: resultsLoading, onSelectResult: handleSelectResult, tokens: tokenChips, scope: resultsScope, suggest: searchSuggest, suggestList: suggestList }), paneOverlay] }) }) }));
+    }
+    return (_jsx(HeaderSearchContext.Provider, { value: headerSearch, children: _jsx(SearchConversionContext.Provider, { value: searchConversion, children: _jsx(ListHeaderChromeContext.Provider, { value: chrome, children: _jsxs("section", { className: "relative flex h-full w-full flex-col bg-surface", children: [selectionBar?.(chrome), suggestList, _jsx("div", { className: "min-h-0 flex-1", children: body }), footer, paneOverlay] }) }) }) }));
+}

package/dist/src/components/mail/MailNav.d.ts

@@ -0,0 +1,17 @@
+/**
+ * MailNav — the nav slot for AppShellSlotted.
+ *
+ * Renders a single "Mailboxes" navigation landmark. The kit shows this
+ * node either as a persistent pane (≥1024px) or inside its own slide-over
+ * Dialog (narrow) — never both — so there is exactly one nav landmark at
+ * any width. Below 1024px the slide-over also carries a Settings +
+ * bug-report footer (#685), since the mobile layout has no message toolbar
+ * to host them.
+ */
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+interface MailNavProps {
+    accounts: RemitImapAccountResponse[];
+    onMailboxSelect?: () => void;
+}
+export declare function MailNav({ accounts, onMailboxSelect }: MailNavProps): import("react").JSX.Element;
+export {};

package/dist/src/components/mail/MailNav.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AttentionDot, useAppShellLayout } from "@remit/ui";
+import { LogOut, Settings } from "lucide-react";
+import { AccountSession } from "../../auth/AccountSession";
+import { useWarningsAttention } from "../../hooks/useWarningsAttention";
+import { NavLink } from "../../routing";
+import { BugReportButton } from "../ui/BugReportButton";
+import { MailSidebarAdapter } from "./MailSidebarAdapter";
+export function MailNav({ accounts, onMailboxSelect }) {
+    const layout = useAppShellLayout();
+    const isPane = layout?.showNavPane ?? true;
+    const settingsAttention = useWarningsAttention();
+    if (isPane) {
+        return _jsx(MailSidebarAdapter, { accounts: accounts });
+    }
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(MailSidebarAdapter, { accounts: accounts, onMailboxSelect: onMailboxSelect, variant: "drawer" }) }), _jsxs("div", { className: "border-t border-line px-2 py-2", children: [_jsxs(NavLink, { to: "/settings/accounts", onClick: onMailboxSelect, children: [_jsx(AttentionDot, { label: settingsAttention, children: _jsx(Settings, { className: "size-4 shrink-0" }) }), _jsx("span", { className: "flex-1 truncate text-left", children: "Settings" })] }), _jsx(BugReportButton, {}), _jsx(AccountSession, { children: ({ signOut }) => (_jsxs("button", { type: "button", onClick: () => {
+                                onMailboxSelect?.();
+                                signOut();
+                            }, className: "flex min-h-11 w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg", "data-testid": "sign-out-button", children: [_jsx(LogOut, { className: "size-4 shrink-0" }), _jsx("span", { className: "flex-1 truncate text-left", children: "Sign out" })] })) })] })] }));
+}

package/dist/src/components/mail/MailSidebarAdapter.d.ts

@@ -0,0 +1,23 @@
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+interface MailSidebarAdapterProps {
+    accounts: RemitImapAccountResponse[];
+    /**
+     * Fires after the user selects a mailbox entry. The mobile drawer wires this
+     * to close itself on selection (#199). Desktop callers omit it.
+     */
+    onMailboxSelect?: () => void;
+    /**
+     * "desktop" (default) wraps the nav in a full-height aside — Pane 1 of the
+     * 4-pane shell. "drawer" renders the nav body only so the mobile Drawer
+     * panel can pin a settings footer below it (#685).
+     */
+    variant?: "desktop" | "drawer";
+}
+/**
+ * Pane 1 of the 4-pane shell. Data bridge that fetches mailboxes per account,
+ * maps them onto the kit's NavAccount shape, and renders each entry as a real
+ * router anchor via the kit's `linkComponent` render-prop. Replaces the retired
+ * local MailSidebar (#898).
+ */
+export declare function MailSidebarAdapter({ accounts, onMailboxSelect, variant, }: MailSidebarAdapterProps): import("react").JSX.Element;
+export {};

package/dist/src/components/mail/MailSidebarAdapter.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mailboxOperationsListMailboxesOptions, outboxOperationsListOutboxMessagesOptions, threadOperationsListThreadsQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { NavSidebar } from "@remit/ui";
+import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { folderFailure } from "../../lib/folder-failure";
+import { buildMailboxRoleMap, labelForMailbox, shouldShowUnreadBadgeForRole, } from "../../lib/folder-roles";
+import { useMailContext } from "../../lib/mail-context";
+import { isOutboxListRow } from "../../lib/outbox-status";
+import { NavLink, useSelectedNavId } from "../../routing";
+const startsWithDigit = (str) => /^\d/.test(str);
+const compareLabelNames = (a, b) => {
+    const aStartsWithDigit = startsWithDigit(a);
+    const bStartsWithDigit = startsWithDigit(b);
+    if (aStartsWithDigit && !bStartsWithDigit)
+        return -1;
+    if (!aStartsWithDigit && bStartsWithDigit)
+        return 1;
+    return a.localeCompare(b, undefined, { sensitivity: "base", numeric: true });
+};
+/**
+ * Split a mailbox list into pinned system rows and alpha-sorted plain
+ * folders. RFC 032 exclusive-folder-appointment (#976): "system" now means
+ * "appointed to a role in this account's folderAppointments map" — nothing is
+ * deduped here, because two folders can never share a role by construction.
+ * The kit re-pins/orders system rows by role itself; the adapter only needs
+ * to alpha-order the folders.
+ */
+function sortMailboxes(mailboxes, roleMap, t) {
+    const system = [];
+    const labels = [];
+    for (const mailbox of mailboxes) {
+        if (roleMap.has(mailbox.mailboxId)) {
+            system.push(mailbox);
+        }
+        else {
+            labels.push(mailbox);
+        }
+    }
+    labels.sort((a, b) => compareLabelNames(labelForMailbox(a, undefined, t), labelForMailbox(b, undefined, t)));
+    return { system, labels };
+}
+/**
+ * Convert an API mailbox to a NavMailbox for the kit: `role` comes from the
+ * account's folder-role map (RFC 032 exclusive-folder-appointment, #976), the
+ * label follows `displayNameOverride` then the role's canonical name then the
+ * provider leaf, and the badge follows the role.
+ */
+function toNavMailbox(mb, role, t) {
+    const showBadge = shouldShowUnreadBadgeForRole(role) && mb.unseenCount > 0;
+    return {
+        id: mb.mailboxId,
+        name: labelForMailbox(mb, role, t),
+        unseen: showBadge ? mb.unseenCount : undefined,
+        role,
+        fullPath: mb.fullPath,
+        failure: folderFailure(mb),
+    };
+}
+/**
+ * Pane 1 of the 4-pane shell. Data bridge that fetches mailboxes per account,
+ * maps them onto the kit's NavAccount shape, and renders each entry as a real
+ * router anchor via the kit's `linkComponent` render-prop. Replaces the retired
+ * local MailSidebar (#898).
+ */
+export function MailSidebarAdapter({ accounts, onMailboxSelect, variant = "desktop", }) {
+    const queryClient = useQueryClient();
+    const selectedNavId = useSelectedNavId();
+    const { onSearchChange } = useMailContext();
+    const { t } = useTranslation("mail", { useSuspense: false });
+    const translator = useCallback((key, fallback) => t(key, { defaultValue: fallback }), [t]);
+    const mailboxQueries = useQueries({
+        queries: accounts.map((account) => ({
+            ...mailboxOperationsListMailboxesOptions({
+                path: { accountId: account.accountId },
+            }),
+            // Mailboxes change rarely; cache forever, rely on explicit invalidation.
+            staleTime: Infinity,
+        })),
+    });
+    const { data: outboxResponse } = useQuery(outboxOperationsListOutboxMessagesOptions());
+    const outboxPendingCount = useMemo(() => (outboxResponse?.items ?? []).filter((item) => isOutboxListRow(item.status)).length, [outboxResponse?.items]);
+    const navAccounts = useMemo(() => {
+        return accounts.map((account, i) => {
+            const query = mailboxQueries[i];
+            const mailboxes = query?.data?.items ?? [];
+            const roleMap = buildMailboxRoleMap(account.folderAppointments);
+            const { system, labels } = sortMailboxes(mailboxes, roleMap, translator);
+            const status = query?.isError
+                ? "error"
+                : query?.isLoading
+                    ? "loading"
+                    : "ready";
+            return {
+                id: account.accountId,
+                label: account.email,
+                email: account.email,
+                muted: Boolean(account.muted),
+                // Outbox is a shared singleton shown inside each account's section,
+                // matching existing sidebar behaviour.
+                outboxPending: outboxPendingCount,
+                status,
+                onRetry: () => query?.refetch(),
+                mailboxes: [...system, ...labels].map((mb) => toNavMailbox(mb, roleMap.get(mb.mailboxId), translator)),
+            };
+        });
+    }, [accounts, mailboxQueries, outboxPendingCount, translator]);
+    // Invalidate a mailbox's thread list on navigation so a re-visit always
+    // fetches fresh data (mirrors the retired MailboxItem behaviour).
+    const invalidateMailboxThreads = (mailboxId) => {
+        queryClient.invalidateQueries({
+            queryKey: threadOperationsListThreadsQueryKey({
+                path: { mailboxId },
+                query: { order: "desc" },
+            }),
+        });
+    };
+    const linkComponent = ({ navId, className, ariaLabel, title, children, onClick, }) => {
+        if (navId === "brief") {
+            return (_jsx(NavLink, { to: "/mail/brief", search: { q: undefined }, activeOptions: { includeSearch: false }, onClick: () => onClick?.(), className: className, "aria-label": ariaLabel, title: title, children: children }));
+        }
+        if (navId === "calendar") {
+            // No list segment to name: the calendar's index route sends the reader
+            // to the week they are in, so a bookmark of the nav entry keeps working
+            // tomorrow.
+            return (_jsx(NavLink, { to: "/calendar", onClick: () => onClick?.(), className: className, "aria-label": ariaLabel, title: title, children: children }));
+        }
+        if (navId === "outbox") {
+            return (_jsx(NavLink, { to: "/mail/outbox", search: { q: undefined }, onClick: () => onClick?.(), className: className, "aria-label": ariaLabel, title: title, children: children }));
+        }
+        if (navId === "flagged") {
+            return (_jsx(NavLink, { to: "/mail/flagged", search: { q: undefined }, onClick: () => onClick?.(), className: className, "aria-label": ariaLabel, title: title, children: children }));
+        }
+        if (navId === "settings") {
+            return (_jsx(NavLink, { to: "/settings/accounts", onClick: () => onClick?.(), className: className, "aria-label": ariaLabel, title: title, children: children }));
+        }
+        return (_jsx(NavLink, { to: "/mail/$mailboxId", params: { mailboxId: navId }, 
+            // Drop any stale search query when switching mailbox; the list route
+            // is above the open conversation, so it leaves nothing behind.
+            search: { q: undefined }, onClick: () => {
+                invalidateMailboxThreads(navId);
+                onClick?.();
+            }, className: className, "aria-label": ariaLabel, title: title, children: children }));
+    };
+    const handleSelectNav = () => {
+        // Navigation is handled by the router <Link>; this runs the
+        // post-selection side effects.
+        //
+        // Clearing the field is one of them. Every link above drops `q`, and the
+        // shell re-seeds the field from the destination's `q` when the view
+        // changes — but picking the folder you are already in is the same view,
+        // so the shell leaves the field alone and the previous query would sit in
+        // the bar over a list that no longer has it in the URL. Selecting a nav
+        // entry is an unambiguous "show me this", so it clears here regardless.
+        // It is a user action, not a mirror, so it cannot race in-flight typing.
+        onSearchChange("");
+        onMailboxSelect?.();
+    };
+    return (_jsx(NavSidebar, { accounts: navAccounts, selectedNavId: selectedNavId, onSelectNav: handleSelectNav, linkComponent: linkComponent, calendarNav: "shown", variant: variant }));
+}

package/dist/src/components/mail/MailViewChrome.d.ts

@@ -0,0 +1,54 @@
+/**
+ * MailViewChrome — the shared list-pane chrome for the inbox and flagged views.
+ *
+ * Wraps `MailListHeader` and slots the `FilterSheet` expando
+ * directly into its body, exactly as the kit story does. The caller supplies the
+ * filter preset (`inboxFilterConfig` / `flaggedFilterConfig`) and owns the
+ * category / attribute / source selection state. The same filter config feeds
+ * the phone search takeover (via `MailListHeader`), so filters carry across.
+ *
+ * An active search takes the sheet down. Filtering and searching narrow the same
+ * list by the same intent, and the sheet and the search's "Make this a filter"
+ * affordance want the same row above the list, so only one of them is up at a
+ * time. The selection state is held here and survives, so clearing the query
+ * restores the sheet exactly as it was.
+ *
+ * The daily brief composes the same three parts itself — provider, header,
+ * sheet — around the kit `BriefSections`, whose sheet reports the selection and
+ * flattens the sections when the brief is scoped to one category.
+ */
+import { type FilterPreset, type SearchResult } from "@remit/ui";
+import type { ReactNode } from "react";
+interface MailViewChromeProps {
+    title: string;
+    /** Unread count beside the title; `null` shows no number — see `MailListHeader`. */
+    unreadCount: number | null;
+    preset: FilterPreset;
+    selectedCategory: string;
+    activeFilters: ReadonlySet<string>;
+    onSelectCategory: (id: string) => void;
+    onToggleFilter: (id: string) => void;
+    onSelectSource?: (id: string) => void;
+    onClearFilters: () => void;
+    /** The list body (sections / virtualized rows) rendered inside the expando. */
+    children: ReactNode;
+    /** Pinned below the scrollable list (e.g. the keyboard hint bar). */
+    footer?: ReactNode;
+    /** Literal/instant results — the "Top matches" section. */
+    searchResults?: SearchResult[];
+    searchLoading?: boolean;
+    onSelectSearchResult?: (result: SearchResult) => void;
+    /** Section heading; see `MailListHeader`. */
+    searchResultsLabel?: string;
+    /**
+     * The body renders the committed search as a selectable list itself; see
+     * `MailListHeader`. The mailbox route sets this so a committed search yields
+     * its multi-select `MessageList` (#212); Starred sets it for the same reason,
+     * over its own already query-narrowed rows.
+     */
+    searchResultsInBody?: boolean;
+    /** The view's own refresh control, scoped to the account it shows. */
+    refreshControl?: ReactNode;
+}
+export declare function MailViewChrome({ title, unreadCount, preset, selectedCategory, activeFilters, onSelectCategory, onToggleFilter, onSelectSource, onClearFilters, children, footer, searchResults, searchLoading, onSelectSearchResult, searchResultsLabel, searchResultsInBody, refreshControl, }: MailViewChromeProps): import("react").JSX.Element;
+export {};

package/dist/src/components/mail/MailViewChrome.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * MailViewChrome — the shared list-pane chrome for the inbox and flagged views.
+ *
+ * Wraps `MailListHeader` and slots the `FilterSheet` expando
+ * directly into its body, exactly as the kit story does. The caller supplies the
+ * filter preset (`inboxFilterConfig` / `flaggedFilterConfig`) and owns the
+ * category / attribute / source selection state. The same filter config feeds
+ * the phone search takeover (via `MailListHeader`), so filters carry across.
+ *
+ * An active search takes the sheet down. Filtering and searching narrow the same
+ * list by the same intent, and the sheet and the search's "Make this a filter"
+ * affordance want the same row above the list, so only one of them is up at a
+ * time. The selection state is held here and survives, so clearing the query
+ * restores the sheet exactly as it was.
+ *
+ * The daily brief composes the same three parts itself — provider, header,
+ * sheet — around the kit `BriefSections`, whose sheet reports the selection and
+ * flattens the sections when the brief is scoped to one category.
+ */
+import { FilterPanelProvider, FilterSheet, } from "@remit/ui";
+import { useMailContext } from "../../lib/mail-context";
+import { MailListHeader } from "./MailListHeader";
+export function MailViewChrome({ title, unreadCount, preset, selectedCategory, activeFilters, onSelectCategory, onToggleFilter, onSelectSource, onClearFilters, children, footer, searchResults, searchLoading, onSelectSearchResult, searchResultsLabel, searchResultsInBody, refreshControl, }) {
+    // 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
+    // the query brings the sheet back with the same category and toggles.
+    const { searchInput } = useMailContext();
+    const searching = searchInput.trim().length > 0;
+    const filterConfig = {
+        categories: preset.categories,
+        filters: preset.filters,
+        sources: preset.sources,
+        selectedCategory,
+        activeFilters,
+        onSelectCategory,
+        onSelectSource,
+        onToggleFilter,
+        onClear: onClearFilters,
+    };
+    return (_jsx(FilterPanelProvider, { hasSheet: !searching, children: _jsx(MailListHeader, { title: title, unreadCount: unreadCount, footer: footer, searchFilter: filterConfig, searchResults: searchResults, searchLoading: searchLoading, onSelectSearchResult: onSelectSearchResult, searchResultsLabel: searchResultsLabel, searchResultsInBody: searchResultsInBody, refreshControl: refreshControl, children: _jsx(FilterSheet, { ...filterConfig, hideChrome: searching, children: children }) }) }));
+}