@bobfrankston/mailx 1.0.228 → 1.0.229

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/lib/api-client.js

@@ -149,6 +149,9 @@ 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);
 }

package/client/lib/mailxapi.js

@@ -100,6 +100,9 @@
         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 });
         },

package/client/styles/components.css

@@ -411,6 +411,58 @@ 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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.228",
+  "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.290",
+    "@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.290",
+      "@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,8 @@ 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>;

package/packages/mailx-service/index.js

@@ -659,6 +659,10 @@ 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) {

package/packages/mailx-service/jsonrpc.js

@@ -96,6 +96,8 @@ 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":