@rapidmx/web-client 0.9.0 → 0.11.0

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

@@ -0,0 +1,144 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { MIN_TEXT_CONTRAST, adaptForeground, blackOrWhite, composite, contrastRatio, ensureContrast, firstColourStop, formatColour, luminance, parseColour, sameColour, } from "./color.js";
+import { LINK_SENTINEL, TEXT_SENTINEL } from "./frameDocument.js";
+import { documentElementOf, viewOf } from "./safeDocument.js";
+/** Not examined, nor are their children. `head` and its contents never render; `svg` is left as drawn. */
+const SKIPPED = new Set(["head", "script", "style", "title", "meta", "link", "template", "svg", "img"]);
+/** Classic link blue - what an unauthored link looks like in an authored region, before contrast. */
+const DEFAULT_LINK = { r: 0, g: 0, b: 238 };
+/** How much lighter or darker (in luminance) an adapted text colour must be than the original for the difference to be worth an opt-out. */
+const MATERIAL_LUMINANCE_SHIFT = 0.3;
+/** A surface at least this luminous is close enough to the white a message is authored on that it is not, by itself, an adaptation. */
+const LIGHT_SURFACE = 0.85;
+/** The elements whose background is the message's canvas: `<html>`, `<body>`, and the wrapper that stands in for the message's own `<body>`. */
+function standsForCanvas(element, root) {
+    return element === root || element.localName === "body" || element.parentElement?.id === "rr-body";
+}
+function noop() {
+    // Nothing was written, so there is nothing to put back.
+}
+function nextTurn() {
+    return new Promise((resolve) => setTimeout(resolve, 0));
+}
+/** The colour a `color` value comes to over a background: opaque, alpha composited. */
+function opaque(css, over) {
+    const colour = parseColour(css);
+    return colour ? composite(colour, over) : undefined;
+}
+/**
+ * Adapts `doc` to `surface` - see the file's header. Time-sliced (`sliceMs`, then a turn for the browser) so a very large message never
+ * blocks the page; the frame stays hidden until this resolves, so nothing unreadable is ever shown.
+ */
+export async function adaptDocument(doc, surface, options = {}) {
+    const { sliceMs = 12, isCancelled = () => false, now = () => performance.now(), yieldToBrowser = nextTurn } = options;
+    const view = viewOf(doc);
+    const result = { elements: 0, written: 0, material: false, authoredCanvas: false, cancelled: false, revert: noop, reapply: noop };
+    if (!view) {
+        return result;
+    }
+    const root = documentElementOf(doc);
+    // Every read happens before the first write: a write changes what its descendants inherit, which would make every child of an element
+    // we coloured look authored.
+    const writes = [];
+    const stack = [
+        { element: root, context: { background: surface.background, authored: false, unknown: false, parentColour: surface.text } },
+    ];
+    let sliceStart = now();
+    while (stack.length > 0) {
+        if (now() - sliceStart > sliceMs) {
+            await yieldToBrowser();
+            if (isCancelled()) {
+                result.cancelled = true;
+                return result;
+            }
+            sliceStart = now();
+        }
+        const { element, context } = stack.pop();
+        if (SKIPPED.has(element.localName.toLowerCase())) {
+            continue;
+        }
+        result.elements++;
+        const style = view.getComputedStyle(element);
+        let { background, authored, unknown } = context;
+        const own = parseColour(style.backgroundColor);
+        const image = style.backgroundImage;
+        if (image && image !== "none") {
+            const stop = firstColourStop(image) ?? (own && own.a > 0 ? own : undefined);
+            authored = true;
+            unknown = !stop;
+            background = stop ? composite(stop, background) : background;
+            result.authoredCanvas || (result.authoredCanvas = standsForCanvas(element, root));
+        }
+        else if (own && own.a >= 0.98) {
+            authored = true;
+            unknown = false;
+            background = composite(own, background);
+            result.authoredCanvas || (result.authoredCanvas = standsForCanvas(element, root));
+        }
+        else if (own && own.a > 0) {
+            background = composite(own, background);
+        }
+        const declared = style.color;
+        const original = opaque(declared, background);
+        let target;
+        if (declared === TEXT_SENTINEL) {
+            const rgb = authored ? (unknown ? { r: 0, g: 0, b: 0 } : blackOrWhite(background)) : ensureContrast(surface.text, background);
+            target = { rgb, css: formatColour(rgb) };
+        }
+        else if (declared === LINK_SENTINEL) {
+            const rgb = authored ? (unknown ? DEFAULT_LINK : ensureContrast(DEFAULT_LINK, background)) : ensureContrast(surface.link, background);
+            target = { rgb, css: formatColour(rgb) };
+        }
+        else if (original && !authored) {
+            // Authored text on the theme's surface: it stays if it reads, else it is adapted.
+            const readable = contrastRatio(original, background) >= MIN_TEXT_CONTRAST;
+            const rgb = readable ? original : adaptForeground(original, { ...surface, background });
+            target = { rgb, css: readable ? declared : formatColour(rgb) };
+        }
+        else if (original) {
+            // Authored text on an authored background: as its author had it.
+            target = { rgb: original, css: declared };
+        }
+        let parentColour = context.parentColour;
+        if (target) {
+            // An element is written to unless inheritance already gives it its target: the parent must end with that colour, and an element
+            // that may carry a declaration of its own (an authored colour, a link - the sentinel is a rule on it - and the root) must not
+            // be declaring a different one. Text nobody coloured inherits and has nothing of its own to override.
+            const ownDeclaration = declared !== TEXT_SENTINEL || element === root;
+            if (!sameColour(target.rgb, context.parentColour) || (ownDeclaration && !sameColour(target.rgb, original ?? target.rgb))) {
+                writes.push({ element, colour: target.css });
+            }
+            if (original && Math.abs(luminance(target.rgb) - luminance(original)) > MATERIAL_LUMINANCE_SHIFT) {
+                result.material = true;
+            }
+            parentColour = target.rgb;
+        }
+        for (const child of Array.from(element.children).reverse()) {
+            stack.push({ element: child, context: { background, authored, unknown, parentColour } });
+        }
+    }
+    // What each element had inline before, so the writes can be taken back (a message may carry its own inline colour).
+    const before = writes.map(({ element }) => ({ value: element.style.getPropertyValue("color"), priority: element.style.getPropertyPriority("color") }));
+    result.reapply = () => {
+        for (const { element, colour } of writes) {
+            element.style.setProperty("color", colour, "important");
+        }
+    };
+    result.revert = () => {
+        writes.forEach(({ element }, index) => {
+            if (before[index].value) {
+                element.style.setProperty("color", before[index].value, before[index].priority);
+            }
+            else {
+                element.style.removeProperty("color");
+            }
+        });
+    };
+    result.reapply();
+    result.written = writes.length;
+    result.material || (result.material = !result.authoredCanvas && luminance(surface.background) < LIGHT_SURFACE);
+    return result;
+}

