Add unit preferences to user settings

src/components/ui/measurement-display.tsx

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import { useAuth } from '@/hooks/useAuth';
+import { 
+  convertSpeed, 
+  convertDistance, 
+  convertHeight,
+  getSpeedUnit,
+  getDistanceUnit,
+  getHeightUnit,
+  getShortDistanceUnit,
+  type MeasurementSystem,
+  type UnitPreferences
+} from '@/lib/units';
+
+interface MeasurementDisplayProps {
+  value: number;
+  type: 'speed' | 'distance' | 'height' | 'short_distance';
+  showBothUnits?: boolean;
+  className?: string;
+}
+
+export function MeasurementDisplay({ 
+  value, 
+  type, 
+  showBothUnits = false,
+  className = "" 
+}: MeasurementDisplayProps) {
+  const { profile } = useAuth();
+  
+  const unitPreferences = useMemo(() => {
+    // Get unit preferences from user profile or default to metric
+    const defaultPrefs: UnitPreferences = {
+      measurement_system: 'metric',
+      temperature: 'celsius',
+      auto_detect: true
+    };
+    
+    // If no profile or no preferences, use default
+    if (!profile) return defaultPrefs;
+    
+    // Try to get preferences from profile (this will be populated from user_preferences)
+    const storedPrefs = (profile as any)?.unit_preferences;
+    if (storedPrefs && typeof storedPrefs === 'object') {
+      return { ...defaultPrefs, ...storedPrefs };
+    }
+    
+    return defaultPrefs;
+  }, [profile]);
+
+  const { displayValue, unit, alternateDisplay } = useMemo(() => {
+    const system = unitPreferences.measurement_system;
+    
+    let displayValue: number;
+    let unit: string;
+    let alternateValue: number;
+    let alternateUnit: string;
+    
+    switch (type) {
+      case 'speed':
+        displayValue = convertSpeed(value, system);
+        unit = getSpeedUnit(system);
+        alternateValue = convertSpeed(value, system === 'metric' ? 'imperial' : 'metric');
+        alternateUnit = getSpeedUnit(system === 'metric' ? 'imperial' : 'metric');
+        break;
+      case 'distance':
+        displayValue = convertDistance(value, system);
+        unit = getDistanceUnit(system);
+        alternateValue = convertDistance(value, system === 'metric' ? 'imperial' : 'metric');
+        alternateUnit = getDistanceUnit(system === 'metric' ? 'imperial' : 'metric');
+        break;
+      case 'height':
+        displayValue = convertHeight(value, system);
+        unit = getHeightUnit(system);
+        alternateValue = convertHeight(value, system === 'metric' ? 'imperial' : 'metric');
+        alternateUnit = getHeightUnit(system === 'metric' ? 'imperial' : 'metric');
+        break;
+      case 'short_distance':
+        displayValue = convertDistance(value, system);
+        unit = getShortDistanceUnit(system);
+        alternateValue = convertDistance(value, system === 'metric' ? 'imperial' : 'metric');
+        alternateUnit = getShortDistanceUnit(system === 'metric' ? 'imperial' : 'metric');
+        break;
+      default:
+        displayValue = value;
+        unit = '';
+        alternateValue = value;
+        alternateUnit = '';
+    }
+    
+    const alternateDisplay = showBothUnits ? ` (${alternateValue} ${alternateUnit})` : '';
+    
+    return { displayValue, unit, alternateDisplay };
+  }, [value, type, unitPreferences.measurement_system, showBothUnits]);
+
+  return (
+    <span className={className} title={showBothUnits ? undefined : alternateDisplay ? `${alternateValue} ${alternateUnit}` : undefined}>
+      {displayValue} {unit}{alternateDisplay}
+    </span>
+  );
+}