@rapidmx/web-client 0.10.0 → 0.11.0

package/dist/apps/shared/components/mail/reading/viewOriginal.js

@@ -0,0 +1,32 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useCallback, useState } from "react";
+/** Messages the reader chose to see exactly as authored rather than adapted to the theme, for the life of the tab. */
+const original = new Set();
+/** Whether the reader asked to see `uid` as authored. */
+export function isViewedOriginal(uid) {
+    return original.has(uid);
+}
+/** Forgets every choice (the tests). */
+export function clearViewedOriginal() {
+    original.clear();
+}
+/**
+ * The per-message "View original" choice: `false` (follow the theme) until the reader flips it, then remembered for the session so
+ * collapsing and expanding a message, or coming back to it, keeps the choice.
+ */
+export function useViewOriginal(uid) {
+    const [value, setValue] = useState(() => isViewedOriginal(uid));
+    const update = useCallback((next) => {
+        if (next) {
+            original.add(uid);
+        }
+        else {
+            original.delete(uid);
+        }
+        setValue(next);
+    }, [uid]);
+    return [value, update];
+}

package/dist/apps/shared/components/settings/SigningCertificateCard.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { EnrollmentResult } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import type { EnrollmentSnapshot } from "../../signing/enrollmentTracker.js";
+import type { SigningEnrollmentInfo } from "../../signing/signingInfo.js";
+export type SigningCertificateMode = "pending" | "issued" | "failed" | "expired";
+export interface SigningCertificateCardProps {
+    mode: SigningCertificateMode;
+    /** What the server last said about the enrollment (the extended fields are all optional - an older server sends only `status`). */
+    enrollment: EnrollmentResult | null;
+    /** The tracker's view of it: busy flags, the check cooldown, the last check. Absent when nothing is being followed. */
+    snapshot?: EnrollmentSnapshot;
+    /** For an issued certificate when the enrollment carries no details (one installed long ago): the active key's own expiry (epoch ms). */
+    keyNotAfter?: number;
+    /** How this deployment issues certificates (`GET /system/signing-enrollment`): what a pending request says follows it. `null` / absent when it is not known. */
+    info?: SigningEnrollmentInfo | null;
+    /** The mailbox's address - the one the CA's verification e-mail goes to. */
+    address?: string;
+    /** Only the mailbox's owner can request a certificate. */
+    canRequest: boolean;
+    /** "Try again" / "Renew" / "Request a new certificate" is under way. */
+    requesting: boolean;
+    onCheck?: () => void;
+    onRequest?: () => void;
+}
+/**
+ * Settings > Encryption's "Digital signature certificate" card: where a signing-certificate enrollment is, in the words of the person waiting for
+ * it. A progress bar (determinate from the server's `progress`), the steps with a state icon and time each, a status line, when it was requested
+ * and last checked (kept current), and a "Check status" button with a busy state and a cooldown. An issued certificate shows its subject, issuer,
+ * serial (copyable) and expiry with a warning (and "Renew") inside 30 days; a failed one shows the reason and "Try again"; an expired one offers a
+ * new request. Everything but `mode` is optional so a server that only says `pending`/`issued`/`failed` still gets a useful card.
+ */
+export default function SigningCertificateCard({ mode, enrollment, snapshot, keyNotAfter, info, address, canRequest, requesting, onCheck, onRequest }: SigningCertificateCardProps): React.JSX.Element;

