@rapidmx/web-client 0.22.0 → 0.24.0

package/apps/shared/components/calendar/timePicker.ts

@@ -0,0 +1,106 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+
+/** The step between the times a time field offers. */
+export const TIME_STEP_MINUTES = 15;
+const MS_PER_MINUTE = 60_000;
+
+/**
+ * The start a new event gets when nothing was clicked: the next half hour (11:12 becomes 11:30; a time already on the half hour stays), with the
+ * event lasting an hour from there.
+ */
+export function nextHalfHour(now: Date): Date {
+    const slot = 30 * MS_PER_MINUTE;
+    return new Date(Math.ceil(now.getTime() / slot) * slot);
+}
+
+/** `HH:mm` (24 hour) as a 12 hour clock reading: "13:05" is "1:05 PM". */
+export function formatTimeOfDay(time: string): string {
+    // A cleared date leaves no time to read: the field is empty, not an error.
+    if (!/^\d\d:\d\d$/.test(time)) {
+        return "";
+    }
+    const [hours, minutes] = time.split(":").map(Number);
+    return format(new Date(2000, 0, 1, hours, minutes), "h:mm a");
+}
+
+/**
+ * What was typed into a time field as `HH:mm`, or `null` when it isn't a time. Takes 24 hour and 12 hour readings, with or without the colon and
+ * the space: "15:45", "3:45 pm", "3:45p", "345pm", "1130" and a bare hour such as "9" (9:00) are all times.
+ */
+export function parseTimeInput(text: string): string | null {
+    const match = /^\s*(\d{1,2})(?::?(\d{2}))?\s*(?:([ap])\.?m?\.?)?\s*$/i.exec(text);
+    if (!match) {
+        return null;
+    }
+    let hours = Number(match[1]);
+    const minutes = match[2] === undefined ? 0 : Number(match[2]);
+    const meridiem = match[3]?.toLowerCase();
+    if (minutes > 59) {
+        return null;
+    }
+    if (meridiem) {
+        if (hours < 1 || hours > 12) {
+            return null;
+        }
+        hours = (hours % 12) + (meridiem === "p" ? 12 : 0);
+    } else if (hours > 23) {
+        return null;
+    }
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+
+/** Every time of a day, a quarter hour apart, as `HH:mm`. */
+export function dayTimes(): string[] {
+    return Array.from({ length: (24 * 60) / TIME_STEP_MINUTES }, (_, i) => {
+        const minutes = i * TIME_STEP_MINUTES;
+        return `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+    });
+}
+
+/** A length of time as a menu says it: "15 mins", "1 hr", "1.5 hrs", "2 hrs". */
+export function formatDuration(minutes: number): string {
+    if (minutes < 60) {
+        return `${minutes} min${minutes === 1 ? "" : "s"}`;
+    }
+    const hours = Math.round((minutes / 60) * 100) / 100;
+    return `${hours} ${hours === 1 ? "hr" : "hrs"}`;
+}
+
+/** `YYYY-MM-DDTHH:mm` read as a wall clock, in minutes since the epoch (no zone: the daylight saving changes of a zone are not this field's business). */
+function wallMinutes(value: string): number {
+    return Date.parse(`${value.slice(0, 16)}:00Z`) / MS_PER_MINUTE;
+}
+
+function wallString(minutes: number): string {
+    return new Date(minutes * MS_PER_MINUTE).toISOString().slice(0, 16);
+}
+
+export interface EndTimeOption {
+    /** The end as `YYYY-MM-DDTHH:mm`. */
+    value: string;
+    /** The time of day, as a 12 hour clock reading. */
+    label: string;
+    /** How long the event would last, "(1.5 hrs)". */
+    hint: string;
+}
+
+/**
+ * The ends a time field offers for an event starting at `start` (`YYYY-MM-DDTHH:mm`): each quarter hour on the clock after the start, up to a
+ * day later, with the length of the event that end would make.
+ */
+export function endTimeOptions(start: string): EndTimeOption[] {
+    if (!/^\d{4}-\d\d-\d\dT\d\d:\d\d/.test(start)) {
+        return [];
+    }
+    const startMinutes = wallMinutes(start);
+    const options: EndTimeOption[] = [];
+    for (let at = Math.floor(startMinutes / TIME_STEP_MINUTES + 1) * TIME_STEP_MINUTES; at <= startMinutes + 24 * 60; at += TIME_STEP_MINUTES) {
+        const value = wallString(at);
+        options.push({ value, label: formatTimeOfDay(value.slice(11, 16)), hint: `(${formatDuration(at - startMinutes)})` });
+    }
+    return options;
+}

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

@@ -2,13 +2,14 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { HiChevronDown, HiChevronRight, HiOutlineFlag, HiOutlinePaperClip } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import { Message } from "../../../../lib/mail/mailApi.js";
 import { formatMailAddress } from "../../../../lib/mail/mailAddress.js";
 import MailAddress from "./MailAddress.js";
-import { EncryptedPreview, conversationLooksEncrypted } from "./reading/EncryptedPreview.js";
+import { EncryptedPreview, conversationLooksEncrypted, displaySubject } from "./reading/EncryptedPreview.js";
+import { decryptForDisplay, useDecryptedMessages, useUnlockEpoch } from "../../mail/decryptedMessages.js";
 import { ConversationSummary, listConversationMessages } from "../../../../lib/mail/conversationsApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "./unreadStyle.js";
@@ -98,6 +99,18 @@ export default function ConversationList({
     newestFirst,
 }: ConversationListProps) {
     const client = useApiClient();
+    // What this device has decrypted of the encrypted messages on screen: their real subjects and previews.
+    const decrypted = useDecryptedMessages();
+    const unlockEpoch = useUnlockEpoch();
+    // An encrypted conversation's row stands for its latest message, whose subject only decrypting can tell. Rows are decrypted as they are listed
+    // whenever the mailbox is unlocked (and again once it is), the same way the message list does.
+    useEffect(() => {
+        for (const conversation of conversations) {
+            if (conversationLooksEncrypted(conversation)) {
+                void decryptForDisplay(conversation.latestMessageUid, conversation.mailboxUid ?? mailboxUid);
+            }
+        }
+    }, [conversations, mailboxUid, unlockEpoch]);
     const [expanded, setExpanded] = useState<Set<string>>(new Set());
     const [messagesById, setMessagesById] = useState<Record<string, Message[]>>({});
     const [loadingIds, setLoadingIds] = useState<Set<string>>(new Set());
@@ -226,10 +239,10 @@ export default function ConversationList({
                                             {new Date(conversation.latestDate).toLocaleDateString()}
                                         </span>
                                     </div>
-                                    <div className={["text-sm truncate", subjectClass(unread)].join(" ")}>{conversation.subject || "(no subject)"}</div>
+                                    <div className={["text-sm truncate", subjectClass(unread)].join(" ")}>{decrypted[conversation.latestMessageUid]?.subject || displaySubject(conversation.subject) || "(no subject)"}</div>
                                     <div className="text-xs text-text-muted truncate font-normal">
                                         {/* An encrypted latest message has no preview (the server never had its plaintext): say so, with a lock, not nothing. */}
-                                        {conversationLooksEncrypted(conversation) ? <EncryptedPreview /> : conversation.latestPreview}
+                                        {conversationLooksEncrypted(conversation) ? decrypted[conversation.latestMessageUid]?.preview || <EncryptedPreview /> : conversation.latestPreview}
                                     </div>
                                     <div className="flex items-center gap-2 mt-1 text-xs text-text-muted font-normal">
                                         {conversation.messageCount > 1 && <span>{conversation.messageCount} messages</span>}
@@ -301,7 +314,7 @@ export default function ConversationList({
                                                 </span>
                                             </div>
                                             <div className="flex items-center gap-2 text-xs text-text-muted font-normal">
-                                                <span className="truncate">{message.bodyPreview || (message.encrypted ? <EncryptedPreview /> : null)}</span>
+                                                <span className="truncate">{message.bodyPreview || decrypted[message.uid]?.preview || (message.encrypted ? <EncryptedPreview /> : null)}</span>
                                                 {message.hasAttachments && (
                                                     <HiOutlinePaperClip size={12} aria-label="Has attachments" />
                                                 )}

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

@@ -11,7 +11,8 @@ import { Label } from "../../../../lib/mail/labelsApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import MessageDetailPane from "./MessageDetailPane.js";
-import { EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
+import { ENCRYPTED_SUBJECT_PLACEHOLDER, EncryptedPreview, displaySubject } from "./reading/EncryptedPreview.js";
+import { useDecryptedMessages } from "../../mail/decryptedMessages.js";
 import { CollapsedCard, SkeletonCards, SubjectCard } from "./reading/MessageCard.js";
 import PendingMessageCard from "./reading/PendingMessageCard.js";
 import { useMailShell } from "./layout/MailShell.js";
@@ -192,6 +193,7 @@ export default function ConversationThreadPane({
     const client = useApiClient();
     // The replies and forwards this tab has sent, drawn at the top of the thread they continue until the server's own copy is in it.
     const outgoing = useOutgoingReplies();
+    const decryptedMessages = useDecryptedMessages();
     const [messages, setMessages] = useState<Message[]>([]);
     const [attachmentsByUid, setAttachmentsByUid] = useState<Record<string, Attachment[]>>({});
     const [expandedUids, setExpandedUids] = useState<Set<string>>(new Set());
@@ -495,7 +497,10 @@ export default function ConversationThreadPane({
     if (!conversation) {
         return <p className="p-8 text-sm text-text-muted">Select a conversation to read it.</p>;
     }
-    const subject = displaySubject(conversation.subject) || "(no subject)";
+    // An encrypted thread's subject is the placeholder until one of its messages has been decrypted here; the newest one that has says it.
+    const decryptedSubject =
+        conversation.subject === ENCRYPTED_SUBJECT_PLACEHOLDER ? messages.map((message) => decryptedMessages[message.uid]?.subject).find(Boolean) : undefined;
+    const subject = (decryptedSubject ?? displaySubject(conversation.subject)) || "(no subject)";
     // The newest message that is open carries the Reply / Forward buttons at the foot of its card.
     const footerUid = messages.find((message) => expandedUids.has(message.uid))?.uid;
 

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

@@ -80,14 +80,16 @@ import Alert from "../../../../lib/components/feedback/Alert.js";
 import LabelMenuButton from "./labelMenu.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import EncryptedBody from "./reading/EncryptedBody.js";
-import { displaySubject } from "./reading/EncryptedPreview.js";
+import { ENCRYPTED_SUBJECT_PLACEHOLDER, displaySubject } from "./reading/EncryptedPreview.js";
+import { rememberDecrypted } from "../../mail/decryptedMessages.js";
 import MessageBody, { BodySkeleton } from "./reading/MessageBody.js";
 import { BODY_FONT_STYLE, CardShell, SenderAvatar, SubjectCard } from "./reading/MessageCard.js";
 import MessageMoreMenu, { MessageMenuActions } from "./reading/MessageMoreMenu.js";
 import MessageSourceDialog, { SourceMode, SourceState } from "./reading/MessageSourceDialog.js";
 import { useMessageActions } from "./reading/useMessageActions.js";
 import { saveAsEml } from "./reading/messageExport.js";
-import { buildPrintDocument, printDocument } from "./reading/printMessage.js";
+import { buildConversationPrintDocument, printDocument, type PrintableMessage } from "./reading/printMessage.js";
+import { olderConversationMessages, printHeaders, printableOlderMessage } from "./reading/conversationPrint.js";
 import { type BodyContent, fetchBodyContent } from "./reading/bodyContent.js";
 import { useViewOriginal } from "./reading/viewOriginal.js";
 import { ROW_FOCUS_CLASS, UnreadLabel, dateClass, senderClass } from "./unreadStyle.js";
@@ -1042,7 +1044,14 @@ function MessageDetailContent({
             ? senderKeyState!.conflict
             : undefined;
 
-    const shownSubject = (protectedSubject ?? displaySubject(message.subject)) || "(no subject)";
+    // An encrypted message's outer Subject is only RFC 9788's placeholder: whatever decrypting recovered is the subject, signed or not.
+    const decryptedSubject = message.subject === ENCRYPTED_SUBJECT_PLACEHOLDER ? security?.subject : undefined;
+    const shownSubject = (protectedSubject ?? decryptedSubject ?? displaySubject(message.subject)) || "(no subject)";
+    useEffect(() => {
+        if (decryptedSubject) {
+            rememberDecrypted(message.uid, message.mailboxUid, { subject: decryptedSubject });
+        }
+    }, [decryptedSubject, message.uid, message.mailboxUid]);
     // What the body area shows. Text or HTML the client recovered from a signed or encrypted message is shown as it is (its own sanitizing
     // happens in `MessageBody`, like every body's); anything else is the server's own `/content`. An encrypted message has nothing worth
     // fetching until it has been decrypted (the server only has the ciphertext), so it shows the skeleton meanwhile.
@@ -1104,24 +1113,34 @@ function MessageDetailContent({
 
     // ---- The "More actions" menu's own rows (Print, View, Save as, Create rule); the rest are `messageActions`. ----
 
-    /** Prints this one message: its header lines and the body the pane shows (what was decrypted or verified here, else the server's sanitized
-     * body), in a frame of its own - see `printMessage.ts`. */
+    /** Prints this message and the conversation it belongs to: the message first, then every earlier one, newest to oldest (the messages that
+     * came after it are left out). Each is the body the reading pane shows - what was decrypted or verified here for this one, else the server's
+     * sanitized body - in a frame of its own; see `printMessage.ts`. */
     async function handlePrint() {
         try {
             const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version));
-            const format = (list: Recipient[]) => list.map((r) => formatMailAddress(r)).join(", ");
-            const printable = buildPrintDocument({
-                subject: shownSubject,
-                headers: [
-                    { name: "From", value: senderLabel },
-                    { name: "To", value: format(message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc")) },
-                    { name: "Cc", value: format(message.recipients.filter((r) => r.type === "cc")) },
-                    { name: "Date", value: new Date(message.receivedDate).toLocaleString() },
-                ],
-                content,
-                attachments,
-                inlineParts: innerAttachments,
-            });
+            const older = await olderConversationMessages(message, client).catch(() => []);
+            const earlier = await Promise.all(
+                older.map((other) =>
+                    printableOlderMessage(other).catch(
+                        (): PrintableMessage => ({
+                            subject: other.subject || "(no subject)",
+                            headers: printHeaders(other, formatMailAddress(other.from)),
+                            content: { kind: "text", text: "This message could not be loaded, so it is not printed." },
+                        }),
+                    ),
+                ),
+            );
+            const printable = buildConversationPrintDocument(shownSubject, [
+                {
+                    subject: shownSubject,
+                    headers: printHeaders(message, senderLabel),
+                    content,
+                    attachments,
+                    inlineParts: innerAttachments,
+                },
+                ...earlier,
+            ]);
             if (printable === undefined) {
                 notify({ kind: "warning", title: "This message is too large to print here" });
                 return;

package/apps/shared/components/mail/invite/InviteRowChip.tsx

@@ -6,7 +6,7 @@ import React, { useRef, useState } from "react";
 import { HiOutlineCalendarDays } from "react-icons/hi2";
 import type { Message } from "../../../../../lib/mail/mailApi.js";
 import type { MessageInvite } from "../../../../../lib/calendar/inviteApi.js";
-import { ANSWER_LABEL, formatRowStart } from "./inviteFormat.js";
+import { formatRowStart } from "./inviteFormat.js";
 import { useMessageInvite } from "./inviteStore.js";
 import InviteRsvpPopover from "./InviteRsvpPopover.js";
 
@@ -25,8 +25,8 @@ export function showsInviteChip(message: Pick<Message, "meetingMethod" | "encryp
 
 /**
  * The line a meeting request gets in a list of mail, under its preview, as Outlook draws it: a calendar icon, when the meeting starts (in the reader's
- * zone), under that whether it conflicts with the reader's calendar - or, once answered, the answer - and an RSVP button that opens the day view with
- * Accept, Decline and Tentative (`InviteRsvpPopover`).
+ * zone), under that whether it conflicts with the reader's calendar, and an RSVP button that opens the day view with
+ * Accept, Decline and Maybe (`InviteRsvpPopover`). Once the meeting has been answered - from here or anywhere else - the chip is gone.
  *
  * The invitation is looked up (once, through the shared cache) only for a row that `showsInviteChip()` - the rest of the list is never asked about. Until
  * it arrives, or when the lookup fails, the chip says only "Meeting request", with no button.
@@ -39,11 +39,12 @@ export default function InviteRowChip({ message, onResponded, className = "mx-4"
     const { invite, setInvite } = useMessageInvite(message.uid, eligible);
     const [open, setOpen] = useState(false);
     const rsvpRef = useRef<HTMLButtonElement>(null);
-    if (!eligible) {
+    const answer = invite?.response ?? message.meetingResponse;
+    // Once the reader has answered, the row has nothing left to ask: the chip goes away (the answer stays on the message itself, and can be changed there).
+    if (!eligible || answer) {
         return null;
     }
 
-    const answer = invite?.response ?? message.meetingResponse;
     const conflicts = invite?.conflicts.length ?? 0;
     const start = invite ? formatRowStart(invite) : undefined;
 
@@ -67,13 +68,8 @@ export default function InviteRowChip({ message, onResponded, className = "mx-4"
             <div className="min-w-0 flex-1">
                 <div className="truncate text-text">{start ?? "Meeting request"}</div>
                 {invite && (
-                    <div
-                        className={[
-                            "truncate",
-                            answer === "accepted" ? "text-success" : answer === "declined" ? "text-danger" : conflicts > 0 ? "text-danger" : "text-text-muted",
-                        ].join(" ")}
-                    >
-                        {answer ? ANSWER_LABEL[answer] : conflicts > 0 ? `Conflicts with ${conflicts} ${conflicts === 1 ? "event" : "events"}` : "No conflicts"}
+                    <div className={["truncate", conflicts > 0 ? "text-danger" : "text-text-muted"].join(" ")}>
+                        {conflicts > 0 ? `Conflicts with ${conflicts} ${conflicts === 1 ? "event" : "events"}` : "No conflicts"}
                     </div>
                 )}
             </div>

package/apps/shared/components/mail/invite/InviteRsvpPopover.tsx

@@ -42,7 +42,7 @@ function estimateHeight(invite: MessageInvite, proposing: boolean): number {
 const RESPONSES: { response: InviteResponse; label: string; text: string; failure: string }[] = [
     { response: "accepted", label: "Accept", text: "Accept", failure: "Couldn't accept this meeting" },
     { response: "declined", label: "Decline", text: "Decline", failure: "Couldn't decline this meeting" },
-    { response: "tentative", label: "Tentative", text: "?", failure: "Couldn't respond tentatively to this meeting" },
+    { response: "tentative", label: "Tentative", text: "Maybe", failure: "Couldn't respond tentatively to this meeting" },
 ];
 
 interface RsvpPanelProps {
@@ -236,7 +236,7 @@ export interface InviteRsvpPopoverProps {
 
 /**
  * What the RSVP button opens: an anchored popover on a desktop, a dialog on a phone. A day view of the reader's schedule around the meeting, with
- * the invitation highlighted and its conflicts marked, and Accept, Decline, a "?" for Tentative and a "..." menu (Propose new time, Open in calendar).
+ * the invitation highlighted and its conflicts marked, and Accept, Decline, a "Maybe" for Tentative and a "..." menu (Propose new time, Open in calendar).
  * An answer is sent to the server, which puts the meeting on the calendar and replies to the organizer; the popover then closes and hands the
  * updated invitation to its caller. A failure raises a pop-up and leaves the popover open.
  *

package/apps/shared/components/mail/invite/inviteFormat.ts

@@ -4,6 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import type { Attachment } from "../../../../../lib/mail/mailApi.js";
 import type { InviteResponse, MessageInvite } from "../../../../../lib/calendar/inviteApi.js";
+import { describeTimeZone, deviceTimeZone } from "../../../../../lib/util/timeZone.js";
 import { APP_HREFS } from "../../../navigation/appHrefs.js";
 
 /** Whether an attachment is a calendar file - what tells the pane a message may carry an invitation worth asking the server about. By type
@@ -53,15 +54,15 @@ export function formatInviteWhen(invite: Pick<MessageInvite, "startDate" | "endD
     }
     const date = new Intl.DateTimeFormat(undefined, DAY_FORMAT);
     const time = new Intl.DateTimeFormat(undefined, CLOCK_FORMAT);
-    // The zone is named once, after the last time shown: the times are the reader's own, not the organizer's.
-    const timeAndZone = new Intl.DateTimeFormat(undefined, { ...CLOCK_FORMAT, timeZoneName: "short" });
+    // The zone is named once, in full, after the last time shown: the times are the reader's own, not the organizer's.
+    const zone = describeTimeZone(deviceTimeZone(), end ?? start);
     const startDay = date.format(start);
     if (!end) {
-        return `${startDay}, ${timeAndZone.format(start)}`;
+        return `${startDay}, ${time.format(start)} • ${zone}`;
     }
     return startDay === date.format(end)
-        ? `${startDay}, ${time.format(start)} - ${timeAndZone.format(end)}`
-        : `${startDay}, ${time.format(start)} - ${date.format(end)}, ${timeAndZone.format(end)}`;
+        ? `${startDay}, ${time.format(start)} - ${time.format(end)} • ${zone}`
+        : `${startDay}, ${time.format(start)} - ${date.format(end)}, ${time.format(end)} • ${zone}`;
 }
 
 /** The meeting's start the way a list row writes it - `Thu 9/24/2026 1:00 PM` (dates only for an all-day event), in the reader's zone. */

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

@@ -0,0 +1,76 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { getUnlockedKeys } from "../../../../../lib/crypto/keySession.js";
+import { listConversationMessages } from "../../../../../lib/mail/conversationsApi.js";
+import { formatMailAddress } from "../../../../../lib/mail/mailAddress.js";
+import { getMessageRawContent, listAttachments, type Message, type Recipient } from "../../../../../lib/mail/mailApi.js";
+import type { ApiClient } from "../../../../../lib/util/api.js";
+import { fetchBodyContent } from "./bodyContent.js";
+import { ENCRYPTED_SUBJECT_PLACEHOLDER, displaySubject } from "./EncryptedPreview.js";
+import type { PrintableMessage } from "./printMessage.js";
+
+const format = (list: Recipient[]) => list.map((r) => formatMailAddress(r)).join(", ");
+
+/** The header lines printed above a message's body. */
+export function printHeaders(message: Message, from: string): PrintableMessage["headers"] {
+    return [
+        { name: "From", value: from },
+        { name: "To", value: format(message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc")) },
+        { name: "Cc", value: format(message.recipients.filter((r) => r.type === "cc")) },
+        { name: "Date", value: new Date(message.receivedDate).toLocaleString() },
+    ];
+}
+
+/**
+ * The messages of `message`'s conversation that came before it, newest first - the order they follow it in a printed conversation. A conversation
+ * the server has no id for (or one that can't be read) has none: the message prints alone.
+ */
+export async function olderConversationMessages(message: Message, client?: ApiClient): Promise<Message[]> {
+    if (!message.conversationId) {
+        return [];
+    }
+    const thread = await listConversationMessages(message.mailboxUid, message.conversationId, { limit: 500 }, client);
+    const sent = new Date(message.receivedDate).getTime();
+    return thread
+        .filter((other) => other.uid !== message.uid && new Date(other.receivedDate).getTime() <= sent)
+        .sort((a, b) => new Date(b.receivedDate).getTime() - new Date(a.receivedDate).getTime());
+}
+
+/**
+ * One earlier message of a conversation as it prints: the body the reading pane would show. An encrypted one is decrypted here when this device has
+ * its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext.
+ */
+export async function printableOlderMessage(message: Message): Promise<PrintableMessage> {
+    const attachments = await listAttachments(message.folderUid, message.uid).catch(() => []);
+    if (message.encrypted) {
+        const unlocked = getUnlockedKeys(message.mailboxUid);
+        if (unlocked) {
+            const { evaluateMessageSecurity } = await import("../../../../../lib/crypto/messageSecurity.js");
+            const security = await evaluateMessageSecurity(await getMessageRawContent(message.uid), unlocked);
+            const content =
+                security.text !== undefined ? ({ kind: "text", text: security.text } as const) : security.html !== undefined ? ({ kind: "html", html: security.html } as const) : undefined;
+            if (content) {
+                return {
+                    subject: (message.subject === ENCRYPTED_SUBJECT_PLACEHOLDER ? security.subject : undefined) || displaySubject(message.subject) || "(no subject)",
+                    headers: printHeaders(message, formatMailAddress(message.from)),
+                    content,
+                    attachments,
+                    inlineParts: security.attachments,
+                };
+            }
+        }
+        return {
+            subject: displaySubject(message.subject) || "(no subject)",
+            headers: printHeaders(message, formatMailAddress(message.from)),
+            content: { kind: "text", text: "This message is encrypted and could not be decrypted, so it is not printed." },
+        };
+    }
+    return {
+        subject: message.subject || "(no subject)",
+        headers: printHeaders(message, formatMailAddress(message.from)),
+        content: await fetchBodyContent(message.uid, message.version),
+        attachments,
+    };
+}

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

@@ -9,7 +9,7 @@ import { prepareBodyHtml } from "./bodyHtml.js";
 import { frameCsp } from "./frameDocument.js";
 
 /**
- * Printing one message: a document of its own - the message's header lines, and under them the same sanitized body the reading pane draws -
+ * Printing a message, and the conversation it belongs to: a document of its own - each message's header lines, and under them the same sanitized body the reading pane draws -
  * shown in a frame that nobody sees and printed from there, so the print is the message and not the app around it.
  *
  * The frame is as isolated as the reading pane's own (`frameDocument.ts`): the body has been through `prepareBodyHtml()`, the document
@@ -35,6 +35,8 @@ dl{margin:0 0 12px;display:grid;grid-template-columns:max-content 1fr;gap:2px 12
 dt{font-weight:600;color:#444}
 dd{margin:0;overflow-wrap:anywhere}
 hr{border:0;border-top:1px solid #999;margin:0 0 16px}
+h2{font-size:16px;margin:0 0 12px}
+.rr-older{margin-top:28px;padding-top:20px;border-top:2px solid #000;break-inside:auto}
 #rr-body{overflow-wrap:break-word}
 #rr-body img{max-width:100%;height:auto}
 #rr-body pre,pre.rr-text{white-space:pre-wrap;font:inherit;margin:0}
@@ -44,10 +46,14 @@ export function escapeHtml(text: string): string {
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 
-/**
- * The document to print, or `undefined` for a body too large to prepare (the pane does not draw it either).
- */
-export function buildPrintDocument(message: PrintableMessage): string | undefined {
+interface PrintSection {
+    /** The `<dl>`, rule and body of one message. */
+    html: string;
+    imageSource?: string;
+}
+
+/** One message's header lines and body, or `undefined` for a body too large to prepare (the pane does not draw it either). */
+function renderSection(message: PrintableMessage): PrintSection | undefined {
     let body: string;
     let imageSource: string | undefined;
     if (message.content.kind === "html") {
@@ -65,13 +71,44 @@ export function buildPrintDocument(message: PrintableMessage): string | undefine
         .filter((header) => header.value !== "")
         .map((header) => `<dt>${escapeHtml(header.name)}</dt><dd>${escapeHtml(header.value)}</dd>`)
         .join("");
+    return { html: `<dl>${lines}</dl><hr>${body}`, imageSource };
+}
+
+/**
+ * The document to print, or `undefined` for a body too large to prepare (the pane does not draw it either).
+ */
+export function buildPrintDocument(message: PrintableMessage): string | undefined {
+    return buildConversationPrintDocument(message.subject, [message]);
+}
+
+/**
+ * The document to print for a conversation: `subject` as the title, then each of `messages` in the order given (the message that was asked for
+ * first, then the ones before it), each under its own header lines and set apart from the last. A message whose subject differs from the title
+ * says so under its rule. Only the first message is required to be printable: a later one too large to prepare is replaced by a note saying so.
+ */
+export function buildConversationPrintDocument(subject: string, messages: PrintableMessage[]): string | undefined {
+    const sections: string[] = [];
+    let imageSource: string | undefined;
+    for (const [index, message] of messages.entries()) {
+        const section = renderSection(message);
+        if (section === undefined && index === 0) {
+            return undefined;
+        }
+        imageSource ??= section?.imageSource;
+        const html = section?.html ?? `<p>${escapeHtml(`"${message.subject}" is too large to print here.`)}</p>`;
+        sections.push(
+            index === 0
+                ? html
+                : `<div class="rr-older">${message.subject !== subject ? `<h2>${escapeHtml(message.subject)}</h2>` : ""}${html}</div>`,
+        );
+    }
     return [
         "<!doctype html>",
         '<html lang="en"><head><meta charset="utf-8">',
         `<meta http-equiv="Content-Security-Policy" content="${frameCsp(imageSource)}">`,
-        `<title>${escapeHtml(message.subject)}</title>`,
+        `<title>${escapeHtml(subject)}</title>`,
         `<style>${PRINT_CSS}</style></head>`,
-        `<body><h1>${escapeHtml(message.subject)}</h1><dl>${lines}</dl><hr>${body}</body></html>`,
+        `<body><h1>${escapeHtml(subject)}</h1>${sections.join("")}</body></html>`,
     ].join("");
 }
 

package/apps/shared/keyboard/keymap.ts

@@ -66,6 +66,7 @@ export const SHORTCUTS = {
         replyAll: def({ id: "mail.replyAll", keys: ["mod+shift+r"], label: "Reply all", scope: "mail" }),
         forward: def({ id: "mail.forward", keys: ["mod+shift+f"], label: "Forward", scope: "mail" }),
         delete: def({ id: "mail.delete", keys: ["mod+d", "delete"], label: "Delete", scope: "mail" }),
+        permanentDelete: def({ id: "mail.permanentDelete", keys: ["shift+delete"], label: "Delete permanently", scope: "mail" }),
         archive: def({ id: "mail.archive", keys: ["e", "backspace"], label: "Archive", scope: "mail" }),
         move: def({ id: "mail.move", keys: ["mod+shift+v"], label: "Move to folder", scope: "mail" }),
         markRead: def({ id: "mail.markRead", keys: ["ctrl+q"], label: "Mark as read", scope: "mail" }),