From 4b67a171cf9d8157e3a3554bb5f84244e6c5d4e6 Mon Sep 17 00:00:00 2001
From: inkko44 <do@inkko.ca>
Date: Tue, 14 Jul 2026 11:05:34 -0400
Subject: [PATCH] feat(bolt-slides): sidebar icon, grid view, mobile dock
 restack, auto deck title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BOU-2200: the dock's rail toggle used a 2x2 grid icon that read as a grid
view — it now uses a proper sidebar icon, and the grid icon opens a real
full-screen grid view of all slides (G). Sidebar moves to S, annotate to A.

BOU-2201: shared decks kept the placeholder tab title. The skill now sets
the title + emoji favicon unprompted, index.html ships a placeholder
favicon, and the Deck derives a title from the cover heading as a runtime
safety net.

Also from review feedback: thumbnails measure pre-paint (useLayoutEffect)
so the grid opens without a resize snap; on phones the dock restacks with
nav floating above the tools pill, and the annotation toolbar becomes a
single scrollable row with mouse drag-to-scroll.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 bolt-slides/.bolt/skills/slides/SKILL.md |   9 +-
 bolt-slides/README.md                    |   2 +-
 bolt-slides/index.html                   |   5 +
 bolt-slides/src/deck/Annotator.tsx       |  43 ++++++-
 bolt-slides/src/deck/Deck.tsx            | 146 +++++++++++++++++------
 bolt-slides/src/deck/icons.tsx           |   7 ++
 bolt-slides/src/styles/base.css          | 101 ++++++++++++++--
 7 files changed, 269 insertions(+), 44 deletions(-)

diff --git a/bolt-slides/.bolt/skills/slides/SKILL.md b/bolt-slides/.bolt/skills/slides/SKILL.md
index 29a0328..99b6e5b 100644
--- a/bolt-slides/.bolt/skills/slides/SKILL.md
+++ b/bolt-slides/.bolt/skills/slides/SKILL.md
@@ -92,6 +92,11 @@ Dark vs light: set `html { color-scheme }` in base.css and pick `--bg`/`--fg`
 accordingly. Set fonts in `--font-head`/`--font-body` and the `@import` at the top
 of `base.css`. Derive from the brand when given.
 
+**Tab title + icon — always, unprompted.** Shared decks show the browser tab, so
+never leave the `index.html` placeholders: set `<title>` to the deck's real title
+(e.g. "Acme — Series A") and swap the emoji in the favicon `<link>` to one that
+fits the topic. Do this for every deck without being asked.
+
 ---
 
 ## Step 3 — Author slides (each child of `<Deck>` is one slide)
@@ -288,12 +293,14 @@ trigger or that it exists — just deliver the demo.
 
 - [ ] The engine + chrome in `src/deck/` are **left untouched**; the
       dock + thumbnail rail appear, arrow keys advance AND step back through builds,
-      fullscreen / overview work, annotation (D) has full tools and
+      fullscreen / sidebar (S) / grid view (G) work, annotation (A) has full tools and
       persists per slide, presenter (P) opens a synced new tab, `H` hides the UI, and
       the URL hash tracks the slide.
 - [ ] The deck is **authored, not reskinned** — topic, structure, copy, names are the
       user's, with no starter leftovers (no "Title"/"Northwind").
 - [ ] If a brand/URL was given, `--primary`, fonts, and logo come from that brand.
+- [ ] `index.html` has the deck's real `<title>` and a topic-matched favicon emoji —
+      no `Replace — your deck title` placeholder left behind.
 - [ ] Only the `:root` block was edited for the theme; editing `--primary` recolors
       everything incl. the dock.
 - [ ] Slides compose like web sections (full-bleed/asymmetric/bento/split), not
diff --git a/bolt-slides/README.md b/bolt-slides/README.md
index 3d42c45..14ff16d 100644
--- a/bolt-slides/README.md
+++ b/bolt-slides/README.md
@@ -2,7 +2,7 @@
 
 A Bolt skill that builds a premium, **responsive React presentation deck** — classic
 paged slides you present one at a time, with a Slidev-style floating dock + thumbnail
