@bobfrankston/mailx 1.0.395 → 1.0.405

package/client/components/message-list.js

@@ -24,15 +24,46 @@ let touchWasScroll = false;
 // (text columns default asc, date defaults desc).
 let currentSort = "date";
 let currentSortDir = "desc";
-/** Atomic focus: update shared state + notify viewer in one call.
- *  First slice of S56 (row-objects-own-preview) — consolidates the two
- *  parallel selection paths (state.select + onMessageSelect) so the eventual
- *  Row-class migration touches exactly one call site. The viewer's `gen`
- *  token still cancels stale fetches; this just makes the transition
- *  indivisible at the caller level. */
+/** S56 refactor slice — per-row focus/unfocus.
+ *
+ *  Every rendered message row has an associated Row record tracking the DOM
+ *  element + account/msg pair. `focusRow` runs the atomic transition:
+ *
+ *    1. unfocus the previously-focused row (clears `.selected` class)
+ *    2. mark the new row `.selected`
+ *    3. update shared state.selected + notify viewer
+ *
+ *  The viewer's `showMessageGeneration` token still cancels stale body
+ *  fetches during the transition — that's the "async cancellation" piece of
+ *  S56. The "atomic DOM transition" piece is now owned here.
+ *
+ *  Full abort-signal plumbing through getMessage → fetchMessageBody is a
+ *  separate follow-up; for now the gen token does the job. */
+let currentFocusedRow = null;
+function focusRow(row, accountId, msg) {
+    if (currentFocusedRow && currentFocusedRow !== row) {
+        // Unfocus the previous atomically — clearing .selected AND
+        // triggering the viewer's stale-fetch cancel (via the bump inside
+        // the next showMessage() call).
+        currentFocusedRow.classList.remove("selected");
+    }
+    if (!row.classList.contains("selected"))
+        row.classList.add("selected");
+    currentFocusedRow = row;
+    state.select(msg);
+    onMessageSelect(accountId, msg.uid, msg.folderId);
+}
+/** Back-compat shim — some call sites still use `focusMessage(accountId, msg)`
+ *  without a DOM row (e.g. thread-popup click). Fall back to the previous
+ *  behavior (state + viewer only) so nothing regresses. */
 function focusMessage(accountId, msg) {
     state.select(msg);
     onMessageSelect(accountId, msg.uid, msg.folderId);
+    // Clear the focused-row reference since we don't have a DOM row here
+    // — the next row click will unfocus whatever was selected anyway.
+    if (currentFocusedRow)
+        currentFocusedRow.classList.remove("selected");
+    currentFocusedRow = null;
 }
 /** Flip the "not-downloaded" indicator off for rows whose bodies just cached.
  *  Called from the bodyCached service event — covers both background prefetch
@@ -64,6 +95,21 @@ function clearSelection() {
     const body = document.getElementById("ml-body");
     if (body)
         body.querySelectorAll(".ml-row.selected").forEach(r => r.classList.remove("selected"));
+    // S56 seam: the focused-row invariant is "the Row whose .selected is
+    // currently mine". clearSelection wipes all .selected, so the invariant
+    // would break if we kept a stale pointer.
+    currentFocusedRow = null;
+}
+/** Deterministic sender-avatar color from a seed string (typically the
+ *  email address). Hash → hue at 12 evenly-spaced positions on the wheel.
+ *  Saturation + lightness fixed so all colors carry the same visual weight
+ *  regardless of hue, and so light/dark themes don't have to override. */
+function senderColor(seed) {
+    let h = 0;
+    for (let i = 0; i < seed.length; i++)
+        h = (h * 31 + seed.charCodeAt(i)) | 0;
+    const hue = ((Math.abs(h) % 12) * 30) + 15; // 15, 45, 75, …, 345
+    return `oklch(0.62 0.14 ${hue})`;
 }
 /** Exit multi-select mode (entered via touch long-press). Clears selection
  *  and the sticky body flag so subsequent taps open messages again. */
