Planner: Add event sits on the same row as the Calendar | Tasks switch

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

public/calendar.js

@@ -54,9 +54,8 @@ 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">${plannerHead('calendar')}
+  v.innerHTML = `<div class="wrap">${plannerHead('calendar', `<button class="btn" id="ne">${icon('cal')}Add event</button>`)}
     <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>`;
   $('#ne').onclick = () => newEvent(mode === 'agenda' ? ymd(new Date()) : calState.sel);
   v.querySelectorAll('.seg a[data-v]').forEach(a => a.onclick = e => { e.preventDefault(); store.set('cal_view', a.dataset.v); viewCalendar(); });

public/planner.js

@@ -6,10 +6,11 @@ function viewPlanner(args = []) {
   const want = args[0] && ok.includes(args[0]) ? args[0] : store.get('planner_pane', ok[0]);
   location.replace('#/' + (ok.includes(want) ? want : ok[0] || 'home'));
 }
-/** The page heading, with a Calendar | Tasks switch when this person may use both. */
-function plannerHead(active) {
+/** The page heading, with a Calendar | Tasks switch when this person may use both. `extra` (a button, say) sits on the same row, at the right. */
+function plannerHead(active, extra = '') {
   try { localStorage.setItem(nk('planner_pane'), JSON.stringify(active)); } catch {}
   const panes = PLANNER_PANES.filter(p => allowed(p[0]));
-  if (panes.length < 2) return `<h1>${esc((PLANNER_PANES.find(p => p[0] === active) || [0, 'Planner'])[1])}</h1>`;
-  return `<h1>Planner</h1><div class="seg" role="tablist" aria-label="Planner">${panes.map(([k, l]) => `<a href="#/${k}" role="tab" aria-selected="${k === active}" class="${k === active ? 'on' : ''}">${l}</a>`).join('')}</div>`;
+  const seg = panes.length < 2 ? '' : `<div class="seg" role="tablist" aria-label="Planner">${panes.map(([k, l]) => `<a href="#/${k}" role="tab" aria-selected="${k === active}" class="${k === active ? 'on' : ''}">${l}</a>`).join('')}</div>`;
+  const title = panes.length < 2 ? (PLANNER_PANES.find(p => p[0] === active) || [0, 'Planner'])[1] : 'Planner';
+  return `<h1>${esc(title)}</h1>${seg || extra ? `<div class="prow">${seg}${extra}</div>` : ''}`;
 }

public/style.css

@@ -559,3 +559,6 @@ body.lyropen { overflow: hidden; }
 .ngrp span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
 body.nav-mini .ngrp { margin: 6px 14px; padding-top: 0; }
 body.nav-mini .ngrp span { display: none; }
+
+.prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
+.prow .seg { margin: 0; }