@leftoff/cli 0.9.17-beta.4 → 0.9.17-beta.6

package/ui/app.js

@@ -71,6 +71,209 @@ import { recapLineHtml, beforeClearHtml } from './recap-line.js' // 0.9.15 Claud
 import { Presence, cardRows, awayWords } from './away.js' // 0.9.15 a card shows more the longer you've been away
 import { backLine, backLineHtml, BACK_PREFIX, BACK_AWAY_MS } from './back-line.js' // 0.9.15 the recap above the Live composer
 import { glyphState, glyphHtml, glyphWords, lastReplyOf, seenAtFor, ensureSeenBase, markSeen, GLYPH_LABEL, offlineWords, offlineTip, waitingOnYou } from './sglyph.js' // 0.9.14 status glyphs
+import { createNavStore, navState, toggleWords, isNavKey, navKeyLabel, safariOwnsEdge, edgeStart, swipeIntent, drawerHtml, RAIL_MIN, RAIL_W_SLIM } from './navrail.js'
+
+// ------------------------------------------------------------ 0.9.18 the left nav on every screen (ui/navrail.js)
+// From 700px the rail stays beside every page (full screen and the walkthrough
+// too), expanded or collapsed by its toggle or [ and remembered; a short room
+// collapses it for that view without touching the choice. Under 700px a menu
+// button (or a swipe in from the left edge where Safari doesn't own it) opens
+// the nav as a drawer.
+const navStore = createNavStore(window.localStorage)
+const navUi = { shown: null, drawer: false, opener: null, closeT: 0, animT: 0, tipT: 0, tipFor: null, sw: null }
+const navRailQ = window.matchMedia('(min-width: ' + RAIL_MIN + 'px)')
+const navReduced = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+const navMac = /Mac|iP(hone|ad|od)/.test(navigator.platform || navigator.userAgent)
+const navEdgeOk = !safariOwnsEdge(navigator.userAgent, navigator.standalone === true || window.matchMedia('(display-mode: standalone)').matches)
+// the room the session panel works in: the window less the (at least slim) rail
+function fsViewport() { return window.innerWidth - (navRailQ.matches ? RAIL_W_SLIM : 0) }
+// the session panel open beside a full-screen chat, else 0
+function navSideWidth() {
+  const de = document.documentElement, side = document.getElementById('fsSide')
+  if (!side || !de.classList.contains('live-full') || side.classList.contains('collapsed')) return 0
+  return Math.round(side.getBoundingClientRect().width) || 0
+}
+function applyNav() {
+  const st = navState({ width: window.innerWidth, saved: navStore.collapsed(), side: navSideWidth() })
+  const de = document.documentElement
+  de.classList.add('nav-ready')
+  de.classList.toggle('nav-slim', st.rail && st.collapsed)
+  de.classList.toggle('nav-auto', st.rail && st.auto)
+  const b = document.getElementById('navToggle')
+  if (b) {
+    const w = toggleWords(st, navKeyLabel(navMac))
+    b.setAttribute('aria-expanded', st.collapsed ? 'false' : 'true')
+    b.setAttribute('aria-label', w.label)
+    b.setAttribute('aria-disabled', st.auto ? 'true' : 'false')
+    b.dataset.tip = w.tip
+    const lbl = b.querySelector('.lbl')
+    if (lbl) lbl.textContent = st.collapsed ? 'Expand' : 'Collapse'
+    if (b.dataset.icon !== w.icon) { b.dataset.icon = w.icon; const svg = b.querySelector('svg'); if (svg) svg.outerHTML = icon(w.icon) }
+    if (navUi.tipFor === b) railTipShow(b, true)
+  }
+  const changed = !navUi.shown || navUi.shown.collapsed !== st.collapsed || navUi.shown.rail !== st.rail
+  navUi.shown = st
+  if (st.rail && navUi.drawer) closeDrawer(false)
+  return changed
+}
+function toggleNav() {
+  const st = navUi.shown || navState({ width: window.innerWidth, saved: navStore.collapsed(), side: navSideWidth() })
+  if (!st.rail) return false
+  if (st.auto) { const b = document.getElementById('navToggle'); if (b) railTipShow(b, true); return false } // no room: say so, change nothing
+  const de = document.documentElement
+  if (!navReduced()) { de.classList.add('nav-anim'); clearTimeout(navUi.animT); navUi.animT = setTimeout(() => de.classList.remove('nav-anim'), 260) }
+  navStore.set(!st.collapsed)
+  applyNav()
+  return true
+}
+// one floating tip for the rail (the rail scrolls, so a CSS ::after would be cut off at its edge)
+function railTipShow(el, now) {
+  const tip = document.getElementById('railTip')
+  if (!tip || !el || !navRailQ.matches) return
+  const text = el.dataset.tip || ''
+  const lbl = el.querySelector('.lbl, .sb-lbl, .label')
+  const words = lbl ? lbl.textContent.trim() : ''
+  // expanded, the label's already there; the tip shows only when it says more
+  if (!text || (!document.documentElement.classList.contains('nav-slim') && text === words)) { railTipHide(); return }
+  clearTimeout(navUi.tipT)
+  const show = () => {
+    if (!el.isConnected) return
+    tip.textContent = text
+    tip.hidden = false
+    const r = el.getBoundingClientRect()
+    const rail = document.getElementById('navRail')
+    tip.style.left = Math.round((rail ? rail.getBoundingClientRect().right : r.right) + 6) + 'px'
+    tip.style.top = Math.round(r.top + r.height / 2) + 'px'
+    navUi.tipFor = el
+  }
+  if (now) show(); else navUi.tipT = setTimeout(show, 350)
+}
+function railTipHide() {
+  clearTimeout(navUi.tipT)
+  const tip = document.getElementById('railTip')
+  if (tip) tip.hidden = true
+  navUi.tipFor = null
+}
+const navTipTarget = (t) => t && t.closest && t.closest('#navRail [data-tip]:not(#needsTab)') // Needs you has Quick look on hover
+document.addEventListener('pointerover', (e) => {
+  if (e.pointerType === 'touch') return
+  const el = navTipTarget(e.target)
+  if (!el) return
+  if (el !== navUi.tipFor) railTipShow(el, false)
+})
+document.addEventListener('pointerout', (e) => {
+  const el = navTipTarget(e.target)
+  if (el && !(e.relatedTarget && el.contains(e.relatedTarget)) && document.activeElement !== el) railTipHide()
+})
+document.addEventListener('focusin', (e) => {
+  const el = navTipTarget(e.target)
+  if (el && el.matches(':focus-visible')) railTipShow(el, true)
+  else if (navUi.tipFor && navUi.tipFor !== el) railTipHide()
+})
+document.addEventListener('focusout', (e) => { if (navTipTarget(e.target)) railTipHide() })
+window.addEventListener('scroll', railTipHide, true)
+document.addEventListener('click', (e) => {
+  const t = e.target
+  if (!t || !t.closest) return
+  if (t.closest('#navToggle')) { e.preventDefault(); toggleNav(); return }
+  const open = t.closest('[data-nav-drawer]')
+  if (open) { e.preventDefault(); if (navUi.drawer) closeDrawer(true); else openDrawer(open); return }
+  if (!navUi.drawer) return
+  if (t.closest('#navScrim') || t.closest('[data-nd-close]')) { e.preventDefault(); closeDrawer(true); return }
+  if (t.closest('#navDrawer .nd-item')) closeDrawer(false) // the link navigates; the page it opens takes focus
+})
+// the drawer (phones): the rail's destinations over the page, a scrim behind
+function navDrawerItems() {
+  const items = []
+  const take = (a) => {
+    if (!a) return
+    const lbl = a.querySelector('.lbl')
+    const n = a.querySelector('.navcount')
+    items.push({ href: a.getAttribute('href'), route: a.dataset.route || '', label: lbl ? lbl.textContent.trim() : a.getAttribute('aria-label') || '', svg: (a.querySelector('svg') || {}).outerHTML || '', on: a.classList.contains('on'), count: n && !n.hidden ? n.textContent.trim() : '' })
+  }
+  for (const a of document.querySelectorAll('#navRail .tabs a[data-route]')) take(a)
+  for (const id of ['newTab', 'wnTab', 'setTab']) take(document.getElementById(id))
+  return items
+}
+function openDrawer(opener) {
+  if (navRailQ.matches || navUi.drawer) return
+  const d = document.getElementById('navDrawer'), s = document.getElementById('navScrim')
+  if (!d || !s) return
+  clearTimeout(navUi.closeT)
+  d.innerHTML = drawerHtml(navDrawerItems())
+  navUi.opener = opener || (document.activeElement !== document.body ? document.activeElement : null)
+  d.hidden = false; s.hidden = false
+  void d.offsetWidth
+  d.classList.add('open'); s.classList.add('open')
+  document.documentElement.classList.add('nav-drawer-open')
+  navUi.drawer = true
+  for (const b of document.querySelectorAll('[data-nav-drawer]')) b.setAttribute('aria-expanded', 'true')
+  const f = d.querySelector('.nd-item.on') || d.querySelector('.nd-item')
+  if (f) f.focus({ preventScroll: true })
+}
+function closeDrawer(restore) {
+  if (!navUi.drawer) return
+  const d = document.getElementById('navDrawer'), s = document.getElementById('navScrim')
+  navUi.drawer = false
+  d.classList.remove('open'); s.classList.remove('open')
+  document.documentElement.classList.remove('nav-drawer-open')
+  for (const b of document.querySelectorAll('[data-nav-drawer]')) b.setAttribute('aria-expanded', 'false')
+  const done = () => { if (navUi.drawer) return; d.hidden = true; s.hidden = true; d.innerHTML = '' }
+  clearTimeout(navUi.closeT)
+  if (navReduced()) done(); else navUi.closeT = setTimeout(done, 200)
+  const o = navUi.opener
+  navUi.opener = null
+  if (restore && o && o.isConnected) o.focus({ preventScroll: true })
+  else if (restore) { const m = document.querySelector('[data-nav-drawer]'); if (m && m.offsetParent) m.focus({ preventScroll: true }) }
+}
+document.addEventListener('keydown', (e) => {
+  if (navUi.drawer) {
+    const d = document.getElementById('navDrawer')
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeDrawer(true); return }
+    if (e.key === 'Tab') { // focus stays inside while it's open
+      const f = [...d.querySelectorAll('a[href], button:not([disabled])')]
+      if (!f.length) return
+      const i = f.indexOf(document.activeElement)
+      if (e.shiftKey && (i <= 0)) { e.preventDefault(); f[f.length - 1].focus() }
+      else if (!e.shiftKey && (i === -1 || i === f.length - 1)) { e.preventDefault(); f[0].focus() }
+    }
+    return
+  }
+  if (e.defaultPrevented) return
+  const t = e.target
+  const term = !!(t && t.closest && t.closest('.xterm, .term-dock'))
+  const typing = term || !!(t && t.closest && t.closest('input, textarea, select, [contenteditable]'))
+  if (!isNavKey(e, { typing, term, mac: navMac }) || !navRailQ.matches) return
+  if (document.querySelector('.lo-menu, .cmdk:not([hidden]), .lightbox:not([hidden]), .pdfview:not([hidden])')) return
+  if ([...document.querySelectorAll('[role="dialog"][aria-modal="true"]')].some((d) => d.id !== 'navDrawer' && !d.closest('[hidden]') && d.getClientRects().length)) return
+  e.preventDefault()
+  toggleNav()
+}, true)
+// a swipe in from the left edge opens it, a swipe left on it closes it (phones; not where Safari's back-swipe owns the edge)
+function navOwnsTouch(x) { return !navRailQ.matches && (navUi.drawer || (navEdgeOk && edgeStart(x))) }
+document.addEventListener('touchstart', (e) => {
+  navUi.sw = null
+  if (navRailQ.matches || e.touches.length !== 1) return
+  const p = e.touches[0]
+  if (navUi.drawer) { navUi.sw = { x: p.clientX, y: p.clientY, open: true }; return }
+  if (navEdgeOk && edgeStart(p.clientX)) navUi.sw = { x: p.clientX, y: p.clientY, open: false }
+}, { passive: true })
+document.addEventListener('touchend', (e) => {
+  const sw = navUi.sw
+  navUi.sw = null
+  if (!sw || !e.changedTouches.length) return
+  const p = e.changedTouches[0]
+  const what = swipeIntent(p.clientX - sw.x, p.clientY - sw.y, sw.open)
+  if (what === 'open') openDrawer(null)
+  else if (what === 'close') closeDrawer(true)
+}, { passive: true })
+{
+  let raf = 0
+  window.addEventListener('resize', () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; railTipHide(); applyNav() }) })
+  navRailQ.addEventListener('change', () => { if (navRailQ.matches) closeDrawer(false) })
+}
+applyNav()
+
 const $app = document.getElementById('app')
 // 0.9.17 Walk me through it: which session shows it, and its view (this page only; the open one survives a reload)
 const wtUi = { sid: null, scope: new Map(), view: 'story', filter: 'all', data: new Map(), loading: new Set(), error: new Map(), cur: new Map(), code: new Set(), groups: new Set(), pending: [], ask: '', node: null, sig: '', restored: false, fellBack: new Set() }
