@bobfrankston/mailx 1.0.377 → 1.0.379

package/client/components/calendar-sidebar.js

@@ -10,68 +10,33 @@
  * Sidebar and the full-screen calendar modal (calendar.ts) read the SAME
  * underlying data — two views onto one source.
  *
- * Local-only events (LOCAL_STORE_KEY) are merged with Google events.
+ * All storage goes through the service-side two-way cache (calendar_events
+ * and tasks tables); this file does not use localStorage for data.
  */
-import { getPrimaryAccount } from "../lib/api-client.js";
-const LOCAL_STORE_KEY = "mailx-cal-events-v1";
-const TASK_STORE_KEY = "mailx-tasks-v1";
+import { getCalendarEvents, createCalendarEvent, getTasks, createTask, updateTask, } from "../lib/api-client.js";
 const SIDEBAR_PREF = "mailx-calendar-sidebar-on";
 let viewYear = new Date().getFullYear();
 let viewMonth = new Date().getMonth();
 let viewDay = new Date().getDate();
 let lastEvents = [];
-function loadLocalEvents() {
-    try {
-        const raw = localStorage.getItem(LOCAL_STORE_KEY);
-        if (!raw)
-            return [];
-        const arr = JSON.parse(raw);
-        return Array.isArray(arr) ? arr : [];
-    }
-    catch {
-        return [];
-    }
-}
-function loadTasks() {
-    try {
-        const raw = localStorage.getItem(TASK_STORE_KEY);
-        if (!raw)
-            return [];
-        const arr = JSON.parse(raw);
-        return Array.isArray(arr) ? arr : [];
-    }
-    catch {
-        return [];
-    }
-}
-function saveTasks(tasks) {
-    try {
-        localStorage.setItem(TASK_STORE_KEY, JSON.stringify(tasks));
-    }
-    catch { /* */ }
-}
-/** Fetch upcoming events from Google Calendar via the primary account's
- *  OAuth token. Returns merged Google + local events for the next 30 days
- *  starting at `from`. Quietly returns local-only on any error so the
- *  sidebar still works without network / without Google Calendar scope. */
+/** Fetch events from the local two-way cache; service returns local rows
+ *  immediately and kicks a background refresh from Google. Next render
+ *  (view-nav or user action) picks up the refreshed rows. No localStorage
+ *  — everything lives in the service-side DB so phone / desktop share
+ *  the same events. */
 async function fetchUpcoming(from) {
-    const local = loadLocalEvents();
-    let google = [];
-    try {
-        const primary = await getPrimaryAccount();
-        if (primary?.email) {
-            // The OAuth token is held by the service-side OAuthTokenManager;
-            // calendar fetch goes through a server-side proxy method (not
-            // implemented yet — this is the seam). For now: local-only.
-            // Wire-up: TODO — service.fetchGoogleCalendarEvents(accountId, from, days).
-            // Sidebar already renders correctly with the merged result.
-        }
-    }
-    catch { /* google unavailable, fall back to local */ }
     const horizon = from.getTime() + 30 * 86400_000;
-    return [...local, ...google]
-        .filter(e => e.start >= from.getTime() && e.start < horizon)
-        .sort((a, b) => a.start - b.start);
+    const rows = await getCalendarEvents(from.getTime(), horizon);
+    return rows.map((r) => ({
+        id: r.uuid,
+        title: r.title,
+        start: r.startMs,
+        end: r.endMs,
+        allDay: !!r.allDay,
+        location: r.location,
+        notes: r.notes,
+        source: r.providerId ? "google" : "local",
+    }));
 }
 function formatDayHeader(d, today, tomorrow) {
     const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -124,9 +89,9 @@ function renderEvents(events) {
     }
     body.innerHTML = html;
 }
