feat(units): show distances in miles

Everything is computed in kilometres and converted once at display time, in
lib/units — storing miles anywhere would give the same number two sources of
truth and a rounding error that grows with every hop.

The grids capture the unit inside their column definitions, header and formatter
both, so a change is published to them the way the date format already is;
without that a toggle would only appear after a language change or a restart.
The preference is portable, like the other display ones.

frontend/src/components/ClusterGrid.tsx

@@ -15,6 +15,7 @@ import { cleanSpotter, inferSpotMode, spotStatusKey } from '@/lib/spot';
 import { markerColour } from '@/lib/spotMarkers';
 import { applySpotDisplay, readSpotDisplayOptions } from '@/lib/spotDisplay';
 import { loadLocal, loadRemote, saveState, seedLocal, whenGridPrefsReady } from '@/lib/gridPrefs';
+import { distanceUnit, distanceValue, subscribeDistanceUnit } from '@/lib/units';
 import { useI18n } from '@/lib/i18n';
 
 type TFn = (key: string, vars?: Record<string, string | number>) => string;
@@ -443,8 +444,13 @@ const makeColCatalog = (t: TFn): ColEntry[] => [
   },
   {
     group: 'Geo', label: t('clg2.c.distance_km'), colId: 'distance_km',
-    headerName: t('clg2.h.distance_km'), field: 'distance_km' as any, width: 80, type: 'rightAligned', cellClass: 'font-mono',
-    valueFormatter: (p) => p.value ? String(p.value) : '',
+    // The header carries the unit, so the cells stay bare numbers and the
+    // column still sorts on the km the backend sent — converting the VALUE
+    // would sort miles as if they were kilometres either way, but it would
+    // also round twice.
+    headerName: t('clg2.h.distance_km') + ' (' + distanceUnit() + ')',
+    field: 'distance_km' as any, width: 90, type: 'rightAligned', cellClass: 'font-mono',
+    valueFormatter: (p) => p.value ? String(distanceValue(p.value)) : '',
     comparator: (a, b) => (a ?? 0) - (b ?? 0),
   },
   {
@@ -523,7 +529,9 @@ export function ClusterGrid({ rows, spotStatus, onSpotClick, onSpotSelect }: Pro
   const [pickerOpen, setPickerOpen] = useState(false);
 
   // Localized column catalog — rebuilt when the language changes.
-  const COL_CATALOG = useMemo(() => makeColCatalog(t), [t]);
+  const [distUnit, setDistUnit] = useState(distanceUnit);
+  useEffect(() => subscribeDistanceUnit(() => setDistUnit(distanceUnit())), []);
+  const COL_CATALOG = useMemo(() => makeColCatalog(t), [t, distUnit]);
 
   // A rebuild makes AG Grid re-apply every colDef hide/width DEFAULT and fire the
   // matching column events. Without this guard those events were persisted, so a