Skip to content

feat(ui): URL routing, onboarding tour, idle detection, notification center#308

Open
natiixnt wants to merge 2 commits intoruvnet:mainfrom
natiixnt:feat/ui-routing-onboarding
Open

feat(ui): URL routing, onboarding tour, idle detection, notification center#308
natiixnt wants to merge 2 commits intoruvnet:mainfrom
natiixnt:feat/ui-routing-onboarding

Conversation

@natiixnt
Copy link
Copy Markdown

Summary

1. URL Hash Routing

Tabs are now bookmarkable and shareable. Navigate to index.html#demo to land directly on the Live Demo tab.

  • Hash syncs bidirectionally with TabManager
  • Browser back/forward navigation works
  • Uses replaceState to avoid polluting history

2. Onboarding Tour (first-run walkthrough)

Interactive 6-step guide that starts automatically on first visit:

  • Spotlight highlighting on target elements (status panel, tab buttons)
  • Step indicators with progress dots
  • Back / Next / Skip controls
  • Persists completion to localStorage (won't re-show)
  • Can be replayed from the command palette

3. Idle Detection

Pauses background tasks when the user is inactive for 3+ minutes:

  • Stops health polling to reduce network traffic
  • Dims canvas elements and disables CSS animations
  • Resumes everything on mouse/keyboard/touch activity
  • Integrates with Page Visibility API (tab hidden = idle)
  • Reduces CPU/battery on always-on dashboard screens

4. Notification Center

Bell icon in the header with unread badge:

  • Captures app-relevant events (connections, errors, status changes)
  • Dropdown panel with event history, type indicators, relative timestamps
  • Mark all read / Clear all actions
  • Persists across page views via sessionStorage (up to 20 items)

Test plan

  • Navigate to index.html#sensing - should land on Sensing tab
  • Switch tabs and verify URL hash updates
  • Use browser back button to return to previous tab
  • Clear localStorage and reload - onboarding tour should appear
  • Click through all 6 steps, verify spotlight highlighting
  • Skip tour, reload - tour should not appear again
  • Leave dashboard idle for 3+ min - verify "[Idle]" message in console
  • Move mouse - verify health polling resumes
  • Click bell icon - notification panel opens with captured events
  • Click "Mark read" - badge clears, items dim
  • Reload page - notifications persist in panel
…oggle, 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
…ion 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant