@remit/web-client 0.0.325 → 0.0.327

package/dist/src/routes/settings/filters.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { configOperationsGetConfigOptions, mailboxOperationsListMailboxesOptions, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ErrorState, SettingsShell } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useCallback, useMemo, useState } from "react";
+import { FilterActionError } from "../../components/settings/FilterActionError";
+import { FilterEditorSurface } from "../../components/settings/FilterEditorSurface";
+import { FiltersList } from "../../components/settings/FiltersList";
+import { useDeleteFilter, useFilterList, useToggleFilter, } from "../../hooks/useFilters";
+import { useFolderLabelTranslator } from "../../hooks/useFolderLabelTranslator";
+import { useLabelList } from "../../hooks/useLabels";
+import { useOrganizeJob } from "../../hooks/useOrganizeJob";
+import { filterRunReportHref, filterToggleReportHref, } from "../../lib/filter-report";
+import { buildMailboxRoleMap, labelForMailbox } from "../../lib/folder-roles";
+import { buildMoveOptions, folderDelimiter } from "../../lib/move-options";
+import { filterRunStatus } from "../../lib/organize/filter-run";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+export const Route = createFileRoute("/settings/filters")({
+    component: FiltersSettings,
+});
+const filtersHelp = (_jsxs("div", { className: "space-y-3", children: [_jsxs("p", { children: ["Filters are the standing rules Organize creates. A", " ", _jsx("strong", { children: "Standing" }), " filter keeps working on new mail; a", " ", _jsx("strong", { children: "Temporary" }), " one stops on its own at the date you picked."] }), _jsx("p", { children: "An expired filter isn't deleted the instant it lapses \u2014 it stays here, marked Expired, so you can see what it did and when it stopped." }), _jsx("p", { children: "A filter that can't do its job turns itself off and says why, for example when its folder no longer exists. Turn it back on once that is fixed." })] }));
+export function AccountFilters({ account, }) {
+    const accountId = account.accountId;
+    const { filters, isPending, isError, error, refetch } = useFilterList(accountId);
+    const { deleteFilter, deletingFilterId } = useDeleteFilter(accountId);
+    const toggle = useToggleFilter(accountId);
+    const run = useOrganizeJob(accountId);
+    const { startForFilter } = run;
+    const [runFilterId, setRunFilterId] = useState();
+    const runNow = useCallback((filterId) => {
+        setRunFilterId(filterId);
+        startForFilter(filterId);
+    }, [startForFilter]);
+    const runStatus = filterRunStatus(run);
+    const [editingFilterId, setEditingFilterId] = useState();
+    const { data: mailboxesData } = useQuery({
+        ...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+        staleTime: Infinity,
+    });
+    const translator = useFolderLabelTranslator();
+    const roleMap = useMemo(() => buildMailboxRoleMap(account.folderAppointments), [account.folderAppointments]);
+    const mailboxName = useCallback((mailboxId) => {
+        const mailbox = mailboxesData?.items.find((item) => item.mailboxId === mailboxId);
+        if (!mailbox)
+            return undefined;
+        return labelForMailbox(mailbox, roleMap.get(mailboxId), translator);
+    }, [mailboxesData?.items, roleMap, translator]);
+    const folders = useMemo(() => buildMoveOptions({
+        mailboxes: mailboxesData?.items ?? [],
+        folderAppointments: account.folderAppointments,
+        translator,
+    }), [mailboxesData?.items, account.folderAppointments, translator]);
+    const delimiter = folderDelimiter(mailboxesData?.items ?? []);
+    const { labels: labelItems } = useLabelList(accountId);
+    const labels = useMemo(() => labelItems.map((label) => ({
+        id: label.labelId,
+        name: label.name,
+        color: label.color,
+    })), [labelItems]);
+    const labelById = useMemo(() => new Map(labels.map((label) => [label.id, label])), [labels]);
+    const editingFilter = filters.find((filter) => filter.filterId === editingFilterId);
+    const runName = filters.find((filter) => filter.filterId === runFilterId)?.name;
+    return (_jsxs("section", { className: "space-y-2", children: [_jsx("h2", { className: "text-sm font-semibold text-fg", children: account.email }), editingFilter && (_jsx(FilterEditorSurface, { accountId: accountId, filter: editingFilter, folders: folders, delimiter: delimiter, labels: labels, onClose: () => setEditingFilterId(undefined) })), isPending ? (
+            // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+            _jsx("div", { className: "h-16 animate-pulse rounded-md border border-line bg-surface", "aria-busy": "true", "aria-label": `Loading filters for ${account.email}` })) : isError ? (_jsx(ErrorState, { variant: "inline", title: `Couldn't load filters for ${account.email}`, error: error, onRetry: () => {
+                    refetch();
+                } })) : (_jsxs(_Fragment, { children: [toggle.isError && (_jsx(FilterActionError, { title: toggle.enabling
+                            ? "Couldn't turn the filter on"
+                            : "Couldn't turn the filter off", error: toggle.error, onRetry: toggle.retry, reportHref: filterToggleReportHref })), runFilterId && runStatus?.kind === "failed" && (_jsx(FilterActionError, { title: `Couldn't run ${runName ?? "the filter"} over the inbox`, error: runStatus.error, onRetry: run.failure?.kind === "statusUnreadable"
+                            ? run.refreshStatus
+                            : () => runNow(runFilterId), reportHref: filterRunReportHref })), _jsx(FiltersList, { filters: filters, mailboxName: mailboxName, labelById: labelById, onEdit: setEditingFilterId, onDelete: deleteFilter, deletingFilterId: deletingFilterId, onToggle: toggle.toggleFilter, togglingFilterId: toggle.togglingFilterId, onRunNow: runNow, runFilterId: runFilterId, runStatus: runStatus })] }))] }));
+}
+function FiltersSettings() {
+    const navigate = useNavigate();
+    const [helpOpen, setHelpOpen] = useState(true);
+    const { data: config, isPending, isError, error, refetch, } = useQuery(configOperationsGetConfigOptions());
+    const handleSelectNav = (id) => {
+        const path = SETTINGS_ID_TO_PATH[id];
+        if (path)
+            void navigate({ to: path });
+    };
+    return (_jsx(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "filters", title: "Filters", description: "Standing and temporary rules created by Organize, per account.", help: filtersHelp, helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((v) => !v), onSelect: handleSelectNav, onBackToMail: () => void navigate({ to: "/mail" }), children: isPending ? (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+        _jsx("div", { className: "h-24 animate-pulse rounded-sm border border-line bg-surface", "aria-busy": "true", "aria-label": "Loading accounts" })) : isError ? (_jsx(ErrorState, { title: "Couldn't load accounts", error: error, onRetry: () => {
+                refetch();
+            } })) : config.accounts.length === 0 ? (_jsx("p", { className: "py-12 text-sm text-fg-muted", children: "No accounts configured." })) : (_jsx("div", { className: "space-y-8", children: config.accounts.map((account) => (_jsx(AccountFilters, { account: account }, account.accountId))) })) }));
+}

