Skip to content

v2026-03-01.1 — Dashboard & Settings Redesign

Choose a tag to compare

View all tags
@itsDNNS itsDNNS released this 01 Mar 15:34
v2026-03-01.1
e42387a
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Complete UI Overhaul

The entire frontend has been redesigned with a modern, mobile-first design system — new dashboard, new settings, theme engine, and PWA support.

Dashboard Redesign

  • New layout shell — mobile sticky header, compact sidebar, bottom tab bar
  • Hero card — status dot, health summary, provider info, gaming badge, inline refresh/countdown
  • Metrics grid — DS Power, US Power, SNR, Errors, Speed cards with health badges and ranges
  • Health rings — thin donut rings with channel breakdown (Good/Marginal/Poor)
  • Channel tables — clean grouped layout by DOCSIS version
  • Responsive — mobile-first with tablet and desktop breakpoints

Settings Redesign

  • New structure — Core settings (Connection, Appearance, Notifications, Security, System, Support) + Module settings in sidebar
  • Tribu design system — glass cards, toggle rows, card icons, consistent spacing
  • Module cards — redesigned grid layout with enable/disable, settings links, author info

Theme Engine

  • Themes as modules — contributes: theme in manifest.json with theme.json color definitions
  • 3 built-in themes — Classic (default dark), Ocean (blue tones), Tribu (purple accent)
  • Live preview — preview any theme before activating, instant switch without restart
  • Theme gallery — browse installed themes in Appearance settings
  • Theme registry — browse and install community themes (API ready)
  • Mutual exclusion — only one theme active at a time
  • Dark/Light mode — each theme defines both color schemes

PWA & Offline

  • Service worker — offline caching for static assets
  • Self-hosted dependencies — Chart.js, Lucide icons, date-fns adapter bundled locally (no CDN)
  • Self-hosted fonts — Inter, Outfit, JetBrains Mono served from /static/fonts/
  • App manifest — installable as PWA with proper icons and theme color

Design System

  • Design tokens (tokens.css) — shared CSS custom properties for colors, spacing, typography
  • Components (components.css) — reusable UI primitives (badges, toggles, cards, buttons)
  • Modular CSS — split from monolithic main.css into tokens, components, views, modals, fonts
  • Per-module CSS — module-specific styles extracted into modules/<name>/static/style.css

Module System Improvements

  • Smokeping extracted — fully modular with own routes, i18n, templates, and JS
  • Module CSS isolation — each module owns its styles, injected only when enabled
  • Theme security validation — theme.json values validated against injection
  • Settings integration — modules appear in Settings sidebar sorted alphabetically

Fixed

  • CSS specificity: .desktop-only utility class now properly overrides component styles
  • Hero meta items display on single line on desktop (no wrapping)
  • Mobile header shows countdown + refresh only in sticky bar, not duplicated in hero
  • Theme palette dots update when toggling dark/light mode
  • Toggle switches visible in all contexts (table, card, standalone)
  • Module-dependent sidebar links gated on module existence
  • closeMobileSidebar → closeSidebar JS reference error on resize

Stats

  • 86 files changed, ~14k lines touched
  • 743 tests passing
  • 3 PRs merged (#132, #133, #134, #135)
Assets 2
Loading