Complete shared UI foundation

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

PLAN.md

@@ -780,7 +780,7 @@ classic cause of SD card corruption on embedded Pi projects. Two complementary a
   mounted root filesystem is not safe. Clean shutdown likewise needs delayed-power or
   ignition-sense hardware before software can implement it.
 
-### Phase 15: UI design-system foundation — 🚧 PLANNED
+### Phase 15: UI design-system foundation — ✅ DONE
 **New phase, pulled forward from the old "do the whole redesign at the end" plan.** Building the
 Phase 16/17 file browsers (and later the trip-history/Pi-health/settings pages) against the
 current old admin-template style just means rebuilding the same UI twice once the full redesign
@@ -792,6 +792,23 @@ instead of writing bespoke list/delete UI code from scratch each time. Not a ful
 every existing page yet - just establishes the pattern once so nothing built after this point
 needs to be redone in Phase 22.
 
+**Implemented 2026-08-09**:
+- Added a shared Jinja shell (`templates/base.html`) for navigation, top bar, footer, common
+  styles/scripts, page titles, and per-route active navigation. Converted `/`, `/dash`, and
+  `/dtc` to extend it, removing their duplicated shell markup while preserving page content and
+  page-specific assets.
+- Added a reusable data-table macro (`templates/components.html`) and generic
+  `static/js/data-list.js` behavior for dynamic empty states, numeric/text sorting, accessible
+  sort direction, and capture-phase confirmation that can stop destructive row handlers before
+  they execute. `static/yaris.css` supplies the shared list/action styling.
+- Used the empty `/dtc` page as the first component consumer without pulling its Phase 22 OBD
+  wiring forward. Also stopped loading dashboard-only `yaris.js` there and guarded its optional
+  `#obd-error` target after browser testing exposed an existing null dereference.
+- Verified Jinja rendering and one active nav item on all three routes, JavaScript syntax, and
+  live Pi HTTP 200 responses. Browser-tested all pages at 1280px and 390px with no horizontal
+  overflow; injected sample rows confirmed ascending sort, `aria-sort`, empty-state switching,
+  and cancellation of a destructive handler.
+
 ### Phase 16: Dashcam USB file browser (list + delete) — 🚧 PLANNED
 Replace the current all-or-nothing "Import videos" flow's blind spot (no visibility into what's
 actually on the camera) with a real file browser for the mounted USB dashcam device, built on the

static/js/yaris.js

@@ -93,7 +93,9 @@ socket.on('obd_rpm', function(data) {
 socket.on('obd_error', function(data) {
     console.log("obd errors "+data);
     const status = document.getElementById('obd-error');
-    status.innerHTML = data;
+    if (status) {
+        status.innerHTML = data;
+    }
 });
 
 socket.on('rpi_uptime', function(data) {
@@ -119,4 +121,4 @@ socket.on('gps_location', function(data) {
             mapCentered = true;
         }
     }
-});
+});