@remit/web-client 0.0.324 → 0.0.326

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The delete confirmation, worded from what the delete will actually do.
+ *
+ * One component for every list that deletes mail — the mailbox list, the brief
+ * and Flagged — so the wording and the refusal cannot drift apart again the way
+ * they did between #845 and #855.
+ *
+ * Four of the outcomes are not confirmations at all. When the account has no
+ * Trash, the folder it appointed is gone, or the row would expunge inside a
+ * Trash nobody ever confirmed, the server refuses the delete outright; when
+ * its folder settings could not be read reader cannot say whether a delete
+ * moves the mail or erases it. All four refuse and the caller's `onConfirm` is
+ * never reached directly. The first three are answered in place — the
+ * affirmative control opens the appointment prompt, whose own confirm appoints
+ * the folder and then runs this delete. None of them may render as "this
+ * folder is not Trash".
+ */
+import { ConfirmDialog } from "@remit/ui";
+import { useAuthProvider } from "../../auth/provider";
+import { deleteConfirmationCopy } from "../../lib/format";
+import { useRoleAppointmentPrompt } from "./RoleAppointmentPromptProvider";
+export const DeleteConfirmDialog = ({ isOpen, messageIds, outcome, accountId, trashFolderLabel, staleFolderLabel, guessedMailboxId, isDeleting = false, onConfirm, onCancel, }) => {
+    const { Account } = useAuthProvider();
+    const { requestAppointment } = useRoleAppointmentPrompt();
+    const count = messageIds.length;
+    const confirm = () => onConfirm([...messageIds]);
+    const copy = deleteConfirmationCopy(count, outcome, {
+        trashFolderLabel,
+        staleFolderLabel,
+    });
+    if (outcome === "noTrash" ||
+        outcome === "staleTrash" ||
+        outcome === "unconfirmed") {
+        const reason = outcome === "noTrash"
+            ? "none"
+            : outcome === "staleTrash"
+                ? "stale"
+                : "unconfirmed";
+        return (_jsx(ConfirmDialog, { isOpen: isOpen, ...copy, onConfirm: () => {
+                // With no account to appoint on, the delete is issued anyway and
+                // the server's own 409 opens the prompt naming the account it
+                // refused for. Never a control that does nothing.
+                if (!accountId)
+                    return confirm();
+                const replay = [...messageIds];
+                onCancel();
+                requestAppointment({
+                    accountId,
+                    role: "Trash",
+                    reason,
+                    action: { kind: "delete", count },
+                    staleFolderLabel,
+                    trashFolderLabel,
+                    guessedMailboxId,
+                    onAppointed: async () => onConfirm(replay),
+                });
+            }, onCancel: onCancel }));
+    }
+    if (outcome === "unavailable") {
+        return (_jsx(Account, { fallback: _jsx(ConfirmDialog, { isOpen: isOpen, ...copy, 
+                // Nothing to sign back into on a deployment with no identity
+                // system, so the way forward is the read itself.
+                confirmLabel: "Reload reader", onConfirm: () => window.location.reload(), onCancel: onCancel }), children: ({ signOut }) => (_jsx(ConfirmDialog, { isOpen: isOpen, ...copy, onConfirm: () => signOut(), onCancel: onCancel })) }));
+    }
+    return (_jsx(ConfirmDialog, { isOpen: isOpen, ...copy, destructive: true, 
+        // The confirm holds while the appointment is still arriving: the answer
+        // is seconds away and it decides which of two dialogs this is.
+        isBusy: isDeleting || outcome === "unknown", onConfirm: confirm, onCancel: onCancel }));
+};

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

