@bobfrankston/rmfmail 1.2.261 → 1.2.268

package/client/components/message-viewer.ts

@@ -15,7 +15,7 @@ import type { MenuItem } from "./context-menu.js";
 import type { ListMessage } from "../lib/message-state.js";
 import { updateMessageFlags as stateUpdateFlags } from "../lib/message-state.js";
 import { setRowSeen } from "./message-list.js";
-import { setSeen, seenOf } from "@bobfrankston/mailx-types";
+import { setSeen, seenOf, formatSender } from "@bobfrankston/mailx-types";
 
 // ── "Copy image" bridge ──
 // The preview iframe encodes the image and posts the bytes back; these track
@@ -1213,18 +1213,7 @@ export async function showMessage(accountId: string, uid: number, folderId?: num
         const fromEl = headerEl.querySelector(".mv-from")!;
         const toEl = headerEl.querySelector(".mv-to")!;
         fromEl.textContent = formatAddr(msg.from);
-        let toLine = `To: ${msg.to.map(formatAddr).join(", ")}`;
-        if (msg.cc?.length) toLine += `  Cc: ${msg.cc.map(formatAddr).join(", ")}`;
-        // Always-visible Delivered-To line — shown when present and not already
-        // covered by the To/Cc list. Critical for accounts with multiple aliases
-        // where you need to see which one received the message at a glance.
-        const toAddrs = (msg.to || []).map((a: { address: string }) => a.address.toLowerCase());
-        const ccAddrs = (msg.cc || []).map((a: { address: string }) => a.address.toLowerCase());
-        const dt = (msg.deliveredTo || "").toLowerCase();
-        if (msg.deliveredTo && !toAddrs.includes(dt) && !ccAddrs.includes(dt)) {
-            toLine += `  Delivered-To: ${msg.deliveredTo}`;
-        }
-        toEl.textContent = toLine;
+        setRecipientLine(toEl, msg.to, msg.cc, msg.deliveredTo);
         headerEl.querySelector(".mv-subject")!.textContent = msg.subject;
         document.dispatchEvent(new CustomEvent("mailx-message-shown", { detail: { accountId } }));
 
@@ -1235,7 +1224,12 @@ export async function showMessage(accountId: string, uid: number, folderId?: num
                 e.preventDefault();
                 const me = e as MouseEvent;
                 const items: MenuItem[] = [];
-                const addrs = el === fromEl ? [msg.from] : [...(msg.to || []), ...(msg.cc || [])];
+                const allAddrs = el === fromEl ? [msg.from] : [...(msg.to || []), ...(msg.cc || [])];
+                // Bulk mail can address hundreds of people; enumerating every
+                // one builds a menu thousands of items tall. Show the first
+                // few and say how many were left out.
+                const addrs = allAddrs.slice(0, CONTEXT_MENU_ADDR_CAP);
+                const omitted = allAddrs.length - addrs.length;
                 for (const addr of addrs) {
                     if (!addr?.address) continue;
                     const name = addr.name || "";
@@ -1318,6 +1312,13 @@ export async function showMessage(accountId: string, uid: number, folderId?: num
                     });
                     items.push({ label: "", action: () => {}, separator: true });
                 }
+                if (omitted > 0) {
+                    items.push({
+                        label: `… ${omitted} more recipients — copy the whole list`,
+                        action: () => navigator.clipboard.writeText(allAddrs.map(formatAddr).join(", ")),
+                    });
+                    items.push({ label: "", action: () => {}, separator: true });
+                }
                 items.push({ label: "Reply", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "reply" } })) });
                 items.push({ label: "Reply All", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "replyAll" } })) });
                 items.push({ label: "Forward", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "forward" } })) });
