@bobfrankston/mailx 1.0.9 → 1.0.13

package/client/components/message-list.js

@@ -3,10 +3,24 @@
  * Loads more messages on scroll.
  */
 import { getMessages, getUnifiedInbox, searchMessages } from "../lib/api-client.js";
+function clearFilter() {
+    const f = document.getElementById("ml-filter-input");
+    if (f)
+        f.value = "";
+}
+/** Clear the message viewer when no message is selected */
+function clearViewer() {
+    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;
+}
 let onMessageSelect;
 let currentAccountId;
 let currentFolderId;
-let selectedRow;
+let lastClickedRow = null;
 let currentPage;
 let totalMessages;
 let loading = false;
@@ -14,11 +28,62 @@ let unifiedMode = false;
 let searchMode = false;
 let currentSearchQuery = "";
 let showToInsteadOfFrom = false;
+/** Get all selected message rows */
+export function getSelectedMessages() {
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return [];
+    const rows = body.querySelectorAll(".ml-row.selected");
+    return Array.from(rows).map(r => ({
+        accountId: r.dataset.accountId || "",
+        uid: Number(r.dataset.uid),
+        folderId: Number(r.dataset.folderId),
+    }));
+}
+function clearSelection() {
+    const body = document.getElementById("ml-body");
+    if (body)
+        body.querySelectorAll(".ml-row.selected").forEach(r => r.classList.remove("selected"));
+}
+function selectRange(from, to) {
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    const rows = Array.from(body.querySelectorAll(".ml-row"));
+    const fromIdx = rows.indexOf(from);
+    const toIdx = rows.indexOf(to);
+    if (fromIdx < 0 || toIdx < 0)
+        return;
+    const lo = Math.min(fromIdx, toIdx);
+    const hi = Math.max(fromIdx, toIdx);
+    for (let i = lo; i <= hi; i++)
+        rows[i].classList.add("selected");
+}
 const timeFmt = { hour: "2-digit", minute: "2-digit", hour12: false };
 const dateFmt = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
 const dateFmtSameYear = { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
 export function initMessageList(handler) {
     onMessageSelect = handler;
+    // Client-side filter
+    const filterInput = document.getElementById("ml-filter-input");
+    if (filterInput) {
+        filterInput.addEventListener("input", () => {
+            const query = filterInput.value.toLowerCase();
+            const body = document.getElementById("ml-body");
+            if (!body)
+                return;
+            for (const row of body.querySelectorAll(".ml-row")) {
+                const text = row.textContent?.toLowerCase() || "";
+                row.classList.toggle("filter-hidden", query.length > 0 && !text.includes(query));
+            }
+        });
+        filterInput.addEventListener("keydown", (e) => {
+            if (e.key === "Escape") {
+                filterInput.value = "";
+                filterInput.dispatchEvent(new Event("input"));
+            }
+        });
+    }
     // Infinite scroll
     const body = document.getElementById("ml-body");
     if (body) {
@@ -46,6 +111,7 @@ export function reloadCurrentFolder() {
 }
 /** Load unified inbox (all accounts) */
 export async function loadUnifiedInbox() {
+    clearFilter();
     unifiedMode = true;
     currentPage = 1;
     totalMessages = 0;
@@ -58,17 +124,24 @@ export async function loadUnifiedInbox() {
         totalMessages = result.total;
         if (result.items.length === 0) {
             body.innerHTML = `<div class="ml-empty">No messages</div>`;
+            clearViewer();
             return;
         }
         body.innerHTML = "";
         appendMessages(body, "", result.items);
+        const firstRow = body.querySelector(".ml-row");
+        if (firstRow)
+            firstRow.click();
     }
     catch (e) {
+        if (e.name === "AbortError")
+            return;
         body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
     }
 }
 /** Load search results */
 export async function loadSearchResults(query) {
+    clearFilter();
     searchMode = true;
     unifiedMode = false;
     currentSearchQuery = query;
@@ -93,6 +166,7 @@ export async function loadSearchResults(query) {
     }
 }
 export async function loadMessages(accountId, folderId, page = 1, specialUse = "") {
+    clearFilter();
     searchMode = false;
     unifiedMode = false;
     showToInsteadOfFrom = ["sent", "drafts", "outbox"].includes(specialUse) ||
@@ -114,12 +188,19 @@ export async function loadMessages(accountId, folderId, page = 1, specialUse = "
         totalMessages = result.total;
         if (result.items.length === 0) {
             body.innerHTML = `<div class="ml-empty">No messages</div>`;
+            clearViewer();
             return;
         }
         body.innerHTML = "";
         appendMessages(body, accountId, result.items);
+        // Auto-select first message
+        const firstRow = body.querySelector(".ml-row");
+        if (firstRow)
+            firstRow.click();
     }
     catch (e) {
+        if (e.name === "AbortError")
+            return; // Superseded by newer request
         body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
     }
 }
@@ -146,13 +227,18 @@ async function loadMoreMessages() {
 }
 function appendMessages(body, accountId, items) {
     for (const msg of items) {
+        // Use per-message accountId for unified inbox, fallback to list-level accountId
+        const msgAccountId = msg.accountId || accountId;
         const row = document.createElement("div");
         row.className = "ml-row";
+        row.draggable = true;
         if (!msg.flags.includes("\\Seen"))
             row.classList.add("unread");
         if (msg.flags.includes("\\Flagged"))
             row.classList.add("flagged");
         row.dataset.uid = String(msg.uid);
+        row.dataset.accountId = msgAccountId;
+        row.dataset.folderId = String(msg.folderId);
         const flag = document.createElement("span");
         flag.className = "ml-flag";
         flag.textContent = msg.flags.includes("\\Flagged") ? "\u2605" : "\u2606"; // ★ or ☆
@@ -185,7 +271,7 @@ function appendMessages(body, accountId, items) {
                 ? currentFlags.filter((f) => f !== "\\Flagged")
                 : [...currentFlags, "\\Flagged"];
             try {
-                await fetch(`/api/message/${accountId}/${msg.uid}/flags`, {
+                await fetch(`/api/message/${msgAccountId}/${msg.uid}/flags`, {
                     method: "PATCH",
                     headers: { "Content-Type": "application/json" },
                     body: JSON.stringify({ flags: newFlags }),
@@ -200,14 +286,54 @@ function appendMessages(body, accountId, items) {
         row.appendChild(from);
         row.appendChild(date);
         row.appendChild(subject);
-        row.addEventListener("click", () => {
-            if (selectedRow)
-                selectedRow.classList.remove("selected");
-            row.classList.add("selected");
-            selectedRow = row;
+        row.addEventListener("click", (e) => {
+            if (e.shiftKey && lastClickedRow) {
+                // Shift+click: range select from last clicked to this row
+                clearSelection();
+                selectRange(lastClickedRow, row);
+            }
+            else if (e.ctrlKey || e.metaKey) {
+                // Ctrl+click: toggle this row
+                row.classList.toggle("selected");
+            }
+            else {
+                // Plain click: single select
+                clearSelection();
+                row.classList.add("selected");
+            }
+            lastClickedRow = row;
             row.classList.remove("unread");
-            onMessageSelect(accountId, msg.uid);
+            onMessageSelect(msgAccountId, msg.uid, msg.folderId);
+        });
+        row.addEventListener("dragstart", (e) => {
+            // If dragging a non-selected row, select it first
+            if (!row.classList.contains("selected")) {
+                clearSelection();
+                row.classList.add("selected");
+                lastClickedRow = row;
+            }
+            const selected = getSelectedMessages();
+            e.dataTransfer.setData("application/x-mailx-messages", JSON.stringify(selected));
+            // Legacy single-message format for backwards compat
+            e.dataTransfer.setData("application/x-mailx-message", JSON.stringify({
+                accountId: msgAccountId,
+                uid: msg.uid,
+                folderId: msg.folderId,
+                subject: msg.subject,
+            }));
+            e.dataTransfer.effectAllowed = "copyMove";
+            row.classList.add("dragging");
+            // Show drag count
+            if (selected.length > 1) {
+                const badge = document.createElement("div");
+                badge.textContent = `${selected.length} messages`;
+                badge.style.cssText = "position:absolute;top:-1000px;background:#333;color:white;padding:4px 8px;border-radius:4px;font-size:12px";
+                document.body.appendChild(badge);
+                e.dataTransfer.setDragImage(badge, 0, 0);
+                setTimeout(() => badge.remove(), 0);
+            }
         });
+        row.addEventListener("dragend", () => row.classList.remove("dragging"));
         body.appendChild(row);
     }
 }

package/client/components/message-viewer.js

@@ -5,12 +5,14 @@ import { getMessage, updateFlags } from "../lib/api-client.js";
 /** Currently displayed message (for reply/forward) */
 let currentMessage = null;
 let currentAccountId = "";
+let showMessageGeneration = 0; // Cancel stale fetches
 export function getCurrentMessage() {
     if (!currentMessage)
         return null;
     return { accountId: currentAccountId, message: currentMessage };
 }
-export async function showMessage(accountId, uid) {
+export async function showMessage(accountId, uid, folderId, specialUse) {
+    const gen = ++showMessageGeneration;
     const headerEl = document.getElementById("mv-header");
     const bodyEl = document.getElementById("mv-body");
     const attEl = document.getElementById("mv-attachments");
@@ -18,9 +20,10 @@ export async function showMessage(accountId, uid) {
     headerEl.hidden = true;
     attEl.hidden = true;
     try {
-        // Timeout after 15 seconds
-        const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout loading message")), 15000));
-        const msg = await Promise.race([getMessage(accountId, uid), timeout]);
+        const msg = await getMessage(accountId, uid, false, folderId);
+        // Stale response — a newer showMessage was called while we were fetching
+        if (gen !== showMessageGeneration)
+            return;
         currentMessage = msg;
         currentAccountId = accountId;
         // Mark as read
@@ -37,18 +40,114 @@ export async function showMessage(accountId, uid) {
         }
         headerEl.querySelector(".mv-subject").textContent = msg.subject;
         headerEl.querySelector(".mv-date").textContent = new Date(msg.date).toLocaleString(undefined, { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false });
-        // Remote content banner
+        // Unsubscribe button (upper right of header)
+        const unsubBtn = document.getElementById("mv-unsubscribe");
+        const headerUnsub = msg.listUnsubscribe || "";
+        const headerUnsubUrl = headerUnsub.match(/<(https?:\/\/[^>]+)>/)?.[1]
+            || headerUnsub.match(/<(mailto:[^>]+)>/)?.[1] || "";
+        if (unsubBtn) {
+            if (headerUnsubUrl) {
+                unsubBtn.hidden = false;
+                unsubBtn.href = headerUnsubUrl;
+                unsubBtn.target = "_blank";
+                unsubBtn.rel = "noopener noreferrer";
+            }
+            else {
+                unsubBtn.hidden = true;
+            }
+        }
+        // View Source button — shows .eml file path
+        const srcBtn = document.getElementById("mv-view-source");
+        if (srcBtn) {
+            if (msg.emlPath) {
+                srcBtn.hidden = false;
+                srcBtn.title = msg.emlPath;
+                srcBtn.onclick = () => {
+                    // Copy path to clipboard and show in status bar
+                    navigator.clipboard.writeText(msg.emlPath).then(() => {
+                        const status = document.getElementById("status-sync");
+                        if (status)
+                            status.textContent = `Path copied: ${msg.emlPath}`;
+                    }).catch(() => {
+                        prompt("EML file path:", msg.emlPath);
+                    });
+                };
+            }
+            else {
+                srcBtn.hidden = true;
+            }
+        }
+        // Edit Draft / Send from Outbox button
+        const editBtn = document.getElementById("mv-edit-draft");
+        if (editBtn) {
+            const isDraft = specialUse === "drafts" || specialUse === "outbox";
+            if (isDraft) {
+                editBtn.hidden = false;
+                editBtn.textContent = specialUse === "outbox" ? "Edit & Send" : "Edit Draft";
+                editBtn.onclick = () => {
+                    // Open compose window pre-filled with this draft
+                    const init = {
+                        mode: "draft",
+                        accountId,
+                        to: msg.to || [],
+                        cc: msg.cc || [],
+                        subject: msg.subject || "",
+                        bodyHtml: msg.bodyHtml || "",
+                        inReplyTo: msg.inReplyTo || "",
+                        references: msg.references || [],
+                        accounts: [],
+                        draftUid: msg.uid,
+                        draftFolderId: msg.folderId,
+                    };
+                    sessionStorage.setItem("composeInit", JSON.stringify(init));
+                    window.open("/compose/compose.html", "_blank", "width=800,height=600,menubar=no,toolbar=no,status=no");
+                };
+            }
+            else {
+                editBtn.hidden = true;
+            }
+        }
+        // Remote content banner (collapsible dropdown with sender/recipient details)
         bodyEl.innerHTML = "";
         if (msg.hasRemoteContent) {
             const senderAddr = msg.from?.address || "";
+            const senderName = msg.from?.name || "";
             const senderDomain = senderAddr.split("@")[1] || "";
+            const deliveredTo = msg.deliveredTo || "";
+            const toAddr = msg.to?.[0]?.address || "";
+            const returnPath = msg.returnPath || "";
             const banner = document.createElement("div");
             banner.className = "mv-remote-banner";
-            banner.innerHTML = `Remote content blocked from <b>${senderAddr}</b>. ` +
-                `<button id="btn-load-remote">Load this time</button> ` +
-                `<button id="btn-allow-sender">Always from ${senderAddr}</button> ` +
-                (senderDomain ? `<button id="btn-allow-domain">Always from ${senderDomain}</button>` : "");
+            banner.innerHTML =
+                `<div class="mv-rb-summary">` +
+                    `<span class="mv-rb-toggle">&#x25B8;</span>` +
+                    `<span>Remote content blocked</span>` +
+                    `<span class="mv-rb-buttons">` +
+                    `<button id="btn-load-remote">Load once</button>` +
+                    `<button id="btn-allow-sender" title="${escapeText(senderAddr)}">Always: ${escapeText(senderAddr)}</button>` +
+                    (senderDomain ? `<button id="btn-allow-domain" title="*@${escapeText(senderDomain)}">Always: *@${escapeText(senderDomain)}</button>` : "") +
+                    `</span>` +
+                    `</div>` +
+                    `<div class="mv-rb-details" hidden>` +
+                    `<div class="mv-rb-info">` +
+                    `<div><span class="mv-rb-label">From:</span> ${escapeText(senderName ? `${senderName} <${senderAddr}>` : senderAddr)}</div>` +
+                    (deliveredTo ? `<div><span class="mv-rb-label">Delivered-To:</span> ${escapeText(deliveredTo)}</div>` : "") +
+                    (toAddr && toAddr !== deliveredTo ? `<div><span class="mv-rb-label">To:</span> ${escapeText(toAddr)}</div>` : "") +
+                    (returnPath && returnPath !== senderAddr ? `<div><span class="mv-rb-label">Return-Path:</span> ${escapeText(returnPath)}</div>` : "") +
+                    `</div>` +
+                    (deliveredTo || toAddr ? `<div class="mv-rb-actions"><button id="btn-allow-to">Always allow to: ${escapeText(deliveredTo || toAddr)}</button></div>` : "") +
+                    `</div>`;
             bodyEl.appendChild(banner);
+            // Toggle dropdown — click arrow or text to expand details
+            const summary = banner.querySelector(".mv-rb-summary");
+            const details = banner.querySelector(".mv-rb-details");
+            const toggle = banner.querySelector(".mv-rb-toggle");
+            summary.addEventListener("click", (e) => {
+                if (e.target.tagName === "BUTTON")
+                    return;
+                details.hidden = !details.hidden;
+                toggle.textContent = details.hidden ? "\u25B8" : "\u25BE";
+            });
             const loadRemote = async () => {
                 banner.remove();
                 const full = await getMessage(accountId, uid, true);
@@ -78,6 +177,17 @@ export async function showMessage(accountId, uid) {
                 });
                 loadRemote();
             });
+            banner.querySelector("#btn-allow-to")?.addEventListener("click", async () => {
+                const addr = deliveredTo || toAddr;
+                if (!addr)
+                    return;
+                await fetch("/api/settings/allow-remote", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ type: "recipient", value: addr }),
+                });
+                loadRemote();
+            });
         }
         // Body in sandboxed iframe
         if (msg.bodyHtml) {
@@ -85,7 +195,8 @@ export async function showMessage(accountId, uid) {
             iframe.sandbox.add("allow-same-origin");
             iframe.sandbox.add("allow-popups");
             iframe.sandbox.add("allow-popups-to-escape-sandbox");
-            iframe.srcdoc = wrapHtmlBody(msg.bodyHtml);
+            iframe.sandbox.add("allow-top-navigation-by-user-activation");
+            iframe.srcdoc = wrapHtmlBody(msg.bodyHtml, msg.remoteAllowed);
             bodyEl.appendChild(iframe);
         }
         else if (msg.bodyText) {
@@ -118,6 +229,11 @@ function formatAddr(addr) {
         return `${addr.name} <${addr.address}>`;
     return addr.address;
 }
+function escapeText(s) {
+    const div = document.createElement("div");
+    div.textContent = s;
+    return div.innerHTML;
+}
 function formatSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
@@ -126,9 +242,10 @@ function formatSize(bytes) {
     return `${(bytes / 1048576).toFixed(1)} MB`;
 }
 function wrapHtmlBody(html, allowRemote = false) {
+    // CSP blocks remote resource loading (tracking pixels, external CSS) but allows link clicks
     const csp = allowRemote
-        ? "" // no CSP restriction when remote content allowed
-        : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data: cid:;">`;
+        ? ""
+        : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data: cid:; form-action 'none';">`;
     return `<!DOCTYPE html>
 <html><head>
 <meta charset="UTF-8">
@@ -136,7 +253,7 @@ ${csp}
 <style>
     body {
         font-family: system-ui, sans-serif;
-        font-size: 14px;
+        font-size: 17.5px;
         line-height: 1.5;
         color: #1a1a2e;
         background: #fff;

package/client/compose/compose.html

@@ -13,10 +13,10 @@
 </head>
 <body>
     <div class="compose-header">
-        <div class="compose-field">
-            <label for="compose-from">From</label>
-            <input type="text" id="compose-from" list="compose-from-list" autocomplete="off">
-            <datalist id="compose-from-list"></datalist>
+        <div class="compose-field compose-from-field">
+            <label for="compose-from-select">From</label>
+            <select id="compose-from-select"></select>
+            <input type="text" id="compose-from-custom" placeholder="Custom address..." hidden>
         </div>
         <div class="compose-field">
             <label for="compose-to">To</label>

package/client/compose/compose.js

@@ -18,27 +18,59 @@ const editor = new Quill("#compose-editor", {
     }
 });
 // ── Populate from init data ──
-const fromInput = document.getElementById("compose-from");
-const fromDatalist = document.getElementById("compose-from-list");
+const fromSelect = document.getElementById("compose-from-select");
+const fromCustom = document.getElementById("compose-from-custom");
 const toInput = document.getElementById("compose-to");
 const ccInput = document.getElementById("compose-cc");
 const bccInput = document.getElementById("compose-bcc");
 const subjectInput = document.getElementById("compose-subject");
-/** Extract account ID from the From field value, or return the raw value for custom addresses */
+/** Populate the From dropdown with accounts */
+function populateFromSelect(accounts, selectedId) {
+    fromSelect.innerHTML = "";
+    for (const acct of accounts) {
+        const opt = document.createElement("option");
+        opt.value = acct.id;
+        const displayLabel = acct.label || acct.name;
+        opt.textContent = `${displayLabel}: ${acct.name} <${acct.email}>`;
+        opt.dataset.email = acct.email;
+        opt.dataset.name = acct.name;
+        if (acct.defaultSend)
+            opt.dataset.defaultSend = "true";
+        if (acct.id === selectedId)
+            opt.selected = true;
+        fromSelect.appendChild(opt);
+    }
+    // "Other..." option for custom address
+    const other = document.createElement("option");
+    other.value = "__custom__";
+    other.textContent = "Other...";
+    fromSelect.appendChild(other);
+}
+fromSelect.addEventListener("change", () => {
+    if (fromSelect.value === "__custom__") {
+        fromCustom.hidden = false;
+        fromCustom.focus();
+    }
+    else {
+        fromCustom.hidden = true;
+        fromCustom.value = "";
+    }
+});
+/** Extract account ID from the From field */
 function getFromAccountId() {
-    const val = fromInput.value;
-    // Check datalist options for a matching account
-    for (const opt of fromDatalist.options) {
-        if (opt.value === val && opt.dataset.accountId)
-            return opt.dataset.accountId;
+    if (fromSelect.value === "__custom__") {
+        // Custom address — use default send account, fallback to first
+        const defaultOpt = Array.from(fromSelect.options).find(o => o.dataset.defaultSend === "true");
+        return defaultOpt?.value || fromSelect.options[0]?.value || "";
     }
-    // No match — return first account ID as the sending account (custom From address)
-    const first = fromDatalist.options[0];
-    return first?.dataset.accountId || val;
+    return fromSelect.value;
 }
 /** Get the From address string for the message headers */
 function getFromAddress() {
-    return fromInput.value;
+    if (fromSelect.value === "__custom__")
+        return fromCustom.value;
+    const opt = fromSelect.selectedOptions[0];
+    return opt ? `${opt.dataset.name} <${opt.dataset.email}>` : "";
 }
 /** Smart tab — skip to next empty field, ending at body */
 function smartTab(current) {
@@ -145,8 +177,7 @@ function setupAutocomplete(input) {
                 e.preventDefault();
                 const idx = activeIndex >= 0 ? activeIndex : 0;
                 items[idx].dispatchEvent(new MouseEvent("mousedown"));
-                // After selecting, smart-tab to next empty field
-                setTimeout(() => smartTab(input), 50);
+                // Stay in field — user may want to add more addresses
                 return;
             }
         }
@@ -176,16 +207,7 @@ function parseAddrs(s) {
 }
 function applyInit(init) {
     // Populate From dropdown
-    fromDatalist.innerHTML = "";
-    for (const acct of init.accounts) {
-        const opt = document.createElement("option");
-        opt.value = `${acct.name} <${acct.email}>`;
-        opt.dataset.accountId = acct.id;
-        fromDatalist.appendChild(opt);
-    }
-    const selectedAcct = init.accounts.find((a) => a.id === init.accountId) || init.accounts[0];
-    if (selectedAcct)
-        fromInput.value = `${selectedAcct.name} <${selectedAcct.email}>`;
+    populateFromSelect(init.accounts, init.accountId);
     toInput.value = formatAddrs(init.to);
     ccInput.value = formatAddrs(init.cc);
     subjectInput.value = init.subject;
@@ -193,6 +215,10 @@ function applyInit(init) {
         editor.clipboard.dangerouslyPasteHTML(init.bodyHtml);
         editor.setSelection(0, 0);
     }
+    // If resuming a draft, track its UID for deletion after send
+    if (init.draftUid) {
+        draftUid = init.draftUid;
+    }
     document.title = init.subject ? `${init.subject} - Compose` : "Compose - mailx";
     // Focus first empty field: To → Subject → body
     if (!toInput.value)
@@ -213,19 +239,11 @@ else {
     toInput.focus();
 }
 // If From dropdown is empty (new compose without init, or init had no accounts), fetch from API
-if (fromDatalist.children.length === 0) {
+if (fromSelect.options.length === 0) {
     fetch("/api/accounts")
         .then(r => r.json())
         .then((accounts) => {
-        for (const acct of accounts) {
-            const opt = document.createElement("option");
-            opt.value = `${acct.name} <${acct.email}>`;
-            opt.dataset.accountId = acct.id;
-            fromDatalist.appendChild(opt);
-        }
-        if (!fromInput.value && accounts.length > 0) {
-            fromInput.value = `${accounts[0].name} <${accounts[0].email}>`;
-        }
+        populateFromSelect(accounts);
     })
         .catch(e => console.error("Failed to load accounts:", e));
 }
@@ -270,6 +288,7 @@ document.getElementById("btn-send")?.addEventListener("click", async () => {
     btn.textContent = "Sending...";
     const body = {
         from: getFromAccountId(),
+        fromAddress: getFromAddress(),
         to: parseAddrs(toInput.value),
         cc: parseAddrs(ccInput.value),
         bcc: parseAddrs(bccInput.value),