@bobfrankston/mailx 1.0.118 → 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");
@@ -844,7 +875,37 @@ fetch("/api/version").then(r => r.json()).then(d => {
         : "";
     if (el)
         el.textContent = `mailx v${d.version}${storageLabel}${isApp ? "" : " [browser]"}`;
-    if (storage.cloudError) {
+    if (d.settingsError) {
+        showAlert(d.settingsError, "settings-error");
+        // Add repair button to the banner
+        const banner = document.getElementById("alert-banner");
+        if (banner && !banner.querySelector(".repair-btn")) {
+            const btn = document.createElement("button");
+            btn.className = "repair-btn status-action";
+            btn.textContent = "Repair: restore accounts from cache";
+            btn.style.cssText = "margin-left:1rem;padding:0.25rem 0.75rem;background:#a6e3a1;color:#1e1e2e;border:none;border-radius:4px;cursor:pointer;font-weight:bold";
+            btn.onclick = async () => {
+                btn.textContent = "Restoring...";
+                btn.disabled = true;
+                try {
+                    const r = await fetch("/api/repair-accounts", { method: "POST" });
+                    const data = await r.json();
+                    if (data.ok) {
+                        hideAlert();
+                        setTimeout(() => location.reload(), 1000);
+                    }
+                    else {
+                        btn.textContent = `Failed: ${data.error}`;
+                    }
+                }
+                catch (e) {
+                    btn.textContent = `Error: ${e.message}`;
+                }
+            };
+            banner.querySelector("#alert-text")?.after(btn);
+        }
+    }
+    else if (storage.cloudError) {
         showAlert(`Cloud storage error: ${storage.cloudError}`, "cloud-error");
     }
 }).catch(async () => {

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.118",
+  "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-api/index.js

@@ -158,6 +158,48 @@ export function createApiRouter(db, imapManager) {
             res.status(500).json({ error: e.message });
         }
     });
+    // ── Repair: restore accounts from DB cache to settings, re-register IMAP ──
+    router.post("/repair-accounts", async (req, res) => {
+        try {
+            // Get accounts from DB (stale but present)
+            const dbAccounts = db.getAccountConfigs();
+            if (dbAccounts.length === 0) {
+                res.json({ ok: false, error: "No cached accounts in database" });
+                return;
+            }
+            // Rebuild account configs from DB's stored config_json
+            const restored = [];
+            for (const a of dbAccounts) {
+                try {
+                    const cfg = JSON.parse(a.configJson);
+                    restored.push(cfg);
+                }
+                catch { /* skip corrupt entries */ }
+            }
+            if (restored.length === 0) {
+                res.json({ ok: false, error: "Could not parse cached account configs" });
+                return;
+            }
+            // Save back to shared dir (and cloud API if active)
+            saveAccounts(restored);
+            // Re-register in IMAP manager
+            for (const acct of restored) {
+                try {
+                    await imapManager.addAccount(acct);
+                    console.log(`  [repair] Re-registered account: ${acct.name} (${acct.id})`);
+                }
+                catch (e) {
+                    console.error(`  [repair] Failed to register ${acct.id}: ${e.message}`);
+                }
+            }
+            // Start sync
+            imapManager.syncAll().catch(() => { });
+            res.json({ ok: true, message: `Restored ${restored.length} account(s) and started sync.` });
+        }
+        catch (e) {
+            res.status(500).json({ error: e.message });
+        }
+    });
     // ── Send ──
     router.post("/send", async (req, res) => {
         try {

package/packages/mailx-imap/index.d.ts

@@ -56,6 +56,8 @@ export declare class ImapManager extends EventEmitter {
     private createClient;
     /** Track client logout for connection counting */
     private trackLogout;
+    /** Number of registered IMAP accounts */
+    getAccountCount(): number;
     /** Register an account */
     addAccount(account: AccountConfig): Promise<void>;
     /** Sync folder list for an account */

package/packages/mailx-imap/index.js

@@ -214,6 +214,8 @@ export class ImapManager extends EventEmitter {
         this.activeConnections.set(accountId, count);
         console.log(`  [conn] ${accountId}: -1 (${count} active)`);
     }
+    /** Number of registered IMAP accounts */
+    getAccountCount() { return this.configs.size; }
     /** Register an account */
     async addAccount(account) {
         if (this.configs.has(account.id))
@@ -686,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);
@@ -694,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;
                     }
                 }
@@ -701,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-server/index.js

@@ -94,7 +94,13 @@ const apiRouter = createApiRouter(db, imapManager);
 app.use("/api", apiRouter);
 app.get("/api/version", (req, res) => {
     const storage = getStorageInfo();
-    res.json({ version: SERVER_VERSION, theme: settings.ui?.theme || "system", storage });
+    const imapAccounts = imapManager.getAccountCount();
+    const dbAccounts = db.getAccounts().length;
+    // Warn if DB has accounts but IMAP has none — stale DB, settings missing
+    const settingsError = (dbAccounts > 0 && imapAccounts === 0)
+        ? "No accounts loaded from settings — showing stale data. Check accounts.jsonc on your cloud drive."
+        : undefined;
+    res.json({ version: SERVER_VERSION, theme: settings.ui?.theme || "system", storage, imapAccounts, settingsError });
 });
 app.all("/info", (req, res) => {
     res.json({ version: SERVER_VERSION, uptime: Math.round(process.uptime()), port: PORT, imap: imapManager.useNativeClient ? "native" : "imapflow" });

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) {

package/packages/mailx-store/db.d.ts

@@ -15,6 +15,12 @@ export declare class MailxDB {
         email: string;
         lastSync: number;
     }[];
+    getAccountConfigs(): {
+        id: string;
+        name: string;
+        email: string;
+        configJson: string;
+    }[];
     updateLastSync(accountId: string, timestamp: number): void;
     upsertFolder(accountId: string, folderPath: string, name: string, specialUse: string, delimiter: string): number;
     getFolders(accountId: string): Folder[];

package/packages/mailx-store/db.js

@@ -137,6 +137,9 @@ export class MailxDB {
     getAccounts() {
         return this.db.prepare("SELECT id, name, email, last_sync as lastSync FROM accounts").all();
     }
+    getAccountConfigs() {
+        return this.db.prepare("SELECT id, name, email, config_json as configJson FROM accounts").all();
+    }
     updateLastSync(accountId, timestamp) {
         this.db.prepare("UPDATE accounts SET last_sync = ? WHERE id = ?").run(timestamp, accountId);
     }