fix: add missing os_listener toggle to notification CSS editor

The os_listener field existed in the backend model but was never
exposed in the UI. It defaulted to false, so OS notifications were
captured to history but never fired the visual effect. Now shows
a toggle at the top of the notification section, defaults to ON
for new sources.

server/src/wled_controller/static/js/features/color-strips-notification.ts

@@ -217,6 +217,7 @@ export function notificationGetAppColorsDict() {
 }
 
 export function loadNotificationState(css: any) {
+    (document.getElementById('css-editor-notification-os-listener') as HTMLInputElement).checked = !!css.os_listener;
     (document.getElementById('css-editor-notification-effect') as HTMLInputElement).value = css.notification_effect || 'flash';
     if (_notificationEffectIconSelect) _notificationEffectIconSelect.setValue(css.notification_effect || 'flash');
     const dur = css.duration_ms ?? 1500;
@@ -238,6 +239,7 @@ export function loadNotificationState(css: any) {
 }
 
 export function resetNotificationState() {
+    (document.getElementById('css-editor-notification-os-listener') as HTMLInputElement).checked = true;
     (document.getElementById('css-editor-notification-effect') as HTMLInputElement).value = 'flash';
     if (_notificationEffectIconSelect) _notificationEffectIconSelect.setValue('flash');
     (document.getElementById('css-editor-notification-duration') as HTMLInputElement).value = 1500 as any;

server/src/wled_controller/static/js/features/color-strips.ts

@@ -90,6 +90,7 @@ class CSSEditorModal extends Modal {
             audio_mirror: (document.getElementById('css-editor-audio-mirror') as HTMLInputElement).checked,
             api_input_fallback_color: (document.getElementById('css-editor-api-input-fallback-color') as HTMLInputElement).value,
             api_input_timeout: (document.getElementById('css-editor-api-input-timeout') as HTMLInputElement).value,
+            notification_os_listener: (document.getElementById('css-editor-notification-os-listener') as HTMLInputElement).checked,
             notification_effect: (document.getElementById('css-editor-notification-effect') as HTMLInputElement).value,
             notification_duration: (document.getElementById('css-editor-notification-duration') as HTMLInputElement).value,
             notification_default_color: (document.getElementById('css-editor-notification-default-color') as HTMLInputElement).value,
@@ -1444,6 +1445,7 @@ const _typeHandlers: Record<string, { load: (...args: any[]) => any; reset: (...
                 .split('\n').map(s => s.trim()).filter(Boolean);
             return {
                 name,
+                os_listener: (document.getElementById('css-editor-notification-os-listener') as HTMLInputElement).checked,
                 notification_effect: (document.getElementById('css-editor-notification-effect') as HTMLInputElement).value,
                 duration_ms: parseInt((document.getElementById('css-editor-notification-duration') as HTMLInputElement).value) || 1500,
                 default_color: (document.getElementById('css-editor-notification-default-color') as HTMLInputElement).value,

server/src/wled_controller/static/locales/en.json

@@ -1064,6 +1064,8 @@
     "color_strip.type.notification": "Notification",
     "color_strip.type.notification.desc": "One-shot effect on webhook trigger",
     "color_strip.type.notification.hint": "Fires a one-shot visual effect (flash, pulse, sweep) when triggered via a webhook. Designed for use as a composite layer over a persistent base source.",
+    "color_strip.notification.os_listener": "Listen to OS Notifications:",
+    "color_strip.notification.os_listener.hint": "When enabled, this source automatically fires when a desktop notification appears (Windows toast / Linux D-Bus). Requires the app to have notification access permission.",
     "color_strip.notification.effect": "Effect:",
     "color_strip.notification.effect.hint": "Visual effect when a notification fires. Flash fades linearly, Pulse uses a smooth bell curve, Sweep fills LEDs left-to-right then fades.",
     "color_strip.notification.effect.flash": "Flash",

server/src/wled_controller/static/locales/ru.json

@@ -1047,6 +1047,8 @@
     "color_strip.type.notification": "Уведомления",
     "color_strip.type.notification.desc": "Разовый эффект по вебхуку",
     "color_strip.type.notification.hint": "Вспышка, пульс или волна при срабатывании через вебхук. Предназначен для использования как слой в композитном источнике.",
+    "color_strip.notification.os_listener": "Слушать системные уведомления:",
+    "color_strip.notification.os_listener.hint": "Когда включено, источник автоматически срабатывает при появлении уведомления рабочего стола (Windows toast / Linux D-Bus). Требует разрешения на доступ к уведомлениям.",
     "color_strip.notification.effect": "Эффект:",
     "color_strip.notification.effect.hint": "Визуальный эффект при уведомлении. Вспышка — линейное затухание, Пульс — плавная волна, Волна — заполнение и затухание.",
     "color_strip.notification.effect.flash": "Вспышка",

server/src/wled_controller/static/locales/zh.json

@@ -1047,6 +1047,8 @@
     "color_strip.type.notification": "通知",
     "color_strip.type.notification.desc": "通过Webhook触发的一次性效果",
     "color_strip.type.notification.hint": "通过 Webhook 触发时显示一次性视觉效果（闪烁、脉冲、扫描）。设计为组合源中的叠加层。",
+    "color_strip.notification.os_listener": "监听系统通知：",
+    "color_strip.notification.os_listener.hint": "启用后，当桌面通知出现时（Windows toast / Linux D-Bus），此源会自动触发。需要应用具有通知访问权限。",
     "color_strip.notification.effect": "效果：",
     "color_strip.notification.effect.hint": "通知触发时的视觉效果。闪烁线性衰减，脉冲平滑钟形曲线，扫描从左到右填充后衰减。",
     "color_strip.notification.effect.flash": "闪烁",

server/src/wled_controller/templates/modals/css-editor.html

@@ -375,6 +375,18 @@
 
                 <!-- Notification-specific fields -->
                 <div id="css-editor-notification-section" style="display:none">
+                    <div class="form-group">
+                        <div class="label-row">
+                            <label for="css-editor-notification-os-listener" data-i18n="color_strip.notification.os_listener">Listen to OS Notifications:</label>
+                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
+                        </div>
+                        <small class="input-hint" style="display:none" data-i18n="color_strip.notification.os_listener.hint">When enabled, this source automatically fires when a desktop notification appears (Windows toast / Linux D-Bus). Requires the app to have notification access permission.</small>
+                        <label class="switch">
+                            <input type="checkbox" id="css-editor-notification-os-listener">
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+
                     <div class="form-group">
                         <div class="label-row">
                             <label for="css-editor-notification-effect" data-i18n="color_strip.notification.effect">Effect:</label>