@bobfrankston/rmfmail 1.0.467

package/client/components/message-list.js

@@ -0,0 +1,1140 @@
+/**
+ * Message list component — renders paginated message rows.
+ * Reads from message-state; operations mutate state, list reacts.
+ */
+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 { showContextMenu } from "./context-menu.js";
+import { pickFolder } from "./folder-picker.js";
+let onMessageSelect;
+let currentAccountId;
+let currentFolderId;
+let currentSpecialUse = ""; // Cached for reloads — an empty value on reload used to reset Sent/Drafts/Outbox to "From"
+let lastClickedRow = null;
+let currentPage;
+let totalMessages;
+let loading = false;
+let unifiedMode = false;
+let searchMode = false;
+let currentSearchQuery = "";
+let showToInsteadOfFrom = false;
+let touchWasScroll = false;
+// Current sort column/direction — cycled by clicking the ml-header columns.
+// "date desc" is the default (newest first). Clicking a column flips direction
+// if it's already active, or switches to that column with its own default dir
+// (text columns default asc, date defaults desc).
+let currentSort = "date";
+let currentSortDir = "desc";
+/** S56 refactor slice — per-row focus/unfocus.
+ *
+ *  Every rendered message row has an associated Row record tracking the DOM
+ *  element + account/msg pair. `focusRow` runs the atomic transition:
+ *
+ *    1. unfocus the previously-focused row (clears `.selected` class)
+ *    2. mark the new row `.selected`
+ *    3. update shared state.selected + notify viewer
+ *
+ *  The viewer's `showMessageGeneration` token still cancels stale body
+ *  fetches during the transition — that's the "async cancellation" piece of
+ *  S56. The "atomic DOM transition" piece is now owned here.
+ *
+ *  Full abort-signal plumbing through getMessage → fetchMessageBody is a
+ *  separate follow-up; for now the gen token does the job. */
+let currentFocusedRow = null;
+function focusRow(row, accountId, msg) {
+    if (currentFocusedRow && currentFocusedRow !== row) {
+        // Unfocus the previous atomically — clearing .selected AND
+        // triggering the viewer's stale-fetch cancel (via the bump inside
+        // the next showMessage() call).
+        currentFocusedRow.classList.remove("selected");
+    }
+    if (!row.classList.contains("selected"))
+        row.classList.add("selected");
+    currentFocusedRow = row;
+    state.select(msg);
+    onMessageSelect(accountId, msg.uid, msg.folderId);
+}
+/** Back-compat shim — some call sites still use `focusMessage(accountId, msg)`
+ *  without a DOM row (e.g. thread-popup click). Fall back to the previous
+ *  behavior (state + viewer only) so nothing regresses. */
+function focusMessage(accountId, msg) {
+    state.select(msg);
+    onMessageSelect(accountId, msg.uid, msg.folderId);
+    // Clear the focused-row reference since we don't have a DOM row here
+    // — the next row click will unfocus whatever was selected anyway.
+    if (currentFocusedRow)
+        currentFocusedRow.classList.remove("selected");
+    currentFocusedRow = null;
+}
+/** Flip the "not-downloaded" indicator off for rows whose bodies just cached.
+ *  Called from the bodyCached service event — covers both background prefetch
+ *  and on-demand fetch. No-op for rows not currently rendered. */
+export function markBodiesCached(items) {
+    const body = document.getElementById("ml-body");
+    if (!body || items.length === 0)
+        return;
+    for (const { accountId, uid } of items) {
+        const row = body.querySelector(`.ml-row[data-uid="${uid}"][data-account-id="${CSS.escape(accountId)}"]`)
+            || body.querySelector(`.ml-row[data-uid="${uid}"]`);
+        if (row)
+            row.classList.remove("not-downloaded");
+    }
+}
+/** Get all selected message rows */
+export function getSelectedMessages() {
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return [];
+    const rows = body.querySelectorAll(".ml-row.selected");
+    return Array.from(rows).map(r => ({
+        accountId: r.dataset.accountId || "",
+        uid: Number(r.dataset.uid),
+        folderId: Number(r.dataset.folderId),
+    }));
+}
+function clearSelection() {
+    const body = document.getElementById("ml-body");
+    if (body)
+        body.querySelectorAll(".ml-row.selected").forEach(r => r.classList.remove("selected"));
+    // S56 seam: the focused-row invariant is "the Row whose .selected is
+    // currently mine". clearSelection wipes all .selected, so the invariant
+    // would break if we kept a stale pointer.
+    currentFocusedRow = null;
+}
+/** Deterministic sender-avatar color from a seed string (typically the
+ *  email address). Hash → hue at 12 evenly-spaced positions on the wheel.
+ *  Saturation + lightness fixed so all colors carry the same visual weight
+ *  regardless of hue, and so light/dark themes don't have to override. */
+function senderColor(seed) {
+    let h = 0;
+    for (let i = 0; i < seed.length; i++)
+        h = (h * 31 + seed.charCodeAt(i)) | 0;
+    const hue = ((Math.abs(h) % 12) * 30) + 15; // 15, 45, 75, …, 345
+    return `oklch(0.62 0.14 ${hue})`;
+}
+/** Exit multi-select mode (entered via touch long-press). Clears selection
+ *  and the sticky body flag so subsequent taps open messages again. */
+function exitMultiSelect() {
+    const body = document.getElementById("ml-body");
+    if (!body?.classList.contains("multi-select-on"))
+        return;
+    body.classList.remove("multi-select-on");
+    clearSelection();
+    updateBulkBar();
+}
+/** Bulk-actions bar retired 2026-04-24 — trash + spam live on the main
+ *  toolbar now and every other bulk op (mark-read, flag, move) is one
+ *  right-click away. Kept as a no-op stub so existing call sites
+ *  (avatar tap, row click, long-press) don't need to be touched. */
+function updateBulkBar() { }
+// Escape key + click-outside-list exit multi-select mode. Attached once
+// (idempotent because document only has one listener scope per handler).
+if (!window.__mailxMultiSelectWired) {
+    window.__mailxMultiSelectWired = true;
+    document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape")
+            exitMultiSelect();
+    });
+    document.addEventListener("pointerdown", (e) => {
+        const body = document.getElementById("ml-body");
+        if (!body?.classList.contains("multi-select-on"))
+            return;
+        const target = e.target;
+        // A tap on a row is handled by the row's own click listener.
+        // The toolbar must also be exempt: its trash / spam / etc.
+        // buttons operate ON the current multi-selection, so a tap on
+        // them should NOT clear selection before the button's click
+        // handler runs (otherwise getSelectedMessages returns empty
+        // and the action no-ops — Android-reported 2026-04-30: "press
+        // multiple circles, press trashcan, checks vanish, nothing
+        // deleted"). Same logic for the folder-tree (drop targets,
+        // future: bulk move). Exit only on a tap to genuine neutral
+        // ground.
+        // Exempt: rows (handled by their own listener), toolbar buttons
+        // (delete/spam/etc. operate ON the selection — clearing it here
+        // empties the selection before the click runs), folder-tree
+        // (drop targets / future bulk move), and the context menu
+        // (right-click → "mark read" / "move to" / etc. all need the
+        // selection intact when the menu item runs).
+        if (target.closest(".ml-row, .toolbar, .folder-tree, .ctx-menu, #btn-tb-delete, #btn-tb-spam"))
+            return;
+        exitMultiSelect();
+    }, true);
+}
+function selectRange(from, to) {
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    const rows = Array.from(body.querySelectorAll(".ml-row"));
+    const fromIdx = rows.indexOf(from);
+    const toIdx = rows.indexOf(to);
+    if (fromIdx < 0 || toIdx < 0)
+        return;
+    const lo = Math.min(fromIdx, toIdx);
+    const hi = Math.max(fromIdx, toIdx);
+    for (let i = lo; i <= hi; i++)
+        rows[i].classList.add("selected");
+}
+/** The row to anchor a shift-click range against. `lastClickedRow` is the
+ *  primary anchor, but it can become a detached DOM node after a list
+ *  re-render (folder switch, sort, search reload, paging) — `selectRange`
+ *  would then no-op. Fall back to whichever live row is `.selected` (the
+ *  one in the viewer) before giving up. */
+function resolveShiftAnchor() {
+    if (lastClickedRow?.isConnected)
+        return lastClickedRow;
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return null;
+    return body.querySelector(".ml-row.selected");
+}
+const timeFmt = { hour: "2-digit", minute: "2-digit", hour12: false };
+const dateFmt = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
+const dateFmtSameYear = { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
+export function initMessageList(handler) {
+    onMessageSelect = handler;
+    // Infinite scroll
+    const body = document.getElementById("ml-body");
+    if (body) {
+        // Touch scroll vs tap: the WebView occasionally synthesizes a click on
+        // touchend even when the user clearly scrolled, which opened a message
+        // just from swiping the list. Multi-signal detection so a scroll is
+        // reliably classified:
+        //   1. touchmove movement ≥ TAP_SLOP — the primary signal
+        //   2. actual scrollTop change between touchstart and touchend — always
+        //      set the flag when the container moved, even if touchmove never
+        //      fired (some Android builds coalesce events under momentum)
+        //   3. longer TAP_SLOP (15px) — fingers are wide; 10px was too twitchy
+        let touchStartY = 0;
+        let touchStartX = 0;
+        let touchStartScrollTop = 0;
+        const TAP_SLOP = 15;
+        body.addEventListener("touchstart", (e) => {
+            const t = e.touches[0];
+            touchStartY = t.clientY;
+            touchStartX = t.clientX;
+            touchStartScrollTop = body.scrollTop;
+            touchWasScroll = false;
+        }, { passive: true });
+        body.addEventListener("touchmove", (e) => {
+            const t = e.touches[0];
+            if (Math.abs(t.clientY - touchStartY) > TAP_SLOP || Math.abs(t.clientX - touchStartX) > TAP_SLOP) {
+                touchWasScroll = true;
+            }
+        }, { passive: true });
+        body.addEventListener("touchend", () => {
+            // If the container actually scrolled during this touch, the user
+            // was scrolling regardless of how small their finger movement was.
+            if (body.scrollTop !== touchStartScrollTop) {
+                touchWasScroll = true;
+            }
+        }, { passive: true });
+        body.addEventListener("scroll", () => {
+            if (loading)
+                return;
+            const nearBottom = body.scrollHeight - body.scrollTop - body.clientHeight < 200;
+            if (nearBottom && currentPage * 50 < totalMessages) {
+                loadMoreMessages();
+            }
+        });
+    }
+    // Subscribe to state changes — react to removeMessages (move/delete)
+    state.subscribe((change) => {
+        if (change === "removed") {
+            syncDomToState();
+        }
+    });
+    // Sort column headers — click to cycle. Date defaults desc (newest first);
+    // From/Subject default asc on first click so alphabetical order reads
+    // naturally. Clicking the currently-active column flips direction.
+    const header = document.getElementById("ml-header");
+    if (header) {
+        header.addEventListener("click", (e) => {
+            const col = e.target.closest(".ml-col-sortable");
+            if (!col)
+                return;
+            const key = col.dataset.sort;
+            if (!key)
+                return;
+            if (currentSort === key) {
+                currentSortDir = currentSortDir === "asc" ? "desc" : "asc";
+            }
+            else {
+                currentSort = key;
+                currentSortDir = key === "date" ? "desc" : "asc";
+            }
+            // Only per-folder lists support server-side sort today; unified and
+            // search paths sort client-side on the fetched page. Reload if we
+            // have an active per-folder context.
+            if (!searchMode && !unifiedMode && currentAccountId && currentFolderId) {
+                loadMessages(currentAccountId, currentFolderId, 1, "", false);
+            }
+            else {
+                applyClientSideSort();
+                updateSortIndicators();
+            }
+        });
+    }
+    updateSortIndicators();
+}
+/** Reorder currently-loaded state messages in-place by currentSort/currentSortDir.
+ *  Used for unified-inbox and search results where the server can't re-sort
+ *  a single page on our behalf. */
+function applyClientSideSort() {
+    const items = [...state.getMessages()];
+    const sign = currentSortDir === "asc" ? 1 : -1;
+    items.sort((a, b) => {
+        if (currentSort === "from") {
+            const av = (a.from?.name || a.from?.address || "").toLowerCase();
+            const bv = (b.from?.name || b.from?.address || "").toLowerCase();
+            return av < bv ? -sign : av > bv ? sign : 0;
+        }
+        if (currentSort === "subject") {
+            const av = (a.subject || "").replace(/^(re:|fwd:|fw:)\s*/i, "").toLowerCase();
+            const bv = (b.subject || "").replace(/^(re:|fwd:|fw:)\s*/i, "").toLowerCase();
+            return av < bv ? -sign : av > bv ? sign : 0;
+        }
+        // date
+        return ((a.date || 0) - (b.date || 0)) * sign;
+    });
+    state.setMessages(items);
+}
+function updateSortIndicators() {
+    const header = document.getElementById("ml-header");
+    if (!header)
+        return;
+    header.querySelectorAll(".ml-col-sortable").forEach(c => {
+        c.classList.remove("ml-col-sort-asc", "ml-col-sort-desc");
+        if (c.dataset.sort === currentSort) {
+            c.classList.add(currentSortDir === "asc" ? "ml-col-sort-asc" : "ml-col-sort-desc");
+        }
+    });
+}
+/**
+ * Sync DOM rows to current state after messages are removed.
+ * Removes DOM rows that are no longer in state, updates selection.
+ */
+function syncDomToState() {
+    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();
+        }
+    }
+    // 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 no messages left, show empty
+    if (state.getMessages().length === 0) {
+        body.innerHTML = `<div class="ml-empty">No messages</div>`;
+    }
+}
+/** Reload the currently displayed folder (preserves current selection) */
+export function reloadCurrentFolder() {
+    if (searchMode) {
+        loadSearchResults(currentSearchQuery);
+    }
+    else if (unifiedMode) {
+        loadUnifiedInbox(false);
+    }
+    else if (currentAccountId && currentFolderId) {
+        loadMessages(currentAccountId, currentFolderId, 1, "", false);
+    }
+}
+/** Exit search mode without triggering a reload — caller decides what to load
+ *  next. Used by the search-input "cleared to empty" handler so the next
+ *  reloadCurrentFolder() call doesn't re-run the stale search query. */
+export function clearSearchMode() {
+    searchMode = false;
+    currentSearchQuery = "";
+}
+/** Load unified inbox (all accounts) */
+export async function loadUnifiedInbox(autoSelect = true) {
+    unifiedMode = true;
+    searchMode = false;
+    currentSpecialUse = "";
+    showToInsteadOfFrom = false; // Unified inbox always shows From, not To
+    currentPage = 1;
+    totalMessages = 0;
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    const fromHeader = document.querySelector(".ml-col-from");
+    if (fromHeader)
+        fromHeader.textContent = "From";
+    const savedScroll = !autoSelect ? body.scrollTop : 0;
+    const savedUid = !autoSelect ? body.querySelector(".ml-row.selected")?.getAttribute("data-uid") : null;
+    if (autoSelect) {
+        body.innerHTML = `<div class="ml-empty">Loading...</div>`;
+    }
+    try {
+        const result = await apiGetUnifiedInbox(1);
+        totalMessages = result.total;
+        if (result.items.length === 0) {
+            state.setMessages([]);
+            body.innerHTML = `<div class="ml-empty">${result.total > 0 ? `${result.total} messages syncing...` : "Syncing — messages will appear shortly"}</div>`;
+            return;
+        }
+        state.setMessages(result.items);
+        renderMessages(body, "", result.items);
+        if (autoSelect) {
+            selectFirst(body);
+        }
+        else {
+            body.scrollTop = savedScroll;
+            restoreSelection(body, savedUid);
+        }
+    }
+    catch (e) {
+        if (e.name === "AbortError")
+            return;
+        body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
+    }
+}
+/** Load search results */
+export async function loadSearchResults(query, scope = "all", accountId = "", folderId = 0) {
+    searchMode = true;
+    unifiedMode = false;
+    currentSearchQuery = query;
+    currentPage = 1;
+    totalMessages = 0;
+    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"));
+    body.innerHTML = `<div class="ml-empty">Searching...</div>`;
+    try {
+        // Regex search: filter client-side
+        if (query.startsWith("/") && query.endsWith("/") && query.length > 2) {
+            const pattern = query.slice(1, -1);
+            let regex;
+            try {
+                regex = new RegExp(pattern, "i");
+            }
+            catch {
+                body.innerHTML = `<div class="ml-empty">Invalid regex</div>`;
+                return;
+            }
+            const source = scope === "current" && accountId
+                ? await apiGetMessages(accountId, folderId, 1, 10000)
+                : await apiGetUnifiedInbox(1, 10000);
+            const matches = source.items.filter((m) => regex.test(m.subject || "") || regex.test(m.from?.name || "") || regex.test(m.from?.address || "") || regex.test(m.preview || ""));
+            totalMessages = matches.length;
+            state.setMessages(matches);
+            if (matches.length === 0) {
+                body.innerHTML = `<div class="ml-empty">No regex matches</div>`;
+                return;
+            }
+            body.innerHTML = "";
+            appendMessages(body, "", matches);
+            selectFirst(body);
+            return;
+        }
+        const result = await searchMessages(query, 1, 50, scope, accountId, folderId);
+        totalMessages = result.total;
+        if (result.items.length === 0) {
+            state.setMessages([]);
+            body.innerHTML = `<div class="ml-empty">No results for "${query}"</div>`;
+            return;
+        }
+        state.setMessages(result.items);
+        body.innerHTML = "";
+        appendMessages(body, "", result.items);
+    }
+    catch (e) {
+        body.innerHTML = `<div class="ml-empty">Search error: ${e.message}</div>`;
+    }
+}
+export async function loadMessages(accountId, folderId, page = 1, specialUse = "", autoSelect = true) {
+    searchMode = false;
+    unifiedMode = false;
+    // Folder switch clears any in-progress multi-select — carrying a "3
+    // selected" state across folders would lie about what rows the bulk
+    // buttons would act on.
+    exitMultiSelect();
+    // specialUse is either the DB tag ("sent"/"drafts"/"outbox") or the
+    // folder path lowercased (folder-tree fallback when tag is missing — common
+    // on Dovecot which doesn't advertise \Sent). Match both cases.
+    // Empty specialUse on reload means "keep what we had" — otherwise a
+    // folderCountsChanged event or sort-header click resets Sent/Drafts/Outbox
+    // back to showing From (user-reported regression 2026-04-24).
+    if (specialUse)
+        currentSpecialUse = specialUse;
+    const su = currentSpecialUse.toLowerCase();
+    showToInsteadOfFrom = su === "sent" || su === "drafts" || su === "outbox"
+        || su.endsWith("sent") || su.endsWith("drafts") || su.endsWith("outbox")
+        || su === "sent items" || su === "sent mail" || su.endsWith("/sent items") || su.endsWith(".sent items");
+    currentAccountId = accountId;
+    currentFolderId = folderId;
+    currentPage = 1;
+    totalMessages = 0;
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    // Update header label
+    const fromHeader = document.querySelector(".ml-col-from");
+    if (fromHeader)
+        fromHeader.textContent = showToInsteadOfFrom ? "To" : "From";
+    const savedScroll = !autoSelect ? body.scrollTop : 0;
+    const savedUid = !autoSelect ? body.querySelector(".ml-row.selected")?.getAttribute("data-uid") : null;
+    if (autoSelect) {
+        body.innerHTML = `<div class="ml-empty">Loading...</div>`;
+    }
+    try {
+        const flaggedOnly = document.getElementById("ml-body")?.classList.contains("flagged-only") || false;
+        const result = await apiGetMessages(accountId, folderId, 1, 50, flaggedOnly, currentSort, currentSortDir);
+        totalMessages = result.total;
+        updateSortIndicators();
+        if (result.items.length === 0) {
+            state.setMessages([]);
+            body.innerHTML = `<div class="ml-empty">${flaggedOnly ? "No flagged messages" : "No messages"}</div>`;
+            return;
+        }
+        state.setMessages(result.items);
+        renderMessages(body, accountId, result.items);
+        if (autoSelect) {
+            selectFirst(body);
+        }
+        else {
+            requestAnimationFrame(() => {
+                body.scrollTop = savedScroll;
+                restoreSelection(body, savedUid);
+            });
+        }
+    }
+    catch (e) {
+        if (e.name === "AbortError")
+            return;
+        body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
+    }
+}
+async function loadMoreMessages() {
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    loading = true;
+    currentPage++;
+    try {
+        const flaggedOnly = body.classList.contains("flagged-only");
+        const result = searchMode
+            ? await searchMessages(currentSearchQuery, currentPage)
+            : unifiedMode
+                ? await apiGetUnifiedInbox(currentPage)
+                : await apiGetMessages(currentAccountId, currentFolderId, currentPage, 50, flaggedOnly);
+        // Append to state
+        const current = state.getMessages();
+        state.setMessages([...current, ...result.items]);
+        appendMessages(body, unifiedMode ? "" : currentAccountId, result.items);
+    }
+    catch (e) {
+        console.error(`Load more error: ${e.message}`);
+    }
+    finally {
+        loading = false;
+    }
+}
+/** Replace body contents with rendered rows */
+function renderMessages(body, accountId, items) {
+    const fragment = document.createDocumentFragment();
+    const tempDiv = document.createElement("div");
+    appendMessages(tempDiv, accountId, items);
+    while (tempDiv.firstChild)
+        fragment.appendChild(tempDiv.firstChild);
+    body.replaceChildren(fragment);
+}
+function selectFirst(body) {
+    // Narrow viewports (Android, phone-sized): don't auto-select. The
+    // click handler in app.ts switches the layout to "narrow-active" on
+    // any list-row click, which on a phone means the message viewer takes
+    // over the screen and hides the list. Auto-selecting at startup
+    // therefore lands the user in the LAST letter they read instead of
+    // the inbox summary they wanted. Desktop unchanged — auto-select
+    // remains useful when the list and viewer are side-by-side.
+    if (window.innerWidth <= 768)
+        return;
+    const firstRow = body.querySelector(".ml-row");
+    if (firstRow)
+        firstRow.click();
+}
+function restoreSelection(body, savedUid) {
+    if (savedUid) {
+        const row = body.querySelector(`.ml-row[data-uid="${savedUid}"]`);
+        if (row)
+            row.classList.add("selected");
+    }
+}
+/** Show a floating list of all messages in a thread when the pill is clicked.
+ *  Each entry in the popup selects that message in the viewer when clicked.
+ *  This is simpler than inline expansion and avoids duplicating the row builder. */
+export async function showThreadPopup(pillEl, headMsg) {
+    // Remove any existing popup
+    document.querySelectorAll(".ml-thread-popup").forEach(el => el.remove());
+    let thread = [];
+    try {
+        thread = await getThreadMessages(headMsg.accountId, headMsg.threadId);
+    }
+    catch { /* ignore */ }
+    if (!thread || thread.length === 0)
+        return;
+    thread.sort((a, b) => (a.date || 0) - (b.date || 0));
+    const popup = document.createElement("div");
+    popup.className = "ml-thread-popup";
+    for (const msg of thread) {
+        const item = document.createElement("div");
+        item.className = "ml-thread-popup-item";
+        if (!msg.flags.includes("\\Seen"))
+            item.classList.add("unread");
+        const from = document.createElement("span");
+        from.className = "ml-thread-popup-from";
+        from.textContent = msg.from?.name || msg.from?.address || "?";
+        const date = document.createElement("span");
+        date.className = "ml-thread-popup-date";
+        date.textContent = formatDate(msg.date);
+        const subject = document.createElement("span");
+        subject.className = "ml-thread-popup-subject";
+        subject.textContent = msg.subject || "(no subject)";
+        item.appendChild(from);
+        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 });
+            popup.remove();
+        });
+        popup.appendChild(item);
+    }
+    document.body.appendChild(popup);
+    const rect = pillEl.getBoundingClientRect();
+    popup.style.left = `${rect.left}px`;
+    popup.style.top = `${rect.bottom + 4}px`;
+    // Dismiss on outside click
+    setTimeout(() => {
+        const dismiss = (e) => {
+            if (!popup.contains(e.target)) {
+                popup.remove();
+                document.removeEventListener("mousedown", dismiss, true);
+            }
+        };
+        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;
+        const row = document.createElement("div");
+        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.folderId = String(msg.folderId);
+        if (msg.threadId)
+            row.dataset.threadId = msg.threadId;
+        // Sender avatar \u2014 Thunderbird-style colored circle with the first
+        // initial of the sender's display name. Doubles as the multi-select
+        // affordance: in `multi-select-on` mode, the avatar swaps to a
+        // checkmark via CSS. Color is derived deterministically from the
+        // address so the same sender keeps the same color across rows.
+        const fromName = (showToInsteadOfFrom && msg.to?.length)
+            ? (msg.to[0].name || msg.to[0].address || "?")
+            : (msg.from?.name || msg.from?.address || "?");
+        const seedAddr = (msg.from?.address || msg.from?.name || "?").toLowerCase();
+        const initial = (fromName.replace(/^[\W_]+/, "") || "?").charAt(0).toUpperCase();
+        const avatar = document.createElement("span");
+        avatar.className = "ml-avatar";
+        avatar.textContent = initial;
+        avatar.style.background = senderColor(seedAddr);
+        avatar.title = msg.from?.address || "";
+        // Tapping the avatar enters multi-select mode (or toggles in it,
+        // mirroring Thunderbird/Gmail). Click bubbles to the row otherwise,
+        // which would open the message — stopPropagation here keeps the
+        // avatar a dedicated selection affordance.
+        avatar.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const body = document.getElementById("ml-body");
+            if (!body)
+                return;
+            if (body.classList.contains("multi-select-on")) {
+                row.classList.toggle("selected");
+            }
+            else {
+                clearSelection();
+                row.classList.add("selected");
+                body.classList.add("multi-select-on");
+            }
+            lastClickedRow = row;
+            updateBulkBar();
+        });
+        // 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,
+                },
+            ]);
+        });
+        const flag = document.createElement("span");
+        flag.className = "ml-flag";
+        flag.textContent = msg.flags.includes("\\Flagged") ? "\u2605" : "\u2606";
+        flag.title = "Toggle flag";
+        const from = document.createElement("span");
+        from.className = "ml-from";
+        if (showToInsteadOfFrom && msg.to?.length) {
+            from.textContent = msg.to.map((a) => a.name || a.address).join(", ");
+        }
+        else {
+            from.textContent = msg.from.name || msg.from.address;
+        }
+        if (!accountId && msgAccountId) {
+            const tag = document.createElement("span");
+            tag.className = "ml-account-tag";
+            tag.textContent = msgAccountId.charAt(0).toUpperCase();
+            tag.title = msgAccountId;
+            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";
+            folderTag.textContent = msg.folderName;
+            folderTag.title = `In folder: ${msg.folderName}`;
+            from.prepend(folderTag);
+        }
+        // Unified inbox: same Message-ID exists under >=2 accounts → ⇆ badge.
+        // Tooltip names the count so the user knows "this appears on N".
+        if (msg.dupeCount >= 2) {
+            const dupe = document.createElement("span");
+            dupe.className = "ml-dupe-tag";
+            dupe.textContent = "⇆";
+            dupe.title = `Same message on ${msg.dupeCount} accounts`;
+            from.prepend(dupe);
+        }
+        const subject = document.createElement("span");
+        subject.className = "ml-subject";
+        subject.innerHTML = escapeHtml(msg.subject);
+        // 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 (msg.preview) {
+            const preview = document.createElement("span");
+            preview.className = "ml-preview";
+            preview.textContent = ` \u2014 ${msg.preview}`;
+            subject.appendChild(preview);
+        }
+        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");
+            }
+            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")) {
+                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"));
+        // ── 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.
+        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;
+            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");
+                }
+                else {
+                    clearSelection();
+                    row.classList.add("selected");
+                    body?.classList.add("multi-select-on");
+                }
+                lastClickedRow = row;
+                updateBulkBar();
+                // Haptic hint if the platform supports it (Android WebView does).
+                try {
+                    navigator.vibrate?.(20);
+                }
+                catch { /* */ }
+            }, LONG_PRESS_MS);
+        }, { passive: true });
+        const cancelLongPress = () => {
+            if (longPressTimer) {
+                clearTimeout(longPressTimer);
+                longPressTimer = null;
+            }
+        };
+        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);
+                }
+            }
+            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}`);
+                        }
+                    },
+                },
+                {
+                    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 () => {
+                        // 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);
+        });
+        body.appendChild(row);
+    }
+}
+function formatDate(epochMs) {
+    const d = new Date(epochMs);
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const msgDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    if (msgDay.getTime() === today.getTime())
+        return d.toLocaleTimeString(undefined, timeFmt);
+    if (d.getFullYear() === now.getFullYear())
+        return d.toLocaleString(undefined, dateFmtSameYear);
+    return d.toLocaleString(undefined, dateFmt);
+}
+function escapeHtml(s) {
+    const div = document.createElement("div");
+    div.textContent = s;
+    return div.innerHTML;
+}
+//# sourceMappingURL=message-list.js.map