@@ -0,0 +1,15 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+interface DraftsViewProps {
+    /** The accountId that owns this \Drafts mailbox. */
+    accountId: string;
+    /** The currently selected message id (reading pane). */
+    selectedMessageId?: string;
+    /** IMAP thread rows already loaded for the \Drafts mailbox. */
+    imapThreads: RemitImapThreadMessageResponse[];
+    /** Mailbox display name (e.g. "Drafts"). */
+    title: string;
+    /** Total unread count for the header. */
+    unreadCount?: number;
+}
+export declare function DraftsView({ accountId, selectedMessageId, imapThreads, title, unreadCount, }: DraftsViewProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DraftsView — segmented Drafts folder view.
+ *
+ * Renders two labeled sections when the open mailbox is an account's IMAP
+ * \Drafts special-use folder (issue #505):
+ *
+ *   1. "Not yet sent (Remit)" — outbox rows with status === "draft" belonging
+ *      to the account that owns the open \Drafts mailbox. Clicking a row names
+ *      the draft and navigates to the folder's compose route.
+ *
+ *   2. "On the server" — IMAP \Drafts thread rows already loaded for the
+ *      mailbox. Clicking a row opens the normal reading pane (read-only;
+ *      editing IMAP drafts in compose is a known follow-up gap).
+ *
+ * Reuses the remit-ui ThreadSection / sectioned-list machinery that the Daily
+ * Brief also uses — sticky section headers, ComfortableRow / CompactRow with
+ * density. No new sectioned-list code is introduced here.
+ *
+ * Dedup note: Remit draft rows and IMAP \Drafts messages have no shared key
+ * today (no IMAP APPEND-as-draft path exists). Both sections render without
+ * client-side dedup; if appending Remit drafts into IMAP \Drafts ships in the
+ * future the dedup key would be the RFC822 Message-ID header (issue #505).
+ */
+import { outboxDetailOperationsDeleteOutboxMessageMutation, outboxOperationsListOutboxMessagesOptions, outboxOperationsListOutboxMessagesQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Avatar, ComfortableRowTextContent, cn, comfortableRowClass, PaneHeader, } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { FileText, Inbox, Trash2 } from "lucide-react";
+import { useMemo } from "react";
+import { groupDraftSections } from "../../lib/drafts";
+import { useComposeDraftId, useEditDraft, useOpenThread } from "../../routing";
+import { NavMenuButton } from "./NavMenuButton";
+// ---------------------------------------------------------------------------
+// Section header (mirrors DailyBrief SectionHeader)
+// ---------------------------------------------------------------------------
+const SectionHeader = ({ label, count }) => (_jsxs("div", { className: "sticky top-0 z-10 flex items-baseline justify-between border-b border-line bg-surface-sunken px-row-inset py-1", children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-wider text-fg-subtle", children: label }), _jsx("span", { className: "text-2xs text-fg-subtle tabular-nums", children: count })] }));
+const RemitDraftRow = ({ row, isSelected, onOpen, onDelete, isDeleting, }) => (_jsxs("button", { type: "button", onClick: () => onOpen(row.id), className: cn("group", comfortableRowClass({ active: isSelected })), children: [_jsx(FileText, { className: "size-7 shrink-0 text-fg-muted mt-0.5" }), _jsx(ComfortableRowTextContent, { thread: row }), _jsx("div", { className: "flex items-center gap-1 shrink-0", children: _jsx("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(row.id);
+                }, disabled: isDeleting, className: "p-1.5 rounded-md text-fg-muted hover:text-danger hover:bg-surface-raised transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100", title: "Delete draft", children: _jsx(Trash2, { className: "size-3.5" }) }) })] }));
+const ImapDraftRow = ({ row, isSelected, onOpen }) => {
+    const unread = !row.isRead;
+    return (_jsxs("button", { type: "button", onClick: () => onOpen(row.id), className: cn("group", comfortableRowClass({ active: isSelected })), children: [unread && (_jsx("span", { className: "absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" })), _jsx(Avatar, { name: row.fromName, email: row.fromEmail, size: "sm" }), _jsx(ComfortableRowTextContent, { thread: row })] }));
+};
+export function DraftsView({ accountId, selectedMessageId, imapThreads, title, unreadCount, }) {
+    const openDraftId = useComposeDraftId();
+    const editDraft = useEditDraft();
+    const openThread = useOpenThread();
+    const queryClient = useQueryClient();
+    // Fetch the full outbox list — both sources are already fetched by the
+    // client; this is a pure client-side composition (issue #505).
+    const { data: outboxResponse } = useQuery(outboxOperationsListOutboxMessagesOptions());
+    const sections = useMemo(() => {
+        return groupDraftSections({
+            outboxMessages: outboxResponse?.items ?? [],
+            accountId,
+            imapThreads,
+        });
+    }, [outboxResponse?.items, accountId, imapThreads]);
+    const deleteMutation = useMutation({
+        ...outboxDetailOperationsDeleteOutboxMessageMutation(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: outboxOperationsListOutboxMessagesQueryKey(),
+            });
+        },
+    });
+    const handleRemitDraftDelete = (outboxMessageId) => {
+        deleteMutation.mutate({ path: { outboxMessageId } });
+    };
+    const handleImapDraftOpen = (messageId) => {
+        const threadId = imapThreads.find((thread) => thread.messageId === messageId)?.threadId;
+        if (!threadId)
+            return;
+        openThread({ threadId, messageId });
+    };
+    const isEmpty = sections.length === 0;
+    return (_jsxs("section", { className: "flex h-full w-full flex-col bg-surface", children: [_jsx(PaneHeader, { title: title, leading: _jsx(NavMenuButton, {}), children: (unreadCount ?? 0) > 0 && (_jsxs("span", { className: "shrink-0 text-2xs text-fg-subtle tabular-nums", children: [unreadCount, " unread"] })) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: isEmpty ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-2 text-center px-4", children: [_jsx(Inbox, { className: "size-8 text-fg-subtle" }), _jsx("p", { className: "text-sm font-medium text-fg", children: "No drafts" }), _jsx("p", { className: "text-xs text-fg-subtle", children: "Messages you start composing will appear here." })] })) : (sections.map((section) => (_jsxs("div", { children: [section.label && (_jsx(SectionHeader, { label: section.label, count: section.threads.length })), _jsx("div", { className: "divide-y divide-line", children: section.threads.map((thread) => {
+                                if (section.id === "remit-drafts") {
+                                    return (_jsx(RemitDraftRow, { row: thread, isSelected: thread.id === openDraftId, onOpen: editDraft, onDelete: handleRemitDraftDelete, isDeleting: deleteMutation.isPending }, thread.id));
+                                }
+                                return (_jsx(ImapDraftRow, { row: thread, isSelected: thread.id === selectedMessageId, onOpen: handleImapDraftOpen }, thread.id));
+                            }) })] }, section.id)))) })] }));
+}

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

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+import type { FolderRoleRefusalReason } from "../ui/folder-role-refusal";
+export interface EmptyTrashConfirmCopy {
+    title: string;
+    description: string;
+    confirmLabel: string;
+}
+/** The confirmation the button opens, worded for an expunge. */
+export declare const emptyTrashConfirmCopy: (count: number) => EmptyTrashConfirmCopy;
+export interface EmptyTrashRefusalCopy {
+    headline: string;
+    body: string;
+    actionLabel: string;
+}
+export interface EmptyTrashRefusalContext {
+    /** The folder reader guessed, for `unconfirmed`. */
+    trashFolderLabel?: string;
+    /** The folder that vanished, for `stale`. */
+    staleFolderLabel?: string;
+}
+/**
+ * What the strip says when the server refused. `unconfirmed` borrows
+ * `deleteConfirmationCopy`'s words so the dialog and this strip cannot drift
+ * apart on the one refusal both can raise (#887 F4).
+ */
+export declare const emptyTrashRefusalCopy: (reason: FolderRoleRefusalReason, context?: EmptyTrashRefusalContext) => EmptyTrashRefusalCopy;
+export interface EmptyTrashBarProps extends EmptyTrashRefusalContext {
+    /** Messages the open Trash folder holds. */
+    messageCount: number;
+    isEmptying: boolean;
+    /** The service's own count, from the run that just finished. */
+    deletedCount?: number;
+    /** The reason the server refused, kept until the user acts on it. */
+    refusalReason?: FolderRoleRefusalReason;
+    onEmpty: () => void;
+    /** Opens the appointment prompt for the standing refusal. */
+    onRepair: () => void;
+    children: ReactNode;
+}
+/**
+ * The Empty Trash strip above the Trash folder's list, and the refusals the
+ * server answers it with (#847). The button always acts — it is never
+ * pre-refused from what the client thinks the appointment is, because the 409
+ * is the authority and a warning over a folder nobody has tried to empty is
+ * noise.
+ */
+export declare function EmptyTrashBar({ messageCount, isEmptying, deletedCount, refusalReason, trashFolderLabel, staleFolderLabel, onEmpty, onRepair, children, }: EmptyTrashBarProps): import("react").JSX.Element;

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

