@remit/web-client 0.0.325 → 0.0.326

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

@@ -0,0 +1,396 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { accountDetailOperationsDeleteAccountMutation, configOperationsGetConfigOptions, configOperationsGetConfigQueryKey, microsoftOAuthOperationsMicrosoftOAuthStartMutation, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ACCOUNT_SERVICE_ROWS, AccountHealthCard, Badge, Banner, Button, Dialog, ErrorState, RowActions, SettingsShell, } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { AlertTriangle, Loader2, Plus, Trash2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { z } from "zod";
+import { OnboardingWizard, } from "../../components/onboarding/OnboardingWizard";
+import { AccountFormPanel } from "../../components/settings/AccountFormPanel";
+import { AccountServices } from "../../components/settings/AccountServices";
+import { DangerZone } from "../../components/settings/DangerZone";
+import { REDIRECT_STALL_MESSAGE, useRedirectEnded, } from "../../hooks/useRedirectEnded";
+import { useReturnFromRedirect } from "../../hooks/useReturnFromRedirect";
+import { formatRelativeTime } from "../../lib/format";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+import { accountsHelp } from "./-shared/help-copy";
+const accountsSearchSchema = z.object({
+    editAccountId: z.string().optional(),
+    focusSmtp: z.boolean().optional(),
+    /** Set by the backend redirect after a successful OAuth callback */
+    connected: z.string().optional(),
+    /** Set by the backend redirect when the OAuth flow fails */
+    oauthError: z.string().optional(),
+    oauthEmail: z.string().optional(),
+    missingServices: z.string().optional(),
+});
+export const Route = createFileRoute("/settings/accounts")({
+    component: AccountsSettings,
+    validateSearch: accountsSearchSchema,
+});
+/* ------------------------------------------------------------------ */
+/* Helpers                                                            */
+/* ------------------------------------------------------------------ */
+/**
+ * Map an OAuth error code from the `?oauthError` query param to a
+ * human-readable message shown to the user.
+ *
+ * Exported for unit tests.
+ */
+export function mapOauthError(code) {
+    const lower = code.toLowerCase();
+    if (lower === "access_denied") {
+        return "You cancelled the sign-in.";
+    }
+    if (lower === "scope_not_granted") {
+        return "Microsoft did not grant access to every service you picked. Sign in again and accept each permission Microsoft asks for.";
+    }
+    if (lower === "consent_required" ||
+        lower.includes("admin_consent") ||
+        lower.includes("interaction_required")) {
+        return "Your organisation's admin needs to approve Remit. Ask your IT admin to grant the required permissions.";
+    }
+    // IMAP disabled hint — the backend surfaces this when XOAUTH2 login
+    // fails because IMAP is not enabled in the Microsoft 365 tenant settings.
+    if (lower.includes("imap_disabled") || lower.includes("imap disabled")) {
+        return "IMAP is disabled for this account. Ask your admin to enable IMAP access in the Microsoft 365 admin centre.";
+    }
+    return `Sign-in failed: ${code}. Please try again.`;
+}
+const joinServices = (labels) => labels.length > 1
+    ? `${labels.slice(0, -1).join(", ")} and ${labels[labels.length - 1]}`
+    : (labels[0] ?? "");
+export function scopeRefusalReturn(refusal, accounts) {
+    const named = (refusal.missingServices ?? "").split(",");
+    const missing = ACCOUNT_SERVICE_ROWS.filter((row) => named.includes(row.id));
+    const email = refusal.oauthEmail;
+    const existing = email
+        ? accounts.find((account) => account.authType === "oauthMicrosoft" &&
+            account.email.toLowerCase() === email.toLowerCase())
+        : undefined;
+    const labels = joinServices(missing.map((row) => row.label));
+    const message = missing.length === 0
+        ? mapOauthError("scope_not_granted")
+        : `Microsoft did not grant access to ${labels}. Sign in again and accept the ${labels} ${missing.length > 1 ? "permissions" : "permission"} when Microsoft asks.`;
+    const services = existing
+        ? ACCOUNT_SERVICE_ROWS.filter((row) => existing.syncedServices.includes(row.id) ||
+            missing.some((service) => service.id === row.id)).map((row) => row.id)
+        : undefined;
+    return { kind: "refused", message, email, services, reconnect: !!existing };
+}
+/**
+ * Derive a friendly primary label from the email's local part so
+ * AccountHealthCard doesn't print the same address twice (label primary, email
+ * secondary). Falls back to the full email if the local part is empty.
+ */
+function deriveLabel(email) {
+    const local = email.split("@")[0] ?? "";
+    if (!local)
+        return email;
+    return local
+        .split(/[._-]+/)
+        .filter(Boolean)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ");
+}
+/**
+ * The user-chosen display name when set, otherwise a label derived from the
+ * email address.
+ */
+function accountLabel(account) {
+    const name = account.displayName?.trim();
+    if (name)
+        return name;
+    return deriveLabel(account.email);
+}
+function deriveSyncLabel(account) {
+    if (!account.lastSyncAt)
+        return "never synced";
+    const relative = formatRelativeTime(account.lastSyncAt);
+    return relative ? `synced ${relative}` : "never synced";
+}
+function deriveState(account) {
+    if (account.muted?.value)
+        return "muted";
+    if (account.lastError)
+        return "error";
+    if (account.connectionState === "authenticated")
+        return "healthy";
+    return "error";
+}
+/** True when the account needs re-authentication via the OAuth flow. */
+function needsReauth(account) {
+    return account.connectionState === "reauth_required";
+}
+/**
+ * The account arrived from a config file, which never carries a password, so it
+ * has none yet (#1021). It cannot sync until someone enters one, and the import
+ * wizard's "Finish later" leaves exactly these rows behind — so this screen has
+ * to offer the same way in, or the account is stranded with a red dot and no
+ * control that fixes it.
+ */
+function needsPassword(account) {
+    return account.connectionState === "credentials_missing";
+}
+/* ------------------------------------------------------------------ */
+/* Loading skeleton                                                   */
+/* ------------------------------------------------------------------ */
+const LoadingSkeleton = () => (
+// biome-ignore lint/a11y/useSemanticElements: <div> with role="status" preserves block layout; <output> is inline
+_jsx("div", { className: "space-y-3", role: "status", "aria-busy": "true", "aria-label": "Loading accounts", children: ["skeleton-0", "skeleton-1"].map((key) => (_jsx("div", { className: "rounded-sm border border-line bg-surface animate-pulse p-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "size-10 rounded-full bg-surface-sunken" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("div", { className: "h-4 bg-surface-sunken rounded w-1/3" }), _jsx("div", { className: "h-3 bg-surface-sunken rounded w-2/3" })] })] }) }, key))) }));
+/* ------------------------------------------------------------------ */
+/* Page component                                                     */
+/* ------------------------------------------------------------------ */
+function AccountsSettings() {
+    const search = Route.useSearch();
+    const navigate = useNavigate({ from: Route.fullPath });
+    const [helpOpen, setHelpOpen] = useState(true);
+    const [showForm, setShowForm] = useState(false);
+    const [showAddWizard, setShowAddWizard] = useState(false);
+    const [microsoftReturn, setMicrosoftReturn] = useState(undefined);
+    const [editingAccountId, setEditingAccountId] = useState(null);
+    const [focusSmtp, setFocusSmtp] = useState(false);
+    const [deletingAccountId, setDeletingAccountId] = useState(null);
+    /** Success message shown after a successful OAuth callback */
+    const [successMessage, setSuccessMessage] = useState(null);
+    /** Error message shown when the OAuth flow returned an error */
+    const [oauthErrorMessage, setOauthErrorMessage] = useState(null);
+    /** Which account is currently being reconnected via OAuth */
+    const [reconnectingAccountId, setReconnectingAccountId] = useState(null);
+    const queryClient = useQueryClient();
+    const { data: config, isPending, isError, error, refetch, } = useQuery(configOperationsGetConfigOptions());
+    // Handle ?editAccountId deep-link
+    useEffect(() => {
+        if (!search.editAccountId)
+            return;
+        setEditingAccountId(search.editAccountId);
+        setFocusSmtp(!!search.focusSmtp);
+        navigate({
+            search: {
+                editAccountId: undefined,
+                focusSmtp: undefined,
+                connected: search.connected,
+                oauthError: search.oauthError,
+                oauthEmail: search.oauthEmail,
+                missingServices: search.missingServices,
+            },
+            replace: true,
+        });
+    }, [
+        search.editAccountId,
+        search.focusSmtp,
+        navigate,
+        search.connected,
+        search.oauthError,
+        search.oauthEmail,
+        search.missingServices,
+    ]);
+    // Handle ?connected — show what Microsoft granted, clear param
+    useEffect(() => {
+        if (!search.connected)
+            return;
+        setMicrosoftReturn({ kind: "connected", accountId: search.connected });
+        setShowAddWizard(true);
+        queryClient.invalidateQueries({
+            queryKey: configOperationsGetConfigQueryKey(),
+        });
+        navigate({
+            search: {
+                connected: undefined,
+                oauthError: undefined,
+                editAccountId: undefined,
+                focusSmtp: undefined,
+            },
+            replace: true,
+        });
+    }, [search.connected, navigate, queryClient]);
+    // Handle ?oauthError — show human-readable error, clear param
+    useEffect(() => {
+        if (!search.oauthError)
+            return;
+        const refusedScope = search.oauthError === "scope_not_granted";
+        if (refusedScope && !config && !isError)
+            return;
+        setReconnectingAccountId(null);
+        if (refusedScope) {
+            setMicrosoftReturn(scopeRefusalReturn({
+                oauthEmail: search.oauthEmail,
+                missingServices: search.missingServices,
+            }, config?.accounts ?? []));
+            setShowAddWizard(true);
+        }
+        else {
+            setOauthErrorMessage(mapOauthError(search.oauthError));
+        }
+        navigate({
+            search: {
+                oauthError: undefined,
+                connected: undefined,
+                editAccountId: undefined,
+                focusSmtp: undefined,
+            },
+            replace: true,
+        });
+    }, [
+        search.oauthError,
+        search.oauthEmail,
+        search.missingServices,
+        config,
+        isError,
+        navigate,
+    ]);
+    // Microsoft may hand the finished sign-in back to a different window than the
+    // one that started it, so a reconnect can complete without this page ever
+    // seeing the callback. Once one has been sent off, every look at this window
+    // re-reads the accounts, and the card states what the server says rather
+    // than what this window last saw.
+    useReturnFromRedirect(reconnectingAccountId !== null, () => {
+        queryClient.invalidateQueries({
+            queryKey: configOperationsGetConfigQueryKey(),
+        });
+    });
+    // The account no longer asking to be re-authenticated is the reconnect
+    // landing, wherever it was finished, and that is what the watch above was
+    // waiting for. A muted or otherwise unhealthy account still counts: the
+    // reconnect answered, whatever else is true of the account.
+    // An account that has left the config entirely ends it too: there is nothing
+    // left to reconnect and nothing left to watch for.
+    useEffect(() => {
+        if (!reconnectingAccountId || !config)
+            return;
+        const account = config.accounts.find((candidate) => candidate.accountId === reconnectingAccountId);
+        if (!account || !needsReauth(account))
+            setReconnectingAccountId(null);
+    }, [config, reconnectingAccountId]);
+    // A redirect that ends without the reconnect landing — Back out of the
+    // consent screen, or an `assign` that never navigates — leaves an account
+    // that still asks to be re-authenticated, so the watch above has nothing to
+    // clear the latch on and the button would read "Redirecting…" for good. This
+    // window being back is the evidence the redirect is over, whatever it
+    // decided, and the control it left behind is live again. A redirect that
+    // never took the window has no such evidence coming, so the stall says so
+    // rather than handing back a button that looks like nothing happened.
+    const markReconnectStarted = useRedirectEnded((end) => {
+        setReconnectingAccountId(null);
+        if (end === "stalled")
+            setOauthErrorMessage(REDIRECT_STALL_MESSAGE);
+    });
+    const reconnectMutation = useMutation({
+        ...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
+        onSuccess: (data) => {
+            markReconnectStarted();
+            window.location.assign(data.authorizationUrl);
+        },
+        onError: (err) => {
+            setOauthErrorMessage(err instanceof Error ? err.message : "Failed to start reconnect");
+            setReconnectingAccountId(null);
+        },
+    });
+    const deleteMutation = useMutation({
+        ...accountDetailOperationsDeleteAccountMutation(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: configOperationsGetConfigQueryKey(),
+            });
+            setDeletingAccountId(null);
+        },
+    });
+    const accountToDelete = config?.accounts.find((a) => a.accountId === deletingAccountId);
+    const accountToEdit = config?.accounts.find((a) => a.accountId === editingAccountId);
+    const handleClosePanel = () => {
+        setShowForm(false);
+        setShowAddWizard(false);
+        setEditingAccountId(null);
+        setFocusSmtp(false);
+    };
+    const handleSelectNav = (id) => {
+        const path = SETTINGS_ID_TO_PATH[id];
+        if (path)
+            void navigate({ to: path });
+    };
+    return (_jsxs(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "accounts", title: "Accounts", description: "Every account keeps syncing \u2014 muted ones just stay out of unified views.", help: accountsHelp, helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((v) => !v), onSelect: handleSelectNav, onBackToMail: () => void navigate({ to: "/mail" }), children: [successMessage && (_jsx(Banner, { tone: "success", variant: "soft", "data-testid": "oauth-success-banner", onDismiss: () => setSuccessMessage(null), children: successMessage })), oauthErrorMessage && (_jsx(Banner, { tone: "danger", variant: "soft", "data-testid": "oauth-error-banner", onDismiss: () => setOauthErrorMessage(null), children: oauthErrorMessage })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Badge, { tone: "neutral", children: isPending || isError
+                            ? "accounts"
+                            : `${config.accounts.length} ${config.accounts.length === 1 ? "account" : "accounts"}` }), _jsx(Button, { variant: "primary", size: "sm", icon: _jsx(Plus, { className: "size-3.5" }), onClick: () => setShowAddWizard(true), children: "Add account" })] }), isPending ? (_jsx(LoadingSkeleton, {})) : isError ? (_jsx(ErrorState, { title: "Couldn't load accounts", error: error, onRetry: () => {
+                    refetch();
+                } })) : config.accounts.length === 0 ? (_jsxs("div", { className: "py-12 text-sm text-fg-muted", "data-testid": "accounts-empty", children: [_jsx("p", { className: "mb-3", children: "No accounts configured." }), _jsx(Button, { variant: "primary", size: "sm", icon: _jsx(Plus, { className: "size-3.5" }), onClick: () => setShowAddWizard(true), children: "Add your first account" })] })) : (_jsx("div", { className: "space-y-3", children: config.accounts.map((account) => {
+                    const isReauth = needsReauth(account);
+                    const isMissingPassword = needsPassword(account);
+                    const isOAuthAccount = account.authType === "oauthMicrosoft";
+                    // The mutation settling does not mean the window has gone anywhere:
+                    // `assign` leaves the page here while the browser fetches Microsoft's
+                    // page. The busy state rides the latch instead, which only clears on
+                    // evidence — the server saying the account no longer needs re-auth,
+                    // or the start call failing.
+                    const isReconnecting = reconnectingAccountId === account.accountId;
+                    const primaryAction = isReauth && isOAuthAccount
+                        ? {
+                            label: "Reconnect",
+                            variant: "secondary",
+                            busy: isReconnecting,
+                            busyLabel: "Redirecting…",
+                            onClick: () => {
+                                setReconnectingAccountId(account.accountId);
+                                reconnectMutation.mutate({
+                                    body: {
+                                        email: account.email,
+                                        services: account.syncedServices,
+                                    },
+                                });
+                            },
+                        }
+                        : isMissingPassword
+                            ? {
+                                label: "Enter password",
+                                variant: "secondary",
+                                onClick: () => setEditingAccountId(account.accountId),
+                            }
+                            : deriveState(account) === "error"
+                                ? {
+                                    label: "Reconnect",
+                                    variant: "secondary",
+                                    onClick: () => setEditingAccountId(account.accountId),
+                                }
+                                : {
+                                    label: "Manage",
+                                    variant: "ghost",
+                                    onClick: () => setEditingAccountId(account.accountId),
+                                };
+                    const trailingButton = (_jsx(RowActions, { actions: [primaryAction], destructive: {
+                            label: "Delete account",
+                            iconOnly: true,
+                            icon: _jsx(Trash2, { className: "size-3.5" }),
+                            onClick: () => setDeletingAccountId(account.accountId),
+                        } }));
+                    return (_jsxs("div", { className: "space-y-2", children: [_jsx(AccountHealthCard, { label: accountLabel(account), email: account.email, connector: isOAuthAccount ? "Microsoft 365" : "IMAP", syncLabel: deriveSyncLabel(account), state: deriveState(account), 
+                                // What the mail server said, when it said anything. Not every
+                                // refusal that fences an account is one the Reconnect button
+                                // clears — "SmtpClientAuthentication is disabled" is a tenant
+                                // setting — so the stored reason outranks the generic prompt.
+                                errorDetail: isReauth
+                                    ? (account.lastError ?? "Re-authentication required")
+                                    : isMissingPassword
+                                        ? "Imported from a config file, which carries no password. Enter one to start syncing."
+                                        : account.lastError, trailing: trailingButton }), _jsx(AccountServices, { account: account, onRemoveAccount: () => setDeletingAccountId(account.accountId) })] }, account.accountId));
+                }) })), showAddWizard && (_jsx("div", { className: "fixed inset-0 z-40 overflow-auto bg-canvas", children: _jsx(OnboardingWizard, { skipWelcome: true, microsoftReturn: microsoftReturn, onComplete: () => {
+                        if (microsoftReturn?.kind === "connected") {
+                            setSuccessMessage("Account connected successfully.");
+                        }
+                        setShowAddWizard(false);
+                        setMicrosoftReturn(undefined);
+                        queryClient.invalidateQueries({
+                            queryKey: configOperationsGetConfigQueryKey(),
+                        });
+                    }, onCancel: () => {
+                        setShowAddWizard(false);
+                        setMicrosoftReturn(undefined);
+                    } }) })), _jsx(AccountFormPanel, { isOpen: showForm || !!editingAccountId, account: accountToEdit, focusSmtp: focusSmtp, onClose: handleClosePanel }), _jsxs(Dialog, { open: !!deletingAccountId, onClose: () => setDeletingAccountId(null), title: "Delete account", children: [_jsxs("header", { className: "flex items-center gap-2 border-b border-line px-5 py-3", children: [_jsx(AlertTriangle, { className: "size-4 shrink-0 text-danger" }), _jsx("span", { className: "flex-1 text-sm font-semibold text-fg", children: "Delete account" }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(X, { className: "size-3.5" }), onClick: () => setDeletingAccountId(null), "aria-label": "Cancel" })] }), _jsxs("div", { className: "space-y-3 px-5 py-4 text-sm text-fg-muted", children: [_jsx("p", { className: "text-center text-lg font-medium text-fg", children: "Are you sure?" }), accountToDelete && (_jsx("p", { className: "text-center", children: accountToDelete.email })), _jsxs("ul", { className: "list-inside list-disc space-y-1", children: [_jsx("li", { children: "Remove the account from your settings" }), _jsx("li", { children: "Stop syncing mail for this account" }), _jsx("li", { children: "Delete all associated data (within 24 hours)" })] })] }), _jsxs("footer", { className: "flex items-center justify-end gap-2 border-t border-line px-5 py-3", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: () => setDeletingAccountId(null), children: "Cancel" }), _jsx(Button, { variant: "danger", size: "sm", "aria-busy": deleteMutation.isPending, icon: deleteMutation.isPending ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : undefined, onClick: () => {
+                                    if (deleteMutation.isPending)
+                                        return;
+                                    if (deletingAccountId) {
+                                        deleteMutation.mutate({
+                                            path: { accountId: deletingAccountId },
+                                        });
+                                    }
+                                }, children: deleteMutation.isPending ? "Deleting…" : "Delete account" })] })] }), _jsx(DangerZone, {})] }));
+}

