From b1ee3c3942aeacb74bb02226621a1fa7de97840e Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 25 Apr 2026 15:11:24 +0300
Subject: [PATCH] fix(ui): channel stripe paints only on custom-color or
 running cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reported during pre-merge review of the Lumenworks redesign:
non-dashboard cards (Inputs, Integrations, Targets) all showed
aggressive cyan / green left stripes "regardless of custom color set
or not", and even the ``+`` Add card carried a stripe.

Root cause: ``.template-card`` defaulted to ``--ch: cyan`` and
``::before`` painted it unconditionally; ``.add-template-card``
inherits ``.template-card`` so it picked the stripe up too.

Fix: gate the ``::before`` channel stripe behind opt-in selectors.
It now paints only when the card carries ``data-has-color="1"``
(the user picked a personal colour via the picker, set by ``wrapCard``)
or has the ``card-running`` class (the "patched and live" indicator).
Dashboard module rows are unchanged — their ``::before`` already
runs at ``opacity: 0.6`` and was approved as the visual benchmark.

``add-template-card::before`` is hidden unconditionally with
``!important`` since the Add card is not an entity and should never
carry a channel hue.
---
 server/src/ledgrab/static/css/cards.css   | 14 +++++++++++++-
 server/src/ledgrab/static/css/streams.css | 12 +++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/server/src/ledgrab/static/css/cards.css b/server/src/ledgrab/static/css/cards.css
index 050c1ff..6f296f3 100644
--- a/server/src/ledgrab/static/css/cards.css
+++ b/server/src/ledgrab/static/css/cards.css
@@ -147,7 +147,13 @@ section {
     overflow: hidden;
 }
 
-/* Channel stripe on left edge — color coded by entity type via --ch override */
+/* Channel stripe on left edge — opt-in only:
+ *   [data-has-color="1"] → user picked a personal color via the picker
+ *   .card-running        → "patched and live" indicator
+ * Idle cards without a personal color stay clean (no stripe), matching
+ * the pre-redesign behavior where the left border meant "I marked this".
+ * The dashboard module rows keep their always-on stripe (at 0.6 opacity)
+ * because the dashboard was approved as-is. */
 .card::before {
     content: '';
     position: absolute;
@@ -157,6 +163,12 @@ section {
     box-shadow: 0 0 10px color-mix(in srgb, var(--ch) 40%, transparent);
     pointer-events: none;
     z-index: 1;
+    display: none;
+}
+
+.card[data-has-color="1"]::before,
+.card.card-running::before {
+    display: block;
 }
 
 /* Corner bracket — silkscreened panel feel in the top-right */
diff --git a/server/src/ledgrab/static/css/streams.css b/server/src/ledgrab/static/css/streams.css
index cf867d5..b2b86ed 100644
--- a/server/src/ledgrab/static/css/streams.css
+++ b/server/src/ledgrab/static/css/streams.css
@@ -21,7 +21,9 @@
     overflow: hidden;
 }
 
-/* Channel stripe on left edge — colour-coded per entity type via --ch override */
+/* Channel stripe on left edge — opt-in only (mirrors .card::before in
+ * cards.css). Idle template-cards without a custom color stay clean.
+ * The Add card never gets a stripe (it's not an entity). */
 .template-card::before {
     content: '';
     position: absolute;
@@ -32,8 +34,16 @@
     pointer-events: none;
     z-index: 1;
     transition: width 0.2s ease, box-shadow 0.2s ease;
+    display: none;
 }
 
+.template-card[data-has-color="1"]::before,
+.template-card.card-running::before {
+    display: block;
+}
+
+.add-template-card::before { display: none !important; }
+
 /* Corner bracket — silkscreened panel feel in the top-right */
 .template-card::after {
     content: '';