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

@@ -1,10 +1,26 @@
 /**
- * Tab switching — switchTab, initTabs, startAutoRefresh.
+ * Tab switching — switchTab, initTabs, startAutoRefresh, hash routing.
  */
 
 import { apiKey, refreshInterval, setRefreshInterval, dashboardPollInterval } from '../core/state.js';
 
-export function switchTab(name) {
+/** Parse location.hash into {tab, subTab}. */
+export function parseHash() {
+    const hash = location.hash.replace(/^#/, '');
+    if (!hash) return {};
+    const [tab, subTab] = hash.split('/');
+    return { tab, subTab };
+}
+
+/** Update the URL hash without triggering popstate. */
+function _setHash(tab, subTab) {
+    const hash = '#' + (subTab ? `${tab}/${subTab}` : tab);
+    history.replaceState(null, '', hash);
+}
+
+let _suppressHashUpdate = false;
+
+export function switchTab(name, { updateHash = true } = {}) {
     document.querySelectorAll('.tab-btn').forEach(btn => {
         const isActive = btn.dataset.tab === name;
         btn.classList.toggle('active', isActive);
@@ -12,6 +28,16 @@ export function switchTab(name) {
     });
     document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.toggle('active', panel.id === `tab-${name}`));
     localStorage.setItem('activeTab', name);
+
+    if (updateHash && !_suppressHashUpdate) {
+        const subTab = name === 'targets'
+            ? (localStorage.getItem('activeTargetSubTab') || 'led')
+            : name === 'streams'
+            ? (localStorage.getItem('activeStreamTab') || 'raw')
+            : null;
+        _setHash(name, subTab);
+    }
+
     if (name === 'dashboard') {
         // Use window.* to avoid circular imports with feature modules
         if (apiKey && typeof window.loadDashboard === 'function') window.loadDashboard();
@@ -30,13 +56,44 @@ export function switchTab(name) {
 }
 
 export function initTabs() {
-    let saved = localStorage.getItem('activeTab');
+    // Hash takes priority over localStorage
+    const hashRoute = parseHash();
+    let saved;
+
+    if (hashRoute.tab && document.getElementById(`tab-${hashRoute.tab}`)) {
+        saved = hashRoute.tab;
+        // Pre-set sub-tab so the sub-tab switch functions pick it up
+        if (hashRoute.subTab) {
+            if (saved === 'targets') localStorage.setItem('activeTargetSubTab', hashRoute.subTab);
+            if (saved === 'streams') localStorage.setItem('activeStreamTab', hashRoute.subTab);
+        }
+    } else {
+        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);
 }
 
+/** Update hash when sub-tab changes. Called from targets.js / streams.js. */
+export function updateSubTabHash(tab, subTab) {
+    _setHash(tab, subTab);
+}
+
+/** Update the count badge on a main tab button. Hidden when count is 0. */
+export function updateTabBadge(tabName, count) {
+    const badge = document.getElementById(`tab-badge-${tabName}`);
+    if (!badge) return;
+    if (count > 0) {
+        badge.textContent = count;
+        badge.style.display = '';
+    } else {
+        badge.style.display = 'none';
+    }
+}
+
 export function startAutoRefresh() {
     if (refreshInterval) {
         clearInterval(refreshInterval);
@@ -56,3 +113,35 @@ export function startAutoRefresh() {
         }
     }, dashboardPollInterval));
 }
+
+/**
+ * Handle browser back/forward via popstate.
+ * Called from app.js.
+ */
+export function handlePopState() {
+    const hashRoute = parseHash();
+    if (!hashRoute.tab) return;
+
+    const currentTab = localStorage.getItem('activeTab');
+    _suppressHashUpdate = true;
+
+    if (hashRoute.tab !== currentTab) {
+        switchTab(hashRoute.tab, { updateHash: false });
+    }
+
+    if (hashRoute.subTab) {
+        if (hashRoute.tab === 'targets') {
+            const currentSub = localStorage.getItem('activeTargetSubTab');
+            if (hashRoute.subTab !== currentSub && typeof window.switchTargetSubTab === 'function') {
+                window.switchTargetSubTab(hashRoute.subTab);
+            }
+        } else if (hashRoute.tab === 'streams') {
+            const currentSub = localStorage.getItem('activeStreamTab');
+            if (hashRoute.subTab !== currentSub && typeof window.switchStreamTab === 'function') {
+                window.switchStreamTab(hashRoute.subTab);
+            }
+        }
+    }
+
+    _suppressHashUpdate = false;
+}