95cb2edc23
Replace the combined "Round N — Name" string with a three-zone flex layout:
left (prev button + R{n} pill badge), center (prominent combatant name with
truncation), right (action buttons + next button). Adds 13 unit tests
covering all user stories including layout robustness and empty state.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1.3 KiB
1.3 KiB
Quickstart: Redesign Top Bar with Dedicated Round and Turn Fields
Feature: 034-topbar-redesign | Date: 2026-03-11
What This Feature Does
Replaces the combined "Round 1 — Conjurer" status display in the encounter top bar with two separate visual elements: a compact round badge/pill on the left and a prominent centered combatant name. The layout shifts from a simple centered text to a structured left-center-right arrangement.
Files to Modify
| File | Change |
|---|---|
apps/web/src/components/turn-navigation.tsx |
Refactor layout to three-zone flex structure with round badge and centered name |
Files to Create
| File | Purpose |
|---|---|
apps/web/src/components/__tests__/turn-navigation.test.tsx |
Unit tests for the refactored component |
How to Verify
# Run the dev server and view an active encounter
pnpm --filter web dev
# Run tests
pnpm vitest run apps/web/src/components/__tests__/turn-navigation.test.tsx
# Run full quality gate
pnpm check
Key Design Decisions
- "R1" format for the round badge (compact, saves space)
- CSS truncation for long combatant names (no JS needed)
- Three-zone flexbox layout: left (prev + badge), center (name), right (actions + next)
- No prop changes — all data already available in
Encountertype