Move Scenes into Automations tab, smaller Capture button, scene crosslinks

- Merge Scenes tab into Automations tab as a second CardSection below automations
- Make dashboard Capture button match Stop All sizing
- Dashboard scene cards navigate to automations tab on click (crosslink)
- Add scene steps to automations tutorial
- Fix tour.tgt.devices to say "LED controllers" instead of "WLED controllers"
- Update command palette and navigation for new scene location

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

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

@@ -83,7 +83,6 @@ import {
     expandAllAutomationSections, collapseAllAutomationSections,
 } from './features/automations.js';
 import {
-    loadScenes, expandAllSceneSections, collapseAllSceneSections,
     openScenePresetCapture, editScenePreset, saveScenePreset, closeScenePresetEditor,
     activateScenePreset, recaptureScenePreset, deleteScenePreset,
 } from './features/scene-presets.js';
@@ -312,9 +311,6 @@ Object.assign(window, {
     collapseAllAutomationSections,
 
     // scene presets
-    loadScenes,
-    expandAllSceneSections,
-    collapseAllSceneSections,
     openScenePresetCapture,
     editScenePreset,
     saveScenePreset,
@@ -438,9 +434,9 @@ document.addEventListener('keydown', (e) => {
         return;
     }
 
-    // Tab shortcuts: Ctrl+1..5 (skip when typing in inputs)
+    // Tab shortcuts: Ctrl+1..4 (skip when typing in inputs)
     if (!inInput && e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
-        const tabMap = { '1': 'dashboard', '2': 'automations', '3': 'targets', '4': 'streams', '5': 'scenes' };
+        const tabMap = { '1': 'dashboard', '2': 'automations', '3': 'targets', '4': 'streams' };
         const tab = tabMap[e.key];
         if (tab) {
             e.preventDefault();

server/src/wled_controller/static/js/core/command-palette.js

@@ -101,7 +101,7 @@ function _buildItems(results) {
 
     _mapEntities(scenePresets, sp => items.push({
         name: sp.name, detail: sp.description || '', group: 'scenes', icon: ICON_SCENE,
-        nav: ['scenes', null, 'scenes', 'data-scene-id', sp.id],
+        nav: ['automations', null, 'scenes', 'data-scene-id', sp.id],
     }));
 
     return items;

server/src/wled_controller/static/js/core/navigation.js

@@ -90,7 +90,6 @@ function _triggerTabLoad(tab) {
     else if (tab === 'automations' && typeof window.loadAutomations === 'function') window.loadAutomations();
     else if (tab === 'streams' && typeof window.loadPictureSources === 'function') window.loadPictureSources();
     else if (tab === 'targets' && typeof window.loadTargetsTab === 'function') window.loadTargetsTab();
-    else if (tab === 'scenes' && typeof window.loadScenes === 'function') window.loadScenes();
 }
 
 function _showDimOverlay(duration) {

server/src/wled_controller/static/js/features/automations.js

@@ -10,6 +10,7 @@ import { Modal } from '../core/modal.js';
 import { CardSection } from '../core/card-sections.js';
 import { updateTabBadge } from './tabs.js';
 import { ICON_SETTINGS, ICON_START, ICON_PAUSE, ICON_CLOCK, ICON_AUTOMATION, ICON_HELP, ICON_OK, ICON_TIMER, ICON_MONITOR, ICON_RADIO, ICON_SCENE } from '../core/icons.js';
+import { csScenes, createSceneCard } from './scene-presets.js';
 
 // ===== Scene presets cache (shared by both selectors) =====
 let _scenesCache = [];
@@ -80,22 +81,25 @@ export async function loadAutomations() {
 }
 
 export function expandAllAutomationSections() {
-    CardSection.expandAll([csAutomations]);
+    CardSection.expandAll([csAutomations, csScenes]);
 }
 
 export function collapseAllAutomationSections() {
-    CardSection.collapseAll([csAutomations]);
+    CardSection.collapseAll([csAutomations, csScenes]);
 }
 
 function renderAutomations(automations, sceneMap) {
     const container = document.getElementById('automations-content');
 
-    const items = csAutomations.applySortOrder(automations.map(a => ({ key: a.id, html: createAutomationCard(a, sceneMap) })));
+    const autoItems = csAutomations.applySortOrder(automations.map(a => ({ key: a.id, html: createAutomationCard(a, sceneMap) })));
-    const toolbar = `<div class="stream-tab-bar"><span class="cs-expand-collapse-group"><button class="btn-expand-collapse" onclick="expandAllAutomationSections()" title="${t('section.expand_all')}">⊞</button><button class="btn-expand-collapse" onclick="collapseAllAutomationSections()" title="${t('section.collapse_all')}">⊟</button><button class="tutorial-trigger-btn" onclick="startAutomationsTutorial()" title="${t('tour.restart')}">${ICON_HELP}</button></span></div>`;
+    const sceneItems = csScenes.applySortOrder(_scenesCache.map(s => ({ key: s.id, html: createSceneCard(s) })));
-    container.innerHTML = toolbar + csAutomations.render(items);
-    csAutomations.bind();
 
-    // Localize data-i18n elements within the automations container only
+    const toolbar = `<div class="stream-tab-bar"><span class="cs-expand-collapse-group"><button class="btn-expand-collapse" onclick="expandAllAutomationSections()" title="${t('section.expand_all')}">⊞</button><button class="btn-expand-collapse" onclick="collapseAllAutomationSections()" title="${t('section.collapse_all')}">⊟</button><button class="tutorial-trigger-btn" onclick="startAutomationsTutorial()" title="${t('tour.restart')}">${ICON_HELP}</button></span></div>`;
+    container.innerHTML = toolbar + csAutomations.render(autoItems) + csScenes.render(sceneItems);
+    csAutomations.bind();
+    csScenes.bind();
+
+    // Localize data-i18n elements within the container
     container.querySelectorAll('[data-i18n]').forEach(el => {
         el.textContent = t(el.getAttribute('data-i18n'));
     });

server/src/wled_controller/static/js/features/scene-presets.js

@@ -1,22 +1,19 @@
 /**
  * Scene Presets — capture, activate, edit, delete system state snapshots.
- * Renders as a dedicated tab and also provides dashboard section rendering.
+ * Rendered as a CardSection inside the Automations tab, plus dashboard compact cards.
  */
 
-import { apiKey } from '../core/state.js';
 import { fetchWithAuth, escapeHtml } from '../core/api.js';
 import { t } from '../core/i18n.js';
 import { showToast, showConfirm } from '../core/ui.js';
 import { Modal } from '../core/modal.js';
 import { CardSection } from '../core/card-sections.js';
-import { updateTabBadge } from './tabs.js';
 import {
     ICON_SCENE, ICON_CAPTURE, ICON_START, ICON_EDIT, ICON_REFRESH, ICON_TARGET, ICON_SETTINGS,
 } from '../core/icons.js';
 
 let _presetsCache = [];
 let _editingId = null;
-let _scenesLoading = false;
 
 class ScenePresetEditorModal extends Modal {
     constructor() { super('scene-preset-editor-modal'); }
@@ -30,59 +27,14 @@ class ScenePresetEditorModal extends Modal {
 }
 const scenePresetModal = new ScenePresetEditorModal();
 
-const csScenes = new CardSection('scenes', {
+export const csScenes = new CardSection('scenes', {
     titleKey: 'scenes.title',
     gridClass: 'devices-grid',
     addCardOnclick: "openScenePresetCapture()",
     keyAttr: 'data-scene-id',
 });
 
-// Re-render scenes when language changes (only if tab is active)
+export function createSceneCard(preset) {
-document.addEventListener('languageChanged', () => {
-    if (apiKey && (localStorage.getItem('activeTab') || 'dashboard') === 'scenes') loadScenes();
-});
-
-// ===== Tab rendering =====
-
-export async function loadScenes() {
-    if (_scenesLoading) return;
-    _scenesLoading = true;
-
-    try {
-        const resp = await fetchWithAuth('/scene-presets');
-        if (!resp.ok) { _scenesLoading = false; return; }
-        const data = await resp.json();
-        _presetsCache = data.presets || [];
-    } catch {
-        _scenesLoading = false;
-        return;
-    }
-
-    const container = document.getElementById('scenes-content');
-    const items = csScenes.applySortOrder(_presetsCache.map(p => ({ key: p.id, html: _createSceneCard(p) })));
-
-    updateTabBadge('scenes', _presetsCache.length);
-
-    if (csScenes.isMounted()) {
-        csScenes.reconcile(items);
-    } else {
-        const toolbar = `<div class="stream-tab-bar"><span class="cs-expand-collapse-group"><button class="btn-expand-collapse" onclick="expandAllSceneSections()" title="${t('section.expand_all')}">⊞</button><button class="btn-expand-collapse" onclick="collapseAllSceneSections()" title="${t('section.collapse_all')}">⊟</button></span></div>`;
-        container.innerHTML = toolbar + csScenes.render(items);
-        csScenes.bind();
-    }
-
-    _scenesLoading = false;
-}
-
-export function expandAllSceneSections() {
-    CardSection.expandAll([csScenes]);
-}
-
-export function collapseAllSceneSections() {
-    CardSection.collapseAll([csScenes]);
-}
-
-function _createSceneCard(preset) {
     const targetCount = (preset.targets || []).length;
     const deviceCount = (preset.devices || []).length;
     const automationCount = (preset.automations || []).length;
@@ -133,7 +85,7 @@ export async function loadScenePresets() {
 export function renderScenePresetsSection(presets) {
     if (!presets || presets.length === 0) return '';
 
-    const captureBtn = `<button class="btn btn-sm btn-primary" onclick="event.stopPropagation(); openScenePresetCapture()" title="${t('scenes.capture')}">${ICON_CAPTURE} ${t('scenes.capture')}</button>`;
+    const captureBtn = `<button class="btn btn-sm btn-primary dashboard-stop-all" onclick="event.stopPropagation(); openScenePresetCapture()" title="${t('scenes.capture')}">${ICON_CAPTURE} ${t('scenes.capture')}</button>`;
     const cards = presets.map(p => _renderDashboardPresetCard(p)).join('');
 
     return { headerExtra: captureBtn, content: `<div class="dashboard-autostart-grid">${cards}</div>` };
@@ -151,8 +103,8 @@ function _renderDashboardPresetCard(preset) {
         automationCount > 0 ? `${automationCount} ${t('scenes.automations_count')}` : null,
     ].filter(Boolean).join(' \u00b7 ');
 
-    return `<div class="dashboard-target dashboard-scene-preset" data-scene-id="${preset.id}" style="${borderStyle}">
+    return `<div class="dashboard-target dashboard-scene-preset dashboard-card-link" data-scene-id="${preset.id}" style="${borderStyle}" onclick="if(!event.target.closest('button')){navigateToCard('automations',null,'scenes','data-scene-id','${preset.id}')}">
-        <div class="dashboard-target-info" onclick="activateScenePreset('${preset.id}')">
+        <div class="dashboard-target-info">
             <span class="dashboard-target-icon">${ICON_SCENE}</span>
             <div>
                 <div class="dashboard-target-name">${escapeHtml(preset.name)}</div>
@@ -327,9 +279,9 @@ export async function deleteScenePreset(presetId) {
 // ===== Helpers =====
 
 function _reloadScenesTab() {
-    // Reload the scenes tab if it's active
+    // Reload automations tab (which includes scenes section)
-    if ((localStorage.getItem('activeTab') || 'dashboard') === 'scenes') {
+    if ((localStorage.getItem('activeTab') || 'dashboard') === 'automations') {
-        loadScenes();
+        if (typeof window.loadAutomations === 'function') window.loadAutomations();
     }
     // Also refresh dashboard (scene presets section)
     if (typeof window.loadDashboard === 'function') window.loadDashboard(true);

server/src/wled_controller/static/js/features/tabs.js

@@ -60,8 +60,6 @@ export function switchTab(name, { updateHash = true, skipLoad = false } = {}) {
             if (typeof window.loadTargetsTab === 'function') window.loadTargetsTab();
         } else if (name === 'automations') {
             if (typeof window.loadAutomations === 'function') window.loadAutomations();
-        } else if (name === 'scenes') {
-            if (typeof window.loadScenes === 'function') window.loadScenes();
         }
     }
 }
@@ -82,8 +80,6 @@ export function initTabs() {
         saved = localStorage.getItem('activeTab');
     }
 
-    // Migrate legacy 'devices' tab to 'targets'
-    if (saved === 'devices') saved = 'targets';
     if (!saved || !document.getElementById(`tab-${saved}`)) saved = 'dashboard';
     switchTab(saved);
 }

server/src/wled_controller/static/js/features/tutorials.js

@@ -62,7 +62,10 @@ const sourcesTourSteps = [
 const automationsTutorialSteps = [
     { selector: '[data-card-section="automations"]', textKey: 'tour.auto.list', position: 'bottom' },
     { selector: '[data-cs-add="automations"]', textKey: 'tour.auto.add', position: 'bottom' },
-    { selector: '.card[data-automation-id]', textKey: 'tour.auto.card', position: 'bottom' }
+    { selector: '.card[data-automation-id]', textKey: 'tour.auto.card', position: 'bottom' },
+    { selector: '[data-card-section="scenes"]', textKey: 'tour.auto.scenes_list', position: 'bottom' },
+    { selector: '[data-cs-add="scenes"]', textKey: 'tour.auto.scenes_add', position: 'bottom' },
+    { selector: '.card[data-scene-id]', textKey: 'tour.auto.scenes_card', position: 'bottom' },
 ];
 
 const _fixedResolve = (step) => {

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

@@ -236,7 +236,7 @@
   "tour.dash.stopped": "Stopped targets — ready to start with one click.",
   "tour.dash.automations": "Automations — active automation status and quick enable/disable toggle.",
   "tour.tgt.led_tab": "LED tab — standard LED strip targets with device and color strip configuration.",
-  "tour.tgt.devices": "Devices — your WLED controllers discovered on the network.",
+  "tour.tgt.devices": "Devices — your LED controllers discovered on the network.",
   "tour.tgt.css": "Color Strips — define how screen regions map to LED segments.",
   "tour.tgt.targets": "LED Targets — combine a device, color strip, and capture source for streaming.",
   "tour.tgt.kc_tab": "Key Colors — alternative target type using color-matching instead of pixel mapping.",
@@ -249,6 +249,9 @@
   "tour.auto.list": "Automations — automate scene activation based on time, audio, or value conditions.",
   "tour.auto.add": "Click + to create a new automation with conditions and a scene to activate.",
   "tour.auto.card": "Each card shows automation status, conditions, and quick controls to edit or toggle.",
+  "tour.auto.scenes_list": "Scenes — saved system states that automations can activate or you can apply manually.",
+  "tour.auto.scenes_add": "Click + to capture the current system state as a new scene preset.",
+  "tour.auto.scenes_card": "Each scene card shows target/device counts. Click to edit, recapture, or activate.",
   "calibration.tutorial.start": "Start tutorial",
   "calibration.overlay_toggle": "Overlay",
   "calibration.start_position": "Starting Position:",

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

@@ -236,7 +236,7 @@
   "tour.dash.stopped": "Остановленные цели — готовы к запуску одним нажатием.",
   "tour.dash.automations": "Автоматизации — статус активных автоматизаций и быстрое включение/выключение.",
   "tour.tgt.led_tab": "LED — стандартные LED-цели с настройкой устройств и цветовых полос.",
-  "tour.tgt.devices": "Устройства — ваши WLED-контроллеры, найденные в сети.",
+  "tour.tgt.devices": "Устройства — ваши LED-контроллеры, найденные в сети.",
   "tour.tgt.css": "Цветовые полосы — определите, как области экрана соответствуют сегментам LED.",
   "tour.tgt.targets": "LED-цели — объедините устройство, цветовую полосу и источник захвата для стриминга.",
   "tour.tgt.kc_tab": "Key Colors — альтернативный тип цели с подбором цветов вместо пиксельного маппинга.",
@@ -249,6 +249,9 @@
   "tour.auto.list": "Автоматизации — автоматизируйте активацию сцен по времени, звуку или значениям.",
   "tour.auto.add": "Нажмите + для создания новой автоматизации с условиями и сценой для активации.",
   "tour.auto.card": "Каждая карточка показывает статус автоматизации, условия и кнопки управления.",
+  "tour.auto.scenes_list": "Сцены — сохранённые состояния системы, которые автоматизации могут активировать или вы можете применить вручную.",
+  "tour.auto.scenes_add": "Нажмите + для захвата текущего состояния системы как нового пресета сцены.",
+  "tour.auto.scenes_card": "Каждая карточка сцены показывает количество целей/устройств. Нажмите для редактирования, перезахвата или активации.",
   "calibration.tutorial.start": "Начать обучение",
   "calibration.overlay_toggle": "Оверлей",
   "calibration.start_position": "Начальная Позиция:",

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

@@ -236,7 +236,7 @@
   "tour.dash.stopped": "已停止的目标 — 一键启动。",
   "tour.dash.automations": "自动化 — 活动自动化状态和快速启用/禁用切换。",
   "tour.tgt.led_tab": "LED 标签 — 标准 LED 灯带目标，包含设备和色带配置。",
-  "tour.tgt.devices": "设备 — 在网络中发现的 WLED 控制器。",
+  "tour.tgt.devices": "设备 — 在网络中发现的 LED 控制器。",
   "tour.tgt.css": "色带 — 定义屏幕区域如何映射到 LED 段。",
   "tour.tgt.targets": "LED 目标 — 将设备、色带和捕获源组合进行流式传输。",
   "tour.tgt.kc_tab": "Key Colors — 使用颜色匹配代替像素映射的替代目标类型。",
@@ -249,6 +249,9 @@
   "tour.auto.list": "自动化 — 基于时间、音频或数值条件自动激活场景。",
   "tour.auto.add": "点击 + 创建包含条件和要激活场景的新自动化。",
   "tour.auto.card": "每张卡片显示自动化状态、条件和快速编辑/切换控制。",
+  "tour.auto.scenes_list": "场景 — 保存的系统状态，自动化可以激活或您可以手动应用。",
+  "tour.auto.scenes_add": "点击 + 将当前系统状态捕获为新的场景预设。",
+  "tour.auto.scenes_card": "每个场景卡片显示目标/设备数量。点击编辑、重新捕获或激活。",
   "calibration.tutorial.start": "开始教程",
   "calibration.overlay_toggle": "叠加层",
   "calibration.start_position": "起始位置：",

server/src/wled_controller/templates/index.html

@@ -85,7 +85,6 @@
                 <button class="tab-btn" data-tab="automations" onclick="switchTab('automations')" role="tab" aria-selected="false" aria-controls="tab-automations" id="tab-btn-automations" title="Ctrl+2"><svg class="icon" viewBox="0 0 24 24"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg> <span data-i18n="automations.title">Automations</span><span class="tab-badge" id="tab-badge-automations" style="display:none"></span></button>
                 <button class="tab-btn" data-tab="targets" onclick="switchTab('targets')" role="tab" aria-selected="false" aria-controls="tab-targets" id="tab-btn-targets" title="Ctrl+3"><svg class="icon" viewBox="0 0 24 24"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg> <span data-i18n="targets.title">Targets</span><span class="tab-badge" id="tab-badge-targets" style="display:none"></span></button>
                 <button class="tab-btn" data-tab="streams" onclick="switchTab('streams')" role="tab" aria-selected="false" aria-controls="tab-streams" id="tab-btn-streams" title="Ctrl+4"><svg class="icon" viewBox="0 0 24 24"><path d="m17 2-5 5-5-5"/><rect width="20" height="15" x="2" y="7" rx="2"/></svg> <span data-i18n="streams.title">Sources</span></button>
-                <button class="tab-btn" data-tab="scenes" onclick="switchTab('scenes')" role="tab" aria-selected="false" aria-controls="tab-scenes" id="tab-btn-scenes" title="Ctrl+5"><svg class="icon" viewBox="0 0 24 24"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg> <span data-i18n="scenes.title">Scenes</span><span class="tab-badge" id="tab-badge-scenes" style="display:none"></span></button>
             </div>
 
             <div class="tab-panel" id="tab-dashboard" role="tabpanel" aria-labelledby="tab-btn-dashboard">
@@ -112,11 +111,6 @@
                 </div>
             </div>
 
-            <div class="tab-panel" id="tab-scenes" role="tabpanel" aria-labelledby="tab-btn-scenes">
-                <div id="scenes-content">
-                    <div class="loading-spinner"></div>
-                </div>
-            </div>
 
             <script>
                 // Apply saved tab immediately during parse to prevent visible jump