Merge pull request #262 from codeunia-dev/feat/profilepicture

feat(users): Enhance profile picture display and preview functionality

Author: codeunia-dev

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]}`

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>