UI/UX Redesign: Map-centric dashboard with dark/light mode and mobile-first navigation

[mphacker]

UI/UX Redesign Plan

Problem Statement

The TeslaUSB web interface is functional but feels like a utility toolkit rather than a polished automotive dashboard. Key issues:

• 8 navigation items crowd the nav bar (Settings, Analytics, Map, Videos, Lock Chimes, Music, Light Shows, Wraps)
• Settings is the landing page — a technical, dense form is the first thing users see
• No visual hierarchy — all pages look like utility forms with emoji icons
• Mobile experience is poor — nav wraps awkwardly, map doesn't use full viewport
• Dark mode exists but colors feel inconsistent (green status bars, mismatched button colors)
• Videos page is redundant with Map — both deal with dashcam footage + GPS data
• No cohesive design system — inconsistent spacing, typography, and component styles

---

Design Research & Inspiration

After auditing the current UI across all pages (desktop + mobile) and researching comparable automotive dashcam/IoT dashboard apps, the following patterns should inform our redesign:

Patterns to Adopt

1. Bottom tab navigation on mobile — Modern dashcam apps use 4-5 clean tabs. We should reduce our 8 items into ~4-5 grouped tabs.
2. Trip summary card at bottom of map — Instead of a dropdown selector + separate stats bar, show a compact swipeable card with trip info (date, time, distance) and a "More Trips" button.
3. Event type marker icons — Best-in-class apps use distinct icons for different event types (FSD engage/disengage, incidents, honks). Our map uses generic markers — we should differentiate visually.
4. Categorized settings — Group settings into clear collapsible sections rather than showing a dense flat form.
5. Device status indicator — Show a compact mode indicator and connection status at a glance.

Features We Already Have (Keep/Enhance)

• ✅ FSD overlay on map
• ✅ Video overlay on map markers
• ✅ Multi-camera video player
• ✅ Trip selection and route display
• ✅ Heatmap visualization

Potential New Enhancements

1. Event type badges on the map — Show a small icon badge on markers indicating Sentry, SavedClip, FSD event, etc.
2. Quick-access video list from map — A bottom sheet or side panel showing videos near the current map viewport, allowing browsing without leaving the map.
3. Trip statistics overlay — Show trip stats (distance, duration, events) in a compact card that's always visible, not hidden in a separate toolbar.

---

Decision: Videos Page → Merge Into Map

Recommendation: Merge video browsing into the Map page and eliminate the separate Videos page.

Rationale

1. Videos are inherently spatial — they happened at a location on a trip. The map provides natural context.
2. The current Videos page shows folders (EncryptedClips, RecentClips, SavedClips, SentryClips) with thumbnail cards — this same data can be presented as a filterable list/panel accessible from the map.
3. The video player (event_player.html) with its multi-camera view and HUD overlay remains as-is — it just gets launched from the map context instead of a separate page.
4. Map-centric video browsing is the standard pattern in modern dashcam applications, and it provides better spatial context.
5. Reduces navigation from 8 to 7 items (further reduced by grouping below).

Implementation Approach

• Add a "Videos" toggle/panel to the map page that slides in from the right (desktop) or bottom (mobile)
• The panel shows the same folder selector and video card grid currently on the Videos page
• Clicking a video card opens the existing event player (full page or modal overlay)
• Videos with GPS data show their location on the map; tapping a map marker opens the video
• Videos without GPS data are still accessible via the panel's folder browser
• The panel can be toggled with a button in the map toolbar

---

New Information Architecture

Current Navigation (8 items)

Settings | Analytics | Map | Videos | Lock Chimes | Music | Light Shows | Wraps

Proposed Navigation (4 primary + settings)

Desktop: Left sidebar (collapsible icon rail)
Mobile: Bottom tab bar (4 tabs + overflow menu)

Tab	Icon	Contains	Notes
Map	map-pin	Map + integrated Videos panel	Primary landing page
Analytics	bar-chart-2	Storage, stats, driving data	Dashboard view
Media	music	Lock Chimes, Music, Light Shows, Wraps	Grouped sub-navigation
Settings	settings	Mode control, WiFi, AP, system	Reorganized into sections

The Media tab opens a sub-view with 4 sections accessible via horizontal pill tabs:

• Chimes — Lock chime management
• Music — Music library
• Shows — Light shows
• Wraps — Custom wraps

This reduces cognitive load from 8 top-level items to 4, while keeping everything accessible within 1-2 taps.

---

Design System

Color Palette

