@bobfrankston/rmfmail 1.2.121 → 1.2.122

package/client/app.ts

@@ -1266,6 +1266,7 @@ function showComposeOverlay(title = "Compose"): HTMLIFrameElement {
     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: string, titleStr: string, hoverColor: string): HTMLButtonElement => {
         const b = document.createElement("button");
@@ -1286,11 +1287,27 @@ function showComposeOverlay(title = "Compose"): HTMLIFrameElement {
     });
     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", () => {
@@ -1302,7 +1319,7 @@ function showComposeOverlay(title = "Compose"): HTMLIFrameElement {
             maximized = true;
         } else {
             wrapper.style.cssText = savedCss;
-            popoutBtn.innerHTML = POPOUT_SVG;
+            popoutBtn.innerHTML = MAXIMIZE_SVG;
             popoutBtn.title = "Maximize";
             maximized = false;
         }

package/client/compose/compose.bundle.js

@@ -5158,9 +5158,10 @@ document.getElementById("btn-discard")?.addEventListener("click", async () => {
   }
   closeCompose();
 });
-var composePopoutBtn = document.getElementById("btn-compose-popout");
-if (composePopoutBtn && popoutInitId) composePopoutBtn.style.display = "none";
-composePopoutBtn?.addEventListener("click", async () => {
+var popoutHandoffInFlight = false;
+async function popoutHandoff() {
+  if (popoutInitId || popoutHandoffInFlight) return;
+  popoutHandoffInFlight = true;
   if (!draftId) draftId = `mailx-draft-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
   const init = {
     // "draft" mode so applyInit does NOT re-append the signature — the
@@ -5180,7 +5181,6 @@ composePopoutBtn?.addEventListener("click", async () => {
     draftUid: draftUid ?? void 0,
     draftId: draftId ?? void 0
   };
-  composePopoutBtn.disabled = true;
   try {
     const r = await popoutCompose(init);
     if (r?.ok) {
@@ -5193,14 +5193,17 @@ composePopoutBtn?.addEventListener("click", async () => {
         draftTimer = null;
       }
       closeCompose();
-    } else {
-      showDraftStatus(`Popout failed: ${r?.reason || "unknown"}`, true);
-      composePopoutBtn.disabled = false;
+      return;
     }
+    showDraftStatus(`Popout failed: ${r?.reason || "unknown"}`, true);
   } catch (e) {
     showDraftStatus(`Popout failed: ${e?.message || e}`, true);
-    composePopoutBtn.disabled = false;
+  } finally {
+    popoutHandoffInFlight = false;
   }
+}
+window.addEventListener("compose-popout", () => {
+  void popoutHandoff();
 });
 var ccRow = document.getElementById("compose-cc-row");
 var bccRow = document.getElementById("compose-bcc-row");