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