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

feat: Add collapsible filter sidebar

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:38:53 +00:00
parent ef312618f5
commit 477844310f
5 changed files with 302 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/Operators.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
@@ -8,8 +8,9 @@ import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
import { Card, CardContent } from '@/components/ui/card';
import { Search, Filter, Building, Plus, ChevronDown } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Search, Filter, Building, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
import { cn } from '@/lib/utils';
import { supabase } from '@/integrations/supabase/client';
import OperatorCard from '@/components/operators/OperatorCard';
import { OperatorForm } from '@/components/admin/OperatorForm';
@@ -32,6 +33,14 @@ const Operators = () => {
const [filters, setFilters] = useState<OperatorFilterState>(defaultOperatorFilters);
const [showFilters, setShowFilters] = useState(false);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
const saved = localStorage.getItem('operators-sidebar-collapsed');
return saved ? JSON.parse(saved) : false;
});
useEffect(() => {
localStorage.setItem('operators-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
}, [sidebarCollapsed]);
const { data: operators, isLoading } = useQuery({
queryKey: ['operators'],
@@ -244,6 +253,15 @@ const Operators = () => {
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
<Button
variant="outline"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
className="gap-2 hidden lg:flex"
title={sidebarCollapsed ? "Show filters" : "Hide filters"}
>
<PanelLeftClose className={`w-4 h-4 transition-transform ${sidebarCollapsed ? 'rotate-180' : ''}`} />
</Button>
</div>
</div>
@@ -264,13 +282,44 @@ const Operators = () => {
{/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
<aside
className={cn(
"hidden lg:block flex-shrink-0 transition-all duration-300",
sidebarCollapsed
? "lg:w-[60px]"
: "lg:w-[340px] xl:w-[380px] 2xl:w-[420px]"
)}
>
<div className="sticky top-24">
<Card>
<CardContent className="pt-6">
<OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
</CardContent>
</Card>
{sidebarCollapsed ? (
<Card className="p-2">
<Button
variant="ghost"
className="w-full"
onClick={() => setSidebarCollapsed(false)}
title="Show filters"
>
<PanelLeftOpen className="w-5 h-5" />
</Button>
</Card>
) : (
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-base">Filters</CardTitle>
<Button
variant="ghost"
size="sm"
onClick={() => setSidebarCollapsed(true)}
title="Hide filters"
>
<PanelLeftClose className="w-4 h-4" />
</Button>
</CardHeader>
<CardContent>
<OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
</CardContent>
</Card>
)}
</div>
</aside>