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/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,
-.theme-toggle:focus-visible,
+.header-btn: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-value.ram { color: #4CAF50; }
-.perf-chart-value.gpu { color: #FF9800; }
+.perf-chart-label .color-picker-swatch {
+    width: 12px;
+    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-weight: 500;
+    font-size: 0.75rem;
+    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 */
-.search-toggle,
-.theme-toggle {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    padding: 4px 8px;
-    border-radius: 4px;
+/* Header toolbar buttons */
+.header-btn {
+    background: transparent;
+    border: none;
+    padding: 4px 6px;
+    border-radius: 5px;
     cursor: pointer;
-    font-size: 1rem;
-    transition: transform 0.2s;
-    margin-left: 0;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    transition: color 0.2s, background 0.2s;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
 }
 
-.search-toggle:hover,
-.theme-toggle:hover {
-    transform: scale(1.1);
+.header-btn:hover {
+    color: var(--text-color);
+    background: var(--bg-secondary);
 }
 
-/* Accent color picker */
-.accent-wrapper {
+/* Reusable color picker popover */
+.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;
     }
 }