From a7bacbabfcda4cbaa1aa8fd4449112f240c3131b Mon Sep 17 00:00:00 2001 From: Frank Tovar Date: Sat, 21 Mar 2026 13:22:33 +0100 Subject: [PATCH] Style tooling surfaces within shared shell --- ...tables_frontend_overhaul_implementation_plan.md | 14 +++++++++++--- src/RolemasterDb.App/Components/Pages/Api.razor | 14 +++++++------- .../Components/Pages/Diagnostics.razor | 2 +- src/RolemasterDb.App/Components/Pages/Tools.razor | 2 +- .../Components/Shell/ShellPrimaryNav.razor | 2 +- .../Components/Shell/ShellPrimaryNav.razor.css | 14 ++++++++++++++ src/RolemasterDb.App/wwwroot/app.css | 12 ++++++++++++ 7 files changed, 47 insertions(+), 13 deletions(-) diff --git a/docs/tables_frontend_overhaul_implementation_plan.md b/docs/tables_frontend_overhaul_implementation_plan.md index ac77258..78f6752 100644 --- a/docs/tables_frontend_overhaul_implementation_plan.md +++ b/docs/tables_frontend_overhaul_implementation_plan.md @@ -30,7 +30,7 @@ It is intentionally implementation-focused: - Branch: `frontend/tables-overhaul` - Last updated: `2026-03-21` -- Current focus: `Phase 1` +- Current focus: `Phase 2` - Document mode: living plan and progress log ### Progress Log @@ -45,6 +45,7 @@ It is intentionally implementation-focused: | 2026-03-21 | P1.5 | Completed | Replaced the permanent sidebar layout with a sticky top app shell and mobile bottom navigation backed by dedicated shell components. | | 2026-03-21 | P1.6 | Completed | Added explicit shell slots for nav, omnibox, shortcuts, and utilities; switched shell navigation to `Play`, `Tables`, `Curation`, and `Tools`; and wired the first live theme control into the shell. | | 2026-03-21 | P1.7 | Completed | Added a shell-level skip link and tightened the top-level header, navigation, and main landmarks around the new shell structure. | +| 2026-03-21 | P1.8 | Completed | Introduced a cooler tooling emphasis for `Tools`, diagnostics, and API surfaces, and styled the `Tools` destination as distinct without splitting the shell. | ### Lessons Learned @@ -59,6 +60,7 @@ It is intentionally implementation-focused: - Extracting shell markup into dedicated components is lower-risk than continuing to evolve `MainLayout.razor` directly. It isolates responsive frame work from page content and keeps later nav changes localized. - Once a Razor component exposes multiple named `RenderFragment` parameters, the page body must be passed explicitly through ``. That pattern is now the baseline for shell composition here. - Accessibility work is cheaper when the shell owns the landmarks. Adding skip links and nav/main structure at the shell layer avoids repeating that work page by page. +- Tooling can feel distinct through cooler surfaces and labeling alone. A separate app shell is unnecessary and would undermine the shared-product goal. ## Target Outcomes @@ -254,7 +256,7 @@ Create the implementation foundation so the visual overhaul does not start with ### Status -`In progress` +`Completed` ### Task Progress @@ -267,7 +269,7 @@ Create the implementation foundation so the visual overhaul does not start with | `P1.5` | Completed | The sidebar is gone; pages now render inside a sticky top-shell with a mobile bottom nav. | | `P1.6` | Completed | The shell now has explicit nav, omnibox, shortcut, and utility slots, plus a live theme selector and destination-model navigation. | | `P1.7` | Completed | The shell now exposes a skip link and explicit header/nav/main landmarks. | -| `P1.8` | Pending | Tools-specific shell emphasis is final Phase 1 polish. | +| `P1.8` | Completed | Tooling surfaces and the `Tools` nav item now use a cooler emphasis without leaving the shared shell system. | ### Goal @@ -330,6 +332,12 @@ Establish the shared shell, tokens, typography, and theme system that every dest - primary navigation shows `Play`, `Tables`, `Curation`, and `Tools` - the app has a stable theme system and global spacing/typography rules +### Phase 1 Exit Notes + +- The app now has a semantic token system, explicit typography roles, theme modes with persistence, and a responsive shell. +- The shell already uses the destination model `Play`, `Tables`, `Curation`, and `Tools`, even though deeper route migration remains a Phase 2 concern. +- The next implementation focus is Phase 2: shared route compatibility, recents, pins, omnibox foundations, and deep-link infrastructure. + ## Phase 2: Shared Navigation, Search, And State Infrastructure ### Goal diff --git a/src/RolemasterDb.App/Components/Pages/Api.razor b/src/RolemasterDb.App/Components/Pages/Api.razor index dead3c6..3126bcb 100644 --- a/src/RolemasterDb.App/Components/Pages/Api.razor +++ b/src/RolemasterDb.App/Components/Pages/Api.razor @@ -3,7 +3,7 @@ API Surface
-
+

