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 && ( - - - - )} +
+ {/* Global toggle for detailed views */} + + {isMobile && ( + + + + )} +