# 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