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/targets.js

@@ -19,6 +19,7 @@ import { createKCTargetCard, connectKCWebSocket, disconnectKCWebSocket } from '.
 import { createColorStripCard } from './color-strips.js';
 import { getValueSourceIcon } from './value-sources.js';
 import { CardSection } from '../core/card-sections.js';
+import { updateSubTabHash, updateTabBadge } from './tabs.js';
 
 // createPatternTemplateCard is imported via window.* to avoid circular deps
 // (pattern-templates.js calls window.loadTargetsTab)
@@ -374,6 +375,23 @@ export function switchTargetSubTab(tabKey) {
         panel.classList.toggle('active', panel.id === `target-sub-tab-${tabKey}`)
     );
     localStorage.setItem('activeTargetSubTab', tabKey);
+    updateSubTabHash('targets', tabKey);
+}
+
+export function expandAllTargetSections() {
+    const activeSubTab = localStorage.getItem('activeTargetSubTab') || 'led';
+    const sections = activeSubTab === 'key_colors'
+        ? [csKCTargets, csPatternTemplates]
+        : [csDevices, csColorStrips, csLedTargets];
+    CardSection.expandAll(sections);
+}
+
+export function collapseAllTargetSections() {
+    const activeSubTab = localStorage.getItem('activeTargetSubTab') || 'led';
+    const sections = activeSubTab === 'key_colors'
+        ? [csKCTargets, csPatternTemplates]
+        : [csDevices, csColorStrips, csLedTargets];
+    CardSection.collapseAll(sections);
 }
 
 let _loadTargetsLock = false;
@@ -466,6 +484,10 @@ export async function loadTargetsTab() {
         const ledTargets = targetsWithState.filter(t => t.target_type === 'led' || t.target_type === 'wled');
         const kcTargets = targetsWithState.filter(t => t.target_type === 'key_colors');
 
+        // Update tab badge with running target count
+        const runningCount = targetsWithState.filter(t => t.state && t.state.processing).length;
+        updateTabBadge('targets', runningCount);
+
         // Backward compat: map stored "wled" sub-tab to "led"
         let activeSubTab = localStorage.getItem('activeTargetSubTab') || 'led';
         if (activeSubTab === 'wled') activeSubTab = 'led';
@@ -477,7 +499,7 @@ export async function loadTargetsTab() {
 
         const tabBar = `<div class="stream-tab-bar">${subTabs.map(tab =>
             `<button class="target-sub-tab-btn stream-tab-btn${tab.key === activeSubTab ? ' active' : ''}" data-target-sub-tab="${tab.key}" onclick="switchTargetSubTab('${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="expandAllTargetSections()" title="${t('section.expand_all')}">⊞</button><button class="btn-expand-collapse" onclick="collapseAllTargetSections()" title="${t('section.collapse_all')}">⊟</button></span></div>`;
 
         // Use window.createPatternTemplateCard to avoid circular import
         const createPatternTemplateCard = window.createPatternTemplateCard || (() => '');
@@ -676,10 +698,10 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap, valueSo
                 </div>
             </div>
             <div class="stream-card-props">
-                <span class="stream-card-prop" title="${t('targets.device')}">💡 ${escapeHtml(deviceName)}</span>
+                <span class="stream-card-prop stream-card-link" title="${t('targets.device')}" onclick="event.stopPropagation(); navigateToCard('targets','led','led-devices','data-device-id','${target.device_id}')">💡 ${escapeHtml(deviceName)}</span>
                 <span class="stream-card-prop" title="${t('targets.fps')}">⚡ ${target.fps || 30}</span>
-                <span class="stream-card-prop stream-card-prop-full" title="${t('targets.color_strip_source')}">🎞️ ${cssSummary}</span>
-                ${bvs ? `<span class="stream-card-prop stream-card-prop-full" title="${t('targets.brightness_vs')}">${getValueSourceIcon(bvs.source_type)} ${escapeHtml(bvs.name)}</span>` : ''}
+                <span class="stream-card-prop stream-card-prop-full${cssId ? ' stream-card-link' : ''}" title="${t('targets.color_strip_source')}"${cssId ? ` onclick="event.stopPropagation(); navigateToCard('targets','led','led-css','data-css-id','${cssId}')"` : ''}>🎞️ ${cssSummary}</span>
+                ${bvs ? `<span class="stream-card-prop stream-card-prop-full stream-card-link" title="${t('targets.brightness_vs')}" onclick="event.stopPropagation(); navigateToCard('streams','value','value-sources','data-id','${bvsId}')">${getValueSourceIcon(bvs.source_type)} ${escapeHtml(bvs.name)}</span>` : ''}
             </div>
             <div class="card-content">
                 ${isProcessing ? `