package/dist/src/routes/settings/folders.d.ts

@@ -0,0 +1 @@
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/react-router").RootRoute<import("@tanstack/react-router").Register, undefined, import("../../router").RouterContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/settings", "/settings", "/settings", "/settings", undefined, import("@tanstack/router-core").ResolveParams<"/settings">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/folders", "/settings/folders", "/settings/folders", "/settings/folders", undefined, import("@tanstack/router-core").ResolveParams<"/folders">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;

package/dist/src/routes/settings/folders.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { configOperationsGetConfigOptions, configOperationsGetConfigQueryKey, folderRoleOperationsAppointFolderRoleMutation, mailboxDetailOperationsRenameMailboxMutation, mailboxOperationsListMailboxesOptions, mailboxOperationsListMailboxesQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Banner, ErrorState, FolderManager, FolderRenameDialog, FolderRolesHelp, RoleAppointmentList, SettingsShell, } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useMemo, useState } from "react";
+import { DeleteFolderDialog } from "../../components/settings/DeleteFolderDialog";
+import { isMailboxNotSettledRefusal } from "../../components/ui/folder-role-refusal";
+import { useCreateMailbox } from "../../hooks/useCreateMailbox";
+import { useFolderLabelTranslator } from "../../hooks/useFolderLabelTranslator";
+import { guardFolderDeletion } from "../../lib/delete-folder";
+import { softErrorStatuses } from "../../lib/error-classifier";
+import { folderFailure } from "../../lib/folder-failure";
+import { buildMailboxRoleMap, CANONICAL_TO_NAV_ROLE, labelForMailbox, NAV_ROLE_TO_CANONICAL, } from "../../lib/folder-roles";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+export const Route = createFileRoute("/settings/folders")({
+    component: FoldersSettings,
+});
+/** One account's folder roles and its folder hierarchy. Owns its own queries + mutations. */
+function AccountFolders({ account }) {
+    const queryClient = useQueryClient();
+    const accountId = account.accountId;
+    const translator = useFolderLabelTranslator();
+    const { data, isPending, isError, error, refetch } = useQuery(mailboxOperationsListMailboxesOptions({ path: { accountId } }));
+    const { createFolderIn } = useCreateMailbox(accountId);
+    const appointMutation = useMutation({
+        ...folderRoleOperationsAppointFolderRoleMutation(),
+        // The pane states a still-settling mailbox inline; see the same meta on
+        // the prompt's own write.
+        meta: softErrorStatuses(409),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: configOperationsGetConfigQueryKey(),
+            });
+        },
+    });
+    const renameMutation = useMutation({
+        ...mailboxDetailOperationsRenameMailboxMutation(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: mailboxOperationsListMailboxesQueryKey({
+                    path: { accountId },
+                }),
+            });
+        },
+    });
+    const [deletingMailboxId, setDeletingMailboxId] = useState();
+    const [renamingMailboxId, setRenamingMailboxId] = useState();
+    const [renameDraft, setRenameDraft] = useState("");
+    const mailboxes = useMemo(() => data?.items ?? [], [data]);
+    const roleMap = useMemo(() => buildMailboxRoleMap(account.folderAppointments), [account.folderAppointments]);
+    const folders = useMemo(() => mailboxes.map((mailbox) => ({
+        id: mailbox.mailboxId,
+        label: labelForMailbox(mailbox, roleMap.get(mailbox.mailboxId), translator),
+        path: mailbox.fullPath,
+        deleteBlockedReason: guardFolderDeletion(mailbox, mailboxes, account.folderAppointments).message,
+        failure: folderFailure(mailbox),
+    })), [mailboxes, roleMap, translator, account.folderAppointments]);
+    const handleAppoint = (role, mailboxId) => {
+        appointMutation.mutate({
+            path: { accountId, role: NAV_ROLE_TO_CANONICAL[role] },
+            body: { mailboxId },
+        });
+    };
+    const handleRename = (mailboxId, name) => {
+        const trimmed = name.trim();
+        renameMutation.mutate({
+            path: { accountId, mailboxId },
+            body: { displayNameOverride: trimmed === "" ? null : trimmed },
+        });
+    };
+    if (isPending) {
+        return (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+        _jsx("div", { className: "h-24 animate-pulse rounded-sm border border-line bg-surface", "aria-busy": "true", "aria-label": `Loading folders for ${account.email}` }));
+    }
+    if (isError) {
+        return (_jsx(ErrorState, { variant: "inline", title: `Couldn't load folders for ${account.email}`, error: error, onRetry: () => {
+                refetch();
+            } }));
+    }
+    const candidates = mailboxes.map((mailbox) => ({
+        mailboxId: mailbox.mailboxId,
+        providerPath: mailbox.fullPath,
+        hierarchyDelimiter: mailbox.hierarchyDelimiter,
+        messageCount: mailbox.messageCount,
+    }));
+    const appointments = {};
+    for (const appointment of account.folderAppointments) {
+        const role = CANONICAL_TO_NAV_ROLE[appointment.role];
+        if (!role)
+            continue;
+        appointments[role] = {
+            mailboxId: appointment.mailboxId ?? null,
+            source: appointment.source,
+            staleFolderPath: appointment.staleAppointmentPath,
+        };
+    }
+    const displayNames = {};
+    for (const mailbox of mailboxes) {
+        if (mailbox.displayNameOverride) {
+            displayNames[mailbox.mailboxId] = mailbox.displayNameOverride;
+        }
+    }
+    const findMailbox = (mailboxId) => mailboxes.find((mailbox) => mailbox.mailboxId === mailboxId);
+    const renaming = findMailbox(renamingMailboxId);
+    const deleting = findMailbox(deletingMailboxId);
+    return (_jsxs("div", { className: "space-y-4", children: [(appointMutation.isError || renameMutation.isError) && (_jsx(Banner, { tone: "danger", variant: "soft", children: isMailboxNotSettledRefusal(appointMutation.error)
+                    ? "That folder is still being created on the mail server — wait for it to finish, then try again."
+                    : "Couldn't save that change. Please try again." })), _jsx(RoleAppointmentList, { accountEmail: account.email, folders: candidates, appointments: appointments, displayNames: displayNames, onAppoint: handleAppoint, onRename: handleRename }), _jsxs("section", { className: "space-y-1.5", children: [_jsxs("h3", { className: "text-sm font-semibold text-fg", children: ["Your folders \u2014 ", account.email] }), _jsx("div", { className: "flex h-[28rem] flex-col overflow-hidden rounded-sm border border-line bg-surface", children: _jsx(FolderManager, { folders: folders, delimiter: mailboxes[0]?.hierarchyDelimiter ?? "/", onCreateFolder: createFolderIn, onRename: (folder) => {
+                                setRenamingMailboxId(folder.id);
+                                setRenameDraft(findMailbox(folder.id)?.displayNameOverride?.trim() ?? "");
+                            }, onDelete: (folder) => setDeletingMailboxId(folder.id), labels: { treeAriaLabel: `All folders for ${account.email}` } }) })] }), renaming && (_jsx(FolderRenameDialog, { open: true, folderLabel: labelForMailbox(renaming, roleMap.get(renaming.mailboxId), translator), defaultLabel: labelForMailbox({
+                    fullPath: renaming.fullPath,
+                    hierarchyDelimiter: renaming.hierarchyDelimiter,
+                }, roleMap.get(renaming.mailboxId), translator), name: renameDraft, onNameChange: setRenameDraft, pending: renameMutation.isPending, error: renameMutation.isError
+                    ? "Couldn't save that name. Please try again."
+                    : undefined, onSubmit: () => {
+                    const trimmed = renameDraft.trim();
+                    renameMutation.mutate({
+                        path: { accountId, mailboxId: renaming.mailboxId },
+                        body: {
+                            displayNameOverride: trimmed === "" ? null : trimmed,
+                        },
+                    }, { onSuccess: () => setRenamingMailboxId(undefined) });
+                }, onClose: () => setRenamingMailboxId(undefined) })), deleting && (_jsx(DeleteFolderDialog, { open: true, accountId: accountId, folder: deleting, mailboxes: mailboxes, appointments: account.folderAppointments, onClose: () => setDeletingMailboxId(undefined) }))] }));
+}
+function FoldersSettings() {
+    const navigate = useNavigate();
+    const [helpOpen, setHelpOpen] = useState(true);
+    const { data: config, isPending, isError, error, refetch, } = useQuery(configOperationsGetConfigOptions());
+    const handleSelectNav = (id) => {
+        const path = SETTINGS_ID_TO_PATH[id];
+        if (path)
+            void navigate({ to: path });
+    };
+    return (_jsx(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "folders", title: "Folder roles", description: "Appoint which real folder fills each canonical role, per account.", help: _jsx(FolderRolesHelp, {}), helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((v) => !v), onSelect: handleSelectNav, onBackToMail: () => void navigate({ to: "/mail" }), children: isPending ? (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+        _jsx("div", { className: "h-24 animate-pulse rounded-sm border border-line bg-surface", "aria-busy": "true", "aria-label": "Loading accounts" })) : isError ? (_jsx(ErrorState, { title: "Couldn't load accounts", error: error, onRetry: () => {
+                refetch();
+            } })) : config.accounts.length === 0 ? (_jsx("p", { className: "py-12 text-sm text-fg-muted", children: "No accounts configured." })) : (_jsx("div", { className: "space-y-8", children: config.accounts.map((account) => (_jsx(AccountFolders, { account: account }, account.accountId))) })) }));
+}

