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 = ({
)}
- {isMobile && (
-