package/dist/apps/shared/components/mail/reading/themeSurface.d.ts

@@ -0,0 +1,17 @@
+import type { ResolvedTheme } from "../../../appearance/resolvedTheme.js";
+import { ThemeSurface } from "./color.js";
+/** The palette used where the page's own tokens cannot be read (no DOM, or a stylesheet without them): the app's built-in schemes. */
+export declare const DEFAULT_SURFACES: Record<ResolvedTheme, ThemeSurface>;
+/**
+ * The theme a message is shown in, read from the page's own tokens: the surface behind the body composited to an opaque colour (a
+ * translucent surface over a photo would make text unreadable, so the body area is always painted with this opaque one), the text
+ * colour and the link colour. Falls back to the built-in scheme for anything the page doesn't define.
+ */
+export declare function readThemeSurface(theme: ResolvedTheme): ThemeSurface;
+/** A string that changes exactly when the surface does - what a frame is keyed on. */
+export declare function surfaceKey(surface: ThemeSurface): string;
+/**
+ * The theme surface for `theme`, kept current: re-read when the scheme changes and when the page's own colours are changed at runtime
+ * (Appearance sets `data-theme` on `<html>` and writes the user's colours into a `<style>` in the head). The identity only changes when a colour does.
+ */
+export declare function useThemeSurface(theme: ResolvedTheme): ThemeSurface;

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

