@rapidmx/web-client 0.14.0 → 0.15.1

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

@@ -3,18 +3,23 @@ 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, useLayoutEffect, useRef, useState } from "react";
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
 import { HiOutlineShieldCheck } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
+import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import { accountUrlOf } from "../../auth/accountUrl.js";
 import { DEFAULT_TRUSTED_ROLES, lookUpAdminAccess } from "../../auth/adminAccess.js";
 import { ariaKeyShortcuts } from "../../keyboard/format.js";
 import { SHORTCUTS } from "../../keyboard/keymap.js";
 import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
 import { SETTINGS_HREF } from "../../navigation/appHrefs.js";
+import { MailConnectionContext } from "../../mail/useMailConnection.js";
 import ThemeSwitch from "./ThemeSwitch.js";
-import { desktopPermission, getNewMailPopupsEnabled, requestDesktopPermission, setDesktopOfferDismissed, setNewMailPopupsEnabled, } from "../../mail/newMailNotifications.js";
+import { desktopPermission, requestDesktopPermission, setDesktopOfferDismissed, } from "../../mail/newMailNotifications.js";
+import { getNotificationsEnabled, setNotificationsEnabled } from "../../notifications/preferences.js";
+import { dismissAll } from "../../notifications/store.js";
 function Avatar({ profile, initials, large }) {
     const sizeClass = large ? "w-10 h-10 text-base" : "w-8 h-8 text-sm";
     if (profile?.avatar) {
@@ -27,13 +32,17 @@ function Avatar({ profile, initials, large }) {
  * trigger that opens a dropdown showing the caller's avatar/name, an "Account" link to auth-server's account page,
  * an optional "Settings" and "Admin Console" link, and "Sign Out". This service has no local user directory (see
  * `.claude/NOTES.md`), so the name and avatar come from auth-server, and the displayed name (and the initials badge)
- * falls back down a chain: the profile's name (`GET /api/profiles/me`), else the caller's username - their first
- * verified `name` alias (`GET /api/aliases?type=name`, asked for only when the profile gave no name) - else the bare
- * uid. Either lookup can fail (auth-server's CORS list not including this origin, or no profile document at all - a
- * 404 for some accounts) and neither ever surfaces as an error. The avatar image comes from the profile alone.
+ * falls back down a chain: the profile's name (`GET /api/profiles/me`), else the display name of the mailbox the
+ * caller owns (`listMailboxes()`, or the list the app frame already holds; a shared or delegated mailbox does not count), else the caller's username - their first
+ * verified `name` alias (`GET /api/aliases?type=name`) - else the bare uid. The mailbox and the username are asked for
+ * only when the profile gave no name, and the username only when the mailbox gave none. Every lookup can fail
+ * (auth-server's CORS list not including this origin, or no profile document at all - a 404 for some accounts) and none
+ * ever surfaces as an error. The avatar image comes from the profile alone.
  */
 export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminLink, detectAdmin, trustedRoles = DEFAULT_TRUSTED_ROLES, showSettingsLink, showNotificationSettings, onShowShortcuts, placement = "down", onShowNotifications, unseenErrors = 0, }) {
     const env = useKeyEnvironment();
+    // A phone has no keyboard to speak of, so the shortcuts list (and the dialog it opens) has nothing to offer there.
+    const isMobile = useIsMobile();
     const [open, setOpen] = useState(false);
     // Where the menu sits, in window coordinates: it is drawn through a portal into `<body>` with `position: fixed`, so no ancestor's
     // `overflow`, `z-index` or stacking context - a custom branding header's, say - can clip it or put it behind the page.
@@ -43,7 +52,14 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     const [popups, setPopups] = useState(true);
     const [permission, setPermission] = useState("unsupported");
     const [profile, setProfile] = useState(undefined);
+    // Whether the profile lookup has answered, with a profile or without: the fallback names are only worth asking for after that.
+    const [profileSettled, setProfileSettled] = useState(false);
     const [username, setUsername] = useState(undefined);
+    // The mailboxes this menu listed itself; `null` until it has, or when it has no need to.
+    const [ownListing, setOwnListing] = useState(null);
+    // Inside the app frame the mailboxes are already listed for the whole session (see `useMailConnection()`), so they are reused, not listed again.
+    const connection = useContext(MailConnectionContext);
+    const framed = connection !== null;
     const containerRef = useRef(null);
     useEffect(() => {
         if (!authServerUrl) {
@@ -56,24 +72,50 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
                 loaded = await getMyProfile(authServerUrl);
             }
             catch {
-                // Unreachable, blocked, or no profile document (404) - fall through to the username.
+                // Unreachable, blocked, or no profile document (404) - fall through to the fallback names.
             }
-            if (cancelled) {
-                return;
-            }
-            setProfile(loaded);
-            // The username is only the fallback for a missing name - no second request when the profile has one.
-            if (!formatProfileName(loaded)) {
-                const alias = await getMyUsername(authServerUrl);
-                if (!cancelled) {
-                    setUsername(alias);
-                }
+            if (!cancelled) {
+                setProfile(loaded);
+                setProfileSettled(true);
             }
         })();
         return () => {
             cancelled = true;
         };
     }, [authServerUrl]);
+    // The mailbox's display name and then the username are only fallbacks for a missing name - nothing more is asked when the profile has
+    // one, and no username is asked for when the mailbox has a name. Without `authServerUrl` the profile never settles, so nothing is.
+    const needsFallbackName = profileSettled && !formatProfileName(profile);
+    useEffect(() => {
+        if (!needsFallbackName || framed) {
+            return;
+        }
+        let cancelled = false;
+        // A failure (no mail server, no access) is just "no mailbox name" - the username is asked for next.
+        listMailboxes({ limit: 50 }).then((list) => !cancelled && setOwnListing(Array.isArray(list) ? list : []), () => !cancelled && setOwnListing([]));
+        return () => {
+            cancelled = true;
+        };
+    }, [needsFallbackName, framed]);
+    // `null` while the mailboxes are still on their way.
+    const listed = framed ? (connection.status === "checking" ? null : connection.mailboxes) : ownListing;
+    const mailboxesKnown = listed !== null;
+    // Only a mailbox the caller owns counts: a shared or delegated one carries somebody else's name.
+    const mailboxName = needsFallbackName ? listed?.find((mb) => mb.ownerUserUid === userUid)?.displayName?.trim() || undefined : undefined;
+    useEffect(() => {
+        if (!authServerUrl || !needsFallbackName || !mailboxesKnown || mailboxName) {
+            return;
+        }
+        let cancelled = false;
+        void getMyUsername(authServerUrl).then((alias) => {
+            if (!cancelled) {
+                setUsername(alias);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [authServerUrl, needsFallbackName, mailboxesKnown, mailboxName]);
     // Keyed on the joined names, not the array: a caller's fresh `["admin"]` each render must not re-ask.
     const trustedRolesKey = JSON.stringify(trustedRoles);
     useEffect(() => {
@@ -94,13 +136,17 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
     // Read fresh each time the menu opens - another tab may have changed either since - and only on the client.
     useEffect(() => {
         if (open && showNotificationSettings) {
-            setPopups(getNewMailPopupsEnabled());
+            setPopups(getNotificationsEnabled());
             setPermission(desktopPermission());
         }
     }, [open, showNotificationSettings]);
     function togglePopups() {
-        setNewMailPopupsEnabled(!popups);
+        setNotificationsEnabled(!popups);
         setPopups(!popups);
+        if (popups) {
+            // Turned off: what is on screen goes too (it stays in "Recent notifications").
+            dismissAll();
+        }
     }
     async function enableDesktopNotifications() {
         // Asked from this click, as browsers require; a "no" (or "yes") answers the first pop-up's offer as well.
@@ -151,15 +197,16 @@ export default function UserMenu({ userUid, authServerUrl, onSignOut, showAdminL
             window.removeEventListener("scroll", place, true);
         };
     }, [open, placement]);
-    const name = formatProfileName(profile) ?? username ?? userUid;
-    const initials = profileInitials(profile, userUid, username);
+    const name = formatProfileName(profile) ?? mailboxName ?? username ?? userUid;
+    // The badge takes its letter from whichever fallback name is shown, so it never disagrees with the name beside it.
+    const initials = profileInitials(profile, userUid, mailboxName ?? username);
     const accountUrl = accountUrlOf(authServerUrl);
     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: "relative 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 }), unseenErrors > 0 && (_jsx("span", { "data-testid": "unseen-errors-dot", "aria-hidden": "true", className: "absolute right-0.5 top-0.5 h-2.5 w-2.5 rounded-full border-2 border-surface bg-danger" })), _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 &&
                 anchor &&
-                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", 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 })] }), _jsx(ThemeSwitch, {}), accountUrl && (_jsx("a", { role: "menuitem", href: accountUrl, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Account" })), showSettingsLink && (_jsx("a", { role: "menuitem", href: SETTINGS_HREF, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "New mail pop-ups" }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsx("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Turn on desktop notifications" })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
+                createPortal(_jsxs("div", { ref: menuRef, role: "menu", style: { position: "fixed", right: anchor.right, top: anchor.top, bottom: anchor.bottom }, className: "w-60 max-w-[calc(100vw-1rem)] max-h-[calc(100vh-5rem)] overflow-y-auto bg-surface border border-border rounded-md shadow-modal py-1.5 z-[70]", 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 })] }), _jsx(ThemeSwitch, {}), accountUrl && (_jsx("a", { role: "menuitem", href: accountUrl, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Account" })), showSettingsLink && (_jsx("a", { role: "menuitem", href: SETTINGS_HREF, className: "block px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: "Settings" })), showNotificationSettings && (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": popups, type: "button", onClick: togglePopups, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Notifications" }), _jsx("span", { className: "text-xs font-semibold text-text-muted", children: popups ? "On" : "Off" })] })), showNotificationSettings && permission === "default" && (_jsx("button", { role: "menuitem", type: "button", onClick: () => void enableDesktopNotifications(), className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Turn on desktop notifications" })), onShowNotifications && (_jsxs("button", { role: "menuitem", type: "button", onClick: () => {
                                 setOpen(false);
                                 onShowNotifications();
-                            }, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Recent notifications" }), unseenErrors > 0 && (_jsxs("span", { className: "rounded-pill bg-danger px-1.5 text-xs font-bold text-white", children: [_jsx("span", { "aria-hidden": "true", children: unseenErrors }), _jsxs("span", { className: "sr-only", children: [unseenErrors, " unseen ", unseenErrors === 1 ? "error" : "errors"] })] }))] })), onShowShortcuts && (_jsx("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {
+                            }, className: "flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: [_jsx("span", { children: "Recent notifications" }), unseenErrors > 0 && (_jsxs("span", { className: "rounded-pill bg-danger px-1.5 text-xs font-bold text-white", children: [_jsx("span", { "aria-hidden": "true", children: unseenErrors }), _jsxs("span", { className: "sr-only", children: [unseenErrors, " unseen ", unseenErrors === 1 ? "error" : "errors"] })] }))] })), onShowShortcuts && !isMobile && (_jsx("button", { role: "menuitem", type: "button", "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.global.help, env), onClick: () => {
                                 setOpen(false);
                                 onShowShortcuts();
                             }, className: "block w-full px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt", children: "Keyboard shortcuts" })), (showAdminLink || detectedAdmin) && (_jsxs("a", { role: "menuitem", href: "/admin", className: "flex items-center gap-2 px-3.5 py-2 text-sm text-text hover:bg-surface-alt", children: [_jsx(HiOutlineShieldCheck, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), "Admin Console"] })), _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" })] }), document.body)] }));

