@rapidmx/web-client 0.2.0

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

@@ -0,0 +1,262 @@
+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, useMemo, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createContact, deleteContact, listContacts, listDeletedContacts, setContactFavorite, updateContact, } from "@rapidmx/react-shared/contacts/contactsApi.js";
+import { contactsToVCardFile, contactToVCard, parseVCards } from "@rapidmx/react-shared/contacts/vcard.js";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { useCompose } from "../../shared/components/mail/compose/ComposeContext.js";
+import ContactsShell, { useContactsShell } from "../../shared/components/contacts/layout/ContactsShell.js";
+import ContactsSidebar from "../../shared/components/contacts/ContactsSidebar.js";
+import ContactsToolbar from "../../shared/components/contacts/ContactsToolbar.js";
+import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.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";
+const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+export default function ContactsPage(props) {
+    return (_jsx(ContactsShell, { ...props, children: _jsx(ContactsContent, {}) }));
+}
+function primaryInfo(contact) {
+    return contact.emails[0]?.address ?? contact.phones[0]?.phoneNumber ?? "";
+}
+function downloadTextFile(filename, content) {
+    const blob = new Blob([content], { type: "text/vcard" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+function ContactsContent() {
+    const { folderUid, mailboxUid } = useContactsShell();
+    const { openCompose } = useCompose();
+    const isMobile = useIsMobile();
+    const [contacts, setContacts] = useState([]);
+    const [deletedContacts, setDeletedContacts] = useState([]);
+    const [deletedLoading, setDeletedLoading] = useState(false);
+    const [deletedError, setDeletedError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [query, setQuery] = useState("");
+    const [view, setView] = useState({ type: "all" });
+    const [sortColumn, setSortColumn] = useState("name");
+    const [sortDesc, setSortDesc] = useState(false);
+    const [checkedUids, setCheckedUids] = useState(new Set());
+    const [selectedUid, setSelectedUid] = useState(null);
+    const [mode, setMode] = useState("view");
+    /** Returns a promise so bulk actions (below) can wait for the refreshed list before re-asserting their
+     * own error message — this always clears `error` first (a legitimate reset for a fresh fetch attempt),
+     * which would otherwise silently wipe out a bulk action's own just-set failure message before the user
+     * ever saw it, since every bulk handler calls this right after its own error-setting loop. */
+    function reload() {
+        if (!folderUid) {
+            setContacts([]);
+            setLoading(false);
+            return Promise.resolve();
+        }
+        setLoading(true);
+        setError(null);
+        return listContacts(folderUid, { limit: 500 })
+            .then(setContacts)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load contacts."))
+            .finally(() => setLoading(false));
+    }
+    useEffect(() => {
+        void reload();
+    }, [folderUid]);
+    useEffect(() => {
+        if (view.type !== "deleted" || !folderUid) {
+            return;
+        }
+        setDeletedLoading(true);
+        setDeletedError(null);
+        listDeletedContacts(folderUid, { limit: 500 })
+            .then(setDeletedContacts)
+            .catch((err) => setDeletedError(err instanceof ApiRequestError ? err.message : "Could not load deleted contacts."))
+            .finally(() => setDeletedLoading(false));
+        // Re-fetches every time the Deleted view is (re-)selected, matching this page's own `reload()`
+        // convention elsewhere rather than caching a possibly-stale list across visits.
+    }, [view, folderUid]);
+    const viewFiltered = useMemo(() => {
+        switch (view.type) {
+            case "all":
+                return contacts;
+            case "favorites":
+                return contacts.filter((c) => c.favorite);
+            case "list":
+                return contacts.filter((c) => c.contactListUid === view.uid);
+            case "category":
+                return contacts.filter((c) => (c.categories ?? []).includes(view.name));
+            case "deleted":
+                return deletedContacts;
+        }
+    }, [contacts, deletedContacts, view]);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) {
+            return viewFiltered;
+        }
+        return viewFiltered.filter((c) => c.displayName.toLowerCase().includes(q) || c.emails.some((e) => e.address.toLowerCase().includes(q)));
+    }, [viewFiltered, query]);
+    const sorted = useMemo(() => {
+        const arr = [...filtered];
+        arr.sort((a, b) => {
+            const cmp = (sortColumn === "name" ? a.displayName : primaryInfo(a)).localeCompare(sortColumn === "name" ? b.displayName : primaryInfo(b));
+            return sortDesc ? -cmp : cmp;
+        });
+        return arr;
+    }, [filtered, sortColumn, sortDesc]);
+    const selected = contacts.find((c) => c.uid === selectedUid) ?? null;
+    const isDeletedView = view.type === "deleted";
+    const checkedContacts = sorted.filter((c) => checkedUids.has(c.uid));
+    const allChecked = sorted.length > 0 && sorted.every((c) => checkedUids.has(c.uid));
+    function handleSort(column) {
+        if (column === sortColumn) {
+            setSortDesc((prev) => !prev);
+        }
+        else {
+            setSortColumn(column);
+            setSortDesc(false);
+        }
+    }
+    function toggleChecked(uid) {
+        setCheckedUids((prev) => {
+            const next = new Set(prev);
+            if (next.has(uid)) {
+                next.delete(uid);
+            }
+            else {
+                next.add(uid);
+            }
+            return next;
+        });
+    }
+    function toggleCheckAll() {
+        setCheckedUids(allChecked ? new Set() : new Set(sorted.map((c) => c.uid)));
+    }
+    function handleSelectView(next) {
+        setView(next);
+        setCheckedUids(new Set());
+    }
+    function handleSelectRow(contact) {
+        if (isMobile) {
+            window.location.href = `/contacts/${encodeURIComponent(contact.uid)}`;
+            return;
+        }
+        setSelectedUid(contact.uid);
+        setMode("view");
+    }
+    function handleNew() {
+        setSelectedUid(null);
+        setMode("new");
+    }
+    function handleSaved(contact) {
+        setSelectedUid(contact.uid);
+        setMode("view");
+        void reload();
+    }
+    function handleCancel() {
+        setMode("view");
+    }
+    async function handleDelete(contact) {
+        try {
+            await deleteContact(contact.uid, contact.version);
+            setSelectedUid(null);
+            setMode("view");
+            void reload();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not delete this contact.");
+        }
+    }
+    async function handleBulkDelete() {
+        let bulkError = null;
+        for (const contact of checkedContacts) {
+            try {
+                await deleteContact(contact.uid, contact.version);
+            }
+            catch (err) {
+                bulkError = err instanceof ApiRequestError ? err.message : "Could not delete one or more contacts.";
+            }
+        }
+        setCheckedUids(new Set());
+        await reload();
+        setError(bulkError);
+    }
+    // `ContactsToolbar`'s Edit button — the only caller — is itself `disabled` unless exactly one contact
+    // is checked, so `checkedContacts[0]` is guaranteed to exist whenever this actually runs; no length
+    // guard needed, matching this codebase's established pattern for the same class of "always non-empty
+    // by the time it's called" value guaranteed by a disabled control (see `ComposeToolbar.run()`).
+    function handleToolbarEdit() {
+        setSelectedUid(checkedContacts[0].uid);
+        setMode("edit");
+    }
+    function handleEmail() {
+        const addresses = checkedContacts.map((c) => c.emails[0]?.address).filter((a) => Boolean(a));
+        // `ContactsShell` only ever renders this component once `mailboxUid` is resolved (see its own
+        // invariant comment) — same non-null pattern as `organizerAddress` in the calendar page.
+        openCompose({ mailboxUid: mailboxUid, to: addresses.join(", ") });
+    }
+    async function handleToggleFavorite() {
+        const allFavorited = checkedContacts.every((c) => c.favorite);
+        let bulkError = null;
+        for (const contact of checkedContacts) {
+            try {
+                await setContactFavorite(contact, !allFavorited);
+            }
+            catch (err) {
+                bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more contacts.";
+            }
+        }
+        await reload();
+        setError(bulkError);
+    }
+    async function handleAddCategory() {
+        const category = window.prompt("Category name");
+        if (!category?.trim()) {
+            return;
+        }
+        let bulkError = null;
+        for (const contact of checkedContacts) {
+            const categories = Array.from(new Set([...(contact.categories ?? []), category.trim()]));
+            try {
+                await updateContact({ ...contact, categories });
+            }
+            catch (err) {
+                bulkError = err instanceof ApiRequestError ? err.message : "Could not update one or more contacts.";
+            }
+        }
+        await reload();
+        setError(bulkError);
+    }
+    function handleExportVCard() {
+        downloadTextFile(checkedContacts.length === 1 ? `${checkedContacts[0].displayName}.vcf` : "contacts.vcf", checkedContacts.length === 1 ? contactToVCard(checkedContacts[0]) : contactsToVCardFile(checkedContacts));
+    }
+    async function handleImportFile(file) {
+        if (!mailboxUid || !folderUid) {
+            return;
+        }
+        const text = await file.text();
+        const parsed = parseVCards(text);
+        let bulkError = null;
+        for (const input of parsed) {
+            try {
+                await createContact({ mailboxUid, folderUid, ...input });
+            }
+            catch (err) {
+                bulkError = err instanceof ApiRequestError ? err.message : "Could not import one or more contacts.";
+            }
+        }
+        await reload();
+        setError(bulkError);
+    }
+    return (_jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsx(ContactsSidebar, { mailboxUid: mailboxUid, contacts: contacts, active: view, onSelect: handleSelectView }), _jsxs("div", { className: [
+                    "w-full md:w-96 shrink-0 md:border-r border-border md:flex flex-col min-h-0",
+                    mode === "new" ? "hidden md:flex" : "flex",
+                ].join(" "), children: [_jsx(ContactsToolbar, { selectedCount: checkedContacts.length, allSelectedFavorited: checkedContacts.length > 0 && checkedContacts.every((c) => c.favorite), onNewContact: handleNew, onEdit: handleToolbarEdit, onDelete: handleBulkDelete, onEmail: handleEmail, onToggleFavorite: handleToggleFavorite, onAddCategory: handleAddCategory, onExportVCard: handleExportVCard, onImportFile: handleImportFile }), _jsx("div", { className: "p-3 border-b border-border", children: _jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search contacts", "aria-label": "Search contacts", className: INPUT_CLASS }) }), error && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: error }) })), deletedError && isDeletedView && (_jsx("div", { className: "p-3", children: _jsx(Alert, { children: deletedError }) })), (isDeletedView ? deletedLoading : loading) ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : sorted.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "No contacts found." })) : (_jsx("div", { className: "flex-1 overflow-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [!isDeletedView && (_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all contacts", checked: allChecked, onChange: toggleCheckAll }) })), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("name"), className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Name", sortColumn === "name" ? (sortDesc ? " ▾" : " ▴") : ""] }) }), _jsx("th", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSort("info"), className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: ["Contact info", sortColumn === "info" ? (sortDesc ? " ▾" : " ▴") : ""] }) })] }) }), _jsx("tbody", { children: sorted.map((contact) => (_jsxs("tr", { className: ["border-b border-border", contact.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt"].join(" "), children: [!isDeletedView && (_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${contact.displayName}`, checked: checkedUids.has(contact.uid), onChange: () => toggleChecked(contact.uid) }) })), _jsx("td", { className: "px-3 py-2", children: _jsxs("button", { type: "button", onClick: () => handleSelectRow(contact), className: "flex items-center gap-2 text-left", children: [_jsx(ContactAvatar, { displayName: contact.displayName, size: 28 }), _jsxs("span", { className: "truncate font-medium", children: [contact.displayName, contact.favorite && _jsx("span", { "aria-label": "Favorite", children: " \u2605" })] })] }) }), _jsx("td", { className: "px-3 py-2 text-text-muted truncate", children: primaryInfo(contact) })] }, contact.uid))) })] }) }))] }), _jsx("div", { className: ["flex-1 min-w-0 overflow-y-auto p-6 md:block", mode === "new" ? "block" : "hidden"].join(" "), children: mode === "new" && mailboxUid && folderUid ? (_jsx(ContactForm, { mailboxUid: mailboxUid, folderUid: folderUid, onSaved: handleSaved, onCancel: handleCancel })) : mode === "edit" && selected ? (_jsx(ContactForm, { contact: selected, onSaved: handleSaved, onCancel: handleCancel })) : selected ? (_jsx(ContactDetailPane, { contact: selected, onEdit: () => setMode("edit"), onDelete: () => handleDelete(selected) })) : (_jsx("p", { className: "text-sm text-text-muted", children: "Select a contact, or create a new one." })) })] }));
+}

package/dist/apps/www/index.js

@@ -0,0 +1,228 @@
+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 { useCallback, useEffect, useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { getMessage, listMessages } from "@rapidmx/react-shared/mail/mailApi.js";
+import { listConversations } from "@rapidmx/react-shared/mail/conversationsApi.js";
+import { search as searchMailbox } from "@rapidmx/react-shared/search/searchApi.js";
+import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import MailShell, { useMailShell } from "../shared/components/mail/layout/MailShell.js";
+import MessageDetailPane from "../shared/components/mail/MessageDetailPane.js";
+import ConversationList from "../shared/components/mail/ConversationList.js";
+import ConversationThreadPane from "../shared/components/mail/ConversationThreadPane.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+const MESSAGE_PAGE_SIZE = 50;
+const SEARCH_DEBOUNCE_MS = 300;
+/** Resolves one page of search hits (of type "message") into full `Message` records for display. */
+async function searchMessages(text, cursor) {
+    const page = await searchMailbox(text, { types: ["message"], cursor, limit: MESSAGE_PAGE_SIZE });
+    const resolved = await Promise.all(page.results.map((hit) => getMessage(hit.entityUid).catch(() => null)));
+    // A search hit can briefly outlive the message it points to (index updates are eventually consistent,
+    // and a message can be deleted after being indexed) - drop anything that no longer resolves rather than
+    // rendering a broken entry.
+    return { messages: resolved.filter((m) => m !== null), nextCursor: page.nextCursor };
+}
+export default function InboxPage(props) {
+    return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, {}) }));
+}
+function InboxContent() {
+    const { folderUid, mailboxUid, folders } = useMailShell();
+    const isMobile = useIsMobile();
+    const [viewMode, setViewMode] = useState("date");
+    const [messages, setMessages] = useState([]);
+    const [conversations, setConversations] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [hasMore, setHasMore] = useState(false);
+    const [error, setError] = useState(null);
+    const [selectedUid, setSelectedUid] = useState(null);
+    const [selectedConversationId, setSelectedConversationId] = useState(null);
+    const [classificationFilter, setClassificationFilter] = useState("all");
+    const [searchInput, setSearchInput] = useState("");
+    const [searchQuery, setSearchQuery] = useState("");
+    const isSearching = viewMode === "date" && searchQuery.length > 0;
+    const pageRef = useRef(0);
+    const cursorRef = useRef(undefined);
+    const scrollContainerRef = useRef(null);
+    const sentinelRef = useRef(null);
+    // Debounce the raw input into the query actually searched, so every keystroke doesn't fire a request.
+    useEffect(() => {
+        const handle = setTimeout(() => setSearchQuery(searchInput.trim()), SEARCH_DEBOUNCE_MS);
+        return () => clearTimeout(handle);
+    }, [searchInput]);
+    // Conversations are computed mailbox-wide (see `conversationsApi.ts`), not scoped to the selected
+    // folder — switching into "By conversation" mode replaces the per-folder list entirely, and the
+    // folder-tree sidebar's own selection becomes purely informational until switching back to "By date".
+    useEffect(() => {
+        setSelectedUid(null);
+        setSelectedConversationId(null);
+        setClassificationFilter("all");
+        pageRef.current = 0;
+        cursorRef.current = undefined;
+        setHasMore(false);
+        if (viewMode === "conversation") {
+            // `mailboxUid` is always set by this point — `MailShell` only ever resolves `folderUid`
+            // (this component's own guard just below, gating everything before this effect can even
+            // run with `viewMode === "conversation"`) after `mailboxUid` is already known.
+            setLoading(true);
+            setError(null);
+            listConversations(mailboxUid)
+                .then(setConversations)
+                .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load conversations."))
+                .finally(() => setLoading(false));
+            return;
+        }
+        if (!folderUid) {
+            setMessages([]);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        if (isSearching) {
+            searchMessages(searchQuery)
+                .then(({ messages: results, nextCursor }) => {
+                setMessages(results);
+                setHasMore(!!nextCursor);
+                cursorRef.current = nextCursor;
+            })
+                .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Search failed."))
+                .finally(() => setLoading(false));
+            return;
+        }
+        listMessages(folderUid, { limit: MESSAGE_PAGE_SIZE })
+            .then((results) => {
+            setMessages(results);
+            setHasMore(results.length === MESSAGE_PAGE_SIZE);
+        })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load messages."))
+            .finally(() => setLoading(false));
+    }, [viewMode, folderUid, mailboxUid, isSearching, searchQuery]);
+    const loadMore = useCallback(async () => {
+        if (loadingMore || !hasMore || loading || viewMode !== "date" || !folderUid) {
+            return;
+        }
+        setLoadingMore(true);
+        try {
+            if (isSearching) {
+                const { messages: more, nextCursor } = await searchMessages(searchQuery, cursorRef.current);
+                setMessages((prev) => [...prev, ...more]);
+                setHasMore(!!nextCursor);
+                cursorRef.current = nextCursor;
+            }
+            else {
+                const nextPage = pageRef.current + 1;
+                const more = await listMessages(folderUid, { page: nextPage, limit: MESSAGE_PAGE_SIZE });
+                setMessages((prev) => [...prev, ...more]);
+                setHasMore(more.length === MESSAGE_PAGE_SIZE);
+                pageRef.current = nextPage;
+            }
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not load more messages.");
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }, [loadingMore, hasMore, loading, viewMode, folderUid, isSearching, searchQuery]);
+    // Always calls the latest `loadMore` closure so the effect below doesn't need `loadMore` itself in its
+    // dependency array (it changes on every keystroke/page load, which would otherwise mean nothing here).
+    const loadMoreRef = useRef(loadMore);
+    loadMoreRef.current = loadMore;
+    // `hasMore` is deliberately a dependency: the sentinel div only renders while `hasMore` is true (see
+    // the JSX below), so this effect must re-run when it flips - otherwise a run that fires before the
+    // first page of results has loaded (sentinel not in the DOM yet, `sentinelRef.current` still null)
+    // would bail out once and never attach an observer to the sentinel that appears moments later.
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel || viewMode !== "date") {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0]?.isIntersecting) {
+                void loadMoreRef.current();
+            }
+        }, { root: scrollContainerRef.current, rootMargin: "200px" });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [viewMode, folderUid, isSearching, searchQuery, hasMore]);
+    const selected = messages.find((m) => m.uid === selectedUid) ?? null;
+    const selectedConversation = conversations.find((c) => c.conversationId === selectedConversationId) ?? null;
+    const attachments = useMessageAttachments(selected);
+    useMarkMessageRead(selected, (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))));
+    // Search results can span every folder in the mailbox, not just the one selected in the sidebar - a
+    // selected message's own folderUid is the only reliable source for its actual folder type once
+    // searching (outside search, every message in `messages` already comes from `folderUid` itself, so
+    // this falls back to the sidebar selection unchanged).
+    const selectedFolderUid = isSearching ? (selected?.folderUid ?? folderUid) : folderUid;
+    const isSentItems = folders.find((f) => f.uid === selectedFolderUid)?.type === "sent_items";
+    const isOutbox = folders.find((f) => f.uid === selectedFolderUid)?.type === "outbox";
+    const isInbox = folders.find((f) => f.uid === selectedFolderUid)?.type === "inbox";
+    const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
+    // Focused/Other is an Inbox-only concept (see `MessageDetailPane`'s own `isInbox` doc comment) — the
+    // sub-tabs only ever render there, so a message with no `inferenceClassification` (the common case:
+    // absent means Focused) or an explicit `"focused"` counts as Focused, everything else as Other.
+    const visibleMessages = !isSearching && isInbox && classificationFilter !== "all"
+        ? messages.filter((m) => classificationFilter === "other"
+            ? m.inferenceClassification === "other"
+            : m.inferenceClassification !== "other")
+        : messages;
+    function handleSelect(message) {
+        if (isMobile) {
+            window.location.href = `/messages/${encodeURIComponent(message.uid)}`;
+            return;
+        }
+        setSelectedUid(message.uid);
+    }
+    function handleSelectConversation(conversation) {
+        if (isMobile) {
+            // No dedicated mobile thread route yet — the existing single-message detail route already
+            // handles any message uid regardless of conversation grouping, so land on the most recent
+            // message in the thread rather than building a second mobile detail page for this phase.
+            // `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];
+            window.location.href = `/messages/${encodeURIComponent(latestUid)}`;
+            return;
+        }
+        setSelectedConversationId(conversation.conversationId);
+    }
+    if (!folderUid) {
+        // `MailShell` never renders this component at all until a mailbox is resolved (see its own
+        // full-screen `MailboxProvisioning` takeover otherwise) — this is purely the brief gap before
+        // that mailbox's own folder list has finished loading, not a "no mailbox" state. Distinct text
+        // from the message list's own "Loading…" below — otherwise the two transient states become
+        // indistinguishable to anything (a test, a user re-reading the screen) that catches this one.
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading your mailbox\u2026" });
+    }
+    return (_jsxs("div", { className: "flex h-full min-h-0", children: [_jsxs("div", { ref: scrollContainerRef, className: "w-full md:w-96 shrink-0 md:border-r border-border overflow-y-auto", children: [_jsxs("div", { className: "flex border-b border-border text-sm", children: [_jsx("button", { type: "button", onClick: () => setViewMode("date"), className: [
+                                    "flex-1 py-2 font-semibold",
+                                    viewMode === "date" ? "text-primary-dark border-b-2 border-primary-dark" : "text-text-muted",
+                                ].join(" "), children: "By date" }), _jsx("button", { type: "button", onClick: () => setViewMode("conversation"), className: [
+                                    "flex-1 py-2 font-semibold",
+                                    viewMode === "conversation" ? "text-primary-dark border-b-2 border-primary-dark" : "text-text-muted",
+                                ].join(" "), children: "By conversation" })] }), viewMode === "conversation" && (_jsx("p", { className: "p-3 text-xs text-text-muted border-b border-border", children: "Showing every conversation in this mailbox \u2014 the selected folder doesn't filter this view." })), viewMode === "date" && (_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { type: "search", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: "Search all mail\u2026", "aria-label": "Search all mail", className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface" }) })), viewMode === "date" && isInbox && !isSearching && (_jsx("div", { className: "flex border-b border-border text-xs", children: ["all", "focused", "other"].map((value) => (_jsx("button", { type: "button", onClick: () => setClassificationFilter(value), className: [
+                                "flex-1 py-1.5 font-semibold",
+                                classificationFilter === value
+                                    ? "text-primary-dark border-b-2 border-primary-dark"
+                                    : "text-text-muted",
+                            ].join(" "), children: value === "all" ? "All" : value === "focused" ? "Focused" : "Other" }, value))) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : viewMode === "conversation" ? (_jsx(ConversationList, { conversations: conversations, selectedId: selectedConversationId, onSelect: handleSelectConversation })) : visibleMessages.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
+                            ? `No messages match "${searchQuery}".`
+                            : classificationFilter === "all"
+                                ? "No messages in this folder."
+                                : "No messages here." })) : (_jsxs(_Fragment, { children: [_jsx("ul", { children: visibleMessages.map((message) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => handleSelect(message), className: [
+                                            "w-full text-left px-4 py-3 border-b border-border",
+                                            message.uid === selectedUid ? "bg-primary/10" : "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).toLocaleDateString() })] }), _jsx("div", { className: "text-sm truncate", children: message.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: message.bodyPreview })] }) }, message.uid))) }), hasMore && (_jsx("div", { ref: sentinelRef, className: "p-4 text-center text-xs text-text-muted", children: loadingMore ? "Loading more…" : "" }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0", children: viewMode === "conversation" ? (_jsx(ConversationThreadPane, { conversation: selectedConversation, folders: folders })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), isOutbox: isOutbox, isInbox: isInbox, onClassified: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), onReceiptHandled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: (updated) => {
+                        // The message moved out of the currently-viewed Outbox folder (into Drafts)
+                        // — unlike a recall, which patches a message in place, this removes it from
+                        // the list entirely, matching what a real folder switch would show.
+                        setMessages((prev) => prev.filter((m) => m.uid !== updated.uid));
+                        setSelectedUid(null);
+                    } })) })] }));
+}

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } 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 } from "@rapidmx/react-shared/mail/mailApi.js";
+import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
+import MailShell, { useMailShell } from "../../shared/components/mail/layout/MailShell.js";
+import MessageDetailPane from "../../shared/components/mail/MessageDetailPane.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`.
+ */
+export default function MessageDetailPage(props) {
+    return (_jsx(MailShell, { ...props, children: _jsx(MessageDetailContent, { uid: props.params.uid }) }));
+}
+function MessageDetailContent({ uid }) {
+    const { folders } = useMailShell();
+    const [message, setMessage] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getMessage(uid)
+            .then(setMessage)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this message."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+    const attachments = useMessageAttachments(message);
+    useMarkMessageRead(message, setMessage);
+    if (loading) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (error || !message) {
+        return _jsx(Alert, { children: error ?? "Message not found." });
+    }
+    const backHref = `/?mailboxUid=${encodeURIComponent(message.mailboxUid)}&folderUid=${encodeURIComponent(message.folderUid)}`;
+    const isSentItems = folders.find((f) => f.uid === message.folderUid)?.type === "sent_items";
+    const isOutbox = folders.find((f) => f.uid === message.folderUid)?.type === "outbox";
+    const isInbox = folders.find((f) => f.uid === message.folderUid)?.type === "inbox";
+    const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
+    return (_jsx(MessageDetailPane, { message: message, attachments: attachments, backHref: backHref, isSentItems: isSentItems, onRecalled: setMessage, isOutbox: isOutbox, isInbox: isInbox, onClassified: setMessage, onReceiptHandled: setMessage, draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: setMessage }));
+}

