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>
2.9 KiB
Implementation Plan: Redesign Top Bar with Dedicated Round and Turn Fields
Branch: 034-topbar-redesign | Date: 2026-03-11 | Spec: 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)
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)
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.