@bobfrankston/rmfmail 1.0.470 → 1.0.471

package/client/components/message-list.ts

@@ -6,6 +6,7 @@
 import { getMessages as apiGetMessages, getUnifiedInbox as apiGetUnifiedInbox, searchMessages, abortMessageListRequests, updateFlags, getThreadMessages, moveMessages as apiMoveMessages } from "../lib/api-client.js";
 import * as state from "../lib/message-state.js";
 import type { ListMessage } from "../lib/message-state.js";
+import { showMessage as viewerShow, clearViewer as viewerClear } from "./message-viewer.js";
 import { showContextMenu, type MenuItem } from "./context-menu.js";
 import { pickFolder } from "./folder-picker.js";
 
@@ -31,46 +32,62 @@ let touchWasScroll = false;
 let currentSort = "date";
 let currentSortDir: "asc" | "desc" = "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: HTMLElement | null = null;
-
-function focusRow(row: HTMLElement, accountId: string, msg: any): void {
-    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: MessageRow | null = null;
+const rowByKey = new Map<string, MessageRow>();
+
+function rowKey(accountId: string, uid: number | string): string {
+    return `${accountId}:${uid}`;
+}
+
+function focusRow(row: MessageRow): void {
+    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 }));
 }
 
-/** 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: string, msg: any): void {
-    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;
+/** 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(): ListMessage | null {
+    return focusedRow ? focusedRow.msg : 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: string, uid: number): boolean {
+    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(): void {
+    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.
@@ -101,10 +118,14 @@ export function getSelectedMessages(): { accountId: string; uid: number; folderI
 function clearSelection(): void {
     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
@@ -243,10 +264,14 @@ export function initMessageList(handler: MessageSelectHandler): void {
         });
     }
 
-    // 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: any) => {
+        const { accountId, uid } = e.detail || {};
+        if (typeof uid === "number" && typeof accountId === "string") {
+            removeMessagesAndReconcile([{ accountId, uid }]);
         }
     });
 
@@ -315,42 +340,48 @@ function updateSortIndicators(): void {
 }
 
 /**
- * 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(): void {
-    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}`));
+export function removeMessagesAndReconcile(
+    uids: { accountId: string; uid: number }[],
+): void {
+    const focusedIdent = focusedRow
+        ? { accountId: focusedRow.accountId, uid: focusedRow.msg.uid }
+        : null;
+    const outcome = state.removeMessages(uids, focusedIdent);
 
-    // Remove rows not in state
-    for (const row of Array.from(body.querySelectorAll(".ml-row"))) {
-        const el = row as HTMLElement;
-        const key = `${el.dataset.accountId}:${el.dataset.uid}`;
-        if (!stateUids.has(key)) {
-            el.remove();
+    const body = document.getElementById("ml-body");
+    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 as HTMLElement;
+            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}"]`) as HTMLElement
-            || body.querySelector(`.ml-row[data-uid="${sel.uid}"]`) as HTMLElement;
-        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();
+        }
     }
 }
 
@@ -430,11 +461,11 @@ export async function loadSearchResults(query: string, scope = "all", accountId
     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>`;
 
@@ -626,7 +657,26 @@ export async function showThreadPopup(pillEl: HTMLElement, headMsg: any): Promis
         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 as ListMessage);
+            onMessageSelect(msg.accountId, msg.uid, msg.folderId);
             popup.remove();
         });
         popup.appendChild(item);
@@ -647,57 +697,52 @@ export async function showThreadPopup(pillEl: HTMLElement, headMsg: any): Promis
     }, 0);
 }
 
-function appendMessages(body: HTMLElement, accountId: string, items: any[]): void {
-    // 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: any[] = items;
-    let threadSize: Map<any, number> | null = null;
-    if (threaded) {
-        const threadMap = new Map<string, any>(); // threadId → newest msg
-        threadSize = new Map<any, number>();
-        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 {
+    el: HTMLElement;
+    private flagEl: HTMLSpanElement;
+
+    constructor(
+        public msg: any,
+        public accountId: string,
+        threadHead: boolean,
+        threadCount: number,
+        showAccountTag: boolean,
+    ) {
         const row = document.createElement("div");
+        this.el = row;
         row.className = "ml-row";
         row.draggable = true;
         if (!msg.flags.includes("\\Seen")) row.classList.add("unread");
         if (msg.flags.includes("\\Flagged")) 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;
+        if (threadHead) row.classList.add("thread-head");
 
-        // 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.
+        // ── 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 || "?");
@@ -708,78 +753,18 @@ function appendMessages(body: HTMLElement, accountId: string, items: any[]): voi
         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<HTMLElement>(".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) {
@@ -787,15 +772,13 @@ function appendMessages(body: HTMLElement, accountId: string, items: any[]): voi
         } 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";
@@ -803,8 +786,6 @@ function appendMessages(body: HTMLElement, accountId: string, items: any[]): voi
             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 as number) >= 2) {
             const dupe = document.createElement("span");
             dupe.className = "ml-dupe-tag";
@@ -813,170 +794,229 @@ function appendMessages(body: HTMLElement, accountId: string, items: any[]): voi
             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: string[] = msg.flags || [];
-            const newFlags = isFlagged
-                ? currentFlags.filter((f: string) => 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 as HTMLElement | null;
-            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;
+        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: HTMLElement): void {
+        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(): void {
+        this.el.remove();
+        rowByKey.delete(rowKey(this.accountId, this.msg.uid));
+    }
+
+    setSelected(yes: boolean): void { this.el.classList.toggle("selected", yes); }
+    get isSelected(): boolean { return this.el.classList.contains("selected"); }
+    setUnreadClass(yes: boolean): void { this.el.classList.toggle("unread", yes); }
+    setFlaggedClass(yes: boolean): void {
+        this.el.classList.toggle("flagged", yes);
+        this.flagEl.textContent = yes ? "★" : "☆";
+    }
+    markBodyCached(): void { this.el.classList.remove("not-downloaded"); }
+
+    private onAvatarClick(e: MouseEvent): void {
+        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();
+    }
+
+    private async onAvatarContextMenu(e: MouseEvent): Promise<void> {
+        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<HTMLElement>(".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,
+            },
+        ]);
+    }
+
+    private async onFlagClick(e: MouseEvent): Promise<void> {
+        e.stopPropagation();
+        const isFlagged = this.el.classList.contains("flagged");
+        const currentFlags: string[] = this.msg.flags || [];
+        const newFlags = isFlagged
+            ? currentFlags.filter((f: string) => f !== "\\Flagged")
+            : [...currentFlags, "\\Flagged"];
+        try {
+            await updateFlags(this.accountId, this.msg.uid, newFlags);
+            this.msg.flags = newFlags;
+            this.setFlaggedClass(!isFlagged);
+        } catch { /* ignore */ }
+    }
+
+    private onRowClick(e: MouseEvent): void {
+        if (touchWasScroll) { touchWasScroll = false; return; }
+        const body = this.el.parentElement as HTMLElement | null;
+        if (body?.classList.contains("multi-select-on")) {
+            this.setSelected(!this.isSelected);
+            lastClickedRow = this.el;
+            updateBulkBar();
+            return;
+        }
+        if (e.shiftKey) {
+            const anchor = resolveShiftAnchor();
+            if (anchor) {
+                clearSelection();
+                selectRange(anchor, this.el);
+                lastClickedRow = this.el;
+                this.setUnreadClass(false);
+                focusRow(this);
             } else {
-                // Atomic unfocus-previous + focus-this.
                 clearSelection();
-                focusRow(row, msgAccountId, msg);
-                lastClickedRow = row;
-                row.classList.remove("unread");
+                focusRow(this);
+                lastClickedRow = this.el;
+                this.setUnreadClass(false);
             }
-            updateBulkBar();
-        });
+        } else if (e.ctrlKey || e.metaKey) {
+            this.setSelected(!this.isSelected);
+            lastClickedRow = this.el;
+        } else {
+            clearSelection();
+            focusRow(this);
+            lastClickedRow = this.el;
+            this.setUnreadClass(false);
+        }
+        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 }
-            }));
-        });
+    private onRowDoubleClick(e: MouseEvent): void {
+        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 },
+        }));
+    }
 
