From 96e9583fdbaa645dd2f702e44b1350b39ce14435 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 9 Feb 2026 12:16:46 +0100
Subject: [PATCH] Refactor ExcelFilter popup UI for a more compact and
 data-dense experience

---
 components/ExcelFilter.tsx | 60 +++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/components/ExcelFilter.tsx b/components/ExcelFilter.tsx
index 9de9785..78ef3d8 100644
--- a/components/ExcelFilter.tsx
+++ b/components/ExcelFilter.tsx
@@ -127,42 +127,42 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
             </button>
 
             {isOpen && (
-                <div className="absolute left-0 mt-2 w-72 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] overflow-hidden animate-in fade-in zoom-in duration-150">
-                    <div className="bg-slate-950 px-4 py-3 border-b border-slate-800 flex justify-between items-center">
-                        <span className="text-xs font-black text-slate-300 uppercase tracking-widest">{title}</span>
+                <div className="absolute left-0 mt-1 w-64 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] overflow-hidden animate-in fade-in zoom-in duration-150">
+                    <div className="bg-slate-950 px-3 py-2 border-b border-slate-800 flex justify-between items-center">
+                        <span className="text-[10px] font-black text-slate-300 uppercase tracking-widest">{title}</span>
                         <button onClick={() => setIsOpen(false)} className="text-slate-500 hover:text-white">
                             <CloseIcon />
                         </button>
                     </div>
 
-                    <div className="p-4 space-y-4 max-h-[80vh] overflow-y-auto custom-scrollbar">
+                    <div className="p-3 space-y-3 max-h-[80vh] overflow-y-auto custom-scrollbar">
                         {/* Sort Section */}
-                        <div className="space-y-2">
-                            <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Ordenar</span>
-                            <div className="flex gap-2">
+                        <div className="space-y-1.5">
+                            <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Ordenar</span>
+                            <div className="flex gap-1.5">
                                 <button
                                     onClick={() => handleSort('asc')}
-                                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-xs font-bold transition-all ${currentFilter?.sort === 'asc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
+                                    className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-lg border text-[10px] font-bold transition-all ${currentFilter?.sort === 'asc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
                                 >
-                                    <span className="text-lg">A↓Z</span> Ascendente
+                                    <span className="text-sm">A↓Z</span> Asc
                                 </button>
                                 <button
                                     onClick={() => handleSort('desc')}
-                                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-xs font-bold transition-all ${currentFilter?.sort === 'desc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
+                                    className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-lg border text-[10px] font-bold transition-all ${currentFilter?.sort === 'desc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
                                 >
-                                    <span className="text-lg">Z↓A</span> Descendente
+                                    <span className="text-sm">Z↓A</span> Desc
                                 </button>
                             </div>
                         </div>
 
                         {/* Condition Filter Section */}
-                        <div className="space-y-2">
-                            <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Filtro</span>
-                            <div className="space-y-2">
+                        <div className="space-y-1.5">
+                            <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Filtro</span>
+                            <div className="space-y-1.5">
                                 <select
                                     value={operator}
                                     onChange={(e) => setOperator(e.target.value as any)}
-                                    className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-indigo-500"
+                                    className="w-full bg-slate-800 border border-slate-700 rounded-lg px-2 py-1.5 text-[11px] text-white focus:outline-none focus:border-indigo-500"
                                 >
                                     {OPERATORS.map(op => (
                                         <option key={op.value} value={op.value}>{op.label}</option>
@@ -174,7 +174,7 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
                                         value={textValue}
                                         onChange={(e) => setTextValue(e.target.value)}
                                         placeholder="Valor..."
-                                        className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-indigo-500"
+                                        className="w-full bg-slate-800 border border-slate-700 rounded-lg px-2 py-1.5 text-[11px] text-white focus:outline-none focus:border-indigo-500"
                                         autoFocus
                                     />
                                 )}
@@ -182,9 +182,9 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
                         </div>
 
                         {/* List Selection Section */}
-                        <div className="space-y-2">
-                            <div className="flex justify-between items-center mb-1">
-                                <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Seleccionar valores</span>
+                        <div className="space-y-1.5">
+                            <div className="flex justify-between items-center mb-0.5">
+                                <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Seleccionar valores</span>
                             </div>
 
                             <input
@@ -192,15 +192,15 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
                                 placeholder="Buscar en la lista..."
                                 value={searchValue}
                                 onChange={(e) => setSearchValue(e.target.value)}
-                                className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-indigo-500 mb-2"
+                                className="w-full bg-slate-950 border border-slate-800 rounded-lg px-2 py-1 text-[11px] text-white focus:outline-none focus:border-indigo-500 mb-1.5"
                             />
 
-                            <div className="bg-slate-950 border border-slate-800 rounded-lg p-1 max-h-48 overflow-y-auto custom-scrollbar">
+                            <div className="bg-slate-950 border border-slate-800 rounded-lg p-0.5 max-h-40 overflow-y-auto custom-scrollbar">
                                 <div
                                     onClick={handleToggleSelectAll}
-                                    className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer text-xs font-bold text-indigo-400"
+                                    className="flex items-center gap-1.5 px-1.5 py-1 rounded hover:bg-white/5 cursor-pointer text-[11px] font-bold text-indigo-400"
                                 >
-                                    <div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${tempSelectedValues.length === uniqueValues.length ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
+                                    <div className={`w-3 h-3 rounded border flex items-center justify-center ${tempSelectedValues.length === uniqueValues.length ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
                                         {tempSelectedValues.length === uniqueValues.length && <CheckMark />}
                                     </div>
                                     (Seleccionar todo)
@@ -211,9 +211,9 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
                                         <div
                                             key={val}
                                             onClick={() => handleToggleValue(val)}
-                                            className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer text-xs text-slate-300"
+                                            className="flex items-center gap-1.5 px-1.5 py-1 rounded hover:bg-white/5 cursor-pointer text-[11px] text-slate-300"
                                         >
-                                            <div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${isSelected ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
+                                            <div className={`w-3 h-3 rounded border flex items-center justify-center ${isSelected ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
                                                 {isSelected && <CheckMark />}
                                             </div>
                                             <span className="truncate">{val}</span>
@@ -224,18 +224,18 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
                         </div>
                     </div>
 
-                    <div className="bg-slate-950 p-4 border-t border-slate-800 flex gap-2">
+                    <div className="bg-slate-950 p-3 border-t border-slate-800 flex gap-1.5">
                         <button
                             onClick={handleApply}
-                            className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white py-2 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
+                            className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all"
                         >
-                            Aplicar filtro
+                            Aplicar
                         </button>
                         <button
                             onClick={handleClear}
-                            className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
+                            className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all"
                         >
-                            Borrar filtro
+                            Borrar
                         </button>
                     </div>
                 </div>