docs: update PLAN.md Phase 23 completion and README project status

Phase 23 section updated with full list of changes from all polish passes:
Overview stats card, speed chart rework, mobile dashcam table fixes,
trip history mobile layout, notification badge fix, footer text.
README project status updated to reflect Phases 1-23 complete.

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-09 23:56:47 -04:00
co-authored by Copilot
parent e2f7fa88df
commit 35ec705fe2
2 changed files with 41 additions and 36 deletions
+23 -13
View File
@@ -1162,7 +1162,8 @@ client simultaneously:
uplink; Phase 22 does not prematurely implement that server schema/API.
### Phase 23: Finish web UI redesign — ✅ DONE
**Completed 2026-08-10 (commit 981b24b).** Full responsive redesign of the Pi web UI.
**Completed 2026-08-10 (final commit c685ef2).** Full responsive redesign of the Pi web UI,
including two UX polish passes and multiple bug-fix rounds.
**What was done:**
- Replaced the SB Admin 2-style fixed left sidebar with a purpose-built layout:
@@ -1170,19 +1171,28 @@ client simultaneously:
icon-only mode (`4 rem`). State persisted via `localStorage`. Logo is a functional home link.
- **Mobile (<768 px):** no sidebar. Full-width content with a sticky **bottom tab bar** (5 items:
Dashboard, Dashcam, History, DTC, Settings). Logo shown in the topbar.
- Removed every placeholder element: "Placeholder button", stub dropdown menus ("Action" /
"Another action"), inline `style` colour hacks, and meaningless card-header dropdowns.
- Dashboard now shows **6 OBD stat cards**: OBD status, speed, RPM, coolant temp, throttle,
fuel level — all wired to live socket events (`obd_coolant_temp`, `obd_fuel_level`,
`obd_throttle` added to `yaris.js`).
- GPS info section replaced with clean lat/lon display.
- DTC page fully wired to a new **`/api/dtc`** route (returns `{mil, codes}` from
`app_obd.get_fresh_mil()` / `get_fresh_dtc_codes()`). MIL indicator pill + DTC table
populated from the API on load and on manual refresh.
- Removed every placeholder element, inline style hacks, and stub dropdowns.
- Dashboard shows **6 OBD stat cards** wired to live socket events; RPM shows `—` (not `- rpm`)
when disconnected.
- GPS map and coordinates merged into one card (lat/lon in card footer).
- **Speed history chart** (Chart.js): gradient fill, 60-point rolling window, session max/avg/count,
NOW+MAX badges in header, auto-expands on desktop, collapsed by default on mobile.
- **Overview stats card** (new `/api/stats` endpoint): trips, total km, drive time, all-time max
speed, videos on Pi, active DTC count (green/red) — displayed in a 3-column bottom row alongside
GPS and speed history.
- DTC page fully wired to `/api/dtc` (MIL indicator + table, live refresh).
- `yaris.css` completely rewritten: CSS custom properties, sidebar, bottom nav, OBD cards,
`border-start-*` utilities.
- `theme.js` rewritten: localStorage-backed collapse toggle; no Bootstrap Collapse dependency.
- All 63 tests still pass. Verified on Pi at both 390×844 (mobile) and 1280×800 (desktop).
`border-start-*` utilities, mobile padding fix (removed Bootstrap `py-4 !important` conflict).
- `theme.js` rewritten: localStorage-backed collapse toggle.
- **Dashcam mobile**: thumbnail/size/date/upload columns hidden on mobile; action buttons icon-only
(`<i>` only, no text); `data_table` macro supports optional column `class`; action buttons wrapped
in `<div class="data-list-actions">` inside `<td>` (fixes desktop row layout).
- **Trip history mobile**: date shortened to `"9 Aug 18:00"` on <768 px; imperial units wrapped in
`d-none d-sm-inline` spans; Replay button icon-only (`▶`).
- **Notification badge**: repositioned with `top/right` CSS offset (was clipped by `translate-middle`).
- Footer updated to `© vroom vroom yaris de course 2023`.
- Synthetic test trip in DB: 50 points, Old Port → Plateau Montreal, 3 km, 8 min, 43.5 km/h max.
- All 63 tests pass. Verified on Pi at 390×844 (mobile) and 1280×800 (desktop).
### Phase 24: Remote trip + dashcam portal with shared web UI — 🚧 PLANNED
**Added 2026-08-09; intentionally scheduled after Phase 23.** Phase 23 first establishes the final