Add permanent table index rail layout

This commit is contained in:
2026-03-21 14:56:36 +01:00
parent 338842dba9
commit bed85b9778
5 changed files with 230 additions and 270 deletions

View File

@@ -0,0 +1,59 @@
<section class="tables-index-rail" aria-labelledby="tables-index-heading">
<div class="tables-index-rail-header">
<h2 id="tables-index-heading" class="tables-index-title">Table Index</h2>
<p class="tables-index-copy">Choose a table, then read from the roll band across to the result you need.</p>
</div>
<div class="tables-index-list" role="listbox" aria-label="Critical tables">
@foreach (var table in Tables)
{
<button
type="button"
role="option"
aria-selected="@string.Equals(table.Key, SelectedTableSlug, StringComparison.OrdinalIgnoreCase)"
class="table-index-option @GetTableOptionCssClass(table)"
@onclick="() => OnSelectTable.InvokeAsync(table.Key)">
<span class="table-index-option-copy">
<strong class="table-index-option-title">@table.Label</strong>
<span class="table-index-option-meta">@table.Family</span>
</span>
<span class="table-index-option-chips">
@if (GetIsPinned(table.Key))
{
<StatusChip Tone="accent">Pinned</StatusChip>
}
<span class="chip">@($"{table.CurationPercentage}%")</span>
</span>
</button>
}
</div>
</section>
@code {
[Parameter]
public IReadOnlyList<CriticalTableReference> Tables { get; set; } = Array.Empty<CriticalTableReference>();
[Parameter]
public string SelectedTableSlug { get; set; } = string.Empty;
[Parameter]
public Func<string, bool>? IsPinned { get; set; }
[Parameter]
public EventCallback<string> OnSelectTable { get; set; }
private bool GetIsPinned(string tableSlug) => IsPinned?.Invoke(tableSlug) ?? false;
private string GetTableOptionCssClass(CriticalTableReference table)
{
var classes = new List<string>();
if (string.Equals(table.Key, SelectedTableSlug, StringComparison.OrdinalIgnoreCase))
{
classes.Add("is-selected");
}
classes.Add(table.CurationPercentage >= 100 ? "is-curated" : "needs-curation");
return string.Join(' ', classes);
}
}