@bobfrankston/rmfmail 1.2.87 → 1.2.96

package/client/components/message-list.js

@@ -87,6 +87,33 @@ if (typeof document !== "undefined") {
 // (text columns default asc, date defaults desc).
 let currentSort = "date";
 let currentSortDir = "desc";
+// Date basis for the "date" sort + the date column: "sent" (Date: header,
+// default — identical mail clusters, matches other clients) or "received"
+// (per-account arrival time). Persisted so the View-menu toggle survives
+// reloads. Bob 2026-07-01.
+let dateBasis = localStorage.getItem("mailx-date-basis") || "sent";
+/** The epoch-ms to DISPLAY for a row, honoring the current basis. sentDate is
+ *  always populated by the store (backfilled to date), but guard anyway. */
+function effectiveDate(msg) {
+    return dateBasis === "received" ? msg.date : (msg.sentDate ?? msg.date);
+}
+/** Current date basis — read by app.ts to check the View-menu radio state. */
+export function getDateBasis() { return dateBasis; }
+/** Switch the date basis, persist it, and reload the current view so the new
+ *  sort + column take effect. Called by the View menu. */
+export function setDateBasis(basis) {
+    if (basis === dateBasis)
+        return;
+    dateBasis = basis;
+    try {
+        localStorage.setItem("mailx-date-basis", basis);
+    }
+    catch { /* private mode */ }
+    // Cached snapshots were ordered by the old basis — clear so the reload
+    // re-sorts from the DB rather than repainting the stale order.
+    listCache.clear();
+    reloadCurrentFolder();
+}
 /** Generation counter — incremented on every load* call (loadMessages,
  *  loadUnifiedInbox, loadSearchResults). Each load captures the current
  *  value at the top, then checks before rendering — if the captured gen
@@ -165,6 +192,7 @@ function withScrollAnchor(body, doRender) {
     // must not go off screen"). The old `scrollTop < 4 → no anchor` shortcut
     // was exactly the bug: at the top, new rows shoved the read letter off the
     // bottom.
+    let anchoredOnSelected = false;
     const selected = body.querySelector(".ml-row.selected");
     if (selected) {
         const vt = selected.offsetTop - scrollTop;
@@ -172,6 +200,7 @@ function withScrollAnchor(body, doRender) {
         if (vt > -selected.offsetHeight && vt < viewportH) {
             anchorUuid = selected.dataset.uuid || "";
             anchorOffsetWithinViewport = vt;
+            anchoredOnSelected = true;
         }
     }
     if (!anchorUuid) {
@@ -203,7 +232,14 @@ function withScrollAnchor(body, doRender) {
         // bottom do we fall back to pinning it visible. This satisfies both
         // "show new mail at the top" and the 2026-06-04 rule "a letter in view
         // must stay in view (it may scroll down but must not go off screen)".
-        if (wasAtTop && after.offsetTop < viewportH - after.offsetHeight) {
+        //
+        // EXCEPTION (Bob 2026-06-30: "I was looking at a message and suddenly
+        // my position changed and I was looking at a new message"): when the
+        // anchor IS the open/selected message, the user is actively reading —
+        // never reposition them. Pin the selected row exactly where it sat.
+        // The scroll-to-0 reveal only applies when nothing is open and the user
+        // is merely parked at the top of the list browsing subjects.
+        if (wasAtTop && !anchoredOnSelected && after.offsetTop < viewportH - after.offsetHeight) {
             body.scrollTop = 0;
         }
         else {
@@ -235,8 +271,20 @@ function rememberPosition() {
     persistPositions();
 }
 /** Choose the row to focus when re-entering a view with saved position.
- *  Returns the uid to focus, or null to fall back to selectFirst. */
-function pickRestoreUid(items, saved) {
+ *  Returns the uid to focus, or null to fall back to selectFirst.
+ *
+ *  `allowNeighbor` gates the deleted-message fallback. On a FOREGROUND
+ *  re-entry (user navigating INTO a view) the saved message being absent
+ *  means it was deleted, so we hand focus to the nearest survivor. On a
+ *  BACKGROUND reload (sync/new-mail rebuild of the current view) absent
+ *  does NOT mean deleted — the message the user is READING has merely been
+ *  pushed out of the loaded top-50 page by new arrivals. Switching to a
+ *  neighbor there yanks the viewer onto the new arrival while the list
+ *  stays put (Bob 2026-07-01: "I was looking at a letter and suddenly found
+ *  myself looking at a newly arrived message; the summary did not scroll").
+ *  So background callers pass allowNeighbor=false → return null → keep the
+ *  current viewer untouched. */
+function pickRestoreUid(items, saved, allowNeighbor = true) {
     if (!items.length)
         return null;
     // Exact restore by stable uuid — globally unique, so this can never
@@ -247,6 +295,8 @@ function pickRestoreUid(items, saved) {
         if (exact?.uuid)
             return exact.uuid;
     }
+    if (!allowNeighbor)
+        return null;
     // Saved message is gone (deleted). Pick the next-older entry by uid —
     // uid is roughly monotonic with arrival on IMAP/Gmail — and return ITS
     // uuid so the restore stays uuid-keyed end to end.
@@ -718,10 +768,32 @@ export function exitMultiSelect() {
     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() { }
+ *  toolbar. This now renders just the selection COUNT (Bob 2026-07-01:
+ *  "multiselect should show the count somewhere") as a floating pill at the
+ *  bottom of the list panel, shown only while a multi-selection of ≥2 is
+ *  active. Every selection-changing site already calls this. */
+function updateBulkBar() {
+    const panel = document.getElementById("message-list");
+    if (!panel)
+        return;
+    const body = document.getElementById("ml-body");
+    const count = body?.classList.contains("multi-select-on")
+        ? body.querySelectorAll(".ml-row.selected").length : 0;
+    let pill = document.getElementById("ml-select-count");
+    if (count >= 2) {
+        if (!pill) {
+            pill = document.createElement("div");
+            pill.id = "ml-select-count";
+            pill.className = "ml-select-count";
+            panel.appendChild(pill);
+        }
+        pill.textContent = `${count} selected`;
+        pill.style.display = "";
+    }
+    else if (pill) {
+        pill.style.display = "none";
+    }
+}
 /** Select every shown (not filter-hidden) row AND enter multi-select mode.
  *  Shared by the selection menu's "Select all shown" and the Ctrl+A shortcut.
  *  CRITICAL: it sets `multi-select-on` — without that flag a subsequent ★ click
@@ -846,37 +918,7 @@ export function initMessageList(handler) {
                 touchWasScroll = true;
             }
         }, { passive: true });
-        body.addEventListener("scroll", () => {
-            if (loading)
-                return;
-            // Prefetch the next page well BEFORE the bottom (was 200px). The next
-            // 50 rows are a DB query + render; triggering it only 200px out meant
-            // the user scrolled INTO the not-yet-loaded gap and saw a pause (Bob
-            // 2026-06-18 "scroll the summary, there is a delay"). 1000px ≈ a couple
-            // screens of lead time so the page is usually ready by the time it's
-            // scrolled to. `loading` guard still prevents overlapping fetches.
-            const nearBottom = body.scrollHeight - body.scrollTop - body.clientHeight < 1000;
-            if (nearBottom) {
-                if (currentPage * 50 < totalMessages) {
-                    loadMoreMessages();
-                }
-                else {
-                    // Diagnostic: at bottom but not loading more. Log why
-                    // so the user can see whether totalMessages is wrong,
-                    // a filter is on, or we've truly reached the end.
-                    // Only log once per "stuck at bottom" episode.
-                    if (!body._mlScrollEndLogged) {
-                        body._mlScrollEndLogged = true;
-                        const rows = body.querySelectorAll(".ml-row").length;
-                        console.log(`  [ml-scroll] reached bottom — currentPage=${currentPage} pageSize=50 loadedRows=${rows} totalMessages=${totalMessages} searchMode=${searchMode} unifiedMode=${unifiedMode} flaggedOnly=${body.classList.contains("flagged-only")}`);
-                    }
-                }
-            }
-            else {
-                // Reset the once-flag so next time we hit bottom we log again.
-                body._mlScrollEndLogged = false;
-            }
-        });
+        body.addEventListener("scroll", () => { maybeLoadMore(body); });
     }
     // Viewer signals "this row is gone server-side" via mailx-remove-stale.
     // The list owns row lifecycle, so it runs the removal here — filtering
@@ -1110,7 +1152,7 @@ export async function loadUnifiedInbox(autoSelect = true) {
             withScrollAnchor(body, renderCached);
         else
             renderCached();
-        const targetUuid = remembered ? pickRestoreUid(cached.items, remembered) : null;
+        const targetUuid = remembered ? pickRestoreUid(cached.items, remembered, autoSelect) : null;
         if (targetUuid) {
             if (autoSelect)
                 body.scrollTop = savedScroll;
@@ -1124,7 +1166,7 @@ export async function loadUnifiedInbox(autoSelect = true) {
         body.innerHTML = `<div class="ml-empty">Loading...</div>`;
     }
     try {
-        const result = await apiGetUnifiedInbox(1, 50, flaggedOnly);
+        const result = await apiGetUnifiedInbox(1, 50, flaggedOnly, dateBasis);
         if (myGen !== loadGen)
             return; // user moved on; drop stale response
         totalMessages = result.total;
@@ -1147,7 +1189,7 @@ export async function loadUnifiedInbox(autoSelect = true) {
         // yank them. If they're at the very top, no anchor — new rows
         // appear above as usual.
         withScrollAnchor(body, () => renderMessages(body, "", result.items, { background: !autoSelect }));
-        const targetUuid = remembered ? pickRestoreUid(result.items, remembered) : null;
+        const targetUuid = remembered ? pickRestoreUid(result.items, remembered, autoSelect) : null;
         if (targetUuid) {
             // Only restore the saved scrollTop on a first paint (cache miss).
             // After a sync-driven re-render, withScrollAnchor has already
@@ -1228,8 +1270,8 @@ export async function loadSearchResults(query, scope = "all", accountId = "", fo
                 return;
             }
             const source = scope === "current" && accountId
-                ? await apiGetMessages(accountId, folderId, 1, 10000)
-                : await apiGetUnifiedInbox(1, 10000);
+                ? await apiGetMessages(accountId, folderId, 1, 10000, false, currentSort, currentSortDir, dateBasis)
+                : await apiGetUnifiedInbox(1, 10000, false, dateBasis);
             if (myGen !== loadGen)
                 return;
             const matches = source.items.filter((m) => regex.test(m.subject || "") || regex.test(m.from?.name || "") || regex.test(m.from?.address || "") || regex.test(m.preview || ""));
@@ -1338,7 +1380,7 @@ export async function loadMessages(accountId, folderId, page = 1, specialUse = "
             withScrollAnchor(body, renderCached);
         else
             renderCached();
-        const targetUuid = remembered ? pickRestoreUid(cached.items, remembered) : null;
+        const targetUuid = remembered ? pickRestoreUid(cached.items, remembered, autoSelect) : null;
         if (focusUid != null) {
             // Search-as-find: jump to the specific message the user selected.
             requestAnimationFrame(() => {
@@ -1363,7 +1405,7 @@ export async function loadMessages(accountId, folderId, page = 1, specialUse = "
         body.innerHTML = `<div class="ml-empty">Loading...</div>`;
     }
     try {
-        const result = await apiGetMessages(accountId, folderId, 1, 50, flaggedOnly, currentSort, currentSortDir);
+        const result = await apiGetMessages(accountId, folderId, 1, 50, flaggedOnly, currentSort, currentSortDir, dateBasis);
         // Stale-response guard: a newer load* fired while we were
         // awaiting; the new view already painted. Drop this result
         // silently rather than overwriting.
@@ -1402,7 +1444,7 @@ export async function loadMessages(accountId, folderId, page = 1, specialUse = "
             }
         }
         // Prefer saved position; otherwise default by autoSelect.
-        const targetUuid = remembered ? pickRestoreUid(result.items, remembered) : null;
+        const targetUuid = remembered ? pickRestoreUid(result.items, remembered, autoSelect) : null;
         if (focusUid != null) {
             // Search-as-find: select the message the user picked from results.
             requestAnimationFrame(() => {
@@ -1437,6 +1479,44 @@ export async function loadMessages(accountId, folderId, page = 1, specialUse = "
         body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
     }
 }
+/** Decide whether the next page should load, and load it. Centralized so the
+ *  scroll handler and the post-load re-check share one code path.
+ *
+ *  Why a re-check exists (Bob 2026-06-30: "scroll down near the bottom does
+ *  nothing till an upward scroll then I can scroll down again"): the browser
+ *  fires `scroll` events only while scrollTop actually changes. When the user
+ *  reaches the absolute bottom of the loaded rows, scrollTop is pinned at max,
+ *  so NO further downward scroll events fire. If the event that crossed
+ *  nearBottom arrived while a previous load was still in flight (the old
+ *  `if (loading) return` dropped it), the next page was never requested — the
+ *  list looked frozen until an upward scroll re-armed the handler. Now every
+ *  finished load re-evaluates geometry and chains the next page if the user is
+ *  still sitting near the bottom, so reaching the end is self-driving. */
+function maybeLoadMore(body) {
+    if (loading)
+        return;
+    const nearBottom = body.scrollHeight - body.scrollTop - body.clientHeight < 1000;
+    if (!nearBottom) {
+        // Reset the once-flag so next time we hit bottom we log again.
+        body._mlScrollEndLogged = false;
+        return;
+    }
+    if (currentPage * 50 < totalMessages) {
+        // Prefetch the next page well BEFORE the bottom (1000px lead). The next
+        // 50 rows are a DB query + render; triggering only 200px out meant the
+        // user scrolled INTO the not-yet-loaded gap and saw a pause (Bob
+        // 2026-06-18 "scroll the summary, there is a delay").
+        loadMoreMessages();
+    }
+    else if (!body._mlScrollEndLogged) {
+        // Diagnostic: at bottom but not loading more. Log why so we can see
+        // whether totalMessages is wrong, a filter is on, or we've truly
+        // reached the end. Once per "stuck at bottom" episode.
+        body._mlScrollEndLogged = true;
+        const rows = body.querySelectorAll(".ml-row").length;
+        console.log(`  [ml-scroll] reached bottom — currentPage=${currentPage} pageSize=50 loadedRows=${rows} totalMessages=${totalMessages} searchMode=${searchMode} unifiedMode=${unifiedMode} flaggedOnly=${body.classList.contains("flagged-only")}`);
+    }
+}
 async function loadMoreMessages() {
     const body = document.getElementById("ml-body");
     if (!body)
@@ -1457,8 +1537,8 @@ async function loadMoreMessages() {
         const result = searchMode
             ? await searchMessages(currentSearchQuery, currentPage)
             : unifiedMode
-                ? await apiGetUnifiedInbox(currentPage, 50, flaggedOnly)
-                : await apiGetMessages(currentAccountId, currentFolderId, currentPage, 50, flaggedOnly);
+                ? await apiGetUnifiedInbox(currentPage, 50, flaggedOnly, dateBasis)
+                : await apiGetMessages(currentAccountId, currentFolderId, currentPage, 50, flaggedOnly, currentSort, currentSortDir, dateBasis);
         // Append to state
         const current = state.getMessages();
         state.setMessages([...current, ...result.items]);
@@ -1475,6 +1555,13 @@ async function loadMoreMessages() {
     finally {
         loading = false;
     }
+    // Re-evaluate: if the user is STILL near the bottom (they kept their finger
+    // pinned at the end, or the page that loaded was shorter than the viewport),
+    // chain the next page. Geometry has settled after the synchronous append
+    // above, so this reads true heights. Terminates when nearBottom goes false
+    // or currentPage*50 >= totalMessages. requestAnimationFrame defers one frame
+    // so layout flushes and we don't recurse on stale heights.
+    requestAnimationFrame(() => maybeLoadMore(body));
 }
 /** Replace body contents with rendered rows */
 function renderMessages(body, accountId, items, opts = {}) {
@@ -1501,6 +1588,8 @@ function renderMessages(body, accountId, items, opts = {}) {
         for (const uuid of preserveSel) {
             body.querySelector(`.ml-row[data-uuid="${CSS.escape(uuid)}"]`)?.classList.add("selected");
         }
+        // Keep the "N selected" pill accurate after a background rebuild.
+        updateBulkBar();
     }
     // A filter (flagged-only / priority-only) that hides EVERY row makes the
     // list look broken — identical to an empty/failed load. Bob 2026-05-27
@@ -1571,10 +1660,16 @@ function restoreSelection(body, savedUuid) {
     const accountId = row.dataset.accountId;
     const uid = Number(row.dataset.uid);
     if (accountId && Number.isFinite(uid)) {
-        // {scroll:false} — programmatic restore after a sync-driven reload.
-        // The user might be reading rows ABOVE the focused one; do NOT yank
-        // their scroll back to the focused row every time the list rebuilds.
-        focusByIdentity(accountId, uid, { scroll: false });
+        // FATE-SHARING SAFETY NET (Bob 2026-07-01: "even if there is an
+        // inappropriate switch it must automatically make it visible in the
+        // summary"). If this restore re-binds the SAME message already in the
+        // viewer — the normal case after a sync rebuild — keep the user's
+        // scroll exactly where it is; they may be reading rows above/below and
+        // must not be yanked. But if it targets a DIFFERENT message than the
+        // one currently shown, that IS a real viewer switch: scroll the list to
+        // that row so the summary and the viewer can never silently disagree.
+        const switching = focusedRow?.msg?.uuid !== savedUuid;
+        focusByIdentity(accountId, uid, { scroll: switching });
     }
 }
 /** Show a floating list of all messages in a thread when the pill is clicked.
@@ -1603,7 +1698,7 @@ export async function showThreadPopup(pillEl, headMsg) {
         from.textContent = msg.from?.name || msg.from?.address || "?";
         const date = document.createElement("span");
         date.className = "ml-thread-popup-date";
-        date.textContent = formatDate(msg.date);
+        date.textContent = formatDate(effectiveDate(msg));
         const subject = document.createElement("span");
         subject.className = "ml-thread-popup-subject";
         subject.textContent = msg.subject || "(no subject)";
@@ -1796,7 +1891,8 @@ class MessageRow {
         renderStatusIcons(icons, msg);
         const dateText = document.createElement("span");
         dateText.className = "ml-date-text";
-        dateText.textContent = formatDate(msg.date);
+        dateText.textContent = formatDate(effectiveDate(msg));
+        dateText.title = dateBasis === "received" ? "Received date" : "Sent date";
         date.appendChild(icons);
         date.appendChild(dateText);
         row.appendChild(avatar);
@@ -2034,6 +2130,20 @@ class MessageRow {
         if (e.ctrlKey || e.metaKey) {
             this.setSelected(!this.isSelected);
             lastClickedRow = this.el;
+            // Ctrl/Cmd-click builds a multi-selection — it MUST set
+            // `multi-select-on`, or a background re-render (new mail arriving)
+            // won't preserve the highlights and restoreSelection collapses the
+            // whole selection down to the single focused row (Bob 2026-07-01:
+            // "suddenly deselect all the messages and leave one"). Same root as
+            // the old Ctrl+A gap. Drop the flag again if the toggle emptied the
+            // selection so a later plain click behaves as single-select.
+            if (body) {
+                const n = body.querySelectorAll(".ml-row.selected").length;
+                if (n >= 1)
+                    body.classList.add("multi-select-on");
+                else
+                    body.classList.remove("multi-select-on");
+            }
         }
         else {
             clearSelection();