pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 08:11:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve avatar display to ensure consistency across the application

Browse Source 
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
This commit is contained in:
pac7
2025-10-13 16:03:29 +00:00
committed by pacnpal
parent ad8f7a4101
commit 8a2d57b08c
2 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/moderation/QueueItem.tsx
View File

@@ -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>