package/dist/apps/shared/components/settings/SigningCertificateCard.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { HiOutlineCheckCircle, HiOutlineExclamationTriangle, HiOutlineXCircle } from "react-icons/hi2";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
+import { CA_UNREACHABLE_TEXT, MANUAL_ISSUE_TEXT, PENDING_FALLBACK_TEXT, expiryOf, formatDate, formatDateTime, healthWarning, isInstalling, isOverdue, issueModeOf, progressOf, requestedFromText, relativeTime, statusLineOf, stepsOf, timeOf, truncateSerial, } from "../../signing/enrollmentView.js";
+import { useNow } from "../../signing/useNow.js";
+const BADGE = {
+    pending: { text: "Pending", className: "bg-primary/15 text-primary-dark" },
+    issued: { text: "Active", className: "bg-success/15 text-success" },
+    failed: { text: "Failed", className: "bg-danger/15 text-danger" },
+    expired: { text: "Expired", className: "bg-danger/15 text-danger" },
+};
+const STEP_TEXT = {
+    done: "done",
+    active: "in progress",
+    pending: "waiting",
+    failed: "failed",
+};
+function StepIcon({ state }) {
+    if (state === "done") {
+        return _jsx(HiOutlineCheckCircle, { size: 18, "aria-hidden": "true", className: "shrink-0 text-success" });
+    }
+    if (state === "failed") {
+        return _jsx(HiOutlineXCircle, { size: 18, "aria-hidden": "true", className: "shrink-0 text-danger" });
+    }
+    if (state === "active") {
+        return (_jsx("span", { "aria-hidden": "true", className: "flex h-[18px] w-[18px] shrink-0 items-center justify-center", children: _jsx("span", { className: "h-3.5 w-3.5 rounded-full border-2 border-primary/30 border-t-primary motion-safe:animate-spin motion-reduce:border-primary" }) }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", className: "flex h-[18px] w-[18px] shrink-0 items-center justify-center", children: _jsx("span", { className: "h-3 w-3 rounded-full border-2 border-border" }) }));
+}
+function Stepper({ steps }) {
+    return (_jsx("ol", { "aria-label": "Certificate steps", className: "flex flex-col gap-2", children: steps.map((step) => (_jsxs("li", { className: "flex items-start gap-2 text-sm", "aria-current": step.state === "active" ? "step" : undefined, children: [_jsx(StepIcon, { state: step.state }), _jsxs("span", { className: step.state === "pending" ? "text-text-muted" : "text-text", children: [step.label, _jsxs("span", { className: "sr-only", children: [" - ", STEP_TEXT[step.state]] })] }), step.at && _jsx("span", { className: "ml-auto shrink-0 text-xs text-text-muted", children: formatDateTime(step.at) })] }, step.id))) }));
+}
+/**
+ * The progress bar: determinate when the server says how far along it is, an endless shimmer while a step is active and no number is known.
+ * `role="progressbar"` with `aria-valuenow` (left off when unknown, as ARIA says for an indeterminate bar) and a `aria-valuetext` in words.
+ */
+function ProgressBar({ value, text }) {
+    return (_jsx("div", { role: "progressbar", "aria-label": "Certificate progress", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, "aria-valuetext": text, className: "h-2 w-full overflow-hidden rounded-pill bg-border/60", children: value === undefined ? (_jsx("div", { className: "rr-progress-indeterminate h-full w-1/3 rounded-pill bg-primary motion-reduce:w-full motion-reduce:opacity-40" })) : (_jsx("div", { className: "rr-progress-shimmer h-full rounded-pill bg-primary transition-[width] duration-500", style: { width: `${Math.max(value, value > 0 ? 3 : 0)}%` } })) }));
+}
+function Detail({ label, children }) {
+    return (_jsxs("div", { className: "grid grid-cols-[6.5rem_1fr] gap-2 text-sm sm:grid-cols-[8rem_1fr]", children: [_jsx("dt", { className: "text-text-muted", children: label }), _jsx("dd", { className: "min-w-0 break-words", children: children })] }));
+}
+/** The sentence under the button: what the last manual check found, or why it cannot be pressed again yet. */
+function checkMessage(snapshot, statusLine, now) {
+    if (snapshot?.offline) {
+        return "Could not reach the server - showing what was last known.";
+    }
+    const last = snapshot?.lastCheck;
+    if (!last) {
+        return undefined;
+    }
+    if (last.outcome === "failed") {
+        return "Could not check just now - try again in a moment.";
+    }
+    if (last.outcome === "limited") {
+        return "Checked a moment ago - please wait a few seconds before checking again.";
+    }
+    if (last.outcome === "changed") {
+        return `Updated - ${statusLine ?? "the status changed"}`;
+    }
+    return `Still waiting - checked ${relativeTime(last.at, now)}`;
+}
+/**
+ * Settings > Encryption's "Digital signature certificate" card: where a signing-certificate enrollment is, in the words of the person waiting for
+ * it. A progress bar (determinate from the server's `progress`), the steps with a state icon and time each, a status line, when it was requested
+ * and last checked (kept current), and a "Check status" button with a busy state and a cooldown. An issued certificate shows its subject, issuer,
+ * serial (copyable) and expiry with a warning (and "Renew") inside 30 days; a failed one shows the reason and "Try again"; an expired one offers a
+ * new request. Everything but `mode` is optional so a server that only says `pending`/`issued`/`failed` still gets a useful card.
+ */
+export default function SigningCertificateCard({ mode, enrollment, snapshot, keyNotAfter, info, address, canRequest, requesting, onCheck, onRequest }) {
+    const busy = mode === "pending" || (snapshot?.retryAt ?? 0) > Date.now();
+    const now = useNow(busy ? 1000 : 30000);
+    const steps = stepsOf(enrollment);
+    const progress = progressOf(enrollment);
+    const statusLine = statusLineOf(enrollment);
+    // Any of the newer fields gives a percentage (the server's, or the share of steps done), so this is "the server told us more than pending".
+    const detailed = progress !== undefined;
+    const badge = BADGE[mode];
+    // What the words say depends on how this deployment issues certificates: a public CA does it by itself, an administrator uploads it, or nobody has said.
+    const issueMode = issueModeOf(enrollment, info);
+    const problem = healthWarning(info);
+    const notAfter = enrollment?.notAfter ?? keyNotAfter;
+    const expiry = expiryOf(notAfter, now);
+    const requestedAgo = relativeTime(enrollment?.requestedAt, now);
+    const checkedAt = timeOf(enrollment?.lastCheckedAt) ?? snapshot?.answeredAt ?? undefined;
+    const checkedAgo = relativeTime(checkedAt, now);
+    const waitSeconds = Math.max(0, Math.ceil(((snapshot?.retryAt ?? 0) - now) / 1000));
+    const checkingNow = snapshot?.checkingNow ?? false;
+    const message = checkMessage(snapshot, statusLine, now);
+    const overdue = isOverdue(enrollment, now);
+    return (_jsxs("section", { "aria-label": "Digital signature certificate", className: "flex flex-col gap-3 rounded-md border border-border bg-surface p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Digital signature certificate" }), _jsx("span", { className: ["rounded-pill px-2 py-0.5 text-xs font-bold", badge.className].join(" "), children: badge.text })] }), mode === "pending" && (_jsxs(_Fragment, { children: [issueMode === "manual" ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: MANUAL_ISSUE_TEXT }), info?.contactEmail && _jsxs("p", { className: "text-xs text-text-muted", children: ["Administrator: ", info.contactEmail] })] })) : (_jsxs(_Fragment, { children: [issueMode === "automatic" && _jsx("p", { className: "text-sm text-text-muted", children: requestedFromText(info, address) }), detailed ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: statusLine ?? "In progress" }), _jsx(ProgressBar, { value: progress, text: `${progress} percent - ${statusLine ?? "in progress"}` })] })) : (_jsxs(_Fragment, { children: [_jsx(ProgressBar, { value: undefined, text: "In progress" }), issueMode === "unknown" && _jsx("p", { className: "text-sm text-text-muted", children: PENDING_FALLBACK_TEXT })] }))] })), problem && (_jsxs("div", { role: "alert", className: "flex items-start gap-2 rounded-sm border border-danger/40 bg-danger/10 px-3 py-2 text-sm", children: [_jsx(HiOutlineExclamationTriangle, { size: 18, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-danger" }), _jsx("span", { children: problem })] })), overdue && (_jsxs("p", { className: "text-sm", children: ["This is taking longer than expected", checkedAgo ? ` - last checked ${checkedAgo}` : "", ". Use Check status to ask again."] })), enrollment?.errorCode === "ca-unreachable" && _jsx("p", { className: "text-sm text-text-muted", children: CA_UNREACHABLE_TEXT }), enrollment?.note && _jsx("p", { className: "text-xs text-text-muted", children: enrollment.note }), steps.length > 0 && _jsx(Stepper, { steps: steps }), issueMode === "automatic" && (_jsx("p", { className: "text-xs text-text-muted", children: "You can leave this page - you will be told when the certificate is issued or the request fails." })), (requestedAgo || checkedAgo) && (_jsxs("p", { className: "text-xs text-text-muted", children: [requestedAgo ? `Requested ${issueMode === "manual" ? formatDateTime(enrollment?.requestedAt) : requestedAgo}` : "", requestedAgo && checkedAgo ? " - " : "", checkedAgo ? `last checked ${checkedAgo}` : ""] })), onCheck && (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: checkingNow, disabled: checkingNow || waitSeconds > 0, "aria-busy": checkingNow, onClick: onCheck, children: checkingNow ? "Checking..." : waitSeconds > 0 ? `Check again in ${waitSeconds} s` : "Check status" }), _jsx("span", { role: "status", "aria-live": "polite", className: "text-xs text-text-muted", children: message })] }))] })), mode === "issued" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: isInstalling(enrollment)
+                            ? statusLineOf(enrollment)
+                            : notAfter !== undefined
+                                ? `Issued - valid until ${formatDate(notAfter)}`
+                                : "Issued" }), enrollment?.note && _jsx("p", { className: "text-xs text-text-muted", children: enrollment.note }), expiry.state === "soon" && (_jsxs("div", { role: "alert", className: "flex items-start gap-2 rounded-sm border border-danger/40 bg-danger/10 px-3 py-2 text-sm", children: [_jsx(HiOutlineExclamationTriangle, { size: 18, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-danger" }), _jsxs("span", { children: ["This certificate expires ", expiry.daysLeft === 1 ? "tomorrow" : `in ${expiry.daysLeft} days`, ". Renew it so your mail stays signed."] })] })), (enrollment?.subject || enrollment?.issuer || enrollment?.serialNumber || enrollment?.issuedAt) && (_jsxs("dl", { className: "flex flex-col gap-1.5", children: [enrollment.subject && _jsx(Detail, { label: "Subject", children: enrollment.subject }), enrollment.issuer && _jsx(Detail, { label: "Issuer", children: enrollment.issuer }), enrollment.serialNumber && (_jsx(Detail, { label: "Serial number", children: _jsxs("span", { className: "inline-flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-mono text-xs", title: enrollment.serialNumber, children: truncateSerial(enrollment.serialNumber) }), _jsx(CopyButton, { value: enrollment.serialNumber, label: "Copy the certificate's serial number" })] }) })), enrollment.issuedAt && _jsx(Detail, { label: "Issued", children: formatDate(enrollment.issuedAt) }), notAfter !== undefined && _jsx(Detail, { label: "Valid until", children: formatDate(notAfter) })] })), canRequest && onRequest && expiry.state === "soon" && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: requesting, disabled: requesting, onClick: onRequest, children: "Renew" }) }))] })), mode === "failed" && (_jsxs(_Fragment, { children: [_jsx(Alert, { children: statusLine ?? "Failed: the certificate could not be issued." }), steps.length > 0 && _jsx(Stepper, { steps: steps }), canRequest && onRequest && enrollment?.retryable !== false && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: requesting, disabled: requesting, onClick: onRequest, children: "Try again" }) }))] })), mode === "expired" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: notAfter !== undefined ? `Expired on ${formatDate(notAfter)}. Mail from this mailbox is no longer signed.` : "This certificate has expired. Mail from this mailbox is no longer signed." }), canRequest && onRequest && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: requesting, disabled: requesting, onClick: onRequest, children: "Request a new certificate" }) }))] }))] }));
+}

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -16,6 +16,7 @@ import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { mergePluginNavItems } from "../../../plugins/pluginNav.js";
 /** Every settings section with its own sidebar entry. */
 export const SETTINGS_SECTIONS = [
+    { id: "appearance", href: "/settings/appearance", label: "Appearance" },
     { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
     { id: "filters", href: "/settings/filters", label: "Mail Filters" },
     { id: "signatures", href: "/settings/signatures", label: "Signatures" },

package/dist/apps/shared/components/sharing/PrincipalPicker.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { MailboxAccessRole, ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+export interface PrincipalPickerProps {
+    mailboxUid: string;
+    /** What each access level is called on this page. */
+    roleLabels: Record<MailboxAccessRole, string>;
+    /** Text put in the box to start with - a stored entry being replaced, say. */
+    initialPrincipal?: string;
+    /** The access level pre-selected. */
+    defaultRole?: MailboxAccessRole;
+    /** What the box asks for. */
+    placeholder?: string;
+    /** Called once the grant is saved, with the person it went to. */
+    onGranted: (person: ResolvedPrincipal, role: MailboxAccessRole) => void | Promise<void>;
+    /** Shown as a Cancel button next to the box when set (replacing an entry). */
+    onCancel?: () => void;
+}
+/** Who a resolved person is, for a person to check before saving: their name and address, else their uid. */
+export declare function describePerson(person: ResolvedPrincipal): string;
+/**
+ * "Who?" for a sharing screen. What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id -
+ * is RESOLVED by the server (`resolveMailboxPrincipal()`) to the person it names before anything is saved, and the person
+ * is shown (name and address) for the caller to confirm; only then is the grant made, against that person's uid. Free text
+ * is never stored: an ACL record matches a user uid and nothing else, so a grant to a typed username applies to nobody.
+ */
+export default function PrincipalPicker({ mailboxUid, roleLabels, initialPrincipal, defaultRole, placeholder, onGranted, onCancel }: PrincipalPickerProps): React.JSX.Element;

package/dist/apps/shared/components/sharing/PrincipalPicker.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { resolveMailboxPrincipal, setMailboxAccess, } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+/** Who a resolved person is, for a person to check before saving: their name and address, else their uid. */
+export function describePerson(person) {
+    if (person.displayName && person.address)
+        return `${person.displayName} <${person.address}>`;
+    return person.displayName ?? person.address ?? `user ${person.userUid}`;
+}
+/**
+ * "Who?" for a sharing screen. What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id -
+ * is RESOLVED by the server (`resolveMailboxPrincipal()`) to the person it names before anything is saved, and the person
+ * is shown (name and address) for the caller to confirm; only then is the grant made, against that person's uid. Free text
+ * is never stored: an ACL record matches a user uid and nothing else, so a grant to a typed username applies to nobody.
+ */
+export default function PrincipalPicker({ mailboxUid, roleLabels, initialPrincipal, defaultRole = "viewer", placeholder, onGranted, onCancel }) {
+    const [typed, setTyped] = useState(initialPrincipal ?? "");
+    const [role, setRole] = useState(defaultRole);
+    const [person, setPerson] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    // A stored entry being replaced is looked up straight away, so its person is shown without a click.
+    useEffect(() => {
+        if (initialPrincipal) {
+            void find(initialPrincipal);
+        }
+    }, [initialPrincipal]);
+    async function find(principal) {
+        setBusy(true);
+        setError(null);
+        setPerson(null);
+        try {
+            setPerson(await resolveMailboxPrincipal(mailboxUid, principal));
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not look that person up.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    function handleFind(e) {
+        e.preventDefault();
+        const principal = typed.trim();
+        if (principal) {
+            void find(principal);
+        }
+    }
+    // Only reachable from the confirm button, which only renders once `person` is set.
+    async function handleGrant() {
+        setBusy(true);
+        setError(null);
+        try {
+            await setMailboxAccess(mailboxUid, person.userUid, role);
+            await onGranted(person, role);
+            setTyped("");
+            setPerson(null);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleFind, className: "flex gap-2", children: [_jsx("input", { type: "text", "aria-label": "Who to share with", placeholder: placeholder ?? "Email address, username or user id", className: "flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text", value: typed, onChange: (e) => {
+                            setTyped(e.target.value);
+                            setPerson(null);
+                        }, disabled: busy }), _jsx("select", { "aria-label": "Access level", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text", value: role, onChange: (e) => setRole(e.target.value), disabled: busy, children: Object.keys(roleLabels).map((value) => (_jsx("option", { value: value, children: roleLabels[value] }, value))) }), _jsx(Button, { type: "submit", variant: "secondary", loading: busy && !person, disabled: busy, className: "!w-auto", children: "Find" }), onCancel && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto", onClick: onCancel, children: "Cancel" }))] }), person && (_jsxs("div", { className: "flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm", children: [_jsxs("span", { children: ["Share with ", _jsx("strong", { className: "break-all", children: describePerson(person) }), " as ", _jsx("em", { children: roleLabels[role] }), "?"] }), _jsx(Button, { type: "button", loading: busy, disabled: busy, className: "!w-auto", onClick: () => void handleGrant(), children: "Grant" })] }))] }));
+}

package/dist/apps/shared/components/tasks/TasksSidebar.js

@@ -8,6 +8,7 @@ import { HiOutlineBars3 } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { createTaskList, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
 export function tasksViewKey(view) {
     return view.type === "list" ? `list:${view.uid}` : view.type;
 }
@@ -66,7 +67,8 @@ export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSel
             setAddingList(false);
         }
         catch (err) {
-            setListsError(err instanceof ApiRequestError ? err.message : "Could not create this list.");
+            // A pop-up: `listsError` is only the lists' own load failure.
+            notifyApiError(err, "Couldn't create the list");
         }
     }
     function handleSelect(view) {
@@ -77,5 +79,5 @@ export default function TasksSidebar({ mailboxUid, tasks, userUid, active, onSel
     // `Drawer` (see `ContactsSidebar` for the identical pattern and the duplicate-id reasoning behind
     // the `idPrefix`).
     const navContent = (idPrefix) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(NavItem, { label: "My Day", count: myDayCount, active: active.type === "myDay", onClick: () => handleSelect({ type: "myDay" }) }), _jsx(NavItem, { label: "Important", count: importantCount, active: active.type === "important", onClick: () => handleSelect({ type: "important" }) }), _jsx(NavItem, { label: "Planned", count: plannedCount, active: active.type === "planned", onClick: () => handleSelect({ type: "planned" }) }), _jsx(NavItem, { label: "Assigned to me", count: assignedToMeCount, active: active.type === "assignedToMe", onClick: () => handleSelect({ type: "assignedToMe" }) }), _jsx(NavItem, { label: "Flagged email", active: active.type === "flagged", onClick: () => handleSelect({ type: "flagged" }) })] }), _jsx(NavItem, { label: "Tasks", count: tasks.length, active: active.type === "all", onClick: () => handleSelect({ type: "all" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-2.5 mb-1", children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Lists" }), _jsx("button", { type: "button", onClick: () => setAddingList(true), "aria-label": "New list", className: "text-xs font-bold text-primary-dark hover:underline", children: "+" })] }), listsError && _jsx("p", { className: "px-2.5 text-xs text-danger", children: listsError }), _jsx("div", { className: "flex flex-col gap-0.5", children: lists.map((list) => (_jsx(NavItem, { label: list.name, count: listCounts.get(list.uid) ?? 0, active: active.type === "list" && active.uid === list.uid, onClick: () => handleSelect({ type: "list", uid: list.uid, name: list.name }) }, list.uid))) }), addingList && (_jsxs("form", { onSubmit: handleAddList, className: "flex items-center gap-1 px-2.5 mt-1", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "New list name", id: `${idPrefix}-new-list-name`, value: newListName, onChange: (e) => setNewListName(e.target.value), className: "flex-1 text-xs py-1 px-1.5 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark", children: "Add" })] }))] })] }));
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden md:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "lg:hidden m-3 mb-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open tasks menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("nav", { "aria-label": "Tasks", className: "hidden lg:flex w-56 shrink-0 border-r border-border flex-col gap-4 p-3 overflow-y-auto", children: navContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Tasks", children: _jsx("div", { className: "flex flex-col gap-4", children: navContent("mobile") }) })] }));
 }