package/dist/src/routes/settings/advanced.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>, "/advanced", "/settings/advanced", "/settings/advanced", "/settings/advanced", undefined, import("@tanstack/router-core").ResolveParams<"/advanced">, 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/advanced.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Advanced settings. Updates live here — and only here — with a full pane in
+ * Settings › Advanced. Notification rules and export are future scope.
+ */
+import { SettingsShell } from "@remit/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { ConfigTransferPanel } from "../../components/settings/ConfigTransferPanel";
+import { SelfUpdatePanel } from "../../components/settings/SelfUpdatePanel";
+import { TlsRootCaDownload } from "../../components/settings/TlsRootCaDownload";
+import { AppVersion } from "../../components/ui/AppVersion";
+import { getRuntimeConfig } from "../../runtime-config";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+import { advancedHelp } from "./-shared/help-copy";
+export const Route = createFileRoute("/settings/advanced")({
+    component: AdvancedSettings,
+});
+function AdvancedSettings() {
+    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 (_jsxs(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "advanced", title: "Advanced", description: "Notification rules, export, and diagnostics.", help: advancedHelp, helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((v) => !v), onSelect: handleSelectNav, onBackToMail: () => void navigate({ to: "/mail" }), children: [getRuntimeConfig().updateMode === "self" && _jsx(SelfUpdatePanel, {}), _jsx("div", { className: "mt-6 border-t border-line pt-4", children: _jsx(ConfigTransferPanel, {}) }), _jsx("div", { className: "mt-6 border-t border-line pt-4", children: _jsx("p", { className: "text-sm text-fg-muted", children: "Notification rules are coming in a future release." }) }), _jsx(TlsRootCaDownload, {}), _jsxs("div", { className: "border-t border-line pt-4 mt-4", children: [_jsx("p", { className: "text-sm font-medium text-fg mb-1", children: "About" }), _jsx(AppVersion, {})] })] }));
+}

