From 0f645008130ed0b32b014ad9f4fbac8c09246d5a Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Thu, 27 Aug 2026 14:05:04 +0000
Subject: [PATCH] AC block: mode-driven accent colour, stronger fade when off

Icon and lit fan bars now share one --ac-accent custom property so they can
never drift apart: blue (cool), red (heat), amber (auto/fan), app-primary
default for dry (not in the requested colour spec). Off overrides all of
them with light grey plus a real opacity fade. Applies to both the
Dashboard's ZoneCard and kiosk's KioskZoneBlock via the shared CSS.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/components/KioskZoneBlock.tsx |  2 +-
 frontend/src/components/ZoneCard.tsx       |  2 +-
 frontend/src/index.css                     | 22 ++++++++++++++++------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/KioskZoneBlock.tsx b/frontend/src/components/KioskZoneBlock.tsx
index 41bd64e..3863c0c 100644
--- a/frontend/src/components/KioskZoneBlock.tsx
+++ b/frontend/src/components/KioskZoneBlock.tsx
@@ -58,7 +58,7 @@ export default function KioskZoneBlock({ zone, liveDevices, selectionMode, selec
       <div className="kiosk-block-top">
         <span className="kiosk-block-zone">{zone.name}</span>
         {ac && (
-          <div className={`ac-block${acOn ? '' : ' off'}`}>
+          <div className={`ac-block ac-mode-${ac.current_mode || 'unknown'}${acOn ? '' : ' off'}`}>
             {ac.remote_locked && <Lock size={12} strokeWidth={1.75} className="ac-lock" />}
             <div className="ac-mode-row">
               <ModeIcon size={18} strokeWidth={1.75} />
diff --git a/frontend/src/components/ZoneCard.tsx b/frontend/src/components/ZoneCard.tsx
index 9a81000..2d72ad0 100644
--- a/frontend/src/components/ZoneCard.tsx
+++ b/frontend/src/components/ZoneCard.tsx
@@ -112,7 +112,7 @@ export default function ZoneCard({ zone, onClick }: { zone: ZoneStatus; onClick:
         </div>
 
         {ac && (
-          <div className={`ac-block${acOn ? '' : ' off'}`}>
+          <div className={`ac-block ac-mode-${ac.current_mode || 'unknown'}${acOn ? '' : ' off'}`}>
             {ac.remote_locked && <Lock size={12} strokeWidth={1.75} className="ac-lock" />}
             <div className="ac-mode-row">
               <ModeIcon size={20} strokeWidth={1.75} />
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f076d2b..4a4b83c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -230,11 +230,21 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
 .rad-icon.heating { color: var(--danger); }
 .rad-icon.idle     { color: var(--text-mid); }
 
-.ac-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; color: var(--text-dark); }
-/* Explicit muted colour rather than opacity — opacity alone just faded the
-   'on' fan-bar segments' orange, which read as a washed-out active state
-   rather than a clean off one. */
-.ac-block.off { color: var(--text-mid); }
+/* Mode drives one accent colour shared by the mode icon and the lit fan bars
+   (--ac-accent), so the two can never drift apart. Set per ac-mode-* class
+   below; both ZoneCard (dashboard) and KioskZoneBlock render this markup. */
+.ac-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; --ac-accent: var(--app-primary); color: var(--ac-accent); }
+.ac-block.ac-mode-cool { --ac-accent: var(--st-occupied); }      /* blue */
+.ac-block.ac-mode-heat { --ac-accent: var(--danger); }           /* red */
+.ac-block.ac-mode-auto,
+.ac-block.ac-mode-fan  { --ac-accent: var(--health-degraded); }  /* amber */
+/* 'dry' isn't in the user's colour spec — left on the default app-primary
+   rather than inventing a meaning for it. */
+
+/* Off: light grey + genuine fade, overriding whatever mode accent applies —
+   explicit colour AND opacity, so it reads clearly inactive rather than like
+   a washed-out active state. */
+.ac-block.off { --ac-accent: var(--text-mid); color: var(--text-mid); opacity: .45; }
 .ac-block.off .fan-bar span.on { background: var(--text-mid); }
 .ac-lock { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: var(--health-degraded); }
 .ac-mode-row { display: flex; align-items: center; gap: 6px; }
@@ -246,7 +256,7 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
 .fan-bar span:nth-child(2) { height: 50%; }
 .fan-bar span:nth-child(3) { height: 75%; }
 .fan-bar span:nth-child(4) { height: 100%; }
-.fan-bar span.on { background: var(--app-primary); }
+.fan-bar span.on { background: var(--ac-accent, var(--app-primary)); }
 
 /* ── Badges ────────────────────────────────────────────────── */
 .badge {