package/dist/src/routes/settings/index.d.ts

@@ -0,0 +1 @@
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/react-router").RootRoute<import("@tanstack/react-router").Register, undefined, import("../../router").RouterContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/settings", "/settings", "/settings", "/settings", undefined, import("@tanstack/router-core").ResolveParams<"/settings">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/", "/settings/", "/settings/", "/settings/", undefined, import("@tanstack/router-core").ResolveParams<"/">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;

package/dist/src/routes/settings/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createFileRoute, Navigate } from "@tanstack/react-router";
+export const Route = createFileRoute("/settings/")({
+    component: () => _jsx(Navigate, { to: "/settings/accounts" }),
+});

package/dist/src/routes/settings/labels.d.ts

@@ -0,0 +1 @@
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/react-router").RootRoute<import("@tanstack/react-router").Register, undefined, import("../../router").RouterContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/settings", "/settings", "/settings", "/settings", undefined, import("@tanstack/router-core").ResolveParams<"/settings">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/labels", "/settings/labels", "/settings/labels", "/settings/labels", undefined, import("@tanstack/router-core").ResolveParams<"/labels">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;

package/dist/src/routes/settings/labels.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Banner, Button, ConfirmDialog, ErrorState, Input, labelColorOptions, Select, SettingsShell, } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { LabelsList } from "../../components/settings/LabelsList";
+import { useCreateLabel, useDeleteLabel, useLabelList, useUpdateLabel, } from "../../hooks/useLabels";
+import { deleteLabelConfirmCopy } from "../../lib/organize/label-delete-copy";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+export const Route = createFileRoute("/settings/labels")({
+    component: LabelsSettings,
+});
+const labelsHelp = (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { children: "Labels mark mail without moving it \u2014 a message can carry any number of them alongside whichever folder it lives in." }), _jsx("p", { children: "Use a label in a filter's action to have new (and existing) mail label itself automatically, or apply one to a selection directly from the mailbox." }), _jsx("p", { children: "Deleting a label removes it from every message, and deletes every filter that applies it \u2014 the confirmation names how many." })] }));
+/** Create a label for one account. A name, a color, and a create button. */
+function NewLabel({ accountId }) {
+    const { createLabel, isPending, isError } = useCreateLabel(accountId);
+    const [name, setName] = useState("");
+    const [color, setColor] = useState("Default");
+    const handleCreate = () => {
+        const trimmed = name.trim();
+        if (trimmed === "")
+            return;
+        createLabel(trimmed, color).then(() => {
+            setName("");
+            setColor("Default");
+        });
+    };
+    return (_jsxs("div", { className: "space-y-2 rounded-sm border border-line bg-surface p-3", children: [_jsx("p", { className: "text-sm font-medium text-fg", children: "New label" }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-end", children: [_jsxs("div", { className: "flex-1 space-y-1", children: [_jsx("span", { className: "text-xs text-fg-muted", children: "Name" }), _jsx(Input, { value: name, onChange: (event) => setName(event.target.value), placeholder: "e.g. Receipts", "aria-label": "Label name", onKeyDown: (event) => {
+                                    if (event.key === "Enter") {
+                                        event.preventDefault();
+                                        handleCreate();
+                                    }
+                                } })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-xs text-fg-muted", children: "Color" }), _jsx(Select, { value: color, onChange: (event) => setColor(event.target.value), "aria-label": "Label color", className: "w-28", children: labelColorOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }), _jsx(Button, { variant: "primary", onClick: handleCreate, disabled: isPending || name.trim() === "", children: isPending ? "Creating…" : "Create label" })] }), isError && (_jsx(Banner, { tone: "danger", variant: "soft", children: "Couldn't create that label. Please try again." }))] }));
+}
+function AccountLabels({ account }) {
+    const accountId = account.accountId;
+    const { labels, isPending, isError, error, refetch } = useLabelList(accountId);
+    const { updateLabel } = useUpdateLabel(accountId);
+    const { deleteLabel, deletingLabelId } = useDeleteLabel(accountId);
+    const [pendingDelete, setPendingDelete] = useState();
+    return (_jsxs("section", { className: "space-y-2", children: [_jsx("h2", { className: "text-sm font-semibold text-fg", children: account.email }), isPending ? (
+            // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+            _jsx("div", { className: "h-16 animate-pulse rounded-md border border-line bg-surface", "aria-busy": "true", "aria-label": `Loading labels for ${account.email}` })) : isError ? (_jsx(ErrorState, { variant: "inline", title: `Couldn't load labels for ${account.email}`, error: error, onRetry: () => {
+                    refetch();
+                } })) : (_jsx(LabelsList, { labels: labels, onRename: (labelId, name) => updateLabel(labelId, { name }), onRecolor: (labelId, color) => updateLabel(labelId, {
+                    color: color,
+                }), onDelete: setPendingDelete, deletingLabelId: deletingLabelId })), _jsx(NewLabel, { accountId: accountId }), pendingDelete &&
+                (() => {
+                    const copy = deleteLabelConfirmCopy(pendingDelete.name, pendingDelete.filterCount);
+                    return (_jsx(ConfirmDialog, { isOpen: true, title: copy.title, description: copy.description, confirmLabel: "Delete label", destructive: true, isBusy: deletingLabelId === pendingDelete.labelId, onConfirm: () => {
+                            deleteLabel(pendingDelete.labelId);
+                            setPendingDelete(undefined);
+                        }, onCancel: () => setPendingDelete(undefined) }));
+                })()] }));
+}
+function LabelsSettings() {
+    const navigate = useNavigate();
+    const [helpOpen, setHelpOpen] = useState(true);
+    const { data: config, isPending, isError, error, refetch, } = useQuery(configOperationsGetConfigOptions());
+    const handleSelectNav = (id) => {
+        const path = SETTINGS_ID_TO_PATH[id];
+        if (path)
+            void navigate({ to: path });
+    };
+    return (_jsx(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "labels", title: "Labels", description: "Mark mail without moving it, per account.", help: labelsHelp, helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((v) => !v), onSelect: handleSelectNav, onBackToMail: () => void navigate({ to: "/mail" }), children: isPending ? (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
+        _jsx("div", { className: "h-24 animate-pulse rounded-sm border border-line bg-surface", "aria-busy": "true", "aria-label": "Loading accounts" })) : isError ? (_jsx(ErrorState, { title: "Couldn't load accounts", error: error, onRetry: () => {
+                refetch();
+            } })) : config.accounts.length === 0 ? (_jsx("p", { className: "py-12 text-sm text-fg-muted", children: "No accounts configured." })) : (_jsx("div", { className: "space-y-8", children: config.accounts.map((account) => (_jsx(AccountLabels, { account: account }, account.accountId))) })) }));
+}