Dark Mode (Default — aligns with Tesla's in-car UI)

Token	Hex	Usage
--bg-primary	#0F172A	Page background (slate-900)
--bg-secondary	#1E293B	Card backgrounds (slate-800)
--bg-tertiary	#334155	Elevated surfaces (slate-700)
--text-primary	#F8FAFC	Primary text (slate-50)
--text-secondary	#94A3B8	Secondary text (slate-400)
--text-muted	#64748B	Muted/disabled text (slate-500)
--accent-primary	#3B82F6	Primary actions, links (blue-500)
--accent-success	#22C55E	Success, positive indicators (green-500)
--accent-warning	#F59E0B	Warnings, attention (amber-500)
--accent-danger	#EF4444	Destructive actions, errors (red-500)
--accent-info	#06B6D4	Informational (cyan-500)
--border	#334155	Borders (slate-700)
--border-subtle	#1E293B	Subtle dividers (slate-800)

Light Mode

Token	Hex	Usage
--bg-primary	#FFFFFF	Page background
--bg-secondary	#F8FAFC	Card backgrounds (slate-50)
--bg-tertiary	#F1F5F9	Elevated surfaces (slate-100)
--text-primary	#0F172A	Primary text (slate-900)
--text-secondary	#475569	Secondary text (slate-600)
--text-muted	#94A3B8	Muted text (slate-400)
--accent-primary	#2563EB	Primary actions (blue-600, darker for contrast)
--accent-success	#16A34A	Success (green-600)
--accent-warning	#D97706	Warning (amber-600)
--accent-danger	#DC2626	Danger (red-600)
--accent-info	#0891B2	Info (cyan-600)
--border	#E2E8F0	Borders (slate-200)
--border-subtle	#F1F5F9	Subtle dividers (slate-100)

Semantic Colors (both modes)

Token	Dark	Light	Usage
--mode-present	#22C55E	#16A34A	USB Gadget Mode active
--mode-edit	#F59E0B	#D97706	Edit Mode active
--fsd-engaged	#8B5CF6	#7C3AED	FSD engaged route segment
--fsd-disengaged	#F97316	#EA580C	Manual driving segment
--sentry-event	#EF4444	#DC2626	Sentry clip markers
--saved-event	#3B82F6	#2563EB	Saved clip markers
--recent-event	#22C55E	#16A34A	Recent clip markers

Typography

Font Pairing: Inter / Inter (single family, variable weight)

• Headings: Inter 600 (semibold)
• Body: Inter 400 (regular)
• Labels/captions: Inter 500 (medium), smaller size
• Monospace (stats/data): JetBrains Mono 400

Why Inter:

• Inter is the de facto standard for dashboard/automotive UIs
• Excellent readability at small sizes (important for Pi Zero's lower-res displays)
• Tesla's own UI uses a geometric sans-serif; Inter is the closest web equivalent
• Variable font = single file, smaller payload for Pi Zero

Type Scale:

--text-xs:   0.75rem  (12px) — captions, badges
--text-sm:   0.875rem (14px) — secondary text, table cells
--text-base: 1rem     (16px) — body text (min mobile size)
--text-lg:   1.125rem (18px) — card titles, emphasized text
--text-xl:   1.25rem  (20px) — section headings
--text-2xl:  1.5rem   (24px) — page titles
--text-3xl:  1.875rem (30px) — hero numbers (analytics)

Icons

Replace all emoji icons with Lucide Icons (SVG)

Current Emoji	Replacement Icon	Context
🚗	map-pin	Map/trips
📹	video	Videos
🔔	bell	Lock chimes
🎵	music	Music
💡	sparkles	Light shows
🎨	palette	Wraps
⚙️	settings	Settings
📊	bar-chart-2	Analytics
🔄	refresh-cw	Mode toggle
⬆️	upload	Upload
⬇️	download	Download
🗑️	trash-2	Delete
▶️	play	Play
✏️	pencil	Edit

Delivery method: Inline SVG sprites or individual SVG imports. No icon font (saves bandwidth on Pi Zero).

Spacing System

--space-1:  0.25rem  (4px)
--space-2:  0.5rem   (8px)
--space-3:  0.75rem  (12px)
--space-4:  1rem     (16px)
--space-5:  1.25rem  (20px)
--space-6:  1.5rem   (24px)
--space-8:  2rem     (32px)
--space-10: 2.5rem   (40px)
--space-12: 3rem     (48px)
--space-16: 4rem     (64px)

Border Radius

--radius-sm:   0.25rem  (4px)  — small elements, badges
--radius-md:   0.5rem   (8px)  — buttons, inputs
--radius-lg:   0.75rem  (12px) — cards
--radius-xl:   1rem     (16px) — modals, large cards
--radius-full: 9999px           — pills, avatars

Shadows (dark mode uses border glow instead)

Light mode:
--shadow-sm:  0 1px 2px rgba(0,0,0,0.05)
--shadow-md:  0 4px 6px rgba(0,0,0,0.07)
--shadow-lg:  0 10px 15px rgba(0,0,0,0.1)

Dark mode:
--shadow-sm:  0 0 0 1px rgba(255,255,255,0.05)
--shadow-md:  0 0 0 1px rgba(255,255,255,0.08)
--shadow-lg:  0 4px 12px rgba(0,0,0,0.4)

Transitions

--transition-fast:   150ms ease
--transition-normal: 200ms ease
--transition-slow:   300ms ease

All interactive elements must use transition: all var(--transition-normal).
Respect prefers-reduced-motion: reduce by disabling transitions.

---

Page-by-Page Redesign Specifications

1. Map Page (New Landing Page — /)

Layout: Full-viewport map with floating UI elements overlaid.

Desktop Layout (≥1024px)

┌──────────────────────────────────────────────────────────┐
│ [≡]  TeslaUSB        [🟢 Present Mode]  [☀/🌙]  [⚙]  │  ← Floating top bar
├────┬─────────────────────────────────────────────────────┤
│    │                                                     │
│ N  │                    MAP                              │
│ A  │              (full viewport)                        │
│ V  │                                                     │
│    │                                    ┌──────────┐     │
│ R  │                                    │ Videos   │     │
│ A  │                                    │ Panel    │     │
│ I  │                                    │ (slide)  │     │
│ L  │                                    │          │     │
│    │  ┌─────────────────────────────┐   └──────────┘     │
│    │  │  Trip: Today 2:30pm · 15mi  │ [FSD] [Heat] [Vid]│  ← Bottom card + toolbar
│    │  │  ◀  12 events · 3 FSD       │                    │
│    │  └─────────────────────────────┘                    │
└────┴─────────────────────────────────────────────────────┘

Nav Rail (left sidebar, collapsed by default):

• 48px wide icon-only rail
• Expands to 200px on hover/click
• Icons: Map (active), Analytics, Media, Settings
• Mode indicator dot (green=present, amber=edit) at bottom

Floating Top Bar:

• Semi-transparent background with backdrop blur
• Left: hamburger (mobile) or logo
• Center: nothing (clean)
• Right: Mode badge (compact pill), theme toggle (sun/moon icon), settings gear

Trip Card (bottom of map):

• Floating card, 360px wide (desktop), full-width (mobile)
• Shows: Trip date/time, distance, event count, FSD stats
• Left/right arrows to cycle through trips
• "All Trips" button opens a dropdown/popover with full trip list
• Tapping the card expands it to show trip details (replaces current stats bar)

Map Toolbar (floating, bottom-right):

• Vertical stack of icon buttons with tooltips
• Buttons: FSD Overlay, Heatmap, Videos Panel, Events Filter, Zoom controls
• Each button is a 40×40 circle with subtle background

Videos Panel (slide-in, right side):

• 360px wide panel that slides in from right
• Header: "Videos" + folder selector dropdown (RecentClips, SavedClips, SentryClips, EncryptedClips)
• Scrollable grid of video cards (same as current videos page)
• Each card shows: thumbnail, timestamp, camera count, file size
• Clicking a card navigates to the full video player
• Videos with GPS data are highlighted on the map
• Close button to dismiss panel

Mobile Layout (<768px)

┌──────────────────────────┐
│ [☰]  TeslaUSB   [🟢] [☀]│  ← Compact top bar
├──────────────────────────┤
│                          │
│          MAP             │
│     (full viewport)      │
│                          │
│                          │
│  ┌──────────────────┐    │
│  │ [FSD][Heat][Vid] │    │  ← Floating toolbar
│  └──────────────────┘    │
│                          │
│ ┌────────────────────────┤
│ │ Today 2:30pm · 15mi   ││  ← Draggable bottom sheet
│ │ 12 events · 3 FSD  ▲  ││
│ └────────────────────────┤
├──────────────────────────┤
│ [Map] [Analytics] [Media] [Settings]│  ← Bottom tab bar
└──────────────────────────┘

Bottom Sheet (mobile):

• Replaces the trip card + videos panel
• Three states: peek (shows current trip summary), half (shows trip list + quick stats), full (shows video browser)
• Drag handle at top for smooth transitions between states
• When in "full" state, shows the same video browser grid

Bottom Tab Bar (mobile):

• Fixed at bottom, 56px height
• 4 tabs with icon + label
• Active tab highlighted with accent color
• Safe area padding for notched phones

2. Analytics Page (/analytics/)

Layout: Dashboard grid with cards

Desktop

┌──────────────────────────────────────────────────────────┐
│ Analytics                                    [Export] [↻] │
├──────────────────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐    │
│ │ TeslaCam │ │ LightShow│ │  Music   │ │  Health  │    │
│ │  180 GB  │ │  10 GB   │ │  100 GB  │ │  ✓ OK    │    │
│ │ ████░░░  │ │ ██░░░░░  │ │ ███░░░░  │ │          │    │
│ │ 65% used │ │ 20% used │ │ 45% used │ │ All good │    │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘    │
│                                                          │
│ ┌─────────────────────────┐ ┌────────────────────────┐  │
│ │  Recording Estimate     │ │  Video Statistics       │  │
│ │  ~48 hours remaining    │ │  1,234 clips · 45 GB   │  │
│ │  ▓▓▓▓▓▓▓░░░░░░░░░░░░  │ │  Chart: clips/day      │  │
│ └─────────────────────────┘ └────────────────────────┘  │
│                                                          │
│ ┌─────────────────────────┐ ┌────────────────────────┐  │
│ │  Folder Breakdown       │ │  Event Analytics        │  │
│ │  ┌────────────────────┐ │ │  Sentry: 45 events     │  │
│ │  │ Folder | Size | %  │ │ │  Saved: 12 clips       │  │
│ │  │ Recent | 20GB | 44%│ │ │  FSD: 8 disengages     │  │
│ │  └────────────────────┘ │ │  Chart: events/week    │  │
│ └─────────────────────────┘ └────────────────────────┘  │
└──────────────────────────────────────────────────────────┘

Changes from current:

• Storage gauges redesigned as clean progress bars inside cards (not circular gauges)
• Health status integrated as a card rather than separate alerts
• Charts use consistent color scheme from design system
• Responsive grid: 4 columns → 2 columns → 1 column
• Cards have subtle hover elevation effect
• Add "last updated" timestamp

Mobile

• Single column stack
• Storage cards become horizontal scrolling row (swipeable)
• Charts scale down with touch-friendly tooltips
• Folder breakdown becomes collapsible accordion

3. Media Page (/media/)

Layout: Tabbed sub-navigation with content area

┌──────────────────────────────────────────────────────────┐
│ Media                                                     │
│ ┌────────┐┌────────┐┌────────┐┌────────┐                │
│ │ Chimes ││ Music  ││ Shows  ││ Wraps  │                │
│ └────────┘└────────┘└────────┘└────────┘                │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  (Content area changes based on selected tab)            │
│                                                          │
└──────────────────────────────────────────────────────────┘

Tab Pills: Horizontal scrollable pills (not traditional tabs). Active pill gets accent-primary background. On mobile, pills scroll horizontally if they overflow.

Chimes Sub-Tab

┌──────────────────────────────────────────────────────────┐
│ Active Chime                                              │
│ ┌────────────────────────────────────────────────────┐   │
│ │ 🔔 MyChime.wav          [▶ Preview]  [✏ Change]   │   │
│ └────────────────────────────────────────────────────┘   │
│                                                          │
│ ┌─── Upload ──────────────────────────────────────────┐  │
│ │  Drag & drop WAV files or click to browse           │  │
│ │  ┌─────────────────────────────────────────────┐    │  │
│ │  │          ╔═══╗                               │    │  │
│ │  │          ║ + ║  Drop files here              │    │  │
│ │  │          ╚═══╝                               │    │  │
│ │  └─────────────────────────────────────────────┘    │  │
│ └─────────────────────────────────────────────────────┘  │
│                                                          │
│ Chime Library                          [Search] [Sort ▾] │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Name        │ Size  │ Duration │ Actions             │ │
│ │ Horn.wav    │ 245KB │ 0:03     │ [▶][✏][⬇][🗑]     │ │
│ │ Beep.wav   │ 120KB │ 0:01     │ [▶][✏][⬇][🗑]     │ │
│ └──────────────────────────────────────────────────────┘ │
│                                                          │
│ ▸ Scheduler (collapsed)                                  │
│ ▸ Random Groups (collapsed)                              │
└──────────────────────────────────────────────────────────┘

Changes from current:

• Active chime is a prominent card at the top (not buried in the page)
• Upload area is always visible (not a collapsible)
• Library table has inline action buttons with icon-only buttons + tooltips
• Scheduler and Random Groups are collapsible sections (advanced features)
• On mobile: table becomes card list with swipe actions

Music Sub-Tab

• Same layout pattern as current but with design system styling
• Drag-drop upload zone at top
• File browser with breadcrumb navigation
• Usage stats as a compact bar above the file list

Shows Sub-Tab

• Grid of light show cards with preview thumbnails
• Upload zone at top
• Action buttons (download, delete, play) on hover/long-press

Wraps Sub-Tab

• Grid of wrap thumbnail cards
• Upload zone at top
• Preview modal on click

4. Settings Page (/settings/)

Layout: Organized sections with clear hierarchy

┌──────────────────────────────────────────────────────────┐
│ Settings                                                  │
├──────────────────────────────────────────────────────────┤
│                                                          │
│ ┌─── Device Status ──────────────────────────────────┐   │
│ │  Mode: ● USB Gadget (Present)      [Switch Mode ▾] │   │
│ │  Uptime: 2d 14h · Storage: Healthy · Temp: 42°C   │   │
│ └────────────────────────────────────────────────────┘   │
│                                                          │
│ ▾ WiFi Configuration                                     │
│ ┌────────────────────────────────────────────────────┐   │
│ │  Connected to: HomeWiFi (-45 dBm)                  │   │
│ │  IP: 192.168.1.100                                 │   │
│ │  [Scan Networks]  [Edit Connection]                │   │
│ └────────────────────────────────────────────────────┘   │
│                                                          │
│ ▾ Access Point                                           │
│ ┌────────────────────────────────────────────────────┐   │
│ │  Status: Auto (starts when WiFi fails)             │   │
│ │  SSID: TeslaUSB · Password: ••••••••               │   │
│ │  [Force Start AP]  [Configure]                     │   │
│ └────────────────────────────────────────────────────┘   │
│                                                          │
│ ▸ Storage Management (collapsed)                         │
│ ▸ System (collapsed — reboot, update, logs)              │
│ ▸ About (collapsed — version, github link)               │
│                                                          │
└──────────────────────────────────────────────────────────┘

Changes from current:

• Device Status card at top shows mode + key metrics at a glance
• Mode toggle is a dropdown/select instead of two buttons
• Settings grouped into collapsible sections
• Most-used settings (WiFi, AP) expanded by default
• Advanced settings (Storage, System) collapsed by default
• Removed "Current Mode" banner from every page — it only shows on Settings and as a compact badge in the nav
• On mobile: full-width cards, same section grouping

5. Video Player Page (/videos/event/...)

Layout: Preserved almost entirely — user likes it

Minor enhancements:

• Back button returns to map (instead of videos page)
• Breadcrumb: Map → Trip Name → Event
• Camera selector buttons use design system styling (rounded pills, not flat buttons)
• HUD overlay toggle uses a cleaner icon button
• Download/Delete buttons styled consistently
• Dark background by default (video player always looks best dark)
• On mobile: camera selector becomes a horizontal scrollable row

---

Component Specifications

Buttons

Variant	Dark Mode	Light Mode	Usage
Primary	bg-blue-500 text-white	bg-blue-600 text-white	Main actions
Secondary	bg-slate-700 text-slate-200	bg-slate-200 text-slate-700	Secondary actions
Ghost	text-slate-400 hover:bg-slate-800	text-slate-600 hover:bg-slate-100	Tertiary/cancel
Danger	bg-red-500/10 text-red-400	bg-red-50 text-red-600	Destructive actions
Icon-only	bg-slate-800 text-slate-400	bg-slate-100 text-slate-600	Toolbar buttons

All buttons: min-height: 44px (touch target), border-radius: var(--radius-md), transition: all var(--transition-normal), cursor: pointer.

Cards

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition-normal);
}
.card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
}

