@bobfrankston/rmfmail 1.0.659 → 1.0.661

package/TODO.md

@@ -236,6 +236,7 @@ Previously shown as showstoppers; moved here because they haven't recurred on re
 
 Small, self-contained items. Pick them up between higher-priority blocks without asking. Bump version per fix.
 
+- **Q134 — Real popout: compose + preview into independent msger windows.** Current popout button (title-bar icon) toggles the floating compose overlay to fill the host window — fast win but not a true OS window. Bob 2026-05-10: "popout should pop out into an independent window. This should also be true for the preview." Requires daemon refactor: single `handle = showService(...)` in `bin/mailx.ts` (~40 `handle.send` call sites) becomes a `windows` registry — `broadcast(msg)` fans events to all open windows; per-window onRequest closures route request acks back to the originator. New jsonrpc actions `openPopout({ mode, init })` (spawns a fresh `showService` with `contentDir: <client>` pointed at `compose/compose.html` or a `preview/preview.html` for viewer popout) and `getPopoutInit({ token })` (init data delivery — see option below). Client wires the popout button to call `api.openPopout(...)` then closes the floating overlay. Preview gets a matching button in `message-viewer.ts`. Init data delivery: URL-hash token + first-load fetch from daemon cache; popout has no state until it asks. Estimate: half-day. Pre-req for any window-pair workflow (browse main + read popped-out message, write compose while triaging inbox).
 - **Q133 — TinyMCE: pre-warm CDN fetch / progressive editor swap.** Bob 2026-05-10: "if fetching tinymce takes time it should be done in background and only activate when it is available." Today, picking TinyMCE in Settings means the FIRST compose-open after that setting blocks for ~1s while the CDN bundle downloads. Better: when user toggles to TinyMCE in Settings, fire a fetch (or a `<link rel="modulepreload">`) so the bundle is in browser cache by the time they hit Compose. Even better: open compose with Quill instantly, swap the editor to TinyMCE in place once the bundle resolves. Touches `compose.ts` editor init + `app.ts` Settings toggle handler.
 - **Q132 — importgen bugs blocking "always use importgen" rule for rmfmail.** Three issues, fix in `y:\dev\utils\importgen`: (1) reads CWD's `package.json`, so running from `client/` reads `client/package.json` (declares only quill); needs a `-p` flag or to walk up. (2) `resolveEntryPoint` blows up on packages with conditional `exports` (e.g. `".": { "import": { "node": "...", "browser": "..." } }`) — `dotExport.import` becomes an object, then `entryPoint.startsWith` throws. (3) Doesn't follow dynamic `await import()` calls if it scans imports rather than package.json deps (still need to verify which path it actually takes). Until fixed, rmfmail's import map is hand-maintained.
 - **Q131 — Show holidays in calendar sidebar.** Thunderbird-style "Show holidays" checkbox. When checked, daemon's `getCalendarEvents` ALSO fetches `en.usa#holiday@group.v.calendar.google.com` (Google's standard US holidays) and merges into results, marking each with `isHoliday: true`. UI renders holiday rows with a distinct style (muted color, no edit/delete actions). Concrete edits: (a) `mailx-service/index.ts` line 1075ish `getCalendarEvents` — also call `gsync.listCalendarEvents(tp, fromMs, toMs, "en.usa#holiday@group.v.calendar.google.com")` when settings.calendar.showHolidays is true, store with `is_holiday=1` flag; (b) `mailx-store/db.ts` `calendar_events` schema — add `is_holiday` column; (c) `client/components/calendar-sidebar.ts` — render rows with `data-holiday="1"` styled distinctly; (d) settings UI radio/checkbox in the calendar sidebar's options popover. ~2 hours.

package/client/app.js

@@ -794,12 +794,68 @@ function showComposeOverlay(title = "Compose") {
         wrapper.style.cssText = "position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:#fff;";
     }
     else {
-        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;";
+        // CSS `resize:both` only gives a single lower-right grip. To allow
+        // dragging any edge or corner, we omit it here and attach eight
+        // manual handles via addComposeResizeHandles() below.
+        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;overflow:hidden;";
     }
-    // Title bar — drag to move, close button
+    // Title bar — drag to move; right-side cluster holds discard, popout, close.
     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 = title;
+    const titleText = document.createElement("span");
+    titleText.textContent = title;
+    titleBar.appendChild(titleText);
+    const btnCluster = document.createElement("div");
+    btnCluster.style.cssText = "display:flex;align-items:center;gap:2px;";
+    titleBar.appendChild(btnCluster);
+    // Outline SVG icons matched to the rest of the toolbar — 16px, 1.6 stroke,
+    // currentColor so hover styles work via plain CSS.
+    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 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");
+        b.title = titleStr;
+        b.style.cssText = "background:none;border:none;cursor:pointer;color:#666;padding:4px 6px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;line-height:0;";
+        b.innerHTML = svg;
+        b.addEventListener("mouseenter", () => b.style.color = hoverColor);
+        b.addEventListener("mouseleave", () => b.style.color = "#666");
+        return b;
+    };
+    const discardBtn = makeIconBtn(TRASH_SVG, "Discard draft", "#c00");
+    discardBtn.addEventListener("click", () => {
+        try {
+            const win = frame.contentWindow;
+            if (win)
+                win.dispatchEvent(new Event("compose-discard"));
+        }
+        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");
+    let maximized = false;
+    let savedCss = "";
+    popoutBtn.addEventListener("click", () => {
+        if (!maximized) {
+            savedCss = wrapper.style.cssText;
+            wrapper.style.cssText = "position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:#fff;overflow:hidden;";
+            popoutBtn.innerHTML = RESTORE_SVG;
+            popoutBtn.title = "Restore";
+            maximized = true;
+        }
+        else {
+            wrapper.style.cssText = savedCss;
+            popoutBtn.innerHTML = POPOUT_SVG;
+            popoutBtn.title = "Maximize";
+            maximized = false;
+        }
+    });
+    btnCluster.appendChild(popoutBtn);
     const closeBtn = document.createElement("button");
     closeBtn.textContent = "✕";
     closeBtn.title = "Save draft and close";
@@ -818,7 +874,7 @@ function showComposeOverlay(title = "Compose") {
         }
         catch { /* */ }
     });
