From be4c98b543055369ec7670ebd16cc66c10772787 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Wed, 25 Mar 2026 23:56:40 +0300
Subject: [PATCH] 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.
---
 .../static/js/core/filter-list.ts              |  4 ++++
 .../static/js/features/streams.ts              | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/server/src/wled_controller/static/js/core/filter-list.ts b/server/src/wled_controller/static/js/core/filter-list.ts
index e8c2f92..f4c5dec 100644
--- a/server/src/wled_controller/static/js/core/filter-list.ts
+++ b/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(', ');
             }
diff --git a/server/src/wled_controller/static/js/features/streams.ts b/server/src/wled_controller/static/js/features/streams.ts
index 32dbc82..54733a1 100644
--- a/server/src/wled_controller/static/js/features/streams.ts
+++ b/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({