Add CPU/GPU names on perf charts, reusable color picker, and header toolbar redesign

- Show CPU and GPU model names as overlays on performance chart cards
- Add cpu_name field to performance API with cross-platform detection
- Extract reusable color-picker popover module (9 presets + custom picker)
- Per-chart color customization for CPU/RAM/GPU performance charts
- Redesign header: compact toolbar container with icon-only buttons
- Compact language dropdown (EN/RU/ZH), icon-only login/logout
- Use accent color for FPS charts, range slider accent, dashboard icons

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/api/routes/system.py

@@ -2,6 +2,7 @@
 
 import io
 import json
+import platform
 import subprocess
 import sys
 import threading
@@ -55,6 +56,40 @@ except Exception:
     _nvml = None
     logger.info("NVIDIA GPU monitoring unavailable (pynvml not installed or no NVIDIA GPU)")
 
+
+def _get_cpu_name() -> str | None:
+    """Get a human-friendly CPU model name (cached at module level)."""
+    try:
+        if platform.system() == "Windows":
+            import winreg
+
+            key = winreg.OpenKey(
+                winreg.HKEY_LOCAL_MACHINE,
+                r"HARDWARE\DESCRIPTION\System\CentralProcessor\0",
+            )
+            name, _ = winreg.QueryValueEx(key, "ProcessorNameString")
+            winreg.CloseKey(key)
+            return name.strip()
+        elif platform.system() == "Linux":
+            with open("/proc/cpuinfo") as f:
+                for line in f:
+                    if "model name" in line:
+                        return line.split(":")[1].strip()
+        elif platform.system() == "Darwin":
+            return (
+                subprocess.check_output(
+                    ["sysctl", "-n", "machdep.cpu.brand_string"]
+                )
+                .decode()
+                .strip()
+            )
+    except Exception:
+        pass
+    return platform.processor() or None
+
+
+_cpu_name: str | None = _get_cpu_name()
+
 router = APIRouter()
 
 
