Planner: Calendar and Tasks in one menu entry, due tasks shown on the calendar; menu, More sheet and Home tiles grouped by kind

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/calendar.js

@@ -1,11 +1,12 @@
 'use strict';
 // ---- Calendar: agenda built from private ICS links (managed here; fetched and parsed by the server)
 const ymd = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-async function loadRange(start, days) {
+async function loadRange(start, days, withTasks = true) {
   const end = new Date(start); end.setDate(end.getDate() + days);
   const last = new Date(end.getTime() - 1);
   const q = new URLSearchParams({ from: start.getTime(), to: end.getTime() - 1, fd: ymd(start), td: ymd(last) });
-  const { events, errors } = await jfetch('/api/cal/events?' + q);
+  const [{ events, errors }, due] = await Promise.all([jfetch('/api/cal/events?' + q),
+    withTasks && allowed('tasks') ? jfetch(`/api/tasks/due?from=${ymd(start)}&to=${ymd(last)}`).catch(() => []) : []]);
   const byDay = new Map();
   const put = (k, e) => { if (!byDay.has(k)) byDay.set(k, []); byDay.get(k).push(e); };
   for (const e of events) {
@@ -13,16 +14,25 @@ async function loadRange(start, days) {
       for (let d = new Date(e.start + 'T00:00:00'); ymd(d) < e.end; d.setDate(d.getDate() + 1)) { const k = ymd(d); if (k >= ymd(start) && k <= ymd(last)) put(k, e); }
     } else put(ymd(new Date(e.start)), e);
   }
-  for (const list of byDay.values()) list.sort((a, b) => (b.allDay - a.allDay) || ((a.allDay ? 0 : a.start) - (b.allDay ? 0 : b.start)));
+  for (const t of due) { // tasks with a due date show up on that day, after the all-day events
+    if (!byDay.has(t.due)) byDay.set(t.due, []);
+    byDay.get(t.due).push({ task: true, t, title: t.title, color: '#8a93a6', allDay: true, start: t.due, end: t.due, cal: t.listName || 'Tasks', editable: true });
+  }
+  for (const list of byDay.values()) list.sort((a, b) => (b.allDay - a.allDay) || (!!a.task - !!b.task) || ((a.allDay ? 0 : a.start) - (b.allDay ? 0 : b.start)));
   return { byDay, errors, start };
 }
-const loadAgenda = days => { const start = new Date(); start.setHours(0, 0, 0, 0); return loadRange(start, days); };
+const loadAgenda = (days, withTasks = true) => { const start = new Date(); start.setHours(0, 0, 0, 0); return loadRange(start, days, withTasks); };
 const fmtTime = ms => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
 const evStore = []; // events currently on screen, so a tap can open the right one
 const evRow = e => { const i = evStore.push(e) - 1;
+  if (e.task) return `<div class="row it"><button class="ibtn tick" data-tt="${i}" aria-label="Mark done">${icon('check')}</button><button class="rmain" data-ei="${i}" style="text-align:left"><span class="grow"><b>${esc(e.title)}</b><small>Task due${e.t.repeat && e.t.repeat !== 'none' ? ' · repeats' : ''} · ${esc(e.cal)}</small></span></button></div>`;
   return `<button class="row" data-ei="${i}" style="text-align:left"><span class="dot" style="background:${esc(e.color)}"></span><span class="grow"><b>${esc(e.title)}</b>
   <small>${e.allDay ? 'All day' : fmtTime(e.start) + ' – ' + fmtTime(e.end)}${e.location ? ' · ' + esc(e.location) : ''} · ${esc(e.cal)}${e.series ? ' · repeats' : ''}</small></span>${e.editable ? icon('chev', 'chev') : ''}</button>`; };
-document.addEventListener('click', e => { const b = e.target.closest('[data-ei]'); if (b) openEvent(evStore[+b.dataset.ei]); });
+document.addEventListener('click', e => {
+  const tk = e.target.closest('[data-tt]');
+  if (tk) { const ev = evStore[+tk.dataset.tt]; tk.disabled = true; jfetch('/api/tasks/toggle', { method: 'POST', body: JSON.stringify({ list: ev.t.list, id: ev.t.id, href: ev.t.href, done: true }) }).then(r => { if (r && r.rolled) toast('Repeats: next due ' + r.rolled); route(); }).catch(err => { tk.disabled = false; toast(err.message); }); return; }
+  const b = e.target.closest('[data-ei]'); if (b) openEvent(evStore[+b.dataset.ei]);
+});
 const dayLabel = k => { const d = new Date(k + 'T00:00:00'), t = ymd(new Date()); const tm = new Date(); tm.setDate(tm.getDate() + 1);
   return (k === t ? 'Today · ' : k === ymd(tm) ? 'Tomorrow · ' : '') + d.toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' }); };
 
@@ -30,7 +40,7 @@ async function renderAgenda(el, mode) { // Home card (today only)
   if (!el) return;
   try {
     const cals = await jfetch('/api/cal/list');
-    const { byDay } = await loadAgenda(1);
+    const { byDay } = await loadAgenda(1, false); // (the Tasks card on Home already covers what is due)
     const list = byDay.get(ymd(new Date())) || [];
     if (cals.length < 2 && !list.length) return; // only the empty NE Hub calendar: say nothing
     if (!document.body.contains(el)) return;
@@ -44,7 +54,7 @@ const calState = { y: now0.getFullYear(), m: now0.getMonth(), sel: ymd(now0) };
 async function viewCalendar() {
   const mode = store.get('cal_view', 'month');
   const v = $('#view');
-  v.innerHTML = `<div class="wrap"><h1>Calendar</h1>
+  v.innerHTML = `<div class="wrap">${plannerHead('calendar')}
     <div class="seg">${[['month', 'Month'], ['week', 'Week'], ['day', 'Day'], ['agenda', 'Agenda']].map(([k, l]) => `<a href="#" data-v="${k}" class="${k === mode ? 'on' : ''}">${l}</a>`).join('')}</div>
     <div class="bar" style="margin:0 0 8px"><button class="btn" id="ne">${icon('cal')}Add event</button></div>
     <div id="cbody"><p class="empty">Loading…</p></div><div class="bar"><button class="btn ghost" id="mc">Manage calendars</button></div></div>`;
@@ -83,7 +93,7 @@ async function renderMonth() {
     cells.push(`<button class="cday${other ? ' dim' : ''}${k === today ? ' today' : ''}${k === calState.sel ? ' sel' : ''}" data-d="${k}" aria-label="${esc(d.toDateString())}, ${evs.length} events">
       <span class="dn">${d.getDate()}</span>
       <span class="dots">${evs.slice(0, 4).map(e => `<i style="background:${esc(e.color)}"></i>`).join('')}</span>
-      <span class="chips">${evs.slice(0, 3).map(e => `<em style="--c:${esc(e.color)}">${esc(e.title)}</em>`).join('')}${evs.length > 3 ? `<small>+${evs.length - 3} more</small>` : ''}</span></button>`);
+      <span class="chips">${evs.slice(0, 3).map(e => `<em style="--c:${esc(e.color)}">${e.task ? '☐ ' : ''}${esc(e.title)}</em>`).join('')}${evs.length > 3 ? `<small>+${evs.length - 3} more</small>` : ''}</span></button>`);
   }
   $('#cbody').innerHTML = `<div class="mhdr"><button class="ibtn" id="pm" aria-label="Previous month">${icon('back')}</button>
       <h2 style="margin:0;flex:1;text-align:center;font-size:17px;text-transform:none;letter-spacing:0;color:var(--text)">${first.toLocaleDateString([], { month: 'long', year: 'numeric' })}</h2>
@@ -109,6 +119,12 @@ const localStr = d => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.get
 
 function openEvent(e) {
   if (!e) return;
+  if (e.task) { // a task on the calendar: the normal task sheet, and the calendar refreshes when it closes
+    taskSheet({ ...e.t, repeat: e.t.repeat || 'none' }, e.t.list, { name: e.cal, local: String(e.t.list).startsWith('local:') });
+    const sh = document.getElementById('sheet'), mo = new MutationObserver(() => { if (!document.getElementById('sheet')) { mo.disconnect(); if (/^#\/calendar/.test(location.hash)) route(); } });
+    if (sh) mo.observe(document.body, { childList: true });
+    return;
+  }
   if (e.editable) return editEvent(e);
   const when = e.allDay ? 'All day' : new Date(e.start).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) + ' – ' + fmtTime(e.end);
   const el = openSheet(e.title, e.cal, `<div class="list" style="background:var(--panel2);border:0"><div class="row"><span class="grow"><b>When</b><small style="white-space:normal">${esc(when)}</small></span></div>