-rail, click-builds, annotation, and presenter mode — but each slide is a
+rail, grid overview, click-builds, annotation, and presenter mode — but each slide is a
 responsive web layout (no fixed canvas, no clipping) built from a rich component
 library.
 
diff --git a/bolt-slides/index.html b/bolt-slides/index.html
index 56383bc..fb4074a 100644
--- a/bolt-slides/index.html
+++ b/bolt-slides/index.html
@@ -3,7 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Always replace the title + favicon emoji to match the deck topic -->
     <title>Replace — your deck title</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎞️</text></svg>"
+    />
     <meta name="theme-color" content="#05070a" />
   </head>
   <body>
diff --git a/bolt-slides/src/deck/Annotator.tsx b/bolt-slides/src/deck/Annotator.tsx
index 0e4eb09..c37e1e3 100644
--- a/bolt-slides/src/deck/Annotator.tsx
+++ b/bolt-slides/src/deck/Annotator.tsx
@@ -370,6 +370,39 @@ export default function Annotator({
     redraw();
   }
 
+  // drag-to-scroll for the bar when it overflows (phones scroll natively by
+  // touch; this covers mouse users). A 4px threshold keeps clicks working,
+  // and a capture-phase click handler swallows the click after a real drag.
+  const barRef = useRef<HTMLDivElement>(null);
+  const barDrag = useRef({ down: false, moved: false, x: 0, left: 0 });
+  function barDown(e: React.PointerEvent) {
+    if (e.pointerType !== 'mouse' || !barRef.current) return;
+    barDrag.current = {
+      down: true,
+      moved: false,
+      x: e.clientX,
+      left: barRef.current.scrollLeft,
+    };
+  }
+  function barMove(e: React.PointerEvent) {
+    const d = barDrag.current;
+    if (!d.down || !barRef.current) return;
+    const dx = e.clientX - d.x;
+    if (!d.moved && Math.abs(dx) < 4) return;
+    d.moved = true;
+    barRef.current.scrollLeft = d.left - dx;
+  }
+  function barUp() {
+    barDrag.current.down = false;
+  }
+  function barClickCapture(e: React.MouseEvent) {
+    if (barDrag.current.moved) {
+      e.preventDefault();
+      e.stopPropagation();
+      barDrag.current.moved = false;
+    }
+  }
+
   return (
     <>
       <canvas
@@ -383,7 +416,15 @@ export default function Annotator({
         onPointerMove={move}
       />
       {active && (
-        <div className="ann-bar">
+        <div
+          className="ann-bar"
+          ref={barRef}
+          onPointerDown={barDown}
+          onPointerMove={barMove}
+          onPointerUp={barUp}
+          onPointerLeave={barUp}
+          onClickCapture={barClickCapture}
+        >
           {TOOLS.map((t) => (
             <button
               key={t.id}
diff --git a/bolt-slides/src/deck/Deck.tsx b/bolt-slides/src/deck/Deck.tsx
index 7955ef9..9a58447 100644
--- a/bolt-slides/src/deck/Deck.tsx
+++ b/bolt-slides/src/deck/Deck.tsx
@@ -2,6 +2,7 @@ import {
   Children,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -11,6 +12,7 @@ import { MotionConfig } from 'framer-motion';
 import { DeckCtx } from './DeckContext';
 import Annotator, { type Stroke } from './Annotator';
 import {
+  IconSidebar,
   IconGrid,
   IconLeft,
   IconRight,
@@ -24,9 +26,9 @@ import {
 /* ── The paged presentation engine + the Slidev-style chrome (dock + rail).
    Wrap your <Slide>/<Bento>/… in <Deck>. Each top-level child is one slide.
      → / ↓ / Space   next (reveals the next <Build>, then the next slide)
-     ← / ↑           previous            O overview    F fullscreen
-     Home / End      first / last        D draw        P presenter (new tab)
-     H  hide/show the UI
+     ← / ↑           previous            S sidebar     G grid view
+     Home / End      first / last        A annotate    P presenter (new tab)
+     F fullscreen    H hide/show the UI
    Copy verbatim; theme only via the :root tokens. ───────────────────────── */
 
 const fmt = (s: number) =>
@@ -38,7 +40,10 @@ const fmt = (s: number) =>
 function Thumb({ children }: { children: ReactNode }) {
   const frameRef = useRef<HTMLDivElement>(null);
   const [d, setD] = useState({ vw: 1280, vh: 720, scale: 0.15 });
-  useEffect(() => {
+  // measure before paint — with useEffect the first frame renders at the
+  // default scale and visibly snaps (worst in the grid view, which has no
+  // slide-in transition to mask it).
+  useLayoutEffect(() => {
     const el = frameRef.current;
     if (!el) return;
     const update = () =>
@@ -92,6 +97,7 @@ export default function Deck({ children }: { children: ReactNode }) {
   const [clicks, setClicks] = useState(0);
   const [curMax, setCurMax] = useState(0);
   const [railOpen, setRailOpen] = useState(false);
+  const [gridOpen, setGridOpen] = useState(false);
   const [drawing, setDrawing] = useState(false);
   const [elapsed, setElapsed] = useState(0);
   const [fs, setFs] = useState(false);
@@ -160,6 +166,15 @@ export default function Deck({ children }: { children: ReactNode }) {
     if (document.fullscreenElement) document.exitFullscreen();
     else document.documentElement.requestFullscreen?.();
   }, []);
+  // sidebar and grid view are mutually exclusive — opening one closes the other
+  const toggleRail = useCallback(() => {
+    setRailOpen((v) => !v);
+    setGridOpen(false);
+  }, []);
+  const toggleGrid = useCallback(() => {
+    setGridOpen((v) => !v);
+    setRailOpen(false);
+  }, []);
   const setNote = useCallback((text: string) => {
     setNoteOverrides((prev) => {
       const nextO = { ...prev, [slideRef.current]: text };
@@ -212,16 +227,20 @@ export default function Deck({ children }: { children: ReactNode }) {
           e.preventDefault();
           go(total - 1);
           break;
-        case 'o':
-        case 'O':
-          setRailOpen((v) => !v);
+        case 's':
+        case 'S':
+          toggleRail();
+          break;
+        case 'g':
+        case 'G':
+          toggleGrid();
           break;
         case 'f':
         case 'F':
           toggleFs();
           break;
-        case 'd':
-        case 'D':
+        case 'a':
+        case 'A':
           setDrawing((v) => !v);
           break;
         case 'p':
@@ -234,6 +253,7 @@ export default function Deck({ children }: { children: ReactNode }) {
           break;
         case 'Escape':
           setRailOpen(false);
+          setGridOpen(false);
           setDrawing(false);
           setUiHidden(false);
           break;
@@ -241,7 +261,18 @@ export default function Deck({ children }: { children: ReactNode }) {
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [next, prev, go, total, toggleFs, openPresenter]);
+  }, [next, prev, go, total, toggleRail, toggleGrid, toggleFs, openPresenter]);
+
+  // safety net: if the authored deck kept the placeholder tab title, derive
+  // one from the current slide's heading so shared links look right.
+  useEffect(() => {
+    if (!document.title.startsWith('Replace')) return;
+    const h = document.querySelector<HTMLElement>(
+      '.slide-stage h1, .slide-stage h2'
+    );
+    const t = h?.innerText.replace(/\s+/g, ' ').trim();
+    if (t) document.title = t;
+  }, []);
 
   // URL hash sync (initial slide comes from the hash via useState above)
   useEffect(() => {
@@ -323,6 +354,33 @@ export default function Deck({ children }: { children: ReactNode }) {
   const cursorHidden = fs && cursorIdle && !drawing;
   const showAnnotator = drawing || (annStore.current[slide]?.length ?? 0) > 0;
 
+  // prev / counter / next — rendered inside the pill on desktop, in its own
+  // pill above the tools on phones (only one is visible at a time).
+  const navCluster = (
+    <>
+      <button
+        className="noir-icon-btn"
+        data-tip="Previous"
+        disabled={!hasPrev}
+        onClick={prev}
+      >
+        <IconLeft />
+      </button>
+      <div className="noir-counter">
+        <span className="noir-counter-now">{slide + 1}</span>
+        <span className="noir-counter-tot">/ {total}</span>
+      </div>
+      <button
+        className="noir-icon-btn"
+        data-tip="Next"
+        disabled={!hasNext}
+        onClick={next}
+      >
+        <IconRight />
+      </button>
+    </>
+  );
+
   return (
     <MotionConfig reducedMotion="user">
       <div className={'deck' + (cursorHidden ? ' nocursor' : '')}>
@@ -370,6 +428,36 @@ export default function Deck({ children }: { children: ReactNode }) {
           </div>
         </aside>
 
+        {gridOpen && (
+          <div className="noir-grid">
+            <div className="noir-grid-head">
+              <span className="noir-rail-title">All slides</span>
+              <button
+                className="noir-icon-btn sm"
+                data-tip="Close"
+                onClick={() => setGridOpen(false)}
+              >
+                <IconClose />
+              </button>
+            </div>
+            <div className="noir-grid-list">
+              {slides.map((s, i) => (
+                <button
+                  key={i}
+                  className={'noir-thumb' + (i === slide ? ' active' : '')}
+                  onClick={() => {
+                    go(i);
+                    setGridOpen(false);
+                  }}
+                >
+                  <span className="noir-thumb-no">{i + 1}</span>
+                  <Thumb>{s}</Thumb>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
         {isPresenter && (
           <div className="noir-presenter">
             <div className="noir-presenter-row">
@@ -397,39 +485,29 @@ export default function Deck({ children }: { children: ReactNode }) {
         )}
 
         <div className={'noir-dock' + (hideUI ? ' hidden' : '')}>
+          {/* phones: nav floats bare above the tools pill (see base.css) */}
+          <div className="noir-bar noir-nav-bar">{navCluster}</div>
           <div className="noir-bar">
             <button
               className={'noir-icon-btn' + (railOpen ? ' on' : '')}
-              data-tip="Overview (O)"
-              onClick={() => setRailOpen((v) => !v)}
-            >
-              <IconGrid />
-            </button>
-            <span className="noir-sep" />
-            <button
-              className="noir-icon-btn"
-              data-tip="Previous"
-              disabled={!hasPrev}
-              onClick={prev}
+              data-tip="Sidebar (S)"
+              onClick={toggleRail}
             >
-              <IconLeft />
+              <IconSidebar />
             </button>
-            <div className="noir-counter">
-              <span className="noir-counter-now">{slide + 1}</span>
-              <span className="noir-counter-tot">/ {total}</span>
-            </div>
             <button
-              className="noir-icon-btn"
-              data-tip="Next"
-              disabled={!hasNext}
-              onClick={next}
+              className={'noir-icon-btn' + (gridOpen ? ' on' : '')}
+              data-tip="Grid view (G)"
+              onClick={toggleGrid}
             >
-              <IconRight />
+              <IconGrid />
             </button>
             <span className="noir-sep" />
+            <div className="noir-nav-inline">{navCluster}</div>
+            <span className="noir-sep" />
             <button
-              className={'noir-icon-btn noir-optional' + (drawing ? ' on' : '')}
-              data-tip="Annotate (D)"
+              className={'noir-icon-btn' + (drawing ? ' on' : '')}
+              data-tip="Annotate (A)"
               onClick={() => setDrawing((v) => !v)}
             >
               <IconPencil />
@@ -442,7 +520,7 @@ export default function Deck({ children }: { children: ReactNode }) {
               {fs ? <IconShrink /> : <IconExpand />}
             </button>
             <button
-              className="noir-icon-btn noir-optional"
+              className="noir-icon-btn"
               data-tip="Presenter — new tab (P)"
               onClick={openPresenter}
             >
diff --git a/bolt-slides/src/deck/icons.tsx b/bolt-slides/src/deck/icons.tsx
index d1371d6..f58cc26 100644
--- a/bolt-slides/src/deck/icons.tsx
+++ b/bolt-slides/src/deck/icons.tsx
@@ -10,6 +10,13 @@ const base = {
   strokeLinejoin: 'round' as const,
 };
 
+export const IconSidebar = () => (
+  <svg {...base}>
+    <rect x="2.5" y="3.5" width="19" height="17" rx="2" />
+    <path d="M10 3.5v17" />
+    <path d="M5.6 8.5h1.4M5.6 12h1.4" />
+  </svg>
+);
 export const IconGrid = () => (
   <svg {...base}>
     <rect x="3" y="3" width="7" height="7" rx="1.5" />
diff --git a/bolt-slides/src/styles/base.css b/bolt-slides/src/styles/base.css
index 025a453..7d4c1f1 100644
--- a/bolt-slides/src/styles/base.css
+++ b/bolt-slides/src/styles/base.css
@@ -2103,6 +2103,15 @@ strong {
   font-size: 13px;
   color: #8e8e93;
 }
+/* nav cluster: inline in the pill on desktop; its own pill above on phones */
+.noir-nav-bar {
+  display: none;
+}
+.noir-nav-inline {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 
 /* Left thumbnail rail */
 .noir-rail {
@@ -2196,6 +2205,43 @@ strong {
   scrollbar-width: none;
 }
 
+/* Full-screen grid view (G) — every slide as a thumbnail. Sits under the
+   dock (z 90) so the grid button stays clickable to toggle it off. */
+.noir-grid {
+  position: fixed;
+  inset: 0;
+  z-index: 89;
+  padding: 18px 22px 96px;
+  overflow-y: auto;
+  background: rgba(18, 18, 20, 0.92);
+  backdrop-filter: blur(26px) saturate(180%);
+  -webkit-backdrop-filter: blur(26px) saturate(180%);
+  font-family: var(--font-body);
+}
+.noir-grid-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 6px 16px;
+}
+.noir-grid-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 18px 16px;
+  align-content: start;
+}
+/* grid thumbs reuse the rail's .noir-thumb, stacked with the number below */
+.noir-grid .noir-thumb {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 7px;
+}
+.noir-grid .noir-thumb-no {
+  order: 2;
+  width: auto;
+  padding-left: 2px;
+}
+
 /* Presenter overlay (notes + next + timer) */
 .noir-presenter {
   position: fixed;
@@ -2658,9 +2704,10 @@ strong {
   }
 }
 
-/* ── Responsive controls — declutter the dock on touch / small screens ─
+/* ── Responsive controls — restack the dock on touch / small screens ─
    On touch there's no hover, so keep the dock fully visible; on phones,
-   shrink it and drop the presenter-only tools (draw + presenter overlay). */
+   prev / counter / next float bare above the pill, and the pill keeps
+   all the tools. */
 @media (hover: none) {
   .noir-dock {
     opacity: 1;
@@ -2670,6 +2717,24 @@ strong {
   .noir-dock {
     opacity: 1;
     bottom: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+  }
+  .noir-bar.noir-nav-bar {
+    display: flex;
+    padding: 0;
+    background: none;
+    border: none;
+    box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
+  }
+  .noir-nav-inline,
+  .noir-bar > .noir-sep {
+    display: none;
   }
   .noir-bar {
     gap: 2px;
@@ -2690,14 +2755,36 @@ strong {
   .noir-counter-now {
     font-size: 15px;
   }
-  .noir-sep {
-    margin: 0 2px;
+  .noir-rail {
+    width: min(248px, 84vw);
+  }
+  .noir-grid {
+    padding: 14px 14px 132px;
+  }
+  .noir-grid-list {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 14px 12px;
+  }
+  /* annotation toolbar: one swipeable row on phones (wrapping made the
+     999px-radius pill collapse into a pinched oval); clears the taller dock */
+  .ann-bar {
+    bottom: 104px;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
   }
-  .noir-optional {
+  .ann-bar::-webkit-scrollbar {
     display: none;
   }
-  .noir-rail {
-    width: min(248px, 84vw);
+  .ann-bar > * {
+    flex: none;
+  }
+  /* the scroll container clips anything outside it — drop hover tooltips
+     here (touch has no hover anyway) instead of showing them cut off */
+  .ann-bar [data-tip]::after {
+    display: none;
   }
 }