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}`,
     });
 }
 

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

@@ -913,6 +913,10 @@
   "color_strip.notification.endpoint.hint": "Use this URL to trigger notifications from external systems. POST with optional JSON body: {\"app\": \"AppName\", \"color\": \"#FF0000\"}.",
   "color_strip.notification.save_first": "Save the source first to see the webhook endpoint URL.",
   "color_strip.notification.app_count": "apps",
+  "color_strip.notification.test": "Test notification",
+  "color_strip.notification.test.ok": "Notification sent",
+  "color_strip.notification.test.no_streams": "No running streams for this source",
+  "color_strip.notification.test.error": "Failed to send notification",
   "color_strip.type.daylight": "Daylight Cycle",
   "color_strip.type.daylight.desc": "Simulates natural daylight over 24 hours",
   "color_strip.type.daylight.hint": "Simulates the sun's color temperature throughout a 24-hour day/night cycle — from warm sunrise to cool daylight to warm sunset and dim night.",

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

@@ -913,6 +913,10 @@
   "color_strip.notification.endpoint.hint": "URL для запуска уведомлений из внешних систем. POST с JSON телом: {\"app\": \"AppName\", \"color\": \"#FF0000\"}.",
   "color_strip.notification.save_first": "Сначала сохраните источник, чтобы увидеть URL вебхука.",
   "color_strip.notification.app_count": "прилож.",
+  "color_strip.notification.test": "Тестовое уведомление",
+  "color_strip.notification.test.ok": "Уведомление отправлено",
+  "color_strip.notification.test.no_streams": "Нет запущенных потоков для этого источника",
+  "color_strip.notification.test.error": "Не удалось отправить уведомление",
   "color_strip.type.daylight": "Дневной цикл",
   "color_strip.type.daylight.desc": "Имитация естественного дневного света за 24 часа",
   "color_strip.type.daylight.hint": "Имитирует цветовую температуру солнца в течение суток — от тёплого рассвета до прохладного дневного света, заката и ночи.",

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

@@ -913,6 +913,10 @@
   "color_strip.notification.endpoint.hint": "使用此 URL 从外部系统触发通知。POST 请求可选 JSON：{\"app\": \"AppName\", \"color\": \"#FF0000\"}。",
   "color_strip.notification.save_first": "请先保存源以查看 Webhook 端点 URL。",
   "color_strip.notification.app_count": "个应用",
+  "color_strip.notification.test": "测试通知",
+  "color_strip.notification.test.ok": "通知已发送",
+  "color_strip.notification.test.no_streams": "此源没有运行中的流",
+  "color_strip.notification.test.error": "发送通知失败",
   "color_strip.type.daylight": "日光循环",
   "color_strip.type.daylight.desc": "模拟24小时自然日光变化",
   "color_strip.type.daylight.hint": "模拟太阳在24小时内的色温变化——从温暖的日出到冷白的日光，再到温暖的日落和昏暗的夜晚。",