460c65bf49
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>
42 lines
1.8 KiB
Markdown
42 lines
1.8 KiB
Markdown
# 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+)
|