feat: Add collapsible filter sidebar

2025-12-23 15:31:13 -05:00 · 2025-10-28 15:38:53 +00:00
parent ef312618f5
commit 477844310f
5 changed files with 302 additions and 45 deletions
--- a/src/pages/Designers.tsx
+++ b/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>

--- a/src/pages/Manufacturers.tsx
+++ b/src/pages/Manufacturers.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, Factory, Plus, ChevronDown, Filter } from 'lucide-react';
+import { Search, SlidersHorizontal, Factory, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { ManufacturerFilters, ManufacturerFilterState, defaultManufacturerFilters } from '@/components/manufacturers/ManufacturerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -33,12 +34,20 @@ export default function Manufacturers() {
  const [filters, setFilters] = useState<ManufacturerFilterState>(defaultManufacturerFilters);
  const [showFilters, setShowFilters] = useState(false);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('manufacturers-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
  

  useEffect(() => {
    fetchCompanies();
  }, [sortBy]);

+  useEffect(() => {
+    localStorage.setItem('manufacturers-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
  const fetchCompanies = async () => {
    try {
      let query = supabase
@@ -186,6 +195,15 @@ export default function Manufacturers() {
                <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>
          
@@ -206,13 +224,44 @@ export default function Manufacturers() {
        {/* 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">
-                  <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={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>
+                    <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
+                  </CardContent>
+                </Card>
+              )}
            </div>
          </aside>

--- a/src/pages/Operators.tsx
+++ b/src/pages/Operators.tsx
@@ -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>

--- a/src/pages/Parks.tsx
+++ b/src/pages/Parks.tsx
@@ -1,7 +1,8 @@
 import { useState, useEffect, useMemo } from 'react';
 import { Header } from '@/components/layout/Header';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -17,7 +18,9 @@ import {
  Sliders,
  X,
  FerrisWheel,
-  Plus
+  Plus,
+  PanelLeftClose,
+  PanelLeftOpen
 } from 'lucide-react';
 import { Park } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
@@ -94,6 +97,10 @@ export default function Parks() {
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
  const [showFilters, setShowFilters] = useState(false);
  const [isAddParkModalOpen, setIsAddParkModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('parks-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
  const navigate = useNavigate();
  const { toast } = useToast();
  const { user } = useAuth();
@@ -104,6 +111,10 @@ export default function Parks() {
    fetchParks();
  }, []);

+  useEffect(() => {
+    localStorage.setItem('parks-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
  const fetchParks = async () => {
    try {
      setLoading(true);
@@ -423,6 +434,20 @@ export default function Parks() {
                )}
              </Button>

+              <Button
+                variant="outline"
+                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                className="shrink-0 gap-2 hidden lg:flex"
+                title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+              >
+                <PanelLeftClose className={`w-4 h-4 transition-transform ${sidebarCollapsed ? 'rotate-180' : ''}`} />
+                {!sidebarCollapsed && activeFilterCount > 0 && (
+                  <Badge variant="secondary" className="ml-1">
+                    {activeFilterCount}
+                  </Badge>
+                )}
+              </Button>
+
              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
                <TabsList>
                  <TabsTrigger value="grid">
@@ -457,17 +482,53 @@ export default function Parks() {
        {/* 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">
-                  <ParkFilters 
-                    filters={filters}
-                    onFiltersChange={setFilters}
-                    parks={parks}
-                  />
-                </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>
+                  {activeFilterCount > 0 && (
+                    <Badge variant="secondary" className="w-full mt-2 justify-center">
+                      {activeFilterCount}
+                    </Badge>
+                  )}
+                </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>
+                    <ParkFilters 
+                      filters={filters}
+                      onFiltersChange={setFilters}
+                      parks={parks}
+                    />
+                  </CardContent>
+                </Card>
+              )}
            </div>
          </aside>

--- a/src/pages/Rides.tsx
+++ b/src/pages/Rides.tsx
@@ -6,8 +6,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, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Card, CardContent } from '@/components/ui/card';
-import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { RideCard } from '@/components/rides/RideCard';
 import { RideForm } from '@/components/admin/RideForm';
@@ -32,11 +33,19 @@ export default function Rides() {
  const [filters, setFilters] = useState<RideFilterState>(defaultRideFilters);
  const [showFilters, setShowFilters] = useState(false);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('rides-sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });

  useEffect(() => {
    fetchRides();
  }, []);

+  useEffect(() => {
+    localStorage.setItem('rides-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
  const fetchRides = async () => {
    try {
      const { data } = await supabase
@@ -193,6 +202,15 @@ export default function Rides() {
                <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>

@@ -213,13 +231,44 @@ export default function Rides() {
        {/* 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">
-                  <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
-                </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>
+                    <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
+                  </CardContent>
+                </Card>
+              )}
            </div>
          </aside>