package/dist/apps/shared/components/mail/ConversationList.d.ts

@@ -17,6 +17,8 @@ export interface ConversationListProps {
      * read, which this list would otherwise keep showing as unread until the thread is collapsed and
      * expanded again. */
     messageOverrides?: Record<string, Message>;
+    /** Called with one of a conversation's own messages carrying the answer the reader just gave to its meeting request (from that row's RSVP chip), so the caller can keep it. An answer given from the conversation's own (parent) row is kept by this list itself. */
+    onMeetingResponded?: (updated: Message) => void;
     /** Turns each parent row into a checkbox row: select mode here ticks whole conversations, since a
      * conversation is what this list's rows are. A child row stays a plain "open this message" button - a
      * mixed conversation/message selection has no sensible bulk semantics (see `MailListToolbar`). */
@@ -24,6 +26,15 @@ export interface ConversationListProps {
     /** The `conversationId`s currently ticked. */
     selectedConversationIds?: Set<string>;
     onToggleSelected?: (conversation: ConversationSummary) => void;
+    /**
+     * What swiping a parent row does on a phone: right to left archives the conversation (resolving whether it went through), left
+     * to right asks where to move it. Absent, or `enabled: false` (a desktop), rows don't follow a finger.
+     */
+    swipe?: {
+        enabled: boolean;
+        onArchive: (conversation: ConversationSummary) => Promise<boolean>;
+        onMove: (conversation: ConversationSummary) => void;
+    };
     /**
      * Whether a conversation's own messages read newest first, matching the order sense the rows themselves
      * are in ("Newest on top"). `listConversationMessages()` always answers oldest first - the order a
@@ -44,4 +55,4 @@ export interface ConversationListProps {
  * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
  * its own name.
  */
-export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, selectMode, selectedConversationIds, onToggleSelected, newestFirst, }: ConversationListProps): React.JSX.Element;
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, swipe, newestFirst, }: ConversationListProps): React.JSX.Element;

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

