xTr1m/RpgRoller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor management UX and move workspace status to toasts

Browse Source
This commit is contained in:
Frank Tovar
2026-02-26 12:38:19 +01:00
parent 017fc37b1d
commit 15c046bcac
7 changed files with 214 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
FAQ.md
View File

@@ -77,6 +77,10 @@ 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 workspace success/error messages go?
Inline status message rows in the workspace were replaced with timed toast notifications. This keeps the main layout compact while still surfacing operation outcomes.
## 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.
@@ -110,3 +114,7 @@ Auth inputs, validation, and submit workflows are transient UI concerns, so they
## Why are there `.razor.cs` files next to Razor components?
Component behavior was moved out of inline `@code` blocks into code-behind classes so `.razor` files stay markup-focused while state, parameters, handlers, and injected services live in typed C# files.
## How do I add campaigns and characters in Campaign Management now?
Campaign creation is launched from a compact `Add campaign` row button that opens a modal form. Character management is directly below the campaign card and uses per-row edit chips plus an `Add character` row button for create flow.

3
FRONTEND_PROGRESS.md
View File

@@ -12,6 +12,7 @@ Tracking against `UX.md` tasks and decisions.
- 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.
- Header alignment was tightened so connection status occupies the growing middle cell and the hamburger menu remains pinned to the right edge.
- Workspace status/error feedback moved from inline messages to timed toast notifications.
- 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.
@@ -29,7 +30,7 @@ Tracking against `UX.md` tasks and decisions.
| 9.3 Shared authenticated header | Implemented | Compact single-row header with user/campaign context, growing connection-status cell, right-aligned hamburger screen switch, and link-style logout. |
| 9.4 Play screen character column | Implemented | Compact character picker, merged character+skills header row, modal edit/create flows, inline per-skill edit/roll chips, d6 skill options (wild/fumble), and no separate last-roll panel. |
| 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.6 Campaign management screen | Implemented | Campaign selector and details are merged into one card, campaign create moved behind an inline `Add campaign` row opening a modal, and character management sits beneath with chip-style edit actions plus an inline `Add character` row. |
| 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. |

142
RpgRoller/Components/Pages/HomeControls/CampaignManagementPanel.razor
View File

