@rapidmx/web-client 0.8.0 → 0.10.0

package/dist/apps/shared/components/mail/compose/ComposeWindowPlaceholder.js

@@ -0,0 +1,33 @@
+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 } from "react";
+import { HiOutlineMinus, HiOutlineXMark } from "react-icons/hi2";
+import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { markComposePhase } from "./composePerf.js";
+/**
+ * What stands in for the compose window in the moment between clicking Compose/Reply/Forward and the window's code being
+ * loaded (already there when it was prefetched, so usually not seen at all): the window's own frame at its own size and
+ * place, its title and the recipients and subject the window will open with, all of which are known without the network -
+ * so the click is answered on the same frame. It is deliberately tiny and lives in the page's own chunk.
+ *
+ * Nothing here can be typed into yet, and there is no draft to save or discard, so Close just closes.
+ */
+export default function ComposeWindowPlaceholder({ session, failed, onRetry, onClose, onToggleMinimize }) {
+    const isMobile = useIsMobile();
+    const title = session.initialSubject?.trim() || "New Message";
+    const titleId = `compose-title-${session.id}`;
+    useEffect(() => markComposePhase(session.id, "shell"), [session.id]);
+    if (session.minimized) {
+        return (_jsx("div", { role: "dialog", "aria-label": title, className: "w-64 shrink-0 bg-surface border border-border border-b-0 rounded-t-md shadow-modal", children: _jsx("div", { className: "h-10 flex items-center justify-between gap-2 px-3 rounded-t-md bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: _jsx("span", { className: "text-sm font-medium truncate", children: title }) }) }));
+    }
+    return (_jsxs("div", { role: "dialog", "aria-labelledby": titleId, "aria-busy": !failed, className: [
+            "relative shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
+            isMobile ? "fixed inset-0 w-full h-full rounded-none border-0" : "border-b-0 rounded-t-md w-[480px] h-[520px]",
+        ].join(" "), children: [_jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx("button", { type: "button", "aria-label": "Minimize", title: "Minimize", onClick: onToggleMinimize, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white", children: _jsx(HiOutlineMinus, { size: 14 }) }), _jsx("button", { type: "button", "aria-label": "Close", title: "Close", onClick: onClose, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white", children: _jsx(HiOutlineXMark, { size: 14 }) })] })] }), failed ? (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: "The compose window couldn\u2019t be loaded. Check your connection and try again." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onRetry, children: "Retry" })] }) })) : (_jsxs("div", { role: "status", className: "flex-1 min-h-0 flex flex-col", children: [_jsx("span", { className: "sr-only", children: "Opening the compose window" }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border text-sm", children: [_jsx("span", { className: "text-text-muted", children: "To" }), _jsx("span", { className: "truncate", children: session.initialTo })] }), _jsx("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border text-sm", children: _jsx("span", { className: "truncate", children: session.initialSubject || _jsx("span", { className: "text-text-muted", children: "Subject" }) }) }), _jsxs("div", { className: "flex-1 p-3 flex flex-col gap-2", "aria-hidden": "true", children: [_jsx(Skeleton, { height: "h-4" }), _jsx(Skeleton, { height: "h-4" }), _jsx(Skeleton, { height: "h-4" })] })] }))] }));
+}

package/dist/apps/shared/components/mail/compose/RichTextEditor.d.ts

@@ -18,6 +18,14 @@ export interface RichTextEditorProps {
      * quote). That normalization happens on the editor's first transaction - even one that only moves the caret -
      * and isn't reported through `onChange`, so a caller can compare later edits against this instead of `value`. */
     onInitialized?: (value: string) => void;
+    /**
+     * HTML to add at the end of the document, once, as soon as there is some (it may be undefined when the editor is created and
+     * defined later). A reply opens its editor before the quoted original has been fetched and hands the quote in through this when
+     * it arrives - so whatever has been typed above stays, and the quote lands where it always did, under the signature.
+     */
+    appendHtml?: string;
+    /** Called with the document as the editor serializes it, right after `appendHtml` was added. */
+    onAppended?: (value: string) => void;
 }
 /**
  * A WYSIWYG rich-text editor for the Compose window's message body — replaces `MonacoHtmlEditor` (an HTML
@@ -40,4 +48,4 @@ export interface RichTextEditorProps {
  * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
  * an editor view actually mounts.
  */
-export default function RichTextEditor({ value, onChange, height, fill, onUploadImage, autoFocusStart, onInitialized, }: RichTextEditorProps): React.JSX.Element;
+export default function RichTextEditor({ value, onChange, height, fill, onUploadImage, autoFocusStart, onInitialized, appendHtml, onAppended, }: RichTextEditorProps): React.JSX.Element;

package/dist/apps/shared/components/mail/compose/RichTextEditor.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { TextStyleKit } from "@tiptap/extension-text-style";
@@ -34,11 +34,14 @@ import ComposeToolbar from "./ComposeToolbar.js";
  * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
  * an editor view actually mounts.
  */
-export default function RichTextEditor({ value, onChange, height = "360px", fill = false, onUploadImage, autoFocusStart = false, onInitialized, }) {
+export default function RichTextEditor({ value, onChange, height = "360px", fill = false, onUploadImage, autoFocusStart = false, onInitialized, appendHtml, onAppended, }) {
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
     const onInitializedRef = useRef(onInitialized);
     onInitializedRef.current = onInitialized;
+    const onAppendedRef = useRef(onAppended);
+    onAppendedRef.current = onAppended;
+    const appendedRef = useRef(undefined);
     // Transactions before `create` (the autofocus, and the normalizing one below) aren't edits.
     const initializedRef = useRef(false);
     // Held for this editor's lifetime: TipTap focuses a tick after creating the editor, and a re-render passing a
@@ -57,6 +60,12 @@ export default function RichTextEditor({ value, onChange, height = "360px", fill
         content: value,
         autofocus,
         immediatelyRender: false,
+        editorProps: {
+            // Ctrl/Cmd+Enter is the compose window's Send. TipTap binds it to a hard break, and a key it handles never reaches the
+            // window's shortcut (which skips what a widget already took), so it inserted a line break and sent nothing. Returning true here
+            // stops ProseMirror handling it without preventing the event, which goes on to the shortcut. Shift+Enter is still the hard break.
+            handleDOMEvents: { keydown: (_view, event) => event.key === "Enter" && (event.ctrlKey || event.metaKey) },
+        },
         onCreate: ({ editor: created }) => {
             // An empty transaction runs the schema's append-transaction normalization now, before any edit.
             created.view.dispatch(created.state.tr);
@@ -69,6 +78,15 @@ export default function RichTextEditor({ value, onChange, height = "360px", fill
             }
         },
     });
+    // Added once, at the end, whatever the reader has typed meanwhile (the caret stays where it is).
+    useEffect(() => {
+        if (!editor || appendHtml === undefined || appendedRef.current === appendHtml) {
+            return;
+        }
+        appendedRef.current = appendHtml;
+        editor.commands.insertContentAt(editor.state.doc.content.size, appendHtml);
+        onAppendedRef.current?.(editor.getHTML());
+    }, [editor, appendHtml]);
     return (_jsxs("div", { className: ["border border-border rounded-sm overflow-hidden", fill ? "h-full flex flex-col" : ""].filter(Boolean).join(" "), children: [_jsx(ComposeToolbar, { editor: editor, onUploadImage: onUploadImage }), _jsx(EditorContent, { editor: editor, style: fill ? undefined : { height }, className: [
                     "overflow-y-auto px-3 py-2 text-sm [&_.tiptap]:outline-none [&_.tiptap]:h-full",
                     fill ? "flex-1 min-h-0" : "",

package/dist/apps/shared/components/mail/compose/SendFailureAlert.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface SendFailureAlertProps {
+    /** The plain, human message - always shown. */
+    message: string;
+    /** The technical facts behind it (`describeSendFailure().lines`): per-recipient SMTP results, a transport error.
+     * With none, only the message is shown. */
+    lines: string[];
+}
+/**
+ * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
+ * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
+ * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
+ */
+export default function SendFailureAlert({ message, lines }: SendFailureAlertProps): React.JSX.Element;

package/dist/apps/shared/components/mail/compose/SendFailureAlert.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
+/**
+ * The banner a compose window shows when a send (or scheduled send) fails: the plain message, prominent, and - when the
+ * server said more - a collapsed "Technical details" block of monospace lines, one per fact, that can be selected or
+ * copied in one go to send to whoever runs the server. Collapsed, because most people only need the message.
+ */
+export default function SendFailureAlert({ message, lines }) {
+    return (_jsx(Alert, { children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "font-semibold break-words", children: message }), lines.length > 0 && (_jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs font-semibold", children: "Technical details" }), _jsx("ul", { "aria-label": "Technical details", className: "mt-2 max-h-40 overflow-auto rounded-sm border border-border bg-surface p-2 text-xs font-mono text-text select-text", children: lines.map((line, index) => (_jsx("li", { className: "whitespace-pre-wrap break-words", children: line }, index))) }), _jsx("div", { className: "mt-2", children: _jsx(CopyButton, { value: lines.join("\n"), label: "Copy technical details" }) })] }))] }) }));
+}

package/dist/apps/shared/components/mail/compose/composePerf.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `performance.mark()`/`measure()` around the phases between clicking Compose/Reply/Forward and the window being usable,
+ * for the browser's Performance panel (or `performance.getEntriesByType("measure")`). Marks are named
+ * `compose:<window id>:<phase>`; the measures are named `compose:<from>-><to>` and carry the window id in `detail`.
+ *
+ * Phases, in order: `click` (the handler ran), `shell` (the window's frame is on screen - the placeholder, or the real
+ * window once its chunk has loaded), `chunk` (the window's code has loaded and rendered), `body` (the seeded body -
+ * signature and quoted original - is ready), `editor` (the editor has mounted and can be typed into), `draft` (the server
+ * draft exists).
+ *
+ * On in development builds, and in a production build when `window.__RAPIDMX_PERF__` is set to `true` (from the console:
+ * `window.__RAPIDMX_PERF__ = true`). Off otherwise, when each call is a no-op.
+ */
+export type ComposePhase = "click" | "shell" | "chunk" | "body" | "editor" | "draft";
+/** Marks `phase` of window `id` once (later calls for the same phase are ignored), and measures it from `click`. */
+export declare function markComposePhase(id: string, phase: ComposePhase): void;

package/dist/apps/shared/components/mail/compose/composePerf.js

@@ -0,0 +1,41 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * `performance.mark()`/`measure()` around the phases between clicking Compose/Reply/Forward and the window being usable,
+ * for the browser's Performance panel (or `performance.getEntriesByType("measure")`). Marks are named
+ * `compose:<window id>:<phase>`; the measures are named `compose:<from>-><to>` and carry the window id in `detail`.
+ *
+ * Phases, in order: `click` (the handler ran), `shell` (the window's frame is on screen - the placeholder, or the real
+ * window once its chunk has loaded), `chunk` (the window's code has loaded and rendered), `body` (the seeded body -
+ * signature and quoted original - is ready), `editor` (the editor has mounted and can be typed into), `draft` (the server
+ * draft exists).
+ *
+ * On in development builds, and in a production build when `window.__RAPIDMX_PERF__` is set to `true` (from the console:
+ * `window.__RAPIDMX_PERF__ = true`). Off otherwise, when each call is a no-op.
+ */
+function enabled() {
+    if (typeof performance === "undefined" || typeof performance.mark !== "function") {
+        return false;
+    }
+    return import.meta.env?.DEV === true || globalThis.__RAPIDMX_PERF__ === true;
+}
+/** The compose sessions a `click` mark was made for, so the first mark of each phase is the only one that counts. */
+const marked = new Set();
+/** Marks `phase` of window `id` once (later calls for the same phase are ignored), and measures it from `click`. */
+export function markComposePhase(id, phase) {
+    if (!enabled()) {
+        return;
+    }
+    const key = `compose:${id}:${phase}`;
+    if (marked.has(key)) {
+        return;
+    }
+    marked.add(key);
+    performance.mark(key);
+    const start = `compose:${id}:click`;
+    if (phase !== "click" && marked.has(start)) {
+        performance.measure(`compose:click->${phase}`, { start, end: key, detail: { id } });
+    }
+}

package/dist/apps/shared/components/mail/compose/quotedBody.d.ts

@@ -9,6 +9,19 @@ export interface OriginalMessage {
      * be. Only asked for by Reply All (see `loadOriginalMessage()`). */
     recipients?: Recipient[];
 }
+/** How long a reply waits for the original's body before it goes ahead with the preview - a slow or hung request must not
+ * leave the window waiting on it (or, before it opened at once, keep it from opening) indefinitely. */
+export declare const QUOTE_FETCH_TIMEOUT_MS = 10000;
+/** How long a fetched (or prefetched) body is remembered, so hovering Reply and then clicking it costs one request. */
+export declare const QUOTE_CACHE_MS = 30000;
+/**
+ * Starts fetching what a Reply/Forward of `message` will quote, without waiting for the click - called when the pointer or
+ * keyboard reaches a Reply/Reply All/Forward button - so the request is usually already answered when it is clicked.
+ * Nothing to fetch for an encrypted message (`loadOriginalMessage()` never asks the server for one's body).
+ */
+export declare function prefetchOriginalMessage(message: Message): void;
+/** Forgets every remembered body (the sign-out and test seam). */
+export declare function clearOriginalMessageCache(): void;
 /**
  * Loads what a Reply/Reply All/Forward needs from `message`: the full body to quote - the same content
  * `MessageDetailPane` shows, never the truncated `bodyPreview` unless nothing else can be had - and, with

package/dist/apps/shared/components/mail/compose/quotedBody.js

@@ -6,6 +6,66 @@ import { apiUrl } from "@rapidmx/react-shared/util/api.js";
 import { getMessageRawContent } from "@rapidmx/react-shared/mail/mailApi.js";
 import { decodeHeaderText, extractDisplayBody, parseMimeEntity } from "@rapidmx/react-shared/crypto/mime.js";
 import { parseRecipientList } from "./recipients.js";
+/** How long a reply waits for the original's body before it goes ahead with the preview - a slow or hung request must not
+ * leave the window waiting on it (or, before it opened at once, keep it from opening) indefinitely. */
+export const QUOTE_FETCH_TIMEOUT_MS = 10000;
+/** How long a fetched (or prefetched) body is remembered, so hovering Reply and then clicking it costs one request. */
+export const QUOTE_CACHE_MS = 30000;
+const contentCache = new Map();
+/**
+ * The server's sanitized HTML body of a message (`GET /mail/messages/:id/content`), or `undefined` when it has none (a
+ * `text/plain` message is answered with its preview instead) or the request failed or timed out. Never rejects. Remembered
+ * for `QUOTE_CACHE_MS` - except a failure, which is asked again the next time.
+ */
+function fetchContentHtml(uid) {
+    const cached = contentCache.get(uid);
+    if (cached && Date.now() - cached.at < QUOTE_CACHE_MS) {
+        return cached.promise;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), QUOTE_FETCH_TIMEOUT_MS);
+    const promise = (async () => {
+        try {
+            const res = await fetch(apiUrl(`/mail/messages/${encodeURIComponent(uid)}/content`), { credentials: "include", signal: controller.signal });
+            return res.ok && (res.headers.get("content-type") ?? "").includes("text/html") ? await res.text() : undefined;
+        }
+        catch {
+            return undefined;
+        }
+        finally {
+            clearTimeout(timer);
+        }
+    })();
+    contentCache.set(uid, { at: Date.now(), promise });
+    void promise.then((html) => {
+        if (html === undefined && contentCache.get(uid)?.promise === promise) {
+            contentCache.delete(uid);
+        }
+    });
+    return promise;
+}
+/** Rejects when `promise` hasn't settled within `ms` (`getMessageRawContent()` takes no `AbortSignal`, so it is raced rather than aborted). */
+function withTimeout(promise, ms) {
+    let timer;
+    const timeout = new Promise((_resolve, reject) => {
+        timer = setTimeout(() => reject(new Error("Timed out.")), ms);
+    });
+    return Promise.race([promise, timeout]).finally(() => clearTimeout(timer));
+}
+/**
+ * Starts fetching what a Reply/Forward of `message` will quote, without waiting for the click - called when the pointer or
+ * keyboard reaches a Reply/Reply All/Forward button - so the request is usually already answered when it is clicked.
+ * Nothing to fetch for an encrypted message (`loadOriginalMessage()` never asks the server for one's body).
+ */
+export function prefetchOriginalMessage(message) {
+    if (!message.encrypted) {
+        void fetchContentHtml(message.uid);
+    }
+}
+/** Forgets every remembered body (the sign-out and test seam). */
+export function clearOriginalMessageCache() {
+    contentCache.clear();
+}
 /** The recipients one address-list header names, RFC 2047-decoded, with their display names. */
 function headerRecipients(value, type) {
     if (!value) {
@@ -50,23 +110,19 @@ export async function loadOriginalMessage(message, security, options = {}) {
     }
     let needsRaw = !!options.recipients && result.recipients === undefined;
     if (!recovered) {
-        try {
-            const res = await fetch(apiUrl(`/mail/messages/${encodeURIComponent(message.uid)}/content`), { credentials: "include" });
-            if (res.ok && (res.headers.get("content-type") ?? "").includes("text/html")) {
-                result.body = { html: await res.text() };
-            }
-            else {
-                needsRaw = true;
-            }
+        // Never rejects; nothing (a plain-text message, a failure, a timeout) leaves the raw message below as the other way
+        // to the body.
+        const html = await fetchContentHtml(message.uid);
+        if (html !== undefined) {
+            result.body = { html };
         }
-        catch {
-            // The raw message below is the other way to the body.
+        else {
             needsRaw = true;
         }
     }
     try {
         if (needsRaw) {
-            const entity = parseMimeEntity(await getMessageRawContent(message.uid));
+            const entity = parseMimeEntity(await withTimeout(getMessageRawContent(message.uid), QUOTE_FETCH_TIMEOUT_MS));
             if (!recovered && result.body.html === undefined) {
                 const body = extractDisplayBody(entity);
                 result.body = body.html !== undefined ? { html: body.html } : body.text !== undefined ? { text: body.text } : {};

package/dist/apps/shared/components/mail/layout/MailShell.d.ts

@@ -1,6 +1,9 @@
 import React, { PropsWithChildren } from "react";
-import { Folder, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Folder, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { AppShellProps } from "../../layout/AppShell.js";
+import { LiveUpdates } from "../../../mail/useMailLiveUpdates.js";
+import { MAILBOX_LIST_LIMIT } from "../../../mail/useMailConnection.js";
+import { CountTracker } from "../../../mail/folderCounts.js";
 export type MailShellProps = Omit<AppShellProps, "active">;
 /** One mailbox's own mail folders (already filtered to `MAIL_FOLDER_TYPES` and unsorted) - one entry per
  * mailbox in `mailboxes`, fetched in parallel so every accessible mailbox's folder tree can render
@@ -41,11 +44,23 @@ export interface MailShellContextValue {
      * A no-op on the default context value, which is only ever read outside a real shell.
      */
     onFolderCreated: (folder: Folder) => void;
+    /**
+     * Bumped whenever new mail (or another change to a message) may have arrived - a push event, a reconnect or the safety-net
+     * poll - so the list on screen can quietly refetch its first page. See `useMailLiveUpdates()`. Never changes on the default
+     * context value, which is only ever read outside a real shell.
+     */
+    live: LiveUpdates;
+    /**
+     * Applies a change to a message (`previous` to `next`; `next` absent when it was deleted) to the folder badges at once, and
+     * hands back what to call when the server has answered: `settle()` keeps it, `revert()` takes it back. Every place that
+     * reads, moves or deletes a message goes through this (see `setReadState()`), so the badges follow. A no-op on the default
+     * context value, which is only ever read outside a real shell.
+     */
+    trackMessageChange: (previous: Message, next: Message | null) => CountTracker;
 }
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
 export declare function useMailShell(): MailShellContextValue;
-/** Page size of the one `listMailboxes()` call this shell makes. */
-export declare const MAILBOX_LIST_LIMIT = 100;
+export { MAILBOX_LIST_LIMIT };
 /**
  * Mail's own contextual sidebar (every accessible mailbox's own folder tree, plus a merged "All Mailboxes"
  * aggregate section) + content area, rendered inside the shared `AppShell` chrome (icon rail, header,
@@ -62,4 +77,4 @@ export declare const MAILBOX_LIST_LIMIT = 100;
  * aggregate section) simultaneously, matching the shared-mailbox feature's own "display as a separate set
  * of folders" requirement.
  */
-export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }: PropsWithChildren<MailShellProps>): React.JSX.Element;
+export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }: PropsWithChildren<MailShellProps>): React.JSX.Element;