@@ -11,6 +11,8 @@ import MailAddress from "./MailAddress.js";
 import { EncryptedPreview, conversationLooksEncrypted } from "./reading/EncryptedPreview.js";
 import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
+import SwipeRow from "./SwipeRow.js";
+import InviteRowChip from "./invite/InviteRowChip.js";
 /** Every participant as `Name <address>`, for the tooltip and the accessible text of the "+N" a crowded row folds them into. */
 function participantList(conversation) {
     return conversation.participants.map((participant) => formatMailAddress(participant)).join(", ");
@@ -28,11 +30,16 @@ function participantList(conversation) {
  * nest inside a button), so expanding and opening are separately reachable by keyboard and each carries
  * its own name.
  */
-export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, selectMode, selectedConversationIds, onToggleSelected, newestFirst, }) {
+export default function ConversationList({ conversations, mailboxUid, selectedUid, onOpenMessage, messageOverrides, onMeetingResponded, selectMode, selectedConversationIds, onToggleSelected, swipe, newestFirst, }) {
     const [expanded, setExpanded] = useState(new Set());
     const [messagesById, setMessagesById] = useState({});
     const [loadingIds, setLoadingIds] = useState(new Set());
     const [errorsById, setErrorsById] = useState({});
+    // The answers given from a row's RSVP chip, by message uid: a row draws them at once, whichever row (the conversation's, or one of its messages) they were given from.
+    const [answers, setAnswers] = useState({});
+    function answered(updated) {
+        setAnswers((prev) => ({ ...prev, [updated.uid]: updated.meetingResponse }));
+    }
     function toggle(conversation) {
         const id = conversation.conversationId;
         setExpanded((prev) => {
@@ -69,7 +76,7 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
     if (conversations.length === 0) {
         return _jsx("p", { className: "p-4 text-sm text-text-muted", children: "No conversations in this folder." });
     }
-    return (_jsx("ul", { children: conversations.map((conversation) => {
+    return (_jsx("ul", { className: swipe?.enabled ? "overflow-x-clip" : undefined, children: conversations.map((conversation) => {
             const id = conversation.conversationId;
             const isExpanded = expanded.has(id);
             const unread = conversation.unreadCount > 0;
@@ -79,10 +86,20 @@ export default function ConversationList({ conversations, mailboxUid, selectedUi
             const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
             const panelId = `conversation-messages-${id}`;
             const ticked = selectedConversationIds?.has(id) ?? false;
-            return (_jsxs("li", { children: [_jsxs("div", { "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["flex-1 min-w-0 text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: conversation.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? _jsx(EncryptedPreview, {}) : conversation.latestPreview }), _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 && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] })] }), _jsxs("ul", { id: panelId, hidden: !isExpanded, children: [errorsById[id] && (_jsx("li", { role: "alert", className: "pl-8 pr-4 py-2 text-xs text-danger border-b border-border", children: errorsById[id] })), loadingIds.has(id) && (_jsx("li", { className: "pl-8 pr-4 py-2 text-xs text-text-muted border-b border-border", children: "Loading messages\u2026" })), children?.map((fetched) => {
+            return (_jsxs("li", { children: [_jsxs(SwipeRow, { as: "div", enabled: !!swipe?.enabled && !selectMode, onArchive: () => swipe.onArchive(conversation), onMove: () => swipe.onMove(conversation), "data-message-uid": conversation.latestMessageUid, "data-unread": unread ? "true" : undefined, className: rowClass({ unread, selected: conversation.latestMessageUid === selectedUid || ticked }, "flex items-stretch"), children: [_jsx(UnreadBar, { unread: unread }), selectMode && (_jsx("span", { className: "shrink-0 flex items-center pl-3", children: _jsx("input", { type: "checkbox", checked: ticked, onChange: () => onToggleSelected?.(conversation), "aria-label": `Select conversation: ${conversation.subject || "(no subject)"}`, className: "w-4 h-4 accent-primary" }) })), _jsx("button", { type: "button", onClick: () => toggle(conversation), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-label": `${isExpanded ? "Collapse" : "Expand"} conversation: ${conversation.subject || "(no subject)"}`, className: ["shrink-0 px-2 text-text-muted hover:text-text", ROW_FOCUS_CLASS].join(" "), children: isExpanded ? (_jsx(HiChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(HiChevronRight, { size: 16, "aria-hidden": "true" })) }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, conversation.latestMessageUid), className: ["w-full text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: unread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: conversation.participants[0] ?? conversation.latestFrom, className: ["flex-1", senderClass(unread)].join(" ") }), conversation.participants.length > 1 && (_jsxs("span", { className: "text-xs text-text-muted shrink-0 font-normal", title: participantList(conversation), children: ["+", conversation.participants.length - 1, _jsxs("span", { className: "sr-only", children: [" more: ", participantList(conversation)] })] })), _jsx("span", { className: ["text-xs shrink-0", dateClass(unread)].join(" "), children: new Date(conversation.latestDate).toLocaleDateString() })] }), _jsx("div", { className: ["text-sm truncate", subjectClass(unread)].join(" "), children: conversation.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: conversationLooksEncrypted(conversation) ? _jsx(EncryptedPreview, {}) : conversation.latestPreview }), _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 && conversation.messageCount > 1 && (_jsxs("span", { className: "py-0.5 px-2 rounded-pill bg-primary/15 text-primary-dark font-bold", children: [conversation.unreadCount, " unread"] })), conversation.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 13, "aria-label": "Has attachments" })), conversation.flagged && (_jsx(HiOutlineFlag, { size: 13, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: {
+                                            uid: conversation.latestMessageUid,
+                                            meetingMethod: conversation.latestMeetingMethod ?? undefined,
+                                            meetingResponse: answers[conversation.latestMessageUid] ??
+                                                messageOverrides?.[conversation.latestMessageUid]?.meetingResponse ??
+                                                conversation.latestMeetingResponse ??
+                                                undefined,
+                                        }, onResponded: answered, className: "mr-4" })] })] }), _jsxs("ul", { id: panelId, hidden: !isExpanded, children: [errorsById[id] && (_jsx("li", { role: "alert", className: "pl-8 pr-4 py-2 text-xs text-danger border-b border-border", children: errorsById[id] })), loadingIds.has(id) && (_jsx("li", { className: "pl-8 pr-4 py-2 text-xs text-text-muted border-b border-border", children: "Loading messages\u2026" })), children?.map((fetched) => {
                                 const message = messageOverrides?.[fetched.uid] ?? fetched;
                                 const messageUnread = isUnread(message);
-                                return (_jsxs("li", { "data-message-uid": message.uid, "data-unread": messageUnread ? "true" : undefined, className: rowClass({ unread: messageUnread, selected: message.uid === selectedUid }), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, message.uid), className: ["w-full text-left pl-8 pr-4 py-2", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] })] }, message.uid));
+                                return (_jsxs("li", { "data-message-uid": message.uid, "data-unread": messageUnread ? "true" : undefined, className: rowClass({ unread: messageUnread, selected: message.uid === selectedUid }), children: [_jsx(UnreadBar, { unread: messageUnread }), _jsxs("button", { type: "button", "data-row-open": true, onClick: () => onOpenMessage(conversation, message.uid), className: ["w-full text-left pl-8 pr-4 py-2", ROW_FOCUS_CLASS].join(" "), children: [_jsx(UnreadLabel, { unread: messageUnread }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx(MailAddress, { recipient: message.from, className: senderClass(messageUnread) }), _jsx("span", { className: ["text-xs shrink-0", dateClass(messageUnread)].join(" "), children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted font-normal", children: [_jsx("span", { className: "truncate", children: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : null) }), message.hasAttachments && (_jsx(HiOutlinePaperClip, { size: 12, "aria-label": "Has attachments" })), message.flags.flagged && (_jsx(HiOutlineFlag, { size: 12, "aria-label": "Flagged", className: "text-danger" }))] })] }), _jsx(InviteRowChip, { message: { ...message, meetingResponse: answers[message.uid] ?? message.meetingResponse }, onResponded: (updated) => {
+                                                answered(updated);
+                                                onMeetingResponded?.(updated);
+                                            }, className: "ml-8 mr-4" })] }, message.uid));
                             })] })] }, id));
         }) }));
 }

package/dist/apps/shared/components/mail/ConversationThreadPane.d.ts

@@ -11,8 +11,11 @@ export declare const THREAD_PAGE_SIZE = 100;
  * into an unbounded run of requests. Past it the pane says so and the rest stay readable from the list.
  */
 export declare const THREAD_MESSAGE_LIMIT = 500;
+/** What the pane needs to know of a conversation up front: the thread itself is loaded by `conversationId`. The subject and
+ * count fill the header while it loads, so a caller that only has a message (the mobile route) gives its subject and a count of 1. */
+export type ConversationThreadHead = Pick<ConversationSummary, "conversationId" | "subject" | "messageCount">;
 export interface ConversationThreadPaneProps {
-    conversation: ConversationSummary | null;
+    conversation: ConversationThreadHead | null;
     /** The mailbox the conversation was listed from - `listConversationMessages()` is mailbox-scoped. */
     mailboxUid: string;
     /**

package/dist/apps/shared/components/mail/InviteCard.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export { formatInviteWhen, isCalendarAttachment } from "./invite/inviteFormat.js";
+export interface InviteCardProps {
+    /** The message whose calendar invitation to show, if it carries one. Nothing is drawn until the server says there is one. */
+    messageUid: string;
+    /** The level of the card's heading, so it sits below whatever heading its surroundings have (`2` in the reading pane, `3` inside a thread's card). */
+    headingLevel?: 2 | 3;
+}
+/**
+ * The calendar invitation a message carries, as Outlook and Gmail draw it: what the meeting is, when and where, who organizes it, and the buttons
+ * that answer it - Accept, Tentative, Decline (and Propose new time) for a request; "Add to calendar" for a published event; "Remove from
+ * calendar" for a cancellation; "Accept proposal" for an attendee's proposed new time. An attendee's answer to the reader's own invitation is
+ * one line ("Bob tentatively accepted."). Everything that follows an action (the meeting going onto the calendar or off it, the reply to the
+ * organizer) is the server's; this only asks for it and draws the invitation the server sends back.
+ *
+ * Asks the server once per message (through the shared invitation cache, so the list row's RSVP chip and this card agree). A message with no readable
+ * invitation, and a lookup that fails for any reason, draw nothing - a lookup that fails is never retried and never disturbs the message around it.
+ * An answer that arrives after the message changed or this was unmounted is dropped.
+ */
+export default function InviteCard({ messageUid, headingLevel }: InviteCardProps): React.JSX.Element | null;

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

@@ -0,0 +1,150 @@
+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 { useId, useState } from "react";
+import { HiOutlineCalendarDays, HiOutlineCheck } from "react-icons/hi2";
+import { acceptProposal, proposeNewTime, removeMessageInvite, respondToMessageInvite, } from "@rapidmx/react-shared/calendar/inviteApi.js";
+import { guestPermissionsOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { formatMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import EventDescriptionView from "../calendar/EventDescriptionView.js";
+import RequestChangeForm from "../calendar/RequestChangeForm.js";
+import { VISIBILITY_LABEL, describeGuestPermissions } from "../calendar/eventFormat.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import { calendarHref, conflictSummary, formatInviteWhen } from "./invite/inviteFormat.js";
+import { useMessageInvite } from "./invite/inviteStore.js";
+import ProposeTimeForm from "./invite/ProposeTimeForm.js";
+export { formatInviteWhen, isCalendarAttachment } from "./invite/inviteFormat.js";
+const HEADINGS = {
+    REQUEST: "Meeting invitation",
+    CANCEL: "Meeting canceled",
+    REPLY: "Meeting response",
+    COUNTER: "New time proposed",
+};
+/** The heading of a `COUNTER` that is a guest's request for a change (rather than a different time). */
+const CHANGE_REQUEST_HEADING = "Change requested";
+/** How an answer reads in "Bob accepted." (a REPLY) - a participant who has not answered has not answered. */
+const REPLY_VERBS = {
+    accepted: "accepted",
+    tentative: "tentatively accepted",
+    declined: "declined",
+};
+/** The reader's own answer, as the line under the invitation says it. */
+const ANSWER_TEXT = {
+    accepted: "You accepted this meeting.",
+    tentative: "You tentatively accepted this meeting.",
+    declined: "You declined this meeting. It is not on your calendar.",
+};
+const ANSWER_CLASS = {
+    accepted: "text-success",
+    tentative: "text-text",
+    declined: "text-danger",
+};
+const RESPONSES = [
+    { response: "accepted", label: "Accept", failure: "Couldn't accept this meeting" },
+    { response: "tentative", label: "Tentative", failure: "Couldn't respond tentatively to this meeting" },
+    { response: "declined", label: "Decline", failure: "Couldn't decline this meeting" },
+];
+/** The most attendees that are listed by name; a longer list is only counted. */
+const MAX_NAMED_ATTENDEES = 5;
+function attendeeSummary(attendees) {
+    if (attendees.length === 0) {
+        return undefined;
+    }
+    const count = `${attendees.length} ${attendees.length === 1 ? "attendee" : "attendees"}`;
+    return attendees.length <= MAX_NAMED_ATTENDEES ? `${count}: ${attendees.map((a) => a.displayName || a.address).join(", ")}` : count;
+}
+/**
+ * The calendar invitation a message carries, as Outlook and Gmail draw it: what the meeting is, when and where, who organizes it, and the buttons
+ * that answer it - Accept, Tentative, Decline (and Propose new time) for a request; "Add to calendar" for a published event; "Remove from
+ * calendar" for a cancellation; "Accept proposal" for an attendee's proposed new time. An attendee's answer to the reader's own invitation is
+ * one line ("Bob tentatively accepted."). Everything that follows an action (the meeting going onto the calendar or off it, the reply to the
+ * organizer) is the server's; this only asks for it and draws the invitation the server sends back.
+ *
+ * Asks the server once per message (through the shared invitation cache, so the list row's RSVP chip and this card agree). A message with no readable
+ * invitation, and a lookup that fails for any reason, draw nothing - a lookup that fails is never retried and never disturbs the message around it.
+ * An answer that arrives after the message changed or this was unmounted is dropped.
+ */
+export default function InviteCard({ messageUid, headingLevel = 2 }) {
+    const { invite, setInvite } = useMessageInvite(messageUid);
+    const [pending, setPending] = useState(null);
+    const [proposing, setProposing] = useState(false);
+    // Said once after a proposal went out: the invitation itself doesn't change.
+    const [proposed, setProposed] = useState(false);
+    // A guest's request for a change (or for guests to be added): the form is open, and once it went out.
+    const [requesting, setRequesting] = useState(false);
+    const [requested, setRequested] = useState(false);
+    const headingId = useId();
+    if (!invite) {
+        return null;
+    }
+    /** Runs one of the card's actions: the buttons are off while it does, its result replaces what the card shows, and a failure leaves the card as it was. */
+    async function run(action, failure, call) {
+        setPending(action);
+        try {
+            setInvite(await call());
+            return true;
+        }
+        catch (err) {
+            notifyApiError(err, failure);
+            return false;
+        }
+        finally {
+            setPending(null);
+        }
+    }
+    async function sendProposal(proposal) {
+        if (await run("propose", "Couldn't send the proposed time", () => proposeNewTime(messageUid, proposal))) {
+            setProposing(false);
+            setProposed(true);
+        }
+    }
+    const busy = pending !== null;
+    const Heading = `h${headingLevel}`;
+    const method = invite.method.toUpperCase();
+    const isReply = method === "REPLY";
+    const isCounter = method === "COUNTER";
+    // A `COUNTER` a guest sent to change the event (not just its time): whether the organizer's server applied it already.
+    const changeRequest = isCounter ? invite.changeRequest : undefined;
+    const permissions = guestPermissionsOf(invite.guestPermissions ?? {});
+    const hiddenList = !invite.isOrganizer && !permissions.guestsCanSeeGuestList;
+    const canRequest = !!invite.calendarEventUid && (!!invite.canRequestChange || !!invite.canRequestInvite);
+    const title = invite.summary?.trim() || "(no title)";
+    const when = formatInviteWhen(invite);
+    const attendees = hiddenList ? "The organizer has hidden the guest list" : attendeeSummary(invite.attendees);
+    const hasDescription = !!(invite.descriptionHtml?.trim() || invite.description?.trim());
+    const visibility = invite.visibility && invite.visibility !== "default" ? VISIBILITY_LABEL[invite.visibility] : undefined;
+    const sender = invite.reply ?? invite.attendees[0];
+    const senderName = sender ? sender.displayName || sender.address : "Someone";
+    const showResponses = invite.canRespond && !invite.isOrganizer;
+    const conflicts = !isReply && !isCounter && method !== "CANCEL" && invite.conflicts.length > 0 ? conflictSummary(invite.conflicts) : undefined;
+    const hasActions = showResponses ||
+        invite.canPropose ||
+        invite.canAcceptProposal ||
+        invite.canAdd ||
+        invite.canRemove ||
+        canRequest ||
+        (invite.onCalendar && !!invite.calendarEventUid);
+    return (_jsxs("section", { "aria-labelledby": headingId, className: "rounded-sm border border-border bg-surface-alt px-3 py-3 flex flex-col gap-2 text-sm text-text", children: [_jsxs(Heading, { id: headingId, className: "flex items-center gap-2 text-sm font-semibold", children: [_jsx(HiOutlineCalendarDays, { size: 16, "aria-hidden": "true", className: "shrink-0" }), changeRequest ? CHANGE_REQUEST_HEADING : (HEADINGS[method] ?? "Calendar event")] }), isReply && (_jsxs("p", { className: "break-words", children: [_jsx("span", { className: "font-semibold", children: senderName }), " ", (sender?.responseStatus && REPLY_VERBS[sender.responseStatus]) ?? "responded", "."] })), isCounter && !changeRequest && (_jsxs("p", { className: "break-words", children: [_jsx("span", { className: "font-semibold", children: senderName }), " proposed a new time", when ? _jsxs(_Fragment, { children: [": ", when] }) : "."] })), changeRequest && (_jsx("p", { className: "break-words", children: changeRequest.applied ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold", children: senderName }), "\u2019s change was applied."] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold", children: senderName }), " requested a change."] })) })), _jsx("p", { className: "font-medium break-words", children: title }), !isReply && (_jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1", children: [when && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "When" }), _jsxs("dd", { className: "break-words", children: [when, invite.recurring && _jsx("span", { className: "text-text-muted", children: " (Repeats)" })] })] })), invite.location && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Where" }), _jsx("dd", { className: "break-words", children: invite.location })] })), hasDescription && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Description" }), _jsx("dd", { className: "break-words", children: _jsx(EventDescriptionView, { html: invite.descriptionHtml, text: invite.description }) })] })), invite.organizer && !isCounter && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Organizer" }), _jsx("dd", { className: "break-words", children: formatMailAddress(invite.organizer) })] })), attendees && (!isCounter || !!changeRequest) && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Attendees" }), _jsx("dd", { className: "break-words", children: attendees })] })), visibility && !isCounter && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-text-muted", children: "Visibility" }), _jsx("dd", { className: "break-words", children: visibility })] }))] })), isReply && when && _jsx("p", { className: "text-text-muted break-words", children: when }), conflicts && (_jsxs("p", { className: "text-danger break-words", children: [_jsx("span", { className: "font-medium", children: "Conflicts with:" }), " ", conflicts] })), invite.guestPermissions && !isReply && !isCounter && method !== "CANCEL" && (_jsx("p", { className: "text-xs text-text-muted break-words", children: describeGuestPermissions(permissions) })), invite.isOrganizer && !isReply && !isCounter && _jsx("p", { className: "text-text-muted", children: "You are the organizer of this meeting." }), method === "CANCEL" && _jsx("p", { className: "font-medium text-danger", children: "This meeting was canceled." }), invite.response && !invite.isOrganizer && !isReply && !isCounter && (_jsx("p", { role: "status", className: `font-medium ${ANSWER_CLASS[invite.response]}`, children: ANSWER_TEXT[invite.response] })), isCounter && invite.response === "accepted" && !changeRequest?.applied && (_jsx("p", { role: "status", className: "font-medium text-success", children: "You accepted the proposed time." })), proposed && (_jsx("p", { role: "status", className: "font-medium text-text", children: "Your proposed time was sent to the organizer." })), requested && (_jsx("p", { role: "status", className: "font-medium text-text", children: "Your change was sent to the organizer." })), invite.outdated && _jsx("p", { className: "text-xs text-text-muted", children: "A newer version of this meeting is already on your calendar." }), hasActions && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showResponses && (_jsx("div", { role: "group", "aria-label": "Respond to this meeting", "aria-busy": busy || undefined, className: "flex flex-wrap gap-2", children: RESPONSES.map(({ response, label, failure }) => {
+                            const current = invite.response === response;
+                            return (_jsxs(Button, { type: "button", variant: "secondary", className: ["!w-auto", current ? "!bg-primary/10 !border-primary disabled:!opacity-100" : ""].join(" "), "aria-pressed": current, "aria-busy": pending === response || undefined, loading: pending === response, disabled: busy || current, onClick: () => void run(response, failure, () => respondToMessageInvite(messageUid, response)), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), label] }, response));
+                        }) })), invite.canPropose && !proposing && (_jsx(Button, { type: "button", variant: "text", disabled: busy, onClick: () => setProposing(true), children: "Propose new time" })), canRequest && !requesting && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setRequesting(true), children: invite.canRequestChange ? "Request a change" : "Add guests" })), invite.canAcceptProposal && invite.response !== "accepted" && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-busy": pending === "acceptProposal" || undefined, loading: pending === "acceptProposal", disabled: busy, onClick: () => void run("acceptProposal", "Couldn't accept the proposed time", () => acceptProposal(messageUid)), children: "Accept proposal" })), invite.canAdd && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-busy": pending === "add" || undefined, loading: pending === "add", disabled: busy, 
+                        // A published event has no organizer to answer, so adding it is accepting it: the server sends no reply.
+                        onClick: () => void run("add", "Couldn't add this event to your calendar", () => respondToMessageInvite(messageUid, "accepted")), children: "Add to calendar" })), invite.canRemove && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-busy": pending === "remove" || undefined, loading: pending === "remove", disabled: busy, onClick: () => void run("remove", "Couldn't remove this meeting from your calendar", () => removeMessageInvite(messageUid)), children: "Remove from calendar" })), invite.onCalendar && invite.calendarEventUid && (_jsx("a", { href: calendarHref(invite), className: "text-sm font-medium text-primary-dark hover:underline", children: "Open in Calendar" }))] })), requesting && (_jsx("div", { className: "rounded-md bg-surface p-3", children: _jsx(RequestChangeForm, { subject: {
+                        uid: invite.calendarEventUid,
+                        title: invite.summary ?? "",
+                        location: invite.location,
+                        startDate: invite.startDate,
+                        endDate: invite.endDate,
+                        allDay: invite.allDay,
+                        recurring: invite.recurring,
+                        description: invite.description,
+                        descriptionHtml: invite.descriptionHtml,
+                        guestAddresses: invite.attendees.map((attendee) => attendee.address),
+                    }, canChange: !!invite.canRequestChange, canInvite: !!invite.canRequestInvite, onSent: () => {
+                        setRequesting(false);
+                        setRequested(true);
+                    }, onCancel: () => setRequesting(false) }) })), proposing && (_jsx(ProposeTimeForm, { invite: invite, busy: pending === "propose", onSubmit: (proposal) => void sendProposal(proposal), onCancel: () => setProposing(false) }))] }));
+}

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

