@rapidmx/web-client 0.28.0 → 0.29.0

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

@@ -15,6 +15,7 @@ import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
 import SwipeRow from "./SwipeRow.js";
 import InviteRowChip from "./invite/InviteRowChip.js";
+import { ClickModifiers, isSelectionClick } from "../../mail/rangeSelection.js";
 
 /** A conversation row of the list. `mailboxUid` is set only by a view that merges several mailboxes ("All Mailboxes"), whose rows are
  * each from a different one; a list of one mailbox's own leaves it out and every row is that mailbox's. */
@@ -50,6 +51,13 @@ export interface ConversationListProps {
     /** The `conversationRowKey()`s currently ticked. */
     selectedConversationIds?: Set<string>;
     onToggleSelected?: (conversation: ListedConversation) => void;
+    /**
+     * A Shift, Ctrl or Cmd click on a parent row (or on its checkbox): the caller extends or toggles the selection instead of this list opening or
+     * ticking the row itself (`onOpenMessage` / `onToggleSelected` are not called for it). Absent, those clicks behave as plain ones.
+     */
+    onSelectWithModifier?: (conversation: ListedConversation, modifiers: ClickModifiers) => void;
+    /** The `conversationRowKey()`s of rows on their way out of the list (moved, deleted): drawn non-interactive and hidden from assistive technology while the page collapses them. */
+    exitingKeys?: Set<string>;
     /**
      * What swiping a parent row does on a phone: right to left archives the conversation (resolving whether it went through), left
      * to right asks where to move it. Absent, or `enabled: false` (a desktop), rows don't follow a finger.
@@ -95,6 +103,8 @@ export default function ConversationList({
     selectMode,
     selectedConversationIds,
     onToggleSelected,
+    onSelectWithModifier,
+    exitingKeys,
     swipe,
     newestFirst,
 }: ConversationListProps) {
@@ -176,8 +186,15 @@ export default function ConversationList({
                 const children = loaded && newestFirst ? [...loaded].reverse() : loaded;
                 const panelId = `conversation-messages-${conversation.mailboxUid ? `${conversation.mailboxUid}-` : ""}${conversation.conversationId}`;
                 const ticked = selectedConversationIds?.has(id) ?? false;
+                const exiting = exitingKeys?.has(id) ?? false;
                 return (
-                    <li key={id}>
+                    <li
+                        key={id}
+                        data-exiting={exiting ? "true" : undefined}
+                        aria-hidden={exiting ? "true" : undefined}
+                        inert={exiting}
+                        className={exiting ? "pointer-events-none" : undefined}
+                    >
                         <SwipeRow
                             as="div"
                             enabled={!!swipe?.enabled && !selectMode}
@@ -193,7 +210,12 @@ export default function ConversationList({
                                     <input
                                         type="checkbox"
                                         checked={ticked}
-                                        onChange={() => onToggleSelected?.(conversation)}
+                                        onChange={(event) =>
+                                            // The change of a checkbox is caused by a click (or the Space key, which makes one): its modifiers are that event's.
+                                            onSelectWithModifier && isSelectionClick(event.nativeEvent as MouseEvent)
+                                                ? onSelectWithModifier(conversation, event.nativeEvent as MouseEvent)
+                                                : onToggleSelected?.(conversation)
+                                        }
                                         aria-label={`Select conversation: ${conversation.subject || "(no subject)"}`}
                                         className="w-4 h-4 accent-primary"
                                     />
@@ -218,7 +240,11 @@ export default function ConversationList({
                                 <button
                                     type="button"
                                     data-row-open
-                                    onClick={() => onOpenMessage(conversation, conversation.latestMessageUid)}
+                                    onClick={(event) =>
+                                        onSelectWithModifier && isSelectionClick(event)
+                                            ? onSelectWithModifier(conversation, event)
+                                            : onOpenMessage(conversation, conversation.latestMessageUid)
+                                    }
                                     className={["w-full text-left pr-4 py-3", ROW_FOCUS_CLASS].join(" ")}
                                 >
                                     <UnreadLabel unread={unread} />

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

@@ -15,6 +15,7 @@ import { ENCRYPTED_SUBJECT_PLACEHOLDER, EncryptedPreview, displaySubject } from
 import { useDecryptedMessages } from "../../mail/decryptedMessages.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import PendingMessageCard from "./reading/PendingMessageCard.js";
+import { InlineComposeSlot, useInlineCompose } from "./compose/ComposeContext.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { setReadState } from "../../mail/messageReadState.js";
 import { adoptedOutgoing, belongsToThread, settleOutgoing, useOutgoingReplies } from "../../mail/outbox/outgoingReplies.js";
@@ -202,6 +203,9 @@ export default function ConversationThreadPane({
     const [error, setError] = useState<string | null>(null);
     /** The message to scroll to and focus once it has rendered, or `null` once that has happened. */
     const [pendingFocusUid, setPendingFocusUid] = useState<string | null>(null);
+    // The Reply / Reply all / Forward compose windows of this thread's messages, drawn as cards at the top of the list; the thread's messages are
+    // what makes the compose provider open a reply here rather than floating at the bottom right.
+    const inlineSessions = useInlineCompose(messages.map((message) => message.uid));
 
     // Bumped on every conversation switch - an in-flight load/attachments/mark-read response carrying an
     // older generation belongs to a superseded conversation and is dropped rather than applied.
@@ -538,6 +542,17 @@ 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">
+                {inlineSessions.map((session) => (
+                    <InlineComposeSlot
+                        key={session.id}
+                        id={session.id}
+                        onPlaced={(slot) => {
+                            // Brought into view like a message that has just been sent: the same scroll, inside the list.
+                            rowRefs.current[session.id] = slot;
+                            setPendingFocusUid(session.id);
+                        }}
+                    />
+                ))}
                 {pendingCards.map((reply) => (
                     <li
                         key={reply.uid}

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

@@ -3,6 +3,18 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
+import {
+    HiOutlineArchiveBox,
+    HiOutlineCheckCircle,
+    HiOutlineEnvelope,
+    HiOutlineEnvelopeOpen,
+    HiOutlineFlag,
+    HiOutlineFolderArrowDown,
+    HiOutlineMinusCircle,
+    HiOutlineNoSymbol,
+    HiOutlineTrash,
+    HiOutlineXMark,
+} from "react-icons/hi2";
 import { Folder, Message } from "../../../../lib/mail/mailApi.js";
 import { Label } from "../../../../lib/mail/labelsApi.js";
 import LabelMenuButton from "./labelMenu.js";
@@ -65,8 +77,43 @@ export interface MailSelectionBarProps {
     labelsDisabledReason?: string;
 }
 
-function actionClassName(destructive = false): string {
-    return `px-2 py-1 rounded-md text-sm ${destructive ? "text-danger font-semibold" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
+/** The look of the bar's icon buttons - the reading pane's own command row (`ICON_BUTTON_CLASS` in `MessageDetailPane`), without its border, which nine of them in a row don't need. */
+function iconClassName(destructive = false): string {
+    return `inline-flex items-center justify-center p-1.5 rounded-md text-sm ${destructive ? "text-danger" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
+}
+
+/** One of the bar's actions as an icon button: the action's name is its `aria-label` (so it has the accessible name its text button had) and its tooltip,
+ * unless there is a `reason` it is unavailable, or a keyboard shortcut to name (`title` and `aria-keyshortcuts` from `hint()`). */
+function BarAction({
+    icon,
+    label,
+    onClick,
+    disabled,
+    reason,
+    destructive,
+    hint,
+}: {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    reason?: string;
+    destructive?: boolean;
+    hint?: { title?: string; "aria-keyshortcuts"?: string };
+}) {
+    return (
+        <button
+            type="button"
+            aria-label={label}
+            onClick={onClick}
+            disabled={disabled}
+            className={iconClassName(destructive)}
+            {...hint}
+            title={reason ?? hint?.title ?? label}
+        >
+            {icon}
+        </button>
+    );
 }
 
 /**
@@ -148,47 +195,67 @@ export default function MailSelectionBar({
                 onMove={onMoveTo}
                 onFolderCreated={onFolderCreated}
             />
-            <div className="flex items-center gap-2 px-3 py-1.5 bg-surface-alt">
-                <span aria-live="polite" className="text-sm font-semibold text-text">
+            <div className="flex items-center gap-1 px-3 py-1.5 bg-surface-alt">
+                <span aria-live="polite" className="text-sm font-semibold text-text mr-auto">
                     {selectedCount}
                     {totals ? ` ${totals.noun}${selectedCount === 1 ? "" : "s"}` : ""} selected
                 </span>
-                <button type="button" onClick={onSelectAll} disabled={allSelected || listedCount === 0} className={actionClassName()}>
-                    Select all
-                </button>
-                <button type="button" onClick={onClearSelection} disabled={selectedCount === 0} className={actionClassName()}>
-                    Clear
-                </button>
-                <button type="button" onClick={onCancel} className={`${actionClassName()} ml-auto`}>
-                    Cancel
-                </button>
+                <BarAction
+                    icon={<HiOutlineCheckCircle size={16} aria-hidden="true" />}
+                    label="Select all"
+                    onClick={onSelectAll}
+                    disabled={allSelected || listedCount === 0}
+                />
+                <BarAction icon={<HiOutlineMinusCircle size={16} aria-hidden="true" />} label="Clear" onClick={onClearSelection} disabled={selectedCount === 0} />
+                <BarAction icon={<HiOutlineXMark size={16} aria-hidden="true" />} label="Cancel" onClick={onCancel} />
             </div>
+            {/* Icon-only, so all nine fit one row of the 24rem list column; wraps if the column is ever narrower. */}
             <div className="flex flex-wrap items-center gap-0.5 px-1.5 py-1">
-                <button type="button" onClick={() => onSetRead(true)} disabled={none || busy} className={actionClassName()} {...hint("Mark read", SHORTCUTS.mail.markRead)}>
-                    Mark read
-                </button>
-                <button type="button" onClick={() => onSetRead(false)} disabled={none || busy} className={actionClassName()} {...hint("Mark unread", SHORTCUTS.mail.markUnread)}>
-                    Mark unread
-                </button>
-                <button type="button" onClick={() => onSetFlagged(true)} disabled={none || busy} className={actionClassName()} {...hint("Flag", SHORTCUTS.mail.flag)}>
-                    Flag
-                </button>
-                <button type="button" onClick={() => onSetFlagged(false)} disabled={none || busy} className={actionClassName()}>
-                    Unflag
-                </button>
-                <button
-                    type="button"
+                <BarAction
+                    icon={<HiOutlineEnvelopeOpen size={16} aria-hidden="true" />}
+                    label="Mark read"
+                    onClick={() => onSetRead(true)}
+                    disabled={none || busy}
+                    hint={hint("Mark read", SHORTCUTS.mail.markRead)}
+                />
+                <BarAction
+                    icon={<HiOutlineEnvelope size={16} aria-hidden="true" />}
+                    label="Mark unread"
+                    onClick={() => onSetRead(false)}
+                    disabled={none || busy}
+                    hint={hint("Mark unread", SHORTCUTS.mail.markUnread)}
+                />
+                <BarAction
+                    icon={<HiOutlineFlag size={16} aria-hidden="true" />}
+                    label="Flag"
+                    onClick={() => onSetFlagged(true)}
+                    disabled={none || busy}
+                    hint={hint("Flag", SHORTCUTS.mail.flag)}
+                />
+                <BarAction
+                    icon={
+                        // `hi2` has no flag-with-a-line-through glyph: the flag, struck through.
+                        <span className="relative inline-flex" aria-hidden="true">
+                            <HiOutlineFlag size={16} />
+                            <span className="absolute left-1/2 top-[-1px] h-[18px] w-[1.5px] -translate-x-1/2 rotate-45 rounded bg-current" />
+                        </span>
+                    }
+                    label="Unflag"
+                    onClick={() => onSetFlagged(false)}
+                    disabled={none || busy}
+                />
+                <BarAction
+                    icon={<HiOutlineArchiveBox size={16} aria-hidden="true" />}
+                    label="Archive"
                     onClick={onArchive}
                     disabled={none || busy || !!archiveReason}
-                    title={archiveReason}
-                    className={actionClassName()}
-                >
-                    Archive
-                </button>
+                    reason={archiveReason}
+                />
                 <LabelMenuButton
                     aria-label="Apply label"
                     label="Apply label"
-                    className="text-sm"
+                    iconOnly
+                    className={iconClassName()}
                     labels={labels}
                     mailboxUid={mailboxUid}
                     onLabelCreated={onLabelCreated}
@@ -197,7 +264,7 @@ export default function MailSelectionBar({
                     onCommit={onApplyLabels}
                     busy={busy}
                     disabled={none || busy || !!labelsDisabledReason}
-                    title={labelsDisabledReason}
+                    title={labelsDisabledReason ?? "Apply label"}
                     note={
                         selected.length === 1
                             ? "Ticked labels are applied, unticked ones removed."
@@ -207,33 +274,28 @@ export default function MailSelectionBar({
                     commit={{ label: "Apply" }}
                     clear={{ label: "Remove all labels" }}
                 />
-                <button
-                    type="button"
+                <BarAction
+                    icon={<HiOutlineFolderArrowDown size={16} aria-hidden="true" />}
+                    label="Move to"
                     onClick={() => setMovePrompt(true)}
                     disabled={none || busy || !!moveDisabledReason}
-                    title={moveDisabledReason}
-                    className={actionClassName()}
-                >
-                    Move to
-                </button>
-                <button
-                    type="button"
+                    reason={moveDisabledReason}
+                />
+                <BarAction
+                    icon={<HiOutlineNoSymbol size={16} aria-hidden="true" />}
+                    label="Report junk"
                     onClick={onReportJunk}
                     disabled={none || busy || !!junkReason}
-                    title={junkReason}
-                    className={actionClassName()}
-                >
-                    Report junk
-                </button>
-                <button
-                    type="button"
+                    reason={junkReason}
+                />
+                <BarAction
+                    icon={<HiOutlineTrash size={16} aria-hidden="true" />}
+                    label={deleteLabel}
                     onClick={onDelete}
                     disabled={none || busy}
-                    className={actionClassName(deletesPermanently)}
-                    {...hint(deleteLabel, SHORTCUTS.mail.delete)}
-                >
-                    {deleteLabel}
-                </button>
+                    destructive={deletesPermanently}
+                    hint={hint(deleteLabel, SHORTCUTS.mail.delete)}
+                />
             </div>
         </div>
     );

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

@@ -830,6 +830,7 @@ function MessageDetailContent({
                     mailboxUid: message.mailboxUid,
                     subject: forwardSubject(message.subject),
                     signatureContext: "reply_forward",
+                    inlineFor: message.uid,
                     encrypt,
                     threading,
                     pending: late,
@@ -843,6 +844,8 @@ function MessageDetailContent({
                     subject: replySubject(message.subject),
                     signatureContext: "reply_forward",
                     suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
+                    // A card above this message in the reading pane when it is in one, else the floating window (see `OpenComposeInput.inlineFor`).
+                    inlineFor: message.uid,
                     encrypt,
                     threading,
                     pending: late,

package/apps/shared/components/mail/compose/ComposeContext.tsx

@@ -2,7 +2,8 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { PropsWithChildren, createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { PropsWithChildren, createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { DraftThreading } from "../../../../../lib/mail/mailApi.js";
 import { ApiClient } from "../../../../../lib/util/api.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
@@ -110,6 +111,8 @@ export interface ComposeSession {
     late?: ComposeLateInput;
     /** See `OpenComposeInput.resume`. */
     resume?: ResumeCompose;
+    /** See `OpenComposeInput.inlineFor`. Absent once the window was opened without a host for it. */
+    inlineFor?: string;
     minimized: boolean;
 }
 
@@ -166,6 +169,13 @@ export interface OpenComposeInput {
     /** Re-opens a message that was already composed - a failed send's "Open draft": the window continues that server draft, with every field
      * exactly as it was typed, instead of starting a new one. */
     resume?: ResumeCompose;
+    /**
+     * The uid of the message this reply or forward answers. When the reading pane is showing a thread that holds that message (see
+     * `useInlineCompose()`), the compose window opens as a card above the thread instead of floating at the bottom right; the
+     * user can still pop it out to the floating stack, and it goes there by itself when the thread is left. Ignored - the window
+     * floats - when no pane is showing that message. Absent for a new message, which always floats.
+     */
+    inlineFor?: string;
 }
 
 export interface ComposeContextValue {
@@ -183,6 +193,57 @@ export interface ComposeContextValue {
 
 const ComposeContext = createContext<ComposeContextValue>({ openCompose: () => undefined });
 
+/** The part of a session a reading pane needs to draw its slot. */
+export interface InlineComposeSession {
+    id: string;
+    /** The uid of the message the window answers. */
+    inlineFor: string;
+}
+
+interface InlineComposeValue {
+    /** The sessions currently drawn inline, in the order they were opened. */
+    sessions: InlineComposeSession[];
+    /** Announces the messages a reading pane holds; the returned function withdraws it. */
+    register: (uids: string[]) => () => void;
+    /** The element a session's window is rendered into, for a slot to hold. */
+    containerFor: (id: string) => HTMLElement | undefined;
+}
+
+const InlineComposeContext = createContext<InlineComposeValue>({ sessions: [], register: () => () => undefined, containerFor: () => undefined });
+
+/**
+ * For a reading pane: announces that it is showing the messages `uids`, so a Reply or Forward of one of them opens its compose
+ * window as a card in that pane (drawn with `InlineComposeSlot`) rather than a floating window, and returns the sessions to
+ * draw a slot for. When the pane stops holding a message - it unmounts, or moves to another conversation - the window answering
+ * it moves out to the floating stack, with everything typed into it.
+ */
+export function useInlineCompose(uids: string[]): InlineComposeSession[] {
+    const { sessions, register } = useContext(InlineComposeContext);
+    const key = uids.join(",");
+    useEffect(() => register(uids), [key, register]);
+    return useMemo(() => sessions.filter((session) => uids.includes(session.inlineFor)), [sessions, key]);
+}
+
+/**
+ * The list item a reading pane holds an inline compose window in. The window itself is owned (and kept alive) by
+ * `ComposeProvider`; this only moves the element it renders into into place. `onPlaced` is called once, as it arrives, for the pane
+ * to bring it into view.
+ */
+export function InlineComposeSlot({ id, onPlaced }: { id: string; onPlaced?: (slot: HTMLLIElement) => void }) {
+    const { containerFor } = useContext(InlineComposeContext);
+    const slotRef = useRef<HTMLLIElement>(null);
+    useLayoutEffect(() => {
+        const slot = slotRef.current!;
+        // Nothing to hold outside a `ComposeProvider`.
+        const container = containerFor(id);
+        if (container) {
+            slot.appendChild(container);
+        }
+        onPlaced?.(slot);
+    }, [id]);
+    return <li ref={slotRef} data-inline-compose={id} />;
+}
+
 /** Opens the floating Compose window from anywhere inside `AppShell` (any of the four webmail apps). */
 export function useCompose(): ComposeContextValue {
     return useContext(ComposeContext);
@@ -201,9 +262,67 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
     const isMobile = useIsMobile();
     const { Component: ComposeWindow, failed, retry: retryLoad } = useComposeWindowComponent(sessions.length > 0);
 
-    // The top edge of the compose windows, published as `--rr-compose-top` so the pop-up stack (`NotificationCenter`) can keep clear of them.
+    // Every session's window is rendered (through a portal) into an element of its own that is *moved* between the floating stack
+    // and a reading pane's slot, never re-created: a window that changed parents in the React tree would remount and lose what was typed.
+    const containersRef = useRef(new Map<string, HTMLElement>());
+    // The messages the reading panes currently showing a thread hold, one entry per pane (a ref too, for `openCompose()` to read at the click).
+    const hostsRef = useRef(new Map<symbol, string[]>());
+    const [hostedUids, setHostedUids] = useState<string[]>([]);
+    // The inline sessions that were popped out or whose pane went away: floating for good, even if a pane shows their message again.
+    const [parked, setParked] = useState<Set<string>>(new Set());
+    const register = useCallback((uids: string[]) => {
+        const token = Symbol();
+        hostsRef.current.set(token, uids);
+        setHostedUids([...hostsRef.current.values()].flat());
+        return () => {
+            hostsRef.current.delete(token);
+            setHostedUids([...hostsRef.current.values()].flat());
+        };
+    }, []);
+    const hosted = new Set(hostedUids);
+    const isInline = (session: ComposeSession) => !!session.inlineFor && !parked.has(session.id) && hosted.has(session.inlineFor);
+    const inlineKey = sessions.filter(isInline).map((session) => `${session.id}:${session.inlineFor}`).join("|");
+    const inlineSessions = useMemo<InlineComposeSession[]>(
+        () => sessions.filter(isInline).map((session) => ({ id: session.id, inlineFor: session.inlineFor! })),
+        [inlineKey],
+    );
+    const inlineValue = useMemo<InlineComposeValue>(
+        () => ({ sessions: inlineSessions, register, containerFor: (id) => containersRef.current.get(id) }),
+        [inlineSessions, register],
+    );
+    const floatingSessions = sessions.filter((session) => !inlineSessions.some((inline) => inline.id === session.id));
+
+    // A session whose message is no longer in any pane (the reader went to another conversation) is parked in the stack.
+    useEffect(() => {
+        const orphans = sessions.filter((session) => session.inlineFor && !parked.has(session.id) && !hosted.has(session.inlineFor));
+        if (orphans.length > 0) {
+            setParked((prev) => new Set([...prev, ...orphans.map((session) => session.id)]));
+        }
+    }, [sessions, hostedUids, parked]);
+
+    // The elements of closed sessions go away with them.
+    useEffect(() => {
+        const open = new Set(sessions.map((session) => session.id));
+        for (const [id, element] of containersRef.current) {
+            if (!open.has(id)) {
+                element.remove();
+                containersRef.current.delete(id);
+            }
+        }
+    }, [sessions]);
+    useEffect(
+        () => () => {
+            for (const element of containersRef.current.values()) {
+                element.remove();
+            }
+            containersRef.current.clear();
+        },
+        [],
+    );
+
+    // The top edge of the floating compose windows, published as `--rr-compose-top` so the pop-up stack (`NotificationCenter`) can keep clear of them.
     const windowsRef = useRef<HTMLDivElement>(null);
-    const hasSessions = sessions.length > 0;
+    const hasSessions = floatingSessions.length > 0;
     useEffect(() => {
         const element = windowsRef.current;
         if (!element) {
@@ -233,9 +352,15 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
         threading,
         pending,
         resume,
+        inlineFor,
     }: OpenComposeInput) {
         const id = crypto.randomUUID();
         markComposePhase(id, "click");
+        // The window's own element, attached to the page from the start (it is moved to its slot or the stack as soon as that is drawn).
+        const container = document.createElement("div");
+        container.className = "contents";
+        document.body.appendChild(container);
+        containersRef.current.set(id, container);
         setSessions((prev) => [
             ...prev,
             {
@@ -251,6 +376,8 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
                 suppressSigning,
                 quotePending: !!pending,
                 resume,
+                // Only a pane that is showing the message can hold the window.
+                inlineFor: inlineFor && [...hostsRef.current.values()].some((uids) => uids.includes(inlineFor)) ? inlineFor : undefined,
                 minimized: false,
             },
         ]);
@@ -268,6 +395,18 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
 
     function closeCompose(id: string) {
         setSessions((prev) => prev.filter((s) => s.id !== id));
+        setParked((prev) => {
+            if (!prev.has(id)) {
+                return prev;
+            }
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+        });
+    }
+
+    function popOut(id: string) {
+        setParked((prev) => new Set(prev).add(id));
     }
 
     function toggleMinimize(id: string) {
@@ -278,46 +417,65 @@ export default function ComposeProvider({ children, userUid, trusted }: PropsWit
     // Code with no React context - a failed send's "Open draft" pop-up - opens windows through this.
     useEffect(() => registerComposeOpener((input) => value.openCompose(input)), [value]);
 
-    // On mobile, a non-minimized `ComposeWindow` renders full-screen (see that component's own doc
+    // On mobile, a non-minimized floating `ComposeWindow` renders full-screen (see that component's own doc
     // comment) — Gmail-style stacking of several full-screen overlays at once makes no sense there, so
     // at most one non-minimized session is ever shown: the most recently opened one. Minimized
     // sessions are small chips regardless of device, so every one of those still shows — an earlier
     // session becomes visible again (as its own chip, or full-screen if it's the new most-recent
     // non-minimized one) once whatever's currently "on top" is closed or minimized. The others stay
-    // mounted, just hidden: unmounting them would throw away everything typed into them.
-    const lastNonMinimizedId = isMobile ? [...sessions].reverse().find((s) => !s.minimized)?.id : undefined;
+    // mounted, just hidden: unmounting them would throw away everything typed into them. An inline card
+    // is part of the reading pane and is never hidden.
+    const lastNonMinimizedId = isMobile ? [...floatingSessions].reverse().find((s) => !s.minimized)?.id : undefined;
+
+    // Puts every floating session's element in the stack (an inline one is put in its slot by `InlineComposeSlot`), and hides those
+    // the mobile rule above hides.
+    useLayoutEffect(() => {
+        for (const session of sessions) {
+            const element = containersRef.current.get(session.id)!;
+            const floating = floatingSessions.some((s) => s.id === session.id);
+            const hidden = floating && isMobile && !session.minimized && session.id !== lastNonMinimizedId;
+            element.hidden = hidden;
+            element.className = hidden ? "hidden" : "contents";
+            if (floating && element.parentElement !== windowsRef.current) {
+                windowsRef.current!.appendChild(element);
+            }
+        }
+    });
 
     return (
         <ComposeContext.Provider value={value}>
-            {children}
-            {sessions.length > 0 && (
-                <div ref={windowsRef} className="fixed bottom-0 right-6 flex items-end gap-3 z-50">
-                    {sessions.map((session) => {
-                        const hidden = isMobile && !session.minimized && session.id !== lastNonMinimizedId;
-                        return (
-                            <div key={session.id} hidden={hidden} className={hidden ? "hidden" : "contents"}>
-                                {ComposeWindow ? (
-                                    <ComposeWindow
-                                        session={session}
-                                        userUid={userUid}
-                                        trusted={trusted}
-                                        onClose={() => closeCompose(session.id)}
-                                        onToggleMinimize={() => toggleMinimize(session.id)}
-                                    />
-                                ) : (
-                                    <ComposeWindowPlaceholder
-                                        session={session}
-                                        failed={failed}
-                                        onRetry={retryLoad}
-                                        onClose={() => closeCompose(session.id)}
-                                        onToggleMinimize={() => toggleMinimize(session.id)}
-                                    />
-                                )}
-                            </div>
-                        );
-                    })}
-                </div>
-            )}
+            <InlineComposeContext.Provider value={inlineValue}>
+                {children}
+                {sessions.map((session) => {
+                    const inline = inlineSessions.some((s) => s.id === session.id);
+                    return createPortal(
+                        ComposeWindow ? (
+                            <ComposeWindow
+                                session={session}
+                                userUid={userUid}
+                                trusted={trusted}
+                                inline={inline}
+                                onPopOut={() => popOut(session.id)}
+                                onClose={() => closeCompose(session.id)}
+                                onToggleMinimize={() => toggleMinimize(session.id)}
+                            />
+                        ) : (
+                            <ComposeWindowPlaceholder
+                                session={session}
+                                failed={failed}
+                                inline={inline}
+                                onPopOut={() => popOut(session.id)}
+                                onRetry={retryLoad}
+                                onClose={() => closeCompose(session.id)}
+                                onToggleMinimize={() => toggleMinimize(session.id)}
+                            />
+                        ),
+                        containersRef.current.get(session.id)!,
+                        session.id,
+                    );
+                })}
+                {hasSessions && <div ref={windowsRef} className="fixed bottom-0 right-6 flex items-end gap-3 z-50" />}
+            </InlineComposeContext.Provider>
         </ComposeContext.Provider>
     );
 }