From c6801e4a9e961b015c85bd1aa00a170f8cfeac12 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Mon, 23 Mar 2026 01:31:36 +0000
Subject: [PATCH] Fix: node/type colors trigger page re-render, conflict badge
 uses status-yellow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Color changes dispatch theme-changed event → app.js re-navigates
to current page, rebuilding markers/rows with new colors.

Conflict badges (.hop-ambiguous, .hop-conflict-btn) now use
var(--status-yellow) so they follow the customized status color.
---
 public/app.js       | 1 +
 public/customize.js | 3 +++
 public/index.html   | 6 +++---
 public/style.css    | 8 ++++----
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/public/app.js b/public/app.js
index 90abef06..985a90cc 100644
--- a/public/app.js
+++ b/public/app.js
@@ -315,6 +315,7 @@ function navigate() {
 }
 
 window.addEventListener('hashchange', navigate);
+window.addEventListener('theme-changed', () => { if (typeof navigate === 'function') navigate(); });
 window.addEventListener('DOMContentLoaded', () => {
   connectWS();
 
diff --git a/public/customize.js b/public/customize.js
index 16a3b580..a11b6063 100644
--- a/public/customize.js
+++ b/public/customize.js
@@ -627,6 +627,8 @@
         // Sync to global role colors used by map/packets/etc
         if (window.ROLE_COLORS) window.ROLE_COLORS[key] = inp.value;
         if (window.ROLE_STYLE && window.ROLE_STYLE[key]) window.ROLE_STYLE[key].color = inp.value;
+        // Trigger re-render of current page
+        window.dispatchEvent(new CustomEvent('theme-changed'));
         var dot = container.querySelector('[data-dot="' + key + '"]');
         if (dot) dot.style.background = inp.value;
         var hex = container.querySelector('[data-nhex="' + key + '"]');
@@ -651,6 +653,7 @@
         var key = inp.dataset.typeColor;
         state.typeColors[key] = inp.value;
         if (window.TYPE_COLORS) window.TYPE_COLORS[key] = inp.value;
+        window.dispatchEvent(new CustomEvent('theme-changed'));
         var dot = container.querySelector('[data-tdot="' + key + '"]');
         if (dot) dot.style.background = inp.value;
         var hex = container.querySelector('[data-thex="' + key + '"]');
diff --git a/public/index.html b/public/index.html
index 8fcdbc9b..11d6ac36 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="MeshCore Analyzer">
   <meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
-  <link rel="stylesheet" href="style.css?v=1774228984">
+  <link rel="stylesheet" href="style.css?v=1774229496">
   <link rel="stylesheet" href="home.css">
   <link rel="stylesheet" href="live.css?v=1774058575">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -85,7 +85,7 @@
   <script src="region-filter.js?v=1774325000"></script>
   <script src="hop-resolver.js?v=1774223973"></script>
   <script src="hop-display.js?v=1774221932"></script>
-  <script src="app.js?v=1774350000"></script>
+  <script src="app.js?v=1774229496"></script>
   <script src="home.js?v=1774350000"></script>
   <script src="packets.js?v=1774225004"></script>
   <script src="map.js?v=1774220756" onerror="console.error('Failed to load:', this.src)"></script>
@@ -101,6 +101,6 @@
   <script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="customize.js?v=1774229396" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="customize.js?v=1774229496" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>
diff --git a/public/style.css b/public/style.css
index 537a61cf..7ec01138 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1223,11 +1223,11 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
 }
 
 /* Ambiguous hop indicator */
-.hop-ambiguous { border-bottom: 1px dashed #f59e0b; }
-.hop-warn { font-size: 0.7em; margin-left: 2px; vertical-align: super; color: #f59e0b; }
-.hop-conflict-btn { background: #f59e0b; color: #000; border: none; border-radius: 4px; font-size: 11px;
+.hop-ambiguous { border-bottom: 1px dashed var(--status-yellow, #f59e0b); }
+.hop-warn { font-size: 0.7em; margin-left: 2px; vertical-align: super; color: var(--status-yellow, #f59e0b); }
+.hop-conflict-btn { background: var(--status-yellow, #f59e0b); color: #000; border: none; border-radius: 4px; font-size: 11px;
   font-weight: 700; padding: 1px 5px; cursor: pointer; vertical-align: middle; margin-left: 3px; line-height: 1.2; }
-.hop-conflict-btn:hover { background: #d97706; }
+.hop-conflict-btn:hover { background: var(--status-yellow, #d97706); filter: brightness(0.85); }
 .hop-conflict-popover { position: absolute; z-index: 9999; background: var(--surface-1); border: 1px solid var(--border);
   border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); width: 260px; max-height: 300px; overflow-y: auto; }
 .hop-conflict-header { padding: 10px 12px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border);