Add test button to notification CSS cards and fix header stability

- Bell icon button on notification source cards triggers POST /notify
- Shows success/warning/error toast based on response
- Fix header shifting when sticky by moving it outside .container
- i18n keys added for en, ru, zh

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

server/src/wled_controller/static/js/app.js

@@ -119,6 +119,7 @@ import {
     copyEndpointUrl,
     onNotificationFilterModeChange,
     notificationAddAppColor, notificationRemoveAppColor,
+    testNotification,
 } from './features/color-strips.js';
 
 // Layer 5: audio sources
@@ -391,6 +392,7 @@ Object.assign(window, {
     copyEndpointUrl,
     onNotificationFilterModeChange,
     notificationAddAppColor, notificationRemoveAppColor,
+    testNotification,
 
     // audio sources
     showAudioSourceModal,

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

@@ -856,6 +856,25 @@ export function notificationRemoveAppColor(i) {
     _notificationAppColorsRenderList();
 }
 
+export async function testNotification(sourceId) {
+    try {
+        const resp = await fetchWithAuth(`/color-strip-sources/${sourceId}/notify`, { method: 'POST' });
+        if (!resp.ok) {
+            const err = await resp.json().catch(() => ({}));
+            showToast(err.detail || t('color_strip.notification.test.error'), 'error');
+            return;
+        }
+        const data = await resp.json();
+        if (data.streams_notified > 0) {
+            showToast(t('color_strip.notification.test.ok'), 'success');
+        } else {
+            showToast(t('color_strip.notification.test.no_streams'), 'warning');
+        }
+    } catch {
+        showToast(t('color_strip.notification.test.error'), 'error');
+    }
+}
+
 function _notificationAppColorsSyncFromDom() {
     const list = document.getElementById('notification-app-colors-list');
     if (!list) return;
@@ -1116,6 +1135,9 @@ export function createColorStripCard(source, pictureSourceMap, audioSourceMap) {
     const calibrationBtn = isPictureKind
         ? `<button class="btn btn-icon btn-secondary" onclick="${isPictureAdvanced ? `showAdvancedCalibration('${source.id}')` : `showCSSCalibration('${source.id}')`}" title="${t('calibration.title')}">${ICON_CALIBRATION}</button>`
         : '';
+    const testNotifyBtn = isNotification
+        ? `<button class="btn btn-icon btn-secondary" onclick="event.stopPropagation(); testNotification('${source.id}')" title="${t('color_strip.notification.test')}">${ICON_BELL}</button>`
+        : '';
 
     return wrapCard({
         dataAttr: 'data-css-id',
@@ -1135,7 +1157,7 @@ export function createColorStripCard(source, pictureSourceMap, audioSourceMap) {
         actions: `
                 <button class="btn btn-icon btn-secondary" onclick="cloneColorStrip('${source.id}')" title="${t('common.clone')}">${ICON_CLONE}</button>
                 <button class="btn btn-icon btn-secondary" onclick="showCSSEditor('${source.id}')" title="${t('common.edit')}">${ICON_EDIT}</button>
-                ${calibrationBtn}`,
+                ${calibrationBtn}${testNotifyBtn}`,
     });
 }