feat: restore interactive Sync button in header

App.tsx

@@ -753,13 +753,26 @@ const App: React.FC = () => {
           </div>
 
           <div className="flex items-center gap-3 md:gap-4">
-            {/* Sync Indicators */}
+            {/* 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">
-                Sync {lastUpdated ? new Date(lastUpdated).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '11:41'}
+                  Last: {lastUpdated ? new Date(lastUpdated).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '11:41'}
                 </span>
               </div>
+            </div>
 
             {/* Toggle Filters Action */}
             <button