feat: Improve validation visibility in moderation queue

src/components/moderation/QueueItem.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -41,6 +41,7 @@ interface ModerationItem {
 }
 
 import { ValidationSummary } from './ValidationSummary';
+import type { ValidationResult } from '@/lib/entityValidationSchemas';
 
 interface QueueItemProps {
   item: ModerationItem;
@@ -96,10 +97,13 @@ export const QueueItem = memo(({
   onInteractionFocus,
   onInteractionBlur
 }: QueueItemProps) => {
+  const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
+  
   return (
     <Card 
       key={item.id} 
       className={`border-l-4 transition-opacity duration-200 ${
+        validationResult?.blockingErrors && validationResult.blockingErrors.length > 0 ? 'border-l-red-600' :
         item.status === 'flagged' ? 'border-l-red-500' :
         item.status === 'approved' ? 'border-l-green-500' :
         item.status === 'rejected' ? 'border-l-red-400' :
@@ -154,14 +158,15 @@ export const QueueItem = memo(({
                 Claimed by You
               </Badge>
             )}
-            <ValidationSummary
-              item={{
-                item_type: item.submission_type || 'submission',
-                item_data: item.content,
-                id: item.id,
-              }}
-              compact={true}
-            />
+              <ValidationSummary
+                item={{
+                  item_type: item.submission_type || 'submission',
+                  item_data: item.content,
+                  id: item.id,
+                }}
+                compact={true}
+                onValidationChange={setValidationResult}
+              />
           </div>
           <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"} />