@rapidmx/web-client 0.14.0 → 0.15.1

package/apps/admin/domains/[uid].tsx

@@ -113,7 +113,8 @@ function DomainDetailContent({ uid }: { uid: string }) {
                             id="aliasOf"
                             type="text"
                             className={INPUT_CLASS}
-                            value={aliasInput ?? ""}
+                            // 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);
@@ -126,7 +127,7 @@ function DomainDetailContent({ uid }: { uid: string }) {
                             type="button"
                             className="!w-auto"
                             loading={savingAlias}
-                            disabled={savingAlias || (aliasInput ?? "") === (domain.aliasOf ?? "")}
+                            disabled={savingAlias || aliasInput! === (domain.aliasOf ?? "")}
                             onClick={handleSaveAlias}
                         >
                             Save

package/apps/shared/appearance/AppearanceForm.tsx

@@ -75,7 +75,15 @@ export default function AppearanceForm() {
 
     // The kind the radio shows: chosen before it can take effect ("Image" is chosen before there is one).
     const [kind, setKind] = useState<BackgroundKind>(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<string | null>(null);
     const [dragging, setDragging] = useState(false);
     const [uploading, setUploading] = useState<string | null>(null);

package/apps/shared/calendar/bookingPlugin.ts

@@ -0,0 +1,100 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { PluginNav, 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: PluginNav | undefined): string | undefined {
+    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: string, mailboxUid: string): string {
+    return `${settingsHref}/new?mailboxUid=${encodeURIComponent(mailboxUid)}`;
+}
+
+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 function createBookingType(input: CreateBookingTypeInput): Promise<CreatedBookingType> {
+    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: string): string {
+    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: string, slug: string): string {
+    return `${window.location.origin}/book/${encodeURIComponent(mailboxUid).replace(/%40/g, "@")}/${encodeURIComponent(slug)}`;
+}

package/apps/shared/calendar/calendarLiveUpdates.ts

@@ -0,0 +1,27 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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". */
+
+import type { PushEvent } from "@rapidmx/react-shared/mail/pushClient.js";
+
+/** 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: PushEvent): string | undefined {
+    if (!EVENT_MODEL.test(event.type) || (event.action !== "create" && event.action !== "update")) {
+        return undefined;
+    }
+    const data = event.data as { uid?: unknown; redacted?: unknown } | null | undefined;
+    return data?.redacted === true && typeof data.uid === "string" ? data.uid : undefined;
+}

package/apps/shared/components/admin/layout/AdminShell.tsx

@@ -21,6 +21,7 @@ import {
     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";
@@ -28,7 +29,8 @@ import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session
 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, { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import type { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
 import { FrameBrandingFooter, useBrandingHtml } from "../../layout/BrandingChrome.js";
 import RailIcon from "../../layout/RailIcon.js";
 import AppearanceProvider from "../../../appearance/AppearanceProvider.js";
@@ -184,6 +186,7 @@ export function adminNavItems(pluginNav?: PluginNav): NavItem[] {
 export default function AdminShell({ active, userUid, authServerUrl, pluginNav, children }: PropsWithChildren<AdminShellProps>) {
     const [status, setStatus] = useState<Status>("checking");
     const [error, setError] = useState<string | null>(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();
@@ -321,13 +324,42 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
                             </a>
                         ))}
                     </nav>
-                    <BottomTabBar apps={navItems} active={active} />
+                    {/* Below `md` the sections are a menu that slides in from the left: ten or so of them don't fit a bar along the bottom. */}
+                    <Drawer open={menuOpen} onClose={() => setMenuOpen(false)} title="Admin">
+                        <nav aria-label="Admin menu" className="flex flex-col gap-1 -mx-2">
+                            {navItems.map(({ id, href, label, icon: Icon }) => (
+                                <a
+                                    key={id}
+                                    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(" ")}
+                                >
+                                    <Icon size={20} aria-hidden="true" />
+                                    {label}
+                                </a>
+                            ))}
+                        </nav>
+                    </Drawer>
                     <div className="flex-1 flex flex-col min-w-0">
-                        <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">
-                            <span className="font-display font-bold text-lg uppercase tracking-wide">{activeItem?.label}</span>
+                        <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">
+                            <div className="flex items-center gap-2 min-w-0">
+                                <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)}
+                                >
+                                    <HiOutlineBars3 size={20} aria-hidden="true" />
+                                </button>
+                                <span className="font-display font-bold text-lg uppercase tracking-wide truncate">{activeItem?.label}</span>
+                            </div>
                             <UserMenu userUid={userUid} authServerUrl={authServerUrl} onSignOut={handleSignOut} />
                         </header>
-                        <div id="app-content" className="flex-1 pb-14 md:pb-0">
+                        <div id="app-content" className="flex-1">
                             <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
                         </div>
                     </div>

package/apps/shared/components/admin/settings/MailboxCreateForm.tsx

@@ -6,6 +6,7 @@ import React, { FormEvent, 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, Mailbox, resolveMailboxOwner, ResolvedPrincipal } 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";
@@ -36,7 +37,8 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [displayName, setDisplayName] = useState(defaults?.displayName ?? "");
     const [ownerMode, setOwnerMode] = useState<"shared" | "owned">(defaults?.ownerUserUid ? "owned" : "shared");
     const [resolvedOwner, setResolvedOwner] = useState<ResolvedPrincipal | null>(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);