feat(ui): mobile hamburger nav, PWA support, 40 unit tests

ui/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "browser": true,
+    "es2022": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2022,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "no-undef": "error",
+    "no-var": "error",
+    "prefer-const": "warn",
+    "eqeqeq": ["error", "always"],
+    "no-eval": "error",
+    "no-implied-eval": "error",
+    "no-new-func": "error",
+    "no-script-url": "error",
+    "no-alert": "warn",
+    "no-console": ["warn", { "allow": ["warn", "error", "info"] }],
+    "curly": ["warn", "multi-line"],
+    "no-throw-literal": "error",
+    "prefer-template": "warn",
+    "no-duplicate-imports": "error"
+  },
+  "ignorePatterns": [
+    "node_modules/",
+    "mobile/",
+    "vendor/",
+    "*.min.js"
+  ]
+}

ui/app.js

@@ -10,6 +10,11 @@ import { wsService } from './services/websocket.service.js';
 import { healthService } from './services/health.service.js';
 import { sensingService } from './services/sensing.service.js';
 import { backendDetector } from './utils/backend-detector.js';
+import { KeyboardShortcuts } from './utils/keyboard-shortcuts.js';
+import { PerfMonitor } from './utils/perf-monitor.js';
+import { toastManager } from './utils/toast.js';
+import { ThemeToggle } from './utils/theme-toggle.js';
+import { MobileNav } from './utils/mobile-nav.js';
 
 class WiFiDensePoseApp {
   constructor() {
@@ -30,10 +35,13 @@ class WiFiDensePoseApp {
 
       // Initialize UI components
       this.initializeComponents();
-
+
+      // Initialize enhancements
+      this.initializeEnhancements();
+
       // Set up global event listeners
       this.setupEventListeners();
-      
+
       this.isInitialized = true;
       console.log('WiFi DensePose UI initialized successfully');
 
@@ -167,6 +175,42 @@ class WiFiDensePoseApp {
     }
   }
 
+  // Initialize enhancement modules (keyboard shortcuts, perf monitor, toast, theme)
+  initializeEnhancements() {
+    // Toast notifications
+    toastManager.init();
+
+    // Theme toggle
+    this.themeToggle = new ThemeToggle();
+    this.themeToggle.init();
+
+    // Performance monitor
+    this.perfMonitor = new PerfMonitor();
+    this.perfMonitor.init();
+
+    // Mobile navigation (hamburger menu for small screens)
+    this.mobileNav = new MobileNav();
+    this.mobileNav.init();
+
+    // Keyboard shortcuts (pass app reference for tab switching)
+    this.keyboardShortcuts = new KeyboardShortcuts(this);
+    this.keyboardShortcuts.init();
+
+    // Register PWA service worker
+    this.registerServiceWorker();
+  }
+
+  // Register service worker for offline capability
+  registerServiceWorker() {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('./sw.js').then(reg => {
+        console.info('Service worker registered:', reg.scope);
+      }).catch(err => {
+        console.warn('Service worker registration failed:', err);
+      });
+    }
+  }
+
   // Handle tab changes
   handleTabChange(newTab, oldTab) {
     console.log(`Tab changed from ${oldTab} to ${newTab}`);
@@ -272,45 +316,17 @@ class WiFiDensePoseApp {
     });
   }
 
-  // Show backend status notification
+  // Show backend status notification (uses enhanced toast system)
   showBackendStatus(message, type) {
-    // Create status notification if it doesn't exist
-    let statusToast = document.getElementById('backendStatusToast');
-    if (!statusToast) {
-      statusToast = document.createElement('div');
-      statusToast.id = 'backendStatusToast';
-      statusToast.className = 'backend-status-toast';
-      document.body.appendChild(statusToast);
-    }
-
-    statusToast.textContent = message;
-    statusToast.className = `backend-status-toast ${type}`;
-    statusToast.classList.add('show');
-
-    // Auto-hide success messages, keep warnings and errors longer
-    const timeout = type === 'success' ? 3000 : 8000;
-    setTimeout(() => {
-      statusToast.classList.remove('show');
-    }, timeout);
+    const toastType = type === 'success' ? 'success' : 'warning';
+    toastManager[toastType](message, {
+      duration: type === 'success' ? 3000 : 8000
+    });
   }
 
-  // Show global error message
+  // Show global error message (uses enhanced toast system)
   showGlobalError(message) {
-    // Create error toast if it doesn't exist
-    let errorToast = document.getElementById('globalErrorToast');
-    if (!errorToast) {
-      errorToast = document.createElement('div');
-      errorToast.id = 'globalErrorToast';
-      errorToast.className = 'error-toast';
-      document.body.appendChild(errorToast);
-    }
-
-    errorToast.textContent = message;
-    errorToast.classList.add('show');
-
-    setTimeout(() => {
-      errorToast.classList.remove('show');
-    }, 5000);
+    toastManager.error(message, { duration: 6000 });
   }
 
   // Clean up resources
@@ -326,9 +342,16 @@ class WiFiDensePoseApp {
 
     // Disconnect all WebSocket connections
     wsService.disconnectAll();
-    
+
     // Stop health monitoring
     healthService.dispose();
+
+    // Dispose enhancements
+    if (this.keyboardShortcuts) this.keyboardShortcuts.dispose();
+    if (this.perfMonitor) this.perfMonitor.dispose();
+    if (this.themeToggle) this.themeToggle.dispose();
+    if (this.mobileNav) this.mobileNav.dispose();
+    toastManager.dispose();
   }
 
   // Public API

