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

Refactor: Reorganize filter and sort controls

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:49:41 +00:00
parent c48509efc4
commit 832f53a126
6 changed files with 119 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/Operators.tsx
View File

@@ -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="reviews">Review Count</SelectItem>
<SelectItem value="founded">Founded</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>