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
+              <ValidationSummary
-              item={{
+                item={{
-                item_type: item.submission_type || 'submission',
+                  item_type: item.submission_type || 'submission',
-                item_data: item.content,
+                  item_data: item.content,
-                id: item.id,
+                  id: item.id,
-              }}
+                }}
-              compact={true}
+                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"} />

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,32 +76,104 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
   // Compact view (for queue items)
   if (compact) {
     return (
-      <div className="flex items-center gap-2">
+      <TooltipProvider>
-        {validationResult.isValid && !hasWarnings && !hasSuggestions && (
+        <Tooltip>
-          <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">
+          <TooltipTrigger asChild>
-            <CheckCircle className="w-3 h-3 mr-1" />
+            <div className="flex items-center gap-2 cursor-help">
-            Valid
+              {validationResult.isValid && !hasWarnings && !hasSuggestions && (
-          </Badge>
+                <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" />
-        {hasBlockingErrors && (
+                  Valid
-          <Badge variant="destructive">
+                </Badge>
-            <AlertCircle className="w-3 h-3 mr-1" />
+              )}
-            {validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
+              {hasBlockingErrors && (
-          </Badge>
+                <Badge variant="destructive">
-        )}
+                  <AlertCircle className="w-3 h-3 mr-1" />
-        {hasWarnings && !hasBlockingErrors && (
+                  {validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
-          <Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
+                </Badge>
-            <AlertTriangle className="w-3 h-3 mr-1" />
+              )}
-            {validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
+              {hasWarnings && !hasBlockingErrors && (
-          </Badge>
+                <Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
-        )}
+                  <AlertTriangle className="w-3 h-3 mr-1" />
-        {hasSuggestions && !hasBlockingErrors && !hasWarnings && (
+                  {validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
-          <Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700">
+                </Badge>
-            <Info className="w-3 h-3 mr-1" />
+              )}
-            {validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''}
+              {hasSuggestions && !hasBlockingErrors && !hasWarnings && (
-          </Badge>
+                <Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700">
-        )}
+                  <Info className="w-3 h-3 mr-1" />
-      </div>
+                  {validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''}
+                </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>
     );
   }