changes

frontend/src/components/map/TravelTimeCard.tsx

@@ -3,6 +3,7 @@ import { Slider } from '../ui/Slider';
 import { IconButton } from '../ui/IconButton';
 import { PlaceSearchInput } from '../ui/PlaceSearchInput';
 import { CloseIcon } from '../ui/icons/CloseIcon';
+import { EyeIcon } from '../ui/icons/EyeIcon';
 import { MapPinIcon } from '../ui/icons/MapPinIcon';
 import { RouteIcon } from '../ui/icons/RouteIcon';
 import { formatFilterValue } from '../../lib/format';
@@ -15,6 +16,8 @@ interface TravelTimeCardProps {
   label: string;
   timeRange: [number, number] | null;
   dataRange: [number, number] | null;
+  isPinned: boolean;
+  onTogglePin: () => void;
   onSetDestination: (slug: string, label: string) => void;
   onTimeRangeChange: (range: [number, number]) => void;
   onRemove: () => void;
@@ -26,6 +29,8 @@ export function TravelTimeCard({
   label,
   timeRange,
   dataRange,
+  isPinned,
+  onTogglePin,
   onSetDestination,
   onTimeRangeChange,
   onRemove,
@@ -59,7 +64,7 @@ export function TravelTimeCard({
   const displayRange = timeRange ?? [sliderMin, sliderMax];
 
   return (
-    <div className="space-y-2 px-2 py-2 rounded ring-2 ring-teal-400 bg-teal-50/50 dark:bg-teal-900/20">
+    <div className={`space-y-2 px-2 py-2 rounded ${isPinned ? 'ring-2 ring-teal-400 bg-teal-50/50 dark:bg-teal-900/20' : ''}`}>
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1.5">
@@ -68,9 +73,16 @@ export function TravelTimeCard({
             Travel Time ({MODE_LABELS[mode]})
           </span>
         </div>
-        <IconButton onClick={() => onRemove()} title="Remove travel time">
-          <CloseIcon className="w-3.5 h-3.5" />
-        </IconButton>
+        <div className="flex items-center gap-0.5">
+          {slug && (
+            <IconButton onClick={onTogglePin} active={isPinned} title={isPinned ? 'Stop previewing' : 'Preview on map'}>
+              <EyeIcon className="w-3.5 h-3.5" filled={isPinned} />
+            </IconButton>
+          )}
+          <IconButton onClick={() => onRemove()} title="Remove travel time">
+            <CloseIcon className="w-3.5 h-3.5" />
+          </IconButton>
+        </div>
       </div>
 
       {/* Destination search */}
@@ -81,6 +93,7 @@ export function TravelTimeCard({
           placeholder={slug ? 'Change destination...' : 'Search destination...'}
           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
         />
 
         {slug && label && (