@rapidmx/web-client 0.12.0 → 0.13.0

package/apps/shared/components/calendar/EventModal.tsx

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useRef, useState } from "react";
+import React, { FormEvent, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
     Attendee,
@@ -10,6 +10,7 @@ import {
     AttendeeResponseStatus,
     AttendeeRole,
     BusyStatus,
+    CalendarEvent,
     CalendarEventInput,
     RecurrenceRule,
     createCalendarEvent,
@@ -17,6 +18,12 @@ import {
     respondToEvent,
     updateCalendarEvent,
 } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import {
+    VideoMeetingInvitee,
+    createVideoMeeting,
+    getVideoMeeting,
+    updateVideoMeeting,
+} from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
 import { deleteEventOccurrence, deleteEventSeries, detachOccurrence, saveEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
 import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -44,6 +51,21 @@ const RESPONSE_STATUS_LABEL: Record<AttendeeResponseStatus, string> = {
     tentative: "Tentative",
 };
 
+/**
+ * The Location text this modal writes when it mints a video meeting for an event, and the one value it will
+ * clear again when video conferencing is turned back off (see `applyVideoConferencing()`).
+ *
+ * Deliberately generic and identical for everyone: each attendee's own personal join link is substituted into
+ * their own copy of the invitation server-side (`@rapidmx/restapi`'s `MeetingSchedulingJob`), so no link -
+ * personal or otherwise - may be stored on the shared event itself, where every attendee would read the same
+ * one.
+ */
+export const VIDEO_LOCATION_PLACEHOLDER = "Video call — link in this invitation";
+
+/** The plugin's own title bound (`BaseVideoMeetingRoute`'s `MAX_TITLE_LENGTH`) - a longer title is a 400, so
+ * an over-long event title is trimmed to fit rather than failing the whole meeting. */
+const MAX_MEETING_TITLE_LENGTH = 200;
+
 export interface EventModalProps {
     open: boolean;
     onClose: () => void;
@@ -211,6 +233,17 @@ export default function EventModal({
     const [autoReplyEnabled, setAutoReplyEnabled] = useState(occurrence?.autoReplyEnabled ?? false);
     const [autoReplyMessage, setAutoReplyMessage] = useState(occurrence?.autoReplyMessage ?? "");
     const [editScope, setEditScope] = useState<EditScope>("occurrence");
+    // Video conferencing: the toggle, the meeting this event is linked to (if any), the organizer's own join
+    // link for it, and whatever went wrong with the last attempt to mint/cancel one.
+    const [videoEnabled, setVideoEnabled] = useState(!!occurrence?.videoMeetingUid);
+    const [videoMeetingUid, setVideoMeetingUid] = useState<string | undefined>(occurrence?.videoMeetingUid);
+    // `undefined` while the link is still being fetched, `null` once it is known there is none to open.
+    const [organizerJoinUrl, setOrganizerJoinUrl] = useState<string | null | undefined>(undefined);
+    const [videoError, setVideoError] = useState<string | null>(null);
+    // The event as this modal last persisted it. Set only when a save got the event stored but could not
+    // finish the video-conferencing step after it: the modal then stays open on that error, and the retry
+    // must update *that* record (its uid and its new version), not re-create it or reuse the stale prop.
+    const [savedEvent, setSavedEvent] = useState<CalendarEvent | null>(null);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
@@ -220,6 +253,31 @@ export default function EventModal({
     const [resourcePickerOpen, setResourcePickerOpen] = useState(false);
     const addResourceButtonRef = useRef<HTMLButtonElement>(null);
 
+    // An event that already carried a meeting when it was opened (e.g. after a page reload) knows only that
+    // meeting's uid - the organizer's own join link lives on the meeting, so it is fetched once here. A
+    // meeting minted in this session already has its link from the create call (see
+    // `applyVideoConferencing()`), which is why this deliberately reads the *prop*, not the state: it must
+    // not re-fetch what was just handed to us. A failure and a meeting with no link at all are the same
+    // thing to this UI - there is nothing to open either way - so both settle on `null`.
+    useEffect(() => {
+        const uid = occurrence?.videoMeetingUid;
+        if (!uid) {
+            return;
+        }
+        let cancelled = false;
+        void getVideoMeeting(uid)
+            .then((meeting) => meeting.organizerJoinUrl ?? null)
+            .catch(() => null)
+            .then((url) => {
+                if (!cancelled) {
+                    setOrganizerJoinUrl(url);
+                }
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [occurrence?.videoMeetingUid]);
+
     // The viewing mailbox can respond to an *existing* event it's invited to but doesn't organize —
     // `organizerAddress` (plus the aliases) are this mailbox's own addresses (see `EventModalProps`), so
     // finding one among `attendees` (and not as that attendee's own organizer flag) identifies exactly
@@ -245,9 +303,86 @@ export default function EventModal({
         setResourcePickerOpen(false);
     }
 
+    /**
+     * Brings the event's video meeting in line with the toggle, once the event itself is saved (so the
+     * attendee list a new meeting's invitees are built from is the one that was just stored).
+     *
+     * Turning it **on** mints a meeting for the saved event's attendees - every one of them except the
+     * organizer, who reaches their own meeting through ownership (`organizerJoinUrl`), not as a guest - and
+     * then patches the event with the meeting's uid and the generic `VIDEO_LOCATION_PLACEHOLDER` location.
+     * No join link is written onto the event: each attendee's own link is substituted into their own copy of
+     * the invitation server-side.
+     *
+     * Turning it **off** cancels the meeting and clears the link, restoring Location to `""` only when it
+     * still holds exactly the placeholder this modal wrote - anything the user has typed there since is
+     * theirs and is preserved.
+     *
+     * **Known, deliberate limitation:** an event that already has a meeting is left completely alone, even
+     * when its attendee list has just changed. `@rapidmx/videoconf-plugin`'s `PUT /mail/video-meetings/:id`
+     * is deliberately minimal (title and cancellation only) and cannot add or remove invitees, and a private
+     * meeting's personal join links are minted once at creation - so there is no way to reconcile an invitee
+     * list, and silently pretending otherwise would leave a new attendee with no link and a removed one with
+     * a working one. The helper text under the checkbox says so, and turning the toggle off and on again
+     * reissues links for the current attendee list.
+     *
+     * Never throws: the event is already stored by the time this runs, so a failure here is reported inline
+     * next to the checkbox and left retryable, with `videoMeetingUid` still whatever it was before.
+     */
+    async function applyVideoConferencing(saved: CalendarEvent): Promise<{ event: CalendarEvent; failed: boolean }> {
+        // Off and never on, or on and already linked (see the limitation above) - nothing to do either way.
+        if (videoEnabled === !!videoMeetingUid) {
+            return { event: saved, failed: false };
+        }
+        try {
+            if (videoEnabled) {
+                const organizerAddressLower = saved.organizer.address.toLowerCase();
+                const invitees: VideoMeetingInvitee[] = attendees
+                    .filter((a) => !a.isOrganizer && !!a.address.trim() && a.address.trim().toLowerCase() !== organizerAddressLower)
+                    .map((a) => ({ email: a.address.trim(), displayName: a.displayName }));
+                if (invitees.length === 0) {
+                    setVideoError("Add at least one attendee other than yourself to add video conferencing.");
+                    return { event: saved, failed: true };
+                }
+                const result = await createVideoMeeting({
+                    mailboxUid: saved.mailboxUid,
+                    title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
+                    visibility: "private",
+                    calendarEventUid: saved.uid,
+                    startTime: saved.startDate,
+                    endTime: saved.endDate,
+                    invitees,
+                });
+                const patched = await updateCalendarEvent({
+                    uid: saved.uid,
+                    version: saved.version,
+                    location: VIDEO_LOCATION_PLACEHOLDER,
+                    videoMeetingUid: result.meeting.uid,
+                });
+                setVideoMeetingUid(result.meeting.uid);
+                setOrganizerJoinUrl(result.organizerJoinUrl ?? null);
+                setLocation(VIDEO_LOCATION_PLACEHOLDER);
+                return { event: patched, failed: false };
+            }
+            await updateVideoMeeting(videoMeetingUid!, { status: "cancelled" });
+            const restoredLocation = location.trim() === VIDEO_LOCATION_PLACEHOLDER ? "" : location.trim();
+            // A stored event clears a field with an explicit `null` (see `EventFields`) - an omitted one would
+            // leave the placeholder (and the link to the now-cancelled meeting) in place.
+            const patch: EventFields = { location: restoredLocation || null, videoMeetingUid: null };
+            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...(patch as Partial<CalendarEventInput>) });
+            setVideoMeetingUid(undefined);
+            setOrganizerJoinUrl(undefined);
+            setLocation(restoredLocation);
+            return { event: patched, failed: false };
+        } catch (err) {
+            setVideoError(err instanceof ApiRequestError ? err.message : "Could not update this event's video conferencing.");
+            return { event: saved, failed: true };
+        }
+    }
+
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
         setError(null);
+        setVideoError(null);
 
         if (!title.trim()) {
             setError("A title is required.");
@@ -294,25 +429,42 @@ export default function EventModal({
 
         setSaving(true);
         try {
-            if (!occurrence) {
+            let saved: CalendarEvent;
+            let detachedSyncFailed = false;
+            if (savedEvent) {
+                // A retry after the event was stored but its video meeting couldn't be (see `savedEvent`):
+                // update exactly the record the first attempt left behind, whichever branch below created it.
+                // A series' own exception/detached-occurrence re-pointing already ran on that attempt and has
+                // nothing left to shift - the dates being sent again are the ones it moved everything to.
+                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...(fields as Partial<CalendarEventInput>) });
+            } else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
-                await createCalendarEvent({
+                saved = await createCalendarEvent({
                     mailboxUid: targetMailboxUid,
                     folderUid: targetFolderUid,
                     ...fields,
                     organizer: { address: effectiveOrganizerAddress, type: "to" },
                 } as CalendarEventInput);
             } else if (editingSingleOccurrence) {
-                await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>);
+                saved = await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>);
             } else if (occurrence.isRecurringOccurrence) {
-                const saved = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)) as Partial<CalendarEventInput>);
-                if (saved.detachedOccurrenceSyncFailed) {
-                    // The series itself was saved - say so, and leave closing to the user once they've read it.
-                    setSyncWarning(true);
-                    return;
-                }
+                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)) as Partial<CalendarEventInput>);
+                saved = series;
+                detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             } else {
-                await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) });
+                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) });
+            }
+            const video = await applyVideoConferencing(saved);
+            if (video.failed) {
+                // The event itself is saved - keep the modal open on the inline error so the video meeting
+                // can be retried (or the toggle put back) rather than closing over it.
+                setSavedEvent(video.event);
+                return;
+            }
+            if (detachedSyncFailed) {
+                // The series itself was saved - say so, and leave closing to the user once they've read it.
+                setSyncWarning(true);
+                return;
             }
             onSaved();
         } catch (err) {
@@ -433,6 +585,28 @@ export default function EventModal({
                     </p>
                 )}
 
+                {/* Outside the `disabled` fieldset below: joining a call is not editing the event, so it stays
+                    available on an invitation's read-only copy too (where the link, like the meeting itself,
+                    is only reachable by whoever holds access to its mailbox). */}
+                {videoMeetingUid && (
+                    <div className="flex items-center gap-3 mb-3">
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto"
+                            disabled={!organizerJoinUrl}
+                            onClick={() => window.open(organizerJoinUrl!, "_blank", "noopener,noreferrer")}
+                        >
+                            Join video call
+                        </Button>
+                        {!organizerJoinUrl && (
+                            <span className="text-xs text-text-muted">
+                                {organizerJoinUrl === null ? "This meeting’s join link isn’t available." : "Loading the join link…"}
+                            </span>
+                        )}
+                    </div>
+                )}
+
                 <fieldset disabled={isInvited} className="flex flex-col gap-1 min-w-0">
 
                 {!occurrence && mailboxOptions && mailboxOptions.length > 1 && (
@@ -478,6 +652,24 @@ export default function EventModal({
                     <input id="event-location" type="text" className={INPUT_CLASS} value={location} onChange={(e) => setLocation(e.target.value)} />
                 </FormField>
 
+                <div className="mb-3">
+                    <label className="flex items-center gap-2 text-sm font-medium">
+                        <input type="checkbox" checked={videoEnabled} onChange={(e) => setVideoEnabled(e.target.checked)} />
+                        Add video conferencing
+                    </label>
+                    {videoEnabled && (
+                        <p className="text-xs text-text-muted mt-1">
+                            Changing attendees after enabling video conferencing won&rsquo;t update meeting invitees &mdash;
+                            turn this off and back on to reissue links to the current attendee list.
+                        </p>
+                    )}
+                    {videoError && (
+                        <p role="alert" className="text-xs text-danger mt-1">
+                            {videoError}
+                        </p>
+                    )}
+                </div>
+
                 <label className="flex items-center gap-2 text-sm font-medium mb-3">
                     <input type="checkbox" checked={allDay} onChange={(e) => handleAllDayChange(e.target.checked)} />
                     All day

package/apps/shared/components/layout/AppShell.tsx

@@ -48,6 +48,7 @@ import NotificationHistoryDialog from "../../notifications/NotificationHistoryDi
 import { notifySessionExpired, setSignInUrl } from "../../notifications/apiErrors.js";
 import { useUnseenErrorCount } from "../../notifications/useNotifications.js";
 import { useSigningEnrollmentWatcher } from "../../signing/useSigningEnrollmentWatcher.js";
+import { useCalendarReminders } from "../../calendar/useCalendarReminders.js";
 
 /** How long sign-out waits for auth-server's logout before navigating anyway. */
 export const LOGOUT_TIMEOUT_MS = 3_000;
@@ -200,6 +201,8 @@ export function AppChrome({
     const mail = useMailConnection({ userUid, enabled: inFrame, open: navigate });
     // A signing certificate the user asked for is announced when it is issued (or fails), on whichever page they are - see the hook.
     useSigningEnrollmentWatcher({ userUid, mailboxes: mail.mailboxes, enabled: inFrame });
+    // A meeting reminder pops up on whichever page they are - see the hook.
+    useCalendarReminders({ userUid, enabled: inFrame });
 
     useRedirectIfUnauthenticated(userUid, authServerUrl);
     // Any request this app makes that the server answers with a 401 - the session ended - raises one "Your session expired" pop-up with a

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/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}`;
+}

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

@@ -0,0 +1,23 @@
+/** Where a reminder's title leads. There is no per-event deep link yet (the calendar opens an event by local state, not a URL - see
+ * `apps/www/calendar/index.tsx`'s `openEvent()`), so every reminder opens the calendar itself. */
+export declare const CALENDAR_HREF = "/calendar";
+export interface UseCalendarRemindersOptions {
+    /** Nothing is shown without a signed-in user. */
+    userUid?: string;
+    /** Runs only while true - the persistent app frame turns it on, like `useMailConnection`'s identical option. */
+    enabled: boolean;
+}
+/**
+ * Pop-up meeting reminders. restapi's `CalendarReminderJob` fires a `"CalendarEvent"`/`"reminder"` push event (`{ eventUid, title, startDate }`)
+ * when an event's `reminderMinutesBeforeStart` comes due, over the same shared push connection Mail already keeps open
+ * (`getPushClient()`) - every accessible mailbox's own channel is already subscribed (`useMailLiveUpdates`'s `pushChannelsFor()`, and the
+ * event is published to the mailbox channel as well as the folder's own), so this hook only has to listen, never to manage channels of its
+ * own. Lives in the persistent app frame (`AppShell`), like `useSigningEnrollmentWatcher`, so a reminder shows wherever the user is signed in -
+ * Mail, Calendar, Contacts, Settings.
+ *
+ * Each reminder is a sticky pop-up (`notify()`, kind `"calendar"`) with two actions: **Dismiss** closes it and does nothing else. **Snooze**
+ * closes it and shows it again - reusing the same notification id, so it replaces rather than stacks - after `SNOOZE_MS` (five minutes), or
+ * sooner if the meeting starts first (`snoozeDelayMs()`). A snooze is this tab's own `setTimeout`, cleared on unmount or sign-out; like the
+ * reminder itself (the push event is never replayed), it does not survive the tab closing.
+ */
+export declare function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersOptions): void;