@@ -0,0 +1,73 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner, Button, ConfirmDialog } from "@remit/ui";
+import { Trash2 } from "lucide-react";
+import { useState } from "react";
+import { deleteConfirmationCopy, formatNumber } from "../../lib/format";
+const quantified = (count) => count === 1 ? "1 message" : `${formatNumber(count)} messages`;
+/** The confirmation the button opens, worded for an expunge. */
+export const emptyTrashConfirmCopy = (count) => ({
+    title: "Empty Trash?",
+    description: `${quantified(count)} ${count === 1 ? "is" : "are"} erased from the mail server and cannot be restored.`,
+    confirmLabel: "Empty Trash",
+});
+/**
+ * What the strip says when the server refused. `unconfirmed` borrows
+ * `deleteConfirmationCopy`'s words so the dialog and this strip cannot drift
+ * apart on the one refusal both can raise (#887 F4).
+ */
+export const emptyTrashRefusalCopy = (reason, context = {}) => {
+    const { trashFolderLabel, staleFolderLabel } = context;
+    if (reason === "unconfirmed") {
+        const copy = deleteConfirmationCopy(0, "unconfirmed", { trashFolderLabel });
+        return {
+            headline: copy.title,
+            body: copy.description,
+            actionLabel: copy.confirmLabel,
+        };
+    }
+    if (reason === "stale") {
+        return {
+            headline: "Nothing was emptied.",
+            body: staleFolderLabel
+                ? `The folder you chose for Trash — ${staleFolderLabel} — is gone from the mail server.`
+                : "The folder you chose for Trash is gone from the mail server.",
+            actionLabel: "Pick another folder",
+        };
+    }
+    return {
+        headline: "Nothing was emptied.",
+        body: "No folder on this account is set as Trash.",
+        actionLabel: "Pick a folder",
+    };
+};
+/**
+ * The Empty Trash strip above the Trash folder's list, and the refusals the
+ * server answers it with (#847). The button always acts — it is never
+ * pre-refused from what the client thinks the appointment is, because the 409
+ * is the authority and a warning over a folder nobody has tried to empty is
+ * noise.
+ */
+export function EmptyTrashBar({ messageCount, isEmptying, deletedCount, refusalReason, trashFolderLabel, staleFolderLabel, onEmpty, onRepair, children, }) {
+    const [confirming, setConfirming] = useState(false);
+    // The folder is emptied and nothing was refused: there is no verb left to
+    // offer. A standing refusal or a report of what went outlives the rows,
+    // so the user is never left to guess what the press did.
+    if (messageCount < 1 &&
+        refusalReason === undefined &&
+        deletedCount === undefined)
+        return _jsx(_Fragment, { children: children });
+    const refusal = refusalReason
+        ? emptyTrashRefusalCopy(refusalReason, {
+            trashFolderLabel,
+            staleFolderLabel,
+        })
+        : undefined;
+    const confirm = emptyTrashConfirmCopy(messageCount);
+    return (_jsxs("div", { className: "relative flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 px-row-inset pt-2", children: _jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-line px-3 py-2", children: [_jsxs("div", { className: "flex items-center justify-end gap-2", children: [deletedCount !== undefined && (_jsx("p", { className: "mr-auto text-2xs text-fg-subtle", role: "status", children: `${quantified(deletedCount)} erased from the mail server.` })), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(Trash2, { className: "size-3.5", "aria-hidden": true }), disabled: isEmptying || messageCount < 1, "aria-busy": isEmptying, onClick: () => setConfirming(true), children: isEmptying ? "Emptying…" : "Empty Trash" })] }), refusal && (_jsx(Banner, { tone: "warning", variant: "soft", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "font-semibold text-fg", children: refusal.headline }), _jsx("p", { className: "text-sm", children: refusal.body }), _jsx(Button, { variant: "primary", size: "sm", className: "self-start", onClick: onRepair, children: refusal.actionLabel })] }) }))] }) }), _jsx("div", { className: "min-h-0 flex-1", children: children }), _jsx(ConfirmDialog, { isOpen: confirming, title: confirm.title, description: confirm.description, confirmLabel: confirm.confirmLabel, destructive: true, 
+                // The dialog hands the decision over and closes; the in-flight state
+                // lives on the strip's own button, which is where the verb is.
+                onConfirm: () => {
+                    setConfirming(false);
+                    onEmpty();
+                }, onCancel: () => setConfirming(false) })] }));
+}

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

