@bobfrankston/mailx 1.0.47 → 1.0.50

package/client/app.js

@@ -5,7 +5,7 @@
 import { initFolderTree, refreshFolderTree } from "./components/folder-tree.js";
 import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder } from "./components/message-list.js";
 import { showMessage, getCurrentMessage } from "./components/message-viewer.js";
-import { connectWebSocket, onWsEvent, triggerSync, getAccounts, getFolders, deleteMessage, undeleteMessage, restartServer, getSyncPending } from "./lib/api-client.js";
+import { connectWebSocket, onWsEvent, triggerSync, getAccounts, getFolders, deleteMessage, undeleteMessage, restartServer, rebuildServer, getSyncPending } from "./lib/api-client.js";
 // ── New message badge (favicon + title) ──
 let baseTitle = "mailx";
 let lastSeenCount = 0;
@@ -90,6 +90,29 @@ function setTitle(title) {
     baseTitle = title;
     document.title = badgeCount > 0 ? `(${badgeCount}) ${baseTitle}` : baseTitle;
 }
+// ── Alert banner ──
+const alertBanner = document.getElementById("alert-banner");
+const alertText = document.getElementById("alert-text");
+const alertDismiss = document.getElementById("alert-dismiss");
+const dismissedAlerts = new Set();
+function showAlert(message, key) {
+    if (key && dismissedAlerts.has(key))
+        return;
+    if (alertBanner && alertText) {
+        alertText.textContent = message;
+        alertBanner.hidden = false;
+        alertBanner.dataset.key = key || "";
+    }
+}
+function hideAlert() {
+    if (alertBanner) {
+        const key = alertBanner.dataset.key;
+        if (key)
+            dismissedAlerts.add(key);
+        alertBanner.hidden = true;
+    }
+}
+alertDismiss?.addEventListener("click", hideAlert);
 // ── Wire up components ──
 const folderTree = document.getElementById("folder-tree");
 let currentFolderSpecialUse = "";
@@ -175,7 +198,21 @@ document.getElementById("btn-sync")?.addEventListener("click", async () => {
         btn.classList.remove("syncing");
     }
 });
