From 2b6bc22fc860eab4fa38e032337de0af75746bff Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Wed, 25 Feb 2026 02:55:23 +0300
Subject: [PATCH] Sticky header, dim overlay on card navigation, fix sticky
 stacking

Make header sticky so search button stays visible on scroll. Section
headers stick below it using a JS-measured --header-height variable.
Add dim overlay behind highlighted cards for better focus effect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/wled_controller/static/css/layout.css   |  7 ++++---
 .../src/wled_controller/static/css/patterns.css | 17 ++++++++++++++++-
 .../src/wled_controller/static/css/streams.css  |  2 +-
 server/src/wled_controller/static/js/app.js     | 12 ++++++++++++
 .../static/js/core/navigation.js                | 13 +++++++++++++
 5 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/server/src/wled_controller/static/css/layout.css b/server/src/wled_controller/static/css/layout.css
index 51a2a7b..29f6d62 100644
--- a/server/src/wled_controller/static/css/layout.css
+++ b/server/src/wled_controller/static/css/layout.css
@@ -2,10 +2,11 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 0 6px;
-    margin-bottom: 6px;
-    position: relative;
+    padding: 8px 0 12px;
+    position: sticky;
+    top: 0;
     z-index: 100;
+    background: var(--bg-color);
 }
 
 .header-title {
diff --git a/server/src/wled_controller/static/css/patterns.css b/server/src/wled_controller/static/css/patterns.css
index 9be4429..b8f75f0 100644
--- a/server/src/wled_controller/static/css/patterns.css
+++ b/server/src/wled_controller/static/css/patterns.css
@@ -74,7 +74,7 @@
 
 @keyframes cardHighlight {
     0%, 100% { box-shadow: none; }
-    25%, 75% { box-shadow: 0 0 0 3px var(--primary-color); }
+    25%, 75% { box-shadow: 0 0 0 3px var(--primary-color), 0 0 20px rgba(var(--primary-rgb, 59, 130, 246), 0.3); }
 }
 
 .card-highlight,
@@ -84,6 +84,21 @@
     z-index: 11;
 }
 
+/* Dim overlay behind highlighted card */
+.nav-dim-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+}
+
+.nav-dim-overlay.active {
+    opacity: 1;
+}
+
 /* Key Colors target styles */
 .kc-rect-list {
     display: flex;
diff --git a/server/src/wled_controller/static/css/streams.css b/server/src/wled_controller/static/css/streams.css
index e342728..5c170b2 100644
--- a/server/src/wled_controller/static/css/streams.css
+++ b/server/src/wled_controller/static/css/streams.css
@@ -644,7 +644,7 @@
     cursor: pointer;
     user-select: none;
     position: sticky;
-    top: 0;
+    top: var(--header-height, 0px);
     z-index: 10;
     background: var(--bg-color);
     padding: 8px 0;
diff --git a/server/src/wled_controller/static/js/app.js b/server/src/wled_controller/static/js/app.js
index 3c073cf..13b1e7a 100644
--- a/server/src/wled_controller/static/js/app.js
+++ b/server/src/wled_controller/static/js/app.js
@@ -427,6 +427,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Show content now that translations are loaded and tabs are set
     document.body.style.visibility = 'visible';
 
+    // Set CSS variable for sticky header height so section headers stack below it
+    const headerEl = document.querySelector('header');
+    if (headerEl) {
+        const updateHeaderHeight = () => {
+            document.documentElement.style.setProperty(
+                '--header-height', headerEl.offsetHeight + 'px'
+            );
+        };
+        updateHeaderHeight();
+        window.addEventListener('resize', updateHeaderHeight);
+    }
+
     // Initialize command palette
     initCommandPalette();
 
diff --git a/server/src/wled_controller/static/js/core/navigation.js b/server/src/wled_controller/static/js/core/navigation.js
index 8b37a0b..981e4ac 100644
--- a/server/src/wled_controller/static/js/core/navigation.js
+++ b/server/src/wled_controller/static/js/core/navigation.js
@@ -46,11 +46,24 @@ export function navigateToCard(tab, subTab, sectionKey, cardAttr, cardValue) {
             if (!card) return;
             card.scrollIntoView({ behavior: 'smooth', block: 'center' });
             card.classList.add('card-highlight');
+            _showDimOverlay(2000);
             setTimeout(() => card.classList.remove('card-highlight'), 2000);
         });
     });
 }
 
+function _showDimOverlay(duration) {
+    let overlay = document.getElementById('nav-dim-overlay');
+    if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.id = 'nav-dim-overlay';
+        overlay.className = 'nav-dim-overlay';
+        document.body.appendChild(overlay);
+    }
+    overlay.classList.add('active');
+    setTimeout(() => overlay.classList.remove('active'), duration);
+}
+
 function _waitForCard(cardAttr, cardValue, timeout) {
     return new Promise(resolve => {
         const card = document.querySelector(`[${cardAttr}="${cardValue}"]`);