@@ -0,0 +1,20 @@
+import { type RefObject } from "react";
+import type { TriageContextUpdate } from "../../hooks/useTriageLayer";
+import type { OpenThreadTarget } from "../../routing";
+import type { MessageListCommands } from "./MessageList";
+import { type OpenMessageOptions } from "./ThreadListInteraction";
+interface FlaggedListProps {
+    selectedMessageId?: string;
+    /**
+     * Opens a row. Every starred row names its thread, so a message filed outside
+     * the inbox opens by exactly the same route as one inside it.
+     */
+    onOpenThread?: (target: OpenThreadTarget, options?: OpenMessageOptions) => void;
+    /** Where the list publishes the commands the keyboard layer drives. */
+    commandsRef?: RefObject<MessageListCommands | null>;
+    /** Cursor / selection / display order, reported up to the triage layer. */
+    onTriageContextChange?: (context: TriageContextUpdate) => void;
+    onDeleteMessages: (messageIds: string[]) => void;
+}
+export declare function FlaggedList({ selectedMessageId, onOpenThread, commandsRef, onTriageContextChange, onDeleteMessages, }: FlaggedListProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FlaggedList — a FLAT, cross-account inbox of starred mail.
+ *
+ * Reads the starred listing through `useStarredThreads` — GET /threads with
+ * `starred=true`, served by the `byStarred` index — which returns every starred
+ * thread in the config across all non-muted mailboxes, paged. Every row names
+ * its thread, which is the whole address a conversation opens by, so a starred
+ * message filed outside the inbox opens like any other. Starredness is decided
+ * server-side from `hasStars`; the client neither re-filters nor caps the set,
+ * so a starred thread outside the newest inbox page still appears. Rendered as
+ * one continuous list (no category sections). The shared `MailViewChrome` owns
+ * the `MailHeader` + filter expando; the kit `MessageListPane` (flat, no
+ * `briefFilters`) owns the loading / empty / error chrome and keyboard hints,
+ * with a consumer-supplied `listBody` so the real rows render at every width.
+ *
+ * The category and attribute chips are query parameters, and the header's
+ * unread count is the server's own (#308). Both used to be computed over the
+ * pages the user happened to have loaded, so a category whose mail sat below
+ * the newest page showed an empty list, and the count grew with every press of
+ * "load more" while being presented as a total.
+ *
+ * The free text and the `from:` / `subject:` tokens are parameters too (#1128,
+ * #1135), so a search is one listing request rather than a second query merged
+ * into it. That is what keeps a search's failure loud, its pages continuable
+ * and its loading state its own — a separate search query had none of the
+ * three, so an expired session read as "no matches", "Load more" did nothing,
+ * and a cached listing flashed the empty state.
+ */
+import { flaggedFilterConfig, formatErrorMessage, MessageListPane, } from "@remit/ui";
+import { useCallback, useMemo, useState } from "react";
+import { useIsDesktop } from "../../hooks/useMediaQuery";
+import { useSearchTokenContext } from "../../hooks/useSearchTokenContext";
+import { useStarredThreads, useStarredUnreadCount, } from "../../hooks/useStarredThreads";
+import { matchesSearchTokens, toThreadRowData } from "../../lib/brief";
+import { buildBugReportContext, buildGitHubIssueUrl, } from "../../lib/bug-report";
+import { flaggedCriteria } from "../../lib/flagged-criteria";
+import { useListHeaderChrome } from "../../lib/list-header-chrome";
+import { listNarrowing } from "../../lib/list-narrowing";
+import { useMailContext } from "../../lib/mail-context";
+import { rowToSearchResult } from "../../lib/search-result";
+import { parseSearchTokens } from "../../lib/search-tokens";
+import { dedupeByThread } from "../../lib/starred-rows";
+import { wizardSelectionFrom } from "../../lib/wizard-selection";
+import { useSelectionWizard } from "../../routing";
+import { MailViewChrome } from "./MailViewChrome";
+import { MessageRow } from "./MessageRow";
+import { SelectionWizardHost } from "./SelectionWizardHost";
+import { ThreadListInteraction, ThreadListSelectionBar, useThreadListSelection, } from "./ThreadListInteraction";
+/**
+ * The wizard this view's verbs walk, and the one its search entry lands on.
+ *
+ * The bar's Delete and Mark read open it on the ticked rows, so a bulk action
+ * here is reviewed exactly as it is on the mailbox list. The list header also
+ * offers "make this a filter" wherever a search is active, and the step that
+ * affordance pushes has to be answered on the view that offered it — an
+ * affordance whose press lands on nothing is the dead button clause 1.7 exists
+ * to prevent. Starred spans accounts and mailboxes, so a rule made from the
+ * ticked rows has no single account to belong to; a rule made from the query
+ * belongs to the account the query names, which the host reads for itself.
+ */
+function StarredWizardHost({ rows, verb, }) {
+    const { selectedIds, exitSelection } = useThreadListSelection();
+    const selection = useMemo(() => wizardSelectionFrom(rows, selectedIds), [rows, selectedIds]);
+    return (_jsx(SelectionWizardHost, { verb: verb, selection: selection, selectionRestriction: "spansAccounts", onFinished: exitSelection }));
+}
+export function FlaggedList({ selectedMessageId, onOpenThread, commandsRef, onTriageContextChange, onDeleteMessages, }) {
+    const { searchQuery, resultFolderIndex, onSearchClearQuery } = useMailContext();
+    const tokenContext = useSearchTokenContext();
+    const isDesktop = useIsDesktop();
+    const wizard = useSelectionWizard();
+    const [selectedCategory, setSelectedCategory] = useState("all");
+    const [activeFilters, setActiveFilters] = useState(new Set());
+    const toggleFilter = useCallback((id) => {
+        setActiveFilters((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }, []);
+    const clearFilters = useCallback(() => {
+        setSelectedCategory("all");
+        setActiveFilters(new Set());
+    }, []);
+    // The empty state's way out has to clear everything its headline names, or
+    // it is a button that leaves the list exactly as narrowed as it found it.
+    const clearNarrowing = useCallback(() => {
+        clearFilters();
+        onSearchClearQuery();
+    }, [clearFilters, onSearchClearQuery]);
+    const { freeText: sq, tokens: queryTokens } = parseSearchTokens(searchQuery.trim().toLowerCase(), tokenContext);
+    // The same free text in the reader's own casing. The request's copy is folded
+    // to lowercase so equivalent searches share a cache entry; a sentence quoting
+    // the query back to the reader must not be.
+    const typedFreeText = parseSearchTokens(searchQuery.trim(), tokenContext).freeText;
+    // The chips and the tokens together, as query parameters: a category typed as
+    // `category:personal` narrows the request exactly as the chip does.
+    const { criteria, residual: residualTokens } = useMemo(() => flaggedCriteria({ category: selectedCategory, attributes: activeFilters }, queryTokens), [selectedCategory, activeFilters, queryTokens]);
+    const textCriteria = useMemo(() => (sq ? { ...criteria, query: sq } : criteria), [criteria, sq]);
+    // One request, free text included. The text is a parameter like every other
+    // criterion, so a search is this listing narrowed rather than a second query
+    // beside it — which is what gives a search the same error state, the same
+    // pagination and the same loading state as the unsearched list.
+    const { threads, isLoading, isError, error, refetch, fetchNextPage, hasNextPage, isFetchingNextPage, } = useStarredThreads(textCriteria);
+    const rows = useMemo(() => 
+    // What is left is what no parameter can carry: `before:`, `after:`,
+    // `in:`, `account:`, and a token the chips overruled.
+    dedupeByThread(threads)
+        .map(toThreadRowData)
+        .filter((t) => matchesSearchTokens(t, residualTokens)), [threads, residualTokens]);
+    const openRow = useCallback((id, options) => {
+        const threadId = rows.find((row) => row.id === id)?.threadId;
+        if (!threadId)
+            return;
+        onOpenThread?.({ threadId, messageId: id }, options);
+    }, [rows, onOpenThread]);
+    // The results panel; each result carries the thread it belongs to.
+    const openResult = useCallback((result) => {
+        const threadId = result.threadId ?? rows.find((row) => row.id === result.id)?.threadId;
+        if (!threadId)
+            return;
+        onOpenThread?.({ threadId, messageId: result.id });
+    }, [rows, onOpenThread]);
+    const preset = useMemo(() => flaggedFilterConfig(), []);
+    const searchResults = useMemo(() => rows.map((row) => rowToSearchResult(row, resultFolderIndex)), [rows, resultFolderIndex]);
+    // The server's count over the whole collection under the active criteria.
+    // `null` while it is in flight and `null` when it cannot be had, and the
+    // header then shows no number — never a page length dressed as a total.
+    const unreadCount = useStarredUnreadCount(textCriteria) ?? null;
+    // An empty list has to say how much was looked at, and the answer comes off
+    // the request. Every chip, the free text and every carried token is a field
+    // on the row, so the server answered each over the whole collection; only a
+    // residual token — a date, a mailbox, an account — saw the loaded pages.
+    //
+    // `is:starred` is dropped: this view is starred mail, so the token restates
+    // the collection rather than narrowing it.
+    const narrowingTokens = useMemo(() => queryTokens.filter((token) => token.type !== "isStarred"), [queryTokens]);
+    const listFilter = listNarrowing({
+        chips: { category: selectedCategory, attributes: activeFilters },
+        tokens: narrowingTokens,
+        reach: residualTokens.length > 0 ? "loaded-pages" : "whole-folder",
+        onClear: clearNarrowing,
+    });
+    const listState = isLoading
+        ? "loading"
+        : isError
+            ? "error"
+            : rows.length === 0
+                ? "empty"
+                : "ready";
+    const handleReportError = useCallback(() => {
+        const url = buildGitHubIssueUrl(buildBugReportContext());
+        window.open(url, "_blank", "noopener,noreferrer");
+    }, []);
+    const chrome = useListHeaderChrome();
+    const listBody = (_jsx("div", { className: "flex h-full min-h-0 flex-col", children: _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsx("div", { className: "divide-y divide-line", children: rows.map((thread) => (_jsx(MessageRow, { thread: thread, active: thread.id === selectedMessageId, onClick: () => openRow(thread.id) }, thread.id))) }), hasNextPage ? (_jsx("button", { type: "button", className: "w-full py-3 text-sm text-muted hover:text-fg disabled:opacity-50", onClick: () => fetchNextPage(), disabled: isFetchingNextPage, children: isFetchingNextPage ? "Loading…" : "Load more" })) : null] }) }));
+    return (_jsx(MailViewChrome, { title: "Starred", unreadCount: unreadCount, preset: preset, selectedCategory: selectedCategory, activeFilters: activeFilters, onSelectCategory: setSelectedCategory, onToggleFilter: toggleFilter, onClearFilters: clearFilters, searchResults: searchResults, searchLoading: isLoading, onSelectSearchResult: openResult, 
+        // A committed search renders in this view's own rows (`rows` already
+        // narrows to the query above), so the multi-select toolbar stays
+        // reachable exactly as it does on the mailbox route (#212). The
+        // results panel stays for the typing/uncommitted state only.
+        searchResultsInBody: true, children: _jsxs(ThreadListInteraction, { selectedMessageId: selectedMessageId, rows: rows, onOpen: openRow, onDeleteMessages: onDeleteMessages, onSelectionVerb: wizard.start, commandsRef: commandsRef, onTriageContextChange: onTriageContextChange, children: [_jsx(MessageListPane, { listTitle: "Starred", sections: [{ id: "flagged", threads: rows }], flatList: true, hideHeader: true, listState: chrome.searchResults ? "ready" : listState, listFilter: listFilter, 
+                    // Flagged spans accounts and folders, so it is a collection and
+                    // never "this mailbox". It names itself.
+                    listScopeLabel: "Starred", 
+                    // The typed tokens narrow the list too, but `listFilter` already
+                    // names them, and a headline saying one narrowing twice reads as two.
+                    searchQuery: typedFreeText || undefined, errorMessage: isError ? formatErrorMessage(error) : undefined, onRetry: () => refetch(), onReportError: handleReportError, selectedThreadId: selectedMessageId, onSelectThread: openRow, isDesktop: isDesktop, selectionBar: _jsx(ThreadListSelectionBar, { title: "Starred" }), listBody: chrome.searchResults ??
+                        (listState === "ready" ? listBody : undefined) }), _jsx(StarredWizardHost, { rows: rows, verb: wizard.verb })] }) }));
+}

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

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import { type OpenThreadPath } from "../../routing";
+interface FlaggedPaneProps {
+    /** The open conversation, as the address states it. */
+    thread: OpenThreadPath | undefined;
+    children: ReactNode;
+}
+declare function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps): import("react").JSX.Element;
+/** Flat starred list. Mount in the `list` slot of `AppShellSlotted`. */
+declare function FlaggedListSlot(): import("react").JSX.Element;
+/**
+ * Reading pane: toolbar + ConversationView.
+ * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
+ */
+declare function FlaggedReading(): import("react").JSX.Element;
+/**
+ * Intelligence pane: IntelligencePane for the open thread.
+ * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
+ */
+declare function FlaggedIntelligence(): import("react").JSX.Element;
+/** Phone view: ConversationView when a thread is open, else the flat list. */
+declare function FlaggedPhone(): import("react").JSX.Element;
+declare const FlaggedPane: typeof FlaggedPaneProvider & {
+    List: typeof FlaggedListSlot;
+    Reading: typeof FlaggedReading;
+    Intelligence: typeof FlaggedIntelligence;
+    Phone: typeof FlaggedPhone;
+};
+export { FlaggedPane };