@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { listAttachments } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
@@ -11,8 +12,10 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import MessageDetailPane from "./MessageDetailPane.js";
 import { EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
+import PendingMessageCard from "./reading/PendingMessageCard.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
+import { adoptedOutgoing, belongsToThread, settleOutgoing, useOutgoingReplies } from "../../mail/outbox/outgoingReplies.js";
 import { dateClass, isUnread, senderClass } from "./unreadStyle.js";
 /** One request's worth of the thread. The server's own default for `listConversationMessages()`. */
 export const THREAD_PAGE_SIZE = 100;
@@ -77,6 +80,20 @@ async function loadThread(mailboxUid, conversationId) {
     messages.reverse();
     return { messages, truncated: more };
 }
+/**
+ * `next` - the thread as it was just read again - for the pane to show in place of `previous`. A message the pane holds a newer copy of (one that
+ * was read, flagged or labelled here a moment ago, whose change the read may have started before) keeps that copy, and a read that changed
+ * nothing gives back `previous` itself, so the pane is not drawn again.
+ */
+function mergeThread(previous, next) {
+    const held = new Map(previous.map((message) => [message.uid, message]));
+    const merged = next.map((message) => {
+        const own = held.get(message.uid);
+        return own && own.version > message.version ? own : message;
+    });
+    const unchanged = merged.length === previous.length && merged.every((message, index) => message.uid === previous[index].uid && message.version === previous[index].version);
+    return unchanged ? previous : merged;
+}
 /** Whether the browser is showing a focus ring on `element` - it was focused from the keyboard (or by a key press's handler), not by a click. */
 function hasFocusRing(element) {
     try {
@@ -105,7 +122,9 @@ function hasFocusRing(element) {
  * that - mounting a body iframe per message up front would be wasteful in a long thread.
  */
 export default function ConversationThreadPane({ conversation, mailboxUid, selectedUid, folders, labels, onMessagePatched, onMessageRemoved, onLabelCreated, onFolderCreated, shortcuts, }) {
-    const { trackMessageChange } = useMailShell();
+    const { trackMessageChange, live } = useMailShell();
+    // The replies and forwards this tab has sent, drawn at the top of the thread they continue until the server's own copy is in it.
+    const outgoing = useOutgoingReplies();
     const [messages, setMessages] = useState([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState({});
     const [expandedUids, setExpandedUids] = useState(new Set());
@@ -134,11 +153,19 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     /** The message whose header button had the focus when it was toggled: expanding or collapsing swaps that button for the other state's, so the
      * focus is put back on the new one. */
     const refocusRef = useRef(null);
+    /** The pending cards that have already been scrolled to, so that only a message that has just been sent takes the view and the focus. */
+    const announcedRef = useRef(new Set());
+    /** Messages that left the thread here (archived, moved, a scheduled send taken back): a read of the thread again still lists them, since a conversation spans folders. */
+    const removedRef = useRef(new Set());
+    /** The last live update this pane has answered - one already in the shell's hands when the pane opened is not news. */
+    const seenLiveRef = useRef(live);
     const conversationId = conversation?.conversationId;
     useEffect(() => {
         const generation = ++generationRef.current;
         markReadRequestedRef.current = new Set();
         attachmentsRequestedRef.current = new Set();
+        announcedRef.current = new Set();
+        removedRef.current = new Set();
         appliedSelectionRef.current = null;
         loadedIdRef.current = null;
         setMessages([]);
@@ -159,6 +186,8 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             if (generation !== generationRef.current)
                 return;
             loadedIdRef.current = conversationId;
+            // A message sent from here whose Sent Items copy is already in the thread is drawn as that copy, not as a pending card.
+            settleOutgoing(mailboxUid, loaded.messages);
             setMessages(loaded.messages);
             setTruncated(loaded.truncated);
         })
@@ -283,6 +312,77 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
             }
         }
     }, [expandedUids, messages]);
+    /**
+     * Reads the thread again, quietly: what is on screen stays until the answer is here (a read that fails changes nothing), a message that arrived
+     * is added at the top, and the reader's expanded and collapsed cards are left as they are. A message this tab sent - which the server has
+     * now filed in Sent Items under the same `uid` - takes the place of its pending card, expanded as that card was, with the focus if the
+     * card had it. A thread that has not finished its first load is not read again: that load is the fresh read.
+     */
+    function refreshThread() {
+        const id = loadedIdRef.current;
+        if (!id) {
+            return;
+        }
+        const generation = generationRef.current;
+        loadThread(mailboxUid, id).then((loaded) => {
+            if (generation !== generationRef.current)
+                return;
+            const current = loaded.messages.filter((message) => !removedRef.current.has(message.uid));
+            const adopted = adoptedOutgoing(mailboxUid, current);
+            const refocus = adopted.find((uid) => document.activeElement === headerRefs.current[uid]);
+            // Drawn first, and only then is the pending card forgotten: there is never a frame with neither it nor the real message.
+            flushSync(() => {
+                setMessages((previous) => mergeThread(previous, current));
+                setTruncated(loaded.truncated);
+                if (adopted.length > 0) {
+                    setExpandedUids((previous) => new Set([...previous, ...adopted]));
+                }
+                if (refocus) {
+                    setPendingFocusUid(refocus);
+                }
+            });
+            settleOutgoing(mailboxUid, current);
+        }, 
+        // Quietly: the next live update reads it again, and what is shown is still right.
+        () => undefined);
+    }
+    // Another message of this conversation may have arrived - a recipient's reply, one sent from another tab or device, or this tab's own reply
+    // filed in Sent Items - whenever the shell announces a live update that touched one of this mailbox's folders (or does not say which).
+    useEffect(() => {
+        if (live === seenLiveRef.current)
+            return;
+        seenLiveRef.current = live;
+        if (live.folderUids === null || folders.some((folder) => live.folderUids.has(folder.uid))) {
+            refreshThread();
+        }
+    }, [live]);
+    // The server has relayed a message this tab sent: its Sent Items copy is read for at once, without waiting for the live update that follows.
+    const sentKey = outgoing
+        .filter((reply) => reply.state === "sent" && reply.mailboxUid === mailboxUid)
+        .map((reply) => reply.uid)
+        .join(",");
+    useEffect(() => {
+        if (sentKey) {
+            refreshThread();
+        }
+    }, [sentKey]);
+    // The messages sent from here that continue this thread and whose real copy it does not hold yet, newest first (the pane's order). A message
+    // that replies to nothing here - a new message, or a reply to another conversation - is not in this list, and never is.
+    const pendingCards = outgoing
+        .filter((reply) => reply.mailboxUid === mailboxUid && !messages.some((message) => message.uid === reply.uid) && belongsToThread(reply, messages))
+        .reverse();
+    // A message that has just been sent is scrolled into view and takes the focus - the compose window it was sent from has just closed, and the focus
+    // with it - once. A failed one, or one that was already there when the thread was opened, is left where it is.
+    const pendingKey = pendingCards.map((reply) => reply.uid).join(",");
+    useEffect(() => {
+        const fresh = pendingCards.filter((reply) => reply.state === "sending" && !announcedRef.current.has(reply.uid));
+        if (fresh.length === 0)
+            return;
+        for (const reply of fresh) {
+            announcedRef.current.add(reply.uid);
+        }
+        setPendingFocusUid(fresh[0].uid);
+    }, [pendingKey]);
     /** A newer copy of one of the thread's messages, kept here and handed to the list - with the copy it
      * replaces where the caller was given one, so a conversation row can tell what actually changed. */
     function patchMessage(updated, previous) {
@@ -291,6 +391,7 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
     }
     /** A message that left the folder being listed - it leaves the thread too, as it left the list. */
     function removeMessage(updated) {
+        removedRef.current.add(updated.uid);
         setMessages((prev) => prev.filter((message) => message.uid !== updated.uid));
         onMessageRemoved(updated);
     }
@@ -329,26 +430,30 @@ export default function ConversationThreadPane({ conversation, mailboxUid, selec
                         : undefined
                     : error
                         ? undefined
-                        : `${messages.length} message${messages.length === 1 ? "" : "s"}`, children: truncated && !loading && !error && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] })) }), loading ? (_jsx(SkeletonCards, { messageCount: conversation.messageCount })) : error ? (_jsx("div", { className: "p-2 sm:p-3", children: _jsx(Alert, { children: error }) })) : (_jsx("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: messages.map((message) => {
-                    const uid = message.uid;
-                    const expanded = expandedUids.has(uid);
-                    const bodyId = `thread-message-${uid}`;
-                    const messageUnread = isUnread(message);
-                    return (_jsx("li", { ref: (node) => {
-                            rowRefs.current[uid] = node;
-                        }, "data-unread": messageUnread ? "true" : undefined, children: expanded ? (_jsx(MessageDetailPane, { inThread: true, threadSubject: subject, threadHeader: {
-                                bodyId,
-                                unread: messageUnread,
-                                onToggle: () => toggleExpanded(uid),
-                                buttonRef: (node) => {
-                                    headerRefs.current[uid] = node;
-                                },
-                            }, footer: uid === footerUid, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) : (_jsxs(_Fragment, { children: [_jsx(CollapsedCard, { from: message.from, date: new Date(message.receivedDate).toLocaleString(), preview: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : ""), unread: messageUnread, senderClassName: senderClass(messageUnread), dateClassName: dateClass(messageUnread), buttonRef: (node) => {
+                        : `${messages.length + pendingCards.length} message${messages.length + pendingCards.length === 1 ? "" : "s"}`, children: truncated && !loading && !error && (_jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Only the oldest ", THREAD_MESSAGE_LIMIT, " messages of this conversation are shown here. The rest are still in the message list."] })) }), loading ? (_jsx(SkeletonCards, { messageCount: conversation.messageCount })) : error ? (_jsx("div", { className: "p-2 sm:p-3", children: _jsx(Alert, { children: error }) })) : (_jsxs("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3", children: [pendingCards.map((reply) => (_jsx("li", { ref: (node) => {
+                            rowRefs.current[reply.uid] = node;
+                        }, "data-outgoing": "true", children: _jsx(PendingMessageCard, { reply: reply, headerRef: (node) => {
+                                headerRefs.current[reply.uid] = node;
+                            } }) }, reply.uid))), messages.map((message) => {
+                        const uid = message.uid;
+                        const expanded = expandedUids.has(uid);
+                        const bodyId = `thread-message-${uid}`;
+                        const messageUnread = isUnread(message);
+                        return (_jsx("li", { ref: (node) => {
+                                rowRefs.current[uid] = node;
+                            }, "data-unread": messageUnread ? "true" : undefined, children: expanded ? (_jsx(MessageDetailPane, { inThread: true, threadSubject: subject, threadHeader: {
+                                    bodyId,
+                                    unread: messageUnread,
+                                    onToggle: () => toggleExpanded(uid),
+                                    buttonRef: (node) => {
                                         headerRefs.current[uid] = node;
-                                    }, buttonProps: {
-                                        onClick: () => toggleExpanded(uid),
-                                        "aria-expanded": false,
-                                        "aria-controls": bodyId,
-                                    } }), _jsx("div", { id: bodyId, hidden: true })] })) }, uid));
-                }) }))] }));
+                                    },
+                                }, footer: uid === footerUid, shortcuts: !!shortcuts && uid === keyboardUid, message: message, attachments: attachmentsByUid[uid] ?? [], isSentItems: folderTypeOf(message) === "sent_items", isOutbox: folderTypeOf(message) === "outbox", draftsFolderUid: folders.find((folder) => folder.type === "drafts")?.uid, folders: folders, onMoved: removeMessage, onFolderCreated: onFolderCreated, onRecalled: patchMessage, onReceiptHandled: patchMessage, onScheduledSendCanceled: removeMessage, onArchived: removeMessage, labels: labels, onLabelsChanged: patchMessage, onLabelCreated: onLabelCreated })) : (_jsxs(_Fragment, { children: [_jsx(CollapsedCard, { from: message.from, date: new Date(message.receivedDate).toLocaleString(), preview: message.bodyPreview || (message.encrypted ? _jsx(EncryptedPreview, {}) : ""), unread: messageUnread, senderClassName: senderClass(messageUnread), dateClassName: dateClass(messageUnread), buttonRef: (node) => {
+                                            headerRefs.current[uid] = node;
+                                        }, buttonProps: {
+                                            onClick: () => toggleExpanded(uid),
+                                            "aria-expanded": false,
+                                            "aria-controls": bodyId,
+                                        } }), _jsx("div", { id: bodyId, hidden: true })] })) }, uid));
+                    })] }))] }));
 }

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/MailSelectionBar.d.ts

