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

frontend/src/pages/RecordsPage.jsx

@@ -5,6 +5,7 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContai
 import { format } from 'date-fns'
 import api from '../utils/api'
 import { formatDuration, formatDate, formatPace, formatDistance } from '../utils/format'
+import { useUnit } from '../hooks/useUnits'
 import RouteMiniMap from '../components/ui/RouteMiniMap'
 
 const SPORTS = ['running', 'cycling']
@@ -155,6 +156,7 @@ function DistancePRs() {
 
 function RouteRecords() {
   const navigate = useNavigate()
+  const unit = useUnit()
   const { data: records, isLoading } = useQuery({
     queryKey: ['route-records'],
     queryFn: () => api.get('/records/routes').then(r => r.data),
@@ -198,13 +200,13 @@ function RouteRecords() {
                 {rec.route_name}
               </td>
               <td className="px-3 py-3 text-right text-gray-400 text-xs">
-                {formatDistance(rec.distance_m)}
+                {formatDistance(rec.distance_m, unit)}
               </td>
               <td className="px-3 py-3 text-right font-mono text-yellow-400 font-semibold">
                 {formatDuration(rec.duration_s)}
               </td>
               <td className="hidden sm:table-cell px-3 py-3 text-right text-gray-400 text-xs">
-                {formatPace(rec.avg_speed_ms, rec.sport_type)}
+                {formatPace(rec.avg_speed_ms, rec.sport_type, unit)}
               </td>
               <td className="hidden sm:table-cell px-3 py-3 text-right text-gray-400 text-xs">
                 {formatDate(rec.start_time)}
@@ -243,6 +245,7 @@ function SegmentLeaderboard({ segmentId }) {
 
 function SegmentRecords() {
   const [open, setOpen] = useState(null)
+  const unit = useUnit()
   const { data: segments, isLoading } = useQuery({
     queryKey: ['segments'],
     queryFn: () => api.get('/segments/').then(r => r.data),
@@ -287,7 +290,7 @@ function SegmentRecords() {
                   {seg.name}
                 </td>
                 <td className="px-3 py-3 text-right text-gray-400 text-xs">
-                  {formatDistance(seg.distance_m)}
+                  {formatDistance(seg.distance_m, unit)}
                 </td>
                 <td className="px-3 py-3 text-right font-mono text-yellow-400 font-semibold">
                   {seg.best_s != null ? formatDuration(seg.best_s) : '--'}