-        row.addEventListener("dragstart", (e) => {
-            if (!row.classList.contains("selected")) {
-                clearSelection();
-                row.classList.add("selected");
-                lastClickedRow = row;
-            }
-            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);
-            }
-        });
-        row.addEventListener("dragend", () => row.classList.remove("dragging"));
+    private onDragStart(e: DragEvent): void {
+        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);
+        }
+    }
 
-        // ── 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.
+    private wireLongPress(row: HTMLElement): void {
         let longPressTimer: ReturnType<typeof setTimeout> | null = null;
         const LONG_PRESS_MS = 550;
-        row.addEventListener("touchstart", (e: TouchEvent) => {
-            const t = e.touches[0];
-            if (!t) return;
-            const cx = t.clientX, cy = t.clientY;
+        row.addEventListener("touchstart", (_e: TouchEvent) => {
             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 as HTMLElement | null;
                 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 as any).vibrate?.(20); } catch { /* */ }
             }, LONG_PRESS_MS);
         }, { passive: true });
@@ -986,127 +1026,134 @@ function appendMessages(body: HTMLElement, accountId: string, items: any[]): voi
         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 as HTMLElement | null;
-            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);
-                }
+    private onRowContextMenu(e: MouseEvent): void {
+        e.preventDefault();
+        const body = this.el.parentElement as HTMLElement | null;
+        const inMulti = !!body?.classList.contains("multi-select-on");
+        if (!this.isSelected) {
+            if (inMulti) {
+                this.setSelected(true);
+                lastClickedRow = this.el;
+            } else {
+                clearSelection();
+                lastClickedRow = this.el;
+                focusRow(this);
             }
+        }
 
-            const isSeen = msg.flags.includes("\\Seen");
-            const isFlagged = msg.flags.includes("\\Flagged");
-
-            const items: MenuItem[] = [
-                {
-                    label: isSeen ? "Mark unread" : "Mark read",
-                    action: async () => {
-                        const newFlags = isSeen
-                            ? msg.flags.filter((f: string) => 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: string) => 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" } })),
+        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: MenuItem[] = [
+            {
+                label: isSeen ? "Mark unread" : "Mark read",
+                action: async () => {
+                    const newFlags = isSeen
+                        ? msg.flags.filter((f: string) => 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: "Forward",
-                    action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "forward" } })),
+            },
+            {
+                label: isFlagged ? "Unflag" : "Flag",
+                action: async () => {
+                    const newFlags = isFlagged
+                        ? msg.flags.filter((f: string) => 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: "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: Element) => Number((r as HTMLElement).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: any) {
-                            alert(`Move failed: ${err.message}`);
-                        }
-                    },
+            },
+            { 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: Element) => Number((r as HTMLElement).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: any) {
+                        alert(`Move failed: ${err.message}`);
+                    }
                 },
-                {
-                    label: "Delete",
-                    action: () => document.dispatchEvent(new CustomEvent("mailx-delete")),
+            },
+            { 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 { /* */ }
                 },
-                { label: "", action: () => {}, separator: true },
-                {
-                    label: "⚠ Mark as spam",
-                    action: () => document.getElementById("btn-spam")?.click(),
-                },
-                { 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 { /* */ }
-                    },
-                },
-            ];
+            },
+        ];
 
-            showContextMenu(e.clientX, e.clientY, items);
-        });
+        showContextMenu(e.clientX, e.clientY, items);
+    }
+}
 
-        body.appendChild(row);
+function appendMessages(body: HTMLElement, accountId: string, items: any[]): void {
+    // 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: any[] = items;
+    let threadSize: Map<any, number> | null = null;
+    if (threaded) {
+        const threadMap = new Map<string, any>();
+        threadSize = new Map<any, number>();
+        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: number): string {
     const d = new Date(epochMs);
     const now = new Date();