@bobfrankston/rmfmail 1.1.45 → 1.1.49

package/client/app.bundle.js

@@ -42,6 +42,7 @@ __export(api_client_exports, {
   getAttachment: () => getAttachment,
   getAutocompleteSettings: () => getAutocompleteSettings,
   getCalendarEvents: () => getCalendarEvents,
+  getCalendars: () => getCalendars,
   getDeviceAccounts: () => getDeviceAccounts,
   getDiagnostics: () => getDiagnostics,
   getFolders: () => getFolders,
@@ -221,6 +222,9 @@ function getPrimaryAccount(feature) {
 function getCalendarEvents(fromMs, toMs) {
   return ipc().getCalendarEvents?.(fromMs, toMs) ?? Promise.resolve([]);
 }
+function getCalendars() {
+  return ipc().getCalendars?.() ?? Promise.resolve([]);
+}
 function createCalendarEvent(ev) {
   return ipc().createCalendarEvent?.(ev);
 }
@@ -3793,6 +3797,106 @@ __export(calendar_sidebar_exports, {
   isCalendarSidebarOn: () => isCalendarSidebarOn,
   showCalendarSidebar: () => showCalendarSidebar
 });
+function calendarKind(id, primary) {
+  if (primary)
+    return "personal";
+  const c = (id || "").toLowerCase();
+  if (c.includes("addressbook#contacts"))
+    return "birthday";
+  if (c.includes("#holiday@") || c.includes("holiday@group")) {
+    if (c.includes("usa"))
+      return "usHoliday";
+    if (c.includes("judaism") || c.includes("jewish"))
+      return "jewishHoliday";
+    return "otherHoliday";
+  }
+  return "other";
+}
+function calIconHtml(info) {
+  const kind = calendarKind(info.id, info.primary);
+  const t = escapeHtml4(info.name);
+  if (kind === "personal")
+    return `<span class="cal-ico cal-ico-dot" title="${t}"></span>`;
+  if (kind === "usHoliday")
+    return `<span class="cal-ico cal-ico-emoji" title="${t}">\u{1F1FA}\u{1F1F8}</span>`;
+  if (kind === "jewishHoliday")
+    return `<span class="cal-ico cal-ico-emoji" title="${t}">\u2721\uFE0F</span>`;
+  if (kind === "birthday")
+    return `<span class="cal-ico cal-ico-emoji" title="${t}">\u{1F382}</span>`;
+  if (kind === "otherHoliday")
+    return `<span class="cal-ico cal-ico-emoji" title="${t}">\u2726</span>`;
+  const letter = escapeHtml4((info.name.trim()[0] || "?").toUpperCase());
+  const color = info.color || "#7a7a7a";
+  return `<span class="cal-ico cal-ico-mono" style="background:${escapeHtml4(color)}" title="${t}">${letter}</span>`;
+}
+function calInfoFor(calendarId) {
+  const id = calendarId || "primary";
+  const found = calById.get(id);
+  if (found)
+    return found;
+  return { id, name: id.split("@")[0] || id, color: "", primary: id === "primary" };
+}
+function isCalHidden(calendarId) {
+  return hiddenCalendars.has(calInfoFor(calendarId).id);
+}
+async function loadHiddenCalendars() {
+  try {
+    const s = await getSettings();
+    const arr = s?.calendar?.hiddenCalendars;
+    hiddenCalendars = new Set(Array.isArray(arr) ? arr : []);
+  } catch {
+    hiddenCalendars = /* @__PURE__ */ new Set();
+  }
+}
+async function saveHiddenCalendars() {
+  try {
+    const s = await getSettings();
+    s.calendar = { ...s.calendar || {}, hiddenCalendars: [...hiddenCalendars] };
+    await saveSettings(s);
+  } catch (e) {
+    console.error("[cal] save hiddenCalendars failed:", e);
+  }
+}
+async function renderCalendarList() {
+  const host = document.getElementById("cal-side-calendars");
+  let list = [];
+  try {
+    list = await getCalendars();
+  } catch {
+  }
+  calendarList = list;
+  calById.clear();
+  for (const c of list) {
+    calById.set(c.id, c);
+    if (c.primary)
+      calById.set("primary", c);
+  }
+  if (host) {
+    if (list.length === 0) {
+      host.innerHTML = "";
+    } else {
+      const sorted = [...list].sort((a, b) => (a.primary ? 0 : 1) - (b.primary ? 0 : 1) || a.name.localeCompare(b.name));
+      host.innerHTML = sorted.map((c) => `<label class="cal-side-cal-row" title="${escapeHtml4(c.name)}">
+                <input type="checkbox" class="cal-side-cal-check" data-cal-id="${escapeHtml4(c.id)}" ${hiddenCalendars.has(c.id) ? "" : "checked"}>
+                ${calIconHtml(c)}
+                <span class="cal-side-cal-name">${escapeHtml4(c.name)}</span>
+            </label>`).join("");
+      host.querySelectorAll(".cal-side-cal-check").forEach((cb) => {
+        cb.addEventListener("change", async () => {
+          const id = cb.dataset.calId || "";
+          if (cb.checked)
+            hiddenCalendars.delete(id);
+          else
+            hiddenCalendars.add(id);
+          await saveHiddenCalendars();
+          renderEvents(lastEvents);
+        });
+      });
+    }
+  }
+  if (lastEvents.length > 0)
+    renderEvents(lastEvents);
+}
 function getSelectedTaskUuids() {
   return [...selectedTaskUuids];
 }
@@ -3869,11 +3973,26 @@ function renderHead() {
   const d = new Date(viewYear, viewMonth, viewDay);
   dateEl.innerHTML = `<strong>${d.getDate()}</strong> ${d.toLocaleDateString(void 0, { weekday: "short" })} <span class="cal-side-date-month">${d.toLocaleDateString(void 0, { month: "short", year: "numeric" })}</span>`;
 }
+function overdueTaskRowHtml(t) {
+  let dueLabel = "";
+  if (t.dueMs) {
+    const d = new Date(t.dueMs);
+    const sameYear = d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
+    dueLabel = sameYear ? `${d.getMonth() + 1}/${d.getDate()}` : d.toISOString().slice(0, 10);
+  }
+  return `<div class="cal-side-task cal-side-task-overdue" data-uuid="${escapeHtml4(t.uuid)}">
+        <input type="checkbox" class="cal-side-overdue-check" title="Mark done">
+        <span class="cal-side-task-title">${escapeHtml4(t.title)}</span>
+        <span class="cal-side-task-due overdue">${escapeHtml4(dueLabel)}</span>
+    </div>`;
+}
 function renderEvents(events) {
   const body = document.getElementById("cal-side-body");
   if (!body)
     return;
-  if (events.length === 0) {
+  events = events.filter((e) => !isCalHidden(e.calendarId));
+  const overdue = lastOverdueTasks;
+  if (events.length === 0 && overdue.length === 0) {
     body.innerHTML = `<div class="cal-side-empty">No upcoming events. Click + New event to add one.</div>`;
     return;
   }
@@ -3912,12 +4031,17 @@ function renderEvents(events) {
     dailyHeads.push(instances.reduce((a, b) => a.start < b.start ? a : b));
   }
   let html = "";
+  if (overdue.length > 0) {
+    html += `<div class="cal-side-day cal-side-day-overdue">Overdue tasks</div>`;
+    for (const t of overdue)
+      html += overdueTaskRowHtml(t);
+  }
   if (dailyHeads.length > 0) {
     html += `<div class="cal-side-day cal-side-day-daily">Daily</div>`;
     for (const e of dailyHeads) {
       const link = e.htmlLink || "";
       html += `<div class="cal-side-event" data-id="${e.id}" data-link="${escapeHtml4(link)}" ${link ? 'title="Click to open in Google Calendar"' : ""}>
-                <span class="cal-side-event-dot ${e.source === "google" ? "g" : "l"}"></span>
+                ${calIconHtml(calInfoFor(e.calendarId))}
                 <span class="cal-side-event-time">${escapeHtml4(formatTime(e))}</span>
                 <span class="cal-side-event-title">${escapeHtml4(e.title)}<span class="cal-side-event-recur" title="Daily">\u21BB</span></span>
             </div>`;
@@ -3929,7 +4053,10 @@ function renderEvents(events) {
   for (const e of events) {
     if (e.recurringEventId && dailyKeys.has(e.recurringEventId))
       continue;
-    if (e.isHoliday && e.start > holidayCutoff)
+    const info = calInfoFor(e.calendarId);
+    const kind = calendarKind(info.id, info.primary);
+    const isHolidayKind = kind === "usHoliday" || kind === "jewishHoliday" || kind === "otherHoliday";
+    if (isHolidayKind && e.start > holidayCutoff)
       continue;
     const d = new Date(e.start);
     const dayKey = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
@@ -3939,35 +4066,30 @@ function renderEvents(events) {
     }
     const recurMark = e.recurringEventId ? `<span class="cal-side-event-recur" title="Recurring event">\u21BB</span>` : "";
     const link = e.htmlLink || "";
-    let holidayKind;
-    if (e.isHoliday) {
-      const cid = (e.calendarId || "").toLowerCase();
-      if (cid.includes("usa"))
-        holidayKind = "us";
-      else if (cid.includes("judaism") || cid.includes("jewish"))
-        holidayKind = "jewish";
-      else
-        holidayKind = "other";
-    }
-    const holidayAttr = e.isHoliday ? ` data-holiday="1" data-holiday-kind="${holidayKind}"` : "";
     const recurAttr = e.recurringEventId ? ' data-recurring="1"' : "";
-    const clickable = !e.isHoliday;
-    const titleAttr = clickable && link ? 'title="Click to open in Google Calendar"' : "";
-    const dataLink = clickable ? `data-link="${escapeHtml4(link)}"` : "";
-    if (e.isHoliday) {
-      const symbol = holidayKind === "us" ? "\u{1F1FA}\u{1F1F8}" : holidayKind === "jewish" ? "\u2721\uFE0F" : "\u2726";
-      html += `<div class="cal-side-event"${holidayAttr} data-id="${e.id}">
-                <span class="cal-side-event-title cal-side-event-holiday-title"><span class="cal-side-event-holiday-symbol">${symbol}</span> ${escapeHtml4(e.title)}</span>
+    if (isHolidayKind || kind === "birthday") {
+      html += `<div class="cal-side-event" data-holiday="1" data-holiday-kind="${kind}" data-id="${e.id}">
+                <span class="cal-side-event-title cal-side-event-holiday-title">${calIconHtml(info)} ${escapeHtml4(e.title)}</span>
             </div>`;
     } else {
-      html += `<div class="cal-side-event" data-id="${e.id}"${recurAttr} ${dataLink} ${titleAttr}>
-                <span class="cal-side-event-dot ${e.source === "google" ? "g" : "l"}"></span>
+      const titleAttr = link ? 'title="Click to open in Google Calendar"' : "";
+      html += `<div class="cal-side-event" data-id="${e.id}"${recurAttr} data-link="${escapeHtml4(link)}" ${titleAttr}>
+                ${calIconHtml(info)}
                 <span class="cal-side-event-time">${escapeHtml4(formatTime(e))}</span>
                 <span class="cal-side-event-title">${escapeHtml4(e.title)}${recurMark}</span>
             </div>`;
     }
   }
   body.innerHTML = html;
+  body.querySelectorAll(".cal-side-task-overdue").forEach((row) => {
+    const uuid = row.dataset.uuid;
+    row.querySelector(".cal-side-overdue-check")?.addEventListener("change", async () => {
+      await updateTask(uuid, { completedMs: Date.now() });
+      lastOverdueTasks = lastOverdueTasks.filter((t) => t.uuid !== uuid);
+      renderEvents(lastEvents);
+      renderTasks();
+    });
+  });
   const openInCalendar = (url) => {
     const api = window.mailxapi;
     if (api?.openCalendarEvent) {
@@ -4010,10 +4132,10 @@ function renderEvents(events) {
     });
   });
 }
-async function renderTasks() {
+async function renderTasks(prefetched) {
   const cb = document.getElementById("cal-side-show-done");
   const showDone = cb?.checked ?? false;
-  const tasks = await getTasks(showDone);
+  const tasks = prefetched ?? await getTasks(showDone);
   const host = document.getElementById("cal-side-tasks");
   if (!host)
     return;
@@ -4102,15 +4224,25 @@ async function renderTasks() {
 async function refresh() {
   renderHead();
   const from = new Date(viewYear, viewMonth, viewDay);
+  let prefetchedTasks;
   try {
-    lastEvents = await fetchUpcoming(from);
+    const startOfToday = /* @__PURE__ */ new Date();
+    startOfToday.setHours(0, 0, 0, 0);
+    const showDone = document.getElementById("cal-side-show-done")?.checked ?? false;
+    const [events, tasks] = await Promise.all([
+      fetchUpcoming(from),
+      getTasks(showDone).catch(() => [])
+    ]);
+    lastEvents = events;
+    prefetchedTasks = tasks;
+    lastOverdueTasks = prefetchedTasks.filter((t) => t.dueMs && !t.completedMs && t.dueMs < startOfToday.getTime()).map((t) => ({ uuid: t.uuid, title: t.title, dueMs: t.dueMs }));
     renderEvents(lastEvents);
   } catch (e) {
     const body = document.getElementById("cal-side-body");
     if (body)
       body.innerHTML = `<div class="cal-side-empty cal-side-quota-error">Couldn't load calendar: ${escapeHtml4(e?.message || String(e))}</div>`;
   }
-  renderTasks();
+  renderTasks(prefetchedTasks);
 }
 function openNewEventDialog() {
   const backdrop = document.createElement("div");
@@ -4237,6 +4369,8 @@ async function showCalendarSidebar() {
     localStorage.setItem(SIDEBAR_PREF, "true");
   } catch {
   }
+  await loadHiddenCalendars();
+  void renderCalendarList();
   await refresh();
 }
 function hideCalendarSidebar() {
@@ -4321,7 +4455,7 @@ function initCalendarSidebar() {
     if (btn)
       btn.disabled = true;
     try {
-      await refresh();
+      await Promise.all([renderCalendarList(), refresh()]);
     } finally {
       setTimeout(() => {
         btn?.classList.remove("cal-side-refreshing");
@@ -4357,32 +4491,6 @@ function initCalendarSidebar() {
       refresh();
     });
   }
-  const wireHolidayCheckbox = (cbId, settingsKey) => {
-    const cb = document.getElementById(cbId);
-    if (!cb || cb.__wired)
-      return;
-    cb.__wired = true;
-    let userTouched = false;
-    getSettings().then((s) => {
-      if (userTouched)
-        return;
-      cb.checked = !!s?.calendar?.[settingsKey];
-    }).catch(() => {
-    });
-    cb.addEventListener("change", async () => {
-      userTouched = true;
-      try {
-        const s = await getSettings();
-        s.calendar = { ...s.calendar || {}, [settingsKey]: cb.checked };
-        await saveSettings(s);
-      } catch (e) {
-        console.error(`[cal] ${settingsKey} save failed:`, e);
-      }
-      refresh();
-    });
-  };
-  wireHolidayCheckbox("cal-side-show-holidays", "showHolidays");
-  wireHolidayCheckbox("cal-side-show-jewish-holidays", "showJewishHolidays");
   const horizonInput = document.getElementById("cal-side-horizon");
   if (horizonInput && !horizonInput.__wired) {
     horizonInput.__wired = true;
@@ -4441,7 +4549,7 @@ function initCalendarSidebar() {
     }
   }
 }
-var SIDEBAR_PREF, SHOW_RECURRING_PREF, SHOW_DONE_PREF, HORIZON_DAYS_PREF, HORIZON_DEFAULT_DAYS, HOLIDAY_HORIZON_MS, viewYear, viewMonth, viewDay, lastEvents, selectedTaskUuids;
+var SIDEBAR_PREF, SHOW_RECURRING_PREF, SHOW_DONE_PREF, HORIZON_DAYS_PREF, HORIZON_DEFAULT_DAYS, HOLIDAY_HORIZON_MS, viewYear, viewMonth, viewDay, lastEvents, lastOverdueTasks, calById, calendarList, hiddenCalendars, selectedTaskUuids;
 var init_calendar_sidebar = __esm({
   "client/components/calendar-sidebar.js"() {
     "use strict";
@@ -4457,6 +4565,10 @@ var init_calendar_sidebar = __esm({
     viewMonth = (/* @__PURE__ */ new Date()).getMonth();
     viewDay = (/* @__PURE__ */ new Date()).getDate();
     lastEvents = [];
+    lastOverdueTasks = [];
+    calById = /* @__PURE__ */ new Map();
+    calendarList = [];
+    hiddenCalendars = /* @__PURE__ */ new Set();
     selectedTaskUuids = /* @__PURE__ */ new Set();
   }
 });
@@ -5093,6 +5205,81 @@ var init_alarms = __esm({
   }
 });
 
+// client/help/search-help.js
+var search_help_exports = {};
+__export(search_help_exports, {
+  SEARCH_HELP_HTML: () => SEARCH_HELP_HTML
+});
+var SEARCH_HELP_HTML;
+var init_search_help = __esm({
+  "client/help/search-help.js"() {
+    "use strict";
+    SEARCH_HELP_HTML = `
+<p>Search runs in one of three modes depending on the scope you pick. The mode
+decides which operators work.</p>
+<ul>
+  <li><strong>All folders</strong> (default) \u2014 searches the <em>local cache</em> with SQLite FTS5.</li>
+  <li><strong>This folder</strong> \u2014 instant client-side filter on the visible rows; full FTS5 search on Enter.</li>
+  <li><strong>Server</strong> (checkbox) \u2014 sends the query to the mail server (IMAP SEARCH; not yet wired for Gmail accounts).</li>
+</ul>
+
+<h3>Qualifiers \u2014 work in every mode</h3>
+<table>
+  <tr><th>Form</th><th>Effect</th></tr>
+  <tr><td><code>from:bob</code></td><td>Sender contains</td></tr>
+  <tr><td><code>to:eleanor</code></td><td>Recipient contains</td></tr>
+  <tr><td><code>subject:lunch</code></td><td>Subject contains</td></tr>
+  <tr><td><code>date:2026-05-01</code></td><td>On that date \u2014 also <code>date:&gt;1w</code>, <code>date:&lt;=2026-01-15</code></td></tr>
+  <tr><td><code>after:1w</code> / <code>before:1m</code></td><td>Newer / older than \u2014 <code>d</code>, <code>w</code>, <code>m</code>, <code>y</code>, a date, <code>today</code>, <code>yesterday</code></td></tr>
+  <tr><td><code>has:attachment</code></td><td>Has an attachment</td></tr>
+  <tr><td><code>is:unread</code></td><td>Also <code>is:flagged</code>, <code>is:read</code>, <code>is:answered</code>, <code>is:draft</code></td></tr>
+  <tr><td><code>folder:sent</code></td><td>Restrict to folders whose name contains the term</td></tr>
+  <tr><td><code>/regex/</code></td><td>Client-side regex over the currently-visible rows. Local only \u2014 never sent to the server.</td></tr>
+</table>
+<p>Any remaining unqualified text is the free-text term.</p>
+
+<h3>Local search (FTS5) \u2014 default</h3>
+<p>Full-text index over envelopes plus locally-cached bodies. Fast and indexed.</p>
+<table>
+  <tr><th>Operator</th><th>Example</th><th>Meaning</th></tr>
+  <tr><td>implicit AND</td><td><code>bob lunch</code></td><td>Both terms must appear</td></tr>
+  <tr><td><code>OR</code></td><td><code>bob OR eleanor</code></td><td>Either term</td></tr>
+  <tr><td><code>NOT</code></td><td><code>bob NOT spam</code></td><td>First without the second</td></tr>
+  <tr><td><code>"phrase"</code></td><td><code>"happy birthday"</code></td><td>Exact phrase</td></tr>
+  <tr><td><code>term*</code></td><td><code>lunch*</code></td><td>Prefix</td></tr>
+  <tr><td><code>NEAR(a b, 5)</code></td><td><code>NEAR(bob lunch, 5)</code></td><td>Both within 5 tokens</td></tr>
+</table>
+<p>Indexed: subject, from, to, cc, a body snippet, and the full body <em>if</em> it
+has been downloaded locally (the blue dot in the list). Bodies not yet
+prefetched aren't searchable until they are.</p>
+
+<h3>This-folder filter</h3>
+<p>With scope set to <strong>This folder</strong>, typing filters the rendered rows
+instantly \u2014 no server hit, no FTS5, just substring match. Press <kbd>Enter</kbd>
+to escalate to a full FTS5 search of the folder.</p>
+
+<h3>Server search</h3>
+<p>Tick <strong>Server</strong> and the query goes to the mail server. On Dovecot
+(IMAP SEARCH) your <code>from:</code> / <code>to:</code> / <code>subject:</code>
+qualifiers map to IMAP keys; remaining text becomes a body search. IMAP has no
+literal <code>AND</code> keyword \u2014 keys are implicitly ANDed. Server search on
+Gmail accounts is not yet wired and currently returns local results only.</p>
+
+<h3>Case sensitivity</h3>
+<p>All three modes \u2014 local FTS5, IMAP server SEARCH, and <code>/regex/</code> \u2014
+are <strong>case-insensitive</strong>. <code>Lunch</code>, <code>lunch</code>, and
+<code>LUNCH</code> match the same messages. There is no case-sensitive mode.</p>
+
+<h3>Limitations</h3>
+<ul>
+  <li>No regex on the server side, any provider \u2014 <code>/pattern/</code> only filters visible local rows.</li>
+  <li>Server search results are stored locally (envelope-only) on first hit, so a server search also backfills those envelopes.</li>
+  <li>Body search on bodies you haven't prefetched only works server-side; the local index can't search what isn't downloaded.</li>
+</ul>
+`;
+  }
+});
+
 // client/components/folder-tree.js
 init_api_client();
 init_context_menu();
@@ -6539,7 +6726,10 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
   currentFolderSpecialUse = specialUse;
   currentAccountId3 = accountId;
   currentFolderId2 = folderId;
-  if (searchInput) searchInput.value = "";
+  if (searchInput) {
+    searchInput.value = "";
+    updateSearchHighlight();
+  }
   clearSearchMode();
   markAsSeen();
   releaseFocus();
@@ -6550,7 +6740,10 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
   document.dispatchEvent(new CustomEvent("mailx-folder-changed", { detail: { accountId, folderId } }));
 }, () => {
   currentFolderSpecialUse = "inbox";
-  if (searchInput) searchInput.value = "";
+  if (searchInput) {
+    searchInput.value = "";
+    updateSearchHighlight();
+  }
   clearSearchMode();
   releaseFocus();
   loadUnifiedInbox();
@@ -6559,7 +6752,10 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
   setActiveView({ kind: "unified" }, "All Inboxes");
 });
 function applyTabView(tab) {
-  if (searchInput) searchInput.value = "";
+  if (searchInput) {
+    searchInput.value = "";
+    updateSearchHighlight();
+  }
   clearSearchMode();
   releaseFocus();
   const v = tab.view;
@@ -6576,7 +6772,10 @@ function applyTabView(tab) {
     setTitle(`${APP_NAME} - ${tab.title}`);
     setNarrowFolderTitle(tab.title);
   } else {
-    if (searchInput) searchInput.value = v.query;
+    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}`);
@@ -7566,6 +7765,64 @@ function recordSearchHistory(query) {
   refreshSearchHistoryDatalist();
 }
 refreshSearchHistoryDatalist();
+var searchHl = document.getElementById("search-hl");
+var SEARCH_QUALIFIERS = /* @__PURE__ */ new Set(["from", "to", "subject", "date", "after", "before", "has", "is", "folder"]);
+var SEARCH_REGEX_SETTLE_MS = 500;
+var 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;
+  const tokens = text.match(/\s+|"[^"]*"?|\S+/g) || [];
+  let html = "";
+  for (const tok of tokens) {
+    if (/^\s+$/.test(tok)) {
+      html += escapeHl(tok);
+      continue;
+    }
+    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;
+    }
+    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;
+    }
+    if (/^(OR|NOT|AND)$/.test(tok)) {
+      html += `<span class="sh-op">${escapeHl(tok)}</span>`;
+      continue;
+    }
+    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);
+}
+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) {
@@ -7602,6 +7859,7 @@ var currentFolderId2 = 0;
 var reloadDebounceTimer = null;
 searchInput?.addEventListener("input", () => {
   clearTimeout(searchTimeout);
+  updateSearchHighlight();
   if (searchInput.value.trim() === "") {
     clearSearchMode();
     const body = document.getElementById("ml-body");
@@ -7619,6 +7877,7 @@ searchInput?.addEventListener("keydown", (e) => {
   }
   if (e.key === "Escape") {
     searchInput.value = "";
+    updateSearchHighlight();
     clearSearchMode();
     const body = document.getElementById("ml-body");
     if (body) body.querySelectorAll(".filter-hidden").forEach((r) => r.classList.remove("filter-hidden"));
@@ -8777,34 +9036,66 @@ optSnippet?.addEventListener("change", () => {
   localStorage.setItem("mailx-snippet", String(optSnippet.checked));
 });
 document.getElementById("search-help")?.addEventListener("click", async () => {
-  const { readConfigHelp: readConfigHelp2 } = await Promise.resolve().then(() => (init_api_client(), api_client_exports));
-  const r = await readConfigHelp2("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;
+  const existing = document.getElementById("search-help-panel");
+  if (existing) {
+    existing.remove();
+    btn.setAttribute("aria-expanded", "false");
+    return;
+  }
+  const { SEARCH_HELP_HTML: SEARCH_HELP_HTML2 } = await Promise.resolve().then(() => (init_search_help(), search_help_exports));
+  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 \u2014 check that docs/search.md is deployed.").replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c] || c)}</pre>
+        <div class="search-help-body">${SEARCH_HELP_HTML2}</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");
+  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);
+  };
+  const onKey = (e) => {
     if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
       close();
-      document.removeEventListener("keydown", escClose);
     }
-  });
+  };
+  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);
 });
 document.getElementById("btn-edit-jsonc")?.addEventListener("click", async () => {
   const settingsDropdown2 = document.getElementById("settings-dropdown");