@bobfrankston/mailx 1.0.12 → 1.0.13

package/bin/mailx.js

@@ -1,25 +1,28 @@
 #!/usr/bin/env node
 /**
- * mailx — email client launcher
+ * mailx — email client
  *
  * Usage:
- *   mailx                    Start unified (in-process server + open browser)
- *   mailx --server           Start as a standalone server only (no browser)
- *   mailx --no-browser       Start server in-process, don't open browser
- *   mailx --external         Bind to all interfaces (default: localhost only)
+ *   mailx                    Launch native app (IPC, no server)
+ *   mailx --server           Start Express server + open browser
+ *   mailx --no-browser       Server mode, don't open browser
+ *   mailx --external         Bind to all interfaces (server mode only)
  */
 
+import fs from "node:fs";
+import path from "node:path";
 import net from "node:net";
 
 const PORT = 9333;
 const args = process.argv.slice(2);
+const serverMode = args.includes("--server");
+const noBrowser = args.includes("--no-browser");
 
 function isPortInUse(port) {
     return new Promise((resolve) => {
-        const server = net.createServer();
-        server.once("error", () => resolve(true));
-        server.once("listening", () => { server.close(); resolve(false); });
-        server.listen(port, "127.0.0.1");
+        const socket = net.createConnection({ port, host: "127.0.0.1" });
+        socket.once("connect", () => { socket.destroy(); resolve(true); });
+        socket.once("error", () => resolve(false));
     });
 }
 
@@ -32,33 +35,48 @@ function openBrowser(url) {
 }
 
 async function main() {
-    const serverOnly = args.includes("--server");
-    const noBrowser = args.includes("--no-browser") || serverOnly;
+    if (serverMode) {
+        // Server mode — Express + WebSocket, open browser
+        const inUse = await isPortInUse(PORT);
+        if (inUse) {
+            console.log("mailx server already running");
+            if (!noBrowser) openBrowser(`http://localhost:${PORT}`);
+            return;
+        }
+
+        console.log("Starting mailx server...");
+        if (args.includes("--external")) process.argv.push("--external");
+        await import("../packages/mailx-server/index.js");
 
-    const inUse = await isPortInUse(PORT);
-    if (inUse) {
-        console.log("mailx is already running");
         if (!noBrowser) {
+            for (let i = 0; i < 30; i++) {
+                await new Promise(r => setTimeout(r, 200));
+                if (await isPortInUse(PORT)) break;
+            }
             openBrowser(`http://localhost:${PORT}`);
-            console.log("mailx opened");
+            console.log("mailx opened (browser)");
         }
-        return;
-    }
-
-    console.log("Starting mailx...");
-
-    if (args.includes("--external")) process.argv.push("--external");
+    } else {
+        // Default: launch native WebView app with IPC
+        const launcherPaths = [
+            path.join(import.meta.dirname, "..", "launcher", "bin", "mailx-app.exe"),
+            path.join(import.meta.dirname, "..", "launcher", "target", "debug", "mailx-app.exe"),
+        ];
 
-    // Import server directly — relative path, in-process
-    await import("../packages/mailx-server/index.js");
+        let launcherPath = launcherPaths.find(p => fs.existsSync(p));
 
-    if (!noBrowser) {
-        for (let i = 0; i < 30; i++) {
-            await new Promise(r => setTimeout(r, 200));
-            if (await isPortInUse(PORT)) break;
+        if (launcherPath) {
+            console.log("Starting mailx...");
+            const { spawn } = await import("node:child_process");
+            const child = spawn(launcherPath, args, { detached: true, stdio: "ignore" });
+            child.unref();
+            console.log("mailx launched");
+        } else {
+            // No native launcher — fall back to server mode + browser
+            console.log("Native launcher not found, falling back to server mode");
+            process.argv.push("--server");
+            await main(); // recurse with --server
         }
-        openBrowser(`http://localhost:${PORT}`);
-        console.log("mailx opened");
     }
 }
 

package/client/app.js

@@ -8,16 +8,19 @@ import { showMessage, getCurrentMessage } from "./components/message-viewer.js";
 import { connectWebSocket, onWsEvent, triggerSync, getAccounts } from "./lib/api-client.js";
 // ── Wire up components ──
 const folderTree = document.getElementById("folder-tree");
+let currentFolderSpecialUse = "";
 initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
+    currentFolderSpecialUse = specialUse;
     loadMessages(accountId, folderId, 1, specialUse);
     document.title = `mailx - ${folderName}`;
 }, () => {
     // Unified inbox handler
+    currentFolderSpecialUse = "inbox";
     loadUnifiedInbox();
     document.title = "mailx - All Inboxes";
 });
