Phase 23: UI redesign — responsive mobile + desktop layout

- Replace SB Admin 2 sidebar with a clean fixed sidebar (desktop)
  and a sticky bottom tab navigation (mobile, ≤767px)
- Sidebar collapses to icon-only mode with state persisted in localStorage
- Logo is a functional home link on all viewports
- Mobile: full-width content, bottom nav replaces sidebar
- Dashboard: 6 OBD stat cards (status, speed, RPM, coolant, throttle, fuel)
  wired to live socket events; removed all placeholder buttons/dropdowns
- GPS info section cleaned up (lat/lon display instead of X/Y paragraphs)
- DTC page: live /api/dtc wiring — MIL indicator + DTC table populated from API
- New /api/dtc route added to app.py (mil + codes)
- yaris.js: added obd_coolant_temp / obd_fuel_level / obd_throttle listeners
- yaris.css: full rewrite — layout variables, sidebar, bottom nav, OBD cards,
  border-start utilities, mobile padding for bottom nav

Co-authored-by: Copilot <[email protected]>

static/js/theme.js

@@ -1,76 +1,30 @@
-(function() {
-  "use strict"; // Start of use strict
+(function () {
+    'use strict';
 
-  var sidebar = document.querySelector('.sidebar');
-  var sidebarToggles = document.querySelectorAll('#sidebarToggle, #sidebarToggleTop');
-  
-  if (sidebar) {
-    
-    var collapseEl = sidebar.querySelector('.collapse');
-    var collapseElementList = [].slice.call(document.querySelectorAll('.sidebar .collapse'))
-    var sidebarCollapseList = collapseElementList.map(function (collapseEl) {
-      return new bootstrap.Collapse(collapseEl, { toggle: false });
-    });
+    const COLLAPSED_KEY = 'sidebar-collapsed';
+    const sidebar = document.getElementById('app-sidebar');
+    const contentWrapper = document.getElementById('content-wrapper');
+    const toggleBtn = document.getElementById('sidebarToggle');
 
-    for (var toggle of sidebarToggles) {
+    if (!sidebar) return;
 
-      // Toggle the side navigation
-      toggle.addEventListener('click', function(e) {
-        document.body.classList.toggle('sidebar-toggled');
-        sidebar.classList.toggle('toggled');
-
-        if (sidebar.classList.contains('toggled')) {
-          for (var bsCollapse of sidebarCollapseList) {
-            bsCollapse.hide();
-          }
-        };
-      });
+    function applyCollapsed(collapsed) {
+        sidebar.classList.toggle('collapsed', collapsed);
+        contentWrapper.classList.toggle('sidebar-collapsed', collapsed);
+        const icon = toggleBtn && toggleBtn.querySelector('i');
+        if (icon) {
+            icon.className = collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-left';
+        }
     }
 
-    // Close any open menu accordions when window is resized below 768px
-    window.addEventListener('resize', function() {
-      var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    // Restore saved state
+    applyCollapsed(localStorage.getItem(COLLAPSED_KEY) === '1');
 
-      if (vw < 768) {
-        for (var bsCollapse of sidebarCollapseList) {
-          bsCollapse.hide();
-        }
-      };
-    });
-  }
-
-  // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
-  
-  var fixedNaigation = document.querySelector('body.fixed-nav .sidebar');
-  
-  if (fixedNaigation) {
-    fixedNaigation.on('mousewheel DOMMouseScroll wheel', function(e) {
-      var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-
-      if (vw > 768) {
-        var e0 = e.originalEvent,
-          delta = e0.wheelDelta || -e0.detail;
-        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
-        e.preventDefault();
-      }
-    });
-  }
-
-  var scrollToTop = document.querySelector('.scroll-to-top');
-  
-  if (scrollToTop) {
-    
-    // Scroll to top button appear
-    window.addEventListener('scroll', function() {
-      var scrollDistance = window.pageYOffset;
-
-      //check if user is scrolling up
-      if (scrollDistance > 100) {
-        scrollToTop.style.display = 'block';
-      } else {
-        scrollToTop.style.display = 'none';
-      }
-    });
-  }
-
-})(); // End of use strict
+    if (toggleBtn) {
+        toggleBtn.addEventListener('click', function () {
+            const nowCollapsed = !sidebar.classList.contains('collapsed');
+            applyCollapsed(nowCollapsed);
+            localStorage.setItem(COLLAPSED_KEY, nowCollapsed ? '1' : '0');
+        });
+    }
+})();

static/js/yaris.js

@@ -94,6 +94,21 @@ socket.on('obd_rpm', function(data) {
     status.innerHTML = data;
 });
 
+socket.on('obd_coolant_temp', function(data) {
+    const el = document.getElementById('obd-coolant');
+    if (el) el.textContent = data != null ? data + ' °C' : '—';
+});
+
+socket.on('obd_fuel_level', function(data) {
+    const el = document.getElementById('obd-fuel');
+    if (el) el.textContent = data != null ? data + ' %' : '—';
+});
+
+socket.on('obd_throttle', function(data) {
+    const el = document.getElementById('obd-throttle');
+    if (el) el.textContent = data != null ? data + ' %' : '—';
+});
+
 socket.on('obd_error', function(data) {
     console.log("obd errors "+data);
     const status = document.getElementById('obd-error');