@rapidmx/web-client 0.10.0 → 0.12.0

package/apps/shared/signing/signingInfo.ts

@@ -0,0 +1,58 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { SigningEnrollmentInfo, getSigningEnrollmentInfo } from "@rapidmx/react-shared/crypto/signingProviderApi.js";
+
+// The type and the request both come from react-shared's `signingProviderApi.js` (R6's) - this module only adds the caching, the
+// never-rejects contract and the hook that Settings > Encryption and its card want. Re-exported so the rest of `signing/` and
+// `SigningCertificateCard` keep importing `SigningEnrollmentInfo` from here rather than reaching into react-shared directly.
+export type { SigningEnrollmentInfo };
+
+/** How long an answer is reused: the page asks once when it opens, and again after this if it is opened again. */
+export const SIGNING_INFO_CACHE_MS = 5 * 60_000;
+
+let cached: { at: number; promise: Promise<SigningEnrollmentInfo | null> } | undefined;
+
+/** The deployment's signing-enrollment description, or `null` when it cannot be had (an older server with no such endpoint, offline,
+ * anything) - never rejects. One request at a time, reused for five minutes. */
+export function fetchSigningEnrollmentInfo(now: number = Date.now()): Promise<SigningEnrollmentInfo | null> {
+    if (cached && now - cached.at < SIGNING_INFO_CACHE_MS) {
+        return cached.promise;
+    }
+    const promise = getSigningEnrollmentInfo().catch(() => null);
+    cached = { at: now, promise };
+    // An answer that could not be had is not worth remembering: the next visit asks again.
+    void promise.then((info) => {
+        if (info === null && cached?.promise === promise) {
+            cached = undefined;
+        }
+    });
+    return promise;
+}
+
+/** Forgets the remembered answer: for tests, which share the module. */
+export function resetSigningInfo(): void {
+    cached = undefined;
+}
+
+/** The deployment's description, once it is known: `undefined` while it is being asked for, `null` when there is none. Asks only while `enabled`. */
+export function useSigningEnrollmentInfo(enabled: boolean): SigningEnrollmentInfo | null | undefined {
+    const [info, setInfo] = useState<SigningEnrollmentInfo | null | undefined>(undefined);
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        let cancelled = false;
+        void fetchSigningEnrollmentInfo().then((answer) => {
+            if (!cancelled) {
+                setInfo(answer);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [enabled]);
+    return info;
+}

package/apps/shared/signing/useNow.ts

@@ -0,0 +1,19 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+
+/** The current time in epoch ms, re-read every `intervalMs` while `enabled` - for "3 min ago" texts and countdowns that keep themselves right. */
+export function useNow(intervalMs: number, enabled = true): number {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), intervalMs);
+        return () => clearInterval(timer);
+    }, [intervalMs, enabled]);
+    return now;
+}

package/apps/shared/signing/useSigningEnrollmentWatcher.ts

