From 9841a5c09722e6dca3a1cac5c91c59f08d4aaeeb Mon Sep 17 00:00:00 2001 From: Frank Tovar Date: Sat, 21 Mar 2026 15:11:55 +0100 Subject: [PATCH] Add desktop tables inspector --- ...s_frontend_overhaul_implementation_plan.md | 4 +- .../Components/Pages/Tables.razor | 11 ++++ .../Components/Tables/TablesInspector.razor | 52 +++++++++++++++++++ src/RolemasterDb.App/wwwroot/app.css | 35 ++++++++++++- 4 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 src/RolemasterDb.App/Components/Tables/TablesInspector.razor diff --git a/docs/tables_frontend_overhaul_implementation_plan.md b/docs/tables_frontend_overhaul_implementation_plan.md index 7bde230..2b222af 100644 --- a/docs/tables_frontend_overhaul_implementation_plan.md +++ b/docs/tables_frontend_overhaul_implementation_plan.md @@ -67,6 +67,7 @@ It is intentionally implementation-focused: | 2026-03-21 | P3.4 | Completed | Added a sticky context bar with reference-mode tabs, variant and severity selectors, roll-jump state, and active filter chips, then wired those controls into page state and canvas filtering. | | 2026-03-21 | P3.5 | Completed | Reworked the canvas with sticky headers, a sticky roll-band column, row and column emphasis driven by selection and roll-jump state, selected-cell treatment, and a comfortable/dense density toggle. | | 2026-03-21 | P3.6 | Completed | Removed the always-visible cell button stack from resting cells, leaving status-only hints by default and limiting compact edit/curation buttons to the currently selected cell. | +| 2026-03-21 | P3.7 | Completed | Added a dedicated desktop inspector column that reads from the shared selected-cell state and keeps the selected result readable beside the grid. | ### Lessons Learned @@ -103,6 +104,7 @@ It is intentionally implementation-focused: - The context bar controls should own one shared view-state model before the canvas gets more visual treatment. Wiring the filters into the host page now avoids a second refactor when row, column, and cell emphasis land. - Canvas emphasis becomes maintainable once selection, roll-jump, and density are all fed through one explicit state model. That lets the grid respond to context without hiding selection logic inside CSS-only heuristics. - Resting-cell quietness should be enforced structurally, not only visually. Showing actions only for the selected cell prevents future CSS regressions from reintroducing button clutter across the whole grid. +- The inspector should be its own sibling surface in the page layout, not nested inside the table shell. That keeps the content reusable for both desktop and the later mobile sheet without coupling it to canvas markup. ## Target Outcomes @@ -469,7 +471,7 @@ Build the shared interaction infrastructure needed by multiple destinations befo | `P3.4` | Completed | The table surface now has a sticky context bar with mode tabs, variant/severity focus, roll-jump state, and active filter chips wired into host-page view state. | | `P3.5` | Completed | The canvas now supports sticky headers and roll bands, row and column emphasis from selection and roll-jump state, selected-cell treatment, and a comfortable/dense density toggle. | | `P3.6` | Completed | Resting cells now show only status hints; compact edit/curation buttons appear only for the selected cell. | -| `P3.7` | Pending | Add the desktop selection-driven inspector. | +| `P3.7` | Completed | Desktop now has a dedicated inspector column driven by the shared selected-cell state instead of forcing result reading back into the grid alone. | | `P3.8` | Pending | Add the mobile bottom-sheet inspector variant. | | `P3.9` | Pending | Move legend/help to an on-demand secondary surface. | | `P3.10` | Pending | Hide maintenance and developer noise in default reference mode. | diff --git a/src/RolemasterDb.App/Components/Pages/Tables.razor b/src/RolemasterDb.App/Components/Pages/Tables.razor index de7ca43..9b55054 100644 --- a/src/RolemasterDb.App/Components/Pages/Tables.razor +++ b/src/RolemasterDb.App/Components/Pages/Tables.razor @@ -83,6 +83,13 @@ } + + @if (tableDetail is not null) + { + + } } @@ -161,6 +168,10 @@ private bool hasResolvedStoredTableSelection; private CriticalTableReference? SelectedTableReference => referenceData?.CriticalTables.FirstOrDefault(item => string.Equals(item.Key, selectedTableSlug, StringComparison.OrdinalIgnoreCase)); + private CriticalTableCellDetail? SelectedCellDetail => + selectedCell is null + ? null + : tableDetail?.Cells.FirstOrDefault(cell => cell.ResultId == selectedCell.ResultId); protected override async Task OnInitializedAsync() { diff --git a/src/RolemasterDb.App/Components/Tables/TablesInspector.razor b/src/RolemasterDb.App/Components/Tables/TablesInspector.razor new file mode 100644 index 0000000..5a9a0b0 --- /dev/null +++ b/src/RolemasterDb.App/Components/Tables/TablesInspector.razor @@ -0,0 +1,52 @@ +@if (SelectedCellDetail is null) +{ + +} +else +{ + var cell = SelectedCellDetail; + + +} + +@code { + [Parameter] + public CriticalTableCellDetail? SelectedCellDetail { get; set; } +} diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css index 53068dc..5a356d8 100644 --- a/src/RolemasterDb.App/wwwroot/app.css +++ b/src/RolemasterDb.App/wwwroot/app.css @@ -1146,7 +1146,7 @@ pre, .tables-reference-layout { display: grid; - grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr); + grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr) minmax(19rem, 24rem); gap: 1rem; align-items: start; } @@ -1341,6 +1341,35 @@ pre, min-width: 0; } +.tables-reference-inspector-shell { + position: sticky; + top: calc(var(--shell-header-height) + 1rem); +} + +.tables-inspector { + display: grid; + gap: 0.85rem; +} + +.tables-inspector-empty { + margin: 0; + color: var(--ink-soft); +} + +.tables-inspector-summary { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.75rem; +} + +.tables-inspector-kicker { + margin: 0 0 0.2rem; + color: var(--ink-soft); + font-size: 0.76rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + .table-shell { border-radius: 20px; padding: 1.2rem; @@ -1450,6 +1479,10 @@ pre, .tables-reference-rail { position: static; } + + .tables-reference-inspector-shell { + display: none; + } } .table-shell .table-scroll {