Skip to content

Dashboard UI Architecture

Visual Design

The Dashboard is dark-mode only — light mode has been fully removed.

Background: Base color #080B14 with three radial gradients applied at the MudLayout root via the .app-bg CSS class: - Purple, top-left: rgba(127, 119, 221, 0.10) - Warm amber, top-right: rgba(201, 146, 46, 0.06) - Blue, bottom-center: rgba(55, 138, 221, 0.05)

A subtle SVG noise overlay at 1.5% opacity adds a film-grain texture. Page root containers use transparent backgrounds so the gradient shows through. Sticky headers and modal overlays remain opaque.

Accent color: Fixed to golden amber #C9922E, derived from the logo gradient. ThemeService.SetHubAccent() is a no-op — the accent cannot be changed by users or code.

TopBar

Fixed horizontal bar, height: 56px. Always present.

Contents (left to right): AppLogo wordmark — spacer — search icon — notification bell with review count badge — profile avatar.

Four layout variants: - full — desktop: all elements visible - mobile — hamburger button (left) + centered logo - simplified — TV: logo only - minimal — automotive: icon only

Styling: Glassmorphic — rgba(0, 0, 0, 0.4) background with backdrop-filter: blur(12px).

LeftDock

Floating icon-only panel, 64px wide. Desktop only — hidden on mobile.

Contents: Fixed content-type lane icons (Home, Search, Books, Video, Music, Podcasts, Comics) + Settings + Profile Avatar + Live Clock.

Content-type lanes are defined in ContentLanes.cs and are not user-configurable.

Active state: 3px solid amber bar on the left edge of the active icon.

Styling: Dark blue glassmorphic — rgba(8, 13, 30, 0.92).

MobileNavDrawer

Slide-out drawer for mobile viewports. Triggered by the hamburger button in the TopBar. Contains the AppLogo and navigation items matching the LeftDock. Implemented as a MudDrawer with DrawerVariant.Temporary.

Content Area Offsets

  • padding-top: 56px — clears the TopBar
  • padding-left: 68px — clears the LeftDock (desktop only)

Cinematic Hero Banner

Full-width banner used on the Home page and lane pages.

Rendering priority: 1. Pre-rendered hero.jpg generated by HeroBannerGenerator during ingestion (SkiaSharp pipeline: Gaussian blur + vignette + grain). Served directly when present. 2. CSS-blurred cover art fallback: filter: blur(24px) with a dark vignette overlay. 3. Gradient fallback when no cover art is available.

The banner displays metadata badges (year, media type), Series title, and author name.

Poster Swimlanes

The main content presentation layer: horizontal-scrolling rows of poster-art cards.

Standard rows on the Home page: "Continue your Journey", "Recently Added", then media-type-grouped swimlanes.

PosterCard: Cover art at 2:3 aspect ratio with title and metadata badges below. Card width is driven by the resolved device configuration (swimlane_card_width).

Scroll behavior: Hidden scrollbar, scroll-snap enabled for touch devices.

Real-Time Updates

The Dashboard maintains a persistent connection to the Engine via SignalR (the "Intercom"). When a new file is ingested or processing progresses, the Dashboard updates instantly — no polling, no manual refresh required.

Device Profiles

The Dashboard adapts its layout, available features, and page structure based on the viewing device. All behavior is driven by configuration files, not hard-coded CSS breakpoints.

Three-Tier Cascade

Settings merge in order: Global (app-wide defaults) → Device (structural constraints and overrides per device class) → Profile (per-user preferences). Device constraints — disabled features, disabled pages, forced dark mode — are hard limits that no profile can override.

Configuration Files

config/ui/
  global.json
  devices/
    web.json
    mobile.json
    television.json
    automotive.json
  profiles/
    {profile-id}.json

Configuration files live in config/ui/ (committed to git).

Device Classes

Class Touch Targets Key Constraints
web Standard None — fully unconstrained
mobile 48px View toggle disabled, compact appbar, icon-only logo, stacked layouts, 1-column grid
television 64px 8 features disabled, server settings page disabled, no text input, focus-navigable tabs, 2-column large tiles
automotive 80px Same as television plus forced dark mode, minimal appbar, 2 dock items (Series + Listen), audio-only tiles

Device Detection

Handled client-side via JavaScript interop. Detection priority: 1. URL query parameter ?device= 2. localStorage value 3. Auto-detect: viewport ≤ 768px + touch events present → mobile, otherwise → web

Television and automotive require explicit selection — they are never auto-detected.

Brand Assets

Three official SVG logo files. Never replace logo placements with hand-written text.

File Location Use when
tuvima-logo.svg wwwroot/images/ Full horizontal logo — mark + "TUVIMA" wordmark. Use in LeftDock and full branded headers.
tuvima-icon.svg wwwroot/images/, wwwroot/favicon.svg Square icon mark only. Use as favicon, narrow LeftDock icon, or any small/square slot.
tuvima-hero.svg assets/images/ Mark + wordmark + subtitle. Use in README hero and marketing contexts only.

All three SVGs use hardcoded fills: white (#fff) for highlight layers, black for main strokes. Designed for dark backgrounds. Source files live outside the repository — do not modify the SVGs in the repo directly.