Refactor: Reorganize filter and sort controls

src/components/parks/ParkSortOptions.tsx

@@ -12,10 +12,10 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
   const sortOptions = [
     { value: 'name', label: 'Name' },
     { value: 'rating', label: 'Rating' },
-    { value: 'rides', label: 'Ride Count' },
+    { value: 'rides', label: 'Rides' },
-    { value: 'coasters', label: 'Coaster Count' },
+    { value: 'coasters', label: 'Coasters' },
-    { value: 'reviews', label: 'Review Count' },
+    { value: 'reviews', label: 'Reviews' },
-    { value: 'opening', label: 'Opening Date' },
+    { value: 'opening', label: 'Opening' },
   ];
 
   const toggleDirection = () => {
@@ -26,19 +26,19 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
   };
 
   return (
-    <div className="flex gap-2 flex-1">
+    <div className="flex gap-2">
       <Select 
         value={sort.field} 
         onValueChange={(field) => onSortChange({ ...sort, field })}
       >
-        <SelectTrigger className="flex-1 bg-muted/50 border-border/50">
+        <SelectTrigger className="w-[160px] bg-muted/50 border-border/50">
           <ArrowUpDown className="w-4 h-4 mr-2" />
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
           {sortOptions.map(option => (
             <SelectItem key={option.value} value={option.value}>
-              Sort by {option.label}
+              {option.label}
             </SelectItem>
           ))}
         </SelectContent>

src/pages/Designers.tsx

@@ -149,6 +149,22 @@ export default function Designers() {
         {/* Search and Filters */}
         <div className="mb-6 space-y-4">
           <div className="flex flex-col lg:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
@@ -161,18 +177,20 @@ export default function Designers() {
               </div>
             </div>
             
+            {/* Sort controls - more compact */}
             <div className="flex gap-2 w-full lg:w-auto">
               <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px] h-10">
+                <SelectTrigger className="w-[160px] h-10">
                   <SlidersHorizontal className="h-4 w-4 mr-2" />
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectItem value="name">Name</SelectItem>
-                  <SelectItem value="founded">Founded (Newest)</SelectItem>
+                  <SelectItem value="founded">Founded</SelectItem>
                 </SelectContent>
               </Select>
               
+              {/* Mobile filter toggle */}
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
@@ -182,15 +200,6 @@ 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>
           

src/pages/Manufacturers.tsx

@@ -162,6 +162,22 @@ export default function Manufacturers() {
         {/* Search and Filters */}
         <div className="mb-6 space-y-4">
           <div className="flex flex-col lg:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
@@ -174,18 +190,20 @@ export default function Manufacturers() {
               </div>
             </div>
             
+            {/* Sort controls - more compact */}
             <div className="flex gap-2 w-full lg:w-auto">
               <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px] h-10">
+                <SelectTrigger className="w-[160px] h-10">
                   <SlidersHorizontal className="h-4 w-4 mr-2" />
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectItem value="name">Name</SelectItem>
-                  <SelectItem value="founded">Founded (Newest)</SelectItem>
+                  <SelectItem value="founded">Founded</SelectItem>
                 </SelectContent>
               </Select>
               
+              {/* Mobile filter toggle */}
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
@@ -195,15 +213,6 @@ 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>
           

src/pages/Operators.tsx

@@ -219,6 +219,22 @@ const Operators = () => {
         {/* Search and Filters */}
         <div className="mb-6 space-y-4">
           <div className="flex flex-col lg:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
@@ -231,19 +247,21 @@ const Operators = () => {
               </div>
             </div>
             
+            {/* Sort controls - more compact */}
             <div className="flex gap-2 w-full lg:w-auto">
               <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px] h-10">
+                <SelectTrigger className="w-[160px] h-10">
                   <SelectValue placeholder="Sort by" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="name">Name</SelectItem>
                   <SelectItem value="rating">Rating</SelectItem>
-                  <SelectItem value="founded">Founded Year</SelectItem>
+                  <SelectItem value="founded">Founded</SelectItem>
-                  <SelectItem value="reviews">Review Count</SelectItem>
+                  <SelectItem value="reviews">Reviews</SelectItem>
                 </SelectContent>
               </Select>
 
+              {/* Mobile filter toggle */}
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
@@ -253,15 +271,6 @@ 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>
           

src/pages/Parks.tsx

@@ -406,6 +406,27 @@ export default function Parks() {
         {/* Search and Controls */}
         <div className="mb-6 space-y-4">
           <div className="flex flex-col lg:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+              {activeFilterCount > 0 && (
+                <Badge variant="secondary" className="ml-1">
+                  {activeFilterCount}
+                </Badge>
+              )}
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <ParkSearch 
                 value={filters.search}
@@ -413,12 +434,14 @@ export default function Parks() {
               />
             </div>
             
-            <div className="flex gap-2 flex-1">
+            {/* Sort controls - more compact */}
+            <div className="flex gap-2">
               <ParkSortOptions 
                 sort={sort}
                 onSortChange={setSort}
               />
               
+              {/* Mobile filter toggle */}
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
@@ -434,20 +457,6 @@ 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">

src/pages/Rides.tsx

@@ -169,6 +169,22 @@ export default function Rides() {
         {/* Search and Filters */}
         <div className="mb-8 space-y-4">
           <div className="flex flex-col md:flex-row gap-4">
+            {/* Desktop: Filter toggle on the left */}
+            <Button
+              variant="outline"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="shrink-0 gap-2 hidden lg:flex"
+              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
+            >
+              {sidebarCollapsed ? (
+                <PanelLeftOpen className="w-4 h-4" />
+              ) : (
+                <PanelLeftClose className="w-4 h-4" />
+              )}
+              <span>Filters</span>
+            </Button>
+
+            {/* Search bar takes remaining space */}
             <div className="flex-1">
               <AutocompleteSearch
                 placeholder="Search rides by name, park, or manufacturer..."
@@ -178,21 +194,24 @@ export default function Rides() {
                 showRecentSearches={false}
               />
             </div>
+
+            {/* Sort controls - more compact */}
             <div className="flex gap-2">
               <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px]">
+                <SelectTrigger className="w-[160px]">
                   <SlidersHorizontal className="w-4 h-4 mr-2" />
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectItem value="name">Name</SelectItem>
-                  <SelectItem value="rating">Highest Rated</SelectItem>
+                  <SelectItem value="rating">Rating</SelectItem>
-                  <SelectItem value="speed">Fastest</SelectItem>
+                  <SelectItem value="speed">Speed</SelectItem>
-                  <SelectItem value="height">Tallest</SelectItem>
+                  <SelectItem value="height">Height</SelectItem>
-                  <SelectItem value="reviews">Most Reviews</SelectItem>
+                  <SelectItem value="reviews">Reviews</SelectItem>
                 </SelectContent>
               </Select>
               
+              {/* Mobile filter toggle */}
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
@@ -202,15 +221,6 @@ 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>