@@ -0,0 +1,90 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef } from "react";
+import type { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { getCurrentSignEnrollment } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { notify } from "../notifications/store.js";
+import { readStoredSignEnrollment, storeSignEnrollment } from "./enrollmentStorage.js";
+import { EnrollmentSnapshot, onEnrollmentEnded, watchCurrentEnrollment, watchEnrollment } from "./enrollmentTracker.js";
+import { formatDate, isInstalling } from "./enrollmentView.js";
+
+/** Where the pop-up's action leads: the page that shows the certificate. */
+export const SIGNING_SETTINGS_HREF = "/settings/encryption";
+
+/**
+ * Tells the user, wherever they are in the app, when a signing certificate they asked for is issued or has failed. Lives in the persistent app
+ * frame (`AppChrome`): for each mailbox the user owns it follows the enrollment this browser has a stored id for and - for one started on another
+ * device - the one the server names as the mailbox's current enrollment when it is still pending (`GET .../sign-enrollment`; an older server
+ * answers 404 and nothing is followed). Reading, backoff and visibility rules are the tracker's (`enrollmentTracker.ts`), shared with the
+ * Settings > Encryption card, so an enrollment is asked about once. The pop-up is raised once per enrollment (`dedupeKey`) and only for one that
+ * was seen pending - never for a certificate issued long ago.
+ */
+export function useSigningEnrollmentWatcher({ userUid, mailboxes, enabled }: { userUid?: string; mailboxes: Mailbox[]; enabled: boolean }): void {
+    const mailboxesRef = useRef(mailboxes);
+    mailboxesRef.current = mailboxes;
+    // Keyed on the uids of the mailboxes the user owns: a refreshed list of the same mailboxes must not start over.
+    const ownedKey = mailboxes
+        .filter((mailbox) => mailbox.ownerUserUid === userUid)
+        .map((mailbox) => mailbox.uid)
+        .join("|");
+
+    useEffect(() => {
+        if (!enabled || !userUid || !ownedKey) {
+            return;
+        }
+        let cancelled = false;
+        const releases: (() => void)[] = [];
+        for (const mailboxUid of ownedKey.split("|")) {
+            const storedId = readStoredSignEnrollment(mailboxUid);
+            if (storedId) {
+                releases.push(watchEnrollment(mailboxUid, storedId));
+                continue;
+            }
+            // Never throws or rejects: a lookup that cannot be made (an older server, offline, anything) is "nothing is pending", and the frame goes on.
+            void (async () => {
+                try {
+                    const current = await getCurrentSignEnrollment(mailboxUid);
+                    if (!cancelled && current?.status === "pending") {
+                        storeSignEnrollment(mailboxUid, current.enrollmentId);
+                        releases.push(watchCurrentEnrollment(mailboxUid, current));
+                    }
+                } catch {
+                    // Nothing to follow.
+                }
+            })();
+        }
+        const stopListening = onEnrollmentEnded((snapshot) => announce(snapshot, mailboxesRef.current));
+        return () => {
+            cancelled = true;
+            stopListening();
+            releases.forEach((release) => release());
+        };
+    }, [enabled, userUid, ownedKey]);
+}
+
+/** The pop-up for an enrollment that just ended - issued or failed (the tracker announces nothing else, and always with its answer). */
+function announce(snapshot: EnrollmentSnapshot, mailboxes: Mailbox[]): void {
+    const address = mailboxes.find((mailbox) => mailbox.uid === snapshot.mailboxUid)?.primarySmtpAddress;
+    const result = snapshot.result!;
+    if (result.status === "issued") {
+        notify({
+            kind: "success",
+            title: "Digital signature certificate issued",
+            message: isInstalling(result)
+                ? `The certificate for ${address ?? "your mailbox"} is issued and is being installed - mail is signed once it is (a few minutes).`
+                : `${address ? `Mail from ${address}` : "Your mail"} is now signed${result.notAfter ? ` (valid until ${formatDate(result.notAfter)})` : ""}.`,
+            actions: [{ label: "View", href: SIGNING_SETTINGS_HREF }],
+            dedupeKey: `sign-enrollment:${snapshot.enrollmentId}`,
+        });
+    } else {
+        notify({
+            kind: "error",
+            title: "Digital signature certificate could not be issued",
+            message: result.error ?? "The certificate authority did not issue a certificate.",
+            actions: [{ label: result.retryable === false ? "Details" : "Try again", href: SIGNING_SETTINGS_HREF }],
+            dedupeKey: `sign-enrollment:${snapshot.enrollmentId}`,
+        });
+    }
+}

package/apps/shared/styles/app.css

@@ -304,3 +304,83 @@ h6 {
         transform: none;
     }
 }
+
+/* The frame's own background: the page's `surface-alt`, unless the user has chosen a background (`appearance/theme.ts` then sets `--rr-frame-bg`
+ * to `transparent` so the fixed background layer - `html::before`/`html::after` - shows through instead). */
+.rr-frame-bg {
+    background-color: var(--rr-frame-bg, var(--rr-color-surface-alt));
+}
+
+/* With a background set, `--color-surface` and `--color-surface-alt` (what `bg-surface` and `bg-surface-alt` read) are translucent panels
+ * (`appearance/theme.ts`). Anything that must stay readable on its own - menus, dialogs, drawers, list pop-ups and the pop-ups - takes the
+ * opaque colours back for itself and everything inside it, and so does anything that stays put while a page scrolls under it (`.rr-solid`: the
+ * sticky title bar, the branding header, the phone's bottom tab bar), or the text beneath would show through it. Without a background these two declarations change nothing. */
+[role="menu"],
+[role="dialog"],
+[role="listbox"],
+.rr-toast-in,
+.rr-solid,
+[data-branding-header],
+nav[aria-label="Mobile navigation"] {
+    --color-surface: var(--rr-color-surface);
+    --color-surface-alt: var(--rr-color-surface-alt);
+}
+
+/* The slot a branding header or footer's `{USER_MENU}` becomes (`BrandingChrome.tsx`): the account menu's button sits in the line of text
+ * the variable was written in. */
+[data-rr-slot="user-menu"] {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+}
+
+/* The Outbox pill's "something is on its way" dot (`OutboxBadge`). Still when the user asks for less motion. */
+@media (prefers-reduced-motion: no-preference) {
+    .rr-sending-dot {
+        animation: rr-sending-dot 1.1s ease-in-out infinite;
+    }
+}
+@keyframes rr-sending-dot {
+    0%,
+    100% {
+        opacity: 0.35;
+        transform: scale(0.8);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.15);
+    }
+}
+
+/* The signing-certificate card's progress bar (`SigningCertificateCard`): a soft highlight sweeping across the filled part while a step is active, and
+ * an endless slide for a bar with no number. Both stand still when the user asks for less motion (the indeterminate bar then shows as a faded full bar). */
+.rr-progress-shimmer {
+    position: relative;
+    overflow: hidden;
+}
+@media (prefers-reduced-motion: no-preference) {
+    .rr-progress-shimmer::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.45), transparent);
+        transform: translateX(-100%);
+        animation: rr-progress-shimmer 1.6s ease-in-out infinite;
+    }
+    .rr-progress-indeterminate {
+        animation: rr-progress-slide 1.4s ease-in-out infinite;
+    }
+}
+@keyframes rr-progress-shimmer {
+    to {
+        transform: translateX(100%);
+    }
+}
+@keyframes rr-progress-slide {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(300%);
+    }
+}

