mirror of
https://github.com/ruvnet/RuView
synced 2026-06-09 10:13:17 +00:00
49fb2ca9f4
* feat(ui): add keyboard shortcuts, perf monitor, toast system, theme toggle, and WCAG accessibility - Keyboard shortcuts overlay (press ? for help, 1-8 for tabs, T for theme, P for perf) - Real-time performance monitor with FPS, memory, latency sparklines (draggable) - Enhanced toast notification system with stacking, auto-dismiss, progress bars - Dark/light theme toggle with localStorage persistence and system preference detection - WCAG accessibility: skip-to-content link, ARIA roles/attributes on tabs and panels, arrow key navigation in tab bar, focus-visible outlines - ESLint config for UI directory with security and quality rules * feat(ui): add command palette, activity log, data export, fullscreen mode, connection status - Command palette (Ctrl+K / Cmd+K) with fuzzy search across tabs and actions - Activity log panel (L key) with real-time console interception, filters, resizable - Data export utility (E key) for sensor data as JSON/CSV with dialog - Fullscreen mode (F key / F11) for visualization tabs with exit button - Connection status widget in header showing WebSocket state and reconnect * feat(ui): add mobile hamburger nav, PWA support, and 40 unit tests - Mobile hamburger navigation: slide-out drawer replacing tab bar on <768px, swipe-to-close, animated hamburger icon, auto-sync with tab manager - PWA manifest + service worker: installable dashboard, offline shell caching (cache-first for static, network-first for API), auto-cleanup of old caches - 40 unit tests for ToastManager, ThemeToggle, KeyboardShortcuts, PerfMonitor, TabManager - browser-based test runner at ui/tests/unit-tests.html - PWA meta tags: theme-color, apple-mobile-web-app-capable, manifest link - Icon generator page for creating PWA icons (ui/icons/generate.html) * feat(ui): add URL routing, onboarding tour, idle detection, notification center - Hash router: tabs are bookmarkable/shareable via URL (#demo, #sensing, etc.), syncs with TabManager, supports browser back/forward navigation - Onboarding tour: interactive 6-step first-run walkthrough with spotlight highlighting, step indicators, skip/back/next controls, localStorage persistence - Idle detection: pauses health polling and reduces CSS animations after 3 min of inactivity, resumes on user interaction, integrates with Page Visibility API - Notification center: bell icon in header with unread badge, event history panel with mark-read/clear, persists across page views via sessionStorage * feat(ui): add i18n (EN/PL), screenshot tool, settings panel, reduced motion, uptime clock - i18n: English/Polish translations with auto-detection, language selector in header, data-i18n attributes on dashboard elements, localStorage persistence - Screenshot tool (S key): captures active tab to clipboard or downloads PNG, flash effect, canvas rendering with watermark, fallback for tainted canvases - Quick settings panel (gear icon): reduced motion toggle, high contrast mode, compact layout mode, health polling toggle, clear data, reset onboarding - Uptime clock: current time + session duration in header - prefers-reduced-motion: system-level and manual toggle, disables all animations and transitions for vestibular accessibility - High contrast mode: WCAG AAA compliant colors for both light and dark themes - Compact mode: condensed layout for dense information display
84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
// Idle Manager - Pauses animations, polling, and WebSocket pings when user is inactive
|
|
// Reduces CPU/battery usage on idle dashboards
|
|
|
|
export class IdleManager {
|
|
constructor() {
|
|
this.idleTimeout = 3 * 60 * 1000; // 3 minutes
|
|
this.isIdle = false;
|
|
this.timer = null;
|
|
this.callbacks = { idle: [], active: [] };
|
|
this.events = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll'];
|
|
}
|
|
|
|
init() {
|
|
this.resetTimer();
|
|
this.events.forEach(evt => {
|
|
document.addEventListener(evt, () => this.onActivity(), { passive: true, capture: true });
|
|
});
|
|
// Also use Page Visibility API
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (document.hidden) {
|
|
this.goIdle();
|
|
} else {
|
|
this.goActive();
|
|
}
|
|
});
|
|
}
|
|
|
|
onActivity() {
|
|
if (this.isIdle) {
|
|
this.goActive();
|
|
}
|
|
this.resetTimer();
|
|
}
|
|
|
|
resetTimer() {
|
|
if (this.timer) clearTimeout(this.timer);
|
|
this.timer = setTimeout(() => this.goIdle(), this.idleTimeout);
|
|
}
|
|
|
|
goIdle() {
|
|
if (this.isIdle) return;
|
|
this.isIdle = true;
|
|
console.info('[Idle] User inactive - pausing background tasks');
|
|
this.notify('idle');
|
|
document.body.classList.add('user-idle');
|
|
}
|
|
|
|
goActive() {
|
|
if (!this.isIdle) return;
|
|
this.isIdle = false;
|
|
console.info('[Idle] User active - resuming background tasks');
|
|
this.notify('active');
|
|
document.body.classList.remove('user-idle');
|
|
this.resetTimer();
|
|
}
|
|
|
|
onIdle(callback) {
|
|
this.callbacks.idle.push(callback);
|
|
return () => {
|
|
const i = this.callbacks.idle.indexOf(callback);
|
|
if (i > -1) this.callbacks.idle.splice(i, 1);
|
|
};
|
|
}
|
|
|
|
onActive(callback) {
|
|
this.callbacks.active.push(callback);
|
|
return () => {
|
|
const i = this.callbacks.active.indexOf(callback);
|
|
if (i > -1) this.callbacks.active.splice(i, 1);
|
|
};
|
|
}
|
|
|
|
notify(type) {
|
|
this.callbacks[type].forEach(cb => {
|
|
try { cb(); } catch (e) { console.error('[Idle] Callback error:', e); }
|
|
});
|
|
}
|
|
|
|
dispose() {
|
|
if (this.timer) clearTimeout(this.timer);
|
|
this.callbacks = { idle: [], active: [] };
|
|
}
|
|
}
|