From 175efea276549c6e5cb9bdb0477ca35fe9e3ce08 Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Mon, 4 May 2026 09:16:59 +0100
Subject: [PATCH] feat: consolidate filter and sort controls into a single
 select dropdown in Explore page

---
 web/src/pages/Explore.tsx | 48 +++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 067b58e..a423146 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -10,7 +10,7 @@ import { Card } from '../components/ui/card';
 import { Chip } from '../components/ui/chip';
 import { Input } from '../components/ui/input';
 import { useApp } from '../context/AppContext';
-import { Search, Star } from 'lucide-react';
+import { Search, Star, ListFilter, ChevronDown } from 'lucide-react';
 import { Button } from '../components/ui/button';
 
 export default function Explore() {
@@ -87,30 +87,28 @@ export default function Explore() {
             
             <div className="h-10 w-px bg-slate-200 hidden md:block" />
 
-            <div className="flex flex-wrap items-center gap-2 px-2 sm:px-4 py-2 w-full md:w-auto">
-              <Chip 
-                active={filter === 'todas'} 
-                onClick={() => setFilter('todas')}
-                className={`h-9 sm:h-11 px-4 sm:px-6 rounded-xl sm:rounded-2xl font-bold uppercase tracking-tight transition-all text-xs sm:text-sm ${filter === 'todas' ? '!bg-slate-900 !text-indigo-400 border-none shadow-lg' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'}`}
-              >
-                Todas
-              </Chip>
-              <Chip 
-                active={filter === 'top'} 
-                onClick={() => setFilter('top')}
-                className={`h-9 sm:h-11 px-4 sm:px-6 rounded-xl sm:rounded-2xl font-bold uppercase tracking-tight transition-all text-xs sm:text-sm ${filter === 'top' ? '!bg-slate-900 !text-indigo-400 border-none shadow-lg' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'}`}
-              >
-                Top Avaliadas
-              </Chip>
-              
-              <select
-                value={sortBy}
-                onChange={(e) => setSortBy(e.target.value as typeof sortBy)}
-                className="h-9 sm:h-11 rounded-xl sm:rounded-2xl border-none bg-slate-100 px-3 sm:px-4 text-xs sm:text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20"
-              >
-                <option value="avaliacao">Melhor avaliação</option>
-                <option value="servicos">Mais serviços</option>
-              </select>
+            <div className="px-2 sm:px-4 py-2 w-full md:w-auto">
+              <div className="relative group">
+                <div className="absolute inset-y-0 left-0 pl-3 sm:pl-4 flex items-center pointer-events-none">
+                  <ListFilter size={18} className="text-slate-400 group-hover:text-indigo-500 transition-colors" />
+                </div>
+                <select
+                  value={`${filter}-${sortBy}`}
+                  onChange={(e) => {
+                    const [newFilter, newSort] = e.target.value.split('-');
+                    setFilter(newFilter as 'todas' | 'top');
+                    setSortBy(newSort as 'avaliacao' | 'servicos');
+                  }}
+                  className="h-10 sm:h-12 w-full sm:w-auto appearance-none rounded-xl sm:rounded-2xl bg-slate-100/80 hover:bg-slate-200/80 border-none pl-10 sm:pl-12 pr-10 sm:pr-12 text-xs sm:text-sm font-bold text-slate-700 transition-all focus:ring-2 focus:ring-indigo-500/30 shadow-sm cursor-pointer"
+                >
+                  <option value="todas-avaliacao">Todas (Melhor avaliação)</option>
+                  <option value="top-avaliacao">Top Avaliadas</option>
+                  <option value="todas-servicos">Mais Serviços</option>
+                </select>
+                <div className="absolute inset-y-0 right-0 pr-3 sm:pr-4 flex items-center pointer-events-none">
+                  <ChevronDown size={16} className="text-slate-400 group-hover:text-indigo-500 transition-colors" />
+                </div>
+              </div>
             </div>
           </div>
         </Card>