feat: custom modal system - alert/confirm/prompt/form, animations, ESC/click-outside close, focus trap, aria, full test coverage

static/index.html

@@ -4367,16 +4367,37 @@
       }, 200);
 
       // Populate info card
-      const distText = nav.distance_km >= 1
+      const distM = nav.distance_meters || nav.straight_distance_m || 0;
-        ? nav.distance_km + ' km' : nav.distance_meters + ' m';
+      const distKm = distM / 1000;
+      const distText = distKm >= 1 ? distKm.toFixed(2) + ' km' : Math.round(distM) + ' m';
       document.getElementById('navDistance').textContent = distText;
       document.getElementById('navCardinal').textContent = nav.cardinal || '—';
       document.getElementById('navBearing').textContent = nav.bearing ? nav.bearing + '°' : '—';
       document.getElementById('navInfoCard').style.display = '';
 
-      // Walking directions
+      // ETA
+      const durationEl = document.getElementById('navDuration');
+      const durationCol = document.getElementById('navDurationCol');
+      if (durationEl && nav.route_duration_s) {
+        const mins = Math.round(nav.route_duration_s / 60);
+        durationEl.textContent = mins + ' min';
+        if (durationCol) durationCol.style.display = '';
+      } else if (durationCol) {
+        durationCol.style.display = 'none';
+      }
+
+      // Mode toggle highlighting
+      const mode = nav.route_mode || 'driving';
+      const btnDriving = document.getElementById('navModeDriving');
+      const btnWalking = document.getElementById('navModeWalking');
+      if (btnDriving) btnDriving.className = mode === 'driving' ? 'btn btn-sm' : 'btn btn-sm btn-outline';
+      if (btnWalking) btnWalking.className = mode === 'walking' ? 'btn btn-sm' : 'btn btn-sm btn-outline';
+
+      // Directions
+      const dirsLabel = document.getElementById('navDirectionsLabel');
       if (nav.walking_directions) {
         document.getElementById('navDirections').textContent = nav.walking_directions;
+        if (dirsLabel) dirsLabel.textContent = mode === 'walking' ? '🚶 Walking Directions' : '🚗 Driving Directions';
         document.getElementById('navDirectionsCard').style.display = '';
       } else {
         document.getElementById('navDirectionsCard').style.display = 'none';
@@ -4386,6 +4407,7 @@
       if (nav.google_maps_url) {
         const link = document.getElementById('navGoogleMapsLink');
         link.href = nav.google_maps_url;
+        link.textContent = mode === 'walking' ? '🧭 Open Walking in Google Maps' : '🧭 Open in Google Maps';
         link.style.display = '';
       } else {
         document.getElementById('navGoogleMapsLink').style.display = 'none';