@bobfrankston/rmfmail 1.2.261 → 1.2.263

package/client/components/message-viewer.js

@@ -1339,19 +1339,7 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
         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) => a.address.toLowerCase());
-        const ccAddrs = (msg.cc || []).map((a) => 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 } }));
         // Right-click on email addresses in header: copy name, copy address,
@@ -1361,7 +1349,12 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
                 e.preventDefault();
                 const me = e;
                 const items = [];
-                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;
@@ -1452,6 +1445,13 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
                     });
                     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" } })) });
@@ -2311,6 +2311,63 @@ function formatAddr(addr) {
         return `${addr.name} <${addr.address}>`;
     return addr.address;
 }
+/** 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, to, cc, deliveredTo) {
+    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) => {
+        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
  *  fetch awaited). Used to populate the header pane the moment a message
  *  is clicked so the user always sees something actionable; getMessage()
@@ -2325,12 +2382,8 @@ function renderHeaderFromEnvelope(headerEl, env) {
     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) {