Add location field to profile

src/components/profile/PersonalLocationDisplay.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import { MapPin } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+
+interface PersonalLocationDisplayProps {
+  personalLocation: string;
+  userId: string;
+  isOwnProfile: boolean;
+}
+
+export function PersonalLocationDisplay({ personalLocation, userId, isOwnProfile }: PersonalLocationDisplayProps) {
+  const [showLocation, setShowLocation] = useState(false);
+
+  useEffect(() => {
+    fetchLocationPrivacy();
+  }, [userId, isOwnProfile]);
+
+  const fetchLocationPrivacy = async () => {
+    // Always show location for own profile
+    if (isOwnProfile) {
+      setShowLocation(true);
+      return;
+    }
+
+    try {
+      const { data } = await supabase
+        .from('user_preferences')
+        .select('privacy_settings')
+        .eq('user_id', userId)
+        .maybeSingle();
+
+      if (data?.privacy_settings) {
+        const settings = data.privacy_settings as any;
+        setShowLocation(settings.show_location || false);
+      }
+    } catch (error) {
+      console.error('Error fetching location privacy:', error);
+      setShowLocation(false);
+    }
+  };
+
+  if (!showLocation || !personalLocation) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <MapPin className="w-4 h-4" />
+      {personalLocation}
+    </div>
+  );
+}

src/pages/Profile.tsx

@@ -21,6 +21,7 @@ import { PhotoUpload } from '@/components/upload/PhotoUpload';
 import { profileEditSchema } from '@/lib/validation';
 import { LocationDisplay } from '@/components/profile/LocationDisplay';
 import { UserBlockButton } from '@/components/profile/UserBlockButton';
+import { PersonalLocationDisplay } from '@/components/profile/PersonalLocationDisplay';
 export default function Profile() {
   const {
     username
@@ -394,6 +395,9 @@ export default function Profile() {
                         
                         {/* Show location only if privacy allows */}
                         {profile.location && <LocationDisplay location={profile.location} userId={profile.user_id} isOwnProfile={isOwnProfile} />}
+                        
+                        {/* Show personal location if available and privacy allows */}
+                        {profile.personal_location && <PersonalLocationDisplay personalLocation={profile.personal_location} userId={profile.user_id} isOwnProfile={isOwnProfile} />}
                       </div>
                     </div>}
                 </div>

src/types/database.ts

@@ -104,6 +104,7 @@ export interface Profile {
   preferred_language?: string;
   location?: Location;
   location_id?: string;
+  personal_location?: string;
   date_of_birth?: string;
   privacy_level: 'public' | 'friends' | 'private';
   theme_preference: 'light' | 'dark' | 'system';