@rapidmx/web-client 0.2.0 → 0.3.0

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

@@ -2,7 +2,8 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import DOMPurify from "dompurify";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
     Attachment,
@@ -10,18 +11,43 @@ import {
     MessageClassification,
     ReceiptType,
     approveReceipt,
+    archiveMessage,
     attachmentContentUrl,
     cancelScheduledSend,
     classifyMessage,
     declineReceipt,
+    getMessageRawContent,
     recallMessage,
+    setMessageLabels,
 } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
 import { buildForwardQuote, buildReplyQuote, forwardSubject, replySubject } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
+import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
+import { MessageSecurityResult, evaluateMessageSecurity } from "@rapidmx/react-shared/crypto/messageSecurity.js";
+import { isLikelyMailingList } from "@rapidmx/react-shared/crypto/composeSecurity.js";
 import { useCompose } from "./compose/ComposeContext.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 
+/** Labels/styling for `specs/end-to-end_encryption.md`'s "Message Security Indicators" table - kept as
+ * plain data (not JSX) so `SecurityIndicator` below stays a trivial lookup. "Signature failed" MUST NOT
+ * read as a muted variant of "verified" (a failed signature is a stronger negative than no signature at
+ * all), and "Unprotected" MUST NOT read as an error - the class pairs below are chosen so those two
+ * never share styling with each other or with the verified states. */
+const SECURITY_INDICATOR: Record<MessageSecurityResult["state"], { label: string; className: string }> = {
+    unprotected: { label: "Unprotected", className: "bg-surface-alt text-text-muted" },
+    encrypted: { label: "Encrypted", className: "bg-primary/10 text-primary-dark" },
+    signed_verified: { label: "Signed & verified", className: "bg-success/10 text-success" },
+    encrypted_verified: { label: "Encrypted & verified", className: "bg-success/10 text-success" },
+    signature_failed: { label: "Signature failed", className: "bg-danger-bg text-danger" },
+};
+
+function SecurityIndicator({ state }: { state: MessageSecurityResult["state"] }) {
+    const { label, className } = SECURITY_INDICATOR[state];
+    return <span className={`text-xs font-medium shrink-0 py-1 px-2.5 rounded-pill ${className}`}>{label}</span>;
+}
+
 export interface MessageDetailPaneProps {
     message: Message | null;
     attachments: Attachment[];
@@ -61,6 +87,20 @@ export interface MessageDetailPaneProps {
      * `isInbox`): `deliveryReceiptPending`/`readReceiptPending` already live directly on `message` and are
      * only ever `true` on a real delivered copy, so the banner below is self-gating. */
     onReceiptHandled?: (updated: Message) => void;
+    /** Called with the server's updated copy (now filed under the mailbox's Archive folder) after a
+     * successful archive — mirrors `onRecalled`'s identical shape. Archiving itself is offered for any
+     * message except one currently in Drafts or Outbox (mirrors `BaseMessageRoute.archive()`'s own
+     * server-side 400 guard); Drafts is detected via `draftsFolderUid` (already passed by every caller
+     * for the Outbox-cancel flow) rather than a new prop. */
+    onArchived?: (updated: Message) => void;
+    /** Every label defined in this message's mailbox, for the label-assignment popover below — each
+     * caller fetches its own mailbox's labels the same way it already resolves `draftsFolderUid`
+     * (`listLabels()`). Absent/empty simply hides the Labels control - there's nothing to assign. */
+    labels?: Label[];
+    /** Called with the server's updated copy (carrying the new `labelUids`) after successfully toggling
+     * a label — always patches in place, never removes from a caller's list (unlike `onArchived`):
+     * changing labels never moves a message between folders. */
+    onLabelsChanged?: (updated: Message) => void;
 }
 
 function formatBytes(bytes: number): string {
@@ -88,11 +128,19 @@ export default function MessageDetailPane({
     isInbox,
     onClassified,
     onReceiptHandled,
+    onArchived,
+    labels,
+    onLabelsChanged,
 }: MessageDetailPaneProps) {
     const { openCompose } = useCompose();
     const [confirming, setConfirming] = useState(false);
     const [recalling, setRecalling] = useState(false);
     const [canceling, setCanceling] = useState(false);
+    const [archiving, setArchiving] = useState(false);
+    const [archiveError, setArchiveError] = useState<string | null>(null);
+    const [labelsOpen, setLabelsOpen] = useState(false);
+    const [togglingLabelUid, setTogglingLabelUid] = useState<string | null>(null);
+    const [labelsError, setLabelsError] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
     // Kept separate from `error` (the Recall flow's own state) since this renders inline in the main
     // pane rather than inside a confirmation modal — the two flows never need to share one message.
@@ -105,6 +153,36 @@ export default function MessageDetailPane({
     // wouldn't distinguish which row's buttons should show a loading state.
     const [receiptBusy, setReceiptBusy] = useState<ReceiptType | null>(null);
     const [receiptError, setReceiptError] = useState<string | null>(null);
+    const [security, setSecurity] = useState<MessageSecurityResult | null>(null);
+
+    // Evaluates every message's security state, not just ones flagged `encrypted` - a detached
+    // `multipart/signed` message needs its raw MIME read too (a sanitized HTML body never carries the
+    // signature part) to tell "Signed & verified" apart from plain "Unprotected". A fetch/parse failure
+    // degrades to "Unprotected" rather than surfacing an error - the spec treats that as this module's
+    // safe default, not a distinct failure state of its own.
+    useEffect(() => {
+        if (!message) {
+            setSecurity(null);
+            return;
+        }
+        let cancelled = false;
+        setSecurity(null);
+        getMessageRawContent(message.uid)
+            .then((rawMime) => evaluateMessageSecurity(rawMime, getUnlockedKeys(message.mailboxUid)))
+            .then((result) => {
+                if (!cancelled) {
+                    setSecurity(result);
+                }
+            })
+            .catch(() => {
+                if (!cancelled) {
+                    setSecurity({ state: "unprotected" });
+                }
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [message?.uid]);
 
     if (!message) {
         return <p className="p-8 text-sm text-text-muted">Select a message to read it.</p>;
@@ -120,6 +198,7 @@ export default function MessageDetailPane({
             subject: replySubject(message!.subject),
             quotedHtml: buildReplyQuote(message!),
             signatureContext: "reply_forward",
+            suppressSigning: isLikelyMailingList({ listUnsubscribe: message!.listUnsubscribeHeader }),
         });
     }
 
@@ -132,6 +211,7 @@ export default function MessageDetailPane({
             subject: replySubject(message!.subject),
             quotedHtml: buildReplyQuote(message!),
             signatureContext: "reply_forward",
+            suppressSigning: isLikelyMailingList({ listUnsubscribe: message!.listUnsubscribeHeader }),
         });
     }
 
@@ -179,6 +259,41 @@ export default function MessageDetailPane({
         }
     }
 
+    // Only ever invoked from the Archive button below, which itself only renders once `message` is
+    // loaded and this isn't a Drafts/Outbox message (the button's own guard mirrors
+    // `BaseMessageRoute.archive()`'s server-side 400) — same real invariant as `handleRecall` above.
+    async function handleArchive() {
+        setArchiving(true);
+        setArchiveError(null);
+        try {
+            const updated = await archiveMessage(message!.uid);
+            onArchived?.(updated);
+        } catch (err) {
+            setArchiveError(err instanceof ApiRequestError ? err.message : "Could not archive this message.");
+        } finally {
+            setArchiving(false);
+        }
+    }
+
+    // Only ever invoked from a checkbox in the Labels popover below, which itself only renders once
+    // `message` is loaded — auto-saves on every toggle (no separate "Save" step), computing the full
+    // new `labelUids` set from the message's current one since `setMessageLabels()` replaces the whole
+    // list rather than patching a single entry.
+    async function handleToggleLabel(labelUid: string) {
+        setTogglingLabelUid(labelUid);
+        setLabelsError(null);
+        try {
+            const current = message!.labelUids ?? [];
+            const next = current.includes(labelUid) ? current.filter((uid) => uid !== labelUid) : [...current, labelUid];
+            const updated = await setMessageLabels(message!, next);
+            onLabelsChanged?.(updated);
+        } catch (err) {
+            setLabelsError(err instanceof ApiRequestError ? err.message : "Could not update this message's labels.");
+        } finally {
+            setTogglingLabelUid(null);
+        }
+    }
+
     // Only ever invoked from the classification button below, which itself only renders once `message`
     // is loaded and `isInbox` is true — the non-null assertion reflects the same real invariant as
     // `handleRecall`/`handleCancelScheduledSend` above.
@@ -219,7 +334,10 @@ export default function MessageDetailPane({
                     </a>
                 )}
                 <div className="flex items-start justify-between gap-3">
-                    <h1 className="text-lg font-bold tracking-tight">{message.subject || "(no subject)"}</h1>
+                    <div className="flex items-center gap-2 min-w-0">
+                        <h1 className="text-lg font-bold tracking-tight truncate">{message.subject || "(no subject)"}</h1>
+                        {security && <SecurityIndicator state={security.state} />}
+                    </div>
                     {isSentItems &&
                         (message.recallRequestedAt ? (
                             <span className="text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt">
@@ -258,6 +376,15 @@ export default function MessageDetailPane({
                         <Alert>{cancelError}</Alert>
                     </div>
                 )}
+                {security?.headerTamperDetected && (
+                    <div className="mt-2">
+                        <Alert>
+                            This message's visible From/To/Cc/Date/Subject don't match what the sender actually signed or
+                            encrypted — an intermediary may have altered them after sending. Treat the fields shown above with
+                            caution.
+                        </Alert>
+                    </div>
+                )}
                 <p className="text-sm text-text-muted mt-1">
                     From {message.from.displayName || message.from.address} &middot;{" "}
                     {new Date(message.receivedDate).toLocaleString()}
@@ -275,7 +402,45 @@ export default function MessageDetailPane({
                     <Button type="button" variant="secondary" className="!w-auto" onClick={handleForward}>
                         Forward
                     </Button>
+                    {!isOutbox && message.folderUid !== draftsFolderUid && (
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto"
+                            loading={archiving}
+                            disabled={archiving}
+                            onClick={handleArchive}
+                        >
+                            Archive
+                        </Button>
+                    )}
+                    {labels && labels.length > 0 && (
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={() => setLabelsOpen(true)}>
+                            Labels
+                        </Button>
+                    )}
                 </div>
+                {archiveError && (
+                    <div className="mt-2">
+                        <Alert>{archiveError}</Alert>
+                    </div>
+                )}
+                {labels && (message.labelUids?.length ?? 0) > 0 && (
+                    <div className="flex flex-wrap items-center gap-1.5 mt-2">
+                        {message
+                            .labelUids!.map((uid) => labels.find((l) => l.uid === uid))
+                            .filter((l): l is Label => !!l)
+                            .map((l) => (
+                                <span
+                                    key={l.uid}
+                                    className="inline-flex items-center gap-1.5 text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt"
+                                >
+                                    <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: l.color ?? "#6366f1" }} />
+                                    {l.name}
+                                </span>
+                            ))}
+                    </div>
+                )}
                 {isInbox && (
                     <div className="flex flex-wrap items-center gap-2 mt-2">
                         <Button
@@ -355,13 +520,31 @@ export default function MessageDetailPane({
                     </ul>
                 )}
             </div>
-            <iframe
-                key={message.uid}
-                title={message.subject || "Message content"}
-                src={`/api/mail/messages/${encodeURIComponent(message.uid)}/content`}
-                sandbox=""
-                className="flex-1 w-full border-0"
-            />
+            {security?.decryptError && (
+                <div className="px-4 pt-2">
+                    <Alert>{security.decryptError}</Alert>
+                </div>
+            )}
+            {security?.html !== undefined ? (
+                // A decrypted/verified body never came through the server's own sanitize-html pass (it
+                // couldn't - the server never saw the plaintext) - DOMPurify sanitizes it here, client-side,
+                // before it ever touches the DOM, on top of (not instead of) the iframe's own `sandbox=""`.
+                <iframe
+                    key={message.uid}
+                    title={message.subject || "Message content"}
+                    srcDoc={DOMPurify.sanitize(security.html)}
+                    sandbox=""
+                    className="flex-1 w-full border-0"
+                />
+            ) : (
+                <iframe
+                    key={message.uid}
+                    title={message.subject || "Message content"}
+                    src={`/api/mail/messages/${encodeURIComponent(message.uid)}/content`}
+                    sandbox=""
+                    className="flex-1 w-full border-0"
+                />
+            )}
 
             <Modal open={confirming} onClose={() => setConfirming(false)} title="Recall this message?">
                 <p className="text-sm text-text-muted mb-4">
@@ -385,6 +568,28 @@ export default function MessageDetailPane({
                     </Button>
                 </div>
             </Modal>
+            <Modal open={labelsOpen} onClose={() => setLabelsOpen(false)} title="Labels">
+                {labelsError && <Alert>{labelsError}</Alert>}
+                <ul className="flex flex-col gap-1">
+                    {(labels ?? []).map((l) => {
+                        const checked = message.labelUids?.includes(l.uid) ?? false;
+                        return (
+                            <li key={l.uid}>
+                                <label className="flex items-center gap-2 py-1.5 px-1 text-sm rounded-sm hover:bg-surface-alt">
+                                    <input
+                                        type="checkbox"
+                                        checked={checked}
+                                        disabled={togglingLabelUid === l.uid}
+                                        onChange={() => handleToggleLabel(l.uid)}
+                                    />
+                                    <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: l.color ?? "#6366f1" }} />
+                                    {l.name}
+                                </label>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </Modal>
         </div>
     );
 }

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

@@ -18,6 +18,8 @@ export interface ComposeSession {
     /** Which of a signature's two "default" flags to resolve against — `"new"` (the default) uses
      * `isDefaultForNewMessages`, `"reply_forward"` uses `isDefaultForReplyForward`. */
     signatureContext: "new" | "reply_forward";
+    /** See `OpenComposeInput.suppressSigning`'s own doc comment. */
+    suppressSigning?: boolean;
     minimized: boolean;
 }
 
@@ -34,6 +36,12 @@ export interface OpenComposeInput {
     /** See `ComposeSession.signatureContext`'s own doc comment. Defaults to `"new"` — every existing
      * caller (Contacts' "Email" action, the folder-sidebar "Compose" button) is a fresh compose. */
     signatureContext?: "new" | "reply_forward";
+    /** `true` when the caller (`MessageDetailPane.tsx`'s Reply/Reply All) has already determined, via
+     * `composeSecurity.ts`'s `isLikelyMailingList()`, that the message being replied to came from a
+     * mailing list — a list that appends a footer after signing invalidates the signature (spec's own
+     * "Mailing lists" note), so the new compose window defaults its Sign toggle off rather than on.
+     * The user can still turn it back on manually; this only changes the *default*. */
+    suppressSigning?: boolean;
 }
 
 export interface ComposeContextValue {
@@ -59,7 +67,7 @@ export default function ComposeProvider({ children }: PropsWithChildren) {
     const [sessions, setSessions] = useState<ComposeSession[]>([]);
     const isMobile = useIsMobile();
 
-    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new" }: OpenComposeInput) {
+    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning }: OpenComposeInput) {
         setSessions((prev) => [
             ...prev,
             {
@@ -70,6 +78,7 @@ export default function ComposeProvider({ children }: PropsWithChildren) {
                 initialSubject: subject,
                 initialQuotedHtml: quotedHtml,
                 signatureContext,
+                suppressSigning,
                 minimized: false,
             },
         ]);