@@ -9,6 +9,9 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { approveReceipt, archiveMessage, attachmentContentUrl, cancelScheduledSend, declineReceipt, getMailbox, getMessage, getMessageRawContent, moveMessage, recallMessage, setMessageLabels, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { buildForwardQuote, buildReplyQuote, buildReplyRecipients, buildReplyThreading, forwardSubject, replySubject, } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
 import MoveToFolderDialog from "./MoveToFolderDialog.js";
+import InviteCard from "./InviteCard.js";
+import { isCalendarAttachment } from "./invite/inviteFormat.js";
+import { useMessageInvite } from "./invite/inviteStore.js";
 import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
 import { extractAddresses } from "@rapidmx/react-shared/crypto/mime.js";
 import { SignerKeyConflictError, signingKeyFingerprints, trustSigner } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
@@ -744,6 +747,14 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
     const forwarded = message.flags.forwarded === true;
     const cardUnread = threadHeader?.unread ?? false;
     const showFooter = footer ?? !inThread;
+    // Only a message the server can read and that carries a calendar file is worth asking about an invitation. An encrypted message is out: the
+    // server holds only its ciphertext (the calendar file is inside it), so there is nothing for it to find. Drafts and Outbox hold messages
+    // that are being written or sent, not received invitations.
+    const mayHoldInvite = !message.encrypted && !inOutbox && message.folderUid !== draftsFolderUid && attachments.some(isCalendarAttachment);
+    // The calendar file of a message whose invitation card is drawn is the card, not a chip in the attachment list (a nameless "attachment" to click):
+    // it is listed again if the card could not be drawn (no invitation the server can read, or the lookup failed), so the file is never out of reach.
+    const { invite: shownInvite } = useMessageInvite(message.uid, mayHoldInvite);
+    const listedAttachments = shownInvite ? attachments.filter((attachment) => !isCalendarAttachment(attachment)) : attachments;
     const senderRecipient = { displayName: senderName, address: senderAddress };
     const sendingStatus = (_jsxs(_Fragment, { children: [sendInProgress && (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Sending\u2026" })), 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" }))), inOutbox && !sendInProgress && 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" })] })), inOutbox && !sendInProgress && !message.scheduledSendTime && draftsFolderUid && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Move to Drafts" }))] }));
