Many more changes for btter experience.

frontend/src/pages/EditGamePage.vue

@@ -5,8 +5,12 @@ import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import type { Game, Route } from '../types';
 import { gameService, routeService } from '../services/api';
+import { alert, confirm } from '../composables/useModal';
+import { useAuthStore } from '../stores/auth';
+import { formatDistance } from '../utils/units';
 
 const route = useRoute();
+const authStore = useAuthStore();
 
 const game = ref<Game | null>(null);
 const routes = ref<Route[]>([]);
@@ -20,6 +24,8 @@ const selectedRoute = computed(() =>
   routes.value.find(r => r.id === selectedRouteId.value) || null
 );
 
+const unitPreference = computed(() => authStore.user?.unitPreference || 'METRIC');
+
 const mapContainer = ref<HTMLDivElement | null>(null);
 let map: L.Map | null = null;
 let routeMarkers: { [routeId: string]: L.Marker[] } = {};
@@ -76,7 +82,7 @@ async function saveRoute() {
     
     updateMapMarkers();
   } catch (err) {
-    alert('Failed to update route');
+    await alert('Failed to update route');
   } finally {
     saving.value = false;
   }
@@ -162,7 +168,7 @@ function updateMapMarkers() {
 
 async function createRoute() {
   if (!newRoute.value.name.trim()) {
-    alert('Please enter a route name');
+    await alert('Please enter a route name');
     return;
   }
 
@@ -181,7 +187,7 @@ async function createRoute() {
     newRoute.value = { name: '', description: '', color: '#3498db' };
     updateMapMarkers();
   } catch (err) {
-    alert('Failed to create route');
+    await alert('Failed to create route');
   } finally {
     saving.value = false;
   }
@@ -194,12 +200,12 @@ async function copyRoute(routeId: string) {
     selectedRouteId.value = response.data.id;
     updateMapMarkers();
   } catch (err) {
-    alert('Failed to copy route');
+    await alert('Failed to copy route');
   }
 }
 
 async function deleteRoute(routeId: string) {
-  if (!confirm('Are you sure you want to delete this route and all its legs?')) return;
+  if (!await confirm('Are you sure you want to delete this route and all its legs?')) return;
   
   try {
     await routeService.delete(routeId);
@@ -211,13 +217,13 @@ async function deleteRoute(routeId: string) {
     
     updateMapMarkers();
   } catch (err) {
-    alert('Failed to delete route');
+    await alert('Failed to delete route');
   }
 }
 
 async function addLeg() {
   if (!selectedRouteId.value || !newLeg.value.description) {
-    alert('Please enter a description');
+    await alert('Please enter a description');
     return;
   }
 
@@ -249,14 +255,14 @@ async function addLeg() {
     
     updateMapMarkers();
   } catch (err) {
-    alert('Failed to add leg');
+    await alert('Failed to add leg');
   } finally {
     saving.value = false;
   }
 }
 
 async function deleteLeg(legId: string) {
-  if (!confirm('Are you sure you want to delete this leg?')) return;
+  if (!await confirm('Are you sure you want to delete this leg?')) return;
   
   try {
     await routeService.deleteLeg(selectedRouteId.value!, legId);
@@ -268,7 +274,7 @@ async function deleteLeg(legId: string) {
     
     updateMapMarkers();
   } catch (err) {
-    alert('Failed to delete leg');
+    await alert('Failed to delete leg');
   }
 }
 
@@ -374,7 +380,7 @@ onUnmounted(() => {
             <footer>
               <small>
                 {{ routeItem.routeLegs?.length || 0 }} legs
-                · {{ getRouteDistance(routeItem).toFixed(2) }} km
+                · {{ formatDistance(getRouteDistance(routeItem), unitPreference) }}
               </small>
             </footer>
           </div>