@bobfrankston/mailx 1.0.193 → 1.0.194

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.193",
+  "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.244",
+    "@bobfrankston/msger": "^0.1.245",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",