feat(web): add distance unit toggle between metric and imperial

web/src/components/SettingsMenu.tsx

@@ -4,9 +4,10 @@
  */
 
 import React, { useState } from "react";
-import { Cog6ToothIcon, BellIcon, ClockIcon } from "@heroicons/react/24/outline";
+import { Cog6ToothIcon, BellIcon, ClockIcon, MapPinIcon } from "@heroicons/react/24/outline";
 import { NotificationSettings } from "./settings/NotificationSettings";
 import { TimeFormatSettings } from "./settings/TimeFormatSettings";
+import { DistanceSettings } from "./settings/DistanceSettings";
 import { Button } from "@/components/ui/Button";
 import {
   Dialog,
@@ -41,6 +42,12 @@ const settingsSections: SettingsSection[] = [
     icon: <ClockIcon className="w-4 h-4" />,
     component: TimeFormatSettings,
   },
+  {
+    id: "distance",
+    label: "Distance Units",
+    icon: <MapPinIcon className="w-4 h-4" />,
+    component: DistanceSettings,
+  },
 ];
 
 export const SettingsMenu: React.FC = () => {

web/src/components/settings/DistanceSettings.tsx

@@ -0,0 +1,151 @@
+/*
+ * Copyright (c) 2024-2025, s0up and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import React, { useState } from "react";
+import { MapPinIcon, CheckIcon } from "@heroicons/react/24/outline";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/Button";
+import {
+  getDistanceSettings,
+  saveDistanceSettings,
+  formatDistance,
+  type DistanceSettings as DistanceSettingsType,
+  type DistanceUnit,
+} from "@/utils/distanceSettings";
+import { showToast } from "@/components/common/Toast";
+
+export const DistanceSettings: React.FC = () => {
+  const [settings, setSettings] = useState<DistanceSettingsType>(getDistanceSettings);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  const updateUnit = (unit: DistanceUnit) => {
+    setSettings({ unit });
+    setHasChanges(true);
+  };
+
+  const saveSettings = () => {
+    saveDistanceSettings(settings);
+    setHasChanges(false);
+    showToast("Distance settings saved", "success", {
+      description: "Changes will be applied across the application",
+    });
+  };
+
+  const resetToDefaults = () => {
+    setSettings({ unit: "km" });
+    setHasChanges(true);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h3 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+            <MapPinIcon className="w-6 h-6 text-gray-600 dark:text-gray-400" />
+            Distance Settings
+          </h3>
+          <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+            Choose between metric and imperial units for distance display
+          </p>
+        </div>
+
+        {hasChanges && (
+          <div className="flex items-center gap-2">
+            <Button
+              onClick={saveSettings}
+              className="bg-blue-600 hover:bg-blue-700 text-white"
+            >
+              <CheckIcon className="w-4 h-4" />
+              Save Changes
+            </Button>
+            <Button
+              onClick={() => {
+                setSettings(getDistanceSettings());
+                setHasChanges(false);
+              }}
+              variant="secondary"
+            >
+              Cancel
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MapPinIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+              Distance Unit
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex gap-3">
+              <button
+                onClick={() => updateUnit("km")}
+                className={`flex-1 p-4 rounded-lg border transition-colors text-left ${
+                  settings.unit === "km"
+                    ? "bg-blue-500/10 border-blue-400/50"
+                    : "bg-gray-200/50 dark:bg-gray-800/50 border-gray-300 dark:border-gray-800 hover:bg-gray-300/50 dark:hover:bg-gray-800"
+                }`}
+              >
+                <div className="font-medium text-gray-900 dark:text-white">Metric</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Kilometers (km)</div>
+              </button>
+              <button
+                onClick={() => updateUnit("mi")}
+                className={`flex-1 p-4 rounded-lg border transition-colors text-left ${
+                  settings.unit === "mi"
+                    ? "bg-blue-500/10 border-blue-400/50"
+                    : "bg-gray-200/50 dark:bg-gray-800/50 border-gray-300 dark:border-gray-800 hover:bg-gray-300/50 dark:hover:bg-gray-800"
+                }`}
+              >
+                <div className="font-medium text-gray-900 dark:text-white">Imperial</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Miles (mi)</div>
+              </button>
+            </div>
+
+            <div className="p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg">
+              <div className="flex items-start gap-2">
+                <MapPinIcon className="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
+                <div className="text-sm">
+                  <div className="font-medium text-blue-900 dark:text-blue-300">
+                    Preview
+                  </div>
+                  <div className="text-blue-700 dark:text-blue-400 mt-1">
+                    100 km = <span className="font-mono">{formatDistance(100, settings)}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <h4 className="font-medium text-gray-900 dark:text-white">
+                Quick Actions
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                Reset settings or apply common configurations
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                onClick={resetToDefaults}
+                variant="outline"
+              >
+                Reset to Defaults
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

web/src/components/speedtest/ServerList.tsx

@@ -18,6 +18,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { formatDistance, useDistanceSettings } from "@/utils/distanceSettings";
 import {
   Select,
   SelectContent,
@@ -92,6 +93,7 @@ export const ServerList: React.FC<ServerListProps> = ({
     const saved = localStorage.getItem("server-list-open");
     return saved === null ? true : saved === "true";
   });
+  const { settings: distanceSettings } = useDistanceSettings();
 
   // Persist server list open state to localStorage
   useEffect(() => {
@@ -560,9 +562,7 @@ export const ServerList: React.FC<ServerListProps> = ({
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                           {filteredServersWithSelect
                             .slice(0, displayCount)
-                            .map((server) => {
-                              const distance = server.distance;
-                              return (
+                            .map((server) => (
                                 <motion.div
                                   key={server.id}
                                   initial={{ opacity: 0, y: 20 }}
@@ -607,13 +607,12 @@ export const ServerList: React.FC<ServerListProps> = ({
                                       </span>
                                       <span className="text-gray-600 dark:text-gray-400 text-sm mt-1">
                                         {server.country} -{" "}
-                                        {Math.floor(distance)} km
+                                        {formatDistance(server.distance, distanceSettings)}
                                       </span>
                                     </div>
                                   </button>
                                 </motion.div>
-                              );
-                            })}
+                              ))}
                         </div>
                       )}
                     </>

web/src/components/speedtest/traceroute/components/ServerCard.tsx

@@ -11,6 +11,7 @@ import {
   getServerTypeLabel,
   getServerTypeColorClass,
 } from "../utils/serverUtils";
+import { formatDistance, useDistanceSettings } from "@/utils/distanceSettings";
 
 interface ServerCardProps {
   server: Server;
@@ -25,6 +26,8 @@ export const ServerCard: React.FC<ServerCardProps> = ({
   onSelect,
   disabled = false,
 }) => {
+  const { settings: distanceSettings } = useDistanceSettings();
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -53,7 +56,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({
           <span className="text-gray-600 dark:text-gray-400 text-sm mt-1">
             {server.isIperf
               ? "Custom Server"
-              : `${server.country} - ${Math.floor(server.distance)} km`}
+              : `${server.country} - ${formatDistance(server.distance, distanceSettings)}`}
             <span className={`ml-2 ${getServerTypeColorClass(server)}`}>
               {getServerTypeLabel(server)}
             </span>

web/src/utils/distanceSettings.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2024-2025, s0up and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import React from "react";
+
+export type DistanceUnit = "km" | "mi";
+
+export interface DistanceSettings {
+  unit: DistanceUnit;
+}
+
+const DISTANCE_SETTINGS_KEY = "netronome-distance-settings";
+const DEFAULT_SETTINGS: DistanceSettings = {
+  unit: "km",
+};
+
+const KM_TO_MI = 0.621371;
+
+export const getDistanceSettings = (): DistanceSettings => {
+  try {
+    const saved = localStorage.getItem(DISTANCE_SETTINGS_KEY);
+    if (saved) {
+      const settings = JSON.parse(saved);
+      return {
+        unit: settings.unit === "mi" ? "mi" : "km",
+      };
+    }
+  } catch (error) {
+    console.warn("Failed to load distance settings from localStorage:", error);
+  }
+  return DEFAULT_SETTINGS;
+};
+
+export const saveDistanceSettings = (settings: DistanceSettings): void => {
+  try {
+    localStorage.setItem(DISTANCE_SETTINGS_KEY, JSON.stringify(settings));
+    window.dispatchEvent(new CustomEvent("distanceSettingsChanged", { detail: settings }));
+  } catch (error) {
+    console.warn("Failed to save distance settings to localStorage:", error);
+  }
+};
+
+export const formatDistance = (distanceKm: number, settings?: DistanceSettings): string => {
+  const currentSettings = settings || getDistanceSettings();
+  if (currentSettings.unit === "mi") {
+    return `${Math.round(distanceKm * KM_TO_MI)} mi`;
+  }
+  return `${Math.round(distanceKm)} km`;
+};
+
+export const useDistanceSettings = (): { settings: DistanceSettings; updateSettings: (newSettings: DistanceSettings) => void } => {
+  const [settings, setSettings] = React.useState<DistanceSettings>(getDistanceSettings);
+
+  React.useEffect(() => {
+    const handleSettingsChange = (event: CustomEvent<DistanceSettings>) => {
+      setSettings(event.detail);
+    };
+
+    window.addEventListener("distanceSettingsChanged", handleSettingsChange as EventListener);
+
+    return () => {
+      window.removeEventListener("distanceSettingsChanged", handleSettingsChange as EventListener);
+    };
+  }, []);
+
+  const updateSettings = (newSettings: DistanceSettings) => {
+    saveDistanceSettings(newSettings);
+    setSettings(newSettings);
+  };
+
+  return { settings, updateSettings };
+};