@bobfrankston/rmfmail 1.1.45 → 1.1.49

package/client/app.js

@@ -413,8 +413,10 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
     currentFolderId = folderId;
     // Drop search state on folder switch — input alone wasn't enough,
     // searchMode stayed true and the next loadMessages was rerouted.
-    if (searchInput)
+    if (searchInput) {
         searchInput.value = "";
+        updateSearchHighlight();
+    }
     clearSearchMode();
     markAsSeen();
     releaseFocus();
@@ -433,8 +435,10 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
     // stayed active, so "All Inboxes" appeared to be ignoring its own
     // contents (Bob 2026-05-09: "I just switched to all inboxes but the
     // search is still showing even though all the entries are there.").
-    if (searchInput)
+    if (searchInput) {
         searchInput.value = "";
+        updateSearchHighlight();
+    }
     clearSearchMode();
     releaseFocus();
     loadUnifiedInbox();
@@ -448,8 +452,10 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
 // setActiveTabView (that would be a no-op update, but keeping them separate
 // keeps "user navigated" distinct from "tab restored").
 function applyTabView(tab) {
-    if (searchInput)
+    if (searchInput) {
         searchInput.value = "";
+        updateSearchHighlight();
+    }
     clearSearchMode();
     releaseFocus();
     const v = tab.view;
@@ -468,8 +474,10 @@ function applyTabView(tab) {
         setNarrowFolderTitle(tab.title);
     }
     else {
-        if (searchInput)
+        if (searchInput) {
             searchInput.value = v.query;
+            updateSearchHighlight();
+        }
         loadSearchResults(v.query, v.scope, v.accountId, v.folderId, v.includeTrash);
         setTitle(`${APP_NAME} - Search`);
         setNarrowFolderTitle(`Search: ${v.query}`);
@@ -1893,6 +1901,83 @@ function recordSearchHistory(query) {
     refreshSearchHistoryDatalist();
 }
 refreshSearchHistoryDatalist();
+// ── Live search-syntax highlighting ──
+// An overlay behind the search input colors recognized qualifiers
+// (from:/to:/subject:/date:/after:/before:/has:/is:/folder:), FTS boolean
+// operators (OR/NOT/AND), quoted phrases, and /regex/ literals — reparsed
+// on every keystroke so the user sees how mailx will interpret the query.
+// An invalid /regex/ only goes red after a brief settle delay, so it
+// doesn't flash red while the pattern is still being typed.
+const searchHl = document.getElementById("search-hl");
+const SEARCH_QUALIFIERS = new Set(["from", "to", "subject", "date", "after", "before", "has", "is", "folder"]);
+const SEARCH_REGEX_SETTLE_MS = 500;
+let searchRegexSettleTimer = null;
+function escapeHl(s) {
+    return s.replace(/[&<>]/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c] || c));
+}
+function renderSearchHighlight(settled) {
+    if (!searchHl || !searchInput)
+        return;
+    const text = searchInput.value;
+    // Tokenize keeping whitespace runs so the overlay lines up glyph-for-
+    // glyph with the input's own text.
+    const tokens = text.match(/\s+|"[^"]*"?|\S+/g) || [];
+    let html = "";
+    for (const tok of tokens) {
+        if (/^\s+$/.test(tok)) {
+            html += escapeHl(tok);
+            continue;
+        }
+        // /regex/ literal — leading slash, body, optional closing slash.
+        if (tok.startsWith("/") && tok.length > 1) {
+            let bad = false;
+            if (tok.endsWith("/")) {
+                try {
+                    new RegExp(tok.slice(1, -1), "i");
+                }
+                catch {
+                    bad = true;
+                }
+            }
+            const cls = (bad && settled) ? "sh-regex-bad" : "sh-regex";
+            html += `<span class="${cls}">${escapeHl(tok)}</span>`;
+            continue;
+        }
+        // qualifier:value — color the keyword: prefix when recognized.
+        const qm = tok.match(/^([a-z]+):(.*)$/i);
+        if (qm && SEARCH_QUALIFIERS.has(qm[1].toLowerCase())) {
+            html += `<span class="sh-key">${escapeHl(qm[1] + ":")}</span>${escapeHl(qm[2])}`;
+            continue;
+        }
+        // FTS boolean operator.
+        if (/^(OR|NOT|AND)$/.test(tok)) {
+            html += `<span class="sh-op">${escapeHl(tok)}</span>`;
+            continue;
+        }
+        // Quoted phrase.
+        if (tok.startsWith("\"")) {
+            html += `<span class="sh-phrase">${escapeHl(tok)}</span>`;
+            continue;
+        }
+        html += escapeHl(tok);
+    }
+    searchHl.innerHTML = html;
+    searchHl.scrollLeft = searchInput.scrollLeft;
+}
+function updateSearchHighlight() {
+    renderSearchHighlight(false);
+    if (searchRegexSettleTimer)
+        clearTimeout(searchRegexSettleTimer);
+    searchRegexSettleTimer = setTimeout(() => renderSearchHighlight(true), SEARCH_REGEX_SETTLE_MS);
+}
+// Keep the overlay scroll-aligned when the input scrolls horizontally,
+// and seed it once at startup.
+searchInput?.addEventListener("scroll", () => {
+    if (searchHl)
+        searchHl.scrollLeft = searchInput.scrollLeft;
+});
+searchInput?.addEventListener("change", () => updateSearchHighlight());
+updateSearchHighlight();
 function doSearch(immediate = false) {
     const query = searchInput.value.trim();
     if (query.length === 0) {
@@ -1936,6 +2021,7 @@ let currentFolderId = 0;
 let reloadDebounceTimer = null;
 searchInput?.addEventListener("input", () => {
     clearTimeout(searchTimeout);
+    updateSearchHighlight();
     if (searchInput.value.trim() === "") {
         // Cleared — reset immediately, no debounce. Must exit search mode
         // first; otherwise reloadCurrentFolder() sees searchMode=true and
@@ -1958,6 +2044,7 @@ searchInput?.addEventListener("keydown", (e) => {
     }
     if (e.key === "Escape") {
         searchInput.value = "";
+        updateSearchHighlight();
         clearSearchMode();
         // Clear any client-side filters
         const body = document.getElementById("ml-body");
@@ -3504,42 +3591,90 @@ optSnippet?.addEventListener("change", () => {
     localStorage.setItem("mailx-snippet", String(optSnippet.checked));
 });
 // ── Search help button (?) ──
-// Opens a small modal showing docs/search.md so the user can see the
-// query syntax for each mode (FTS5 vs IMAP SEARCH vs Gmail API). The
-// markdown is fetched from the service via readConfigHelp("search"),
-// rendered as plain text inside a <pre> — no full markdown engine, just
-// preserves headings + tables visually. The doc itself is the source of
-// truth (lives at app/docs/search.md, deployed to GDrive on every
-// release like the other config help files).
+// Toggles a NON-modal panel with the search-syntax reference so it stays
+// visible while the user types into the search box — build a query
+// against it, then dismiss. The panel is anchored directly below the
+// search bar (no dark backdrop, no centered modal).
+//
+// The help content is HTML compiled into the app (client/help/search-help.ts),
+// NOT a docs/*.md file. Feature help is application content; the docs/*.md
+// files are only a stand-in for proper settings UI and stay out of this path.
+// The module is dynamically imported so its markup isn't in the cold-start
+// bundle.
 document.getElementById("search-help")?.addEventListener("click", async () => {
-    const { readConfigHelp } = await import("./lib/api-client.js");
-    const r = await readConfigHelp("search").catch(() => ({ content: "" }));
-    const md = r?.content || "";
-    const backdrop = document.createElement("div");
-    backdrop.className = "mailx-modal-backdrop";
-    backdrop.style.cssText = "position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;";
+    const btn = document.getElementById("search-help");
+    if (!btn)
+        return;
+    // Toggle: a second click on ? closes the open panel.
+    const existing = document.getElementById("search-help-panel");
+    if (existing) {
+        existing.remove();
+        btn.setAttribute("aria-expanded", "false");
+        return;
+    }
+    const { SEARCH_HELP_HTML } = await import("./help/search-help.js");
+    const searchBar = document.querySelector("search.ml-search");
     const panel = document.createElement("div");
-    panel.style.cssText = "background:var(--color-bg,#fff);color:var(--color-text,#000);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.3);width:min(820px,92vw);max-height:85vh;display:flex;flex-direction:column;";
+    panel.id = "search-help-panel";
+    panel.className = "search-help-panel";
     panel.innerHTML = `
-        <div style="padding:14px 18px;border-bottom:1px solid var(--color-border,#ddd);display:flex;justify-content:space-between;align-items:center">
-            <span style="font-weight:600">Search syntax</span>
-            <button type="button" id="search-help-close" style="background:none;border:0;font-size:18px;cursor:pointer">&times;</button>
+        <div class="search-help-head">
+            <span>Search syntax</span>
+            <button type="button" id="search-help-close" title="Close (Esc)" aria-label="Close">&times;</button>
         </div>
-        <pre style="margin:0;padding:14px 18px;overflow:auto;font:13px/1.5 var(--font-ui);white-space:pre-wrap;word-wrap:break-word">${(md || "Help not available — check that docs/search.md is deployed.")
-        .replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c] || c))}</pre>
+        <div class="search-help-body">${SEARCH_HELP_HTML}</div>
     `;
-    backdrop.appendChild(panel);
-    document.body.appendChild(backdrop);
-    const close = () => backdrop.remove();
-    panel.querySelector("#search-help-close")?.addEventListener("click", close);
-    backdrop.addEventListener("click", e => { if (e.target === backdrop)
-        close(); });
-    document.addEventListener("keydown", function escClose(e) {
+    document.body.appendChild(panel);
+    btn.setAttribute("aria-expanded", "true");
+    // Anchor below the search bar, clamped to the viewport. Re-runs on
+    // resize so the panel tracks the bar if the layout reflows.
+    const position = () => {
+        const anchor = searchBar || btn;
+        const rect = anchor.getBoundingClientRect();
+        const margin = 8;
+        const top = rect.bottom + 2;
+        const width = Math.min(640, Math.max(320, rect.width));
+        let left = rect.left;
+        if (left + width > window.innerWidth - margin)
+            left = window.innerWidth - margin - width;
+        if (left < margin)
+            left = margin;
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
+        panel.style.width = `${width}px`;
+        panel.style.maxHeight = `${Math.max(160, window.innerHeight - top - margin)}px`;
+    };
+    position();
+    const close = () => {
+        panel.remove();
+        btn.setAttribute("aria-expanded", "false");
+        window.removeEventListener("resize", position);
+        document.removeEventListener("keydown", onKey, true);
+        document.removeEventListener("mousedown", onOutside);
+    };
+    // Esc always closes the help panel while it's open — including when
+    // focus is in the search box. Capture phase + stopPropagation so the
+    // search input doesn't also clear/blur on the same keystroke.
+    const onKey = (e) => {
         if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
             close();
-            document.removeEventListener("keydown", escClose);
         }
-    });
+    };
+    // Click outside dismisses — except clicks on the search bar itself
+    // (typing a query must not close the reference) or the ? button
+    // (its own handler toggles).
+    const onOutside = (e) => {
+        const t = e.target;
+        if (panel.contains(t) || btn.contains(t) || searchBar?.contains(t))
+            return;
+        close();
+    };
+    panel.querySelector("#search-help-close")?.addEventListener("click", close);
+    window.addEventListener("resize", position);
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("mousedown", onOutside);
 });
 // ── JSONC config file editor ──
 document.getElementById("btn-edit-jsonc")?.addEventListener("click", async () => {