initiative/specs/027-ui-polish/quickstart.md

Quickstart: Combatant Row UI Polish

Feature: 027-ui-polish | Date: 2026-03-10

Overview

Six presentational improvements to the combatant row in the initiative tracker. No domain or application layer changes — all work is in apps/web/src/components/.

Key Files

• apps/web/src/components/combatant-row.tsx — Main component; most changes here
• apps/web/src/components/condition-picker.tsx — May need positioning tweak for inline context
• apps/web/src/components/ac-shield.tsx — New component for shield-shaped AC display

Development

pnpm --filter web dev          # Start dev server
pnpm check                     # Run before committing (knip + format + lint + typecheck + test)

Implementation Order

1. Inline conditions + remove BookOpen icon (layout restructure)
2. Row click opens stat block (event delegation)
3. Hover-only remove button (CSS opacity)
4. AC shield shape (new component)
5. Expanded concentration click target (grid/padding tweak)
6. Larger d20 icon (className change)

Testing

No domain tests needed. Verify visually via dev server:

• Conditions appear inline after creature name
• "+" and "×" appear only on hover
• Clicking row opens stat block (bestiary creatures only)
• AC displays inside shield shape
• Concentration clickable across full left gutter
• D20 icon clearly recognizable