@bobfrankston/mailx 1.0.465 → 1.0.500

package/client/components/message-list.js

@@ -4,6 +4,7 @@
  */
 import { getMessages as apiGetMessages, getUnifiedInbox as apiGetUnifiedInbox, searchMessages, updateFlags, getThreadMessages, moveMessages as apiMoveMessages } from "../lib/api-client.js";
 import * as state from "../lib/message-state.js";
+import { showMessage as viewerShow, clearViewer as viewerClear } from "./message-viewer.js";
 import { showContextMenu } from "./context-menu.js";
 import { pickFolder } from "./folder-picker.js";
 let onMessageSelect;
@@ -25,46 +26,60 @@ let touchWasScroll = false;
 // (text columns default asc, date defaults desc).
 let currentSort = "date";
 let currentSortDir = "desc";
-/** S56 refactor slice — per-row focus/unfocus.
+/** Single source of truth for "which row is focused" in the list.
  *
- *  Every rendered message row has an associated Row record tracking the DOM
- *  element + account/msg pair. `focusRow` runs the atomic transition:
+ *  Each rendered row is a `MessageRow` instance owning its DOM element,
+ *  its message envelope, and its event handlers. `focusRow(row)` runs
+ *  the atomic transition: unfocus the previous row, mark this one
+ *  `.selected`, drive the viewer with the row's envelope, dispatch
+ *  `mailx-focus-changed`. There is no "select state" anywhere else; the
+ *  viewer has no subscriptions. If `focusRow` isn't called, the preview
+ *  pane doesn't update — drift between the highlighted row and the
+ *  preview is structurally impossible.
  *
- *    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);
+ *  When the focused row's data leaves the list (delete, move, search
+ *  reload, folder switch), the controller hands focus to a survivor
+ *  via `focusByIdentity` or, if no survivor exists, calls
+ *  `releaseFocus()` which clears highlight + viewer in the same call. */
+let focusedRow = null;
+const rowByKey = new Map();
+function rowKey(accountId, uid) {
+    return `${accountId}:${uid}`;
+}
+function focusRow(row) {
+    if (focusedRow && focusedRow !== row)
+        focusedRow.setSelected(false);
+    row.setSelected(true);
+    focusedRow = row;
+    // Drive the viewer with the row's own envelope. Single call site;
+    // the viewer paints headers immediately, fetches body in background.
+    viewerShow(row.accountId, row.msg.uid, row.msg.folderId, undefined, false, row.msg);
+    onMessageSelect(row.accountId, row.msg.uid, row.msg.folderId);
+    document.dispatchEvent(new CustomEvent("mailx-focus-changed", { detail: row.msg }));
+}
+/** Read the currently-focused message envelope. Used by app-level
+ *  features (flag toggle, mark unread, status bar) that need to know
+ *  what's open in the viewer. */
+export function getCurrentFocused() {
+    return focusedRow ? focusedRow.msg : null;
 }
-/** 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;
+/** Programmatic focus by identity. Used for thread-popup clicks,
+ *  keyboard nav, post-delete handoff. Returns true if a row was found
+ *  and focused. */
+function focusByIdentity(accountId, uid) {
+    const row = rowByKey.get(rowKey(accountId, uid));
+    if (!row)
+        return false;
+    focusRow(row);
+    return true;
+}
+/** Release the focus slot and clear the preview pane in one call. */
+export function releaseFocus() {
+    if (focusedRow)
+        focusedRow.setSelected(false);
+    focusedRow = null;
+    viewerClear();
+    document.dispatchEvent(new CustomEvent("mailx-focus-changed", { detail: null }));
 }
 /** Flip the "not-downloaded" indicator off for rows whose bodies just cached.
  *  Called from the bodyCached service event — covers both background prefetch
@@ -96,10 +111,14 @@ 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;
+    // The focused-row invariant is "the Row whose .selected is currently
+    // mine". clearSelection wipes all .selected, so the invariant breaks
+    // unless we drop the focused-row reference too.
+    if (focusedRow) {
+        focusedRow = null;
+        viewerClear();
+        document.dispatchEvent(new CustomEvent("mailx-focus-changed", { detail: null }));
+    }
 }
 /** Deterministic sender-avatar color from a seed string (typically the
  *  email address). Hash → hue at 12 evenly-spaced positions on the wheel.
@@ -238,10 +257,14 @@ export function initMessageList(handler) {
             }
         });
     }
-    // Subscribe to state changes — react to removeMessages (move/delete)
-    state.subscribe((change) => {
-        if (change === "removed") {
-            syncDomToState();
+    // Viewer signals "this row is gone server-side" via mailx-remove-stale.
+    // The list owns row lifecycle, so it runs the removal here — filtering
+    // state, removing the DOM row, and handing focus to a survivor (or
+    // clearing the pane) in one transaction.
+    document.addEventListener("mailx-remove-stale", (e) => {
+        const { accountId, uid } = e.detail || {};
+        if (typeof uid === "number" && typeof accountId === "string") {
+            removeMessagesAndReconcile([{ accountId, uid }]);
         }
     });
     // Sort column headers — click to cycle. Date defaults desc (newest first);
@@ -311,39 +334,46 @@ function updateSortIndicators() {
     });
 }
 /**
- * Sync DOM rows to current state after messages are removed.
- * Removes DOM rows that are no longer in state, updates selection.
+ * Remove the named messages from the list and reconcile DOM + focus.
+ *
+ * Single-transaction transition: filters the underlying state, deletes
+ * the DOM rows, and either re-focuses a surviving row or releases focus
+ * (clearing the viewer). Replaces the old subscribe-and-sync model where
+ * state.removeMessages broadcast a "removed" event to two independent
+ * subscribers — that path could leave the highlight and preview out of
+ * sync if the list and viewer noticed the change in different orders.
+ *
+ * Call this whenever local rows need to disappear (delete, move,
+ * server-side stale removal, undo). Pass identities; the function
+ * decides what to focus next.
  */
