# Implementation Plan: Redesign Top Bar with Dedicated Round and Turn Fields

**Branch**: `034-topbar-redesign` | **Date**: 2026-03-11 | **Spec**: [spec.md](spec.md)
**Input**: Feature specification from `/specs/034-topbar-redesign/spec.md`

## Summary

Refactor the `TurnNavigation` component to replace the combined "Round N — Name" text with a left-center-right layout: a muted round badge/pill on the left (after the prev button), a prominent centered combatant name, and action buttons grouped on the right. This is a purely presentational change in the adapter layer — no domain or application changes needed.

## Technical Context

**Language/Version**: TypeScript 5.8 (strict mode, `verbatimModuleSyntax`)
**Primary Dependencies**: React 19, Tailwind CSS v4, Lucide React
**Storage**: N/A (no persistence changes — display-only refactor)
**Testing**: Vitest + @testing-library/react
**Target Platform**: Web (desktop + mobile browsers)
**Project Type**: Web application (React SPA)
**Performance Goals**: No layout shift on turn/round changes; responsive across 320px–1920px
**Constraints**: Single component refactor; no domain or application layer changes
**Scale/Scope**: 1 component file (`turn-navigation.tsx`), 1 new test file

## Constitution Check

*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*

| Principle | Status | Notes |
|-----------|--------|-------|
| I. Deterministic Domain Core | PASS | No domain changes — purely adapter-layer UI refactor |
| II. Layered Architecture | PASS | Change is entirely in `apps/web/` (adapter layer) |
| III. Clarification-First | PASS | Spec is clear; no non-trivial assumptions needed |
| IV. Escalation Gates | PASS | Implementation matches spec scope exactly |
| V. MVP Baseline Language | PASS | No scope constraints affected |
| VI. No Gameplay Rules | PASS | No gameplay logic involved |

**Post-Phase 1 re-check**: All gates still PASS. Design introduces no new layers, domain changes, or scope expansion.

## Project Structure

### Documentation (this feature)

```text
specs/034-topbar-redesign/
├── plan.md              # This file
├── research.md          # Phase 0 output
├── data-model.md        # Phase 1 output (minimal — no data changes)
├── quickstart.md        # Phase 1 output
└── tasks.md             # Phase 2 output (/speckit.tasks command)
```

### Source Code (repository root)

```text
apps/web/src/
├── components/
│   ├── turn-navigation.tsx          # Primary file to refactor
│   └── ui/
│       ├── button.tsx               # Existing — reused for badge styling
│       └── confirm-button.tsx       # Existing — no changes
```

**Structure Decision**: No new files or directories needed. The refactor modifies `turn-navigation.tsx` in place. A new test file `apps/web/src/components/__tests__/turn-navigation.test.tsx` will be created.