-    titleBar.appendChild(closeBtn);
+    btnCluster.appendChild(closeBtn);
     // Drag to move. While dragging we set pointer-events:none on the iframe
     // so mouse events don't get swallowed by the inner document the moment
     // the cursor crosses into the iframe region. Without that, drag only
@@ -876,13 +932,86 @@ function showComposeOverlay(title = "Compose") {
     });
     wrapper.appendChild(titleBar);
     wrapper.appendChild(frame);
+    if (!isSmall)
+        addComposeResizeHandles(wrapper, frame);
     document.body.appendChild(wrapper);
 }
+/** Attach eight resize grippers (4 edges + 4 corners) to a positioned wrapper.
+ *  CSS `resize:both` only supports a single lower-right corner; replacing it
+ *  with manual handles is the only way to make any side / corner draggable.
+ *  Each handle captures the starting geometry on mousedown, then mousemove
+ *  adjusts width/height/left/top in the directions implied by which edge. */
+function addComposeResizeHandles(wrapper, frame) {
+    const MIN_W = 320;
+    const MIN_H = 200;
+    const dirs = {
+        n: { cursor: "ns-resize", style: "top:-3px;left:12px;right:12px;height:6px;" },
+        s: { cursor: "ns-resize", style: "bottom:-3px;left:12px;right:12px;height:6px;" },
+        e: { cursor: "ew-resize", style: "right:-3px;top:12px;bottom:12px;width:6px;" },
+        w: { cursor: "ew-resize", style: "left:-3px;top:12px;bottom:12px;width:6px;" },
+        ne: { cursor: "nesw-resize", style: "top:-3px;right:-3px;width:14px;height:14px;" },
+        nw: { cursor: "nwse-resize", style: "top:-3px;left:-3px;width:14px;height:14px;" },
+        se: { cursor: "nwse-resize", style: "bottom:-3px;right:-3px;width:14px;height:14px;" },
+        sw: { cursor: "nesw-resize", style: "bottom:-3px;left:-3px;width:14px;height:14px;" },
+    };
+    for (const [dir, conf] of Object.entries(dirs)) {
+        const h = document.createElement("div");
+        h.style.cssText = `position:absolute;z-index:2;background:transparent;cursor:${conf.cursor};${conf.style}`;
+        h.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const rect = wrapper.getBoundingClientRect();
+            const startX = e.clientX, startY = e.clientY;
+            const startL = rect.left, startT = rect.top;
+            const startW = rect.width, startH = rect.height;
+            // Pin to top-left so left/top can be adjusted to grow upward/leftward.
+            wrapper.style.left = `${startL}px`;
+            wrapper.style.top = `${startT}px`;
+            wrapper.style.right = "auto";
+            wrapper.style.bottom = "auto";
+            frame.style.pointerEvents = "none";
+            document.body.style.userSelect = "none";
+            const onMove = (ev) => {
+                const dx = ev.clientX - startX;
+                const dy = ev.clientY - startY;
+                let newW = startW, newH = startH, newL = startL, newT = startT;
+                if (dir.includes("e"))
+                    newW = Math.max(MIN_W, startW + dx);
+                if (dir.includes("w")) {
+                    newW = Math.max(MIN_W, startW - dx);
+                    newL = startL + (startW - newW);
+                }
+                if (dir.includes("s"))
+                    newH = Math.max(MIN_H, startH + dy);
+                if (dir.includes("n")) {
+                    newH = Math.max(MIN_H, startH - dy);
+                    newT = startT + (startH - newH);
+                }
+                wrapper.style.width = `${newW}px`;
+                wrapper.style.height = `${newH}px`;
+                wrapper.style.left = `${newL}px`;
+                wrapper.style.top = `${newT}px`;
+            };
+            const onUp = () => {
+                frame.style.pointerEvents = "";
+                document.body.style.userSelect = "";
+                document.removeEventListener("mousemove", onMove);
+                document.removeEventListener("mouseup", onUp);
+            };
+            document.addEventListener("mousemove", onMove);
+            document.addEventListener("mouseup", onUp);
+        });
+        wrapper.appendChild(h);
+    }
+}
 // Marketing-email layout tables (deeply nested, fixed widths) collapse to
 // 30-40px columns inside a phone-width compose pane and wrap text
 // character-by-character. Strip styles + flatten tables before quoting.
 function sanitizeQuotedBody(msg) {
-    let body = msg.bodyHtml || `<pre>${msg.bodyText || ""}</pre>`;
+    // `white-space:pre-wrap` preserves the original line breaks but lets long
+    // lines wrap to the compose width. `<pre>` would have suppressed wrapping
+    // entirely, producing a horizontal-scrolling quote inside the editor.
+    let body = msg.bodyHtml || `<div style="white-space:pre-wrap;font-family:inherit;margin:0">${msg.bodyText || ""}</div>`;
     body = body.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
     body = body.replace(/\s+style="[^"]*"/gi, "");
     body = body.replace(/\s+class="[^"]*"/gi, "");