@rapidmx/web-client 0.2.0

package/dist/apps/shared/components/layout/AppShell.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import "../../styles/app.css";
+import { useState } from "react";
+import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelope, HiOutlineUsers } from "react-icons/hi2";
+import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
+import { stopImpersonating } from "@rapidmx/react-shared/mail/mailApi.js";
+import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import ComposeProvider from "../mail/compose/ComposeContext.js";
+import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import { BrandingFooter, BrandingHeader } from "./BrandingChrome.js";
+import UserMenu from "./UserMenu.js";
+export const APPS = [
+    { id: "mail", href: "/", label: "Mail", icon: HiOutlineEnvelope },
+    { id: "calendar", href: "/calendar", label: "Calendar", icon: HiOutlineCalendarDays },
+    { id: "contacts", href: "/contacts", label: "Contacts", icon: HiOutlineUsers },
+    { id: "tasks", href: "/tasks", label: "Tasks", icon: HiOutlineClipboardDocumentList },
+];
+/** The header title for every valid `active` value — a superset of `APPS`' own labels since `"settings"`
+ * has no rail icon (and so no `AppDef`) but still needs a header title. */
+const ACTIVE_LABELS = {
+    mail: "Mail",
+    calendar: "Calendar",
+    contacts: "Contacts",
+    tasks: "Tasks",
+    settings: "Settings",
+};
+/**
+ * The persistent chrome shared by every webmail app (Mail, Calendar, Contacts, Tasks): a left icon rail for
+ * switching apps (full page loads — see `MailShell`'s original doc comment on this framework having no
+ * client-side router), a header with the current app's name and `UserMenu`, and the impersonation banner.
+ * Each app's own shell (e.g. `MailShell`) renders its own contextual sidebar + content as `children`, inside
+ * the area to the right of the icon rail and below the header.
+ */
+export default function AppShell({ active, userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, children, }) {
+    const [stoppingImpersonation, setStoppingImpersonation] = useState(false);
+    const { branding, iconSrc } = useBranding();
+    useRedirectIfUnauthenticated(userUid, authServerUrl);
+    function handleSignOut() {
+        window.location.href = authServerUrl ?? "/";
+    }
+    async function handleStopImpersonating() {
+        setStoppingImpersonation(true);
+        try {
+            await stopImpersonating(impersonationBaseUrl ?? "");
+        }
+        catch {
+            // Navigate either way: a failed call leaves the impersonator cookie (and this banner) exactly as
+            // they were, so there's nothing else useful to show — matching this app's other network-error
+            // handling, which surfaces via a full reload rather than an inline retry affordance.
+        }
+        finally {
+            window.location.href = "/admin";
+        }
+    }
+    if (!userUid) {
+        return _jsx("div", { className: "min-h-screen" });
+    }
+    return (_jsx(ComposeProvider, { children: _jsxs("div", { className: "min-h-screen flex flex-col bg-surface-alt", children: [_jsx(BrandingHeader, { branding: branding }), impersonating && (_jsxs("div", { className: "h-10 shrink-0 bg-warning text-warning-contrast flex items-center justify-center gap-3 text-sm font-medium px-4", children: [_jsxs("span", { children: ["You are viewing as ", _jsx("strong", { children: userUid }), "."] }), _jsx("button", { type: "button", onClick: handleStopImpersonating, disabled: stoppingImpersonation, className: "underline hover:no-underline disabled:opacity-60", children: stoppingImpersonation ? "Returning to admin…" : "Return to admin" })] })), _jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsxs("nav", { "aria-label": "Apps", className: "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1", children: [_jsx("img", { src: iconSrc, width: "96", height: "96", alt: "", className: "mb-3" }), APPS.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
+                                        "w-10 h-10 flex items-center justify-center rounded-sm",
+                                        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: APPS, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("header", { className: "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: ACTIVE_LABELS[active] }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut, showAdminLink: trusted, showSettingsLink: true })] }), _jsx("div", { className: "flex-1 flex min-h-0 pb-14 md:pb-0", children: children })] })] }), _jsx(BrandingFooter, { branding: branding })] }) }));
+}

package/dist/apps/shared/components/layout/BrandingChrome.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Renders the admin-configured `Branding.headerHtml`/`footerHtml` (see `useBranding()`) — shared by every
+ * chrome in this project (`AppShell`, `AdminShell`, and the public `apps/book` pages) so the setting applies
+ * everywhere its own admin UI copy (`apps/admin/branding/index.tsx`) claims it does.
+ */
+export function BrandingHeader({ branding }) {
+    if (!branding?.headerHtml) {
+        return null;
+    }
+    return _jsx("div", { dangerouslySetInnerHTML: { __html: branding.headerHtml } });
+}
+export function BrandingFooter({ branding }) {
+    if (!branding?.footerHtml) {
+        return null;
+    }
+    return _jsx("div", { dangerouslySetInnerHTML: { __html: branding.footerHtml } });
+}

package/dist/apps/shared/components/layout/MailboxProvisioning.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { autoProvisionMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+/**
+ * Rendered by each app's shell (Mail/Calendar/Contacts/Tasks) *instead of* the normal `AppShell`
+ * chrome (icon rail, header, folder tree, ...) when the caller has no mailbox — a full-screen,
+ * 404-style takeover, not a small message nested inside the rest of the client UI, since there's
+ * nothing else in the app for a mailbox-less caller to do yet. Attempts self-service
+ * auto-provisioning — see `BaseMailboxRoute.autoProvision()`'s own doc comment in `@rapidmx/restapi`
+ * for the full contract — which is itself a no-op (a 404) unless an admin has both turned it on
+ * (`mail:auto_provision:enabled`) and configured at least one domain (`mail:domains`). Safe to render
+ * unconditionally in that place: any failure (disabled, no registered username, the identity service
+ * unreachable) just falls back to the same plain "no mailbox" message this replaces.
+ */
+export default function MailboxProvisioning() {
+    const [status, setStatus] = useState("checking");
+    const [options, setOptions] = useState([]);
+    const [selected, setSelected] = useState("");
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        autoProvisionMailbox()
+            .then((result) => {
+            if (result.status === "needs_selection") {
+                // `autoProvision()` only ever returns this status with a non-empty cross product of
+                // the caller's aliases and this server's configured domains (both are checked
+                // non-empty before it's built) — no fallback needed for an empty list here.
+                setOptions(result.options);
+                setSelected(result.options[0].primarySmtpAddress);
+                setStatus("needs_selection");
+            }
+            else {
+                // "created" or "existing" — either way the caller now has a mailbox; a full reload is
+                // this framework's own convention for picking up new server-side state (no client
+                // router to instead re-fetch just the shell's own data in place).
+                window.location.reload();
+            }
+        })
+            .catch(() => setStatus("unavailable"));
+    }, []);
+    async function handleConfirm() {
+        // `selected` only ever takes a value from `options` itself (the initial default, or the
+        // <select>'s own onChange, which can only report one of its own rendered <option> values), so
+        // this is always found — no defensive fallback needed.
+        const option = options.find((o) => o.primarySmtpAddress === selected);
+        setStatus("creating");
+        setError(null);
+        try {
+            await autoProvisionMailbox({ alias: option.alias, domain: option.domain });
+            window.location.reload();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create your mailbox.");
+            setStatus("needs_selection");
+        }
+    }
+    let content;
+    if (status === "checking") {
+        content = _jsx("p", { className: "text-sm text-text-muted", children: "Setting up your mailbox\u2026" });
+    }
+    else if (status === "needs_selection" || status === "creating") {
+        const creating = status === "creating";
+        content = (_jsxs("div", { className: "w-full flex flex-col gap-3", children: [_jsx("p", { className: "text-sm text-text-muted text-center", children: "Choose your mailbox address to get started:" }), error && _jsx(Alert, { children: error }), _jsx("select", { "aria-label": "Mailbox address", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: selected, onChange: (e) => setSelected(e.target.value), disabled: creating, children: options.map((option) => (_jsx("option", { value: option.primarySmtpAddress, children: option.primarySmtpAddress }, option.primarySmtpAddress))) }), _jsx(Button, { type: "button", onClick: handleConfirm, loading: creating, disabled: creating, className: "!w-auto self-center", children: "Continue" })] }));
+    }
+    else {
+        content = (_jsxs(_Fragment, { children: [_jsx("h1", { className: "text-lg font-bold uppercase tracking-wide", children: "No mailbox available" }), _jsx("p", { className: "text-sm text-text-muted", children: "Ask an administrator to create one for you." })] }));
+    }
+    return (_jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8 flex flex-col items-center gap-4 text-center", children: [_jsx("img", { src: "/images/wordmark.png", height: "128", alt: "" }), content] }) }));
+}

package/dist/apps/shared/components/layout/UserMenu.js

@@ -0,0 +1,59 @@
+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, useRef, useState } from "react";
+import { formatProfileName, getMyProfile, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
+function Avatar({ profile, initials, large }) {
+    const sizeClass = large ? "w-10 h-10 text-base" : "w-8 h-8 text-sm";
+    if (profile?.avatar) {
+        return (_jsx("img", { src: profile.avatar, alt: "", className: `${sizeClass} rounded-full object-cover shrink-0` }));
+    }
+    return (_jsx("span", { className: `${sizeClass} rounded-full bg-primary text-white font-semibold flex items-center justify-center shrink-0`, children: initials }));
+}
+/**
+ * The top-right "who am I" menu shared by `MailShell` and `AdminShell`: an avatar-button trigger that opens a
+ * dropdown showing the caller's avatar/name, an optional "Admin" link (trusted-role callers only), and
+ * "Sign Out". Name/avatar come from auth-server's own profile endpoint (`GET /api/profiles/me`) — this
+ * service has no local user directory (see `.claude/NOTES.md`) — and fall back to the bare uid/its first
+ * letter when unset or unreachable, which is a fully valid, expected state for most password-registered
+ * accounts (only OIDC sign-in currently populates a real avatar).
+ */
+export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, showSettingsLink }) {
+    const [open, setOpen] = useState(false);
+    const [profile, setProfile] = useState(undefined);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!authServerUrl) {
+            return;
+        }
+        getMyProfile(authServerUrl)
+            .then(setProfile)
+            .catch(() => undefined);
+    }, [authServerUrl]);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        function handlePointerDown(e) {
+            if (containerRef.current && e.target instanceof Node && !containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        }
+        function handleKeyDown(e) {
+            if (e.key === "Escape") {
+                setOpen(false);
+            }
+        }
+        document.addEventListener("mousedown", handlePointerDown);
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [open]);
+    const name = formatProfileName(profile) ?? userUid;
+    const initials = profileInitials(profile, userUid);
+    return (_jsxs("div", { className: "relative", ref: containerRef, children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "true", "aria-expanded": open, "aria-label": "Account menu", className: "flex items-center gap-1.5 rounded-pill py-1 pl-1 pr-2 hover:bg-surface-alt", children: [_jsx(Avatar, { profile: profile, initials: initials }), _jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: `text-text-muted transition-transform ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: _jsx("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open && (_jsxs("div", { role: "menu", className: "absolute right-0 top-full mt-2 w-60 bg-surface border border-border rounded-md shadow-modal py-1.5 z-10", children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5 border-b border-border", children: [_jsx(Avatar, { profile: profile, initials: initials, large: true }), _jsx("span", { className: "text-sm font-semibold text-text truncate", children: name })] }), showSettingsLink && (_jsx("a", { role: "menuitem", href: "/settings/auto-reply", className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showAdminLink && (_jsx("a", { role: "menuitem", href: "/admin", className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Admin" })), _jsx("button", { role: "menuitem", type: "button", onClick: onSignOut, className: "block w-full text-left px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Sign Out" })] }))] }));
+}

package/dist/apps/shared/components/mail/ConversationList.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The "By conversation" counterpart to the per-message list `apps/www/index.tsx` renders inline for
+ * "By date" — conversations are mailbox-wide (see `conversationsApi.ts`), so there's no per-folder
+ * empty/loading state to distinguish here beyond what the page itself already handles. */
+export default function ConversationList({ conversations, selectedId, onSelect }) {
+    if (conversations.length === 0) {
+        return _jsx("p", { className: "p-4 text-sm text-text-muted", children: "No conversations in this mailbox." });
+    }
+    return (_jsx("ul", { children: conversations.map((conversation) => {
+            const unread = conversation.unreadCount > 0;
+            return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onSelect(conversation), className: [
+                        "w-full text-left px-4 py-3 border-b border-border",
+                        conversation.conversationId === selectedId ? "bg-primary/10" : "hover:bg-surface-alt",
+                        unread ? "font-semibold" : "",
+                    ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: conversation.participants.map((p) => p.displayName || p.address).join(", ") }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: "text-sm truncate", children: conversation.subject || "(no subject)" }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-text-muted font-normal", children: [conversation.messageCount > 1 && _jsxs("span", { children: [conversation.messageCount, " messages"] }), unread && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/10 text-primary-dark font-semibold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && _jsx("span", { "aria-label": "Has attachments", children: "\uD83D\uDCCE" })] })] }) }, conversation.conversationId));
+        }) }));
+}

package/dist/apps/shared/components/mail/ConversationThreadPane.js

@@ -0,0 +1,112 @@
+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 { getMessage, listAttachments, setMessageRead } from "@rapidmx/react-shared/mail/mailApi.js";
+import MessageDetailPane from "./MessageDetailPane.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+/**
+ * The merged, Gmail-style reading pane for "By conversation" mode — every message in the conversation
+ * fetched and stacked oldest-to-newest, all but the most recent collapsed to a one-line summary
+ * (sender + subject) until clicked. Reuses `MessageDetailPane` for each *expanded* message's own
+ * header/attachments/body-iframe rendering rather than re-implementing it; a collapsed row is its own
+ * lightweight summary, since mounting a full `MessageDetailPane` (and its iframe) for every message in
+ * a long thread up front would be wasteful.
+ */
+export default function ConversationThreadPane({ conversation, folders }) {
+    const [messages, setMessages] = useState({});
+    const [attachmentsByUid, setAttachmentsByUid] = useState({});
+    const [expandedUids, setExpandedUids] = useState(new Set());
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!conversation) {
+            setMessages({});
+            setExpandedUids(new Set());
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        Promise.all(conversation.messageUids.map((uid) => getMessage(uid)))
+            .then((loaded) => {
+            setMessages(Object.fromEntries(loaded.map((m) => [m.uid, m])));
+            // `messageUids` always has at least one entry — a `ConversationSummary` only ever
+            // exists because it was grouped from real messages (see
+            // `BaseMessageRoute.conversations()`).
+            const latestUid = conversation.messageUids[conversation.messageUids.length - 1];
+            setExpandedUids(new Set([latestUid]));
+        })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this conversation."))
+            .finally(() => setLoading(false));
+    }, [conversation?.conversationId]);
+    // Lazily loads attachments and marks-as-read only for messages the reader has actually expanded —
+    // mirrors `mailDetailHooks.ts`'s `useMessageAttachments`/`useMarkMessageRead`, reimplemented here
+    // (rather than called in a loop, which the rules of hooks don't allow) since a thread can expand
+    // more than one message at once, unlike the single-selected-message case those hooks were built for.
+    useEffect(() => {
+        for (const uid of expandedUids) {
+            const message = messages[uid];
+            if (!message)
+                continue;
+            if (message.hasAttachments && !attachmentsByUid[uid]) {
+                listAttachments(message.folderUid, uid)
+                    .then((loaded) => setAttachmentsByUid((prev) => ({ ...prev, [uid]: loaded })))
+                    .catch(() => {
+                    // Best-effort, same as the mark-as-read catch below — `attachmentsByUid[uid] ??
+                    // []` already renders no attachments while this stays unset, so there is nothing
+                    // further to do on failure.
+                });
+            }
+            if (!message.flags.read) {
+                setMessageRead(message, true)
+                    .then((updated) => setMessages((prev) => ({ ...prev, [uid]: updated })))
+                    .catch(() => {
+                    // Best-effort — matches `useMarkMessageRead`'s own doc comment.
+                });
+            }
+        }
+    }, [expandedUids, messages]);
+    function toggleExpanded(uid) {
+        setExpandedUids((prev) => {
+            const next = new Set(prev);
+            if (next.has(uid)) {
+                next.delete(uid);
+            }
+            else {
+                next.add(uid);
+            }
+            return next;
+        });
+    }
+    if (!conversation) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a conversation to read it." });
+    }
+    if (loading) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (error) {
+        return (_jsx("div", { className: "p-4 flex-1", children: _jsx(Alert, { children: error }) }));
+    }
+    return (_jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-y-auto", children: [_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: conversation.subject || "(no subject)" }), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: [conversation.messageCount, " message", conversation.messageCount === 1 ? "" : "s"] })] }), conversation.messageUids.map((uid) => {
+                const message = messages[uid];
+                if (!message) {
+                    return null;
+                }
+                const expanded = expandedUids.has(uid);
+                if (!expanded) {
+                    return (_jsxs("button", { type: "button", onClick: () => toggleExpanded(uid), className: [
+                            "w-full text-left px-4 py-3 border-b border-border hover:bg-surface-alt",
+                            message.flags.read ? "" : "font-semibold",
+                        ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleString() })] }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: message.bodyPreview })] }, uid));
+                }
+                return (_jsxs("div", { className: "border-b border-border", children: [_jsx("button", { type: "button", onClick: () => toggleExpanded(uid), className: "w-full text-left px-4 pt-2 text-xs text-text-muted hover:text-text", children: "Collapse" }), _jsx(MessageDetailPane, { message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folders.find((f) => f.uid === message.folderUid)?.type === "sent_items", onRecalled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), isOutbox: folders.find((f) => f.uid === message.folderUid)?.type === "outbox", draftsFolderUid: folders.find((f) => f.type === "drafts")?.uid, 
+                            // Unlike `apps/www/index.tsx`'s list-removal behavior, this patches the
+                            // message in place (same as `onRecalled` above) rather than removing it from
+                            // the conversation — `conversation.messageUids` is owned by the parent, not
+                            // this component, so there's no membership list here to remove it from.
+                            onScheduledSendCanceled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), isInbox: folders.find((f) => f.uid === message.folderUid)?.type === "inbox", onClassified: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), onReceiptHandled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })) })] }, uid));
+            })] }));
+}

