@bobfrankston/mailx 1.0.395 → 1.0.405

package/client/android.html

@@ -83,7 +83,7 @@
                     <label class="tb-menu-item"><input type="radio" name="opt-editor" value="quill" id="opt-editor-quill" checked> Quill</label>
                     <label class="tb-menu-item"><input type="radio" name="opt-editor" value="tiptap" id="opt-editor-tiptap"> tiptap</label>
                     <hr class="tb-menu-sep">
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-autocomplete"> AI autocomplete</label>
+                    <label class="tb-menu-item" title="Ghost-text completions while composing — Ollama / Claude / OpenAI back-end, off by default"><input type="checkbox" id="opt-autocomplete"> AI autocomplete</label>
                 </div>
             </div>
             <span id="app-version" class="app-version">mailx</span>
@@ -145,11 +145,22 @@
                 <input type="search" id="search-input" placeholder="Search..." autocomplete="off" title="Search messages">
             </search>
             <div class="ml-header">
+                <span class="ml-col ml-col-avatar"></span>
                 <span class="ml-col ml-col-flag"></span>
                 <span class="ml-col ml-col-from" data-sort="from">From</span>
                 <span class="ml-col ml-col-date" data-sort="date">Date</span>
                 <span class="ml-col ml-col-subject">Subject</span>
             </div>
+            <div class="ml-bulkbar" id="ml-bulkbar" hidden>
+                <button type="button" class="ml-bulk-cancel" id="ml-bulk-cancel" title="Exit multi-select">✕</button>
+                <span class="ml-bulk-count" id="ml-bulk-count">0 selected</span>
+                <span style="flex:1"></span>
+                <button type="button" class="ml-bulk-btn" data-bulk="markread" title="Mark read">◉</button>
+                <button type="button" class="ml-bulk-btn" data-bulk="flag" title="Flag">⚑</button>
+                <button type="button" class="ml-bulk-btn" data-bulk="move" title="Move to folder…">➜</button>
+                <button type="button" class="ml-bulk-btn" data-bulk="spam" title="Mark as spam">⚠</button>
+                <button type="button" class="ml-bulk-btn ml-bulk-danger" data-bulk="delete" title="Delete">🗑</button>
+            </div>
             <div class="ml-body" id="ml-body">
                 <div class="ml-empty">Select a folder to view messages</div>
             </div>

package/client/app.js

@@ -1056,14 +1056,27 @@ document.getElementById("rail-contacts")?.addEventListener("click", async () =>
     openAddressBook();
     setRailActive("rail-contacts");
 });
