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' :
@@ -161,6 +165,7 @@ export const QueueItem = memo(({
                   id: item.id,
                 }}
                 compact={true}
+                onValidationChange={setValidationResult}
               />
           </div>
           <div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>

src/components/moderation/ValidationSummary.tsx

@@ -3,6 +3,7 @@ import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { validateEntityData, ValidationResult } from '@/lib/entityValidationSchemas';
 
 interface ValidationSummaryProps {
@@ -47,6 +48,13 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
     validate();
   }, [item.item_type, item.item_data, item.id, onValidationChange]);
 
+  // Auto-expand when there are blocking errors or warnings
+  useEffect(() => {
+    if (validationResult && (validationResult.blockingErrors.length > 0 || validationResult.warnings.length > 0)) {
+      setIsExpanded(true);
+    }
+  }, [validationResult]);
+
   if (isLoading) {
     return (
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -68,7 +76,10 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
   // Compact view (for queue items)
   if (compact) {
     return (
-      <div className="flex items-center gap-2">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center gap-2 cursor-help">
               {validationResult.isValid && !hasWarnings && !hasSuggestions && (
                 <Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
                   <CheckCircle className="w-3 h-3 mr-1" />
@@ -94,6 +105,75 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
                 </Badge>
               )}
             </div>
+          </TooltipTrigger>
+          
+          {hasAnyIssues && (
+            <TooltipContent side="right" className="max-w-md">
+              <div className="space-y-2">
+                {hasBlockingErrors && (
+                  <div>
+                    <p className="font-semibold text-red-600 dark:text-red-400 text-xs mb-1">
+                      Blocking Errors:
+                    </p>
+                    <ul className="text-xs space-y-1">
+                      {validationResult.blockingErrors.slice(0, 3).map((error, i) => (
+                        <li key={i} className="text-muted-foreground">
+                          • <span className="font-medium">{error.field}:</span> {error.message}
+                        </li>
+                      ))}
+                      {validationResult.blockingErrors.length > 3 && (
+                        <li className="text-muted-foreground italic">
+                          ... and {validationResult.blockingErrors.length - 3} more
+                        </li>
+                      )}
+                    </ul>
+                  </div>
+                )}
+                
+                {hasWarnings && (
+                  <div>
+                    <p className="font-semibold text-yellow-600 dark:text-yellow-400 text-xs mb-1">
+                      Warnings:
+                    </p>
+                    <ul className="text-xs space-y-1">
+                      {validationResult.warnings.slice(0, 3).map((warning, i) => (
+                        <li key={i} className="text-muted-foreground">
+                          • <span className="font-medium">{warning.field}:</span> {warning.message}
+                        </li>
+                      ))}
+                      {validationResult.warnings.length > 3 && (
+                        <li className="text-muted-foreground italic">
+                          ... and {validationResult.warnings.length - 3} more
+                        </li>
+                      )}
+                    </ul>
+                  </div>
+                )}
+
+                {hasSuggestions && !hasBlockingErrors && !hasWarnings && (
+                  <div>
+                    <p className="font-semibold text-blue-600 dark:text-blue-400 text-xs mb-1">
+                      Suggestions:
+                    </p>
+                    <ul className="text-xs space-y-1">
+                      {validationResult.suggestions.slice(0, 3).map((suggestion, i) => (
+                        <li key={i} className="text-muted-foreground">
+                          • <span className="font-medium">{suggestion.field}:</span> {suggestion.message}
+                        </li>
+                      ))}
+                      {validationResult.suggestions.length > 3 && (
+                        <li className="text-muted-foreground italic">
+                          ... and {validationResult.suggestions.length - 3} more
+                        </li>
+                      )}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </TooltipContent>
+          )}
+        </Tooltip>
+      </TooltipProvider>
     );
   }