@bobfrankston/rmfmail 1.2.316 → 1.2.318

package/client/components/calendar-sidebar.js

@@ -13,7 +13,7 @@
  * 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, getCalendarEvents, getCalendars, refreshCalendarNow, getTasks, createTask, updateTask, deleteTask, reauthGoogleScopes, getSettings, saveSettings, } from "../lib/api-client.js";
+import { getCalendarEvents, getCalendars, createCalendarEvent, deleteCalendarEvent, refreshCalendarNow, getTasks, createTask, updateTask, deleteTask, reauthGoogleScopes, getSettings, saveSettings, } from "../lib/api-client.js";
 import { showContextMenu, confirmAt } from "./context-menu.js";
 const SIDEBAR_PREF = "mailx-calendar-sidebar-on";
 const SHOW_RECURRING_PREF = "mailx-cal-show-recurring";
@@ -32,11 +32,40 @@ const HOLIDAY_HORIZON_MS = 14 * 86400_000;
 let viewYear = new Date().getFullYear();
 let viewMonth = new Date().getMonth();
 let viewDay = new Date().getDate();
+/** True once the reader steps to another day with ‹ ›; "Today" clears it.
+ *  While false the view FOLLOWS the calendar date: the app runs for days,
+ *  and the date above was fixed when this module loaded (Bob 2026-09-10:
+ *  "it is still showing me yesterday's calendar"). */
+let viewPinned = false;
+function followToday() {
+    if (viewPinned)
+        return;
+    const t = new Date();
+    viewYear = t.getFullYear();
+    viewMonth = t.getMonth();
+    viewDay = t.getDate();
+}
+/** Re-render at the next local midnight, then re-arm. A setInterval would
+ *  drift; computing the next midnight each time lands on it exactly. */
+function armMidnightRollover() {
+    const now = new Date();
+    const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 5);
+    window.setTimeout(() => { void refresh(); armMidnightRollover(); }, next.getTime() - now.getTime());
+}
 let lastEvents = [];
 /** Overdue tasks (due before today, not completed) — pinned to the top of
  *  the calendar list. Cached so renderEvents() can be re-run on a calendar
  *  visibility toggle without re-fetching tasks. */
 let lastOverdueTasks = [];
+/** Calendars a new event can be saved to, personal first. */
+function writableCalendars(list) {
+    return list
+        .filter(c => c.accessRole === "owner" || c.accessRole === "writer")
+        .sort((a, b) => (a.primary ? 0 : 1) - (b.primary ? 0 : 1) || a.name.localeCompare(b.name));
+}
+/** The calendar the last event was saved to — a per-machine convenience,
+ *  so a run of entries on a shared calendar does not mean re-picking it. */
+const LAST_CALENDAR_PREF = "mailx.calendar.lastCreateCalendar";
 /** Selected Google calendars, by id. The primary calendar is also keyed
  *  under the literal "primary" so legacy/stale rows (whose `calendar_id`
  *  predates per-calendar tagging) still resolve. */