+// Q114 decided 2026-04-24: full-screen calendar/tasks modals are
+// temporarily retired — the right-docked sidebar (calendar-sidebar.ts)
+// owns both views. Rail buttons now just reveal the sidebar. Files kept
+// (`calendar.ts`, `tasks.ts`) for potential revival; not imported.
 document.getElementById("rail-calendar")?.addEventListener("click", async () => {
-    const { openCalendar } = await import("./components/calendar.js");
-    openCalendar();
+    const { showCalendarSidebar } = await import("./components/calendar-sidebar.js");
+    await showCalendarSidebar();
+    // Flip the View-menu checkbox so the on-state stays coherent across paths.
+    const optSidebar = document.getElementById("opt-calendar-sidebar");
+    if (optSidebar)
+        optSidebar.checked = true;
     setRailActive("rail-calendar");
 });
 document.getElementById("rail-tasks")?.addEventListener("click", async () => {
-    const { openTasks } = await import("./components/tasks.js");
-    openTasks();
+    const { showCalendarSidebar } = await import("./components/calendar-sidebar.js");
+    await showCalendarSidebar();
+    // Scroll the sidebar to the tasks section if possible.
+    document.getElementById("cal-side-tasks")?.scrollIntoView({ block: "start", behavior: "smooth" });
+    const optSidebar = document.getElementById("opt-calendar-sidebar");
+    if (optSidebar)
+        optSidebar.checked = true;
     setRailActive("rail-tasks");
 });
 document.getElementById("rail-settings")?.addEventListener("click", () => {
@@ -1253,6 +1266,21 @@ window.addEventListener("message", (e) => {
     // with no failures), so we do the IPC from here and post the result back
     // to the iframe via its source. `e.source` is the iframe's window; use it
     // so targeting works even if the iframe moves in the DOM.
+    // S61 2026-04-24: parent-relay compose close. On Android the
+    // window.close() override applied in `frame.onload` doesn't always fire
+    // (WebView2 / MAUI WebView dispatches close to the shell in some cases),
+    // leaving the compose overlay stuck after Send. postMessage is reliable;
+    // compose.ts's closeCompose() posts this, and we find-and-remove the
+    // overlay whose iframe window matches e.source.
+    if (e.data?.type === "mailx-compose-close") {
+        const src = e.source;
+        document.querySelectorAll(".compose-overlay").forEach(el => {
+            const iframe = el.querySelector("iframe");
+            if (!src || iframe?.contentWindow === src)
+                el.remove();
+        });
+        return;
+    }
     if (e.data?.type === "mailx-compose-send" && e.data.id && e.data.body) {
         const src = e.source;
         const id = e.data.id;
@@ -2043,6 +2071,18 @@ function applyThreadFilter() {
             hideCalendarSidebar();
     });
 })();
+// P17 / Q104: alarm subsystem — Thunderbird/Outlook-style popup with
+// snooze + dismiss. Covers calendar events + tasks today; mail reminders
+// will slot in here when the mail-reminder feature lands.
+(async () => {
+    try {
+        const { startAlarmPoller } = await import("./components/alarms.js");
+        startAlarmPoller();
+    }
+    catch (e) {
+        console.error("alarm poller init failed:", e?.message || e);
+    }
+})();
 // Two-line toggle
 optTwoLine?.addEventListener("change", () => {
     const list = document.getElementById("message-list");

package/client/components/alarms.js

@@ -0,0 +1,286 @@
+/**
+ * Alarm subsystem — Thunderbird/Outlook-style reminder popups.
+ *
+ * Design decisions (2026-04-24):
+ *   - One shared subsystem for calendar events + tasks (+ future mail reminders).
+ *   - Popup shows item title, scheduled time, Snooze (5 / 15 / 30 min / 1 hr /
+ *     custom), Dismiss. Snooze delays the alarm by the chosen interval; Dismiss
+ *     suppresses it permanently.
+ *   - Dismissed / snoozed state lives in localStorage (per-device). Google
+ *     Calendar's own reminders aren't mutated by this — mailx's popup is a
+ *     local convenience, not a reminder-authority replacement.
+ *   - Default lead time: 10 min before calendar event start; at task due time
+ *     for tasks. Per-event overrides from Google Calendar's `reminders.overrides`
+ *     are a follow-up (we don't currently fetch that field).
+ *
+ * Check cadence: every 30 s while the tab/window is focused. No check when
+ * hidden — alarm won't fire until user returns, which matches Thunderbird's
+ * behavior (focus-gated). OS-level notifications are a separate follow-up.
+ */
+import { getCalendarEvents, getTasks } from "../lib/api-client.js";
+const DISMISSED_KEY = "mailx-alarm-dismissed"; // { uuid: true }
+const SNOOZED_KEY = "mailx-alarm-snoozed"; // { uuid: epoch-ms-end }
+const CAL_LEAD_MS = 10 * 60 * 1000; // 10 min before cal event start
+const LOOKBACK_MS = 60 * 60 * 1000; // fire past-due alarms from the last 60 min
+const LOOKAHEAD_MS = 2 * 60 * 60 * 1000; // poll window: upcoming 2 hr
+const POLL_INTERVAL_MS = 30_000;
+function loadDismissed() {
+    try {
+        return JSON.parse(localStorage.getItem(DISMISSED_KEY) || "{}");
+    }
+    catch {
+        return {};
+    }
+}
+function saveDismissed(map) {
+    try {
+        localStorage.setItem(DISMISSED_KEY, JSON.stringify(map));
+    }
+    catch { /* private mode */ }
+}
+function loadSnoozed() {
+    try {
+        return JSON.parse(localStorage.getItem(SNOOZED_KEY) || "{}");
+    }
+    catch {
+        return {};
+    }
+}
+function saveSnoozed(map) {
+    try {
+        localStorage.setItem(SNOOZED_KEY, JSON.stringify(map));
+    }
+    catch { /* */ }
+}
+/** Prune expired entries so the maps don't grow forever. */
+function pruneState(now) {
+    const snoozed = loadSnoozed();
+    let changed = false;
+    for (const [uuid, until] of Object.entries(snoozed)) {
+        // Snoozed entries older than 7 days have been fired already (or the
+        // event is long past); drop them.
+        if (until < now - 7 * 86400_000) {
+            delete snoozed[uuid];
+            changed = true;
+        }
+    }
+    if (changed)
+        saveSnoozed(snoozed);
+    // Dismissed is sparse — don't bother pruning aggressively.
+}
+async function collectDueAlarms(now) {
+    const dismissed = loadDismissed();
+    const snoozed = loadSnoozed();
+    const items = [];
+    try {
+        const events = await getCalendarEvents(now - LOOKBACK_MS, now + LOOKAHEAD_MS);
+        for (const ev of events) {
+            if (!ev.uuid)
+                continue;
+            if (dismissed[ev.uuid])
+                continue;
+            const alarm = (ev.start || 0) - CAL_LEAD_MS;
+            const effective = snoozed[ev.uuid] || alarm;
+            if (effective <= now && effective > now - LOOKBACK_MS) {
+                items.push({
+                    uuid: ev.uuid, kind: "calendar",
+                    title: ev.title || "(no title)",
+                    alarmMs: effective, whenMs: ev.start || 0,
+                    htmlLink: ev.htmlLink,
+                });
+            }
+        }
+    }
+    catch { /* sidebar will surface API errors; alarm path stays quiet */ }
+    try {
+        const tasks = await getTasks(false);
+        for (const t of tasks) {
+            if (!t.uuid || !t.dueMs)
+                continue;
+            if (dismissed[t.uuid])
+                continue;
+            const effective = snoozed[t.uuid] || t.dueMs;
+            if (effective <= now && effective > now - LOOKBACK_MS) {
+                items.push({
+                    uuid: t.uuid, kind: "task",
+                    title: t.title || "(no title)",
+                    alarmMs: effective, whenMs: t.dueMs,
+                });
+            }
+        }
+    }
+    catch { /* */ }
+    return items;
+}
+function formatWhen(ms) {
+    if (!ms)
+        return "";
+    const d = new Date(ms);
+    return d.toLocaleString(undefined, { weekday: "short", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
+let currentPopup = null;
+let firedThisSession = new Set();
+function showPopup(items) {
+    if (currentPopup)
+        return; // another popup already up
+    if (items.length === 0)
+        return;
+    const overlay = document.createElement("div");
+    overlay.className = "alarm-overlay";
+    const panel = document.createElement("div");
+    panel.className = "alarm-panel";
+    panel.innerHTML = `
+        <div class="alarm-head">
+            <span class="alarm-icon">⏰</span>
+            <span class="alarm-title">${items.length} reminder${items.length > 1 ? "s" : ""}</span>
+            <button type="button" class="alarm-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="alarm-list"></div>
+        <div class="alarm-foot">
+            <label class="alarm-snooze-label">Snooze for
+                <select class="alarm-snooze-sel">
+                    <option value="5">5 minutes</option>
+                    <option value="15" selected>15 minutes</option>
+                    <option value="30">30 minutes</option>
+                    <option value="60">1 hour</option>
+                    <option value="240">4 hours</option>
+                    <option value="1440">1 day</option>
+                    <option value="custom">custom…</option>
+                </select>
+            </label>
+            <span style="flex:1"></span>
+            <button type="button" class="alarm-btn alarm-btn-snooze">Snooze all</button>
+            <button type="button" class="alarm-btn alarm-btn-primary alarm-btn-dismiss">Dismiss all</button>
+        </div>
+    `;
+    const list = panel.querySelector(".alarm-list");
+    for (const it of items) {
+        const row = document.createElement("div");
+        row.className = "alarm-row";
+        row.dataset.uuid = it.uuid;
+        row.innerHTML = `
+            <div class="alarm-row-main">
+                <span class="alarm-row-kind">${it.kind === "calendar" ? "📅" : "☑"}</span>
+                <span class="alarm-row-title"></span>
+                <span class="alarm-row-when"></span>
+            </div>
+            <div class="alarm-row-actions">
+                ${it.htmlLink ? `<button type="button" class="alarm-row-link" data-link="${it.htmlLink}" title="View in browser">↗</button>` : ""}
+                <button type="button" class="alarm-row-dismiss" title="Dismiss this one">✕</button>
+            </div>
+        `;
+        row.querySelector(".alarm-row-title").textContent = it.title;
+        row.querySelector(".alarm-row-when").textContent = formatWhen(it.whenMs);
+        list.appendChild(row);
+    }
+    overlay.appendChild(panel);
+    document.body.appendChild(overlay);
+    currentPopup = overlay;
+    const snoozeMinutes = () => {
+        const sel = panel.querySelector(".alarm-snooze-sel");
+        if (sel.value === "custom") {
+            const v = prompt("Snooze for how many minutes?", "30");
+            const n = parseInt(v || "", 10);
+            return Number.isFinite(n) && n > 0 ? n : null;
+        }
+        return parseInt(sel.value, 10);
+    };
+    const snoozeAll = (minutes) => {
+        const now = Date.now();
+        const map = loadSnoozed();
+        for (const it of items)
+            map[it.uuid] = now + minutes * 60_000;
+        saveSnoozed(map);
+        for (const it of items)
+            firedThisSession.delete(it.uuid);
+        close();
+    };
+    const dismissAll = () => {
+        const map = loadDismissed();
+        for (const it of items)
+            map[it.uuid] = true;
+        saveDismissed(map);
+        close();
+    };
+    const close = () => {
+        overlay.remove();
+        currentPopup = null;
+    };
+    panel.querySelector(".alarm-close")?.addEventListener("click", close);
+    panel.querySelector(".alarm-btn-snooze")?.addEventListener("click", () => {
+        const n = snoozeMinutes();
+        if (n)
+            snoozeAll(n);
+    });
+    panel.querySelector(".alarm-btn-dismiss")?.addEventListener("click", dismissAll);
+    panel.querySelectorAll(".alarm-row-dismiss").forEach(btn => {
+        btn.addEventListener("click", () => {
+            const row = btn.closest(".alarm-row");
+            const uuid = row?.dataset.uuid;
+            if (!uuid)
+                return;
+            const map = loadDismissed();
+            map[uuid] = true;
+            saveDismissed(map);
+            row.remove();
+            if (panel.querySelector(".alarm-list")?.childElementCount === 0)
+                close();
+        });
+    });
+    panel.querySelectorAll(".alarm-row-link").forEach(btn => {
+        btn.addEventListener("click", () => {
+            const url = btn.dataset.link;
+            if (!url)
+                return;
+            const api = window.mailxapi;
+            if (api?.openExternal)
+                api.openExternal(url);
+            else
+                window.open(url, "_blank");
+        });
+    });
+    // Escape closes without action (same as X) — user can re-open with next
+    // poll tick by not acting on it.
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            close();
+            document.removeEventListener("keydown", onKey, true);
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+}
+async function pollAlarms() {
+    if (document.hidden)
+        return; // don't fire while tab hidden
+    if (currentPopup)
+        return; // user hasn't acknowledged last one
+    const now = Date.now();
+    pruneState(now);
+    const due = await collectDueAlarms(now);
+    // Only show items we haven't already fired this session (prevents the
+    // popup from immediately re-appearing if the user closes it without
+    // dismissing — the item still matches the "due" filter next tick).
+    const fresh = due.filter(d => !firedThisSession.has(d.uuid));
+    if (fresh.length === 0)
+        return;
+    for (const d of fresh)
+        firedThisSession.add(d.uuid);
+    showPopup(fresh);
+}
+/** Start the alarm poller. Called from app.ts on startup. */
+export function startAlarmPoller() {
+    if (window.__mailxAlarmPollerRunning)
+        return;
+    window.__mailxAlarmPollerRunning = true;
+    // First check after 5 s so startup isn't jittered by a modal.
+    setTimeout(() => { pollAlarms().catch(() => { }); }, 5000);
+    setInterval(() => { pollAlarms().catch(() => { }); }, POLL_INTERVAL_MS);
+    // Re-check on visibility change — if the user comes back to the tab
+    // after an hour away, they should see anything they missed immediately.
+    document.addEventListener("visibilitychange", () => {
+        if (!document.hidden)
+            pollAlarms().catch(() => { });
+    });
+}
+//# sourceMappingURL=alarms.js.map

package/client/components/calendar-sidebar.js

@@ -14,6 +14,7 @@
  * and tasks tables); this file does not use localStorage for data.
  */
 import { getCalendarEvents, createCalendarEvent, getTasks, createTask, updateTask, deleteTask, reauthGoogleScopes, } from "../lib/api-client.js";
+import { showContextMenu } from "./context-menu.js";
 const SIDEBAR_PREF = "mailx-calendar-sidebar-on";
 const SHOW_RECURRING_PREF = "mailx-cal-show-recurring";
 const SHOW_DONE_PREF = "mailx-task-show-done";
@@ -118,16 +119,35 @@ function renderEvents(events) {
     body.innerHTML = html;
     // Click-to-open — interim per user 2026-04-23: route to Google Calendar's
     // web UI via openExternal until we build an in-app event editor.
+    // Right-click gives a context menu with "View in browser" explicit.
+    const openInBrowser = (url) => {
+        const api = window.mailxapi;
+        if (api?.openExternal)
+            api.openExternal(url);
+        else
+            window.open(url, "_blank");
+    };
     body.querySelectorAll(".cal-side-event").forEach(el => {
         el.addEventListener("click", () => {
             const link = el.dataset.link;
-            if (link) {
-                const api = window.mailxapi;
-                if (api?.openExternal)
-                    api.openExternal(link);
-                else
-                    window.open(link, "_blank");
-            }
+            if (link)
+                openInBrowser(link);
+        });
+        el.addEventListener("contextmenu", (e) => {
+            e.preventDefault();
+            const link = el.dataset.link;
+            const items = [];
+            if (link)
+                items.push({
+                    label: "View in browser",
+                    action: () => openInBrowser(link),
+                });
+            items.push({
+                label: "Open Google Calendar",
+                action: () => openInBrowser("https://calendar.google.com/"),
+            });
+            if (items.length > 0)
+                showContextMenu(e.clientX, e.clientY, items);
         });
     });
 }
@@ -152,6 +172,13 @@ async function renderTasks() {
         </div>`;
     }
     host.innerHTML = html;
+    const openInBrowser = (url) => {
+        const api = window.mailxapi;
+        if (api?.openExternal)
+            api.openExternal(url);
+        else
+            window.open(url, "_blank");
+    };
     host.querySelectorAll(".cal-side-task").forEach(row => {
         const uuid = row.dataset.uuid;
         row.querySelector(".cal-side-task-check")?.addEventListener("change", async (e) => {
@@ -163,6 +190,15 @@ async function renderTasks() {
             await deleteTask(uuid);
             renderTasks();
         });
+        row.addEventListener("contextmenu", (e) => {
+            e.preventDefault();
+            // Google Tasks doesn't have a per-task web URL; open the list view.
+            showContextMenu(e.clientX, e.clientY, [
+                { label: "View in Google Tasks", action: () => openInBrowser("https://tasks.google.com/") },
+                { label: "", action: () => { }, separator: true },
+                { label: "Delete task", action: async () => { await deleteTask(uuid); renderTasks(); } },
+            ]);
+        });
     });
 }
 async function refresh() {