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/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-value cpu" id="perf-cpu-value">-</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" 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-value ram" id="perf-ram-value">-</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" 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-value gpu" id="perf-gpu-value">-</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" 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.ram = _createChart('perf-chart-ram', '#4CAF50', 'rgba(76,175,80,0.15)');
-    _charts.gpu = _createChart('perf-chart-gpu', '#FF9800', 'rgba(255,152,0,0.15)');
+    _charts.cpu = _createChart('perf-chart-cpu', 'cpu');
+    _charts.ram = _createChart('perf-chart-ram', 'ram');
+    _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');