@@ -768,8 +779,8 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
                             .filter((l) => !!l)
                             .map((l) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt", children: [_jsx("span", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: l.color ?? "#6366f1" } }), l.name] }, l.uid))) })), ["delivery", "read"]
                         .filter((type) => (type === "delivery" ? message.deliveryReceiptPending : message.readReceiptPending))
-                        .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [senderLabel, " 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(Alert, { children: receiptError }), security?.state === "signature_failed" && innerAttachments && innerAttachments.length > 0 && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: "These attachments come from a message whose signature couldn\u2019t be verified. Open them only if you trust the sender." })), innerAttachments
+                        .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [senderLabel, " 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(Alert, { children: receiptError }), mayHoldInvite && _jsx(InviteCard, { messageUid: message.uid, headingLevel: inThread ? 3 : 2 }), security?.state === "signature_failed" && innerAttachments && innerAttachments.length > 0 && (_jsx("p", { role: "status", className: "py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: "These attachments come from a message whose signature couldn\u2019t be verified. Open them only if you trust the sender." })), innerAttachments
                         ? innerAttachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", children: innerAttachments.map((attachment, index) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => downloadMimeAttachment(attachment), 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 ?? `Unnamed ${attachment.contentType} attachment` }) }, `${index}:${attachment.filename ?? ""}`))) }))