package/apps/www/_layout.tsx

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { PropsWithChildren } from "react";
 import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { AppearanceHead, appearanceHtmlAttributes } from "../shared/appearance/AppearanceHead.js";
 import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
 
 export interface LayoutProps {
@@ -16,15 +17,19 @@ export interface LayoutProps {
      * which doesn't receive props at all - falling back to the stock defaults there is acceptable.
      */
     branding?: Branding;
+    /** The signed-in user's stored appearance preferences (a page prop from the same `fetchProps()`, present only on the www pages and only when the user has any): rendered as a stylesheet in the `<head>` so the very first paint is themed - see `AppearanceHead`. */
+    appearance?: unknown;
+    /** The signed-in user (supplied by the framework), so a cached appearance from another account on this browser is never applied. */
+    userUid?: string;
 }
 
-export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>) {
+export default function Layout({ children, branding, appearance, userUid }: PropsWithChildren<LayoutProps>) {
     const title = branding?.title || branding?.companyName ? `${branding?.title || branding?.companyName}: Mail` : "RapidMX: Mail";
     const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
     const stylesheetHref = branding?.stylesheetUrl;
 
     return (
-        <html lang="en">
+        <html lang="en" {...appearanceHtmlAttributes(appearance, userUid)}>
             <head>
                 <meta charSet="utf-8" />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -38,6 +43,7 @@ export default function Layout({ children, branding }: PropsWithChildren<LayoutP
                     href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
                 />
                 {stylesheetHref && <link rel="stylesheet" href={stylesheetHref} id={CUSTOM_STYLESHEET_LINK_ID} />}
+                <AppearanceHead appearance={appearance} />
             </head>
             <body>{children}</body>
         </html>

package/apps/www/_routes.ts

@@ -20,6 +20,7 @@ export const wwwRoutes: readonly RouteDefinition[] = [
     { path: "/contacts", active: "contacts", load: () => import("./contacts/index.js"), idlePrefetch: true },
     { path: "/contacts/:uid", active: "contacts", load: () => import("./contacts/[uid].js") },
     { path: "/tasks", active: "tasks", load: () => import("./tasks/index.js"), idlePrefetch: true },
+    { path: "/settings/appearance", active: "settings", load: () => import("./settings/appearance/index.js") },
     { path: "/settings/auto-reply", active: "settings", load: () => import("./settings/auto-reply/index.js") },
     { path: "/settings/encryption", active: "settings", load: () => import("./settings/encryption/index.js") },
     { path: "/settings/filters", active: "settings", load: () => import("./settings/filters/index.js") },

package/apps/www/calendar/index.tsx

@@ -40,6 +40,7 @@ import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import { SHORTCUTS, ShortcutDef } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
+import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 
 function CalendarPage(props: CalendarShellProps) {
     return (
@@ -109,7 +110,6 @@ function CalendarContent({ userUid }: { userUid?: string }) {
     const [events, setEvents] = useState<CalendarEvent[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
-    const [actionError, setActionError] = useState<string | null>(null);
     const [modal, setModal] = useState<ModalState | null>(null);
     // `null` means "not yet customized by the user" — every calendar is treated as checked without
     // needing to be seeded from `calendarFolders` the moment it loads (see `checkedFolderUids` below).
@@ -317,7 +317,6 @@ function CalendarContent({ userUid }: { userUid?: string }) {
         if (!action) {
             return;
         }
-        setActionError(null);
         try {
             if (action.type === "move") {
                 await moveOccurrence(action.occurrence, action.deltaMs);
@@ -326,7 +325,7 @@ function CalendarContent({ userUid }: { userUid?: string }) {
             }
             reload();
         } catch (err) {
-            setActionError(err instanceof ApiRequestError ? err.message : "Could not update this event.");
+            notifyApiError(err, action.type === "move" ? "Couldn't move the event" : "Couldn't resize the event");
         }
     }
 
@@ -365,16 +364,17 @@ function CalendarContent({ userUid }: { userUid?: string }) {
     );
 
     return (
-        <div className="flex-1 flex min-h-0">
-            <div className="hidden md:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto">{sidebarContent}</div>
+        <div className="flex-1 min-w-0 flex min-h-0">
+            <div className="hidden lg:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto">{sidebarContent}</div>
             <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Calendars">
                 <div className="flex flex-col">{sidebarContent}</div>
             </Drawer>
-            <div className="flex-1 flex flex-col min-h-0">
-                <div className="flex items-center gap-3 p-3 border-b border-border shrink-0">
+            {/* `min-w-0`: without it the column is as wide as its widest row (the toolbar, the month grid) and runs off the window instead of the row wrapping. */}
+            <div className="flex-1 min-w-0 flex flex-col min-h-0">
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-2 p-3 border-b border-border shrink-0">
                     <button
                         type="button"
-                        className="md:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0"
+                        className="lg:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0"
                         aria-label="Open calendars"
                         onClick={() => setDrawerOpen(true)}
                     >
@@ -395,7 +395,7 @@ function CalendarContent({ userUid }: { userUid?: string }) {
                         </button>
                     </div>
                     <h1 className="hidden md:block text-lg font-bold tracking-tight">{title}</h1>
-                    <div className="ml-auto flex gap-1 overflow-x-auto">
+                    <div className="ml-auto flex flex-wrap gap-1">
                         {VIEW_TYPES.map((v) => (
                             <ViewButton key={v} view={v} current={view} onSelect={setView} />
                         ))}
@@ -407,11 +407,6 @@ function CalendarContent({ userUid }: { userUid?: string }) {
                         <Alert>{error}</Alert>
                     </div>
                 )}
-                {actionError && (
-                    <div className="p-3">
-                        <Alert>{actionError}</Alert>
-                    </div>
-                )}
 
                 {loading ? (
                     <p className="p-4 text-sm text-text-muted">Loading&hellip;</p>

package/apps/www/contacts/[uid].tsx

@@ -12,6 +12,7 @@ import ContactDetailPane from "../../shared/components/contacts/ContactDetailPan
 import ContactForm from "../../shared/components/contacts/ContactForm.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import { clearPinnedSignerCache } from "../../shared/components/mail/pinnedSigners.js";
+import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 
 /**
  * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
@@ -34,9 +35,6 @@ function ContactDetailContent({ uid }: { uid: string }) {
     const [contact, setContact] = useState<Contact | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
-    // Kept apart from the load `error` - a failed delete must leave the contact on screen (with the
-    // reason) rather than replacing the whole page with an error as if it had never loaded.
-    const [deleteError, setDeleteError] = useState<string | null>(null);
     const [mode, setMode] = useState<Mode>("view");
 
     useEffect(() => {
@@ -53,14 +51,14 @@ function ContactDetailContent({ uid }: { uid: string }) {
     // rendered once `contact` is already resolved (see the `error || !contact` guard above it), so this
     // never runs with a stale/absent contact — no redundant null check needed here.
     async function handleDelete(contact: Contact) {
-        setDeleteError(null);
         try {
             await deleteContact(contact.uid, contact.version);
             // A deleted contact's pinned signing keys must stop vouching for signatures.
             clearPinnedSignerCache();
             navigate("/contacts");
         } catch (err) {
-            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
+            // A pop-up: a failed delete leaves the contact on screen rather than replacing the page with an error.
+            notifyApiError(err, "Couldn't delete the contact");
         }
     }
 
@@ -79,8 +77,8 @@ function ContactDetailContent({ uid }: { uid: string }) {
     const backHref = "/contacts";
     if (mode === "edit") {
         return (
-            <div className="p-6">
-                <a href={backHref} className="text-sm text-primary-dark hover:underline block mb-4">
+            <div>
+                <a href={backHref} className="text-sm text-primary-dark hover:underline block px-6 pt-6">
                     &larr; Back to contacts
                 </a>
                 <ContactForm
@@ -97,7 +95,6 @@ function ContactDetailContent({ uid }: { uid: string }) {
 
     return (
         <div className="p-6">
-            {deleteError && <Alert>{deleteError}</Alert>}
             <ContactDetailPane
                 contact={contact}
                 onEdit={() => setMode("edit")}