@@ -73,6 +119,28 @@ function exitMultiSelect() {
         return;
     body.classList.remove("multi-select-on");
     clearSelection();
+    updateBulkBar();
+}
+/** Refresh the bulk-actions bar visibility + "N selected" label. Called
+ *  whenever selection or mode changes. Visible either when 2+ rows are
+ *  selected (desktop Ctrl/Shift-click multi-selection) OR when touch
+ *  multi-select mode is active (even with a single row, so the user sees
+ *  the bar as the mode indicator). */
+function updateBulkBar() {
+    const body = document.getElementById("ml-body");
+    const bar = document.getElementById("ml-bulkbar");
+    const count = document.getElementById("ml-bulk-count");
+    if (!body || !bar || !count)
+        return;
+    const active = body.classList.contains("multi-select-on");
+    const n = body.querySelectorAll(".ml-row.selected").length;
+    if (n >= 2 || (active && n > 0)) {
+        bar.hidden = false;
+        count.textContent = `${n} selected`;
+    }
+    else {
+        bar.hidden = true;
+    }
 }
 // Escape key + click-outside-list exit multi-select mode. Attached once
 // (idempotent because document only has one listener scope per handler).
@@ -88,10 +156,89 @@ if (!window.__mailxMultiSelectWired) {
             return;
         const target = e.target;
         // A tap on a row is handled by the row's own click listener; only
-        // exit when the tap is on neutral ground (outside the list entirely).
-        if (!target.closest(".ml-row"))
+        // exit when the tap is on neutral ground (outside the list entirely
+        // and not on the bulk bar).
+        if (!target.closest(".ml-row") && !target.closest(".ml-bulkbar"))
             exitMultiSelect();
     }, true);
