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>
40 lines
1.3 KiB
Markdown
40 lines
1.3 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
1. **"R1" format** for the round badge (compact, saves space)
|
|
2. **CSS truncation** for long combatant names (no JS needed)
|
|
3. **Three-zone flexbox** layout: left (prev + badge), center (name), right (actions + next)
|
|
4. **No prop changes** — all data already available in `Encounter` type
|