Fix unit conversion in filters

src/components/rides/RideFilters.tsx

@@ -13,6 +13,12 @@ import { FilterSection } from '@/components/filters/FilterSection';
 import { FilterMultiSelectCombobox } from '@/components/filters/FilterMultiSelectCombobox';
 import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
 import { Ride } from '@/types/database';
+import { useUnitPreferences } from '@/hooks/useUnitPreferences';
+import { 
+  convertValueToMetric, 
+  convertValueFromMetric, 
+  getDisplayUnit 
+} from '@/lib/units';
 
 export interface RideFilterState {
   categories: string[];
@@ -79,6 +85,9 @@ interface RideFiltersProps {
 }
 
 export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProps) {
+  const { preferences } = useUnitPreferences();
+  const system = preferences.measurement_system;
+
   // Fetch unique filter options
   const { data: locations } = useQuery({
     queryKey: ['filter-locations'],
@@ -221,6 +230,27 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
     { label: 'Other', value: 'other' },
   ];
 
+  // Calculate display ranges based on user preferences
+  const speedUnit = getDisplayUnit('km/h', system);
+  const heightUnit = getDisplayUnit('m', system);
+  const lengthUnit = getDisplayUnit('m', system);
+
+  // Convert metric filter ranges to display units for sliders
+  const displaySpeedMin = Math.round(convertValueFromMetric(0, speedUnit, 'km/h'));
+  const displaySpeedMax = Math.round(convertValueFromMetric(200, speedUnit, 'km/h'));
+  const displayHeightMin = Math.round(convertValueFromMetric(0, heightUnit, 'm'));
+  const displayHeightMax = Math.round(convertValueFromMetric(150, heightUnit, 'm'));
+  const displayLengthMin = Math.round(convertValueFromMetric(0, lengthUnit, 'm'));
+  const displayLengthMax = Math.round(convertValueFromMetric(3000, lengthUnit, 'm'));
+
+  // Convert current metric filter values to display units
+  const currentSpeedMin = Math.round(convertValueFromMetric(filters.minSpeed, speedUnit, 'km/h'));
+  const currentSpeedMax = Math.round(convertValueFromMetric(filters.maxSpeed, speedUnit, 'km/h'));
+  const currentHeightMin = Math.round(convertValueFromMetric(filters.minHeight, heightUnit, 'm'));
+  const currentHeightMax = Math.round(convertValueFromMetric(filters.maxHeight, heightUnit, 'm'));
+  const currentLengthMin = Math.round(convertValueFromMetric(filters.minLength, lengthUnit, 'm'));
+  const currentLengthMax = Math.round(convertValueFromMetric(filters.maxLength, lengthUnit, 'm'));
+
   const resetFilters = () => {
     onFiltersChange(defaultRideFilters);
   };
@@ -382,30 +412,45 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
         <div className="grid grid-cols-1 gap-4">
           <FilterRangeSlider
             label="Speed"
-            value={[filters.minSpeed, filters.maxSpeed]}
-            onChange={([min, max]) => onFiltersChange({ ...filters, minSpeed: min, maxSpeed: max })}
-            min={0}
-            max={200}
-            step={5}
-            unit=" km/h"
+            value={[currentSpeedMin, currentSpeedMax]}
+            onChange={([displayMin, displayMax]) => {
+              // Convert display values back to metric for storage
+              const metricMin = Math.round(convertValueToMetric(displayMin, speedUnit));
+              const metricMax = Math.round(convertValueToMetric(displayMax, speedUnit));
+              onFiltersChange({ ...filters, minSpeed: metricMin, maxSpeed: metricMax });
+            }}
+            min={displaySpeedMin}
+            max={displaySpeedMax}
+            step={system === 'metric' ? 5 : 2}
+            formatValue={(v) => `${v} ${speedUnit}`}
           />
           <FilterRangeSlider
             label="Height"
-            value={[filters.minHeight, filters.maxHeight]}
-            onChange={([min, max]) => onFiltersChange({ ...filters, minHeight: min, maxHeight: max })}
-            min={0}
-            max={150}
-            step={5}
-            unit=" m"
+            value={[currentHeightMin, currentHeightMax]}
+            onChange={([displayMin, displayMax]) => {
+              // Convert display values back to metric for storage
+              const metricMin = Math.round(convertValueToMetric(displayMin, heightUnit));
+              const metricMax = Math.round(convertValueToMetric(displayMax, heightUnit));
+              onFiltersChange({ ...filters, minHeight: metricMin, maxHeight: metricMax });
+            }}
+            min={displayHeightMin}
+            max={displayHeightMax}
+            step={system === 'metric' ? 5 : 10}
+            formatValue={(v) => `${v} ${heightUnit}`}
           />
           <FilterRangeSlider
             label="Length"
-            value={[filters.minLength, filters.maxLength]}
-            onChange={([min, max]) => onFiltersChange({ ...filters, minLength: min, maxLength: max })}
-            min={0}
-            max={3000}
-            step={50}
-            unit=" m"
+            value={[currentLengthMin, currentLengthMax]}
+            onChange={([displayMin, displayMax]) => {
+              // Convert display values back to metric for storage
+              const metricMin = Math.round(convertValueToMetric(displayMin, lengthUnit));
+              const metricMax = Math.round(convertValueToMetric(displayMax, lengthUnit));
+              onFiltersChange({ ...filters, minLength: metricMin, maxLength: metricMax });
+            }}
+            min={displayLengthMin}
+            max={displayLengthMax}
+            step={system === 'metric' ? 50 : 100}
+            formatValue={(v) => `${v} ${lengthUnit}`}
           />
           <FilterRangeSlider
             label="Inversions"