@@ -0,0 +1,83 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { composite, formatColour, parseColour } from "./color.js";
+/** The palette used where the page's own tokens cannot be read (no DOM, or a stylesheet without them): the app's built-in schemes. */
+export const DEFAULT_SURFACES = {
+    light: { background: { r: 255, g: 255, b: 255 }, text: { r: 28, g: 37, b: 38 }, link: { r: 20, g: 138, b: 128 }, dark: false },
+    dark: { background: { r: 27, g: 32, b: 34 }, text: { r: 238, g: 242, b: 243 }, link: { r: 45, g: 212, b: 191 }, dark: true },
+};
+/** The page's own CSS variables a message is adapted to. Read from the document, so a branding palette or a user's own Appearance colours are followed. */
+const TOKENS = {
+    surface: "--rr-color-surface",
+    page: "--rr-color-bg",
+    text: "--rr-color-text",
+    link: "--rr-color-primary-dark",
+};
+/** The colour a CSS custom property resolves to, by asking the browser what a probe element painted with it comes to (which also
+ * resolves `var()` chains and colour functions); `undefined` when it isn't defined or isn't a colour. */
+function resolveToken(probe, name) {
+    probe.style.color = `var(${name}, transparent)`;
+    const colour = parseColour(getComputedStyle(probe).color);
+    return colour && colour.a > 0 ? colour : undefined;
+}
+/**
+ * The theme a message is shown in, read from the page's own tokens: the surface behind the body composited to an opaque colour (a
+ * translucent surface over a photo would make text unreadable, so the body area is always painted with this opaque one), the text
+ * colour and the link colour. Falls back to the built-in scheme for anything the page doesn't define.
+ */
+export function readThemeSurface(theme) {
+    const fallback = DEFAULT_SURFACES[theme];
+    if (typeof document === "undefined" || !document.body) {
+        return fallback;
+    }
+    const probe = document.createElement("span");
+    probe.style.display = "none";
+    document.body.appendChild(probe);
+    try {
+        const page = resolveToken(probe, TOKENS.page);
+        const surface = resolveToken(probe, TOKENS.surface);
+        const underlay = page ? composite(page, fallback.background) : fallback.background;
+        const text = resolveToken(probe, TOKENS.text);
+        const link = resolveToken(probe, TOKENS.link);
+        return {
+            dark: fallback.dark,
+            background: surface ? composite(surface, underlay) : underlay,
+            text: text ? composite(text, underlay) : fallback.text,
+            link: link ? composite(link, underlay) : fallback.link,
+        };
+    }
+    finally {
+        probe.remove();
+    }
+}
+/** A string that changes exactly when the surface does - what a frame is keyed on. */
+export function surfaceKey(surface) {
+    return [surface.background, surface.text, surface.link].map(formatColour).join("|") + (surface.dark ? "|dark" : "|light");
+}
+/**
+ * The theme surface for `theme`, kept current: re-read when the scheme changes and when the page's own colours are changed at runtime
+ * (Appearance sets `data-theme` on `<html>` and writes the user's colours into a `<style>` in the head). The identity only changes when a colour does.
+ */
+export function useThemeSurface(theme) {
+    const [surface, setSurface] = useState(() => readThemeSurface(theme));
+    useEffect(() => {
+        const update = () => setSurface((previous) => {
+            const next = readThemeSurface(theme);
+            return surfaceKey(previous) === surfaceKey(next) ? previous : next;
+        });
+        update();
+        if (typeof MutationObserver === "undefined") {
+            return;
+        }
+        const observer = new MutationObserver(update);
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-theme"] });
+        // The Appearance provider writes the user's own colours into a `<style>` element in the head, whose text is replaced when they change.
+        observer.observe(document.head, { childList: true, subtree: true, characterData: true, attributes: true });
+        return () => observer.disconnect();
+    }, [theme]);
+    // The render that first sees a new scheme must not use the previous one's colours (the effect above corrects the state after it).
+    return surface.dark === (theme === "dark") ? surface : readThemeSurface(theme);
+}

package/dist/apps/shared/components/mail/reading/viewOriginal.d.ts

