3 files changed, 32 insertions, 29 deletions

diff --git a/src/frontend/app/components/PlannerOverlay.tsx b/src/frontend/app/components/PlannerOverlay.tsx
index facf6f9..d953c2e 100644
--- a/src/frontend/app/components/PlannerOverlay.tsx
+++ b/src/frontend/app/components/PlannerOverlay.tsx
@@ -15,6 +15,7 @@ import {
   type PlannerSearchResult,
 } from "~/data/PlannerApi";
 import StopDataProvider from "~/data/StopDataProvider";
+import { useGeolocation } from "~/hooks/useGeolocation";
 import { usePlanner } from "~/hooks/usePlanner";
 
 interface PlannerOverlayProps {
@@ -30,7 +31,6 @@ interface PlannerOverlayProps {
   clearPickerOnOpen?: boolean;
   showLastDestinationWhenCollapsed?: boolean;
   cardBackground?: string;
-  userLocation?: { latitude: number; longitude: number } | null;
   autoLoad?: boolean;
 }
 
@@ -42,11 +42,11 @@ export const PlannerOverlay: React.FC<PlannerOverlayProps> = ({
   clearPickerOnOpen = false,
   showLastDestinationWhenCollapsed = true,
   cardBackground,
-  userLocation,
   autoLoad = true,
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { userLocation, requestLocation } = useGeolocation();
   const {
     origin,
     setOrigin,
@@ -173,22 +173,12 @@ export const PlannerOverlay: React.FC<PlannerOverlayProps> = ({
 
   const setOriginFromCurrentLocation = useCallback(
     (closePicker: boolean = true) => {
-      console.log(
-        "[PlannerOverlay] setOriginFromCurrentLocation called, closePicker:",
-        closePicker
-      );
       if (!navigator.geolocation) {
-        console.warn("[PlannerOverlay] Geolocation not available");
         return;
       }
       setLocationLoading(true);
       navigator.geolocation.getCurrentPosition(
         async (pos) => {
-          console.log(
-            "[PlannerOverlay] Geolocation success:",
-            pos.coords.latitude,
-            pos.coords.longitude
-          );
           try {
             // Set immediately using raw coordinates; refine later if reverse geocode works.
             const initial: PlannerSearchResult = {
@@ -198,16 +188,16 @@ export const PlannerOverlay: React.FC<PlannerOverlayProps> = ({
               lon: pos.coords.longitude,
               layer: "current-location",
             };
-            console.log("[PlannerOverlay] Setting initial origin:", initial);
             setOrigin(initial);
             setOriginQuery(initial.name || "");
+            // Share location with global context so other consumers benefit
+            requestLocation();
 
             try {
               const rev = await reverseGeocode(
                 pos.coords.latitude,
                 pos.coords.longitude
               );
-              console.log("[PlannerOverlay] Reverse geocode result:", rev);
               if (rev) {
                 const refined: PlannerSearchResult = {
                   ...initial,
@@ -215,10 +205,6 @@ export const PlannerOverlay: React.FC<PlannerOverlayProps> = ({
                   label: rev.label || initial.label,
                   layer: "current-location",
                 };
-                console.log(
-                  "[PlannerOverlay] Setting refined origin:",
-                  refined
-                );
                 setOrigin(refined);
                 setOriginQuery(refined.name || "");
               }
@@ -238,7 +224,7 @@ export const PlannerOverlay: React.FC<PlannerOverlayProps> = ({
         { enableHighAccuracy: false, maximumAge: 60000, timeout: 10000 }
       );
     },
-    [setOrigin, t]
+    [setOrigin, t, requestLocation]
   );
 
   useEffect(() => {
diff --git a/src/frontend/app/components/layout/NavBar.tsx b/src/frontend/app/components/layout/NavBar.tsx
index 5822ce7..e66c388 100644
--- a/src/frontend/app/components/layout/NavBar.tsx
+++ b/src/frontend/app/components/layout/NavBar.tsx
@@ -1,4 +1,4 @@
-import { Home, Map, Route } from "lucide-react";
+import { Home, Map, Navigation, Route } from "lucide-react";
 import type { LngLatLike } from "maplibre-gl";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation, useNavigate } from "react-router";
@@ -53,6 +53,11 @@ export default function NavBar({ orientation = "horizontal" }: NavBarProps) {
       },
     },
     {
+      name: t("navbar.planner", "Planificador"),
+      icon: Navigation,
+      path: "/planner",
+    },
+    {
       name: t("navbar.routes", "Rutas"),
       icon: Route,
       path: "/routes",
diff --git a/src/frontend/app/components/shared/AppMap.tsx b/src/frontend/app/components/shared/AppMap.tsx
index c6eb8ee..f4c8658 100644
--- a/src/frontend/app/components/shared/AppMap.tsx
+++ b/src/frontend/app/components/shared/AppMap.tsx
@@ -44,6 +44,7 @@ interface AppMapProps {
   onRotateStart?: () => void;
   onPitchStart?: () => void;
   onLoad?: () => void;
+  onContextMenu?: (e: MapLayerMouseEvent) => void;
 }
 
 export const AppMap = forwardRef<MapRef, AppMapProps>(
@@ -72,6 +73,7 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
       onRotateStart,
       onPitchStart,
       onLoad,
+      onContextMenu,
     },
     ref
   ) => {
@@ -79,6 +81,8 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
       theme,
       mapState,
       updateMapState,
+      setUserLocation,
+      setLocationPermission,
       showTraffic: settingsShowTraffic,
       showCameras: settingsShowCameras,
       mapPositionMode,
@@ -159,14 +163,9 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
     const viewState = useMemo(() => {
       if (initialViewState) return initialViewState;
 
-      if (mapPositionMode === "gps" && mapState.userLocation) {
-        return {
-          latitude: getLatitude(mapState.userLocation),
-          longitude: getLongitude(mapState.userLocation),
-          zoom: 16,
-        };
-      }
-
+      // Prefer the last saved position for this path so navigation doesn't
+      // reset the map viewport. GPS mode is only used as a fallback when the
+      // user has never visited this path before.
       const pathState = mapState.paths[path];
       if (pathState) {
         return {
@@ -176,6 +175,14 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
         };
       }
 
+      if (mapPositionMode === "gps" && mapState.userLocation) {
+        return {
+          latitude: getLatitude(mapState.userLocation),
+          longitude: getLongitude(mapState.userLocation),
+          zoom: 16,
+        };
+      }
+
       return {
         latitude: getLatitude(APP_CONSTANTS.defaultCenter),
         longitude: getLongitude(APP_CONSTANTS.defaultCenter),
@@ -200,13 +207,18 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
         onRotateStart={onRotateStart}
         onPitchStart={onPitchStart}
         onLoad={onLoad}
+        onContextMenu={onContextMenu}
       >
         {showNavigation && <NavigationControl position="bottom-right" />}
         {showGeolocate && (
           <GeolocateControl
             position="bottom-right"
-            trackUserLocation={true}
             positionOptions={{ enableHighAccuracy: false }}
+            onGeolocate={(e) => {
+              const { latitude, longitude } = e.coords;
+              setUserLocation([latitude, longitude]);
+              setLocationPermission(true);
+            }}
           />
         )}
         {children}