package/dist/src/routes/settings/senders.d.ts

@@ -0,0 +1,6 @@
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/react-router").RootRoute<import("@tanstack/react-router").Register, undefined, import("../../router").RouterContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/settings", "/settings", "/settings", "/settings", undefined, import("@tanstack/router-core").ResolveParams<"/settings">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/senders", "/settings/senders", "/settings/senders", "/settings/senders", undefined, import("@tanstack/router-core").ResolveParams<"/senders">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
+export declare function SearchGroupPane({ group, query, onCount, }: {
+    group: "muted" | "blocked";
+    query: string;
+    onCount?: (matched: number, total: number | null) => void;
+}): import("react").JSX.Element;

package/dist/src/routes/settings/senders.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Senders & Rules — 2-pane page: rule groups left, dense filterable
+ * sender table right. Built to scale to hundreds of flagged senders.
+ *
+ * Backend gap (#427): there is no "list all addresses with flag X" endpoint.
+ * VIP group: served from GET /me/vip-suggestions (suggested-to-promote list).
+ * Muted / Blocked groups: users search by name/email to find flagged senders
+ * via GET /addresses/search; results are filtered client-side on the flag.
+ * The real flagged-address query endpoint is tracked as a backend issue.
+ */
+import { addressDetailOperationsUpdateAddressMutation, addressOperationsSearchAddressesOptions, meOperationsListVipSuggestionsOptions, meOperationsListVipSuggestionsQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Button, ErrorState, Input, Kbd, SenderFlagRow, SenderGroupSwitch, SettingsShell, } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { Search, Star, X } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { useDebouncedValue } from "../../hooks/useDebouncedValue";
+import { formatDate } from "../../lib/format";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+import { sendersHelp } from "./-shared/help-copy";
+export const Route = createFileRoute("/settings/senders")({
+    component: SendersSettings,
+});
+const groupLabels = {
+    vip: "VIPs",
+    muted: "Muted",
+    blocked: "Blocked",
+};
+/* ------------------------------------------------------------------ */
+/* VIP group: served from suggestions endpoint                        */
+/* ------------------------------------------------------------------ */
+function VipGroupPane({ query, onCount, }) {
+    const { data, isPending, isError, error } = useQuery(meOperationsListVipSuggestionsOptions());
+    const queryClient = useQueryClient();
+    const addMutation = useMutation({
+        ...addressDetailOperationsUpdateAddressMutation(),
+        onSettled: () => {
+            queryClient.invalidateQueries({
+                queryKey: meOperationsListVipSuggestionsQueryKey(),
+            });
+        },
+    });
+    const suggestions = data?.suggestions ?? [];
+    const q = query.trim().toLowerCase();
+    const filtered = q
+        ? suggestions.filter((s) => (s.displayName ?? "").toLowerCase().includes(q) ||
+            s.normalizedEmail.toLowerCase().includes(q))
+        : suggestions;
+    useEffect(() => {
+        onCount?.(filtered.length, suggestions.length);
+    }, [onCount, filtered.length, suggestions.length]);
+    if (isPending) {
+        return (_jsx("div", { className: "px-row-inset py-3 text-sm text-fg-subtle animate-pulse", children: "Loading VIP suggestions\u2026" }));
+    }
+    if (isError) {
+        return (_jsx("div", { className: "px-row-inset py-3", children: _jsx(ErrorState, { variant: "inline", title: "Couldn't load VIP suggestions", error: error }) }));
+    }
+    if (suggestions.length === 0) {
+        return (_jsxs("div", { className: "px-row-inset py-5 text-sm text-fg-subtle", children: ["No VIP suggestions yet. As you reply to senders, they'll appear here. Press ", _jsx(Kbd, { children: "v" }), " on any message to promote a sender to VIP."] }));
+    }
+    if (filtered.length === 0) {
+        return (_jsxs("p", { className: "px-row-inset py-5 text-sm text-fg-subtle", children: ["No VIPs match \u201C", query, "\u201D."] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-row-inset py-1 text-2xs font-semibold uppercase tracking-wider text-fg-subtle", children: "Suggested \u2014 promote to VIP" }), filtered.map((s) => (_jsx(SenderFlagRow, { name: s.displayName ?? s.normalizedEmail, email: s.normalizedEmail, meta: s.replyCount > 0
+                    ? `${s.inboundCount} received · you replied ${s.replyCount}×`
+                    : `${s.inboundCount} received · you've never replied`, trailing: _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(Star, { className: "size-3.5" }), "aria-busy": addMutation.isPending, onClick: () => {
+                        if (addMutation.isPending)
+                            return;
+                        addMutation.mutate({
+                            path: { addressId: s.addressId },
+                            body: {
+                                flags: {
+                                    vip: { value: true, setAt: Date.now(), setBy: "user" },
+                                },
+                            },
+                        });
+                    }, children: "Add VIP" }) }, s.addressId)))] }));
+}
+/* ------------------------------------------------------------------ */
+/* Muted / Blocked groups: search-based (backend gap noted)           */
+/* ------------------------------------------------------------------ */
+export function SearchGroupPane({ group, query, onCount, }) {
+    const debouncedQ = useDebouncedValue(query.trim(), 300);
+    const queryClient = useQueryClient();
+    const [retryId, setRetryId] = useState(null);
+    const enabled = debouncedQ.length >= 2;
+    const searchOptions = addressOperationsSearchAddressesOptions({
+        query: { q: debouncedQ, limit: 50 },
+    });
+    const { data, isPending, isError, error } = useQuery({
+        ...searchOptions,
+        enabled,
+    });
+    const removeMutation = useMutation({
+        ...addressDetailOperationsUpdateAddressMutation(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: searchOptions.queryKey });
+        },
+    });
+    const items = (data?.items ?? []).filter((a) => group === "muted"
+        ? (a.flags?.muted?.value ?? false)
+        : (a.flags?.blocked?.value ?? false));
+    useEffect(() => {
+        // Total flagged count is unknown (no list-all-flagged endpoint), so the
+        // group rail shows the live matched-row count while a search is active.
+        onCount?.(enabled ? items.length : 0, null);
+    }, [onCount, enabled, items.length]);
+    if (!enabled) {
+        // Backend gap: no list-all-flagged endpoint; prompt user to search.
+        return (_jsxs("div", { className: "px-row-inset py-5 text-sm text-fg-subtle space-y-2", children: [_jsxs("p", { children: ["Type 2+ characters to search ", groupLabels[group].toLowerCase(), " ", "senders by name or address."] }), _jsxs("p", { className: "text-2xs text-fg-subtle", children: ["Note: a dedicated flagged-address list endpoint is in the backlog. Press ", _jsx(Kbd, { children: "m" }), " on any message to mute its sender; ", _jsx(Kbd, { children: "b" }), " to block."] })] }));
+    }
+    if (isPending) {
+        return (_jsx("div", { className: "px-row-inset py-3 text-sm text-fg-subtle animate-pulse", children: "Searching\u2026" }));
+    }
+    if (isError) {
+        return (_jsx("div", { className: "px-row-inset py-3", children: _jsx(ErrorState, { variant: "inline", title: "Search failed", error: error }) }));
+    }
+    if (items.length === 0) {
+        return (_jsxs("p", { className: "px-row-inset py-5 text-sm text-fg-subtle", children: ["No ", groupLabels[group].toLowerCase(), " senders matching \u201C", debouncedQ, "\u201D."] }));
+    }
+    return (_jsx(_Fragment, { children: items.map((a) => {
+            const flag = group === "muted" ? a.flags?.muted : a.flags?.blocked;
+            // The search response carries no engagement counts, so the row's
+            // info line is the flag provenance (when/why it was flagged)
+            // rather than echoing the email already in the header.
+            const meta = flag
+                ? [
+                    `${group}`,
+                    flag.setAt
+                        ? formatDate(flag.setAt, {
+                            month: "short",
+                            year: "numeric",
+                        }) || null
+                        : null,
+                    flag.reason ? `— ${flag.reason}` : null,
+                ]
+                    .filter(Boolean)
+                    .join(" ")
+                : group;
+            const isPendingRemove = removeMutation.isPending &&
+                removeMutation.variables?.path.addressId === a.addressId;
+            const isFailedRemove = removeMutation.isError && retryId === a.addressId;
+            return (_jsx(SenderFlagRow, { name: a.displayName ?? a.normalizedEmail, email: a.normalizedEmail, danger: group === "blocked", meta: meta, trailing: isFailedRemove ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
+                        setRetryId(a.addressId);
+                        removeMutation.mutate({
+                            path: { addressId: a.addressId },
+                            body: {
+                                flags: { [group]: { value: false, setAt: Date.now() } },
+                            },
+                        });
+                    }, children: "Retry" })) : (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(X, { className: "size-3.5" }), "aria-busy": isPendingRemove, "aria-label": `Remove ${group} flag`, onClick: () => {
+                        if (isPendingRemove)
+                            return;
+                        setRetryId(a.addressId);
+                        removeMutation.mutate({
+                            path: { addressId: a.addressId },
+                            body: {
+                                flags: { [group]: { value: false, setAt: Date.now() } },
+                            },
+                        });
+                    } })) }, a.addressId));
+        }) }));
+}
+/* ------------------------------------------------------------------ */
+/* Page component                                                     */
+/* ------------------------------------------------------------------ */
+function SendersSettings() {
+    const navigate = useNavigate();
+    const [group, setGroup] = useState("vip");
+    const [query, setQuery] = useState("");
+    const [helpOpen, setHelpOpen] = useState(true);
+    // Per-group counts for the rail + footer. VIP total is the suggestions
+    // list size; muted/blocked have no list endpoint, so their total is null
+    // (the rail shows the live matched-row count instead of a stale total).
+    const [matched, setMatched] = useState(0);
+    const [groupCounts, setGroupCounts] = useState({ vip: 0, muted: null, blocked: null });
+    const handleVipCount = useCallback((m, total) => {
+        setMatched(m);
+        setGroupCounts((prev) => ({ ...prev, vip: total }));
+    }, []);
+    const handleSearchCount = useCallback((m, _total) => {
+        setMatched(m);
+        setGroupCounts((prev) => ({ ...prev, [group]: m }));
+    }, [group]);
+    const total = groupCounts[group];
+    const handleSelectNav = (id) => {
+        const path = SETTINGS_ID_TO_PATH[id];
+        if (path)
+            void navigate({ to: path });
+    };
+    return (_jsx(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "senders", title: "Senders & Rules", description: "Per-sender preferences \u2014 set with one key from any message, managed here.", flush: true, help: sendersHelp, helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((v) => !v), onSelect: handleSelectNav, onBackToMail: () => void navigate({ to: "/mail" }), children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [_jsx(SenderGroupSwitch, { active: group, onSelect: (g) => {
+                        setGroup(g);
+                        setQuery("");
+                    }, options: ["vip", "muted", "blocked"].map((g) => ({
+                        id: g,
+                        label: groupLabels[g],
+                        count: groupCounts[g],
+                    })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("div", { className: "border-b border-line px-row-inset py-2", children: _jsx(Input, { icon: _jsx(Search, { className: "size-4" }), placeholder: `Filter ${groupLabels[group].toLowerCase()} by name or address`, className: "h-8 max-w-sm", value: query, onChange: (e) => setQuery(e.target.value) }) }), _jsx("div", { className: "min-h-0 flex-1 divide-y divide-line overflow-y-auto", children: group === "vip" ? (_jsx(VipGroupPane, { query: query, onCount: handleVipCount })) : (_jsx(SearchGroupPane, { group: group, query: query, onCount: handleSearchCount })) }), _jsxs("footer", { className: "flex items-center justify-between border-t border-line px-row-inset py-1 text-2xs text-fg-subtle", children: [_jsx("span", { children: total != null
+                                        ? `${matched} of ${total} flagged senders`
+                                        : `${matched} flagged senders` }), _jsxs("span", { children: [_jsx(Kbd, { children: "j" }), " ", _jsx(Kbd, { children: "k" }), " navigate \u00B7 ", _jsx(Kbd, { children: "\u232B" }), " remove flag"] })] })] })] }) }));
+}

