add settings page for faster cars overlay

Author: tariknz

src/frontend/components/FasterCarsFromBehind/FasterCarsFromBehind.tsx

@@ -1,11 +1,13 @@
 import { useMemo } from 'react';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { useCarBehind } from './hooks/useCarBehind';
+import { useFasterCarsSettings } from './hooks/useFasterCarsSettings';
 
 export const FasterCarsFromBehind = () => {
-  const carBehind = useCarBehind();
+  const settings = useFasterCarsSettings();
+  const carBehind = useCarBehind({distanceThreshold: settings?.distanceThreshold });
   const [parent] = useAutoAnimate();
-  
+
   const layout = useMemo(() => {
     const hidden = carBehind.name === null || carBehind.name == undefined ? 'hidden' : '';  
     const animate = carBehind.distance > -0.3 ? 'animate-pulse' : '';
@@ -18,7 +20,7 @@ export const FasterCarsFromBehind = () => {
     carBehind.distance,
     carBehind.percent
   ]);
-  
+
   return (
     <div className={`w-full flex justify-between rounded-sm p-1 pb-2 font-bold relative ${layout.hidden} ${layout.animate} ${carBehind.background}`}
 		     ref={parent}>

src/frontend/components/FasterCarsFromBehind/hooks/useCarBehind.tsx

@@ -2,10 +2,11 @@ import { useMemo } from 'react';
 import { useDriverRelatives } from '../../Standings/hooks/useDriverRelatives';
 import { getTailwindStyle } from '@irdashies/utils/colors';
 
-export const useCarBehind = () => {
+export const useCarBehind = ({ distanceThreshold }:{ distanceThreshold?: number }) => {
   const drivers = useDriverRelatives({ buffer: 1 });
   const carBehind = drivers[2];
   const myCar = drivers[1];  
+  const threshold = distanceThreshold ?? -3;
 
   const background = getTailwindStyle(carBehind?.carClass?.color).classHeader;
 
@@ -15,6 +16,6 @@ export const useCarBehind = () => {
     return { name: carBehind?.driver?.name, distance: parseFloat(carBehind?.delta.toFixed(1)), background: background, percent : percent };
   }, [carBehind?.delta, carBehind?.driver?.name, background]);
 
-  if(carBehind?.carClass?.relativeSpeed <= myCar?.carClass?.relativeSpeed || carBehind?.delta < -3) return {name: null, distance: 0, background: null, percent: 0};
+  if(carBehind?.carClass?.relativeSpeed <= myCar?.carClass?.relativeSpeed || carBehind?.delta < threshold) return {name: null, distance: 0, background: null, percent: 0};
   return FasterCarFromBehind;
 };

src/frontend/components/FasterCarsFromBehind/hooks/useFasterCarsSettings.tsx

@@ -0,0 +1,27 @@
+import { useDashboard } from '@irdashies/context';
+
+interface FasterCarsFromBehindSettings {
+  enabled: boolean;
+  config: {
+    distanceThreshold: number;
+  };
+}
+
+export const useFasterCarsSettings = () => {
+  const { currentDashboard } = useDashboard();
+
+  const settings = currentDashboard?.widgets.find(
+    (widget) => widget.id === 'fastercarsfrombehind',
+  )?.config;
+
+  // Add type guard to ensure settings matches expected shape
+  if (settings && 
+    typeof settings === 'object' &&
+    'distanceThreshold' in settings &&
+    typeof settings.distanceThreshold === 'number'
+  ) {
+    return settings as FasterCarsFromBehindSettings['config'];
+  }
+
+  return undefined;
+}; 

src/frontend/components/Settings/SettingsLayout.tsx

@@ -7,6 +7,7 @@ import { TrackMapSettings } from './sections/TrackMapSettings';
 import { AdvancedSettings } from './sections/AdvancedSettings';
 import { InputSettings } from './sections/InputSettings';
 import { AboutSettings } from './sections/AboutSettings';
+import { FasterCarsFromBehindSettings } from './sections/FasterCarsFromBehindSettings';
 import { useDashboard } from '@irdashies/context';
 import { useState } from 'react';
 
@@ -104,6 +105,14 @@ export const SettingsLayout = () => {
                 Weather
               </Link>
             </li>
+            <li>
+              <Link
+                to="/settings/faster-cars"
+                className={menuItemClass('/faster-cars')}
+              >
+                Faster Cars
+              </Link>
+            </li>
             <li>
               <Link to="/settings/map" className={menuItemClass('/track-map')}>
                 <div className="flex flex-row gap-2 items-center">
@@ -140,6 +149,7 @@ export const SettingsLayout = () => {
             <Route path="weather" element={<WeatherSettings />} />
             <Route path="map" element={<TrackMapSettings />} />
             <Route path="input" element={<InputSettings />} />
+            <Route path="faster-cars" element={<FasterCarsFromBehindSettings />} />
             <Route path="advanced" element={<AdvancedSettings />} />
             <Route path="about" element={<AboutSettings />} />
             <Route

src/frontend/components/Settings/sections/FasterCarsFromBehindSettings.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { useDashboard } from '@irdashies/context';
+
+const SETTING_ID = 'fastercarsfrombehind';
+
+interface FasterCarsFromBehindSettings {
+  enabled: boolean;
+  config: {
+    distanceThreshold: number;
+  };
+}
+
+const defaultConfig: FasterCarsFromBehindSettings['config'] = {
+  distanceThreshold: -0.3
+};
+
+export const FasterCarsFromBehindSettings = () => {
+  const { currentDashboard } = useDashboard();
+  const [settings, setSettings] = useState<FasterCarsFromBehindSettings>({
+    enabled: currentDashboard?.widgets.find(w => w.id === SETTING_ID)?.enabled ?? false,
+    config: currentDashboard?.widgets.find(w => w.id === SETTING_ID)?.config as FasterCarsFromBehindSettings['config'] ?? defaultConfig,
+  });
+
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
+  return (
+    <BaseSettingsSection
+      title="Faster Cars From Behind Settings"
+      description="Configure settings for the faster cars detection widget."
+      settings={settings}
+      onSettingsChange={setSettings}
+      widgetId="fastercarsfrombehind"
+    >
+      {(handleConfigChange) => (
+        <div className="space-y-4">        
+          <div className="space-y-2">
+            <label className="text-slate-300">Distance Threshold</label>
+            <input
+              type="number"
+              value={settings.config.distanceThreshold}
+              onChange={(e) => handleConfigChange({
+                distanceThreshold: parseFloat(e.target.value)
+              })}
+              className="w-full rounded border-gray-600 bg-gray-700 p-2 text-slate-300"
+              step="0.1"
+            />
+          </div>
+        </div>
+      )}
+    </BaseSettingsSection>
+  );
+};