From 82e644aae4777220017494b0902027163dc95e49 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Mon, 23 Mar 2026 00:45:02 +0000
Subject: [PATCH] Customization: show what each color affects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each color picker now has a description underneath:
- Accent: 'Active nav tab, buttons, links, selected rows, badges'
- Status Green: 'Healthy nodes, online indicators, good SNR'
- Repeater: 'Infrastructure nodes — map markers, packet path badges'
etc.
---
 public/customize.js | 30 ++++++++++++++++++++++++++----
 public/index.html   |  2 +-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/public/customize.js b/public/customize.js
index 1829d4d..b78f72d 100644
--- a/public/customize.js
+++ b/public/customize.js
@@ -73,6 +73,16 @@
     statusRed: 'Status Red'
   };
 
+  const THEME_HINTS = {
+    accent: 'Active nav tab, buttons, links, selected rows, badges, chart bars',
+    accentHover: 'Button hover states, link hovers',
+    navBg: 'Top navigation bar background',
+    navBg2: 'Nav dropdown menus, darker nav areas',
+    statusGreen: 'Healthy nodes, online indicators, good SNR',
+    statusYellow: 'Degraded nodes, warning indicators, moderate SNR',
+    statusRed: 'Silent/offline nodes, error states, bad SNR'
+  };
+
   const NODE_LABELS = {
     repeater: 'Repeater',
     companion: 'Companion',
@@ -81,6 +91,14 @@
     observer: 'Observer'
   };
 
+  const NODE_HINTS = {
+    repeater: 'Infrastructure nodes that relay packets — map markers, packet path badges, node list',
+    companion: 'End-user devices — map markers, packet detail, node list',
+    room: 'Room/chat server nodes — map markers, node list',
+    sensor: 'Sensor/telemetry nodes — map markers, node list',
+    observer: 'MQTT observer stations — map markers (purple stars), observer list, packet headers'
+  };
+
   const NODE_EMOJI = { repeater: '◆', companion: '●', room: '■', sensor: '▲', observer: '★' };
 
   // Current state
@@ -146,8 +164,10 @@
       .cust-field input[type="text"], .cust-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border);
         border-radius: 6px; font-size: 14px; background: var(--input-bg); color: var(--text); box-sizing: border-box; }
       .cust-field input[type="text"]:focus, .cust-field textarea:focus { outline: none; border-color: var(--accent); }
-      .cust-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
-      .cust-color-row label { min-width: 140px; font-size: 13px; font-weight: 500; margin: 0; }
+      .cust-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+      .cust-color-row > div:first-child { min-width: 220px; }
+      .cust-color-row label { font-size: 13px; font-weight: 600; margin: 0; display: block; }
+      .cust-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
       .cust-color-row input[type="color"] { width: 40px; height: 32px; border: 1px solid var(--border);
         border-radius: 6px; cursor: pointer; padding: 2px; background: var(--input-bg); }
       .cust-color-row .cust-hex { font-family: var(--mono); font-size: 12px; color: var(--text-muted); min-width: 70px; }
@@ -231,7 +251,8 @@
       var val = state.theme[key];
       var def = DEFAULTS.theme[key];
       rows += '<div class="cust-color-row">' +
-        '<label>' + THEME_LABELS[key] + '</label>' +
+        '<div><label>' + THEME_LABELS[key] + '</label>' +
+        '<div class="cust-hint">' + (THEME_HINTS[key] || '') + '</div></div>' +
         '<input type="color" data-theme="' + key + '" value="' + val + '">' +
         '<span class="cust-hex" data-hex="' + key + '">' + val + '</span>' +
         (val !== def ? '<button class="cust-reset-btn" data-reset-theme="' + key + '">Reset</button>' : '') +
@@ -251,7 +272,8 @@
       var val = state.nodeColors[key];
       var def = DEFAULTS.nodeColors[key];
       rows += '<div class="cust-color-row">' +
-        '<label>' + NODE_EMOJI[key] + ' ' + NODE_LABELS[key] + '</label>' +
+        '<div><label>' + NODE_EMOJI[key] + ' ' + NODE_LABELS[key] + '</label>' +
+        '<div class="cust-hint">' + (NODE_HINTS[key] || '') + '</div></div>' +
         '<input type="color" data-node="' + key + '" value="' + val + '">' +
         '<span class="cust-node-dot" style="background:' + val + '" data-dot="' + key + '"></span>' +
         '<span class="cust-hex" data-nhex="' + key + '">' + val + '</span>' +
diff --git a/public/index.html b/public/index.html
index 84149ac..147c823 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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=1774226573" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="customize.js?v=1774226702" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>