@rapidmx/web-client 0.14.1 → 0.15.1

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

@@ -10,13 +10,16 @@ import { Label, listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
 import { useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import { useMarkMessageRead } from "../../shared/mail/useMarkMessageRead.js";
 import MailShell, { MailShellProps, useMailShell } from "../../shared/components/mail/layout/MailShell.js";
-import { LazyMessageDetailPane } from "../../shared/components/mail/LazyReadingPane.js";
+import { LazyConversationThreadPane, LazyMessageDetailPane } from "../../shared/components/mail/LazyReadingPane.js";
+import { useLocationSearch } from "../../shared/navigation/AppRouter.js";
 import { ReadingPaneSkeleton } from "../../shared/components/mail/reading/MessageCard.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 
 /**
  * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/index.tsx` keeps its existing
- * inline reading pane and never navigates here; see that file's `handleSelect`.
+ * inline reading pane and never navigates here; see that file's `handleSelect`. A row of the conversation list
+ * comes with `?conversation=<id>` (`handleOpenConversation`), and then this page is the whole thread, opened at this
+ * message, as the desktop's reading pane is; without it (a flat list, a link to a message) it is that one message.
  */
 function MessageDetailPage(props: MailShellProps & { params: { uid: string } }) {
     return (
@@ -32,6 +35,7 @@ function MessageDetailContent({ uid }: { uid: string }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [labels, setLabels] = useState<Label[]>([]);
+    const conversationId: string | null = new URLSearchParams(useLocationSearch()).get("conversation");
 
     useEffect(() => {
         setLoading(true);
@@ -63,8 +67,9 @@ function MessageDetailContent({ uid }: { uid: string }) {
         };
     }, [messageMailboxUid]);
 
-    const attachments = useMessageAttachments(message);
-    useMarkMessageRead(message, setMessage);
+    // A thread loads, marks read and fetches the attachments of each message it opens itself.
+    const attachments = useMessageAttachments(conversationId ? null : message);
+    useMarkMessageRead(conversationId ? null : message, setMessage);
 
     if (loading) {
         // The pane's own frame - a header card and a message card - rather than a line of text: what is coming is known, only not yet its contents.
@@ -82,6 +87,28 @@ function MessageDetailContent({ uid }: { uid: string }) {
     const isSentItems = folders.find((f) => f.uid === message.folderUid)?.type === "sent_items";
     const isOutbox = folders.find((f) => f.uid === message.folderUid)?.type === "outbox";
     const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
+    if (conversationId) {
+        return (
+            // The thread's own height, as the single message's: it scrolls inside the page rather than growing it.
+            <div className="flex flex-col h-full min-h-0">
+                <a href={backHref} className="text-sm text-primary-dark hover:underline block px-4 pt-3">
+                    &larr; Back to messages
+                </a>
+                <LazyConversationThreadPane
+                    conversation={{ conversationId, subject: message.subject, messageCount: 1 }}
+                    selectedUid={message.uid}
+                    mailboxUid={message.mailboxUid}
+                    folders={folders}
+                    labels={labels}
+                    shortcuts
+                    onMessagePatched={() => undefined}
+                    onMessageRemoved={() => undefined}
+                    onLabelCreated={(label) => setLabels((prev) => [...prev, label])}
+                    onFolderCreated={onFolderCreated}
+                />
+            </div>
+        );
+    }
     return (
         <LazyMessageDetailPane
             shortcuts

package/apps/www/settings/profile/index.tsx

@@ -0,0 +1,248 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { routedPage } from "../../_routedPage.js";
+import React, { FormEvent, useMemo, useState } from "react";
+import { FreeBusyVisibility, freeBusyVisibilityOf, isSharedWithMe, updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { DEFAULT_TIME_ZONE, deviceTimeZone, timeZoneOptions } from "@rapidmx/react-shared/util/timeZone.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
+
+export type SettingsProfilePageProps = Omit<SettingsShellProps, "active">;
+
+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";
+
+/** Who may see when this mailbox is busy, as the Profile page words it: the label of each choice and the one line that says what it means. */
+const FREE_BUSY_CHOICES: { value: FreeBusyVisibility; label: string; help: string }[] = [
+    { value: "domain", label: "Everyone on my domain", help: "People with a mailbox on your domain can see when you are busy." },
+    { value: "shared", label: "Only people I've shared my calendar with", help: "Only people you have given access to this mailbox or its calendars can see when you are busy." },
+    { value: "nobody", label: "Nobody", help: "Nobody else can see when you are busy; people looking for a time see your availability as hidden." },
+    { value: "everyone", label: "Everyone on this server", help: "Anyone signed in to this server can see when you are busy." },
+];
+
+/** The longest display name the server accepts. */
+const MAX_DISPLAY_NAME_LENGTH = 255;
+
+/**
+ * Why `displayName` can't be saved as typed, or `undefined` if it can. The server refuses the same things (400): the name
+ * is shown as the sender name on mail from this mailbox, so it must not look like an address (the fullwidth and small
+ * look-alike @ signs included) or carry a line break.
+ */
+function displayNameProblem(displayName: string): string | undefined {
+    if (!displayName) {
+        return "Enter a display name.";
+    }
+    if (/[@＠﹫\r\n]/.test(displayName)) {
+        return "A display name can't contain \"@\" (or a look-alike) or line breaks - it is shown as the sender name on mail you send.";
+    }
+    if (displayName.length > MAX_DISPLAY_NAME_LENGTH) {
+        return `A display name can be at most ${MAX_DISPLAY_NAME_LENGTH} characters.`;
+    }
+    return undefined;
+}
+
+function SettingsProfilePage(props: SettingsProfilePageProps) {
+    return (
+        <SettingsShell {...props} active="profile">
+            <ProfileContent />
+        </SettingsShell>
+    );
+}
+
+function ProfileContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
+    // resolved to one of them — same established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid)!;
+
+    const deviceZone = useMemo(() => deviceTimeZone(), []);
+    // What the server holds, which is what "changed" is measured against - moved along by each successful save.
+    const [savedName, setSavedName] = useState(mailbox.displayName);
+    const [savedZone, setSavedZone] = useState(mailbox.timezone);
+    const [displayName, setDisplayName] = useState(mailbox.displayName);
+    // "UTC" is the server's placeholder for a mailbox nobody chose a zone for, not a choice anyone made, so this device's
+    // zone is offered instead. It stays unsaved until Save, like any other edit.
+    const [timezone, setTimezone] = useState(() =>
+        mailbox.timezone === DEFAULT_TIME_ZONE && deviceZone !== DEFAULT_TIME_ZONE ? deviceZone : mailbox.timezone,
+    );
+    const [savedFreeBusy, setSavedFreeBusy] = useState(freeBusyVisibilityOf(mailbox));
+    const [freeBusy, setFreeBusy] = useState(savedFreeBusy);
+    // Only the mailbox's owner may change who sees its free/busy: on one shared with you the setting is shown, not offered.
+    const canChangeFreeBusy = !isSharedWithMe(mailbox);
+    const [nameError, setNameError] = useState<string | null>(null);
+    // See auto-reply/index.tsx's identical note - later saves must carry the version the previous save returned.
+    const [version, setVersion] = useState(mailbox.version);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    const zones = useMemo(() => timeZoneOptions(savedZone, deviceZone, timezone), [savedZone, deviceZone, timezone]);
+    const zoneWasPreselected = savedZone === DEFAULT_TIME_ZONE && deviceZone !== DEFAULT_TIME_ZONE && timezone === deviceZone;
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setSaved(false);
+
+        const name = displayName.trim();
+        const problem = displayNameProblem(name);
+        if (problem) {
+            setNameError(problem);
+            return;
+        }
+        setNameError(null);
+        setDisplayName(name);
+
+        const nameChanged = name !== savedName;
+        const zoneChanged = timezone !== savedZone;
+        const freeBusyChanged = canChangeFreeBusy && freeBusy !== savedFreeBusy;
+        if (!nameChanged && !zoneChanged && !freeBusyChanged) {
+            setSaved(true);
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const updated = await updateMailbox({
+                uid: mailbox.uid,
+                version,
+                ...(nameChanged && { displayName: name }),
+                ...(zoneChanged && { timezone }),
+                ...(freeBusyChanged && { freeBusyVisibility: freeBusy }),
+            });
+            setVersion(updated.version);
+            setSavedName(name);
+            setSavedZone(timezone);
+            setSavedFreeBusy(freeBusy);
+            setSaved(true);
+        } catch (err) {
+            notifyApiError(err, "Couldn't save your profile");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-xl">
+                <h1 className="text-lg font-bold tracking-tight mb-1">Profile</h1>
+                <p className="text-sm text-text-muted mb-4">
+                    How this mailbox presents itself to the people you write to, and where you are.
+                </p>
+
+                {saved && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+                <form onSubmit={handleSubmit} className="flex flex-col">
+                    <FormField label="Display name" htmlFor="profile-display-name">
+                        <input
+                            id="profile-display-name"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={displayName}
+                            onChange={(e) => {
+                                setDisplayName(e.target.value);
+                                setNameError(null);
+                                setSaved(false);
+                            }}
+                            aria-invalid={nameError ? true : undefined}
+                            aria-describedby={nameError ? "profile-display-name-error" : "profile-display-name-help"}
+                        />
+                        {nameError && (
+                            <p id="profile-display-name-error" role="alert" className="mt-1 text-xs text-danger">
+                                {nameError}
+                            </p>
+                        )}
+                        <p id="profile-display-name-help" className="mt-1 text-xs text-text-muted">
+                            The sender name on mail you send, shown to recipients beside your address (for example
+                            &ldquo;Jane Doe&rdquo;). It can&rsquo;t contain an &ldquo;@&rdquo;.
+                        </p>
+                    </FormField>
+
+                    <FormField label="Time zone" htmlFor="profile-time-zone">
+                        <div className="flex flex-wrap items-center gap-2">
+                            <select
+                                id="profile-time-zone"
+                                className={SELECT_CLASS}
+                                value={timezone}
+                                onChange={(e) => {
+                                    setTimezone(e.target.value);
+                                    setSaved(false);
+                                }}
+                                aria-describedby="profile-time-zone-help"
+                            >
+                                {zones.map((zone) => (
+                                    <option key={zone} value={zone}>
+                                        {zone}
+                                    </option>
+                                ))}
+                            </select>
+                            {timezone !== deviceZone && (
+                                <Button
+                                    type="button"
+                                    variant="text"
+                                    className="!w-auto"
+                                    onClick={() => {
+                                        setTimezone(deviceZone);
+                                        setSaved(false);
+                                    }}
+                                >
+                                    Use this device&rsquo;s time zone ({deviceZone})
+                                </Button>
+                            )}
+                        </div>
+                        {zoneWasPreselected && (
+                            <p className="mt-1 text-xs text-text-muted">
+                                Your mailbox has no time zone chosen yet; this device&rsquo;s is preselected. Save to keep it.
+                            </p>
+                        )}
+                        <p id="profile-time-zone-help" className="mt-1 text-xs text-text-muted">
+                            How calendar times and reminders are shown and scheduled for this mailbox, such as when an
+                            event or a reminder falls.
+                        </p>
+                    </FormField>
+
+                    <FormField label="Free/busy visibility" htmlFor="profile-free-busy">
+                        <select
+                            id="profile-free-busy"
+                            className={SELECT_CLASS}
+                            value={freeBusy}
+                            disabled={!canChangeFreeBusy}
+                            onChange={(e) => {
+                                setFreeBusy(e.target.value as FreeBusyVisibility);
+                                setSaved(false);
+                            }}
+                            aria-describedby="profile-free-busy-help"
+                        >
+                            {FREE_BUSY_CHOICES.map((choice) => (
+                                <option key={choice.value} value={choice.value}>
+                                    {choice.label}
+                                </option>
+                            ))}
+                        </select>
+                        <p id="profile-free-busy-help" className="mt-1 text-xs text-text-muted">
+                            {FREE_BUSY_CHOICES.find((choice) => choice.value === freeBusy)!.help}
+                        </p>
+                        <p className="mt-1 text-xs text-text-muted">
+                            Who can see the hours you are busy when they look for a time to meet - never the title, place or guests of an event.
+                        </p>
+                        {!canChangeFreeBusy && (
+                            <p className="mt-1 text-xs text-text-muted">This mailbox is shared with you: only its owner can change who sees its free/busy times.</p>
+                        )}
+                    </FormField>
+
+                    <div>
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Save
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default routedPage("/settings/profile", SettingsProfilePage);

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

@@ -68,8 +68,10 @@ function DomainDetailContent({ uid }) {
             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) => {
+    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, 
+                            // Set in the same update as `domain` (see `handleLoaded()`), which is what this section waits for.
+                            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" })] })] }))] }));
+                            }, 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/shared/appearance/AppearanceForm.js

@@ -54,7 +54,15 @@ export default function AppearanceForm() {
     const colors = prefs.colors;
     // The kind the radio shows: chosen before it can take effect ("Image" is chosen before there is one).
     const [kind, setKind] = useState(background?.kind ?? "none");
-    useEffect(() => setKind(background?.kind ?? "none"), [background?.kind]);
+    // Follows a change of the stored kind (the server's answer, another tab, a reset) - not the first render, which `useState()` above
+    // already started from: that effect can run after a choice made right after the page appeared, and would put the old kind back.
+    const shownKind = useRef(background?.kind);
+    useEffect(() => {
+        if (shownKind.current !== background?.kind) {
+            shownKind.current = background?.kind;
+            setKind(background?.kind ?? "none");
+        }
+    }, [background?.kind]);
     const [fileError, setFileError] = useState(null);
     const [dragging, setDragging] = useState(false);
     const [uploading, setUploading] = useState(null);

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

@@ -0,0 +1,50 @@
+import { PluginNav } from "../plugins/pluginNav.js";
+/** The id of the Settings section the booking plugin's manifest contributes (`ui.settingsSections`) - what tells the client it is running. */
+export declare const BOOKING_SETTINGS_SECTION_ID = "booking-types";
+/**
+ * Where the booking plugin's Settings pages are mounted (`/settings/booking-types`), or `undefined` when the plugin is not running.
+ *
+ * A server only puts a plugin's navigation into `pluginNav` while the plugin is enabled and its pages built, so its section being there is the
+ * client's one way of knowing (the plugin list itself is admin-only).
+ */
+export declare function bookingSettingsHref(pluginNav: PluginNav | undefined): string | undefined;
+/** The plugin's "new booking link" page for `mailboxUid` - the full form behind the popover's More options. */
+export declare function newBookingLinkHref(settingsHref: string, mailboxUid: string): string;
+export interface BookingAvailabilityWindow {
+    /** 0 (Sunday) to 6 (Saturday). */
+    dayOfWeek: number;
+    startMinute: number;
+    endMinute: number;
+}
+export type BookingLocationType = "phone" | "video" | "other";
+export interface BookingMeetingType {
+    name: string;
+    durationMinutes: number;
+    locationOptions: {
+        type: BookingLocationType;
+    }[];
+}
+export interface CreateBookingTypeInput {
+    mailboxUid: string;
+    calendarFolderUid: string;
+    slug: string;
+    name: string;
+    hostDisplayName: string;
+    meetingTypes: BookingMeetingType[];
+    timezone: string;
+    availability: BookingAvailabilityWindow[];
+    bufferAfterMinutes: number;
+}
+/** What comes back from a create: the fields the popover needs to show the link. */
+export interface CreatedBookingType {
+    uid: string;
+    mailboxUid: string;
+    slug: string;
+    name: string;
+}
+/** Creates a booking type with the plugin's own defaults for everything the popover leaves out (an hour's notice, 30 days ahead, no approval). */
+export declare function createBookingType(input: CreateBookingTypeInput): Promise<CreatedBookingType>;
+/** A URL-safe slug for a schedule's name, the way the plugin's own `normalizeSlug()` reads it; `"appointments"` when nothing usable is left. */
+export declare function slugFor(name: string): string;
+/** The public page of a booking type on this site's own origin (`/book/<mailbox>/<slug>`, the `@` of a mailbox uid left as it is). Browser only. */
+export declare function bookingPublicUrl(mailboxUid: string, slug: string): string;

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

@@ -0,0 +1,57 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The calendar's side of `@rapidmx/booking-plugin`: whether the plugin is running, and the one call the quick-create popover's
+ * "Appointment schedule" tab makes on it - creating a booking type (`POST /api/mail/booking-types`).
+ *
+ * The plugin ships its own typed client, but inside its own UI (`apps/shared/bookingApi.ts` of the plugin), which this package cannot import,
+ * so the few fields this popover writes are mirrored here. The plugin's `BaseBookingTypeRoute` is the authority: it normalizes the slug,
+ * assigns the uids, refuses a taken slug with a 409 and validates the availability, durations and calendar folder.
+ */
+import { apiFetch } from "@rapidmx/react-shared/util/api.js";
+import { isSafePluginHref } from "../plugins/pluginNav.js";
+/** The id of the Settings section the booking plugin's manifest contributes (`ui.settingsSections`) - what tells the client it is running. */
+export const BOOKING_SETTINGS_SECTION_ID = "booking-types";
+/**
+ * Where the booking plugin's Settings pages are mounted (`/settings/booking-types`), or `undefined` when the plugin is not running.
+ *
+ * A server only puts a plugin's navigation into `pluginNav` while the plugin is enabled and its pages built, so its section being there is the
+ * client's one way of knowing (the plugin list itself is admin-only).
+ */
+export function bookingSettingsHref(pluginNav) {
+    const section = pluginNav?.settingsSections?.find((item) => item.id === BOOKING_SETTINGS_SECTION_ID);
+    return section && isSafePluginHref(section.href) ? section.href.replace(/\/+$/, "") : undefined;
+}
+/** The plugin's "new booking link" page for `mailboxUid` - the full form behind the popover's More options. */
+export function newBookingLinkHref(settingsHref, mailboxUid) {
+    return `${settingsHref}/new?mailboxUid=${encodeURIComponent(mailboxUid)}`;
+}
+/** Creates a booking type with the plugin's own defaults for everything the popover leaves out (an hour's notice, 30 days ahead, no approval). */
+export function createBookingType(input) {
+    return apiFetch("/mail/booking-types", {
+        method: "POST",
+        body: JSON.stringify({
+            dateOverrides: [],
+            bufferBeforeMinutes: 0,
+            minimumNoticeMinutes: 60,
+            bookingWindowDays: 30,
+            requiresApproval: false,
+            enabled: true,
+            ...input,
+        }),
+    });
+}
+/** A URL-safe slug for a schedule's name, the way the plugin's own `normalizeSlug()` reads it; `"appointments"` when nothing usable is left. */
+export function slugFor(name) {
+    return (name
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "") || "appointments");
+}
+/** The public page of a booking type on this site's own origin (`/book/<mailbox>/<slug>`, the `@` of a mailbox uid left as it is). Browser only. */
+export function bookingPublicUrl(mailboxUid, slug) {
+    return `${window.location.origin}/book/${encodeURIComponent(mailboxUid).replace(/%40/g, "@")}/${encodeURIComponent(slug)}`;
+}

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

@@ -0,0 +1,11 @@
+/** Pure helper behind the calendar page's live updates: which push events say "an event changed, and the payload is only a busy block". */
+import type { PushEvent } from "@rapidmx/react-shared/mail/pushClient.js";
+/**
+ * The uid of the event a push event announces as a redacted busy block, or `undefined` for anything else the shared push connection delivers.
+ *
+ * When somebody creates or changes a private or confidential event, restapi publishes it on the calendar's channel once, for every subscriber - and that one
+ * payload has to be safe for a read-only reader of a shared calendar, so it is the busy block (`redacted: true`, title "Busy", no details). It must not be
+ * stored as the event by the calendar's owner (or anybody else who may see it in full): they fetch the event again by its uid, which answers with as
+ * much as they may see.
+ */
+export declare function redactedEventUidOf(event: PushEvent): string | undefined;

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

@@ -0,0 +1,23 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Pure helper behind the calendar page's live updates: which push events say "an event changed, and the payload is only a busy block". */
+/** The published model name of a calendar event on either database (`CalendarEventMongo`, `CalendarEventSQL`) - and not the reminder's `"CalendarEvent"`,
+ * which has its own action. */
+const EVENT_MODEL = /^CalendarEvent(Mongo|SQL)$/;
+/**
+ * The uid of the event a push event announces as a redacted busy block, or `undefined` for anything else the shared push connection delivers.
+ *
+ * When somebody creates or changes a private or confidential event, restapi publishes it on the calendar's channel once, for every subscriber - and that one
+ * payload has to be safe for a read-only reader of a shared calendar, so it is the busy block (`redacted: true`, title "Busy", no details). It must not be
+ * stored as the event by the calendar's owner (or anybody else who may see it in full): they fetch the event again by its uid, which answers with as
+ * much as they may see.
+ */
+export function redactedEventUidOf(event) {
+    if (!EVENT_MODEL.test(event.type) || (event.action !== "create" && event.action !== "update")) {
+        return undefined;
+    }
+    const data = event.data;
+    return data?.redacted === true && typeof data.uid === "string" ? data.uid : undefined;
+}

package/dist/apps/shared/components/admin/layout/AdminShell.d.ts

@@ -1,6 +1,6 @@
 import "../../../styles/app.css";
 import React, { PropsWithChildren } from "react";
-import { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import type { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
 import { PluginNav, PluginNavProps } from "../../../plugins/pluginNav.js";
 export type AdminSection = "mailboxes" | "quarantine" | "ingestQueue" | "domains" | "auditLog" | "distributionLists" | "transportRules" | "escrowScopes" | "retentionPolicy" | "encryptionPolicy" | "mailboxPolicy" | "setup" | "dataRequests" | "plugins" | "branding" | "signingCertificates";
 /** A core `AdminSection`, or a plugin's `adminNav` item id (see `PluginNav`). */

package/dist/apps/shared/components/admin/layout/AdminShell.js

@@ -5,14 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 import "../../../styles/app.css";
 import { useEffect, useState } from "react";
-import { HiOutlineClipboardDocumentList, HiOutlineClock, HiOutlineDocumentArrowDown, HiOutlineDocumentCheck, HiOutlineGlobeAlt, HiOutlineInboxStack, HiOutlineKey, HiOutlineLockClosed, HiOutlinePaintBrush, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineUserGroup, HiOutlineWrenchScrewdriver, } from "react-icons/hi2";
+import { HiOutlineClipboardDocumentList, HiOutlineClock, HiOutlineDocumentArrowDown, HiOutlineDocumentCheck, HiOutlineGlobeAlt, HiOutlineInboxStack, HiOutlineKey, HiOutlineLockClosed, HiOutlinePaintBrush, HiOutlinePuzzlePiece, HiOutlineQueueList, HiOutlineRocketLaunch, HiOutlineShieldCheck, HiOutlineShieldExclamation, HiOutlineUserGroup, HiOutlineWrenchScrewdriver, HiOutlineBars3, } from "react-icons/hi2";
 import { apiFetch, ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getSetupStatus } from "@rapidmx/react-shared/admin/setupApi.js";
 import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
 import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
 import { FrameBrandingFooter, useBrandingHtml } from "../../layout/BrandingChrome.js";
 import RailIcon from "../../layout/RailIcon.js";
 import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
@@ -110,6 +110,7 @@ export function adminNavItems(pluginNav) {
 export default function AdminShell({ active, userUid, authServerUrl, pluginNav, children }) {
     const [status, setStatus] = useState("checking");
     const [error, setError] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
     // `branding` only feeds the footer below: the admin-configured header is for the webmail and public pages, not the
     // console. `useBranding()` is still what injects the custom stylesheet and supplies the rail's icon.
     const { branding, iconSrc } = useBranding();
@@ -198,7 +199,10 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
                                     id === active
                                         ? "bg-primary/10 text-primary-dark"
                                         : "text-text-muted hover:bg-surface-alt hover:text-text",
-                                ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] }), _jsx(BottomTabBar, { apps: navItems, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("header", { className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeItem?.label }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut })] }), _jsx("div", { id: "app-content", className: "flex-1 pb-14 md:pb-0", children: _jsx("main", { className: "max-w-6xl mx-auto px-6 py-8", children: children }) })] })] }) }));
+                                ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] }), _jsx(Drawer, { open: menuOpen, onClose: () => setMenuOpen(false), title: "Admin", children: _jsx("nav", { "aria-label": "Admin menu", className: "flex flex-col gap-1 -mx-2", children: navItems.map(({ id, href, label, icon: Icon }) => (_jsxs("a", { href: href, "aria-current": id === active ? "page" : undefined, onClick: () => setMenuOpen(false), className: [
+                                    "flex items-center gap-3 px-3 py-2.5 rounded-sm text-sm font-medium",
+                                    id === active ? "bg-primary/10 text-primary-dark" : "text-text hover:bg-surface-alt",
+                                ].join(" "), children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), label] }, id))) }) }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("header", { className: "rr-solid sticky top-0 z-30 h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-4 md:px-6", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("button", { type: "button", className: "md:hidden shrink-0 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open menu", onClick: () => setMenuOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide truncate", children: activeItem?.label })] }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut })] }), _jsx("div", { id: "app-content", className: "flex-1", children: _jsx("main", { className: "max-w-6xl mx-auto px-6 py-8", children: children }) })] })] }) }));
     }
     // The user's own colours and background (`AppearanceProvider`), from what the last webmail page cached in this browser: the console never asks the server.
     return (_jsxs(AppearanceProvider, { userUid: userUid, lookUp: false, children: [content, _jsx(FrameBrandingFooter, { parsed: footer, appTitle: [...adminNavItems(pluginNav), ...OFF_RAIL_ITEMS].find((item) => item.id === active)?.label })] }));

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

@@ -7,6 +7,7 @@ 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 { 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";
@@ -25,7 +26,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);