package/dist/src/routes/settings/appearance.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>, "/appearance", "/settings/appearance", "/settings/appearance", "/settings/appearance", undefined, import("@tanstack/router-core").ResolveParams<"/appearance">, 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/appearance.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Appearance settings — density and theme.
+ * Instant-apply, no save button. Both settings persist in localStorage.
+ *
+ * Theme is driven by theme-preference.ts (setThemePreference /
+ * getThemePreference) so the same preference that boots from theme.ts
+ * is the one the picker shows and changes.
+ */
+import { SegmentedControl, SettingsShell } from "@remit/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { getThemePreference, setThemePreference, } from "../../lib/theme-preference";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+import { appearanceHelp } from "./-shared/help-copy";
+export const Route = createFileRoute("/settings/appearance")({
+    component: AppearanceSettings,
+});
+/* ------------------------------------------------------------------ */
+/* Density helpers (local-only until user-preference storage exists)  */
+/* ------------------------------------------------------------------ */
+const DENSITY_KEY = "remit.density";
+function readDensity() {
+    if (typeof localStorage === "undefined")
+        return "comfortable";
+    return localStorage.getItem(DENSITY_KEY) ?? "comfortable";
+}
+/* ------------------------------------------------------------------ */
+/* Page component                                                     */
+/* ------------------------------------------------------------------ */
+function AppearanceSettings() {
+    const navigate = useNavigate();
+    const [helpOpen, setHelpOpen] = useState(true);
+    const [density, setDensity] = useState(readDensity);
+    // Read the current stored preference so the picker reflects the boot-time value
+    const [theme, setTheme] = useState(getThemePreference);
+    const handleDensity = (value) => {
+        setDensity(value);
+        // Density is read by the mail list from the same localStorage key
+        if (typeof localStorage !== "undefined") {
+            localStorage.setItem(DENSITY_KEY, value);
+        }
+    };
+    const handleTheme = (value) => {
+        setTheme(value);
+        setThemePreference(value); // persists + applies immediately
+    };
+    const handleSelectNav = (id) => {
+        const path = SETTINGS_ID_TO_PATH[id];
+        if (path)
+            void navigate({ to: path });
+    };
+    return (_jsx(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "appearance", title: "Appearance", description: "Display density and colour theme \u2014 instant-apply.", help: appearanceHelp, helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((v) => !v), onSelect: handleSelectNav, onBackToMail: () => void navigate({ to: "/mail" }), children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-fg", children: "Density" }), _jsx(SegmentedControl, { name: "density", "aria-label": "Density", value: density, onChange: handleDensity, options: [
+                                { value: "comfortable", label: "Comfortable" },
+                                { value: "compact", label: "Compact" },
+                            ] }), _jsx("p", { className: "text-xs text-fg-subtle", children: "Controls the spacing of message rows in the mail list." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-fg", children: "Theme" }), _jsx(SegmentedControl, { name: "theme", "aria-label": "Theme", value: theme, onChange: handleTheme, options: [
+                                { value: "system", label: "System" },
+                                { value: "light", label: "Light" },
+                                { value: "dark", label: "Dark" },
+                            ] }), _jsx("p", { className: "text-xs text-fg-subtle", children: "Applies immediately. System default follows your OS preference." })] })] }) }));
+}