@@ -47,6 +47,11 @@ export interface MailSelectionBarProps {
     /** The keyboard acts on this selection (Delete, Ctrl+Q, Ctrl+U, Insert - registered by the page): Mark read, Mark unread, Flag and
      * Delete name their shortcut in the tooltip and `aria-keyshortcuts`. */
     shortcuts?: boolean;
+    /** Why Move to is unavailable, when the selection is spread over mailboxes and a folder can only belong to one (search results over several
+     * mailboxes). Shown as the button's tooltip. */
+    moveDisabledReason?: string;
+    /** The same for Apply label: a label belongs to one mailbox, and `labels` are one mailbox's. */
+    labelsDisabledReason?: string;
 }
 /**
  * The header that replaces the list's own toolbar while select mode is on: how many rows are selected,
@@ -58,4 +63,4 @@ export interface MailSelectionBarProps {
  * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, }: MailSelectionBarProps): React.JSX.Element;
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }: MailSelectionBarProps): React.JSX.Element;

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

@@ -22,7 +22,7 @@ function actionClassName() {
  * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
-export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, }) {
+export default function MailSelectionBar({ selected, listed, totals, onSelectAll, onClearSelection, onCancel, folders, currentFolderUid, labels, mailboxUid, onLabelCreated, onFolderCreated, onApplyLabels, onSetRead, onSetFlagged, onArchive, onMoveTo, onReportJunk, onDelete, busy, shortcuts, moveDisabledReason, labelsDisabledReason, }) {
     const env = useKeyEnvironment();
     /** `title` and `aria-keyshortcuts` for an action the keyboard also does; `reason` (why it is disabled) wins the tooltip. */
     const hint = (label, shortcut, reason) => shortcuts
