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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant