@bobfrankston/mailx 1.0.192 → 1.0.194

package/client/.msger-window.json

@@ -1 +1 @@
-{"height":1344,"width":2151,"x":500,"y":36}
+{"height":1344,"width":2151,"x":400,"y":28}

package/client/app.js

@@ -346,33 +346,53 @@ async function openCompose(mode) {
     showComposeOverlay();
 }
 function showComposeOverlay() {
-    // Wrapper div for iframe + close button
     const wrapper = document.createElement("div");
     wrapper.className = "compose-overlay";
-    wrapper.style.cssText = "position:fixed;bottom:0;right:16px;width:min(900px,55vw);height:min(700px,70vh);z-index:1000;border-radius:8px 8px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.3);display:flex;flex-direction:column;";
-    // Close button
+    wrapper.style.cssText = "position:fixed;bottom:0;right:16px;width:min(900px,55vw);height:min(700px,70vh);z-index:1000;border-radius:8px 8px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.3);display:flex;flex-direction:column;resize:both;overflow:hidden;";
+    // Title bar — drag to move, close button
+    const titleBar = document.createElement("div");
+    titleBar.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:#e8ecf0;border-radius:8px 8px 0 0;cursor:move;user-select:none;flex-shrink:0;";
+    titleBar.textContent = "Compose";
     const closeBtn = document.createElement("button");
     closeBtn.textContent = "✕";
-    closeBtn.title = "Close compose";
-    closeBtn.style.cssText = "position:absolute;top:4px;right:8px;z-index:1001;background:none;border:none;font-size:18px;cursor:pointer;color:#666;padding:2px 6px;border-radius:4px;";
+    closeBtn.title = "Save draft and close";
+    closeBtn.style.cssText = "background:none;border:none;font-size:16px;cursor:pointer;color:#666;padding:2px 6px;border-radius:4px;";
     closeBtn.addEventListener("mouseenter", () => closeBtn.style.color = "#c00");
     closeBtn.addEventListener("mouseleave", () => closeBtn.style.color = "#666");
     closeBtn.addEventListener("click", () => {
-        // Trigger draft save in the iframe before closing
         try {
             const win = frame.contentWindow;
-            if (win) {
-                // Dispatch a custom event that compose.ts can listen to
+            if (win)
                 win.dispatchEvent(new Event("compose-save-and-close"));
-            }
         }
-        catch { /* cross-origin */ }
-        // Give the draft save a moment, then close
+        catch { /* */ }
         setTimeout(() => wrapper.remove(), 500);
     });
+    titleBar.appendChild(closeBtn);
+    // Drag to move
+    let dragX = 0, dragY = 0;
+    titleBar.addEventListener("mousedown", (e) => {
+        if (e.target === closeBtn)
+            return;
+        e.preventDefault();
+        dragX = e.clientX - wrapper.offsetLeft;
+        dragY = e.clientY - wrapper.offsetTop;
+        const onMove = (e) => {
+            wrapper.style.left = `${e.clientX - dragX}px`;
+            wrapper.style.top = `${e.clientY - dragY}px`;
+            wrapper.style.bottom = "auto";
+            wrapper.style.right = "auto";
+        };
+        const onUp = () => {
+            document.removeEventListener("mousemove", onMove);
+            document.removeEventListener("mouseup", onUp);
+        };
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+    });
     const frame = document.createElement("iframe");
     frame.src = "compose/compose.html";
-    frame.style.cssText = "flex:1;border:none;border-radius:8px 8px 0 0;background:#fff;width:100%;";
+    frame.style.cssText = "flex:1;border:none;background:#fff;width:100%;";
     // Close when compose calls window.close()
     frame.addEventListener("load", () => {
         try {
@@ -383,7 +403,12 @@ function showComposeOverlay() {
         }
         catch { /* cross-origin safety */ }
     });
-    wrapper.appendChild(closeBtn);
+    // Bring to front on click
+    wrapper.addEventListener("mousedown", () => {
+        document.querySelectorAll(".compose-overlay").forEach(el => el.style.zIndex = "1000");
+        wrapper.style.zIndex = "1001";
+    });
+    wrapper.appendChild(titleBar);
     wrapper.appendChild(frame);
     document.body.appendChild(wrapper);
 }

package/client/components/context-menu.js

@@ -44,8 +44,10 @@ export function showContextMenu(x, y, items) {
         menu.style.top = `${y - rect.height}px`;
     activeMenu = menu;
 }
-// Close on click outside or Escape
+// Close on any interaction outside the menu
 document.addEventListener("click", closeContextMenu);
 document.addEventListener("keydown", (e) => { if (e.key === "Escape")
     closeContextMenu(); });
+document.addEventListener("scroll", closeContextMenu, true);
+document.addEventListener("contextmenu", () => { });
 //# sourceMappingURL=context-menu.js.map

package/client/components/message-viewer.js

@@ -3,6 +3,7 @@
  * Subscribes to message-state: clears when selected becomes null.
  */
 import { getMessage, updateFlags, allowRemoteContent, getAttachment } from "../lib/api-client.js";
+import { showContextMenu } from "./context-menu.js";
 import * as state from "../lib/message-state.js";
 /** Currently displayed message (for reply/forward) */
 let currentMessage = null;
@@ -58,7 +59,7 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
     const bodyEl = document.getElementById("mv-body");
     const attEl = document.getElementById("mv-attachments");
     bodyEl.innerHTML = `<div class="mv-empty">Fetching message body...</div>`;
-    // Don't hide the header — keep previous header visible until new one loads
+    headerEl.hidden = true;
     attEl.hidden = true;
     try {
         const msg = await getMessage(accountId, uid, false, folderId);
@@ -74,12 +75,34 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
         }
         // Header
         headerEl.hidden = false;
-        headerEl.querySelector(".mv-from").textContent = formatAddr(msg.from);
-        headerEl.querySelector(".mv-to").textContent = `To: ${msg.to.map(formatAddr).join(", ")}`;
+        const fromEl = headerEl.querySelector(".mv-from");
+        const toEl = headerEl.querySelector(".mv-to");
+        fromEl.textContent = formatAddr(msg.from);
+        toEl.textContent = `To: ${msg.to.map(formatAddr).join(", ")}`;
         if (msg.cc?.length) {
-            headerEl.querySelector(".mv-to").textContent += `  Cc: ${msg.cc.map(formatAddr).join(", ")}`;
+            toEl.textContent += `  Cc: ${msg.cc.map(formatAddr).join(", ")}`;
         }
         headerEl.querySelector(".mv-subject").textContent = msg.subject;
+        // Right-click on email addresses in header
+        const allAddresses = [msg.from, ...(msg.to || []), ...(msg.cc || [])].filter((a) => a?.address);
+        for (const el of [fromEl, toEl]) {
+            el.addEventListener("contextmenu", (e) => {
+                e.preventDefault();
+                const me = e;
+                const items = [];
+                for (const addr of (el === fromEl ? [msg.from] : [...(msg.to || []), ...(msg.cc || [])])) {
+                    if (!addr?.address)
+                        continue;
+                    const display = addr.name ? `${addr.name} <${addr.address}>` : addr.address;
+                    items.push({ label: `Copy: ${display}`, action: () => navigator.clipboard.writeText(addr.address) });
+                }
+                items.push({ label: "", action: () => { }, separator: true });
+                items.push({ label: "Reply", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "reply" } })) });
+                items.push({ label: "Reply All", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "replyAll" } })) });
+                items.push({ label: "Forward", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "forward" } })) });
+                showContextMenu(me.clientX, me.clientY, items);
+            });
+        }
         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 });
         // Unsubscribe button (upper right of header)
         const unsubBtn = document.getElementById("mv-unsubscribe");

package/client/styles/layout.css

@@ -155,7 +155,7 @@ body {
     }
 }
 
-/* Hide hamburger and back on wide screens */
-@media (min-width: 769px) {
+/* Hide hamburger and back on wide screens (folder panel always visible) */
+@media (min-width: 1101px) {
     #btn-menu, #btn-back { display: none !important; }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.192",
+  "version": "1.0.194",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -24,7 +24,7 @@
     "@bobfrankston/iflow-node": "^0.1.2",
     "@bobfrankston/miscinfo": "^1.0.8",
     "@bobfrankston/oauthsupport": "^1.0.21",
-    "@bobfrankston/msger": "^0.1.243",
+    "@bobfrankston/msger": "^0.1.245",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",