@bobfrankston/mailx 1.0.465 → 1.0.500

package/client/components/message-list.ts

@@ -1,1129 +0,0 @@
-/**
- * Message list component — renders paginated message rows.
- * Reads from message-state; operations mutate state, list reacts.
- */
-
-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 { showContextMenu, type MenuItem } from "./context-menu.js";
-import { pickFolder } from "./folder-picker.js";
-
-type MessageSelectHandler = (accountId: string, uid: number, folderId: number) => void;
-
-let onMessageSelect: MessageSelectHandler;
-let currentAccountId: string;
-let currentFolderId: number;
-let currentSpecialUse = ""; // Cached for reloads — an empty value on reload used to reset Sent/Drafts/Outbox to "From"
-let lastClickedRow: HTMLElement | null = null;
-let currentPage: number;
-let totalMessages: number;
-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: "asc" | "desc" = "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: 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);
-}
-
-/** 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;
-}
-
-/** 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: { accountId: string; uid: number }[]): void {
-    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(): { accountId: string; uid: number; folderId: number }[] {
-    const body = document.getElementById("ml-body");
-    if (!body) return [];
-    const rows = body.querySelectorAll(".ml-row.selected");
-    return Array.from(rows).map(r => ({
-        accountId: (r as HTMLElement).dataset.accountId || "",
-        uid: Number((r as HTMLElement).dataset.uid),
-        folderId: Number((r as HTMLElement).dataset.folderId),
-    }));
-}
-
-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;
-}
-
-/** 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: string): string {
-    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(): void {
-    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(): void { /* bar removed; nothing to render */ }
-
-// Escape key + click-outside-list exit multi-select mode. Attached once
-// (idempotent because document only has one listener scope per handler).
-if (!(window as any).__mailxMultiSelectWired) {
-    (window as any).__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 as HTMLElement;
-        // 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: HTMLElement, to: HTMLElement): void {
-    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(): HTMLElement | null {
-    if (lastClickedRow?.isConnected) return lastClickedRow;
-    const body = document.getElementById("ml-body");
-    if (!body) return null;
-    return body.querySelector(".ml-row.selected") as HTMLElement | null;
-}
-
-const timeFmt: Intl.DateTimeFormatOptions = { hour: "2-digit", minute: "2-digit", hour12: false };
-const dateFmt: Intl.DateTimeFormatOptions = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
-const dateFmtSameYear: Intl.DateTimeFormatOptions = { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
-
-export function initMessageList(handler: MessageSelectHandler): void {
-    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 as HTMLElement).closest<HTMLElement>(".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(): void {
-    const items = [...state.getMessages()];
-    const sign = currentSortDir === "asc" ? 1 : -1;
-    items.sort((a: any, b: any) => {
-        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 as any);
-}
-
-function updateSortIndicators(): void {
-    const header = document.getElementById("ml-header");
-    if (!header) return;
-    header.querySelectorAll<HTMLElement>(".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(): 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}`));
-
-    // 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();
-        }
-    }
-
-    // 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 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(): void {
-    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(): void {
-    searchMode = false;
-    currentSearchQuery = "";
-}
-
-/** Load unified inbox (all accounts) */
-export async function loadUnifiedInbox(autoSelect = true): Promise<void> {
-    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: any) {
-        if (e.name === "AbortError") return;
-        body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
-    }
-}
-
-/** Load search results */
-export async function loadSearchResults(query: string, scope = "all", accountId = "", folderId = 0): Promise<void> {
-    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: RegExp;
-            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: any) =>
-                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: any) {
-        body.innerHTML = `<div class="ml-empty">Search error: ${e.message}</div>`;
-    }
-}
-
-export async function loadMessages(accountId: string, folderId: number, page = 1, specialUse = "", autoSelect = true): Promise<void> {
-    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: any) {
-        if (e.name === "AbortError") return;
-        body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
-    }
-}
-
-async function loadMoreMessages(): Promise<void> {
-    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: any) {
-        console.error(`Load more error: ${e.message}`);
-    } finally {
-        loading = false;
-    }
-}
-
-/** Replace body contents with rendered rows */
-function renderMessages(body: HTMLElement, accountId: string, items: any[]): void {
-    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: HTMLElement): void {
-    // 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") as HTMLElement;
-    if (firstRow) firstRow.click();
-}
-
-function restoreSelection(body: HTMLElement, savedUid: string | null | undefined): void {
-    if (savedUid) {
-        const row = body.querySelector(`.ml-row[data-uid="${savedUid}"]`) as HTMLElement;
-        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: HTMLElement, headMsg: any): Promise<void> {
-    // Remove any existing popup
-    document.querySelectorAll(".ml-thread-popup").forEach(el => el.remove());
-    let thread: any[] = [];
-    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: MouseEvent) => {
-            if (!popup.contains(e.target as Node)) {
-                popup.remove();
-                document.removeEventListener("mousedown", dismiss, true);
-            }
-        };
-        document.addEventListener("mousedown", dismiss, true);
-    }, 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;
-        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<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,
-                },
-            ]);
-        });
-
-        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: any) => 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 as number) >= 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: 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;
-            } 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: 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;
-            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");
-                } 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 as any).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 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);
-                }
-            }
-
-            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" } })),
-                },
-                {
-                    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: 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: "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: number): string {
-    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: string): string {
-    const div = document.createElement("div");
-    div.textContent = s;
-    return div.innerHTML;
-}