From c8d7ab720004ab4a10bf6feb98f7cf4ef450c1e0 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 13 Mar 2026 11:40:26 +0000 Subject: feat: map search field, pick-on-map returns to planner, geolocate + viewport fixes Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com> --- src/frontend/app/components/shared/AppMap.tsx | 20 +-- src/frontend/app/i18n/locales/en-GB.json | 4 +- src/frontend/app/i18n/locales/es-ES.json | 4 +- src/frontend/app/i18n/locales/gl-ES.json | 4 +- src/frontend/app/routes/map.tsx | 190 ++++++++++++++++++++++---- 5 files changed, 187 insertions(+), 35 deletions(-) (limited to 'src/frontend/app') diff --git a/src/frontend/app/components/shared/AppMap.tsx b/src/frontend/app/components/shared/AppMap.tsx index d4ad557..f4c8658 100644 --- a/src/frontend/app/components/shared/AppMap.tsx +++ b/src/frontend/app/components/shared/AppMap.tsx @@ -163,14 +163,9 @@ export const AppMap = forwardRef( 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 { @@ -180,6 +175,14 @@ export const AppMap = forwardRef( }; } + 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), @@ -210,7 +213,6 @@ export const AppMap = forwardRef( {showGeolocate && ( { const { latitude, longitude } = e.coords; diff --git a/src/frontend/app/i18n/locales/en-GB.json b/src/frontend/app/i18n/locales/en-GB.json index 17c232f..580aba3 100644 --- a/src/frontend/app/i18n/locales/en-GB.json +++ b/src/frontend/app/i18n/locales/en-GB.json @@ -105,7 +105,9 @@ "view_all_estimates": "View all estimates", "select_nearby_stop": "Select stop", "route_from_here": "Route from here", - "route_to_here": "Route to here" + "route_to_here": "Route to here", + "search_placeholder": "Search for a place…", + "plan_trip": "Plan a trip" }, "planner": { "where_to": "Where do you want to go?", diff --git a/src/frontend/app/i18n/locales/es-ES.json b/src/frontend/app/i18n/locales/es-ES.json index e7d516e..7863a19 100644 --- a/src/frontend/app/i18n/locales/es-ES.json +++ b/src/frontend/app/i18n/locales/es-ES.json @@ -105,7 +105,9 @@ "view_all_estimates": "Detalles", "select_nearby_stop": "Seleccionar parada", "route_from_here": "Ruta desde aquí", - "route_to_here": "Ruta hasta aquí" + "route_to_here": "Ruta hasta aquí", + "search_placeholder": "Buscar un lugar…", + "plan_trip": "Planificar ruta" }, "planner": { "where_to": "¿A donde quieres ir?", diff --git a/src/frontend/app/i18n/locales/gl-ES.json b/src/frontend/app/i18n/locales/gl-ES.json index baa3998..39e28de 100644 --- a/src/frontend/app/i18n/locales/gl-ES.json +++ b/src/frontend/app/i18n/locales/gl-ES.json @@ -105,7 +105,9 @@ "view_all_estimates": "Ver todas as estimacións", "select_nearby_stop": "Seleccionar parada", "route_from_here": "Ruta desde aquí", - "route_to_here": "Ruta ata aquí" + "route_to_here": "Ruta ata aquí", + "search_placeholder": "Buscar un lugar…", + "plan_trip": "Planificar ruta" }, "planner": { "where_to": "Onde queres ir?", diff --git a/src/frontend/app/routes/map.tsx b/src/frontend/app/routes/map.tsx index 8149d30..6d1fc9f 100644 --- a/src/frontend/app/routes/map.tsx +++ b/src/frontend/app/routes/map.tsx @@ -1,6 +1,6 @@ -import { Check, MapPin, Navigation, X } from "lucide-react"; +import { Check, MapPin, Navigation, Search, X } from "lucide-react"; import type { FilterSpecification } from "maplibre-gl"; -import { useRef, useState, useMemo } from "react"; +import { useEffect, useRef, useState, useMemo } from "react"; import { useTranslation } from "react-i18next"; import { Layer, @@ -14,15 +14,176 @@ import { StopSummarySheet, type StopSheetProps, } from "~/components/map/StopSummarySheet"; -import { PlannerOverlay } from "~/components/PlannerOverlay"; import { AppMap } from "~/components/shared/AppMap"; import { usePageTitle } from "~/contexts/PageTitleContext"; -import { reverseGeocode } from "~/data/PlannerApi"; +import { reverseGeocode, searchPlaces, type PlannerSearchResult } from "~/data/PlannerApi"; import { usePlanner } from "~/hooks/usePlanner"; import StopDataProvider from "../data/StopDataProvider"; import "../tailwind-full.css"; import "./map.css"; +// Module-level: keeps search query + results alive across SPA navigation +const mapSearchState: { query: string; results: PlannerSearchResult[] } = { + query: "", + results: [], +}; + +interface MapSearchBarProps { + mapRef: React.RefObject; +} + +function MapSearchBar({ mapRef }: MapSearchBarProps) { + const { t } = useTranslation(); + const navigate = useNavigate(); + const [query, setQuery] = useState(mapSearchState.query); + const [results, setResults] = useState( + mapSearchState.results + ); + const [showResults, setShowResults] = useState( + mapSearchState.results.length > 0 + ); + const [loading, setLoading] = useState(false); + const containerRef = useRef(null); + const inputRef = useRef(null); + const debounceRef = useRef(null); + + // Close dropdown when clicking/tapping outside the search container + useEffect(() => { + const onPointerDown = (e: PointerEvent) => { + if ( + containerRef.current && + !containerRef.current.contains(e.target as Node) + ) { + setShowResults(false); + } + }; + document.addEventListener("pointerdown", onPointerDown); + return () => document.removeEventListener("pointerdown", onPointerDown); + }, []); + + const handleQueryChange = (q: string) => { + setQuery(q); + mapSearchState.query = q; + + if (debounceRef.current) clearTimeout(debounceRef.current); + + if (q.trim().length < 2) { + // Hide stale results when the query is cleared or too short + setResults([]); + mapSearchState.results = []; + setShowResults(false); + return; + } + + debounceRef.current = setTimeout(async () => { + setLoading(true); + try { + const res = await searchPlaces(q.trim()); + setResults(res); + mapSearchState.results = res; + setShowResults(true); + } catch { + // keep old results on network error + } finally { + setLoading(false); + } + }, 300); + }; + + const handleSelect = (place: PlannerSearchResult) => { + const map = mapRef.current; + if (map) { + map.flyTo({ center: [place.lon, place.lat], zoom: 15, duration: 800 }); + } + // Keep results visible so user can pick another without retyping + }; + + const handleClear = () => { + setQuery(""); + mapSearchState.query = ""; + setResults([]); + mapSearchState.results = []; + setShowResults(false); + inputRef.current?.focus(); + }; + + return ( +
+
+ {/* Search input */} +
+ + handleQueryChange(e.target.value)} + onFocus={() => { + if (results.length > 0) setShowResults(true); + }} + /> + {loading ? ( +
+ ) : query ? ( + + ) : null} +
+ + {/* Results dropdown */} + {showResults && results.length > 0 && ( +
+
+ {results.map((place, i) => ( + + ))} +
+
+ )} + + {/* Plan a trip – always visible */} + +
+
+ ); +} + // Componente principal del mapa export default function StopMap() { const { t } = useTranslation(); @@ -43,7 +204,6 @@ export default function StopMap() { const mapRef = useRef(null); const { - searchRoute, pickingMode, setPickingMode, setOrigin, @@ -151,6 +311,7 @@ export default function StopMap() { } addRecentPlace(finalResult); setPickingMode(null); + navigate("/planner"); } catch (err) { console.error("Failed to reverse geocode:", err); } finally { @@ -158,12 +319,6 @@ export default function StopMap() { } }; - const onMapInteraction = () => { - if (!pickingMode) { - window.dispatchEvent(new CustomEvent("plannerOverlay:collapse")); - } - }; - const favouriteIds = useMemo(() => StopDataProvider.getFavouriteIds(), []); const favouriteFilter = useMemo(() => { @@ -258,16 +413,7 @@ export default function StopMap() { return (
- {!pickingMode && ( - searchRoute(o, d, time, arriveBy)} - onNavigateToPlanner={() => navigate("/planner")} - clearPickerOnOpen={true} - showLastDestinationWhenCollapsed={false} - cardBackground="bg-white/95 dark:bg-slate-900/90" - autoLoad={false} - /> - )} + {!pickingMode && } {pickingMode && (
@@ -331,8 +477,6 @@ export default function StopMap() { closeContextMenu(); onMapClick(e); }} - onDragStart={onMapInteraction} - onZoomStart={onMapInteraction} onContextMenu={handleContextMenu} attributionControl={{ compact: false }} > -- cgit v1.3