From 8a2d57b08cc9f7d262cb3205fa0ae0838cddef52 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 13 Oct 2025 16:03:29 +0000
Subject: [PATCH] Improve avatar display to ensure consistency across the
 application

Replace default Avatar component with a new UserAvatar component, ensuring consistent rendering of user avatars and fallbacks in moderation queue and review lists.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ef7037e7-a631-48a2-94d1-9a4b52d7c35a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7cdf4e95-3f41-4180-b8e3-8ef56d032c0e/ef7037e7-a631-48a2-94d1-9a4b52d7c35a/OwE1IU0
---
 src/components/moderation/QueueItem.tsx | 27 +++++++++++++------------
 src/components/reviews/ReviewsList.tsx  | 15 +++++++-------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx
index 23bb2766..9afe6dfd 100644
--- a/src/components/moderation/QueueItem.tsx
+++ b/src/components/moderation/QueueItem.tsx
@@ -8,7 +8,7 @@ import { getSubmissionTypeLabel } from '@/lib/moderation/entities';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { UserAvatar } from '@/components/ui/user-avatar';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -225,12 +225,12 @@ export const QueueItem = memo(({
         
         {item.user_profile && (
           <div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
-            <Avatar className={isMobile ? "h-7 w-7" : "h-8 w-8"}>
-              <AvatarImage src={item.user_profile.avatar_url} />
-              <AvatarFallback className={isMobile ? "text-xs" : ""}>
-                {(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
+            <UserAvatar
+              key={item.user_profile.avatar_url || `user-${item.user_id}`}
+              avatarUrl={item.user_profile.avatar_url}
+              fallbackText={item.user_profile.display_name || item.user_profile.username || 'U'}
+              size={isMobile ? "sm" : "md"}
+            />
             <div>
               <span className="font-medium">
                 {item.user_profile.display_name || item.user_profile.username}
@@ -656,12 +656,13 @@ export const QueueItem = memo(({
                 <>
                   <span>by</span>
                   <div className="flex items-center gap-2">
-                    <Avatar className="h-6 w-6">
-                      <AvatarImage src={item.reviewer_profile.avatar_url} />
-                      <AvatarFallback className="text-xs">
-                        {(item.reviewer_profile.display_name || item.reviewer_profile.username)?.slice(0, 2).toUpperCase()}
-                      </AvatarFallback>
-                    </Avatar>
+                    <UserAvatar
+                      key={item.reviewer_profile.avatar_url || `reviewer-${item.reviewed_by}`}
+                      avatarUrl={item.reviewer_profile.avatar_url}
+                      fallbackText={item.reviewer_profile.display_name || item.reviewer_profile.username || 'R'}
+                      size="sm"
+                      className="h-6 w-6"
+                    />
                     <span className="font-medium">
                       {item.reviewer_profile.display_name || item.reviewer_profile.username}
                     </span>
diff --git a/src/components/reviews/ReviewsList.tsx b/src/components/reviews/ReviewsList.tsx
index 3393943d..087d1b6f 100644
--- a/src/components/reviews/ReviewsList.tsx
+++ b/src/components/reviews/ReviewsList.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { UserAvatar } from '@/components/ui/user-avatar';
 import { Star, ThumbsUp, Calendar, MapPin } from 'lucide-react';
 import { supabase } from '@/integrations/supabase/client';
 import { ReportButton } from '@/components/moderation/ReportButton';
@@ -129,12 +129,13 @@ export function ReviewsList({ entityType, entityId, entityName }: ReviewsListPro
           <Card key={review.id}>
             <CardContent className="p-6">
               <div className="flex items-start gap-4">
-                <Avatar className="w-12 h-12">
-                  <AvatarImage src={review.profiles?.avatar_url || ''} />
-                  <AvatarFallback>
-                    {(review.profiles?.display_name || review.profiles?.username || 'U').charAt(0).toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
+                <UserAvatar 
+                  key={review.profiles?.avatar_url || `review-${review.id}`}
+                  avatarUrl={review.profiles?.avatar_url}
+                  fallbackText={review.profiles?.display_name || review.profiles?.username || 'U'}
+                  size="lg"
+                  className="w-12 h-12"
+                />
 
                 <div className="flex-1 space-y-3">
                   <div className="flex items-center justify-between">