@@ -49,7 +49,7 @@ export default function MailSelectionBar({ selected, listed, totals, onSelectAll
     // partially applied, and is left exactly as it is unless the reader touches that row.
     const appliedToAll = labels.filter((label) => !none && selected.every((m) => m.labelUids?.includes(label.uid)));
     const appliedToSome = labels.filter((label) => selected.some((m) => m.labelUids?.includes(label.uid)) && !appliedToAll.includes(label));
-    return (_jsxs("div", { className: "border-b border-border", children: [_jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: mailboxUid, folders: folders, currentFolderUid: currentFolderUid, count: selected.length, onMove: onMoveTo, onFolderCreated: onFolderCreated }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-surface-alt", children: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-semibold text-text", children: [selectedCount, totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : "", " selected"] }), _jsx("button", { type: "button", onClick: onSelectAll, disabled: allSelected || listedCount === 0, className: actionClassName(), children: "Select all" }), _jsx("button", { type: "button", onClick: onClearSelection, disabled: selectedCount === 0, className: actionClassName(), children: "Clear" }), _jsx("button", { type: "button", onClick: onCancel, className: `${actionClassName()} ml-auto`, children: "Cancel" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1", children: [_jsx("button", { type: "button", onClick: () => onSetRead(true), disabled: none || busy, className: actionClassName(), ...hint("Mark read", SHORTCUTS.mail.markRead), children: "Mark read" }), _jsx("button", { type: "button", onClick: () => onSetRead(false), disabled: none || busy, className: actionClassName(), ...hint("Mark unread", SHORTCUTS.mail.markUnread), children: "Mark unread" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(true), disabled: none || busy, className: actionClassName(), ...hint("Flag", SHORTCUTS.mail.flag), children: "Flag" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(false), disabled: none || busy, className: actionClassName(), children: "Unflag" }), _jsx("button", { type: "button", onClick: onArchive, disabled: none || busy || !!archiveReason, title: archiveReason, className: actionClassName(), children: "Archive" }), _jsx(LabelMenuButton, { "aria-label": "Apply label", label: "Apply label", className: "text-sm", labels: labels, mailboxUid: mailboxUid, onLabelCreated: onLabelCreated, applied: appliedToAll.map((label) => label.uid), partial: appliedToSome.map((label) => label.uid), onCommit: onApplyLabels, busy: busy, disabled: none || busy, note: selected.length === 1
+    return (_jsxs("div", { className: "border-b border-border", children: [_jsx(MoveToFolderDialog, { open: movePrompt, onClose: () => setMovePrompt(false), mailboxUid: mailboxUid, folders: folders, currentFolderUid: currentFolderUid, count: selected.length, onMove: onMoveTo, onFolderCreated: onFolderCreated }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-surface-alt", children: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-semibold text-text", children: [selectedCount, totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : "", " selected"] }), _jsx("button", { type: "button", onClick: onSelectAll, disabled: allSelected || listedCount === 0, className: actionClassName(), children: "Select all" }), _jsx("button", { type: "button", onClick: onClearSelection, disabled: selectedCount === 0, className: actionClassName(), children: "Clear" }), _jsx("button", { type: "button", onClick: onCancel, className: `${actionClassName()} ml-auto`, children: "Cancel" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-1.5 py-1", children: [_jsx("button", { type: "button", onClick: () => onSetRead(true), disabled: none || busy, className: actionClassName(), ...hint("Mark read", SHORTCUTS.mail.markRead), children: "Mark read" }), _jsx("button", { type: "button", onClick: () => onSetRead(false), disabled: none || busy, className: actionClassName(), ...hint("Mark unread", SHORTCUTS.mail.markUnread), children: "Mark unread" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(true), disabled: none || busy, className: actionClassName(), ...hint("Flag", SHORTCUTS.mail.flag), children: "Flag" }), _jsx("button", { type: "button", onClick: () => onSetFlagged(false), disabled: none || busy, className: actionClassName(), children: "Unflag" }), _jsx("button", { type: "button", onClick: onArchive, disabled: none || busy || !!archiveReason, title: archiveReason, className: actionClassName(), children: "Archive" }), _jsx(LabelMenuButton, { "aria-label": "Apply label", label: "Apply label", className: "text-sm", labels: labels, mailboxUid: mailboxUid, onLabelCreated: onLabelCreated, applied: appliedToAll.map((label) => label.uid), partial: appliedToSome.map((label) => label.uid), onCommit: onApplyLabels, busy: busy, disabled: none || busy || !!labelsDisabledReason, title: labelsDisabledReason, note: selected.length === 1
                             ? "Ticked labels are applied, unticked ones removed."
-                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy || !!deleteReason, className: actionClassName(), ...hint("Delete", SHORTCUTS.mail.delete, deleteReason), children: "Delete" })] })] }));
+                            : "Ticked labels are applied to every selected message and unticked ones removed from all of them; a dash means only some have that label, and leaving it alone keeps it that way.", emptyNote: "This mailbox has no labels yet.", commit: { label: "Apply" }, clear: { label: "Remove all labels" } }), _jsx("button", { type: "button", onClick: () => setMovePrompt(true), disabled: none || busy || !!moveDisabledReason, title: moveDisabledReason, className: actionClassName(), children: "Move to" }), _jsx("button", { type: "button", onClick: onReportJunk, disabled: none || busy || !!junkReason, title: junkReason, className: actionClassName(), children: "Report junk" }), _jsx("button", { type: "button", onClick: onDelete, disabled: none || busy || !!deleteReason, className: actionClassName(), ...hint("Delete", SHORTCUTS.mail.delete, deleteReason), children: "Delete" })] })] }));
 }

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;