pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 14:51:13 -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 { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader } from '@/components/ui/card'; 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 { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -225,12 +225,12 @@ export const QueueItem = memo(({
{item.user_profile && ( {item.user_profile && (
<div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}> <div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<Avatar className={isMobile ? "h-7 w-7" : "h-8 w-8"}> <UserAvatar
<AvatarImage src={item.user_profile.avatar_url} /> key={item.user_profile.avatar_url || `user-${item.user_id}`}
<AvatarFallback className={isMobile ? "text-xs" : ""}> avatarUrl={item.user_profile.avatar_url}
{(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()} fallbackText={item.user_profile.display_name || item.user_profile.username || 'U'}
</AvatarFallback> size={isMobile ? "sm" : "md"}
</Avatar> />
<div> <div>
<span className="font-medium"> <span className="font-medium">
{item.user_profile.display_name || item.user_profile.username} {item.user_profile.display_name || item.user_profile.username}
@@ -656,12 +656,13 @@ export const QueueItem = memo(({
<> <>
<span>by</span> <span>by</span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Avatar className="h-6 w-6"> <UserAvatar
<AvatarImage src={item.reviewer_profile.avatar_url} /> key={item.reviewer_profile.avatar_url || `reviewer-${item.reviewed_by}`}
<AvatarFallback className="text-xs"> avatarUrl={item.reviewer_profile.avatar_url}
{(item.reviewer_profile.display_name || item.reviewer_profile.username)?.slice(0, 2).toUpperCase()} fallbackText={item.reviewer_profile.display_name || item.reviewer_profile.username || 'R'}
</AvatarFallback> size="sm"
</Avatar> className="h-6 w-6"
/>
<span className="font-medium"> <span className="font-medium">
{item.reviewer_profile.display_name || item.reviewer_profile.username} {item.reviewer_profile.display_name || item.reviewer_profile.username}
</span> </span>

15
src/components/reviews/ReviewsList.tsx
View File

@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; 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 { Star, ThumbsUp, Calendar, MapPin } from 'lucide-react';
import { supabase } from '@/integrations/supabase/client'; import { supabase } from '@/integrations/supabase/client';
import { ReportButton } from '@/components/moderation/ReportButton'; import { ReportButton } from '@/components/moderation/ReportButton';
@@ -129,12 +129,13 @@ export function ReviewsList({ entityType, entityId, entityName }: ReviewsListPro
<Card key={review.id}> <Card key={review.id}>
<CardContent className="p-6"> <CardContent className="p-6">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<Avatar className="w-12 h-12"> <UserAvatar
<AvatarImage src={review.profiles?.avatar_url || ''} /> key={review.profiles?.avatar_url || `review-${review.id}`}
<AvatarFallback> avatarUrl={review.profiles?.avatar_url}
{(review.profiles?.display_name || review.profiles?.username || 'U').charAt(0).toUpperCase()} fallbackText={review.profiles?.display_name || review.profiles?.username || 'U'}
</AvatarFallback> size="lg"
</Avatar> className="w-12 h-12"
/>
<div className="flex-1 space-y-3"> <div className="flex-1 space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">