@rapidmx/web-client 0.27.0 → 0.29.0

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>
     );
 }

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

@@ -7,6 +7,7 @@ import type { Editor } from "@tiptap/react";
 import {
     HiOutlineArrowsPointingIn,
     HiOutlineArrowsPointingOut,
+    HiOutlineArrowTopRightOnSquare,
     HiOutlineChevronDown,
     HiOutlineIdentification,
     HiOutlineLockClosed,
@@ -29,6 +30,7 @@ import {
     getMessage,
     listFolders,
     listMailboxes,
+    deleteAttachment,
     uploadAttachment,
 } from "../../../../../lib/mail/mailApi.js";
 import { listMailSignatures } from "../../../../../lib/mail/mailSignaturesApi.js";
@@ -65,6 +67,11 @@ export interface ComposeWindowProps {
     session: ComposeSession;
     onClose: () => void;
     onToggleMinimize: () => void;
+    /** The window is a card in the reading pane, above the message being replied to (see `ComposeSession.inlineFor`), not a floating
+     * window: full width, a fixed height, never minimized, resized or expanded, and "Pop out" in place of those. */
+    inline?: boolean;
+    /** Moves an `inline` window out to the floating stack at the bottom right. */
+    onPopOut?: () => void;
     /** The signed-in user - identifies their own ("primary") mailbox, the default From when the session
      * doesn't name a mailbox. */
     userUid?: string;
@@ -199,13 +206,17 @@ export default function ComposeWindow({
     session,
     onClose,
     onToggleMinimize,
+    inline,
+    onPopOut,
     userUid,
     trusted,
     autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS,
     autosaveMaxWaitMs = DEFAULT_AUTOSAVE_MAX_WAIT_MS,
     cryptoRetryDelaysMs = DEFAULT_CRYPTO_RETRY_DELAYS_MS,
 }: ComposeWindowProps) {
-    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, minimized, quotePending, late, resume } = session;
+    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, quotePending, late, resume } = session;
+    // An inline card has no minimized state: the session's flag is for the floating window it may later be popped out to.
+    const minimized = session.minimized && !inline;
     // What a reply worked out after this window opened (see `OpenComposeInput.pending`): better recipients, applied below
     // only to fields still exactly as they opened - so these, not `initialTo`/`initialCc`, are what "untouched" is measured against.
     const baselineTo = late?.to ?? initialTo;
@@ -254,6 +265,8 @@ export default function ComposeWindow({
     const [html, setHtml] = useState(resume?.html ?? "");
     const [contentReady, setContentReady] = useState(!!resume);
     const [attachments, setAttachments] = useState<Attachment[]>(resume?.attachments ?? []);
+    // The attachment being removed from the draft, whose chip is held until the server has answered.
+    const [removingAttachmentUid, setRemovingAttachmentUid] = useState<string | null>(null);
     // The sender's own contact card is on the message (or on its way): "Attach my contact card" then has nothing more to do.
     const [ownCardAttached, setOwnCardAttached] = useState(false);
     const [attachError, setAttachError] = useState<string | null>(null);
@@ -726,7 +739,8 @@ export default function ComposeWindow({
         }
         uploadStarted();
         try {
-            const attachment = await uploadAttachment(draft.uid, file);
+            // An inline part with a Content-ID of its own: without one the server has nothing to point the message's `cid:` reference at.
+            const attachment = await uploadAttachment(draft.uid, file, { inline: true });
             setHasUploads(true);
             void refreshDraftVersion(draft.uid);
             return attachmentContentUrl(attachment.uid);
@@ -797,6 +811,24 @@ export default function ComposeWindow({
         return allAttached;
     }
 
+    /** Removes one attachment from the draft, saying why when the server would not. A removed vCard can be attached again. */
+    async function handleRemoveAttachment(attachment: Attachment) {
+        setAttachError(null);
+        setRemovingAttachmentUid(attachment.uid);
+        try {
+            await deleteAttachment(attachment.uid, attachment.version, client);
+            setAttachments((prev) => prev.filter((other) => other.uid !== attachment.uid));
+            if (attachment.mimeType === "text/vcard") {
+                setOwnCardAttached(false);
+            }
+            void refreshDraftVersion(draft!.uid);
+        } catch (err) {
+            setAttachError(err instanceof ApiRequestError ? err.message : "Could not remove attachment.");
+        } finally {
+            setRemovingAttachmentUid(null);
+        }
+    }
+
     /** Attaches the sender's own vCard ("Attach my contact card"), once: the button is off from the click on, and back on if the upload failed. */
     async function handleAttachOwnCard() {
         setOwnCardAttached(true);
@@ -1455,19 +1487,21 @@ export default function ComposeWindow({
         <>
         <div
             ref={windowRef}
-            role="dialog"
+            role={inline ? "region" : "dialog"}
             data-shortcut-scope="compose"
             aria-labelledby={titleId}
             onDragEnter={handleDragEnter}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
-            style={!isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined}
+            style={!inline && !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined}
             className={[
                 "shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
                 // `fixed` and `relative` may not both be on the element: Tailwind emits `.relative` after `.fixed`, so it wins and the
                 // sheet sat in the flow of the little fixed container the windows are stacked in instead of covering the screen.
-                isMobile
+                inline
+                    ? "relative w-full h-[520px] rounded-md"
+                    : isMobile
                     ? "fixed inset-0 w-full h-full rounded-none border-0"
                     : ["relative border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
             ].join(" ")}
@@ -1481,7 +1515,7 @@ export default function ComposeWindow({
                     <span className="text-sm">Pictures go into the message where the cursor is</span>
                 </div>
             )}
-            {!isMobile && (
+            {!inline && !isMobile && (
                 <>
                     <div
                         onPointerDown={handleResizeStart("top")}
@@ -1503,15 +1537,19 @@ export default function ComposeWindow({
             )}
 
             <div
-                className="h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer"
-                onClick={onToggleMinimize}
+                className={["h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white", inline ? "" : "cursor-pointer"].join(" ")}
+                onClick={inline ? undefined : onToggleMinimize}
             >
                 <span id={titleId} className="text-sm font-medium truncate">
                     {title}
                 </span>
                 <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
-                    <HeaderButton label="Minimize" onClick={onToggleMinimize} icon={HiOutlineMinus} />
-                    {!isMobile && (
+                    {inline ? (
+                        <HeaderButton label="Pop out" onClick={() => onPopOut?.()} icon={HiOutlineArrowTopRightOnSquare} />
+                    ) : (
+                        <HeaderButton label="Minimize" onClick={onToggleMinimize} icon={HiOutlineMinus} />
+                    )}
+                    {!inline && !isMobile && (
                         <HeaderButton
                             label={expanded ? "Collapse" : "Expand"}
                             onClick={toggleExpanded}
@@ -1703,8 +1741,21 @@ export default function ComposeWindow({
                 {attachments.length > 0 && (
                     <ul className="flex flex-wrap gap-2 px-3 pb-2">
                         {attachments.map((attachment) => (
-                            <li key={attachment.uid} className="text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted">
+                            <li
+                                key={attachment.uid}
+                                className="inline-flex items-center gap-1 text-xs font-medium py-1 pl-2.5 pr-1 rounded-pill bg-surface-alt text-text-muted"
+                            >
                                 {attachment.filename}
+                                <button
+                                    type="button"
+                                    aria-label={`Remove ${attachment.filename}`}
+                                    title={`Remove ${attachment.filename}`}
+                                    disabled={removingAttachmentUid === attachment.uid}
+                                    onClick={() => void handleRemoveAttachment(attachment)}
+                                    className="inline-flex items-center justify-center rounded-pill p-0.5 hover:bg-border hover:text-text disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-primary"
+                                >
+                                    <HiOutlineXMark size={12} aria-hidden="true" />
+                                </button>
                             </li>
                         ))}
                     </ul>

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

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect } from "react";
-import { HiOutlineMinus, HiOutlineXMark } from "react-icons/hi2";
+import { HiOutlineArrowTopRightOnSquare, HiOutlineMinus, HiOutlineXMark } from "react-icons/hi2";
 import Skeleton from "../../../../../lib/components/feedback/Skeleton.js";
 import Alert from "../../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
@@ -18,6 +18,10 @@ export interface ComposeWindowPlaceholderProps {
     onRetry: () => void;
     onClose: () => void;
     onToggleMinimize: () => void;
+    /** The placeholder stands in for an inline card in the reading pane (see `ComposeWindowProps.inline`). */
+    inline?: boolean;
+    /** Moves an `inline` placeholder out to the floating stack. */
+    onPopOut?: () => void;
 }
 
 /**
@@ -28,14 +32,14 @@ export interface ComposeWindowPlaceholderProps {
  *
  * Nothing here can be typed into yet, and there is no draft to save or discard, so Close just closes.
  */
-export default function ComposeWindowPlaceholder({ session, failed, onRetry, onClose, onToggleMinimize }: ComposeWindowPlaceholderProps) {
+export default function ComposeWindowPlaceholder({ session, failed, onRetry, onClose, onToggleMinimize, inline, onPopOut }: ComposeWindowPlaceholderProps) {
     const isMobile = useIsMobile();
     const title = session.initialSubject?.trim() || "New Message";
     const titleId = `compose-title-${session.id}`;
 
     useEffect(() => markComposePhase(session.id, "shell"), [session.id]);
 
-    if (session.minimized) {
+    if (session.minimized && !inline) {
         return (
             <div role="dialog" aria-label={title} className="w-64 shrink-0 bg-surface border border-border border-b-0 rounded-t-md shadow-modal">
                 <div className="h-10 flex items-center justify-between gap-2 px-3 rounded-t-md bg-primary-darker text-white cursor-pointer" onClick={onToggleMinimize}>
@@ -47,27 +51,34 @@ export default function ComposeWindowPlaceholder({ session, failed, onRetry, onC
 
     return (
         <div
-            role="dialog"
+            role={inline ? "region" : "dialog"}
             aria-labelledby={titleId}
             aria-busy={!failed}
             className={[
                 "relative shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
-                isMobile ? "fixed inset-0 w-full h-full rounded-none border-0" : "border-b-0 rounded-t-md w-[480px] h-[520px]",
+                inline
+                    ? "w-full h-[520px] rounded-md"
+                    : isMobile
+                      ? "fixed inset-0 w-full h-full rounded-none border-0"
+                      : "border-b-0 rounded-t-md w-[480px] h-[520px]",
             ].join(" ")}
         >
-            <div className="h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer" onClick={onToggleMinimize}>
+            <div
+                className={["h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white", inline ? "" : "cursor-pointer"].join(" ")}
+                onClick={inline ? undefined : onToggleMinimize}
+            >
                 <span id={titleId} className="text-sm font-medium truncate">
                     {title}
                 </span>
                 <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
                     <button
                         type="button"
-                        aria-label="Minimize"
-                        title="Minimize"
-                        onClick={onToggleMinimize}
+                        aria-label={inline ? "Pop out" : "Minimize"}
+                        title={inline ? "Pop out" : "Minimize"}
+                        onClick={inline ? onPopOut : onToggleMinimize}
                         className="w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white"
                     >
-                        <HiOutlineMinus size={14} />
+                        {inline ? <HiOutlineArrowTopRightOnSquare size={14} /> : <HiOutlineMinus size={14} />}
                     </button>
                     <button
                         type="button"

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

@@ -96,7 +96,8 @@ export default function RichTextEditor({
             TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
             TextAlign.configure({ types: ["heading", "paragraph"] }),
             Highlight,
-            Image,
+            // A quoted original's pictures arrive as `data:` URIs; `assembleDraft()` attaches them to the draft when it is saved.
+            Image.configure({ allowBase64: true }),
             TableKit.configure({ table: { resizable: true } }),
             Placeholder.configure({ placeholder: "Write your message…" }),
         ],

package/apps/shared/components/mail/compose/quotedBody.ts

@@ -3,10 +3,12 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { apiUrl } from "../../../../../lib/util/api.js";
-import { Message, Recipient, getMessageRawContent } from "../../../../../lib/mail/mailApi.js";
+import { Message, Recipient, attachmentContentUrl, getMessageRawContent, listAttachments } from "../../../../../lib/mail/mailApi.js";
 import type { QuotedBody } from "../../../../../lib/mail/compose/composeQuoting.js";
+import { MAX_QUOTED_IMAGE_BYTES, QuotedImageReference, embedQuotedImages } from "../../../../../lib/mail/compose/quotedImages.js";
+import { EMBEDDED_IMAGE_TYPES, findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
 import type { MessageSecurityResult } from "../../../../../lib/crypto/messageSecurity.js";
-import { decodeHeaderText, extractDisplayBody, parseMimeEntity } from "../../../../../lib/crypto/mime.js";
+import { MimeAttachment, decodeHeaderText, extractDisplayBody, parseMimeEntity } from "../../../../../lib/crypto/mime.js";
 import { parseRecipientList } from "./recipients.js";
 
 /** What a Reply/Reply All/Forward needs from the message being answered, beyond what its `Message` record holds. */
@@ -92,6 +94,38 @@ function headerRecipients(value: string | undefined, type: "to" | "cc"): Recipie
         .map((recipient) => ({ address: recipient.address, ...(recipient.displayName ? { displayName: recipient.displayName } : {}), type }));
 }
 
+/** The `data:` URI of the picture a quoted image of `message` stands for - one of the message's own attachments, fetched with the session -
+ * or `undefined` when there is none, it is not a raster image, it is too large or it could not be had. Never rejects. */
+function serverImageResolver(message: Message): (reference: QuotedImageReference) => Promise<string | undefined> {
+    let attachments: Promise<Awaited<ReturnType<typeof listAttachments>>> | undefined;
+    return async (reference) => {
+        try {
+            attachments ??= listAttachments(message.folderUid, message.uid);
+            const attachment = findInlineAttachment(await attachments, reference);
+            const type = attachment?.mimeType.split(";")[0].trim().toLowerCase();
+            if (!attachment || !type || !EMBEDDED_IMAGE_TYPES.test(type) || attachment.sizeBytes > MAX_QUOTED_IMAGE_BYTES) {
+                return undefined;
+            }
+            const res = await fetch(attachmentContentUrl(attachment.uid), { credentials: "include" });
+            const bytes = res.ok ? new Uint8Array(await res.arrayBuffer()) : undefined;
+            return bytes && bytes.length <= MAX_QUOTED_IMAGE_BYTES ? toDataUri(type, bytes) : undefined;
+        } catch {
+            return undefined;
+        }
+    };
+}
+
+/** As `serverImageResolver()`, for the parts of a message this browser decrypted or verified (`MessageSecurityResult.attachments`). */
+function partImageResolver(parts: MimeAttachment[]): (reference: QuotedImageReference) => Promise<string | undefined> {
+    const candidates = parts.map((part, index) => ({ uid: String(index), filename: part.filename ?? "", mimeType: part.contentType, contentId: part.contentId }));
+    return async (reference) => {
+        const found = findInlineAttachment(candidates, reference);
+        const part = found ? parts[Number(found.uid)] : undefined;
+        const bytes = part && EMBEDDED_IMAGE_TYPES.test(part.contentType) ? part.decode() : undefined;
+        return part && bytes && bytes.length <= MAX_QUOTED_IMAGE_BYTES ? toDataUri(part.contentType, bytes) : undefined;
+    };
+}
+
 /**
  * Loads what a Reply/Reply All/Forward needs from `message`: the full body to quote - the same content
  * `MessageDetailPane` shows, never the truncated `bodyPreview` unless nothing else can be had - and, with
@@ -113,6 +147,9 @@ function headerRecipients(value: string | undefined, type: "to" | "cc"): Recipie
  * `message.recipients` alone would reduce every Reply All to a plain reply. Unprotected headers are the sender's own
  * claim, exactly as in every other mail client's Reply All.
  *
+ * The original's embedded images (`cid:`) are replaced by `data:` URIs of the pictures themselves - fetched from the message's
+ * attachments, or taken from the decrypted entity - so the quote shows them and the new message can carry them (see `quotedImages.ts`).
+ *
  * The quote builders sanitize whatever HTML this returns (`sanitizeQuotedHtml()`), whichever source it came from.
  */
 export async function loadOriginalMessage(
@@ -157,5 +194,11 @@ export async function loadOriginalMessage(
         // Whatever was loaded before the failure stands: the quote falls back to the preview, Reply All to the
         // message's own recipients.
     }
+    if (result.body.html !== undefined) {
+        const resolver = recovered ? partImageResolver(security?.attachments ?? []) : serverImageResolver(message);
+        const html = result.body.html;
+        // Bounded like the body's own request: a picture that will not arrive is left out of the quote, not waited for.
+        result.body = { html: await withTimeout(embedQuotedImages(html, resolver), QUOTE_FETCH_TIMEOUT_MS).catch(() => html) };
+    }
     return result;
 }