create-pmos 0.523.0 → 0.524.0

package/workspace/public/pm/cozy-nav.js

@@ -21,7 +21,8 @@
  */
 import { esc, svg, ICON, wsQ } from './cozy-evui.js';
 import { fabLabel, bannerOf } from './cozy-evmodel.js';
-import { mountToastFaces, loadPrefs, adlerPeek, asleep } from './cozy-adler.js';   // Adler (batch 16 item 2): every toast carries his S face; Settings > Adler is read once
+import { mountToastFaces, loadPrefs, adlerPeek, asleep } from './cozy-adler.js';
+import { pmPost } from './http.js';   // Adler (batch 16 item 2): every toast carries his S face; Settings > Adler is read once
 
 export const PLACES = [
   { key: 'home', label: 'Home', href: '/premium.html', d: ICON.home },
@@ -31,7 +32,11 @@ export const PLACES = [
 export { fabLabel };
 const THEME_KEY = 'pmos.c3.theme';
 const CSS = new URL('./cozy-ev.css', import.meta.url).href;
-const N = { news: 0, stale: null, here: 'home', calls: 0 };
+const N = { news: 0, stale: null, here: 'home', calls: 0, fresh: new Set() };
+/* A place that just opened (onboarding B3, ObA4Gradual; GET /api/moments places[p].dot): its menu row gets one soft blue dot until the PM
+ * first opens it. Reports live in Intelligence, so their dot is on the Intelligence row. */
+const ROW_OF = { board: 'board', insights: 'insights', reports: 'insights' };
+export const freshRows = (places) => new Set(Object.entries(places || {}).filter(([, v]) => v && v.dot).map(([k]) => ROW_OF[k]).filter(Boolean));
 
 const store = { get(k) { try { return localStorage.getItem(k); } catch { return null; } }, set(k, v) { try { if (v) localStorage.setItem(k, v); else localStorage.removeItem(k); } catch { /* a private window */ } } };
 /** The theme the PM picked on this device: light, dark or auto. */
@@ -50,8 +55,9 @@ export function setTheme(pick, doc = document, { keep = true } = {}) {
 export function menuHtml(here, o = {}) {
   const news = o.news > 0, dot = (c) => `<i class="ev-md ${c}" aria-hidden="true"></i>`;
   return PLACES.map((p) => {
-    const you = p.key === 'home' && news;
-    const lab = you ? ` aria-label="${p.label}. ${o.news} new for you in Your day"` : '';
+    const opened = p.key !== here && !!(o.fresh && o.fresh.has(p.key));
+    const you = (p.key === 'home' && news) || opened;
+    const lab = p.key === 'home' && news ? ` aria-label="${p.label}. ${o.news} new for you in Your day"` : opened ? ` aria-label="${p.label}. New: it has something to show now"` : '';
     return `<a href="${p.href}"${p.key === here ? ' aria-current="page"' : ''}${lab}>${svg(p.d, 18)}${p.key === here ? `<b>${p.label}</b>` : `<span>${p.label}</span>`}${you ? dot('you') : ''}</a>`;
   }).join('')
     + '<div class="ev-tray">'
@@ -88,10 +94,11 @@ export function mountNav(here, doc = document, opts = {}) {
   mountToastFaces(doc); loadPrefs();
   const fab = w.querySelector('#czFab'), menu = w.querySelector('#czMenu'), scrim = w.querySelector('#czScrim');
   const draw = () => {
-    menu.innerHTML = menuHtml(here, { news: N.news, stale: N.stale });
-    w.querySelector('#czFdYou').hidden = !(N.news > 0) || !menu.hidden;
+    menu.innerHTML = menuHtml(here, { news: N.news, stale: N.stale, fresh: N.fresh });
+    const opened = [...N.fresh].some((k) => k !== here);
+    w.querySelector('#czFdYou').hidden = !(N.news > 0 || opened) || !menu.hidden;
     w.querySelector('#czFdRisk').hidden = !N.stale || !menu.hidden;
-    if (menu.hidden) fab.setAttribute('aria-label', fabLabel(here, false, N.stale, N.news) + (earsOn() ? '. ' + callWords(N.calls) : ''));
+    if (menu.hidden) fab.setAttribute('aria-label', fabLabel(here, false, N.stale, N.news) + (opened ? '. A place has something new to show' : '') + (earsOn() ? '. ' + callWords(N.calls) : ''));
     drawEars();
   };
   // AdP6: the ears are drawn once and kept while the count stays above zero, so a redraw never replays them
@@ -132,7 +139,14 @@ export function mountNav(here, doc = document, opts = {}) {
   }, true);
   const read = async () => {
     if (doc.hidden) return;
-    const [n, s] = await Promise.all([getj('/api/news-for-you' + wsQ()), getj('/api/sources' + wsQ())]);
+    const [n, s, mo] = await Promise.all([getj('/api/news-for-you' + wsQ()), getj('/api/sources' + wsQ()), getj('/api/moments')]);
+    if (mo && mo.ok) {
+      // the place the PM is on is visited: its dot clears (Intelligence also clears the reports dot, they live here)
+      const mine = Object.keys(ROW_OF).filter((k) => ROW_OF[k] === here && mo.places && mo.places[k] && mo.places[k].dot);
+      for (const k of mine) { mo.places[k].dot = false; pmPost('/api/moments/visit', { place: k }).catch(() => {}); }
+      N.fresh = freshRows(mo.places);
+      doc.dispatchEvent(new CustomEvent('cz:moments', { detail: mo }));
+    }
     if (n && n.ok) { N.news = n.count || 0; doc.dispatchEvent(new CustomEvent('cz:news-for-you', { detail: n })); }
     if (s && s.ok) { N.stale = bannerOf(s.sources); doc.dispatchEvent(new CustomEvent('cz:sources', { detail: s })); }   // Your day's failed source (AdP5)
     if (menu.hidden || !menu.contains(doc.activeElement)) draw();

package/workspace/public/pm/cozy-onboard.css

@@ -58,3 +58,34 @@ body.ob-on #hmChat[hidden] { display: none; }
 .cs-checklist[hidden] { display: none; }
 .cs-checklist p { margin: 0; font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
 .cs-checklist .ut-btn { align-self: flex-start; text-decoration: none; }
+/* onboarding build B1: the ✦ proposals (✓ ✕ only), the source tiles and the fundamentals card */
+.ob-prop { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; max-width: 720px; box-sizing: border-box; }
+.ob-pt { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--cz-ink); line-height: var(--lh-body); }
+.ob-spark { color: var(--cz-blueink); flex: none; }
+.ob-pl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
+.ob-pl > li { padding: 8px 0; border-top: 1px solid var(--cz-hair); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cz-ink); overflow-wrap: anywhere; }
+.ob-pl > li b { color: var(--cz-ink2); font-size: var(--fs-meta); line-height: var(--lh-meta); margin-right: 6px; }
+.ob-pl a, .ob-fund a { color: var(--cz-blueink); }
+.ob-yn { display: flex; gap: 8px; justify-content: flex-end; padding-top: 2px; }
+.ob-yn .ob-no { background: var(--cz-well); color: var(--cz-ink2); }
+.ob-yn .ut-ib { width: 44px; height: 44px; }
+.ob-lk { font: inherit; font-size: var(--fs-meta); line-height: var(--lh-meta); border: 0; padding: 0; background: none; color: var(--cz-blueink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+.ob-lk:disabled { color: var(--cz-ink3); cursor: default; }
+.ob-fl { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
+.ob-fl > span { min-width: 0; }
+.ob-fl em { grid-column: 2; font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); }
+.ob-fl .ob-pen { grid-column: 3; grid-row: 1; }
+.ob-miss { color: var(--cz-ink3); }
+.ob-rv .ob-fld { grid-template-columns: 90px minmax(0, 1fr); border-top: 0; padding: 0; }
+.ob-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; max-width: 720px; }
+.ob-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
+.ob-tile .ob-ts { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--cz-blueink); line-height: var(--lh-label); }
+.ob-tile b { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cz-ink); overflow-wrap: anywhere; }
+.ob-tile b a { color: inherit; text-decoration: none; }
+.ob-tile > span:last-child { font-size: var(--fs-meta); color: var(--cz-ink2); line-height: var(--lh-meta); }
+.ob-fund li { align-items: flex-start; }
+.ob-fund li svg { margin-top: 3px; }
+.ob-fund li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ob-fund li em { font-style: normal; font-size: var(--fs-meta); color: var(--cz-ink3); line-height: var(--lh-meta); overflow-wrap: anywhere; }
+.ob-fund li .ob-lk { align-self: flex-start; }
+@media (max-width: 760px) { .ob-fl { grid-template-columns: minmax(0, 1fr) auto; } .ob-fl em { grid-column: 1; } .ob-fl .ob-pen { grid-column: 2; } .ob-rv .ob-fld { grid-template-columns: minmax(0, 1fr); } }