package/dist/src/routes/settings/calendars.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>, "/calendars", "/settings/calendars", "/settings/calendars", "/settings/calendars", undefined, import("@tanstack/router-core").ResolveParams<"/calendars">, 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/calendars.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SettingsShell } from "@remit/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { CalendarCreateCard } from "../../components/settings/CalendarCreateCard";
+import { CalendarSettingsPanel } from "../../components/settings/CalendarSettingsPanel";
+import { CalendarSubscribeCard } from "../../components/settings/CalendarSubscribeCard";
+import { CalendarSubscriptionStatus } from "../../components/settings/CalendarSubscriptionStatus";
+import { useCalendarCollectionWrites } from "../../hooks/calendar/useCalendarCollectionWrites";
+import { useCalendarSubscriptions } from "../../hooks/calendar/useCalendarSubscriptions";
+import { useCalendars } from "../../hooks/calendar/useCalendars";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "../settings";
+export const Route = createFileRoute("/settings/calendars")({
+    component: CalendarsSettings,
+});
+const calendarsHelp = (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { children: "Each calendar has a name, a time zone its floating times are read in, and an address CalDAV clients reach it by. The address is fixed when the calendar is added; the name and zone can change. Deleting a calendar deletes every event in it. The default calendar is where accepted invitations land, so it cannot be deleted." }), _jsx("p", { children: "A subscription address lets Apple Calendar, Google Calendar, Outlook and Thunderbird show a calendar from here, read-only and kept up to date." }), _jsx("p", { children: "Those clients never sign in, so the address itself is the credential. Anyone who has it can read the calendar; nobody who has it can change anything." }), _jsx("p", { children: "Only a hash of the address is stored, so it is shown once and cannot be looked up later. Replacing it breaks every subscription built on the old one, which is how a shared address is taken back." }), _jsx("p", { children: "Subscribing works the other way round: paste another calendar's iCal address and its events show here, read-only, refreshed on a schedule." })] }));
+function CalendarsSettings() {
+    const navigate = useNavigate();
+    const [helpOpen, setHelpOpen] = useState(true);
+    const { calendars, collections, timeZoneByCalendarId, isLoading } = useCalendars();
+    const subscriptions = useCalendarSubscriptions();
+    const { createCalendar, isWriting } = useCalendarCollectionWrites();
+    const [createProblem, setCreateProblem] = useState("");
+    return (_jsx(SettingsShell, { items: SETTINGS_NAV_ITEMS, activeId: "calendars", title: "Calendars", description: "Add, rename and delete calendars, subscribe to a calendar feed, and share one with any client that can subscribe to a URL.", help: calendarsHelp, helpOpen: helpOpen, onToggleHelp: () => setHelpOpen((open) => !open), onSelect: (id) => {
+            const path = SETTINGS_ID_TO_PATH[id];
+            if (path)
+                void navigate({ to: path });
+        }, onBackToMail: () => void navigate({ to: "/mail" }), children: isLoading ? (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on a loading skeleton is what assistive tech has to go on
+        _jsx("div", { className: "h-24 animate-pulse rounded-sm border border-line bg-surface", "aria-busy": "true", "aria-label": "Loading calendars" })) : (_jsxs("div", { className: "space-y-4", children: [calendars.map((calendar) => {
+                    const collection = collections.find((candidate) => candidate.calendarId === calendar.id);
+                    return (_jsx(CalendarSettingsPanel, { calendarId: calendar.id, calendarName: calendar.name, timezone: timeZoneByCalendarId[calendar.id] ?? "", subscription: collection?.source === "Subscribed" && (_jsx(CalendarSubscriptionStatus, { calendarName: collection.displayName, subscriptionUrl: collection.subscriptionUrl, enabled: collection.subscriptionEnabled, fetchedAt: collection.subscriptionFetchedAt, error: collection.subscriptionError, isBusy: subscriptions.togglingCalendarId === calendar.id, actionError: subscriptions.toggleFailure.calendarId === calendar.id
+                                ? subscriptions.toggleFailure.error
+                                : undefined, onSetEnabled: (enabled) => subscriptions.setEnabled(calendar.id, enabled) })) }, calendar.id));
+                }), _jsx(CalendarSubscribeCard, { isBusy: subscriptions.isSubscribing, error: subscriptions.subscribeError, onSubscribe: subscriptions.subscribe }), _jsx(CalendarCreateCard, { isBusy: isWriting, problem: createProblem, onCreate: (calendar) => {
+                        setCreateProblem("");
+                        return createCalendar(calendar).then((outcome) => {
+                            if (outcome.kind === "written")
+                                return true;
+                            setCreateProblem(outcome.message);
+                            return false;
+                        });
+                    } })] })) }));
+}

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

@@ -0,0 +1,5 @@
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+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>, "/filters", "/settings/filters", "/settings/filters", "/settings/filters", undefined, import("@tanstack/router-core").ResolveParams<"/filters">, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, import("@tanstack/router-core").AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
+export declare function AccountFilters({ account, }: {
+    account: RemitImapAccountResponse;
+}): import("react").JSX.Element;