Add unit preferences to user settings

src/components/settings/LocationTab.tsx

@@ -11,8 +11,9 @@ import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
+import { useUnitPreferences } from '@/hooks/useUnitPreferences';
 import { supabase } from '@/integrations/supabase/client';
-import { MapPin, Calendar, Globe, Accessibility } from 'lucide-react';
+import { MapPin, Calendar, Globe, Accessibility, Ruler } from 'lucide-react';
 const locationSchema = z.object({
   preferred_pronouns: z.string().max(20).optional(),
   timezone: z.string(),
@@ -35,6 +36,7 @@ export function LocationTab() {
   const {
     toast
   } = useToast();
+  const { preferences: unitPreferences, updatePreferences: updateUnitPreferences } = useUnitPreferences();
   const [loading, setLoading] = useState(false);
   const [parks, setParks] = useState<any[]>([]);
   const [accessibility, setAccessibility] = useState<AccessibilityOptions>({
@@ -115,10 +117,13 @@ export function LocationTab() {
       
       if (accessibilityError) throw accessibilityError;
 
+      // Save unit preferences
+      await updateUnitPreferences(unitPreferences);
+
       await refreshProfile();
       toast({
         title: 'Settings saved',
-        description: 'Your location, personal information, and accessibility settings have been updated.'
+        description: 'Your location, personal information, accessibility, and unit preferences have been updated.'
       });
     } catch (error: any) {
       toast({
@@ -243,6 +248,58 @@ export function LocationTab() {
 
         <Separator />
 
+        {/* Unit Preferences */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Ruler className="w-5 h-5" />
+            <h3 className="text-lg font-medium">Units & Measurements</h3>
+          </div>
+          
+          <Card>
+            <CardHeader>
+              <CardDescription>
+                Choose your preferred measurement system for displaying distances, speeds, and other measurements.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-3">
+                <Label>Measurement System</Label>
+                <Select 
+                  value={unitPreferences.measurement_system} 
+                  onValueChange={(value: 'metric' | 'imperial') => 
+                    updateUnitPreferences({ measurement_system: value })
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="metric">Metric (km/h, meters, cm)</SelectItem>
+                    <SelectItem value="imperial">Imperial (mph, feet, inches)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-1">
+                  <Label>Auto-detect from location</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Automatically set measurement system based on your location when you first visit
+                  </p>
+                </div>
+                <Switch 
+                  checked={unitPreferences.auto_detect} 
+                  onCheckedChange={(checked) => 
+                    updateUnitPreferences({ auto_detect: checked })
+                  } 
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Separator />
+
         {/* Accessibility Options */}
         <div className="space-y-4">
           <div className="flex items-center gap-2">