@bobfrankston/rmfmail 1.2.121 → 1.2.122

package/client/app.js

@@ -1329,6 +1329,7 @@ function showComposeOverlay(title = "Compose") {
     const SVG_ATTRS = `width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"`;
     const TRASH_SVG = `<svg ${SVG_ATTRS}><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`;
     const POPOUT_SVG = `<svg ${SVG_ATTRS}><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>`;
+    const MAXIMIZE_SVG = `<svg ${SVG_ATTRS}><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 9h16"/></svg>`;
     const RESTORE_SVG = `<svg ${SVG_ATTRS}><path d="M21 9v-6h-6"/><path d="M3 15v6h6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>`;
     const makeIconBtn = (svg, titleStr, hoverColor) => {
         const b = document.createElement("button");
@@ -1349,11 +1350,28 @@ function showComposeOverlay(title = "Compose") {
         catch { /* */ }
     });
     btnCluster.appendChild(discardBtn);
-    // Popout = toggle between the floating overlay and a host-window-filling
-    // layout. The compose iframe can't open in a real OS window (msger custom
-    // protocol doesn't propagate to child windows), so "popout" here means
-    // "fill the host window" — second click restores the floating geometry.
-    const popoutBtn = makeIconBtn(POPOUT_SVG, "Maximize", "#000");
+    // True popout — hand the live compose off to its own OS window (native
+    // msger window via the daemon; see compose.ts popoutHandoff). Lives in
+    // the TITLE BAR with the other frame controls because it's about the
+    // frame, not the content (Bob 2026-07-12). The iframe owns the state, so
+    // this just pokes it with an event, same pattern as Discard/Close.
+    // Hidden on small screens where the overlay is full-screen and a separate
+    // OS window makes no sense (and Android has no popout host).
+    if (!isSmall) {
+        const osPopoutBtn = makeIconBtn(POPOUT_SVG, "Open in separate window", "#000");
+        osPopoutBtn.addEventListener("click", () => {
+            try {
+                const win = frame.contentWindow;
+                if (win)
+                    win.dispatchEvent(new Event("compose-popout"));
+            }
+            catch { /* */ }
+        });
+        btnCluster.appendChild(osPopoutBtn);
+    }
+    // Maximize = toggle between the floating overlay and a host-window-filling
+    // layout — second click restores the floating geometry.
+    const popoutBtn = makeIconBtn(MAXIMIZE_SVG, "Maximize", "#000");
     let maximized = false;
     let savedCss = "";
     popoutBtn.addEventListener("click", () => {
@@ -1366,7 +1384,7 @@ function showComposeOverlay(title = "Compose") {
         }
         else {
             wrapper.style.cssText = savedCss;
-            popoutBtn.innerHTML = POPOUT_SVG;
+            popoutBtn.innerHTML = MAXIMIZE_SVG;
             popoutBtn.title = "Maximize";
             maximized = false;
         }