Add visual IconSelect grid for filter type picker in PP template editor

Replace plain filter type dropdown with icon grid showing each filter
with its icon and description. Selecting a filter immediately adds it
to the template (no separate "+" click needed).

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

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

@@ -50,6 +50,7 @@ import {
 import { wrapCard } from '../core/card-colors.js';
 import { IconSelect } from '../core/icon-select.js';
 import { EntitySelect } from '../core/entity-palette.js';
+import * as P from '../core/icon-paths.js';
 
 // ── Card section instances ──
 const csRawStreams = new CardSection('raw-streams', { titleKey: 'streams.section.streams', gridClass: 'templates-grid', addCardOnclick: "showAddStreamModal('raw')", keyAttr: 'data-stream-id' });
@@ -2005,12 +2006,49 @@ function _getFilterName(filterId) {
     return translated;
 }
 
+let _filterIconSelect = null;
+
+const _FILTER_ICONS = {
+    brightness:          P.sunDim,
+    saturation:          P.palette,
+    gamma:               P.sun,
+    downscaler:          P.monitor,
+    pixelate:            P.layoutDashboard,
+    auto_crop:           P.target,
+    flip:                P.rotateCw,
+    color_correction:    P.palette,
+    filter_template:     P.fileText,
+    frame_interpolation: P.fastForward,
+    noise_gate:          P.volume2,
+    palette_quantization: P.sparkles,
+};
+
 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') },
+    ];
     for (const f of _availableFilters) {
         const name = _getFilterName(f.filter_id);
         select.innerHTML += `<option value="${f.filter_id}">${name}</option>`;
+        const pathData = _FILTER_ICONS[f.filter_id] || P.wrench;
+        items.push({
+            value: f.filter_id,
+            icon: `<svg class="icon" viewBox="0 0 24 24">${pathData}</svg>`,
+            label: name,
+            desc: t(`filters.${f.filter_id}.desc`),
+        });
+    }
+    if (_filterIconSelect) {
+        _filterIconSelect.updateItems(items);
+    } else if (items.length > 0) {
+        _filterIconSelect = new IconSelect({
+            target: select,
+            items,
+            columns: 2,
+            onChange: () => addFilterFromSelect(),
+        });
     }
 }
 
@@ -2285,6 +2323,7 @@ export function addFilterFromSelect() {
 
     _modalFilters.push({ filter_id: filterId, options, _expanded: true });
     select.value = '';
+    if (_filterIconSelect) _filterIconSelect.setValue('');
     renderModalFilterList();
     _autoGeneratePPTemplateName();
 }