@rapidmx/web-client 0.11.0 → 0.13.0

package/apps/shared/components/sharing/PrincipalPicker.tsx

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

package/apps/shared/components/sharing/PrincipalResolver.tsx

@@ -0,0 +1,164 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { KeyboardEvent, ReactNode, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+export interface PrincipalResolverProps {
+    /** Resolves what was typed - a mailbox address, an auth-server username or e-mail alias, or a user uid - to
+     * the one person it names, exact match only. Rejects (typically with an `ApiRequestError`) for nobody. */
+    resolve: (principal: string) => Promise<ResolvedPrincipal>;
+    /** Called once the caller confirms the resolved person is the right one. The box is cleared once this
+     * resolves - throw (or reject) to keep the person on screen and show an error instead. */
+    onResolved: (person: ResolvedPrincipal) => void | Promise<void>;
+    /** Text put in the box to start with - a stored entry being replaced, say - looked up automatically on mount. */
+    initialPrincipal?: string;
+    /** What the box asks for. */
+    placeholder: string;
+    /** The box's accessible name. */
+    ariaLabel: string;
+    /** Extra controls rendered between the text box and the Find button (e.g. a role selector). */
+    children?: ReactNode;
+    /** The confirm button's label (e.g. "Grant", "Use this owner"). */
+    confirmLabel: string;
+    /** What the confirmation row says once a person is found - e.g. "Share with X as Y?". */
+    describeConfirm: (person: ResolvedPrincipal) => ReactNode;
+    /** Shown if `onResolved` rejects, unless it was an `ApiRequestError` (then its own message is shown). */
+    confirmErrorMessage: string;
+    /** Shown as a Cancel button next to the box when set (replacing an entry). */
+    onCancel?: () => void;
+}
+
+/** Who a resolved person is, for a person to check before confirming: their name and address, else their uid. */
+export function describePerson(person: ResolvedPrincipal): string {
+    if (person.displayName && person.address) return `${person.displayName} <${person.address}>`;
+    return person.displayName ?? person.address ?? `user ${person.userUid}`;
+}
+
+/**
+ * "Who?" - anywhere a person is assigned by typed identifier rather than picked from an already-loaded list. What
+ * is typed is RESOLVED by the server (`resolve`) to the person it names before anything is saved, and the person is
+ * shown (name and address) for the caller to confirm; only `onResolved` ever sees the resolved, verified person -
+ * never the free text. This is deliberately exact-match, type-then-confirm - never a live/fuzzy search-as-you-type
+ * autocomplete, which would let anyone with access to the field enumerate the user directory by partial name.
+ *
+ * Parameterized entirely by `resolve`/`onResolved` (and the wording props) so every caller - mailbox sharing
+ * (`PrincipalPicker`, a thin wrapper around this component), mailbox ownership, escrow-scope holders, ... - reuses
+ * the same resolve-then-confirm UX and privacy posture rather than each reimplementing it.
+ *
+ * Deliberately renders no `<form>` of its own (Enter-to-find is wired up by hand instead, see `handleKeyDown()`) -
+ * some callers (`MailboxCreateForm`) use this as one field of their own, larger `<form>`, and a nested `<form>` is
+ * invalid HTML that real browsers mis-handle (an inner Enter keypress can submit the wrong one).
+ */
+export default function PrincipalResolver({
+    resolve,
+    onResolved,
+    initialPrincipal,
+    placeholder,
+    ariaLabel,
+    children,
+    confirmLabel,
+    describeConfirm,
+    confirmErrorMessage,
+    onCancel,
+}: PrincipalResolverProps) {
+    const [typed, setTyped] = useState(initialPrincipal ?? "");
+    const [person, setPerson] = useState<ResolvedPrincipal | null>(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // A stored entry being replaced is looked up straight away, so its person is shown without a click.
+    useEffect(() => {
+        if (initialPrincipal) {
+            void find(initialPrincipal);
+        }
+    }, [initialPrincipal]);
+
+    async function find(principal: string) {
+        setBusy(true);
+        setError(null);
+        setPerson(null);
+        try {
+            setPerson(await resolve(principal));
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not look that person up.");
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    function submitFind() {
+        const principal = typed.trim();
+        if (principal) {
+            void find(principal);
+        }
+    }
+
+    /** Enter in the text box finds, same as clicking the button - handled here (not a native `<form>` submit,
+     * see this component's own doc comment on why) so it works whether or not a caller nests this inside one of
+     * their own forms (`MailboxCreateForm` does). */
+    function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+        if (e.key === "Enter") {
+            // Stops the keystroke from also submitting an ANCESTOR `<form>` this component happens to be nested in.
+            e.preventDefault();
+            submitFind();
+        }
+    }
+
+    // Only reachable from the confirm button, which only renders once `person` is set.
+    async function handleConfirm() {
+        setBusy(true);
+        setError(null);
+        try {
+            await onResolved(person!);
+            setTyped("");
+            setPerson(null);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : confirmErrorMessage);
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-2">
+            {error && <Alert>{error}</Alert>}
+            <div className="flex gap-2">
+                <input
+                    type="text"
+                    aria-label={ariaLabel}
+                    placeholder={placeholder}
+                    className="flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text"
+                    value={typed}
+                    onChange={(e) => {
+                        setTyped(e.target.value);
+                        setPerson(null);
+                    }}
+                    onKeyDown={handleKeyDown}
+                    disabled={busy}
+                />
+                {children}
+                <Button type="button" variant="secondary" loading={busy && !person} disabled={busy} className="!w-auto" onClick={submitFind}>
+                    Find
+                </Button>
+                {onCancel && (
+                    <Button type="button" variant="text" className="!w-auto" onClick={onCancel}>
+                        Cancel
+                    </Button>
+                )}
+            </div>
+            {person && (
+                <div className="flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm">
+                    <span>{describeConfirm(person)}</span>
+                    <Button type="button" loading={busy} disabled={busy} className="!w-auto" onClick={() => void handleConfirm()}>
+                        {confirmLabel}
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/shared/notifications/NotificationCenter.tsx

@@ -5,6 +5,7 @@
 import React, { useEffect } from "react";
 import type { IconType } from "react-icons";
 import {
+    HiOutlineBell,
     HiOutlineCheckCircle,
     HiOutlineEnvelope,
     HiOutlineExclamationCircle,
@@ -19,6 +20,7 @@ import { useSystemErrorNotifications } from "./systemErrors.js";
 
 const KIND_STYLE: Record<NotificationKind, { border: string; icon: string; Icon: IconType; label: string }> = {
     mail: { border: "border-l-primary", icon: "text-primary-dark", Icon: HiOutlineEnvelope, label: "New message" },
+    calendar: { border: "border-l-primary", icon: "text-primary-dark", Icon: HiOutlineBell, label: "Reminder" },
     info: { border: "border-l-primary", icon: "text-primary-dark", Icon: HiOutlineInformationCircle, label: "Information" },
     success: { border: "border-l-success", icon: "text-success", Icon: HiOutlineCheckCircle, label: "Success" },
     warning: { border: "border-l-warning", icon: "text-warning", Icon: HiOutlineExclamationTriangle, label: "Warning" },

package/apps/shared/notifications/NotificationHistoryDialog.tsx

@@ -10,6 +10,7 @@ import { useNotifications } from "./useNotifications.js";
 
 const KIND_LABEL: Record<NotificationKind, string> = {
     mail: "New message",
+    calendar: "Reminder",
     info: "Information",
     success: "Done",
     warning: "Warning",

package/apps/shared/notifications/store.ts

@@ -26,7 +26,7 @@
  * `notify()` only hands back an id.
  */
 
-export type NotificationKind = "mail" | "info" | "success" | "warning" | "error";
+export type NotificationKind = "mail" | "calendar" | "info" | "success" | "warning" | "error";
 
 export interface NotificationAction {
     label: string;
@@ -119,6 +119,8 @@ export const MAX_DETAIL_LINE_LENGTH = 500;
 /** How long a non-sticky notification stays, by kind. Errors are sticky, so theirs is only for an explicit `sticky: false`. */
 export const DEFAULT_TIMEOUT_MS: Record<NotificationKind, number> = {
     mail: 8_000,
+    // Irrelevant in practice - a reminder always carries actions, which makes it sticky (see `applyInput()`) regardless of this value.
+    calendar: 8_000,
     info: 6_000,
     success: 5_000,
     warning: 10_000,

package/dist/apps/admin/domains/[uid].js

@@ -5,12 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { deleteDomain } from "@rapidmx/react-shared/admin/domainsApi.js";
+import { deleteDomain, updateDomain } from "@rapidmx/react-shared/admin/domainsApi.js";
 import AdminShell from "../../shared/components/admin/layout/AdminShell.js";
 import DomainDnsSetup from "../../shared/components/admin/settings/DomainDnsSetup.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 Modal from "@rapidmx/react-shared/components/overlays/Modal.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";
 export default function DomainDetailPage(props) {
     return (_jsx(AdminShell, { ...props, active: "domains", children: _jsx(DomainDetailContent, { uid: props.params.uid }) }));
 }
@@ -19,6 +21,15 @@ function DomainDetailContent({ uid }) {
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [deleting, setDeleting] = useState(false);
     const [deleteError, setDeleteError] = useState(null);
+    // Not initialized from `domain.aliasOf` until it first loads (`null` means "not yet") - once set, kept as
+    // the user's own edit rather than fighting later unrelated reloads (e.g. after "Verify now").
+    const [aliasInput, setAliasInput] = useState(null);
+    const [savingAlias, setSavingAlias] = useState(false);
+    const [aliasError, setAliasError] = useState(null);
+    const [aliasSaved, setAliasSaved] = useState(false);
+    // Bumped after a successful aliasOf save to force `DomainDnsSetup` (which owns its own `domain` state,
+    // fetched only on mount/uid change) to reload and reflect the new value in its own status panel.
+    const [refreshCount, setRefreshCount] = useState(0);
     function closeDeleteModal() {
         setConfirmingDelete(false);
     }
@@ -35,5 +46,30 @@ function DomainDetailContent({ uid }) {
             setDeleting(false);
         }
     }
-    return (_jsxs("div", { className: "max-w-3xl flex flex-col gap-5", children: [domain && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("a", { href: "/admin/domains", className: "text-sm text-primary-dark hover:underline", children: "\u2190 All domains" }), _jsx("h1", { className: "text-xl font-bold tracking-tight mt-1", children: domain.name })] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0 !border-danger !text-danger hover:!border-danger hover:!text-danger", onClick: () => setConfirmingDelete(true), children: "Delete domain" })] })), _jsx(DomainDnsSetup, { uid: uid, onLoaded: setDomain }), domain && (_jsxs(Modal, { open: confirmingDelete, onClose: closeDeleteModal, title: "Delete domain", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Are you sure you want to delete ", _jsx("strong", { children: domain.name }), "? This cannot be undone."] }), deleteError && _jsx(Alert, { children: deleteError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: deleting, onClick: closeDeleteModal, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: deleting, disabled: deleting, onClick: handleDelete, children: "Delete" })] })] }))] }));
+    function handleLoaded(d) {
+        setDomain(d);
+        setAliasInput((current) => (current === null ? d?.aliasOf ?? "" : current));
+    }
+    async function handleSaveAlias() {
+        setSavingAlias(true);
+        setAliasError(null);
+        setAliasSaved(false);
+        try {
+            const updated = await updateDomain({ uid: domain.uid, version: domain.version, aliasOf: aliasInput.trim() || undefined });
+            setDomain(updated);
+            setAliasInput(updated.aliasOf ?? "");
+            setAliasSaved(true);
+            setRefreshCount((c) => c + 1);
+        }
+        catch (err) {
+            setAliasError(err instanceof ApiRequestError ? err.message : "Could not update this domain.");
+        }
+        finally {
+            setSavingAlias(false);
+        }
+    }
+    return (_jsxs("div", { className: "max-w-3xl flex flex-col gap-5", children: [domain && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("a", { href: "/admin/domains", className: "text-sm text-primary-dark hover:underline", children: "\u2190 All domains" }), _jsx("h1", { className: "text-xl font-bold tracking-tight mt-1", children: domain.name })] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0 !border-danger !text-danger hover:!border-danger hover:!text-danger", onClick: () => setConfirmingDelete(true), children: "Delete domain" })] })), _jsx(DomainDnsSetup, { uid: uid, onLoaded: handleLoaded }, refreshCount), domain && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "Alias" }), _jsx("p", { className: "text-sm text-text-muted mb-3", children: "Make this domain a pure alias of another one - it will still receive (and may send as) mail for the same addresses, but have no mailboxes of its own. Leave blank for a regular domain." }), aliasError && _jsx(Alert, { children: aliasError }), _jsx(FormField, { label: "Alias of", htmlFor: "aliasOf", children: _jsx("input", { id: "aliasOf", type: "text", className: INPUT_CLASS, value: aliasInput ?? "", onChange: (e) => {
+                                setAliasInput(e.target.value);
+                                setAliasSaved(false);
+                            }, placeholder: "e.g. powerlevel.gg" }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { type: "button", className: "!w-auto", loading: savingAlias, disabled: savingAlias || (aliasInput ?? "") === (domain.aliasOf ?? ""), onClick: handleSaveAlias, children: "Save" }), aliasSaved && _jsx("span", { className: "text-sm text-text-muted", children: "Saved." })] })] })), domain && (_jsxs(Modal, { open: confirmingDelete, onClose: closeDeleteModal, title: "Delete domain", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Are you sure you want to delete ", _jsx("strong", { children: domain.name }), "? This cannot be undone."] }), deleteError && _jsx(Alert, { children: deleteError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: deleting, onClick: closeDeleteModal, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: deleting, disabled: deleting, onClick: handleDelete, children: "Delete" })] })] }))] }));
 }

package/dist/apps/admin/domains/index.js

@@ -27,5 +27,5 @@ function DomainsListContent() {
             .finally(() => setLoading(false));
     }, [page]);
     const hasNextPage = domains.length === PAGE_SIZE;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Domains" }), _jsx("a", { href: "/admin/domains/new", children: _jsx(Button, { type: "button", className: "!w-auto", children: "+ New domain" }) })] }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : domains.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No domains configured yet." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Enabled", "Verified", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: domains.map((domain) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: domain.name }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: domain.enabled ? "Yes" : "No" }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: domain.verified ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Verified" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Unverified" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-right", children: _jsx("a", { href: `/admin/domains/${encodeURIComponent(domain.uid)}`, className: "text-primary-dark hover:underline font-medium", children: "View" }) })] }, domain.uid))) })] }) })), _jsxs("div", { className: "flex gap-3 items-center mt-4", children: [_jsx(Button, { variant: "secondary", type: "button", className: "!w-auto", disabled: page === 0 || loading, onClick: () => setPage((p) => Math.max(0, p - 1)), children: "Previous" }), _jsxs("span", { className: "text-sm text-text-muted", children: ["Page ", page + 1] }), _jsx(Button, { variant: "secondary", type: "button", className: "!w-auto", disabled: !hasNextPage || loading, onClick: () => setPage((p) => p + 1), children: "Next" })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Domains" }), _jsx("a", { href: "/admin/domains/new", children: _jsx(Button, { type: "button", className: "!w-auto", children: "+ New domain" }) })] }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : domains.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No domains configured yet." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Enabled", "Verified", "Alias of", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: domains.map((domain) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: domain.name }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: domain.enabled ? "Yes" : "No" }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: domain.verified ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Verified" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Unverified" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted", children: domain.aliasOf || "—" }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-right", children: _jsx("a", { href: `/admin/domains/${encodeURIComponent(domain.uid)}`, className: "text-primary-dark hover:underline font-medium", children: "View" }) })] }, domain.uid))) })] }) })), _jsxs("div", { className: "flex gap-3 items-center mt-4", children: [_jsx(Button, { variant: "secondary", type: "button", className: "!w-auto", disabled: page === 0 || loading, onClick: () => setPage((p) => Math.max(0, p - 1)), children: "Previous" }), _jsxs("span", { className: "text-sm text-text-muted", children: ["Page ", page + 1] }), _jsx(Button, { variant: "secondary", type: "button", className: "!w-auto", disabled: !hasNextPage || loading, onClick: () => setPage((p) => p + 1), children: "Next" })] })] }));
 }

package/dist/apps/admin/domains/new/index.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { createDomain } from "@rapidmx/react-shared/admin/domainsApi.js";
+import { createDomain, listDomains } from "@rapidmx/react-shared/admin/domainsApi.js";
 import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
@@ -16,8 +16,17 @@ export default function NewDomainPage(props) {
 }
 function NewDomainForm() {
     const [name, setName] = useState("");
+    const [aliasOf, setAliasOf] = useState("");
+    // Only an existing, non-alias domain can be aliased (no chains) - see `Domain.aliasOf`'s own doc comment
+    // on the `@rapidmx/restapi` side.
+    const [primaryDomains, setPrimaryDomains] = useState([]);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
+    useEffect(() => {
+        listDomains({ limit: 200 })
+            .then((domains) => setPrimaryDomains(domains.filter((d) => !d.aliasOf)))
+            .catch(() => setPrimaryDomains([]));
+    }, []);
     async function handleSubmit(e) {
         e.preventDefault();
         setError(null);
@@ -27,7 +36,7 @@ function NewDomainForm() {
         }
         setSaving(true);
         try {
-            const domain = await createDomain({ name: name.trim() });
+            const domain = await createDomain({ name: name.trim(), aliasOf: aliasOf || undefined });
             window.location.href = `/admin/domains/${encodeURIComponent(domain.uid)}`;
         }
         catch (err) {
@@ -37,5 +46,5 @@ function NewDomainForm() {
             setSaving(false);
         }
     }
-    return (_jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "New domain" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "A new domain starts unverified. Once created, its detail page shows the DNS TXT record to publish to prove ownership before mail can be accepted on it." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: "Domain name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "example.com" }) }), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Create domain" }), _jsx("a", { href: "/admin/domains", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", children: "Cancel" }) })] })] })] }));
+    return (_jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "New domain" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "A new domain starts unverified. Once created, its detail page shows the DNS TXT record to publish to prove ownership before mail can be accepted on it." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: "Domain name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "example.com" }) }), _jsxs(FormField, { label: "Alias of", htmlFor: "aliasOf", children: [_jsxs("select", { id: "aliasOf", className: INPUT_CLASS, value: aliasOf, onChange: (e) => setAliasOf(e.target.value), children: [_jsx("option", { value: "", children: "None - a regular domain with mailboxes of its own" }), primaryDomains.map((domain) => (_jsx("option", { value: domain.name, children: domain.name }, domain.uid)))] }), _jsx("p", { className: "text-xs text-text-muted mt-1.5", children: "A pure alias receives (and may send as) mail for the same addresses as the domain it aliases, but has no mailboxes of its own - it still needs its own DNS setup below." })] }), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Create domain" }), _jsx("a", { href: "/admin/domains", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", children: "Cancel" }) })] })] })] }));
 }

package/dist/apps/admin/mailboxes/new/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
 import MailboxCreateForm from "../../../shared/components/admin/settings/MailboxCreateForm.js";
 export default function NewMailboxPage(props) {
-    return (_jsx(AdminShell, { ...props, active: "mailboxes", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "New mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Leave \"Owner user uid\" blank to create a true ownerless shared mailbox (the Exchange \"shared mailbox\" concept) \u2014 access is then granted entirely to delegates afterward, not to a single owner. Set an owner to create a mailbox for a specific user instead." }), _jsx(MailboxCreateForm, { cancelHref: "/admin", onCreated: (mailbox) => {
+    return (_jsx(AdminShell, { ...props, active: "mailboxes", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "New mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Choose \"Shared mailbox\" to create a true ownerless mailbox (the Exchange \"shared mailbox\" concept) \u2014 access is then granted entirely to delegates afterward, not to a single owner. Choose \"Owned by a specific person\" and look them up to create a mailbox for a specific user instead." }), _jsx(MailboxCreateForm, { cancelHref: "/admin", onCreated: (mailbox) => {
                         window.location.href = `/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`;
                     } })] }) }));
 }

package/dist/apps/shared/calendar/calendarReminders.d.ts

@@ -0,0 +1,28 @@
+/** Pure helpers behind `useCalendarReminders.ts` - kept apart from the hook so the push-payload parsing, the snooze
+ * arithmetic and the pop-up's wording are each testable without a React tree or a socket. */
+import type { PushEvent } from "@rapidmx/react-shared/mail/pushClient.js";
+/** How long "Snooze" waits before the reminder reappears - or less, if the meeting starts sooner (`snoozeDelayMs()`). */
+export declare const SNOOZE_MS: number;
+/** The payload restapi's `CalendarReminderJob` publishes (`{ eventUid, title, startDate, location }`) as a `"CalendarEvent"`/`"reminder"` push event. */
+export interface CalendarReminderNotice {
+    eventUid: string;
+    title: string;
+    /** The due occurrence's own start (an ISO string) - the series' `startDate` for a non-recurring event, one occurrence's for a recurring one. */
+    startDate: string;
+    /** The event's own `location`, verbatim - `undefined`/`null` when the event has none. Not necessarily a URL;
+     * see `joinMeetingUrl()` for when it's shown as a join link. */
+    location?: string | null;
+}
+/** A `notice.location` worth offering as a one-click "Join Meeting" link - a plain `http(s)://` URL and nothing
+ * else (a room name, an address, free-text instructions are all real, common `location` values this must not
+ * treat as a link). Trimmed first, so incidental whitespace never hides a real link. */
+export declare function joinMeetingUrl(location: string | null | undefined): string | undefined;
+/** The reminder `event` carries, or `undefined` for anything else the shared push connection delivers (mail, folders, appearance, ...). */
+export declare function calendarReminderOf(event: PushEvent): CalendarReminderNotice | undefined;
+/** How long "Snooze" waits before showing the reminder again: `SNOOZE_MS`, or less if the meeting starts first - never negative (snoozing a
+ * reminder for a meeting that has already started shows it again at once rather than waiting a further five minutes). */
+export declare function snoozeDelayMs(startDate: string, now?: number): number;
+/** The pop-up's message line: when the meeting starts, relative to `now`. */
+export declare function reminderMessage(startDate: string, now?: number): string;
+/** The one notification id a reminder, and every "Snooze" of it, reuses - so snoozing replaces the same pop-up rather than stacking a new one. */
+export declare function reminderNotificationId(eventUid: string, startDate: string): string;

package/dist/apps/shared/calendar/calendarReminders.js

@@ -0,0 +1,55 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Pure helpers behind `useCalendarReminders.ts` - kept apart from the hook so the push-payload parsing, the snooze
+ * arithmetic and the pop-up's wording are each testable without a React tree or a socket. */
+/** How long "Snooze" waits before the reminder reappears - or less, if the meeting starts sooner (`snoozeDelayMs()`). */
+export const SNOOZE_MS = 5 * 60000;
+function isReminderNotice(data) {
+    const notice = data;
+    return (!!notice &&
+        typeof notice.eventUid === "string" &&
+        typeof notice.title === "string" &&
+        typeof notice.startDate === "string" &&
+        (notice.location === undefined || notice.location === null || typeof notice.location === "string"));
+}
+/** A `notice.location` worth offering as a one-click "Join Meeting" link - a plain `http(s)://` URL and nothing
+ * else (a room name, an address, free-text instructions are all real, common `location` values this must not
+ * treat as a link). Trimmed first, so incidental whitespace never hides a real link. */
+export function joinMeetingUrl(location) {
+    const trimmed = location?.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    let url;
+    try {
+        url = new URL(trimmed);
+    }
+    catch {
+        return undefined;
+    }
+    return url.protocol === "http:" || url.protocol === "https:" ? trimmed : undefined;
+}
+/** The reminder `event` carries, or `undefined` for anything else the shared push connection delivers (mail, folders, appearance, ...). */
+export function calendarReminderOf(event) {
+    return event.type === "CalendarEvent" && event.action === "reminder" && isReminderNotice(event.data) ? event.data : undefined;
+}
+/** How long "Snooze" waits before showing the reminder again: `SNOOZE_MS`, or less if the meeting starts first - never negative (snoozing a
+ * reminder for a meeting that has already started shows it again at once rather than waiting a further five minutes). */
+export function snoozeDelayMs(startDate, now = Date.now()) {
+    return Math.max(0, Math.min(SNOOZE_MS, new Date(startDate).getTime() - now));
+}
+/** The pop-up's message line: when the meeting starts, relative to `now`. */
+export function reminderMessage(startDate, now = Date.now()) {
+    const time = new Date(startDate).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+    const diffMinutes = Math.round((new Date(startDate).getTime() - now) / 60000);
+    if (diffMinutes <= 0) {
+        return `Starting now - ${time}`;
+    }
+    return `Starting in ${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} - ${time}`;
+}
+/** The one notification id a reminder, and every "Snooze" of it, reuses - so snoozing replaces the same pop-up rather than stacking a new one. */
+export function reminderNotificationId(eventUid, startDate) {
+    return `calendar-reminder:${eventUid}:${startDate}`;
+}