npm - @bobfrankston/mailx - Versions diffs - 1.0.394 → 1.0.399 - Mend

@bobfrankston/mailx 1.0.394 → 1.0.399

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/client/android.html +34 -7
package/client/app.js +42 -5
package/client/components/alarms.js +286 -0
package/client/components/calendar-sidebar.js +43 -7
package/client/components/message-list.js +223 -16
package/client/compose/compose.js +24 -0
package/client/index.html +21 -10
package/client/lib/api-client.js +3 -0
package/client/lib/mailxapi.js +1 -0
package/client/styles/components.css +200 -0
package/client/styles/layout.css +40 -14
package/package.json +1 -1
package/packages/mailx-service/index.d.ts +4 -0
package/packages/mailx-service/index.js +6 -0
package/packages/mailx-service/jsonrpc.js +2 -0
package/packages/mailx-store/db.d.ts +8 -0
package/packages/mailx-store/db.js +26 -0
package/packages/mailx-store-web/android-bootstrap.js +60 -0
package/packages/mailx-store-web/db.d.ts +4 -0
package/packages/mailx-store-web/db.js +25 -0
package/packages/mailx-store-web/sync-manager.d.ts +7 -0
package/packages/mailx-store-web/sync-manager.js +55 -0
package/packages/mailx-store-web/web-service.d.ts +4 -0
package/packages/mailx-store-web/web-service.js +7 -0
package/tdview.cmd +1 -0

package/client/android.html CHANGED Viewed

@@ -59,7 +59,8 @@
 <body>
     <header class="toolbar">
         <div class="toolbar-left">
-            <button class="tb-btn" id="btn-menu" title="Folders" hidden>☰</button>
+            <button class="tb-btn" id="btn-menu" title="Menu / rail" hidden>☰</button>
+            <button class="tb-btn" id="btn-folder-toggle" title="Show / hide folders" hidden>📁</button>
             <button class="tb-btn" id="btn-compose" title="Compose (Ctrl+N)">
                 <span class="tb-icon">✏</span> Compose
             </button>
@@ -68,11 +69,11 @@
             <div class="tb-menu" id="view-menu">
                 <button class="tb-btn" id="btn-view">View</button>
                 <div class="tb-menu-dropdown" id="view-dropdown" hidden>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-two-line"> Two-line view</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
+                    <label class="tb-menu-item" title="Stack From + Subject on two lines per row, date to the right — denser on narrow windows"><input type="checkbox" id="opt-two-line"> Two-line view</label>
+                    <label class="tb-menu-item" title="Show the reading pane below/beside the message list"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
+                    <label class="tb-menu-item" title="Show a short body-text preview (first ~80 chars) beneath each row's subject"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
+                    <label class="tb-menu-item" title="Show only flagged (★) messages in the list"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
+                    <label class="tb-menu-item" title="Show unread/total counts next to each folder in the tree"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
                 </div>
             </div>
             <div class="tb-menu" id="settings-menu">
@@ -82,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>
@@ -109,6 +110,22 @@
         <button class="alert-dismiss" id="alert-dismiss" title="Dismiss">&times;</button>
     </div>
+    <aside class="icon-rail" id="icon-rail" aria-label="App rail">
+        <div class="rail-top">
+            <button class="rail-btn" id="rail-compose" title="Compose" aria-label="Compose">✏</button>
+            <button class="rail-btn" id="rail-inbox" title="Inbox" aria-label="Inbox" data-active="true">✉</button>
+            <button class="rail-btn" id="rail-unified" title="All Inboxes" aria-label="All Inboxes">⌘</button>
+            <button class="rail-btn" id="rail-contacts" title="Contacts" aria-label="Contacts">👤</button>
+            <button class="rail-btn" id="rail-calendar" title="Calendar" aria-label="Calendar">📅</button>
+            <button class="rail-btn" id="rail-tasks" title="Tasks" aria-label="Tasks">☑</button>
+        </div>
+        <div class="rail-bottom">
+            <button class="rail-btn" id="rail-settings" title="Settings" aria-label="Settings">⚙</button>
+            <button class="rail-btn" id="rail-theme" title="Theme" aria-label="Theme">◐</button>
+            <button class="rail-btn" id="rail-help" title="Help" aria-label="Help">?</button>
+        </div>
+    </aside>
     <div class="folder-panel">
         <div class="ft-filter">
             <input type="text" id="ft-filter-input" placeholder="Find folder..." autocomplete="off">
@@ -133,6 +150,16 @@
                 <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 CHANGED Viewed

@@ -390,9 +390,21 @@ if (messageList) {
         }
     }).observe(messageList);
 }
-// ── Narrow screen navigation ──
+// ── Narrow/medium drawer toggles ──
+// Hamburger (☰): rail drawer on narrow; on wider tiers the rail is already
+// visible so this is a no-op visually (the toggle still fires but the rail
+// has no `.open` style to invoke).
+// Folder (📁): folder-panel drawer on any tier where it's positioned as an
+// overlay (medium + narrow).
 document.getElementById("btn-menu")?.addEventListener("click", () => {
+    document.querySelector(".icon-rail")?.classList.toggle("open");
+    // Rail drawer and folder drawer are mutually exclusive — opening one
+    // closes the other so they don't fight for the left edge.
+    document.querySelector(".folder-panel")?.classList.remove("open");
+});
+document.getElementById("btn-folder-toggle")?.addEventListener("click", () => {
     document.querySelector(".folder-panel")?.classList.toggle("open");
+    document.querySelector(".icon-rail")?.classList.remove("open");
 });
 const backToList = (e) => {
     e.preventDefault();
@@ -1044,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", () => {
@@ -2031,6 +2056,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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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() {