@bobfrankston/rmfmail 1.0.484 → 1.0.486

package/client/app.js

@@ -3,7 +3,7 @@
  * Wires together all UI components and WebSocket connection.
  */
 import { initFolderTree, refreshFolderTree, updateFolderCounts, setFolderSynced, getFolderSynced, setOutboxTotal } from "./components/folder-tree.js";
-import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, clearSearchMode, getSelectedMessages, markBodiesCached, getCurrentFocused, releaseFocus, removeMessagesAndReconcile } from "./components/message-list.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 { 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";
@@ -479,19 +479,10 @@ document.addEventListener("pointerdown", (e) => {
     if (window.innerWidth <= 768)
         rail.classList.remove("open");
 }, true);
-// Tapping any rail button dismisses the drawer afterward — the user picked
-// a destination, the drawer's job is done. Skipping the menus that anchor
-// off the rail (settings/view) so the menu has time to open before the
-// rail collapses out from under it.
-document.querySelectorAll(".icon-rail .rail-btn").forEach(btn => {
-    btn.addEventListener("click", () => {
-        if (window.innerWidth > 768)
-            return;
-        if (btn.id === "rail-settings" || btn.id === "rail-view")
-            return;
-        document.querySelector(".icon-rail")?.classList.remove("open");
-    });
-});
+// The rail stays open until the user clicks outside it — handled by the
+// document-level outside-click handler above. No per-button close: chaining
+// rail actions (toggle theme, then check About, then change a setting)
+// without having to re-open the rail each time was the explicit ask.
 // ── Toolbar actions ──
 document.getElementById("btn-sync")?.addEventListener("click", async () => {
     const btn = document.getElementById("btn-sync");
@@ -1000,14 +991,9 @@ document.getElementById("btn-flag")?.addEventListener("click", async () => {
         await updateFlags(sel.accountId, sel.uid, newFlags);
         sel.flags = newFlags;
         messageState.updateMessageFlags(sel.accountId, sel.uid, newFlags);
-        // Update the message-list row's flag indicator
-        const row = document.querySelector(`.ml-row[data-uid="${sel.uid}"][data-account-id="${sel.accountId}"]`);
-        if (row) {
-            row.classList.toggle("flagged", newFlags.includes("\\Flagged"));
-            const flagEl = row.querySelector(".ml-flag");
-            if (flagEl)
-                flagEl.textContent = newFlags.includes("\\Flagged") ? "\u2605" : "\u2606";
-        }
+        // Row owns its own DOM \u2014 go through the row object so class + star
+        // update atomically and the list/preview stay in sync.
+        setRowFlagged(sel.accountId, sel.uid, newFlags.includes("\\Flagged"));
     }
     catch (e) {
         console.error(`Flag toggle failed: ${e.message}`);
@@ -2160,6 +2146,36 @@ document.addEventListener("keydown", (e) => {
                 row.classList.toggle("unread", !newFlags.includes("\\Seen"));
         }).catch(() => { });
     }
+    // Z = locate the focused row in the list (scroll-to-selected). After
+    // scrolling the list out of sync with the preview, this snaps back.
+    if (e.key.toLowerCase() === "z" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const active = document.activeElement;
+        if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.tagName === "SELECT"))
+            return;
+        const editable = active?.isContentEditable;
+        if (editable)
+            return;
+        e.preventDefault();
+        scrollFocusedIntoView();
+    }
+    // F6 / Shift+F6 — standard pane-switch shortcut. Cycles focus among
+    // folder tree → message list → message viewer.
+    if (e.key === "F6") {
+        e.preventDefault();
+        cyclePaneFocus(e.shiftKey);
+    }
+    // ? = show keyboard shortcuts help. Skip when typing in inputs so a
+    // literal "?" in search/compose doesn't pop the dialog.
+    if (e.key === "?" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const active = document.activeElement;
+        if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.tagName === "SELECT"))
+            return;
+        const editable = active?.isContentEditable;
+        if (editable)
+            return;
+        e.preventDefault();
+        openShortcutsDialog();
+    }
     // Arrow keys + Home/End/PgUp/PgDn — navigate message list (Q58).
     if (["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"].includes(e.key)) {
         const active = document.activeElement;
@@ -2193,6 +2209,96 @@ document.addEventListener("keydown", (e) => {
         }
     }
 });
+// ── F6 pane cycling ──
+function cyclePaneFocus(reverse) {
+    // Major panes in tab order. Skip ones not currently visible (folder
+    // tree is hidden in narrow tier when the rail/drawer is closed; message
+    // viewer is only meaningful with a message open).
+    const panes = [
+        { id: "folder-tree", el: document.getElementById("folder-tree") },
+        { id: "ml-body", el: document.getElementById("ml-body") },
+        { id: "message-viewer", el: document.getElementById("message-viewer") },
+    ].filter(p => {
+        if (!p.el)
+            return false;
+        const r = p.el.getBoundingClientRect();
+        return r.width > 0 && r.height > 0;
+    });
+    if (panes.length === 0)
+        return;
+    const active = document.activeElement;
+    const currentIdx = panes.findIndex(p => p.el && (p.el === active || p.el.contains(active)));
+    const step = reverse ? -1 : 1;
+    const nextIdx = currentIdx < 0 ? 0 : (currentIdx + step + panes.length) % panes.length;
+    const next = panes[nextIdx];
+    if (!next.el)
+        return;
+    // Make the pane focusable if it isn't already; tabindex=-1 lets us
+    // focus it programmatically without inserting it into Tab order.
+    if (!next.el.hasAttribute("tabindex"))
+        next.el.setAttribute("tabindex", "-1");
+    next.el.focus();
+    // Visual hint — brief outline so the user can see which pane took focus.
+    next.el.style.outline = "2px solid var(--color-accent, #3b82f6)";
+    next.el.style.outlineOffset = "-2px";
+    setTimeout(() => { next.el.style.outline = ""; next.el.style.outlineOffset = ""; }, 600);
+}
+// ── Keyboard shortcuts help dialog ──
+function openShortcutsDialog() {
+    if (document.querySelector(".mailx-shortcuts-modal"))
+        return;
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop mailx-shortcuts-modal";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal";
+    panel.style.maxWidth = "560px";
+    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-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>
+        </div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const close = () => { backdrop.remove(); document.removeEventListener("keydown", onKey, true); };
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector('[data-action="close"]').addEventListener("click", close);
+    panel.querySelector("#sc-x").addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+}
 // ── View menu ──
 const viewBtn = document.getElementById("btn-view");
 const viewDropdown = document.getElementById("view-dropdown");
@@ -2817,6 +2923,13 @@ function renderMarkdown(md) {
     closeList();
     return out.join("\n");
 }
+// ── Keyboard shortcuts (Settings menu item) ──
+document.getElementById("btn-shortcuts")?.addEventListener("click", () => {
+    const settingsDropdown = document.getElementById("settings-dropdown");
+    if (settingsDropdown)
+        settingsDropdown.hidden = true;
+    openShortcutsDialog();
+});
 // ── About dialog ──
 document.getElementById("btn-about")?.addEventListener("click", () => {
     const settingsDropdown = document.getElementById("settings-dropdown");