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

[s0up4200]

Summary

• Adds a "Distance Units" settings panel accessible from the gear icon menu, allowing users to switch between kilometers (metric) and miles (imperial)
• Preference persists in localStorage and reactively updates all server distance displays (speed test server list and traceroute server cards)
• Follows the existing timeSettings.ts / TimeFormatSettings.tsx architecture pattern

Closes #142

Test plan

• Open Settings > Distance Units
• Select "Imperial" and save, verify server distances display in miles
• Select "Metric" and save, verify server distances display in kilometers
• Refresh the page and verify the preference persists
• Check both the speed test server list and traceroute server cards show the correct unit
• Verify "Reset to Defaults" reverts to kilometers

Summary by CodeRabbit

• New Features
  • Added a "Distance Units" setting in Settings, letting users choose Metric (km) or Imperial (mi).
  • Distance displays across the app now reflect the selected unit preference.
  • Settings screen shows a live distance preview, Save/Cancel actions, a Reset to Defaults quick action, and saves preferences with a confirmation toast.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a distance unit settings feature (km/mi): a new settings panel component, a centralized distanceSettings utility with persistence and formatting, and updates server-related UI to use the configurable distance formatting.

Changes

Cohort / File(s)	Summary
Settings menu & UI web/src/components/SettingsMenu.tsx, web/src/components/settings/DistanceSettings.tsx	Adds a new "Distance Units" section to the SettingsMenu and implements DistanceSettings React component for selecting Metric/Imperial, previewing formatted distances, and save/cancel/reset actions.
Distance utilities web/src/utils/distanceSettings.ts	New module exporting DistanceUnit, DistanceSettings, getDistanceSettings, saveDistanceSettings, formatDistance, and useDistanceSettings hook; persists to localStorage and dispatches a change event for sync.
Server distance display updates web/src/components/speedtest/ServerList.tsx, web/src/components/speedtest/traceroute/components/ServerCard.tsx	Replaces raw numeric distance output with formatDistance(server.distance, distanceSettings) via useDistanceSettings() to render distances according to configured unit.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant SettingsComp as DistanceSettings<br/>Component
    participant Utils as distanceSettings<br/>Utilities
    participant Storage as localStorage
    participant Clients as ServerList / ServerCard

    User->>SettingsComp: Select unit (km/mi)
    SettingsComp->>Utils: saveDistanceSettings(newSettings)
    Utils->>Storage: write DISTANCE_SETTINGS_KEY
    Utils->>Clients: dispatch "distanceSettingsChanged"
    Clients->>Utils: useDistanceSettings hook receives update
    Clients->>Clients: Re-render using formatDistance(...)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I hop, I nibble, I toggle with delight,
Kilometers or miles now glowing in sight.
Settings tucked safe in storage below,
Components refresh — off we go! 🚀

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and concisely describes the main feature being added: a distance unit toggle between metric (kilometers) and imperial (miles) systems.
Linked Issues check	✅ Passed	The pull request fully implements the requirements from issue #142 by adding configurable distance unit switching, persistent localStorage storage, and reactive updates across all distance displays.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the distance unit toggle feature: new DistanceSettings component, utility functions, integration into SettingsMenu, and updates to distance displays in ServerList and ServerCard components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@web/src/components/settings/DistanceSettings.tsx`:
- Around line 28-34: The UI currently shows a success toast unconditionally in
saveSettings; change saveDistanceSettings to return a success indicator (boolean
or resolved/rejected promise) and update saveSettings to await/check that
result: only call setHasChanges(false) and showToast("Distance settings saved",
"success", ...) when persistence succeeded, otherwise call showToast("Failed to
save distance settings", "error", { description: <error or helpful message> })
and keep hasChanges true; reference saveSettings, saveDistanceSettings,
setHasChanges, and showToast when making this change.

In `@web/src/utils/distanceSettings.ts`:
- Around line 45-50: The formatDistance function currently floors converted
miles which can display "0 mi" for nearby servers; update the conversion in
formatDistance to round to the nearest integer instead of using Math.floor for
the miles branch (use Math.round on distanceKm * KM_TO_MI) while leaving or
reconsidering the km branch as needed; reference the formatDistance function and
the KM_TO_MI constant and ensure the returned string still uses the " mi"
suffix.