Files

Lukas 460c65bf49 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>

2026-03-11 14:18:15 +01:00

1.8 KiB

Raw Blame History

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

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+)

1.8 KiB Raw Blame History