| | | 1 | | @* ArticleHeader.razor - Header section for article detail view *@ |
| | | 2 | | @* Includes breadcrumbs, metadata toggle, icon picker, editable title, and divider *@ |
| | | 3 | | |
| | | 4 | | @using Chronicis.Client.Components.Shared |
| | | 5 | | @inject IJSRuntime JSRuntime |
| | | 6 | | |
| | | 7 | | <!-- Breadcrumbs with Metadata Toggle --> |
| | | 8 | | <ChroniclsBreadcrumbs Items="Breadcrumbs" UseCustomLinks="true"> |
| | | 9 | | <MudTooltip Text="Metadata"> |
| | | 10 | | <MudIconButton Color="Color.Inherit" |
| | | 11 | | OnClick="OnMetadataToggleClick" |
| | | 12 | | Icon="@Icons.Material.Filled.ChromeReaderMode" |
| | | 13 | | Class="mt-0" |
| | | 14 | | Edge="Edge.End" /> |
| | | 15 | | </MudTooltip> |
| | | 16 | | </ChroniclsBreadcrumbs> |
| | | 17 | | |
| | | 18 | | <!-- Title Row with Icon Picker --> |
| | | 19 | | <div class="d-flex align-center mb-3"> |
| | | 20 | | <!-- Icon Picker Button --> |
| | | 21 | | <IconPickerButton |
| | | 22 | | CurrentIcon="@IconEmoji" |
| | | 23 | | OnIconChanged="OnIconChangedInternal" /> |
| | | 24 | | |
| | | 25 | | <!-- Title (Always Editable) --> |
| | 0 | 26 | | <MudTextField @ref="_titleField" |
| | 0 | 27 | | @bind-Value="Title" |
| | 0 | 28 | | @bind-Value:after="OnTitleChangedInternal" |
| | 0 | 29 | | Variant="Variant.Text" |
| | 0 | 30 | | Placeholder="Untitled Article" |
| | 0 | 31 | | Class="chronicis-article-title flex-grow-1" |
| | | 32 | | Style="font-size: 2rem; font-family: var(--chronicis-font-heading);" |
| | | 33 | | Immediate="true" |
| | | 34 | | @onkeydown="OnTitleKeyDownInternal" |
| | | 35 | | Underline="false" /> |
| | | 36 | | </div> |
| | | 37 | | |
| | | 38 | | <!-- Divider --> |
| | | 39 | | <div class="chronicis-rune-divider mb-3"></div> |
| | | 40 | | |
| | | 41 | | @code { |
| | | 42 | | private MudTextField<string>? _titleField; |
| | | 43 | | |
| | | 44 | | #region Parameters |
| | | 45 | | |
| | | 46 | | /// <summary> |
| | | 47 | | /// The breadcrumb items to display for navigation. |
| | | 48 | | /// </summary> |
| | | 49 | | [Parameter] |
| | 0 | 50 | | public List<BreadcrumbItem>? Breadcrumbs { get; set; } |
| | | 51 | | |
| | | 52 | | /// <summary> |
| | | 53 | | /// The current title value (two-way bound). |
| | | 54 | | /// </summary> |
| | | 55 | | [Parameter] |
| | 0 | 56 | | public string Title { get; set; } = string.Empty; |
| | | 57 | | |
| | | 58 | | /// <summary> |
| | | 59 | | /// Callback when title changes (for two-way binding). |
| | | 60 | | /// </summary> |
| | | 61 | | [Parameter] |
| | 0 | 62 | | public EventCallback<string> TitleChanged { get; set; } |
| | | 63 | | |
| | | 64 | | /// <summary> |
| | | 65 | | /// The current icon emoji (e.g., "fa-solid fa-dragon"). |
| | | 66 | | /// </summary> |
| | | 67 | | [Parameter] |
| | 0 | 68 | | public string? IconEmoji { get; set; } |
| | | 69 | | |
| | | 70 | | /// <summary> |
| | | 71 | | /// Callback when the icon is changed or cleared. |
| | | 72 | | /// </summary> |
| | | 73 | | [Parameter] |
| | 0 | 74 | | public EventCallback<string?> OnIconChanged { get; set; } |
| | | 75 | | |
| | | 76 | | /// <summary> |
| | | 77 | | /// Callback when title content is edited (for marking unsaved changes). |
| | | 78 | | /// </summary> |
| | | 79 | | [Parameter] |
| | 0 | 80 | | public EventCallback OnTitleEdited { get; set; } |
| | | 81 | | |
| | | 82 | | /// <summary> |
| | | 83 | | /// Callback when Enter key is pressed in title field (for triggering save). |
| | | 84 | | /// </summary> |
| | | 85 | | [Parameter] |
| | 0 | 86 | | public EventCallback OnEnterPressed { get; set; } |
| | | 87 | | |
| | | 88 | | /// <summary> |
| | | 89 | | /// Callback when the metadata toggle button is clicked. |
| | | 90 | | /// </summary> |
| | | 91 | | [Parameter] |
| | 0 | 92 | | public EventCallback OnMetadataToggle { get; set; } |
| | | 93 | | |
| | | 94 | | /// <summary> |
| | | 95 | | /// When true, the title field will be focused on next render. |
| | | 96 | | /// Component will set this to false after focusing. |
| | | 97 | | /// </summary> |
| | | 98 | | [Parameter] |
| | 0 | 99 | | public bool ShouldFocusTitle { get; set; } |
| | | 100 | | |
| | | 101 | | /// <summary> |
| | | 102 | | /// Callback to notify parent that focus has been handled. |
| | | 103 | | /// </summary> |
| | | 104 | | [Parameter] |
| | 0 | 105 | | public EventCallback<bool> ShouldFocusTitleChanged { get; set; } |
| | | 106 | | |
| | | 107 | | #endregion |
| | | 108 | | |
| | | 109 | | #region Lifecycle |
| | | 110 | | |
| | | 111 | | protected override async Task OnAfterRenderAsync(bool firstRender) |
| | | 112 | | { |
| | 0 | 113 | | if (ShouldFocusTitle && _titleField != null) |
| | | 114 | | { |
| | 0 | 115 | | await Task.Delay(100); |
| | | 116 | | try |
| | | 117 | | { |
| | 0 | 118 | | await _titleField.FocusAsync(); |
| | | 119 | | // Also try JS focus as backup |
| | 0 | 120 | | await JSRuntime.InvokeVoidAsync("eval", |
| | 0 | 121 | | "document.querySelector('.chronicis-article-title input')?.focus();"); |
| | 0 | 122 | | } |
| | 0 | 123 | | catch |
| | | 124 | | { |
| | | 125 | | // Ignore focus errors |
| | 0 | 126 | | } |
| | | 127 | | |
| | | 128 | | // Notify parent that focus has been handled |
| | 0 | 129 | | await ShouldFocusTitleChanged.InvokeAsync(false); |
| | | 130 | | } |
| | 0 | 131 | | } |
| | | 132 | | |
| | | 133 | | #endregion |
| | | 134 | | |
| | | 135 | | #region Event Handlers |
| | | 136 | | |
| | | 137 | | private async Task OnTitleChangedInternal() |
| | | 138 | | { |
| | 0 | 139 | | await TitleChanged.InvokeAsync(Title); |
| | 0 | 140 | | await OnTitleEdited.InvokeAsync(); |
| | 0 | 141 | | } |
| | | 142 | | |
| | | 143 | | private async Task OnTitleKeyDownInternal(KeyboardEventArgs e) |
| | | 144 | | { |
| | 0 | 145 | | if (e.Key == "Enter") |
| | | 146 | | { |
| | 0 | 147 | | await OnEnterPressed.InvokeAsync(); |
| | | 148 | | } |
| | 0 | 149 | | } |
| | | 150 | | |
| | | 151 | | private async Task OnIconChangedInternal(string? newIcon) |
| | | 152 | | { |
| | 0 | 153 | | await OnIconChanged.InvokeAsync(newIcon); |
| | 0 | 154 | | } |
| | | 155 | | |
| | | 156 | | private async Task OnMetadataToggleClick() |
| | | 157 | | { |
| | 0 | 158 | | await OnMetadataToggle.InvokeAsync(); |
| | 0 | 159 | | } |
| | | 160 | | |
| | | 161 | | #endregion |
| | | 162 | | } |