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/tasks.js

@@ -6,13 +6,13 @@ const taskStore = []; // tasks on screen, so a tap can open the right one
 
 async function viewTasks() {
   const v = $('#view');
-  v.innerHTML = '<div class="wrap"><h1>Tasks</h1><p class="empty">Loading…</p></div>';
+  v.innerHTML = '<div class="wrap">' + plannerHead('tasks') + '<p class="empty">Loading…</p></div>';
   try {
     const { lists, icloud } = await jfetch('/api/tasks/lists');
     if (!location.hash.startsWith('#/tasks')) return;
     let cur = store.get('task_list'); if (!lists.some(l => l.id === cur)) cur = lists[0].id;
     const list = lists.find(l => l.id === cur);
-    v.innerHTML = `<div class="wrap"><h1>Tasks</h1>
+    v.innerHTML = `<div class="wrap">${plannerHead('tasks')}
       <div class="seg">${lists.map(l => `<a href="#" data-l="${esc(l.id)}" class="${l.id === cur ? 'on' : ''}">${esc(l.name)}${l.icloud ? ' (iCloud)' : ''}</a>`).join('')}<a href="#" id="nl2" aria-label="New list">+ List</a></div>
       <form id="qa" class="bar" style="margin:6px 0 12px;flex-wrap:nowrap"><input type="text" id="qt" placeholder="Add a task" autocomplete="off" style="flex:1"><button class="btn" aria-label="Add">${icon('check')}Add</button></form>
       <div id="tl"><p class="empty">Loading…</p></div>
@@ -27,7 +27,7 @@ async function viewTasks() {
       catch (err) { toast(err.message); }
     };
     loadTaskList(cur, list);
-  } catch (e) { v.innerHTML = `<div class="wrap"><h1>Tasks</h1><p class="err">${esc(e.message)}</p></div>`; }
+  } catch (e) { v.innerHTML = `<div class="wrap">${plannerHead('tasks')}<p class="err">${esc(e.message)}</p></div>`; }
 }
 
 async function loadTaskList(cur, list) {