package/dist/apps/shared/components/tasks/layout/TasksShell.js

@@ -96,7 +96,9 @@ export default function TasksShell({ userUid, authServerUrl, impersonating, impe
         const sidebarContent = (idPrefix) => (_jsxs(_Fragment, { children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wide text-text-muted mb-1", htmlFor: `${idPrefix}-tasks-mailbox-switcher`, children: "Mailbox" }), _jsx("select", { id: `${idPrefix}-tasks-mailbox-switcher`, className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: mailboxUid, onChange: (e) => {
                                 navigate(`/tasks?mailboxUid=${encodeURIComponent(e.target.value)}`);
                             }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), folderError && _jsx(Alert, { children: folderError })] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [(mailboxes.length > 1 || folderError) && (_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
+        // With a single mailbox and no error this column would be empty: no 224 px of nothing beside the tasks' own menu.
+        const hasSidebar = mailboxes.length > 1 || !!folderError;
+        inner = (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "hidden lg:flex w-56 shrink-0 bg-surface border-r border-border flex-col p-3 gap-3", children: sidebarContent("desktop") })), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Mailbox", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [hasSidebar && (_jsx("button", { type: "button", className: "lg:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open mailbox switcher", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) })), _jsx(TasksShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     return (_jsx(AppShell, { active: "tasks", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }

package/dist/apps/shared/mail/folderCounts.d.ts

@@ -75,4 +75,4 @@ export interface FolderCounts {
  * Holds the folder counts overlay for `MailShell`. `folders` is every folder the sidebar lists (the overlay starts from what
  * each was loaded with); `mailboxes` is whose folders to read back. The overlay starts again whenever `mailboxes` does.
  */
-export declare function useFolderCounts(mailboxes: Mailbox[], folders: Folder[]): FolderCounts;
+export declare function useFolderCounts(mailboxes: Mailbox[], folders: Folder[], onFoldersListed?: (folders: Folder[]) => void): FolderCounts;

package/dist/apps/shared/mail/folderCounts.js

@@ -62,10 +62,10 @@ const SEEN_LIMIT = 500;
  * Holds the folder counts overlay for `MailShell`. `folders` is every folder the sidebar lists (the overlay starts from what
  * each was loaded with); `mailboxes` is whose folders to read back. The overlay starts again whenever `mailboxes` does.
  */
-export function useFolderCounts(mailboxes, folders) {
+export function useFolderCounts(mailboxes, folders, onFoldersListed) {
     const [counts, setCounts] = useState({});
-    const latestRef = useRef({ mailboxes, folders });
-    latestRef.current = { mailboxes, folders };
+    const latestRef = useRef({ mailboxes, folders, onFoldersListed });
+    latestRef.current = { mailboxes, folders, onFoldersListed };
     // Bumped by every change of the overlay this page makes, so a read that started before one can tell it is out of date.
     const changesRef = useRef(0);
     const inFlightRef = useRef(0);
@@ -116,6 +116,12 @@ export function useFolderCounts(mailboxes, folders) {
         if (stoppedRef.current || run !== runRef.current) {
             return;
         }
+        // Whatever the counts' fate below, these are the mailboxes' folders as they are: a folder the sidebar does not have yet is filed now.
+        for (const list of results) {
+            if (list) {
+                latestRef.current.onFoldersListed?.(list);
+            }
+        }
         if (inFlightRef.current > 0 || changesRef.current !== startedAt) {
             // A change of this page's own began or ended while that was being read, so it may predate it: read again.
             refresh();

package/dist/apps/shared/mail/folderTree.d.ts

@@ -0,0 +1,55 @@
+import type { Folder } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MailboxFolders } from "../components/mail/layout/MailShell.js";
+/**
+ * The sidebar's order of a mailbox's well-known folders; anything else (`user`) follows, alphabetically. Also the order push channels are asked
+ * for (`pushChannelsFor()`), so when the server's channel cap bites it is the folders lowest in this list that go without live updates.
+ */
+export declare const FOLDER_ORDER: string[];
+/**
+ * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see `CalendarShell`/`ContactsShell`/`TasksShell`), not
+ * Mail - `listFolders()` returns every well-known folder for the mailbox regardless of which app owns it, so Mail's own folder tree filters down
+ * to just the mail ones itself, or those other apps' folders leak into its sidebar.
+ */
+export declare const MAIL_FOLDER_TYPES: Set<string>;
+/** The well-known folders the server creates lazily around a first send: what the sidebar shows a placeholder for while a message is on its way. */
+export declare const SEND_FOLDER_TYPES: readonly ["outbox", "sent_items"];
+export declare function isMailFolder(folder: {
+    type: string;
+}): boolean;
+/** Well-known folders in `FOLDER_ORDER`, then the rest by name. A new array; the input is left alone. */
+export declare function sortFolders(folders: Folder[]): Folder[];
+/** What a sidebar row is: a folder that exists, or (`placeholder`) one that is expected to but has not arrived yet. */
+export type FolderRow = {
+    kind: "folder";
+    folder: Folder;
+} | {
+    kind: "placeholder";
+    type: string;
+};
+/**
+ * The rows of one mailbox's sidebar section, in order: every folder that exists, and - while `sending` messages are on their way and the
+ * server has not made the folder yet - a placeholder for each of the Outbox and Sent Items that is missing. The one place a folder that has not
+ * arrived is drawn, so it can never appear twice: the moment the real folder is in `folders` its placeholder is not built.
+ */
+export declare function folderRows(folders: Folder[], sending: number): FolderRow[];
+/** What a folder can be changed to by an event or a refetch: everything about it except the counts, which the counts overlay owns. */
+export type FolderChange = Partial<Pick<Folder, "name" | "type" | "parentFolderUid" | "color">> & {
+    uid: string;
+    mailboxUid?: string;
+};
+/**
+ * Files `folder` in the tree: added under its mailbox when unknown (a type Mail does not list is ignored), else its name, type, parent and
+ * colour brought up to date (a folder that became a type Mail does not list leaves the tree). Returns `entries` itself - the same array - when
+ * nothing changed, because everything on screen that depends on the tree starts over when it is a new one.
+ */
+export declare function upsertFolder(entries: MailboxFolders[], folder: Folder | FolderChange): MailboxFolders[];
+/** Takes a deleted folder out of the tree. The same array when it was not in it. */
+export declare function removeFolder(entries: MailboxFolders[], folderUid: string): MailboxFolders[];
+/**
+ * Brings one mailbox's part of the tree up to date with a listing the server just gave (`listFolders()`): folders it has that the tree lacks
+ * are added, changed names and types are taken. Nothing is removed - a listing that began before a folder was created here would take it out
+ * again, and deletions arrive as events - and the counts are not touched (see `useFolderCounts()`). The same array when there is nothing to do.
+ */
+export declare function reconcileFolders(entries: MailboxFolders[], listed: Folder[]): MailboxFolders[];
+/** Every folder uid in the tree. */
+export declare function knownFolderUids(entries: MailboxFolders[]): Set<string>;

package/dist/apps/shared/mail/folderTree.js

@@ -0,0 +1,116 @@
+/**
+ * The sidebar's order of a mailbox's well-known folders; anything else (`user`) follows, alphabetically. Also the order push channels are asked
+ * for (`pushChannelsFor()`), so when the server's channel cap bites it is the folders lowest in this list that go without live updates.
+ */
+export const FOLDER_ORDER = ["inbox", "drafts", "outbox", "sent_items", "deleted_items", "junk", "archive"];
+/**
+ * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see `CalendarShell`/`ContactsShell`/`TasksShell`), not
+ * Mail - `listFolders()` returns every well-known folder for the mailbox regardless of which app owns it, so Mail's own folder tree filters down
+ * to just the mail ones itself, or those other apps' folders leak into its sidebar.
+ */
+export const MAIL_FOLDER_TYPES = new Set([...FOLDER_ORDER, "user"]);
+/** The well-known folders the server creates lazily around a first send: what the sidebar shows a placeholder for while a message is on its way. */
+export const SEND_FOLDER_TYPES = ["outbox", "sent_items"];
+export function isMailFolder(folder) {
+    return MAIL_FOLDER_TYPES.has(folder.type);
+}
+function sortKey(type) {
+    const index = FOLDER_ORDER.indexOf(type);
+    return index === -1 ? FOLDER_ORDER.length : index;
+}
+/** Well-known folders in `FOLDER_ORDER`, then the rest by name. A new array; the input is left alone. */
+export function sortFolders(folders) {
+    return [...folders].sort((a, b) => sortKey(a.type) - sortKey(b.type) || a.name.localeCompare(b.name));
+}
+/**
+ * The rows of one mailbox's sidebar section, in order: every folder that exists, and - while `sending` messages are on their way and the
+ * server has not made the folder yet - a placeholder for each of the Outbox and Sent Items that is missing. The one place a folder that has not
+ * arrived is drawn, so it can never appear twice: the moment the real folder is in `folders` its placeholder is not built.
+ */
+export function folderRows(folders, sending) {
+    const rows = sortFolders(folders).map((folder) => ({ kind: "folder", folder }));
+    if (sending > 0) {
+        for (const type of SEND_FOLDER_TYPES) {
+            if (!folders.some((folder) => folder.type === type)) {
+                rows.push({ kind: "placeholder", type });
+            }
+        }
+        rows.sort((a, b) => sortKey(rowType(a)) - sortKey(rowType(b)));
+    }
+    return rows;
+}
+function rowType(row) {
+    return row.kind === "folder" ? row.folder.type : row.type;
+}
+const CHANGEABLE = ["name", "type", "parentFolderUid", "color"];
+/**
+ * Files `folder` in the tree: added under its mailbox when unknown (a type Mail does not list is ignored), else its name, type, parent and
+ * colour brought up to date (a folder that became a type Mail does not list leaves the tree). Returns `entries` itself - the same array - when
+ * nothing changed, because everything on screen that depends on the tree starts over when it is a new one.
+ */
+export function upsertFolder(entries, folder) {
+    let changed = false;
+    const next = entries.map((entry) => {
+        const existing = entry.folders.find((f) => f.uid === folder.uid);
+        if (!existing) {
+            // Only a whole folder can be added: an update for one that is not known has nothing to add it with (the refetch it causes will).
+            if (entry.mailbox.uid !== folder.mailboxUid || !isFullFolder(folder) || !isMailFolder(folder)) {
+                return entry;
+            }
+            // A well-known folder is one per mailbox - the server treats the oldest as the real one - so a second of the same type (made by a client that did
+            // not know it existed) is not a second row: the older of the two is the one shown.
+            const sameType = folder.type === "user" ? undefined : entry.folders.find((f) => f.type === folder.type);
+            if (sameType) {
+                if (!isOlder(folder, sameType)) {
+                    return entry;
+                }
+                changed = true;
+                return { ...entry, folders: entry.folders.map((f) => (f === sameType ? folder : f)) };
+            }
+            changed = true;
+            return { ...entry, folders: [...entry.folders, folder] };
+        }
+        const patch = {};
+        for (const key of CHANGEABLE) {
+            if (key in folder && folder[key] !== undefined && folder[key] !== existing[key]) {
+                patch[key] = folder[key];
+            }
+        }
+        if (Object.keys(patch).length === 0) {
+            return entry;
+        }
+        changed = true;
+        const updated = { ...existing, ...patch };
+        return { ...entry, folders: isMailFolder(updated) ? entry.folders.map((f) => (f === existing ? updated : f)) : entry.folders.filter((f) => f !== existing) };
+    });
+    return changed ? next : entries;
+}
+function isFullFolder(folder) {
+    return typeof folder.name === "string" && typeof folder.type === "string";
+}
+/** Whether `a` was created before `b`: only when both say when. */
+function isOlder(a, b) {
+    // (A folder from the network may lack the date: `Date.parse(undefined)` is NaN, which is "cannot tell".)
+    const first = Date.parse(a.dateCreated);
+    const second = Date.parse(b.dateCreated);
+    return Number.isFinite(first) && Number.isFinite(second) && first < second;
+}
+/** Takes a deleted folder out of the tree. The same array when it was not in it. */
+export function removeFolder(entries, folderUid) {
+    if (!entries.some((entry) => entry.folders.some((folder) => folder.uid === folderUid))) {
+        return entries;
+    }
+    return entries.map((entry) => (entry.folders.some((folder) => folder.uid === folderUid) ? { ...entry, folders: entry.folders.filter((folder) => folder.uid !== folderUid) } : entry));
+}
+/**
+ * Brings one mailbox's part of the tree up to date with a listing the server just gave (`listFolders()`): folders it has that the tree lacks
+ * are added, changed names and types are taken. Nothing is removed - a listing that began before a folder was created here would take it out
+ * again, and deletions arrive as events - and the counts are not touched (see `useFolderCounts()`). The same array when there is nothing to do.
+ */
+export function reconcileFolders(entries, listed) {
+    return listed.reduce((tree, folder) => upsertFolder(tree, folder), entries);
+}
+/** Every folder uid in the tree. */
+export function knownFolderUids(entries) {
+    return new Set(entries.flatMap((entry) => entry.folders.map((folder) => folder.uid)));
+}

package/dist/apps/shared/mail/outbox/UnlockBridge.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Lets code with no React context - a pop-up's "Unlock" action - open the app's one unlock prompt (`UnlockPromptProvider`). Renders nothing;
+ * mounted once, inside the provider it reaches.
+ */
+export default function UnlockBridge(): null;

package/dist/apps/shared/mail/outbox/UnlockBridge.js

@@ -0,0 +1,18 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect } from "react";
+import { useUnlockPrompt } from "../../components/layout/UnlockPromptProvider.js";
+import { registerUnlockOpener } from "./composeBridge.js";
+/**
+ * Lets code with no React context - a pop-up's "Unlock" action - open the app's one unlock prompt (`UnlockPromptProvider`). Renders nothing;
+ * mounted once, inside the provider it reaches.
+ */
+export default function UnlockBridge() {
+    const { requestUnlock } = useUnlockPrompt();
+    useEffect(() => registerUnlockOpener(async (mailboxUid, keys) => {
+        await requestUnlock(mailboxUid, keys);
+    }), [requestUnlock]);
+    return null;
+}

package/dist/apps/shared/mail/outbox/composeBridge.d.ts

@@ -0,0 +1,34 @@
+import type { Attachment, Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { PublicKey } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+/**
+ * A compose window to re-open around a message that was already composed: a failed send's "Open draft". The message keeps its uid - the
+ * server draft it was assembled into - and everything the sender had typed comes back exactly as it was, including what could not have
+ * been read back from the server (the plain text of a message that was encrypted before it was stored).
+ */
+export interface ResumeCompose {
+    /** The server draft the window continues - it must be in Drafts (a message that is in Outbox is moved back first). */
+    draft: Message;
+    mailboxUid: string;
+    to: string;
+    cc: string;
+    bcc: string;
+    subject: string;
+    html: string;
+    attachments: Attachment[];
+    requestReceipt: boolean;
+    signEnabled: boolean;
+    encryptRequested: boolean;
+}
+/** What the app frame's compose provider offers to code that has no React context (a pop-up's action, a push-event handler). */
+export interface ComposeOpenerInput {
+    mailboxUid?: string;
+    resume?: ResumeCompose;
+}
+/** Registered by `ComposeProvider`; returns the function that unregisters it. */
+export declare function registerComposeOpener(open: (input: ComposeOpenerInput) => void): () => void;
+/** Opens a compose window from outside React. `false` when no compose provider is mounted (nothing was opened). */
+export declare function openComposeFromOutside(input: ComposeOpenerInput): boolean;
+/** Registered by the unlock prompt's owner; returns the function that unregisters it. */
+export declare function registerUnlockOpener(unlock: (mailboxUid: string, keys: PublicKey[]) => Promise<void>): () => void;
+/** Opens the existing unlock prompt from outside React. Resolves once the keys are unlocked; rejects when the user dismissed it (or there is no prompt). */
+export declare function requestUnlockFromOutside(mailboxUid: string, keys: PublicKey[]): Promise<void>;