@rapidmx/web-client 0.14.1 → 0.16.0

package/dist/apps/shared/components/admin/mailboxes/LeftoverMailboxesSection.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listLeftoverMailboxes } from "@rapidmx/react-shared/admin/leftoverMailboxApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import EraseLeftoverDataDialog from "./EraseLeftoverDataDialog.js";
+/** How many deleted mailboxes one request asks for. */
+const PAGE_SIZE = 50;
+/** How often the list is refreshed while an erasure is under way. */
+export const LEFTOVER_REFRESH_INTERVAL_MS = 5000;
+const HEADING_CLASS = "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border";
+const CELL_CLASS = "py-2.5 px-2.5 border-b border-border align-middle";
+/** Whether the erasure the server last filed for `item` is still to finish. */
+function isErasing(item) {
+    return item.erasure?.status === "approved" || item.erasure?.status === "in_progress";
+}
+/**
+ * "Deleted mailboxes with remaining data": deleting a mailbox keeps everything in it, and the address can't be used again until
+ * that is erased, so this lists what is left (from `GET /mailboxes/leftover`) with an "Erase data" action for each. It shows nothing
+ * at all while there is nothing left - the section is only there when it is needed. An erasure that is under way shows as such, and
+ * the list refreshes itself until it has finished.
+ */
+export default function LeftoverMailboxesSection({ refreshIntervalMs = LEFTOVER_REFRESH_INTERVAL_MS, pollIntervalMs }) {
+    const [items, setItems] = useState([]);
+    const [next, setNext] = useState(undefined);
+    const [error, setError] = useState(null);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [target, setTarget] = useState(null);
+    // Only the newest reload is applied: a slow earlier one can't put back what a later one already removed.
+    const generation = useRef(0);
+    async function reload() {
+        const current = ++generation.current;
+        try {
+            const page = await listLeftoverMailboxes({ limit: PAGE_SIZE });
+            if (current !== generation.current)
+                return;
+            setItems(page.items);
+            setNext(page.next);
+            setError(null);
+        }
+        catch (err) {
+            if (current === generation.current) {
+                setError(err instanceof ApiRequestError ? err.message : "Could not check for deleted mailboxes with remaining data.");
+            }
+        }
+    }
+    async function loadMore() {
+        const current = generation.current;
+        setLoadingMore(true);
+        try {
+            const page = await listLeftoverMailboxes({ limit: PAGE_SIZE, after: next });
+            if (current !== generation.current)
+                return;
+            setItems((existing) => [...existing, ...page.items.filter((item) => !existing.some((seen) => seen.mailboxUid === item.mailboxUid))]);
+            setNext(page.next);
+        }
+        catch (err) {
+            if (current === generation.current) {
+                setError(err instanceof ApiRequestError ? err.message : "Could not load more deleted mailboxes.");
+            }
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }
+    useEffect(() => {
+        void reload();
+    }, []);
+    const anyErasing = items.some(isErasing);
+    useEffect(() => {
+        if (!anyErasing) {
+            return;
+        }
+        const timer = setInterval(() => void reload(), refreshIntervalMs);
+        return () => clearInterval(timer);
+    }, [anyErasing, refreshIntervalMs]);
+    // Only there when something is left (or the check failed).
+    const section = items.length > 0 || error !== null ? (_jsxs("section", { className: "mt-10", "aria-labelledby": "leftover-heading", children: [_jsx("h2", { id: "leftover-heading", className: "text-sm font-bold uppercase tracking-wide text-text-muted mb-2", children: "Deleted mailboxes with remaining data" }), _jsx("p", { className: "text-sm text-text-muted mb-3", children: "Deleting a mailbox keeps everything in it, and its address can\u2019t be used for a new mailbox until that data is erased. Erasing is permanent." }), error && _jsx(Alert, { children: error }), items.length > 0 && (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("caption", { className: "sr-only", children: "Deleted mailboxes with remaining data" }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: HEADING_CLASS, children: "Address" }), _jsx("th", { scope: "col", className: HEADING_CLASS, children: "Folders" }), _jsx("th", { scope: "col", className: HEADING_CLASS, children: "Messages" }), _jsx("th", { scope: "col", className: HEADING_CLASS, children: "Erasure" }), _jsx("th", { scope: "col", className: "border-b border-border", children: _jsx("span", { className: "sr-only", children: "Actions" }) })] }) }), _jsx("tbody", { children: items.map((item) => (_jsxs("tr", { children: [_jsx("td", { className: `${CELL_CLASS} break-all`, children: item.mailboxUid }), _jsx("td", { className: CELL_CLASS, children: item.folderCount }), _jsx("td", { className: CELL_CLASS, children: item.messageCount }), _jsx("td", { className: CELL_CLASS, children: isErasing(item) ? (_jsx("span", { className: "inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Erasing" })) : (_jsx("span", { className: "text-text-muted", children: "Not erased" })) }), _jsx("td", { className: `${CELL_CLASS} text-right`, children: _jsx(Button, { type: "button", variant: "secondary", className: isErasing(item) ? "!w-auto" : "!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger", "aria-label": `${isErasing(item) ? "Show the erasure of" : "Erase data of"} ${item.mailboxUid}`, onClick: () => setTarget(item), children: isErasing(item) ? "Show progress" : "Erase data" }) })] }, item.mailboxUid))) })] }) })), next !== undefined && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", loading: loadingMore, disabled: loadingMore, onClick: () => void loadMore(), children: "Load more" }))] })) : null;
+    // The dialog outlives the row it was opened from - erasing the last one empties the list while its "erased" message is still up - and
+    // keeps its place among the fragment's children whether or not the section is there, so it is not rebuilt (and does not lose where it
+    // is) when the section goes.
+    const dialog = target && (_jsx(EraseLeftoverDataDialog, { address: target.mailboxUid, counts: { folders: target.folderCount, messages: target.messageCount }, resume: isErasing(target) && target.erasure ? { uid: target.erasure.uid, status: target.erasure.status } : undefined, pollIntervalMs: pollIntervalMs, onErased: () => void reload(), onClose: () => {
+            setTarget(null);
+            void reload();
+        } }, target.mailboxUid));
+    return (_jsxs(_Fragment, { children: [section, dialog] }));
+}

