Changes

src/components/moderation/QueueFilters.tsx

@@ -4,7 +4,6 @@ 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';
@@ -81,40 +80,25 @@ export const QueueFilters = ({
           </div>
           <div className="flex items-center gap-2">
             {/* Global toggle for detailed views */}
-            <TooltipProvider>
+            <Button
-              <Tooltip>
+              variant="ghost"
-                <TooltipTrigger asChild>
+              size="sm"
-                  <Button
+              onClick={toggleDetails}
-                    variant="ghost"
+              className="h-8 gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                    size="sm"
+              title={detailsCollapsed ? "Expand all detailed views" : "Collapse all detailed views"}
-                    onClick={toggleDetails}
+            >
-                    className="h-8 gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              {detailsCollapsed ? (
-                  >
+                <>
-                    {detailsCollapsed ? (
+                  <Maximize2 className="h-3.5 w-3.5" />
-                      <>
+                  {!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/hooks/useDetailedViewState.ts

@@ -1,127 +1,48 @@
 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
- * Persists to database for authenticated users, localStorage for guests
+ * Syncs with localStorage for persistence across sessions
  * Defaults to collapsed to reduce visual clutter
  */
 export function useDetailedViewState(): UseDetailedViewStateReturn {
-  const { user } = useAuth();
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
-  const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
+    // Initialize from localStorage on mount
-  const [loading, setLoading] = useState(true);
+    try {
+      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;
+    }
+  });
 
-  // Load preferences on mount
+  // Sync to localStorage when state changes
   useEffect(() => {
-    loadPreferences();
-  }, [user]);
-
-  const loadPreferences = async () => {
     try {
-      if (user) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(isCollapsed));
-        // 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 });
+      logger.warn('Error saving detailed view state to localStorage', { error });
-    } finally {
-      setLoading(false);
     }
-  };
+  }, [isCollapsed]);
 
-  const savePreferences = async (collapsed: boolean) => {
+  const toggle = () => setIsCollapsed(prev => !prev);
-    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) => {
+  const setCollapsed = (value: boolean) => setIsCollapsed(value);
-    setIsCollapsed(value);
-    savePreferences(value);
-  };
 
   return {
     isCollapsed,
     toggle,
     setCollapsed,
-    loading,
   };
 }