+    // Wire bulk-bar buttons — each delegates to the single-message handlers
+    // but iterates over every .ml-row.selected in the body.
+    document.addEventListener("click", async (e) => {
+        const target = e.target;
+        if (target.closest("#ml-bulk-cancel")) {
+            exitMultiSelect();
+            return;
+        }
+        const btn = target.closest(".ml-bulk-btn");
+        if (!btn)
+            return;
+        const op = btn.dataset.bulk;
+        const body = document.getElementById("ml-body");
+        if (!body?.classList.contains("multi-select-on"))
+            return;
+        const selected = getSelectedMessages();
+        if (selected.length === 0)
+            return;
+        try {
+            if (op === "delete") {
+                // Delegate to the existing Del-key handler so the same
+                // tombstone/undo logic runs for bulk deletes.
+                document.dispatchEvent(new CustomEvent("mailx-delete"));
+            }
+            else if (op === "flag") {
+                for (const m of selected) {
+                    const row = body.querySelector(`.ml-row[data-account-id="${m.accountId}"][data-uid="${m.uid}"]`);
+                    if (!row)
+                        continue;
+                    const msgData = state.getMessages().find((x) => x.uid === m.uid && (x.accountId || "") === m.accountId);
+                    if (!msgData)
+                        continue;
+                    const isFlagged = msgData.flags?.includes("\\Flagged");
+                    const newFlags = isFlagged
+                        ? msgData.flags.filter((f) => f !== "\\Flagged")
+                        : [...(msgData.flags || []), "\\Flagged"];
+                    await updateFlags(m.accountId, m.uid, newFlags);
+                    msgData.flags = newFlags;
+                    state.updateMessageFlags(m.accountId, m.uid, newFlags);
+                    row.classList.toggle("flagged");
+                }
+            }
+            else if (op === "markread") {
+                for (const m of selected) {
+                    const row = body.querySelector(`.ml-row[data-account-id="${m.accountId}"][data-uid="${m.uid}"]`);
+                    if (!row)
+                        continue;
+                    const msgData = state.getMessages().find((x) => x.uid === m.uid && (x.accountId || "") === m.accountId);
+                    if (!msgData)
+                        continue;
+                    if (msgData.flags?.includes("\\Seen"))
+                        continue;
+                    const newFlags = [...(msgData.flags || []), "\\Seen"];
+                    await updateFlags(m.accountId, m.uid, newFlags);
+                    msgData.flags = newFlags;
+                    state.updateMessageFlags(m.accountId, m.uid, newFlags);
+                    row.classList.remove("unread");
+                }
+            }
+            else if (op === "move") {
+                // Use the first selection's account/folder for the picker scope.
+                const { accountId, folderId } = selected[0];
+                const pick = await pickFolder(accountId, { excludeFolderIds: [folderId] });
+                if (!pick)
+                    return;
+                const uids = selected.map(s => s.uid);
+                await apiMoveMessages(accountId, uids, pick.folderId);
+                state.removeMessages(uids.map(u => ({ accountId, uid: u })));
+            }
+            else if (op === "spam") {
+                document.getElementById("btn-spam")?.click();
+            }
+            exitMultiSelect();
+        }
+        catch (err) {
+            alert(`Bulk ${op} failed: ${err.message || err}`);
+        }
+    });
 }
 function selectRange(from, to) {
     const body = document.getElementById("ml-body");
@@ -380,6 +527,10 @@ export async function loadSearchResults(query, scope = "all", accountId = "", fo
 export async function loadMessages(accountId, folderId, page = 1, specialUse = "", autoSelect = true) {
     searchMode = false;
     unifiedMode = false;
+    // Folder switch clears any in-progress multi-select — carrying a "3
+    // selected" state across folders would lie about what rows the bulk
+    // buttons would act on.
+    exitMultiSelect();
     // specialUse is either the DB tag ("sent"/"drafts"/"outbox") or the
     // folder path lowercased (folder-tree fallback when tag is missing — common
     // on Dovecot which doesn't advertise \Sent). Match both cases.
@@ -583,6 +734,41 @@ function appendMessages(body, accountId, items) {
         row.dataset.folderId = String(msg.folderId);
         if (msg.threadId)
             row.dataset.threadId = msg.threadId;
+        // Sender avatar \u2014 Thunderbird-style colored circle with the first
+        // initial of the sender's display name. Doubles as the multi-select
+        // affordance: in `multi-select-on` mode, the avatar swaps to a
+        // checkmark via CSS. Color is derived deterministically from the
+        // address so the same sender keeps the same color across rows.
+        const fromName = (showToInsteadOfFrom && msg.to?.length)
+            ? (msg.to[0].name || msg.to[0].address || "?")
+            : (msg.from?.name || msg.from?.address || "?");
+        const seedAddr = (msg.from?.address || msg.from?.name || "?").toLowerCase();
+        const initial = (fromName.replace(/^[\W_]+/, "") || "?").charAt(0).toUpperCase();
+        const avatar = document.createElement("span");
+        avatar.className = "ml-avatar";
+        avatar.textContent = initial;
+        avatar.style.background = senderColor(seedAddr);
+        avatar.title = msg.from?.address || "";
+        // Tapping the avatar enters multi-select mode (or toggles in it,
+        // mirroring Thunderbird/Gmail). Click bubbles to the row otherwise,
+        // which would open the message — stopPropagation here keeps the
+        // avatar a dedicated selection affordance.
+        avatar.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const body = document.getElementById("ml-body");
+            if (!body)
+                return;
+            if (body.classList.contains("multi-select-on")) {
+                row.classList.toggle("selected");
+            }
+            else {
+                clearSelection();
+                row.classList.add("selected");
+                body.classList.add("multi-select-on");
+            }
+            lastClickedRow = row;
+            updateBulkBar();
+        });
         const flag = document.createElement("span");
         flag.className = "ml-flag";
         flag.textContent = msg.flags.includes("\\Flagged") ? "\u2605" : "\u2606";
@@ -611,6 +797,15 @@ function appendMessages(body, accountId, items) {
             folderTag.title = `In folder: ${msg.folderName}`;
             from.prepend(folderTag);
         }
+        // Unified inbox: same Message-ID exists under >=2 accounts → ⇆ badge.
+        // Tooltip names the count so the user knows "this appears on N".
+        if (msg.dupeCount >= 2) {
+            const dupe = document.createElement("span");
+            dupe.className = "ml-dupe-tag";
+            dupe.textContent = "⇆";
+            dupe.title = `Same message on ${msg.dupeCount} accounts`;
+            from.prepend(dupe);
+        }
         const subject = document.createElement("span");
         subject.className = "ml-subject";
         subject.innerHTML = escapeHtml(msg.subject);
@@ -655,6 +850,7 @@ function appendMessages(body, accountId, items) {
             }
             catch { /* ignore */ }
         });
+        row.appendChild(avatar);
         row.appendChild(flag);
         row.appendChild(from);
         row.appendChild(date);
@@ -671,22 +867,28 @@ function appendMessages(body, accountId, items) {
             if (body?.classList.contains("multi-select-on")) {
                 row.classList.toggle("selected");
                 lastClickedRow = row;
+                updateBulkBar();
                 return;
             }
             if (e.shiftKey && lastClickedRow) {
                 clearSelection();
                 selectRange(lastClickedRow, row);
+                lastClickedRow = row;
+                row.classList.remove("unread");
+                focusMessage(msgAccountId, msg);
             }
             else if (e.ctrlKey || e.metaKey) {
                 row.classList.toggle("selected");
+                lastClickedRow = row;
             }
             else {
+                // Atomic unfocus-previous + focus-this.
                 clearSelection();
-                row.classList.add("selected");
+                focusRow(row, msgAccountId, msg);
+                lastClickedRow = row;
+                row.classList.remove("unread");
             }
-            lastClickedRow = row;
-            row.classList.remove("unread");
-            focusMessage(msgAccountId, msg);
+            updateBulkBar();
         });
         // Q64: double-click → pop out the message in a floating overlay so
         // the user can read it without losing the selected list context.