package/dist/apps/shared/components/admin/settings/BrandingForm.js

@@ -12,9 +12,9 @@ import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
 /** A header that uses both variables - the snippet the Branding page offers to copy. */
-export const HEADER_HTML_EXAMPLE = `<div style="display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem">
-    <span>{APP_TITLE}</span>
-    <span>{USER_MENU}</span>
+export const HEADER_HTML_EXAMPLE = `<div style="display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem">
+    <span>{APP_TITLE}</span>
+    <span>{USER_MENU}</span>
 </div>`;
 /** SVG logo/icon uploads are refused (the server refuses them too): an SVG served from this origin can carry script. */
 export function isSvgFile(file) {

package/dist/apps/shared/components/admin/settings/MailboxCreateForm.js

@@ -6,11 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
+import { leftoverConflictOf } from "@rapidmx/react-shared/admin/leftoverMailboxApi.js";
 import { createMailbox, listMailboxDomains, resolveMailboxOwner } from "@rapidmx/react-shared/mail/mailApi.js";
+import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
 import PrincipalResolver, { describePerson } from "../../sharing/PrincipalResolver.js";
+import EraseLeftoverDataDialog from "../mailboxes/EraseLeftoverDataDialog.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const SELECT_CLASS = "text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /**
@@ -25,7 +28,8 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [displayName, setDisplayName] = useState(defaults?.displayName ?? "");
     const [ownerMode, setOwnerMode] = useState(defaults?.ownerUserUid ? "owned" : "shared");
     const [resolvedOwner, setResolvedOwner] = useState(null);
-    const [timezone, setTimezone] = useState("UTC");
+    // The admin's own device zone, not "UTC": the server's "UTC" is only a placeholder for a mailbox nobody chose a zone for.
+    const [timezone, setTimezone] = useState(deviceTimeZone);
     const [quotaGb, setQuotaGb] = useState(5);
     // Only replaced by the mailbox policy's default if the admin hasn't typed a quota of their own yet.
     const quotaTouched = useRef(false);
@@ -38,6 +42,10 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [maxDurationMinutes, setMaxDurationMinutes] = useState("");
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
+    // The address a deleted mailbox left data at, when creating a mailbox there was refused for that - and what to do about it.
+    const [leftover, setLeftover] = useState(null);
+    const [erasing, setErasing] = useState(false);
+    const formRef = useRef(null);
     // An empty `mail:domains` list (the default) means this server enforces no domain restriction —
     // the address field stays free text, exactly as before. Once an admin configures at least one
     // domain, every mailbox this server creates must be on one of them (enforced server-side too, in
@@ -59,10 +67,15 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             .catch(() => undefined);
     }, []);
     const constrained = domains.length > 0;
+    const address = constrained ? `${localPart.trim()}@${domain}` : primarySmtpAddress.trim();
+    // What was said about one address is not said about another: typing a different one takes the explanation away.
+    useEffect(() => {
+        setLeftover((current) => (current && current.address !== address ? null : current));
+    }, [address]);
     async function handleSubmit(e) {
         e.preventDefault();
         setError(null);
-        const address = constrained ? `${localPart.trim()}@${domain}` : primarySmtpAddress.trim();
+        setLeftover(null);
         if (constrained ? !localPart.trim() : !primarySmtpAddress.trim()) {
             setError("A primary SMTP address is required.");
             return;
@@ -104,13 +117,24 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             onCreated(mailbox);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
+            const conflict = leftoverConflictOf(err);
+            if (conflict) {
+                // Not a plain failure: the address is taken by what a deleted mailbox left, which can be erased right here.
+                setLeftover({ address, conflict });
+            }
+            else {
+                setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
+            }
         }
         finally {
             setSaving(false);
         }
     }
-    return (_jsxs(_Fragment, { children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [constrained ? (_jsx(FormField, { label: "Local part", htmlFor: "localPart", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("input", { id: "localPart", type: "text", className: INPUT_CLASS, value: localPart, onChange: (e) => setLocalPart(e.target.value), placeholder: "support" }), _jsx("span", { className: "text-text-muted shrink-0", children: "@" }), _jsx("select", { "aria-label": "Domain", className: SELECT_CLASS, value: domain, onChange: (e) => setDomain(e.target.value), children: domains.map((d) => (_jsx("option", { value: d, children: d }, d))) })] }) })) : (_jsx(FormField, { label: "Primary SMTP address", htmlFor: "primarySmtpAddress", children: _jsx("input", { id: "primarySmtpAddress", type: "email", className: INPUT_CLASS, value: primarySmtpAddress, onChange: (e) => setPrimarySmtpAddress(e.target.value), placeholder: "support@example.com" }) })), _jsx(FormField, { label: "Display name", htmlFor: "displayName", children: _jsx("input", { id: "displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Support" }) }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Owner" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "ownerMode", checked: ownerMode === "shared", onChange: () => {
+    return (_jsxs(_Fragment, { children: [error && _jsx(Alert, { children: error }), leftover && (_jsxs("div", { role: "alert", className: "py-3 px-3.5 rounded-sm text-sm mb-5 bg-danger-bg text-danger", children: [_jsx("p", { className: "font-semibold mb-1", children: leftover.conflict.reason === "mailbox-data-erasing"
+                            ? "The data left at this address is being erased."
+                            : "This address still has data from a deleted mailbox." }), _jsx("p", { className: "mb-3", children: leftover.conflict.reason === "mailbox-data-erasing"
+                            ? "A new mailbox can be created there once the erasure has finished."
+                            : "Deleting a mailbox keeps everything in it, and a new mailbox can't take the address until that data is erased." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setErasing(true), children: leftover.conflict.reason === "mailbox-data-erasing" ? "Show the erasure" : "Erase the leftover data" })] })), erasing && leftover && (_jsx(EraseLeftoverDataDialog, { address: leftover.address, resume: leftover.conflict.reason === "mailbox-data-erasing" ? leftover.conflict.erasure : undefined, doneLabel: "Create mailbox", onDone: () => formRef.current?.requestSubmit(), onClose: () => setErasing(false) }, leftover.address)), _jsxs("form", { ref: formRef, onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [constrained ? (_jsx(FormField, { label: "Local part", htmlFor: "localPart", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("input", { id: "localPart", type: "text", className: INPUT_CLASS, value: localPart, onChange: (e) => setLocalPart(e.target.value), placeholder: "support" }), _jsx("span", { className: "text-text-muted shrink-0", children: "@" }), _jsx("select", { "aria-label": "Domain", className: SELECT_CLASS, value: domain, onChange: (e) => setDomain(e.target.value), children: domains.map((d) => (_jsx("option", { value: d, children: d }, d))) })] }) })) : (_jsx(FormField, { label: "Primary SMTP address", htmlFor: "primarySmtpAddress", children: _jsx("input", { id: "primarySmtpAddress", type: "email", className: INPUT_CLASS, value: primarySmtpAddress, onChange: (e) => setPrimarySmtpAddress(e.target.value), placeholder: "support@example.com" }) })), _jsx(FormField, { label: "Display name", htmlFor: "displayName", children: _jsx("input", { id: "displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Support" }) }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Owner" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "ownerMode", checked: ownerMode === "shared", onChange: () => {
                                                     setOwnerMode("shared");
                                                     setResolvedOwner(null);
                                                 } }), "Shared mailbox (no single owner)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "ownerMode", checked: ownerMode === "owned", onChange: () => setOwnerMode("owned") }), "Owned by a specific person"] }), ownerMode === "owned" &&

package/dist/apps/shared/components/admin/settings/PluginsManager.js

@@ -197,7 +197,8 @@ export default function PluginsManager({ embedded = false } = {}) {
         watchRollout();
         void refreshUpdates();
     }
-    /** Runs an action on an installed plugin's row, which is busy meanwhile, and shows why it failed. */
+    /** Runs an action on a plugin's row (an installed plugin's, or an uninstalled one's), which is busy meanwhile, and
+     * shows why it failed. */
     async function onRow(plugin, action) {
         setBusy(plugin.uid, true);
         setError(null);
@@ -278,6 +279,20 @@ export default function PluginsManager({ embedded = false } = {}) {
     function upgrade(plugin, packageVersion) {
         return onRow(plugin, () => changeVersion(plugin, packageVersion));
     }
+    /** Installs an uninstalled plugin again, at its latest version - as adding it by name would. */
+    function reinstall(purge) {
+        const displayName = purgeName(purge);
+        return onRow(purge, async () => {
+            let latest;
+            try {
+                latest = (await planPluginChange(purge.name)).plugin.version;
+            }
+            catch (err) {
+                return errorMessage(err, `Could not install ${displayName}.`);
+            }
+            return install(purge.name, latest, displayName);
+        });
+    }
     /** Runs the steps of a failed data deletion that failed, again. */
     async function retryPurge(purge) {
         setBusy(purge.uid, true);
@@ -308,7 +323,7 @@ export default function PluginsManager({ embedded = false } = {}) {
                                         .filter((other) => other.uid !== plugin.uid && other.manifest.requires?.[plugin.name] !== undefined)
                                         .map((other) => other.manifest.displayName);
                                     return (_jsxs("tr", { role: "row", className: INSTALLED_ROW_CLASS, children: [_jsxs("td", { role: "cell", className: `${INSTALLED_TD_CLASS} basis-full pt-3 pb-2`, children: [_jsx("div", { className: "font-semibold", children: plugin.manifest.displayName }), _jsx("div", { className: "text-xs text-text-muted", children: plugin.name }), plugin.manifest.description && (_jsx("div", { className: "text-xs text-text-muted mt-1 max-w-md", children: plugin.manifest.description })), requires.length > 0 && _jsxs("div", { className: "text-xs text-text-muted mt-1", children: ["Requires: ", requires.join(", ")] }), requiredBy.length > 0 && (_jsxs("div", { className: "text-xs text-text-muted mt-1", children: ["Required by: ", requiredBy.join(", ")] }))] }), _jsxs("td", { role: "cell", className: `${INSTALLED_TD_CLASS} pt-1 pb-1 whitespace-nowrap`, children: [_jsx("div", { children: plugin.packageVersion }), latest && _jsxs("div", { className: "mt-1 text-xs font-semibold text-primary-dark", children: ["Update available: ", latest] })] }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} pt-1 pb-1`, children: _jsx(PluginStatusCell, { plugin: plugin, status: status }) }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} basis-full pt-2 pb-3`, children: _jsxs("div", { className: "flex flex-col items-start gap-1.5 lg:items-end lg:min-w-[11rem]", children: [_jsxs("div", { className: "flex flex-wrap gap-2 lg:justify-end", children: [latest && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": `Upgrade ${plugin.manifest.displayName} to ${latest}`, disabled: busy, onClick: () => void upgrade(plugin, latest), children: "Upgrade" })), (plugin.manifest.settings ?? []).length > 0 && (_jsx(Button, { variant: "secondary", type: "button", className: "!w-auto", onClick: () => setConfiguring(plugin), children: "Settings" })), _jsx(Button, { variant: plugin.enabled ? "secondary" : "primary", type: "button", className: "!w-auto min-w-[5.5rem]", "aria-label": `${plugin.enabled ? "Disable" : "Enable"} ${plugin.manifest.displayName}`, disabled: busy, onClick: () => void toggle(plugin), children: plugin.enabled ? "Disable" : "Enable" })] }), _jsxs("div", { className: "flex flex-wrap gap-x-4 lg:justify-end", children: [_jsx(Button, { variant: "text", type: "button", onClick: () => setUpgrading(plugin), children: "Change version" }), _jsx(Button, { variant: "text", type: "button", onClick: () => setRemoving(plugin), children: "Uninstall" })] })] }) })] }, plugin.uid));
-                                }), purges.map((purge) => (_jsx(UninstalledPluginRow, { purge: purge, busy: busyUids.has(purge.uid), onRetry: () => void retryPurge(purge) }, purge.uid)))] })] }) })), _jsx(PluginBrowser, { headingLevel: SectionHeading, plugins: plugins, onInstall: (result) => install(result.name, result.version, result.name), 
+                                }), purges.map((purge) => (_jsx(UninstalledPluginRow, { purge: purge, busy: busyUids.has(purge.uid), onRetry: () => void retryPurge(purge), onInstall: () => void reinstall(purge) }, purge.uid)))] })] }) })), _jsx(PluginBrowser, { headingLevel: SectionHeading, plugins: plugins, onInstall: (result) => install(result.name, result.version, result.name), 
                 // The browser only offers an upgrade for a result it matched to one of these same `plugins`.
                 onUpgrade: (uid, packageVersion) => upgrade(plugins.find((p) => p.uid === uid), packageVersion) }), _jsx(AddPluginModal, { open: adding, onClose: () => setAdding(false), onAdd: async (name, packageVersion, displayName) => {
                     const problem = await install(name, packageVersion, displayName);
@@ -441,9 +456,9 @@ function PluginServers({ plugin, status }) {
     return (_jsxs("div", { className: "text-xs", children: [_jsxs("span", { className: loaded === status.instances.length ? "text-success font-medium" : "text-text-muted", children: ["Loaded on ", loaded, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers"] }), errors.map((message) => (_jsx("div", { className: "text-danger mt-1 break-words", children: message }, message)))] }));
 }
 /** The row of a plugin that was uninstalled but whose data deletion is still listed: what became of its data. */
-function UninstalledPluginRow({ purge, busy, onRetry }) {
+function UninstalledPluginRow({ purge, busy, onRetry, onInstall }) {
     const failedSteps = purge.steps.filter((step) => !step.ok);
-    return (_jsxs("tr", { role: "row", className: INSTALLED_ROW_CLASS, children: [_jsxs("td", { role: "cell", className: `${INSTALLED_TD_CLASS} basis-full pt-3 pb-2`, children: [_jsx("div", { className: "font-semibold", children: purgeName(purge) }), _jsx("div", { className: "text-xs text-text-muted", children: purge.name })] }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} hidden lg:table-cell` }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} pt-1 pb-3 basis-full lg:basis-auto`, children: _jsxs("div", { className: "flex flex-col items-start gap-1 text-xs max-w-sm", children: [_jsx("span", { className: `${BADGE_CLASS} bg-surface-alt text-text-muted`, children: "Uninstalled" }), purge.state === "pending" && (_jsxs(_Fragment, { children: [_jsx("span", { children: "Uninstalled - data will be deleted after servers restart" }), !!purge.serversRunning && (_jsxs("span", { className: "text-text-muted", children: [purge.serversRunning, " of ", purge.serversTotal, " ", purge.serversTotal === 1 ? "server" : "servers", " still running it"] }))] })), purge.state === "running" && _jsx("span", { children: "Uninstalled - deleting its data now" }), purge.state === "done" && _jsxs("span", { className: "text-success font-medium", children: ["Data deleted", purge.completedAt ? ` ${formatDate(purge.completedAt)}` : ""] }), purge.state === "failed" && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-danger break-words", children: ["Data deletion failed: ", purgeFailure(purge)] }), failedSteps.length > 0 && (_jsx("ul", { className: "list-disc pl-4 text-text-muted break-words", children: failedSteps.map((step) => (_jsxs("li", { children: [step.step, ": ", step.error ?? "failed"] }, step.step))) }))] }))] }) }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} basis-full pt-1 pb-3`, children: purge.state === "failed" && (_jsx("div", { className: "flex lg:justify-end", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": `Retry deleting the data of ${purgeName(purge)}`, disabled: busy, loading: busy, onClick: onRetry, children: "Retry" }) })) })] }));
+    return (_jsxs("tr", { role: "row", className: INSTALLED_ROW_CLASS, children: [_jsxs("td", { role: "cell", className: `${INSTALLED_TD_CLASS} basis-full pt-3 pb-2`, children: [_jsx("div", { className: "font-semibold", children: purgeName(purge) }), _jsx("div", { className: "text-xs text-text-muted", children: purge.name })] }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} hidden lg:table-cell` }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} pt-1 pb-3 basis-full lg:basis-auto`, children: _jsxs("div", { className: "flex flex-col items-start gap-1 text-xs max-w-sm", children: [_jsx("span", { className: `${BADGE_CLASS} bg-surface-alt text-text-muted`, children: "Uninstalled" }), purge.state === "pending" && (_jsxs(_Fragment, { children: [_jsx("span", { children: "Uninstalled - data will be deleted after servers restart" }), !!purge.serversRunning && (_jsxs("span", { className: "text-text-muted", children: [purge.serversRunning, " of ", purge.serversTotal, " ", purge.serversTotal === 1 ? "server" : "servers", " still running it"] }))] })), purge.state === "running" && _jsx("span", { children: "Uninstalled - deleting its data now" }), purge.state === "done" && _jsxs("span", { className: "text-success font-medium", children: ["Data deleted", purge.completedAt ? ` ${formatDate(purge.completedAt)}` : ""] }), purge.state === "failed" && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-danger break-words", children: ["Data deletion failed: ", purgeFailure(purge)] }), failedSteps.length > 0 && (_jsx("ul", { className: "list-disc pl-4 text-text-muted break-words", children: failedSteps.map((step) => (_jsxs("li", { children: [step.step, ": ", step.error ?? "failed"] }, step.step))) }))] }))] }) }), _jsx("td", { role: "cell", className: `${INSTALLED_TD_CLASS} basis-full pt-1 pb-3`, children: _jsxs("div", { className: "flex gap-2 lg:justify-end", children: [purge.state === "failed" && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": `Retry deleting the data of ${purgeName(purge)}`, disabled: busy, loading: busy, onClick: onRetry, children: "Retry" })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": `Install ${purgeName(purge)}`, disabled: busy || purge.state === "running", onClick: onInstall, children: "Install" })] }) })] }));
 }
 function AddPluginModal({ open, onClose, onAdd, }) {
     const [name, setName] = useState("");
@@ -587,12 +602,30 @@ function needsSelection(definition, saved) {
         definition.default === undefined &&
         (definition.options ?? []).length > 0);
 }
+/** What a plugin's setting default writes for the host this console was reached at, like `https://<host>/meet`. */
+const HOST_PLACEHOLDER = "<host>";
+/**
+ * The value offered for a text setting whose default names the host (`https://<host>/meet`) and that has no real value
+ * saved yet - nothing, an empty value, or the placeholder itself, which an older server stores when it installs the
+ * plugin. It's the default with this console's host filled in, and is only stored once the form is saved.
+ */
+function suggestedHost(definition, saved) {
+    if (typeof definition.default !== "string" || !definition.default.includes(HOST_PLACEHOLDER) || typeof window === "undefined") {
+        return undefined;
+    }
+    const unset = saved === undefined || saved === "" || (typeof saved === "string" && saved.includes(HOST_PLACEHOLDER));
+    return unset ? definition.default.split(HOST_PLACEHOLDER).join(window.location.host) : undefined;
+}
 /** A setting's current form value: its saved value, else its default - or, for a required select with neither, its
  * first option. Kept as a string for text inputs. */
 function initialValue(definition, saved) {
     if (needsSelection(definition, saved)) {
         return definition.options[0].value;
     }
+    const suggestion = suggestedHost(definition, saved);
+    if (suggestion !== undefined) {
+        return suggestion;
+    }
     const value = saved ?? definition.default;
     if (definition.type === "boolean") {
         return value === true;
@@ -610,13 +643,14 @@ function SettingsModal({ plugin, onClose, onSaved }) {
         e.preventDefault();
         // The server replaces the whole settings object, so every setting is sent. One left alone is sent as it's saved
         // - `null` when nothing is, so it keeps following the plugin's default rather than pinning the default shown.
-        // A required select with nothing to fall back on is sent as the form picked it.
+        // A required select with nothing to fall back on, and a setting offering this console's host, are sent as the
+        // form shows them.
         const settings = {};
         let changed = false;
         for (const definition of definitions) {
             const key = definition.key;
             const value = values[key];
-            if (value === initial.current[key] && !needsSelection(definition, plugin.settings[key])) {
+            if (value === initial.current[key] && !needsSelection(definition, plugin.settings[key]) && suggestedHost(definition, plugin.settings[key]) === undefined) {
                 settings[key] = plugin.settings[key] ?? null;
                 continue;
             }

package/dist/apps/shared/components/calendar/AppointmentQuickForm.d.ts

@@ -0,0 +1,47 @@
+import React, { ReactNode } from "react";
+import { EventFormController } from "./eventForm.js";
+/** What the Appointment schedule tab holds besides the title (which is the Event tab's): kept by `QuickCreateFaces`, so it survives a trip to another tab. */
+export interface AppointmentDraft {
+    /** One of `DURATIONS`, or `"custom"` to use `customMinutes`. */
+    duration: string;
+    customMinutes: string;
+    /** Whether each weekday (0 = Sunday) is bookable. */
+    days: boolean[];
+    /** `HH:mm`, the hours every bookable day is open. */
+    startTime: string;
+    endTime: string;
+    /** Minutes kept free after each appointment. */
+    buffer: string;
+    video: boolean;
+    phone: boolean;
+    other: boolean;
+    /** Set once the schedule is saved: the face then shows its link. */
+    created: {
+        name: string;
+        url: string;
+        uid: string;
+        mailboxUid: string;
+    } | null;
+}
+/** A new schedule: 30 minutes, Monday to Friday 9:00 to 17:00, a video call, no buffer. */
+export declare function initialAppointmentDraft(): AppointmentDraft;
+export interface AppointmentQuickFormProps {
+    c: EventFormController;
+    draft: AppointmentDraft;
+    onDraftChange: (patch: Partial<AppointmentDraft>) => void;
+    tabs: ReactNode;
+    /** The booking plugin's Settings path (`/settings/booking-types`), where More options goes. */
+    settingsHref: string;
+    /** The name booking pages show for the host. */
+    hostName: string;
+    /** The IANA zone the open hours are in. */
+    timeZone: string;
+}
+/**
+ * The Appointment schedule tab of the New event popover: publishes a bookable schedule (a booking type of `@rapidmx/booking-plugin`) with
+ * `POST /api/mail/booking-types` - a name (the title), a duration, the weekdays and hours people can book, the buffer after each
+ * appointment, how they may meet (video, phone, other) and which calendar takes the bookings - and then shows the public booking link with a
+ * Copy button. Everything else about a booking link (approval, notice, a window, per-day hours, date overrides, several meeting types, a
+ * description, the page's avatar and banner) is on the plugin's own page, which More options opens.
+ */
+export default function AppointmentQuickForm({ c, draft, onDraftChange, tabs, settingsHref, hostName, timeZone }: AppointmentQuickFormProps): React.JSX.Element;

package/dist/apps/shared/components/calendar/AppointmentQuickForm.js

@@ -0,0 +1,135 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { HiOutlineArrowTopRightOnSquare, HiOutlineCalendar, HiOutlineCalendarDays, HiOutlineClock, HiOutlineLink, HiOutlineMapPin } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
+import { bookingPublicUrl, createBookingType, newBookingLinkHref, slugFor, } from "../../calendar/bookingPlugin.js";
+import { CalendarField, INPUT_CLASS, IconRow, SELECT_CLASS } from "./EventFormParts.js";
+import QuickFaceFrame from "./QuickFaceFrame.js";
+const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const DURATIONS = ["15", "30", "45", "60"];
+const BUFFERS = ["0", "5", "10", "15", "30"];
+/** How often the plugin lets a slot repeat and how long one may be (`MIN_SLOT_MINUTES` to a day), in minutes. */
+const MIN_DURATION = 5;
+const MAX_DURATION = 1440;
+/** How many times a taken link name is retried with a number after it (`intro`, `intro-2`, ...). */
+const MAX_SLUG_ATTEMPTS = 5;
+const LOCATIONS = [
+    { key: "video", type: "video", label: "Video call" },
+    { key: "phone", type: "phone", label: "Phone call" },
+    { key: "other", type: "other", label: "Other" },
+];
+/** A new schedule: 30 minutes, Monday to Friday 9:00 to 17:00, a video call, no buffer. */
+export function initialAppointmentDraft() {
+    return {
+        duration: "30",
+        customMinutes: "",
+        days: [false, true, true, true, true, true, false],
+        startTime: "09:00",
+        endTime: "17:00",
+        buffer: "0",
+        video: true,
+        phone: false,
+        other: false,
+        created: null,
+    };
+}
+/** Creates the booking type, trying the next number after `base` (`intro`, `intro-2`, ...) while its link name is taken (a 409). */
+async function createWithFreeSlug(base, input) {
+    for (let attempt = 1;; attempt++) {
+        try {
+            return await createBookingType({ ...input, slug: attempt === 1 ? base : `${base}-${attempt}` });
+        }
+        catch (err) {
+            if (!(err instanceof ApiRequestError && err.status === 409 && attempt < MAX_SLUG_ATTEMPTS)) {
+                throw err;
+            }
+        }
+    }
+}
+function minutesOf(time) {
+    const [hours, minutes] = time.split(":").map(Number);
+    return hours * 60 + minutes;
+}
+/**
+ * The Appointment schedule tab of the New event popover: publishes a bookable schedule (a booking type of `@rapidmx/booking-plugin`) with
+ * `POST /api/mail/booking-types` - a name (the title), a duration, the weekdays and hours people can book, the buffer after each
+ * appointment, how they may meet (video, phone, other) and which calendar takes the bookings - and then shows the public booking link with a
+ * Copy button. Everything else about a booking link (approval, notice, a window, per-day hours, date overrides, several meeting types, a
+ * description, the page's avatar and banner) is on the plugin's own page, which More options opens.
+ */
+export default function AppointmentQuickForm({ c, draft, onDraftChange, tabs, settingsHref, hostName, timeZone }) {
+    const { values } = c;
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    async function handleSubmit(event) {
+        event.preventDefault();
+        if (draft.created) {
+            c.onCancel();
+            return;
+        }
+        setError(null);
+        const name = values.title.trim();
+        const durationMinutes = Number(draft.duration === "custom" ? draft.customMinutes : draft.duration);
+        const startMinute = minutesOf(draft.startTime);
+        const endMinute = minutesOf(draft.endTime);
+        const locationOptions = LOCATIONS.filter((location) => draft[location.key]).map((location) => ({ type: location.type }));
+        let problem;
+        if (!name) {
+            problem = "A title is required.";
+        }
+        else if (!Number.isInteger(durationMinutes) || durationMinutes < MIN_DURATION || durationMinutes > MAX_DURATION) {
+            problem = `A duration is a whole number of minutes from ${MIN_DURATION} to ${MAX_DURATION}.`;
+        }
+        else if (!draft.days.some(Boolean)) {
+            problem = "Choose at least one day people can book.";
+        }
+        else if (!(startMinute < endMinute)) {
+            problem = "The first bookable time must be before the last.";
+        }
+        else if (endMinute - startMinute < durationMinutes) {
+            problem = "The hours people can book are shorter than one appointment.";
+        }
+        else if (locationOptions.length === 0) {
+            problem = "Choose at least one way to meet.";
+        }
+        if (problem) {
+            setError(problem);
+            return;
+        }
+        setSaving(true);
+        try {
+            const base = slugFor(name);
+            const availability = draft.days.flatMap((open, dayOfWeek) => (open ? [{ dayOfWeek, startMinute, endMinute }] : []));
+            const created = await createWithFreeSlug(base, {
+                mailboxUid: values.targetMailboxUid,
+                calendarFolderUid: values.targetFolderUid,
+                name,
+                hostDisplayName: hostName,
+                meetingTypes: [{ name, durationMinutes, locationOptions }],
+                timezone: timeZone,
+                availability,
+                bufferAfterMinutes: Number(draft.buffer),
+            });
+            onDraftChange({
+                created: { name: created.name, url: bookingPublicUrl(created.mailboxUid, created.slug), uid: created.uid, mailboxUid: created.mailboxUid },
+            });
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create this appointment schedule.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    const { created } = draft;
+    return (_jsx(QuickFaceFrame, { c: c, tabs: tabs, tab: "appointment", error: error, hideTitle: !!created, onSubmit: (event) => void handleSubmit(event), footer: created ? (_jsx(Button, { type: "submit", className: "!w-auto", children: "Done" })) : (_jsxs(_Fragment, { children: [_jsxs("a", { href: newBookingLinkHref(settingsHref, values.targetMailboxUid), className: "inline-flex items-center gap-1 text-sm font-semibold text-accent-dark hover:underline px-1 py-1", children: ["More options", _jsx(HiOutlineArrowTopRightOnSquare, { size: 14, "aria-hidden": "true" })] }), _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" })] })), children: created ? (_jsxs(IconRow, { icon: _jsx(HiOutlineLink, { size: 20 }), children: [_jsxs("p", { role: "status", className: "text-sm font-medium mb-1", children: ["\u201C", created.name, "\u201D is ready to book."] }), _jsx("p", { className: "text-xs text-text-muted mb-2", children: "Share this link and anyone can pick an open time - no account needed." }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", readOnly: true, "aria-label": "Booking link", className: `${INPUT_CLASS} min-w-0`, value: created.url, onFocus: (e) => e.target.select() }), _jsx(CopyButton, { value: created.url, label: "Copy the booking link" })] }), _jsx("a", { href: `${settingsHref}/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(created.mailboxUid)}`, className: "inline-block text-xs text-primary-dark hover:underline mt-2", children: "Change its settings" })] })) : (_jsxs(_Fragment, { children: [_jsx(IconRow, { icon: _jsx(HiOutlineClock, { size: 20 }), children: _jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsxs("select", { "aria-label": "Duration", className: SELECT_CLASS, value: draft.duration, onChange: (e) => onDraftChange({ duration: e.target.value }), children: [DURATIONS.map((minutes) => (_jsxs("option", { value: minutes, children: [minutes, " minutes"] }, minutes))), _jsx("option", { value: "custom", children: "Custom" })] }), draft.duration === "custom" && (_jsxs(_Fragment, { children: [_jsx("input", { type: "number", min: MIN_DURATION, max: MAX_DURATION, "aria-label": "Custom duration in minutes", className: `${INPUT_CLASS} !w-24`, value: draft.customMinutes, onChange: (e) => onDraftChange({ customMinutes: e.target.value }) }), _jsx("span", { className: "text-text-muted", children: "minutes" })] })), _jsx("span", { className: "text-text-muted", children: "with" }), _jsx("select", { "aria-label": "Buffer after each appointment", className: SELECT_CLASS, value: draft.buffer, onChange: (e) => onDraftChange({ buffer: e.target.value }), children: BUFFERS.map((minutes) => (_jsx("option", { value: minutes, children: minutes === "0" ? "no buffer" : `${minutes} min buffer after` }, minutes))) })] }) }), _jsxs(IconRow, { icon: _jsx(HiOutlineCalendarDays, { size: 20 }), children: [_jsx("div", { role: "group", "aria-label": "Days people can book", className: "flex gap-1 mb-2", children: DAY_NAMES.map((day, index) => (_jsx("button", { type: "button", "aria-label": day, "aria-pressed": draft.days[index], title: day, onClick: () => onDraftChange({ days: draft.days.map((open, i) => (i === index ? !open : open)) }), className: [
+                                    "w-8 h-8 rounded-full text-xs font-medium border",
+                                    draft.days[index] ? "bg-primary text-white border-primary" : "border-border text-text-muted hover:bg-surface-alt",
+                                ].join(" "), children: day[0] }, day))) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx("input", { type: "time", "aria-label": "Bookable from", className: `${SELECT_CLASS} min-w-0`, value: draft.startTime, onChange: (e) => onDraftChange({ startTime: e.target.value }) }), _jsx("span", { className: "text-text-muted", children: "to" }), _jsx("input", { type: "time", "aria-label": "Bookable until", className: `${SELECT_CLASS} min-w-0`, value: draft.endTime, onChange: (e) => onDraftChange({ endTime: e.target.value }) })] }), _jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Times are in ", timeZone.replace(/_/g, " "), "."] })] }), _jsx(IconRow, { icon: _jsx(HiOutlineMapPin, { size: 20 }), children: _jsx("div", { role: "group", "aria-label": "How people can meet", className: "flex flex-wrap gap-x-4 gap-y-1 text-sm py-1", children: LOCATIONS.map((location) => (_jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: draft[location.key], onChange: (e) => onDraftChange({ [location.key]: e.target.checked }) }), location.label] }, location.key))) }) }), _jsxs(IconRow, { icon: _jsx(HiOutlineCalendar, { size: 20 }), children: [_jsx("p", { className: "text-xs text-text-muted mb-1", children: "Bookings are added to" }), _jsx(CalendarField, { c: c })] })] })) }));
+}

package/dist/apps/shared/components/calendar/DescriptionEditor.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+export interface DescriptionEditorProps {
+    /** The description to start with, as HTML. Read once, when the editor is created: TipTap owns the document from then on. */
+    value: string;
+    /** Called with the document as HTML (`<p></p>` for an empty one) each time it changes. */
+    onChange: (html: string) => void;
+    /** Focus the text when the editor appears (the "Add description" row that opened it). */
+    autoFocus?: boolean;
+    /** The accessible name of the text box. */
+    label?: string;
+}
+/**
+ * What a typed link address is: an `http`, `https` or `mailto` link, with `https://` put in front of an address that names no scheme ("example.com") and
+ * `mailto:` in front of a plain email address. `undefined` for anything else (`javascript:`, `data:`, ...).
+ */
+export declare function linkFromInput(input: string): string | undefined;
+/**
+ * The rich-text box of an event's description, as Google Calendar draws it: a toolbar (bold, italic, underline, numbered list, bulleted list, link, remove
+ * formatting) over the text. Built on TipTap with only the schema an event description may hold - paragraphs, line breaks, bold, italic, underline, lists and
+ * `http`/`https`/`mailto` links, so the HTML it writes has nothing the server would remove. Ctrl/Cmd+B, I and U format, Ctrl/Cmd+K asks for a link, and a
+ * paste keeps the text and drops the formatting.
+ *
+ * The toolbar is a WAI-ARIA toolbar: one tab stop, the arrow keys, Home and End move along it, and each toggle says whether it is on (`aria-pressed`). The
+ * buttons do not take focus from the text, so a selection survives pressing one.
+ */
+export default function DescriptionEditor({ value, onChange, autoFocus, label }: DescriptionEditorProps): React.JSX.Element;