@bobfrankston/mailx 1.0.465 → 1.0.500

package/client/app.js

@@ -3,7 +3,7 @@
  * Wires together all UI components and WebSocket connection.
  */
 import { initFolderTree, refreshFolderTree, updateFolderCounts, setFolderSynced, getFolderSynced, setOutboxTotal } from "./components/folder-tree.js";
-import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, clearSearchMode, getSelectedMessages, markBodiesCached } from "./components/message-list.js";
+import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, clearSearchMode, getSelectedMessages, markBodiesCached, getCurrentFocused, releaseFocus, removeMessagesAndReconcile } from "./components/message-list.js";
 import { showMessage, getCurrentMessage, initViewer, popOutCurrentMessage } from "./components/message-viewer.js";
 import { connectWebSocket, onWsEvent, triggerSync, syncAccount, reauthenticate, getAccounts, getFolders, deleteMessages, undeleteMessage, restartServer, getSyncPending, getVersion, getSettings, saveSettings, getAutocompleteSettings, saveAutocompleteSettings, repairAccounts, updateFlags, markAsSpamMessages, logClientEvent, sendMessage as apiSendMessage } from "./lib/api-client.js";
 import * as messageState from "./lib/message-state.js";
@@ -259,14 +259,10 @@ function showRestartForConfigBanner() {
 // ── Wire up components ──
 const folderTree = document.getElementById("folder-tree");
 let currentFolderSpecialUse = "";
-function clearViewer() {
-    messageState.select(null); // Deselect — viewer clears via subscription
-}
-// Anyone can ask the viewer to clear by dispatching a `mailx-clear-viewer`
-// CustomEvent on document. Used by message-list's loadSearchResults so the
-// stale preview from the prior selection doesn't linger over the new search
-// results. Slice D will replace this with row-object-level `unfocus()`.
-document.addEventListener("mailx-clear-viewer", () => clearViewer());
+// Selection / preview drift is now structurally impossible: the list owns
+// focus, the viewer is a passive renderer, and `releaseFocus()` is the
+// only way to deselect+clear. The old `mailx-clear-viewer` event and the
+// app-level clearViewer() shim are no longer needed.
 const folderTitleEl = document.getElementById("ml-folder-title");
 let currentFolderName = "";
 let currentFolderSyncedAt;
@@ -312,7 +308,7 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
     if (searchInput)
         searchInput.value = "";
     markAsSeen();
-    clearViewer();
+    releaseFocus();
     loadMessages(accountId, folderId, 1, specialUse);
     setTitle(`mailx - ${folderName}`);
     setNarrowFolderTitle(folderName);
@@ -320,7 +316,7 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
 }, () => {
     // Unified inbox handler
     currentFolderSpecialUse = "inbox";
-    clearViewer();
+    releaseFocus();
     loadUnifiedInbox();
     setTitle("mailx - All Inboxes");
     setNarrowFolderTitle("All Inboxes");
@@ -339,20 +335,20 @@ initMessageList((accountId, uid, folderId) => {
     }
 });
 initViewer();
