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

Refactor: Implement Phase 2

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-11-04 01:50:11 +00:00
parent 9b1964d634
commit 91da509f04
3 changed files with 281 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/moderation/renderers/QueueItemHeader.tsx
View File

@@ -1,6 +1,7 @@
import { memo, useCallback } from 'react';
import { MessageSquare, Image, FileText, Calendar, Edit, Lock, AlertCircle } from 'lucide-react';
import { MessageSquare, Image, FileText, Calendar, Edit, Lock, AlertCircle, Code2 } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { UserAvatar } from '@/components/ui/user-avatar';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { ValidationSummary } from '../ValidationSummary';
@@ -16,6 +17,7 @@ interface QueueItemHeaderProps {
currentLockSubmissionId?: string;
validationResult: ValidationResult | null;
onValidationChange: (result: ValidationResult) => void;
onViewRawData?: () => void;
}
const getStatusBadgeVariant = (status: string): "default" | "secondary" | "destructive" | "outline" => {
@@ -36,7 +38,8 @@ export const QueueItemHeader = memo(({
isLockedByOther,
currentLockSubmissionId,
validationResult,
onValidationChange
onValidationChange,
onViewRawData
}: QueueItemHeaderProps) => {
const handleValidationChange = useCallback((result: ValidationResult) => {
onValidationChange(result);
@@ -45,7 +48,7 @@ export const QueueItemHeader = memo(({
return (
<>
<div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
<div className="flex items-center gap-2 flex-wrap">
<div className="flex items-center gap-2 flex-wrap flex-1">
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
{item.type === 'review' ? (
<>
@@ -114,18 +117,40 @@ export const QueueItemHeader = memo(({
/>
)}
</div>
<Tooltip>
<TooltipTrigger asChild>
<div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
<Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
{format(new Date(item.created_at), isMobile ? 'MMM d, HH:mm:ss' : 'MMM d, yyyy HH:mm:ss.SSS')}
</div>
</TooltipTrigger>
<TooltipContent>
<p className="text-xs">Full timestamp:</p>
<p className="font-mono">{item.created_at}</p>
</TooltipContent>
</Tooltip>
<div className="flex items-center gap-2">
{onViewRawData && (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={onViewRawData}
className="h-8"
>
<Code2 className="h-4 w-4" />
{!isMobile && <span className="ml-2">Raw Data</span>}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>View complete JSON data</p>
</TooltipContent>
</Tooltip>
)}
<Tooltip>
<TooltipTrigger asChild>
<div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
<Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
{format(new Date(item.created_at), isMobile ? 'MMM d, HH:mm:ss' : 'MMM d, yyyy HH:mm:ss.SSS')}
</div>
</TooltipTrigger>
<TooltipContent>
<p className="text-xs">Full timestamp:</p>
<p className="font-mono">{item.created_at}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
{item.user_profile && (