Form Inputs

.input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  min-height: 44px;
  transition: border-color var(--transition-fast);
}
.input:focus {
  border-color: var(--accent-primary);
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

Mode Badge (compact indicator)

Present Mode:  [● Present] — green dot + green text on dark green bg
Edit Mode:     [● Edit]    — amber dot + amber text on dark amber bg

Size: compact pill, fits in the nav bar. On mobile: just the colored dot.

Tables (responsive)

Desktop: Traditional table with header row, hover highlight
Mobile: Convert to card list — each row becomes a card with label: value pairs

Toast Notifications

Replace current flash messages with toast notifications:

• Slide in from top-right (desktop) or top-center (mobile)
• Auto-dismiss after 5 seconds
• Color-coded: success (green), error (red), warning (amber), info (blue)
• Dismiss button on each toast

---

Mobile-Specific Patterns

Bottom Tab Bar

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 50;
}

Bottom Sheet (map page)

• Three snap points: 15% (peek), 50% (half), 90% (full)
• CSS scroll-snap-type for smooth snapping
• Backdrop darkens as sheet rises
• Handle bar at top for drag affordance

Swipe Actions (tables → cards on mobile)

• Swipe left to reveal action buttons (delete, edit)
• Long press for context menu
• Touch targets minimum 44×44px

