Split Tables page into focused components

src/RolemasterDb.App/Components/Tables/TablesCanvas.razor

@@ -0,0 +1,135 @@
+<div class="table-scroll">
+    <div class="critical-table-grid" role="group" aria-label="@Detail.DisplayName" style="@gridTemplateStyle">
+        @if (Detail.Groups.Count > 0)
+        {
+            <div class="critical-table-grid-header-cell critical-table-grid-corner" aria-hidden="true"></div>
+            @foreach (var group in Detail.Groups)
+            {
+                <div
+                    class="critical-table-grid-header-cell critical-table-grid-group-header"
+                    style="@BuildColumnSpanStyle(Detail.Columns.Count)">
+                    <span>@group.Label</span>
+                </div>
+            }
+        }
+
+        <div class="critical-table-grid-header-cell critical-table-grid-roll-band-header" aria-hidden="true"></div>
+        @foreach (var displayColumn in displayColumns)
+        {
+            <div class="critical-table-grid-header-cell critical-table-grid-column-header">
+                <span>@displayColumn.ColumnLabel</span>
+            </div>
+        }
+
+        @foreach (var rollBand in Detail.RollBands)
+        {
+            <div class="critical-table-grid-header-cell critical-table-grid-roll-band">@rollBand.Label</div>
+            @foreach (var displayColumn in displayColumns)
+            {
+                if (TryGetCell(rollBand.Label, displayColumn.GroupKey, displayColumn.ColumnKey, out var resolvedCell) && resolvedCell is not null)
+                {
+                    var cell = resolvedCell;
+
+                    <div class="@GetCellCssClass(cell)">
+                        <div class="critical-table-cell-shell">
+                            <div class="critical-table-cell-actions">
+                                @if (cell.IsCurated)
+                                {
+                                    <span class="critical-cell-status-chip is-curated">Curated</span>
+                                }
+                                else
+                                {
+                                    <button
+                                        type="button"
+                                        class="critical-cell-action-button is-curation"
+                                        title="Open the curation preview for this cell."
+                                        @onclick="() => OnOpenCuration.InvokeAsync(cell.ResultId)">
+                                        Needs Curation
+                                    </button>
+                                }
+
+                                <button
+                                    type="button"
+                                    class="critical-cell-action-button is-edit"
+                                    title="Open the full editor for this cell."
+                                    @onclick="() => OnOpenEditor.InvokeAsync(cell.ResultId)">
+                                    Edit
+                                </button>
+                            </div>
+
+                            <CompactCriticalCell
+                                Description="@(cell.Description ?? string.Empty)"
+                                Effects="@(cell.Effects ?? Array.Empty<CriticalEffectLookupResponse>())"
+                                Branches="@(cell.Branches ?? Array.Empty<CriticalBranchLookupResponse>())" />
+                        </div>
+                    </div>
+                }
+                else
+                {
+                    <div class="critical-table-cell critical-table-cell-empty">
+                        <span class="empty-cell">—</span>
+                    </div>
+                }
+            }
+        }
+    </div>
+</div>
+
+<TablesLegend LegendEntries="@(Detail.Legend ?? Array.Empty<CriticalTableLegendEntry>())" />
+
+@code {
+    private readonly Dictionary<(string RollBand, string? GroupKey, string ColumnKey), CriticalTableCellDetail> cellIndex = new();
+    private readonly List<(string? GroupKey, string ColumnKey, string ColumnLabel)> displayColumns = new();
+    private string gridTemplateStyle = string.Empty;
+
+    [Parameter, EditorRequired]
+    public CriticalTableDetail Detail { get; set; } = default!;
+
+    [Parameter]
+    public EventCallback<int> OnOpenCuration { get; set; }
+
+    [Parameter]
+    public EventCallback<int> OnOpenEditor { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        cellIndex.Clear();
+        displayColumns.Clear();
+
+        foreach (var cell in Detail.Cells)
+        {
+            cellIndex[(cell.RollBand, cell.GroupKey, cell.ColumnKey)] = cell;
+        }
+
+        if (Detail.Groups.Count == 0)
+        {
+            foreach (var column in Detail.Columns)
+            {
+                displayColumns.Add((null, column.Key, column.Label));
+            }
+        }
+        else
+        {
+            foreach (var group in Detail.Groups)
+            {
+                foreach (var column in Detail.Columns)
+                {
+                    displayColumns.Add((group.Key, column.Key, column.Label));
+                }
+            }
+        }
+
+        var dataColumnCount = Detail.Columns.Count * Math.Max(Detail.Groups.Count, 1);
+        gridTemplateStyle = $"grid-template-columns: max-content repeat({dataColumnCount}, minmax(0, 1fr));";
+    }
+
+    private bool TryGetCell(string rollBand, string? groupKey, string columnKey, out CriticalTableCellDetail? cell) =>
+        cellIndex.TryGetValue((rollBand, groupKey, columnKey), out cell);
+
+    private static string BuildColumnSpanStyle(int span) => $"grid-column: span {span};";
+
+    private static string GetCellCssClass(CriticalTableCellDetail cell) =>
+        cell.IsCurated
+            ? "critical-table-cell is-curated"
+            : "critical-table-cell needs-curation";
+}