Fix unit display errors

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]);
+}