From bf4b05bb187f332b49cdabd1fac8890d47f02360 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:42:20 +0000
Subject: [PATCH] Changes

---
 src/components/moderation/QueueFilters.tsx | 42 +++++++++++++++++-----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/moderation/QueueFilters.tsx b/src/components/moderation/QueueFilters.tsx
index a329f56d..d5ac7a08 100644
--- a/src/components/moderation/QueueFilters.tsx
+++ b/src/components/moderation/QueueFilters.tsx
@@ -1,4 +1,4 @@
-import { Filter, MessageSquare, FileText, Image, X, ChevronDown, Calendar } from 'lucide-react';
+import { Filter, MessageSquare, FileText, Image, X, ChevronDown, Calendar, Maximize2, Minimize2 } from 'lucide-react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
@@ -7,6 +7,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { RefreshButton } from '@/components/ui/refresh-button';
 import { QueueSortControls } from './QueueSortControls';
 import { useFilterPanelState } from '@/hooks/useFilterPanelState';
+import { useDetailedViewState } from '@/hooks/useDetailedViewState';
 import { FilterDateRangePicker } from '@/components/filters/FilterDateRangePicker';
 import type { EntityFilter, StatusFilter, SortConfig, QueueTab, ApprovalDateRangeFilter } from '@/types/moderation';
 
@@ -55,6 +56,7 @@ export const QueueFilters = ({
   isRefreshing = false
 }: QueueFiltersProps) => {
   const { isCollapsed, toggle } = useFilterPanelState();
+  const { isCollapsed: detailsCollapsed, toggle: toggleDetails } = useDetailedViewState();
 
   // Count active filters
   const activeFilterCount = [
@@ -76,14 +78,36 @@ export const QueueFilters = ({
               </Badge>
             )}
           </div>
-          {isMobile && (
-            <CollapsibleTrigger asChild>
-              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                <ChevronDown className={`h-4 w-4 transition-transform duration-250 ${isCollapsed ? '' : 'rotate-180'}`} />
-                <span className="sr-only">{isCollapsed ? 'Expand filters' : 'Collapse filters'}</span>
-              </Button>
-            </CollapsibleTrigger>
-          )}
+          <div className="flex items-center gap-2">
+            {/* Global toggle for detailed views */}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={toggleDetails}
+              className="h-8 gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              title={detailsCollapsed ? "Expand all detailed views" : "Collapse all detailed views"}
+            >
+              {detailsCollapsed ? (
+                <>
+                  <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>}
+                </>
+              )}
+            </Button>
+            {isMobile && (
+              <CollapsibleTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                  <ChevronDown className={`h-4 w-4 transition-transform duration-250 ${isCollapsed ? '' : 'rotate-180'}`} />
+                  <span className="sr-only">{isCollapsed ? 'Expand filters' : 'Collapse filters'}</span>
+                </Button>
+              </CollapsibleTrigger>
+            )}
+          </div>
         </div>
 
         <CollapsibleContent className="space-y-4">