From f27e2f2d4b54527dd269fdce8012b3fa4ca41e87 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 10 Aug 2026 02:38:50 -0400
Subject: [PATCH] ui: remove imperial units, hide Replay button on mobile

- formatDistance/formatSpeed: km/km/h only, no mi/mph
- Replay button hidden on mobile (d-none d-sm-table-cell)
- Action column header hidden on mobile to match
- data_table macro supports optional 'class' on column headers

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 static/js/history.js      | 9 +++------
 templates/components.html | 2 +-
 templates/history.html    | 2 +-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/static/js/history.js b/static/js/history.js
index 1b0b452..d0c67b8 100644
--- a/static/js/history.js
+++ b/static/js/history.js
@@ -36,14 +36,11 @@
     }
 
     function formatDistance(kilometers) {
-        const miles = kilometers * 0.621371;
-        return `${kilometers.toFixed(kilometers < 1 ? 2 : 1)} km / `
-            + `${miles.toFixed(miles < 1 ? 2 : 1)} mi`;
+        return `${kilometers.toFixed(kilometers < 1 ? 2 : 1)} km`;
     }
 
     function formatSpeed(kilometersPerHour) {
-        return `${kilometersPerHour.toFixed(1)} km/h / `
-            + `${(kilometersPerHour * 0.621371).toFixed(1)} mph`;
+        return `${kilometersPerHour.toFixed(1)} km/h`;
     }
 
     function showError(message) {
@@ -157,7 +154,7 @@
                 <td>${formatDuration(trip.duration_seconds)}</td>
                 <td>${formatSpeed(trip.max_speed_kmh)}</td>
                 <td class="text-muted small">${trip.odo_start_km.toFixed(0)} → ${trip.odo_end_km.toFixed(0)} km</td>
-                <td class="text-end">
+                <td class="text-end d-none d-sm-table-cell">
                     <button class="btn btn-sm btn-primary" type="button" data-trip-id="${trip.id}">
                         Replay
                     </button>
diff --git a/templates/components.html b/templates/components.html
index 474a437..324d25d 100644
--- a/templates/components.html
+++ b/templates/components.html
@@ -5,7 +5,7 @@
             <thead>
                 <tr>
                     {% for column in columns %}
-                    <th scope="col"{% if column.sortable %} aria-sort="none"{% endif %}>
+                    <th scope="col"{% if column.class %} class="{{ column.class }}"{% endif %}{% if column.sortable %} aria-sort="none"{% endif %}>
                         {% if column.sortable %}
                         <button class="data-list-sort" type="button" data-sort-key="{{ column.key }}">
                             {{ column.label }}
diff --git a/templates/history.html b/templates/history.html
index 6d78beb..2909a63 100644
--- a/templates/history.html
+++ b/templates/history.html
@@ -32,7 +32,7 @@
                         {"key": "duration", "label": "Time", "sortable": true},
                         {"key": "maxSpeed", "label": "Max", "sortable": true},
                         {"key": "odometer", "label": "Odometer", "sortable": false},
-                        {"key": "action", "label": "", "sortable": false}
+                        {"key": "action", "label": "", "sortable": false, "class": "d-none d-sm-table-cell"}
                     ],
                     "No trips detected",
                     "Trip history appears after sustained GPS or OBD movement is recorded."