@bobfrankston/mailx 1.0.227 → 1.0.229

package/client/app.js

@@ -1132,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/components/message-list.js

@@ -2,7 +2,7 @@
  * Message list component — renders paginated message rows.
  * Reads from message-state; operations mutate state, list reacts.
  */
-import { getMessages as apiGetMessages, getUnifiedInbox as apiGetUnifiedInbox, searchMessages, updateFlags } from "../lib/api-client.js";
+import { getMessages as apiGetMessages, getUnifiedInbox as apiGetUnifiedInbox, searchMessages, updateFlags, getThreadMessages } from "../lib/api-client.js";
 import * as state from "../lib/message-state.js";
 import { showContextMenu } from "./context-menu.js";
 let onMessageSelect;
@@ -301,6 +301,61 @@ function restoreSelection(body, savedUid) {
             row.classList.add("selected");
     }
 }
+/** Show a floating list of all messages in a thread when the pill is clicked.
+ *  Each entry in the popup selects that message in the viewer when clicked.
+ *  This is simpler than inline expansion and avoids duplicating the row builder. */
+async function showThreadPopup(pillEl, headMsg) {
+    // Remove any existing popup
+    document.querySelectorAll(".ml-thread-popup").forEach(el => el.remove());
+    let thread = [];
+    try {
+        thread = await getThreadMessages(headMsg.accountId, headMsg.threadId);
+    }
+    catch { /* ignore */ }
+    if (!thread || thread.length === 0)
+        return;
+    thread.sort((a, b) => (a.date || 0) - (b.date || 0));
+    const popup = document.createElement("div");
+    popup.className = "ml-thread-popup";
+    for (const msg of thread) {
+        const item = document.createElement("div");
+        item.className = "ml-thread-popup-item";
+        if (!msg.flags.includes("\\Seen"))
+            item.classList.add("unread");
+        const from = document.createElement("span");
+        from.className = "ml-thread-popup-from";
+        from.textContent = msg.from?.name || msg.from?.address || "?";
+        const date = document.createElement("span");
+        date.className = "ml-thread-popup-date";
+        date.textContent = formatDate(msg.date);
+        const subject = document.createElement("span");
+        subject.className = "ml-thread-popup-subject";
+        subject.textContent = msg.subject || "(no subject)";
+        item.appendChild(from);
+        item.appendChild(date);
+        item.appendChild(subject);
+        item.addEventListener("click", async () => {
+            state.select({ accountId: msg.accountId, uid: msg.uid, folderId: msg.folderId, subject: msg.subject, from: msg.from, to: msg.to, cc: msg.cc, date: msg.date, flags: msg.flags, size: msg.size, preview: msg.preview, hasAttachments: msg.hasAttachments });
+            onMessageSelect(msg.accountId, msg.uid, msg.folderId);
+            popup.remove();
+        });
+        popup.appendChild(item);
+    }
+    document.body.appendChild(popup);
+    const rect = pillEl.getBoundingClientRect();
+    popup.style.left = `${rect.left}px`;
+    popup.style.top = `${rect.bottom + 4}px`;
+    // Dismiss on outside click
+    setTimeout(() => {
+        const dismiss = (e) => {
+            if (!popup.contains(e.target)) {
+                popup.remove();
+                document.removeEventListener("mousedown", dismiss, true);
+            }
+        };
+        document.addEventListener("mousedown", dismiss, true);
+    }, 0);
+}
 function appendMessages(body, accountId, items) {
     // Thread grouping: when the list has the "threaded" class, collapse messages
     // sharing the same threadId to a single row showing the most recent message,
@@ -373,15 +428,20 @@ function appendMessages(body, accountId, items) {
         const subject = document.createElement("span");
         subject.className = "ml-subject";
         subject.innerHTML = escapeHtml(msg.subject);
-        // Thread size pill: e.g. "(3)" next to the subject when this row
-        // represents a collapsed thread with multiple messages.
+        // Thread size pill: click to show a popup list of the thread's messages.
         if (threadSize) {
             const n = threadSize.get(msg) || 1;
-            if (n > 1) {
+            if (n > 1 && msg.threadId) {
+                row.classList.add("thread-head");
+                row.dataset.threadId = msg.threadId;
                 const threadPill = document.createElement("span");
                 threadPill.className = "ml-thread-pill";
                 threadPill.textContent = String(n);
-                threadPill.title = `${n} messages in this thread`;
+                threadPill.title = `${n} messages in this thread — click to see list`;
+                threadPill.addEventListener("click", async (e) => {
+                    e.stopPropagation();
+                    await showThreadPopup(threadPill, msg);
+                });
                 subject.prepend(threadPill);
             }
         }

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,15 @@ export function deleteDraft(accountId, draftUid, draftId) {
 export function addContact(name, email) {
     return ipc().addContact?.(name, email);
 }
+export function getThreadMessages(accountId, threadId) {
+    return ipc().getThreadMessages?.(accountId, threadId);
+}
+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,15 @@
         addContact: function(name, email) {
             return callNode("addContact", { name: name, email: email });
         },
+        getThreadMessages: function(accountId, threadId) {
+            return callNode("getThreadMessages", { accountId: accountId, threadId: threadId });
+        },
+        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

@@ -411,7 +411,151 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     vertical-align: baseline;
     min-width: 1.5em;
     text-align: center;
+    cursor: pointer;
+}
+.ml-thread-pill:hover { filter: brightness(1.15); }
+
+/* Popup that lists the messages in a thread, anchored below the clicked pill. */
+.ml-thread-popup {
+    position: fixed;
+    min-width: 320px;
+    max-width: 600px;
+    max-height: 60vh;
+    overflow-y: auto;
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    padding: var(--gap-xs);
+    z-index: 1500;
+    font-family: var(--font-ui);
+    font-size: var(--font-size-sm);
+}
+.ml-thread-popup-item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 4px var(--gap-sm);
+    padding: 6px 10px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+}
+.ml-thread-popup-item:hover { background: var(--color-bg-hover); }
+.ml-thread-popup-item.unread .ml-thread-popup-from,
+.ml-thread-popup-item.unread .ml-thread-popup-subject { font-weight: 600; }
+.ml-thread-popup-from {
+    grid-column: 1;
+    grid-row: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ml-thread-popup-date {
+    grid-column: 2;
+    grid-row: 1;
+    color: var(--color-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+.ml-thread-popup-subject {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    color: var(--color-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 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.227",
+  "version": "1.0.229",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -24,7 +24,7 @@
     "@bobfrankston/iflow-node": "^0.1.2",
     "@bobfrankston/miscinfo": "^1.0.8",
     "@bobfrankston/oauthsupport": "^1.0.22",
-    "@bobfrankston/msger": "^0.1.289",
+    "@bobfrankston/msger": "^0.1.291",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",
@@ -78,7 +78,7 @@
       "@bobfrankston/iflow-node": "^0.1.2",
       "@bobfrankston/miscinfo": "^1.0.8",
       "@bobfrankston/oauthsupport": "^1.0.22",
-      "@bobfrankston/msger": "^0.1.289",
+      "@bobfrankston/msger": "^0.1.291",
       "@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,14 @@ 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;
+    /** Get all messages in a thread (across folders) for an account. */
+    getThreadMessages(accountId: string, threadId: string): any;
+    /** 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,37 @@ export class MailxService {
         this.db.recordSentAddress(name || "", email);
         return true;
     }
+    /** Get all messages in a thread (across folders) for an account. */
+    getThreadMessages(accountId, threadId) {
+        return this.db.getThreadMessages(accountId, threadId);
+    }
+    /** 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,13 @@ async function dispatchAction(svc, action, p) {
             return svc.searchContacts(p.query);
         case "addContact":
             return { ok: svc.addContact(p.name, p.email) };
+        case "getThreadMessages":
+            return svc.getThreadMessages(p.accountId, p.threadId);
+        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();