We now have an AuthContext!

src/components/context/auth.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
+import { getUser, getProfile, updateProfile as updateProfileAction, getSignedUrl } from '@/lib/actions';
+import type { User, Profile } from '@/utils/supabase';
+import { toast } from 'sonner';
+
+type AuthContextType = {
+  user: User | null;
+  profile: Profile | null;
+  avatarUrl: string | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  updateProfile: (data: {
+    full_name?: string;
+    email?: string;
+    avatar_url?: string;
+  }) => Promise<{ success: boolean; data?: Profile; error?: unknown }>;
+  refreshUserData: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchUserData = async () => {
+    try {
+      setIsLoading(true);
+      
+      // Get user data
+      const userResponse = await getUser();
+      if (!userResponse.success) {
+        setUser(null);
+        setProfile(null);
+        setAvatarUrl(null);
+        return;
+      }
+      
+      setUser(userResponse.data);
+      
+      // Get profile data
+      const profileResponse = await getProfile();
+      if (!profileResponse.success) {
+        setProfile(null);
+        setAvatarUrl(null);
+        return;
+      }
+      
+      setProfile(profileResponse.data);
+      
+      // Get avatar URL if available
+      if (profileResponse.data.avatar_url) {
+        const avatarResponse = await getSignedUrl({
+          bucket: 'avatars',
+          url: profileResponse.data.avatar_url,
+        });
+        
+        if (avatarResponse.success) {
+          setAvatarUrl(avatarResponse.data);
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching user data:', error);
+      toast.error('Failed to load user data');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUserData().catch((error) => {
+      console.error('Error fetching user data:', error);
+    });
+    
+    const intervalId = setInterval(() => {
+      void fetchUserData();
+    }, 30 * 60 * 1000);
+    
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const updateProfile = async (data: {
+    full_name?: string;
+    email?: string;
+    avatar_url?: string;
+  }) => {
+    try {
+      setIsLoading(true);
+      const result = await updateProfileAction(data);
+      
+      if (!result.success) {
+        throw new Error(result.error ?? 'Failed to update profile');
+      }
+      
+      setProfile(result.data);
+      
+      // If avatar was updated, refresh the avatar URL
+      if (data.avatar_url && result.data.avatar_url) {
+        const avatarResponse = await getSignedUrl({
+          bucket: 'avatars',
+          url: result.data.avatar_url,
+        });
+        
+        if (avatarResponse.success) {
+          setAvatarUrl(avatarResponse.data);
+        }
+      }
+      
+      toast.success('Profile updated successfully!');
+      return { success: true, data: result.data };
+    } catch (error) {
+      console.error('Error updating profile:', error);
+      toast.error(error instanceof Error ? error.message : 'Failed to update profile');
+      return { success: false, error };
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const refreshUserData = async () => {
+    await fetchUserData();
+  };
+
+  const value = {
+    user,
+    profile,
+    avatarUrl,
+    isLoading,
+    isAuthenticated: !!user,
+    updateProfile,
+    refreshUserData,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

src/components/context/theme.tsx

@@ -47,7 +47,13 @@ export const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
   };
 
   return (
-    <Button variant='outline' size='icon' onClick={toggleTheme} {...props}>
+    <Button
+      variant='outline'
+      size='icon'
+      className='cursor-pointer'
+      onClick={toggleTheme}
+      {...props}
+    >
       <Sun
         style={{ height: `${size}rem`, width: `${size}rem` }}
         className='rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0'

src/components/default/navigation/auth/AvatarDropdown.tsx

@@ -13,28 +13,17 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui';
-import { useProfile, useAvatar } from '@/lib/hooks';
+import { useAuth } from '@/components/context/auth';
 import { signOut } from '@/lib/actions';
 import { User } from 'lucide-react';
 
 const AvatarDropdown = () => {
-  const { profile } = useProfile();
-  const { avatarUrl, isLoading } = useAvatar(profile);
+  const { profile, avatarUrl, isLoading } = useAuth();
 
   const handleSignOut = async () => {
     await signOut();
   };
 
-  if (isLoading) {
-    return (
-      <Avatar>
-        <AvatarFallback className='animate-pulse'>
-          <User size={32} />
-        </AvatarFallback>
-      </Avatar>
-    );
-  }
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -60,13 +49,13 @@ const AvatarDropdown = () => {
         <DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
-          <Link href='/profile' className='w-full justify-center'>
+          <Link href='/profile' className='w-full justify-center cursor-pointer'>
             Edit profile
           </Link>
         </DropdownMenuItem>
         <DropdownMenuSeparator className='h-[2px]' />
         <DropdownMenuItem asChild>
-          <button onClick={handleSignOut} className='w-full justify-center'>
+          <button onClick={handleSignOut} className='w-full justify-center cursor-pointer'>
             Log out
           </button>
         </DropdownMenuItem>

src/components/default/profile/AvatarUpload.tsx

@@ -1,19 +1,14 @@
 import { useFileUpload } from '@/lib/hooks/useFileUpload';
-import { useAvatar } from '@/lib/hooks/useAvatar';
-import type { Profile } from '@/utils/supabase';
+import { useAuth } from '@/components/context/auth';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui';
-import { Pencil, User, Loader2 } from 'lucide-react';
+import { Loader2, Pencil, Upload, User } from 'lucide-react';
 
 type AvatarUploadProps = {
-  profile?: Profile;
   onAvatarUploaded: (path: string) => Promise<void>;
 };
 
-export const AvatarUpload = ({
-  profile,
-  onAvatarUploaded,
-}: AvatarUploadProps) => {
-  const { avatarUrl, isLoading } = useAvatar(profile);
+export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
+  const { profile, avatarUrl } = useAuth();
   const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
 
   const handleAvatarClick = () => {
@@ -30,27 +25,13 @@ export const AvatarUpload = ({
     }
   };
 
-  if (isLoading) {
-    return (
-      <div className='flex flex-col items-center'>
-        <div className='mb-4'>
-          <Avatar className='h-32 w-32'>
-            <AvatarFallback className='text-2xl'>
-              {profile?.full_name ? (
-                profile.full_name
-                  .split(' ')
-                  .map((n) => n[0])
-                  .join('')
-                  .toUpperCase()
-              ) : (
-                <User size={32} />
-              )}
-            </AvatarFallback>
-          </Avatar>
-        </div>
-      </div>
-    );
-  }
+  const getInitials = (name: string | null | undefined): string => {
+    if (!name) return '';
+    return name.split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase();
+  };
 
   return (
     <div className='flex flex-col items-center'>
@@ -63,27 +44,29 @@ export const AvatarUpload = ({
             <AvatarImage src={avatarUrl} alt={profile?.full_name ?? 'User'} />
           ) : (
             <AvatarFallback className='text-2xl'>
-              {profile?.full_name ? (
-                profile.full_name
-                  .split(' ')
-                  .map((n) => n[0])
-                  .join('')
-                  .toUpperCase()
-              ) : (
-                <User size={32} />
-              )}
+              {profile?.full_name
+                ? getInitials(profile.full_name)
+                : <User size={32} />}
             </AvatarFallback>
           )}
         </Avatar>
-        <div
-          className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
-          transition-all flex items-center justify-center'
-        >
-          <Pencil
-            className='text-white opacity-0 group-hover:opacity-100
-            transition-opacity'
-            size={24}
-          />
+          <div
+            className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
+              transition-all flex items-center justify-center'
+          >
+            <Upload
+              className='text-white opacity-0 group-hover:opacity-100
+                transition-opacity'
+              size={24}
+            />
+          </div>
+          <div className='absolute inset-1 transition-all flex items-end justify-end'>
+            <Pencil
+              className='text-white opacity-100 group-hover:opacity-0
+                transition-opacity'
+              size={24}
+            />
+          </div>
         </div>
         <input
           ref={fileInputRef}
@@ -93,16 +76,12 @@ export const AvatarUpload = ({
           onChange={handleFileChange}
           disabled={isUploading}
         />
-      </div>
       {isUploading && (
         <div className='flex items-center text-sm text-gray-500 mt-2'>
           <Loader2 className='h-4 w-4 mr-2 animate-spin' />
           Uploading...
         </div>
       )}
-      <p className='text-sm text-gray-500 mt-2'>
-        Click on the avatar to upload a new image
-      </p>
     </div>
   );
 };

src/components/default/profile/ProfileForm.tsx

@@ -1,7 +1,6 @@
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import type { Profile } from '@/utils/supabase';
 import {
   Button,
   Form,
@@ -15,6 +14,7 @@ import {
 } from '@/components/ui';
 import { Loader2 } from 'lucide-react';
 import { useEffect } from 'react';
+import { useAuth } from '@/components/context/auth';
 
 const formSchema = z.object({
   full_name: z.string().min(5, {
@@ -24,16 +24,12 @@ const formSchema = z.object({
 });
 
 type ProfileFormProps = {
-  profile?: Profile;
-  isLoading: boolean;
   onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
 };
 
-export function ProfileForm({
-  profile,
-  isLoading,
-  onSubmit,
-}: ProfileFormProps) {
+export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
+  const { profile, isLoading } = useAuth();
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {