@bobfrankston/rmfmail 1.1.170 → 1.1.177

package/client/components/message-list.ts

@@ -109,6 +109,47 @@ function currentViewKey(): string | null {
     const flaggedOnly = document.getElementById("ml-body")?.classList.contains("flagged-only") || false;
     return cacheKey("folder", currentAccountId, currentFolderId, flaggedOnly);
 }
+/** Run `doRender` while preserving the visual position of the topmost
+ *  visible row. If the user is scrolled past the top and new rows arrive
+ *  above their current view (the IDLE-driven "new mail" case), the rows
+ *  they were reading STAY at the same screen Y after render — no yank.
+ *
+ *  Pattern: snapshot the topmost row's UUID + its current offset from the
+ *  scroll-container top, do the render, then set scrollTop so that same
+ *  row lands at the same offset. If the anchor row is gone (deleted),
+ *  fall back to the existing scrollTop-by-pixels behavior. */
+function withScrollAnchor(body: HTMLElement, doRender: () => void): void {
+    const scrollTop = body.scrollTop;
+    // If the user is at the very top, no anchor needed — let new rows
+    // appear naturally above and the scroll position stays at 0.
+    if (scrollTop < 4) {
+        doRender();
+        return;
+    }
+    const rowsBefore = Array.from(body.querySelectorAll<HTMLElement>(".ml-row"));
+    let anchorUuid = "";
+    let anchorOffsetWithinViewport = 0;
+    for (const r of rowsBefore) {
+        const visualTop = r.offsetTop - scrollTop;
+        // The first row whose top is at or below the viewport top is the
+        // visible anchor. visualTop in [0, height) is "first fully or
+        // partially visible row from the top."
+        if (visualTop >= 0) {
+            anchorUuid = r.dataset.uuid || "";
+            anchorOffsetWithinViewport = visualTop;
+            break;
+        }
+    }
+    doRender();
+    if (!anchorUuid) return; // nothing to anchor to (empty list before render)
+    const after = body.querySelector<HTMLElement>(`.ml-row[data-uuid="${CSS.escape(anchorUuid)}"]`);
+    if (after) {
+        body.scrollTop = after.offsetTop - anchorOffsetWithinViewport;
+    }
+    // If the anchor row was deleted, leave scrollTop as the browser placed
+    // it after the innerHTML swap. Don't actively yank.
+}
+
 function rememberPosition(): void {
     const key = currentViewKey();
     if (!key) return;
@@ -294,9 +335,43 @@ export function setRowSeen(accountId: string, uid: number, yes: boolean): void {
 }
 
 /** Scroll the focused row into view. Wired to a keyboard shortcut so the
- *  user can recover after scrolling the list away from the preview. */
+ *  user can recover after scrolling the list away from the preview.
+ *
+ *  Robust against partial re-renders: if focusedRow.el has been detached
+ *  from the document (sync churned the row out, the list paginated, a
+ *  filter changed), re-look-it-up by UID/account before giving up. Without
+ *  this the original implementation would silently no-op against a stale
+ *  DOM node — exactly the "Z does nothing" symptom from Bob 2026-05-27. */
 export function scrollFocusedIntoView(): void {
-    if (focusedRow) focusedRow.el.scrollIntoView({ block: "center" });
+    if (!focusedRow) return;
+    let el: HTMLElement | null = focusedRow.el;
+    if (!document.body.contains(el)) {
+        const body = document.getElementById("ml-body");
+        const uid = (focusedRow.msg as any)?.uid;
+        if (body && uid != null) {
+            el = body.querySelector<HTMLElement>(
+                `.ml-row[data-uid="${uid}"][data-account-id="${CSS.escape(focusedRow.accountId)}"]`
+            ) || body.querySelector<HTMLElement>(`.ml-row[data-uid="${uid}"]`);
+        }
+        if (!el) {
+            // The row isn't in the loaded slice of the list. Tell the user
+            // visibly rather than silently no-op — they pressed a key, they
+            // deserve feedback.
+            const status = document.getElementById("status-sync");
+            if (status) {
+                status.textContent = "Selected message isn't in the loaded list — scroll down to load more, or open the folder it lives in.";
+                setTimeout(() => { if (status?.textContent?.startsWith("Selected message")) status.textContent = ""; }, 4000);
+            }
+            return;
+        }
+        // Refresh the cached element pointer so subsequent calls find it.
+        // Re-apply the highlight in case it got stripped during re-render —
+        // this also addresses the "selected message isn't highlighted"
+        // observation in the same session.
+        focusedRow.el = el;
+        el.classList.add("selected");
+    }
+    el.scrollIntoView({ block: "center" });
 }
 
 /** Release the focus slot and clear the preview pane in one call. */
@@ -783,11 +858,18 @@ export async function loadUnifiedInbox(autoSelect = true): Promise<void> {
         }
 
         state.setMessages(result.items);
-        renderMessages(body, "", result.items);
+        // Anchor on the topmost visible row before re-rendering so new
+        // mail arriving above the user's current scroll position doesn't
+        // yank them. If they're at the very top, no anchor — new rows
+        // appear above as usual.
+        withScrollAnchor(body, () => renderMessages(body, "", result.items));
 
         const targetUuid = remembered ? pickRestoreUid(result.items, remembered) : null;
         if (targetUuid) {
-            body.scrollTop = savedScroll;
+            // Only restore the saved scrollTop on a first paint (cache miss).
+            // After a sync-driven re-render, withScrollAnchor has already
+            // placed the body — overriding here would undo the anchor.
+            if (!cached) body.scrollTop = savedScroll;
             restoreSelection(body, targetUuid);
         } else if (autoSelect) {
             selectFirst(body);
@@ -981,7 +1063,9 @@ export async function loadMessages(accountId: string, folderId: number, page = 1
         }
 
         state.setMessages(result.items);
-        renderMessages(body, accountId, result.items);
+        // Anchor on topmost visible row before render so a sync-driven
+        // refresh doesn't yank the user's scroll position.
+        withScrollAnchor(body, () => renderMessages(body, accountId, result.items));
         // Same fate-sharing rule for the non-empty branch: if the focused
         // viewer message isn't in the freshly-loaded set, clear it.
         if (focusedRow) {
@@ -998,7 +1082,11 @@ export async function loadMessages(accountId: string, folderId: number, page = 1
         if (targetUuid) {
             requestAnimationFrame(() => {
                 if (myGen !== loadGen) return;
-                body.scrollTop = savedScroll;
+                // On a first paint (no cache), use the saved scrollTop.
+                // On a sync-driven re-render (cache existed), the scroll
+                // anchor has already placed the body — overriding here
+                // would undo the anchor and re-yank the user.
+                if (!cached) body.scrollTop = savedScroll;
                 restoreSelection(body, targetUuid);
             });
         } else if (autoSelect) {
@@ -1043,6 +1131,25 @@ function renderMessages(body: HTMLElement, accountId: string, items: any[]): voi
     appendMessages(tempDiv, accountId, items);
     while (tempDiv.firstChild) fragment.appendChild(tempDiv.firstChild);
     body.replaceChildren(fragment);
+    // FATE-SHARING (central rule): viewer state is a byproduct of list
+    // selection. If the previously-focused row isn't in the freshly-
+    // rendered set, the viewer MUST clear — otherwise the user sees a
+    // preview of a message that no longer appears in the list, which is
+    // the "preview but empty summary" bug. Doing this in renderMessages
+    // (not at the per-caller site) covers loadMessages, loadUnifiedInbox,
+    // loadSearchResults, reloadCurrentFolder, and every other code path
+    // that funnels through here. Previous per-caller fate-sharing existed
+    // only in loadMessages — the gap was real. */
+    if (focusedRow) {
+        const fAcct = focusedRow.accountId;
+        const fUid = (focusedRow.msg as any)?.uid;
+        const stillThere = items.some((m: any) =>
+            (m.accountId || accountId) === fAcct && m.uid === fUid);
+        if (!stillThere) {
+            viewerClear();
+            focusedRow = null;
+        }
+    }
 }
 
 function selectFirst(body: HTMLElement): void {