Pull to Refresh

• On Analytics page for refreshing stats
• On Media sub-tabs for refreshing file lists

---

Dark/Light Mode Implementation

Toggle

• Icon button in nav: sun icon (light mode) / moon icon (dark mode)
• Respects prefers-color-scheme on first visit
• Saves preference to localStorage
• Applied via data-theme="dark" on <html> element (keep current mechanism)
• Transition: transition: background-color 200ms ease, color 200ms ease on key elements

CSS Architecture

:root {
  /* Light mode variables (default) */
  --bg-primary: #FFFFFF;
  --text-primary: #0F172A;
  /* ... all tokens ... */
}

[data-theme="dark"] {
  --bg-primary: #0F172A;
  --text-primary: #F8FAFC;
  /* ... all dark overrides ... */
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0F172A;
    --text-primary: #F8FAFC;
    /* ... */
  }
}

Map-Specific Theming

• Dark mode: Use dark map tiles (e.g., CartoDB Dark Matter or custom dark style)
• Light mode: Use standard map tiles (current behavior)
• Map controls and overlays inherit theme colors
• Video overlay backdrop: always dark (for video visibility)

---

Responsive Breakpoints

Breakpoint	Width	Layout
Mobile S	320px	Single column, bottom tabs
Mobile L	375px	Single column, bottom tabs
Tablet	768px	2 columns, bottom tabs
Desktop	1024px	Sidebar nav + content
Desktop L	1440px	Sidebar nav + wider content

Key Responsive Behaviors

1. Nav: Bottom tabs (<1024px) → Left sidebar rail (≥1024px)
2. Map trip card: Full-width bottom sheet (<768px) → Floating card (≥768px)
3. Videos panel: Bottom sheet (<768px) → Slide-in right panel (≥768px)
4. Analytics grid: 1 column (<768px) → 2 columns (768-1024px) → 4 columns (≥1024px)
5. Media tabs: Horizontal scroll pills (<768px) → Fixed pills (≥768px)
6. Tables: Card list (<768px) → Traditional table (≥768px)
7. Settings sections: Full-width stack (all sizes, same pattern)

---

User Flow Diagrams

Primary Flow: View Trip & Video

Open App → Map (landing)
  → See current/recent trip on map
  → Tap trip card to cycle trips or open trip list
  → Tap event marker on map
  → See video overlay preview
  → Tap overlay to open full video player
  → Multi-camera view with HUD
  → Back button returns to map

Alternative Flow: Browse Videos by Folder

Open App → Map (landing)
  → Tap Videos button in toolbar
  → Videos panel slides in
  → Select folder (RecentClips, SavedClips, etc.)
  → Browse video cards with thumbnails
  → Tap card to open video player
  → Back button returns to map with panel open

Settings Flow

Open App → Map (landing)
  → Tap Settings tab
  → See device status at top
  → Expand WiFi section to configure
  → Expand AP section to manage access point
  → Switch mode via dropdown
  → Back to Map

Media Management Flow

Open App → Map (landing)
  → Tap Media tab
  → See Chimes tab (default)
  → Upload new chime via drag-drop
  → Set as active
  → Switch to Music tab
  → Browse/upload music files
  → Switch to Shows tab
  → Upload light show
  → Back to Map

---

Accessibility Requirements

1. Color contrast: All text meets WCAG AA (4.5:1 for normal, 3:1 for large text)
2. Focus indicators: Visible focus ring (2px solid accent-primary, 2px offset) on all interactive elements
3. Keyboard navigation: Full tab order, Enter/Space activation, Escape to close panels/modals
4. ARIA labels: All icon-only buttons have aria-label. Map markers have descriptive labels.
5. Screen reader: Live regions for toast notifications, mode changes, upload progress
6. Reduced motion: @media (prefers-reduced-motion: reduce) disables all animations/transitions
7. Touch targets: Minimum 44×44px for all interactive elements
8. Semantic HTML: Proper use of <nav>, <main>, <section>, <article>, headings hierarchy

---

Performance Considerations (Pi Zero 2W)

1. No external font loading — Bundle Inter as a local WOFF2 file (~95KB variable) to avoid network dependency when on AP mode
2. Inline critical CSS — First paint CSS inlined in <head>, rest loaded async
3. SVG icon sprite — Single sprite sheet for all icons, cached aggressively
4. No JavaScript framework — Keep vanilla JS + Jinja2 templates (no React/Vue overhead)
5. CSS custom properties — Theme switching via CSS variables (no page reload, no JS DOM manipulation)
6. Lazy load images — Thumbnails use loading="lazy" and intersection observer
7. Service worker — Already exists for map tiles; extend to cache static assets (CSS, JS, icon sprite)
8. Bottom sheet: Pure CSS scroll-snap + minimal JS for drag (no heavy library)
9. Minimize reflows — Use transform and opacity for animations, not width/height/margin

---

Implementation Priority

Phase 1: Foundation (Design System + Navigation)

• Implement CSS custom properties for all color tokens
• Set up dark/light mode toggle with system preference detection
• Replace emoji icons with Lucide SVG icon sprite
• Build new navigation: left sidebar rail (desktop) + bottom tab bar (mobile)
• Route Map to / (make it the landing page)
• Move Settings to /settings/
• Typography: Switch to Inter (local WOFF2)