@@ -144,7 +173,7 @@ async function renderCalendarList() {
         else {
             // Personal first, then alphabetical.
             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="${escapeHtml(c.name)}">
+            host.innerHTML = sorted.map(c => `<label class="cal-side-cal-row" title="${escapeHtml(c.name)} — untick to hide its events in this list. Which calendars are listed is set in Google Calendar: the ones selected there appear; use Refresh after changing it.">
                 <input type="checkbox" class="cal-side-cal-check" data-cal-id="${escapeHtml(c.id)}" ${hiddenCalendars.has(c.id) ? "" : "checked"}>
                 ${calIconHtml(c)}
                 <span class="cal-side-cal-name">${escapeHtml(c.name)}</span>
@@ -417,7 +446,9 @@ function renderEvents(events) {
             </div>`;
         }
         else {
-            const titleAttr = link ? 'title="Click to open in Google Calendar"' : "";
+            const titleAttr = link
+                ? 'title="Click to open in Google Calendar to edit it. Right-click for more."'
+                : 'title="Saved in rmfmail, syncing to Google — it can be opened there once it has synced. Right-click to delete."';
             html += `<div class="cal-side-event" data-id="${e.id}"${recurAttr} data-link="${escapeHtml(link)}" ${titleAttr}>
                 ${calIconHtml(info)}
                 <span class="cal-side-event-time">${escapeHtml(formatTime(e))}</span>
@@ -469,18 +500,43 @@ function renderEvents(events) {
         el.addEventListener("contextmenu", (e) => {
             e.preventDefault();
             const link = el.dataset.link;
+            const uuid = el.dataset.id || "";
+            const title = el.querySelector(".cal-side-event-title")?.textContent?.trim() || "this event";
             const items = [];
             if (link)
                 items.push({
-                    label: "View in browser",
+                    label: `Edit "${title}" in Google Calendar`,
                     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, { editTarget: e.target });
+            if (uuid) {
+                items.push({ label: "", action: () => { }, separator: true });
+                items.push({
+                    label: `Delete "${title}"`,
+                    tooltip: "Removes it from your calendar in rmfmail now and from Google when it syncs.",
+                    action: async () => {
+                        if (!await confirmAt(e.clientX, e.clientY, `Delete "${title}"`))
+                            return;
+                        try {
+                            await deleteCalendarEvent(uuid);
+                            const st = document.getElementById("status-sync");
+                            if (st)
+                                st.textContent = `Deleted event: ${title}`;
+                            await refresh();
+                        }
+                        catch (err) {
+                            const st = document.getElementById("status-sync");
+                            if (st)
+                                st.textContent = `Couldn't delete "${title}": ${err?.message || err}`;
+                            console.error("[calendar] delete failed:", err);
+                        }
+                    },
+                });
+            }
+            showContextMenu(e.clientX, e.clientY, items, { editTarget: e.target });
         });
     });
 }
