Changes

src/components/moderation/DetailedViewCollapsible.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -10,7 +10,6 @@ interface DetailedViewCollapsibleProps {
   children: React.ReactNode;
   fieldCount?: number;
   className?: string;
-  staggerIndex?: number;
 }
 
 /**
@@ -22,11 +21,8 @@ export function DetailedViewCollapsible({
   onToggle,
   children,
   fieldCount,
-  className,
-  staggerIndex = 0
+  className
 }: 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)}>
@@ -53,23 +49,16 @@ export function DetailedViewCollapsible({
               <span className="text-xs text-muted-foreground normal-case font-normal">
                 {isCollapsed ? 'Show' : 'Hide'}
               </span>
-              <ChevronDown 
-                className={cn(
-                  "h-4 w-4 text-muted-foreground transition-all duration-300 ease-out",
-                  !isCollapsed && "rotate-180"
-                )}
-              />
+              {isCollapsed ? (
+                <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
+              ) : (
+                <ChevronUp className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
+              )}
             </div>
           </Button>
         </CollapsibleTrigger>
         
-        <CollapsibleContent 
-          className="mt-3"
-          style={{
-            animationDelay: `${staggerDelay}ms`,
-            transitionDelay: `${staggerDelay}ms`
-          }}
-        >
+        <CollapsibleContent className="mt-3 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
           {children}
         </CollapsibleContent>
       </div>

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, index: number = 0) => {
+  const renderItem = (item: SubmissionItemData) => {
     // SubmissionItemData from submissions.ts has item_data property
     const entityData = item.item_data;
     const actionType = item.action_type || 'create';
@@ -201,7 +201,6 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
-            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -226,7 +225,6 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
-            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -251,7 +249,6 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
-            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -276,7 +273,6 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
-            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -301,7 +297,6 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             isCollapsed={isCollapsed} 
             onToggle={toggle}
             fieldCount={countFields(entityData)}
-            staggerIndex={index}
           >
             <SubmissionChangesDisplay 
               item={item}
@@ -339,9 +334,9 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
         )}
         
         {/* Show regular submission items */}
-        {items.map((item, index) => (
+        {items.map((item) => (
           <div key={item.id} className={view === 'summary' ? 'border-l-2 border-primary/20 pl-3' : ''}>
-            {renderItem(item, index)}
+            {renderItem(item)}
           </div>
         ))}
 

src/components/ui/collapsible.tsx

@@ -1,30 +1,9 @@
-import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { cn } from "@/lib/utils";
 
 const Collapsible = CollapsiblePrimitive.Root;
 
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <CollapsiblePrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden transition-all duration-300 ease-out",
-      "data-[state=closed]:animate-accordion-up",
-      "data-[state=open]:animate-accordion-down",
-      className
-    )}
-    {...props}
-  >
-    <div className="animate-fade-in">
-      {children}
-    </div>
-  </CollapsiblePrimitive.Content>
-));
-CollapsibleContent.displayName = "CollapsibleContent";
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/hooks/useDetailedViewState.ts

@@ -50,10 +50,8 @@ export function useDetailedViewState(): UseDetailedViewStateReturn {
           });
         }
 
-        // Type assertion needed until Supabase regenerates types after migration
-        const preferences = (data as any)?.moderation_preferences;
-        if (preferences) {
-          const prefs = preferences as ModerationPreferences;
+        if (data?.moderation_preferences) {
+          const prefs = data.moderation_preferences as ModerationPreferences;
           setIsCollapsed(prefs.detailed_view_collapsed ?? true);
         }
       } else {

supabase/functions/process-selective-approval/index.ts

@@ -207,8 +207,8 @@ const handler = async (req: Request, context: { supabase: any; user: any; span:
         p_moderator_id: user.id,
         p_submitter_id: submission.user_id,
         p_request_id: requestId,
-        p_approval_mode: 'selective',
-        p_idempotency_key: idempotencyKey
+        p_trace_id: rootSpan.traceId,
+        p_parent_span_id: rpcSpan.spanId
       }
     );
 

supabase/migrations/20251112145039_d6da1015-893e-4a5b-9f17-d71d03809851.sql

@@ -1,12 +0,0 @@
--- Add moderation_preferences column to user_preferences table
--- This stores moderator UI preferences like detailed view collapsed state
-
-ALTER TABLE public.user_preferences 
-ADD COLUMN IF NOT EXISTS moderation_preferences JSONB NOT NULL DEFAULT '{}'::jsonb;
-
-COMMENT ON COLUMN public.user_preferences.moderation_preferences IS 
-  'Stores moderator UI preferences like detailed view collapsed state';
-
--- Add GIN index for efficient JSONB queries
-CREATE INDEX IF NOT EXISTS idx_user_preferences_moderation_prefs 
-ON public.user_preferences USING gin(moderation_preferences);