| | | 1 | | @using Microsoft.AspNetCore.Components.WebAssembly.Authentication |
| | | 2 | | @using Chronicis.Client.Models |
| | | 3 | | @using Chronicis.Shared.DTOs |
| | | 4 | | @using Chronicis.Client.Components.Quests |
| | | 5 | | @inherits LayoutComponentBase |
| | | 6 | | @inject NavigationManager Navigation |
| | | 7 | | @inject ITreeStateService TreeState |
| | | 8 | | @inject IAuthService AuthService |
| | | 9 | | @inject IArticleApiService ArticleApi |
| | | 10 | | @inject ISnackbar Snackbar |
| | | 11 | | @inject IJSRuntime JSRuntime |
| | | 12 | | @inject AuthenticationStateProvider AuthenticationStateProvider |
| | | 13 | | @inject MudTheme ChronicisTheme |
| | | 14 | | @inject IMetadataDrawerService MetadataDrawerService |
| | | 15 | | @inject IQuestDrawerService QuestDrawerService |
| | | 16 | | @inject IKeyboardShortcutService KeyboardShortcutService |
| | | 17 | | @inject IAdminAuthService AdminAuthService |
| | | 18 | | @inject ILogger<AuthenticatedLayout> Logger |
| | | 19 | | @implements IAsyncDisposable |
| | | 20 | | |
| | | 21 | | <MudThemeProvider Theme="ChronicisTheme" /> |
| | | 22 | | <MudPopoverProvider /> |
| | | 23 | | <MudDialogProvider /> |
| | | 24 | | <MudSnackbarProvider /> |
| | | 25 | | |
| | | 26 | | <MudLayout> |
| | | 27 | | <MudAppBar Elevation="2"> |
| | | 28 | | <MudIconButton Icon="@Icons.Material.Filled.Menu" |
| | | 29 | | Color="Color.Inherit" |
| | | 30 | | Edge="Edge.Start" |
| | | 31 | | OnClick="@ToggleDrawer" /> |
| | | 32 | | |
| | | 33 | | <a href="/dashboard" class="d-flex align-center chronicis-home-link"> |
| | | 34 | | <img src="/images/logo.png" alt="Chronicis" class="chronicis-logo" /> |
| | | 35 | | <MudText Typo="Typo.h6" Class="chronicis-title">Chronicis</MudText> |
| | | 36 | | </a> |
| | | 37 | | |
| | | 38 | | <MudSpacer /> |
| | | 39 | | |
| | | 40 | | <MudTextField @bind-Value="_globalSearchQuery" |
| | | 41 | | Placeholder="Search content..." |
| | | 42 | | Adornment="Adornment.Start" |
| | | 43 | | AdornmentIcon="@Icons.Material.Filled.Search" |
| | | 44 | | Variant="Variant.Outlined" |
| | | 45 | | Margin="Margin.Dense" |
| | | 46 | | Style="max-width: 400px; background-color: rgba(255,255,255,0.1);" |
| | | 47 | | Class="global-search-input" |
| | | 48 | | Immediate="true" |
| | | 49 | | @onkeydown="OnGlobalSearchKeyDown" /> |
| | | 50 | | |
| | | 51 | | <MudTooltip Text="Quick Start Guide"> |
| | | 52 | | <MudIconButton Icon="@Icons.Material.Filled.Help" |
| | | 53 | | Color="Color.Inherit" |
| | 0 | 54 | | OnClick="@(() => Navigation.NavigateTo("/getting-started"))" /> |
| | | 55 | | </MudTooltip> |
| | | 56 | | |
| | 0 | 57 | | @if (_isSysAdmin) |
| | | 58 | | { |
| | | 59 | | <MudTooltip Text="Admin Utilities"> |
| | | 60 | | <MudIconButton Icon="@Icons.Material.Filled.AdminPanelSettings" |
| | | 61 | | Color="Color.Inherit" |
| | 0 | 62 | | OnClick="@(() => Navigation.NavigateTo("/admin/utilities"))" /> |
| | | 63 | | </MudTooltip> |
| | | 64 | | } |
| | | 65 | | |
| | | 66 | | <MudMenu Icon="@Icons.Material.Filled.AccountCircle" |
| | | 67 | | Color="Color.Inherit" |
| | | 68 | | AnchorOrigin="Origin.BottomRight" |
| | | 69 | | TransformOrigin="Origin.TopRight"> |
| | | 70 | | <ChildContent> |
| | | 71 | | <div class="user-info" style="padding: 12px 16px; min-width: 200px;"> |
| | 0 | 72 | | @if (!string.IsNullOrEmpty(_currentUser?.AvatarUrl)) |
| | | 73 | | { |
| | | 74 | | <MudImage Src="@_currentUser.AvatarUrl" Style="margin-bottom: 8px;" /> |
| | | 75 | | } |
| | | 76 | | <div style="margin-top: 8px;"> |
| | 0 | 77 | | <div style="font-weight: 600;">@_currentUser?.DisplayName</div> |
| | 0 | 78 | | <div style="font-size: 0.85rem; opacity: 0.8;">@_currentUser?.Email</div> |
| | | 79 | | </div> |
| | | 80 | | </div> |
| | | 81 | | <MudDivider /> |
| | | 82 | | <MudMenuItem Icon="@Icons.Material.Filled.Settings" |
| | | 83 | | IconColor="Color.Default" |
| | | 84 | | Href="/settings"> |
| | | 85 | | Settings |
| | | 86 | | </MudMenuItem> |
| | | 87 | | <MudMenuItem Icon="@Icons.Material.Filled.Logout" |
| | | 88 | | IconColor="Color.Primary" |
| | | 89 | | OnClick="BeginSignOut"> |
| | | 90 | | Logout |
| | | 91 | | </MudMenuItem> |
| | | 92 | | </ChildContent> |
| | | 93 | | </MudMenu> |
| | | 94 | | </MudAppBar> |
| | | 95 | | |
| | | 96 | | <MudDrawer @bind-Open="_drawerOpen" |
| | | 97 | | Elevation="2" |
| | | 98 | | ClipMode="DrawerClipMode.Always" |
| | | 99 | | Width="320px"> |
| | | 100 | | |
| | | 101 | | <div class="chronicis-search-box"> |
| | | 102 | | <MudTextField @bind-Value="_treeSearch" |
| | | 103 | | @bind-Value:after="OnTreeSearchChanged" |
| | | 104 | | Placeholder="Filter articles..." |
| | | 105 | | Adornment="Adornment.End" |
| | | 106 | | AdornmentIcon="@(_treeSearch?.Length > 0 ? Icons.Material.Filled.Clear : Icons.Material.Filled |
| | | 107 | | AdornmentColor="Color.Primary" |
| | | 108 | | OnAdornmentClick="ClearSearch" |
| | | 109 | | Variant="Variant.Outlined" |
| | | 110 | | Margin="Margin.Dense" |
| | | 111 | | Immediate="true" |
| | | 112 | | DebounceInterval="200" |
| | | 113 | | Class="mb-2" /> |
| | | 114 | | </div> |
| | | 115 | | |
| | | 116 | | <QuickAddSession /> |
| | | 117 | | |
| | | 118 | | <ArticleTreeView /> |
| | | 119 | | </MudDrawer> |
| | | 120 | | |
| | | 121 | | <MudMainContent Class="mud-main-content"> |
| | | 122 | | <div class="authenticated-content-wrapper"> |
| | | 123 | | <MudContainer MaxWidth="MaxWidth.Large" Class="py-4"> |
| | | 124 | | <ErrorBoundary> |
| | | 125 | | <ChildContent> |
| | 0 | 126 | | @Body |
| | | 127 | | </ChildContent> |
| | | 128 | | <ErrorContent Context="exception"> |
| | | 129 | | <div class="chronicis-error-state"> |
| | | 130 | | <MudPaper Elevation="3" Class="pa-4"> |
| | | 131 | | <div class="chronicis-empty-state"> |
| | | 132 | | <div class="chronicis-empty-state-icon">⚠️</div> |
| | | 133 | | <MudText Typo="Typo.h5" Class="chronicis-empty-state-title mb-3"> |
| | | 134 | | Something went wrong |
| | | 135 | | </MudText> |
| | | 136 | | <MudText Typo="Typo.body1" Class="chronicis-empty-state-message mb-4"> |
| | | 137 | | An unexpected error occurred. Please try refreshing the page. |
| | | 138 | | </MudText> |
| | | 139 | | <MudButton Variant="Variant.Filled" |
| | | 140 | | Color="Color.Primary" |
| | 0 | 141 | | OnClick="@(() => Navigation.NavigateTo(Navigation.Uri, forceLoad: true))" |
| | | 142 | | Refresh Page |
| | | 143 | | </MudButton> |
| | | 144 | | </div> |
| | | 145 | | </MudPaper> |
| | | 146 | | </div> |
| | | 147 | | </ErrorContent> |
| | | 148 | | </ErrorBoundary> |
| | | 149 | | </MudContainer> |
| | | 150 | | |
| | | 151 | | <PublicFooter /> |
| | | 152 | | </div> |
| | | 153 | | </MudMainContent> |
| | | 154 | | |
| | | 155 | | <!-- Quest Drawer (right side, Session/SessionNote pages only) --> |
| | | 156 | | <QuestDrawer /> |
| | | 157 | | </MudLayout> |
| | | 158 | | |
| | | 159 | | @code { |
| | 0 | 160 | | private bool _drawerOpen = true; |
| | | 161 | | private string? _treeSearch; |
| | 0 | 162 | | private string _globalSearchQuery = string.Empty; |
| | | 163 | | private UserInfo? _currentUser; |
| | | 164 | | private bool _isSysAdmin; |
| | | 165 | | private DotNetObjectReference<AuthenticatedLayout>? _dotNetRef; |
| | | 166 | | |
| | | 167 | | protected override async Task OnInitializedAsync() |
| | | 168 | | { |
| | 0 | 169 | | _currentUser = await AuthService.GetCurrentUserAsync(); |
| | 0 | 170 | | _isSysAdmin = await AdminAuthService.IsSysAdminAsync(); |
| | 0 | 171 | | AuthenticationStateProvider.AuthenticationStateChanged += OnAuthenticationStateChanged; |
| | 0 | 172 | | } |
| | | 173 | | |
| | | 174 | | protected override async Task OnAfterRenderAsync(bool firstRender) |
| | | 175 | | { |
| | 0 | 176 | | if (firstRender) |
| | | 177 | | { |
| | 0 | 178 | | _dotNetRef = DotNetObjectReference.Create(this); |
| | 0 | 179 | | await JSRuntime.InvokeVoidAsync("chronicisKeyboardShortcuts.initialize", _dotNetRef); |
| | | 180 | | } |
| | 0 | 181 | | } |
| | | 182 | | |
| | | 183 | | [JSInvokable] |
| | | 184 | | public void OnCtrlM() |
| | | 185 | | { |
| | 0 | 186 | | MetadataDrawerService.Toggle(); |
| | 0 | 187 | | } |
| | | 188 | | |
| | | 189 | | [JSInvokable] |
| | | 190 | | public void OnCtrlQ() |
| | | 191 | | { |
| | 0 | 192 | | QuestDrawerService.Toggle(); |
| | 0 | 193 | | } |
| | | 194 | | |
| | | 195 | | [JSInvokable] |
| | | 196 | | public void OnCtrlS() |
| | | 197 | | { |
| | 0 | 198 | | KeyboardShortcutService.RequestSave(); |
| | 0 | 199 | | } |
| | | 200 | | |
| | | 201 | | [JSInvokable] |
| | | 202 | | public async Task OnCtrlN() |
| | | 203 | | { |
| | | 204 | | // Create a sibling article to the currently selected article |
| | 0 | 205 | | var selectedId = TreeState.SelectedNodeId; |
| | | 206 | | |
| | 0 | 207 | | if (!selectedId.HasValue) |
| | | 208 | | { |
| | 0 | 209 | | Snackbar.Add("Select an article first, then press Ctrl+N to create a sibling", Severity.Info); |
| | 0 | 210 | | return; |
| | | 211 | | } |
| | | 212 | | |
| | | 213 | | // Check if the selected node is an article |
| | 0 | 214 | | if (!TreeState.TryGetNode(selectedId.Value, out var selectedNode) || selectedNode == null) |
| | | 215 | | { |
| | 0 | 216 | | Snackbar.Add("Select an article first, then press Ctrl+N to create a sibling", Severity.Info); |
| | 0 | 217 | | return; |
| | | 218 | | } |
| | | 219 | | |
| | | 220 | | // Only allow Ctrl+N for Article nodes |
| | 0 | 221 | | if (selectedNode.NodeType != TreeNodeType.Article) |
| | | 222 | | { |
| | 0 | 223 | | var nodeTypeName = selectedNode.NodeType switch |
| | 0 | 224 | | { |
| | 0 | 225 | | TreeNodeType.World => "World", |
| | 0 | 226 | | TreeNodeType.Campaign => "Campaign", |
| | 0 | 227 | | TreeNodeType.Arc => "Arc", |
| | 0 | 228 | | TreeNodeType.VirtualGroup => "folder", |
| | 0 | 229 | | TreeNodeType.ExternalLink => "link", |
| | 0 | 230 | | _ => "item" |
| | 0 | 231 | | }; |
| | 0 | 232 | | Snackbar.Add($"Ctrl+N creates sibling articles. Select an article instead of a {nodeTypeName}.", Severity.In |
| | 0 | 233 | | return; |
| | | 234 | | } |
| | | 235 | | |
| | | 236 | | // Get the current article to find its parent |
| | 0 | 237 | | var currentArticle = await ArticleApi.GetArticleDetailAsync(selectedId.Value); |
| | 0 | 238 | | if (currentArticle == null) |
| | | 239 | | { |
| | 0 | 240 | | Snackbar.Add("Could not load the selected article", Severity.Warning); |
| | 0 | 241 | | return; |
| | | 242 | | } |
| | | 243 | | |
| | 0 | 244 | | Guid? parentId = currentArticle.ParentId; |
| | | 245 | | |
| | | 246 | | // Create sibling (same parent, same world/campaign context) |
| | | 247 | | Guid? newArticleId; |
| | 0 | 248 | | if (parentId.HasValue) |
| | | 249 | | { |
| | 0 | 250 | | newArticleId = await TreeState.CreateChildArticleAsync(parentId.Value); |
| | | 251 | | } |
| | | 252 | | else |
| | | 253 | | { |
| | | 254 | | // Root-level article - create sibling with same context |
| | 0 | 255 | | var createDto = new ArticleCreateDto |
| | 0 | 256 | | { |
| | 0 | 257 | | Title = string.Empty, |
| | 0 | 258 | | Body = string.Empty, |
| | 0 | 259 | | ParentId = null, |
| | 0 | 260 | | WorldId = currentArticle.WorldId, |
| | 0 | 261 | | CampaignId = currentArticle.CampaignId, |
| | 0 | 262 | | ArcId = currentArticle.ArcId, |
| | 0 | 263 | | Type = currentArticle.Type, // Use same type as current article (e.g., SessionNote) |
| | 0 | 264 | | EffectiveDate = DateTime.Now |
| | 0 | 265 | | }; |
| | | 266 | | |
| | 0 | 267 | | var created = await ArticleApi.CreateArticleAsync(createDto); |
| | 0 | 268 | | if (created != null) |
| | | 269 | | { |
| | 0 | 270 | | await TreeState.RefreshAsync(); |
| | 0 | 271 | | TreeState.SelectNode(created.Id); |
| | 0 | 272 | | newArticleId = created.Id; |
| | | 273 | | } |
| | | 274 | | else |
| | | 275 | | { |
| | 0 | 276 | | newArticleId = null; |
| | | 277 | | } |
| | 0 | 278 | | } |
| | | 279 | | |
| | 0 | 280 | | if (newArticleId.HasValue) |
| | | 281 | | { |
| | 0 | 282 | | Snackbar.Add("Article created (Ctrl+N)", Severity.Success); |
| | | 283 | | |
| | | 284 | | // Navigate to the new article |
| | 0 | 285 | | var newArticle = await ArticleApi.GetArticleDetailAsync(newArticleId.Value); |
| | 0 | 286 | | if (newArticle != null && newArticle.Breadcrumbs.Any()) |
| | | 287 | | { |
| | 0 | 288 | | var path = string.Join("/", newArticle.Breadcrumbs.Select(b => b.Slug)); |
| | 0 | 289 | | Navigation.NavigateTo($"/article/{path}"); |
| | | 290 | | } |
| | | 291 | | } |
| | | 292 | | else |
| | | 293 | | { |
| | 0 | 294 | | Snackbar.Add("Failed to create article", Severity.Error); |
| | | 295 | | } |
| | 0 | 296 | | } |
| | | 297 | | |
| | | 298 | | private async void OnAuthenticationStateChanged(Task<AuthenticationState> task) |
| | | 299 | | { |
| | 0 | 300 | | _currentUser = await AuthService.GetCurrentUserAsync(); |
| | 0 | 301 | | await InvokeAsync(StateHasChanged); |
| | 0 | 302 | | } |
| | | 303 | | |
| | | 304 | | private void ToggleDrawer() |
| | | 305 | | { |
| | 0 | 306 | | _drawerOpen = !_drawerOpen; |
| | 0 | 307 | | } |
| | | 308 | | |
| | | 309 | | private void OnTreeSearchChanged() |
| | | 310 | | { |
| | | 311 | | // Real-time filtering as user types (debounced by MudTextField) |
| | 0 | 312 | | if (string.IsNullOrWhiteSpace(_treeSearch)) |
| | | 313 | | { |
| | 0 | 314 | | TreeState.ClearSearch(); |
| | | 315 | | } |
| | | 316 | | else |
| | | 317 | | { |
| | 0 | 318 | | TreeState.SetSearchQuery(_treeSearch); |
| | | 319 | | } |
| | 0 | 320 | | } |
| | | 321 | | |
| | | 322 | | private void ClearSearch() |
| | | 323 | | { |
| | 0 | 324 | | _treeSearch = null; |
| | 0 | 325 | | TreeState.ClearSearch(); |
| | 0 | 326 | | } |
| | | 327 | | |
| | | 328 | | private void OnGlobalSearchKeyDown(KeyboardEventArgs e) |
| | | 329 | | { |
| | 0 | 330 | | if (e.Key == "Enter") |
| | | 331 | | { |
| | 0 | 332 | | ExecuteGlobalSearch(); |
| | | 333 | | } |
| | 0 | 334 | | } |
| | | 335 | | |
| | | 336 | | private void ExecuteGlobalSearch() |
| | | 337 | | { |
| | 0 | 338 | | if (!string.IsNullOrWhiteSpace(_globalSearchQuery)) |
| | | 339 | | { |
| | 0 | 340 | | Navigation.NavigateTo($"/search?q={Uri.EscapeDataString(_globalSearchQuery)}"); |
| | | 341 | | } |
| | 0 | 342 | | } |
| | | 343 | | |
| | | 344 | | private void BeginSignOut() |
| | | 345 | | { |
| | 0 | 346 | | Navigation.NavigateToLogout("authentication/logout"); |
| | 0 | 347 | | } |
| | | 348 | | |
| | | 349 | | public async ValueTask DisposeAsync() |
| | | 350 | | { |
| | 0 | 351 | | AuthenticationStateProvider.AuthenticationStateChanged -= OnAuthenticationStateChanged; |
| | | 352 | | |
| | 0 | 353 | | if (_dotNetRef != null) |
| | | 354 | | { |
| | | 355 | | try |
| | | 356 | | { |
| | 0 | 357 | | await JSRuntime.InvokeVoidAsync("chronicisKeyboardShortcuts.dispose"); |
| | 0 | 358 | | } |
| | 0 | 359 | | catch |
| | | 360 | | { |
| | | 361 | | // Ignore errors during disposal (e.g., if JS context is gone) |
| | 0 | 362 | | } |
| | 0 | 363 | | _dotNetRef.Dispose(); |
| | | 364 | | } |
| | 0 | 365 | | } |
| | | 366 | | } |