@@ -595,6 +651,7 @@ async function renderTasks(prefetched) {
     });
 }
 async function refresh() {
+    followToday();
     renderHead();
     const from = new Date(viewYear, viewMonth, viewDay);
     // A throw here (IPC reject, daemon not ready) must NOT leave the
@@ -632,12 +689,15 @@ async function refresh() {
 /** Open the natural-language new-event modal. The user types a free-form
  *  description ("Lunch with John tomorrow at noon at Joe's"); we send it
  *  to aiTransform with action=extractEvent, get back structured fields
- *  (title/start/end/location/notes), and open Google Calendar's
- *  create-event URL with those fields pre-filled. The user reviews / edits
- *  / saves in Google's UI — that path keeps mailx out of the
- *  event-editor business and gets all the niceties (recurrence, guests,
- *  conferencing) for free. If AI is disabled or extraction fails, the raw
- *  text becomes the title and Google's own quick-add parser takes over. */
+ *  (title/start/end/location/notes), and SAVE them — a local row at once,
+ *  pushed to Google by the store-sync queue — exactly as the sidebar's
+ *  task editor does. Until 2026-09-10 this opened Google Calendar's
+ *  create page in the browser instead, and the reader had to save it
+ *  there, in whatever Google account the browser was signed into (Bob:
+ *  "add an event puts me into Google Calendar. It should just save the
+ *  event because I can easily edit it later"). If AI is disabled or the
+ *  parse fails, the dialog says so and offers "Create as text": the raw
+ *  text becomes the title of an all-day event today, to be edited. */
 function openNewEventDialog() {
     const backdrop = document.createElement("div");
     backdrop.className = "mailx-modal-backdrop";
@@ -649,12 +709,47 @@ function openNewEventDialog() {
     heading.textContent = "New event";
     const hint = document.createElement("div");
     hint.style.cssText = "font-size:0.9em;color:var(--color-text-muted);";
-    hint.textContent = "Describe the event in plain English — AI extracts the details and opens Google Calendar to confirm.";
+    hint.textContent = "Describe the event in plain English — AI extracts the details and saves it to your calendar. Edit it afterwards if it needs adjusting.";
     const ta = document.createElement("textarea");
     ta.style.cssText = "width:100%;min-height:120px;font:inherit;padding:8px;border-radius:4px;border:1px solid var(--color-border, #ccc);box-sizing:border-box;resize:vertical;";
     ta.placeholder = "Lunch with John tomorrow at noon at Joe's Pizza";
     const status = document.createElement("div");
     status.style.cssText = "min-height:1.2em;font-size:0.85em;color:var(--color-text-muted);";
+    // Which calendar. Offered only when Google says more than one can take
+    // an event (Bob 2026-09-10: "I want to start making more use of shared
+    // calendars"); with one there is nothing to choose and the row is not
+    // shown. The list is the one the sidebar already enumerated; fetched
+    // here only if the sidebar has not loaded it yet.
+    const calRow = document.createElement("label");
+    calRow.style.cssText = "display:flex;align-items:center;gap:8px;font-size:0.9em;";
+    calRow.title = "The calendar this event is saved to. Only calendars you can write to are listed; to add or share a calendar, do that in Google Calendar and press Refresh.";
+    const calSelect = document.createElement("select");
+    calSelect.style.cssText = "flex:1;font:inherit;padding:4px;";
+    calRow.append("Calendar", calSelect);
+    calRow.hidden = true;
+    const fillCalendars = (list) => {
+        const writable = writableCalendars(list);
+        calSelect.innerHTML = "";
+        let last = "";
+        try {
+            last = localStorage.getItem(LAST_CALENDAR_PREF) || "";
+        }
+        catch { /* per-viewer convenience only */ }
+        for (const c of writable) {
+            const opt = document.createElement("option");
+            opt.value = c.id;
+            opt.textContent = c.primary ? `${c.name} (personal)` : c.name;
+            if (c.id === last || (!last && c.primary))
+                opt.selected = true;
+            calSelect.append(opt);
+        }
+        calRow.hidden = writable.length < 2;
+    };
+    if (calendarList.length)
+        fillCalendars(calendarList);
+    else
+        getCalendars().then(list => { calendarList = list; fillCalendars(calendarList); })
+            .catch((e) => console.warn("[calendar] calendar list for the picker failed:", e?.message || e));
     const btnRow = document.createElement("div");
     btnRow.style.cssText = "display:flex;gap:8px;justify-content:flex-end;";
     const cancelBtn = document.createElement("button");
@@ -664,7 +759,7 @@ function openNewEventDialog() {
     createBtn.textContent = "Create";
     createBtn.style.cssText = "padding:6px 14px;font-weight:500;";
     btnRow.append(cancelBtn, createBtn);
-    panel.append(heading, hint, ta, status, btnRow);
+    panel.append(heading, hint, ta, calRow, status, btnRow);
     backdrop.append(panel);
     document.body.append(backdrop);
     setTimeout(() => ta.focus(), 0);
@@ -726,131 +821,89 @@ function openNewEventDialog() {
                 return;
             }
         }
-        // Build Google Calendar's create-event URL(s) — one per extracted
-        // event (the text may describe several). Always opens in browser
-        // for the user to confirm/edit/save. We never write to the local
-        // store from this path — the round-trip back via Google Calendar
-        // sync keeps state consistent and avoids duplicate events.
-        const api = window.mailxapi;
+        // Save each extracted event (the text may describe several) as a
+        // local row; the store-sync queue pushes it to Google and binds the
+        // provider id when that lands. Local-first: the row is in the
+        // sidebar before Google has heard of it. The saved title is named
+        // in the status line, never "saved" alone.
         const targets = events.length ? events : [null];
-        // The page opens in the browser's DEFAULT Google account, which need
-        // not be the one mailx's calendar reads (Bob 2026-09-10: "I just used
-        // the add event but don't see them on Google calendar"). authuser=
-        // names the account, so the event lands where the sidebar looks.
-        let authuser = "";
+        const saved = [];
+        const calendarId = calSelect.value || "primary";
+        const calendarName = calSelect.selectedOptions[0]?.textContent || "";
         try {
-            authuser = String((await getPrimaryAccount("calendar"))?.email || "");
-        }
-        catch (e) {
-            console.warn("[calendar] primary account lookup failed, opening without authuser:", e?.message || e);
+            localStorage.setItem(LAST_CALENDAR_PREF, calendarId);
         }
+        catch { /* per-viewer convenience only */ }
         for (const ev of targets) {
-            const url = buildGoogleEventUrl(ev, text, authuser);
-            if (api?.openExternal)
-                api.openExternal(url);
-            else
-                window.open(url, "_blank");
+            const row = { ...eventToLocalRow(ev, text), calendarId };
+            try {
+                await createCalendarEvent(row);
+                saved.push(row.title);
+            }
+            catch (e) {
+                // Stop at the first failure and leave the dialog open with the
+                // reason: a silent partial save is worse than none.
+                status.textContent = `Couldn't save "${row.title}": ${e?.message || e}`;
+                createBtn.disabled = false;
+                cancelBtn.disabled = false;
+                return;
+            }
         }
-        armPostCreateRefresh();
         close();
+        const st = document.getElementById("status-sync");
+        const where = calendarName && !calRow.hidden ? ` to ${calendarName}` : "";
+        if (st)
+            st.textContent = saved.length === 1 ? `Saved event${where}: ${saved[0]}` : `Saved ${saved.length} events${where}: ${saved.join("; ")}`;
+        await refresh();
     });
 }
-/** After handing an event to Google Calendar in the browser, pull it back
- *  as soon as it can exist: the next time this window regains focus (the
- *  reader saved in the browser and came back), and on a short schedule in
- *  case the browser sits on another monitor and focus never moves. Each
- *  pull goes through refreshCalendarNow, which has its own 20 s floor and
- *  emits calendarUpdated when rows changed — the sidebar re-renders from
- *  that event, not from here. Disarms after the window; a second create
- *  re-arms. (Bob 2026-09-10: "creating an event should trigger an
- *  immediate update for the calendar view".) */
-const POST_CREATE_REFRESH_DELAYS_MS = [45_000, 120_000, 300_000];
-let postCreateTimers = [];
-let postCreateFocusHandler = null;
-function armPostCreateRefresh() {
-    disarmPostCreateRefresh();
-    const pull = async (why) => {
-        try {
-            const r = await refreshCalendarNow();
-            if (!r?.ok)
-                console.log(`[calendar] post-create refresh (${why}) not started: ${r?.reason || "unknown"}`);
-        }
-        catch (e) {
-            console.warn(`[calendar] post-create refresh (${why}) failed:`, e?.message || e);
-        }
-    };
-    postCreateFocusHandler = () => { void pull("window focus"); };
-    window.addEventListener("focus", postCreateFocusHandler);
-    postCreateTimers = POST_CREATE_REFRESH_DELAYS_MS.map((ms, i) => window.setTimeout(() => {
-        void pull(`${ms / 1000} s after create`);
-        if (i === POST_CREATE_REFRESH_DELAYS_MS.length - 1)
-            disarmPostCreateRefresh();
-    }, ms));
-}
-function disarmPostCreateRefresh() {
-    for (const t of postCreateTimers)
-        window.clearTimeout(t);
-    postCreateTimers = [];
-    if (postCreateFocusHandler)
-        window.removeEventListener("focus", postCreateFocusHandler);
-    postCreateFocusHandler = null;
-}
-/** Compose Google Calendar's "render?action=TEMPLATE" URL with extracted
- *  fields. When `event` is null we still produce a useful URL — the raw
- *  description goes into `text=` (becomes the title) and Google's UI lets
- *  the user fill in dates manually. Times are emitted in compact form
- *  without `Z` so Google interprets them in the user's calendar timezone. */
-function buildGoogleEventUrl(event, fallbackText, authuser = "") {
-    const base = "https://calendar.google.com/calendar/render?action=TEMPLATE";
-    const params = [];
-    // Which Google account the page opens in — the one mailx's calendar
-    // reads, not whichever the browser signed in last (2026-09-10).
-    if (authuser)
-        params.push(`authuser=${encodeURIComponent(authuser)}`);
-    const fmt = (iso) => {
-        // ISO "2026-05-06T12:00:00" → "20260506T120000". Google accepts
-        // local-naive times in this form.
-        const m = iso.match(/(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2})(?::(\d{2}))?)?/);
-        if (!m)
-            return "";
-        const [, y, mo, d, hh, mm, ss] = m;
-        const date = `${y}${mo}${d}`;
-        if (!hh)
-            return date; // all-day form: dates=YYYYMMDD/YYYYMMDD
-        return `${date}T${hh}${mm}${ss || "00"}`;
-    };
-    if (event?.title)
-        params.push(`text=${encodeURIComponent(event.title)}`);
+/** The extracted event (wall-clock ISO strings in its own zone) as the
+ *  row createCalendarEvent takes (epoch ms). A null event — "Create as
+ *  text" — becomes an all-day event today titled with the raw text. */
+function eventToLocalRow(event, fallbackText) {
+    const startOfToday = new Date();
+    startOfToday.setHours(0, 0, 0, 0);
+    if (!event?.startISO) {
+        return { title: (event?.title || fallbackText).slice(0, 200), startMs: startOfToday.getTime(), endMs: startOfToday.getTime() + 86400_000, allDay: true };
+    }
+    const allDay = !!event.allDay || !event.startISO.includes("T");
+    const startMs = allDay ? new Date(event.startISO.slice(0, 10) + "T00:00:00").getTime() : wallClockToMs(event.startISO, event.timeZone);
+    let endMs;
+    if (event.endISO)
+        endMs = allDay ? new Date(event.endISO.slice(0, 10) + "T00:00:00").getTime() : wallClockToMs(event.endISO, event.timeZone);
     else
-        params.push(`text=${encodeURIComponent(fallbackText.slice(0, 200))}`);
-    if (event?.startISO) {
-        const startFmt = fmt(event.startISO);
-        // For all-day events Google wants `dates=YYYYMMDD/YYYYMMDD` where
-        // the end date is exclusive (next day). For timed events it's
-        // `YYYYMMDDTHHMMSS/YYYYMMDDTHHMMSS`. Default end = +1h timed,
-        // +1 day all-day.
-        if (event.allDay) {
-            const startDate = new Date(event.startISO + (event.startISO.includes("T") ? "" : "T00:00:00"));
-            const endDate = new Date(startDate.getTime() + 86400_000);
-            const endFmt = `${endDate.getFullYear()}${String(endDate.getMonth() + 1).padStart(2, "0")}${String(endDate.getDate()).padStart(2, "0")}`;
-            params.push(`dates=${startFmt}/${endFmt}`);
-        }
-        else {
-            const endFmt = event.endISO
-                ? fmt(event.endISO)
-                : fmt(new Date(new Date(event.startISO).getTime() + 3600_000).toISOString().slice(0, 19));
-            params.push(`dates=${startFmt}/${endFmt}`);
+        endMs = startMs + (allDay ? 86400_000 : 3600_000);
+    // An all-day end is exclusive; the extractor may hand back the same day
+    // for start and end, which would be a zero-length event.
+    if (allDay && endMs <= startMs)
+        endMs = startMs + 86400_000;
+    return { title: event.title || fallbackText.slice(0, 200), startMs, endMs, allDay, location: event.location || undefined, notes: event.notes || undefined };
+}
+/** Epoch ms for a wall-clock ISO string ("2026-09-12T09:00:00") read in
+ *  `timeZone` — an invite that says "9am Kuala Lumpur" stays 9am there.
+ *  Without a zone the string is read as local time, which is what
+ *  `new Date(iso)` does for an offset-less string. */
+function wallClockToMs(iso, timeZone) {
+    const local = new Date(iso).getTime();
+    if (!timeZone)
+        return local;
+    try {
+        // Offset of the zone at that instant: format the local guess back in
+        // the zone, and the difference is the correction. Two passes settle a
+        // guess that straddles a DST change.
+        let ms = local;
+        for (let i = 0; i < 2; i++) {
+            const parts = new Intl.DateTimeFormat("en-US", { timeZone, hourCycle: "h23", year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" })
+                .formatToParts(new Date(ms)).reduce((o, p) => (o[p.type] = p.value, o), {});
+            const asIfLocal = new Date(`${parts.year}-${parts.month}-${parts.day}T${parts.hour}:${parts.minute}:${parts.second}`).getTime();
+            ms += local - asIfLocal;
         }
+        return ms;
+    }
+    catch (e) {
+        console.warn(`[calendar] unknown time zone "${timeZone}", reading the time as local:`, e?.message || e);
+        return local;
     }
-    if (event?.location)
-        params.push(`location=${encodeURIComponent(event.location)}`);
-    if (event?.notes)
-        params.push(`details=${encodeURIComponent(event.notes)}`);
-    // Times above are wall-clock in the event's own zone (an invite that says
-    // "9am Kuala Lumpur" stays 9am); ctz tells Google which zone that is.
-    if (event?.timeZone)
-        params.push(`ctz=${encodeURIComponent(event.timeZone)}`);
-    return `${base}&${params.join("&")}`;
 }
 /** Show the sidebar (called from the View menu toggle). Idempotent. */
 export async function showCalendarSidebar() {
@@ -900,9 +953,24 @@ export function initCalendarSidebar() {
         el.__wired = true;
         el.addEventListener("click", fn);
     };
-    wireOnce("cal-side-prev", () => { const d = new Date(viewYear, viewMonth, viewDay - 1); viewYear = d.getFullYear(); viewMonth = d.getMonth(); viewDay = d.getDate(); refresh(); });
-    wireOnce("cal-side-next", () => { const d = new Date(viewYear, viewMonth, viewDay + 1); viewYear = d.getFullYear(); viewMonth = d.getMonth(); viewDay = d.getDate(); refresh(); });
-    wireOnce("cal-side-today", () => { const t = new Date(); viewYear = t.getFullYear(); viewMonth = t.getMonth(); viewDay = t.getDate(); refresh(); });
+    wireOnce("cal-side-prev", () => { viewPinned = true; const d = new Date(viewYear, viewMonth, viewDay - 1); viewYear = d.getFullYear(); viewMonth = d.getMonth(); viewDay = d.getDate(); refresh(); });
+    wireOnce("cal-side-next", () => { viewPinned = true; const d = new Date(viewYear, viewMonth, viewDay + 1); viewYear = d.getFullYear(); viewMonth = d.getMonth(); viewDay = d.getDate(); refresh(); });
+    wireOnce("cal-side-today", () => { viewPinned = false; followToday(); refresh(); });
+    if (!window.__mailxCalRolloverArmed) {
+        window.__mailxCalRolloverArmed = true;
+        armMidnightRollover();
+        // Coming back to mailx from elsewhere — Google Calendar in the
+        // browser, most likely — pull what changed there. The daemon's 20 s
+        // floor turns a flapping window into at most one call per 20 s.
+        window.addEventListener("focus", () => {
+            if (!isCalendarSidebarOn())
+                return;
+            void refreshCalendarNow().then(r => {
+                if (!r?.ok && r?.reason && !/refreshed \d+ s ago/.test(r.reason))
+                    console.log(`[calendar] focus refresh not started: ${r.reason}`);
+            }).catch((e) => console.warn("[calendar] focus refresh failed:", e?.message || e));
+        });
+    }
     wireOnce("cal-side-new", () => { openNewEventDialog(); });
     wireOnce("cal-side-new-task", async () => {
         const title = prompt("Task title:");
@@ -947,7 +1015,17 @@ export function initCalendarSidebar() {
         try {
             // Also re-enumerate calendars — the user may have selected /
             // deselected one in Google since the sidebar opened.
-            await Promise.all([renderCalendarList(), refresh()]);
+            // refreshCalendarNow is what makes this button honest: refresh()
+            // alone re-reads local rows, and the daemon's 5-minute throttle
+            // turned "Refresh events from Google" into a no-op most of the
+            // time (Bob 2026-09-10: "still showing me yesterday's calendar").
+            // Its emit re-renders the list when the pull changes anything.
+            const [, , pulled] = await Promise.all([renderCalendarList(), refresh(), refreshCalendarNow()]);
+            if (!pulled?.ok) {
+                const st = document.getElementById("status-sync");
+                if (st)
+                    st.textContent = `Calendar not pulled from Google: ${pulled?.reason || "unknown"}`;
+            }
         }
         finally {
             setTimeout(() => {