@bobfrankston/mailx 1.0.131 → 1.0.132

package/client/app.js

@@ -2,7 +2,7 @@
  * mailx client entry point.
  * Wires together all UI components and WebSocket connection.
  */
-import { initFolderTree, refreshFolderTree } from "./components/folder-tree.js";
+import { initFolderTree, refreshFolderTree, updateFolderCounts } from "./components/folder-tree.js";
 import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, getSelectedMessages } from "./components/message-list.js";
 import { showMessage, getCurrentMessage } from "./components/message-viewer.js";
 import { connectWebSocket, onWsEvent, triggerSync, getAccounts, getFolders, deleteMessages, undeleteMessage, restartServer, rebuildServer } from "./lib/api-client.js";
@@ -582,7 +582,8 @@ onWsEvent((event) => {
             break;
         }
         case "folderCountsChanged": {
-            refreshFolderTree();
+            // Incremental count update — no DOM rebuild, no jitter
+            updateFolderCounts();
             updateNewMessageCount();
             // Reload message list but keep current scroll position and selection
             reloadCurrentFolder();

package/client/components/folder-tree.js

@@ -9,6 +9,9 @@ let onUnifiedInbox = null;
 let selectedElement;
 let selectedAccountId = null;
 let selectedFolderId = null;
+let isFirstLoad = true; // only auto-select on first load
+// Debounce timer for refreshFolderTree
+let refreshDebounceTimer = null;
 // Persist expand/collapse state in localStorage
 const expandState = JSON.parse(localStorage.getItem("mailx-folders-expanded") || "{}");
 function saveExpandState() {
@@ -114,6 +117,7 @@ function renderNode(node, container, depth) {
     folderEl.dataset.accountId = node.accountId;
     folderEl.dataset.folderId = String(node.id);
     folderEl.dataset.folderPath = node.path;
+    folderEl.dataset.specialUse = node.specialUse || "";
     folderEl.style.paddingLeft = `${depth * 16 + 8}px`;
     // Expand/collapse toggle
     const toggle = document.createElement("span");
@@ -433,8 +437,17 @@ async function loadFolderTree(container) {
             }
             return;
         }
-        // Clear loading state now that we have data
-        container.innerHTML = "";
+        // Fetch ALL account folder data in parallel BEFORE touching the DOM
+        const accountFolderData = await Promise.all(accounts.map(async (account) => {
+            const accountKey = `account:${account.id}`;
+            const accountExpanded = expandState[accountKey] !== false;
+            const folders = accountExpanded ? await getFolders(account.id) : [];
+            return { account, folders };
+        }));
+        // Save scroll position before rebuild
+        const savedScroll = container.scrollTop;
+        // Build entire new tree into a DocumentFragment (off-screen, no reflows)
+        const fragment = document.createDocumentFragment();
         // Unified Inbox (if multiple accounts)
         if (accounts.length > 1) {
             const unifiedEl = document.createElement("div");
@@ -450,9 +463,9 @@ async function loadFolderTree(container) {
                 if (onUnifiedInbox)
                     onUnifiedInbox();
             });
-            container.appendChild(unifiedEl);
+            fragment.appendChild(unifiedEl);
         }
-        for (const account of accounts) {
+        for (const { account, folders } of accountFolderData) {
             const accountEl = document.createElement("div");
             accountEl.className = "ft-account";
             const accountKey = `account:${account.id}`;
@@ -474,10 +487,10 @@ async function loadFolderTree(container) {
                 const allExpanded = Object.entries(expandState)
                     .filter(([k]) => k.startsWith(`${account.id}:`))
                     .every(([, v]) => v);
-                const allFolders = Object.keys(expandState).filter(k => k.startsWith(`${account.id}:`));
+                const allFolderKeys = Object.keys(expandState).filter(k => k.startsWith(`${account.id}:`));
                 // If some expanded, collapse all. If all collapsed, expand all.
                 const newState = !allExpanded;
-                for (const key of allFolders)
+                for (const key of allFolderKeys)
                     expandState[key] = newState;
                 expandState[accountKey] = newState;
                 saveExpandState();
@@ -486,18 +499,21 @@ async function loadFolderTree(container) {
                     loadFolderTree(treeContainer);
             });
             accountEl.appendChild(header);
-            if (accountExpanded) {
-                const allFolders = await getFolders(account.id);
-                const delimiter = allFolders[0]?.delimiter || ".";
-                const tree = buildTree(allFolders, delimiter, account.id);
+            if (accountExpanded && folders.length > 0) {
+                const delimiter = folders[0]?.delimiter || ".";
+                const tree = buildTree(folders, delimiter, account.id);
                 sortFolders(tree);
                 for (const node of tree) {
                     renderNode(node, accountEl, 1);
                 }
             }
-            container.appendChild(accountEl);
+            fragment.appendChild(accountEl);
         }
-        // Re-select previous folder on refresh, or auto-select Inbox on first load
+        // Atomic swap — single reflow, no intermediate empty state
+        container.replaceChildren(fragment);
+        // Restore scroll position
+        container.scrollTop = savedScroll;
+        // Re-select previous folder, or auto-select on first load
         const allFolderEls = container.querySelectorAll('.ft-folder');
         let target = null;
         if (selectedFolderId === -1) {
@@ -520,14 +536,13 @@ async function loadFolderTree(container) {
                 }
             }
         }
-        if (!target) {
-            // Prefer unified inbox if available, otherwise pick inbox with most unread
+        if (!target && isFirstLoad) {
+            // Auto-select only on first load — not on refresh (prevents jumping)
             const unified = container.querySelector('.ft-unified');
             if (unified) {
                 target = unified;
             }
             else {
-                // Find all inboxes, pick the one with a badge (unread count)
                 let bestInbox = null;
                 let bestCount = -1;
                 for (const f of allFolderEls) {
@@ -548,6 +563,7 @@ async function loadFolderTree(container) {
             if (target)
                 target.click();
         }
+        isFirstLoad = false;
         // Dismiss startup overlay once tree is loaded
         const overlay = document.getElementById("startup-overlay");
         if (overlay)
@@ -556,7 +572,10 @@ async function loadFolderTree(container) {
         setTimeout(() => overlay?.remove(), 400);
     }
     catch (e) {
-        container.innerHTML = `<div class="folder-loading">Error loading folders: ${e.message}</div>`;
+        const errEl = document.createElement("div");
+        errEl.className = "folder-loading";
+        errEl.textContent = `Error loading folders: ${e.message}`;
+        container.replaceChildren(errEl);
         // Dismiss overlay on error too — show the error, not a spinner
         const overlay = document.getElementById("startup-overlay");
         if (overlay) {
@@ -567,10 +586,128 @@ async function loadFolderTree(container) {
         }
     }
 }
-/** Refresh folder tree (e.g., after sync) */
+/** Refresh folder tree (e.g., after sync) — debounced to prevent rapid rebuilds */
 export function refreshFolderTree() {
+    if (refreshDebounceTimer)
+        clearTimeout(refreshDebounceTimer);
+    refreshDebounceTimer = setTimeout(() => {
+        refreshDebounceTimer = null;
+        const container = document.getElementById("folder-tree");
+        if (container)
+            loadFolderTree(container);
+    }, 300);
+}
+/**
+ * Incremental count update — patches badge counts in-place without rebuilding the DOM.
+ * Used for folderCountsChanged events to avoid jitter. Falls back to full rebuild
+ * if the folder structure has changed.
+ */
+export async function updateFolderCounts() {
     const container = document.getElementById("folder-tree");
-    if (container)
-        loadFolderTree(container);
+    if (!container)
+        return;
+    // If tree hasn't loaded yet, do a full load
+    if (container.children.length === 0 || container.querySelector(".folder-loading")) {
+        refreshFolderTree();
+        return;
+    }
+    try {
+        const accounts = await getAccounts();
+        // Fetch all folder data in parallel
+        const allFolderData = await Promise.all(accounts.map(async (account) => {
+            const folders = await getFolders(account.id);
+            return { accountId: account.id, folders };
+        }));
+        // Build a lookup: accountId+folderId → { unreadCount, totalCount }
+        // Also rebuild trees to get aggregated counts
+        const countMap = new Map();
+        for (const { accountId, folders } of allFolderData) {
+            const delimiter = folders[0]?.delimiter || ".";
+            const tree = buildTree(folders, delimiter, accountId);
+            // Walk the tree and collect counts (buildTree already aggregates)
+            function collectCounts(nodes) {
+                for (const n of nodes) {
+                    countMap.set(`${n.accountId}:${n.id}`, { unread: n.unreadCount, total: n.totalCount });
+                    collectCounts(n.children);
+                }
+            }
+            collectCounts(tree);
+        }
+        // Patch existing DOM elements in-place
+        const folderEls = container.querySelectorAll(".ft-folder[data-account-id][data-folder-id]");
+        let structureChanged = false;
+        for (const el of folderEls) {
+            const htmlEl = el;
+            const key = `${htmlEl.dataset.accountId}:${htmlEl.dataset.folderId}`;
+            const counts = countMap.get(key);
+            if (!counts)
+                continue; // folder not found — structure may have changed
+            // Update unread badge
+            const isOutbox = htmlEl.dataset.specialUse === "outbox" || htmlEl.dataset.folderPath?.toLowerCase() === "outbox";
+            let badge = htmlEl.querySelector(".ft-badge");
+            const outboxBadge = htmlEl.querySelector(".ft-badge-outbox");
+            if (isOutbox) {
+                if (counts.total > 0) {
+                    if (outboxBadge) {
+                        outboxBadge.textContent = String(counts.total);
+                    }
+                    else {
+                        const b = document.createElement("span");
+                        b.className = "ft-badge ft-badge-outbox";
+                        b.textContent = String(counts.total);
+                        htmlEl.querySelector(".ft-folder-name")?.after(b);
+                    }
+                }
+                else if (outboxBadge) {
+                    outboxBadge.remove();
+                }
+            }
+            else {
+                if (counts.unread > 0) {
+                    if (badge) {
+                        badge.textContent = String(counts.unread);
+                    }
+                    else {
+                        const b = document.createElement("span");
+                        b.className = "ft-badge";
+                        b.textContent = String(counts.unread);
+                        htmlEl.querySelector(".ft-folder-name")?.after(b);
+                    }
+                }
+                else if (badge && !badge.classList.contains("ft-badge-outbox")) {
+                    badge.remove();
+                }
+            }
+            // Update total count
+            let totalEl = htmlEl.querySelector(".ft-total-count");
+            if (counts.total > 0) {
+                if (totalEl) {
+                    totalEl.textContent = String(counts.total);
+                }
+                else {
+                    const t = document.createElement("span");
+                    t.className = "ft-total-count";
+                    t.textContent = String(counts.total);
+                    htmlEl.appendChild(t);
+                }
+            }
+            else if (totalEl) {
+                totalEl.remove();
+            }
+        }
+        // Check if folder count changed (new folders added or removed)
+        const existingCount = folderEls.length;
+        let serverCount = 0;
+        for (const { folders } of allFolderData)
+            serverCount += folders.length;
+        if (Math.abs(existingCount - serverCount) > 2) {
+            // Structure changed significantly — do a full rebuild
+            refreshFolderTree();
+        }
+    }
+    catch {
+        // If count update fails, fall back to full rebuild
+        refreshFolderTree();
+    }
 }
 //# sourceMappingURL=folder-tree.js.map

package/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx-client",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": true,
   "type": "module",
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.131",
+  "version": "1.0.132",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",

package/packages/mailx-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx-server",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",