@bobfrankston/rmfmail 1.1.248 → 1.1.249

package/client/app.js

@@ -1628,6 +1628,161 @@ async function performUndo() {
 document.addEventListener("mailx-moved", (e) => {
     pushUndo({ kind: "move", at: Date.now(), payload: e.detail });
 });
+// ── Right-button drag → Move / Copy menu ───────────────────────────────
+// Browser drag-and-drop is left-button only, so a RIGHT-button drag is a
+// custom mouse-tracked gesture: right-press a message row, drag onto a folder
+// in the tree, release → a menu offers Move (default, bold) or Copy. A plain
+// left drag still moves directly; a plain right-CLICK (no movement) still opens
+// the normal message menu — only a right-press-AND-drag triggers this.
+(() => {
+    const SLOP = 6;
+    let cand = null;
+    let active = false;
+    let ghost = null;
+    let suppressContext = false;
+    // Cursor + ghost + drop-highlight styles (self-contained).
+    const style = document.createElement("style");
+    style.textContent =
+        "body.rmf-rdrag, body.rmf-rdrag * { cursor: grabbing !important; }" +
+            ".rmf-rdrag-ghost { position: fixed; z-index: 100000; pointer-events: none;" +
+            " background: var(--color-accent, #1a6dd4); color: #fff; padding: 2px 9px;" +
+            " border-radius: 4px; font: 12px system-ui; box-shadow: 0 2px 8px rgba(0,0,0,.3); }" +
+            ".ft-folder.rmf-rdrag-over { outline: 2px solid var(--color-accent, #1a6dd4); outline-offset: -2px; border-radius: 4px; }";
+    document.head.appendChild(style);
+    const folderAt = (x, y) => document.elementFromPoint(x, y)?.closest?.(".ft-folder") || null;
+    const clearOver = () => document.querySelectorAll(".ft-folder.rmf-rdrag-over").forEach(el => el.classList.remove("rmf-rdrag-over"));
+    const cleanup = () => {
+        active = false;
+        cand = null;
+        document.body.classList.remove("rmf-rdrag");
+        ghost?.remove();
+        ghost = null;
+        clearOver();
+    };
+    document.addEventListener("mousedown", (e) => {
+        if (e.button !== 2)
+            return;
+        const row = e.target?.closest?.(".ml-row");
+        if (!row)
+            return;
+        const pressed = {
+            accountId: row.dataset.accountId || "",
+            uid: Number(row.dataset.uid),
+            folderId: Number(row.dataset.folderId),
+        };
+        if (!pressed.uid)
+            return;
+        // Drag the current multi-selection if the pressed row is in it;
+        // otherwise just the pressed row.
+        let msgs = getSelectedMessages();
+        if (!msgs.some(m => m.accountId === pressed.accountId && m.uid === pressed.uid))
+            msgs = [pressed];
+        cand = { msgs, x: e.clientX, y: e.clientY };
+        active = false;
+    }, true);
+    document.addEventListener("mousemove", (e) => {
+        if (!cand)
+            return;
+        if (!active) {
+            if (Math.abs(e.clientX - cand.x) < SLOP && Math.abs(e.clientY - cand.y) < SLOP)
+                return;
+            active = true;
+            document.body.classList.add("rmf-rdrag");
+            ghost = document.createElement("div");
+            ghost.className = "rmf-rdrag-ghost";
+            ghost.textContent = cand.msgs.length === 1 ? "1 message" : `${cand.msgs.length} messages`;
+            document.body.appendChild(ghost);
+        }
+        if (ghost) {
+            ghost.style.left = `${e.clientX + 14}px`;
+            ghost.style.top = `${e.clientY + 8}px`;
+        }
+        clearOver();
+        folderAt(e.clientX, e.clientY)?.classList.add("rmf-rdrag-over");
+    }, true);
+    document.addEventListener("mouseup", (e) => {
+        if (!cand)
+            return;
+        const wasActive = active;
+        const msgs = cand.msgs;
+        const folder = wasActive ? folderAt(e.clientX, e.clientY) : null;
+        const mx = e.clientX, my = e.clientY;
+        cleanup();
+        if (!wasActive)
+            return; // a right-click, not a drag
+        suppressContext = true; // eat the contextmenu that fires next
+        if (!folder)
+            return; // released off any folder
+        e.preventDefault();
+        e.stopPropagation();
+        const targetAccount = folder.dataset.accountId || "";
+        const targetFolderId = Number(folder.dataset.folderId);
+        const targetName = folder.querySelector(".ft-folder-name")?.textContent?.trim() || "folder";
+        void showRightDragMenu(mx, my, msgs, targetAccount, targetFolderId, targetName);
+    }, true);
+    // Suppress the folder/message context menu that would otherwise pop on the
+    // right-button release after a drag.
+    document.addEventListener("contextmenu", (e) => {
+        if (suppressContext) {
+            e.preventDefault();
+            e.stopPropagation();
+            suppressContext = false;
+        }
+    }, true);
+    async function showRightDragMenu(x, y, msgs, targetAccount, targetFolderId, targetName) {
+        const { showContextMenu } = await import("./components/context-menu.js");
+        const n = msgs.length;
+        const label = n === 1 ? "message" : `${n} messages`;
+        showContextMenu(x, y, [
+            { label: `Move ${label} here`, emphasized: true, action: () => void runRightDragOp(msgs, targetAccount, targetFolderId, targetName, "move") },
+            { label: `Copy ${label} here`, action: () => void runRightDragOp(msgs, targetAccount, targetFolderId, targetName, "copy") },
+        ]);
+    }
+    async function runRightDragOp(msgs, targetAccount, targetFolderId, targetName, op) {
+        const status = document.getElementById("status-sync");
+        const api = await import("./lib/api-client.js");
+        const byAccount = new Map();
+        for (const m of msgs) {
+            const g = byAccount.get(m.accountId) || { uids: [], folderIds: [] };
+            g.uids.push(m.uid);
+            g.folderIds.push(m.folderId);
+            byAccount.set(m.accountId, g);
+        }
+        if (op === "move") {
+            // Optimistic remove + undo, mirroring the left-drag drop handler.
+            removeMessagesAndReconcile(msgs);
+            document.dispatchEvent(new CustomEvent("mailx-moved", {
+                detail: { messages: msgs.map(m => ({ accountId: m.accountId, uid: m.uid, sourceFolderId: m.folderId })) },
+            }));
+            for (const [src, g] of byAccount) {
+                const targetAcct = src === targetAccount ? undefined : targetAccount;
+                api.moveMessages(src, g.uids, targetFolderId, targetAcct)?.catch?.((err) => {
+                    if (status)
+                        status.textContent = `Move failed: ${err?.message || err}`;
+                });
+            }
+            if (status)
+                status.textContent = `Moved ${msgs.length} to ${targetName} — Ctrl+Z to undo`;
+        }
+        else {
+            let skippedXacct = false;
+            for (const [src, g] of byAccount) {
+                if (src !== targetAccount) {
+                    skippedXacct = true;
+                    continue;
+                } // copy is same-account for now
+                api.copyMessages(src, g.uids, g.folderIds, targetFolderId)?.catch?.((err) => {
+                    if (status)
+                        status.textContent = `Copy failed: ${err?.message || err}`;
+                });
+            }
+            if (status)
+                status.textContent = skippedXacct
+                    ? `Copy across accounts isn't supported yet`
+                    : `Copying ${msgs.length} to ${targetName}…`;
+        }
+    }
+})();
 document.getElementById("btn-delete")?.addEventListener("click", deleteSelection);
 // Same handlers also bound to the top-toolbar icons so delete/spam work
 // regardless of whether a message is open in the viewer. Useful for quick