Add IconSelect for filter types, audio modes, engine descriptions; fix scroll flash

- Filter type picker: IconSelect with 3-column grid, auto-add on select, removed redundant + button
- Audio mode picker: IconSelect with SVG visualizations for RMS/Peak/Beat
- Capture engine grid: added per-engine icons and localized descriptions
- Fixed scroll flash during icon grid open animation (settled class after transitionend)

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

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

@@ -303,7 +303,7 @@ async function loadAvailableEngines() {
         // Update icon-grid selector with dynamic engine list
         const items = availableEngines
             .filter(e => e.available)
-            .map(e => ({ value: e.type, icon: getEngineIcon(e.type), label: e.name, desc: '' }));
+            .map(e => ({ value: e.type, icon: getEngineIcon(e.type), label: e.name, desc: t(`templates.engine.${e.type}.desc`) }));
         if (_engineIconSelect) { _engineIconSelect.updateItems(items); }
         else { _engineIconSelect = new IconSelect({ target: select, items, columns: 2 }); }
         _engineIconSelect.setValue(select.value);
@@ -2026,9 +2026,7 @@ const _FILTER_ICONS = {
 function _populateFilterSelect() {
     const select = document.getElementById('pp-add-filter-select');
     select.innerHTML = `<option value="">${t('filters.select_type')}</option>`;
-    const items = [
-        { value: '', icon: `<svg class="icon" viewBox="0 0 24 24">${P.wrench}</svg>`, label: t('filters.select_type') },
-    ];
+    const items = [];
     for (const f of _availableFilters) {
         const name = _getFilterName(f.filter_id);
         select.innerHTML += `<option value="${f.filter_id}">${name}</option>`;
@@ -2046,7 +2044,8 @@ function _populateFilterSelect() {
         _filterIconSelect = new IconSelect({
             target: select,
             items,
-            columns: 2,
+            columns: 3,
+            placeholder: t('filters.select_type'),
             onChange: () => addFilterFromSelect(),
         });
     }

server/src/wled_controller/static/js/features/value-sources.js

@@ -100,6 +100,28 @@ function _ensureWaveformIconSelect() {
     _waveformIconSelect = new IconSelect({ target: sel, items, columns: 4 });
 }
 
+/* ── Audio mode icon-grid selector ────────────────────────────── */
+
+const _AUDIO_MODE_SVG = {
+    rms:  '<svg viewBox="0 0 60 24" width="60" height="24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="8" width="12" height="12" rx="2" fill="currentColor" opacity="0.3"/><rect x="24" y="4" width="12" height="16" rx="2" fill="currentColor" opacity="0.5"/><rect x="44" y="6" width="12" height="14" rx="2" fill="currentColor" opacity="0.4"/></svg>',
+    peak: '<svg viewBox="0 0 60 24" width="60" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20 L10 14 L18 16 L26 4 L34 12 L42 18 L50 10 L58 20"/><circle cx="26" cy="4" r="2" fill="currentColor"/></svg>',
+    beat: '<svg viewBox="0 0 60 24" width="60" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M0 12 L12 12 L16 2 L22 22 L28 6 L32 12 L60 12"/></svg>',
+};
+
+let _audioModeIconSelect = null;
+
+function _ensureAudioModeIconSelect() {
+    const sel = document.getElementById('value-source-mode');
+    if (!sel) return;
+    const items = [
+        { value: 'rms',  icon: _AUDIO_MODE_SVG.rms,  label: t('value_source.mode.rms'),  desc: t('value_source.mode.rms.desc') },
+        { value: 'peak', icon: _AUDIO_MODE_SVG.peak, label: t('value_source.mode.peak'), desc: t('value_source.mode.peak.desc') },
+        { value: 'beat', icon: _AUDIO_MODE_SVG.beat, label: t('value_source.mode.beat'), desc: t('value_source.mode.beat.desc') },
+    ];
+    if (_audioModeIconSelect) { _audioModeIconSelect.updateItems(items); return; }
+    _audioModeIconSelect = new IconSelect({ target: sel, items, columns: 3 });
+}
+
 function _ensureVSTypeIconSelect() {
     const sel = document.getElementById('value-source-type');
     if (!sel) return;
@@ -139,6 +161,7 @@ export async function showValueSourceModal(editData) {
         } else if (editData.source_type === 'audio') {
             _populateAudioSourceDropdown(editData.audio_source_id || '');
             document.getElementById('value-source-mode').value = editData.mode || 'rms';
+            if (_audioModeIconSelect) _audioModeIconSelect.setValue(editData.mode || 'rms');
             document.getElementById('value-source-auto-gain').checked = !!editData.auto_gain;
             _setSlider('value-source-sensitivity', editData.sensitivity ?? 1.0);
             _setSlider('value-source-smoothing', editData.smoothing ?? 0.3);
@@ -168,6 +191,7 @@ export async function showValueSourceModal(editData) {
         document.getElementById('value-source-waveform').value = 'sine';
         _populateAudioSourceDropdown('');
         document.getElementById('value-source-mode').value = 'rms';
+        if (_audioModeIconSelect) _audioModeIconSelect.setValue('rms');
         document.getElementById('value-source-auto-gain').checked = false;
         _setSlider('value-source-sensitivity', 1.0);
         _setSlider('value-source-smoothing', 0.3);
@@ -198,6 +222,7 @@ export function onValueSourceTypeChange() {
     document.getElementById('value-source-animated-section').style.display = type === 'animated' ? '' : 'none';
     if (type === 'animated') _ensureWaveformIconSelect();
     document.getElementById('value-source-audio-section').style.display = type === 'audio' ? '' : 'none';
+    if (type === 'audio') _ensureAudioModeIconSelect();
     document.getElementById('value-source-adaptive-time-section').style.display = type === 'adaptive_time' ? '' : 'none';
     document.getElementById('value-source-adaptive-scene-section').style.display = type === 'adaptive_scene' ? '' : 'none';
     document.getElementById('value-source-adaptive-range-section').style.display =