Phase 2: Map Page Transformation

• Redesign map toolbar as floating icon buttons
• Replace trip dropdown + stats bar with floating trip card
• Build videos slide-in panel (desktop) / bottom sheet (mobile)
• Implement trip cycling (prev/next arrows) on trip card
• Integrate video folder browser into the panel
• Add dark/light map tiles for theme switching

Phase 3: Media Hub

• Create unified Media page with tab pill navigation
• Migrate Lock Chimes content into Chimes sub-tab
• Migrate Music content into Music sub-tab
• Migrate Light Shows into Shows sub-tab
• Migrate Wraps into Wraps sub-tab
• Responsive table → card conversion for mobile

Phase 4: Analytics & Settings Refresh

• Redesign Analytics with card grid layout
• Redesign storage gauges as progress bars
• Reorganize Settings into collapsible sections
• Add device status card to Settings
• Replace flash messages with toast notification system

Phase 5: Polish & Accessibility

• Full accessibility audit (contrast, focus, ARIA, keyboard)
• Animation/transition polish (micro-interactions)
• Performance optimization (critical CSS, lazy loading)
• Cross-browser testing (Chrome, Safari, Firefox mobile)
• Edge case handling (offline mode, slow connection, error states)

---

Files That Will Need Changes

File	Change Type	Priority
scripts/web/static/css/style.css	Major rewrite — new design system tokens, all component styles	Phase 1
scripts/web/templates/base.html	Major rewrite — new nav structure, icon system, theme toggle	Phase 1
scripts/web/static/js/main.js	Major rewrite — new nav behavior, bottom sheet, panel toggle	Phase 1
scripts/web/blueprints/mapping.py	Route change — serve at / instead of /map/	Phase 1
scripts/web/blueprints/mode_control.py	Route change — move from / to /settings/	Phase 1
scripts/web/web_control.py	Blueprint registration order change	Phase 1
scripts/web/templates/mapping.html	Major update — floating UI, trip card, videos panel	Phase 2
scripts/web/templates/videos.html	Deprecate — content moves to map videos panel	Phase 2
scripts/web/templates/lock_chimes.html	Migrate into media hub template	Phase 3
scripts/web/templates/music.html	Migrate into media hub template	Phase 3
scripts/web/templates/light_shows.html	Migrate into media hub template	Phase 3
scripts/web/templates/wraps.html	Migrate into media hub template	Phase 3
scripts/web/templates/analytics.html	Redesign with card grid	Phase 4
scripts/web/templates/index.html	Redesign as Settings page	Phase 4
scripts/web/templates/event_player.html	Minor styling updates	Phase 5
scripts/web/static/css/analytics.css	Merge into main style.css	Phase 4
NEW: scripts/web/static/icons/	Lucide SVG icon sprite	Phase 1
NEW: scripts/web/static/fonts/inter.woff2	Bundled Inter font	Phase 1
NEW: scripts/web/templates/media.html	Unified media hub template	Phase 3
NEW: scripts/web/blueprints/media.py	Unified media blueprint (or keep separate blueprints, share template)	Phase 3

---

Summary

This redesign transforms TeslaUSB from a utility toolkit into a cohesive automotive dashboard by:

1. Making Map the hero — Full-viewport map as landing page with integrated video browsing
2. Simplifying navigation — 8 items → 4 tabs with logical grouping
3. Proper dark/light mode — Consistent, system-aware theming with automotive-grade colors
4. Mobile-first UX — Bottom tabs, bottom sheets, swipe actions, proper touch targets
5. Visual polish — SVG icons, Inter typography, consistent spacing, smooth transitions
6. Map-centric video access — Trip cards, event type markers, integrated video panel
7. Preserving what works — Map features, video overlay, multi-camera player, FSD overlay all stay

[mphacker]

Addendum: Video Management Requirements

Context — Current Capabilities

The existing video system supports:

• Download single file via /videos/download/{folder}/{event}/{file} (no UI button for this)
• Download all angles for an event as ZIP via "Download All" on the event player page
• Delete event (all angles) — edit mode only, from the event player page
• No per-card actions on the videos list — cards only navigate to the event player
• No trip-level download — cannot download all videos for an entire trip
• No bulk operations across multiple events

New Requirements

The redesigned video experience must preserve and extend all current download/delete capabilities. There are two video browsing contexts: a quick-access panel on the map, and a full advanced grid view.

---

1. Map Videos Panel (Quick Access)

As described in the main plan, the map page gets a slide-in panel (desktop right side / mobile bottom sheet). This is the lightweight video browser:

• Folder selector (RecentClips, SavedClips, SentryClips, EncryptedClips)
• Scrollable video event cards with thumbnails
• Tapping a card opens the event player (existing behavior)
• NEW: "Advanced View" button at the top of the panel that opens the full grid view

This panel is for quick spatial browsing — find the video on the map, tap it, watch it.

---

2. Advanced Video Grid View (Full Management)

A dedicated full-page view accessible via:

• The "Advanced View" button in the map videos panel
• Direct URL (e.g., /videos/)
• Potentially a sub-option under the Map tab in navigation

Layout

┌──────────────────────────────────────────────────────────────┐ │ Videos [↻ Refresh] [Grid/List toggle]│ │ │ │ Folders: [All] [RecentClips] [SavedClips] [SentryClips] │ │ │ │ Trip: April 2, 2026 2:30 PM (15.2 mi) [⬇ Download Trip]│ ├──────────────────────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ [thumbnail] │ │ [thumbnail] │ │ [thumbnail] │ │ │ │ 2:31:05 PM │ │ 2:35:22 PM │ │ 2:41:18 PM │ │ │ │ SentryClip │ │ SavedClip │ │ RecentClip │ │ │ │ 6 cameras │ │ 6 cameras │ │ 4 cameras │ │ │ │ 245 MB │ │ 180 MB │ │ 120 MB │ │ │ │ [▶] [⬇] [🗑]│ │ [▶] [⬇] [🗑]│ │ [▶] [⬇] [🗑]│ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ Trip: April 1, 2026 9:15 AM (8.7 mi) [⬇ Download Trip]│ ├──────────────────────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ │ │ │ [thumbnail] │ │ [thumbnail] │ │ │ │ ... │ │ ... │ │ │ └─────────────┘ └─────────────┘ │ └──────────────────────────────────────────────────────────────┘

Per-Card Actions (3 icon buttons on each card)

Action	Icon	Behavior
Play	play	Opens event player (full multi-camera view with HUD)
Download	download	Downloads all angles for this event as ZIP (existing endpoint)
Delete	trash-2	Deletes event — edit mode only, disabled with tooltip in present mode

Trip-Level Actions

Action	Icon	Behavior
Download Trip	download	Downloads ALL events/segments for the trip as a single ZIP

NEW backend route needed: /videos/download_trip/<trip_id> — collects all video files associated with a trip's events and creates a combined ZIP. Must handle large downloads gracefully (streaming ZIP or chunked response to avoid memory exhaustion on Pi Zero 2W).

Folder Filter Behavior

