From e089888f5162f90cd32f9814f30769928a2e8495 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 17 Jun 2026 13:31:32 +0200
Subject: [PATCH] feat: restore interactive Sync button in header

---
 App.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/App.tsx b/App.tsx
index f52acab..f7b01a1 100644
--- a/App.tsx
+++ b/App.tsx
@@ -753,12 +753,25 @@ const App: React.FC = () => {
           </div>
 
           <div className="flex items-center gap-3 md:gap-4">
-            {/* Sync Indicators */}
-            <div className="flex items-center gap-1.5 text-xs text-slate-400 bg-slate-900 px-2.5 py-1 rounded border border-border/80">
-              <span className={`w-1.5 h-1.5 rounded-full bg-emerald-400 ${syncing ? 'animate-ping' : ''}`}></span>
-              <span className="font-mono text-[10px] uppercase font-bold tracking-wider">
-                Sync {lastUpdated ? new Date(lastUpdated).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '11:41'}
-              </span>
+            {/* Sync Button & Indicators */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleDataFetch}
+                disabled={syncing}
+                className={`flex items-center gap-1 px-2.5 py-1 bg-slate-900 border border-slate-800 rounded text-xs font-semibold transition-all active:scale-95
+                  ${syncing
+                    ? 'text-indigo-400/70 cursor-not-allowed'
+                    : 'text-slate-300 hover:bg-slate-800'}`}
+              >
+                <RefreshIcon className={`w-3.5 h-3.5 ${syncing ? 'animate-spin' : ''}`} />
+                <span>{syncing ? 'Syncing...' : 'Sync'}</span>
+              </button>
+              <div className="flex items-center gap-1.5 text-xs text-slate-400 bg-slate-900 px-2.5 py-1 rounded border border-border/80">
+                <span className={`w-1.5 h-1.5 rounded-full bg-emerald-400 ${syncing ? 'animate-ping' : ''}`}></span>
+                <span className="font-mono text-[10px] uppercase font-bold tracking-wider">
+                  Last: {lastUpdated ? new Date(lastUpdated).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '11:41'}
+                </span>
+              </div>
             </div>
 
             {/* Toggle Filters Action */}