@bobfrankston/rmfmail 1.0.487 → 1.0.489

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 } from "./components/message-list.js";
-import { showMessage, getCurrentMessage, initViewer, popOutCurrentMessage } from "./components/message-viewer.js";
+import { showMessage, getCurrentMessage, initViewer, popOutCurrentMessage, toggleFullscreenPreview } 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) ──
@@ -1194,44 +1194,91 @@ function openMenuFromRail(dropdownId, anchor) {
     if (dd.parentElement?.classList.contains("tb-menu")) {
         document.body.appendChild(dd);
     }
-    const rect = anchor.getBoundingClientRect();
+    // Reset all positional inline styles each open so a previous configuration
+    // (e.g. wide-tier anchor → narrow-tier modal) doesn't leak through.
+    dd.style.cssText = "";
     dd.style.position = "fixed";
-    // Anchor to the right of the rail icon. Clamp horizontally so the menu
-    // doesn't fall off the right edge on narrow screens.
-    const minWidth = 220;
-    const left = Math.min(rect.right + 6, window.innerWidth - minWidth - 8);
-    dd.style.left = `${Math.max(8, left)}px`;
-    // Reset any prior anchoring so measurement is clean.
-    dd.style.top = "";
-    dd.style.bottom = "";
-    dd.style.maxHeight = "";
-    dd.style.overflowY = "";
     dd.style.zIndex = "10000";
-    dd.hidden = false;
-    // Bottom-rail icons (settings, theme, help) sit near the viewport floor.
-    // Anchoring `top: rect.top` makes the menu spill off the bottom — the
-    // user only sees the first section ("Theme") and assumes the rest of
-    // the menu is missing. Measure after revealing, then anchor whichever
-    // edge has more room. Cap height with overflow so a tall menu still
-    // fits on a small viewport.
-    const ddHeight = dd.getBoundingClientRect().height;
-    const spaceBelow = window.innerHeight - rect.top - 8;
-    const spaceAbove = rect.bottom - 8;
-    if (ddHeight > spaceBelow && spaceAbove > spaceBelow) {
-        dd.style.bottom = `${Math.max(8, window.innerHeight - rect.bottom)}px`;
-        if (ddHeight > spaceAbove) {
-            dd.style.maxHeight = `${spaceAbove}px`;
-            dd.style.overflowY = "auto";
-        }
+    if (window.innerWidth <= 768) {
+        // Narrow tier: render as a centered modal-style overlay. Anchor-based
+        // positioning was unreliable on phones because bottom-rail icons sit
+        // at the viewport floor — the menu either spilled off-screen or
+        // landed where the rail itself overlapped it. A centered card is
+        // always visible, always reachable, and matches the keyboard-shortcut
+        // dialog pattern (click-outside / Esc to close).
+        dd.style.top = "50%";
+        dd.style.left = "50%";
+        dd.style.transform = "translate(-50%, -50%)";
+        dd.style.maxHeight = "85vh";
+        dd.style.maxWidth = "92vw";
+        dd.style.overflowY = "auto";
+        dd.style.boxShadow = "0 8px 32px rgba(0,0,0,0.4)";
+        dd.hidden = false;
+        ensureRailMenuBackdrop();
     }
     else {
-        dd.style.top = `${Math.max(8, rect.top)}px`;
-        if (ddHeight > spaceBelow) {
-            dd.style.maxHeight = `${spaceBelow}px`;
-            dd.style.overflowY = "auto";
+        // Wide tier: anchor to the right of the rail icon, growing whichever
+        // way has more room. (Bottom-rail icons sit near the viewport floor —
+        // anchoring `top: rect.top` makes the menu spill off the bottom.)
+        const rect = anchor.getBoundingClientRect();
+        const minWidth = 220;
+        const left = Math.min(rect.right + 6, window.innerWidth - minWidth - 8);
+        dd.style.left = `${Math.max(8, left)}px`;
+        dd.hidden = false;
+        const ddHeight = dd.getBoundingClientRect().height;
+        const spaceBelow = window.innerHeight - rect.top - 8;
+        const spaceAbove = rect.bottom - 8;
+        if (ddHeight > spaceBelow && spaceAbove > spaceBelow) {
+            dd.style.bottom = `${Math.max(8, window.innerHeight - rect.bottom)}px`;
+            if (ddHeight > spaceAbove) {
+                dd.style.maxHeight = `${spaceAbove}px`;
+                dd.style.overflowY = "auto";
+            }
+        }
+        else {
+            dd.style.top = `${Math.max(8, rect.top)}px`;
+            if (ddHeight > spaceBelow) {
+                dd.style.maxHeight = `${spaceBelow}px`;
+                dd.style.overflowY = "auto";
+            }
         }
     }
 }
+/** Narrow-tier rail menus need a tap-anywhere-to-close backdrop because the
+ *  rail itself stays open under the modal. The document outside-click handler
+ *  hides the dropdown but doesn't visually convey "modal" — the backdrop
+ *  dims the page, makes the modal look like one, and gives a single
+ *  unambiguous click target for dismissal. Auto-removes when the dropdown
+ *  hides (we observe the [hidden] flip via MutationObserver). */
+function ensureRailMenuBackdrop() {
+    if (document.getElementById("rail-menu-backdrop"))
+        return;
+    const bd = document.createElement("div");
+    bd.id = "rail-menu-backdrop";
+    bd.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9999;";
+    bd.addEventListener("click", () => {
+        for (const id of ["settings-dropdown", "view-dropdown", "restart-dropdown"]) {
+            const dd = document.getElementById(id);
+            if (dd && !dd.hidden)
+                dd.hidden = true;
+        }
+        bd.remove();
+    });
+    document.body.appendChild(bd);
+    // Self-clean when no rail menu is open
+    const cleanup = () => {
+        const anyOpen = ["settings-dropdown", "view-dropdown", "restart-dropdown"]
+            .some(id => { const el = document.getElementById(id); return el && !el.hidden; });
+        if (!anyOpen)
+            bd.remove();
+    };
+    const obs = new MutationObserver(cleanup);
+    for (const id of ["settings-dropdown", "view-dropdown", "restart-dropdown"]) {
+        const el = document.getElementById(id);
+        if (el)
+            obs.observe(el, { attributes: true, attributeFilter: ["hidden"] });
+    }
+}
 document.getElementById("rail-settings")?.addEventListener("click", (e) => {
     e.stopPropagation();
     openMenuFromRail("settings-dropdown", e.currentTarget);
@@ -2209,6 +2256,18 @@ document.addEventListener("keydown", (e) => {
         }
     }
 });
+// ── Double-click viewer chrome → fullscreen preview ──
+// The iframe's own contentDocument has its own dblclick handler (in
+// message-viewer.ts). This catches dblclicks on the headers / from row /
+// reply-to row of the viewer that aren't inside the iframe.
+document.getElementById("message-viewer")?.addEventListener("dblclick", (e) => {
+    const target = e.target;
+    // Don't toggle when double-clicking interactive controls (chips, buttons,
+    // links, address widgets) — only on the chrome / empty space.
+    if (target?.closest("a, button, input, select, textarea, [contenteditable]"))
+        return;
+    toggleFullscreenPreview();
+});
 // ── F6 pane cycling ──
 function cyclePaneFocus(reverse) {
     // Major panes in tab order. Skip ones not currently visible (folder