-                        : attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", 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("div", { ref: bodyRegionRef, tabIndex: -1, className: "outline-none", children: message.encrypted && security === null ? (_jsx(BodySkeleton, {})) : security?.decryptError !== undefined ? (_jsx(EncryptedBody, { locked: lockedRef.current, reason: security.decryptError, unlocking: unlocking, onUnlock: () => void handleUnlockToView() })) : (_jsx(MessageBody, { messageUid: message.uid, messageVersion: message.version, title: bodyTitle, content: bodyContent, attachments: attachments, inlineParts: innerAttachments, original: viewOriginal, onAdaptable: setAdaptable })) })] }), showFooter && (_jsxs("div", { className: "flex flex-wrap gap-2 px-4 py-3 border-t border-border print:hidden", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Reply to this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("reply"), children: "Reply" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Forward this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("forward"), children: "Forward" })] }))] }));
+                        : listedAttachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", children: listedAttachments.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("div", { ref: bodyRegionRef, tabIndex: -1, className: "outline-none", children: message.encrypted && security === null ? (_jsx(BodySkeleton, {})) : security?.decryptError !== undefined ? (_jsx(EncryptedBody, { locked: lockedRef.current, reason: security.decryptError, unlocking: unlocking, onUnlock: () => void handleUnlockToView() })) : (_jsx(MessageBody, { messageUid: message.uid, messageVersion: message.version, title: bodyTitle, content: bodyContent, attachments: attachments, inlineParts: innerAttachments, original: viewOriginal, onAdaptable: setAdaptable })) })] }), showFooter && (_jsxs("div", { className: "flex flex-wrap gap-2 px-4 py-3 border-t border-border print:hidden", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Reply to this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("reply"), children: "Reply" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Reply all to this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("replyAll"), children: "Reply All" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": "Forward this message", disabled: preparingCompose, onClick: () => void handleReplyOrForward("forward"), children: "Forward" })] }))] }));
     return (_jsxs("div", { className: inThread ? "min-w-0" : "flex-1 min-w-0 min-h-0 flex flex-col h-full", children: [inThread ? (card) : (_jsxs(_Fragment, { children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block px-4 pt-3", children: "\u2190 Back to messages" })), _jsx(SubjectCard, { subject: shownSubject }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: card })] })), _jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: message.mailboxUid, folders: folders ?? [], currentFolderUid: message.folderUid, onMove: handleMove, onFolderCreated: onFolderCreated }), _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" })] })] }), _jsx(Modal, { open: trustConfirmOpen && !!trustableCertificate, onClose: () => !trusting && setTrustConfirmOpen(false), title: "Trust this signer?", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("p", { children: ["Mail from ", _jsx("span", { className: "font-medium", children: senderAddress }), " signed with this certificate will show as verified."] }), _jsxs("dl", { className: "flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "Certificate issued to" }), _jsx("dd", { children: security?.signerEmails?.length ? security.signerEmails.join(", ") : "No email address" }), _jsx("dt", { className: "text-xs text-text-muted", children: "Fingerprint" }), _jsx("dd", { className: "font-mono text-xs break-all", children: security?.signerFingerprint ? formatFingerprint(security.signerFingerprint) : "Unknown" })] }), _jsx("p", { className: "text-text-muted", children: "Anyone can create a certificate naming any address. Before trusting it, confirm this fingerprint with the sender through another channel, such as a phone call." }), trustError && _jsx(Alert, { children: trustError }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", className: "!w-auto", loading: trusting, disabled: trusting, onClick: () => handleTrustSigner(senderAddress, trustableCertificate), children: "Trust" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => setTrustConfirmOpen(false), children: "Cancel" })] })] }) })] }));
 }