@@ -756,6 +958,7 @@ function appendMessages(body, accountId, items) {
                     body?.classList.add("multi-select-on");
                 }
                 lastClickedRow = row;
+                updateBulkBar();
                 // Haptic hint if the platform supports it (Android WebView does).
                 try {
                     navigator.vibrate?.(20);
@@ -859,10 +1062,6 @@ function appendMessages(body, accountId, items) {
                     label: "⚠ Mark as spam",
                     action: () => document.getElementById("btn-spam")?.click(),
                 },
-                {
-                    label: "🚫 Report spam",
-                    action: () => document.getElementById("btn-spam-report")?.click(),
-                },
                 { label: "", action: () => { }, separator: true },
                 {
                     label: "Copy Message-ID",

package/client/components/message-viewer.js

@@ -191,6 +191,17 @@ function installPreviewControls(iframe) {
             const pct = Math.round(previewZoom * 100);
             const sel = doc.defaultView?.getSelection();
             const selectedText = sel?.toString().trim() || "";
+            const runSearch = (query) => {
+                const input = document.getElementById("search-input");
+                if (!input)
+                    return;
+                input.value = query;
+                // Trigger the existing search path — Enter keydown hits the
+                // immediate branch in app.ts's handler.
+                input.dispatchEvent(new Event("input"));
+                input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+                input.focus();
+            };
             const items = [
                 { label: "Copy", action: () => doc.execCommand("copy") },
                 { label: "Select all", action: () => {
@@ -202,14 +213,35 @@ function installPreviewControls(iframe) {
                         s.removeAllRanges();
                         s.addRange(range);
                     } },
-                { label: "", action: () => { }, separator: true },
-                { label: selectedText ? "Translate selection" : "Translate message",
-                    action: () => translateAndShow(selectedText || (doc.body?.innerText || "")) },
-                { label: "", action: () => { }, separator: true },
-                { label: "Zoom in", action: () => setZoom(previewZoom + ZOOM_STEP, doc) },
-                { label: "Zoom out", action: () => setZoom(previewZoom - ZOOM_STEP, doc) },
-                { label: `Reset zoom (${pct}%)`, action: () => setZoom(1, doc) },
             ];
+            if (selectedText) {
+                items.push({ label: "", action: () => { }, separator: true }, 
+                // Truncate long selections in the label so the menu doesn't
+                // blow out; full string is what we search for.
+                { label: `Search messages for "${selectedText.length > 40 ? selectedText.slice(0, 40) + "…" : selectedText}"`,
+                    action: () => runSearch(selectedText) }, {
+                    label: "Copy as quoted (> prefix)",
+                    action: async () => {
+                        // Prefix each line with "> " (RFC 3676 reply-quote).
+                        // Useful when pasting a snippet into a compose window
+                        // without the usual full-message blockquote wrapping.
+                        const quoted = selectedText.split(/\r?\n/).map(l => "> " + l).join("\n");
+                        try {
+                            await navigator.clipboard.writeText(quoted);
+                        }
+                        catch { /* */ }
+                    },
+                });
+            }
+            const senderAddr = currentMessage?.from?.address || "";
+            if (senderAddr) {
+                items.push({
+                    label: `Search messages from ${senderAddr}`,
+                    action: () => runSearch(`from:${senderAddr}`),
+                });
+            }
+            items.push({ label: "", action: () => { }, separator: true }, { label: selectedText ? "Translate selection" : "Translate message",
+                action: () => translateAndShow(selectedText || (doc.body?.innerText || "")) }, { label: "", action: () => { }, separator: true }, { label: "Zoom in", action: () => setZoom(previewZoom + ZOOM_STEP, doc) }, { label: "Zoom out", action: () => setZoom(previewZoom - ZOOM_STEP, doc) }, { label: `Reset zoom (${pct}%)`, action: () => setZoom(1, doc) });
             showContextMenu(x, y, items);
         });
     };
@@ -239,8 +271,24 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
     const headerEl = document.getElementById("mv-header");
     const bodyEl = document.getElementById("mv-body");
     const attEl = document.getElementById("mv-attachments");
-    bodyEl.innerHTML = `<div class="mv-empty">Fetching message body...</div>`;
-    headerEl.hidden = true;
+    // Envelope-first render: the row the user just clicked already has the
+    // subject / from / to / cc / date / preview in the message-state. Use
+    // that to populate the header + a snippet placeholder IMMEDIATELY so
+    // tapping a message never shows just "Fetching message body..." with
+    // nothing actionable. The full getMessage() call (which might block on
+    // a slow IMAP body fetch) only fills in the body and attachments.
+    const cached = state.getSelected();
+    if (cached && cached.uid === uid && (cached.accountId || accountId) === accountId) {
+        try {
+            renderHeaderFromEnvelope(headerEl, cached);
+        }
+        catch { /* */ }
+        bodyEl.innerHTML = `<div class="mv-empty">Fetching message body…<br><br><span style="color:var(--color-text-muted);font-size:0.9em">${escapeHtml(cached.preview || "")}</span></div>`;
+    }
+    else {
+        bodyEl.innerHTML = `<div class="mv-empty">Fetching message body...</div>`;
+        headerEl.hidden = true;
+    }
     attEl.hidden = true;
     try {
         const msg = await getMessage(accountId, uid, false, folderId);
@@ -697,6 +745,29 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
                         console.error(`Attachment download failed: ${err.message}`);
                     }
                 });
