Document BookNest page design decisions

design-decisions.md

@@ -112,6 +112,47 @@
   — otherwise straight edges of the card don't reach full opacity and a hard border line
   remains visible (only corners fade correctly with a fixed percentage).
 
+### BookNest Page
+- Hero banner reused at the App.tsx layout level (`showHero` now includes `/booknest`),
+  with page-specific tuning via small lookup maps in `App.tsx` keyed on `location.pathname`:
+  `heroPaddingTop` (how far content sits below the hero top) and `heroObjectPosition`
+  (horizontal/vertical crop of the arch image) — `70px` / `54% 8%` for BookNest vs.
+  `72px` / `center 5%` for Infrastructure. Extend these maps rather than hardcoding a
+  single value when a future page needs different hero framing.
+- **Large hero title + subtitle**: unlike other pages, BookNest's TopBar title is NOT the
+  small 18px uppercase label — it's rendered at 28px with a subtitle line ("Your Digital
+  Library") underneath, driven by a new `pageSubtitles` map in `TopBar.tsx`. When a page
+  has a subtitle, the header height grows from 56px → 72px (`TopBar.tsx`), and `App.tsx`'s
+  `topBarHeight` lookup keeps the content section's `calc(100vh - Npx)` in sync — both
+  must be updated together or the layout will clip/gap.
+- **Stats row lives directly under the hero subtitle** (Links / Categories / Favorites),
+  not in its own separate bar — matches the blueprint's hero-header block grouping.
+- **"Quick Access" section label** added above the 5 quick-access category cards (gold,
+  same `sectionTitle` style) — the row is intentionally pulled up via a small negative
+  hero-padding tune so it slightly overlaps the bottom edge of the hero, like the blueprint.
+- **"+ Add Bookmark" button**: same gold-fill button style as Infrastructure's "+ Add
+  Resource", placed inline next to the "Quick Access" label rather than the page-stats row.
+- **Right sidebar spans both grid rows** (`gridRow: '1 / span 2'` in a `gridTemplateRows:
+  'auto 1fr'` grid) so the Favorites card can rise up near the hero while the main column's
+  page-stats row stays in row 1 of column 1 only — keeps the two from overlapping/clipping.
+  Negative margins were tried first and discarded: content pushed above the scroll
+  container's natural top edge gets clipped by `overflow-y-auto`, so prefer reshaping the
+  grid/flow over negative-margin hacks when something needs to "reach upward."
+- **Sidebar cards stretch to match the main column's full height** so the last card's
+  (Category Breakdown) bottom border lines up with the bottom of the bookmark groups grid:
+  sidebar wrapper is `display:flex; flex-direction:column; height:100%` (grid's default
+  `align-items: stretch` already gives it the matching height), and each card uses
+  `flex: 1 0 auto` (Favorites gets `flex: 1.4 0 auto` to read as visibly taller, per
+  explicit request) so they share the leftover vertical space instead of all packing tight
+  at content height.
+- lucide-react gotcha (see Global Rules candidate): the installed version does **not**
+  export brand/wordmark icons (`Github`, `Gitlab`, `Linkedin`, `Youtube`) even though
+  TypeScript's type declarations list them — `tsc --noEmit` stays clean while the page
+  renders blank with a runtime `SyntaxError` only visible in the Vite dev log. Verify
+  icon names against `Object.keys(require('lucide-react'))` before importing anything
+  brand-flavored; substitutes used here: `GitBranch`/`GitFork` (GitHub/GitLab/Gitea),
+  `SquarePlay` (YouTube), `Briefcase` (LinkedIn Learning).
+
 ---
 
 ## Future Integration Notes