-document.getElementById("btn-restart")?.addEventListener("click", async () => {
+// Restart menu dropdown
+const restartBtn = document.getElementById("btn-restart");
+const restartDropdown = document.getElementById("restart-dropdown");
+restartBtn?.addEventListener("click", () => {
+    if (restartDropdown)
+        restartDropdown.hidden = !restartDropdown.hidden;
+});
+document.addEventListener("click", (e) => {
+    if (restartDropdown && !restartDropdown.hidden && !e.target.closest("#restart-menu")) {
+        restartDropdown.hidden = true;
+    }
+});
+document.getElementById("btn-restart-quick")?.addEventListener("click", async () => {
+    if (restartDropdown)
+        restartDropdown.hidden = true;
     const statusSync = document.getElementById("status-sync");
     if (statusSync)
         statusSync.textContent = "Restarting...";
@@ -183,7 +220,19 @@ document.getElementById("btn-restart")?.addEventListener("click", async () => {
         await restartServer();
     }
     catch { /* server is shutting down */ }
-    // Server broadcasts reload event; if missed, WebSocket reconnect will trigger page reload
+});
+document.getElementById("btn-rebuild")?.addEventListener("click", async () => {
+    if (restartDropdown)
+        restartDropdown.hidden = true;
+    if (!confirm("Rebuild local cache?\n\nThis wipes the local database and message store, then re-downloads everything.\nAccounts and settings are preserved.\n\nThis is safe and usually takes just a few minutes."))
+        return;
+    const statusSync = document.getElementById("status-sync");
+    if (statusSync)
+        statusSync.textContent = "Rebuilding...";
+    try {
+        await rebuildServer();
+    }
+    catch { /* server is shutting down */ }
 });
 async function openCompose(mode) {
     const current = getCurrentMessage();
@@ -496,6 +545,7 @@ onWsEvent((event) => {
         case "error":
             if (statusSync)
                 statusSync.textContent = `Error: ${event.message}`;
+            showAlert(event.message, "ws-error");
             break;
     }
 });
@@ -539,6 +589,7 @@ const viewBtn = document.getElementById("btn-view");
 const viewDropdown = document.getElementById("view-dropdown");
 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");
 // Toggle dropdown
 viewBtn?.addEventListener("click", (e) => {
@@ -553,17 +604,22 @@ document.addEventListener("click", () => {
 // Restore saved view settings
 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";
 if (optTwoLine)
     optTwoLine.checked = savedTwoLine;
 if (optPreview)
     optPreview.checked = savedPreview;
+if (optSnippet)
+    optSnippet.checked = savedSnippet;
 if (optFlagged)
     optFlagged.checked = savedFlagged;
 if (savedTwoLine)
     document.getElementById("message-list")?.classList.add("two-line");
 if (!savedPreview)
     document.querySelector(".main-area")?.classList.add("no-preview");
+if (!savedSnippet)
+    document.getElementById("message-list")?.classList.add("no-snippets");
 if (savedFlagged)
     document.getElementById("ml-body")?.classList.add("flagged-only");
 // Two-line toggle
@@ -588,6 +644,17 @@ optPreview?.addEventListener("change", () => {
     }
     localStorage.setItem("mailx-preview", String(optPreview.checked));
 });
+// Preview snippet toggle
+optSnippet?.addEventListener("change", () => {
+    const list = document.getElementById("message-list");
+    if (optSnippet.checked) {
+        list?.classList.remove("no-snippets");
+    }
+    else {
+        list?.classList.add("no-snippets");
+    }
+    localStorage.setItem("mailx-snippet", String(optSnippet.checked));
+});
 // Flagged-only filter
 optFlagged?.addEventListener("change", () => {
     const body = document.getElementById("ml-body");
@@ -602,9 +669,10 @@ optFlagged?.addEventListener("change", () => {
 const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
 fetch("/api/version").then(r => r.json()).then(d => {
     const el = document.getElementById("app-version");
-    const driveName = d.drive === "local" ? "" : ` [${d.drive?.split(/[/\\]/).pop() || d.drive}]`;
+    const storage = d.storage || { provider: "local", mode: "local" };
+    const storageLabel = storage.provider === "local" ? "" : ` · ${storage.provider}${storage.mode === "api" ? " (API)" : ""}`;
     if (el)
-        el.textContent = `mailx s${d.server}/c${d.client}${driveName}${isApp ? "" : " [browser]"}`;
+        el.textContent = `mailx v${d.version}${storageLabel}${isApp ? "" : " · browser"}`;
 }).catch(async () => {
     // Server not running — try to start it if we're in the app
     const startupStatus = document.getElementById("startup-status");

package/client/index.html

@@ -48,6 +48,11 @@
         </div>
     </header>
 
+    <div class="alert-banner" id="alert-banner" hidden>
+        <span id="alert-text"></span>
+        <button class="alert-dismiss" id="alert-dismiss" title="Dismiss">&times;</button>
+    </div>
+
     <div class="folder-panel">
         <div class="ft-filter">
             <input type="text" id="ft-filter-input" placeholder="Find folder..." autocomplete="off">

package/client/lib/api-client.js

@@ -154,6 +154,9 @@ export function restartServer() {
         return mailxapi.restart?.();
     return api("/restart", { method: "POST" }).catch(() => { });
 }
+export function rebuildServer() {
+    return api("/rebuild", { method: "POST" }).catch(() => { });
+}
 // ── Folder management ──
 export function markFolderRead(accountId, folderId) {
     if (hasIPC)

package/client/styles/components.css

@@ -1,5 +1,18 @@
 /* mailx component styles */
 
+/* ── Alert Banner ── */
+.alert-banner {
+    display: flex; align-items: center; gap: var(--gap-sm);
+    padding: var(--gap-xs) var(--gap-md);
+    background: oklch(0.45 0.15 25); color: #fff;
+    font-size: var(--font-size-sm); font-weight: 500;
+    grid-area: alert;
+}
+.alert-banner[hidden] { display: none; }
+.alert-banner #alert-text { flex: 1; }
+.alert-dismiss { background: none; border: none; color: #fff; font-size: 1.2em; cursor: pointer; padding: 0 var(--gap-xs); opacity: 0.7; }
+.alert-dismiss:hover { opacity: 1; }
+
 /* ── Context Menu ── */
 
 .ctx-menu {
@@ -65,7 +78,7 @@
 .tb-icon { font-size: 1.1em; }
 .tb-btn.syncing .tb-icon { animation: spin 1s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
-.app-version { font-size: var(--font-size-sm); color: var(--color-text-muted); }
+.app-version { font-size: var(--font-size-sm); color: var(--color-text); opacity: 0.7; }
 
 .tb-menu { position: relative; display: inline-block; }
 .tb-menu-dropdown {

package/client/styles/layout.css

@@ -9,9 +9,10 @@
 body {
     display: grid;
     grid-template-columns: var(--folder-width) 1fr;
-    grid-template-rows: var(--toolbar-height) 1fr var(--statusbar-height);
+    grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
     grid-template-areas:
         "toolbar  toolbar"
+        "alert    alert"
         "folders  main"
         "status   status";
     height: 100vh;
@@ -59,8 +60,10 @@ body {
 @media (max-width: 768px) {
     body {
         grid-template-columns: 1fr;
+        grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
         grid-template-areas:
             "toolbar"
+            "alert"
             "main"
             "status";
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.47",
+  "version": "1.0.50",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -20,9 +20,9 @@
     "postinstall": "node launcher/builder/postinstall.js"
   },
   "dependencies": {
-    "@bobfrankston/iflow": "^1.0.28",
+    "@bobfrankston/iflow": "^1.0.30",
     "@bobfrankston/miscinfo": "^1.0.6",
-    "@bobfrankston/oauthsupport": "^1.0.11",
+    "@bobfrankston/oauthsupport": "^1.0.13",
     "@bobfrankston/rust-builder": "^0.1.2",
     "mailparser": "^3.7.2",
     "quill": "^2.0.3",

package/packages/mailx-imap/index.js

@@ -1018,15 +1018,18 @@ export class ImapManager extends EventEmitter {
         const account = settings.accounts.find(a => a.id === accountId);
         if (!account || account.imap.auth !== "oauth2")
             return null;
-        // Find credentials.json — same as iflow uses
-        const iflowDir = path.resolve(import.meta.dirname, "..", "..", "..", "MailApps", "iflow");
-        const credentialsPath = path.join(iflowDir, "credentials.json");
-        if (!fs.existsSync(credentialsPath)) {
-            console.error("  [contacts] credentials.json not found at", credentialsPath);
+        // Find iflow-credentials.json from the iflow package
+        const credentialsCandidates = [
+            path.resolve(import.meta.dirname, "..", "..", "node_modules", "@bobfrankston", "iflow", "iflow-credentials.json"),
+            path.resolve(import.meta.dirname, "..", "..", "..", "node_modules", "@bobfrankston", "iflow", "iflow-credentials.json"),
+        ];
+        const credentialsPath = credentialsCandidates.find(p => fs.existsSync(p));
+        if (!credentialsPath) {
+            console.error("  [contacts] iflow-credentials.json not found");
             return null;
         }
         const accountDir = account.imap.user.replace(/[@.]/g, "_");
-        const tokenDir = path.join(iflowDir, "tokens", accountDir);
+        const tokenDir = path.join(getConfigDir(), "tokens", accountDir);
         const token = await authenticateOAuth(credentialsPath, {
             scope: "https://www.googleapis.com/auth/contacts.readonly",
             tokenDirectory: tokenDir,

package/packages/mailx-server/index.js

@@ -9,7 +9,7 @@ import * as fs from "node:fs";
 import { MailxDB } from "@bobfrankston/mailx-store";
 import { ImapManager } from "@bobfrankston/mailx-imap";
 import { createApiRouter } from "@bobfrankston/mailx-api";
-import { loadSettings, getConfigDir, getStorePath, getSharedDir, initLocalConfig } from "@bobfrankston/mailx-settings";
+import { loadSettings, getConfigDir, getStorePath, getStorageInfo, initLocalConfig } from "@bobfrankston/mailx-settings";
 import { ports } from "@bobfrankston/miscinfo";
 import { createServer } from "node:http";
 const PORT = ports.mailx;
@@ -44,7 +44,6 @@ console.error = (...args) => {
 // Read version from root package.json (the published version)
 const rootPkg = JSON.parse(fs.readFileSync(path.join(import.meta.dirname, "..", "..", "package.json"), "utf-8"));
 const SERVER_VERSION = rootPkg.version;
-const CLIENT_VERSION = rootPkg.version;
 // ── Initialize ──
 initLocalConfig();
 const settings = loadSettings();
@@ -82,10 +81,8 @@ app.use("/node_modules", express.static(path.join(rootDir, "node_modules"), { et
 const apiRouter = createApiRouter(db, imapManager);
 app.use("/api", apiRouter);
 app.get("/api/version", (req, res) => {
-    const sharedDir = getSharedDir();
-    const localDir = getConfigDir();
-    const drive = sharedDir === localDir ? "local" : sharedDir;
-    res.json({ server: SERVER_VERSION, client: CLIENT_VERSION, theme: settings.ui?.theme || "system", drive });
+    const storage = getStorageInfo();
+    res.json({ version: SERVER_VERSION, theme: settings.ui?.theme || "system", storage });
 });
 app.get("/status", (req, res) => {
     const accounts = db.getAccounts();
@@ -111,7 +108,7 @@ h1{font-size:1.2rem}h2{font-size:1rem;margin-top:1.5rem}.ok{color:#a6e3a1}.warn{
 a{color:#89b4fa}</style></head>
 <body>
 <h1>mailx status</h1>
-<p>Server: v${SERVER_VERSION} | Client: v${CLIENT_VERSION}</p>
+<p>mailx v${SERVER_VERSION}</p>
 <p>Uptime: ${Math.floor(uptime / 3600)}h ${Math.floor((uptime % 3600) / 60)}m | Memory: ${Math.round(mem.rss / 1048576)} MB</p>
 <p>Pending sync: <span class="${pendingSync > 0 ? "warn" : "ok"}">${pendingSync}</span></p>
 <h2>Accounts</h2>
@@ -199,6 +196,9 @@ imapManager.on("syncProgress", (accountId, phase, progress) => {
 imapManager.on("folderCountsChanged", (accountId, counts) => {
     broadcast({ type: "folderCountsChanged", accountId, counts });
 });
+imapManager.on("syncError", (accountId, error) => {
+    broadcast({ type: "error", message: `${accountId}: ${error}` });
+});
 // ── Startup ──
 async function start() {
     console.log("mailx server starting...");

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

@@ -24,6 +24,11 @@ export declare function cloudRead(filename: string): Promise<string | null>;
 export declare function cloudWrite(filename: string, content: string): Promise<boolean>;
 /** Whether cloud API fallback is active */
 export declare function isCloudMode(): boolean;
+/** Get storage provider info for display (e.g. "OneDrive", "Google Drive", "local") */
+export declare function getStorageInfo(): {
+    provider: string;
+    mode: "mount" | "api" | "local";
+};
 declare const DEFAULT_PREFERENCES: {
     ui: {
         theme: "system" | "dark" | "light";

package/packages/mailx-settings/index.js

@@ -155,6 +155,32 @@ export async function cloudWrite(filename, content) {
 export function isCloudMode() {
     return pendingCloudConfig !== null;
 }
+/** Get storage provider info for display (e.g. "OneDrive", "Google Drive", "local") */
+export function getStorageInfo() {
+    const config = readLocalConfig();
+    if (config.sharedDir) {
+        const entries = Array.isArray(config.sharedDir) ? config.sharedDir : [config.sharedDir];
+        for (const entry of entries) {
+            const resolved = resolveSharedEntry(entry);
+            if (resolved && resolved !== LOCAL_DIR) {
+                // Mounted cloud drive
+                const name = typeof entry === "string" ? "cloud" :
+                    entry.provider === "onedrive" ? "OneDrive" :
+                        entry.provider === "gdrive" ? "Google Drive" :
+                            entry.provider === "dropbox" ? "Dropbox" : entry.provider;
+                return { provider: name, mode: "mount" };
+            }
+        }
+        // Not mounted but using API fallback
+        if (pendingCloudConfig) {
+            const name = pendingCloudConfig.provider === "onedrive" ? "OneDrive" :
+                pendingCloudConfig.provider === "gdrive" ? "Google Drive" :
+                    pendingCloudConfig.provider === "dropbox" ? "Dropbox" : pendingCloudConfig.provider;
+            return { provider: name, mode: "api" };
+        }
+    }
+    return { provider: "local", mode: "local" };
+}
 // ── File helpers ──
 /** Read JSON or JSONC file. If exact path not found, tries .json/.jsonc variant. */
 function readJsonc(filePath) {