@bobfrankston/mailx 1.0.226 → 1.0.228

package/client/app.js

@@ -67,12 +67,46 @@ async function updateNewMessageCount() {
             updateBadge(0);
             return;
         }
+        const previousBadge = badgeCount;
         // New messages = increase since last seen
         const newCount = Math.max(0, totalUnread - lastSeenCount);
         updateBadge(newCount);
+        // Flash the title when new mail arrives and the window isn't focused.
+        // Windows' taskbar mirrors document.title so this acts as a taskbar flash.
+        if (newCount > previousBadge && document.visibilityState !== "visible") {
+            startTitleFlash();
+        }
     }
     catch { /* offline */ }
 }
+// ── Taskbar flash via title alternation ──
+let titleFlashTimer = null;
+let titleFlashPhase = false;
+function startTitleFlash() {
+    stopTitleFlash();
+    titleFlashPhase = true;
+    titleFlashTimer = setInterval(() => {
+        titleFlashPhase = !titleFlashPhase;
+        if (titleFlashPhase) {
+            document.title = `✉ NEW MAIL (${badgeCount})`;
+        }
+        else {
+            document.title = badgeCount > 0 ? `(${badgeCount}) ${baseTitle}` : baseTitle;
+        }
+    }, 1000);
+}
+function stopTitleFlash() {
+    if (titleFlashTimer) {
+        clearInterval(titleFlashTimer);
+        titleFlashTimer = null;
+    }
+    document.title = badgeCount > 0 ? `(${badgeCount}) ${baseTitle}` : baseTitle;
+}
+document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible")
+        stopTitleFlash();
+});
+window.addEventListener("focus", stopTitleFlash);
 /** Call when user actively views messages — resets the badge */
 function markAsSeen() {
     getAccounts().then(async (accounts) => {
@@ -1098,6 +1132,100 @@ optSnippet?.addEventListener("change", () => {
     }
     localStorage.setItem("mailx-snippet", String(optSnippet.checked));
 });
+// ── JSONC config file editor ──
+document.getElementById("btn-edit-jsonc")?.addEventListener("click", async () => {
+    const settingsDropdown = document.getElementById("settings-dropdown");
+    if (settingsDropdown)
+        settingsDropdown.hidden = true;
+    await openJsoncEditor("accounts.jsonc");
+});
+async function openJsoncEditor(initialFile) {
+    const { readJsoncFile, writeJsoncFile } = await import("./lib/api-client.js");
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal mailx-modal-wide";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">Edit config file</div>
+        <label class="mailx-modal-label">File
+            <select class="mailx-modal-input" id="jsonc-file">
+                <option value="accounts.jsonc">accounts.jsonc</option>
+                <option value="allowlist.jsonc">allowlist.jsonc</option>
+                <option value="clients.jsonc">clients.jsonc</option>
+            </select>
+        </label>
+        <label class="mailx-modal-label">Contents (JSONC — comments and trailing commas allowed)
+            <textarea class="mailx-modal-input mailx-modal-textarea" id="jsonc-content" spellcheck="false"></textarea>
+        </label>
+        <div class="mailx-modal-error" id="jsonc-error" hidden></div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn" data-action="cancel">Cancel</button>
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-action="save">Save</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const fileSelect = panel.querySelector("#jsonc-file");
+    const textarea = panel.querySelector("#jsonc-content");
+    const errorEl = panel.querySelector("#jsonc-error");
+    fileSelect.value = initialFile;
+    const loadFile = async () => {
+        textarea.value = "Loading...";
+        errorEl.hidden = true;
+        try {
+            const r = await readJsoncFile(fileSelect.value);
+            textarea.value = r?.content || "";
+        }
+        catch (e) {
+            textarea.value = "";
+            errorEl.textContent = `Failed to load: ${e.message}`;
+            errorEl.hidden = false;
+        }
+    };
+    await loadFile();
+    fileSelect.addEventListener("change", loadFile);
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+    };
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelectorAll(".mailx-modal-btn").forEach(btn => {
+        btn.addEventListener("click", async () => {
+            const action = btn.dataset.action;
+            if (action === "cancel") {
+                close();
+                return;
+            }
+            if (action === "save") {
+                errorEl.hidden = true;
+                btn.disabled = true;
+                btn.textContent = "Saving...";
+                try {
+                    await writeJsoncFile(fileSelect.value, textarea.value);
+                    close();
+                    const statusSync = document.getElementById("status-sync");
+                    if (statusSync)
+                        statusSync.textContent = `Saved ${fileSelect.value} — restart mailx to apply`;
+                }
+                catch (e) {
+                    errorEl.textContent = `${e.message}`;
+                    errorEl.hidden = false;
+                    btn.disabled = false;
+                    btn.textContent = "Save";
+                }
+            }
+        });
+    });
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+}
 // Threaded view toggle
 optThreaded?.addEventListener("change", () => {
     const body = document.getElementById("ml-body");

package/client/index.html

@@ -38,6 +38,8 @@
                     <label class="tb-menu-item"><input type="radio" name="opt-editor" value="tiptap" id="opt-editor-tiptap"> tiptap</label>
                     <hr class="tb-menu-sep">
                     <label class="tb-menu-item"><input type="checkbox" id="opt-autocomplete"> AI autocomplete</label>
+                    <hr class="tb-menu-sep">
+                    <button class="tb-menu-item" id="btn-edit-jsonc" title="Edit accounts.jsonc / allowlist.jsonc">Edit config files...</button>
                 </div>
             </div>
             <span id="app-version" class="app-version">mailx</span>

package/client/lib/api-client.js

@@ -149,6 +149,12 @@ export function deleteDraft(accountId, draftUid, draftId) {
 export function addContact(name, email) {
     return ipc().addContact?.(name, email);
 }
+export function readJsoncFile(name) {
+    return ipc().readJsoncFile?.(name);
+}
+export function writeJsoncFile(name, content) {
+    return ipc().writeJsoncFile?.(name, content);
+}
 export function setupAccount(name, email, password) {
     return ipc().setupAccount?.(name, email, password);
 }

package/client/lib/mailxapi.js

@@ -100,6 +100,12 @@
         addContact: function(name, email) {
             return callNode("addContact", { name: name, email: email });
         },
+        readJsoncFile: function(name) {
+            return callNode("readJsoncFile", { name: name });
+        },
+        writeJsoncFile: function(name, content) {
+            return callNode("writeJsoncFile", { name: name, content: content });
+        },
         searchContacts: function(query) {
             return callNode("searchContacts", { query: query });
         },

package/client/styles/components.css

@@ -412,6 +412,98 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     min-width: 1.5em;
     text-align: center;
 }
+
+/* Generic modal — used by the JSONC config editor launched from Settings */
+.mailx-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+.mailx-modal {
+    background: var(--color-bg);
+    color: var(--color-text);
+    padding: var(--gap-lg);
+    border-radius: var(--radius-md);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    min-width: 420px;
+    max-width: 90vw;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-md);
+    font-family: var(--font-ui);
+}
+.mailx-modal-wide {
+    width: 80vw;
+    max-width: 900px;
+    max-height: 85vh;
+}
+.mailx-modal-title {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+}
+.mailx-modal-label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+}
+.mailx-modal-input {
+    padding: 6px 8px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+}
+.mailx-modal-textarea {
+    min-height: 50vh;
+    resize: vertical;
+    font-family: var(--font-mono);
+    font-size: 13px;
+    white-space: pre;
+    tab-size: 2;
+}
+.mailx-modal-input:focus {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -1px;
+}
+.mailx-modal-error {
+    color: oklch(0.65 0.2 25);
+    font-size: var(--font-size-sm);
+    background: color-mix(in oklch, oklch(0.65 0.2 25) 10%, transparent);
+    padding: 6px 10px;
+    border-radius: var(--radius-sm);
+    white-space: pre-wrap;
+}
+.mailx-modal-buttons {
+    display: flex;
+    gap: var(--gap-sm);
+    align-items: center;
+}
+.mailx-modal-spacer { flex: 1; }
+.mailx-modal-btn {
+    padding: 6px 14px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+}
+.mailx-modal-btn:hover { background: var(--color-bg-hover); }
+.mailx-modal-btn-primary {
+    background: var(--color-accent);
+    color: #fff;
+    border-color: transparent;
+    font-weight: 500;
+}
+.mailx-modal-btn-primary:hover { filter: brightness(1.1); }
 .ml-subject {
     overflow: hidden;
     text-overflow: ellipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.226",
+  "version": "1.0.228",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -20,11 +20,11 @@
     "postinstall": "node bin/postinstall.js"
   },
   "dependencies": {
-    "@bobfrankston/iflow-direct": "^0.1.10",
+    "@bobfrankston/iflow-direct": "^0.1.11",
     "@bobfrankston/iflow-node": "^0.1.2",
     "@bobfrankston/miscinfo": "^1.0.8",
     "@bobfrankston/oauthsupport": "^1.0.22",
-    "@bobfrankston/msger": "^0.1.288",
+    "@bobfrankston/msger": "^0.1.290",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",
@@ -74,11 +74,11 @@
   },
   ".transformedSnapshot": {
     "dependencies": {
-      "@bobfrankston/iflow-direct": "^0.1.10",
+      "@bobfrankston/iflow-direct": "^0.1.11",
       "@bobfrankston/iflow-node": "^0.1.2",
       "@bobfrankston/miscinfo": "^1.0.8",
       "@bobfrankston/oauthsupport": "^1.0.22",
-      "@bobfrankston/msger": "^0.1.288",
+      "@bobfrankston/msger": "^0.1.290",
       "@capacitor/android": "^8.3.0",
       "@capacitor/cli": "^8.3.0",
       "@capacitor/core": "^8.3.0",

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

@@ -59,6 +59,12 @@ export declare class MailxService {
      *  action on From/To/Cc addresses in the message viewer. Just calls the same
      *  validated upsert path as recordSentAddress. */
     addContact(name: string, email: string): boolean;
+    /** Read a JSONC config file from the shared cloud dir or local ~/.mailx.
+     *  Names are whitelisted so the UI can't read arbitrary files. */
+    readJsoncFile(name: string): Promise<string | null>;
+    /** Write a JSONC config file. Validates that the content parses as JSONC
+     *  (loosely — strips comments/trailing commas) before writing. */
+    writeJsoncFile(name: string, content: string): Promise<void>;
     getSettings(): any;
     saveSettings(settings: any): void;
     getStorageInfo(): {

package/packages/mailx-service/index.js

@@ -659,6 +659,33 @@ export class MailxService {
         this.db.recordSentAddress(name || "", email);
         return true;
     }
+    /** Read a JSONC config file from the shared cloud dir or local ~/.mailx.
+     *  Names are whitelisted so the UI can't read arbitrary files. */
+    async readJsoncFile(name) {
+        const whitelist = ["accounts.jsonc", "allowlist.jsonc", "clients.jsonc"];
+        if (!whitelist.includes(name))
+            throw new Error(`File not allowed: ${name}`);
+        const { cloudRead } = await import("@bobfrankston/mailx-settings");
+        return cloudRead(name);
+    }
+    /** Write a JSONC config file. Validates that the content parses as JSONC
+     *  (loosely — strips comments/trailing commas) before writing. */
+    async writeJsoncFile(name, content) {
+        const whitelist = ["accounts.jsonc", "allowlist.jsonc", "clients.jsonc"];
+        if (!whitelist.includes(name))
+            throw new Error(`File not allowed: ${name}`);
+        // Validate the content parses before writing
+        const { parse: parseJsonc } = await import("jsonc-parser");
+        const errors = [];
+        parseJsonc(content, errors, { allowTrailingComma: true });
+        if (errors.length) {
+            throw new Error(`JSONC parse error: ${errors.map(e => e.error).join(", ")}`);
+        }
+        const { cloudWrite } = await import("@bobfrankston/mailx-settings");
+        const ok = await cloudWrite(name, content);
+        if (!ok)
+            throw new Error(`Failed to write ${name}`);
+    }
     // ── Settings ──
     getSettings() {
         return loadSettings();

package/packages/mailx-service/jsonrpc.js

@@ -96,6 +96,11 @@ async function dispatchAction(svc, action, p) {
             return svc.searchContacts(p.query);
         case "addContact":
             return { ok: svc.addContact(p.name, p.email) };
+        case "readJsoncFile":
+            return { content: await svc.readJsoncFile(p.name) };
+        case "writeJsoncFile":
+            await svc.writeJsoncFile(p.name, p.content);
+            return { ok: true };
         // Settings
         case "getSettings":
             return svc.getSettings();