@rapidmx/web-client 0.2.0

package/dist/apps/shared/styles/app.css

@@ -0,0 +1,265 @@
+/*
+ * RapidMX mail-server UI — Tailwind entry point.
+ *
+ * Design tokens are still defined as plain CSS custom properties (ported from auth-server's
+ * `public/styles/globals.css`, itself from rapidrest.dev's Infima-based cyan/gold palette) rather than
+ * inside the `@theme` block directly, so the existing `prefers-color-scheme`/`[data-theme]` dark-mode
+ * mechanism keeps working exactly as before. The `@theme` block below just aliases Tailwind's own color/
+ * radius/shadow/font tokens to these variables, so `bg-primary`, `text-muted`, `rounded-md`, `shadow-card`,
+ * etc. resolve through the same live-swappable custom properties instead of static values.
+ */
+@import "tailwindcss";
+
+/*
+ * Tailwind v4's automatic content scanning excludes `node_modules` by default, which is exactly where
+ * `@rapidmx/react-shared`'s components live from every consumer's perspective (a `link:`-ed sibling) -
+ * without this, none of its Tailwind classnames (Modal/Drawer/Button/Alert/Skeleton/FormField/
+ * PopoverPortal/ContactAvatar/MiniDatePicker/BottomTabBar) would ever be scanned.
+ */
+@source "../../node_modules/@rapidmx/react-shared/src";
+
+/*
+ * `server`'s own build (unlike `electron-client`, which already explicitly sourced this same tree in
+ * its own `styles.css`) has no explicit `@source` for this package's *own* `apps/**` tree at all,
+ * relying entirely on Tailwind's "automatic" module-graph-based detection - confirmed empirically to
+ * be incomplete here: `server`'s `vite.config.ts` (`@rapidrest/react`'s `createViteConfig`) builds one
+ * independent Rollup entry per page (dozens of them, one per `www`/`admin` route), and Tailwind's
+ * per-css-module content scan only picked up classnames from whichever ONE chunk's reachable graph
+ * `app.css` first got attached to - e.g. every `admin`-only utility (`justify-between`, `px-6`,
+ * `max-w-md`, ...) used by `AdminShell.tsx` (which has its own, separate `import "./app.css"`) was
+ * silently absent from the built stylesheet, even though `AdminShell.tsx` itself was very much in the
+ * bundle - verified directly by diffing every classname `AdminShell.tsx` uses against the actual built
+ * CSS. An explicit `@source` here makes the scan independent of Vite's per-entry chunking, the same
+ * fix this file already applies to `react-shared`, just for this package's own source too.
+ */
+@source "../../";
+
+/*
+ * Self-hosted display typeface — the four weights shipped in `public/fonts/`. Matches the
+ * Book/Medium/Bold/Heavy naming + 400/500/700/800 weight mapping from the brand style guide
+ * (https://powerlevel.gg/style-guide/): Blender Pro is for headings/display/short UI labels only —
+ * never long-form body copy, which stays on `--font-sans` (Inter) below.
+ */
+@font-face {
+    font-family: "Blender Pro";
+    src: url("/fonts/Blender-Pro-Book.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Blender Pro";
+    src: url("/fonts/Blender-Pro-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Blender Pro";
+    src: url("/fonts/Blender-Pro-Bold.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Blender Pro";
+    src: url("/fonts/Blender-Pro-Heavy.ttf") format("truetype");
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+:root {
+    /* Teal — the primary structural/brand color (nav, links, active states, focus rings), sampled
+     * from the new logo's glass-cube color. Same 7-step shape the old cyan scale used (600/700/800/
+     * 900/500/400/300), just re-hued. */
+    --rr-color-primary: #0d9488;
+    --rr-color-primary-dark: #0f766e;
+    --rr-color-primary-darker: #115e59;
+    --rr-color-primary-darkest: #134e4a;
+    --rr-color-primary-light: #14b8a6;
+    --rr-color-primary-lighter: #2dd4bf;
+    --rr-color-primary-lightest: #5eead4;
+
+    /* Gold — the action/highlight color (primary buttons, hover accents), sampled from the new
+     * logo's envelope. Values taken directly from the brand style guide's gold palette
+     * (https://powerlevel.gg/style-guide/), which is already vetted for WCAG AA contrast. */
+    --rr-color-accent: #a3690a;
+    --rr-color-accent-dark: #7a4e08;
+    --rr-color-accent-soft: #c98a1d;
+    --rr-color-accent-pale: #fbe9c2;
+    --rr-color-text-on-accent: #1c2526;
+
+    --rr-color-danger: #dc2626;
+    --rr-color-danger-bg: #fef2f2;
+    --rr-color-success: #16a34a;
+    --rr-color-warning: #f0b429;
+    --rr-color-warning-contrast: #1c2526;
+
+    --rr-color-bg: #ffffff;
+    --rr-color-surface: #ffffff;
+    --rr-color-surface-alt: #f5f7f8;
+    --rr-color-border: #e3e8ea;
+    --rr-color-text: #1c2526;
+    --rr-color-text-muted: #5a6b6e;
+    --rr-color-text-on-primary: #ffffff;
+
+    --rr-radius-sm: 0.4rem;
+    --rr-radius-md: 0.8rem;
+    --rr-radius-lg: 1rem;
+    --rr-radius-pill: 999px;
+
+    --rr-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+    --rr-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.12);
+
+    /* Inter (loaded via Google Fonts in each app's `_layout.tsx`) is body copy's typeface per the
+     * style guide; `--rr-font-display` (Blender Pro) is applied separately, to headings/short UI
+     * labels only — see the global `h1`-`h6` rule near the bottom of this file. */
+    --rr-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans",
+        sans-serif, BlinkMacSystemFont;
+    --rr-font-display: "Blender Pro", var(--rr-font-family);
+
+    color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        --rr-color-primary: #2dd4bf;
+        --rr-color-primary-dark: #14b8a6;
+        --rr-color-primary-darker: #0d9488;
+        --rr-color-primary-darkest: #0f766e;
+        --rr-color-primary-light: #5eead4;
+        --rr-color-primary-lighter: #99f6e4;
+        --rr-color-primary-lightest: #ccfbf1;
+
+        --rr-color-accent: #f2af0d;
+        --rr-color-accent-dark: #c98a0a;
+        --rr-color-accent-soft: #f6ca5f;
+        --rr-color-accent-pale: #fce9ba;
+        --rr-color-text-on-accent: #1c2526;
+
+        --rr-color-danger: #f87171;
+        --rr-color-danger-bg: #3f1d1d;
+        --rr-color-success: #4ade80;
+        --rr-color-warning: #fbbf24;
+        --rr-color-warning-contrast: #1c2526;
+
+        --rr-color-bg: #14181a;
+        --rr-color-surface: #1b2022;
+        --rr-color-surface-alt: #20262a;
+        --rr-color-border: #313a3d;
+        --rr-color-text: #eef2f3;
+        --rr-color-text-muted: #9fb0b3;
+        --rr-color-text-on-primary: #0b1416;
+
+        color-scheme: dark;
+    }
+}
+
+:root[data-theme="dark"] {
+    --rr-color-primary: #2dd4bf;
+    --rr-color-primary-dark: #14b8a6;
+    --rr-color-primary-darker: #0d9488;
+    --rr-color-primary-darkest: #0f766e;
+    --rr-color-primary-light: #5eead4;
+    --rr-color-primary-lighter: #99f6e4;
+    --rr-color-primary-lightest: #ccfbf1;
+
+    --rr-color-accent: #f2af0d;
+    --rr-color-accent-dark: #c98a0a;
+    --rr-color-accent-soft: #f6ca5f;
+    --rr-color-accent-pale: #fce9ba;
+    --rr-color-text-on-accent: #1c2526;
+
+    --rr-color-danger: #f87171;
+    --rr-color-danger-bg: #3f1d1d;
+    --rr-color-success: #4ade80;
+    --rr-color-warning: #fbbf24;
+    --rr-color-warning-contrast: #1c2526;
+
+    --rr-color-bg: #14181a;
+    --rr-color-surface: #1b2022;
+    --rr-color-surface-alt: #20262a;
+    --rr-color-border: #313a3d;
+    --rr-color-text: #eef2f3;
+    --rr-color-text-muted: #9fb0b3;
+    --rr-color-text-on-primary: #0b1416;
+
+    color-scheme: dark;
+}
+
+@theme {
+    --color-primary: var(--rr-color-primary);
+    --color-primary-dark: var(--rr-color-primary-dark);
+    --color-primary-darker: var(--rr-color-primary-darker);
+    --color-primary-darkest: var(--rr-color-primary-darkest);
+    --color-primary-light: var(--rr-color-primary-light);
+    --color-primary-lighter: var(--rr-color-primary-lighter);
+    --color-primary-lightest: var(--rr-color-primary-lightest);
+    --color-accent: var(--rr-color-accent);
+    --color-accent-dark: var(--rr-color-accent-dark);
+    --color-accent-soft: var(--rr-color-accent-soft);
+    --color-accent-pale: var(--rr-color-accent-pale);
+    --color-text-on-accent: var(--rr-color-text-on-accent);
+
+    --color-danger: var(--rr-color-danger);
+    --color-danger-bg: var(--rr-color-danger-bg);
+    --color-success: var(--rr-color-success);
+    --color-warning: var(--rr-color-warning);
+    --color-warning-contrast: var(--rr-color-warning-contrast);
+
+    --color-bg: var(--rr-color-bg);
+    --color-surface: var(--rr-color-surface);
+    --color-surface-alt: var(--rr-color-surface-alt);
+    --color-border: var(--rr-color-border);
+    --color-text: var(--rr-color-text);
+    --color-text-muted: var(--rr-color-text-muted);
+    --color-text-on-primary: var(--rr-color-text-on-primary);
+
+    --radius-sm: var(--rr-radius-sm);
+    --radius-md: var(--rr-radius-md);
+    --radius-lg: var(--rr-radius-lg);
+    --radius-pill: var(--rr-radius-pill);
+
+    --shadow-card: var(--rr-shadow-lw);
+    --shadow-modal: var(--rr-shadow-md);
+
+    --font-sans: var(--rr-font-family);
+    --font-display: var(--rr-font-display);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: var(--rr-font-family);
+    background: var(--rr-color-bg);
+    color: var(--rr-color-text);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* Blender Pro is the brand's display typeface (see the style guide linked at the top of this file) —
+ * applied to every heading regardless of its content, since a font swap alone never hurts even
+ * dynamic content (a contact's name, an email subject). Uppercase/wide-tracking treatment is
+ * deliberately NOT applied blanket here — it reads fine on short, static UI chrome ("Mailboxes",
+ * "Tasks") but turns a real name or subject line into shouty all-caps, so that's opted into per
+ * element instead (`uppercase tracking-wide`), matching the style guide's own body-text warning
+ * ("Blender Pro set in long paragraphs reads as shouting") applied to short user content too. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--rr-font-display);
+}

package/dist/apps/www/_404.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function NotFoundPage() {
+    return _jsx("p", { children: "Page not found" });
+}

package/dist/apps/www/_500.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ErrorPage() {
+    return _jsx("p", { children: "Internal server error" });
+}

package/dist/apps/www/_layout.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
+export default function Layout({ children, branding }) {
+    const title = branding?.title || branding?.companyName ? `${branding?.title || branding?.companyName}: Mail` : "RapidMX: Mail";
+    const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
+    const stylesheetHref = branding?.stylesheetUrl;
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: title }), _jsx("link", { rel: "icon", type: "image/svg+xml", href: iconHref }), _jsx("link", { rel: "alternate icon", href: "/favicon.ico" }), _jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), _jsx("link", { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" }), stylesheetHref && _jsx("link", { rel: "stylesheet", href: stylesheetHref, id: CUSTOM_STYLESHEET_LINK_ID })] }), _jsx("body", { children: children })] }));
+}

package/dist/apps/www/calendar/index.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useMemo, useState } from "react";
+import { DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { HiOutlineBars3 } from "react-icons/hi2";
+import { addDays, addMonths, addWeeks, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, startOfDay, startOfMonth, startOfWeek, } from "date-fns";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
+import { listCalendarEvents } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { moveOccurrence, resizeOccurrenceEnd } from "@rapidmx/react-shared/calendar/calendarMutations.js";
+import { resolveDragAction } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+import { createFolder } from "@rapidmx/react-shared/mail/mailApi.js";
+import { expandAllOccurrences } from "@rapidmx/react-shared/calendar/recurrence.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import CalendarShell, { useCalendarShell } from "../../shared/components/calendar/layout/CalendarShell.js";
+import CalendarListSidebar from "../../shared/components/calendar/CalendarListSidebar.js";
+import EventModal from "../../shared/components/calendar/EventModal.js";
+import MiniDatePicker from "@rapidmx/react-shared/components/pickers/MiniDatePicker.js";
+import MonthView from "../../shared/components/calendar/MonthView.js";
+import SplitDayView from "../../shared/components/calendar/SplitDayView.js";
+import TimeGridView from "../../shared/components/calendar/TimeGridView.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+export default function CalendarPage(props) {
+    return (_jsx(CalendarShell, { ...props, children: _jsx(CalendarContent, {}) }));
+}
+const VIEW_TYPES = ["month", "week", "workWeek", "day", "split"];
+const VIEW_LABELS = { month: "Month", week: "Week", workWeek: "Work Week", day: "Day", split: "Split" };
+function CalendarContent() {
+    const { mailboxUid, folderUid, calendarFolders, mailboxes, reloadFolders } = useCalendarShell();
+    // `CalendarShell` only ever renders this component once `mailboxUid` is set, and always to a value
+    // drawn from `mailboxes` itself (see its own resolution logic) — the lookup below always succeeds.
+    const organizerAddress = mailboxes.find((mb) => mb.uid === mailboxUid).primarySmtpAddress;
+    // `PointerSensor` alone activates a drag on the very first touch-move, indistinguishable from a
+    // scroll gesture on a touch device. `MouseSensor` (a small `distance` — desktop drags still start
+    // immediately on a deliberate movement, no change from before) + `TouchSensor` (a `delay`+`tolerance`
+    // — a touch drag only activates after a brief press-and-hold, so a quick swipe scrolls normally) is
+    // dnd-kit's own documented pattern for this exact conflict.
+    const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 8 } }), useSensor(TouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } }));
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [view, setView] = useState("month");
+    const [viewDate, setViewDate] = useState(() => startOfDay(new Date()));
+    const [events, setEvents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [actionError, setActionError] = useState(null);
+    const [modal, setModal] = useState(null);
+    // `null` means "not yet customized by the user" — every calendar is treated as checked without
+    // needing to be seeded from `calendarFolders` the moment it loads (see `checkedFolderUids` below).
+    // Once the user toggles anything, this becomes a real (possibly empty) set of exactly what's checked.
+    const [checkedFolderUidsState, setCheckedFolderUidsState] = useState(null);
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        const requestedView = params.get("view");
+        if (VIEW_TYPES.includes(requestedView ?? "")) {
+            setView(requestedView);
+        }
+        const requestedDate = params.get("date");
+        const parsedDate = requestedDate ? new Date(requestedDate) : null;
+        if (parsedDate && !isNaN(parsedDate.getTime())) {
+            setViewDate(startOfDay(parsedDate));
+        }
+    }, []);
+    const checkedFolderUids = checkedFolderUidsState ?? new Set(calendarFolders.map((f) => f.uid));
+    const folderColors = useMemo(() => Object.fromEntries(calendarFolders.map((f) => [f.uid, colorForFolder(f)])), [calendarFolders]);
+    function toggleCalendar(toggledUid) {
+        setCheckedFolderUidsState((prev) => {
+            const next = new Set(prev ?? calendarFolders.map((f) => f.uid));
+            if (next.has(toggledUid)) {
+                next.delete(toggledUid);
+            }
+            else {
+                next.add(toggledUid);
+            }
+            return next;
+        });
+    }
+    async function handleAddCalendar(name, color) {
+        // `CalendarContent` only renders once `mailboxUid` is resolved — same invariant as `organizerAddress` above.
+        const created = await createFolder({ mailboxUid: mailboxUid, name, type: "calendar", color });
+        setCheckedFolderUidsState((prev) => new Set([...(prev ?? calendarFolders.map((f) => f.uid)), created.uid]));
+        reloadFolders();
+    }
+    const { rangeStart, rangeEnd, days } = useMemo(() => {
+        if (view === "month") {
+            const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
+            const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
+            return { rangeStart: start, rangeEnd: end, days: [] };
+        }
+        if (view === "week") {
+            const start = startOfWeek(viewDate, { weekStartsOn: 1 });
+            const end = endOfWeek(viewDate, { weekStartsOn: 1 });
+            return { rangeStart: start, rangeEnd: end, days: eachDayOfInterval({ start, end }) };
+        }
+        if (view === "workWeek") {
+            const start = startOfWeek(viewDate, { weekStartsOn: 1 });
+            const weekdays = eachDayOfInterval({ start, end: endOfWeek(viewDate, { weekStartsOn: 1 }) }).slice(0, 5);
+            return { rangeStart: start, rangeEnd: endOfDay(weekdays[weekdays.length - 1]), days: weekdays };
+        }
+        // "day" and "split" both show a single day, just laid out differently below.
+        const start = startOfDay(viewDate);
+        const end = endOfDay(viewDate);
+        return { rangeStart: start, rangeEnd: end, days: [start] };
+    }, [view, viewDate]);
+    function reload() {
+        const targets = calendarFolders.filter((f) => checkedFolderUids.has(f.uid));
+        if (targets.length === 0) {
+            setEvents([]);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        void Promise.allSettled(targets.map((f) => listCalendarEvents(f.uid)))
+            .then((results) => {
+            const loaded = [];
+            const failures = [];
+            results.forEach((result, i) => {
+                if (result.status === "fulfilled") {
+                    loaded.push(...result.value);
+                }
+                else {
+                    failures.push({ name: targets[i].name, err: result.reason });
+                }
+            });
+            setEvents(loaded);
+            if (failures.length === 0) {
+                return;
+            }
+            // A single calendar's failure (by far the common case — most mailboxes have exactly one)
+            // surfaces that calendar's own error message unchanged, matching this page's original
+            // single-calendar behavior exactly; only a genuine multi-calendar partial failure falls
+            // back to a combined message naming which calendars didn't load.
+            if (failures.length === 1 && targets.length === 1) {
+                const err = failures[0].err;
+                setError(err instanceof ApiRequestError ? err.message : "Could not load your calendar.");
+            }
+            else {
+                setError(`Could not load events for: ${failures.map((f) => f.name).join(", ")}.`);
+            }
+        })
+            .finally(() => setLoading(false));
+    }
+    // Keyed on stable string summaries (not the array/set objects themselves, which are new references
+    // every render) so this only re-fires when the actual set of folders to fetch changes.
+    const calendarFolderUidsKey = calendarFolders.map((f) => f.uid).sort().join(",");
+    const checkedFolderUidsKey = Array.from(checkedFolderUids).sort().join(",");
+    useEffect(reload, [calendarFolderUidsKey, checkedFolderUidsKey]);
+    const occurrences = useMemo(() => expandAllOccurrences(events, rangeStart, rangeEnd), [events, rangeStart, rangeEnd]);
+    const splitColumns = useMemo(() => calendarFolders
+        .filter((f) => checkedFolderUids.has(f.uid))
+        .map((f) => ({ folderUid: f.uid, name: f.name, color: colorForFolder(f) })), [calendarFolders, checkedFolderUidsKey]);
+    function shiftView(direction) {
+        setViewDate((d) => view === "month"
+            ? addMonths(d, direction)
+            : view === "week" || view === "workWeek"
+                ? addWeeks(d, direction)
+                : addDays(d, direction));
+    }
+    function goToday() {
+        setViewDate(startOfDay(new Date()));
+    }
+    function handleSelectDay(date) {
+        setView("day");
+        setViewDate(startOfDay(date));
+    }
+    function openNewEvent(start, end, targetFolderUid) {
+        if (!mailboxUid || !folderUid) {
+            return;
+        }
+        setModal({
+            occurrence: null,
+            initialStart: start ?? new Date(),
+            initialEnd: end ?? new Date(Date.now() + 30 * 60000),
+            targetFolderUid,
+        });
+    }
+    function openEvent(occurrence) {
+        setModal({ occurrence });
+    }
+    function closeModal() {
+        setModal(null);
+    }
+    function handleSaved() {
+        setModal(null);
+        reload();
+    }
+    function handleDeleted() {
+        setModal(null);
+        reload();
+    }
+    async function handleDragEnd(event) {
+        const overId = event.over ? String(event.over.id) : undefined;
+        const action = resolveDragAction(String(event.active.id), overId, occurrences);
+        if (!action) {
+            return;
+        }
+        setActionError(null);
+        try {
+            if (action.type === "move") {
+                await moveOccurrence(action.occurrence, action.deltaMs);
+            }
+            else {
+                await resizeOccurrenceEnd(action.occurrence, action.newEnd);
+            }
+            reload();
+        }
+        catch (err) {
+            setActionError(err instanceof ApiRequestError ? err.message : "Could not update this event.");
+        }
+    }
+    const title = view === "month"
+        ? format(viewDate, "MMMM yyyy")
+        : view === "week" || view === "workWeek"
+            ? `${format(rangeStart, "MMM d")} – ${format(rangeEnd, "MMM d, yyyy")}`
+            : format(viewDate, "EEEE, MMMM d, yyyy");
+    const sidebarContent = (_jsxs(_Fragment, { children: [_jsx(MiniDatePicker, { selected: viewDate, onSelect: (date) => setViewDate(startOfDay(date)) }), _jsx(CalendarListSidebar, { calendars: calendarFolders, checkedFolderUids: checkedFolderUids, onToggle: toggleCalendar, onAddCalendar: handleAddCalendar })] }));
+    return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx("div", { className: "hidden md:flex w-56 shrink-0 border-r border-border flex-col overflow-y-auto", children: sidebarContent }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Calendars", children: _jsx("div", { className: "flex flex-col", children: sidebarContent }) }), _jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [_jsxs("div", { className: "flex items-center gap-3 p-3 border-b border-border shrink-0", children: [_jsx("button", { type: "button", className: "md:hidden w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text shrink-0", "aria-label": "Open calendars", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(Button, { type: "button", onClick: () => openNewEvent(), className: "!w-auto shrink-0", children: "+ New event" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => shiftView(-1), "aria-label": "Previous", className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u2039" }), _jsx("button", { type: "button", onClick: goToday, className: "px-2 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "Today" }), _jsx("button", { type: "button", onClick: () => shiftView(1), "aria-label": "Next", className: "w-7 h-7 text-sm rounded-sm hover:bg-surface-alt", children: "\u203A" })] }), _jsx("h1", { className: "hidden md:block text-lg font-bold tracking-tight", children: title }), _jsx("div", { className: "ml-auto flex gap-1 overflow-x-auto", children: VIEW_TYPES.map((v) => (_jsx("button", { type: "button", onClick: () => setView(v), className: [
+                                        "px-3 h-7 text-sm rounded-sm whitespace-nowrap",
+                                        view === v ? "bg-primary text-white" : "hover:bg-surface-alt",
+                                        (v === "workWeek" || v === "split") && "hidden md:inline-block",
+                                    ]
+                                        .filter(Boolean)
+                                        .join(" "), children: VIEW_LABELS[v] }, v))) })] }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), actionError && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: actionError }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : (_jsx(DndContext, { sensors: sensors, onDragEnd: handleDragEnd, children: view === "month" ? (_jsx(MonthView, { viewDate: viewDate, occurrences: occurrences, folderColors: folderColors, onSelectDay: handleSelectDay, onSelectEvent: openEvent })) : view === "split" ? (_jsx(SplitDayView, { day: viewDate, columns: splitColumns, occurrences: occurrences, onSelectEvent: openEvent, onSelectSlot: (start, end, targetFolderUid) => openNewEvent(start, end, targetFolderUid) })) : (_jsx(TimeGridView, { days: days, occurrences: occurrences, folderColors: folderColors, onSelectEvent: openEvent, onSelectSlot: openNewEvent })) })), modal && (_jsx(EventModal, { open: true, onClose: closeModal, mailboxUid: mailboxUid, folderUid: modal.targetFolderUid ?? modal.occurrence?.folderUid ?? folderUid, calendars: calendarFolders.map((f) => ({ uid: f.uid, name: f.name })), organizerAddress: organizerAddress, occurrence: modal.occurrence, initialStart: modal.initialStart, initialEnd: modal.initialEnd, onSaved: handleSaved, onDeleted: handleDeleted }))] })] }));
+}

