@bobfrankston/mailx 1.0.306 → 1.0.313

package/client/app.js

@@ -415,6 +415,28 @@ document.getElementById("btn-factory-reset")?.addEventListener("click", async ()
 });
 async function openCompose(mode) {
     const current = getCurrentMessage();
+    // Reply / Reply-All / Forward all need an original message to populate
+    // From, To, Subject, and the quoted body. Two failure modes used to
+    // silently produce a blank compose:
+    //   (1) getCurrentMessage() returns null — viewer still loading, message
+    //       cleared mid-folder-switch, or fetch failed.
+    //   (2) currentMessage is set but is a stub — header metadata arrived
+    //       but body / from / subject haven't been populated yet.
+    // Bail out in both cases instead of opening an empty form.
+    if (mode === "reply" || mode === "replyAll" || mode === "forward") {
+        const m = current?.message;
+        const stubReason = !current ? "no current message" :
+            !m?.from ? "msg.from missing" :
+                !m?.subject && m?.subject !== "" ? "msg.subject missing" :
+                    (mode !== "forward" && !m?.messageId) ? "msg.messageId missing (can't thread reply)" :
+                        null;
+        if (stubReason) {
+            console.warn(`[compose] ${mode} ignored — ${stubReason}; current=`, current);
+            alert(`Cannot ${mode === "forward" ? "forward" : "reply to"} this message yet — ` +
+                `it's still loading (${stubReason}). Please wait a moment and try again.`);
+            return;
+        }
+    }
     const accounts = await getAccounts();
     const accountId = current?.accountId || accounts[0]?.id || "";
     const msg = current?.message;
@@ -431,20 +453,34 @@ async function openCompose(mode) {
         references: [],
         accounts: accounts.map((a) => ({ id: a.id, name: a.name, email: a.email })),
     };
-    // Auto-detect reply From: if the message was delivered to an identity domain,
-    // reply from that address instead of the default account address.
-    // Identity domains configured per-account in accounts.jsonc (identityDomains array).
+    // Auto-detect reply From: if the message was delivered to an identity address
+    // (an alias on the account's domain, or the explicit `identityDomains` list
+    // in accounts.jsonc), reply from that address instead of the account's
+    // primary. Always derive identityDomains from the account email's domain
+    // when not configured — explicit list was a regression source (users would
+    // see Reply pick the wrong From silently when the list was missing).
     const account = accounts.find((a) => a.id === accountId);
-    const identityDomains = account?.identityDomains || [];
+    const explicitDomains = (account?.identityDomains || []).map((d) => d.toLowerCase());
+    const accountDomain = (account?.email || "").split("@")[1]?.toLowerCase();
+    const identityDomains = explicitDomains.length > 0
+        ? explicitDomains
+        : (accountDomain ? [accountDomain] : []);
     function detectReplyFrom() {
         if (!msg || identityDomains.length === 0)
             return undefined;
-        const candidates = [msg.deliveredTo, ...(msg.to || []).map((a) => a.address)].filter(Boolean);
-        console.log(`[compose] detectReplyFrom: deliveredTo=${msg.deliveredTo}, to=${msg.to?.map((a) => a.address)}, domains=${identityDomains}`);
+        // Prefer Delivered-To header (the address the server actually delivered
+        // to, which is the alias the message arrived at). Fall back to To, then
+        // Cc, in order. Bcc isn't visible to recipients so skipped.
+        const candidates = [
+            msg.deliveredTo,
+            ...((msg.to || []).map((a) => a.address)),
+            ...((msg.cc || []).map((a) => a.address)),
+        ].filter(Boolean);
+        console.log(`[compose] detectReplyFrom: deliveredTo=${msg.deliveredTo}, to=${msg.to?.map((a) => a.address)}, cc=${msg.cc?.map((a) => a.address)}, identityDomains=${identityDomains}, accountEmail=${account?.email}`);
         for (const addr of candidates) {
             const domain = addr.split("@")[1]?.toLowerCase();
-            if (domain && identityDomains.some((d) => domain === d.toLowerCase())) {
-                console.log(`[compose] matched: ${addr}`);
+            if (domain && identityDomains.some(d => domain === d || domain.endsWith(`.${d}`))) {
+                console.log(`[compose] reply From → ${addr}`);
                 return addr;
             }
         }
@@ -789,6 +825,45 @@ document.getElementById("btn-compose")?.addEventListener("click", () => openComp
 document.getElementById("btn-reply")?.addEventListener("click", () => openCompose("reply"));
 document.getElementById("btn-reply-all")?.addEventListener("click", () => openCompose("replyAll"));
 document.getElementById("btn-forward")?.addEventListener("click", () => openCompose("forward"));
+// ── Icon rail wiring ──
+// Rail is the always-visible vertical bar on the far left (Thunderbird/Dovecot
+// style). Mostly mirrors toolbar/menu actions for one-click access; calendar /
+// tasks / contacts buttons are placeholders until those features ship.
+document.getElementById("rail-compose")?.addEventListener("click", () => openCompose("new"));
+document.getElementById("rail-inbox")?.addEventListener("click", () => {
+    // Trigger the existing folder-tree click on the first inbox folder.
+    const inbox = document.querySelector('.folder-tree .folder-item[data-special-use="inbox"]');
+    inbox?.click();
+});
+document.getElementById("rail-unified")?.addEventListener("click", () => {
+    const unified = document.querySelector('.folder-tree .all-inboxes')
+        || document.getElementById("ft-all-inboxes");
+    unified?.click();
+});
+document.getElementById("rail-settings")?.addEventListener("click", () => {
+    document.getElementById("btn-settings")?.click();
+});
+document.getElementById("rail-help")?.addEventListener("click", () => {
+    document.getElementById("btn-about")?.click();
+});
+document.getElementById("rail-theme")?.addEventListener("click", () => {
+    // Cycle theme: system → dark → light → system.
+    const root = document.documentElement;
+    const cur = root.getAttribute("data-theme") || "system";
+    const next = cur === "system" ? "dark" : cur === "dark" ? "light" : "system";
+    root.setAttribute("data-theme", next);
+    try {
+        localStorage.setItem("mailx-theme", next);
+    }
+    catch { /* private mode */ }
+});
+// Highlight the current rail target. For now just inbox is the default; once
+// calendar/tasks ship, update this on view change.
+function setRailActive(id) {
+    document.querySelectorAll(".rail-btn[data-active]").forEach(el => el.removeAttribute("data-active"));
+    document.getElementById(id)?.setAttribute("data-active", "true");
+}
+document.addEventListener("mailx-folder-changed", () => setRailActive("rail-inbox"));
 // Context menu events from message-list right-click
 document.addEventListener("mailx-compose", ((e) => {
     if (e.detail.mode === "draft" && sessionStorage.getItem("composeInit")) {
@@ -1422,7 +1497,7 @@ document.getElementById("btn-edit-jsonc")?.addEventListener("click", async () =>
     await openJsoncEditor("accounts.jsonc");
 });
 async function openJsoncEditor(initialFile) {
-    const { readJsoncFile, writeJsoncFile } = await import("./lib/api-client.js");
+    const { readJsoncFile, writeJsoncFile, readConfigHelp } = await import("./lib/api-client.js");
     const backdrop = document.createElement("div");
     backdrop.className = "mailx-modal-backdrop";
     const panel = document.createElement("div");
@@ -1437,9 +1512,17 @@ async function openJsoncEditor(initialFile) {
                 <option value="config.jsonc">config.jsonc — local per-machine overrides (not synced)</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-split">
+            <label class="mailx-modal-label mailx-modal-split-left">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-split-right mailx-help-panel">
+                <div class="mailx-help-title">
+                    <button type="button" class="mailx-help-toggle" id="jsonc-help-toggle" aria-expanded="true" title="Hide/show help">▾ Help</button>
+                </div>
+                <div class="mailx-help-body" id="jsonc-help-body"></div>
+            </div>
+        </div>
         <div class="mailx-modal-error" id="jsonc-error" hidden></div>
         <div class="mailx-modal-buttons">
             <span class="mailx-modal-spacer"></span>
@@ -1451,13 +1534,64 @@ async function openJsoncEditor(initialFile) {
     const fileSelect = panel.querySelector("#jsonc-file");
     const textarea = panel.querySelector("#jsonc-content");
     const errorEl = panel.querySelector("#jsonc-error");
+    const saveBtn = panel.querySelector('[data-action="save"]');
+    const helpBody = panel.querySelector("#jsonc-help-body");
+    const helpToggle = panel.querySelector("#jsonc-help-toggle");
+    const helpPanel = panel.querySelector(".mailx-help-panel");
     fileSelect.value = initialFile;
+    helpToggle.addEventListener("click", () => {
+        const open = helpPanel.classList.toggle("mailx-help-collapsed");
+        helpToggle.textContent = open ? "▸ Help" : "▾ Help";
+        helpToggle.setAttribute("aria-expanded", open ? "false" : "true");
+    });
+    const loadHelp = async () => {
+        helpBody.textContent = "Loading help…";
+        try {
+            const r = await readConfigHelp(fileSelect.value);
+            const md = (r?.content || "").trim();
+            helpBody.innerHTML = md ? renderMarkdown(md) : "<em>No help available for this file.</em>";
+        }
+        catch (e) {
+            helpBody.textContent = `Help unavailable: ${e.message}`;
+        }
+    };
+    const clearValidation = () => {
+        errorEl.hidden = true;
+        errorEl.textContent = "";
+        textarea.classList.remove("mailx-modal-input-error");
+        saveBtn.disabled = false;
+    };
+    const showValidation = (err) => {
+        errorEl.textContent = `Line ${err.line}, col ${err.col}: ${err.message}`;
+        errorEl.hidden = false;
+        textarea.classList.add("mailx-modal-input-error");
+        saveBtn.disabled = true;
+        // Select the problem character so the browser draws a visible marker
+        try {
+            textarea.setSelectionRange(err.pos, err.pos + 1);
+        }
+        catch { /* out-of-range → ignore */ }
+    };
+    let validateTimer;
+    const scheduleValidate = () => {
+        if (validateTimer)
+            window.clearTimeout(validateTimer);
+        validateTimer = window.setTimeout(() => {
+            const err = validateJsonc(textarea.value);
+            if (err)
+                showValidation(err);
+            else
+                clearValidation();
+        }, 600);
+    };
+    textarea.addEventListener("input", scheduleValidate);
     const loadFile = async () => {
         textarea.value = "Loading...";
-        errorEl.hidden = true;
+        clearValidation();
         try {
             const r = await readJsoncFile(fileSelect.value);
             textarea.value = r?.content || "";
+            scheduleValidate();
         }
         catch (e) {
             textarea.value = "";
@@ -1465,9 +1599,11 @@ async function openJsoncEditor(initialFile) {
             errorEl.hidden = false;
         }
     };
-    await loadFile();
-    fileSelect.addEventListener("change", loadFile);
+    await Promise.all([loadFile(), loadHelp()]);
+    fileSelect.addEventListener("change", () => { loadFile(); loadHelp(); });
     const close = () => {
+        if (validateTimer)
+            window.clearTimeout(validateTimer);
         backdrop.remove();
         document.removeEventListener("keydown", onKey, true);
     };
@@ -1487,6 +1623,12 @@ async function openJsoncEditor(initialFile) {
                 return;
             }
             if (action === "save") {
+                // Final sync-check; refuse to save if it doesn't parse
+                const err = validateJsonc(textarea.value);
+                if (err) {
+                    showValidation(err);
+                    return;
+                }
                 errorEl.hidden = true;
                 btn.disabled = true;
                 btn.textContent = "Saving...";
@@ -1509,6 +1651,268 @@ async function openJsoncEditor(initialFile) {
     backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
         close(); });
 }
+// JSONC validator — strips comments + trailing commas (preserving source positions
+// by replacing stripped chars with spaces/newlines) and runs JSON.parse. Reports
+// only the *first* error; cascading errors are suppressed.
+function validateJsonc(src) {
+    const stripped = stripJsoncPreservingPositions(src);
+    if (stripped.error) {
+        const { pos, line, col } = offsetToLineCol(src, stripped.error.pos);
+        return { message: stripped.error.message, pos, line, col };
+    }
+    if (stripped.text.trim() === "")
+        return null; // empty file: treat as valid (settings code handles)
+    try {
+        JSON.parse(stripped.text);
+        return null;
+    }
+    catch (e) {
+        const msg = String(e?.message || "parse error");
+        const m = msg.match(/at position (\d+)/i);
+        const pos = m ? Math.min(parseInt(m[1], 10), src.length - 1) : 0;
+        const lc = offsetToLineCol(src, pos);
+        return { message: msg.replace(/\s*at position \d+/i, ""), pos: lc.pos, line: lc.line, col: lc.col };
+    }
+}
+function stripJsoncPreservingPositions(src) {
+    const out = new Array(src.length);
+    let i = 0;
+    const n = src.length;
+    while (i < n) {
+        const c = src[i];
+        const next = src[i + 1];
+        if (c === '"') {
+            out[i] = c;
+            i++;
+            while (i < n) {
+                const ch = src[i];
+                out[i] = ch;
+                i++;
+                if (ch === "\\" && i < n) {
+                    out[i] = src[i];
+                    i++;
+                    continue;
+                }
+                if (ch === '"')
+                    break;
+                if (ch === "\n")
+                    return { text: out.join(""), error: { message: "unterminated string", pos: i - 1 } };
+            }
+        }
+        else if (c === "/" && next === "/") {
+            while (i < n && src[i] !== "\n") {
+                out[i] = " ";
+                i++;
+            }
+        }
+        else if (c === "/" && next === "*") {
+            const start = i;
+            out[i] = " ";
+            out[i + 1] = " ";
+            i += 2;
+            let closed = false;
+            while (i < n) {
+                if (src[i] === "*" && src[i + 1] === "/") {
+                    out[i] = " ";
+                    out[i + 1] = " ";
+                    i += 2;
+                    closed = true;
+                    break;
+                }
+                out[i] = src[i] === "\n" ? "\n" : " ";
+                i++;
+            }
+            if (!closed)
+                return { text: out.join(""), error: { message: "unterminated block comment", pos: start } };
+        }
+        else if (c === ",") {
+            // trailing comma before } or ] → replace with space
+            let j = i + 1;
+            while (j < n && /\s/.test(src[j]))
+                j++;
+            if (j < n && (src[j] === "}" || src[j] === "]")) {
+                out[i] = " ";
+                i++;
+            }
+            else {
+                out[i] = c;
+                i++;
+            }
+        }
+        else {
+            out[i] = c;
+            i++;
+        }
+    }
+    return { text: out.join("") };
+}
+function offsetToLineCol(src, pos) {
+    pos = Math.max(0, Math.min(pos, src.length));
+    let line = 1, col = 1;
+    for (let i = 0; i < pos; i++) {
+        if (src[i] === "\n") {
+            line++;
+            col = 1;
+        }
+        else
+            col++;
+    }
+    return { pos, line, col };
+}
+// Minimal markdown renderer for the help panel. Supports: headings, fenced code blocks,
+// inline code, bold, italic, links, bullet lists, paragraphs. HTML is escaped first.
+function renderMarkdown(md) {
+    const esc = (s) => s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+    // Pull fenced code blocks out first so their contents aren't processed as markdown.
+    const blocks = [];
+    let src = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_m, _lang, code) => {
+        const i = blocks.length;
+        blocks.push(`<pre class="mailx-help-code"><code>${esc(code)}</code></pre>`);
+        return `\u0000BLOCK${i}\u0000`;
+    });
+    const lines = src.split(/\r?\n/);
+    const out = [];
+    let inList = false;
+    let para = [];
+    const flushPara = () => {
+        if (para.length) {
+            out.push(`<p>${inline(para.join(" "))}</p>`);
+            para = [];
+        }
+    };
+    const closeList = () => { if (inList) {
+        out.push("</ul>");
+        inList = false;
+    } };
+    function inline(s) {
+        s = esc(s);
+        s = s.replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`);
+        s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+        s = s.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
+        s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+        return s;
+    }
+    for (const raw of lines) {
+        const blockMatch = /^\u0000BLOCK(\d+)\u0000$/.exec(raw);
+        if (blockMatch) {
+            flushPara();
+            closeList();
+            out.push(blocks[parseInt(blockMatch[1], 10)]);
+            continue;
+        }
+        const h = /^(#{1,6})\s+(.+)$/.exec(raw);
+        if (h) {
+            flushPara();
+            closeList();
+            const lvl = h[1].length;
+            out.push(`<h${lvl}>${inline(h[2])}</h${lvl}>`);
+            continue;
+        }
+        const bullet = /^\s*[-*]\s+(.+)$/.exec(raw);
+        if (bullet) {
+            flushPara();
+            if (!inList) {
+                out.push("<ul>");
+                inList = true;
+            }
+            out.push(`<li>${inline(bullet[1])}</li>`);
+            continue;
+        }
+        if (raw.trim() === "") {
+            flushPara();
+            closeList();
+            continue;
+        }
+        para.push(raw);
+    }
+    flushPara();
+    closeList();
+    return out.join("\n");
+}
+// ── About dialog ──
+document.getElementById("btn-about")?.addEventListener("click", () => {
+    const settingsDropdown = document.getElementById("settings-dropdown");
+    if (settingsDropdown)
+        settingsDropdown.hidden = true;
+    openAboutDialog();
+});
+// Clicking the version string (toolbar in wide mode, status bar in narrow mode) also opens About
+document.querySelectorAll(".app-version").forEach(el => {
+    el.style.cursor = "pointer";
+    el.addEventListener("click", openAboutDialog);
+});
+async function openAboutDialog() {
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">About mailx</div>
+        <div class="mailx-about" id="about-body">Loading...</div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(panel.parentElement);
+    const body = panel.querySelector("#about-body");
+    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.querySelector('[data-action="close"]')
+        .addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+    try {
+        const [v, accounts] = await Promise.all([
+            getVersion().catch(() => ({})),
+            getAccounts().catch(() => []),
+        ]);
+        const storage = v.storage || {};
+        const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
+        const platform = isApp ? (mailxapi?.platform || "app") : "browser";
+        const rows = [
+            ["Version", v.version ? `v${v.version}` : "unknown"],
+            ["Platform", platform],
+            ["Storage", storage.provider || "local"],
+        ];
+        if (storage.cloudPath)
+            rows.push(["Cloud path", `My Drive/${storage.cloudPath}/`]);
+        if (storage.mode)
+            rows.push(["Storage mode", storage.mode]);
+        rows.push(["Accounts", String((accounts || []).length)]);
+        rows.push(["User agent", navigator.userAgent]);
+        rows.push(["Screen", `${screen.width}×${screen.height}`]);
+        rows.push(["Window", `${window.innerWidth}×${window.innerHeight}`]);
+        body.innerHTML = `
+            <dl class="mailx-about-dl">
+              ${rows.map(([k, val]) => `<dt>${k}</dt><dd>${escapeHtml(val)}</dd>`).join("")}
+            </dl>
+            ${(accounts || []).length ? `
+            <div class="mailx-about-accounts">
+              <div class="mailx-about-section">Accounts</div>
+              <ul>
+                ${accounts.map(a => `<li>${escapeHtml(a.email || a.id)}${a.name ? ` — ${escapeHtml(a.name)}` : ""}</li>`).join("")}
+              </ul>
+            </div>` : ""}
+            <div class="mailx-about-foot">mailx — local-first mail client</div>`;
+    }
+    catch (e) {
+        body.textContent = `Failed to load: ${e.message}`;
+    }
+}
+function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
 // Threaded view toggle
 optThreaded?.addEventListener("change", () => {
     const body = document.getElementById("ml-body");
@@ -1578,19 +1982,30 @@ optEditorTiptap?.addEventListener("change", () => {
     if (optEditorTiptap.checked)
         saveEditorSetting("tiptap");
 });
-// ── AI autocomplete toggle ──
+// ── AI feature toggles ──
+// One umbrella settings record (AutocompleteSettings) holds the provider config
+// + per-feature on/off flags. All features default OFF — user must opt into
+// each AI behavior individually. Per user preference (2026-04-21).
 const optAutocomplete = document.getElementById("opt-autocomplete");
-// Load current autocomplete setting
+const optAiTranslate = document.getElementById("opt-ai-translate");
+const optAiProofread = document.getElementById("opt-ai-proofread");
 getAutocompleteSettings().then((ac) => {
     if (optAutocomplete)
-        optAutocomplete.checked = ac.enabled || false;
+        optAutocomplete.checked = !!ac.enabled;
+    if (optAiTranslate)
+        optAiTranslate.checked = !!ac.translateEnabled;
+    if (optAiProofread)
+        optAiProofread.checked = !!ac.proofreadEnabled;
 }).catch(() => { });
-optAutocomplete?.addEventListener("change", () => {
+function persistAi(mutator) {
     getAutocompleteSettings().then((ac) => {
-        ac.enabled = optAutocomplete.checked;
+        mutator(ac);
         saveAutocompleteSettings(ac);
     }).catch(() => { });
-});
+}
+optAutocomplete?.addEventListener("change", () => persistAi((ac) => { ac.enabled = optAutocomplete.checked; }));
+optAiTranslate?.addEventListener("change", () => persistAi((ac) => { ac.translateEnabled = optAiTranslate.checked; }));
+optAiProofread?.addEventListener("change", () => persistAi((ac) => { ac.proofreadEnabled = optAiProofread.checked; }));
 const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
 // Wait for server ready signal, then fetch version
 const versionPromise = getVersion();

package/client/components/folder-picker.js

@@ -0,0 +1,119 @@
+/**
+ * Folder picker — small modal for choosing a destination folder.
+ * Used by the message-list right-click "Move to folder…" item and any
+ * other UI that needs the user to pick a folder.
+ *
+ * Reads folders from the local DB via getFolders() (local-first — no
+ * server round-trip). Filters by typed text. Returns the selected
+ * folder, or null if the user dismissed.
+ */
+import { getFolders } from "../lib/api-client.js";
+/** Show a modal folder picker. Returns a promise resolving to the picked
+ *  folder, or null if dismissed. The list is restricted to one account
+ *  (the current message's account) so it doesn't get cluttered with
+ *  unrelated folders; cross-account moves can be added later via an
+ *  account selector at the top of the picker. */
+export function pickFolder(accountId, opts) {
+    return new Promise(async (resolve) => {
+        const overlay = document.createElement("div");
+        overlay.className = "folder-picker-overlay";
+        overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:10000;display:flex;align-items:center;justify-content:center;";
+        const modal = document.createElement("div");
+        modal.className = "folder-picker-modal";
+        modal.style.cssText = "background:var(--bg, #fff);color:var(--fg, #000);border:1px solid var(--border, #ccc);border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,0.3);width:380px;max-width:90vw;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;";
+        const header = document.createElement("div");
+        header.style.cssText = "padding:10px 14px;border-bottom:1px solid var(--border, #ddd);font-weight:600;";
+        header.textContent = opts?.title || "Move to folder…";
+        modal.appendChild(header);
+        const search = document.createElement("input");
+        search.type = "text";
+        search.placeholder = "Filter folders…";
+        search.style.cssText = "margin:8px 12px;padding:6px 10px;border:1px solid var(--border, #ccc);border-radius:4px;font-size:13px;";
+        modal.appendChild(search);
+        const listEl = document.createElement("div");
+        listEl.style.cssText = "flex:1;overflow-y:auto;padding:4px 0;";
+        modal.appendChild(listEl);
+        const footer = document.createElement("div");
+        footer.style.cssText = "padding:8px 12px;border-top:1px solid var(--border, #ddd);display:flex;justify-content:flex-end;gap:8px;";
+        const cancelBtn = document.createElement("button");
+        cancelBtn.textContent = "Cancel";
+        cancelBtn.style.cssText = "padding:6px 14px;cursor:pointer;";
+        footer.appendChild(cancelBtn);
+        modal.appendChild(footer);
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+        const dismiss = (result) => {
+            overlay.remove();
+            document.removeEventListener("keydown", onKey);
+            resolve(result);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                dismiss(null);
+            }
+            if (e.key === "Enter") {
+                const first = listEl.querySelector(".folder-picker-row.match");
+                if (first)
+                    first.click();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        overlay.addEventListener("click", (e) => { if (e.target === overlay)
+            dismiss(null); });
+        cancelBtn.addEventListener("click", () => dismiss(null));
+        // Local-first: load from DB synchronously-ish (one IPC round-trip).
+        let folders = [];
+        try {
+            folders = (await getFolders(accountId)) || [];
+        }
+        catch (e) {
+            listEl.textContent = "Failed to load folders";
+            return;
+        }
+        // Hide special-use that don't make sense as targets (Outbox).
+        // Allow Trash / Junk so users can manually file into them.
+        const excluded = new Set(opts?.excludeFolderIds || []);
+        const targets = folders
+            .filter((f) => !excluded.has(f.id))
+            .filter((f) => f.specialUse !== "outbox")
+            .sort((a, b) => a.path.localeCompare(b.path));
+        function render(filter) {
+            listEl.innerHTML = "";
+            const lc = filter.toLowerCase().trim();
+            let firstMatchSet = false;
+            for (const f of targets) {
+                const row = document.createElement("div");
+                row.className = "folder-picker-row";
+                row.style.cssText = "padding:6px 14px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:8px;";
+                const name = document.createElement("span");
+                name.textContent = f.path;
+                const tag = document.createElement("span");
+                tag.style.cssText = "color:var(--muted, #888);font-size:11px;";
+                tag.textContent = f.specialUse || "";
+                row.appendChild(name);
+                row.appendChild(tag);
+                const matches = !lc || f.path.toLowerCase().includes(lc);
+                if (matches) {
+                    row.classList.add("match");
+                    if (!firstMatchSet) {
+                        row.style.background = "var(--hover, #eee)";
+                        firstMatchSet = true;
+                    }
+                }
+                row.addEventListener("mouseenter", () => row.style.background = "var(--hover, #eee)");
+                row.addEventListener("mouseleave", () => row.style.background = "");
+                row.addEventListener("click", () => {
+                    dismiss({ accountId, folderId: f.id, folderPath: f.path, folderName: f.path.split(/[./]/).pop() || f.path });
+                });
+                if (!matches)
+                    row.style.display = "none";
+                listEl.appendChild(row);
+            }
+        }
+        render("");
+        search.addEventListener("input", () => render(search.value));
+        setTimeout(() => search.focus(), 0);
+    });
+}
+//# sourceMappingURL=folder-picker.js.map