Skip to content

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

Open
natiixnt wants to merge 2 commits intoruvnet:mainfrom
natiixnt:feat/ui-mobile-pwa-tests
Open

feat(ui): mobile hamburger nav, PWA support, 40 unit tests#307
natiixnt wants to merge 2 commits intoruvnet:mainfrom
natiixnt:feat/ui-mobile-pwa-tests

Conversation

@natiixnt
Copy link
Copy Markdown

Summary

This PR addresses three significant gaps in the web UI:

1. Mobile Navigation (hamburger menu)

The 10-tab navigation bar wraps awkwardly on mobile devices. This adds a proper hamburger menu:

  • Slide-out drawer with all tabs, replaces tab bar on screens < 768px
  • Animated hamburger icon (transforms to X when open)
  • Swipe-to-close gesture support
  • Auto-syncs active state with TabManager
  • Closes on Escape key, backdrop click, or tab selection
  • Proper ARIA attributes (aria-expanded, aria-label, role=navigation)

2. PWA Support (Progressive Web App)

Turns the dashboard into an installable, offline-capable app:

  • manifest.json with app metadata, theme colors, icon references
  • Service worker (sw.js) with dual caching strategy:
    • Cache-first for static assets (JS, CSS, HTML)
    • Network-first for API calls with cache fallback
  • Auto-cleanup of stale caches on version update
  • PWA meta tags in index.html (theme-color, apple-mobile-web-app)
  • Icon generator page (ui/icons/generate.html) for creating PNG icons

3. Unit Tests (40 tests, 5 suites)

The web UI previously had zero tests (mobile/ has 30+, but web/ had none). This adds a browser-based test runner:

  • ToastManager (8 tests) - init, show, dismiss, types, XSS prevention, stacking, cleanup
  • ThemeToggle (5 tests) - detection, toggle, persistence, DOM attribute
  • KeyboardShortcuts (7 tests) - defaults, custom registration, help overlay, groups
  • PerfMonitor (6 tests) - panel creation, visibility, metrics, sparklines, cleanup
  • TabManager (9 tests) - init, switching, ARIA updates, callbacks, enable/disable, badges

Open ui/tests/unit-tests.html in browser to run all tests.

Test plan

  • Open on mobile or resize to < 768px - hamburger icon appears, tab bar hides
  • Tap hamburger - drawer slides in from right with all tabs
  • Tap a tab in drawer - tab switches, drawer closes
  • Swipe left on drawer - drawer closes
  • Install as PWA from browser menu (Chrome: "Install app")
  • Disconnect network - cached pages still load, API shows offline fallback
  • Open ui/tests/unit-tests.html - all 40 tests pass (green)
  • Verify no console errors on desktop (hamburger hidden, tab bar visible)
…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
- 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant