create-pmos 0.75.0 → 0.77.0

package/workspace/public/pm/phone-deck.js

@@ -1,51 +1,57 @@
-/* pm/phone-deck.js — a phone tab shows its cards one at a time (initiative workspace-phone-one-job, the PM's card model).
+/* pm/phone-deck.js — the head above a phone tab's list (initiative workspace-phone-scroll-layout).
  *
- * At a tab's root on a phone (≤760px), the list the tab's place already draws becomes a DECK: each card fills the screen,
- * a swipe or the pager's arrows bring the next one, and the deck head says which card of how many is on screen. The PM's
- * words: "I can't really focus on one thing at a time" with a list on every screen.
+ * At a tab's root on a phone (≤760px), the tab's place draws its own list, top to bottom, and only that list scrolls. This
+ * module draws the line above it (#mobDeck): how many things the list holds and, where the tab has a second view, a
+ * two-button switch to it, each button an icon and a short word.
  *
- * ONE RENDERER. Nothing here draws a card. The destinations draw exactly what they draw on a desktop (pm/mobile.js, "ONE
- * renderer, two shells"); this module marks the tab's own list as the deck's scroller and its own cards as the deck's
- * cards, and pm/mobile.css lays them out side by side with scroll snapping. A card's buttons are the card's own buttons.
+ * WHY NOT A DECK ANY MORE. Until 2026-10-07 this module turned the list into a deck of full-screen cards, side by side with
+ * scroll snapping (initiative workspace-phone-one-job). The PM reported that scrolling down a card "pages up" by itself,
+ * and that the empty space scrolls with the content. Both came from the deck: each card was a fixed-height box with its own
+ * vertical scroller inside a horizontal snap scroller, the deck re-snapped to "the card on screen" on every window resize
+ * (and a soft keyboard or Safari's toolbar resizes the window), and a short card left empty space that still scrolled. The
+ * PM chose one vertical list from a clickable mockup (its link is in the initiative record). Nothing here
+ * moves a scroll position.
  *
- *   Today        the Today cards (dest-today.js); the first card prepares the day while the day is not prepared.
- *                Second view: Day, the day section (today-day.js) with the goals, the calendar and the jobs.
- *   Initiatives  the Roadmap's cards, Now then Next then Later. Second view: All, the List.
- *   Board        the cards of the column on screen; the initiative picker and the column switch stay above them.
- *   Docs         the copies that need you. Second view: All, every copy.
- *   Reports and Agent have no deck: the report reads as a page, and Agent is the dock with its sessions.
+ * ONE RENDERER. Nothing here draws a row. The destinations draw exactly what they draw on a desktop (pm/mobile.js, "ONE
+ * renderer, two shells"); pm/mobile.css only sizes them for a thumb.
  *
- * The view a tab shows (Cards or its second view) lives in memory for this page only, so a phone never changes what a
- * desktop opens on. The card on screen is remembered by its key, so a destination that rebuilds its list (a poll, an
- * act on the card) keeps the PM where they were, or on the card that took the place of the one they acted on.
+ *   Agenda       Needs you (the Today cards) or My day (today-day.js: the goals, the calendar and the jobs).
+ *   Initiatives  Roadmap (Now, then Next, then Later) or All (the List).
+ *   Board        Board or Reports. Reports is a destination of its own with no tab (lib/mobile-nav.js TAB_OF), so this
+ *                switch changes the destination, and the Board tab stays lit.
+ *   Docs         Out of sync (the copies that need you) or All (every copy).
+ *   Agent has no head: it is the dock with its sessions.
+ *
+ * The view a tab shows lives in memory for this page only, so a phone never changes what a desktop opens on.
  */
 
 import { setDayForced } from './today-day.js';
-
-const DECKS = {
-  today: { views: [['cards', 'Cards'], ['day', 'Day']], scroller: '[data-today="needs"]', item: '[data-today-id]', key: 'data-today-id',
-    where: (i, n) => n ? `${i + 1} of ${n}` : 'Nothing needs you', second: 'Your day' },
-  initiatives: { views: [['cards', 'Cards'], ['all', 'All']], scroller: '[data-in-cols]', item: '[data-in-card], [data-in-unrecorded-card]', key: 'data-in-card',
-    where: (i, n, it) => n ? `${i + 1} of ${n}${it && it.getAttribute('data-horizon') ? ' · ' + label(it.getAttribute('data-horizon')) : ''}` : 'No initiatives', second: 'All initiatives' },
-  board: { scroller: '.bd-col--shown .bd-col__list', item: '[data-item]', key: 'data-item',
-    where: (i, n) => n ? `${i + 1} of ${n}` : 'No item here' },
-  docs: { views: [['cards', 'Cards'], ['all', 'All']], scroller: '.rp-docs-body', item: '.rp-docs-row', key: 'data-docs-doc',
-    where: (i, n) => n ? `${i + 1} of ${n} differ` : 'Every copy is the same', second: 'Every copy' },
+import { icon } from './icons.js';
+
+/* views: [id, word, icon]. A view whose id is a destination (Board's) switches the destination instead of the view. */
+const HEADS = {
+  today: { views: [['cards', 'Needs you', 'circle-alert'], ['day', 'My day', 'calendar']], scroller: '[data-today="needs"]', item: '[data-today-id]',
+    where: (n) => (n ? `${n} need${n === 1 ? 's' : ''} you` : 'Nothing needs you'), second: 'Your day' },
+  initiatives: { views: [['cards', 'Roadmap', 'target'], ['all', 'All', 'list']], scroller: '[data-in-cols]', item: '[data-in-card], [data-in-unrecorded-card]',
+    where: (n) => (n ? `${n} initiative${n === 1 ? '' : 's'}` : 'No initiatives'), second: 'All initiatives' },
+  board: { views: [['board', 'Board', 'square-kanban'], ['reports', 'Reports', 'chart-column']], dests: true, scroller: '.bd-col--shown .bd-col__list', item: '[data-item]',
+    where: (n) => (n ? `${n} item${n === 1 ? '' : 's'}` : 'No item here') },
+  reports: { views: [['board', 'Board', 'square-kanban'], ['reports', 'Reports', 'chart-column']], dests: true,
+    where: () => 'Reports' },
+  docs: { views: [['cards', 'Out of sync', 'circle-alert'], ['all', 'All', 'list']], scroller: '.rp-docs-body', item: '.rp-docs-row',
+    where: (n) => (n ? `${n} differ` : 'Every copy is the same'), second: 'Every copy' },
 };
-const label = (h) => h.charAt(0).toUpperCase() + h.slice(1);
 
 const view = { today: 'cards', initiatives: 'cards', docs: 'cards' };
-const at = {};          // dest -> { key, i }: the card on screen, by its key and its place
-let live = null;        // { dest, scroller } the deck being shown
+let shown = null;       // the destination whose head is drawn
 let wasOn = false;
-let ctx = null;         // { rerender, place: () => the place panel }
+let ctx = null;         // { rerender, apply, go(dest), place: () => the place panel }
 let observer = null;
 let queued = false;
 
 const $ = (id) => document.getElementById(id);
 
-/** The view a tab shows on a phone: 'cards' or its second view. Initiatives and Docs say it themselves (the List, or the
- * All filter, however it was reached: the switch, ⌘K or the desktop's saved choice); Today's lives here. */
+/** The view a tab shows. Initiatives and Docs read their own switch, so a change made in the place itself is honoured. */
 export function phoneView(dest) {
   if (dest === 'initiatives') {
     const body = document.querySelector('[data-dest="initiatives"] [data-in-body]');
@@ -55,12 +61,13 @@ export function phoneView(dest) {
     const on = document.querySelector('[data-dest="docs"] [data-docs-filter] [aria-selected="true"]');
     return on && on.getAttribute('data-tab') === 'all' ? 'all' : 'cards';
   }
+  if (dest === 'board' || dest === 'reports') return dest;
   return view[dest] || 'cards';
 }
 
-/* Put the destination in the view the PM chose. Only in-memory state is touched: the desktop's saved choices (the
- * Initiatives view in localStorage, the day's fold) are left as they are. */
 function setView(dest, v) {
+  const cfg = HEADS[dest];
+  if (cfg && cfg.dests) { if (v !== dest && ctx && ctx.go) ctx.go(v); return; }
   if (phoneView(dest) === v) return;
   view[dest] = v;
   if (dest === 'today') setDayForced(v === 'day');
@@ -73,143 +80,73 @@ function setView(dest, v) {
   refresh();
 }
 
-function items(cfg, scroller) { return [...scroller.querySelectorAll(cfg.item)].filter((n) => !n.closest('[hidden]')); }
-function keyOf(cfg, n, k) { return (n && n.getAttribute(cfg.key)) || 'i:' + k; }
-function indexNow(scroller) { const w = scroller.clientWidth || 1; return Math.max(0, Math.round(scroller.scrollLeft / w)); }
+function count(dest, cfg) {
+  if (!cfg.scroller) return 0;
+  const host = document.querySelector(`[data-fr-host="${dest}"]`);
+  const scroller = host && host.querySelector(cfg.scroller);
+  return scroller ? [...scroller.querySelectorAll(cfg.item)].filter((n) => !n.closest('[hidden]')).length : 0;
+}
 
-/* The head and the pager say where the PM is. Drawn from the scroller's own position, so a swipe and an arrow agree. */
-function paint(dest, cfg, scroller) {
-  const list = scroller ? items(cfg, scroller) : [];
-  const n = list.length;
-  const i = scroller ? Math.min(indexNow(scroller), Math.max(0, n - 1)) : 0;
+function paint(dest, cfg) {
+  const v = phoneView(dest);
+  const first = !cfg.views || cfg.dests || v === cfg.views[0][0];
+  const text = first ? cfg.where(count(dest, cfg)) : (cfg.second || '');
   const where = $('mobDeckWhere');
-  const deck = !!scroller;
-  if (where) where.textContent = deck ? cfg.where(i, n, list[i]) : (cfg.second || '');
-  const pager = $('mobPager');
-  if (pager) pager.hidden = !deck || n < 2;
-  const prev = $('mobPrev'); const next = $('mobNext'); const fill = $('mobPagerFill');
-  if (prev) prev.disabled = i <= 0;
-  if (next) next.disabled = i >= n - 1;
-  if (fill) fill.style.setProperty('--fr-deck-fill', n ? ((i + 1) / n * 100).toFixed(2) + '%' : '0');
-  list.forEach((node, k) => { const v = k === i ? 'true' : 'false'; if (node.getAttribute('data-ph-on') !== v) node.setAttribute('data-ph-on', v); });
-  if (n) at[dest] = { key: keyOf(cfg, list[i], i), i };
+  if (where && where.textContent !== text) where.textContent = text;
 }
 
 function views(dest, cfg) {
   const box = $('mobDeckViews');
   if (!box) return;
-  const want = (cfg.views || []).map(([id, l]) => id + ':' + l + ':' + (phoneView(dest) === id)).join('|');
+  const list = cfg.views || [];
+  const want = list.map(([id, l]) => id + ':' + l + ':' + (phoneView(dest) === id)).join('|');
   if (box.dataset.sig === dest + want) return;
   box.dataset.sig = dest + want;
-  box.replaceChildren(...(cfg.views || []).map(([id, l]) => {
+  box.replaceChildren(...list.map(([id, l, ic]) => {
     const b = document.createElement('button');
     b.type = 'button';
     b.className = 'mob-deck__view';
-    b.textContent = l;
+    const g = icon(ic); g.classList.add('mob-deck__i'); b.append(g, document.createTextNode(l));
     b.setAttribute('aria-pressed', phoneView(dest) === id ? 'true' : 'false');
     b.dataset.view = id;
     b.dataset.phViewTo = dest;
     return b;
   }));
-  box.hidden = !(cfg.views || []).length;
-}
-
-/* The height a card gets: the screen between the top of the deck and the pager, so a card fills it and its own text
- * scrolls inside it when it is longer. */
-function fit(scroller) {
-  const top = scroller.getBoundingClientRect().top;
-  const menu = document.getElementById('mobMenu');
-  const bottom = menu ? menu.getBoundingClientRect().top : window.innerHeight;
-  const h = Math.max(220, Math.floor(bottom - top - 12));
-  if (scroller.style.getPropertyValue('--fr-deck-h') !== h + 'px') scroller.style.setProperty('--fr-deck-h', h + 'px');
-}
-
-function attach(dest, cfg, scroller) {
-  if (scroller.dataset.phDeck === dest) return false;
-  scroller.dataset.phDeck = dest;
-  let t = null;
-  scroller.addEventListener('scroll', () => {
-    if (t) cancelAnimationFrame(t);
-    t = requestAnimationFrame(() => { if (live && live.scroller === scroller) paint(dest, cfg, scroller); });
-  }, { passive: true });
-  return true;
-}
-
-/* Bring the remembered card back on screen after the list was drawn again. */
-function restore(dest, cfg, scroller) {
-  const list = items(cfg, scroller);
-  const was = at[dest];
-  // the first card stays first: a card that comes in at the front (the day's Prepare card, a new cause) is the one to see
-  let k = !was || was.i === 0 ? 0 : list.findIndex((n, j) => keyOf(cfg, n, j) === was.key);
-  if (k < 0) k = Math.min(was.i, Math.max(0, list.length - 1));
-  const left = k * scroller.clientWidth;
-  if (Math.abs(scroller.scrollLeft - left) > 2) scroller.scrollTo({ left, behavior: 'instant' });
-}
-
-function step(by) {
-  if (!live) return;
-  const { scroller } = live;
-  const w = scroller.clientWidth || 1;
-  scroller.scrollTo({ left: (indexNow(scroller) + by) * w, behavior: 'smooth' });
-}
-
-/* The deck's marks come off every node, so a primitive's deck size (components.css .pmc-card.ph-card) applies only
- * while a deck is on screen. */
-function strip() {
-  for (const n of document.querySelectorAll('.ph-deck')) n.classList.remove('ph-deck');
-  for (const n of document.querySelectorAll('.ph-card')) { n.classList.remove('ph-card'); n.removeAttribute('data-ph-on'); }
+  box.hidden = !list.length;
 }
 
 function off() {
-  strip();
   const shell = $('mobDeck'); if (shell) shell.hidden = true;
-  const pager = $('mobPager'); if (pager) pager.hidden = true;
   delete document.body.dataset.phDeck;
   delete document.body.dataset.phView;
-  live = null;
+  shown = null;
 }
 
-/**
- * Draw the deck for the screen on show. `screen` is the reducer's current screen; `on` is false above the breakpoint.
- * Called by pm/mobile.js at the end of every shell render, and again whenever the place's own list is drawn again.
- */
+/** Called by pm/mobile.js on every phone render, with whether the frame is up and the screen on top. */
 export function applyDeck(on, screen) {
-  // Above the breakpoint nothing here runs: the desktop's own fold applies, the marks come off once, and the place is
-  // not watched (a subtree observer on the desktop's place, terminals included, costs every render).
   if (!on) { if (wasOn) { wasOn = false; setDayForced(null); off(); if (observer) { observer.disconnect(); observer = null; } } return; }
   wasOn = true;
   watch();
   const dest = screen && screen.kind === 'dest' ? screen.id : null;
-  const cfg = dest ? DECKS[dest] : null;
+  const cfg = dest ? HEADS[dest] : null;
   if (!cfg) { off(); return; }
   if (dest === 'today') setDayForced(view.today === 'day');
   document.body.dataset.phDeck = dest;
   document.body.dataset.phView = phoneView(dest);
   const shell = $('mobDeck'); if (shell) shell.hidden = false;
+  shown = dest;
   views(dest, cfg);
-  const host = document.querySelector(`[data-fr-host="${dest}"]`);
-  const scroller = phoneView(dest) === 'cards' && host ? host.querySelector(cfg.scroller) : null;
-  if (!scroller) { strip(); live = null; paint(dest, cfg, null); return; }
-  scroller.classList.add('ph-deck');
-  for (const n of items(cfg, scroller)) n.classList.add('ph-card');
-  const fresh = attach(dest, cfg, scroller) || !live || live.scroller !== scroller;
-  live = { dest, scroller };
-  fit(scroller);
-  if (fresh || scroller.dataset.phCount !== String(items(cfg, scroller).length)) restore(dest, cfg, scroller);
-  scroller.dataset.phCount = String(items(cfg, scroller).length);
-  paint(dest, cfg, scroller);
+  paint(dest, cfg);
 }
 
-/* A destination that draws on its own (the Roadmap's read, the Board's poll) changes the place without a shell render:
- * draw the deck again on the next frame. Only child lists are watched, and the deck writes attributes, so it cannot
- * wake itself. */
 function refresh() {
   if (queued) return;
   queued = true;
   requestAnimationFrame(() => { queued = false; if (ctx && ctx.apply) ctx.apply(); });
 }
 
-/* The place's host is made by app.js; it is watched from the first deck on. */
+/* The place rebuilds its list on a poll; the count in the head follows it. A recount reads the DOM and writes one text
+ * node, and never touches a scroll position. */
 function watch() {
   if (observer || !ctx || !ctx.place || !('MutationObserver' in window)) return;
   const place = ctx.place();
@@ -218,26 +155,13 @@ function watch() {
   observer.observe(place, { childList: true, subtree: true });
 }
 
-/** Wire the pager once, at boot. `context` is { rerender, apply, place }: apply() re-runs applyDeck with the current screen. */
 export function mountDeck(context) {
   ctx = context || null;
-  const prev = $('mobPrev'); const next = $('mobNext');
-  // one listener for the deck's own buttons (the view switch, the pager), read from their data attributes
   document.addEventListener('click', (e) => {
-    const t = e.target instanceof Element ? e.target.closest('#mobDeckViews [data-ph-view-to], #mobPrev, #mobNext') : null;
+    const t = e.target instanceof Element ? e.target.closest('#mobDeckViews [data-ph-view-to]') : null;
     if (!t || t.disabled) return;
-    if (t.id === 'mobPrev') step(-1);
-    else if (t.id === 'mobNext') step(1);
-    else setView(t.dataset.phViewTo, t.dataset.view);
-  });
-  window.addEventListener('resize', () => { if (live) { fit(live.scroller); restore(live.dest, DECKS[live.dest], live.scroller); } });
-  document.addEventListener('keydown', (e) => {
-    if (!live || e.altKey || e.metaKey || e.ctrlKey) return;
-    const t = e.target;
-    if (t && t.closest && t.closest('input, textarea, select, [contenteditable="true"], .xterm')) return;
-    if (e.key === 'ArrowRight') { e.preventDefault(); step(1); } else if (e.key === 'ArrowLeft') { e.preventDefault(); step(-1); }
+    setView(t.dataset.phViewTo, t.dataset.view);
   });
 }
 
-/* For the browser suites: where the deck is, and the view switch. */
-window.pmDeck = { phoneView, setView, live: () => (live ? { dest: live.dest, index: indexNow(live.scroller), count: items(DECKS[live.dest], live.scroller).length } : null) };
+window.pmDeck = { phoneView, setView, live: () => (shown ? { dest: shown, view: phoneView(shown), count: HEADS[shown] ? count(shown, HEADS[shown]) : 0 } : null) };