package/dist/apps/www/settings/auto-reply/index.js

@@ -0,0 +1,54 @@
+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 { useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+export default function SettingsAutoReplyPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "auto-reply", children: _jsx(AutoReplyContent, {}) }));
+}
+function AutoReplyContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
+    // resolved to one of them (a mailbox-less caller sees `MailboxProvisioning` instead) — this lookup
+    // can't miss, same established non-null pattern as `apps/www/contacts/index.tsx`'s `mailboxUid!`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+    const [oofEnabled, setOofEnabled] = useState(mailbox.oofEnabled ?? false);
+    const [oofMessage, setOofMessage] = useState(mailbox.oofMessage ?? "");
+    const [oofStartTime, setOofStartTime] = useState(mailbox.oofStartTime ? toDatetimeLocal(mailbox.oofStartTime) : "");
+    const [oofEndTime, setOofEndTime] = useState(mailbox.oofEndTime ? toDatetimeLocal(mailbox.oofEndTime) : "");
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            await updateMailbox({
+                uid: mailbox.uid,
+                version: mailbox.version,
+                oofEnabled,
+                oofMessage,
+                oofStartTime: oofStartTime ? new Date(oofStartTime).toISOString() : undefined,
+                oofEndTime: oofEndTime ? new Date(oofEndTime).toISOString() : undefined,
+            });
+            setSaved(true);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save automatic reply settings.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Automatic Replies" }), _jsxs("p", { className: "text-sm text-text-muted mb-4", children: ["Send an automatic reply to anyone who emails ", mailbox.displayName, " while you\u2019re away. A calendar event with its own automatic reply enabled takes over for its own start/end window."] }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx("input", { type: "checkbox", checked: oofEnabled, onChange: (e) => setOofEnabled(e.target.checked) }), "Automatic replies are on"] }), oofEnabled && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Message" }), _jsx("textarea", { "aria-label": "Automatic reply message", className: INPUT_CLASS, rows: 5, value: oofMessage, onChange: (e) => setOofMessage(e.target.value) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Start (optional)" }), _jsx("input", { type: "datetime-local", "aria-label": "Automatic reply start", className: INPUT_CLASS, value: oofStartTime, onChange: (e) => setOofStartTime(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "End (optional)" }), _jsx("input", { type: "datetime-local", "aria-label": "Automatic reply end", className: INPUT_CLASS, value: oofEndTime, onChange: (e) => setOofEndTime(e.target.value) })] })] }), _jsx("p", { className: "text-xs text-text-muted -mt-2", children: "Leave both blank to stay on indefinitely until turned off." })] })), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }) }));
+}