Refactor: Simplify auth and profile handling

src/components/auth/AuthButtons.tsx

@@ -5,16 +5,13 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { User, Settings, LogOut } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
+import { useProfile } from '@/hooks/useProfile';
 import { useToast } from '@/hooks/use-toast';
 import { AuthModal } from './AuthModal';
 
 export function AuthButtons() {
-  const {
-    user,
-    profile,
-    loading,
-    signOut
-  } = useAuth();
+  const { user, loading: authLoading, signOut } = useAuth();
+  const { data: profile, isLoading: profileLoading } = useProfile(user?.id);
   const navigate = useNavigate();
   const {
     toast
@@ -43,7 +40,7 @@ export function AuthButtons() {
   };
   
   // Show loading skeleton only during initial auth check
-  if (loading) {
+  if (authLoading) {
     return (
       <div className="flex gap-2 items-center">
         <div className="h-8 w-16 bg-muted animate-pulse rounded" />
@@ -83,17 +80,6 @@ export function AuthButtons() {
       </>
     );
   }
-  // Debug logging for avatar rendering
-  console.log('[AuthButtons] Component render:', {
-    hasUser: !!user,
-    hasProfile: !!profile,
-    hasAvatarUrl: !!profile?.avatar_url,
-    avatarUrl: profile?.avatar_url,
-    displayName: profile?.display_name,
-    username: profile?.username,
-    loading
-  });
-
   return <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">

src/components/settings/AccountProfileTab.tsx

@@ -13,6 +13,7 @@ import { Separator } from '@/components/ui/separator';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
+import { useProfile } from '@/hooks/useProfile';
 import { supabase } from '@/integrations/supabase/client';
 import { User, Upload, Trash2, Mail, AlertCircle, X } from 'lucide-react';
 import { PhotoUpload } from '@/components/upload/PhotoUpload';
@@ -36,7 +37,8 @@ const profileSchema = z.object({
 type ProfileFormData = z.infer<typeof profileSchema>;
 
 export function AccountProfileTab() {
-  const { user, profile, refreshProfile, pendingEmail, clearPendingEmail } = useAuth();
+  const { user, pendingEmail, clearPendingEmail } = useAuth();
+  const { data: profile, refreshProfile } = useProfile(user?.id);
   const { toast } = useToast();
   const [loading, setLoading] = useState(false);
   const [avatarLoading, setAvatarLoading] = useState(false);

src/components/settings/DataExportTab.tsx

@@ -6,13 +6,12 @@ import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
+import { useProfile } from '@/hooks/useProfile';
 import { supabase } from '@/integrations/supabase/client';
 import { Download, BarChart3, Upload, FileText, History } from 'lucide-react';
 export function DataExportTab() {
-  const {
-    user,
-    profile
-  } = useAuth();
+  const { user } = useAuth();
+  const { data: profile } = useProfile(user?.id);
   const {
     toast
   } = useToast();

src/components/settings/LocationTab.tsx

@@ -11,6 +11,7 @@ import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
+import { useProfile } from '@/hooks/useProfile';
 import { useUnitPreferences } from '@/hooks/useUnitPreferences';
 import { supabase } from '@/integrations/supabase/client';
 import { MapPin, Calendar, Globe, Accessibility, Ruler } from 'lucide-react';
@@ -28,14 +29,9 @@ interface AccessibilityOptions {
   reduced_motion: boolean;
 }
 export function LocationTab() {
-  const {
-    user,
-    profile,
-    refreshProfile
-  } = useAuth();
-  const {
-    toast
-  } = useToast();
+  const { user } = useAuth();
+  const { data: profile, refreshProfile } = useProfile(user?.id);
+  const { toast } = useToast();
   const { preferences: unitPreferences, updatePreferences: updateUnitPreferences } = useUnitPreferences();
   const [loading, setLoading] = useState(false);
   const [parks, setParks] = useState<any[]>([]);

src/components/settings/PrivacyTab.tsx

@@ -8,6 +8,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Separator } from '@/components/ui/separator';
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
+import { useProfile } from '@/hooks/useProfile';
 import { supabase } from '@/integrations/supabase/client';
 import { Eye, UserX, Shield, Search } from 'lucide-react';
 import { BlockedUsers } from '@/components/privacy/BlockedUsers';
@@ -26,14 +27,9 @@ interface ProfilePrivacy {
   show_pronouns: boolean;
 }
 export function PrivacyTab() {
-  const {
-    user,
-    profile,
-    refreshProfile
-  } = useAuth();
-  const {
-    toast
-  } = useToast();
+  const { user } = useAuth();
+  const { data: profile, refreshProfile } = useProfile(user?.id);
+  const { toast } = useToast();
   const [loading, setLoading] = useState(false);
   const [preferences, setPreferences] = useState<PrivacySettings | null>(null);
   const form = useForm<ProfilePrivacy & PrivacySettings>({