• All (default): Shows all videos grouped by trip, regardless of folder
• RecentClips / SavedClips / SentryClips: Filters to only show events from that folder
• Each folder pill shows a count badge (e.g., SavedClips (12))
• EncryptedClips: Only shown if encrypted clips exist

Grouping

• Videos are grouped by trip (date + time range + distance)
• Within each trip group, events are sorted chronologically
• Each trip group header shows: date, time range, distance, total size, and a trip-level download button
• If no trip data is available (videos not yet indexed), fall back to grouping by folder

Download Capabilities Summary

Scope	Current	New	Trigger
Single angle	✅ Backend only	✅ Add UI in event player	Click individual camera download icon
All angles (event)	✅ "Download All" ZIP	✅ Keep + add to card	Download icon on card, or "Download All" in player
All events (trip)	❌ Not supported	✅ New feature	"Download Trip" button on trip group header

Delete Behavior

• Delete button on each card (edit mode only)
• Disabled state in present mode: 40% opacity, cursor: not-allowed, tooltip "Switch to Edit Mode"
• Confirmation dialog before deletion: "Delete [event name]? This removes all camera angles."
• After deletion, card animates out and count updates
• No bulk multi-select delete (keep it simple, avoid accidental mass deletion)

---

3. Event Player Enhancements

The existing event player is preserved but gains:

• Per-camera download button — small download icon next to each camera selector pill, downloads that single angle file
• "Download All" button — existing behavior, downloads ZIP of all angles
• Back navigation — returns to the advanced grid view (if launched from there) or map (if launched from map panel)
• Breadcrumb: Videos → [Trip Name] → [Event Name] (or Map → [Event Name])

---

4. Mobile Considerations

Advanced Grid View on Mobile:

• Cards stack in a single column
• Per-card action buttons are always visible (not hidden behind hover)
• Trip group headers are sticky during scroll
• Folder filter pills scroll horizontally
• "Download Trip" button is full-width within the trip header

Event Player on Mobile:

• Camera selector is a horizontal scrollable row (as in main plan)
• Per-camera download icons are accessible via long-press or a "..." overflow menu on each camera pill
• Download All and Delete buttons are in a bottom action bar

---

5. Technical Notes

• Trip-level ZIP downloads could be very large (multi-GB). Consider:
  • Streaming ZIP generation (zipfly or streaming response) to avoid buffering entire ZIP in memory
  • Progress indication in the UI (polling endpoint or SSE)
  • Timeout handling for slow Pi Zero writes
  • Temp file cleanup on failure
• Video indexing dependency: Trip grouping requires videos to be indexed (GPS data extracted). Show a "Videos not yet indexed" state with an "Index Now" button if trip data is unavailable, falling back to folder-based grouping.
• Cache downloaded ZIPs briefly in GADGET_DIR/.cache/zip_temp (existing pattern) with automatic cleanup

[mphacker]

Addendum: UX Philosophy — Simple by Default, Powerful on Demand

Core Principle

The redesign follows a progressive disclosure pattern: the default experience is clean and simple, but advanced capabilities are always within reach for power users. No feature is removed — they're layered.

How This Applies Across the App

Layer 1: Glanceable (Zero Interaction)

What users see the moment they open the app — no taps required:

• Map with the most recent trip route and event markers
• Trip card showing date, time, distance, event count
• Mode badge (Present/Edit) in the nav
• Theme auto-detected from system preference

Layer 2: One Tap (Casual User)

The 80% use case — tap once to get what you need:

• Tap a map marker → video overlay preview
• Tap the video overlay → full multi-camera player
• Tap trip arrows → cycle through trips
• Tap Analytics tab → storage overview and stats at a glance
• Tap Media tab → see active chime, upload a file
• Tap Settings tab → see device status, switch mode

Layer 3: Deep Dive (Power User)

Advanced capabilities behind deliberate actions — a second tap, a toggle, or a panel:

• Tap Videos toolbar button → slide-in panel with folder browser
• Tap "Advanced View" in the panel → full grid view with per-card play/download/delete, trip-level downloads, folder filters
• Tap "All Trips" on the trip card → full trip list with search/filter
• Expand FSD Overlay / Heatmap / Events Filter on the map toolbar
• Expand Scheduler / Random Groups in the Chimes tab
• Expand Storage Management / System sections in Settings

Navigation Design Reflects This

Level	Desktop	Mobile
Primary (always visible)	4-icon sidebar rail	4-tab bottom bar
Secondary (one tap)	Sidebar expands to labels	Tab content loads
Tertiary (power user)	Sub-tabs, panels, expandable sections	Bottom sheets, drill-down views

The key insight: casual users never see complexity they don't need, while power users can access everything within 2 taps from any screen. Nothing is buried more than 2 levels deep.

Specific Examples

Task	Casual Path	Power User Path
Watch a video	Map → tap marker → tap overlay	Map → Videos panel → Advanced View → pick from grid
Download videos	Player → "Download All"	Advanced View → per-card download, per-camera download, or trip-level ZIP
Delete videos	Player → Delete button (edit mode)	Advanced View → per-card delete (edit mode)
Change lock chime	Media → Chimes → tap "Set Active"	Media → Chimes → Scheduler, Random Groups, Audio Trimmer
Check storage	Analytics tab → see gauges	Analytics → expand Folder Breakdown, Event Analytics charts
Configure WiFi	Settings → WiFi section (expanded by default)	Settings → expand Storage Management, System sections

Design Rule

If a feature is used by >50% of users, show it at Layer 1 or 2.
If a feature is used by <50% of users, keep it at Layer 3 — accessible but not cluttering the default view.

This means collapsible sections, slide-in panels, and "Advanced View" links are not about hiding features — they're about respecting the user's attention while ensuring power users can always get to what they need.

[mphacker]

Addendum: Mode Abstraction — Hide Present/Edit Complexity

Problem

Users don't understand "Present Mode" vs "Edit Mode." These are implementation details of the USB gadget architecture, not user-facing concepts. The mode toggle on the Settings page is confusing and intimidating.

Current State Analysis

The app already auto-switches for most write operations using quick_edit_part2() / quick_edit_part3() — a temporary RW mount that takes <1 second while the USB gadget stays active:

Operation	Current Behavior	User Action Needed
Upload chimes	✅ Auto-switches via quick_edit_part2	None
Delete chimes	✅ Auto-switches via quick_edit_part2	None
Set active chime	✅ Auto-switches via quick_edit_part2	None
Upload light shows	✅ Auto-switches via quick_edit_part2	None
Delete light shows	✅ Auto-switches via quick_edit_part2	None
Upload/delete wraps	✅ Auto-switches via quick_edit_part2	None
Upload/delete music	✅ Auto-switches via quick_edit_part3	None
WiFi/AP settings	✅ Works in both modes	None
Delete videos	❌ Blocked in Present mode	Must manually toggle to Edit mode
Samba network shares	❌ Only available in Edit mode	Must manually toggle to Edit mode

Only 2 operations require manual mode switching. Everything else is already seamless.

Proposed Changes

1. Auto-Switch Video Deletion (New: quick_edit_part1)

