@bobfrankston/rmfmail 1.0.502 → 1.0.503

package/client/app.js

@@ -1276,14 +1276,10 @@ document.getElementById("rail-view")?.addEventListener("click", (e) => {
 document.getElementById("rail-help")?.addEventListener("click", () => {
     document.getElementById("btn-about")?.click();
 });
-document.getElementById("rail-theme")?.addEventListener("click", () => {
-    // Rail theme icon cycles system → dark → light → system. Settings menu
-    // exposes the same three as radio buttons for direct selection.
-    const root = document.documentElement;
-    const cur = root.getAttribute("data-theme") || "system";
-    const next = cur === "system" ? "dark" : cur === "dark" ? "light" : "system";
-    applyTheme(next);
-});
+// rail-theme button removed 2026-05-04 — theme picker lives in the Settings
+// dropdown (collapsed into a single "Theme: <current> ▸" item with a popout).
+// Removing the dedicated rail icon was the user's call; keeping the radios in
+// Settings is enough since the picker is rare-use.
 function applyTheme(theme) {
     document.documentElement.setAttribute("data-theme", theme);
     try {
@@ -1637,7 +1633,7 @@ window.addEventListener("message", (e) => {
         }
         const x = (iframeRect?.left || 0) + (e.data.x || 0);
         const y = (iframeRect?.top || 0) + (e.data.y || 0);
-        showPreviewBodyMenu(x, y, String(e.data.selectedText || ""), e.source);
+        showPreviewBodyMenu(x, y, String(e.data.selectedText || ""), e.source, String(e.data.linkUrl || "") || undefined, String(e.data.linkText || "") || undefined);
         return;
     }
     if (e.data?.type === "linkContextMenu") {
@@ -2384,33 +2380,72 @@ function openShortcutsDialog() {
     backdrop.className = "mailx-modal-backdrop mailx-shortcuts-modal";
     const panel = document.createElement("div");
     panel.className = "mailx-modal";
-    panel.style.maxWidth = "560px";
+    panel.style.maxWidth = "640px";
+    const tabs = [
+        {
+            id: "app", label: "Application",
+            rows: [
+                ["Compose", "Ctrl+N"],
+                ["Reply", "Ctrl+R"],
+                ["Reply all", "Ctrl+Shift+R"],
+                ["Forward", "Ctrl+F"],
+                ["Sync", "F5"],
+                ["Delete selected", "Del or Ctrl+D"],
+                ["Undo last delete/move", "Ctrl+Z"],
+                ["Toggle read/unread", "R"],
+                ["Toggle flag (★)", "(⚑ button in viewer)"],
+                ["Select all visible", "Ctrl+A"],
+                ["Navigate list", "↑ ↓ Home End PgUp PgDn"],
+                ["Scroll-to-focused row", "Z"],
+                ["Switch pane", "F6 / Shift+F6"],
+                ["Find / search", "(focus the search box)"],
+                ["Show this help", "?"],
+                ["Close dialog", "Esc"],
+            ],
+        },
+        {
+            id: "compose", label: "Compose",
+            rows: [
+                ["Send", "Ctrl+Enter"],
+                ["Insert / edit link", "Ctrl+K"],
+                ["Remove link", "Ctrl+Shift+K"],
+                ["Bold / italic / underline", "Ctrl+B / Ctrl+I / Ctrl+U"],
+                ["Strikethrough", "Ctrl+Shift+X"],
+                ["Ordered list", "Ctrl+Shift+7"],
+                ["Bulleted list", "Ctrl+Shift+8"],
+                ["Indent / outdent", "Ctrl+] / Ctrl+["],
+                ["Clear formatting", "Ctrl+\\"],
+                ["Color text", "Ctrl+Shift+C"],
+                ["New line in To/Cc/Bcc", "(Enter inserts a comma)"],
+                ["Editor reference", "(? button on compose toolbar — shows Quill/tiptap differences)"],
+            ],
+        },
+        {
+            id: "viewer", label: "Viewer",
+            rows: [
+                ["Toggle preview fullscreen", "double-click on body"],
+                ["Exit fullscreen", "Esc / ✕ button / double-click"],
+                ["Zoom in / out / reset", "Ctrl+= / Ctrl+- / Ctrl+0"],
+                ["Right-click in body", "Copy / Search / Translate / Zoom"],
+                ["Right-click a link", "Open / Save / Copy URL / Copy text"],
+            ],
+        },
+    ];
     panel.innerHTML = `
         <div class="mailx-modal-title">
             <span class="mailx-modal-title-text">Keyboard shortcuts</span>
             <button type="button" class="mailx-modal-close" id="sc-x" title="Close (Esc)" aria-label="Close">&times;</button>
         </div>
+        <div class="mailx-shortcuts-tabs" role="tablist" style="display:flex;gap:0;border-bottom:1px solid var(--color-border, #ddd);margin:0 -16px 12px -16px;padding:0 16px;">
+            ${tabs.map((t, i) => `<button type="button" role="tab" class="mailx-shortcuts-tab" data-tab="${t.id}" aria-selected="${i === 0}" style="background:none;border:0;padding:8px 14px;cursor:pointer;font:inherit;border-bottom:2px solid ${i === 0 ? "var(--color-accent, #3b82f6)" : "transparent"};color:${i === 0 ? "var(--color-text)" : "var(--color-text-muted, #888)"};">${t.label}</button>`).join("")}
+        </div>
         <div class="mailx-about">
-            <dl class="mailx-about-dl">
-              <dt>Compose</dt><dd>Ctrl+N</dd>
-              <dt>Reply</dt><dd>Ctrl+R</dd>
-              <dt>Reply all</dt><dd>Ctrl+Shift+R</dd>
-              <dt>Forward</dt><dd>Ctrl+F</dd>
-              <dt>Send (in compose)</dt><dd>Ctrl+Enter</dd>
-              <dt>Sync</dt><dd>F5</dd>
-              <dt>Delete selected</dt><dd>Del or Ctrl+D</dd>
-              <dt>Undo last delete/move</dt><dd>Ctrl+Z</dd>
-              <dt>Toggle read/unread</dt><dd>R</dd>
-              <dt>Toggle flag</dt><dd>(Flag button in viewer)</dd>
-              <dt>Select all visible</dt><dd>Ctrl+A</dd>
-              <dt>Navigate list</dt><dd>↑ ↓ Home End PgUp PgDn</dd>
-              <dt>Scroll-to-focused row</dt><dd>Z</dd>
-              <dt>Switch pane</dt><dd>F6 / Shift+F6</dd>
-              <dt>Find / search</dt><dd>(focus the search box)</dd>
-              <dt>Close dialog</dt><dd>Esc</dd>
-              <dt>Show this help</dt><dd>?</dd>
-            </dl>
-            <div class="mailx-about-foot">On Android most shortcuts need a Bluetooth/USB keyboard. Touch equivalents: tap a row to view, tap the rail icons for navigation/settings/theme/help, long-press a row for the context menu.</div>
+            ${tabs.map((t, i) => `<div class="mailx-shortcuts-pane" data-pane="${t.id}" ${i === 0 ? "" : "hidden"}>
+                <dl class="mailx-about-dl">
+                    ${t.rows.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join("")}
+                </dl>
+            </div>`).join("")}
+            <div class="mailx-about-foot">On Android most shortcuts need a Bluetooth/USB keyboard. Touch equivalents: tap a row to view, tap the rail icons for navigation, long-press for context menu, double-tap the message body for fullscreen.</div>
         </div>
         <div class="mailx-modal-buttons">
             <span class="mailx-modal-spacer"></span>
@@ -2418,6 +2453,21 @@ function openShortcutsDialog() {
         </div>`;
     backdrop.appendChild(panel);
     document.body.appendChild(backdrop);
+    // Wire tab clicks
+    panel.querySelectorAll(".mailx-shortcuts-tab").forEach(tab => {
+        tab.addEventListener("click", () => {
+            const which = tab.dataset.tab;
+            panel.querySelectorAll(".mailx-shortcuts-tab").forEach(t => {
+                const sel = t.dataset.tab === which;
+                t.setAttribute("aria-selected", String(sel));
+                t.style.borderBottom = `2px solid ${sel ? "var(--color-accent, #3b82f6)" : "transparent"}`;
+                t.style.color = sel ? "var(--color-text)" : "var(--color-text-muted, #888)";
+            });
+            panel.querySelectorAll(".mailx-shortcuts-pane").forEach(p => {
+                p.hidden = p.dataset.pane !== which;
+            });
+        });
+    });
     const close = () => { backdrop.remove(); document.removeEventListener("keydown", onKey, true); };
     const onKey = (e) => {
         if (e.key === "Escape") {
@@ -2427,8 +2477,8 @@ function openShortcutsDialog() {
         }
     };
     document.addEventListener("keydown", onKey, true);
-    panel.querySelector('[data-action="close"]').addEventListener("click", close);
-    panel.querySelector("#sc-x").addEventListener("click", close);
+    const closeBtn = panel.querySelector("#sc-x");
+    closeBtn?.addEventListener("click", close);
     backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
         close(); });
 }