@rapidmx/web-client 0.14.1 → 0.16.0

package/apps/shared/components/mail/ConversationThreadPane.tsx

@@ -3,16 +3,19 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { Attachment, Folder, Message, listAttachments } from "@rapidmx/react-shared/mail/mailApi.js";
 import { ConversationSummary, listConversationMessages } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import MessageDetailPane from "./MessageDetailPane.js";
-import { EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.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()`. */
@@ -25,8 +28,12 @@ export const THREAD_PAGE_SIZE = 100;
  */
 export 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;
     /**
@@ -117,6 +124,21 @@ async function loadThread(mailboxUid: string, conversationId: string): Promise<{
     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: Message[], next: Message[]): Message[] {
+    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: HTMLElement): boolean {
     try {
@@ -156,7 +178,9 @@ export default function ConversationThreadPane({
     onFolderCreated,
     shortcuts,
 }: ConversationThreadPaneProps) {
-    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<Message[]>([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState<Record<string, Attachment[]>>({});
     const [expandedUids, setExpandedUids] = useState<Set<string>>(new Set());
@@ -179,13 +203,19 @@ export default function ConversationThreadPane({
      * expansion run below must sit that render out rather than anchor on a message from another thread. */
     const loadedIdRef = useRef<string | null>(null);
     const rowRefs = useRef<Record<string, HTMLLIElement | null>>({});
-    const headerRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+    const headerRefs = useRef<Record<string, HTMLElement | null>>({});
     /** Where the toggled message's header sat in the viewport before it expanded, so the run below can put
      * it back there - expanding a message above the one being read must not shove that one off-screen. */
     const anchorRef = useRef<{ uid: string; top: number } | null>(null);
     /** 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<string | null>(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<Set<string>>(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<Set<string>>(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;
 
@@ -193,6 +223,8 @@ export default function ConversationThreadPane({
         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([]);
@@ -212,6 +244,8 @@ export default function ConversationThreadPane({
             .then((loaded) => {
                 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);
             })
@@ -334,6 +368,80 @@ export default function ConversationThreadPane({
         }
     }, [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: Message, previous?: Message) {
@@ -343,6 +451,7 @@ export default function ConversationThreadPane({
 
     /** A message that left the folder being listed - it leaves the thread too, as it left the list. */
     function removeMessage(updated: Message) {
+        removedRef.current.add(updated.uid);
         setMessages((prev) => prev.filter((message) => message.uid !== updated.uid));
         onMessageRemoved(updated);
     }
@@ -395,7 +504,7 @@ export default function ConversationThreadPane({
                             : undefined
                         : error
                           ? undefined
-                          : `${messages.length} message${messages.length === 1 ? "" : "s"}`
+                          : `${messages.length + pendingCards.length} message${messages.length + pendingCards.length === 1 ? "" : "s"}`
                 }
             >
                 {truncated && !loading && !error && (
@@ -413,6 +522,22 @@ export default function ConversationThreadPane({
                 </div>
             ) : (
             <ul className="flex-1 min-h-0 overflow-y-auto p-2 sm:p-3 flex flex-col gap-3">
+                {pendingCards.map((reply) => (
+                    <li
+                        key={reply.uid}
+                        ref={(node) => {
+                            rowRefs.current[reply.uid] = node;
+                        }}
+                        data-outgoing="true"
+                    >
+                        <PendingMessageCard
+                            reply={reply}
+                            headerRef={(node) => {
+                                headerRefs.current[reply.uid] = node;
+                            }}
+                        />
+                    </li>
+                ))}
                 {messages.map((message) => {
                     const uid = message.uid;
                     const expanded = expandedUids.has(uid);

package/apps/shared/components/mail/InviteCard.tsx

@@ -0,0 +1,387 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useId, useState } from "react";
+import { HiOutlineCalendarDays, HiOutlineCheck } from "react-icons/hi2";
+import {
+    InviteParticipant,
+    InviteResponse,
+    MessageInvite,
+    ProposedTime,
+    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: Record<string, string> = {
+    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: Partial<Record<NonNullable<InviteParticipant["responseStatus"]>, string>> = {
+    accepted: "accepted",
+    tentative: "tentatively accepted",
+    declined: "declined",
+};
+
+/** The reader's own answer, as the line under the invitation says it. */
+const ANSWER_TEXT: Record<InviteResponse, string> = {
+    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: Record<InviteResponse, string> = {
+    accepted: "text-success",
+    tentative: "text-text",
+    declined: "text-danger",
+};
+
+const RESPONSES: { response: InviteResponse; label: string; failure: string }[] = [
+    { 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;
+
+/** What the card is doing for the reader right now: an answer being sent, an add/remove, a proposal, an accepted proposal. */
+type Pending = InviteResponse | "add" | "remove" | "propose" | "acceptProposal";
+
+function attendeeSummary(attendees: InviteParticipant[]): string | undefined {
+    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;
+}
+
+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 = 2 }: InviteCardProps) {
+    const { invite, setInvite } = useMessageInvite(messageUid);
+    const [pending, setPending] = useState<Pending | null>(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: Pending, failure: string, call: () => Promise<MessageInvite>): Promise<boolean> {
+        setPending(action);
+        try {
+            setInvite(await call());
+            return true;
+        } catch (err) {
+            notifyApiError(err, failure);
+            return false;
+        } finally {
+            setPending(null);
+        }
+    }
+
+    async function sendProposal(proposal: ProposedTime) {
+        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}` as const;
+    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 (
+        <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">
+            <Heading id={headingId} className="flex items-center gap-2 text-sm font-semibold">
+                <HiOutlineCalendarDays size={16} aria-hidden="true" className="shrink-0" />
+                {changeRequest ? CHANGE_REQUEST_HEADING : (HEADINGS[method] ?? "Calendar event")}
+            </Heading>
+            {isReply && (
+                // Someone answering the reader's own invitation: a line of news, nothing to do.
+                <p className="break-words">
+                    <span className="font-semibold">{senderName}</span> {(sender?.responseStatus && REPLY_VERBS[sender.responseStatus]) ?? "responded"}.
+                </p>
+            )}
+            {isCounter && !changeRequest && (
+                <p className="break-words">
+                    <span className="font-semibold">{senderName}</span> proposed a new time{when ? <>: {when}</> : "."}
+                </p>
+            )}
+            {changeRequest && (
+                <p className="break-words">
+                    {changeRequest.applied ? (
+                        <>
+                            <span className="font-semibold">{senderName}</span>&rsquo;s change was applied.
+                        </>
+                    ) : (
+                        <>
+                            <span className="font-semibold">{senderName}</span> requested a change.
+                        </>
+                    )}
+                </p>
+            )}
+            <p className="font-medium break-words">{title}</p>
+            {!isReply && (
+                <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1">
+                    {when && (!isCounter || !!changeRequest) && (
+                        <>
+                            <dt className="text-text-muted">When</dt>
+                            <dd className="break-words">
+                                {when}
+                                {invite.recurring && <span className="text-text-muted"> (Repeats)</span>}
+                            </dd>
+                        </>
+                    )}
+                    {invite.location && (
+                        <>
+                            <dt className="text-text-muted">Where</dt>
+                            <dd className="break-words">{invite.location}</dd>
+                        </>
+                    )}
+                    {hasDescription && (!isCounter || !!changeRequest) && (
+                        <>
+                            <dt className="text-text-muted">Description</dt>
+                            <dd className="break-words">
+                                <EventDescriptionView html={invite.descriptionHtml} text={invite.description} />
+                            </dd>
+                        </>
+                    )}
+                    {invite.organizer && !isCounter && (
+                        <>
+                            <dt className="text-text-muted">Organizer</dt>
+                            <dd className="break-words">{formatMailAddress(invite.organizer)}</dd>
+                        </>
+                    )}
+                    {attendees && (!isCounter || !!changeRequest) && (
+                        <>
+                            <dt className="text-text-muted">Attendees</dt>
+                            <dd className="break-words">{attendees}</dd>
+                        </>
+                    )}
+                    {visibility && !isCounter && (
+                        <>
+                            <dt className="text-text-muted">Visibility</dt>
+                            <dd className="break-words">{visibility}</dd>
+                        </>
+                    )}
+                </dl>
+            )}
+            {isReply && when && <p className="text-text-muted break-words">{when}</p>}
+            {conflicts && (
+                <p className="text-danger break-words">
+                    <span className="font-medium">Conflicts with:</span> {conflicts}
+                </p>
+            )}
+            {invite.guestPermissions && !isReply && !isCounter && method !== "CANCEL" && (
+                <p className="text-xs text-text-muted break-words">{describeGuestPermissions(permissions)}</p>
+            )}
+            {invite.isOrganizer && !isReply && !isCounter && <p className="text-text-muted">You are the organizer of this meeting.</p>}
+            {method === "CANCEL" && <p className="font-medium text-danger">This meeting was canceled.</p>}
+            {invite.response && !invite.isOrganizer && !isReply && !isCounter && (
+                <p role="status" className={`font-medium ${ANSWER_CLASS[invite.response]}`}>
+                    {ANSWER_TEXT[invite.response]}
+                </p>
+            )}
+            {isCounter && invite.response === "accepted" && !changeRequest?.applied && (
+                <p role="status" className="font-medium text-success">
+                    You accepted the proposed time.
+                </p>
+            )}
+            {proposed && (
+                <p role="status" className="font-medium text-text">
+                    Your proposed time was sent to the organizer.
+                </p>
+            )}
+            {requested && (
+                <p role="status" className="font-medium text-text">
+                    Your change was sent to the organizer.
+                </p>
+            )}
+            {invite.outdated && <p className="text-xs text-text-muted">A newer version of this meeting is already on your calendar.</p>}
+            {hasActions && (
+                <div className="flex flex-wrap items-center gap-2">
+                    {showResponses && (
+                        <div role="group" aria-label="Respond to this meeting" aria-busy={busy || undefined} className="flex flex-wrap gap-2">
+                            {RESPONSES.map(({ response, label, failure }) => {
+                                const current = invite.response === response;
+                                return (
+                                    <Button
+                                        key={response}
+                                        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))}
+                                    >
+                                        {current && <HiOutlineCheck size={14} aria-hidden="true" />}
+                                        {label}
+                                    </Button>
+                                );
+                            })}
+                        </div>
+                    )}
+                    {invite.canPropose && !proposing && (
+                        <Button type="button" variant="text" disabled={busy} onClick={() => setProposing(true)}>
+                            Propose new time
+                        </Button>
+                    )}
+                    {canRequest && !requesting && (
+                        <Button type="button" variant="secondary" className="!w-auto" disabled={busy} onClick={() => setRequesting(true)}>
+                            {invite.canRequestChange ? "Request a change" : "Add guests"}
+                        </Button>
+                    )}
+                    {invite.canAcceptProposal && invite.response !== "accepted" && (
+                        <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))}
+                        >
+                            Accept proposal
+                        </Button>
+                    )}
+                    {invite.canAdd && (
+                        <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"))}
+                        >
+                            Add to calendar
+                        </Button>
+                    )}
+                    {invite.canRemove && (
+                        <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))}
+                        >
+                            Remove from calendar
+                        </Button>
+                    )}
+                    {invite.onCalendar && invite.calendarEventUid && (
+                        <a href={calendarHref(invite)} className="text-sm font-medium text-primary-dark hover:underline">
+                            Open in Calendar
+                        </a>
+                    )}
+                </div>
+            )}
+            {requesting && (
+                <div className="rounded-md bg-surface p-3">
+                    <RequestChangeForm
+                        subject={{
+                            uid: invite.calendarEventUid as string,
+                            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)}
+                    />
+                </div>
+            )}
+            {proposing && (
+                <ProposeTimeForm
+                    invite={invite}
+                    busy={pending === "propose"}
+                    onSubmit={(proposal) => void sendProposal(proposal)}
+                    onCancel={() => setProposing(false)}
+                />
+            )}
+        </section>
+    );
+}