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

@@ -80,6 +80,7 @@ import {
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
 import { writeUiPref } from '@/lib/uiPref';
+import { setUseMiles } from '@/lib/units';
 import { getDateFormat, setDateFormat, type DateFormat } from '@/lib/dateFormat';
 import { useI18n, FlagGB, FlagFR, type Lang } from '@/lib/i18n';
 import { useTheme, CONCRETE_THEMES, type ThemeChoice } from '@/lib/theme';
@@ -1747,6 +1748,7 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
   const [startEqEnd, setStartEqEnd] = useState(() => localStorage.getItem('opslog.startEqualsEnd') === '1');
   const [lookupOnBlur, setLookupOnBlur] = useState(() => localStorage.getItem('opslog.lookupOnBlur') === '1');
   const [groupDigital, setGroupDigital] = useState(() => localStorage.getItem('opslog.groupDigitalSlots') === '1');
+  const [milesUnit, setMilesUnit] = useState(() => localStorage.getItem('opslog.distanceMiles') === '1');
   const [clusterWorkedSameSlot, setClusterWorkedSameSlot] = useState(() => localStorage.getItem('opslog.clusterWorkedSameSlot') === '1');
   // Declared HERE and not in ClusterPanel: that renderer is called as a plain
   // function by the PANELS map, so it must stay hooks-free.
@@ -7221,6 +7223,13 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
             <Checkbox checked={groupDigital} onCheckedChange={(c) => { const v = !!c; setGroupDigital(v); writeUiPref('opslog.groupDigitalSlots', v ? '1' : '0'); }} />
             {t('gen.groupDigital')} <span className="text-xs text-muted-foreground">{t('gen.groupDigitalHint')}</span>
           </label>
+          <label className="flex items-center gap-2 text-sm cursor-pointer">
+            {/* Distances are computed in km everywhere and converted at display
+                time — see lib/units. Changing this repaints the columns that
+                already carry a distance; nothing stored moves. */}
+            <Checkbox checked={milesUnit} onCheckedChange={(c) => { const v = !!c; setMilesUnit(v); setUseMiles(v); }} />
+            {t('gen.miles')} <span className="text-xs text-muted-foreground">{t('gen.milesHint')}</span>
+          </label>
           <label className="flex items-center gap-2 text-sm cursor-pointer">
             <Checkbox checked={checkUpdates} onCheckedChange={(c) => { const v = !!c; setCheckUpdates(v); writeUiPref('opslog.checkUpdates', v ? '1' : '0'); }} />
             {t('gen.checkUpdates')} <span className="text-xs text-muted-foreground">{t('gen.checkUpdatesHint')}</span>