@@ -1,6 +1,8 @@
<main class="management-screen">
<section class="card">
<h2>Campaign Selector</h2>
<div class="section-head">
<h2>Campaign</h2>
</div>
@if (Campaigns.Count == 0)
{
<p class="empty">No campaigns yet.</p>
@@ -11,47 +13,11 @@
<select id="campaign-select" @onchange="CampaignSelectionChanged">
@foreach (var campaign in Campaigns)
{
<option value="@campaign.Id"
selected="@(campaign.Id == SelectedCampaignId)">@campaign.Name (@campaign.RulesetId)
</option>
<option value="@campaign.Id" selected="@(campaign.Id == SelectedCampaignId)">@campaign.Name (@campaign.RulesetId)</option>
}
</select>
}
<p class="muted">Current campaign in this tab: <strong>@(SelectedCampaignName ?? "None selected")</strong></p>
</section>
<section class="card">
<h2>Create Campaign</h2>
@if (!string.IsNullOrWhiteSpace(CampaignState.ErrorMessage))
{
<p class="form-error">@CampaignState.ErrorMessage</p>
}
<form class="form-grid" @onsubmit="SubmitCreateCampaignAsync" @onsubmit:preventDefault>
<label for="campaign-name">Campaign name</label>
<input id="campaign-name" @bind="CampaignState.Model.Name" @bind:event="oninput"/>
@if (CampaignState.Errors.TryGetValue("name", out var campaignNameError))
{
<p class="field-error">@campaignNameError</p>
}
<label for="campaign-ruleset">Ruleset</label>
<select id="campaign-ruleset" @bind="CampaignState.Model.RulesetId">
<option value="">Select ruleset</option>
@foreach (var ruleset in Rulesets)
{
<option value="@ruleset.Id">@ruleset.Name</option>
}
</select>
@if (CampaignState.Errors.TryGetValue("rulesetId", out var campaignRulesetError))
{
<p class="field-error">@campaignRulesetError</p>
}
<button type="submit"
disabled="@(IsMutating || IsCreatingCampaign)">@(IsCreatingCampaign ? "Creating..." : "Create Campaign")</button>
</form>
</section>
<section class="card">
<h2>Campaign Details</h2>
@if (SelectedCampaign is null)
{
<p class="empty">No campaign selected.</p>
@@ -60,44 +26,102 @@
{
<p>Name: <strong>@SelectedCampaign.Name</strong></p>
<p>Ruleset: <strong>@SelectedCampaign.RulesetId</strong></p>
<p>GM: <strong>@SelectedCampaign.Gm.DisplayName</strong> <span
class="muted">(@SelectedCampaign.Gm.Username)</span></p>
<p>GM: <strong>@SelectedCampaign.Gm.DisplayName</strong> <span class="muted">(@SelectedCampaign.Gm.Username)</span></p>
<p>Characters visible: <strong>@SelectedCampaign.Characters.Count</strong></p>
}
<button type="button"
class="add-row-button"
disabled="@(IsMutating || IsCreatingCampaign)"
@onclick="OpenCreateCampaignModal">
<span class="add-row-icon" aria-hidden="true">+</span>
<span>Add campaign</span>
</button>
</section>
<section class="card">
<div class="section-head">
<h2>Character Management</h2>
<button type="button" disabled="@(IsMutating || IsCreatingCampaign || SelectedCampaign is null)"
@onclick="CreateCharacterRequested">Create Character
</button>
</div>
@if (SelectedCampaign is null)
{
<p class="empty">Select a campaign first.</p>
}
else if (SelectedCampaign.Characters.Count == 0)
{
<p class="empty">No characters in this campaign yet.</p>
}
else
{
<ul class="management-list">
@foreach (var character in SelectedCampaign.Characters)
{
<li>
<div><strong>@character.Name</strong>
<p class="muted">Owner: @OwnerLabel(character.OwnerUserId)</p></div>
<div class="inline-actions">
@if (SelectedCampaign.Characters.Count == 0)
{
<p class="empty">No characters in this campaign yet.</p>
}
else
{
<ul class="management-list">
@foreach (var character in SelectedCampaign.Characters)
{
<li>
<div>
<strong>@character.Name</strong>
<p class="muted">Owner: @OwnerLabel(character.OwnerUserId)</p>
</div>
<button type="button"
class="chip-button"
title="Edit character"
disabled="@(IsMutating || IsCreatingCampaign || !CanEditCharacter(character))"
@onclick="() => EditCharacterRequested.InvokeAsync(character)">Edit
@onclick="() => EditCharacterRequested.InvokeAsync(character)">
<span aria-hidden="true">✎</span>
<span class="sr-only">Edit @character.Name</span>
</button>
</div>
</li>
}
</ul>
</li>
}
</ul>
}
<button type="button"
class="add-row-button"
disabled="@(IsMutating || IsCreatingCampaign)"
@onclick="CreateCharacterRequested">
<span class="add-row-icon" aria-hidden="true">+</span>
<span>Add character</span>
</button>
}
</section>
</main>
@if (ShowCreateCampaignModal)
{
<div class="modal-overlay" role="presentation">
<section class="modal-card" role="dialog" aria-modal="true" aria-label="Create Campaign">
<h2>Create Campaign</h2>
@if (!string.IsNullOrWhiteSpace(CampaignState.ErrorMessage))
{
<p class="form-error">@CampaignState.ErrorMessage</p>
}
<form class="form-grid" @onsubmit="SubmitCreateCampaignAsync" @onsubmit:preventDefault>
<label for="campaign-name">Campaign name</label>
<input id="campaign-name" @bind="CampaignState.Model.Name" @bind:event="oninput"/>
@if (CampaignState.Errors.TryGetValue("name", out var campaignNameError))
{
<p class="field-error">@campaignNameError</p>
}
<label for="campaign-ruleset">Ruleset</label>
<select id="campaign-ruleset" @bind="CampaignState.Model.RulesetId">
<option value="">Select ruleset</option>
@foreach (var ruleset in Rulesets)
{
<option value="@ruleset.Id">@ruleset.Name</option>
}
</select>
@if (CampaignState.Errors.TryGetValue("rulesetId", out var campaignRulesetError))
{
<p class="field-error">@campaignRulesetError</p>
}
<div class="inline-actions">
<button type="submit" disabled="@(IsMutating || IsCreatingCampaign)">@(IsCreatingCampaign ? "Creating..." : "Create Campaign")</button>
<button type="button" class="ghost" disabled="@(IsMutating || IsCreatingCampaign)" @onclick="CloseCreateCampaignModal">Cancel</button>
</div>
</form>
</section>
</div>
}

23
RpgRoller/Components/Pages/HomeControls/CampaignManagementPanel.razor.cs
View File

@@ -13,6 +13,22 @@ public partial class CampaignManagementPanel
CampaignState.Model.RulesetId = Rulesets[0].Id;
}
private void OpenCreateCampaignModal()
{
CampaignState.Model.Name = string.Empty;
if (string.IsNullOrWhiteSpace(CampaignState.Model.RulesetId) && Rulesets.Count > 0)
CampaignState.Model.RulesetId = Rulesets[0].Id;
CampaignState.ResetValidation();
ShowCreateCampaignModal = true;
}
private void CloseCreateCampaignModal()
{
CampaignState.ResetValidation();
ShowCreateCampaignModal = false;
}
private async Task SubmitCreateCampaignAsync()
{
CampaignState.ResetValidation();
@@ -35,6 +51,7 @@ public partial class CampaignManagementPanel
var campaign = await ApiClient.RequestAsync<CampaignSummary>("POST", "/api/campaigns", new CreateCampaignRequest(CampaignState.Model.Name.Trim(), CampaignState.Model.RulesetId));
CampaignState.Model.Name = string.Empty;
ShowCreateCampaignModal = false;
await CampaignCreated.InvokeAsync(campaign.Id);
}
catch (ApiRequestException ex)
@@ -52,6 +69,7 @@ public partial class CampaignManagementPanel
private FormState<CampaignFormModel> CampaignState { get; } = new();
private bool IsCreatingCampaign { get; set; }
private bool ShowCreateCampaignModal { get; set; }
[Parameter]
public IReadOnlyList<CampaignSummary> Campaigns { get; set; } = [];
@@ -59,9 +77,6 @@ public partial class CampaignManagementPanel
[Parameter]
public Guid? SelectedCampaignId { get; set; }
[Parameter]
public string? SelectedCampaignName { get; set; }
[Parameter]
public CampaignDetails? SelectedCampaign { get; set; }
@@ -88,4 +103,4 @@ public partial class CampaignManagementPanel
[Parameter]
public EventCallback<CharacterSummary> EditCharacterRequested { get; set; }
}
}