-// Status bar: show selected message UID/folder for debugging
-messageState.subscribe((change) => {
-    if (change === "selected" || change === "removed") {
-        const acctEl = document.getElementById("status-accounts");
-        if (!acctEl)
-            return;
-        const sel = messageState.getSelected();
-        if (sel) {
-            acctEl.textContent = `${sel.accountId}/uid:${sel.uid} folder:${sel.folderId}`;
-            acctEl.style.color = "";
-        }
-        else {
-            acctEl.textContent = "";
-        }
+// Status bar: show focused message UID/folder for debugging. The list
+// fires mailx-focus-changed with the focused envelope (or null). Pure
+// observation — this listener never drives the viewer.
+document.addEventListener("mailx-focus-changed", (e) => {
+    const acctEl = document.getElementById("status-accounts");
+    if (!acctEl)
+        return;
+    const sel = e.detail;
+    if (sel) {
+        acctEl.textContent = `${sel.accountId}/uid:${sel.uid} folder:${sel.folderId}`;
+        acctEl.style.color = "";
+    }
+    else {
+        acctEl.textContent = "";
     }
 });
 // Q53: per-account last-sync timestamps surfaced via the status-sync hover.
@@ -424,10 +420,9 @@ const backToList = (e) => {
     }
     document.getElementById("message-viewer")?.classList.remove("narrow-active");
     document.getElementById("message-list")?.classList.remove("narrow-hidden");
-    // Deselect the message so the viewer component clears. Without this, a
-    // subsequent "selected" state change (e.g. sync reload) could re-show the
-    // same message and re-trigger narrow-active.
-    messageState.select(null);
+    // Release focus so the viewer clears. Without this a subsequent sync
+    // reload could re-show the same message and re-trigger narrow-active.
+    releaseFocus();
 };
 document.getElementById("btn-back")?.addEventListener("click", backToList);
 // Android WebView sometimes drops synthetic clicks after a touchend inside a
@@ -912,8 +907,11 @@ async function deleteSelectedMessages() {
             if (statusSync?.textContent?.includes("undo"))
                 statusSync.textContent = "";
         }, 30000);
-        // Remove from shared state — list and viewer update automatically
-        messageState.removeMessages(selected);
+        // Remove via the list controller — single transaction filters
+        // state, deletes DOM rows, hands focus to a survivor (or clears
+        // the viewer). Replaces the old "state.removeMessages broadcasts
+        // a removed event, list+viewer subscribe independently" model.
+        removeMessagesAndReconcile(selected);
     }
     catch (e) {
         console.error(`Delete failed: ${e.message}`);
@@ -988,7 +986,7 @@ document.getElementById("btn-tb-delete")?.addEventListener("click", deleteSelect
 document.getElementById("btn-tb-spam")?.addEventListener("click", spamSelectedMessages);
 // ── Flag toggle ──
 document.getElementById("btn-flag")?.addEventListener("click", async () => {
-    const sel = messageState.getSelected();
+    const sel = getCurrentFocused();
     if (!sel)
         return;
     const isFlagged = sel.flags.includes("\\Flagged");
@@ -1030,7 +1028,7 @@ async function spamSelectedMessages() {
     // If the IPC fails, put them back. This matches local-first — the server
     // sync is a background detail, the user's action should feel instant.
     const snapshot = [...selected];
-    messageState.removeMessages(selected);
+    removeMessagesAndReconcile(selected);
     try {
         const byAccount = new Map();
         for (const msg of snapshot) {
@@ -1097,7 +1095,7 @@ document.getElementById("btn-spam-report")?.addEventListener("click", async () =
         btn.textContent = "✓";
         const status = document.getElementById("status-sync");
         if (status)
-            status.textContent = "Logged to ~/.mailx/spam.csv";
+            status.textContent = "Logged to ~/.rmfmail/spam.csv";
         setTimeout(() => { btn.textContent = originalLabel; btn.disabled = false; }, 1500);
     }
     catch (e) {
@@ -1110,10 +1108,10 @@ document.getElementById("btn-spam-report")?.addEventListener("click", async () =
 });
 document.getElementById("btn-compose")?.addEventListener("click", () => openCompose("new"));
 document.getElementById("btn-mark-unread")?.addEventListener("click", () => {
-    // Toggle \Seen on the currently-selected message. Mirrors the R
+    // Toggle \Seen on the currently-focused message. Mirrors the R
     // keyboard shortcut and the right-click "Mark unread" menu item, but
     // as a visible toolbar button so users discover the behavior.
-    const sel = messageState.getSelected();
+    const sel = getCurrentFocused();
     if (!sel)
         return;
     const isSeen = sel.flags.includes("\\Seen");
@@ -2133,7 +2131,7 @@ document.addEventListener("keydown", (e) => {
         const active = document.activeElement;
         if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.tagName === "SELECT"))
             return;
-        const sel = messageState.getSelected();
+        const sel = getCurrentFocused();
         if (!sel)
             return;
         e.preventDefault();
@@ -2265,7 +2263,13 @@ optThreadFilter?.addEventListener("change", () => {
     body.classList.toggle("thread-filter-on", optThreadFilter.checked);
     applyThreadFilter();
 });
+// Re-apply thread filter whenever the list contents change (load,
+// search, paged append, removal). The filter also depends on the
+// currently-focused row's threadId, so wire mailx-focus-changed too —
+// a focus change without a list-content change still needs the filter
+// to recompute which sibling rows to hide/show.
 messageState.subscribe(() => applyThreadFilter());
+document.addEventListener("mailx-focus-changed", () => applyThreadFilter());
 function applyThreadFilter() {
     const body = document.getElementById("ml-body");
     if (!body)
@@ -2275,7 +2279,7 @@ function applyThreadFilter() {
             .forEach(r => r.classList.remove("thread-filter-hidden"));
         return;
     }
-    const sel = messageState.getSelected();
+    const sel = getCurrentFocused();
     const tid = sel?.threadId;
     if (!tid)
         return;

package/client/components/folder-tree.js

@@ -388,9 +388,11 @@ function renderNode(node, container, depth) {
                 const moved = toMove.length;
                 if (statusEl)
                     statusEl.textContent = `Moved ${moved} message${moved > 1 ? "s" : ""} to ${node.name} — Ctrl+Z to undo`;
-                // Remove from shared state — list and viewer update automatically
-                const { removeMessages } = await import("../lib/message-state.js");
-                removeMessages(toMove);
+                // Remove via the list controller — single transaction
+                // filters state, deletes DOM rows, hands focus to a
+                // survivor (or clears the viewer).
+                const { removeMessagesAndReconcile } = await import("./message-list.js");
+                removeMessagesAndReconcile(toMove);
                 const treeContainer = document.getElementById("folder-tree");
                 if (treeContainer)
                     loadFolderTree(treeContainer);
@@ -509,8 +511,8 @@ async function loadFolderTree(container) {
                     </form>
                     <details style="margin-top:2rem;color:var(--color-text-muted)">
                         <summary>Manual setup (advanced)</summary>
-                        <p style="margin-top:0.5rem">Create <code>~/.mailx/config.jsonc</code> with a cloud provider:</p>
-                        <code style="display:block;padding:0.75rem;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:4px;margin:0.5rem 0;white-space:pre;font-size:0.85rem">{ "sharedDir": { "provider": "gdrive", "path": "home/.mailx" } }</code>
+                        <p style="margin-top:0.5rem">Create <code>~/.rmfmail/config.jsonc</code> with a cloud provider:</p>
+                        <code style="display:block;padding:0.75rem;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:4px;margin:0.5rem 0;white-space:pre;font-size:0.85rem">{ "sharedDir": { "provider": "gdrive", "path": "rmfmail" } }</code>
                         <p style="margin-top:0.5rem;font-size:0.85rem">Settings sync via Google Drive API (auto-configured for Gmail accounts).</p>
                     </details>
                 </div>`;