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>
54 lines
3.9 KiB
Markdown
54 lines
3.9 KiB
Markdown
# Research: Redesign Top Bar with Dedicated Round and Turn Fields
|
|
|
|
**Feature**: 034-topbar-redesign | **Date**: 2026-03-11
|
|
|
|
## R1: Layout Strategy for Left-Center-Right Bar
|
|
|
|
**Decision**: Use CSS flexbox with three explicit zones — left group, center (flex-1 with text centering), and right group. The center zone uses `flex-1` and `min-w-0` to absorb available space while allowing truncation.
|
|
|
|
**Rationale**: The current bar already uses `flex items-center justify-between`, which creates a two-zone layout (left vs right with center text between). Switching to a three-zone model with `flex-1` on the center gives true centering regardless of left/right zone widths. Using `min-w-0` on the center zone enables text truncation via `truncate` class.
|
|
|
|
**Alternatives considered**:
|
|
- CSS Grid with `grid-cols-3`: More rigid; harder to handle variable button counts in left/right zones.
|
|
- Absolute positioning for center text: Fragile; overlaps with buttons on narrow viewports.
|
|
|
|
## R2: Round Badge Styling
|
|
|
|
**Decision**: Use a compact inline element styled as a muted pill using Tailwind utilities: `rounded-full bg-muted text-muted-foreground text-xs px-2 py-0.5 font-medium`. Display format: "R1", "R2", etc. for compactness.
|
|
|
|
**Rationale**: A pill/badge is the standard UI pattern for metadata labels. Using "R1" instead of "Round 1" saves horizontal space in the left zone, keeping the layout balanced. The muted background and small text size ensure it reads as secondary information relative to the prominent combatant name.
|
|
|
|
**Alternatives considered**:
|
|
- "Round 1" full text: Takes more space; could crowd the left zone on narrow viewports.
|
|
- Outlined badge (border only, no background): Less visually distinct from surrounding text.
|
|
|
|
## R3: Combatant Name Truncation
|
|
|
|
**Decision**: Apply Tailwind's `truncate` class (which sets `overflow: hidden; text-overflow: ellipsis; white-space: nowrap`) on the centered combatant name element. The parent flex container with `min-w-0` enables this to work within flexbox.
|
|
|
|
**Rationale**: Standard CSS truncation pattern. Works well with flexbox when the parent has `min-w-0` to override the default `min-width: auto` behavior. No JavaScript needed.
|
|
|
|
**Alternatives considered**:
|
|
- Multi-line wrapping: Would cause layout height changes and visual instability during turn transitions.
|
|
- JavaScript-based truncation with character count: Unnecessary complexity; CSS handles it natively.
|
|
|
|
## R4: Existing Component Analysis
|
|
|
|
**Decision**: Refactor `turn-navigation.tsx` in place. The component has a clean props interface (`TurnNavigationProps`) that does not need to change — all required data (round number, active combatant name, button handlers) is already available.
|
|
|
|
**Rationale**: The current component at `apps/web/src/components/turn-navigation.tsx` renders the round/combatant info as a single `<div>` with two `<span>` elements joined by an em dash. The refactor replaces this center section with two separate elements: a pill badge for round (moved to the left zone) and a prominent centered label for the combatant name. No prop changes are needed.
|
|
|
|
**Alternatives considered**:
|
|
- Creating a new component: Unnecessary; the change is small enough to refactor in place.
|
|
- Extracting a `RoundBadge` sub-component: Over-engineering for a single-use inline element.
|
|
|
|
## R5: Test Strategy
|
|
|
|
**Decision**: Create `apps/web/src/components/__tests__/turn-navigation.test.tsx` with tests covering: round badge renders with correct round number, combatant name displays centered and separately from round, no-combatants state shows placeholder, long names get truncation styles applied.
|
|
|
|
**Rationale**: No existing tests for this component. The refactor is a good opportunity to add coverage. Tests should use `@testing-library/react` to assert on rendered output and accessibility attributes.
|
|
|
|
**Alternatives considered**:
|
|
- Snapshot tests: Brittle for styling changes; prefer explicit assertions.
|
|
- Visual regression tests: Not set up in this project; out of scope.
|