frontend: global km/mi distance-unit toggle across dashboard, activities, routes, records

frontend/src/pages/ActivityDetailPage.jsx

@@ -13,6 +13,7 @@ import {
   formatDuration, formatDistance, formatPace, formatElevation,
   formatHeartRate, formatDateTime, formatCadence, sportIcon,
 } from '../utils/format'
+import { useUnit } from '../hooks/useUnits'
 
 import { projectToTrack } from '../utils/track'
 
@@ -27,6 +28,7 @@ const METRICS = [
 
 export default function ActivityDetailPage() {
   const { id } = useParams()
+  const unit = useUnit()
   const [activeMetrics, setActiveMetrics] = useState(['heart_rate', 'speed_ms', 'altitude_m'])
   const [hoveredDistance, setHoveredDistance] = useState(null)
   const [mapHeight, setMapHeight] = useState(420)
@@ -155,18 +157,18 @@ export default function ActivityDetailPage() {
 
       {/* Stats — all on one row */}
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-10 gap-3">
-        <StatCard label="Distance" value={formatDistance(activity.distance_m)} />
+        <StatCard label="Distance" value={formatDistance(activity.distance_m, unit)} />
         <StatCard label="Time" value={formatDuration(activity.moving_time_s ?? activity.duration_s)}
           sub={activity.moving_time_s ? 'moving' : undefined} />
         {activity.moving_time_s != null && Math.abs(activity.moving_time_s - (activity.duration_s ?? 0)) >= 1 && (
           <StatCard label="Elapsed" value={formatDuration(activity.duration_s)} />
         )}
-        <StatCard label="Pace" value={formatPace(activity.avg_speed_ms, activity.sport_type)} />
-        <StatCard label="Elevation ↑" value={formatElevation(activity.elevation_gain_m)} />
+        <StatCard label="Pace" value={formatPace(activity.avg_speed_ms, activity.sport_type, unit)} />
+        <StatCard label="Elevation ↑" value={formatElevation(activity.elevation_gain_m, unit)} />
         <StatCard label="Avg HR" value={formatHeartRate(activity.avg_heart_rate)} accent="red" />
         <StatCard label="Calories" value={activity.calories ? `${Math.round(activity.calories)} kcal` : '--'} />
         <StatCard label="Max HR" value={formatHeartRate(activity.max_heart_rate)} />
-        <StatCard label="Elevation ↓" value={formatElevation(activity.elevation_loss_m)} />
+        <StatCard label="Elevation ↓" value={formatElevation(activity.elevation_loss_m, unit)} />
         <StatCard label="Cadence" value={formatCadence(activity.avg_cadence, activity.sport_type)} />
         <StatCard label="Avg Temp" value={activity.avg_temperature_c ? `${activity.avg_temperature_c.toFixed(1)} °C` : '--'} />
       </div>
@@ -245,8 +247,8 @@ export default function ActivityDetailPage() {
               Click two points on the route to mark the segment start and end.
             </span>
             <span className="text-gray-400">
-              Start: {segPoints[0] ? `${(segPoints[0].distance_m / 1000).toFixed(2)} km` : '—'}
-              {' · '}End: {segPoints[1] ? `${(segPoints[1].distance_m / 1000).toFixed(2)} km` : '—'}
+              Start: {segPoints[0] ? formatDistance(segPoints[0].distance_m, unit) : '—'}
+              {' · '}End: {segPoints[1] ? formatDistance(segPoints[1].distance_m, unit) : '—'}
             </span>
             {segPoints.length === 2 && (
               <>
@@ -318,9 +320,10 @@ export default function ActivityDetailPage() {
           <MetricTimeline
             dataPoints={dataPoints}
             activeMetrics={activeMetrics.filter(m => availableMetrics.has(m))}
-            metrics={METRICS}
+            metrics={METRICS.map(m => m.key === 'altitude_m' ? { ...m, unit: unit === 'mi' ? 'ft' : 'm' } : m)}
             onHoverDistance={setHoveredDistance}
             sportType={activity.sport_type}
+            unit={unit}
           />
         ) : (
           <p className="text-gray-600 text-sm text-center py-8">No timeline data available for this activity</p>
@@ -335,7 +338,7 @@ export default function ActivityDetailPage() {
           {laps && laps.length > 0 && (
             <div className="flex-1 min-w-[300px] bg-gray-900 rounded-xl border border-gray-800 p-4">
               <h3 className="text-sm font-medium text-gray-300 mb-3">Laps</h3>
-              <LapTable laps={laps} sportType={activity.sport_type} lapBests={lapBests} records={activityRecords} />
+              <LapTable laps={laps} sportType={activity.sport_type} lapBests={lapBests} records={activityRecords} unit={unit} />
             </div>
           )}
           {routeBoard && routeBoard.top?.length > 0 && (