@@ -0,0 +1,9 @@
+/** Whether the reader asked to see `uid` as authored. */
+export declare function isViewedOriginal(uid: string): boolean;
+/** Forgets every choice (the tests). */
+export declare function clearViewedOriginal(): void;
+/**
+ * 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 declare function useViewOriginal(uid: string): [boolean, (value: boolean) => void];

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/mail/unreadStyle.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Message } from "@rapidmx/react-shared/mail/mailApi.js";
+/**
+ * How an unread message looks in every list of mail (the message list, the conversation list and its child rows, the
+ * thread pane's message headers, the folder badges), in one place so they can't drift apart. Modelled on Outlook:
+ *
+ * **Unread**: an accent bar down the row's left edge, a faint accent tint on the row, the sender and subject in bold and the
+ * date in the accent colour - plus a visually-hidden "Unread" in the row's text, so it never relies on colour alone.
+ *
+ * **Read**: normal weight, the sender and preview muted.
+ *
+ * **Hover, selected and focused** are their own states and look nothing like unread: hover is a plain grey (an accent tint on
+ * an unread row, so the row doesn't seem to lose its state), the open row has a stronger accent fill and an inset outline, and
+ * keyboard focus is a solid outline drawn inside the row.
+ *
+ * All of it is built from the theme's own tokens (`primary`, `text`, `text-muted`, `surface-alt`), so it follows light and
+ * dark mode and a branding stylesheet's palette.
+ */
+/** Whether a message is unread: `flags.read` isn't `true`. A message with no `read` flag at all counts as unread. */
+export declare function isUnread(message: Pick<Message, "flags"> | undefined | null): boolean;
+/**
+ * The classes of a row's outer element (`li`, or the row's wrapping `div`): the positioning the bar needs, and its one
+ * background - the open row's accent fill and inset outline, else an unread row's faint tint (a little stronger on hover),
+ * else a read row's plain grey hover. One element owns all of it so the states can't fight over the same property.
+ */
+export declare function rowClass(state: {
+    unread: boolean;
+    selected: boolean;
+}, extra?: string): string;
+/** Keyboard focus on a row's button: a solid outline drawn inside the row, unlike anything unread/selected/hover does. */
+export declare const ROW_FOCUS_CLASS = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary";
+/** The sender line: bold and full-strength while unread, normal and muted once read. */
+export declare function senderClass(unread: boolean): string;
+/** The subject line. */
+export declare function subjectClass(unread: boolean): string;
+/** The date beside the sender: the accent colour while unread. */
+export declare function dateClass(unread: boolean): string;
+/** The accent bar down a row's left edge - only for an unread row. The row's outer element must be `relative`. */
+export declare function UnreadBar({ unread }: {
+    unread: boolean;
+}): React.JSX.Element | null;
+/** "Unread." in the row's text for assistive technology (and for anything that reads the DOM without styles). */
+export declare function UnreadLabel({ unread }: {
+    unread: boolean;
+}): React.JSX.Element | null;