package/dist/apps/shared/components/mail/MessageDetailPane.js

@@ -0,0 +1,153 @@
+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 { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { approveReceipt, attachmentContentUrl, cancelScheduledSend, classifyMessage, declineReceipt, recallMessage, } from "@rapidmx/react-shared/mail/mailApi.js";
+import { buildForwardQuote, buildReplyQuote, forwardSubject, replySubject } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
+import { useCompose } from "./compose/ComposeContext.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+function formatBytes(bytes) {
+    if (bytes >= 1000000)
+        return `${(bytes / 1000000).toFixed(1)} MB`;
+    if (bytes >= 1000)
+        return `${(bytes / 1000).toFixed(1)} KB`;
+    return `${bytes} B`;
+}
+/**
+ * A message's reading pane — header (subject/from/to/attachments) plus a sandboxed iframe for the body.
+ * Shared by the desktop inline pane (`apps/www/index.tsx`, always visible alongside the message list),
+ * the mobile detail route (`apps/www/messages/[uid].tsx`, a full page on its own reached by tapping
+ * a message row), and `ConversationThreadPane` (one per expanded message in a thread) — see each call
+ * site for how `message`/`attachments`/`isSentItems` are sourced.
+ */
+export default function MessageDetailPane({ message, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, isInbox, onClassified, onReceiptHandled, }) {
+    const { openCompose } = useCompose();
+    const [confirming, setConfirming] = useState(false);
+    const [recalling, setRecalling] = useState(false);
+    const [canceling, setCanceling] = useState(false);
+    const [error, setError] = useState(null);
+    // Kept separate from `error` (the Recall flow's own state) since this renders inline in the main
+    // pane rather than inside a confirmation modal — the two flows never need to share one message.
+    const [cancelError, setCancelError] = useState(null);
+    const [classifying, setClassifying] = useState(false);
+    const [classifyError, setClassifyError] = useState(null);
+    const [alwaysForSender, setAlwaysForSender] = useState(false);
+    // Names which pending receipt (`"delivery"`/`"read"`) is currently being approved/declined, if any —
+    // `deliveryReceiptPending`/`readReceiptPending` can both be true independently, so a single boolean
+    // wouldn't distinguish which row's buttons should show a loading state.
+    const [receiptBusy, setReceiptBusy] = useState(null);
+    const [receiptError, setReceiptError] = useState(null);
+    if (!message) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a message to read it." });
+    }
+    // Only ever invoked from the Reply/Reply All/Forward buttons below, which themselves only render
+    // once `message` is loaded (the early return above covers the only other state) — the non-null
+    // assertions reflect that real invariant, matching `handleRecall`'s identical pattern just below.
+    function handleReply() {
+        openCompose({
+            mailboxUid: message.mailboxUid,
+            to: message.from.address,
+            subject: replySubject(message.subject),
+            quotedHtml: buildReplyQuote(message),
+            signatureContext: "reply_forward",
+        });
+    }
+    function handleReplyAll() {
+        const cc = message.recipients.filter((r) => r.type !== "bcc").map((r) => r.address);
+        openCompose({
+            mailboxUid: message.mailboxUid,
+            to: message.from.address,
+            cc: cc.join(", "),
+            subject: replySubject(message.subject),
+            quotedHtml: buildReplyQuote(message),
+            signatureContext: "reply_forward",
+        });
+    }
+    function handleForward() {
+        openCompose({
+            mailboxUid: message.mailboxUid,
+            subject: forwardSubject(message.subject),
+            quotedHtml: buildForwardQuote(message),
+            signatureContext: "reply_forward",
+        });
+    }
+    async function handleRecall() {
+        // Only ever invoked from the confirmation modal below, which itself only renders once `message`
+        // is loaded (the early return above covers the only other state) — the non-null assertion
+        // reflects that real invariant, matching this codebase's established pattern for the same class
+        // of always-true-in-practice guard.
+        setRecalling(true);
+        setError(null);
+        try {
+            const updated = await recallMessage(message.uid);
+            setConfirming(false);
+            onRecalled?.(updated);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not recall this message.");
+        }
+        finally {
+            setRecalling(false);
+        }
+    }
+    // Only ever invoked from the "Cancel" button below, which itself only renders once `message` is
+    // loaded and `isOutbox`/`message.scheduledSendTime` are both truthy — `draftsFolderUid` is required
+    // by that same rendering guard (see the prop's own doc comment), so the non-null assertion reflects
+    // a real invariant, matching `handleRecall`'s identical pattern just above.
+    async function handleCancelScheduledSend() {
+        setCanceling(true);
+        setCancelError(null);
+        try {
+            const updated = await cancelScheduledSend(message, draftsFolderUid);
+            onScheduledSendCanceled?.(updated);
+        }
+        catch (err) {
+            setCancelError(err instanceof ApiRequestError ? err.message : "Could not cancel this scheduled send.");
+        }
+        finally {
+            setCanceling(false);
+        }
+    }
+    // Only ever invoked from the classification button below, which itself only renders once `message`
+    // is loaded and `isInbox` is true — the non-null assertion reflects the same real invariant as
+    // `handleRecall`/`handleCancelScheduledSend` above.
+    async function handleClassify(classifyAs) {
+        setClassifying(true);
+        setClassifyError(null);
+        try {
+            const updated = await classifyMessage(message.uid, classifyAs, alwaysForSender);
+            onClassified?.(updated);
+        }
+        catch (err) {
+            setClassifyError(err instanceof ApiRequestError ? err.message : "Could not reclassify this message.");
+        }
+        finally {
+            setClassifying(false);
+        }
+    }
+    // Only ever invoked from the pending-receipt banner below, which itself only renders once `message`
+    // is loaded — same real invariant as every other handler above.
+    async function handleReceipt(type, action) {
+        setReceiptBusy(type);
+        setReceiptError(null);
+        try {
+            const updated = await (action === "approve" ? approveReceipt : declineReceipt)(message.uid, type);
+            onReceiptHandled?.(updated);
+        }
+        catch (err) {
+            setReceiptError(err instanceof ApiRequestError ? err.message : "Could not handle this receipt request.");
+        }
+        finally {
+            setReceiptBusy(null);
+        }
+    }
+    return (_jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("div", { className: "border-b border-border p-4", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block mb-2", children: "\u2190 Back to messages" })), _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: message.subject || "(no subject)" }), isSentItems &&
+                                (message.recallRequestedAt ? (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Recall requested" })) : (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => setConfirming(true), children: "Recall this message" }))), isOutbox && message.scheduledSendTime && (_jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("span", { className: "text-xs font-medium text-text-muted py-1 px-2.5 rounded-pill bg-surface-alt", children: ["Scheduled for ", new Date(message.scheduledSendTime).toLocaleString()] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Cancel" })] }))] }), cancelError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: cancelError }) })), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["From ", message.from.displayName || message.from.address, " \u00B7", " ", new Date(message.receivedDate).toLocaleString()] }), _jsxs("p", { className: "text-sm text-text-muted", children: ["To ", message.recipients.map((r) => r.displayName || r.address).join(", ")] }), _jsxs("div", { className: "flex gap-2 mt-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleReply, children: "Reply" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleReplyAll, children: "Reply All" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleForward, children: "Forward" })] }), isInbox && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2", children: [_jsx(Button, { type: "button", variant: "text", loading: classifying, disabled: classifying, onClick: () => handleClassify(message.inferenceClassification === "other" ? "focused" : "other"), children: message.inferenceClassification === "other" ? "Move to Focused" : "Move to Other" }), _jsxs("label", { className: "flex items-center gap-1.5 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: alwaysForSender, onChange: (e) => setAlwaysForSender(e.target.checked) }), "Always for this sender"] })] })), classifyError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: classifyError }) })), ["delivery", "read"]
+                        .filter((type) => (type === "delivery" ? message.deliveryReceiptPending : message.readReceiptPending))
+                        .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [message.from.displayName || message.from.address, " requested a ", type, " receipt for this message."] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: receiptBusy === type, disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "approve"), children: "Send receipt" }), _jsx(Button, { type: "button", variant: "text", disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "decline"), children: "Decline" })] }, type))), receiptError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: receiptError }) })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 mt-3", children: attachments.map((attachment) => (_jsx("li", { children: _jsxs("a", { href: attachmentContentUrl(attachment.uid), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: [attachment.filename, " (", formatBytes(attachment.sizeBytes), ")"] }) }, attachment.uid))) }))] }), _jsx("iframe", { title: message.subject || "Message content", src: `/api/mail/messages/${encodeURIComponent(message.uid)}/content`, sandbox: "", className: "flex-1 w-full border-0" }, message.uid), _jsxs(Modal, { open: confirming, onClose: () => setConfirming(false), title: "Recall this message?", children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: "This asks every original recipient's mail system to delete their copy, but only if it's still unread there \u2014 there's no way to guarantee it, and no confirmation once it either succeeds or fails. Recipients who already read the message will keep it." }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", loading: recalling, disabled: recalling, onClick: handleRecall, className: "!w-auto", children: "Recall message" }), _jsx(Button, { type: "button", variant: "secondary", disabled: recalling, onClick: () => setConfirming(false), className: "!w-auto", children: "Cancel" })] })] })] }));
+}

