Add photo upload functionality

src/pages/Profile.tsx

@@ -26,6 +26,7 @@ import {
 import { Profile as ProfileType } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
+import { PhotoUpload } from '@/components/upload/PhotoUpload';
 
 export default function Profile() {
   const { username } = useParams<{ username?: string }>();
@@ -38,8 +39,8 @@ export default function Profile() {
   const [editForm, setEditForm] = useState({
     display_name: '',
     bio: '',
-    avatar_url: ''
   });
+  const [avatarUrl, setAvatarUrl] = useState<string>('');
 
   useEffect(() => {
     getCurrentUser();
@@ -70,8 +71,8 @@ export default function Profile() {
         setEditForm({
           display_name: data.display_name || '',
           bio: data.bio || '',
-          avatar_url: data.avatar_url || ''
         });
+        setAvatarUrl(data.avatar_url || '');
       }
     } catch (error: any) {
       console.error('Error fetching profile:', error);
@@ -107,8 +108,8 @@ export default function Profile() {
         setEditForm({
           display_name: data.display_name || '',
           bio: data.bio || '',
-          avatar_url: data.avatar_url || ''
         });
+        setAvatarUrl(data.avatar_url || '');
       }
     } catch (error: any) {
       console.error('Error fetching profile:', error);
@@ -131,7 +132,7 @@ export default function Profile() {
         .update({
           display_name: editForm.display_name,
           bio: editForm.bio,
-          avatar_url: editForm.avatar_url
+          avatar_url: avatarUrl
         })
         .eq('user_id', currentUser.id);
 
@@ -141,7 +142,7 @@ export default function Profile() {
         ...prev,
         display_name: editForm.display_name,
         bio: editForm.bio,
-        avatar_url: editForm.avatar_url
+        avatar_url: avatarUrl
       } : null);
 
       setEditing(false);
@@ -207,12 +208,20 @@ export default function Profile() {
             <CardContent className="p-8">
               <div className="flex flex-col md:flex-row gap-6">
                 <div className="flex flex-col items-center md:items-start">
-                  <Avatar className="w-32 h-32 mb-4">
-                    <AvatarImage src={profile.avatar_url || ''} alt={profile.display_name || profile.username} />
-                    <AvatarFallback className="text-2xl">
-                      {(profile.display_name || profile.username).charAt(0).toUpperCase()}
-                    </AvatarFallback>
-                  </Avatar>
+                  <PhotoUpload
+                    variant="avatar"
+                    maxFiles={1}
+                    existingPhotos={profile.avatar_url ? [profile.avatar_url] : []}
+                    onUploadComplete={(urls) => setAvatarUrl(urls[0] || '')}
+                    onError={(error) => {
+                      toast({
+                        title: "Upload Error",
+                        description: error,
+                        variant: "destructive"
+                      });
+                    }}
+                    className="mb-4"
+                  />
                   
                   {isOwnProfile && !editing && (
                     <Button
@@ -250,16 +259,6 @@ export default function Profile() {
                           rows={3}
                         />
                       </div>
-                      
-                      <div>
-                        <Label htmlFor="avatar_url">Avatar URL</Label>
-                        <Input
-                          id="avatar_url"
-                          value={editForm.avatar_url}
-                          onChange={(e) => setEditForm(prev => ({ ...prev, avatar_url: e.target.value }))}
-                          placeholder="https://..."
-                        />
-                      </div>
 
                       <div className="flex gap-2">
                         <Button onClick={handleSaveProfile} size="sm">