@@ -196,6 +231,7 @@ def get_system_performance(_: AuthRequired):
             pass
 
     return PerformanceResponse(
+        cpu_name=_cpu_name,
         cpu_percent=psutil.cpu_percent(interval=None),
         ram_used_mb=round(mem.used / 1024 / 1024, 1),
         ram_total_mb=round(mem.total / 1024 / 1024, 1),

server/src/wled_controller/api/schemas/system.py

@@ -62,6 +62,7 @@ class GpuInfo(BaseModel):
 class PerformanceResponse(BaseModel):
     """System performance metrics."""
 
+    cpu_name: str | None = Field(default=None, description="CPU model name")
     cpu_percent: float = Field(description="System-wide CPU usage percent")
     ram_used_mb: float = Field(description="RAM used in MB")
     ram_total_mb: float = Field(description="RAM total in MB")

server/src/wled_controller/static/css/components.css

@@ -195,6 +195,7 @@ select:disabled {
 input[type="range"] {
     width: 100%;
     margin: 8px 0;
+    accent-color: var(--primary-color);
 }
 
 /* Better password field appearance */
@@ -394,8 +395,7 @@ input:-webkit-autofill:focus {
 .modal-header-btn:focus-visible,
 .tab-btn:focus-visible,
 .stream-tab-btn:focus-visible,
-.search-toggle:focus-visible,
+.header-btn:focus-visible,
-.theme-toggle:focus-visible,
 .tutorial-trigger-btn:focus-visible,
 .tutorial-close-btn:focus-visible,
 .btn-expand-collapse:focus-visible,

server/src/wled_controller/static/css/dashboard.css

@@ -104,6 +104,7 @@
 .dashboard-target-icon {
     font-size: 1rem;
     flex-shrink: 0;
+    color: var(--primary-text-color);
 }
 
 .dashboard-target-name {
@@ -317,7 +318,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 4px;
+    margin-bottom: 0;
 }
 
 .perf-chart-label {
@@ -328,14 +329,33 @@
     color: var(--text-secondary);
 }
 
+.perf-chart-subtitle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 0.6rem;
+    font-weight: 400;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: calc(100% - 4px);
+    pointer-events: none;
+    opacity: 0.7;
+    z-index: 1;
+}
+
 .perf-chart-value {
     font-size: 0.85rem;
     font-weight: 700;
+    color: var(--primary-text-color);
 }
 
-.perf-chart-value.cpu { color: #2196F3; }
+.perf-chart-label .color-picker-swatch {
-.perf-chart-value.ram { color: #4CAF50; }
+    width: 12px;
-.perf-chart-value.gpu { color: #FF9800; }
+    height: 12px;
+    vertical-align: middle;
+}
 
 .perf-chart-unavailable {
     text-align: center;

server/src/wled_controller/static/css/layout.css

@@ -26,19 +26,31 @@ h2 {
     font-size: 1.5rem;
 }
 
-.server-info {
+.header-toolbar {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 2px;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 3px 4px;
+}
+
+.header-toolbar-sep {
+    width: 1px;
+    height: 18px;
+    background: var(--border-color);
+    margin: 0 3px;
+    flex-shrink: 0;
 }
 
 .header-link {
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.85rem;
+    font-size: 0.75rem;
-    font-weight: 500;
+    font-weight: 600;
     padding: 4px 8px;
-    border-radius: 4px;
+    border-radius: 5px;
     transition: color 0.2s, background 0.2s;
 }
 
@@ -47,6 +59,23 @@ h2 {
     background: var(--bg-secondary);
 }
 
+.header-locale {
+    padding: 2px 4px;
+    border: none;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.7rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+}
+
+.header-locale:hover {
+    color: var(--text-color);
+    background: var(--bg-secondary);
+}
+
 #server-version {
     font-size: 0.75rem;
     font-weight: 400;
@@ -198,61 +227,67 @@ h2 {
     100% { left: 100%; }
 }
 
-/* Theme Toggle */
+/* Header toolbar buttons */
-.search-toggle,
+.header-btn {
-.theme-toggle {
+    background: transparent;
-    background: var(--card-bg);
+    border: none;
-    border: 1px solid var(--border-color);
+    padding: 4px 6px;
-    padding: 4px 8px;
+    border-radius: 5px;
-    border-radius: 4px;
     cursor: pointer;
-    font-size: 1rem;
+    font-size: 0.9rem;
-    transition: transform 0.2s;
+    color: var(--text-secondary);
-    margin-left: 0;
+    transition: color 0.2s, background 0.2s;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
 }
 
-.search-toggle:hover,
+.header-btn:hover {
-.theme-toggle:hover {
+    color: var(--text-color);
-    transform: scale(1.1);
+    background: var(--bg-secondary);
 }
 
-/* Accent color picker */
+/* Reusable color picker popover */
-.accent-wrapper {
+.color-picker-wrapper {
     position: relative;
+    display: inline-flex;
+    align-items: center;
 }
-.accent-swatch {
+.color-picker-swatch {
     display: inline-block;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     border: 2px solid var(--border-color);
+    cursor: pointer;
     transition: border-color 0.2s, box-shadow 0.2s;
 }
-.search-toggle:hover .accent-swatch {
+.color-picker-swatch:hover {
     box-shadow: 0 0 6px var(--primary-color);
 }
-.accent-popover {
+.color-picker-popover {
     position: absolute;
     top: calc(100% + 8px);
-    right: 0;
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 10px;
     padding: 10px;
     box-shadow: 0 8px 24px var(--shadow-color);
     z-index: 200;
-    animation: accent-pop-in 0.15s ease-out;
+    animation: color-picker-pop-in 0.15s ease-out;
 }
-@keyframes accent-pop-in {
+.color-picker-popover.anchor-right { right: 0; }
+.color-picker-popover.anchor-left  { left: 0; }
+@keyframes color-picker-pop-in {
     from { opacity: 0; transform: translateY(-4px) scale(0.95); }
     to   { opacity: 1; transform: translateY(0) scale(1); }
 }
-.accent-grid {
+.color-picker-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
 }
-.accent-dot {
+.color-picker-dot {
     width: 32px;
     height: 32px;
     border-radius: 50%;
@@ -261,15 +296,15 @@ h2 {
     transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
     padding: 0;
 }
-.accent-dot:hover {
+.color-picker-dot:hover {
     transform: scale(1.15);
     box-shadow: 0 0 8px rgba(255,255,255,0.2);
 }
-.accent-dot.active {
+.color-picker-dot.active {
     border-color: var(--text-color);
     box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--text-color);
 }
-.accent-custom {
+.color-picker-custom {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -280,7 +315,7 @@ h2 {
     color: var(--text-secondary);
     cursor: pointer;
 }
-.accent-custom input[type="color"] {
+.color-picker-custom input[type="color"] {
     width: 28px;
     height: 28px;
     border: 1px solid var(--border-color);
@@ -457,9 +492,9 @@ h2 {
 }
 
 @media (max-width: 900px) {
-    .server-info {
+    .header-toolbar {
         flex-wrap: wrap;
-        gap: 4px;
+        gap: 2px;
     }
 }
 

server/src/wled_controller/static/js/core/color-picker.js

@@ -0,0 +1,112 @@
+/**
+ * Reusable color-picker popover.
+ *
+ * Usage:
+ *   import { createColorPicker } from '../core/color-picker.js';
+ *   const html = createColorPicker({
+ *       id: 'my-picker',
+ *       currentColor: '#4CAF50',
+ *       onPick: 'myCallback',      // global function name: window[onPick](hex)
+ *       anchor: 'left',            // 'left' | 'right' (default 'right')
+ *   });
+ *
+ * The returned HTML contains:
+ *   - A small swatch dot (click to toggle popover)
+ *   - A popover with 9 preset colors + custom native picker
+ *
+ * Call `closeAllColorPickers()` to dismiss any open popover.
+ */
+
+import { t } from './i18n.js';
+
+const PRESETS = [
+    '#4CAF50', '#7C4DFF', '#FF6D00',
+    '#E91E63', '#00BCD4', '#FF5252',
+    '#26A69A', '#2196F3', '#FFC107',
+];
+
+/**
+ * Build the HTML string for a color-picker widget.
+ */
+export function createColorPicker({ id, currentColor, onPick, anchor = 'right' }) {
+    const dots = PRESETS.map(c => {
+        const active = c.toLowerCase() === currentColor.toLowerCase() ? ' active' : '';
+        return `<button class="color-picker-dot${active}" style="background:${c}" onclick="event.stopPropagation(); window._cpPick('${id}','${c}')"></button>`;
+    }).join('');
+
+    return `<span class="color-picker-wrapper" id="cp-wrap-${id}">` +
+        `<span class="color-picker-swatch" id="cp-swatch-${id}" style="background:${currentColor}" onclick="event.stopPropagation(); window._cpToggle('${id}')"></span>` +
+        `<div class="color-picker-popover anchor-${anchor}" id="cp-pop-${id}" style="display:none" onclick="event.stopPropagation()">` +
+            `<div class="color-picker-grid">${dots}</div>` +
+            `<div class="color-picker-custom" onclick="this.querySelector('input').click()">` +
+                `<input type="color" id="cp-native-${id}" value="${currentColor}" ` +
+                    `oninput="event.stopPropagation(); window._cpPick('${id}',this.value)" ` +
+                    `onchange="event.stopPropagation(); window._cpPick('${id}',this.value)">` +
+                `<span>${t('accent.custom')}</span>` +
+            `</div>` +
+        `</div>` +
+    `</span>`;
+}
+
+// -- Global helpers called from onclick attributes --
+
+// Merge any callbacks pre-registered before this module loaded (e.g. accent picker in index.html)
+const _callbacks = Object.assign({}, window._cpCallbacks || {});
+
+/** Register the callback for a picker id. */
+export function registerColorPicker(id, callback) {
+    _callbacks[id] = callback;
+}
+
+function _rgbToHex(rgb) {
+    const m = rgb.match(/\d+/g);
+    if (!m || m.length < 3) return rgb;
+    return '#' + m.slice(0, 3).map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
+}
+
+window._cpToggle = function (id) {
+    // Close all other pickers first
+    document.querySelectorAll('.color-picker-popover').forEach(p => {
+        if (p.id !== `cp-pop-${id}`) p.style.display = 'none';
+    });
+    const pop = document.getElementById(`cp-pop-${id}`);
+    if (!pop) return;
+    const show = pop.style.display === 'none';
+    pop.style.display = show ? '' : 'none';
+    if (show) {
+        // Mark active dot
+        const swatch = document.getElementById(`cp-swatch-${id}`);
+        const cur = swatch ? (_rgbToHex(swatch.style.backgroundColor) || swatch.style.background) : '';
+        pop.querySelectorAll('.color-picker-dot').forEach(d => {
+            const dHex = _rgbToHex(d.style.backgroundColor || d.style.background);
+            d.classList.toggle('active', dHex.toLowerCase() === cur.toLowerCase());
+        });
+    }
+};
+
+window._cpPick = function (id, hex) {
+    // Update swatch
+    const swatch = document.getElementById(`cp-swatch-${id}`);
+    if (swatch) swatch.style.background = hex;
+    // Update native input
+    const native = document.getElementById(`cp-native-${id}`);
+    if (native) native.value = hex;
+    // Mark active dot
+    const pop = document.getElementById(`cp-pop-${id}`);
+    if (pop) {
+        pop.querySelectorAll('.color-picker-dot').forEach(d => {
+            const dHex = _rgbToHex(d.style.backgroundColor || d.style.background);
+            d.classList.toggle('active', dHex.toLowerCase() === hex.toLowerCase());
+        });
+        pop.style.display = 'none';
+    }
+    // Fire callback
+    if (_callbacks[id]) _callbacks[id](hex);
+};
+
+export function closeAllColorPickers() {
+    document.querySelectorAll('.color-picker-popover').forEach(p => p.style.display = 'none');
+}
+
+// Close on outside click
+document.addEventListener('click', () => closeAllColorPickers());

server/src/wled_controller/static/js/features/dashboard.js

@@ -86,9 +86,14 @@ function _destroyFpsCharts() {
     _fpsCharts = {};
 }
 
+function _getAccentColor() {
+    return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#4CAF50';
+}
+
 function _createFpsChart(canvasId, actualHistory, currentHistory, fpsTarget) {
     const canvas = document.getElementById(canvasId);
     if (!canvas) return null;
+    const accent = _getAccentColor();
     return new Chart(canvas, {
         type: 'line',
         data: {
@@ -96,8 +101,8 @@ function _createFpsChart(canvasId, actualHistory, currentHistory, fpsTarget) {
             datasets: [
                 {
                     data: [...actualHistory],
-                    borderColor: '#2196F3',
+                    borderColor: accent,
-                    backgroundColor: 'rgba(33,150,243,0.12)',
+                    backgroundColor: accent + '1f',
                     borderWidth: 1.5,
                     tension: 0.3,
                     fill: true,
@@ -105,7 +110,7 @@ function _createFpsChart(canvasId, actualHistory, currentHistory, fpsTarget) {
                 },
                 {
                     data: [...currentHistory],
-                    borderColor: '#4CAF50',
+                    borderColor: accent + '80',
                     borderWidth: 1.5,
                     tension: 0.3,
                     fill: false,
@@ -490,7 +495,7 @@ export async function loadDashboard(forceFullRender = false) {
 
                 if (running.length > 0) {
                     runningIds = running.map(t => t.id);
-                    const stopAllBtn = `<button class="btn btn-sm btn-danger dashboard-stop-all" onclick="event.stopPropagation(); dashboardStopAll()" title="${t('dashboard.stop_all')}">${ICON_STOP} ${t('dashboard.stop_all')}</button>`;
+                    const stopAllBtn = `<button class="btn btn-sm btn-primary dashboard-stop-all" onclick="event.stopPropagation(); dashboardStopAll()" title="${t('dashboard.stop_all')}">${ICON_STOP} ${t('dashboard.stop_all')}</button>`;
                     const runningItems = running.map(target => renderDashboardTarget(target, true, devicesMap, cssSourceMap)).join('');
 
                     targetsInner += `<div class="dashboard-subsection">

server/src/wled_controller/static/js/features/perf-charts.js

@@ -6,44 +6,68 @@
 import { API_BASE, getHeaders } from '../core/api.js';
 import { t } from '../core/i18n.js';
 import { dashboardPollInterval } from '../core/state.js';
+import { createColorPicker, registerColorPicker } from '../core/color-picker.js';
 
 const MAX_SAMPLES = 120;
+const CHART_KEYS = ['cpu', 'ram', 'gpu'];
 
 let _pollTimer = null;
 let _charts = {};     // { cpu: Chart, ram: Chart, gpu: Chart }
 let _history = { cpu: [], ram: [], gpu: [] };
 let _hasGpu = null;   // null = unknown, true/false after first fetch
 
+function _getColor(key) {
+    return localStorage.getItem(`perfChartColor_${key}`)
+        || getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim()
+        || '#4CAF50';
+}
+
+function _onChartColorChange(key, hex) {
+    localStorage.setItem(`perfChartColor_${key}`, hex);
+    const chart = _charts[key];
+    if (chart) {
+        chart.data.datasets[0].borderColor = hex;
+        chart.data.datasets[0].backgroundColor = hex + '26';
+        chart.update();
+    }
+}
+
 /** Returns the static HTML for the perf section (canvas placeholders). */
 export function renderPerfSection() {
+    // Register callbacks before rendering
+    for (const key of CHART_KEYS) {
+        registerColorPicker(`perf-${key}`, hex => _onChartColorChange(key, hex));
+    }
+
     return `<div class="perf-charts-grid">
         <div class="perf-chart-card">
             <div class="perf-chart-header">
-                <span class="perf-chart-label">${t('dashboard.perf.cpu')}</span>
+                <span class="perf-chart-label">${t('dashboard.perf.cpu')} ${createColorPicker({ id: 'perf-cpu', currentColor: _getColor('cpu'), anchor: 'left' })}</span>
-                <span class="perf-chart-value cpu" id="perf-cpu-value">-</span>
+                <span class="perf-chart-value" id="perf-cpu-value">-</span>
             </div>
-            <div class="perf-chart-wrap"><canvas id="perf-chart-cpu"></canvas></div>
+            <div class="perf-chart-wrap"><span class="perf-chart-subtitle" id="perf-cpu-name"></span><canvas id="perf-chart-cpu"></canvas></div>
         </div>
         <div class="perf-chart-card">
             <div class="perf-chart-header">
-                <span class="perf-chart-label">${t('dashboard.perf.ram')}</span>
+                <span class="perf-chart-label">${t('dashboard.perf.ram')} ${createColorPicker({ id: 'perf-ram', currentColor: _getColor('ram'), anchor: 'left' })}</span>
-                <span class="perf-chart-value ram" id="perf-ram-value">-</span>
+                <span class="perf-chart-value" id="perf-ram-value">-</span>
             </div>
             <div class="perf-chart-wrap"><canvas id="perf-chart-ram"></canvas></div>
         </div>
         <div class="perf-chart-card" id="perf-gpu-card">
             <div class="perf-chart-header">
-                <span class="perf-chart-label">${t('dashboard.perf.gpu')}</span>
+                <span class="perf-chart-label">${t('dashboard.perf.gpu')} ${createColorPicker({ id: 'perf-gpu', currentColor: _getColor('gpu'), anchor: 'left' })}</span>
-                <span class="perf-chart-value gpu" id="perf-gpu-value">-</span>
+                <span class="perf-chart-value" id="perf-gpu-value">-</span>
             </div>
-            <div class="perf-chart-wrap"><canvas id="perf-chart-gpu"></canvas></div>
+            <div class="perf-chart-wrap"><span class="perf-chart-subtitle" id="perf-gpu-name"></span><canvas id="perf-chart-gpu"></canvas></div>
         </div>
     </div>`;
 }
 
-function _createChart(canvasId, color, fillColor) {
+function _createChart(canvasId, key) {
     const ctx = document.getElementById(canvasId);
     if (!ctx) return null;
+    const color = _getColor(key);
     return new Chart(ctx, {
         type: 'line',
         data: {
@@ -51,7 +75,7 @@ function _createChart(canvasId, color, fillColor) {
             datasets: [{
                 data: [],
                 borderColor: color,
-                backgroundColor: fillColor,
+                backgroundColor: color + '26',
                 borderWidth: 1.5,
                 tension: 0.3,
                 fill: true,
@@ -88,7 +112,7 @@ async function _seedFromServer() {
             _hasGpu = true;
         }
 
-        for (const key of ['cpu', 'ram', 'gpu']) {
+        for (const key of CHART_KEYS) {
             if (_charts[key] && _history[key].length > 0) {
                 _charts[key].data.datasets[0].data = [..._history[key]];
                 _charts[key].data.labels = _history[key].map(() => '');
@@ -103,9 +127,9 @@ async function _seedFromServer() {
 /** Initialize Chart.js instances on the already-mounted canvases. */
 export async function initPerfCharts() {
     _destroyCharts();
-    _charts.cpu = _createChart('perf-chart-cpu', '#2196F3', 'rgba(33,150,243,0.15)');
+    _charts.cpu = _createChart('perf-chart-cpu', 'cpu');
-    _charts.ram = _createChart('perf-chart-ram', '#4CAF50', 'rgba(76,175,80,0.15)');
+    _charts.ram = _createChart('perf-chart-ram', 'ram');
-    _charts.gpu = _createChart('perf-chart-gpu', '#FF9800', 'rgba(255,152,0,0.15)');
+    _charts.gpu = _createChart('perf-chart-gpu', 'gpu');
     await _seedFromServer();
 }
 
@@ -135,6 +159,10 @@ async function _fetchPerformance() {
         _pushSample('cpu', data.cpu_percent);
         const cpuEl = document.getElementById('perf-cpu-value');
         if (cpuEl) cpuEl.textContent = `${data.cpu_percent.toFixed(0)}%`;
+        if (data.cpu_name) {
+            const nameEl = document.getElementById('perf-cpu-name');
+            if (nameEl && !nameEl.textContent) nameEl.textContent = data.cpu_name;
+        }
 
         // RAM
         _pushSample('ram', data.ram_percent);
@@ -151,6 +179,10 @@ async function _fetchPerformance() {
             _pushSample('gpu', data.gpu.utilization);
             const gpuEl = document.getElementById('perf-gpu-value');
             if (gpuEl) gpuEl.textContent = `${data.gpu.utilization.toFixed(0)}% · ${data.gpu.temperature_c}°C`;
+            if (data.gpu.name) {
+                const nameEl = document.getElementById('perf-gpu-name');
+                if (nameEl && !nameEl.textContent) nameEl.textContent = data.gpu.name;
+            }
         } else if (_hasGpu === null) {
             _hasGpu = false;
             const card = document.getElementById('perf-gpu-card');

server/src/wled_controller/static/js/features/tutorials.js

@@ -29,7 +29,7 @@ const gettingStartedSteps = [
     { selector: '#tab-btn-profiles', textKey: 'tour.profiles', position: 'bottom' },
     { selector: '[onclick*="openSettingsModal"]', textKey: 'tour.settings', position: 'bottom' },
     { selector: '[onclick*="openCommandPalette"]', textKey: 'tour.search', position: 'bottom' },
-    { selector: '.theme-toggle', textKey: 'tour.theme', position: 'bottom' },
+    { selector: '[onclick*="toggleTheme"]', textKey: 'tour.theme', position: 'bottom' },
     { selector: '#locale-select', textKey: 'tour.language', position: 'bottom' }
 ];
 

server/src/wled_controller/static/locales/en.json

@@ -533,6 +533,7 @@
   "dashboard.perf.ram": "RAM",
   "dashboard.perf.gpu": "GPU",
   "dashboard.perf.unavailable": "unavailable",
+  "dashboard.perf.color": "Chart color",
   "dashboard.poll_interval": "Refresh interval",
   "profiles.title": "Profiles",
   "profiles.empty": "No profiles configured. Create one to automate target activation.",

server/src/wled_controller/static/locales/ru.json

@@ -533,6 +533,7 @@
   "dashboard.perf.ram": "ОЗУ",
   "dashboard.perf.gpu": "ГП",
   "dashboard.perf.unavailable": "недоступно",
+  "dashboard.perf.color": "Цвет графика",
   "dashboard.poll_interval": "Интервал обновления",
   "profiles.title": "Профили",
   "profiles.empty": "Профили не настроены. Создайте профиль для автоматизации целей.",

server/src/wled_controller/static/locales/zh.json

@@ -533,6 +533,7 @@
   "dashboard.perf.ram": "内存",
   "dashboard.perf.gpu": "GPU",
   "dashboard.perf.unavailable": "不可用",
+  "dashboard.perf.color": "图表颜色",
   "dashboard.poll_interval": "刷新间隔",
   "profiles.title": "配置文件",
   "profiles.empty": "尚未配置配置文件。创建一个以自动化目标激活。",

server/src/wled_controller/templates/index.html

@@ -26,52 +26,54 @@
                 <h1 data-i18n="app.title">LED Grab</h1>
                 <span id="server-version"><span id="version-number"></span></span>
             </div>
-            <div class="server-info">
+            <div class="header-toolbar">
                 <a href="/docs" target="_blank" class="header-link" data-i18n-title="app.api_docs" title="API Docs">API</a>
-                <button class="search-toggle" id="tour-restart-btn" onclick="startGettingStartedTutorial()" data-i18n-title="tour.restart" title="Restart tutorial">
+                <span class="header-toolbar-sep"></span>
+                <button class="header-btn" id="tour-restart-btn" onclick="startGettingStartedTutorial()" data-i18n-title="tour.restart" title="Restart tutorial">
                     <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                 </button>
-                <button class="search-toggle" onclick="openCommandPalette()" data-i18n-title="search.open" title="Search (Ctrl+K)">
+                <button class="header-btn" onclick="openCommandPalette()" data-i18n-title="search.open" title="Search (Ctrl+K)">
                     <svg class="icon" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
                 </button>
-                <button class="theme-toggle" onclick="toggleTheme()" data-i18n-title="theme.toggle" title="Toggle theme">
+                <button class="header-btn" onclick="toggleTheme()" data-i18n-title="theme.toggle" title="Toggle theme">
                     <span id="theme-icon"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg></span>
                 </button>
-                <div class="accent-wrapper">
+                <span class="color-picker-wrapper" id="cp-wrap-accent">
-                    <button class="search-toggle" onclick="toggleAccentPicker()" data-i18n-title="accent.title" title="Accent color">
+                    <button class="header-btn" onclick="event.stopPropagation(); window._cpToggle('accent')" data-i18n-title="accent.title" title="Accent color">
-                        <span id="accent-swatch" class="accent-swatch" style="background: var(--primary-color)"></span>
+                        <span id="cp-swatch-accent" class="color-picker-swatch" style="background: var(--primary-color)"></span>
                     </button>
-                    <div id="accent-popover" class="accent-popover" style="display:none">
+                    <div class="color-picker-popover anchor-right" id="cp-pop-accent" style="display:none" onclick="event.stopPropagation()">
-                        <div class="accent-grid">
+                        <div class="color-picker-grid">
-                            <button class="accent-dot" style="background:#4CAF50" onclick="pickAccent('#4CAF50')"></button>
+                            <button class="color-picker-dot" style="background:#4CAF50" onclick="event.stopPropagation(); window._cpPick('accent','#4CAF50')"></button>
-                            <button class="accent-dot" style="background:#7C4DFF" onclick="pickAccent('#7C4DFF')"></button>
+                            <button class="color-picker-dot" style="background:#7C4DFF" onclick="event.stopPropagation(); window._cpPick('accent','#7C4DFF')"></button>
-                            <button class="accent-dot" style="background:#FF6D00" onclick="pickAccent('#FF6D00')"></button>
+                            <button class="color-picker-dot" style="background:#FF6D00" onclick="event.stopPropagation(); window._cpPick('accent','#FF6D00')"></button>
-                            <button class="accent-dot" style="background:#E91E63" onclick="pickAccent('#E91E63')"></button>
+                            <button class="color-picker-dot" style="background:#E91E63" onclick="event.stopPropagation(); window._cpPick('accent','#E91E63')"></button>
-                            <button class="accent-dot" style="background:#00BCD4" onclick="pickAccent('#00BCD4')"></button>
+                            <button class="color-picker-dot" style="background:#00BCD4" onclick="event.stopPropagation(); window._cpPick('accent','#00BCD4')"></button>
-                            <button class="accent-dot" style="background:#FF5252" onclick="pickAccent('#FF5252')"></button>
+                            <button class="color-picker-dot" style="background:#FF5252" onclick="event.stopPropagation(); window._cpPick('accent','#FF5252')"></button>
-                            <button class="accent-dot" style="background:#26A69A" onclick="pickAccent('#26A69A')"></button>
+                            <button class="color-picker-dot" style="background:#26A69A" onclick="event.stopPropagation(); window._cpPick('accent','#26A69A')"></button>
-                            <button class="accent-dot" style="background:#2196F3" onclick="pickAccent('#2196F3')"></button>
+                            <button class="color-picker-dot" style="background:#2196F3" onclick="event.stopPropagation(); window._cpPick('accent','#2196F3')"></button>
-                            <button class="accent-dot" style="background:#FFC107" onclick="pickAccent('#FFC107')"></button>
+                            <button class="color-picker-dot" style="background:#FFC107" onclick="event.stopPropagation(); window._cpPick('accent','#FFC107')"></button>
                         </div>
-                        <div class="accent-custom">
+                        <div class="color-picker-custom" onclick="this.querySelector('input').click()">
-                            <input type="color" id="accent-picker" value="#4CAF50"
+                            <input type="color" id="cp-native-accent" value="#4CAF50"
-                                   oninput="pickAccent(this.value)" onchange="pickAccent(this.value)">
+                                   oninput="event.stopPropagation(); window._cpPick('accent',this.value)" onchange="event.stopPropagation(); window._cpPick('accent',this.value)">
                             <span data-i18n="accent.custom">Custom</span>
                         </div>
                     </div>
-                </div>
+                </span>
-                <button class="search-toggle" onclick="openSettingsModal()" data-i18n-title="settings.title" title="Settings">
+                <button class="header-btn" onclick="openSettingsModal()" data-i18n-title="settings.title" title="Settings">
                     <svg class="icon" viewBox="0 0 24 24"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
                 </button>
-                <select id="locale-select" onchange="changeLocale()" data-i18n-title="locale.change" title="Change language" style="padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-color); color: var(--text-color); font-size: 0.8rem; cursor: pointer;">
+                <select id="locale-select" class="header-locale" onchange="changeLocale()" data-i18n-title="locale.change" title="Change language">
-                    <option value="en">English</option>
+                    <option value="en">EN</option>
-                    <option value="ru">Русский</option>
+                    <option value="ru">RU</option>
-                    <option value="zh">中文</option>
+                    <option value="zh">ZH</option>
                 </select>
-                <button id="login-btn" class="btn btn-primary" onclick="showLogin()" style="display: none; padding: 4px 12px; font-size: 0.8rem;">
+                <span class="header-toolbar-sep"></span>
-                    <svg class="icon" viewBox="0 0 24 24"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg> <span data-i18n="auth.login">Login</span>
+                <button id="login-btn" class="header-btn" onclick="showLogin()" style="display: none" data-i18n-title="auth.login" title="Login">
+                    <svg class="icon" viewBox="0 0 24 24"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                 </button>
-                <button id="logout-btn" class="btn btn-danger" onclick="logout()" style="display: none; padding: 4px 12px; font-size: 0.8rem;">
+                <button id="logout-btn" class="header-btn" onclick="logout()" style="display: none" data-i18n-title="auth.logout" title="Logout">
                     <svg class="icon" viewBox="0 0 24 24"><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></svg>
                 </button>
             </div>
@@ -239,49 +241,37 @@
             root.style.setProperty('--primary-text-color', adjustLightness(hex, theme === 'dark' ? 15 : -15));
             root.style.setProperty('--primary-hover', adjustLightness(hex, 8));
             root.style.setProperty('--primary-contrast', contrastColor(hex));
-            document.getElementById('accent-swatch').style.background = hex;
+            const swatch = document.getElementById('cp-swatch-accent');
-            document.getElementById('accent-picker').value = hex;
+            if (swatch) swatch.style.background = hex;
-            // Mark the active preset dot
+            const native = document.getElementById('cp-native-accent');
-            document.querySelectorAll('.accent-dot').forEach(d => {
+            if (native) native.value = hex;
-                d.classList.toggle('active', d.style.background === hex || d.style.backgroundColor === hex
-                    || d.style.background.toLowerCase() === hex.toLowerCase());
-            });
             localStorage.setItem('accentColor', hex);
             if (!silent) showToast('Accent color updated', 'info');
         }
 
-        function toggleAccentPicker() {
+        // Bootstrap _cpToggle/_cpPick globals before the color-picker module loads
-            const pop = document.getElementById('accent-popover');
+        // (the module will overwrite them with proper versions that handle all pickers)
-            const show = pop.style.display === 'none';
+        window._cpCallbacks = { accent: function(hex) { applyAccentColor(hex); } };
-            pop.style.display = show ? '' : 'none';
+        window._cpToggle = window._cpToggle || function(id) {
-            if (show) {
+            document.querySelectorAll('.color-picker-popover').forEach(p => {
-                // Mark active dot on open
+                if (p.id !== 'cp-pop-' + id) p.style.display = 'none';
-                const cur = localStorage.getItem('accentColor') || '#4CAF50';
+            });
-                document.querySelectorAll('.accent-dot').forEach(d => {
+            const pop = document.getElementById('cp-pop-' + id);
-                    const dColor = d.style.backgroundColor || d.style.background;
+            if (pop) pop.style.display = pop.style.display === 'none' ? '' : 'none';
-                    d.classList.toggle('active', rgbToHex(dColor) === cur.toUpperCase());
+        };
-                });
+        window._cpPick = window._cpPick || function(id, hex) {
-            }
+            var s = document.getElementById('cp-swatch-' + id);
-        }
+            if (s) s.style.background = hex;
+            var n = document.getElementById('cp-native-' + id);
+            if (n) n.value = hex;
+            var p = document.getElementById('cp-pop-' + id);
+            if (p) p.style.display = 'none';
+            if (window._cpCallbacks[id]) window._cpCallbacks[id](hex);
+        };
 
-        function rgbToHex(rgb) {
+        // Close all color pickers on outside click
-            if (rgb.startsWith('#')) return rgb.toUpperCase();
+        document.addEventListener('click', function() {
-            const m = rgb.match(/\d+/g);
+            document.querySelectorAll('.color-picker-popover').forEach(function(p) { p.style.display = 'none'; });
-            if (!m) return rgb;
-            return '#' + m.slice(0,3).map(n => parseInt(n).toString(16).padStart(2,'0')).join('').toUpperCase();
-        }
-
-        function pickAccent(hex) {
-            applyAccentColor(hex);
-            document.getElementById('accent-popover').style.display = 'none';
-        }
-
-        // Close popover on outside click
-        document.addEventListener('click', function(e) {
-            const wrapper = document.querySelector('.accent-wrapper');
-            if (wrapper && !wrapper.contains(e.target)) {
-                document.getElementById('accent-popover').style.display = 'none';
-            }
         });
 
         const savedAccent = localStorage.getItem('accentColor');