Add WebUI navigation improvements: keyboard shortcuts, hash routing, command palette, cross-entity links

- Keyboard shortcuts: Ctrl+1-4 for tab switching
- URL hash routing: #tab/subtab format with browser back/forward support
- Tab count badges: running targets and active profiles counts
- Cross-entity quick links: clickable references navigate to related cards
- Command palette (Ctrl+K): global search across all entities with keyboard navigation
- Expand/collapse all sections: buttons in sub-tab bars
- Sticky section headers: headers pin while scrolling long card grids
- Improved section filter: better styling with reset button

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

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

@@ -28,6 +28,7 @@ import { Modal } from '../core/modal.js';
 import { showToast, showConfirm, openLightbox, openFullImageLightbox, showOverlaySpinner, hideOverlaySpinner } from '../core/ui.js';
 import { openDisplayPicker, formatDisplayLabel } from './displays.js';
 import { CardSection } from '../core/card-sections.js';
+import { updateSubTabHash } from './tabs.js';
 import { createValueSourceCard } from './value-sources.js';
 
 // ── Card section instances ──
@@ -560,6 +561,25 @@ export function switchStreamTab(tabKey) {
         panel.classList.toggle('active', panel.id === `stream-tab-${tabKey}`)
     );
     localStorage.setItem('activeStreamTab', tabKey);
+    updateSubTabHash('streams', tabKey);
+}
+
+const _streamSectionMap = {
+    raw: [csRawStreams, csRawTemplates],
+    static_image: [csStaticStreams],
+    processed: [csProcStreams, csProcTemplates],
+    audio: [csAudioMulti, csAudioMono],
+    value: [csValueSources],
+};
+
+export function expandAllStreamSections() {
+    const activeTab = localStorage.getItem('activeStreamTab') || 'raw';
+    CardSection.expandAll(_streamSectionMap[activeTab] || []);
+}
+
+export function collapseAllStreamSections() {
+    const activeTab = localStorage.getItem('activeStreamTab') || 'raw';
+    CardSection.collapseAll(_streamSectionMap[activeTab] || []);
 }
 
 function renderPictureSourcesList(streams) {
@@ -580,19 +600,21 @@ function renderPictureSourcesList(streams) {
             detailsHtml = `<div class="stream-card-props">
                 <span class="stream-card-prop" title="${t('streams.display')}">🖥️ ${stream.display_index ?? 0}</span>
                 <span class="stream-card-prop" title="${t('streams.target_fps')}">⚡ ${stream.target_fps ?? 30}</span>
-                ${capTmplName ? `<span class="stream-card-prop" title="${t('streams.capture_template')}">📋 ${capTmplName}</span>` : ''}
+                ${capTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.capture_template')}" onclick="event.stopPropagation(); navigateToCard('streams','raw','raw-templates','data-id','${stream.capture_template_id}')">📋 ${capTmplName}</span>` : ''}
             </div>`;
         } else if (stream.stream_type === 'processed') {
             const sourceStream = _cachedStreams.find(s => s.id === stream.source_stream_id);
             const sourceName = sourceStream ? escapeHtml(sourceStream.name) : (stream.source_stream_id || '-');
+            const sourceSubTab = sourceStream ? (sourceStream.stream_type === 'static_image' ? 'static_image' : 'raw') : 'raw';
+            const sourceSection = sourceStream ? (sourceStream.stream_type === 'static_image' ? 'static-streams' : 'raw-streams') : 'raw-streams';
             let ppTmplName = '';
             if (stream.postprocessing_template_id) {
                 const ppTmpl = _cachedPPTemplates.find(p => p.id === stream.postprocessing_template_id);
                 if (ppTmpl) ppTmplName = escapeHtml(ppTmpl.name);
             }
             detailsHtml = `<div class="stream-card-props">
-                <span class="stream-card-prop" title="${t('streams.source')}">📺 ${sourceName}</span>
-                ${ppTmplName ? `<span class="stream-card-prop" title="${t('streams.pp_template')}">📋 ${ppTmplName}</span>` : ''}
+                <span class="stream-card-prop stream-card-link" title="${t('streams.source')}" onclick="event.stopPropagation(); navigateToCard('streams','${sourceSubTab}','${sourceSection}','data-stream-id','${stream.source_stream_id}')">📺 ${sourceName}</span>
+                ${ppTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.pp_template')}" onclick="event.stopPropagation(); navigateToCard('streams','processed','proc-templates','data-id','${stream.postprocessing_template_id}')">📋 ${ppTmplName}</span>` : ''}
             </div>`;
         } else if (stream.stream_type === 'static_image') {
             const src = stream.image_source || '';
@@ -695,7 +717,7 @@ function renderPictureSourcesList(streams) {
 
     const tabBar = `<div class="stream-tab-bar">${tabs.map(tab =>
         `<button class="stream-tab-btn${tab.key === activeTab ? ' active' : ''}" data-stream-tab="${tab.key}" onclick="switchStreamTab('${tab.key}')">${tab.icon} ${t(tab.titleKey)} <span class="stream-tab-count">${tab.count}</span></button>`
-    ).join('')}</div>`;
+    ).join('')}<span class="cs-expand-collapse-group"><button class="btn-expand-collapse" onclick="expandAllStreamSections()" title="${t('section.expand_all')}">⊞</button><button class="btn-expand-collapse" onclick="collapseAllStreamSections()" title="${t('section.collapse_all')}">⊟</button></span></div>`;
 
     const renderAudioSourceCard = (src) => {
         const isMono = src.source_type === 'mono';