Implement a quick_edit_part1() function (analogous to the existing quick_edit_part2/part3) that temporarily mounts Part 1 (TeslaCam) as RW for video deletion. This removes the last common user-facing mode barrier.

Why this is safe:

• The quick_edit pattern is proven — it's been working reliably for Part 2 and Part 3
• The operation is brief (<1 second for file deletion)
• LUN backing is restored immediately after the operation
• Tesla's recording continues uninterrupted

After this change, zero common operations require manual mode switching.

2. Rename Mode Toggle → "Network Shares (Samba)"

The only remaining reason to manually enter Edit mode is to access files via Samba over the network. Reframe this for users:

Current UI:
📁 Edit Mode [──●──] 📱 Present Mode Current Mode: USB Gadget Mode (Present)

New UI (in Settings → Advanced section, collapsed by default):
▸ Advanced ┌─────────────────────────────────────────────┐ │ Network File Sharing │ │ │ │ Enable Samba to access USB drive files │ │ from your computer over the network. │ │ │ │ ⚠️ While active, the USB drive is │ │ disconnected from your Tesla. │ │ │ │ [Enable Network Sharing] or [Disable] │ │ │ │ When enabled, access files at: │ │ \\cybertruckusb\TeslaCam │ │ \\cybertruckusb\LightShow │ └─────────────────────────────────────────────┘

Key changes:

• No mention of "Edit Mode" or "Present Mode" — users see "Network Sharing"
• Clear warning that enabling disconnects the USB from Tesla
• Share paths shown only when enabled
• Hidden in an Advanced/collapsed section — most users never need it
• The underlying edit_usb.sh / present_usb.sh scripts are unchanged

3. Remove Mode Banner from All Pages

Current: Every page shows Current Mode: USB Gadget Mode (Present) in a colored banner.

New: Remove this entirely from all pages. Replace with:

• A small status dot in the nav (green = normal/connected to Tesla, amber = network sharing active)
• If network sharing is active, show a subtle persistent banner: "Network Sharing active — Tesla USB disconnected" with a one-tap "Reconnect" button

4. Mode Badge Simplification

Current badge: [● Present Mode] or [● Edit Mode]

New badge (nav bar):

• Normal state: small green dot (no label needed — this is the default, happy state)
• Network sharing active: amber dot + "Sharing" label + dismiss/reconnect option
• Unknown/error: red dot + "Disconnected" label

Most users will never see anything other than the green dot.

Summary of User Experience Change

Before:

"I want to delete a video." → Error: "Switch to Edit Mode" → Go to Settings → Figure out the toggle → Wait for mode switch → Go back to video → Delete → Go back to Settings → Switch back to Present Mode

After:

"I want to delete a video." → Tap delete → Confirm → Done.

Before:

"I want to access files on my computer." → ??? → Google "TeslaUSB edit mode" → Find Settings → Toggle → Hope it worked

After:

Settings → Advanced → "Enable Network Sharing" → See share paths → Done. Clear "Reconnect to Tesla" button when finished.

[mphacker]

Addendum: Automatic Video Indexing & Database Cleanup

Problem

Today the video indexer is manual-only — users must click "Index Videos" on the map page. There's no automatic indexing when new videos appear, and when videos are deleted (via the UI or cleanup policies), the geodata.db retains orphaned records.

Current State

Trigger	Auto-Index?	DB Cleanup?
Tesla writes new video to USB	❌ No	N/A
Mode switch (edit → present)	❌ No	N/A
App startup	❌ No (index_on_startup: false)	N/A
Manual "Index Videos" button	✅ Yes	N/A
Delete video via event player	N/A	❌ No — orphaned records remain
Cleanup policy deletes videos	N/A	❌ No — orphaned records remain

Proposed Solution

1. Auto-Index on Mode Switch (Present → Ready)

When the USB gadget enters present mode (after edit mode or on boot), new videos may have been written by Tesla. Trigger the indexer automatically:

• After present_usb.sh completes successfully, start the background indexer
• After present_usb_on_boot.service presents the gadget, start the indexer
• The indexer is already incremental (skips files with matching size/mtime), so re-running is cheap
• Add a short delay (5-10 seconds) after mode switch to let filesystem settle

2. Auto-Index on App Startup

Enable index_on_startup: true by default in config.yaml. When the web app starts:

• Check if mapping is enabled
• If so, launch the background indexer after a short delay (e.g., 30 seconds post-boot to avoid competing with gadget setup)
• This handles the common case: Pi boots, presents USB to Tesla, Tesla writes new clips, user opens the web UI later — videos are already indexed

3. Periodic Re-Index (Lightweight)

Add a periodic check (e.g., every 15-30 minutes while the app is running):

• Compare TeslaCam folder file count/total size against last indexed state
• If changed, trigger an incremental indexer run
• Use a simple "fingerprint" (file count + total bytes) to avoid expensive per-file stat checks
• Only run if indexer is not already running
• Configurable interval in config.yaml (mapping.auto_index_interval_minutes: 30)

4. Cascade Delete on Video Removal

When videos are deleted via any path, clean up geodata.db:

A. Add purge_indexed_video(db_path, video_path) to mapping_service.py:
`

• DELETE FROM indexed_files WHERE file_path = ?
• DELETE FROM waypoints WHERE video_path = ?
• DELETE FROM detected_events WHERE video_path = ?
• Recalculate affected trip (update distance, duration, end coords)
• If trip has zero remaining waypoints, DELETE the trip
  `

B. Call purge from all deletion paths:

• videos.py: delete_event() — after deleting video files, call purge for each deleted path
• cleanup_service.py: execute_cleanup() — after each file deletion, call purge
• Any future deletion paths

C. Add periodic orphan cleanup:

• On indexer startup, scan indexed_files for entries where the file no longer exists
• Purge orphaned records
• This catches deletions from external sources (Samba, manual SSH, Tesla overwriting)

5. UI Changes for Auto-Indexing

The manual "Index Videos" button on the map page remains for power users (Layer 3), but the default experience is fully automatic:

• Status indicator on map: Small text showing "Last indexed: 5 min ago · 1,234 videos" — replaces the prominent indexer controls
• Auto-index progress: If indexing is running, show a subtle progress bar in the trip card or stats area — not a modal or blocking UI
• Settings: Add toggle in Settings → Advanced: "Auto-index videos" (on by default) with interval selector

Technical Notes

• The indexer already processes one file at a time with generator patterns — safe for Pi Zero 2 W
• SQLite WAL mode allows reads while the indexer writes — map UI stays responsive during indexing
• The incremental check (file size + mtime) means redundant triggers are nearly free
• Purge operations should be wrapped in a single transaction for consistency
• Trip recalculation after purge: update distance_km, duration_seconds, end_lat/lon from remaining waypoints, or delete the trip if empty

---

Addendum: Preserve Lock Chime Audio Editor

Requirement

The lock chime audio editor/trimmer must be preserved in the new UI/UX redesign under the Media → Chimes sub-tab. It can be restyled to match the new design system but must retain all current capabilities.

Current Feature Set to Preserve

