fix: show template name instead of ID in filter list and card badges

Collapsed filter cards in the modal showed raw template IDs (e.g.
pp_cb72e227) instead of resolving select options to their labels.
Card filter chain badges now include the referenced template name.

server/src/wled_controller/static/js/core/filter-list.ts

@@ -138,6 +138,10 @@ export class FilterListManager {
             if (filterDef && !isExpanded) {
                 summary = filterDef.options_schema.map(opt => {
                     const val = fi.options[opt.key] !== undefined ? fi.options[opt.key] : opt.default;
+                    if (opt.type === 'select' && Array.isArray(opt.choices)) {
+                        const choice = opt.choices.find(c => c.value === val);
+                        if (choice) return choice.label;
+                    }
                     return val;
                 }).join(', ');
             }

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

@@ -409,7 +409,14 @@ function renderPictureSourcesList(streams: any) {
     const renderPPTemplateCard = (tmpl: any) => {
         let filterChainHtml = '';
         if (tmpl.filters && tmpl.filters.length > 0) {
-            const filterNames = tmpl.filters.map(fi => `<span class="filter-chain-item">${escapeHtml(_getFilterName(fi.filter_id))}</span>`);
+            const filterNames = tmpl.filters.map(fi => {
+                let label = _getFilterName(fi.filter_id);
+                if (fi.filter_id === 'filter_template' && fi.options?.template_id) {
+                    const ref = _cachedPPTemplates.find(p => p.id === fi.options.template_id);
+                    if (ref) label += `: ${ref.name}`;
+                }
+                return `<span class="filter-chain-item">${escapeHtml(label)}</span>`;
+            });
             filterChainHtml = `<div class="filter-chain">${filterNames.join('<span class="filter-chain-arrow">→</span>')}</div>`;
         }
         return wrapCard({
@@ -435,7 +442,14 @@ function renderPictureSourcesList(streams: any) {
     const renderCSPTCard = (tmpl: any) => {
         let filterChainHtml = '';
         if (tmpl.filters && tmpl.filters.length > 0) {
-            const filterNames = tmpl.filters.map(fi => `<span class="filter-chain-item">${escapeHtml(_getStripFilterName(fi.filter_id))}</span>`);
+            const filterNames = tmpl.filters.map(fi => {
+                let label = _getStripFilterName(fi.filter_id);
+                if (fi.filter_id === 'css_filter_template' && fi.options?.template_id) {
+                    const ref = _cachedCSPTemplates.find(p => p.id === fi.options.template_id);
+                    if (ref) label += `: ${ref.name}`;
+                }
+                return `<span class="filter-chain-item">${escapeHtml(label)}</span>`;
+            });
             filterChainHtml = `<div class="filter-chain">${filterNames.join('<span class="filter-chain-arrow">\u2192</span>')}</div>`;
         }
         return wrapCard({