Good changes

frontend/src/components/map/TravelTimeCard.tsx

@@ -1,8 +1,8 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { Slider } from '../ui/Slider';
 import { IconButton } from '../ui/IconButton';
 import { PillToggle } from '../ui/PillToggle';
-import { PlaceSearchInput } from '../ui/PlaceSearchInput';
+import { DestinationDropdown } from '../ui/DestinationDropdown';
 import InfoPopup from '../ui/InfoPopup';
 import { CloseIcon } from '../ui/icons/CloseIcon';
 import { EyeIcon } from '../ui/icons/EyeIcon';
@@ -13,7 +13,7 @@ import { BicycleIcon } from '../ui/icons/BicycleIcon';
 import { WalkingIcon } from '../ui/icons/WalkingIcon';
 import { TransitIcon } from '../ui/icons/TransitIcon';
 import { formatFilterValue } from '../../lib/format';
-import { useLocationSearch, type SearchResult } from '../../hooks/useLocationSearch';
+import { useTravelDestinations } from '../../hooks/useTravelDestinations';
 import { MODE_LABELS, type TransportMode } from '../../hooks/useTravelTime';
 import type { ComponentType } from 'react';
 
@@ -51,29 +51,14 @@ export function TravelTimeCard({
   onToggleBest,
   onRemove,
 }: TravelTimeCardProps) {
-  const search = useLocationSearch(mode);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const { destinations, loading: destinationsLoading } = useTravelDestinations(mode);
   const [showBestInfo, setShowBestInfo] = useState(false);
 
-  // Close dropdown on outside click
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        search.close();
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [search.close]);
-
-  const selectResult = useCallback(
-    (result: SearchResult) => {
-      if (result.type === 'place') {
-        onSetDestination(result.slug, result.name);
-        search.clear();
-      }
+  const handleDestinationSelect = useCallback(
+    (selectedSlug: string, selectedLabel: string) => {
+      onSetDestination(selectedSlug, selectedLabel);
     },
-    [onSetDestination, search.clear],
+    [onSetDestination],
   );
 
   const sliderMin = 0;
@@ -120,16 +105,12 @@ export function TravelTimeCard({
           </button>
         </div>
       ) : (
-        <div ref={containerRef} className="relative">
-          <PlaceSearchInput
-            search={search}
-            onSelect={selectResult}
-            placeholder="Search stations..."
-            size="xs"
-            inputClassName="w-full px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
-            portal
-          />
-        </div>
+        <DestinationDropdown
+          destinations={destinations}
+          loading={destinationsLoading}
+          onSelect={handleDestinationSelect}
+          placeholder="Select destination..."
+        />
       )}
 
       {/* Best-case toggle — transit only, shown when destination is set */}