${cardsHtml}
@@ -96,15 +99,23 @@ export class CardSection {
if (!header || !content) return;
header.addEventListener('mousedown', (e) => {
- if (e.target.closest('.cs-filter')) return;
+ if (e.target.closest('.cs-filter-wrap')) return;
this._toggleCollapse(header, content);
});
if (filterInput) {
+ const resetBtn = document.querySelector(`[data-cs-filter-reset="${this.sectionKey}"]`);
+ const updateResetVisibility = () => {
+ if (resetBtn) resetBtn.style.display = filterInput.value ? '' : 'none';
+ };
+
filterInput.addEventListener('mousedown', (e) => e.stopPropagation());
+ if (resetBtn) resetBtn.addEventListener('mousedown', (e) => e.stopPropagation());
+
let timer = null;
filterInput.addEventListener('input', () => {
clearTimeout(timer);
+ updateResetVisibility();
timer = setTimeout(() => {
this._filterValue = filterInput.value.trim();
this._applyFilter(content, this._filterValue);
@@ -117,15 +128,28 @@ export class CardSection {
filterInput.value = '';
this._filterValue = '';
this._applyFilter(content, '');
+ updateResetVisibility();
}
}
});
+ if (resetBtn) {
+ resetBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ filterInput.value = '';
+ this._filterValue = '';
+ this._applyFilter(content, '');
+ updateResetVisibility();
+ filterInput.focus();
+ });
+ }
+
// Restore filter from before re-render
if (this._filterValue) {
filterInput.value = this._filterValue;
this._applyFilter(content, this._filterValue);
}
+ updateResetVisibility();
}
// Tag card elements with their source HTML for future reconciliation
@@ -205,6 +229,53 @@ export class CardSection {
for (const s of sections) s.bind();
}
+ /** Expand all given sections. */
+ static expandAll(sections) {
+ const map = _getCollapsedMap();
+ for (const s of sections) {
+ map[s.sectionKey] = false;
+ const content = document.querySelector(`[data-cs-content="${s.sectionKey}"]`);
+ const header = document.querySelector(`[data-cs-toggle="${s.sectionKey}"]`);
+ if (content) content.style.display = '';
+ if (header) {
+ const chevron = header.querySelector('.cs-chevron');
+ if (chevron) chevron.textContent = '\u25BC';
+ }
+ }
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(map));
+ }
+
+ /** Collapse all given sections. */
+ static collapseAll(sections) {
+ const map = _getCollapsedMap();
+ for (const s of sections) {
+ map[s.sectionKey] = true;
+ const content = document.querySelector(`[data-cs-content="${s.sectionKey}"]`);
+ const header = document.querySelector(`[data-cs-toggle="${s.sectionKey}"]`);
+ if (content) content.style.display = 'none';
+ if (header) {
+ const chevron = header.querySelector('.cs-chevron');
+ if (chevron) chevron.textContent = '\u25B6';
+ }
+ }
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(map));
+ }
+
+ /** Programmatically expand this section if collapsed. */
+ expand() {
+ const header = document.querySelector(`[data-cs-toggle="${this.sectionKey}"]`);
+ const content = document.querySelector(`[data-cs-content="${this.sectionKey}"]`);
+ if (!header || !content) return;
+ const map = _getCollapsedMap();
+ if (map[this.sectionKey]) {
+ map[this.sectionKey] = false;
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(map));
+ content.style.display = '';
+ const chevron = header.querySelector('.cs-chevron');
+ if (chevron) chevron.textContent = '\u25BC';
+ }
+ }
+
// ── private ──
_tagCards(content) {
diff --git a/server/src/wled_controller/static/js/core/command-palette.js b/server/src/wled_controller/static/js/core/command-palette.js
new file mode 100644
index 0000000..f89085c
--- /dev/null
+++ b/server/src/wled_controller/static/js/core/command-palette.js
@@ -0,0 +1,294 @@
+/**
+ * Command Palette — global search & navigation (Ctrl+K / Cmd+K).
+ */
+
+import { fetchWithAuth } from './api.js';
+import { t } from './i18n.js';
+import { navigateToCard } from './navigation.js';
+
+let _isOpen = false;
+let _items = [];
+let _filtered = [];
+let _selectedIdx = 0;
+let _loading = false;
+
+// ─── Entity definitions: endpoint → palette items ───
+
+const _streamSubTab = {
+ raw: { sub: 'raw', section: 'raw-streams' },
+ processed: { sub: 'processed', section: 'proc-streams' },
+ static_image: { sub: 'static_image', section: 'static-streams' },
+};
+
+function _mapEntities(data, mapFn) {
+ if (Array.isArray(data)) return data.map(mapFn).filter(Boolean);
+ return [];
+}
+
+function _buildItems(results) {
+ const [devices, targets, css, profiles, capTempl, ppTempl, patTempl, audioSrc, valSrc, streams] = results;
+ const items = [];
+
+ _mapEntities(devices, d => items.push({
+ name: d.name, detail: d.device_type, group: 'devices', icon: '🖥️',
+ nav: ['targets', 'led', 'led-devices', 'data-device-id', d.id],
+ }));
+
+ _mapEntities(targets, tgt => {
+ if (tgt.target_type === 'key_colors') {
+ items.push({
+ name: tgt.name, detail: 'key_colors', group: 'kc_targets', icon: '🎨',
+ nav: ['targets', 'key_colors', 'kc-targets', 'data-kc-target-id', tgt.id],
+ });
+ } else {
+ items.push({
+ name: tgt.name, detail: tgt.target_type, group: 'targets', icon: '⚡',
+ nav: ['targets', 'led', 'led-targets', 'data-target-id', tgt.id],
+ });
+ }
+ });
+
+ _mapEntities(css, c => items.push({
+ name: c.name, detail: c.css_type || c.source_type, group: 'css', icon: '🎨',
+ nav: ['targets', 'led', 'led-css', 'data-css-id', c.id],
+ }));
+
+ _mapEntities(profiles, p => items.push({
+ name: p.name, detail: p.enabled ? 'enabled' : '', group: 'profiles', icon: '📋',
+ nav: ['profiles', null, 'profiles', 'data-profile-id', p.id],
+ }));
+
+ _mapEntities(capTempl, ct => items.push({
+ name: ct.name, detail: ct.engine_type, group: 'capture_templates', icon: '📷',
+ nav: ['streams', 'raw', 'raw-templates', 'data-template-id', ct.id],
+ }));
+
+ _mapEntities(ppTempl, pp => items.push({
+ name: pp.name, detail: '', group: 'pp_templates', icon: '🔧',
+ nav: ['streams', 'processed', 'proc-templates', 'data-pp-template-id', pp.id],
+ }));
+
+ _mapEntities(patTempl, pt => items.push({
+ name: pt.name, detail: '', group: 'pattern_templates', icon: '🧩',
+ nav: ['targets', 'key_colors', 'kc-patterns', 'data-pattern-template-id', pt.id],
+ }));
+
+ _mapEntities(audioSrc, a => {
+ const section = a.source_type === 'mono' ? 'audio-mono' : 'audio-multi';
+ items.push({
+ name: a.name, detail: a.source_type, group: 'audio', icon: '🎵',
+ nav: ['streams', 'audio', section, 'data-id', a.id],
+ });
+ });
+
+ _mapEntities(valSrc, v => items.push({
+ name: v.name, detail: v.source_type, group: 'value', icon: '🔢',
+ nav: ['streams', 'value', 'value-sources', 'data-id', v.id],
+ }));
+
+ _mapEntities(streams, s => {
+ const mapping = _streamSubTab[s.stream_type] || _streamSubTab.raw;
+ const icon = s.stream_type === 'processed' ? '🎞️' : s.stream_type === 'static_image' ? '🖼️' : '🖥️';
+ items.push({
+ name: s.name, detail: s.stream_type, group: 'streams', icon,
+ nav: ['streams', mapping.sub, mapping.section, 'data-stream-id', s.id],
+ });
+ });
+
+ return items;
+}
+
+// Maps endpoint → response key that holds the array
+const _responseKeys = [
+ ['/devices', 'devices'],
+ ['/picture-targets', 'targets'],
+ ['/color-strip-sources', 'sources'],
+ ['/profiles', 'profiles'],
+ ['/capture-templates', 'templates'],
+ ['/postprocessing-templates','templates'],
+ ['/pattern-templates', 'templates'],
+ ['/audio-sources', 'sources'],
+ ['/value-sources', 'sources'],
+ ['/picture-sources', 'streams'],
+];
+
+async function _fetchAllEntities() {
+ const results = await Promise.all(
+ _responseKeys.map(([ep, key]) =>
+ fetchWithAuth(ep, { retry: false, timeout: 5000 })
+ .then(r => r.ok ? r.json() : {})
+ .then(data => data[key] || [])
+ .catch(() => []))
+ );
+ return _buildItems(results);
+}
+
+// ─── Filtering ───
+
+function _filterItems(query) {
+ if (!query) return _items;
+ const lower = query.toLowerCase();
+ const terms = lower.split(/\s+/).filter(Boolean);
+ return _items.filter(item => {
+ const text = `${item.name} ${item.detail} ${t('search.group.' + item.group)}`.toLowerCase();
+ return terms.every(term => text.includes(term));
+ });
+}
+
+// ─── Group ordering ───
+
+const _groupOrder = [
+ 'devices', 'targets', 'kc_targets', 'css', 'profiles',
+ 'streams', 'capture_templates', 'pp_templates', 'pattern_templates',
+ 'audio', 'value',
+];
+
+// ─── Rendering ───
+
+function _render() {
+ const results = document.getElementById('cp-results');
+ if (!results) return;
+
+ if (_loading) {
+ results.innerHTML = `
${t('search.loading')}
`;
+ return;
+ }
+
+ if (_filtered.length === 0) {
+ results.innerHTML = `
${t('search.no_results')}
`;
+ return;
+ }
+
+ // Group items preserving order
+ const grouped = new Map();
+ for (const g of _groupOrder) grouped.set(g, []);
+ for (const item of _filtered) {
+ if (!grouped.has(item.group)) grouped.set(item.group, []);
+ grouped.get(item.group).push(item);
+ }
+
+ let html = '';
+ let idx = 0;
+ for (const [group, items] of grouped) {
+ if (items.length === 0) continue;
+ html += ``;
+ for (const item of items) {
+ const active = idx === _selectedIdx ? ' cp-active' : '';
+ html += `
` +
+ `${item.icon} ` +
+ `${_escHtml(item.name)} ` +
+ (item.detail ? `${_escHtml(item.detail)} ` : '') +
+ `
`;
+ idx++;
+ }
+ }
+ results.innerHTML = html;
+ _scrollActive(results);
+}
+
+function _scrollActive(container) {
+ const active = container.querySelector('.cp-active');
+ if (active) active.scrollIntoView({ block: 'nearest' });
+}
+
+function _escHtml(text) {
+ if (!text) return '';
+ const d = document.createElement('div');
+ d.textContent = text;
+ return d.innerHTML;
+}
+
+// ─── Open / Close ───
+
+export async function openCommandPalette() {
+ if (_isOpen) return;
+ _isOpen = true;
+ _selectedIdx = 0;
+
+ const overlay = document.getElementById('command-palette');
+ const input = document.getElementById('cp-input');
+ overlay.style.display = '';
+ input.value = '';
+ input.placeholder = t('search.placeholder');
+ _loading = true;
+ _render();
+ input.focus();
+
+ try {
+ _items = await _fetchAllEntities();
+ } catch {
+ _items = [];
+ }
+ _loading = false;
+ _filtered = _filterItems(input.value.trim());
+ _render();
+}
+
+export function closeCommandPalette() {
+ if (!_isOpen) return;
+ _isOpen = false;
+ const overlay = document.getElementById('command-palette');
+ overlay.style.display = 'none';
+ _items = [];
+ _filtered = [];
+}
+
+// ─── Event handlers ───
+
+function _onInput() {
+ const input = document.getElementById('cp-input');
+ _filtered = _filterItems(input.value.trim());
+ _selectedIdx = 0;
+ _render();
+}
+
+function _onKeydown(e) {
+ if (!_isOpen) return;
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ _selectedIdx = Math.min(_selectedIdx + 1, _filtered.length - 1);
+ _render();
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ _selectedIdx = Math.max(_selectedIdx - 1, 0);
+ _render();
+ } else if (e.key === 'Enter') {
+ e.preventDefault();
+ _selectCurrent();
+ } else if (e.key === 'Escape') {
+ e.preventDefault();
+ e.stopPropagation();
+ closeCommandPalette();
+ }
+}
+
+function _onClick(e) {
+ const row = e.target.closest('.cp-result');
+ if (row) {
+ _selectedIdx = parseInt(row.dataset.cpIdx, 10);
+ _selectCurrent();
+ return;
+ }
+ if (e.target.classList.contains('cp-backdrop')) {
+ closeCommandPalette();
+ }
+}
+
+function _selectCurrent() {
+ if (_selectedIdx < 0 || _selectedIdx >= _filtered.length) return;
+ const item = _filtered[_selectedIdx];
+ closeCommandPalette();
+ navigateToCard(...item.nav);
+}
+
+// ─── Initialization ───
+
+export function initCommandPalette() {
+ const overlay = document.getElementById('command-palette');
+ if (!overlay) return;
+
+ const input = document.getElementById('cp-input');
+ input.addEventListener('input', _onInput);
+ input.addEventListener('keydown', _onKeydown);
+ overlay.addEventListener('click', _onClick);
+}
diff --git a/server/src/wled_controller/static/js/core/navigation.js b/server/src/wled_controller/static/js/core/navigation.js
new file mode 100644
index 0000000..8b37a0b
--- /dev/null
+++ b/server/src/wled_controller/static/js/core/navigation.js
@@ -0,0 +1,66 @@
+/**
+ * Cross-entity navigation — navigate to a specific card on any tab/subtab.
+ */
+
+import { switchTab } from '../features/tabs.js';
+
+/**
+ * Navigate to a card on any tab/subtab, expanding the section and scrolling to it.
+ *
+ * @param {string} tab Main tab: 'dashboard' | 'profiles' | 'targets' | 'streams'
+ * @param {string|null} subTab Sub-tab key or null
+ * @param {string|null} sectionKey CardSection key to expand, or null
+ * @param {string} cardAttr Data attribute to find the card (e.g. 'data-device-id')
+ * @param {string} cardValue Value of the data attribute
+ */
+export function navigateToCard(tab, subTab, sectionKey, cardAttr, cardValue) {
+ // Push current location to history so browser back returns here
+ history.pushState(null, '', location.hash || '#');
+ switchTab(tab);
+
+ requestAnimationFrame(() => {
+ if (subTab) {
+ if (tab === 'targets' && typeof window.switchTargetSubTab === 'function') {
+ window.switchTargetSubTab(subTab);
+ } else if (tab === 'streams' && typeof window.switchStreamTab === 'function') {
+ window.switchStreamTab(subTab);
+ }
+ }
+
+ // Expand section if collapsed
+ if (sectionKey) {
+ const content = document.querySelector(`[data-cs-content="${sectionKey}"]`);
+ const header = document.querySelector(`[data-cs-toggle="${sectionKey}"]`);
+ if (content && content.style.display === 'none') {
+ content.style.display = '';
+ const chevron = header?.querySelector('.cs-chevron');
+ if (chevron) chevron.textContent = '\u25BC';
+ const map = JSON.parse(localStorage.getItem('sections_collapsed') || '{}');
+ map[sectionKey] = false;
+ localStorage.setItem('sections_collapsed', JSON.stringify(map));
+ }
+ }
+
+ // Wait for card to appear in DOM (tab data may load async)
+ _waitForCard(cardAttr, cardValue, 3000).then(card => {
+ if (!card) return;
+ card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ card.classList.add('card-highlight');
+ setTimeout(() => card.classList.remove('card-highlight'), 2000);
+ });
+ });
+}
+
+function _waitForCard(cardAttr, cardValue, timeout) {
+ return new Promise(resolve => {
+ const card = document.querySelector(`[${cardAttr}="${cardValue}"]`);
+ if (card) { resolve(card); return; }
+
+ const timer = setTimeout(() => { observer.disconnect(); resolve(null); }, timeout);
+ const observer = new MutationObserver(() => {
+ const el = document.querySelector(`[${cardAttr}="${cardValue}"]`);
+ if (el) { observer.disconnect(); clearTimeout(timer); resolve(el); }
+ });
+ observer.observe(document.body, { childList: true, subtree: true });
+ });
+}
diff --git a/server/src/wled_controller/static/js/features/dashboard.js b/server/src/wled_controller/static/js/features/dashboard.js
index 224bd1d..a3ae4c8 100644
--- a/server/src/wled_controller/static/js/features/dashboard.js
+++ b/server/src/wled_controller/static/js/features/dashboard.js
@@ -7,7 +7,7 @@ import { API_BASE, getHeaders, fetchWithAuth, escapeHtml } from '../core/api.js'
import { t } from '../core/i18n.js';
import { showToast, formatUptime } from '../core/ui.js';
import { renderPerfSection, initPerfCharts, startPerfPolling, stopPerfPolling } from './perf-charts.js';
-import { startAutoRefresh } from './tabs.js';
+import { startAutoRefresh, updateTabBadge } from './tabs.js';
const DASHBOARD_COLLAPSED_KEY = 'dashboard_collapsed';
const MAX_FPS_SAMPLES = 120;
@@ -338,6 +338,7 @@ export async function loadDashboard(forceFullRender = false) {
const running = enriched.filter(t => t.state && t.state.processing);
const stopped = enriched.filter(t => !t.state || !t.state.processing);
+ updateTabBadge('targets', running.length);
// Check if we can do an in-place metrics update (same targets, not first load)
const newRunningIds = running.map(t => t.id).sort().join(',');
@@ -365,6 +366,7 @@ export async function loadDashboard(forceFullRender = false) {
if (profiles.length > 0) {
const activeProfiles = profiles.filter(p => p.is_active);
const inactiveProfiles = profiles.filter(p => !p.is_active);
+ updateTabBadge('profiles', activeProfiles.length);
const profileItems = [...activeProfiles, ...inactiveProfiles].map(p => renderDashboardProfile(p)).join('');
dynamicHtml += `
diff --git a/server/src/wled_controller/static/js/features/kc-targets.js b/server/src/wled_controller/static/js/features/kc-targets.js
index c35d9bd..36ffcee 100644
--- a/server/src/wled_controller/static/js/features/kc-targets.js
+++ b/server/src/wled_controller/static/js/features/kc-targets.js
@@ -78,11 +78,11 @@ export function createKCTargetCard(target, sourceMap, patternTemplateMap, valueS
${isProcessing ? `
diff --git a/server/src/wled_controller/static/locales/en.json b/server/src/wled_controller/static/locales/en.json
index 2bd7758..a9a5992 100644
--- a/server/src/wled_controller/static/locales/en.json
+++ b/server/src/wled_controller/static/locales/en.json
@@ -253,6 +253,9 @@
"common.edit": "Edit",
"common.clone": "Clone",
"section.filter.placeholder": "Filter...",
+ "section.filter.reset": "Clear filter",
+ "section.expand_all": "Expand all sections",
+ "section.collapse_all": "Collapse all sections",
"streams.title": "\uD83D\uDCFA Sources",
"streams.description": "Sources define the capture pipeline. A raw source captures from a display using a capture template. A processed source applies postprocessing to another source. Assign sources to devices.",
"streams.group.raw": "Screen Capture",
@@ -849,5 +852,20 @@
"value_source.error.name_required": "Please enter a name",
"targets.brightness_vs": "Brightness Source:",
"targets.brightness_vs.hint": "Optional value source that dynamically controls brightness each frame (overrides device brightness)",
- "targets.brightness_vs.none": "None (device brightness)"
+ "targets.brightness_vs.none": "None (device brightness)",
+
+ "search.placeholder": "Search entities... (Ctrl+K)",
+ "search.loading": "Loading...",
+ "search.no_results": "No results found",
+ "search.group.devices": "Devices",
+ "search.group.targets": "LED Targets",
+ "search.group.kc_targets": "Key Colors Targets",
+ "search.group.css": "Color Strip Sources",
+ "search.group.profiles": "Profiles",
+ "search.group.streams": "Picture Streams",
+ "search.group.capture_templates": "Capture Templates",
+ "search.group.pp_templates": "Post-Processing Templates",
+ "search.group.pattern_templates": "Pattern Templates",
+ "search.group.audio": "Audio Sources",
+ "search.group.value": "Value Sources"
}
diff --git a/server/src/wled_controller/static/locales/ru.json b/server/src/wled_controller/static/locales/ru.json
index e70ea20..9809edf 100644
--- a/server/src/wled_controller/static/locales/ru.json
+++ b/server/src/wled_controller/static/locales/ru.json
@@ -253,6 +253,9 @@
"common.edit": "Редактировать",
"common.clone": "Клонировать",
"section.filter.placeholder": "Фильтр...",
+ "section.filter.reset": "Очистить фильтр",
+ "section.expand_all": "Развернуть все секции",
+ "section.collapse_all": "Свернуть все секции",
"streams.title": "\uD83D\uDCFA Источники",
"streams.description": "Источники определяют конвейер захвата. Сырой источник захватывает экран с помощью шаблона захвата. Обработанный источник применяет постобработку к другому источнику. Назначайте источники устройствам.",
"streams.group.raw": "Захват Экрана",
@@ -849,5 +852,20 @@
"value_source.error.name_required": "Введите название",
"targets.brightness_vs": "Источник яркости:",
"targets.brightness_vs.hint": "Необязательный источник значений для динамического управления яркостью каждый кадр (переопределяет яркость устройства)",
- "targets.brightness_vs.none": "Нет (яркость устройства)"
+ "targets.brightness_vs.none": "Нет (яркость устройства)",
+
+ "search.placeholder": "Поиск... (Ctrl+K)",
+ "search.loading": "Загрузка...",
+ "search.no_results": "Ничего не найдено",
+ "search.group.devices": "Устройства",
+ "search.group.targets": "LED-цели",
+ "search.group.kc_targets": "Цели Key Colors",
+ "search.group.css": "Источники цветных лент",
+ "search.group.profiles": "Профили",
+ "search.group.streams": "Потоки изображений",
+ "search.group.capture_templates": "Шаблоны захвата",
+ "search.group.pp_templates": "Шаблоны постобработки",
+ "search.group.pattern_templates": "Шаблоны паттернов",
+ "search.group.audio": "Аудиоисточники",
+ "search.group.value": "Источники значений"
}
diff --git a/server/src/wled_controller/templates/index.html b/server/src/wled_controller/templates/index.html
index 8186af9..aa44b9e 100644
--- a/server/src/wled_controller/templates/index.html
+++ b/server/src/wled_controller/templates/index.html
@@ -46,10 +46,10 @@
- 📊 Dashboard 📋 Profiles ⚡ Targets 📺 Sources 📊 Dashboard 📋 Profiles ⚡ Targets 📺 Sources
@@ -79,7 +79,8 @@