@bobfrankston/rmfmail 1.1.44 → 1.1.49

package/client/components/calendar-sidebar.ts

@@ -16,7 +16,7 @@
 
 import {
     getPrimaryAccount,
-    getCalendarEvents, createCalendarEvent,
+    getCalendarEvents, getCalendars, createCalendarEvent,
     getTasks, createTask, updateTask, deleteTask,
     reauthGoogleScopes,
     getSettings, saveSettings,
@@ -61,6 +61,140 @@ let viewYear = new Date().getFullYear();
 let viewMonth = new Date().getMonth();
 let viewDay = new Date().getDate();
 let lastEvents: CalEvent[] = [];
+/** 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: Array<{ uuid: string; title: string; dueMs?: number }> = [];
+
+// ── Per-calendar metadata ─────────────────────────────────────────────
+// The user curates which calendars exist by selecting them in Google
+// Calendar; mailx enumerates them via getCalendars() and renders one
+// checkbox + icon per calendar. Holiday calendars are no longer hard-coded.
+
+type CalKind = "personal" | "usHoliday" | "jewishHoliday" | "birthday" | "otherHoliday" | "other";
+
+interface CalInfo {
+    id: string;
+    name: string;
+    color: string;
+    primary: boolean;
+}
+
+/** 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. */
+const calById = new Map<string, CalInfo>();
+let calendarList: CalInfo[] = [];
+/** Calendar IDs the user has hidden in mailx (still selected in Google —
+ *  hidden is a display filter, not a fetch filter). Persisted in
+ *  settings.calendar.hiddenCalendars. */
+let hiddenCalendars = new Set<string>();
+
+/** Classify a calendar by its Google id. Birthdays live on Google's
+ *  auto `addressbook#contacts` calendar; holiday calendars carry
+ *  `#holiday@group.v.calendar.google.com`. The personal calendar is the
+ *  `primary` one. Everything else is a generic named calendar. */
+function calendarKind(id: string, primary: boolean): CalKind {
+    if (primary) return "personal";
+    const c = (id || "").toLowerCase();
+    if (c.includes("addressbook#contacts")) return "birthday";
+    if (c.includes("#holiday@") || c.includes("holiday@group")) {
+        if (c.includes("usa")) return "usHoliday";
+        if (c.includes("judaism") || c.includes("jewish")) return "jewishHoliday";
+        return "otherHoliday";
+    }
+    return "other";
+}
+
+/** Icon markup for a calendar: blue dot = personal, themed emoji for
+ *  holiday/birthday calendars, monogram badge (first letter in a circle
+ *  tinted with the Google calendar color) for any other named calendar. */
+function calIconHtml(info: CalInfo): string {
+    const kind = calendarKind(info.id, info.primary);
+    const t = escapeHtml(info.name);
+    if (kind === "personal")      return `<span class="cal-ico cal-ico-dot" title="${t}"></span>`;
+    if (kind === "usHoliday")     return `<span class="cal-ico cal-ico-emoji" title="${t}">🇺🇸</span>`;
+    if (kind === "jewishHoliday") return `<span class="cal-ico cal-ico-emoji" title="${t}">✡️</span>`;
+    if (kind === "birthday")      return `<span class="cal-ico cal-ico-emoji" title="${t}">🎂</span>`;
+    if (kind === "otherHoliday")  return `<span class="cal-ico cal-ico-emoji" title="${t}">✦</span>`;
+    const letter = escapeHtml((info.name.trim()[0] || "?").toUpperCase());
+    const color = info.color || "#7a7a7a";
+    return `<span class="cal-ico cal-ico-mono" style="background:${escapeHtml(color)}" title="${t}">${letter}</span>`;
+}
+
+/** Resolve an event's `calendarId` to a CalInfo. Falls back to a
+ *  synthesised entry (pattern-based kind, generic monogram) when the id
+ *  isn't in the enumerated list — e.g. a stale row, or before
+ *  getCalendars() has resolved. */
+function calInfoFor(calendarId: string | undefined): CalInfo {
+    const id = calendarId || "primary";
+    const found = calById.get(id);
+    if (found) return found;
+    return { id, name: (id.split("@")[0] || id), color: "", primary: id === "primary" };
+}
+
+function isCalHidden(calendarId: string | undefined): boolean {
+    return hiddenCalendars.has(calInfoFor(calendarId).id);
+}
+
+async function loadHiddenCalendars(): Promise<void> {
+    try {
+        const s: any = await getSettings();
+        const arr = s?.calendar?.hiddenCalendars;
+        hiddenCalendars = new Set(Array.isArray(arr) ? arr : []);
+    } catch { hiddenCalendars = new Set(); }
+}
+
+async function saveHiddenCalendars(): Promise<void> {
+    try {
+        const s: any = await getSettings();
+        s.calendar = { ...(s.calendar || {}), hiddenCalendars: [...hiddenCalendars] };
+        await saveSettings(s);
+    } catch (e: any) { console.error("[cal] save hiddenCalendars failed:", e); }
+}
+
+/** Pull the user's selected Google calendars and render the per-calendar
+ *  checkbox list. Each row toggles `hiddenCalendars` (a display filter —
+ *  instant, no Google round-trip, no re-fetch). Called on init and on
+ *  manual refresh; cheap enough but not run on every nav click. */
+async function renderCalendarList(): Promise<void> {
+    const host = document.getElementById("cal-side-calendars");
+    let list: CalInfo[] = [];
+    try {
+        list = await getCalendars() as CalInfo[];
+    } catch { /* offline / no calendar scope — leave the list empty */ }
+    calendarList = list;
+    calById.clear();
+    for (const c of list) {
+        calById.set(c.id, c);
+        if (c.primary) calById.set("primary", c);
+    }
+    if (host) {
+        if (list.length === 0) {
+            host.innerHTML = "";
+        } else {
+            // 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)}">
+                <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>
+            </label>`).join("");
+            host.querySelectorAll<HTMLInputElement>(".cal-side-cal-check").forEach(cb => {
+                cb.addEventListener("change", async () => {
+                    const id = cb.dataset.calId || "";
+                    if (cb.checked) hiddenCalendars.delete(id);
+                    else hiddenCalendars.add(id);
+                    await saveHiddenCalendars();
+                    renderEvents(lastEvents);   // re-filter instantly
+                });
+            });
+        }
+    }
+    // Repaint events so rows pick up proper icons now the list is known.
+    if (lastEvents.length > 0) renderEvents(lastEvents);
+}
 
 // Set of selected task UUIDs. Persists across renderTasks() calls so the
 // user keeps their selection when a re-render happens (e.g., after a
@@ -151,10 +285,28 @@ function renderHead(): void {
     dateEl.innerHTML = `<strong>${d.getDate()}</strong> ${d.toLocaleDateString(undefined, { weekday: "short" })} <span class="cal-side-date-month">${d.toLocaleDateString(undefined, { month: "short", year: "numeric" })}</span>`;
 }
 
+/** Markup for one overdue-task row (pinned at the top of the calendar). */
+function overdueTaskRowHtml(t: { uuid: string; title: string; dueMs?: number }): string {
+    let dueLabel = "";
+    if (t.dueMs) {
+        const d = new Date(t.dueMs);
+        const sameYear = d.getFullYear() === new Date().getFullYear();
+        dueLabel = sameYear ? `${d.getMonth() + 1}/${d.getDate()}` : d.toISOString().slice(0, 10);
+    }
+    return `<div class="cal-side-task cal-side-task-overdue" data-uuid="${escapeHtml(t.uuid)}">
+        <input type="checkbox" class="cal-side-overdue-check" title="Mark done">
+        <span class="cal-side-task-title">${escapeHtml(t.title)}</span>
+        <span class="cal-side-task-due overdue">${escapeHtml(dueLabel)}</span>
+    </div>`;
+}
+
 function renderEvents(events: CalEvent[]): void {
     const body = document.getElementById("cal-side-body");
     if (!body) return;
-    if (events.length === 0) {
+    // Drop events from calendars the user has hidden in mailx.
+    events = events.filter(e => !isCalHidden(e.calendarId));
+    const overdue = lastOverdueTasks;
+    if (events.length === 0 && overdue.length === 0) {
         body.innerHTML = `<div class="cal-side-empty">No upcoming events. Click + New event to add one.</div>`;
         return;
     }
@@ -196,12 +348,21 @@ function renderEvents(events: CalEvent[]): void {
     }
 
     let html = "";
+
+    // Overdue tasks pinned to the very top — a persistent "behind on these"
+    // block. Marking one done (the checkbox) completes it in Google and it
+    // drops off on the next render.
+    if (overdue.length > 0) {
+        html += `<div class="cal-side-day cal-side-day-overdue">Overdue tasks</div>`;
+        for (const t of overdue) html += overdueTaskRowHtml(t);
+    }
+
     if (dailyHeads.length > 0) {
         html += `<div class="cal-side-day cal-side-day-daily">Daily</div>`;
         for (const e of dailyHeads) {
             const link = e.htmlLink || "";
             html += `<div class="cal-side-event" data-id="${e.id}" data-link="${escapeHtml(link)}" ${link ? 'title="Click to open in Google Calendar"' : ""}>
-                <span class="cal-side-event-dot ${e.source === "google" ? "g" : "l"}"></span>
+                ${calIconHtml(calInfoFor(e.calendarId))}
                 <span class="cal-side-event-time">${escapeHtml(formatTime(e))}</span>
                 <span class="cal-side-event-title">${escapeHtml(e.title)}<span class="cal-side-event-recur" title="Daily">↻</span></span>
             </div>`;
@@ -214,10 +375,13 @@ function renderEvents(events: CalEvent[]): void {
     for (const e of events) {
         // Filter out daily-grouped instances — they're shown once at top.
         if (e.recurringEventId && dailyKeys.has(e.recurringEventId)) continue;
-        // Holidays alone get the 2-week cap. Recurring events follow the
-        // user's overall horizon (a weekly meeting whose next occurrence
-        // is day 16 should still render in a 30-day view).
-        if (e.isHoliday && e.start > holidayCutoff) continue;
+        const info = calInfoFor(e.calendarId);
+        const kind = calendarKind(info.id, info.primary);
+        const isHolidayKind = kind === "usHoliday" || kind === "jewishHoliday" || kind === "otherHoliday";
+        // Holiday calendars get the 2-week cap — they otherwise clutter a
+        // long horizon. Birthdays and recurring events follow the user's
+        // overall horizon.
+        if (isHolidayKind && e.start > holidayCutoff) continue;
         const d = new Date(e.start);
         const dayKey = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
         if (dayKey !== lastDayKey) {
@@ -226,44 +390,19 @@ function renderEvents(events: CalEvent[]): void {
         }
         const recurMark = e.recurringEventId ? `<span class="cal-side-event-recur" title="Recurring event">↻</span>` : "";
         const link = e.htmlLink || "";
-        // Distinguish holiday sources for coloring: US (en.usa) → light
-        // green; Jewish (en.jewish) → light blue. Anything else falls
-        // through to a generic "h" class so a future calendar still gets
-        // marked-as-holiday styling even if it isn't specifically themed.
-        let holidayKind: string | undefined;
-        if (e.isHoliday) {
-            const cid = (e.calendarId || "").toLowerCase();
-            if (cid.includes("usa")) holidayKind = "us";
-            // Match both `en.judaism` (the actually-clean Jewish-only
-            // calendar) and `en.jewish` (mis-curated by Google, retained
-            // here so any leftover rows from the prior calendar ID still
-            // render with the right symbol until reconcile evicts them).
-            else if (cid.includes("judaism") || cid.includes("jewish")) holidayKind = "jewish";
-            else holidayKind = "other";
-        }
-        const holidayAttr = e.isHoliday ? ` data-holiday="1" data-holiday-kind="${holidayKind}"` : "";
         const recurAttr = e.recurringEventId ? ' data-recurring="1"' : "";
-        // Holidays don't get the Google Calendar deep-link (it's read-only) —
-        // suppress data-link and the "Click to open" hint for those rows.
-        const clickable = !e.isHoliday;
-        const titleAttr = clickable && link ? 'title="Click to open in Google Calendar"' : "";
-        const dataLink = clickable ? `data-link="${escapeHtml(link)}"` : "";
-        // Holidays render as a single full-width row (no time / dot
-        // columns — the day header already gives the date, and there's
-        // typically no useful clock time). Regular events keep the
-        // existing dot/time/title columns. A leading symbol identifies
-        // the source at a glance: 🇺🇸 for US (federal-secular), Star of
-        // David for Jewish, generic ✦ otherwise.
-        if (e.isHoliday) {
-            const symbol = holidayKind === "us"     ? "🇺🇸"
-                         : holidayKind === "jewish" ? "✡️"
-                         : "✦";
-            html += `<div class="cal-side-event"${holidayAttr} data-id="${e.id}">
-                <span class="cal-side-event-title cal-side-event-holiday-title"><span class="cal-side-event-holiday-symbol">${symbol}</span> ${escapeHtml(e.title)}</span>
+        // Holiday + birthday calendars render as a single full-width row
+        // (all-day, no useful clock time) led by the calendar's icon.
+        // Regular events keep the icon/time/title columns and the
+        // click-to-open-in-Google deep link.
+        if (isHolidayKind || kind === "birthday") {
+            html += `<div class="cal-side-event" data-holiday="1" data-holiday-kind="${kind}" data-id="${e.id}">
+                <span class="cal-side-event-title cal-side-event-holiday-title">${calIconHtml(info)} ${escapeHtml(e.title)}</span>
             </div>`;
         } else {
-            html += `<div class="cal-side-event" data-id="${e.id}"${recurAttr} ${dataLink} ${titleAttr}>
-                <span class="cal-side-event-dot ${e.source === "google" ? "g" : "l"}"></span>
+            const titleAttr = link ? 'title="Click to open in Google Calendar"' : "";
+            html += `<div class="cal-side-event" data-id="${e.id}"${recurAttr} data-link="${escapeHtml(link)}" ${titleAttr}>
+                ${calIconHtml(info)}
                 <span class="cal-side-event-time">${escapeHtml(formatTime(e))}</span>
                 <span class="cal-side-event-title">${escapeHtml(e.title)}${recurMark}</span>
             </div>`;
@@ -271,6 +410,18 @@ function renderEvents(events: CalEvent[]): void {
     }
     body.innerHTML = html;
 
+    // Overdue-task checkboxes — mark the task completed in Google (non-
+    // destructive; it survives in the Completed section) and re-render.
+    body.querySelectorAll<HTMLElement>(".cal-side-task-overdue").forEach(row => {
+        const uuid = row.dataset.uuid!;
+        row.querySelector<HTMLInputElement>(".cal-side-overdue-check")?.addEventListener("change", async () => {
+            await updateTask(uuid, { completedMs: Date.now() });
+            lastOverdueTasks = lastOverdueTasks.filter(t => t.uuid !== uuid);
+            renderEvents(lastEvents);
+            renderTasks();
+        });
+    });
+
     // 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.
@@ -309,10 +460,12 @@ function renderEvents(events: CalEvent[]): void {
     });
 }
 
-async function renderTasks(): Promise<void> {
+async function renderTasks(prefetched?: any[]): Promise<void> {
     const cb = document.getElementById("cal-side-show-done") as HTMLInputElement | null;
     const showDone = cb?.checked ?? false;
-    const tasks = await getTasks(showDone);
+    // Reuse the list refresh() already fetched (avoids a duplicate getTasks
+    // IPC + Google pull); fall back to fetching when called standalone.
+    const tasks = prefetched ?? await getTasks(showDone);
     const host = document.getElementById("cal-side-tasks");
     if (!host) return;
     if (tasks.length === 0) {
@@ -406,14 +559,30 @@ async function refresh(): Promise<void> {
     // sidebar stuck on its initial "Loading…" placeholder — that was the
     // "calendar shows nothing" symptom. Render an explicit state either
     // way: events on success, an error line on failure.
+    // Tasks are fetched ONCE here and handed to renderTasks() so the events
+    // pane and the task pane don't each fire their own getTasks() — that
+    // doubled the Google Tasks API call rate and helped trip the 429 storm.
+    let prefetchedTasks: any[] | undefined;
     try {
-        lastEvents = await fetchUpcoming(from);
+        const startOfToday = new Date(); startOfToday.setHours(0, 0, 0, 0);
+        const showDone = (document.getElementById("cal-side-show-done") as HTMLInputElement | null)?.checked ?? false;
+        const [events, tasks] = await Promise.all([
+            fetchUpcoming(from),
+            getTasks(showDone).catch(() => [] as any[]),
+        ]);
+        lastEvents = events;
+        prefetchedTasks = tasks as any[];
+        // Overdue tasks (due before today, not completed) pin to the top of
+        // the calendar list.
+        lastOverdueTasks = prefetchedTasks
+            .filter(t => t.dueMs && !t.completedMs && t.dueMs < startOfToday.getTime())
+            .map(t => ({ uuid: t.uuid, title: t.title, dueMs: t.dueMs }));
         renderEvents(lastEvents);
     } catch (e: any) {
         const body = document.getElementById("cal-side-body");
         if (body) body.innerHTML = `<div class="cal-side-empty cal-side-quota-error">Couldn't load calendar: ${escapeHtml(e?.message || String(e))}</div>`;
     }
-    renderTasks();
+    renderTasks(prefetchedTasks);
 }
 
 /** Open the natural-language new-event modal. The user types a free-form
@@ -562,6 +731,8 @@ export async function showCalendarSidebar(): Promise<void> {
     el.hidden = false;
     document.body.classList.add("calendar-sidebar-on");
     try { localStorage.setItem(SIDEBAR_PREF, "true"); } catch { /* */ }
+    await loadHiddenCalendars();
+    void renderCalendarList();   // async — repaints events when it resolves
     await refresh();
 }
 
@@ -631,7 +802,9 @@ export function initCalendarSidebar(): void {
         btn?.classList.add("cal-side-refreshing");
         if (btn) btn.disabled = true;
         try {
-            await refresh();
+            // Also re-enumerate calendars — the user may have selected /
+            // deselected one in Google since the sidebar opened.
+            await Promise.all([renderCalendarList(), refresh()]);
         } finally {
             setTimeout(() => {
                 btn?.classList.remove("cal-side-refreshing");
@@ -660,42 +833,10 @@ export function initCalendarSidebar(): void {
             refresh();
         });
     }
-    // Holiday-calendar toggles. Each lives in service settings (not
-    // localStorage) because the daemon's refresh loop decides which
-    // calendars to pull — the preference has to round-trip to it.
-    // Two separate Google public calendars today: US federal holidays
-    // and Jewish holidays. Generalization to arbitrary user-supplied
-    // calendars is filed as Q140 (low priority unless the audience
-    // broadens beyond Bob).
-    const wireHolidayCheckbox = (
-        cbId: string,
-        settingsKey: "showHolidays" | "showJewishHolidays",
-    ): void => {
-        const cb = document.getElementById(cbId) as HTMLInputElement | null;
-        if (!cb || (cb as any).__wired) return;
-        (cb as any).__wired = true;
-        // Race guard: the async getSettings() promise can resolve AFTER the
-        // user clicks the checkbox, overwriting their input with the prior
-        // value. If the user touched the checkbox while the initial load
-        // was in flight, drop the late initial value on the floor — the
-        // change handler has already taken control.
-        let userTouched = false;
-        getSettings().then((s: any) => {
-            if (userTouched) return;
-            cb.checked = !!s?.calendar?.[settingsKey];
-        }).catch(() => { /* */ });
-        cb.addEventListener("change", async () => {
-            userTouched = true;
-            try {
-                const s = await getSettings();
-                s.calendar = { ...(s.calendar || {}), [settingsKey]: cb.checked };
-                await saveSettings(s);
-            } catch (e: any) { console.error(`[cal] ${settingsKey} save failed:`, e); }
-            refresh();
-        });
-    };
-    wireHolidayCheckbox("cal-side-show-holidays", "showHolidays");
-    wireHolidayCheckbox("cal-side-show-jewish-holidays", "showJewishHolidays");
+    // Per-calendar checkboxes are generated dynamically from the user's
+    // selected Google calendars — see renderCalendarList(), driven from
+    // showCalendarSidebar() + the manual refresh button. No hard-coded
+    // holiday toggles any more.
     // Horizon input — how many days ahead to list events. Bounded 1..365.
     const horizonInput = document.getElementById("cal-side-horizon") as HTMLInputElement | null;
     if (horizonInput && !(horizonInput as any).__wired) {

package/client/components/message-viewer.js

@@ -1847,9 +1847,32 @@ function spawnDesktopPopout(msg, accountId) {
         wrapper.style.top = `${60 + existing * 28}px`;
         wrapper.style.right = `${20 + existing * 28}px`;
     }
-    void accountId; // accountId reserved for future per-account actions on the popout
+    // Action toolbar — Reply / Reply All / Forward / Delete, acting on THIS
+    // popped-out message. The pop-out can't reach app.ts's openCompose
+    // directly, so each button fires `mailx-popout-action`; app.ts routes it.
+    const toolbar = document.createElement("div");
+    toolbar.style.cssText = "display:flex;gap:6px;padding:6px 12px;border-bottom:1px solid var(--color-border, #ddd);flex-shrink:0;";
+    const mkPopoutBtn = (label, title, onClick) => {
+        const b = document.createElement("button");
+        b.textContent = label;
+        b.title = title;
+        b.style.cssText = "padding:4px 10px;font-size:13px;cursor:pointer;border:1px solid var(--color-border, #ccc);border-radius:4px;background:var(--color-bg, #fff);color:var(--color-text, #000);";
+        b.addEventListener("click", onClick);
+        return b;
+    };
+    const firePopoutAction = (action) => {
+        document.dispatchEvent(new CustomEvent("mailx-popout-action", { detail: { action, msg, accountId } }));
+    };
+    toolbar.appendChild(mkPopoutBtn("Reply", "Reply", () => firePopoutAction("reply")));
+    toolbar.appendChild(mkPopoutBtn("Reply All", "Reply to all", () => firePopoutAction("replyAll")));
+    toolbar.appendChild(mkPopoutBtn("Forward", "Forward", () => firePopoutAction("forward")));
+    toolbar.appendChild(mkPopoutBtn("Delete", "Delete this message", () => {
+        firePopoutAction("delete");
+        wrapper.remove(); // the message is gone — close its window too
+    }));
     wrapper.appendChild(titleBar);
     wrapper.appendChild(headerInfo);
+    wrapper.appendChild(toolbar);
     wrapper.appendChild(bodyContainer);
     document.body.appendChild(wrapper);
 }