pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 18:51: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

39
src/pages/Parks.tsx
View File

@@ -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">