From c3aa0d4e88cd56f604b91bc2d5f308ba427ddad1 Mon Sep 17 00:00:00 2001 From: Frank Tovar Date: Thu, 26 Feb 2026 11:53:36 +0100 Subject: [PATCH] Overhaul workspace UX for denser play workflow --- FAQ.md | 14 ++ FRONTEND_PROGRESS.md | 7 +- .../Pages/HomeControls/CampaignLogPanel.razor | 2 +- .../HomeControls/CampaignLogPanel.razor.cs | 34 +++- .../Pages/HomeControls/CharacterPanel.razor | 101 +++++---- .../HomeControls/CharacterPanel.razor.cs | 32 +-- RpgRoller/Components/Pages/Workspace.razor | 56 ++--- RpgRoller/Components/Pages/Workspace.razor.cs | 66 +++--- RpgRoller/wwwroot/js/rpgroller-api.js | 11 +- RpgRoller/wwwroot/styles.css | 192 +++++++++++++++--- 10 files changed, 355 insertions(+), 160 deletions(-) diff --git a/FAQ.md b/FAQ.md index aad2689..1041e12 100644 --- a/FAQ.md +++ b/FAQ.md @@ -77,6 +77,20 @@ Authenticated application state and behavior were moved into `Components/Pages/W `Workspace` initializes authenticated session data after the first render (`OnAfterRenderAsync`). During that first render pass, the header now intentionally shows a null-safe fallback label instead of dereferencing user fields before `/api/me` has been loaded. +## Where did Play/Campaign Management switching move? + +Screen switching is now inside the header hamburger menu. The menu exposes `Play` and `Campaign Management` options while keeping the top bar compact. + +## How do I create, edit, and roll skills in the Play column now? + +Skills now use inline row chip actions: + +- `✎` chip on each skill row to edit that skill +- `⚄` chip on each skill row to roll immediately +- a final `+` dummy row styled like a skill row to create a new skill + +Roll visibility remains controlled in the skills header row. + ## Why is auth form state kept in `AuthSection` instead of `Home`? Auth inputs, validation, and submit workflows are transient UI concerns, so they now live in `AuthSection`. `Home` keeps shared session/workspace state and cross-control refresh/orchestration only. diff --git a/FRONTEND_PROGRESS.md b/FRONTEND_PROGRESS.md index aadc277..becc677 100644 --- a/FRONTEND_PROGRESS.md +++ b/FRONTEND_PROGRESS.md @@ -10,8 +10,11 @@ Tracking against `UX.md` tasks and decisions. - 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 @@ -19,8 +22,8 @@ Tracking against `UX.md` tasks and decisions. |---|---|---| | 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 | User chip, campaign/active context, connection state, screen switch, refresh, logout. | -| 9.4 Play screen character column | Implemented | Character icon tabs, sheet, modal edit/create flows, selected-tab-as-active behavior, skill list, d6 skill options (wild/fumble), roll controls, and die-state visualized last roll card. | +| 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. | diff --git a/RpgRoller/Components/Pages/HomeControls/CampaignLogPanel.razor b/RpgRoller/Components/Pages/HomeControls/CampaignLogPanel.razor index d03a681..67acbbd 100644 --- a/RpgRoller/Components/Pages/HomeControls/CampaignLogPanel.razor +++ b/RpgRoller/Components/Pages/HomeControls/CampaignLogPanel.razor @@ -1,4 +1,4 @@ -