18
RpgRoller/Components/Pages/Workspace.razor
View File

@@ -60,11 +60,6 @@
</div>
</header>
@if (!string.IsNullOrWhiteSpace(StatusMessage))
{
<p class="status-message @(StatusIsError ? "error" : "success")">@StatusMessage</p>
}
@if (IsPlayScreen)
{
<main class="play-screen @(MobilePanel == "log" ? "mobile-log" : "mobile-character")">
@@ -114,7 +109,6 @@
<CampaignManagementPanel
Campaigns="Campaigns"
SelectedCampaignId="SelectedCampaignId"
SelectedCampaignName="SelectedCampaignName"
SelectedCampaign="SelectedCampaign"
Rulesets="Rulesets"
IsMutating="IsMutating"
@@ -126,6 +120,18 @@
EditCharacterRequested="OpenEditCharacterModal"/>
}
</div>
@if (Toasts.Count > 0)
{
<div class="toast-stack" aria-live="polite" aria-atomic="false">
@foreach (var toast in Toasts)
{
<div class="toast @(toast.IsError ? "error" : "success")" role="status">
<p>@toast.Message</p>
</div>
}
</div>
}
</div>
<CharacterFormModal

33
RpgRoller/Components/Pages/Workspace.razor.cs
View File

@@ -622,12 +622,12 @@ public partial class Workspace : IAsyncDisposable
EditCharacterInitialModel = new();
CreateCharacterFormVersion = 0;
EditCharacterFormVersion = 0;
Toasts.Clear();
}
private void SetStatus(string message, bool isError)
{
StatusMessage = message;
StatusIsError = isError;
AddToast(message, isError);
Announce(message);
}
@@ -636,6 +636,29 @@ public partial class Workspace : IAsyncDisposable
LiveAnnouncement = message;
}
private void AddToast(string message, bool isError)
{
var toastId = Guid.NewGuid();
Toasts.Add(new WorkspaceToast(toastId, message, isError));
_ = DismissToastLaterAsync(toastId);
}
private async Task DismissToastLaterAsync(Guid toastId)
{
await Task.Delay(ToastDurationMs);
if (Toasts.RemoveAll(toast => toast.Id == toastId) == 0)
return;
try
{
await InvokeAsync(StateHasChanged);
}
catch (ObjectDisposedException)
{
}
}
private void ToggleScreenMenu()
{
IsScreenMenuOpen = !IsScreenMenuOpen;
@@ -662,8 +685,7 @@ public partial class Workspace : IAsyncDisposable
private bool IsCampaignDataLoading { get; set; }
private bool HasHealthIssue { get; set; }
private string HealthIssueMessage { get; set; } = "Retry to restore the API connection.";
private string? StatusMessage { get; set; }
private bool StatusIsError { get; set; }
private List<WorkspaceToast> Toasts { get; } = [];
private string CurrentScreen { get; set; } = "play";
private string MobilePanel { get; set; } = "character";
private string ConnectionState { get; set; } = "offline";
@@ -721,4 +743,7 @@ public partial class Workspace : IAsyncDisposable
private const string ScreenSessionKey = "screen";
private const string CampaignSessionKey = "campaign";
private const string MobilePanelSessionKey = "play-panel";
private const int ToastDurationMs = 3200;
private sealed record WorkspaceToast(Guid Id, string Message, bool IsError);
}

