pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 06:31:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-11-12 14:42:20 +00:00
parent 6bd7d24a1b
commit bf4b05bb18
1 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/moderation/QueueFilters.tsx
View File

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