-function syncDomToState() {
+export function removeMessagesAndReconcile(uids) {
+    const focusedIdent = focusedRow
+        ? { accountId: focusedRow.accountId, uid: focusedRow.msg.uid }
+        : null;
+    const outcome = state.removeMessages(uids, focusedIdent);
     const body = document.getElementById("ml-body");
-    if (!body)
-        return;
-    // Build set of UIDs still in state
-    const stateUids = new Set(state.getMessages().map(m => `${m.accountId}:${m.uid}`));
-    // Remove rows not in state
-    for (const row of Array.from(body.querySelectorAll(".ml-row"))) {
-        const el = row;
-        const key = `${el.dataset.accountId}:${el.dataset.uid}`;
-        if (!stateUids.has(key)) {
-            el.remove();
+    if (body) {
+        const stateUids = new Set(state.getMessages().map(m => `${m.accountId}:${m.uid}`));
+        for (const row of Array.from(body.querySelectorAll(".ml-row"))) {
+            const el = row;
+            const key = `${el.dataset.accountId}:${el.dataset.uid}`;
+            if (!stateUids.has(key))
+                el.remove();
         }
-    }
-    // Update selection to match state
-    clearSelection();
-    const sel = state.getSelected();
-    if (sel) {
-        const row = body.querySelector(`.ml-row[data-uid="${sel.uid}"][data-account-id="${sel.accountId}"]`)
-            || body.querySelector(`.ml-row[data-uid="${sel.uid}"]`);
-        if (row) {
-            row.classList.add("selected");
-            lastClickedRow = row;
-            // Trigger viewer update
-            onMessageSelect(sel.accountId, sel.uid, sel.folderId);
+        if (state.getMessages().length === 0) {
+            body.innerHTML = `<div class="ml-empty">No messages</div>`;
         }
     }
-    // If no messages left, show empty
-    if (state.getMessages().length === 0) {
-        body.innerHTML = `<div class="ml-empty">No messages</div>`;
+    if (outcome.focusedWasRemoved) {
+        if (outcome.nextSurvivor && focusByIdentity(outcome.nextSurvivor.accountId, outcome.nextSurvivor.uid)) {
+            // focusByIdentity handled the transition (DOM class + viewer).
+        }
+        else {
+            // No survivor (or its row didn't render) — release focus and
+            // clear the pane so there's no orphaned preview.
+            releaseFocus();
+        }
     }
 }
 /** Reload the currently displayed folder (preserves current selection) */
@@ -418,11 +448,11 @@ export async function loadSearchResults(query, scope = "all", accountId = "", fo
     const body = document.getElementById("ml-body");
     if (!body)
         return;
-    // Clear the preview pane — old preview from the prior selection lingers
-    // until the user clicks a search result. Atomic clear-on-list-mutation
-    // is what Slice D's row-objects-own-preview will do generally; this is
-    // the band-aid for the search-specific case until that lands.
-    document.dispatchEvent(new CustomEvent("mailx-clear-viewer"));
+    // Search reload tears down the current row set — focus must release
+    // along with the rows. releaseFocus clears the preview pane in the
+    // same call frame, so no orphan preview lingers behind a list that
+    // no longer contains the previously-shown row.
+    releaseFocus();
     body.innerHTML = `<div class="ml-empty">Searching...</div>`;
     try {
         // Regex search: filter client-side
@@ -618,7 +648,26 @@ export async function showThreadPopup(pillEl, headMsg) {
         item.appendChild(date);
         item.appendChild(subject);
         item.addEventListener("click", async () => {
-            focusMessage(msg.accountId, { accountId: msg.accountId, uid: msg.uid, folderId: msg.folderId, subject: msg.subject, from: msg.from, to: msg.to, cc: msg.cc, date: msg.date, flags: msg.flags, size: msg.size, preview: msg.preview, hasAttachments: msg.hasAttachments });
+            // Thread popup → viewer-only update. The list keeps showing the
+            // thread head highlighted (it's the row in the actual list);
+            // the viewer pivots to the clicked thread member. Single path
+            // in: the viewer's show() call. No state, no event, no drift.
+            const envelope = {
+                accountId: msg.accountId,
+                uid: msg.uid,
+                folderId: msg.folderId,
+                subject: msg.subject,
+                from: msg.from,
+                to: msg.to,
+                cc: msg.cc,
+                date: msg.date,
+                flags: msg.flags,
+                size: msg.size,
+                preview: msg.preview,
+                hasAttachments: msg.hasAttachments,
+            };
+            viewerShow(msg.accountId, msg.uid, msg.folderId, undefined, false, envelope);
+            onMessageSelect(msg.accountId, msg.uid, msg.folderId);
             popup.remove();
         });
         popup.appendChild(item);
@@ -638,36 +687,35 @@ export async function showThreadPopup(pillEl, headMsg) {
         document.addEventListener("mousedown", dismiss, true);
     }, 0);
 }
-function appendMessages(body, accountId, items) {
-    // Thread grouping: when the list has the "threaded" class, collapse messages
-    // sharing the same threadId to a single row showing the most recent message,
-    // with a small pill indicating the thread size. Pre-threading messages have
-    // no threadId — those are treated as singletons keyed by their own uid.
-    const threaded = body.classList.contains("threaded");
-    let rowsToRender = items;
-    let threadSize = null;
-    if (threaded) {
-        const threadMap = new Map(); // threadId → newest msg
-        threadSize = new Map();
-        for (const msg of items) {
-            const key = msg.threadId || `_msg_${msg.accountId || accountId}_${msg.uid}`;
-            const existing = threadMap.get(key);
-            if (!existing || (msg.date || 0) > (existing.date || 0)) {
-                threadMap.set(key, msg);
-            }
-        }
-        // Count messages per thread
-        for (const msg of items) {
-            const key = msg.threadId || `_msg_${msg.accountId || accountId}_${msg.uid}`;
-            const head = threadMap.get(key);
-            if (head)
-                threadSize.set(head, (threadSize.get(head) || 0) + 1);
-        }
-        rowsToRender = Array.from(threadMap.values()).sort((a, b) => (b.date || 0) - (a.date || 0));
-    }
-    for (const msg of rowsToRender) {
-        const msgAccountId = msg.accountId || accountId;
+/** A rendered row in the message list.
+ *
+ *  Owns its DOM element, the message envelope it represents, and all of
+ *  its event handlers (click, dblclick, drag, contextmenu, touch
+ *  long-press, plus the avatar / flag / thread-pill child handlers).
+ *  State changes that affect appearance (selected, unread, flagged,
+ *  body-cached) go through methods so the OO layer is the single point
+ *  of mutation — no `el.classList.toggle("selected")` scattered through
+ *  the codebase.
+ *
+ *  Lifecycle: constructor builds DOM and wires handlers; `attach(body)`
+ *  inserts into the list; `detach()` removes from DOM and from the
+ *  module-level rowByKey map. The list controller diff-updates rows on
+ *  list mutations.
+ *
+ *  Multi-select still uses `.selected` class queries — that's a single
+ *  DOM-level concept where drift isn't an issue (no separate render
+ *  surface to drift against). The Row class wraps the *focus* concept
+ *  (which couples to the viewer) as a fate-shared unit. */
+class MessageRow {
+    msg;
+    accountId;
+    el;
+    flagEl;
+    constructor(msg, accountId, threadHead, threadCount, showAccountTag) {
+        this.msg = msg;
+        this.accountId = accountId;
         const row = document.createElement("div");
+        this.el = row;
         row.className = "ml-row";
         row.draggable = true;
         if (!msg.flags.includes("\\Seen"))
@@ -676,25 +724,18 @@ function appendMessages(body, accountId, items) {
             row.classList.add("flagged");
         if (!msg.bodyPath)
             row.classList.add("not-downloaded");
-        // Pink-row visible reconciliation state (S1 slice C): a queued local
-        // action (move/flag/delete) hasn't been ACK'd by the server yet.
         if (msg.pending)
             row.classList.add("pending-reconcile");
-        // Reply-row marker: messages with In-Reply-To are replies. Shows a
-        // subtle left-border accent so the eye can pick out threaded replies
-        // without enabling full thread grouping.
         if (msg.inReplyTo)
             row.classList.add("is-reply");
         row.dataset.uid = String(msg.uid);
-        row.dataset.accountId = msgAccountId;
+        row.dataset.accountId = accountId;
         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.
+        if (threadHead)
+            row.classList.add("thread-head");
+        // ── Avatar (sender circle, doubles as multi-select affordance) ──
         const fromName = (showToInsteadOfFrom && msg.to?.length)
             ? (msg.to[0].name || msg.to[0].address || "?")
             : (msg.from?.name || msg.from?.address || "?");
@@ -705,81 +746,16 @@ function appendMessages(body, accountId, items) {
         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();
-        });
-        // Right-click (or long-press) on the avatar → bulk-selection menu.
-        // Putting it on the avatar is contextually right: the avatar is the
-        // "select" affordance, so its menu owns operations on the selection
-        // set. "Select all visible" is the load-bearing item — there's no
-        // Ctrl-A equivalent on touch and the scope-after-search use case
-        // demands it.
-        avatar.addEventListener("contextmenu", async (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            const { showContextMenu } = await import("./context-menu.js");
-            const body = document.getElementById("ml-body");
-            const visibleRows = body
-                ? Array.from(body.querySelectorAll(".ml-row:not(.filter-hidden)"))
-                : [];
-            const selectedCount = body
-                ? body.querySelectorAll(".ml-row.selected").length
-                : 0;
-            showContextMenu(e.clientX, e.clientY, [
-                {
-                    label: `Select all (${visibleRows.length})`,
-                    action: () => {
-                        if (!body)
-                            return;
-                        body.classList.add("multi-select-on");
-                        for (const r of visibleRows)
-                            r.classList.add("selected");
-                        lastClickedRow = visibleRows[visibleRows.length - 1] || null;
-                        updateBulkBar();
-                    },
-                    disabled: visibleRows.length === 0,
-                },
-                {
-                    label: `Clear selection${selectedCount ? ` (${selectedCount})` : ""}`,
-                    action: () => exitMultiSelect(),
-                    disabled: selectedCount === 0,
-                },
-                {
-                    label: "Invert selection",
-                    action: () => {
-                        if (!body)
-                            return;
-                        body.classList.add("multi-select-on");
-                        for (const r of visibleRows)
-                            r.classList.toggle("selected");
-                        lastClickedRow = visibleRows[visibleRows.length - 1] || null;
-                        updateBulkBar();
-                    },
-                    disabled: visibleRows.length === 0,
-                },
-            ]);
-        });
+        avatar.addEventListener("click", (e) => this.onAvatarClick(e));
+        avatar.addEventListener("contextmenu", (e) => this.onAvatarContextMenu(e));
+        // ── Flag star (toggle on click) ──
         const flag = document.createElement("span");
         flag.className = "ml-flag";
-        flag.textContent = msg.flags.includes("\\Flagged") ? "\u2605" : "\u2606";
+        flag.textContent = msg.flags.includes("\\Flagged") ? "★" : "☆";
         flag.title = "Toggle flag";
+        flag.addEventListener("click", (e) => this.onFlagClick(e));
+        this.flagEl = flag;
+        // ── From column ──
         const from = document.createElement("span");
         from.className = "ml-from";
         if (showToInsteadOfFrom && msg.to?.length) {
@@ -788,15 +764,13 @@ function appendMessages(body, accountId, items) {
         else {
             from.textContent = msg.from.name || msg.from.address;
         }
-        if (!accountId && msgAccountId) {
+        if (showAccountTag && accountId) {
             const tag = document.createElement("span");
             tag.className = "ml-account-tag";
-            tag.textContent = msgAccountId.charAt(0).toUpperCase();
-            tag.title = msgAccountId;
+            tag.textContent = accountId.charAt(0).toUpperCase();
+            tag.title = accountId;
             from.prepend(tag);
         }
-        // Search/cross-folder results carry folderName — show a tag so the user
-        // can tell which folder each hit lives in.
         if (msg.folderName) {
             const folderTag = document.createElement("span");
             folderTag.className = "ml-folder-tag";
@@ -804,8 +778,6 @@ 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";
@@ -813,173 +785,231 @@ function appendMessages(body, accountId, items) {
             dupe.title = `Same message on ${msg.dupeCount} accounts`;
             from.prepend(dupe);
         }
+        // ── Subject (with optional thread pill + preview snippet) ──
         const subject = document.createElement("span");
         subject.className = "ml-subject";
         subject.innerHTML = escapeHtml(msg.subject);
-        // Thread size pill: click to show a popup list of the thread's messages.
-        if (threadSize) {
-            const n = threadSize.get(msg) || 1;
-            if (n > 1 && msg.threadId) {
-                row.classList.add("thread-head");
-                row.dataset.threadId = msg.threadId;
-                const threadPill = document.createElement("span");
-                threadPill.className = "ml-thread-pill";
-                threadPill.textContent = String(n);
-                threadPill.title = `${n} messages in this thread — click to see list`;
-                threadPill.addEventListener("click", async (e) => {
-                    e.stopPropagation();
-                    await showThreadPopup(threadPill, msg);
-                });
-                subject.prepend(threadPill);
-            }
+        if (threadHead && threadCount > 1 && msg.threadId) {
+            const threadPill = document.createElement("span");
+            threadPill.className = "ml-thread-pill";
+            threadPill.textContent = String(threadCount);
+            threadPill.title = `${threadCount} messages in this thread — click to see list`;
+            threadPill.addEventListener("click", async (e) => {
+                e.stopPropagation();
+                await showThreadPopup(threadPill, msg);
+            });
+            subject.prepend(threadPill);
         }
         if (msg.preview) {
             const preview = document.createElement("span");
             preview.className = "ml-preview";
-            preview.textContent = ` \u2014 ${msg.preview}`;
+            preview.textContent = ` — ${msg.preview}`;
             subject.appendChild(preview);
         }
+        // ── Date column ──
         const date = document.createElement("span");
         date.className = "ml-date";
         date.textContent = formatDate(msg.date);
-        flag.addEventListener("click", async (e) => {
-            e.stopPropagation();
-            const isFlagged = row.classList.contains("flagged");
-            const currentFlags = msg.flags || [];
-            const newFlags = isFlagged
-                ? currentFlags.filter((f) => f !== "\\Flagged")
-                : [...currentFlags, "\\Flagged"];
-            try {
-                await updateFlags(msgAccountId, msg.uid, newFlags);
-                msg.flags = newFlags;
-                row.classList.toggle("flagged");
-                flag.textContent = row.classList.contains("flagged") ? "\u2605" : "\u2606";
-            }
-            catch { /* ignore */ }
-        });
         row.appendChild(avatar);
         row.appendChild(flag);
         row.appendChild(from);
         row.appendChild(date);
         row.appendChild(subject);
-        row.addEventListener("click", (e) => {
-            if (touchWasScroll) {
-                touchWasScroll = false;
-                return;
-            }
-            // Multi-select mode (entered via long-press on touch): taps toggle
-            // rows instead of opening messages. Exit mode when the user taps
-            // outside any row or presses Escape (handled at the body level).
-            const body = row.parentElement;
-            if (body?.classList.contains("multi-select-on")) {
-                row.classList.toggle("selected");
-                lastClickedRow = row;
-                updateBulkBar();
-                return;
-            }
-            if (e.shiftKey) {
-                const anchor = resolveShiftAnchor();
-                if (anchor) {
-                    clearSelection();
-                    selectRange(anchor, row);
-                    lastClickedRow = row;
-                    row.classList.remove("unread");
-                    focusMessage(msgAccountId, msg);
-                }
-                else {
-                    // No anchor available (first click of the session, or list
-                    // was just rebuilt with no selection). Treat as a plain
-                    // click so the user gets visible feedback rather than a
-                    // silent no-op.
-                    clearSelection();
-                    focusRow(row, msgAccountId, msg);
-                    lastClickedRow = row;
-                    row.classList.remove("unread");
-                }
-            }
-            else if (e.ctrlKey || e.metaKey) {
-                row.classList.toggle("selected");
-                lastClickedRow = row;
-            }
-            else {
-                // Atomic unfocus-previous + focus-this.
-                clearSelection();
-                focusRow(row, msgAccountId, msg);
-                lastClickedRow = row;
-                row.classList.remove("unread");
-            }
+        row.addEventListener("click", (e) => this.onRowClick(e));
+        row.addEventListener("dblclick", (e) => this.onRowDoubleClick(e));
+        row.addEventListener("dragstart", (e) => this.onDragStart(e));
+        row.addEventListener("dragend", () => row.classList.remove("dragging"));
+        row.addEventListener("contextmenu", (e) => this.onRowContextMenu(e));
+        this.wireLongPress(row);
+    }
+    /** Insert this row into a list body and register it in the lookup map. */
+    attach(body) {
+        body.appendChild(this.el);
+        rowByKey.set(rowKey(this.accountId, this.msg.uid), this);
+    }
+    /** Remove this row from the DOM and the lookup map. If it was the
+     *  focused row, the controller is responsible for releasing focus
+     *  (this method doesn't auto-clear the viewer because the controller
+     *  may want to hand focus to a sibling instead). */
+    detach() {
+        this.el.remove();
+        rowByKey.delete(rowKey(this.accountId, this.msg.uid));
+    }
+    setSelected(yes) { this.el.classList.toggle("selected", yes); }
+    get isSelected() { return this.el.classList.contains("selected"); }
+    setUnreadClass(yes) { this.el.classList.toggle("unread", yes); }
+    setFlaggedClass(yes) {
+        this.el.classList.toggle("flagged", yes);
+        this.flagEl.textContent = yes ? "★" : "☆";
+    }
+    markBodyCached() { this.el.classList.remove("not-downloaded"); }
+    onAvatarClick(e) {
+        e.stopPropagation();
+        const body = document.getElementById("ml-body");
+        if (!body)
+            return;
+        if (body.classList.contains("multi-select-on")) {
+            this.setSelected(!this.isSelected);
+        }
+        else {
+            clearSelection();
+            this.setSelected(true);
+            body.classList.add("multi-select-on");
+        }
+        lastClickedRow = this.el;
+        updateBulkBar();
+    }
+    async onAvatarContextMenu(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const { showContextMenu: showMenu } = await import("./context-menu.js");
+        const body = document.getElementById("ml-body");
+        const visibleRows = body
+            ? Array.from(body.querySelectorAll(".ml-row:not(.filter-hidden)"))
+            : [];
+        const selectedCount = body
+            ? body.querySelectorAll(".ml-row.selected").length
+            : 0;
+        showMenu(e.clientX, e.clientY, [
+            {
+                label: `Select all (${visibleRows.length})`,
+                action: () => {
+                    if (!body)
+                        return;
+                    body.classList.add("multi-select-on");
+                    for (const r of visibleRows)
+                        r.classList.add("selected");
+                    lastClickedRow = visibleRows[visibleRows.length - 1] || null;
+                    updateBulkBar();
+                },
+                disabled: visibleRows.length === 0,
+            },
+            {
+                label: `Clear selection${selectedCount ? ` (${selectedCount})` : ""}`,
+                action: () => exitMultiSelect(),
+                disabled: selectedCount === 0,
+            },
+            {
+                label: "Invert selection",
+                action: () => {
+                    if (!body)
+                        return;
+                    body.classList.add("multi-select-on");
+                    for (const r of visibleRows)
+                        r.classList.toggle("selected");
+                    lastClickedRow = visibleRows[visibleRows.length - 1] || null;
+                    updateBulkBar();
+                },
+                disabled: visibleRows.length === 0,
+            },
+        ]);
+    }
+    async onFlagClick(e) {
+        e.stopPropagation();
+        const isFlagged = this.el.classList.contains("flagged");
+        const currentFlags = this.msg.flags || [];
+        const newFlags = isFlagged
+            ? currentFlags.filter((f) => f !== "\\Flagged")
+            : [...currentFlags, "\\Flagged"];
+        try {
+            await updateFlags(this.accountId, this.msg.uid, newFlags);
+            this.msg.flags = newFlags;
+            this.setFlaggedClass(!isFlagged);
+        }
+        catch { /* ignore */ }
+    }
+    onRowClick(e) {
+        if (touchWasScroll) {
+            touchWasScroll = false;
+            return;
+        }
+        const body = this.el.parentElement;
+        if (body?.classList.contains("multi-select-on")) {
+            this.setSelected(!this.isSelected);
+            lastClickedRow = this.el;
             updateBulkBar();
-        });
-        // Q64: double-click → pop out the message in a floating overlay so
-        // the user can read it without losing the selected list context.
-        row.addEventListener("dblclick", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            document.dispatchEvent(new CustomEvent("mailx-popout-message", {
-                detail: { accountId: msgAccountId, uid: msg.uid, folderId: msg.folderId, subject: msg.subject }
-            }));
-        });
-        row.addEventListener("dragstart", (e) => {
-            if (!row.classList.contains("selected")) {
+            return;
+        }
+        if (e.shiftKey) {
+            const anchor = resolveShiftAnchor();
+            if (anchor) {
                 clearSelection();
-                row.classList.add("selected");
-                lastClickedRow = row;
+                selectRange(anchor, this.el);
+                lastClickedRow = this.el;
+                this.setUnreadClass(false);
+                focusRow(this);
             }
-            const selected = getSelectedMessages();
-            e.dataTransfer.setData("application/x-mailx-messages", JSON.stringify(selected));
-            e.dataTransfer.setData("application/x-mailx-message", JSON.stringify({
-                accountId: msgAccountId,
-                uid: msg.uid,
-                folderId: msg.folderId,
-                subject: msg.subject,
-            }));
-            e.dataTransfer.effectAllowed = "copyMove";
-            row.classList.add("dragging");
-            if (selected.length > 1) {
-                const badge = document.createElement("div");
-                badge.textContent = `${selected.length} messages`;
-                badge.style.cssText = "position:absolute;top:-1000px;background:#333;color:white;padding:4px 8px;border-radius:4px;font-size:12px";
-                document.body.appendChild(badge);
-                e.dataTransfer.setDragImage(badge, 0, 0);
-                setTimeout(() => badge.remove(), 0);
+            else {
+                clearSelection();
+                focusRow(this);
+                lastClickedRow = this.el;
+                this.setUnreadClass(false);
             }
-        });
-        row.addEventListener("dragend", () => row.classList.remove("dragging"));
-        // ── Q66: long-press on touch → context menu ──
-        // Mirrors right-click on the phone where right-click isn't a thing.
-        // Cancelled by any touchmove or touchend before the threshold.
+        }
+        else if (e.ctrlKey || e.metaKey) {
+            this.setSelected(!this.isSelected);
+            lastClickedRow = this.el;
+        }
+        else {
+            clearSelection();
+            focusRow(this);
+            lastClickedRow = this.el;
+            this.setUnreadClass(false);
+        }
+        updateBulkBar();
+    }
+    onRowDoubleClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        document.dispatchEvent(new CustomEvent("mailx-popout-message", {
+            detail: { accountId: this.accountId, uid: this.msg.uid, folderId: this.msg.folderId, subject: this.msg.subject },
+        }));
+    }
+    onDragStart(e) {
+        if (!this.isSelected) {
+            clearSelection();
+            this.setSelected(true);
+            lastClickedRow = this.el;
+        }
+        const selected = getSelectedMessages();
+        e.dataTransfer.setData("application/x-mailx-messages", JSON.stringify(selected));
+        e.dataTransfer.setData("application/x-mailx-message", JSON.stringify({
+            accountId: this.accountId,
+            uid: this.msg.uid,
+            folderId: this.msg.folderId,
+            subject: this.msg.subject,
+        }));
+        e.dataTransfer.effectAllowed = "copyMove";
+        this.el.classList.add("dragging");
+        if (selected.length > 1) {
+            const badge = document.createElement("div");
+            badge.textContent = `${selected.length} messages`;
+            badge.style.cssText = "position:absolute;top:-1000px;background:#333;color:white;padding:4px 8px;border-radius:4px;font-size:12px";
+            document.body.appendChild(badge);
+            e.dataTransfer.setDragImage(badge, 0, 0);
+            setTimeout(() => badge.remove(), 0);
+        }
+    }
+    wireLongPress(row) {
         let longPressTimer = null;
         const LONG_PRESS_MS = 550;
-        row.addEventListener("touchstart", (e) => {
-            const t = e.touches[0];
-            if (!t)
-                return;
-            const cx = t.clientX, cy = t.clientY;
+        row.addEventListener("touchstart", (_e) => {
             if (longPressTimer)
                 clearTimeout(longPressTimer);
             longPressTimer = setTimeout(() => {
                 longPressTimer = null;
-                // Long-press semantics:
-                //   - If the list is already in multi-select mode, toggle this
-                //     row's selected state (so the user can extend a selection
-                //     without needing a second long-press-and-menu dance).
-                //   - Otherwise enter multi-select mode: mark THIS row selected
-                //     and add a sticky class on the body so future taps toggle
-                //     instead of opening messages. Tap elsewhere or press
-                //     Escape to exit.
                 const body = row.parentElement;
                 const alreadyMulti = body?.classList.contains("multi-select-on");
                 if (alreadyMulti) {
-                    row.classList.toggle("selected");
+                    this.setSelected(!this.isSelected);
                 }
                 else {
                     clearSelection();
-                    row.classList.add("selected");
+                    this.setSelected(true);
                     body?.classList.add("multi-select-on");
                 }
-                lastClickedRow = row;
+                lastClickedRow = this.el;
                 updateBulkBar();
-                // Haptic hint if the platform supports it (Android WebView does).
                 try {
                     navigator.vibrate?.(20);
                 }
@@ -995,130 +1025,137 @@ function appendMessages(body, accountId, items) {
         row.addEventListener("touchmove", cancelLongPress, { passive: true });
         row.addEventListener("touchend", cancelLongPress, { passive: true });
         row.addEventListener("touchcancel", cancelLongPress, { passive: true });
-        // ── Right-click context menu ──
-        row.addEventListener("contextmenu", (e) => {
-            e.preventDefault();
-            // Selection-on-context-click semantics:
-            //   - If the right-clicked row is already selected → keep the
-            //     existing selection (single or multi). The menu acts on
-            //     whatever is selected.
-            //   - If it's NOT selected and we're in multi-select mode →
-            //     ADD this row to the selection (don't clear). Long-press
-            //     to open a context menu used to wipe the multi-select set,
-            //     which was the user-reported "annoying" behavior.
-            //   - If it's NOT selected and we're NOT in multi-select →
-            //     single-select this row (replace prior selection).
-            const body = row.parentElement;
-            const inMulti = !!body?.classList.contains("multi-select-on");
-            if (!row.classList.contains("selected")) {
-                if (inMulti) {
-                    row.classList.add("selected");
-                    lastClickedRow = row;
-                }
-                else {
-                    clearSelection();
-                    row.classList.add("selected");
-                    lastClickedRow = row;
-                    focusMessage(msgAccountId, msg);
-                }
+    }
+    onRowContextMenu(e) {
+        e.preventDefault();
+        const body = this.el.parentElement;
+        const inMulti = !!body?.classList.contains("multi-select-on");
+        if (!this.isSelected) {
+            if (inMulti) {
+                this.setSelected(true);
+                lastClickedRow = this.el;
             }
-            const isSeen = msg.flags.includes("\\Seen");
-            const isFlagged = msg.flags.includes("\\Flagged");
-            const items = [
-                {
-                    label: isSeen ? "Mark unread" : "Mark read",
-                    action: async () => {
-                        const newFlags = isSeen
-                            ? msg.flags.filter((f) => f !== "\\Seen")
-                            : [...msg.flags, "\\Seen"];
-                        try {
-                            await updateFlags(msgAccountId, msg.uid, newFlags);
-                            msg.flags = newFlags;
-                            state.updateMessageFlags(msgAccountId, msg.uid, newFlags);
-                            row.classList.toggle("unread", !newFlags.includes("\\Seen"));
-                        }
-                        catch { /* ignore */ }
-                    },
-                },
-                {
-                    label: isFlagged ? "Unflag" : "Flag",
-                    action: async () => {
-                        const newFlags = isFlagged
-                            ? msg.flags.filter((f) => f !== "\\Flagged")
-                            : [...msg.flags, "\\Flagged"];
-                        try {
-                            await updateFlags(msgAccountId, msg.uid, newFlags);
-                            msg.flags = newFlags;
-                            row.classList.toggle("flagged");
-                            flag.textContent = row.classList.contains("flagged") ? "\u2605" : "\u2606";
-                        }
-                        catch { /* ignore */ }
-                    },
-                },
-                { label: "", action: () => { }, separator: true },
-                {
-                    label: "Reply",
-                    action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "reply" } })),
-                },
-                {
-                    label: "Reply All",
-                    action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "replyAll" } })),
-                },
-                {
-                    label: "Forward",
-                    action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "forward" } })),
-                },
-                { label: "", action: () => { }, separator: true },
-                {
-                    label: "Move to folder…",
-                    action: async () => {
-                        // Move all currently-selected rows (or just this one if it's the only selection)
-                        const selectedRows = Array.from(document.querySelectorAll(".ml-row.selected"));
-                        const uids = selectedRows.length > 0
-                            ? selectedRows.map((r) => Number(r.dataset.uid)).filter(u => !isNaN(u))
-                            : [msg.uid];
-                        const pick = await pickFolder(msgAccountId, { excludeFolderIds: [msg.folderId] });
-                        if (!pick)
-                            return;
-                        try {
-                            await apiMoveMessages(msgAccountId, uids, pick.folderId);
-                            // Remove from local state — reconciler handles server sync.
-                            state.removeMessages(uids.map(u => ({ accountId: msgAccountId, uid: u })));
-                        }
-                        catch (err) {
-                            alert(`Move failed: ${err.message}`);
-                        }
-                    },
+            else {
+                clearSelection();
+                lastClickedRow = this.el;
+                focusRow(this);
+            }
+        }
+        const isSeen = this.msg.flags.includes("\\Seen");
+        const isFlagged = this.msg.flags.includes("\\Flagged");
+        const accountId = this.accountId;
+        const msg = this.msg;
+        const self = this;
+        const items = [
+            {
+                label: isSeen ? "Mark unread" : "Mark read",
+                action: async () => {
+                    const newFlags = isSeen
+                        ? msg.flags.filter((f) => f !== "\\Seen")
+                        : [...msg.flags, "\\Seen"];
+                    try {
+                        await updateFlags(accountId, msg.uid, newFlags);
+                        msg.flags = newFlags;
+                        state.updateMessageFlags(accountId, msg.uid, newFlags);
+                        self.setUnreadClass(!newFlags.includes("\\Seen"));
+                    }
+                    catch { /* ignore */ }
                 },
-                {
-                    label: "Delete",
-                    action: () => document.dispatchEvent(new CustomEvent("mailx-delete")),
+            },
+            {
+                label: isFlagged ? "Unflag" : "Flag",
+                action: async () => {
+                    const newFlags = isFlagged
+                        ? msg.flags.filter((f) => f !== "\\Flagged")
+                        : [...msg.flags, "\\Flagged"];
+                    try {
+                        await updateFlags(accountId, msg.uid, newFlags);
+                        msg.flags = newFlags;
+                        self.setFlaggedClass(newFlags.includes("\\Flagged"));
+                    }
+                    catch { /* ignore */ }
                 },
-                { label: "", action: () => { }, separator: true },
-                {
-                    label: "⚠ Mark as spam",
-                    action: () => document.getElementById("btn-spam")?.click(),
+            },
+            { label: "", action: () => { }, separator: true },
+            { label: "Reply", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "reply" } })) },
+            { label: "Reply All", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "replyAll" } })) },
+            { label: "Forward", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "forward" } })) },
+            { label: "", action: () => { }, separator: true },
+            {
+                label: "Move to folder…",
+                action: async () => {
+                    const selectedRows = Array.from(document.querySelectorAll(".ml-row.selected"));
+                    const uids = selectedRows.length > 0
+                        ? selectedRows.map((r) => Number(r.dataset.uid)).filter(u => !isNaN(u))
+                        : [msg.uid];
+                    const pick = await pickFolder(accountId, { excludeFolderIds: [msg.folderId] });
+                    if (!pick)
+                        return;
+                    try {
+                        await apiMoveMessages(accountId, uids, pick.folderId);
+                        removeMessagesAndReconcile(uids.map(u => ({ accountId, uid: u })));
+                    }
+                    catch (err) {
+                        alert(`Move failed: ${err.message}`);
+                    }
                 },
-                { label: "", action: () => { }, separator: true },
-                {
-                    label: "Copy Message-ID",
-                    action: async () => {
-                        // Useful when asking "where did my letter go?" — pair the
-                        // Message-ID with the reconcile-delete log line.
-                        if (!msg.messageId) {
-                            alert("No Message-ID on this row.");
-                            return;
-                        }
-                        try {
-                            await navigator.clipboard.writeText(msg.messageId);
-                        }
-                        catch { /* */ }
-                    },
+            },
+            { label: "Delete", action: () => document.dispatchEvent(new CustomEvent("mailx-delete")) },
+            { label: "", action: () => { }, separator: true },
+            { label: "⚠ Mark as spam", action: () => document.getElementById("btn-spam")?.click() },
+            { label: "", action: () => { }, separator: true },
+            {
+                label: "Copy Message-ID",
+                action: async () => {
+                    if (!msg.messageId) {
+                        alert("No Message-ID on this row.");
+                        return;
+                    }
+                    try {
+                        await navigator.clipboard.writeText(msg.messageId);
+                    }
+                    catch { /* */ }
                 },
-            ];
-            showContextMenu(e.clientX, e.clientY, items);
-        });
-        body.appendChild(row);
+            },
+        ];
+        showContextMenu(e.clientX, e.clientY, items);
+    }
+}
+function appendMessages(body, accountId, items) {
+    // Thread grouping: when the list has the "threaded" class, collapse
+    // messages sharing the same threadId to a single row showing the most
+    // recent message, with a small pill indicating the thread size.
+    const threaded = body.classList.contains("threaded");
+    let rowsToRender = items;
+    let threadSize = null;
+    if (threaded) {
+        const threadMap = new Map();
+        threadSize = new Map();
+        for (const msg of items) {
+            const key = msg.threadId || `_msg_${msg.accountId || accountId}_${msg.uid}`;
+            const existing = threadMap.get(key);
+            if (!existing || (msg.date || 0) > (existing.date || 0)) {
+                threadMap.set(key, msg);
+            }
+        }
+        for (const msg of items) {
+            const key = msg.threadId || `_msg_${msg.accountId || accountId}_${msg.uid}`;
+            const head = threadMap.get(key);
+            if (head)
+                threadSize.set(head, (threadSize.get(head) || 0) + 1);
+        }
+        rowsToRender = Array.from(threadMap.values()).sort((a, b) => (b.date || 0) - (a.date || 0));
+    }
+    for (const msg of rowsToRender) {
+        const msgAccountId = msg.accountId || accountId;
+        const threadCount = threadSize ? (threadSize.get(msg) || 1) : 1;
+        const isThreadHead = threadCount > 1 && !!msg.threadId;
+        // showAccountTag: true when rendering the unified inbox (no
+        // single accountId for the page; each row carries its own and
+        // gets a one-letter account chip).
+        const showAccountTag = !accountId && !!msgAccountId;
+        const row = new MessageRow(msg, msgAccountId, isThreadHead, threadCount, showAccountTag);
+        row.attach(body);
     }
 }
 function formatDate(epochMs) {