Changes

Adds a JSONB moderation_preferences column to user_preferences (with default '{}'), plus comment and GIN index, enabling per-user persistence of detailed view state and resolving TS errors.

X-Lovable-Edit-ID: edt-b953d926-c053-45f2-b434-2b776f3d9569

src/components/moderation/DetailedViewCollapsible.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -49,16 +49,17 @@ export function DetailedViewCollapsible({
               <span className="text-xs text-muted-foreground normal-case font-normal">
                 {isCollapsed ? 'Show' : 'Hide'}
               </span>
-              {isCollapsed ? (
+              <ChevronDown 
-                <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
+                className={cn(
-              ) : (
+                  "h-4 w-4 text-muted-foreground transition-all duration-300 ease-out",
-                <ChevronUp className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
+                  !isCollapsed && "rotate-180"
-              )}
+                )}
+              />
             </div>
           </Button>
         </CollapsibleTrigger>
         
-        <CollapsibleContent className="mt-3 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+        <CollapsibleContent className="mt-3">
           {children}
         </CollapsibleContent>
       </div>

src/components/moderation/QueueFilters.tsx

@@ -4,6 +4,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { RefreshButton } from '@/components/ui/refresh-button';
 import { QueueSortControls } from './QueueSortControls';
 import { useFilterPanelState } from '@/hooks/useFilterPanelState';
@@ -80,25 +81,40 @@ export const QueueFilters = ({
           </div>
           <div className="flex items-center gap-2">
             {/* Global toggle for detailed views */}
-            <Button
+            <TooltipProvider>
-              variant="ghost"
+              <Tooltip>
-              size="sm"
+                <TooltipTrigger asChild>
-              onClick={toggleDetails}
+                  <Button
-              className="h-8 gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    variant="ghost"
-              title={detailsCollapsed ? "Expand all detailed views" : "Collapse all detailed views"}
+                    size="sm"
-            >
+                    onClick={toggleDetails}
-              {detailsCollapsed ? (
+                    className="h-8 gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                <>
+                  >
-                  <Maximize2 className="h-3.5 w-3.5" />
+                    {detailsCollapsed ? (
-                  {!isMobile && <span>Expand All</span>}
+                      <>
-                </>
+                        <Maximize2 className="h-3.5 w-3.5" />
-              ) : (
+                        {!isMobile && <span>Expand All</span>}
-                <>
+                      </>
-                  <Minimize2 className="h-3.5 w-3.5" />
+                    ) : (
-                  {!isMobile && <span>Collapse All</span>}
+                      <>
-                </>
+                        <Minimize2 className="h-3.5 w-3.5" />
-              )}
+                        {!isMobile && <span>Collapse All</span>}
-            </Button>
+                      </>
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-xs">
+                  <p className="text-xs">
+                    {detailsCollapsed 
+                      ? "Show detailed field-by-field view for all items in the queue"
+                      : "Hide detailed field-by-field view for all items in the queue"}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    This preference is saved to your account
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
             {isMobile && (
               <CollapsibleTrigger asChild>
                 <Button variant="ghost" size="sm" className="h-8 w-8 p-0">

src/components/ui/collapsible.tsx

@@ -1,9 +1,30 @@
+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 = CollapsiblePrimitive.CollapsibleContent;
+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";
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/hooks/useDetailedViewState.ts

@@ -1,48 +1,127 @@
 import { useState, useEffect } from 'react';
 import { logger } from '@/lib/logger';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/lib/supabaseClient';
+import { handleNonCriticalError } from '@/lib/errorHandler';
+import type { Json } from '@/integrations/supabase/types';
 
 const STORAGE_KEY = 'detailed-view-collapsed';
 
+interface ModerationPreferences {
+  detailed_view_collapsed: boolean;
+}
+
 interface UseDetailedViewStateReturn {
   isCollapsed: boolean;
   toggle: () => void;
   setCollapsed: (value: boolean) => void;
+  loading: boolean;
 }
 
 /**
  * Hook to manage detailed view collapsed/expanded state
- * Syncs with localStorage for persistence across sessions
+ * Persists to database for authenticated users, localStorage for guests
  * Defaults to collapsed to reduce visual clutter
  */
 export function useDetailedViewState(): UseDetailedViewStateReturn {
-  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
+  const { user } = useAuth();
-    // Initialize from localStorage on mount
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
-    try {
+  const [loading, setLoading] = useState(true);
-      const stored = localStorage.getItem(STORAGE_KEY);
-      // Default to collapsed (true) to reduce visual clutter
-      return stored ? JSON.parse(stored) : true;
-    } catch (error) {
-      logger.warn('Error reading detailed view state from localStorage', { error });
-      return true;
-    }
-  });
 
-  // Sync to localStorage when state changes
+  // Load preferences on mount
   useEffect(() => {
-    try {
+    loadPreferences();
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(isCollapsed));
+  }, [user]);
-    } catch (error) {
-      logger.warn('Error saving detailed view state to localStorage', { error });
-    }
-  }, [isCollapsed]);
 
-  const toggle = () => setIsCollapsed(prev => !prev);
+  const loadPreferences = async () => {
+    try {
+      if (user) {
+        // Load from database for authenticated users
+        const { data, error } = await supabase
+          .from('user_preferences')
+          .select('moderation_preferences')
+          .eq('user_id', user.id)
+          .maybeSingle();
+
+        if (error && error.code !== 'PGRST116') {
+          handleNonCriticalError(error, {
+            action: 'Load moderation preferences',
+            userId: user.id,
+          });
+        }
+
+        if (data?.moderation_preferences) {
+          const prefs = data.moderation_preferences as ModerationPreferences;
+          setIsCollapsed(prefs.detailed_view_collapsed ?? true);
+        }
+      } else {
+        // Load from localStorage for guests
+        try {
+          const stored = localStorage.getItem(STORAGE_KEY);
+          setIsCollapsed(stored ? JSON.parse(stored) : true);
+        } catch (error) {
+          logger.warn('Error reading detailed view state from localStorage', { error });
+        }
+      }
+    } catch (error) {
+      logger.warn('Error loading detailed view preferences', { error });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const savePreferences = async (collapsed: boolean) => {
+    try {
+      if (user) {
+        // Save to database for authenticated users
+        const moderationPrefs: ModerationPreferences = {
+          detailed_view_collapsed: collapsed,
+        };
+
+        const { error } = await supabase
+          .from('user_preferences')
+          .upsert({
+            user_id: user.id,
+            moderation_preferences: moderationPrefs as unknown as Json,
+            updated_at: new Date().toISOString(),
+          }, {
+            onConflict: 'user_id',
+          });
+
+        if (error) {
+          handleNonCriticalError(error, {
+            action: 'Save moderation preferences',
+            userId: user.id,
+          });
+        }
+      } else {
+        // Save to localStorage for guests
+        try {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsed));
+        } catch (error) {
+          logger.warn('Error saving detailed view state to localStorage', { error });
+        }
+      }
+    } catch (error) {
+      logger.warn('Error saving detailed view preferences', { error });
+    }
+  };
+
+  const toggle = () => {
+    const newValue = !isCollapsed;
+    setIsCollapsed(newValue);
+    savePreferences(newValue);
+  };
   
-  const setCollapsed = (value: boolean) => setIsCollapsed(value);
+  const setCollapsed = (value: boolean) => {
+    setIsCollapsed(value);
+    savePreferences(value);
+  };
 
   return {
     isCollapsed,
     toggle,
     setCollapsed,
+    loading,
   };
 }

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

@@ -0,0 +1,12 @@
+-- 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);