-initMessageList((accountId, uid) => {
-    showMessage(accountId, uid);
+initMessageList((accountId, uid, folderId) => {
+    showMessage(accountId, uid, folderId, currentFolderSpecialUse);
     // Enable action buttons when a message is selected
     for (const id of ["btn-reply", "btn-reply-all", "btn-forward", "btn-delete", "btn-flag"]) {
         const btn = document.getElementById(id);
@@ -144,14 +147,27 @@ async function deleteCurrentMessage() {
             if (statusSync?.textContent?.includes("Ctrl+Z"))
                 statusSync.textContent = "";
         }, 30000);
-        // Clear the preview pane
-        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;
-        reloadCurrentFolder();
+        // 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;
+                }
+            }
+        }
     }
     catch (e) {
         console.error(`Delete failed: ${e.message}`);
@@ -220,6 +236,52 @@ searchInput?.addEventListener("keydown", (e) => {
         reloadCurrentFolder();
     }
 });
+// ── Reload message list after drag-move ──
+document.addEventListener("mailx-message-moved", () => reloadCurrentFolder());
+// ── Folder filter ──
+const ftFilterInput = document.getElementById("ft-filter-input");
+if (ftFilterInput) {
+    ftFilterInput.addEventListener("input", () => {
+        const query = ftFilterInput.value.toLowerCase();
+        const tree = document.getElementById("folder-tree");
+        if (!tree)
+            return;
+        if (!query) {
+            // Clear filter — show everything
+            tree.querySelectorAll(".ft-filter-hidden").forEach(el => el.classList.remove("ft-filter-hidden"));
+            return;
+        }
+        // Hide all folders first, then show matches + their parent accounts
+        const folders = tree.querySelectorAll(".ft-folder");
+        const accounts = tree.querySelectorAll(".ft-account");
+        for (const acct of accounts)
+            acct.classList.add("ft-filter-hidden");
+        for (const f of folders)
+            f.classList.add("ft-filter-hidden");
+        for (const f of folders) {
+            const name = f.querySelector(".ft-folder-name")?.textContent?.toLowerCase() || "";
+            if (name.includes(query)) {
+                f.classList.remove("ft-filter-hidden");
+                // Show parent account
+                const acct = f.closest(".ft-account");
+                if (acct)
+                    acct.classList.remove("ft-filter-hidden");
+            }
+        }
+        // Also show unified inbox if it matches
+        const unified = tree.querySelector(".ft-unified");
+        if (unified) {
+            const text = unified.textContent?.toLowerCase() || "";
+            unified.classList.toggle("ft-filter-hidden", !text.includes(query));
+        }
+    });
+    ftFilterInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            ftFilterInput.value = "";
+            ftFilterInput.dispatchEvent(new Event("input"));
+        }
+    });
+}
 // ── Open links from email body in system browser ──
 window.addEventListener("message", (e) => {
     if (e.data?.type === "openLink" && e.data.url) {
@@ -260,16 +322,20 @@ if (splitter) {
 connectWebSocket();
 onWsEvent((event) => {
     const statusSync = document.getElementById("status-sync");
+    const startupStatus = document.getElementById("startup-status");
     switch (event.type) {
         case "connected":
             if (statusSync)
                 statusSync.textContent = "Connected";
-            // Refresh folder counts on reconnect (non-disruptive)
-            refreshFolderTree();
+            if (startupStatus)
+                startupStatus.textContent = "Loading accounts...";
+            // Don't refresh folder tree on connect — it's already loaded by initFolderTree
             break;
         case "syncProgress":
             if (statusSync)
                 statusSync.textContent = `Sync: ${event.phase} ${event.progress}%`;
+            if (startupStatus)
+                startupStatus.textContent = `Syncing ${event.accountId}: ${event.phase}`;
             break;
         case "folderCountsChanged": {
             refreshFolderTree();
@@ -402,7 +468,10 @@ fetch("/api/version").then(r => r.json()).then(d => {
         el.textContent = `mailx s${d.server}/c${d.client}${isApp ? "" : " [browser]"}`;
 }).catch(async () => {
     // Server not running — try to start it if we're in the app
+    const startupStatus = document.getElementById("startup-status");
     if (isApp) {
+        if (startupStatus)
+            startupStatus.textContent = "Starting server...";
         await mailxapi.ensureServer();
         location.reload();
     }
@@ -410,6 +479,8 @@ fetch("/api/version").then(r => r.json()).then(d => {
         const el = document.getElementById("app-version");
         if (el)
             el.textContent = "mailx [server offline]";
+        if (startupStatus)
+            startupStatus.textContent = "Server offline — start with: node packages/mailx-server/index.js";
     }
 });
 // ── Sync pending indicator ──
@@ -427,5 +498,14 @@ setInterval(async () => {
     }
     catch { /* offline */ }
 }, 5000);
-console.log("mailx client initialized");
+console.log("mailx client initialized, location:", location.href);
+// Diagnostic: test API connectivity (helps debug WebView2 blank screen)
+fetch("/api/version").then(r => r.json()).then(d => {
+    console.log("API reachable:", d);
+}).catch(e => {
+    console.error("API unreachable:", e.message);
+    const status = document.getElementById("startup-status");
+    if (status)
+        status.textContent = `Cannot reach server API: ${e.message}`;
+});
 //# sourceMappingURL=app.js.map

package/client/components/folder-tree.js

@@ -123,7 +123,16 @@ function renderNode(node, container, depth) {
     nameSpan.className = "ft-folder-name";
     nameSpan.textContent = node.name;
     folderEl.appendChild(nameSpan);
-    if (node.unreadCount > 0) {
+    const isOutbox = node.specialUse === "outbox" || node.path.toLowerCase() === "outbox";
+    if (isOutbox && node.totalCount > 0) {
+        // Outbox: show total (pending) count with warning style
+        const badge = document.createElement("span");
+        badge.className = "ft-badge ft-badge-outbox";
+        badge.textContent = String(node.totalCount);
+        badge.title = `${node.totalCount} pending`;
+        folderEl.appendChild(badge);
+    }
+    else if (node.unreadCount > 0) {
         const badge = document.createElement("span");
         badge.className = "ft-badge";
         badge.textContent = String(node.unreadCount);
@@ -147,6 +156,58 @@ function renderNode(node, container, depth) {
         selectedFolderId = node.id;
         onFolderSelect(node.accountId, node.id, node.name, node.specialUse || node.path.toLowerCase());
     });
+    // ── Drop target for message drag-and-drop ──
+    if (node.id !== -1) {
+        folderEl.addEventListener("dragover", (e) => {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = e.ctrlKey ? "copy" : "move";
+            folderEl.classList.add("drop-target");
+        });
+        folderEl.addEventListener("dragleave", () => folderEl.classList.remove("drop-target"));
+        folderEl.addEventListener("drop", async (e) => {
+            e.preventDefault();
+            folderEl.classList.remove("drop-target");
+            // Multi-message or single-message drop
+            const multiData = e.dataTransfer.getData("application/x-mailx-messages");
+            const singleData = e.dataTransfer.getData("application/x-mailx-message");
+            const messages = multiData ? JSON.parse(multiData) : singleData ? [JSON.parse(singleData)] : [];
+            // Filter: not already in target folder
+            const toMove = messages.filter(m => m.folderId !== node.id || m.accountId !== node.accountId);
+            if (toMove.length === 0)
+                return;
+            const statusEl = document.getElementById("status-sync");
+            const crossAccount = toMove.some(m => m.accountId !== node.accountId);
+            try {
+                let moved = 0;
+                for (const msg of toMove) {
+                    const body = { targetFolderId: node.id };
+                    if (msg.accountId !== node.accountId)
+                        body.targetAccountId = node.accountId;
+                    const res = await fetch(`/api/message/${msg.accountId}/${msg.uid}/move`, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify(body),
+                    });
+                    if (!res.ok) {
+                        const err = await res.json().catch(() => ({ error: res.statusText }));
+                        throw new Error(err.error);
+                    }
+                    moved++;
+                }
+                if (statusEl)
+                    statusEl.textContent = `Moved ${moved} message${moved > 1 ? "s" : ""} to ${node.name}`;
+                const treeContainer = document.getElementById("folder-tree");
+                if (treeContainer)
+                    loadFolderTree(treeContainer);
+                document.dispatchEvent(new CustomEvent("mailx-message-moved"));
+            }
+            catch (err) {
+                console.error(`Move failed: ${err.message}`);
+                if (statusEl)
+                    statusEl.textContent = `Move failed: ${err.message}`;
+            }
+        });
+    }
     container.appendChild(folderEl);
     // Render children if expanded
     if (hasChildren && isExpanded) {
@@ -161,13 +222,19 @@ export function initFolderTree(container, handler, unifiedHandler) {
     loadFolderTree(container);
 }
 async function loadFolderTree(container) {
-    container.innerHTML = "";
+    // Show loading state while preserving existing tree (if any) on refresh
+    const hadContent = container.children.length > 0 && !container.querySelector(".folder-loading");
+    if (!hadContent) {
+        container.innerHTML = `<div class="folder-loading">Loading accounts...</div>`;
+    }
     try {
         const accounts = await getAccounts();
         if (accounts.length === 0) {
             container.innerHTML = `<div class="folder-loading">No accounts configured.<br>Edit ~/.mailx/settings.jsonc</div>`;
             return;
         }
+        // Clear loading state now that we have data
+        container.innerHTML = "";
         // Unified Inbox (if multiple accounts)
         if (accounts.length > 1) {
             const unifiedEl = document.createElement("div");
@@ -192,7 +259,7 @@ async function loadFolderTree(container) {
             const accountExpanded = expandState[accountKey] !== false; // accounts default expanded
             const header = document.createElement("div");
             header.className = "ft-account-header";
-            header.textContent = `${accountExpanded ? "▾" : "▸"} ${account.name}`;
+            header.textContent = `${accountExpanded ? "▾" : "▸"} ${account.label || account.name}`;
             header.addEventListener("click", () => {
                 expandState[accountKey] = !accountExpanded;
                 saveExpandState();
@@ -272,9 +339,23 @@ async function loadFolderTree(container) {
             if (target)
                 target.click();
         }
+        // Dismiss startup overlay once tree is loaded
+        const overlay = document.getElementById("startup-overlay");
+        if (overlay)
+            overlay.classList.add("hidden");
+        // Remove from DOM after transition
+        setTimeout(() => overlay?.remove(), 400);
     }
     catch (e) {
         container.innerHTML = `<div class="folder-loading">Error loading folders: ${e.message}</div>`;
+        // Dismiss overlay on error too — show the error, not a spinner
+        const overlay = document.getElementById("startup-overlay");
+        if (overlay) {
+            const status = document.getElementById("startup-status");
+            if (status)
+                status.textContent = `Error: ${e.message}`;
+            setTimeout(() => { overlay.classList.add("hidden"); setTimeout(() => overlay.remove(), 400); }, 2000);
+        }
     }
 }
 /** Refresh folder tree (e.g., after sync) */

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);
     }
 }