-function renderTasks() {
+async function renderTasks() {
     const showDone = document.getElementById("cal-side-show-done")?.checked || false;
-    const tasks = loadTasks().filter(t => showDone || !t.completed);
+    const tasks = await getTasks(showDone);
     const host = document.getElementById("cal-side-tasks");
     if (!host)
         return;
@@ -136,23 +101,19 @@ function renderTasks() {
     }
     let html = "<div class='cal-side-task-head'>Title</div>";
     for (const t of tasks) {
-        html += `<div class="cal-side-task" data-id="${t.id}">
-            <input type="checkbox" ${t.completed ? "checked" : ""} class="cal-side-task-check">
-            <span class="cal-side-task-title${t.completed ? " done" : ""}">${escapeHtml(t.title)}</span>
+        const done = !!t.completedMs;
+        html += `<div class="cal-side-task" data-uuid="${t.uuid}">
+            <input type="checkbox" ${done ? "checked" : ""} class="cal-side-task-check">
+            <span class="cal-side-task-title${done ? " done" : ""}">${escapeHtml(t.title)}</span>
         </div>`;
     }
     host.innerHTML = html;
     host.querySelectorAll(".cal-side-task").forEach(row => {
-        const id = row.dataset.id;
-        row.querySelector(".cal-side-task-check")?.addEventListener("change", (e) => {
+        const uuid = row.dataset.uuid;
+        row.querySelector(".cal-side-task-check")?.addEventListener("change", async (e) => {
             const checked = e.target.checked;
-            const all = loadTasks();
-            const t = all.find(x => x.id === id);
-            if (t) {
-                t.completed = checked ? Date.now() : undefined;
-                saveTasks(all);
-                renderTasks();
-            }
+            await updateTask(uuid, { completedMs: checked ? Date.now() : null });
+            renderTasks();
         });
     });
 }
@@ -225,19 +186,19 @@ export function initCalendarSidebar() {
             alert("Couldn't parse that date.");
             return;
         }
-        const ev = {
-            id: `cal-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-            title, start, end: start + (allDay ? 86400_000 : 3600_000),
-            allDay, source: "local",
-        };
-        const all = loadLocalEvents();
-        all.push(ev);
-        try {
-            localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(all));
-        }
-        catch { /* */ }
+        // Two-way cache: commit locally, service queues the push to Google.
+        await createCalendarEvent({
+            title, startMs: start, endMs: start + (allDay ? 86400_000 : 3600_000), allDay,
+        });
         await refresh();
     });
