[#405] Book card and shelf layout redesign

[realproject7]

Summary

• StoryCard: Redesigned as 3D book with spine gradient, page edges (right + bottom), drop shadow beneath, and hover lift effect with growing shadow
• StoryGrid: Books displayed on visible shelf rows with gradient surface, front edge line, and depth shadow. Each row of 3 (desktop) / 2 (mobile) books sits on a shelf
• Home hero: Updated to "The Bookshelf" heading with serif italic section subheadings ("New & Noteworthy" / "Trending")
• StoryCardStats: Values use gold accent color instead of plain foreground
• FilterBar: Rounded pill container with warm hover backgrounds on filter tokens

No data fetching, API, or business logic changes. No detail page changes.

Fixes #405

Test plan

• StoryCard looks like a physical book with spine, page edges, and shadow
• Hover lifts the book and grows the shadow
• Books visually sit on shelf surfaces with visible edge and shadow
• Responsive: 2-col mobile, 3-col desktop, shelves adapt
• FilterBar has rounded pill shape with warm hover states
• npm run typecheck passes
• npm run lint passes

🤖 Generated with Claude Code

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The visual direction is on-spec overall, but the shelf-row grouping currently breaks the required mobile behavior. CI is also still pending, so the PR is not yet in a mergeable state.

Findings

• [high] Mobile shelf grouping is incorrect because rows are chunked in groups of 3 before rendering. On small screens the grid still shows 2 columns, which means a 3-item shelf renders as two visual rows sharing one shelf surface. That violates the issue requirement that each mobile row of 2 books sits on its own shelf.
  • File: src/components/StoryGrid.tsx:46
  • Suggestion: Render shelf groupings that match the active breakpoint, or otherwise structure the DOM/CSS so mobile gets a separate shelf surface for each 2-card row.

Decision

Request changes because the current implementation does not satisfy the responsive shelf acceptance criteria, and the required lint/typecheck check is still pending.

[project7-interns]

T2b Review — REQUEST CHANGES

Scope compliance: ✅ All 5 files match issue spec. No data/API/logic changes. No detail page changes.

Issues Found

1. Mobile shelf/grid mismatch (Bug)
StoryGrid.tsx chunks storylines by 3 (desktop cols), but mobile uses grid-cols-2. The 3rd book in each chunk wraps to a second row within the same shelf surface, making it look like one book sitting alone on a shelf meant for three. Fix: either chunk responsively (3 desktop, 2 mobile — may need JS or a CSS-only approach), or accept uneven last rows gracefully with CSS.

2. Undefined CSS variables
var(--bg-shelf) and var(--shelf-shadow) are referenced in FilterBar.tsx and StoryGrid.tsx but not defined in this PR. If these come from PR #407 (Sub-1), confirm they exist after merge. If not defined, these resolve to initial/transparent and the shelf surface and shadows will be invisible.

3. Perspective set but unused
The issue asks for "3D book perspective using CSS transforms (subtle rotateY + perspective)". perspective: 800px and preserve-3d are set, but no rotateY is applied — the books remain flat. Either add a subtle rotateY(2-3deg) or remove the perspective/preserve-3d properties to avoid dead code.

Minor Notes

• Hardcoded hex colors for spine/page edges (#A6926F, #F5EFE4, etc.) won't adapt to dark theme if one exists. Consider using CSS variables for these if theme support is planned.
• key={i} on ShelfRow — acceptable here since shelves won't reorder, but noting it.

Verdict

Issues #1 (mobile layout bug) and #2 (missing CSS vars) need fixing before approval. #3 is a gap vs. the spec worth addressing.

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The previously requested responsive shelf fix appears addressed: shelf grouping now adapts to the active breakpoint and the added rotateY gives the book card the intended 3D treatment.

Findings

• No remaining code findings from my prior review.
• Required status check lint-and-typecheck is still pending, so the PR is not yet ready for approval.

Decision

Re-review is clear on code, but I am holding approval until the required check finishes successfully.

[project7-interns]

T2b Re-Review — APPROVED

All three issues resolved:

1. Mobile shelf — Fixed with useShelfSize() hook using matchMedia to dynamically chunk by viewport (2 mobile, 3 desktop). Grid cols use inline style to stay in sync. Clean solution.
2. CSS vars — Confirmed --bg-shelf and --shelf-shadow exist in globals.css from merged #404. No issue.
3. 3D tilt — rotateY(-3deg) at rest, rotateY(0deg) + translateY(-6px) on hover. Matches the "picking up a book" feel from the spec.

Minor note (non-blocking): useShelfSize defaults to cols=3 during SSR, so mobile users may see a brief layout shift as it re-chunks to 2 after hydration. Acceptable for now.

LGTM.

[project7-interns]

Verdict: APPROVE

Summary

The responsive shelf regression from the initial review is fixed, the added 3D tilt now supports the intended bookshelf treatment, and the PR remains within the visual-only scope of issue #405.

Findings

• No blocking findings.

Decision

Approve because the code review concerns are resolved and the required lint-and-typecheck workflow is now passing.