package/dist/src/routes/settings/suggested-vips.d.ts

@@ -0,0 +1 @@
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/react-router").RootRoute<import("@tanstack/react-router").Register, undefined, import("../../router").RouterContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/settings", "/settings", "/settings", "/settings", undefined, import("@tanstack/router-core").ResolveParams<"/settings">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/suggested-vips", "/settings/suggested-vips", "/settings/suggested-vips", "/settings/suggested-vips", undefined, import("@tanstack/router-core").ResolveParams<"/suggested-vips">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;

package/dist/src/routes/settings/suggested-vips.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Suggested VIPs — now folded into Senders & Rules (VIP group).
+ * This route redirects to /settings/senders so existing deep links
+ * and smoke test paths continue to resolve gracefully.
+ */
+import { createFileRoute, Navigate } from "@tanstack/react-router";
+export const Route = createFileRoute("/settings/suggested-vips")({
+    component: () => _jsx(Navigate, { to: "/settings/senders", replace: true }),
+});

package/dist/src/routes/settings/warnings.d.ts

@@ -0,0 +1 @@
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/react-router").RootRoute<import("@tanstack/react-router").Register, undefined, import("../../router").RouterContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/settings", "/settings", "/settings", "/settings", undefined, import("@tanstack/router-core").ResolveParams<"/settings">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/warnings", "/settings/warnings", "/settings/warnings", "/settings/warnings", undefined, import("@tanstack/router-core").ResolveParams<"/warnings">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;