ui/components/TabManager.js

@@ -19,6 +19,33 @@ export class TabManager {
       tab.addEventListener('click', () => this.switchTab(tab));
     });
 
+    // Arrow key navigation within tab bar (WCAG)
+    const nav = this.container.querySelector('.nav-tabs');
+    if (nav) {
+      nav.addEventListener('keydown', (e) => {
+        const buttonTabs = this.tabs.filter(t => t.tagName === 'BUTTON' && !t.disabled);
+        const currentIndex = buttonTabs.indexOf(document.activeElement);
+        if (currentIndex === -1) return;
+
+        let nextIndex = -1;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+          nextIndex = (currentIndex + 1) % buttonTabs.length;
+        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+          nextIndex = (currentIndex - 1 + buttonTabs.length) % buttonTabs.length;
+        } else if (e.key === 'Home') {
+          nextIndex = 0;
+        } else if (e.key === 'End') {
+          nextIndex = buttonTabs.length - 1;
+        }
+
+        if (nextIndex >= 0) {
+          e.preventDefault();
+          buttonTabs[nextIndex].focus();
+          this.switchTab(buttonTabs[nextIndex]);
+        }
+      });
+    }
+
     // Activate first tab if none active
     const activeTab = this.tabs.find(tab => tab.classList.contains('active'));
     if (activeTab) {
@@ -36,14 +63,22 @@ export class TabManager {
       return;
     }
 
-    // Update tab states
+    // Update tab states and ARIA attributes
     this.tabs.forEach(tab => {
-      tab.classList.toggle('active', tab === tabElement);
+      const isActive = tab === tabElement;
+      tab.classList.toggle('active', isActive);
+      if (tab.hasAttribute('aria-selected')) {
+        tab.setAttribute('aria-selected', String(isActive));
+      }
     });
 
-    // Update content visibility
+    // Update content visibility and ARIA
     this.tabContents.forEach(content => {
-      content.classList.toggle('active', content.id === tabId);
+      const isActive = content.id === tabId;
+      content.classList.toggle('active', isActive);
+      if (content.hasAttribute('role')) {
+        content.setAttribute('aria-hidden', String(!isActive));
+      }
     });
 
     // Update active tab

ui/icons/generate.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head><title>RuView Icon Generator</title></head>
+<body>
+<p>Open this file in a browser and right-click to save the canvas images as icon-192.png and icon-512.png</p>
+<canvas id="c192" width="192" height="192"></canvas>
+<canvas id="c512" width="512" height="512"></canvas>
+<script>
+function drawIcon(canvas) {
+  const ctx = canvas.getContext('2d');
+  const s = canvas.width;
+  // Background
+  ctx.fillStyle = '#1f2121';
+  ctx.beginPath();
+  ctx.roundRect(0, 0, s, s, s * 0.15);
+  ctx.fill();
+  // WiFi arcs
+  ctx.strokeStyle = '#32b8c6';
+  ctx.lineWidth = s * 0.035;
+  ctx.lineCap = 'round';
+  const cx = s * 0.5, cy = s * 0.55;
+  [0.35, 0.25, 0.15].forEach(r => {
+    ctx.beginPath();
+    ctx.arc(cx, cy, s * r, -Math.PI * 0.75, -Math.PI * 0.25);
+    ctx.stroke();
+  });
+  // Center dot
+  ctx.fillStyle = '#32b8c6';
+  ctx.beginPath();
+  ctx.arc(cx, cy, s * 0.03, 0, Math.PI * 2);
+  ctx.fill();
+  // Person silhouette
+  ctx.strokeStyle = '#21808d';
+  ctx.lineWidth = s * 0.025;
+  // Head
+  ctx.beginPath();
+  ctx.arc(cx, cy - s * 0.15, s * 0.045, 0, Math.PI * 2);
+  ctx.stroke();
+  // Body
+  ctx.beginPath();
+  ctx.moveTo(cx, cy - s * 0.1);
+  ctx.lineTo(cx, cy + s * 0.05);
+  ctx.stroke();
+  // Arms
+  ctx.beginPath();
+  ctx.moveTo(cx - s * 0.08, cy - s * 0.04);
+  ctx.lineTo(cx + s * 0.08, cy - s * 0.04);
+  ctx.stroke();
+  // Legs
+  ctx.beginPath();
+  ctx.moveTo(cx, cy + s * 0.05);
+  ctx.lineTo(cx - s * 0.06, cy + s * 0.15);
+  ctx.moveTo(cx, cy + s * 0.05);
+  ctx.lineTo(cx + s * 0.06, cy + s * 0.15);
+  ctx.stroke();
+  // Text
+  ctx.fillStyle = '#f5f5f5';
+  ctx.font = `bold ${s * 0.08}px sans-serif`;
+  ctx.textAlign = 'center';
+  ctx.fillText('RuView', cx, s * 0.88);
+}
+drawIcon(document.getElementById('c192'));
+drawIcon(document.getElementById('c512'));
+</script>
+</body>
+</html>