Implement stat block panel fold/unfold and pin-to-second-panel

Replace the close button and heading with fold/unfold controls that
collapse the panel to a slim right-edge tab showing the creature name
vertically, and add a pin button (xl+ viewports with creature loaded)
that opens the creature in a second left-side panel for simultaneous
reference. Fold state is respected on turn change. 19 acceptance tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-11 14:18:15 +01:00
parent 95cb2edc23
commit 460c65bf49
12 changed files with 1165 additions and 57 deletions

View File

@@ -0,0 +1,41 @@
# Quickstart: Stat Block Panel Fold/Unfold and Pin
**Feature**: 035-statblock-fold-pin
**Date**: 2026-03-11
## What This Feature Does
Replaces the stat block panel's close button with fold/unfold controls and adds the ability to pin a creature to a second panel for side-by-side reference.
## Key Files to Modify
| File | Change |
|------|--------|
| `apps/web/src/components/stat-block-panel.tsx` | Core changes: remove close button + heading, add fold/unfold toggle, add pin/unpin buttons, add folded tab view, accept new props for panel role |
| `apps/web/src/App.tsx` | New state: `pinnedCreatureId`, `isRightPanelFolded`. Render second StatBlockPanel for pinned creature. Update auto-show logic to unfold panel. |
| `apps/web/src/index.css` | New CSS: folded tab styles, slide transition utility, vertical text utility |
## New Files
None expected. All changes fit within existing component structure.
## Architecture Notes
- **Layer**: All changes are in the Adapter (web) layer — no domain or application changes needed.
- **State**: Ephemeral React state only — no persistence changes.
- **Component reuse**: The same `StatBlockPanel` component serves both browse (right) and pinned (left) panels, differentiated by a prop.
- **Animation**: CSS transitions on `translate` property, matching existing 200ms ease-out pattern.
## Dev Commands
```bash
pnpm --filter web dev # Start dev server to test visually
pnpm vitest run apps/web/src # Run web app tests
pnpm check # Full quality gate before commit
```
## Testing Strategy
- Unit tests for fold/unfold state transitions and conditional rendering
- Unit tests for pin/unpin behavior and viewport-responsive pin button visibility
- Visual testing via dev server at various viewport widths (< 1024px, 1024-1279px, 1280px+)