@bobfrankston/mailx 1.0.119 → 1.0.120

package/client/app.js

@@ -541,12 +541,26 @@ onWsEvent((event) => {
                 startupStatus.textContent = "Loading accounts...";
             // Don't refresh folder tree on connect — it's already loaded by initFolderTree
             break;
-        case "syncProgress":
+        case "syncProgress": {
             if (statusSync)
-                statusSync.textContent = `Syncing ${event.accountId}: ${event.phase} ${event.progress}%`;
+                statusSync.textContent = `Syncing ${event.accountId}: ${event.phase} ${event.progress || 0}%`;
             if (startupStatus)
                 startupStatus.textContent = `Syncing ${event.accountId}: ${event.phase}`;
+            // Mark syncing folder in tree
+            const syncPath = event.phase?.startsWith("sync:") ? event.phase.slice(5) : null;
+            // Clear previous syncing markers for this account
+            document.querySelectorAll(`.ft-folder.ft-syncing[data-account-id="${event.accountId}"]`).forEach(el => el.classList.remove("ft-syncing"));
+            if (syncPath) {
+                const folderEl = document.querySelector(`.ft-folder[data-account-id="${event.accountId}"][data-folder-path="${CSS.escape(syncPath)}"]`);
+                if (folderEl) {
+                    if (event.progress < 100)
+                        folderEl.classList.add("ft-syncing");
+                    else
+                        folderEl.classList.remove("ft-syncing");
+                }
+            }
             break;
+        }
         case "folderCountsChanged": {
             refreshFolderTree();
             updateNewMessageCount();
@@ -703,6 +717,7 @@ const optTwoLine = document.getElementById("opt-two-line");
 const optPreview = document.getElementById("opt-preview");
 const optSnippet = document.getElementById("opt-snippet");
 const optFlagged = document.getElementById("opt-flagged");
+const optFolderCounts = document.getElementById("opt-folder-counts");
 // Toggle dropdown
 viewBtn?.addEventListener("click", (e) => {
     e.stopPropagation();
@@ -720,6 +735,7 @@ const savedTwoLine = localStorage.getItem("mailx-two-line") === "true";
 const savedPreview = localStorage.getItem("mailx-preview") !== "false"; // default true
 const savedSnippet = localStorage.getItem("mailx-snippet") !== "false"; // default true
 const savedFlagged = localStorage.getItem("mailx-flagged") === "true";
+const savedFolderCounts = localStorage.getItem("mailx-folder-counts") === "true";
 if (optTwoLine)
     optTwoLine.checked = savedTwoLine;
 if (optPreview)
@@ -728,6 +744,8 @@ if (optSnippet)
     optSnippet.checked = savedSnippet;
 if (optFlagged)
     optFlagged.checked = savedFlagged;
+if (optFolderCounts)
+    optFolderCounts.checked = savedFolderCounts;
 if (savedTwoLine)
     document.getElementById("message-list")?.classList.add("two-line");
 if (!savedPreview)
@@ -736,6 +754,8 @@ if (!savedSnippet)
     document.getElementById("message-list")?.classList.add("no-snippets");
 if (savedFlagged)
     document.getElementById("ml-body")?.classList.add("flagged-only");
+if (savedFolderCounts)
+    document.getElementById("folder-tree")?.classList.add("show-folder-counts");
 // Two-line toggle
 optTwoLine?.addEventListener("change", () => {
     const list = document.getElementById("message-list");
@@ -780,6 +800,17 @@ optFlagged?.addEventListener("change", () => {
     }
     localStorage.setItem("mailx-flagged", String(optFlagged.checked));
 });
+// Folder counts toggle
+optFolderCounts?.addEventListener("change", () => {
+    const tree = document.getElementById("folder-tree");
+    if (optFolderCounts.checked) {
+        tree?.classList.add("show-folder-counts");
+    }
+    else {
+        tree?.classList.remove("show-folder-counts");
+    }
+    localStorage.setItem("mailx-folder-counts", String(optFolderCounts.checked));
+});
 // ── Settings menu ──
 const settingsBtn = document.getElementById("btn-settings");
 const settingsDropdown = document.getElementById("settings-dropdown");

package/client/components/folder-tree.js

@@ -100,6 +100,7 @@ function renderNode(node, container, depth) {
     folderEl.className = "ft-folder";
     folderEl.dataset.accountId = node.accountId;
     folderEl.dataset.folderId = String(node.id);
+    folderEl.dataset.folderPath = node.path;
     folderEl.style.paddingLeft = `${depth * 16 + 8}px`;
     // Expand/collapse toggle
     const toggle = document.createElement("span");
@@ -139,6 +140,13 @@ function renderNode(node, container, depth) {
         badge.textContent = String(node.unreadCount);
         folderEl.appendChild(badge);
     }
+    // Total count (shown when View > Folder counts is checked)
+    if (node.totalCount > 0) {
+        const total = document.createElement("span");
+        total.className = "ft-total-count";
+        total.textContent = String(node.totalCount);
+        folderEl.appendChild(total);
+    }
     folderEl.addEventListener("click", () => {
         if (node.id === -1) {
             // Virtual parent — toggle expand instead of selecting

package/client/index.html

@@ -26,6 +26,7 @@
                     <label class="tb-menu-item"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
+                    <label class="tb-menu-item"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
                 </div>
             </div>
             <div class="tb-menu" id="settings-menu">

package/client/styles/components.css

@@ -259,6 +259,31 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     outline-offset: -2px;
 }
 
+.ft-folder.ft-syncing .ft-folder-name::after {
+    content: " \21BB";  /* ↻ clockwise arrow */
+    color: var(--color-accent);
+    animation: ft-spin 1s linear infinite;
+    display: inline-block;
+}
+
+@keyframes ft-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.ft-total-count {
+    display: none;
+    margin-left: auto;
+    padding: 0 6px;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    opacity: 0.7;
+}
+
+.show-folder-counts .ft-total-count {
+    display: inline;
+}
+
 .ml-row.dragging {
     opacity: 0.5;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.119",
+  "version": "1.0.120",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -20,7 +20,7 @@
     "postinstall": "node launcher/builder/postinstall.js"
   },
   "dependencies": {
-    "@bobfrankston/iflow": "^1.0.47",
+    "@bobfrankston/iflow": "^1.0.48",
     "@bobfrankston/miscinfo": "^1.0.7",
     "@bobfrankston/oauthsupport": "^1.0.20",
     "@bobfrankston/rust-builder": "^0.1.3",

package/packages/mailx-imap/index.js

@@ -688,6 +688,7 @@ export class ImapManager extends EventEmitter {
                     client = this.createClient(accountId);
                     const count = await client.getMessagesCount("INBOX");
                     await client.logout();
+                    this.trackLogout(accountId);
                     client = null;
                     const prev = this.lastInboxCounts.get(accountId) ?? count;
                     this.lastInboxCounts.set(accountId, count);
@@ -696,6 +697,7 @@ export class ImapManager extends EventEmitter {
                         client = this.createClient(accountId);
                         await this.syncFolder(accountId, inbox.id, client);
                         await client.logout();
+                        this.trackLogout(accountId);
                         client = null;
                     }
                 }
@@ -703,11 +705,13 @@ export class ImapManager extends EventEmitter {
                     // Lightweight check — silently ignore errors
                 }
                 finally {
-                    if (client)
+                    if (client) {
                         try {
                             await client.logout();
                         }
                         catch { /* ignore */ }
+                        this.trackLogout(accountId);
+                    }
                 }
             }
         }

package/packages/mailx-service/index.js

@@ -39,12 +39,21 @@ export class MailxService {
     }
     // ── Accounts ──
     getAccounts() {
-        const accounts = this.db.getAccounts();
+        const dbAccounts = this.db.getAccounts();
         const settings = loadSettings();
-        return accounts.map(a => {
-            const cfg = settings.accounts.find(s => s.id === a.id);
-            return { ...a, label: cfg?.label, defaultSend: cfg?.defaultSend || false };
-        });
+        // Order by settings (accounts.jsonc is the source of truth for order)
+        const ordered = [];
+        for (const cfg of settings.accounts) {
+            const a = dbAccounts.find(d => d.id === cfg.id);
+            if (a)
+                ordered.push({ ...a, label: cfg.label, defaultSend: cfg.defaultSend || false });
+        }
+        // Append any DB accounts not in settings
+        for (const a of dbAccounts) {
+            if (!ordered.find((o) => o.id === a.id))
+                ordered.push(a);
+        }
+        return ordered;
     }
     // ── Folders ──
     getFolders(accountId) {