+                // Drag the chip to an external target (Explorer / Finder / Files app)
+                // to drop the file there. Uses the Chromium `DownloadURL` dataTransfer
+                // format: "mime:filename:blob-url". We fetch the attachment first so
+                // the blob URL is valid by the time the drop lands.
+                chip.draggable = true;
+                chip.addEventListener("dragstart", async (e) => {
+                    if (!e.dataTransfer)
+                        return;
+                    try {
+                        const data = await getAttachment(accountId, uid, i, msg.folderId);
+                        const bytes = Uint8Array.from(atob(data.content), c => c.charCodeAt(0));
+                        const blob = new Blob([bytes], { type: data.contentType || "application/octet-stream" });
+                        const url = URL.createObjectURL(blob);
+                        // Sanitize filename: no path separators, no newlines.
+                        const safeName = (att.filename || "attachment").replace(/[\r\n"\/\\]/g, "_");
+                        const downloadUrl = `${data.contentType || "application/octet-stream"}:${safeName}:${url}`;
+                        e.dataTransfer.setData("DownloadURL", downloadUrl);
+                        e.dataTransfer.effectAllowed = "copy";
+                    }
+                    catch (err) {
+                        console.error(`Attachment drag-out failed: ${err.message || err}`);
+                    }
+                });
                 attEl.appendChild(chip);
             }
         }
@@ -731,6 +802,40 @@ function formatAddr(addr) {
         return `${addr.name} <${addr.address}>`;
     return addr.address;
 }
+/** 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()
+ *  later overwrites the same fields with the authoritative values from the
+ *  body parse (which can add Cc, Delivered-To, etc. that the list row
+ *  doesn't track). */
+function renderHeaderFromEnvelope(headerEl, env) {
+    headerEl.hidden = false;
+    const fromEl = headerEl.querySelector(".mv-from");
+    const toEl = headerEl.querySelector(".mv-to");
+    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 (subjEl)
+        subjEl.textContent = env.subject || "";
+    if (dateEl) {
+        try {
+            dateEl.textContent = new Date(env.date).toLocaleString();
+        }
+        catch {
+            dateEl.textContent = "";
+        }
+    }
+}
+function escapeHtml(s) {
+    return (s || "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]));
+}
 /** Convert plain text URLs into clickable links, escaping HTML */
 function linkifyText(text) {
     // Escape HTML first
@@ -922,15 +1027,12 @@ ${csp}
     document.addEventListener("touchcancel", function () {
         lastTouchTarget = null; touchMoved = false;
     }, { passive: true, capture: true });
-    document.addEventListener("mouseover", function (e) {
-        var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
-        if (a) {
-            var r = a.getBoundingClientRect();
-            window.parent.postMessage({ type: "linkHover", url: a.href, rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom } }, "*");
-        } else {
-            window.parent.postMessage({ type: "linkHover", url: "" }, "*");
-        }
-    });
+    // Link hover popover removed 2026-04-24 — user feedback: it persisted
+    // over the message body when the dismissers (mousedown/scroll/blur)
+    // didn't fire from inside the iframe, leaving a multi-line URL hanging
+    // in the middle of the reading pane. Right-click (desktop) and long-
+    // press (touch) on a link still open the existing C29 menu with Open /
+    // Save-as / Copy URL / Copy link-text.
     // C29: right-click on a link → ask parent for the Open/Save/Copy menu.
     document.addEventListener("contextmenu", function (e) {
         var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;