package/dist/apps/shared/components/mail/SwipeRow.d.ts

@@ -0,0 +1,22 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface SwipeRowProps extends HTMLAttributes<HTMLElement> {
+    /** The element the row is: a list item, or the row's own `div` inside one. */
+    as?: "li" | "div";
+    /** Swipes are only followed while this is `true`: the phone layout, and not while rows are being selected. */
+    enabled: boolean;
+    /** Right to left. Resolves whether it went through; `false` brings the row back, anything else leaves it gone (its list removes it). */
+    onArchive: () => Promise<boolean>;
+    /** Left to right. The row comes back at once, and this asks where to (a prompt for the folder). */
+    onMove: () => void;
+    children: ReactNode;
+}
+/**
+ * A row of a list of mail that slides with a finger: right to left it takes the row away to Archive (a green panel with the
+ * archive icon follows the row in), left to right it comes back and asks for a folder to move it to (a blue panel with a
+ * folder). The panels are children of the row placed just outside its edges, so they travel with it and fill the gap it leaves
+ * without the row's own markup, or the list's, changing; the list has to clip them (`overflow-x-clip`).
+ *
+ * Only a swipe that starts out horizontal counts (see `useSwipe()`), so scrolling the list is untouched, and it is an addition
+ * to, never the only way of, archiving and moving: the selection bar and the reading pane do the same.
+ */
+export default function SwipeRow({ as: Tag, enabled, onArchive, onMove, children, className, style, ...rest }: SwipeRowProps): React.JSX.Element;