From 40e951c882addfc647418d1ac7672c160f5f5802 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Tue, 24 Mar 2026 14:14:04 +0300
Subject: [PATCH] fix: gradient/effect/audio palette pickers not showing items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Populate <select> <option> elements from gradient entities before
creating IconSelect — the trigger display needs matching options to
sync correctly. Add _syncSelectOptions helper used by all three
palette pickers (gradient, effect, audio).
---
 .../static/js/features/color-strips.ts           | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/server/src/wled_controller/static/js/features/color-strips.ts b/server/src/wled_controller/static/js/features/color-strips.ts
index 8497e44..b559867 100644
--- a/server/src/wled_controller/static/js/features/color-strips.ts
+++ b/server/src/wled_controller/static/js/features/color-strips.ts
@@ -192,7 +192,7 @@ export function onCSSTypeChange() {
         _ensureAudioPaletteIconSelect();
         onAudioVizChange();
     }
-    if (type === 'gradient') { _ensureGradientPresetIconSelect(); _ensureGradientEasingIconSelect(); _renderCustomPresetList(); }
+    if (type === 'gradient') { _ensureGradientPresetIconSelect(); _ensureGradientEasingIconSelect(); }
     if (type === 'notification') {
         ensureNotificationEffectIconSelect();
         ensureNotificationFilterModeIconSelect();
@@ -399,6 +399,7 @@ function _ensureEffectPaletteIconSelect() {
     const sel = document.getElementById('css-editor-effect-palette') as HTMLSelectElement | null;
     if (!sel) return;
     const items = _buildGradientEntityItems();
+    _syncSelectOptions(sel, items);
     if (_effectPaletteIconSelect) { _effectPaletteIconSelect.updateItems(items); return; }
     _effectPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
 }
@@ -433,6 +434,7 @@ function _ensureAudioPaletteIconSelect() {
     const sel = document.getElementById('css-editor-audio-palette') as HTMLSelectElement | null;
     if (!sel) return;
     const items = _buildGradientEntityItems();
+    _syncSelectOptions(sel, items);
     if (_audioPaletteIconSelect) { _audioPaletteIconSelect.updateItems(items); return; }
     _audioPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
 }
@@ -456,10 +458,22 @@ function _buildGradientEntityItems() {
     }));
 }
 
+/** Sync <option> elements in a <select> from items array. */
+function _syncSelectOptions(sel: HTMLSelectElement, items: Array<{ value: string; label: string }>) {
+    sel.innerHTML = '';
+    for (const item of items) {
+        const opt = document.createElement('option');
+        opt.value = item.value;
+        opt.textContent = item.label;
+        sel.appendChild(opt);
+    }
+}
+
 function _ensureGradientPresetIconSelect() {
     const sel = document.getElementById('css-editor-gradient-preset') as HTMLSelectElement | null;
     if (!sel) return;
     const items = _buildGradientEntityItems();
+    _syncSelectOptions(sel, items);
     if (_gradientPresetIconSelect) { _gradientPresetIconSelect.updateItems(items); return; }
     _gradientPresetIconSelect = new IconSelect({ target: sel, items, columns: 3 });
 }