All changes

frontend/src/components/map/TravelTimeCard.tsx

@@ -7,7 +7,6 @@ import InfoPopup from '../ui/InfoPopup';
 import { CloseIcon } from '../ui/icons/CloseIcon';
 import { EyeIcon } from '../ui/icons/EyeIcon';
 import { InfoIcon } from '../ui/icons/InfoIcon';
-import { MapPinIcon } from '../ui/icons/MapPinIcon';
 import { CarIcon } from '../ui/icons/CarIcon';
 import { BicycleIcon } from '../ui/icons/BicycleIcon';
 import { WalkingIcon } from '../ui/icons/WalkingIcon';
@@ -52,6 +51,7 @@ export function TravelTimeCard({
   onRemove,
 }: TravelTimeCardProps) {
   const { destinations, loading: destinationsLoading } = useTravelDestinations(mode);
+  const [showInfo, setShowInfo] = useState(false);
   const [showBestInfo, setShowBestInfo] = useState(false);
 
   const handleDestinationSelect = useCallback(
@@ -78,6 +78,9 @@ export function TravelTimeCard({
           </span>
         </div>
         <div className="flex items-center gap-0.5">
+          <IconButton onClick={() => setShowInfo(true)} title="Feature info">
+            <InfoIcon className="w-3.5 h-3.5" />
+          </IconButton>
           {slug && (
             <IconButton onClick={onTogglePin} active={isPinned} title={isPinned ? 'Stop previewing' : 'Preview on map'}>
               <EyeIcon className="w-3.5 h-3.5" filled={isPinned} />
@@ -90,28 +93,14 @@ export function TravelTimeCard({
       </div>
 
       {/* Destination */}
-      {slug && label ? (
-        <div className="flex items-center gap-1.5 px-2 py-1 rounded border border-warm-200 dark:border-warm-700 bg-warm-50 dark:bg-warm-800">
-          <MapPinIcon className="w-3 h-3 text-red-500 shrink-0" />
-          <span className="text-xs text-navy-950 dark:text-warm-200 flex-1 truncate">
-            {label}
-          </span>
-          <button
-            onClick={() => onSetDestination('', '')}
-            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
-            title="Clear destination"
-          >
-            <CloseIcon className="w-3 h-3" />
-          </button>
-        </div>
-      ) : (
-        <DestinationDropdown
-          destinations={destinations}
-          loading={destinationsLoading}
-          onSelect={handleDestinationSelect}
-          placeholder="Select destination..."
-        />
-      )}
+      <DestinationDropdown
+        destinations={destinations}
+        loading={destinationsLoading}
+        onSelect={handleDestinationSelect}
+        value={label || undefined}
+        onClear={() => onSetDestination('', '')}
+        placeholder="Select destination..."
+      />
 
       {/* Best-case toggle — transit only, shown when destination is set */}
       {slug && mode === 'transit' && (
@@ -123,10 +112,26 @@ export function TravelTimeCard({
         </div>
       )}
 
+      {showInfo && (
+        <InfoPopup title={`Travel Time (${MODE_LABELS[mode]})`} onClose={() => setShowInfo(false)}>
+          <p className="text-sm text-warm-700 dark:text-warm-300 leading-relaxed">
+            Shows how long it takes to reach the selected destination from each area
+            {mode === 'transit'
+              ? ' by public transport (bus, rail, tube). Times are computed across a typical weekday morning window.'
+              : mode === 'car'
+                ? ' by car, based on typical road speeds and the road network.'
+                : mode === 'bicycle'
+                  ? ' by bicycle, using cycle-friendly routes.'
+                  : ' on foot, using pedestrian paths and pavements.'}
+            {' '}Use the slider to filter areas within your preferred commute time.
+          </p>
+        </InfoPopup>
+      )}
+
       {showBestInfo && (
         <InfoPopup title="Best case travel time" onClose={() => setShowBestInfo(false)}>
           <p className="text-sm text-warm-700 dark:text-warm-300 leading-relaxed">
-            Uses the <strong>5th percentile</strong> travel time — the fastest realistic journey
+            Uses the <strong>5th percentile</strong> travel time - the fastest realistic journey
             if you time your departure to catch optimal connections. The default uses the{' '}
             <strong>median</strong>, representing a typical journey regardless of when you leave.
           </p>