Fix unit display errors

src/components/ui/measurement-display.tsx

@@ -47,7 +47,7 @@ export function MeasurementDisplay({
     return defaultPrefs;
   }, [profile]);
 
-  const { displayValue, unit, alternateDisplay } = useMemo(() => {
+  const { displayValue, unit, alternateDisplay, tooltipText } = useMemo(() => {
     const system = unitPreferences.measurement_system;
     
     let displayValue: number;
@@ -88,12 +88,13 @@ export function MeasurementDisplay({
     }
     
     const alternateDisplay = showBothUnits ? ` (${alternateValue} ${alternateUnit})` : '';
+    const tooltipText = showBothUnits ? undefined : `${alternateValue} ${alternateUnit}`;
     
-    return { displayValue, unit, alternateDisplay };
+    return { displayValue, unit, alternateDisplay, tooltipText };
   }, [value, type, unitPreferences.measurement_system, showBothUnits]);
 
   return (
-    <span className={className} title={showBothUnits ? undefined : alternateDisplay ? `${alternateValue} ${alternateUnit}` : undefined}>
+    <span className={className} title={tooltipText}>
       {displayValue} {unit}{alternateDisplay}
     </span>
   );

src/components/ui/speed-display.tsx

@@ -0,0 +1,52 @@
+import { MeasurementDisplay } from './measurement-display';
+
+interface SpeedDisplayProps {
+  kmh: number;
+  showBothUnits?: boolean;
+  className?: string;
+}
+
+export function SpeedDisplay({ kmh, showBothUnits = false, className }: SpeedDisplayProps) {
+  return (
+    <MeasurementDisplay 
+      value={kmh} 
+      type="speed" 
+      showBothUnits={showBothUnits} 
+      className={className} 
+    />
+  );
+}
+
+interface DistanceDisplayProps {
+  meters: number;
+  showBothUnits?: boolean;
+  className?: string;
+}
+
+export function DistanceDisplay({ meters, showBothUnits = false, className }: DistanceDisplayProps) {
+  return (
+    <MeasurementDisplay 
+      value={meters} 
+      type="distance" 
+      showBothUnits={showBothUnits} 
+      className={className} 
+    />
+  );
+}
+
+interface HeightDisplayProps {
+  cm: number;
+  showBothUnits?: boolean;
+  className?: string;
+}
+
+export function HeightDisplay({ cm, showBothUnits = false, className }: HeightDisplayProps) {
+  return (
+    <MeasurementDisplay 
+      value={cm} 
+      type="height" 
+      showBothUnits={showBothUnits} 
+      className={className} 
+    />
+  );
+}

src/hooks/useLocationAutoDetect.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useAuth } from '@/hooks/useAuth';
+import { useUnitPreferences } from '@/hooks/useUnitPreferences';
+
+export function useLocationAutoDetect() {
+  const { user } = useAuth();
+  const { preferences, autoDetectPreferences } = useUnitPreferences();
+
+  useEffect(() => {
+    // Only auto-detect if user has auto_detect enabled and we haven't detected yet
+    if (preferences.auto_detect && preferences.measurement_system === 'metric') {
+      // Check if we've already attempted detection
+      const hasAttemptedDetection = localStorage.getItem('location_detection_attempted');
+      
+      if (!hasAttemptedDetection) {
+        autoDetectPreferences().then(() => {
+          localStorage.setItem('location_detection_attempted', 'true');
+        }).catch((error) => {
+          console.error('Failed to auto-detect location:', error);
+          localStorage.setItem('location_detection_attempted', 'true');
+        });
+      }
+    }
+  }, [user, preferences.auto_detect, preferences.measurement_system, autoDetectPreferences]);
+}

src/main.tsx

@@ -3,9 +3,15 @@ import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { ThemeProvider } from "@/components/theme/ThemeProvider";
+import { useLocationAutoDetect } from "./hooks/useLocationAutoDetect";
+
+function AppWithAutoDetect() {
+  useLocationAutoDetect();
+  return <App />;
+}
 
 createRoot(document.getElementById("root")!).render(
   <ThemeProvider defaultTheme="dark" storageKey="thrillwiki-theme">
-    <App />
+    <AppWithAutoDetect />
   </ThemeProvider>
 );

supabase/migrations/20250928225018_1ec91ae0-5287-4c2b-89d2-1629961c4cd6.sql

@@ -0,0 +1,26 @@
+-- Update existing user_preferences records to include unit preferences if they don't have them
+UPDATE public.user_preferences 
+SET unit_preferences = '{"measurement_system": "metric", "temperature": "celsius", "auto_detect": true}'::jsonb
+WHERE unit_preferences IS NULL OR unit_preferences = '{}'::jsonb;
+
+-- Update the initialize_user_preferences function to include unit preferences
+CREATE OR REPLACE FUNCTION public.initialize_user_preferences()
+RETURNS trigger
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = 'public'
+AS $function$
+BEGIN
+  INSERT INTO public.user_preferences (
+    user_id,
+    unit_preferences
+  )
+  VALUES (
+    NEW.user_id,
+    '{"measurement_system": "metric", "temperature": "celsius", "auto_detect": true}'::jsonb
+  )
+  ON CONFLICT (user_id) DO UPDATE SET
+    unit_preferences = COALESCE(public.user_preferences.unit_preferences, '{"measurement_system": "metric", "temperature": "celsius", "auto_detect": true}'::jsonb);
+  RETURN NEW;
+END;
+$function$;