From a1beba6996899a4d93ff61f5fefe46004c018fd4 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 12 Nov 2025 14:56:11 +0000
Subject: [PATCH] testing changes with virtual file cleanup

---
 .../moderation/DetailedViewCollapsible.tsx         | 14 ++++++++++++--
 src/components/moderation/SubmissionItemsList.tsx  | 11 ++++++++---
 src/hooks/useDetailedViewState.ts                  |  6 ++++--
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/moderation/DetailedViewCollapsible.tsx b/src/components/moderation/DetailedViewCollapsible.tsx
index 9e778cca..7868603c 100644
--- a/src/components/moderation/DetailedViewCollapsible.tsx
+++ b/src/components/moderation/DetailedViewCollapsible.tsx
@@ -10,6 +10,7 @@ interface DetailedViewCollapsibleProps {
   children: React.ReactNode;
   fieldCount?: number;
   className?: string;
+  staggerIndex?: number;
 }
 
 /**
@@ -21,8 +22,11 @@ export function DetailedViewCollapsible({
   onToggle,
   children,
   fieldCount,
-  className
+  className,
+  staggerIndex = 0
 }: DetailedViewCollapsibleProps) {
+  // Calculate stagger delay: 50ms per item, max 300ms
+  const staggerDelay = Math.min(staggerIndex * 50, 300);
   return (
     <Collapsible open={!isCollapsed} onOpenChange={() => onToggle()}>
       <div className={cn("mt-6 pt-6 border-t", className)}>
@@ -59,7 +63,13 @@ export function DetailedViewCollapsible({
           </Button>
         </CollapsibleTrigger>
         
-        <CollapsibleContent className="mt-3">
+        <CollapsibleContent 
+          className="mt-3"
+          style={{
+            animationDelay: `${staggerDelay}ms`,
+            transitionDelay: `${staggerDelay}ms`
+          }}
+        >
           {children}
         </CollapsibleContent>
       </div>
diff --git a/src/components/moderation/SubmissionItemsList.tsx b/src/components/moderation/SubmissionItemsList.tsx
index 85ab1b3b..b85c67a6 100644
--- a/src/components/moderation/SubmissionItemsList.tsx
+++ b/src/components/moderation/SubmissionItemsList.tsx
@@ -135,7 +135,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
   }
 
   // Render item with appropriate display component
-  const renderItem = (item: SubmissionItemData) => {
+  const renderItem = (item: SubmissionItemData, index: number = 0) => {
     // SubmissionItemData from submissions.ts has item_data property
     const entityData = item.item_data;
     const actionType = item.action_type || 'create';
@@ -201,6 +201,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
+            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -225,6 +226,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
+            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -249,6 +251,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
+            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -273,6 +276,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
+            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -297,6 +301,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
+            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -334,9 +339,9 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
         )}
         
         {/* Show regular submission items */}
-        {items.map((item) => (
+        {items.map((item, index) => (
           <div key={item.id} className={view === 'summary' ? 'border-l-2 border-primary/20 pl-3' : ''}>
-            {renderItem(item)}
+            {renderItem(item, index)}
           </div>
         ))}
 
diff --git a/src/hooks/useDetailedViewState.ts b/src/hooks/useDetailedViewState.ts
index 836ce6c5..18d378d0 100644
--- a/src/hooks/useDetailedViewState.ts
+++ b/src/hooks/useDetailedViewState.ts
@@ -50,8 +50,10 @@ export function useDetailedViewState(): UseDetailedViewStateReturn {
           });
         }
 
-        if (data?.moderation_preferences) {
-          const prefs = data.moderation_preferences as ModerationPreferences;
+        // Type assertion needed until Supabase regenerates types after migration
+        const preferences = (data as any)?.moderation_preferences;
+        if (preferences) {
+          const prefs = preferences as ModerationPreferences;
           setIsCollapsed(prefs.detailed_view_collapsed ?? true);
         }
       } else {