Feature	Description
Waveform visualization	2000-point downsampled waveform with real-time playback indicator (green line), trim region highlighting (blue), responsive canvas (150px desktop, 100px tablet, 80px mobile)
Trim controls	Start/end time sliders with 0.3s minimum duration, 10s max, pixel-accurate control
Playback speed	0.5x–2.0x pitch-preserving time stretch (WSOLA algorithm) — changes duration without affecting pitch
Volume normalization	LUFS-based loudness targeting: Broadcast (-23), Streaming (-16), Loud (-14), Maximum (-12)
Live preview	Plays processed audio (with speed + normalization applied) with visual position tracking on waveform
Auto-Fit	Automatically adjusts speed and trim to fit within Tesla's 1MB/10s constraints
Stats display	Original duration, trim duration, effective duration, estimated file size, actual file size, constraint status
WAV encoding	Browser-side encoding to mono 16-bit PCM 44.1 kHz WAV
Filename editing	Custom output filename before upload
Edit existing chimes	Load chime from library URL for re-trimming/re-processing

Redesign Approach

The audio editor currently opens as an expanded section within the lock chimes page. In the new Media → Chimes layout:

1. Editor trigger: Clicking "Edit" (pencil icon) on any chime in the library, or after uploading a new file that needs trimming
2. Editor location: Full-width panel that expands below the active chime card, or a slide-up panel on mobile
3. Styling: Apply design system tokens (--bg-secondary, --border, --accent-primary for trim region, --radius-lg for container)
4. Controls: Replace range sliders with design-system-styled sliders, use Lucide icons for play/pause/reset buttons
5. Stats: Use the card component pattern with --text-sm for stat labels
6. Buttons: "Upload Trimmed" uses Primary button style, "Cancel" uses Ghost button style
7. Touch targets: Ensure all slider handles and buttons are ≥44×44px on mobile
8. The JavaScript (audio_trimmer.js, 38.5 KB) and backend processing pipeline are preserved as-is — only the HTML/CSS wrapper changes

[mphacker]

Implementation Plan — Phase 1: Design System Foundation & Navigation

Feature: Complete UI/UX redesign foundation — CSS design tokens, Inter typography, Lucide SVG icons, responsive navigation (sidebar rail desktop / bottom tabs mobile), and route restructuring (Map as landing page).

Approach: Phase 1 lays the groundwork that all subsequent phases build on. The design system CSS tokens, icon sprite, and navigation shell are implemented first so Phase 2-5 work is purely content/layout within an already-functional framework.

Affected files:

• scripts/web/static/css/style.css — Major rewrite: new CSS custom properties for all design tokens (colors, typography, spacing, shadows, transitions), component styles (buttons, cards, inputs, tables), responsive navigation, dark/light mode
• scripts/web/templates/base.html — New nav structure: sidebar rail (desktop ≥1024px), bottom tab bar (mobile), theme toggle (sun/moon), status indicator, toast notification container
• scripts/web/static/js/main.js — New nav behavior: sidebar expand/collapse, mobile bottom tabs, theme toggle with system preference detection, toast notification system
• scripts/web/blueprints/mapping.py — Change url_prefix from /map to / (Map becomes landing page)
• scripts/web/blueprints/mode_control.py — Change url_prefix from / to /settings
• scripts/web/web_control.py — Adjust blueprint registration order, update catch-all route
• NEW: scripts/web/static/fonts/inter-variable.woff2 — Bundled Inter variable font
• NEW: scripts/web/static/icons/lucide-sprite.svg — SVG sprite with all needed icons
• scripts/web/templates/mapping.html — Update nav references and active page indicator
• All other templates — Update nav page variable and any hardcoded route references

Key design decisions:

• Inter font bundled locally (no CDN) — works offline on AP network
• Lucide icons as inline SVG sprite (not icon font) — smaller payload, better accessibility
• CSS custom properties for theming — instant dark/light switch without page reload
• Mobile-first: bottom tab bar is the default, sidebar rail added at ≥1024px breakpoint
• Progressive disclosure: 4 nav items (Map, Analytics, Media, Settings) replace 8

[mphacker]

Resolution

Implemented: Complete UI/UX redesign (Phases 1-5) plus auto-indexing, cascade DB cleanup, and critical protobuf reliability fix.

Phase 1-5: UI/UX Redesign

• Phase 1: Design system foundation — Inter font, Lucide SVG icons, 4-tab navigation (Map/Analytics/Media/Settings), CSS design tokens, dark/light mode
• Phase 2: Map page transformation — floating trip card with prev/next cycling, FAB toolbar, event filter popover
• Phase 3: Media hub — pill tab navigation across Lock Chimes/Music/Light Shows/Wraps
• Phase 4: Settings reorganization — collapsible <details> sections, device status card, toast notifications
• Phase 5: Accessibility polish — focus-visible, prefers-reduced-motion, safe-area-inset, 16px min font

Auto-Indexing & DB Cleanup

• Auto-index on startup when mapping.index_on_startup: true
• Auto-index on mode switch when mapping.index_on_mode_switch: true (captures new videos written by Tesla)
• Cascade DB cleanup — when videos are deleted (via UI or cleanup service), corresponding geodata.db entries (indexed_files, waypoints, detected_events, empty trips) are purged automatically
• Real-time trip updates — trip card refreshes every 10s while indexer runs

Protobuf Auto-Compilation

• sei_parser.py now auto-compiles dashcam_pb2.py from dashcam.proto when the compiled file is missing
• Surfaces ImportError loudly instead of silently returning 0 waypoints for all videos
• Added /api/index/diagnose endpoint for SEI parsing troubleshooting

Trip Card Navigation Fixes

• Trip selection preserved during indexer polling refreshes
• "All Trips" view: arrows exit back to single-trip view
• "All trips" button shows toast when no trips available

Changes

• config.yaml — Added index_on_startup, index_on_mode_switch options
• scripts/web/config.py — Added MAPPING_INDEX_ON_MODE_SWITCH
• scripts/web/web_control.py — Auto-index on startup hook
• scripts/web/blueprints/mode_control.py — Auto-index after mode switch
• scripts/web/blueprints/videos.py — Cascade geodata cleanup on delete
• scripts/web/blueprints/mapping.py — Diagnostic endpoint
• scripts/web/services/mapping_service.py — purge_deleted_videos(), trigger_auto_index(), diagnose_video(), improved logging
• scripts/web/services/sei_parser.py — Auto-compile protobuf, surface ImportError
• scripts/web/services/cleanup_service.py — Cascade geodata cleanup
• scripts/web/templates/mapping.html — Trip card fixes, real-time refresh, All Trips toggle
• scripts/web/templates/base.html — Complete nav rewrite
• scripts/web/static/css/style.css — 620+ lines of design system CSS
• scripts/web/static/js/main.js — Theme toggle, sidebar, toast system
• Plus: Inter font, Lucide sprite, media hub blueprint/template

Verification: 95 tests pass; all routes return 200; Playwright tested trip navigation, All Trips toggle, and page loading; 93 videos indexed → 4 trips, 3024 waypoints, 7 events.