package/dist/src/routes/settings/warnings.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SettingsShell } from "@remit/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { WarningsPanel } from "../../components/settings/WarningsPanel";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+import { warningsHelp } from "./-shared/help-copy";
+export const Route = createFileRoute("/settings/warnings")({
+    component: WarningsSettings,
+});
+function WarningsSettings() {
+    const navigate = useNavigate();
+    const [helpOpen, setHelpOpen] = useState(true);
+    const handleSelectNav = (id) => {
+        const path = SETTINGS_ID_TO_PATH[id];
+        if (path)
+            void navigate({ to: path });
+    };
+    return (_jsx(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "warnings", title: "Warnings", description: "Messages that failed to sync, and messages set aside.", help: warningsHelp, helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((v) => !v), onSelect: handleSelectNav, onBackToMail: () => void navigate({ to: "/mail" }), children: _jsx(WarningsPanel, {}) }));
+}

package/dist/src/routes/settings.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Settings layout route — a pass-through Outlet. Each child page
+ * (`/settings/accounts`, `/settings/senders`, …) renders its own
+ * full-viewport `SettingsShell` from @remit/ui, exactly as the
+ * approved Storybook stories do. This route only provides the route
+ * boundary; no layout chrome lives here.
+ *
+ * Shared nav items and helpers are exported so every child page imports
+ * them from this file, keeping a single source of truth for nav shape.
+ */
+import type { SettingsNavItem } from "@remit/ui";
+export declare const SETTINGS_NAV_ITEMS: SettingsNavItem[];
+export declare const SETTINGS_ID_TO_PATH: Record<string, string>;
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, import("@tanstack/react-router").RootRoute<import("@tanstack/react-router").Register, undefined, import("../router").RouterContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/settings", "/settings", "/settings", "/settings", undefined, import("@tanstack/router-core").ResolveParams<"/settings">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;