package/dist/apps/www/contacts/[uid].js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { deleteContact, getContact } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import ContactsShell from "../../shared/components/contacts/layout/ContactsShell.js";
+import ContactDetailPane from "../../shared/components/contacts/ContactDetailPane.js";
+import ContactForm from "../../shared/components/contacts/ContactForm.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+/**
+ * Only reached on mobile (below the `md` breakpoint) — desktop's `apps/www/contacts/index.tsx` keeps its
+ * existing inline detail pane and never navigates here; see that file's `handleSelectRow`. There is no
+ * equivalent "new contact" route — an unsaved contact has no uid to route on, so creation stays an
+ * in-place mode-switch on every device (see `apps/www/contacts/index.tsx`'s `handleNew`).
+ */
+export default function ContactDetailPage(props) {
+    return (_jsx(ContactsShell, { ...props, children: _jsx(ContactDetailContent, { uid: props.params.uid }) }));
+}
+function ContactDetailContent({ uid }) {
+    const [contact, setContact] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [mode, setMode] = useState("view");
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getContact(uid)
+            .then(setContact)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this contact."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+    // Takes `contact` as a parameter rather than reading it from the closure/state — mirrors the desktop
+    // pane's own `handleDelete` in `apps/www/contacts/index.tsx`. The only caller (below) is only ever
+    // rendered once `contact` is already resolved (see the `error || !contact` guard above it), so this
+    // never runs with a stale/absent contact — no redundant null check needed here.
+    async function handleDelete(contact) {
+        try {
+            await deleteContact(contact.uid, contact.version);
+            window.location.href = "/contacts";
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
+        }
+    }
+    if (loading) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (error || !contact) {
+        return _jsx(Alert, { children: error ?? "Contact not found." });
+    }
+    const backHref = "/contacts";
+    if (mode === "edit") {
+        return (_jsxs("div", { className: "p-6", children: [_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block mb-4", children: "\u2190 Back to contacts" }), _jsx(ContactForm, { contact: contact, onSaved: (saved) => {
+                        setContact(saved);
+                        setMode("view");
+                    }, onCancel: () => setMode("view") })] }));
+    }
+    return (_jsx("div", { className: "p-6", children: _jsx(ContactDetailPane, { contact: contact, onEdit: () => setMode("edit"), onDelete: () => handleDelete(contact), backHref: backHref }) }));
+}