@bobfrankston/mailx 1.0.50 → 1.0.55

package/client/app.js

@@ -3,7 +3,7 @@
  * Wires together all UI components and WebSocket connection.
  */
 import { initFolderTree, refreshFolderTree } from "./components/folder-tree.js";
-import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder } from "./components/message-list.js";
+import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, getSelectedMessages } from "./components/message-list.js";
 import { showMessage, getCurrentMessage } from "./components/message-viewer.js";
 import { connectWebSocket, onWsEvent, triggerSync, getAccounts, getFolders, deleteMessage, undeleteMessage, restartServer, rebuildServer, getSyncPending } from "./lib/api-client.js";
 // ── New message badge (favicon + title) ──
@@ -290,46 +290,61 @@ function forwardBody(msg) {
 }
 let lastDeleted = null;
 let undoTimeout = null;
-async function deleteCurrentMessage() {
-    const current = getCurrentMessage();
-    if (!current)
-        return;
-    const { accountId, message } = current;
+async function deleteSelectedMessages() {
+    const selected = getSelectedMessages();
+    // Fall back to single message from viewer if nothing selected in list
+    if (selected.length === 0) {
+        const current = getCurrentMessage();
+        if (!current)
+            return;
+        selected.push({ accountId: current.accountId, uid: current.message.uid, folderId: current.message.folderId });
+    }
+    const statusSync = document.getElementById("status-sync");
+    const mlBody = document.getElementById("ml-body");
     try {
-        await deleteMessage(accountId, message.uid);
-        lastDeleted = { accountId, uid: message.uid, folderId: message.folderId, subject: message.subject };
-        // Show undo notification in status bar
-        const statusSync = document.getElementById("status-sync");
-        if (statusSync)
-            statusSync.textContent = `Deleted "${message.subject.substring(0, 40)}" — Ctrl+Z to undo`;
-        // Clear undo after 30 seconds
+        // Find the row after the last selected for re-selection
+        let nextRow = null;
+        if (mlBody) {
+            const lastRow = mlBody.querySelector(`.ml-row[data-uid="${selected[selected.length - 1].uid}"]`);
+            if (lastRow)
+                nextRow = (lastRow.nextElementSibling || lastRow.previousElementSibling);
+        }
+        // Delete all selected
+        for (const msg of selected) {
+            await deleteMessage(msg.accountId, msg.uid);
+            // Remove row from DOM
+            if (mlBody)
+                mlBody.querySelector(`.ml-row[data-uid="${msg.uid}"]`)?.remove();
+        }
+        // Undo supports the last batch
+        if (selected.length === 1) {
+            lastDeleted = { ...selected[0], subject: "" };
+            if (statusSync)
+                statusSync.textContent = `Deleted 1 message — Ctrl+Z to undo`;
+        }
+        else {
+            lastDeleted = null; // Multi-delete undo not supported yet
+            if (statusSync)
+                statusSync.textContent = `Deleted ${selected.length} messages`;
+        }
         if (undoTimeout)
             clearTimeout(undoTimeout);
         undoTimeout = setTimeout(() => {
             lastDeleted = null;
-            if (statusSync?.textContent?.includes("Ctrl+Z"))
+            if (statusSync?.textContent?.includes("undo"))
                 statusSync.textContent = "";
         }, 30000);
-        // Remove the deleted row and select the next message
-        const mlBody = document.getElementById("ml-body");
-        if (mlBody) {
-            const deletedRow = mlBody.querySelector(`.ml-row[data-uid="${message.uid}"]`);
-            if (deletedRow) {
-                const nextRow = (deletedRow.nextElementSibling || deletedRow.previousElementSibling);
-                deletedRow.remove();
-                if (nextRow?.classList.contains("ml-row")) {
-                    nextRow.click();
-                }
-                else {
-                    // No more messages — clear preview
-                    const bodyEl = document.getElementById("mv-body");
-                    const headerEl = document.getElementById("mv-header");
-                    if (bodyEl)
-                        bodyEl.innerHTML = `<div class="mv-empty">Select a message to read</div>`;
-                    if (headerEl)
-                        headerEl.hidden = true;
-                }
-            }
+        // Select next row or clear viewer
+        if (nextRow?.classList.contains("ml-row")) {
+            nextRow.click();
+        }
+        else {
+            const bodyEl = document.getElementById("mv-body");
+            const headerEl = document.getElementById("mv-header");
+            if (bodyEl)
+                bodyEl.innerHTML = `<div class="mv-empty">Select a message to read</div>`;
+            if (headerEl)
+                headerEl.hidden = true;
         }
     }
     catch (e) {
@@ -354,7 +369,7 @@ async function undoDelete() {
         console.error(`Undo failed: ${e.message}`);
     }
 }
-document.getElementById("btn-delete")?.addEventListener("click", deleteCurrentMessage);
+document.getElementById("btn-delete")?.addEventListener("click", deleteSelectedMessages);
 document.getElementById("btn-compose")?.addEventListener("click", () => openCompose("new"));
 document.getElementById("btn-reply")?.addEventListener("click", () => openCompose("reply"));
 document.getElementById("btn-reply-all")?.addEventListener("click", () => openCompose("replyAll"));
@@ -519,16 +534,15 @@ onWsEvent((event) => {
             break;
         case "syncProgress":
             if (statusSync)
-                statusSync.textContent = `Sync: ${event.phase} ${event.progress}%`;
+                statusSync.textContent = `Syncing ${event.accountId}: ${event.phase} ${event.progress}%`;
             if (startupStatus)
                 startupStatus.textContent = `Syncing ${event.accountId}: ${event.phase}`;
             break;
         case "folderCountsChanged": {
             refreshFolderTree();
             updateNewMessageCount();
-            // Only reload message list if user isn't reading a message
-            if (!getCurrentMessage())
-                reloadCurrentFolder();
+            // Reload message list but keep current scroll position and selection
+            reloadCurrentFolder();
             // Sync finished — re-enable sync button
             const syncBtn = document.getElementById("btn-sync");
             if (syncBtn) {
@@ -566,10 +580,18 @@ document.addEventListener("keydown", (e) => {
         e.preventDefault();
         openCompose("replyAll");
     }
-    // Ctrl+D or Delete = Delete message
+    // Ctrl+A = Select all visible messages
+    if (e.ctrlKey && e.key === "a") {
+        const mlBody = document.getElementById("ml-body");
+        if (mlBody && document.activeElement?.closest(".message-list, .ml-body, body")) {
+            e.preventDefault();
+            mlBody.querySelectorAll(".ml-row").forEach(r => r.classList.add("selected"));
+        }
+    }
+    // Ctrl+D or Delete = Delete selected messages
     if ((e.ctrlKey && e.key === "d") || e.key === "Delete") {
         e.preventDefault();
-        deleteCurrentMessage();
+        deleteSelectedMessages();
     }
     // Ctrl+Z = Undo delete
     if (e.ctrlKey && e.key === "z") {
@@ -600,6 +622,8 @@ viewBtn?.addEventListener("click", (e) => {
 document.addEventListener("click", () => {
     if (viewDropdown)
         viewDropdown.hidden = true;
+    if (settingsDropdown)
+        settingsDropdown.hidden = true;
 });
 // Restore saved view settings
 const savedTwoLine = localStorage.getItem("mailx-two-line") === "true";
@@ -666,6 +690,44 @@ optFlagged?.addEventListener("change", () => {
     }
     localStorage.setItem("mailx-flagged", String(optFlagged.checked));
 });
+// ── Settings menu ──
+const settingsBtn = document.getElementById("btn-settings");
+const settingsDropdown = document.getElementById("settings-dropdown");
+const optEditorQuill = document.getElementById("opt-editor-quill");
+const optEditorTiptap = document.getElementById("opt-editor-tiptap");
+settingsBtn?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (settingsDropdown)
+        settingsDropdown.hidden = !settingsDropdown.hidden;
+});
+// Close handled by the shared document click handler above
+// Load current editor setting from server
+fetch("/api/settings").then(r => r.json()).then(s => {
+    const ed = s.ui?.editor || "quill";
+    if (optEditorQuill)
+        optEditorQuill.checked = ed === "quill";
+    if (optEditorTiptap)
+        optEditorTiptap.checked = ed === "tiptap";
+}).catch(() => { });
+// Save editor choice to server settings
+function saveEditorSetting(editor) {
+    fetch("/api/settings").then(r => r.json()).then(settings => {
+        settings.ui = { ...settings.ui, editor };
+        fetch("/api/settings", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(settings),
+        });
+    }).catch(() => { });
+}
+optEditorQuill?.addEventListener("change", () => {
+    if (optEditorQuill.checked)
+        saveEditorSetting("quill");
+});
+optEditorTiptap?.addEventListener("change", () => {
+    if (optEditorTiptap.checked)
+        saveEditorSetting("tiptap");
+});
 const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
 fetch("/api/version").then(r => r.json()).then(d => {
     const el = document.getElementById("app-version");

package/client/compose/compose.css

@@ -188,6 +188,72 @@ body {
     font-size: 0.8em;
 }
 
+/* ── tiptap editor ── */
+.editor-tiptap {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.tt-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: var(--gap-xs) var(--gap-sm);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-toolbar);
+    flex-wrap: wrap;
+}
+
+.tt-btn {
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+}
+
+.tt-btn:hover { background: var(--color-bg-hover); color: var(--color-text); }
+
+.tt-heading {
+    border: 1px solid var(--color-border);
+    background: var(--color-bg);
+    color: var(--color-text);
+    padding: 2px 4px;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+}
+
+.tt-content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.tt-content .tiptap {
+    padding: var(--gap-md);
+    min-height: 100%;
+    outline: none;
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+}
+
+.tt-content .tiptap p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: var(--color-text-muted);
+    pointer-events: none;
+    float: left;
+    height: 0;
+}
+
+.tt-content .tiptap blockquote {
+    border-left: 3px solid var(--color-border);
+    padding-left: var(--gap-md);
+    color: var(--color-text-muted);
+}
+
 /* Quoted original message in reply/forward */
 .reply {
     border-left: 3px solid var(--color-border);

package/client/compose/compose.html

@@ -6,9 +6,8 @@
     <title>Compose - mailx</title>
     <link rel="icon" type="image/svg+xml" href="../favicon.svg">
     <link rel="stylesheet" href="../styles/variables.css">
-    <link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet">
     <link rel="stylesheet" href="compose.css">
-    <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
+    <!-- Editor CSS/JS loaded dynamically by compose.ts based on setting -->
     <script type="module" src="compose.js"></script>
 </head>
 <body>

package/client/compose/compose.js

@@ -3,22 +3,61 @@
  * Opened as a popup from the main mailx window.
  * Receives init data via window.opener.postMessage or URL params.
  */
-// ── Quill Editor ──
-const editor = new Quill("#compose-editor", {
-    theme: "snow",
-    placeholder: "Write your message...",
-    modules: {
-        toolbar: [
-            [{ header: [1, 2, 3, false] }],
-            ["bold", "italic", "underline", "strike"],
-            [{ list: "ordered" }, { list: "bullet" }],
-            ["blockquote", "link", "image"],
-            ["clean"]
-        ]
+import { createEditor } from "./editor.js";
+// ── Load editor scripts dynamically ──
+function loadScript(src) {
+    return new Promise((resolve, reject) => {
+        const s = document.createElement("script");
+        s.src = src;
+        s.onload = () => resolve();
+        s.onerror = () => reject(new Error(`Failed to load ${src}`));
+        document.head.appendChild(s);
+    });
+}
+function loadCSS(href) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    document.head.appendChild(link);
+}
+async function loadEditorAssets(type) {
+    if (type === "tiptap") {
+        // tiptap UMD bundles from CDN
+        const cdn = "https://cdn.jsdelivr.net/npm";
+        await loadScript(`${cdn}/@tiptap/core@2/dist/index.umd.js`);
+        await Promise.all([
+            loadScript(`${cdn}/@tiptap/starter-kit@2/dist/index.umd.js`),
+            loadScript(`${cdn}/@tiptap/extension-link@2/dist/index.umd.js`),
+            loadScript(`${cdn}/@tiptap/extension-image@2/dist/index.umd.js`),
+            loadScript(`${cdn}/@tiptap/extension-underline@2/dist/index.umd.js`),
+            loadScript(`${cdn}/@tiptap/extension-placeholder@2/dist/index.umd.js`),
+        ]);
     }
-});
-// Make toolbar buttons non-tabbable so Tab goes straight to editor body
-document.querySelectorAll(".ql-toolbar button, .ql-toolbar select, .ql-toolbar .ql-picker-label").forEach(el => el.setAttribute("tabindex", "-1"));
+    else {
+        // Quill
+        loadCSS("https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css");
+        await loadScript("https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js");
+    }
+}
+// ── Determine editor type from settings ──
+let editorType = "quill";
+try {
+    const res = await fetch("/api/version");
+    if (res.ok) {
+        // Check settings for editor preference
+        const settingsRes = await fetch("/api/settings");
+        if (settingsRes.ok) {
+            const settings = await settingsRes.json();
+            if (settings.ui?.editor === "tiptap")
+                editorType = "tiptap";
+        }
+    }
+}
+catch { /* default to quill */ }
+await loadEditorAssets(editorType);
+const container = document.getElementById("compose-editor");
+container.classList.add(editorType === "tiptap" ? "editor-tiptap" : "editor-quill");
+const editor = await createEditor(container, editorType);
 // ── Populate from init data ──
 const fromSelect = document.getElementById("compose-from-select");
 const fromCustom = document.getElementById("compose-from-custom");
@@ -214,8 +253,8 @@ function applyInit(init) {
     ccInput.value = formatAddrs(init.cc);
     subjectInput.value = init.subject;
     if (init.bodyHtml) {
-        editor.clipboard.dangerouslyPasteHTML(init.bodyHtml);
-        editor.setSelection(0, 0);
+        editor.setHtml(init.bodyHtml);
+        editor.setCursor(0);
     }
     // If resuming a draft, track its UID for deletion after send
     if (init.draftUid) {
@@ -254,7 +293,7 @@ let draftUid = null;
 let draftTimer;
 let lastDraftContent = "";
 async function saveDraft() {
-    const content = editor.root.innerHTML + subjectInput.value + toInput.value;
+    const content = editor.getHtml() + subjectInput.value + toInput.value;
     if (content === lastDraftContent)
         return; // no changes
     if (!editor.getText().trim() && !subjectInput.value && !toInput.value)
@@ -267,7 +306,7 @@ async function saveDraft() {
             body: JSON.stringify({
                 accountId: getFromAccountId(),
                 subject: subjectInput.value,
-                bodyHtml: editor.root.innerHTML,
+                bodyHtml: editor.getHtml(),
                 bodyText: editor.getText(),
                 to: toInput.value,
                 cc: ccInput.value,
@@ -292,7 +331,7 @@ document.getElementById("btn-send")?.addEventListener("click", async () => {
         cc: parseAddrs(ccInput.value),
         bcc: parseAddrs(bccInput.value),
         subject: subjectInput.value,
-        bodyHtml: editor.root.innerHTML,
+        bodyHtml: editor.getHtml(),
         bodyText: editor.getText(),
     };
     try {
@@ -349,5 +388,4 @@ document.addEventListener("keydown", (e) => {
         target.dispatchEvent(new Event("input"));
     }
 });
-export {};
 //# sourceMappingURL=compose.js.map

package/client/compose/editor.js

@@ -0,0 +1,160 @@
+/**
+ * Editor abstraction — wraps Quill or tiptap behind a common interface.
+ * The compose window loads this module and calls createEditor() based on the user's setting.
+ */
+function createQuillEditor(container) {
+    const q = new Quill(container, {
+        theme: "snow",
+        placeholder: "Write your message...",
+        modules: {
+            toolbar: [
+                [{ header: [1, 2, 3, false] }],
+                ["bold", "italic", "underline", "strike"],
+                [{ list: "ordered" }, { list: "bullet" }],
+                ["blockquote", "link", "image"],
+                ["clean"]
+            ]
+        }
+    });
+    // Make toolbar buttons non-tabbable so Tab goes straight to editor body
+    document.querySelectorAll(".ql-toolbar button, .ql-toolbar select, .ql-toolbar .ql-picker-label").forEach(el => el.setAttribute("tabindex", "-1"));
+    return {
+        setHtml(html) {
+            q.clipboard.dangerouslyPasteHTML(html);
+        },
+        getHtml() {
+            return q.root.innerHTML;
+        },
+        getText() {
+            return q.getText();
+        },
+        focus() {
+            q.focus();
+        },
+        setCursor(pos) {
+            q.setSelection(pos, 0);
+        },
+        root: q.root
+    };
+}
+// ── tiptap ──
+async function createTiptapEditor(container) {
+    // tiptap loaded via CDN — use global UMD bundles
+    const { Editor } = window.tiptapCore;
+    const { StarterKit } = window.tiptapStarterKit;
+    const { Link } = window.tiptapExtensionLink;
+    const { Image } = window.tiptapExtensionImage;
+    const { Underline } = window.tiptapExtensionUnderline;
+    const { Placeholder } = window.tiptapExtensionPlaceholder;
+    // Build toolbar
+    const toolbar = document.createElement("div");
+    toolbar.className = "tt-toolbar";
+    toolbar.innerHTML = `
+        <select class="tt-heading" tabindex="-1">
+            <option value="p">Normal</option>
+            <option value="1">Heading 1</option>
+            <option value="2">Heading 2</option>
+            <option value="3">Heading 3</option>
+        </select>
+        <button class="tt-btn" data-cmd="bold" title="Bold" tabindex="-1"><b>B</b></button>
+        <button class="tt-btn" data-cmd="italic" title="Italic" tabindex="-1"><i>I</i></button>
+        <button class="tt-btn" data-cmd="underline" title="Underline" tabindex="-1"><u>U</u></button>
+        <button class="tt-btn" data-cmd="strike" title="Strikethrough" tabindex="-1"><s>S</s></button>
+        <button class="tt-btn" data-cmd="bulletList" title="Bullet list" tabindex="-1">&#8226;</button>
+        <button class="tt-btn" data-cmd="orderedList" title="Ordered list" tabindex="-1">1.</button>
+        <button class="tt-btn" data-cmd="blockquote" title="Blockquote" tabindex="-1">&ldquo;</button>
+        <button class="tt-btn" data-cmd="link" title="Link" tabindex="-1">&#128279;</button>
+        <button class="tt-btn" data-cmd="clearFormat" title="Clear formatting" tabindex="-1">&#8999;</button>
+    `;
+    // Content area
+    const content = document.createElement("div");
+    content.className = "tt-content";
+    container.appendChild(toolbar);
+    container.appendChild(content);
+    const ed = new Editor({
+        element: content,
+        extensions: [
+            StarterKit,
+            Link.configure({ openOnClick: false }),
+            Image,
+            Underline,
+            Placeholder.configure({ placeholder: "Write your message..." }),
+        ],
+        content: "",
+    });
+    // Wire toolbar buttons
+    toolbar.querySelectorAll(".tt-btn").forEach((btn) => {
+        btn.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            const cmd = btn.dataset.cmd;
+            switch (cmd) {
+                case "bold":
+                    ed.chain().focus().toggleBold().run();
+                    break;
+                case "italic":
+                    ed.chain().focus().toggleItalic().run();
+                    break;
+                case "underline":
+                    ed.chain().focus().toggleUnderline().run();
+                    break;
+                case "strike":
+                    ed.chain().focus().toggleStrike().run();
+                    break;
+                case "bulletList":
+                    ed.chain().focus().toggleBulletList().run();
+                    break;
+                case "orderedList":
+                    ed.chain().focus().toggleOrderedList().run();
+                    break;
+                case "blockquote":
+                    ed.chain().focus().toggleBlockquote().run();
+                    break;
+                case "link": {
+                    const url = prompt("URL:");
+                    if (url)
+                        ed.chain().focus().setLink({ href: url }).run();
+                    break;
+                }
+                case "clearFormat":
+                    ed.chain().focus().clearNodes().unsetAllMarks().run();
+                    break;
+            }
+        });
+    });
+    // Wire heading select
+    const headingSelect = toolbar.querySelector(".tt-heading");
+    headingSelect?.addEventListener("change", () => {
+        const val = headingSelect.value;
+        if (val === "p")
+            ed.chain().focus().setParagraph().run();
+        else
+            ed.chain().focus().toggleHeading({ level: parseInt(val) }).run();
+    });
+    const editorEl = content.querySelector(".tiptap") || content;
+    return {
+        setHtml(html) {
+            ed.commands.setContent(html);
+        },
+        getHtml() {
+            return ed.getHTML();
+        },
+        getText() {
+            return ed.getText();
+        },
+        focus() {
+            ed.commands.focus("start");
+        },
+        setCursor(pos) {
+            ed.commands.focus("start");
+        },
+        root: editorEl
+    };
+}
+// ── Factory ──
+export async function createEditor(container, type) {
+    if (type === "tiptap") {
+        return createTiptapEditor(container);
+    }
+    return createQuillEditor(container);
+}
+//# sourceMappingURL=editor.js.map

package/client/index.html

@@ -28,6 +28,14 @@
                     <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
                 </div>
             </div>
+            <div class="tb-menu" id="settings-menu">
+                <button class="tb-btn" id="btn-settings">Settings</button>
+                <div class="tb-menu-dropdown" id="settings-dropdown" hidden>
+                    <span class="tb-menu-label">Editor</span>
+                    <label class="tb-menu-item"><input type="radio" name="opt-editor" value="quill" id="opt-editor-quill" checked> Quill</label>
+                    <label class="tb-menu-item"><input type="radio" name="opt-editor" value="tiptap" id="opt-editor-tiptap"> tiptap</label>
+                </div>
+            </div>
             <span id="app-version" class="app-version"></span>
         </div>
         <div class="toolbar-right">

package/client/styles/components.css

@@ -107,6 +107,8 @@
 button.tb-menu-item { background: none; border: none; color: inherit; width: 100%; text-align: left; }
 .tb-menu-sep { border: none; border-top: 1px solid var(--color-border); margin: var(--gap-xs) 0; }
 .tb-menu-hint { display: block; padding: var(--gap-xs) var(--gap-md); font-size: 0.75rem; color: var(--color-text-muted); }
+.tb-menu-label { display: block; padding: var(--gap-xs) var(--gap-md); font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.tb-menu-item input[type="radio"] { accent-color: var(--color-accent); }
 .tb-sep { width: 1px; height: 1.2rem; background: var(--color-border); margin: 0 var(--gap-xs); }
 
 .search-bar {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.50",
+  "version": "1.0.55",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",

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

@@ -49,6 +49,10 @@ export declare class ImapManager extends EventEmitter {
     private _syncAll;
     /** Sync just INBOX for each account (fast check for new mail) */
     syncInbox(): Promise<void>;
+    /** Quick inbox check — uses IMAP STATUS (single command, no mailbox open).
+     *  If message count changed, triggers a full inbox sync. */
+    private lastInboxCounts;
+    quickInboxCheck(): Promise<void>;
     /** Start periodic sync */
     startPeriodicSync(intervalMinutes: number): void;
     /** Stop periodic sync */

package/packages/mailx-imap/index.js

@@ -170,6 +170,7 @@ export class ImapManager extends EventEmitter {
         // Get the highest UID we already have for this folder
         const highestUid = this.db.getHighestUid(accountId, folderId);
         let messages;
+        const firstSync = highestUid === 0;
         if (highestUid > 0) {
             // Incremental: only fetch messages newer than what we have
             const fetched = await client.fetchMessagesSinceUid(folder.path, highestUid, { source: true });
@@ -184,18 +185,47 @@ export class ImapManager extends EventEmitter {
                 ? new Date(Date.now() - historyDays * 86400000)
                 : new Date(0);
             messages = await client.fetchMessageByDate(folder.path, startDate, new Date(), { source: true });
+            // Sort newest first so most recent messages appear in the UI immediately
+            messages.sort((a, b) => {
+                const da = a.date instanceof Date ? a.date.getTime() : (typeof a.date === "number" ? a.date : 0);
+                const db = b.date instanceof Date ? b.date.getTime() : (typeof b.date === "number" ? b.date : 0);
+                return db - da;
+            });
         }
         if (messages.length > 0)
             console.log(`  ${folder.path}: ${messages.length} new messages`);
         let newCount = 0;
         const batchSize = 50;
-        this.db.beginTransaction();
-        try {
-            for (let i = 0; i < messages.length; i++) {
-                const msg = messages[i];
-                // Skip if we already have this UID
-                if (msg.uid <= highestUid) {
-                    // But update flags in case they changed
+        for (let batchStart = 0; batchStart < messages.length; batchStart += batchSize) {
+            const batchEnd = Math.min(batchStart + batchSize, messages.length);
+            this.db.beginTransaction();
+            try {
+                for (let i = batchStart; i < batchEnd; i++) {
+                    const msg = messages[i];
+                    // Skip if we already have this UID
+                    if (msg.uid <= highestUid) {
+                        // But update flags in case they changed
+                        const flags = [];
+                        if (msg.seen)
+                            flags.push("\\Seen");
+                        if (msg.flagged)
+                            flags.push("\\Flagged");
+                        if (msg.answered)
+                            flags.push("\\Answered");
+                        if (msg.draft)
+                            flags.push("\\Draft");
+                        this.db.updateMessageFlags(accountId, msg.uid, flags);
+                        continue;
+                    }
+                    // Store body
+                    const source = msg.source || "";
+                    let bodyPath = "";
+                    if (source) {
+                        bodyPath = await this.bodyStore.putMessage(accountId, folderId, msg.uid, Buffer.from(source, "utf-8"));
+                    }
+                    // Parse for preview and attachment info
+                    const parsed = await extractPreview(source);
+                    // Build flags array
                     const flags = [];
                     if (msg.seen)
                         flags.push("\\Seen");
@@ -205,61 +235,49 @@ export class ImapManager extends EventEmitter {
                         flags.push("\\Answered");
                     if (msg.draft)
                         flags.push("\\Draft");
-                    this.db.updateMessageFlags(accountId, msg.uid, flags);
-                    continue;
-                }
-                // Store body
-                const source = msg.source || "";
-                let bodyPath = "";
-                if (source) {
-                    bodyPath = await this.bodyStore.putMessage(accountId, folderId, msg.uid, Buffer.from(source, "utf-8"));
+                    // Store metadata
+                    this.db.upsertMessage({
+                        accountId,
+                        folderId,
+                        uid: msg.uid,
+                        messageId: msg.messageId || "",
+                        inReplyTo: "",
+                        references: [],
+                        date: msg.date instanceof Date ? msg.date.getTime() : (typeof msg.date === "number" ? msg.date : Date.now()),
+                        subject: msg.subject || "",
+                        from: toEmailAddress(msg.from?.[0] || {}),
+                        to: toEmailAddresses(msg.to || []),
+                        cc: toEmailAddresses(msg.cc || []),
+                        flags,
+                        size: msg.size || 0,
+                        hasAttachments: parsed.hasAttachments,
+                        preview: parsed.preview,
+                        bodyPath
+                    });
+                    newCount++;
                 }
-                // Parse for preview and attachment info
-                const parsed = await extractPreview(source);
-                // Build flags array
-                const flags = [];
-                if (msg.seen)
-                    flags.push("\\Seen");
-                if (msg.flagged)
-                    flags.push("\\Flagged");
-                if (msg.answered)
-                    flags.push("\\Answered");
-                if (msg.draft)
-                    flags.push("\\Draft");
-                // Store metadata
-                this.db.upsertMessage({
-                    accountId,
-                    folderId,
-                    uid: msg.uid,
-                    messageId: msg.messageId || "",
-                    inReplyTo: "",
-                    references: [],
-                    date: msg.date instanceof Date ? msg.date.getTime() : (typeof msg.date === "number" ? msg.date : Date.now()),
-                    subject: msg.subject || "",
-                    from: toEmailAddress(msg.from?.[0] || {}),
-                    to: toEmailAddresses(msg.to || []),
-                    cc: toEmailAddresses(msg.cc || []),
-                    flags,
-                    size: msg.size || 0,
-                    hasAttachments: parsed.hasAttachments,
-                    preview: parsed.preview,
-                    bodyPath
+                this.db.commitTransaction();
+            }
+            catch (e) {
+                console.error(`    transaction error: ${e.message}`);
+                this.db.rollbackTransaction();
+                throw e;
+            }
+            // Emit progress and notify client after each batch
+            this.emit("syncProgress", accountId, `sync:${folder.path}`, Math.round((batchEnd / messages.length) * 100));
+            // On first sync, emit folderCountsChanged per batch so newest messages appear immediately
+            if (firstSync && newCount > 0) {
+                const total = newCount;
+                const unread = this.db.getMessages({ accountId, folderId, page: 1, pageSize: total })
+                    .items.filter((m) => !m.flags.includes("\\Seen")).length;
+                this.db.updateFolderCounts(folderId, total, unread);
+                this.emit("folderCountsChanged", accountId, {
+                    [folderId]: { total, unread }
                 });
-                newCount++;
-                // Emit progress periodically
-                if (i % batchSize === 0) {
-                    this.emit("syncProgress", accountId, `sync:${folder.path}`, Math.round((i / messages.length) * 100));
-                }
             }
-            this.db.commitTransaction();
-            if (newCount > 0)
-                console.log(`    stored ${newCount} new messages`);
-        }
-        catch (e) {
-            console.error(`    transaction error: ${e.message}`);
-            this.db.rollbackTransaction();
-            throw e;
         }
+        if (newCount > 0)
+            console.log(`    stored ${newCount} new messages`);
         // Remove messages deleted on the server
         let deletedCount = 0;
         try {
@@ -308,10 +326,12 @@ export class ImapManager extends EventEmitter {
         }
     }
     async _syncAll() {
+        // Phase 1: Sync folder lists and inboxes for ALL accounts first
+        // so every account has content visible quickly
+        const accountFolders = new Map();
         for (const [accountId] of this.configs) {
             let client = null;
             try {
-                // Fresh client for folder list (30s timeout)
                 client = this.createClient(accountId);
                 const folders = await Promise.race([
                     this.syncFolders(accountId, client),
@@ -319,20 +339,14 @@ export class ImapManager extends EventEmitter {
                 ]);
                 await client.logout();
                 client = null;
-                // INBOX first so it's available fastest
-                folders.sort((a, b) => {
-                    if (a.specialUse === "inbox")
-                        return -1;
-                    if (b.specialUse === "inbox")
-                        return 1;
-                    return 0;
-                });
-                // Fresh client per folder with 60s timeout — IMAP connections can hang
-                for (const folder of folders) {
+                accountFolders.set(accountId, folders);
+                // Sync inbox immediately
+                const inbox = folders.find(f => f.specialUse === "inbox");
+                if (inbox) {
                     try {
                         client = this.createClient(accountId);
                         await Promise.race([
-                            this.syncFolder(accountId, folder.id, client),
+                            this.syncFolder(accountId, inbox.id, client),
                             new Promise((_, reject) => setTimeout(() => reject(new Error("Sync timeout (60s)")), 60000))
                         ]);
                         await client.logout();
@@ -346,16 +360,9 @@ export class ImapManager extends EventEmitter {
                             catch { /* ignore */ }
                             client = null;
                         }
-                        if (e.responseText?.includes("doesn't exist")) {
-                            console.log(`  Removing non-existent folder: ${folder.path}`);
-                            this.db.deleteFolder(folder.id);
-                        }
-                        else {
-                            console.error(`  Skipping folder ${folder.path}: ${e.message}`);
-                        }
+                        console.error(`  Inbox sync error for ${accountId}: ${e.message}`);
                     }
                 }
-                this.emit("syncComplete", accountId);
             }
             catch (e) {
                 this.emit("syncError", accountId, e.message);
@@ -369,6 +376,40 @@ export class ImapManager extends EventEmitter {
                     catch { /* ignore */ }
             }
         }
+        // Phase 2: Sync remaining folders for all accounts
+        for (const [accountId, folders] of accountFolders) {
+            let client = null;
+            for (const folder of folders) {
+                if (folder.specialUse === "inbox")
+                    continue; // already synced
+                try {
+                    client = this.createClient(accountId);
+                    await Promise.race([
+                        this.syncFolder(accountId, folder.id, client),
+                        new Promise((_, reject) => setTimeout(() => reject(new Error("Sync timeout (60s)")), 60000))
+                    ]);
+                    await client.logout();
+                    client = null;
+                }
+                catch (e) {
+                    if (client) {
+                        try {
+                            await client.logout();
+                        }
+                        catch { /* ignore */ }
+                        client = null;
+                    }
+                    if (e.responseText?.includes("doesn't exist")) {
+                        console.log(`  Removing non-existent folder: ${folder.path}`);
+                        this.db.deleteFolder(folder.id);
+                    }
+                    else {
+                        console.error(`  Skipping folder ${folder.path}: ${e.message}`);
+                    }
+                }
+            }
+            this.emit("syncComplete", accountId);
+        }
     }
     /** Sync just INBOX for each account (fast check for new mail) */
     async syncInbox() {
@@ -419,19 +460,59 @@ export class ImapManager extends EventEmitter {
             this.inboxSyncing = false;
         }
     }
+    /** Quick inbox check — uses IMAP STATUS (single command, no mailbox open).
+     *  If message count changed, triggers a full inbox sync. */
+    lastInboxCounts = new Map();
+    async quickInboxCheck() {
+        for (const [accountId] of this.configs) {
+            let client = null;
+            try {
+                const inbox = this.db.getFolders(accountId).find(f => f.specialUse === "inbox");
+                if (!inbox)
+                    continue;
+                client = this.createClient(accountId);
+                const count = await client.getMessagesCount("INBOX");
+                await client.logout();
+                client = null;
+                const prev = this.lastInboxCounts.get(accountId) ?? count;
+                this.lastInboxCounts.set(accountId, count);
+                if (count !== prev) {
+                    console.log(`  [check] ${accountId} INBOX: ${prev} → ${count}`);
+                    // New mail detected — do a full inbox sync
+                    client = this.createClient(accountId);
+                    await this.syncFolder(accountId, inbox.id, client);
+                    await client.logout();
+                    client = null;
+                }
+            }
+            catch {
+                // Lightweight check — silently ignore errors (full sync will catch up)
+            }
+            finally {
+                if (client)
+                    try {
+                        await client.logout();
+                    }
+                    catch { /* ignore */ }
+            }
+        }
+    }
     /** Start periodic sync */
     startPeriodicSync(intervalMinutes) {
         this.stopPeriodicSync();
-        // INBOX poll + sync actions (IDLE handles instant, this catches gaps)
-        const inboxInterval = setInterval(async () => {
-            // Process pending local→IMAP sync actions (sends + flags/deletes/moves)
+        // Quick inbox check every 3 seconds — lightweight STATUS command
+        const quickCheck = setInterval(() => {
+            this.quickInboxCheck().catch(() => { });
+        }, 3000);
+        this.syncIntervals.set("quick", quickCheck);
+        // Sync actions (sends + flags/deletes/moves) every 30 seconds
+        const actionsInterval = setInterval(async () => {
             for (const [accountId] of this.configs) {
                 this.processSendActions(accountId).catch(() => { });
                 this.processSyncActions(accountId).catch(() => { });
             }
-            this.syncInbox().catch(e => console.error(`  [inbox] error: ${e.message}`));
         }, 30000);
-        this.syncIntervals.set("inbox", inboxInterval);
+        this.syncIntervals.set("actions", actionsInterval);
         // Full sync (all folders + IDLE restart) at configured interval
         const fullInterval = setInterval(async () => {
             console.log(`  [periodic] Full sync at ${new Date().toLocaleTimeString()}`);

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

@@ -32,6 +32,7 @@ export declare function getStorageInfo(): {
 declare const DEFAULT_PREFERENCES: {
     ui: {
         theme: "system" | "dark" | "light";
+        editor: "quill" | "tiptap";
         folderWidth: number;
         listViewerSplit: number;
         fontSize: number;

package/packages/mailx-settings/index.js

@@ -310,6 +310,7 @@ const DEFAULT_ACCOUNTS = [];
 const DEFAULT_PREFERENCES = {
     ui: {
         theme: "system",
+        editor: "quill",
         folderWidth: 220,
         listViewerSplit: 40,
         fontSize: 15,

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

@@ -177,6 +177,7 @@ export interface MailxSettings {
     accounts: AccountConfig[];
     ui: {
         theme: "system" | "dark" | "light";
+        editor: "quill" | "tiptap";
         folderWidth: number;
         listViewerSplit: number; /** Percentage for message list height */
         fontSize: number;