@rapidmx/web-client 0.28.0 → 0.29.0

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

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

@@ -219,6 +219,8 @@ export interface LabelMenuButtonProps extends Omit<LabelSectionsOptions, "state"
     disabled?: boolean;
     title?: string;
     className?: string;
+    /** The trigger is just its icon (`className` then styles all of it) - `aria-label` and `title` name it. */
+    iconOnly?: boolean;
     /** With `onLabelCreated`, adds a "New label" row that opens this component's own dialog. */
     mailboxUid?: string;
     onLabelCreated?: (label: Label) => void;
@@ -240,6 +242,7 @@ export default function LabelMenuButton({
     disabled,
     title,
     className,
+    iconOnly,
     mailboxUid,
     onLabelCreated,
 }: LabelMenuButtonProps) {
@@ -255,6 +258,7 @@ export default function LabelMenuButton({
             disabled={disabled}
             title={title}
             className={className}
+            iconOnly={iconOnly}
             onOpenChange={setOpen}
             sections={labelSections({
                 labels,

package/apps/shared/components/mail/layout/MailShell.tsx

@@ -42,6 +42,13 @@ import { useShortcut } from "../../../keyboard/useShortcut.js";
 
 export type MailShellProps = Omit<AppShellProps, "active">;
 
+/**
+ * From `md` up the sidebar and the content beside it are each exactly as tall as the window under the title bar, so each scrolls by itself (the frame's
+ * own height is open-ended - `min-h-screen` - so a column's `overflow` would otherwise never apply and the whole page would scroll instead). On a phone
+ * the page scrolls as a whole, as it always did. The same height the Contacts page uses; `--rr-header-h` is the title bar's (or branding header's) height.
+ */
+const DESKTOP_PANE_HEIGHT = "md:h-[calc(100dvh_-_var(--rr-header-h,4rem))]";
+
 /** One mailbox's own mail folders (already filtered to `MAIL_FOLDER_TYPES` and unsorted) - one entry per
  * mailbox in `mailboxes`, fetched in parallel so every accessible mailbox's folder tree can render
  * simultaneously (see `MailShell`'s own doc comment on why this replaced the old single-mailbox `folders`
@@ -485,11 +492,11 @@ export default function MailShell({
         inner = (
             <>
                 <MailShortcuts mailboxUid={defaultMailboxUid} />
-                <aside className="hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col">{sidebarContent("desktop")}</aside>
+                <aside className={["hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", DESKTOP_PANE_HEIGHT].join(" ")}>{sidebarContent("desktop")}</aside>
                 <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} title="Folders" fullScreen>
                     <div className="flex flex-col">{sidebarContent("mobile")}</div>
                 </Drawer>
-                <main className="flex-1 min-w-0 overflow-y-auto">
+                <main className={["flex-1 min-w-0 overflow-y-auto", DESKTOP_PANE_HEIGHT].join(" ")}>
                     <div className="md:hidden flex items-center gap-2 p-3">
                         <button
                             type="button"

package/apps/shared/components/mail/reading/MessageBody.tsx

@@ -156,7 +156,7 @@ function HtmlBody({
     const theme = useResolvedTheme();
     const surface = useThemeSurface(theme);
     // Keyed on what the resolver reads rather than on the arrays, which a caller may rebuild on every render.
-    const inlineKey = [...(attachments ?? []).map((a) => `${a.uid}:${(a as { contentId?: string }).contentId ?? ""}`), inlineParts ? `parts:${inlineParts.length}` : ""].join("|");
+    const inlineKey = [...(attachments ?? []).map((a) => `${a.uid}:${(a as { contentId?: string }).contentId ?? ""}:${a.filename}:${a.mimeType}`), inlineParts ? `parts:${inlineParts.length}` : ""].join("|");
     const resolveCid = useMemo(() => makeCidResolver(attachments, inlineParts), [inlineKey]);
     const prepared = useMemo(() => prepareBodyHtml(html, { resolveCid }), [html, resolveCid]);
     const mode: FrameMode = prepared.declaresDarkSupport ? "native" : original ? "original" : "adapt";

package/apps/shared/components/mail/reading/bodyContent.ts

@@ -5,6 +5,7 @@
 import { ApiRequestError, apiUrl } from "../../../../../lib/util/api.js";
 import { Attachment, attachmentContentUrl } from "../../../../../lib/mail/mailApi.js";
 import type { MimeAttachment } from "../../../../../lib/crypto/mime.js";
+import { bytesToBase64, findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
 
 /** What a message's body is: server-sanitized HTML, or plain text (a message with no HTML part, or the server's plain-text fallback). */
 export type BodyContent = { kind: "html"; html: string } | { kind: "text"; text: string };
@@ -61,14 +62,6 @@ export async function fetchBodyContent(uid: string, version: number, signal?: Ab
 export const MAX_INLINE_IMAGE_BYTES = 5_000_000;
 const INLINE_IMAGE_TYPES = /^image\/(?:png|jpe?g|gif|webp|avif|bmp|svg\+xml)$/;
 
-function base64(bytes: Uint8Array): string {
-    let binary = "";
-    for (let i = 0; i < bytes.length; i += 0x8000) {
-        binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
-    }
-    return btoa(binary);
-}
-
 /** A server attachment record as it may really arrive: the model carries the part's `Content-ID`, though the client type doesn't list it. */
 export type InlineCapable = Attachment & { contentId?: string };
 
@@ -86,15 +79,24 @@ export function attachmentSource(): string {
  * How an inline `cid:` image is resolved to something the frame may load: for a message shown from the server, the attachment whose
  * `Content-ID` matches (its URL on this server); for a decrypted or verified one, the part inside the signed/encrypted entity, embedded
  * as a `data:` URI (raster and SVG images up to `MAX_INLINE_IMAGE_BYTES`). Anything else has no source, so the image is not shown.
+ *
+ * The `Content-ID` is matched without regard to angle brackets, percent-encoding or case. An image that names no part (`contentId`
+ * undefined: the server left it with only its `alt`, as it does for a picture a sender attached without a `Content-ID`) is matched to the
+ * one image attachment of the same file name, when `alt` says it.
  */
-export function makeCidResolver(attachments: InlineCapable[] | undefined, parts: MimeAttachment[] | undefined): (contentId: string) => string | undefined {
-    return (contentId) => {
+export function makeCidResolver(
+    attachments: InlineCapable[] | undefined,
+    parts: MimeAttachment[] | undefined,
+): (contentId: string | undefined, alt?: string) => string | undefined {
+    return (contentId, alt) => {
         if (parts) {
-            const part = parts.find((candidate) => candidate.contentId === contentId);
+            const candidates = parts.map((part, index) => ({ uid: String(index), filename: part.filename ?? "", mimeType: part.contentType, contentId: part.contentId }));
+            const found = findInlineAttachment(candidates, { cid: contentId, alt });
+            const part = found ? parts[Number(found.uid)] : undefined;
             const bytes = part && INLINE_IMAGE_TYPES.test(part.contentType) ? part.decode() : undefined;
-            return part && bytes && bytes.length <= MAX_INLINE_IMAGE_BYTES ? `data:${part.contentType};base64,${base64(bytes)}` : undefined;
+            return part && bytes && bytes.length <= MAX_INLINE_IMAGE_BYTES ? toDataUri(part.contentType, bytes) : undefined;
         }
-        const attachment = attachments?.find((candidate) => candidate.contentId === contentId);
+        const attachment = findInlineAttachment(attachments, { cid: contentId, alt });
         return attachment ? absoluteAttachmentUrl(attachment.uid) : undefined;
     };
 }

package/apps/shared/components/mail/reading/bodyHtml.ts

@@ -39,8 +39,9 @@ export interface PreparedBody {
 
 export interface PrepareOptions {
     /** The URL an inline image's `cid:` reference stands for, or `undefined` when there is no such part. Only `data:` URIs of an
-     * image type and `http(s)` URLs are accepted; anything else is treated as unresolved. */
-    resolveCid?: (contentId: string) => string | undefined;
+     * image type and `http(s)` URLs are accepted; anything else is treated as unresolved. An image with no source at all (the
+     * server removes one it could not point at a part) is asked for with no `contentId` and its `alt`. */
+    resolveCid?: (contentId: string | undefined, alt?: string) => string | undefined;
 }
 
 /** What a stylesheet or a `style` attribute may not contain, whatever the sanitizers before it did. */
@@ -222,10 +223,14 @@ function hardenLink(element: Element): void {
     }
 }
 
-function hardenImage(element: Element, options: PrepareOptions): void {
+/** Whether the image ends up pointing at a part of the message (so the frame's CSP must allow this server's attachment URLs). */
+function hardenImage(element: Element, options: PrepareOptions): boolean {
     const src = (element.getAttribute("src") ?? "").trim();
-    const inline = /^cid:/i.test(src);
-    const target = inline ? options.resolveCid?.(src.slice(4).replace(/^<|>$/g, "")) : src;
+    const cid = /^cid:/i.test(src);
+    // A picture the server could not tie to a part keeps its `alt` and loses its `src`: the message's own attachment of that name, if any.
+    const inline = cid || src === "";
+    const alt = element.getAttribute("alt") ?? undefined;
+    const target = cid ? options.resolveCid?.(src.slice(4).replace(/^<|>$/g, ""), alt) : inline ? options.resolveCid?.(undefined, alt) : src;
     // Remote images are never fetched (they would tell the sender the message was read); an inline image resolves to an embedded
     // image or to this server's own attachment URL, and one that doesn't resolve has nothing to show.
     if (target !== undefined && (IMAGE_DATA_URI.test(target) || (inline && /^https?:\/\//i.test(target)))) {
@@ -233,6 +238,7 @@ function hardenImage(element: Element, options: PrepareOptions): void {
     } else {
         element.removeAttribute("src");
     }
+    return cid || (inline && element.hasAttribute("src"));
 }
 
 /**
@@ -265,10 +271,9 @@ function harden(body: HTMLElement, options: PrepareOptions): { elements: number;
         } else if (tag === "a" || tag === "area") {
             hardenLink(element);
         } else if (tag === "img") {
-            if (/^cid:/i.test(element.getAttribute("src") ?? "")) {
+            if (hardenImage(element, options)) {
                 inlineImages++;
             }
-            hardenImage(element, options);
         }
     }
     return { elements: all.length, inlineImages };

package/apps/shared/gestures/useEnterSlide.ts

@@ -13,7 +13,7 @@ const ENTER_START_OPACITY = 0.35;
 const ENTER_SETTLE_MS = 20;
 
 /** Whether the user asked their device for less motion. */
-function prefersReducedMotion(): boolean {
+export function prefersReducedMotion(): boolean {
     return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 

package/apps/shared/keyboard/keymap.ts

@@ -95,6 +95,8 @@ export const SHORTCUTS = {
         workWeek: def({ id: "calendar.workWeek", keys: ["ctrl+alt+2"], label: "Work week view", scope: "calendar" }),
         week: def({ id: "calendar.week", keys: ["ctrl+alt+3"], label: "Week view", scope: "calendar" }),
         month: def({ id: "calendar.month", keys: ["ctrl+alt+4"], label: "Month view", scope: "calendar" }),
+        list: def({ id: "calendar.list", keys: ["ctrl+alt+5"], label: "List view", scope: "calendar" }),
+        search: def({ id: "calendar.search", keys: ["/", "mod+e"], label: "Search events", scope: "calendar" }),
     },
     contacts: {
         create: def({ id: "contacts.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New contact", scope: "contacts" }),

package/apps/shared/mail/rangeSelection.ts

@@ -0,0 +1,45 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** The modifier keys of a click - what a mouse event, or the native event behind a checkbox's change, carries. */
+export interface ClickModifiers {
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+}
+
+/** Whether a click is a multi-select click (Shift, Ctrl, or Cmd on a Mac) rather than the plain click that opens a row. */
+export function isSelectionClick(modifiers: ClickModifiers | undefined): boolean {
+    return !!modifiers && !!(modifiers.shiftKey || modifiers.ctrlKey || modifiers.metaKey);
+}
+
+/** Ctrl (or Cmd on a Mac): toggle just the clicked row. */
+export function isToggleClick(modifiers: ClickModifiers | undefined): boolean {
+    return !!modifiers && !!(modifiers.ctrlKey || modifiers.metaKey);
+}
+
+/**
+ * The anchor of a Shift+click range, as Explorer and Outlook have it: the row last clicked (or opened) - `anchor` - while it is still in
+ * the list, else the row open in the reading pane (`open`), else nothing (the range is then just the clicked row).
+ */
+export function resolveAnchor(keys: readonly string[], anchor: string | null, open: string | null): string | null {
+    if (anchor !== null && keys.includes(anchor)) {
+        return anchor;
+    }
+    return open !== null && keys.includes(open) ? open : null;
+}
+
+/**
+ * Every key from `anchor` to `target` inclusive, in the order `keys` has them - the order the list is displayed in, whichever end of the
+ * range was clicked first. With no usable anchor the range is `target` alone.
+ */
+export function rangeBetween(keys: readonly string[], anchor: string | null, target: string): string[] {
+    const from = anchor === null ? -1 : keys.indexOf(anchor);
+    const to = keys.indexOf(target);
+    if (from === -1 || to === -1) {
+        return [target];
+    }
+    return keys.slice(Math.min(from, to), Math.max(from, to) + 1);
+}

package/apps/shared/mail/rowExit.ts

@@ -0,0 +1,39 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** How long a row that leaves the list (moved, deleted, archived) takes to collapse. The list drops it from its data after this long. */
+export const ROW_EXIT_MS = 200;
+
+/**
+ * Whether a row that leaves should collapse rather than vanish: the browser can animate an element (`Element.animate()` - every current one
+ * can) and the reader has not asked for less motion (`prefers-reduced-motion`). Otherwise the row is removed at once.
+ */
+export function canAnimateRowExit(): boolean {
+    // Only called from event handlers, i.e. in a browser.
+    if (typeof Element.prototype.animate !== "function") {
+        return false;
+    }
+    return !(typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+
+/**
+ * Collapses a row that is leaving: its height and opacity run to zero over `ROW_EXIT_MS`, so the rows below slide up into the gap, and it
+ * stays collapsed (`fill: forwards`) until the list drops it. The row is marked so a second call for the same element does nothing.
+ */
+export function collapseRow(row: HTMLElement): void {
+    if (row.dataset.collapsing) {
+        return;
+    }
+    row.dataset.collapsing = "true";
+    const height = row.getBoundingClientRect().height;
+    row.style.overflow = "hidden";
+    row.animate(
+        [
+            { height: `${height}px`, opacity: 1 },
+            { height: "0px", opacity: 0, borderBottomWidth: "0px" },
+        ],
+        { duration: ROW_EXIT_MS, easing: "ease-out", fill: "forwards" },
+    );
+}