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/MainMap.tsx

@@ -4,6 +4,7 @@ import 'leaflet/dist/leaflet.css';
 import { nightPolygon } from '../lib/greyline';
 import { gridToLatLon, gridSquareBounds, greatCirclePoints, pathBetween, destinationPoint } from '@/lib/maidenhead';
 import { writeUiPref } from '@/lib/uiPref';
+import { formatDistance } from '@/lib/units';
 
 // Persisted free-pan view of the world map (when auto-zoom is off).
 function loadMapView(): { lat: number; lon: number; zoom: number } | null {
@@ -446,8 +447,8 @@ export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, b
       </button>
       {path && (
         <div className="absolute bottom-1 left-1 z-[500] rounded-md bg-card/90 backdrop-blur px-2 py-1 text-[11px] font-mono shadow border border-border pointer-events-none">
-          <div><span className="text-muted-foreground">Dist</span> {Math.round(path.distanceShort).toLocaleString()} km
-            <span className="text-muted-foreground"> · LP</span> {Math.round(path.distanceLong).toLocaleString()} km</div>
+          <div><span className="text-muted-foreground">Dist</span> {formatDistance(path.distanceShort)}
+            <span className="text-muted-foreground"> · LP</span> {formatDistance(path.distanceLong)}</div>
           <div><span className="text-muted-foreground">Az SP</span> {Math.round(path.bearingShort)}°
             <span className="text-muted-foreground"> · LP</span> {Math.round(path.bearingLong)}°</div>
         </div>