feat: Add collapsible filter sidebar

src/pages/Designers.tsx

@@ -6,9 +6,10 @@ import { Button } from '@/components/ui/button';
 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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter } from 'lucide-react';
+import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { DesignerFilters, DesignerFilterState, defaultDesignerFilters } from '@/components/designers/DesignerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -33,6 +34,10 @@ export default function Designers() {
   const [filters, setFilters] = useState<DesignerFilterState>(defaultDesignerFilters);
   const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('designers-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
 
   const handleCreateSubmit = async (data: any) => {
     try {
@@ -52,6 +57,10 @@ export default function Designers() {
     fetchCompanies();
   }, [sortBy]);
 
+  useEffect(() => {
+    localStorage.setItem('designers-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
   const fetchCompanies = async () => {
     try {
       let query = supabase
@@ -173,6 +182,15 @@ export default function Designers() {
                 <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>
           
@@ -193,13 +211,44 @@ export default function Designers() {
         {/* 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">
-                  <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
-                </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>
+                    <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
+                  </CardContent>
+                </Card>
+              )}
             </div>
           </aside>