+    wireOnce("cal-side-new-task", async () => {
+        const title = prompt("Task title:");
+        if (!title)
+            return;
+        await createTask({ title });
+        renderTasks();
+    });
     const showDoneCb = document.getElementById("cal-side-show-done");
     if (showDoneCb && !showDoneCb.__wired) {
         showDoneCb.__wired = true;

package/client/components/message-list.js

@@ -370,7 +370,7 @@ function restoreSelection(body, savedUid) {
 /** Show a floating list of all messages in a thread when the pill is clicked.
  *  Each entry in the popup selects that message in the viewer when clicked.
  *  This is simpler than inline expansion and avoids duplicating the row builder. */
-async function showThreadPopup(pillEl, headMsg) {
+export async function showThreadPopup(pillEl, headMsg) {
     // Remove any existing popup
     document.querySelectorAll(".ml-thread-popup").forEach(el => el.remove());
     let thread = [];
@@ -464,6 +464,11 @@ function appendMessages(body, accountId, items) {
         // action (move/flag/delete) hasn't been ACK'd by the server yet.
         if (msg.pending)
             row.classList.add("pending-reconcile");
+        // Reply-row marker: messages with In-Reply-To are replies. Shows a
+        // subtle left-border accent so the eye can pick out threaded replies
+        // without enabling full thread grouping.
+        if (msg.inReplyTo)
+            row.classList.add("is-reply");
         row.dataset.uid = String(msg.uid);
         row.dataset.accountId = msgAccountId;
         row.dataset.folderId = String(msg.folderId);
@@ -600,6 +605,37 @@ function appendMessages(body, accountId, items) {
             }
         });
         row.addEventListener("dragend", () => row.classList.remove("dragging"));
+        // ── Q66: long-press on touch → context menu ──
+        // Mirrors right-click on the phone where right-click isn't a thing.
+        // Cancelled by any touchmove or touchend before the threshold.
+        let longPressTimer = null;
+        const LONG_PRESS_MS = 550;
+        row.addEventListener("touchstart", (e) => {
+            const t = e.touches[0];
+            if (!t)
+                return;
+            const cx = t.clientX, cy = t.clientY;
+            if (longPressTimer)
+                clearTimeout(longPressTimer);
+            longPressTimer = setTimeout(() => {
+                longPressTimer = null;
+                // Synthesize a contextmenu event so the existing handler below
+                // owns all the menu logic — no per-event duplication.
+                const ev = new MouseEvent("contextmenu", {
+                    clientX: cx, clientY: cy, bubbles: true, cancelable: true,
+                });
+                row.dispatchEvent(ev);
+            }, LONG_PRESS_MS);
+        }, { passive: true });
+        const cancelLongPress = () => {
+            if (longPressTimer) {
+                clearTimeout(longPressTimer);
+                longPressTimer = null;
+            }
+        };
+        row.addEventListener("touchmove", cancelLongPress, { passive: true });
+        row.addEventListener("touchend", cancelLongPress, { passive: true });
+        row.addEventListener("touchcancel", cancelLongPress, { passive: true });
         // ── Right-click context menu ──
         row.addEventListener("contextmenu", (e) => {
             e.preventDefault();

package/client/components/message-viewer.js

@@ -395,6 +395,23 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
                 unsubBtn.hidden = true;
             }
         }
+        // View Thread button — opens the thread popup from the message list
+        // so the user can see all messages in the conversation. Works from
+        // the viewer even when thread-grouping is off.
+        const threadBtn = document.getElementById("mv-view-thread");
+        if (threadBtn) {
+            const tid = msg.threadId || "";
+            if (tid) {
+                threadBtn.hidden = false;
+                threadBtn.onclick = async () => {
+                    const { showThreadPopup } = await import("./message-list.js");
+                    await showThreadPopup(threadBtn, { accountId, threadId: tid });
+                };
+            }
+            else {
+                threadBtn.hidden = true;
+            }
+        }
         // View Source button — shows .eml file path
         const srcBtn = document.getElementById("mv-view-source");
         if (srcBtn) {

package/client/index.html

@@ -134,6 +134,7 @@
                     <button class="tb-btn" id="btn-spam" title="Mark as spam — move to configured spam folder" hidden>⚠</button>
                     <button class="tb-btn" id="btn-flag" title="Flag">⚑</button>
                     <button class="tb-btn" id="btn-mark-unread" title="Mark unread (R)">◉</button>
+                    <button class="tb-btn" id="mv-view-thread" title="View thread (conversation)" hidden>💬</button>
                     <span style="flex:1"></span>
                     <button class="mv-action mv-action-primary" id="mv-edit-draft" hidden>Edit & Send</button>
                     <a class="mv-unsubscribe" id="mv-unsubscribe" hidden>Unsubscribe</a>
@@ -169,7 +170,10 @@
             <div class="cal-side-empty">Loading…</div>
         </div>
         <footer class="cal-side-foot">
-            <label><input type="checkbox" id="cal-side-show-done"> Show completed Tasks</label>
+            <div class="cal-side-task-header-row">
+                <label><input type="checkbox" id="cal-side-show-done"> Show completed Tasks</label>
+                <button class="cal-side-new" id="cal-side-new-task" title="New task">＋ Task</button>
+            </div>
             <div class="cal-side-tasks" id="cal-side-tasks"></div>
         </footer>
     </aside>

package/client/lib/api-client.js

@@ -134,10 +134,41 @@ export function getSyncPending() {
 export function getDiagnostics() {
     return ipc().getDiagnostics?.() ?? Promise.resolve([]);
 }
-/** Account marked `primary: true` in accounts.jsonc — used by Calendar /
- *  Tasks / Contacts to pick which Google account's data to show. */
-export function getPrimaryAccount() {
-    return ipc().getPrimaryAccount?.() ?? Promise.resolve(null);
+/** Account that supplies `feature` data (calendar / tasks / contacts).
+ *  Resolution: per-feature primary flag → catch-all `primary` → first account.
+ *  Pass e.g. "calendar" to honor `primaryCalendar:true` overrides; omit for
+ *  back-compat single-flag behavior. */
+export function getPrimaryAccount(feature) {
+    return ipc().getPrimaryAccount?.(feature) ?? Promise.resolve(null);
+}
+// Calendar / Tasks: two-way cache. Reads return local-cached rows; writes
+// commit locally and queue a push to Google. Service layer handles drain.
+export function getCalendarEvents(fromMs, toMs) {
+    return ipc().getCalendarEvents?.(fromMs, toMs) ?? Promise.resolve([]);
+}
+export function createCalendarEvent(ev) {
+    return ipc().createCalendarEvent?.(ev);
+}
+export function updateCalendarEvent(uuid, patch) {
+    return ipc().updateCalendarEvent?.(uuid, patch);
+}
+export function deleteCalendarEvent(uuid) {
+    return ipc().deleteCalendarEvent?.(uuid);
+}
+export function getTasks(includeCompleted = false) {
+    return ipc().getTasks?.(includeCompleted) ?? Promise.resolve([]);
+}
+export function createTask(t) {
+    return ipc().createTask?.(t);
+}
+export function updateTask(uuid, patch) {
+    return ipc().updateTask?.(uuid, patch);
+}
+export function deleteTask(uuid) {
+    return ipc().deleteTask?.(uuid);
+}
+export function drainStoreSync() {
+    return ipc().drainStoreSync?.();
 }
 export function getOutboxStatus() {
     return ipc().getOutboxStatus();

package/client/lib/mailxapi.js

@@ -109,6 +109,19 @@
         getThreadMessages: function(accountId, threadId) {
             return callNode("getThreadMessages", { accountId: accountId, threadId: threadId });
         },
+        // Calendar / Tasks two-way cache. Reads return local DB immediately;
+        // writes commit locally and queue a push-to-Google action.
+        getCalendarEvents: function(fromMs, toMs) {
+            return callNode("getCalendarEvents", { fromMs: fromMs, toMs: toMs });
+        },
+        createCalendarEvent: function(ev) { return callNode("createCalendarEvent", ev); },
+        updateCalendarEvent: function(uuid, patch) { return callNode("updateCalendarEvent", { uuid: uuid, patch: patch }); },
+        deleteCalendarEvent: function(uuid) { return callNode("deleteCalendarEvent", { uuid: uuid }); },
+        getTasks: function(includeCompleted) { return callNode("getTasks", { includeCompleted: !!includeCompleted }); },
+        createTask: function(t) { return callNode("createTask", t); },
+        updateTask: function(uuid, patch) { return callNode("updateTask", { uuid: uuid, patch: patch }); },
+        deleteTask: function(uuid) { return callNode("deleteTask", { uuid: uuid }); },
+        drainStoreSync: function() { return callNode("drainStoreSync"); },
         readJsoncFile: function(name) {
             return callNode("readJsoncFile", { name: name });
         },
@@ -160,7 +173,7 @@
         getSyncPending: function() { return callNode("getSyncPending"); },
         getOutboxStatus: function() { return callNode("getOutboxStatus"); },
         getDiagnostics: function() { return callNode("getDiagnostics"); },
-        getPrimaryAccount: function() { return callNode("getPrimaryAccount"); },
+        getPrimaryAccount: function(feature) { return callNode("getPrimaryAccount", { feature: feature }); },
         listQueuedOutgoing: function() { return callNode("listQueuedOutgoing"); },
         cancelQueuedOutgoing: function(p) { return callNode("cancelQueuedOutgoing", { path: p }); },
         reauthenticate: function(accountId) { return callNode("reauthenticate", { accountId: accountId }); },

package/client/styles/components.css

@@ -788,6 +788,24 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     opacity: 0.5;
 }
 
+/* Reply marker — messages whose In-Reply-To points at another message get a
+   subtle left-edge accent so threaded replies visibly distinguish from top-
+   level posts without needing thread-grouping mode on. Works regardless of
+   whether thread-grouping is enabled. */
+.ml-row.is-reply::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 2px;
+    bottom: 2px;
+    width: 2px;
+    background: oklch(0.70 0.12 250);  /* muted blue */
+    border-radius: 0 1px 1px 0;
+    pointer-events: none;
+    opacity: 0.5;
+}
+.ml-row { position: relative; }
+
 /* S1 slice C — local action (move/flag/delete) queued but server hasn't
    ACK'd. Reuses the same date-column dot as the download indicator so
    "still on client, not yet on server" sits in the same visual slot as

package/client/styles/layout.css

@@ -44,15 +44,17 @@ body.calendar-sidebar-on {
 .main-area { grid-area: main; }
 .status-bar { grid-area: status; }
 
-/* Vertical icon rail (Dovecot/Thunderbird-style). Always visible on
-   wide+medium tiers; collapses on narrow (icons move into the hamburger
-   menu — TBD; for now hidden on narrow). */
+/* Vertical icon rail — Thunderbird Supernova style: dark background with
+   light icons so the rail reads as "chrome" and contrasts visibly against
+   the content area (whether the app's in light or dark theme). Always
+   visible on wide+medium tiers; hidden on narrow (icons fold into
+   hamburger — TBD). */
 .icon-rail {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    background: var(--color-bg-alt, #f4f4f5);
-    border-right: 1px solid var(--color-border);
+    background: oklch(0.25 0.01 250);
+    border-right: 1px solid oklch(0.18 0.01 250);
     padding: 6px 0;
     overflow: hidden;
 }
@@ -71,16 +73,21 @@ body.calendar-sidebar-on {
     background: transparent;
     cursor: pointer;
     font-size: 16px;
-    color: var(--color-text);
+    color: oklch(0.88 0.01 250);
     border-left: 3px solid transparent;
-    transition: background 0.12s, border-color 0.12s;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
 }
 .rail-btn:hover:not([disabled]) {
-    background: var(--color-hover, rgba(0,0,0,0.06));
+    background: oklch(0.32 0.02 250);
+    color: oklch(0.96 0.01 250);
 }
 .rail-btn[data-active="true"] {
-    background: var(--color-hover, rgba(0,0,0,0.06));
-    border-left-color: var(--color-accent, #1a6dd4);
+    background: oklch(0.35 0.03 250);
+    color: oklch(0.98 0.01 250);
+    border-left-color: var(--color-accent, #4a9cff);
+}
+.rail-btn[disabled] {
+    color: oklch(0.55 0.01 250);
 }
 .rail-btn[disabled] {
     opacity: 0.35;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.377",
+  "version": "1.0.379",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",

package/packages/mailx-imap/index.js

@@ -564,7 +564,11 @@ export class ImapManager extends EventEmitter {
                 const hasToken = fs.existsSync(path.join(tokenDir, "oauth-token.json"));
                 const TOKEN_FETCH_TIMEOUT_MS = hasToken ? 30_000 : 120_000;
                 const authPromise = authenticateOAuth(credPath, {
-                    scope: "https://mail.google.com/ https://www.googleapis.com/auth/contacts.readonly https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/drive",
+                    // Scope set covers two-way sync of all mailx-managed local
+                    // stores: mail (mail.google.com), contacts (full, not
+                    // readonly — we write edits back), calendar (full), tasks
+                    // (full), drive (for shared accounts.jsonc).
+                    scope: "https://mail.google.com/ https://www.googleapis.com/auth/contacts https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/tasks https://www.googleapis.com/auth/drive",
                     tokenDirectory: tokenDir,
                     credentialsKey: "installed",
                     loginHint: account.imap.user,

package/packages/mailx-service/google-sync.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Google Calendar / Tasks / People (Contacts) two-way sync helpers.
+ *
+ * Used by MailxService to push local edits to Google and pull server
+ * changes into the local cache. All functions take a `getToken` function
+ * and a fetch implementation so they stay platform-agnostic (Node uses
+ * global `fetch` on Node 18+; browsers use window.fetch).
+ *
+ * Error handling: throws on network / HTTP errors. Caller catches and
+ * either retries via the store_sync drainer or surfaces to the UI.
+ */
+type TokenProvider = () => Promise<string>;
+export interface GCalEvent {
+    id: string;
+    summary: string;
+    start: {
+        dateTime?: string;
+        date?: string;
+    };
+    end: {
+        dateTime?: string;
+        date?: string;
+    };
+    location?: string;
+    description?: string;
+    etag?: string;
+}
+export declare function listCalendarEvents(tokenProvider: TokenProvider, fromMs: number, toMs: number, calendarId?: string): Promise<GCalEvent[]>;
+export declare function createCalendarEvent(tokenProvider: TokenProvider, event: any, calendarId?: string): Promise<GCalEvent>;
+export declare function updateCalendarEvent(tokenProvider: TokenProvider, eventId: string, event: any, calendarId?: string): Promise<GCalEvent>;
+export declare function deleteCalendarEvent(tokenProvider: TokenProvider, eventId: string, calendarId?: string): Promise<void>;
+export interface GTask {
+    id: string;
+    title: string;
+    notes?: string;
+    due?: string;
+    completed?: string;
+    status?: "needsAction" | "completed";
+    etag?: string;
+}
+export declare function listTasks(tokenProvider: TokenProvider, listId?: string, showCompleted?: boolean): Promise<GTask[]>;
+export declare function createTask(tokenProvider: TokenProvider, task: any, listId?: string): Promise<GTask>;
+export declare function updateTask(tokenProvider: TokenProvider, taskId: string, task: any, listId?: string): Promise<GTask>;
+export declare function deleteTask(tokenProvider: TokenProvider, taskId: string, listId?: string): Promise<void>;
+export declare function createContact(tokenProvider: TokenProvider, person: any): Promise<any>;
+export declare function updateContact(tokenProvider: TokenProvider, resourceName: string, updatePersonFields: string, person: any): Promise<any>;
+export declare function deleteContact(tokenProvider: TokenProvider, resourceName: string): Promise<void>;
+export declare function calendarEventToLocal(ev: GCalEvent, accountId: string): {
+    providerId: string;
+    accountId: string;
+    title: string;
+    startMs: number;
+    endMs: number;
+    allDay: boolean;
+    location: string;
+    notes: string;
+    etag: string;
+};
+export declare function localToCalendarEvent(local: {
+    title: string;
+    startMs: number;
+    endMs: number;
+    allDay?: boolean;
+    location?: string;
+    notes?: string;
+}): any;
+export declare function taskToLocal(t: GTask, accountId: string): {
+    providerId: string;
+    accountId: string;
+    title: string;
+    notes: string;
+    dueMs: number | undefined;
+    completedMs: number | undefined;
+    etag: string;
+};
+export declare function localToTask(local: {
+    title: string;
+    notes?: string;
+    dueMs?: number;
+    completedMs?: number;
+}): any;
+export {};
+//# sourceMappingURL=google-sync.d.ts.map