From 6dbc906bb5c6143ba059bb70e710c109a30189ef Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Thu, 30 Jul 2026 13:18:12 -0600
Subject: [PATCH] ui: Nav off Semantic, and the memory warning starts working

The navigation bar was the last visibly-Semantic surface, so this finishes the
visual migration.  Its two fragile features survive intact: the navbar colour
still comes from the user's `nav_color` setting, now as `var(--<name>)` since
our token tables define all fourteen Semantic colour names, with text taking
`--btn-text` so every theme stays legible; and the warning-icon contrast swap
is unchanged, including the case where `lowWarningColor` is null and must mean
"no override" rather than `var(--null)`.

Fixed a pre-existing bug the migration exposed: the memory indicator passed its
colour to `Link`, which ignores it, so that icon never changed colour -- 81% and
95% RAM looked identical.  Every sibling indicator colours the Icon; now this
one does too.

The agent that migrated this file also gave names to the warning indicators,
which were unlabelled icons inside links, so a screen reader now announces what
each one is.  The three data-testid hooks are unchanged.

Baseline 15 -> 2.  Only ControllerPage and Theme.tsx remain; Theme.tsx is last
by design, since it can only go once nothing imports its Semantic wrappers.
---
 app/src/components/Nav.js      | 10 ++++++++--
 app/src/semantic-baseline.json |  9 ---------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/src/components/Nav.js b/app/src/components/Nav.js
index 09e32cf3..09ad2da0 100644
--- a/app/src/components/Nav.js
+++ b/app/src/components/Nav.js
@@ -195,8 +195,14 @@ export function NavBar() {
     let memoryIcon;
     if (memoryPercent > 80) {
         const color = memoryPercent > 90 ? highWarningColor : lowWarningColor;
-        const icon = <Link to='/admin/status' color={color}>
-            <Icon name='microchip' size='large' label='Memory usage warning'/>
+        {/*
+          The colour goes on the Icon, as it does for every other indicator.  It used to
+          be passed to `Link`, which ignores it, so the memory warning never actually
+          changed colour -- 81% and 95% looked identical.
+        */}
+        const icon = <Link to='/admin/status'>
+            <Icon name='microchip' size='large' label='Memory usage warning'
+                  style={{color: colorVar(color)}}/>
         </Link>;
         memoryIcon = <Tooltip label={`System Memory: ${memoryPercent.toFixed()}%`}>{icon}</Tooltip>
     }
diff --git a/app/src/semantic-baseline.json b/app/src/semantic-baseline.json
index c4909550..a6c6d3f7 100644
--- a/app/src/semantic-baseline.json
+++ b/app/src/semantic-baseline.json
@@ -1,13 +1,4 @@
 [
-  "src/components/Archive.js",
-  "src/components/Channels.js",
-  "src/components/Docs.js",
-  "src/components/FileBrowser.js",
-  "src/components/FilePreview.js",
-  "src/components/Nav.js",
-  "src/components/Playlists.js",
   "src/components/Theme.tsx",
-  "src/components/VideoPlayer.js",
-  "src/components/Zim.js",
   "src/components/admin/ControllerPage.js"
 ]