Reference data

GET /api/reference-data

{
@@ -28,7 +28,7 @@
 }
-
+

Attack lookup

POST /api/lookup/attack

{
@@ -39,7 +39,7 @@
 }
-
+

Critical lookup

POST /api/lookup/critical

{
@@ -51,7 +51,7 @@
         
Response now includes table metadata, roll-band bounds, raw imported cell text, parse status, and parsed JSON alongside the gameplay description.
-
+

Cell editor load

GET /api/tables/critical/{slug}/cells/{resultId}

{
@@ -80,13 +80,13 @@
         
Use this to retrieve the full editable result graph for one critical-table cell, including nested branches, normalized effects, and review notes for unresolved quick-parse tokens.
-
+

Cell source image

GET /api/tables/critical/{slug}/cells/{resultId}/source-image

Streams the importer-generated PNG crop for the current critical cell. Returns 404 when the row has no stored crop or the artifact is missing.

-
+

Cell re-parse

POST /api/tables/critical/{slug}/cells/{resultId}/reparse

{
@@ -108,7 +108,7 @@
         
Re-runs the shared single-cell parser, merges the generated result with the current override state, and returns the refreshed editor payload without saving changes. Unknown or partially parsed tokens are surfaced explicitly in the returned review data.
-
+

Cell editor save

PUT /api/tables/critical/{slug}/cells/{resultId}

{
diff --git a/src/RolemasterDb.App/Components/Pages/Diagnostics.razor b/src/RolemasterDb.App/Components/Pages/Diagnostics.razor
index cea92a9..ec7852b 100644
--- a/src/RolemasterDb.App/Components/Pages/Diagnostics.razor
+++ b/src/RolemasterDb.App/Components/Pages/Diagnostics.razor
@@ -7,7 +7,7 @@
 
 Diagnostics
 
-

+

     

         

             
Critical Cell Diagnostics

diff --git a/src/RolemasterDb.App/Components/Pages/Tools.razor b/src/RolemasterDb.App/Components/Pages/Tools.razor
index 47b14c8..d3e5f03 100644
--- a/src/RolemasterDb.App/Components/Pages/Tools.razor
+++ b/src/RolemasterDb.App/Components/Pages/Tools.razor
@@ -2,7 +2,7 @@
 
 Tools
 
-

+

     
Tools

     
Diagnostics and API documentation move under this destination in later phases. The landing page is in place now so the shell can navigate with the target destination model.

 
diff --git a/src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor b/src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor
index a87f038..788b43f 100644
--- a/src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor
+++ b/src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor
@@ -11,7 +11,7 @@
         Curation
     
 
-    
+    
         Tools
     
 

diff --git a/src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor.css b/src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor.css
index 11a8230..55aba6d 100644
--- a/src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor.css
+++ b/src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor.css
@@ -31,6 +31,20 @@
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
 }
 
+.shell-primary-nav-link.is-tools-link {
+    color: color-mix(in srgb, var(--info-3) 42%, var(--text-secondary));
+}
+
+.shell-primary-nav-link.is-tools-link:hover {
+    background: color-mix(in srgb, var(--surface-tooling) 86%, transparent);
+    border-color: color-mix(in srgb, var(--info-2) 35%, var(--border-default));
+}
+
+.shell-primary-nav-link.is-tools-link.active {
+    background: color-mix(in srgb, var(--surface-tooling) 92%, var(--surface-2));
+    border-color: color-mix(in srgb, var(--info-2) 46%, var(--border-default));
+}
+
 .shell-primary-nav-label {
     font-size: 0.92rem;
     line-height: 1;
diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css
index 8321489..39371a7 100644
--- a/src/RolemasterDb.App/wwwroot/app.css
+++ b/src/RolemasterDb.App/wwwroot/app.css
@@ -236,6 +236,18 @@ pre,
     padding: 1.35rem;
 }
 
+.tooling-surface {
+    background: color-mix(in srgb, var(--surface-tooling) 88%, var(--bg-elevated));
+    border-color: color-mix(in srgb, var(--info-2) 28%, var(--border-default));
+}
+
+.tooling-surface .panel-title,
+.tooling-surface h1,
+.tooling-surface h2,
+.tooling-surface h3 {
+    color: color-mix(in srgb, var(--info-3) 46%, var(--text-primary));
+}
+
 .panel-title {
     margin: 0 0 0.35rem;
     font-size: 1.4rem;