@@ -968,7 +1171,11 @@ function wtFill(s) {
   const sig = k + '|' + (data ? (data.fingerprint || data.status) + (data.cached ? 'c' : '') : '-') + '|' + JSON.stringify([ui.view, ui.filter, ui.loading, ui.error, ui.fellBack, ui.deck, [...wtUi.code], (data && data.scopes || []).map((x) => x.key + x.available).join()])
   let node = wtUi.node
   if (!node || wtUi.sig !== sig) {
-    const keep = node && wtUi.sig.startsWith(k + '|') ? (node.querySelector('#wtScroll') || {}).scrollTop || 0 : 0
+    // (the old node may be out of the page already, reading 0: what was recorded as you scrolled wins)
+    const same = node && wtUi.sig.startsWith(k + '|')
+    const was = (sel) => { const el = same && node.querySelector(sel); return el ? (wtScrolls.get(el) || [el.scrollTop])[0] || 0 : 0 }
+    const keep = was('#wtScroll'), keepSide = was('.wt-side')
+    wtScrolls.clear()
     node = document.createElement('div')
     node.className = 'wt-node'
     const when = data && data.generatedAt ? clock(data.generatedAt) : ''
@@ -979,12 +1186,42 @@ function wtFill(s) {
     wtStuck(document.querySelector('.wt-scroll')) // 0.9.18
     wtDeckPaint(node, { first: true }) // 0.9.18 the slideshow: its progress, its dots in view
     const sc = node.querySelector('#wtScroll'); if (sc && keep) sc.scrollTop = keep
+    const sd = node.querySelector('.wt-side'); if (sd && keepSide) sd.scrollTop = keepSide
   } else {
-    if (node.parentNode !== mount) mount.replaceChildren(node)
+    if (node.parentNode !== mount) {
+      // 0.9.18 (Joel: "pause for a second and it jumps back to the top"): a live update redraws the
+      // session page (paintSession sets $app.innerHTML), which takes this node out of the page;
+      // putting it back resets every scroll box inside it to 0, so put back where you were, and focus
+      mount.replaceChildren(node)
+      wtRestoreView(node)
+    }
     wtMarks(s)
   }
   if (!data && !ui.loading && !ui.error) setTimeout(() => wtLoad(s.id), 0) // opened by a reload: read it now
 }
+// 0.9.18 where each scroll box in the walkthrough was (the slide or long page, the file list, the
+// dots) and what had focus, kept as you go, since a node taken out of the page reads 0 and has no focus
+const wtScrolls = new Map() // element -> [top, left], for the node on screen (cleared when it's rebuilt)
+let wtFocus = null // what had focus in the walkthrough just before a redraw took it out (wtBeforePaint)
+document.addEventListener('scroll', (e) => { const t = e.target; if (t && t.nodeType === 1 && wtUi.node && t.isConnected && wtUi.node.contains(t)) wtScrolls.set(t, [t.scrollTop, t.scrollLeft]) }, { capture: true, passive: true })
+let wtQuietUntil = 0, wtRefocusing = false // the scroll and focus our own restore makes don't close a tip
+function wtBeforePaint() {
+  const a = document.activeElement
+  wtFocus = wtUi.node && a && a !== document.body && wtUi.node.contains(a) ? a : null
+}
+function wtRestoreView(node) {
+  for (const [el, v] of wtScrolls) {
+    if (!node.contains(el)) { wtScrolls.delete(el); continue }
+    if (el.scrollTop !== v[0] || el.scrollLeft !== v[1]) wtQuietUntil = performance.now() + 150
+    if (el.scrollTop !== v[0]) el.scrollTop = v[0]
+    if (el.scrollLeft !== v[1]) el.scrollLeft = v[1]
+  }
+  // focus only goes back if it was in here when the redraw began and the redraw left it nowhere (never taken from elsewhere)
+  const a = document.activeElement
+  if (wtFocus && node.contains(wtFocus) && (!a || a === document.body)) { wtRefocusing = true; try { wtFocus.focus({ preventScroll: true }) } finally { wtRefocusing = false } }
+  wtFocus = null
+  wtStuck(node.querySelector('.wt-scroll'))
+}
 // The reviewed marks and the count, in place (no redraw).
 function wtMarks(s) {
   const node = wtUi.node; if (!node || !s) return
@@ -1853,7 +2090,7 @@ function paintNeedsCount(n) {
   const c = document.getElementById('needsCount')
   if (c) { c.hidden = !n; c.textContent = badgeText(n) }
   const tab = document.getElementById('needsTab')
-  if (tab) { tab.classList.toggle('has-needs', !!n); tab.title = n ? n + ' waiting on you' : 'Nothing waiting on you' }
+  if (tab) { tab.classList.toggle('has-needs', !!n); tab.dataset.tip = n ? 'Needs you · ' + n + ' waiting' : 'Needs you' }
   if (quickLookOpen() && paintNeedsCount.count !== n) loadQuickLook()
   paintNeedsCount.count = n
   document.title = (n ? '(' + n + ') ' : '') + 'Leftoff'
@@ -2065,6 +2302,7 @@ function paintSession(s, data) {
   // preview closed with Esc puts focus back on one, then a redraw replaced it)
   const kb = !kf && fa && fa !== document.body && $app.contains(fa) ? focusKey(fa) : null
   liveKeeper.before($app)
+  wtBeforePaint() // 0.9.18 the walkthrough's focus, before this takes it out of the page
   $app.innerHTML = sessionPageHtml(s, data)
   liveAfterRender(s.id)
   fitAskDetail($app)
@@ -2345,7 +2583,7 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   side += answeredList(s)
   const foot = '<div class="fs-foot"><button type="button" class="btn fs-term" data-term-toggle aria-label="Terminal" data-tip="Terminal (⌃`)">' + icon('terminal') + 'Terminal</button>' + termTabButtonHtml(s) + '</div>' // Open terminal (a window on the Mac): the head's ⋯
   const label = fsPeekWords(s)
-  return center + fsSideHtml({ id: s.id, side, foot, label, away: away ? shortAway(awayWords(awayMs)) : '', cpCount: s.checkpointCount || 0, cu: !!cu, wt: !s.agent, look: s.lookCount || 0, collapsed: fsSide.collapsed(), sheet: fsSheetUi.open === s.id, width: fsWidth.shown(window.innerWidth), viewport: window.innerWidth }, { esc, icon })
+  return center + fsSideHtml({ id: s.id, side, foot, label, away: away ? shortAway(awayWords(awayMs)) : '', cpCount: s.checkpointCount || 0, cu: !!cu, wt: !s.agent, look: s.lookCount || 0, collapsed: fsSide.collapsed(), sheet: fsSheetUi.open === s.id, width: fsWidth.shown(fsViewport()), viewport: fsViewport() }, { esc, icon })
 }
 // The middle for a session with no Live thread: the same full-screen frame and bar, and what it can say there.
 // "Away 3 hours" → "Away 3h", so Catch me up and Checkpoint now share one row
@@ -2571,26 +2809,27 @@ function exitFull(id) {
 const fsResize = { drag: null, raf: 0 }
 function applyFsWidth(w) {
   const de = document.documentElement
-  const n = clampSideWidth(w, window.innerWidth)
+  const n = clampSideWidth(w, fsViewport())
   if (n === SIDE_W_DEFAULT && fsWidth.stored() == null) de.style.removeProperty('--fs-uw')
   else de.style.setProperty('--fs-uw', n + 'px')
-  for (const h of document.querySelectorAll('.fs-resize')) { h.setAttribute('aria-valuenow', String(n)); h.setAttribute('aria-valuemax', String(sideMax(window.innerWidth))) }
+  for (const h of document.querySelectorAll('.fs-resize')) { h.setAttribute('aria-valuenow', String(n)); h.setAttribute('aria-valuemax', String(sideMax(fsViewport()))) }
+  applyNav()
   return n
 }
-applyFsWidth(fsWidth.shown(window.innerWidth))
-window.addEventListener('resize', () => { if (!fsResize.drag) applyFsWidth(fsWidth.shown(window.innerWidth)) })
+applyFsWidth(fsWidth.shown(fsViewport()))
+window.addEventListener('resize', () => { if (!fsResize.drag) applyFsWidth(fsWidth.shown(fsViewport())) })
 document.addEventListener('pointerdown', (e) => {
   const h = e.target.closest && e.target.closest('.fs-resize')
   if (!h || e.button !== 0 || window.innerWidth < WIDE_MIN) return
   e.preventDefault()
   try { h.setPointerCapture(e.pointerId) } catch {}
-  fsResize.drag = { id: e.pointerId, x: e.clientX, w: fsWidth.shown(window.innerWidth), now: null, h }
+  fsResize.drag = { id: e.pointerId, x: e.clientX, w: fsWidth.shown(fsViewport()), now: null, h }
   document.documentElement.classList.add('fs-resizing')
 })
 document.addEventListener('pointermove', (e) => {
   const d = fsResize.drag
   if (!d || e.pointerId !== d.id) return
-  d.now = clampSideWidth(d.w + (d.x - e.clientX), window.innerWidth) // the handle is the panel's left edge: left is wider
+  d.now = clampSideWidth(d.w + (d.x - e.clientX), fsViewport()) // the handle is the panel's left edge: left is wider
   if (!fsResize.raf) fsResize.raf = requestAnimationFrame(() => { fsResize.raf = 0; if (fsResize.drag && fsResize.drag.now != null) applyFsWidth(fsResize.drag.now) })
 })
 const fsResizeEnd = (e) => {
@@ -2599,7 +2838,7 @@ const fsResizeEnd = (e) => {
   fsResize.drag = null
   document.documentElement.classList.remove('fs-resizing')
   try { d.h.releasePointerCapture(d.id) } catch {}
-  if (d.now != null && d.now !== d.w) applyFsWidth(fsWidth.set(d.now, window.innerWidth))
+  if (d.now != null && d.now !== d.w) applyFsWidth(fsWidth.set(d.now, fsViewport()))
 }
 document.addEventListener('pointerup', fsResizeEnd)
 document.addEventListener('pointercancel', fsResizeEnd)
@@ -2607,7 +2846,7 @@ document.addEventListener('dblclick', (e) => { if (e.target.closest && e.target.
 document.addEventListener('keydown', (e) => {
   const h = e.target.closest && e.target.closest('.fs-resize')
   if (!h || e.metaKey || e.ctrlKey || e.altKey) return
-  const cur = fsWidth.shown(window.innerWidth)
+  const cur = fsWidth.shown(fsViewport())
   let next = null
   if (e.key === 'ArrowLeft') next = cur + SIDE_W_STEP
   else if (e.key === 'ArrowRight') next = cur - SIDE_W_STEP
@@ -2616,7 +2855,7 @@ document.addEventListener('keydown', (e) => {
   else if (e.key === 'Enter') { e.preventDefault(); fsWidth.reset(); applyFsWidth(SIDE_W_DEFAULT); return }
   if (next == null) return
   e.preventDefault()
-  applyFsWidth(fsWidth.set(Number.isFinite(next) ? next : sideMax(window.innerWidth), window.innerWidth))
+  applyFsWidth(fsWidth.set(Number.isFinite(next) ? next : sideMax(fsViewport()), fsViewport()))
 })
 // 0.9.16 the session panel: open, collapsed to its rail (⌘\, remembered), or on a phone a sheet
 function fsSideClasses() {
@@ -2625,6 +2864,7 @@ function fsSideClasses() {
   de.classList.toggle('fs-on', !!side)
   de.classList.toggle('fs-collapsed', !!side && side.classList.contains('collapsed'))
   de.classList.toggle('fs-sheet-up', !!side && side.classList.contains('sheet-up'))
+  applyNav() // 0.9.18: a session panel beside the chat can leave too little room for the expanded rail
 }
 function toggleFsSide(force) {
   const side = document.getElementById('fsSide')
@@ -2695,6 +2935,7 @@ document.addEventListener('keydown', (ev) => {
 function setFullClass(on) {
   document.documentElement.classList.toggle('live-full', !!on)
   if (on) fitFullViewport()
+  applyNav()
 }
 // The window as you see it: on a phone the keyboard takes the bottom of it,
 // and the composer stays just above the keyboard.
@@ -6602,10 +6843,10 @@ async function refreshHealth() {
     // the header shows this Mac's name; the rest is in the status popover (v0.5.9)
     const summary = h.sessionsOpen + ' open · ' + h.machine + ' · ' + h.summarizer
     el.querySelector('.label').textContent = h.machine
-    el.title = summary
+    el.dataset.tip = summary
     el.setAttribute('aria-label', 'Status: ' + summary)
     const brand = document.getElementById('brand')
-    if (brand) brand.title = 'Leftoff v' + h.version + (h.update && h.update.available ? ' · update available: v' + (h.update.remoteVersion || '?') : '')
+    if (brand) brand.dataset.tip = 'Leftoff v' + h.version + (h.update && h.update.available ? ' · update available: v' + (h.update.remoteVersion || '?') : '')
     paintTopDot()
     if (statusOpen()) paintStatus()
     paintNeedsCount(needsCountOf(h))
@@ -6621,8 +6862,8 @@ async function refreshHealth() {
     if (updateBar) updateBar.check(null) // a failed check changes nothing
     el.className = 'health down'
     el.querySelector('.label').textContent = e && e.code === 'login_required' ? 'not signed in' : 'daemon offline'
-    el.title = el.querySelector('.label').textContent
-    el.setAttribute('aria-label', 'Status: ' + el.title)
+    el.dataset.tip = el.querySelector('.label').textContent
+    el.setAttribute('aria-label', 'Status: ' + el.dataset.tip)
   }
 }
 
@@ -6632,7 +6873,7 @@ async function refreshHealth() {
 // Settings as icons. Nothing wraps or is cut off from 900px up.
 
 const isMac = /Mac|iP(hone|ad|od)/.test(navigator.platform || navigator.userAgent)
-{ const k = document.getElementById('searchKbd'); if (k) k.textContent = isMac ? '⌘K' : 'Ctrl K'; const b = document.getElementById('searchBtn'); if (b) b.title = 'Search (' + (isMac ? '⌘K' : 'Ctrl+K') + ' or /)' }
+{ const k = document.getElementById('searchKbd'); if (k) k.textContent = isMac ? '⌘K' : 'Ctrl K'; const b = document.getElementById('searchBtn'); if (b) b.dataset.tip = 'Search (' + (isMac ? '⌘K' : 'Ctrl+K') + ' or /)' }
 
 // The gear's dot: anything a Settings section would flag (an update, a failed digest, a feed that can't be pulled, sync trouble).
 function paintTopDot() {
@@ -6646,7 +6887,7 @@ function paintTopDot() {
   el.hidden = !all.length || (!warn && !(h.update && h.update.available))
   el.className = 'topdot' + (warn ? ' warn' : '')
   const why = all.flatMap((x) => x.why)
-  document.getElementById('setTab').title = 'Settings' + (why.length && !el.hidden ? ' · ' + why.join(' · ') : '')
+  document.getElementById('setTab').dataset.tip = 'Settings' + (why.length && !el.hidden ? ' · ' + why.join(' · ') : '')
   paintMoreDots()
 }
 
@@ -7125,12 +7366,13 @@ document.addEventListener('keydown', (e) => { const b = e.target.closest && e.ta
       tip.classList.add('on')
     }, delay)
   }
-  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip], #tabPager [data-tip], #lfTabs [data-tip], .sg[data-tip], .lo-act-x[data-tip], .repos.projects [data-tip], .lo-sheet-x[data-tip], .proj-edit[data-tip], .feed-why[data-tip], .term-menu [data-tip], #wt .wt-exp [data-tip], #wt .wt-seg [data-tip], #wt .wt-fm [data-tip], #wt .wt-st-h [data-tip]') // 0.9.18: the file map's eye, step number and long folders; a step header's files and (cut short) title // 0.9.12: the project chips, the sheet's ×, a project page's Edit
+  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip], #tabPager [data-tip], #lfTabs [data-tip], .sg[data-tip], .lo-act-x[data-tip], .repos.projects [data-tip], .lo-sheet-x[data-tip], .proj-edit[data-tip], .feed-why[data-tip], .term-menu [data-tip], #wt [data-tip]') // 0.9.18 everything in the walkthrough (its header's icon buttons, the slide nav, file status glyphs); before: the file map's eye, step number and long folders; a step header's files and (cut short) title the file map's eye, step number and long folders; a step header's files and (cut short) title // 0.9.12: the project chips, the sheet's ×, a project page's Edit
   document.addEventListener('pointerover', (e) => { const el = tipped(e); if (!el) { if (cur) hide() } else if (e.pointerType === 'mouse' && el !== cur) show(el, 350) })
   document.addEventListener('pointerout', (e) => { const el = tipped(e); if (el && el === cur && !el.contains(e.relatedTarget)) hide() })
-  document.addEventListener('focusin', (e) => { const el = tipped(e); if (el && el.matches(':focus-visible')) show(el, 0); else if (cur) hide() })
+  document.addEventListener('focusin', (e) => { if (wtRefocusing) return; const el = tipped(e); if (el && el.matches(':focus-visible')) show(el, 0); else if (cur) hide() })
   document.addEventListener('focusout', (e) => { if (tipped(e) === cur) hide() })
-  for (const ev of ['pointerdown', 'scroll', 'hashchange', 'resize']) window.addEventListener(ev, hide, true)
+  for (const ev of ['pointerdown', 'hashchange', 'resize']) window.addEventListener(ev, hide, true)
+  window.addEventListener('scroll', () => { if (performance.now() >= wtQuietUntil) hide() }, true) // 0.9.18 not for a redraw putting the walkthrough's scroll back
   document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && cur) hide() })
   // 0.9.18 touch: a long press shows the tip (the tap it ends with doesn't follow the link)
   let lp = 0, lpd = false
@@ -7170,6 +7412,7 @@ document.addEventListener('click', (e) => { if (e.target.closest && $app.contain
   document.addEventListener('touchstart', (e) => {
     sw = null
     if (!narrowQ.matches || tabsUi.route !== 's' || e.touches.length !== 1) return
+    if (navOwnsTouch(e.touches[0].clientX)) return // 0.9.18: the left edge (and the open drawer) belong to the nav drawer
     const t = e.target
     // a table (even one that fits) or a code block is for reading and scrolling sideways, not for changing sessions
     if (t.closest('input, textarea, select, [contenteditable], .lo-menu, .cmdk, .doc-viewer, .lightbox, .pdfview, .tabs, .lf-tabs, .moremenu, table, .doc-table, pre, #wtDeck, .wt-dnav') || scrollsSideways(t)) return
@@ -7797,6 +8040,18 @@ document.addEventListener('click', async (ev) => {
       fmToggle((d && d.fingerprint) || '', btn.dataset.key, shut)
       return
     }
+    if (action === 'wt-file') { // 0.9.18 the Files view's list: open that file's diff and bring it to the top of the diff pane
+      ev.preventDefault()
+      const node = wtUi.node, d = node && node.querySelector('#wt-f-' + CSS.escape(btn.dataset.i || ''))
+      if (!d) return
+      d.open = true
+      for (const a of node.querySelectorAll('.wt-fl-i')) a.classList.toggle('cur', a.dataset.i === btn.dataset.i)
+      const m = btn.closest('details.wt-fl-m'); if (m) m.open = false // a phone: the folded list closes again
+      const sc = node.querySelector('#wtScroll')
+      if (sc) sc.scrollTo({ top: Math.max(0, sc.scrollTop + d.getBoundingClientRect().top - sc.getBoundingClientRect().top - 4), behavior: reducedMotion() ? 'auto' : 'smooth' })
+      const sm = d.querySelector('summary'); if (sm) sm.focus({ preventScroll: true })
+      return
+    }
     if (action === 'wt-go') { ev.preventDefault(); return wtGo(wtUi.sid, btn.dataset.step || null, { group: btn.dataset.group || null }) }
     if (action === 'wt-step') return wtStep(Number(btn.dataset.dir) || 1)
     if (action === 'wt-export-html') return wtExport('html')

package/ui/icons.js

@@ -3,6 +3,9 @@
 // so they follow light and dark; always aria-hidden next to a text label.
 // index.html carries the nav's copies inline (no script needed to draw them).
 export const ICONS = {
+  "panel-left-close": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M9 3v18\"/> <path d=\"m16 15-3-3 3-3\"/>",
+  "panel-left-open": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M9 3v18\"/> <path d=\"m14 9 3 3-3 3\"/>",
+  "menu": "<path d=\"M4 5h16\"/> <path d=\"M4 12h16\"/> <path d=\"M4 19h16\"/>",
   "arrow-up": "<path d=\"m5 12 7-7 7 7\"/> <path d=\"M12 19V5\"/>",
   "eye": "<path d=\"M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z\"/> <circle cx=\"12\" cy=\"12\" r=\"3\"/>",
   "circle-help": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3\"/> <path d=\"M12 17h.01\"/>",
@@ -37,6 +40,12 @@ export const ICONS = {
   "maximize-2": "<path d=\"M15 3h6v6\"/> <path d=\"m21 3-7 7\"/> <path d=\"m3 21 7-7\"/> <path d=\"M9 21H3v-6\"/>",
   "minimize-2": "<path d=\"m14 10 7-7\"/> <path d=\"M20 10h-6V4\"/> <path d=\"m3 21 7-7\"/> <path d=\"M4 14h6v6\"/>",
   "rotate-ccw": "<path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"/> <path d=\"M3 3v5h5\"/>",
+  "square-plus": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M8 12h8\"/> <path d=\"M12 8v8\"/>",
+  "square-minus": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M8 12h8\"/>",
+  "square-dot": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <circle cx=\"12\" cy=\"12\" r=\"2.6\" fill=\"currentColor\" stroke=\"none\"/>",
+  "square-arrow-right": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M8 12h8\"/> <path d=\"m12 16 4-4-4-4\"/>",
+  "rows-3": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M21 9H3\"/> <path d=\"M21 15H3\"/>",
+  "gallery-horizontal": "<path d=\"M2 3v18\"/> <rect width=\"12\" height=\"18\" x=\"6\" y=\"3\" rx=\"2\"/> <path d=\"M22 3v18\"/>",
   "list-checks": "<path d=\"M13 5h8\"/> <path d=\"M13 12h8\"/> <path d=\"M13 19h8\"/> <path d=\"m3 17 2 2 4-4\"/> <path d=\"m3 7 2 2 4-4\"/>",
   "plus": "<path d=\"M5 12h14\"/> <path d=\"M12 5v14\"/>",
   "play": "<path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\"/>",

package/ui/index.html

@@ -20,29 +20,33 @@
   <link rel="stylesheet" href="app.css">
 </head>
 <body>
-  <header class="top">
-    <a class="brand" href="#/" id="brand" title="Leftoff" aria-label="Leftoff">
+  <header class="top" id="navRail">
+    <a class="brand" href="#/" id="brand" data-tip="Leftoff" aria-label="Leftoff">
       <img src="favicon.svg" class="logo" alt="" width="22" height="22">
       <span>Leftoff</span>
     </a>
     <nav class="tabs" aria-label="Sections">
-      <a href="#/" data-route="board"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="7" height="9" x="3" y="3" rx="1"/> <rect width="7" height="5" x="14" y="3" rx="1"/> <rect width="7" height="9" x="14" y="12" rx="1"/> <rect width="7" height="5" x="3" y="16" rx="1"/></svg><span class="lbl">Board</span></a>
-      <a href="#/waiting" data-route="waiting" id="needsTab" aria-haspopup="dialog" aria-expanded="false" aria-controls="quickLook"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="lbl">Needs you</span><span class="lbl-short">Needs</span><span class="navcount" id="needsCount" hidden></span></a>
-      <a href="#/lists" data-route="lists" id="listsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 5h8"/> <path d="M13 12h8"/> <path d="M13 19h8"/> <path d="m3 17 2 2 4-4"/> <path d="m3 7 2 2 4-4"/></svg><span class="lbl">Lists</span><span class="navcount" id="listsCount" hidden></span></a>
-      <a href="#/prs" data-route="prs" id="prsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="18" cy="18" r="3"/> <circle cx="6" cy="6" r="3"/> <path d="M13 6h3a2 2 0 0 1 2 2v7"/> <line x1="6" x2="6" y1="9" y2="21"/></svg><span class="lbl">PRs</span></a>
-      <a href="#/timeline" data-route="timeline" class="tab-extra"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span class="lbl">Timeline</span></a>
-      <a href="#/digest" data-route="digest" class="tab-extra"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span class="lbl">Digest</span></a>
+      <a href="#/" data-route="board" data-tip="Board"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="7" height="9" x="3" y="3" rx="1"/> <rect width="7" height="5" x="14" y="3" rx="1"/> <rect width="7" height="9" x="14" y="12" rx="1"/> <rect width="7" height="5" x="3" y="16" rx="1"/></svg><span class="lbl">Board</span></a>
+      <a href="#/waiting" data-route="waiting" id="needsTab" data-tip="Needs you" aria-haspopup="dialog" aria-expanded="false" aria-controls="quickLook"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="lbl">Needs you</span><span class="lbl-short">Needs</span><span class="navcount" id="needsCount" hidden></span></a>
+      <a href="#/lists" data-route="lists" id="listsTab" data-tip="Lists"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 5h8"/> <path d="M13 12h8"/> <path d="M13 19h8"/> <path d="m3 17 2 2 4-4"/> <path d="m3 7 2 2 4-4"/></svg><span class="lbl">Lists</span><span class="navcount" id="listsCount" hidden></span></a>
+      <a href="#/prs" data-route="prs" id="prsTab" data-tip="PRs"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="18" cy="18" r="3"/> <circle cx="6" cy="6" r="3"/> <path d="M13 6h3a2 2 0 0 1 2 2v7"/> <line x1="6" x2="6" y1="9" y2="21"/></svg><span class="lbl">PRs</span></a>
+      <a href="#/timeline" data-route="timeline" class="tab-extra" data-tip="Timeline"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span class="lbl">Timeline</span></a>
+      <a href="#/digest" data-route="digest" class="tab-extra" data-tip="Digest"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span class="lbl">Digest</span></a>
       <button type="button" class="tab-more" id="moreBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="moreMenu"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="1"/> <circle cx="19" cy="12" r="1"/> <circle cx="5" cy="12" r="1"/></svg><span class="lbl">More</span><span class="moredot" hidden></span></button>
     </nav>
     <div class="topright">
-      <button type="button" class="searchbtn" id="searchBtn" title="Search (⌘K)" aria-label="Search" aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K /"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/> <path d="m21 21-4.3-4.3"/></svg><span class="sb-lbl">Search</span><kbd class="sb-kbd" id="searchKbd">⌘K</kbd></button>
+      <button type="button" class="searchbtn" id="searchBtn" data-tip="Search (⌘K)" aria-label="Search" aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K /"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/> <path d="m21 21-4.3-4.3"/></svg><span class="sb-lbl">Search</span><kbd class="sb-kbd" id="searchKbd">⌘K</kbd></button>
       <a href="#/new" data-route="new" id="newTab" class="iconbtn newbtn" data-tip="New session" aria-label="New session"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14"/> <path d="M12 5v14"/></svg><span class="lbl">New session</span></a>
       <button type="button" id="termBtn" class="iconbtn termbtn" data-term-toggle data-tip="Terminal (⌃`)" aria-label="Terminal" aria-expanded="false" aria-controls="termDock" aria-keyshortcuts="Control+`"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19h8"/> <path d="m4 17 6-6-6-6"/></svg><span class="lbl">Terminal</span></button>
-      <button type="button" class="health" id="health" title="Status" aria-haspopup="dialog" aria-expanded="false" aria-controls="statusPop"><span class="dot"></span><span class="label">connecting…</span></button>
-      <a href="#/whats-new" data-route="whats-new" id="wnTab" class="iconbtn" title="What’s new" aria-label="What’s new"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span class="lbl">What’s new</span><span class="newdot" hidden></span></a>
-      <a href="#/settings" data-route="settings" id="setTab" class="iconbtn" title="Settings" aria-label="Settings"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span class="lbl">Settings</span><span class="topdot" hidden></span></a>
+      <button type="button" class="health" id="health" data-tip="Status" aria-haspopup="dialog" aria-expanded="false" aria-controls="statusPop"><span class="dot"></span><span class="label">connecting…</span></button>
+      <a href="#/whats-new" data-route="whats-new" id="wnTab" class="iconbtn" data-tip="What’s new" aria-label="What’s new"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span class="lbl">What’s new</span><span class="newdot" hidden></span></a>
+      <a href="#/settings" data-route="settings" id="setTab" class="iconbtn" data-tip="Settings" aria-label="Settings"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span class="lbl">Settings</span><span class="topdot" hidden></span></a>
+      <button type="button" class="iconbtn navtoggle" id="navToggle" aria-controls="navRail" aria-expanded="true" aria-label="Collapse the sidebar" aria-keyshortcuts="Meta+B Control+B [" data-tip="Collapse sidebar (⌘B)"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="18" height="18" x="3" y="3" rx="2"/> <path d="M9 3v18"/> <path d="m16 15-3-3 3-3"/></svg><span class="lbl">Collapse</span></button>
     </div>
   </header>
+  <div class="navscrim" id="navScrim" hidden></div>
+  <div class="navdrawer" id="navDrawer" role="dialog" aria-modal="true" aria-label="Menu" hidden></div>
+  <div class="railtip" id="railTip" role="tooltip" hidden></div>
   <div class="moremenu" id="moreMenu" role="menu" aria-label="More" hidden>
     <a href="#/timeline" data-route="timeline" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span>Timeline</span></a>
     <a href="#/digest" data-route="digest" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span>Digest</span></a>

package/ui/live-view.js

@@ -242,6 +242,8 @@ export function fullButtonHtml(id, { esc, icon }) {
 // name goes in as text (the caller fills .lf-title with textContent).
 export function fullBarHtml(id, { esc, icon, pills = '', stop = '', retitle = '', glyph = '' }) {
   return '<div class="live-fbar">' +
+    // 0.9.18 phones: the nav as a drawer (ui/navrail.js); from 700px the rail is beside full screen and this hides
+    '<button type="button" class="btn lf-menu" data-nav-drawer aria-label="Menu" aria-expanded="false" aria-controls="navDrawer" data-tip="Menu">' + icon('menu') + '</button>' +
     '<button type="button" class="btn live-fs-x" data-action="live-full-exit" data-id="' + esc(id) + '" aria-label="Back to the board" data-tip="Board">' + icon('chevron-left') + '</button>' + // 0.9.16 one layout: back is the board
     glyph + '<h2 class="lf-title"></h2>' + retitle + '<div class="lf-pills">' + pills + '</div>' + stop +
     // 0.9.15 the embedded terminal (ui/term.js): docked under full screen, which gets shorter