From f87e88420c8c94225a5387c6edfef2dfd1278a85 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 18 Jun 2026 18:35:39 +0000 Subject: [PATCH] Document BookNest page design decisions --- design-decisions.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/design-decisions.md b/design-decisions.md index 3ec17a9..4f26945 100644 --- a/design-decisions.md +++ b/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