From d973fe5488dd2c98f505808f82424508744f6733 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Mon, 3 Nov 2025 10:56:34 +0530
Subject: [PATCH] feat(users): Enhance profile picture display and preview
 functionality

- Add dynamic avatar image rendering in PublicProfileView component
- Implement preview URL update effect in ProfilePictureUpload
- Import AvatarImage component to support external avatar URLs
- Add conditional avatar image rendering with fallback initials
- Improve user profile visual consistency across components
---
 components/users/ProfilePictureUpload.tsx | 5 +++++
 components/users/PublicProfileView.tsx    | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/users/ProfilePictureUpload.tsx b/components/users/ProfilePictureUpload.tsx
index 103c8f9e..33285573 100644
--- a/components/users/ProfilePictureUpload.tsx
+++ b/components/users/ProfilePictureUpload.tsx
@@ -31,6 +31,11 @@ export function ProfilePictureUpload({
   const [showCropper, setShowCropper] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
+  // Update preview when currentAvatarUrl changes
+  React.useEffect(() => {
+    setPreviewUrl(currentAvatarUrl || null)
+  }, [currentAvatarUrl])
+
   const getInitials = () => {
     if (firstName && lastName) {
       return `${firstName[0]}${lastName[0]}`
diff --git a/components/users/PublicProfileView.tsx b/components/users/PublicProfileView.tsx
index 88762742..09878161 100644
--- a/components/users/PublicProfileView.tsx
+++ b/components/users/PublicProfileView.tsx
@@ -5,7 +5,7 @@ import { useAuth } from '@/lib/hooks/useAuth'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { ContributionGraph } from '@/components/ui/contribution-graph'
 import { useContributionGraph } from '@/hooks/useContributionGraph'
 import { usePublicProfileByUsername } from '@/hooks/useProfile'
@@ -149,6 +149,7 @@ export function PublicProfileView({ username }: PublicProfileViewProps) {
           <CardHeader>
             <div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center">
               <Avatar className="w-20 h-20 sm:w-24 sm:h-24">
+                {profile.avatar_url && <AvatarImage src={profile.avatar_url} alt={getFullName()} />}
                 <AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-blue-500 to-purple-600 text-white">
                   {getInitials()}
                 </AvatarFallback>
@@ -232,6 +233,7 @@ export function PublicProfileView({ username }: PublicProfileViewProps) {
         <CardHeader>
           <div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center">
             <Avatar className="w-20 h-20 sm:w-24 sm:h-24">
+              {profile.avatar_url && <AvatarImage src={profile.avatar_url} alt={getFullName()} />}
               <AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-blue-500 to-purple-600 text-white">
                 {getInitials()}
               </AvatarFallback>