Add one change & crime

frontend/src/components/map/TravelTimeCard.tsx

@@ -27,6 +27,7 @@ interface TravelTimeCardProps {
   timeRange: [number, number] | null;
   useBest: boolean;
   noChange: boolean;
+  oneChange: boolean;
   noBuses: boolean;
   isPinned: boolean;
   isActive: boolean;
@@ -39,6 +40,7 @@ interface TravelTimeCardProps {
   onDragEnd: () => void;
   onToggleBest: () => void;
   onToggleNoChange: () => void;
+  onToggleOneChange: () => void;
   onToggleNoBuses: () => void;
   onRemove: () => void;
   filterImpact?: number;
@@ -52,6 +54,7 @@ export function TravelTimeCard({
   timeRange,
   useBest,
   noChange,
+  oneChange,
   noBuses,
   isPinned,
   isActive,
@@ -64,6 +67,7 @@ export function TravelTimeCard({
   onDragEnd,
   onToggleBest,
   onToggleNoChange,
+  onToggleOneChange,
   onToggleNoBuses,
   onRemove,
   filterImpact,
@@ -75,6 +79,7 @@ export function TravelTimeCard({
   const [showInfo, setShowInfo] = useState(false);
   const [showBestInfo, setShowBestInfo] = useState(false);
   const [showNoChangeInfo, setShowNoChangeInfo] = useState(false);
+  const [showOneChangeInfo, setShowOneChangeInfo] = useState(false);
   const [showNoBusesInfo, setShowNoBusesInfo] = useState(false);
 
   const handleDestinationSelect = useCallback(
@@ -169,6 +174,20 @@ export function TravelTimeCard({
               <InfoIcon className="w-3 h-3" />
             </IconButton>
           </div>
+          <div className="flex items-center gap-0.5">
+            <PillToggle
+              label={t('travel.oneChange')}
+              active={oneChange}
+              onClick={onToggleOneChange}
+              size="xs"
+            />
+            <IconButton
+              onClick={() => setShowOneChangeInfo(true)}
+              title={t('travel.oneChangeTitle')}
+            >
+              <InfoIcon className="w-3 h-3" />
+            </IconButton>
+          </div>
           <div className="flex items-center gap-0.5">
             <PillToggle
               label={t('travel.noBuses')}
@@ -201,6 +220,14 @@ export function TravelTimeCard({
         </InfoPopup>
       )}
 
+      {showOneChangeInfo && (
+        <InfoPopup title={t('travel.oneChangeTitle')} onClose={() => setShowOneChangeInfo(false)}>
+          <p className="text-sm text-warm-700 dark:text-warm-300 leading-relaxed">
+            <Trans i18nKey="travel.oneChangeDesc" components={{ strong: <strong /> }} />
+          </p>
+        </InfoPopup>
+      )}
+
       {showNoBusesInfo && (
         <InfoPopup title={t('travel.noBusesTitle')} onClose={() => setShowNoBusesInfo(false)}>
           <p className="text-sm text-warm-700 dark:text-warm-300 leading-relaxed">