62
RpgRoller/wwwroot/styles.css
View File

@@ -250,7 +250,7 @@ select:focus-visible {
.management-screen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
@@ -666,6 +666,31 @@ select:focus-visible {
padding: 0.5rem;
}
.management-list li p {
margin: 0;
}
.add-row-button {
display: inline-flex;
align-items: center;
gap: 0.45rem;
align-self: flex-start;
background: #f9f2e2;
color: var(--text);
border: 1px solid #b39f79;
}
.add-row-icon {
width: 1.2rem;
height: 1.2rem;
border: 1px solid #8e7b57;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.modal-overlay {
position: fixed;
inset: 0;
@@ -699,6 +724,41 @@ select:focus-visible {
border-top: 1px solid var(--card-border);
}
.toast-stack {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 60;
display: grid;
gap: 0.45rem;
width: min(22rem, calc(100vw - 2rem));
}
.toast {
border-radius: 0.6rem;
border: 1px solid;
padding: 0.55rem 0.7rem;
box-shadow: 0 6px 14px rgba(34, 24, 9, 0.22);
backdrop-filter: blur(4px);
}
.toast p {
margin: 0;
font-weight: 700;
}
.toast.success {
background: #e8f7e8;
border-color: #78a978;
color: #1f5425;
}
.toast.error {
background: #ffe9e5;
border-color: #bb6e62;
color: #7f2015;
}
.sr-only {
position: absolute;
width: 1px;