package/dist/apps/shared/components/mail/unreadStyle.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * How an unread message looks in every list of mail (the message list, the conversation list and its child rows, the
+ * thread pane's message headers, the folder badges), in one place so they can't drift apart. Modelled on Outlook:
+ *
+ * **Unread**: an accent bar down the row's left edge, a faint accent tint on the row, the sender and subject in bold and the
+ * date in the accent colour - plus a visually-hidden "Unread" in the row's text, so it never relies on colour alone.
+ *
+ * **Read**: normal weight, the sender and preview muted.
+ *
+ * **Hover, selected and focused** are their own states and look nothing like unread: hover is a plain grey (an accent tint on
+ * an unread row, so the row doesn't seem to lose its state), the open row has a stronger accent fill and an inset outline, and
+ * keyboard focus is a solid outline drawn inside the row.
+ *
+ * All of it is built from the theme's own tokens (`primary`, `text`, `text-muted`, `surface-alt`), so it follows light and
+ * dark mode and a branding stylesheet's palette.
+ */
+/** Whether a message is unread: `flags.read` isn't `true`. A message with no `read` flag at all counts as unread. */
+export function isUnread(message) {
+    return !!message && message.flags.read !== true;
+}
+/**
+ * The classes of a row's outer element (`li`, or the row's wrapping `div`): the positioning the bar needs, and its one
+ * background - the open row's accent fill and inset outline, else an unread row's faint tint (a little stronger on hover),
+ * else a read row's plain grey hover. One element owns all of it so the states can't fight over the same property.
+ */
+export function rowClass(state, extra = "") {
+    return [
+        "relative border-b border-border",
+        state.selected
+            ? "bg-primary/20 ring-1 ring-inset ring-primary/50"
+            : state.unread
+                ? "bg-primary/[0.07] hover:bg-primary/10"
+                : "hover:bg-surface-alt",
+        extra,
+    ]
+        .filter(Boolean)
+        .join(" ");
+}
+/** Keyboard focus on a row's button: a solid outline drawn inside the row, unlike anything unread/selected/hover does. */
+export const ROW_FOCUS_CLASS = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary";
+/** The sender line: bold and full-strength while unread, normal and muted once read. */
+export function senderClass(unread) {
+    return unread ? "font-bold text-text" : "font-normal text-text-muted";
+}
+/** The subject line. */
+export function subjectClass(unread) {
+    return unread ? "font-semibold text-text" : "font-normal text-text";
+}
+/** The date beside the sender: the accent colour while unread. */
+export function dateClass(unread) {
+    return unread ? "font-semibold text-primary-dark" : "font-normal text-text-muted";
+}
+/** The accent bar down a row's left edge - only for an unread row. The row's outer element must be `relative`. */
+export function UnreadBar({ unread }) {
+    return unread ? _jsx("span", { "aria-hidden": "true", "data-unread-bar": true, className: "absolute inset-y-0 left-0 w-1 bg-primary" }) : null;
+}
+/** "Unread." in the row's text for assistive technology (and for anything that reads the DOM without styles). */
+export function UnreadLabel({ unread }) {
+    return unread ? _jsx("span", { className: "sr-only", children: "Unread. " }) : null;
+}

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.d.ts

@@ -38,4 +38,4 @@ export declare function useSettingsShell(): SettingsShellContextValue;
  * settings sections (`SETTINGS_SECTIONS`) — full-page navigation between them, same as the top-level
  * app rail, since this framework has no client-side router.
  */
-export default function SettingsShell({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }: PropsWithChildren<SettingsShellProps>): React.JSX.Element;
+export default function SettingsShell({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }: PropsWithChildren<SettingsShellProps>): React.JSX.Element;

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

@@ -11,10 +11,12 @@ import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
+import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
 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" },
@@ -46,15 +48,24 @@ export function useSettingsShell() {
  * settings sections (`SETTINGS_SECTIONS`) — full-page navigation between them, same as the top-level
  * app rail, since this framework has no client-side router.
  */
-export default function SettingsShell({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }) {
+export default function SettingsShell({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
     const [mailboxes, setMailboxes] = useState([]);
     const [requestedMailboxUid, setRequestedMailboxUid] = useState(null);
     const [drawerOpen, setDrawerOpen] = useState(false);
+    // Read from the router's location, so a mailbox change (a link, or `navigate()`) takes effect without a page load - and in an
+    // effect, not during render, so the server render and the hydrating render agree.
+    const search = useLocationSearch();
+    const navigate = useNavigate();
     useEffect(() => {
-        setRequestedMailboxUid(new URLSearchParams(window.location.search).get("mailboxUid"));
-    }, []);
+        setRequestedMailboxUid(new URLSearchParams(search).get("mailboxUid"));
+    }, [search]);
+    // Choosing a folder (or mailbox) changes the URL without a page load now, so the drawer that held the choice - which used to go
+    // with the page - is closed here.
+    useEffect(() => {
+        setDrawerOpen(false);
+    }, [search]);
     useEffect(() => {
         if (!userUid) {
             return;
@@ -94,7 +105,7 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
                                 // `SettingsShellProps.active`), but a plugin page's section is missing when the
                                 // server didn't send its nav item, so that falls back to the current path.
                                 const href = sections.find((s) => s.id === active)?.href ?? window.location.pathname;
-                                window.location.href = `${href}?mailboxUid=${encodeURIComponent(e.target.value)}`;
+                                navigate(`${href}?mailboxUid=${encodeURIComponent(e.target.value)}`);
                             }, children: mailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsx("nav", { "aria-label": "Settings sections", className: "flex flex-col gap-0.5", children: sections.map((section) => (_jsx("a", { 
                         // `inner` (this whole branch) is only ever computed once `status === "ready"`
                         // and `mailboxUid` has already resolved truthy — a falsy `mailboxUid` returns
@@ -109,5 +120,5 @@ export default function SettingsShell({ active, userUid, authServerUrl, imperson
                         ].join(" "), children: section.label }, section.id))) })] }));
         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: "Settings", children: _jsx("div", { className: "flex flex-col gap-3", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 flex flex-col", children: [_jsx("button", { type: "button", className: "md:hidden m-3 self-start w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open settings menu", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(SettingsShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
-    return (_jsx(AppShell, { active: "settings", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, pluginNav: pluginNav, children: inner }));
+    return (_jsx(AppShell, { active: "settings", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner }));
 }