Clarify preview usage scope

src/components/moderation/SubmissionItemsList.tsx

@@ -2,10 +2,14 @@ import { useState, useEffect, memo } from 'react';
 import { supabase } from '@/lib/supabaseClient';
 import { SubmissionChangesDisplay } from './SubmissionChangesDisplay';
 import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay';
+import { RichParkDisplay } from './displays/RichParkDisplay';
+import { RichRideDisplay } from './displays/RichRideDisplay';
+import { RichCompanyDisplay } from './displays/RichCompanyDisplay';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { AlertCircle, Loader2 } from 'lucide-react';
 import type { SubmissionItemData } from '@/types/submissions';
+import type { ParkSubmissionData, RideSubmissionData, CompanySubmissionData } from '@/types/submission-data';
 import { logger } from '@/lib/logger';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { ModerationErrorBoundary } from '@/components/error/ModerationErrorBoundary';
@@ -170,9 +174,66 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
     );
   }
 
+  // Render item with appropriate display component
+  const renderItem = (item: SubmissionItemData) => {
+    // SubmissionItemData from submissions.ts has item_data property
+    const entityData = item.item_data;
+    const actionType = item.action_type || 'create';
+    
+    // Use summary view for compact display
+    if (view === 'summary') {
+      return (
+        <SubmissionChangesDisplay 
+          item={item}
+          view={view}
+          showImages={showImages}
+          submissionId={submissionId}
+        />
+      );
+    }
+    
+    // Use rich displays for detailed view
+    if (item.item_type === 'park' && entityData) {
+      return (
+        <RichParkDisplay
+          data={entityData as unknown as ParkSubmissionData}
+          actionType={actionType}
+        />
+      );
+    }
+    
+    if (item.item_type === 'ride' && entityData) {
+      return (
+        <RichRideDisplay
+          data={entityData as unknown as RideSubmissionData}
+          actionType={actionType}
+        />
+      );
+    }
+    
+    if ((['manufacturer', 'operator', 'designer', 'property_owner'] as const).some(type => type === item.item_type) && entityData) {
+      return (
+        <RichCompanyDisplay
+          data={entityData as unknown as CompanySubmissionData}
+          actionType={actionType}
+        />
+      );
+    }
+    
+    // Fallback to SubmissionChangesDisplay
+    return (
+      <SubmissionChangesDisplay 
+        item={item}
+        view={view}
+        showImages={showImages}
+        submissionId={submissionId}
+      />
+    );
+  };
+
   return (
     <ModerationErrorBoundary submissionId={submissionId}>
-      <div className="flex flex-col gap-3">
+      <div className={view === 'summary' ? 'flex flex-col gap-3' : 'flex flex-col gap-6'}>
         {refreshing && (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
             <Loader2 className="h-3 w-3 animate-spin" />
@@ -183,12 +244,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
         {/* Show regular submission items */}
         {items.map((item) => (
           <div key={item.id} className={view === 'summary' ? 'border-l-2 border-primary/20 pl-3' : ''}>
-            <SubmissionChangesDisplay 
-              item={item}
-              view={view}
-              showImages={showImages}
-              submissionId={submissionId}
-            />
+            {renderItem(item)}
           </div>
         ))}