RpgRoller/FRONTEND_PROGRESS.md

Frontend Rebuild Progress (Blazor)

Tracking against UX.md tasks and decisions.

Status Snapshot

• Branch: feature/blazor-frontend-rebuild-ux
• Runtime frontend stack: Blazor (RpgRoller/Components/*) + browser JS interop (wwwroot/js/rpgroller-api.js)
• Legacy TypeScript frontend/runtime artifacts: removed
• Home was simplified to a minimal gateway (Loading / Anonymous / Workspace) in a single Home.razor.cs class.
• The authenticated workspace shell/state/behavior was moved to Components/Pages/Workspace.razor.
• Workspace header user identity rendering is now null-safe during first render (Loading user... fallback until /api/me loads).
• Workspace header was compacted into a single horizontal row with hamburger menu screen switching and link-style logout.
• Concern controls now own their local form state and mutation workflows; the workspace host handles shared cross-control state refresh.
• Skill create/edit flow is now owned by CharacterPanel (where characters and their skills are presented together).
• Skill interactions are now row-local chip actions (edit/roll) with an inline dummy + row for create-skill.
• Campaign log now auto-scrolls to the newest entry when new entries arrive.

UX Checklist

UX area	Status	Notes
9.1 App load + session restore	Implemented	Health check on load, rulesets/session load, unauthorized session reset, API unhealthy retry banner.
9.2 Authentication view	Implemented	Register/login cards, required validation, register password length check, server-error display.
9.3 Shared authenticated header	Implemented	Compact single-row header with user/campaign/connection context, hamburger menu screen switch, and link-style logout.
9.4 Play screen character column	Implemented	Character icon tabs, merged character+skills header row, modal edit/create flows, inline per-skill edit/roll chips, d6 skill options (wild/fumble), and die-state visualized last roll card.
9.5 Play screen log column	Implemented	Chronological feed, private/public badges, private perspective styles (roller vs GM), per-entry dice visualization with die-state flags, local time + ISO tooltip.
9.6 Campaign management screen	Implemented	Campaign selector/summary, create form, details card, character management actions with modal edit pattern.
9.7 Tablet/mobile bottom bar	Implemented	Character / Log panel switch in play screen and per-tab session persistence.
10 Validation and error UX	Partially implemented	Required-field and common API errors are mapped; message/code-specific mapping is limited by current API exposing only text messages.
11 Empty/loading/disabled states	Implemented	Empty states, skeleton placeholders, mutation button disabling.
12 Real-time and sync rules	Implemented	Campaign-scoped SSE subscribe/unsubscribe, reconnect with exponential backoff, manual refresh fallback.
13 Accessibility requirements	Partially implemented	Keyboard-friendly controls, labels, focus styling, aria-live announcements; screen-reader validation for all flows still needs dedicated accessibility QA.
14 Content and copy guidance	Implemented	Direct action labels and corrective error copy used throughout.
15 Visual direction	Implemented	Tabletop utility styling, tokenized colors, responsive layout, private/public visual differentiation.
17 Next iteration targets: wireframes	Not yet implemented	No separate low-fidelity wireframe artifact added in repo.
17 Next iteration targets: component contracts doc	Not yet implemented	Component contract document not yet extracted from implementation.
17 Next iteration targets: visual token doc	Not yet implemented	Tokens are implemented in CSS but not yet documented in a dedicated spec file.

Follow-up Candidates

1. Add explicit machine-readable API error codes to HTTP responses for richer field-level mapping.
2. Add automated accessibility checks (focus order, contrast, and screen-reader behavior assertions).
3. Document component contracts and visual token references as separate markdown artifacts.