Skip to content

feat(ui): i18n (EN/PL), screenshot, settings panel, reduced motion, uptime clock#309

Open
natiixnt wants to merge 2 commits intoruvnet:mainfrom
natiixnt:feat/ui-i18n-a11y-tools
Open

feat(ui): i18n (EN/PL), screenshot, settings panel, reduced motion, uptime clock#309
natiixnt wants to merge 2 commits intoruvnet:mainfrom
natiixnt:feat/ui-i18n-a11y-tools

Conversation

@natiixnt
Copy link
Copy Markdown

Summary

1. Internationalization (EN/PL)

  • Full translation system with 60+ string keys in English and Polish
  • Language selector dropdown in header (EN/PL)
  • Auto-detects browser language on first visit
  • data-i18n attributes on dashboard elements for declarative translation
  • Persists language choice to localStorage
  • Extensible - new languages can be added to the translations object

2. Screenshot Tool (S key)

  • Captures active tab content to clipboard (ClipboardItem API) or downloads as PNG
  • Flash animation on capture for visual feedback
  • Canvas-based renderer: captures embedded canvases, text content, with timestamp watermark
  • Graceful fallback chain: clipboard -> file download -> canvas-only capture
  • Integrated into keyboard shortcuts (S) and available via command palette

3. Quick Settings Panel (gear icon)

  • Reduced motion toggle - disables all animations/transitions (respects system preference)
  • High contrast mode - WCAG AAA compliant color overrides for both light and dark themes
  • Compact mode - condensed layout (hidden subtitle, smaller tabs, tighter spacing)
  • Health polling toggle
  • Clear local data / Reset onboarding buttons
  • All settings persist to localStorage

4. Uptime Clock

  • Current time (HH:MM) + session duration counter in header
  • Updates every second, auto-formats (seconds -> minutes -> hours)

5. Accessibility Improvements

  • prefers-reduced-motion media query support (system level)
  • Manual reduced motion toggle for browsers that don't expose preference
  • High contrast mode with adjusted colors meeting WCAG AAA requirements

Test plan

  • Open dashboard - language auto-detected from browser
  • Switch language to PL via dropdown - dashboard labels translate
  • Switch back to EN - labels restore
  • Reload - language choice persists
  • Press S - screenshot flash appears, image saved/copied
  • Click gear icon - settings panel opens
  • Toggle "Reduced motion" - all animations stop immediately
  • Toggle "High contrast" - colors become high-contrast
  • Toggle "Compact mode" - layout becomes denser
  • Click "Reset onboarding" - onboarding tour restarts
  • Verify uptime clock ticks in header
  • Set browser to prefers-reduced-motion - animations disabled automatically

…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
…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
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