@bobfrankston/rmfmail 1.0.686 → 1.0.690

package/client/app.js

@@ -4,7 +4,7 @@
  */
 import { initFolderTree, refreshFolderTree, updateFolderCounts, setFolderSynced, getFolderSynced, setOutboxTotal } from "./components/folder-tree.js";
 import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, clearSearchMode, getSelectedMessages, markBodiesCached, getCurrentFocused, releaseFocus, removeMessagesAndReconcile, setRowFlagged, scrollFocusedIntoView, refreshPriorityIndex } from "./components/message-list.js";
-import { getCurrentMessage, initViewer, popOutCurrentMessage, toggleFullscreenPreview, showPreviewBodyMenu } from "./components/message-viewer.js";
+import { getCurrentMessage, initViewer, popOutCurrentMessage, toggleFullscreenPreview, showPreviewBodyMenu, wrapHtmlBody } from "./components/message-viewer.js";
 import { connectWebSocket, onWsEvent, triggerSync, syncAccount, reauthenticate, getAccounts, getFolders, deleteMessages, undeleteMessage, restartServer, getSyncPending, getVersion, getSettings, saveSettings, getAutocompleteSettings, saveAutocompleteSettings, repairAccounts, updateFlags, markAsSpamMessages, logClientEvent, sendMessage as apiSendMessage } from "./lib/api-client.js";
 import * as messageState from "./lib/message-state.js";
 // ── New message badge (favicon + title) ──
@@ -4504,6 +4504,32 @@ document.addEventListener("mailx-popout-message", (async (e) => {
         alert(`Couldn't load message: ${err?.message || err}`);
         return;
     }
+    // Drafts pop out into a COMPOSE window, not a read-only viewer popout.
+    // Bob 2026-05-12: "popping out a draft should default to that" (edit
+    // mode). Flag detection: server-side \Draft flag, or the message is
+    // currently sitting in the user's Drafts folder. The read-only popout
+    // surface is missing every action button (Reply, Forward, Edit Draft,
+    // …) so dumping a draft into it is a worst-case dead-end.
+    const isDraft = Array.isArray(msg?.flags) && msg.flags.includes("\\Draft");
+    if (isDraft) {
+        const accts = await getAccounts();
+        const init = {
+            mode: "draft",
+            accountId,
+            to: msg.to || [],
+            cc: msg.cc || [],
+            subject: msg.subject || subject || "",
+            bodyHtml: msg.bodyHtml || "",
+            inReplyTo: msg.inReplyTo || "",
+            references: msg.references || [],
+            accounts: accts.map((a) => ({ id: a.id, name: a.name, email: a.email, signature: a.signature, sig: a.sig })),
+            draftUid: msg.uid,
+            draftFolderId: msg.folderId,
+        };
+        sessionStorage.setItem("composeInit", JSON.stringify(init));
+        showComposeOverlay(msg.subject ? `Edit: ${msg.subject}` : "Edit draft");
+        return;
+    }
     const wrapper = document.createElement("div");
     wrapper.className = "popout-overlay";
     wrapper.style.cssText = "position:fixed;top:5vh;right:5vw;width:min(900px,60vw);height:min(800px,80vh);z-index:1500;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,0.3);display:flex;flex-direction:column;resize:both;overflow:hidden;";
@@ -4531,7 +4557,15 @@ document.addEventListener("mailx-popout-message", (async (e) => {
     wrapper.appendChild(meta);
     wrapper.appendChild(body);
     document.body.appendChild(wrapper);
-    body.srcdoc = msg.bodyHtml || `<pre style="white-space:pre-wrap;font-family:ui-sans-serif">${escapeHtmlBasic(msg.bodyText || "(no body)")}</pre>`;
+    // Use the same wrapHtmlBody styling as the inline preview pane so the
+    // popout's typography matches the preview's typography. Earlier the
+    // popout fed bodyHtml DIRECTLY into srcdoc with no CSS wrapping, so
+    // the browser used its default font (Times serif) while the preview
+    // pane used system-ui sans-serif (Bob 2026-05-12: "double clicking on
+    // the summary shows in a different font than in preview").
+    body.srcdoc = msg.bodyHtml
+        ? wrapHtmlBody(msg.bodyHtml, !!msg.remoteAllowed)
+        : `<!DOCTYPE html><html><head><style>body{font-family:system-ui,sans-serif;font-size:17.5px;line-height:1.5;color:#1a1a2e;padding:1rem;margin:0;}pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:inherit;margin:0;}</style></head><body><pre>${escapeHtmlBasic(msg.bodyText || "(no body)")}</pre></body></html>`;
     // Drag-to-move.
     let dragX = 0, dragY = 0, dragging = false;
     header.addEventListener("mousedown", (de) => {