@@ -2139,8 +2140,80 @@ export async function showMessage(accountId: string, uid: number, folderId?: num
 }
 
 function formatAddr(addr: { name: string; address: string }): string {
-    if (addr.name) return `${addr.name} <${addr.address}>`;
-    return addr.address;
+    // formatSender collapses the redundant `"x@y.com" <x@y.com>` form (Microsoft
+    // 365 quarantine notices and plenty of bulk senders emit it; showing the
+    // same address twice reads as if two parties were involved — Bob
+    // 2026-08-19) and reports when a display name asserts a DIFFERENT address
+    // than the envelope's, which is the display-name spoof.
+    const { text, claimed } = formatSender(addr);
+    if (!claimed) return text;
+    // Never let the claim stand unqualified: name the real address explicitly.
+    return `${text} — display name claims ${claimed}`;
+}
+
+/** Above this many To+Cc addresses the recipient line is offered collapsed
+ *  with a "▸ N recipients" expander. Anything under it reads fine inline. */
+const MANY_RECIPIENTS = 6;
+
+/** Ceiling on how many addresses the header's right-click menu enumerates.
+ *  Each address contributes ~7 entries (copy name / copy address / contacts /
+ *  preferred / denylist / priority), so a 444-recipient bulk mail would build
+ *  a 3000-item menu taller than the screen and slow to open. */
+const CONTEXT_MENU_ADDR_CAP = 12;
+
+/**
+ * Fill the viewer's To/Cc line.
+ *
+ * Written as elements rather than a bare `textContent` because bulk mail can
+ * carry hundreds of recipients: the full text stays in the DOM (so find,
+ * select and copy still see every address) but `.mv-to-text` is line-clamped
+ * to two rows, with a toggle to expand. Unclamped, that one line grew the
+ * header past the whole viewer height and starved `.mv-body` to zero — see
+ * the `.mv-header` comment in components.css.
+ */
+function setRecipientLine(
+    toEl: Element,
+    to: { name: string; address: string }[] | undefined,
+    cc: { name: string; address: string }[] | undefined,
+    deliveredTo?: string,
+): void {
+    const toList = to || [];
+    const ccList = cc || [];
+    let line = `To: ${toList.map(formatAddr).join(", ")}`;
+    if (ccList.length) line += `  Cc: ${ccList.map(formatAddr).join(", ")}`;
+    // Always-visible Delivered-To — shown when present and not already covered
+    // by the To/Cc list. Critical for accounts with multiple aliases where you
+    // need to see which one received the message at a glance.
+    if (deliveredTo) {
+        const dt = deliveredTo.toLowerCase();
+        const covered = [...toList, ...ccList].some(a => a.address.toLowerCase() === dt);
+        if (!covered) line += `  Delivered-To: ${deliveredTo}`;
+    }
+
+    toEl.textContent = "";
+    toEl.classList.remove("mv-to-expanded");
+    const text = document.createElement("span");
+    text.className = "mv-to-text";
+    text.textContent = line;
+    toEl.append(text);
+
+    const count = toList.length + ccList.length;
+    // Offer the expander when the list is long by count, or when the clamp
+    // actually cut something off (a handful of very long display names).
+    const clamped = text.scrollHeight > text.clientHeight + 1;
+    if (count <= MANY_RECIPIENTS && !clamped) return;
+
+    const toggle = document.createElement("button");
+    toggle.className = "mv-to-toggle";
+    toggle.type = "button";
+    const label = count === 1 ? "1 recipient" : `${count} recipients`;
+    const paint = (open: boolean) => {
+        toggle.textContent = `${open ? "▾" : "▸"} ${label}`;
+        toggle.title = open ? "Collapse the recipient list" : "Show the full recipient list";
+    };
+    paint(false);
+    toggle.addEventListener("click", () => paint(toEl.classList.toggle("mv-to-expanded")));
+    toEl.append(toggle);
 }
 
 /** Render the viewer header from a list-row envelope (instant — no body
@@ -2156,11 +2229,7 @@ function renderHeaderFromEnvelope(headerEl: HTMLElement, env: any): void {
     const subjEl = headerEl.querySelector(".mv-subject");
     const dateEl = headerEl.querySelector(".mv-date");
     if (fromEl) fromEl.textContent = formatAddr(env.from);
-    if (toEl) {
-        let toLine = `To: ${(env.to || []).map(formatAddr).join(", ")}`;
-        if (env.cc?.length) toLine += `  Cc: ${env.cc.map(formatAddr).join(", ")}`;
-        toEl.textContent = toLine;
-    }
+    if (toEl) setRecipientLine(toEl, env.to, env.cc);
     if (subjEl) subjEl.textContent = env.subject || "";
     if (dateEl) {
         try { dateEl.textContent = new Date(env.date).toLocaleString(); }

package/client/compose/compose.bundle.js

@@ -2832,7 +2832,21 @@ async function createTinyMceEditor(container2, opts = {}) {
         // an undefined/oversized line-height plus per-line font-size
         // changes threw it off. A definite, tight line-height gives the
         // marker a stable baseline to sit under.
-        `body { font-family: system-ui, sans-serif; font-size: ${opts.fontSizePx ?? 14}px; line-height: 1.3; caret-color: #0a2647; }`,
+        // The editable body MUST fill the iframe. TinyMCE sizes the
+        // body to its content, so on a short/empty draft the body was
+        // ~18px inside a ~430px iframe and every point below the first
+        // line hit <html> instead — not editable. Consequences, both
+        // reported by Bob 2026-08-19 with a screenshot: WebView2 showed
+        // its PAGE context menu (Back / Refresh / Save as / Print) with
+        // no Cut/Copy/Paste, and msger's `ContextMenuTarget.IsEditable()`
+        // gate suppressed the Bold/Italic/…/View HTML source items — so
+        // right-clicking anywhere in an empty compose gave a menu with
+        // nothing useful in it. Filling the body makes the whole editor
+        // area editable, which is also what makes click-below-text put
+        // the caret at the end. Verified in a hit-test harness: body
+        // 18px → 429px, and points at 30/60/90% go html→body.
+        "html { height: 100%; }",
+        `body { font-family: system-ui, sans-serif; font-size: ${opts.fontSizePx ?? 14}px; line-height: 1.3; caret-color: #0a2647; min-height: 100%; box-sizing: border-box; }`,
         "blockquote { border-left: 3px solid #c0c8d0; margin: 0 0 0 4px; padding: 2px 0 2px 10px; color: #555; }",
         // Drop the 0.5em margin-gap above the reply block and the per-line
         // font-size shrink on the attribution line — both contributed to
@@ -6202,10 +6216,7 @@ var _parentInitListeners = [];
 var _msgEventCount = 0;
 window.addEventListener("message", (e) => {
   _msgEventCount++;
-  if (e.data?.type === "compose-init-ready") {
-    _parentInitReady = true;
-    for (const fn of _parentInitListeners.splice(0)) fn();
-  } else if (e.data?.type === "compose-init" && e.data.init) {
+  if (e.data?.type === "compose-init" && e.data.init) {
     if (!_postedInit) {
       try {
         logClientEvent("compose-init-received", { src: "postMessage" });