package/dist/apps/shared/components/mail/compose/ComposeContext.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { createContext, useContext, useMemo, useState } from "react";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import ComposeWindow from "./ComposeWindow.js";
+const ComposeContext = createContext({ openCompose: () => undefined });
+/** Opens the floating Compose window from anywhere inside `AppShell` (any of the four webmail apps). */
+export function useCompose() {
+    return useContext(ComposeContext);
+}
+/**
+ * Owns every currently-open Compose window and renders them stacked bottom-right, Gmail-style — see
+ * `ComposeWindow`'s own doc comment for why this replaced the old dedicated `/compose` page. Mounted
+ * once in `AppShell`, so every webmail app (Mail/Calendar/Contacts/Tasks) shares the same instance:
+ * opening Compose from Contacts' "Email" action, for instance, overlays the window on top of whatever
+ * app is currently showing, exactly like opening it from Mail's own sidebar button.
+ */
+export default function ComposeProvider({ children }) {
+    const [sessions, setSessions] = useState([]);
+    const isMobile = useIsMobile();
+    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new" }) {
+        setSessions((prev) => [
+            ...prev,
+            {
+                id: crypto.randomUUID(),
+                mailboxUid,
+                initialTo: to,
+                initialCc: cc,
+                initialSubject: subject,
+                initialQuotedHtml: quotedHtml,
+                signatureContext,
+                minimized: false,
+            },
+        ]);
+    }
+    function closeCompose(id) {
+        setSessions((prev) => prev.filter((s) => s.id !== id));
+    }
+    function toggleMinimize(id) {
+        setSessions((prev) => prev.map((s) => (s.id === id ? { ...s, minimized: !s.minimized } : s)));
+    }
+    const value = useMemo(() => ({ openCompose }), []);
+    // On mobile, a non-minimized `ComposeWindow` renders full-screen (see that component's own doc
+    // comment) — Gmail-style stacking of several full-screen overlays at once makes no sense there, so
+    // at most one non-minimized session is ever rendered: the most recently opened one. Minimized
+    // sessions are small chips regardless of device, so every one of those still renders — an earlier
+    // session becomes visible again (as its own chip, or full-screen if it's the new most-recent
+    // non-minimized one) once whatever's currently "on top" is closed or minimized.
+    const lastNonMinimizedId = isMobile ? [...sessions].reverse().find((s) => !s.minimized)?.id : undefined;
+    const visibleSessions = isMobile ? sessions.filter((s) => s.minimized || s.id === lastNonMinimizedId) : sessions;
+    return (_jsxs(ComposeContext.Provider, { value: value, children: [children, visibleSessions.length > 0 && (_jsx("div", { className: "fixed bottom-0 right-6 flex items-end gap-3 z-50", children: visibleSessions.map((session) => (_jsx(ComposeWindow, { session: session, onClose: () => closeCompose(session.id), onToggleMinimize: () => toggleMinimize(session.id) }, session.id))) }))] }));
+}