@rapidmx/web-client 0.22.0 → 0.23.0

package/apps/shared/components/admin/setup/SetupWizard.tsx

@@ -39,8 +39,8 @@ export const SETUP_STEPS = [
     { id: "domain", title: "Domain", intro: "Add the domain this server receives mail for, then publish the DNS records below." },
     { id: "settings", title: "Server settings", intro: "Set the rules for encryption, how long mail is kept, and new mailboxes." },
     { id: "escrow", title: "Escrow", intro: "Decide whether encrypted mail can be recovered by a trusted group of holders." },
-    { id: "branding", title: "Branding", intro: "Make the sign-in page and apps look like your organization." },
     { id: "mailboxes", title: "Mailboxes", intro: "Create the first mailboxes, starting with your own." },
+    { id: "branding", title: "Branding", intro: "Make the sign-in page and apps look like your organization." },
 ] as const;
 
 export type SetupStepId = (typeof SETUP_STEPS)[number]["id"];

package/apps/shared/components/calendar/TimeGridView.tsx

@@ -73,7 +73,9 @@ export default function TimeGridView({ days, occurrences, folderColors, onSelect
             <div className="flex flex-1">
                 <div className="w-14 shrink-0">
                     {HOURS.map((hour) => (
-                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
+                        // Each label sits on its hour line, raised by half its own height with `relative`/`-top-1.5`: a negative margin here would
+                        // also shorten the row, and the labels would drift up a little more with every hour (48px lines, 42px labels).
+                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="relative -top-1.5 text-[10px] text-text-muted text-right pr-1.5">
                             {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
                         </div>
                     ))}

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/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" }),

package/apps/shared/mail/decryptedMessages.ts

@@ -0,0 +1,116 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useSyncExternalStore } from "react";
+import { getUnlockedKeys, subscribeKeySession } from "../../../lib/crypto/keySession.js";
+import { getMessageRawContent } from "../../../lib/mail/mailApi.js";
+
+/**
+ * What this device has recovered of encrypted messages by decrypting them: the real subject (the server only ever holds RFC 9788's `[...]`
+ * placeholder) and a short preview. Shared by every view that draws a message - the message list, the conversation list and the reading pane -
+ * so a message decrypted in one shows its subject in all of them. Held in memory only, keyed by message uid, and dropped for a mailbox the moment
+ * its keys are locked, exactly like the decrypted content it came from.
+ */
+export interface DecryptedMessage {
+    mailboxUid: string;
+    subject?: string;
+    preview?: string;
+}
+
+const PREVIEW_MAX_LENGTH = 160;
+
+let entries: Record<string, DecryptedMessage> = {};
+/** Bumped whenever a mailbox's keys are unlocked, so a view can retry decrypting what it couldn't before. */
+let unlockEpoch = 0;
+const listeners = new Set<() => void>();
+const inFlight = new Set<string>();
+
+function emit(): void {
+    for (const listener of [...listeners]) {
+        listener();
+    }
+}
+
+subscribeKeySession(({ mailboxUid, state }) => {
+    if (state === "locked") {
+        const kept = Object.fromEntries(Object.entries(entries).filter(([, entry]) => entry.mailboxUid !== mailboxUid));
+        if (Object.keys(kept).length !== Object.keys(entries).length) {
+            entries = kept;
+        }
+    } else {
+        unlockEpoch++;
+    }
+    emit();
+});
+
+function subscribe(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+
+/** Plain text of decrypted HTML for a one-line preview. Only ever feeds text display, never markup. */
+export function previewOf(html: string): string {
+    return html
+        .replace(/<(script|style)[^>]*>[\s\S]*?<\/\1>/gi, " ")
+        .replace(/<[^>]+>/g, " ")
+        .replace(/&nbsp;/gi, " ")
+        .replace(/&amp;/gi, "&")
+        .replace(/&lt;/gi, "<")
+        .replace(/&gt;/gi, ">")
+        .replace(/&quot;/gi, '"')
+        .replace(/&#0*39;/gi, "'")
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, PREVIEW_MAX_LENGTH);
+}
+
+/** Remembers what was recovered of one message. Ignored when there is nothing new to show. */
+export function rememberDecrypted(uid: string, mailboxUid: string, found: { subject?: string; preview?: string }): void {
+    if (!found.subject && !found.preview) {
+        return;
+    }
+    const current = entries[uid];
+    if (current && current.subject === found.subject && current.preview === found.preview) {
+        return;
+    }
+    entries = { ...entries, [uid]: { mailboxUid, subject: found.subject, preview: found.preview } };
+    emit();
+}
+
+/** Every message decrypted so far, by uid; a new object whenever any changes. */
+export function useDecryptedMessages(): Record<string, DecryptedMessage> {
+    return useSyncExternalStore(subscribe, () => entries);
+}
+
+/** A number that changes whenever a mailbox is unlocked - a dependency for effects that decrypt what they can. */
+export function useUnlockEpoch(): number {
+    return useSyncExternalStore(subscribe, () => unlockEpoch);
+}
+
+/**
+ * Decrypts one message to recover its subject and preview, when its mailbox's keys are unlocked and it isn't already known. Best effort: a
+ * message that can't be fetched or opened is simply left as it was. Never prompts.
+ */
+export async function decryptForDisplay(uid: string, mailboxUid: string): Promise<void> {
+    const unlocked = getUnlockedKeys(mailboxUid);
+    if (!unlocked || entries[uid] || inFlight.has(uid)) {
+        return;
+    }
+    inFlight.add(uid);
+    try {
+        const rawMime = await getMessageRawContent(uid);
+        const { evaluateMessageSecurity } = await import("../../../lib/crypto/messageSecurity.js");
+        const security = await evaluateMessageSecurity(rawMime, unlocked);
+        // A lock while this ran: the result must not go back on screen.
+        if (getUnlockedKeys(mailboxUid) === unlocked) {
+            rememberDecrypted(uid, mailboxUid, { subject: security.subject, preview: security.html ? previewOf(security.html) : security.text?.slice(0, PREVIEW_MAX_LENGTH) });
+        }
+    } catch {
+        // Left as the placeholder.
+    } finally {
+        inFlight.delete(uid);
+    }
+}

package/apps/www/index.tsx

@@ -69,6 +69,7 @@ import { setReadStateMany } from "../shared/mail/messageReadState.js";
 import { useMarkMessageRead } from "../shared/mail/useMarkMessageRead.js";
 import { ROW_FOCUS_CLASS, UnreadBar, UnreadLabel, dateClass, isUnread, rowClass, senderClass, subjectClass } from "../shared/components/mail/unreadStyle.js";
 import { LazyConversationThreadPane, LazyMessageDetailPane, prefetchReadingPane } from "../shared/components/mail/LazyReadingPane.js";
+import { rememberDecrypted } from "../shared/mail/decryptedMessages.js";
 import ConversationList, { ListedConversation, conversationRowKey } from "../shared/components/mail/ConversationList.js";
 import type { ConversationThreadHead } from "../shared/components/mail/ConversationThreadPane.js";
 import SwipeRow from "../shared/components/mail/SwipeRow.js";
@@ -159,6 +160,7 @@ async function decryptEncryptedRows(messages: Message[], unlocked: UnlockedKeys)
                     return null;
                 }
                 const preview = security.html ? stripHtmlToText(security.html).slice(0, LIST_PREVIEW_MAX_LENGTH) : undefined;
+                rememberDecrypted(message.uid, message.mailboxUid, { subject: security.subject, preview });
                 return [message.uid, { subject: security.subject, preview }];
             } catch {
                 return null;
@@ -2497,11 +2499,20 @@ function InboxContent({ userUid }: { userUid?: string }) {
         );
     }
 
+    /** Shift+Delete, from the keyboard: permanently deletes the targets wherever they are, after the same confirmation as Delete in Deleted Items. */
+    async function permanentDeleteFromKeyboard() {
+        const targets = await keyboardTargets();
+        if (targets.length > 0 && (await purgeChosen(targets)) && threadPane && !selectMode) {
+            closeOpenThread();
+        }
+    }
+
     useShortcut(SHORTCUTS.mail.next, () => selectNeighbour(1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.previous, () => selectNeighbour(-1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.nextUnread, () => selectNextUnread(1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.previousUnread, () => selectNextUnread(-1), { enabled: canMoveSelection });
     useShortcut(SHORTCUTS.mail.delete, () => void deleteFromKeyboard(), { enabled: keyboardActions && keyboardTargetExists });
+    useShortcut(SHORTCUTS.mail.permanentDelete, () => void permanentDeleteFromKeyboard(), { enabled: keyboardActions && keyboardTargetExists });
     useShortcut(
         SHORTCUTS.mail.markRead,
         () =>

package/dist/apps/shared/components/admin/setup/SetupWizard.d.ts

@@ -15,14 +15,14 @@ export declare const SETUP_STEPS: readonly [{
     readonly id: "escrow";
     readonly title: "Escrow";
     readonly intro: "Decide whether encrypted mail can be recovered by a trusted group of holders.";
-}, {
-    readonly id: "branding";
-    readonly title: "Branding";
-    readonly intro: "Make the sign-in page and apps look like your organization.";
 }, {
     readonly id: "mailboxes";
     readonly title: "Mailboxes";
     readonly intro: "Create the first mailboxes, starting with your own.";
+}, {
+    readonly id: "branding";
+    readonly title: "Branding";
+    readonly intro: "Make the sign-in page and apps look like your organization.";
 }];
 export type SetupStepId = (typeof SETUP_STEPS)[number]["id"];
 export interface SetupWizardProps {

package/dist/apps/shared/components/admin/setup/SetupWizard.js

@@ -36,8 +36,8 @@ export const SETUP_STEPS = [
     { id: "domain", title: "Domain", intro: "Add the domain this server receives mail for, then publish the DNS records below." },
     { id: "settings", title: "Server settings", intro: "Set the rules for encryption, how long mail is kept, and new mailboxes." },
     { id: "escrow", title: "Escrow", intro: "Decide whether encrypted mail can be recovered by a trusted group of holders." },
-    { id: "branding", title: "Branding", intro: "Make the sign-in page and apps look like your organization." },
     { id: "mailboxes", title: "Mailboxes", intro: "Create the first mailboxes, starting with your own." },
+    { id: "branding", title: "Branding", intro: "Make the sign-in page and apps look like your organization." },
 ];
 function isStepId(value) {
     return SETUP_STEPS.some((step) => step.id === value);