From 83470042b4b143eba0df4e8bf0b2f0cbc048ff54 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 26 Jan 2026 16:06:39 +0100
Subject: [PATCH] style: clean header and refine Group By filter dropdown in
 Grid tab

---
 App.tsx                 | 27 +--------------
 components/DataGrid.tsx | 73 ++++++++++++++++++++++++++---------------
 2 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/App.tsx b/App.tsx
index d658029..9f3c6f8 100644
--- a/App.tsx
+++ b/App.tsx
@@ -463,32 +463,7 @@ const App: React.FC = () => {
           </div>
 
           <div className="flex items-center gap-4">
-
-            {/* Main Action: Data Source Button */}
-            <button
-              onClick={() => setIsDataModalOpen(true)}
-              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold shadow-lg transition-all border
-                ${activeUrl
-                  ? 'bg-slate-800 text-emerald-400 border-emerald-500/50 hover:bg-slate-700'
-                  : 'bg-indigo-600 text-white border-transparent hover:bg-indigo-500'}`}
-            >
-              {syncing ? <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div> : <UploadIcon />}
-              <span className="hidden md:inline">{activeUrl ? 'Data Settings' : 'Connect Data'}</span>
-            </button>
-
-            {/* NEW REFRESH BUTTON */}
-            <button
-              onClick={() => {
-                handleDataFetch();
-                handleAdsFetch();
-              }}
-              disabled={syncing}
-              title="Refresh Data"
-              className="p-3 rounded-lg bg-slate-800 border border-border text-slate-400 hover:text-white hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            >
-              <RefreshIcon className={`w-5 h-5 ${syncing ? 'animate-spin' : ''}`} />
-            </button>
-
+            {/* View Switcher is the priority now */}
             {/* View Switcher */}
             <div className="flex bg-slate-900 rounded-lg p-1 border border-border">
               <button
diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 6bf1835..11d852b 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -698,36 +698,57 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
                         <div className="relative z-30" ref={dimensionRef}>
                             <button
                                 onClick={() => setShowDimensionMenu(!showDimensionMenu)}
-                                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all border shadow-sm ${showDimensionMenu ? 'bg-slate-700 text-white border-indigo-500/50 ring-1 ring-indigo-500/30' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
+                                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-semibold transition-all border shadow-sm ${showDimensionMenu ? 'bg-indigo-600 text-white border-indigo-500 shadow-indigo-500/20' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700 hover:border-slate-600'}`}
                             >
-                                <span className="text-slate-300">Group By:</span>
-                                <span className="text-white font-bold">{effectiveDimensions.length} Columns</span>
-                                <svg className={`w-4 h-4 text-slate-400 transition-transform duration-200 ${showDimensionMenu ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
+                                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 4.5v15m6-15v15m-10.5-15h15a2.25 2.25 0 0 1 2.25 2.25v13.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75A2.25 2.25 0 0 1 4.5 4.5Z" />
+                                </svg>
+                                <span>Group By:</span>
+                                <span className={showDimensionMenu ? 'text-indigo-100' : 'text-indigo-400'}>{effectiveDimensions.length} Columns</span>
+                                <svg className={`w-3.5 h-3.5 transition-transform duration-200 ${showDimensionMenu ? 'rotate-180 text-white' : 'text-slate-500'}`} fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
                             </button>
                             {showDimensionMenu && (
-                                <div className="absolute top-full left-0 mt-2 w-56 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl p-2 animate-fade-in z-50">
-                                    <div className="px-2 py-1.5 mb-1 border-b border-slate-800">
-                                        <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Select Columns</span>
+                                <div className="absolute top-full left-0 mt-2 w-64 bg-slate-900 border border-slate-700 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] p-3 animate-fade-in z-50 ring-1 ring-white/10">
+                                    <div className="flex justify-between items-center mb-3 px-1">
+                                        <span className="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em]">Select Columns</span>
+                                        <button
+                                            onClick={() => setSelectedDimensions([])}
+                                            className="text-[10px] font-bold text-indigo-400 hover:text-indigo-300 uppercase underline decoration-indigo-500/30 underline-offset-4"
+                                        >
+                                            Clear All
+                                        </button>
+                                    </div>
+                                    <div className="space-y-1">
+                                        {DIMENSION_OPTIONS.map(dim => (
+                                            <label key={dim.value} className="flex items-center gap-3 p-2.5 hover:bg-white/[0.04] rounded-lg cursor-pointer group transition-all active:scale-[0.98]">
+                                                <div className="relative flex items-center">
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={selectedDimensions.includes(dim.value)}
+                                                        onChange={() => {
+                                                            if (selectedDimensions.includes(dim.value)) {
+                                                                setSelectedDimensions(selectedDimensions.filter(d => d !== dim.value));
+                                                            } else {
+                                                                setSelectedDimensions([...selectedDimensions, dim.value]);
+                                                            }
+                                                        }}
+                                                        className="w-4.5 h-4.5 rounded-md border-slate-600 bg-slate-800 text-indigo-500 focus:ring-indigo-500/50 focus:ring-offset-0 transition-all border-2 cursor-pointer"
+                                                    />
+                                                </div>
+                                                <span className={`text-sm font-semibold transition-colors ${selectedDimensions.includes(dim.value) ? 'text-white' : 'text-slate-400 group-hover:text-slate-300'}`}>
+                                                    {dim.label}
+                                                </span>
+                                                {selectedDimensions.includes(dim.value) && (
+                                                    <div className="ml-auto w-1 h-4 bg-indigo-500 rounded-full animate-pulse-slow"></div>
+                                                )}
+                                            </label>
+                                        ))}
+                                    </div>
+                                    <div className="mt-3 pt-3 border-t border-slate-800 px-1">
+                                        <p className="text-[10px] text-slate-500 leading-relaxed italic">
+                                            The table will automatically refresh when you toggle these options.
+                                        </p>
                                     </div>
-                                    {DIMENSION_OPTIONS.map(dim => (
-                                        <label key={dim.value} className="flex items-center gap-3 p-2.5 hover:bg-white/[0.03] rounded-lg cursor-pointer group transition-colors">
-                                            <input
-                                                type="checkbox"
-                                                checked={selectedDimensions.includes(dim.value)}
-                                                onChange={() => {
-                                                    if (selectedDimensions.includes(dim.value)) {
-                                                        setSelectedDimensions(selectedDimensions.filter(d => d !== dim.value));
-                                                    } else {
-                                                        setSelectedDimensions([...selectedDimensions, dim.value]);
-                                                    }
-                                                }}
-                                                className="w-4 h-4 rounded border-slate-600 bg-slate-800 text-indigo-500 focus:ring-indigo-500/50 transition-all"
-                                            />
-                                            <span className={`text-sm font-medium transition-colors ${selectedDimensions.includes(dim.value) ? 'text-white' : 'text-slate-400 group-hover:text-slate-300'}`}>
-                                                {dim.label}
-                                            </span>
-                                        </label>
-                                    ))}
                                 </div>
                             )}
                         </div>