feat: show Save button always, disabled when no pending changes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/TopBar.tsx

@@ -80,22 +80,38 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail,
       )}
 
       <div className="flex items-center gap-3">
-        {pendingCount > 0 && (
         <div className="relative" ref={dropdownRef}>
           {/* Split button: Save All + dropdown toggle */}
-            <div className="flex items-center rounded-md overflow-hidden shadow-lg shadow-green-900/30">
+          <div className={cn(
+            "flex items-center rounded-md overflow-hidden shadow-lg transition-all",
+            pendingCount > 0 ? "shadow-green-900/30" : "shadow-none opacity-40"
+          )}>
             <button
               onClick={onSaveAll}
-                disabled={isSavingAll}
+              disabled={isSavingAll || pendingCount === 0}
-                className="flex items-center gap-2 px-4 py-2 text-sm font-bold transition-all bg-green-600 hover:bg-green-500 disabled:opacity-60 text-white"
+              className={cn(
+                "flex items-center gap-2 px-4 py-2 text-sm font-bold transition-all text-white",
+                pendingCount > 0
+                  ? "bg-green-600 hover:bg-green-500 disabled:opacity-60"
+                  : "bg-slate-700 cursor-not-allowed"
+              )}
             >
               {isSavingAll ? <Loader2 className="w-4 h-4 animate-spin" /> : <CloudUpload className="w-4 h-4" />}
-                {isSavingAll ? 'Saving...' : `Save ${pendingCount} change${pendingCount > 1 ? 's' : ''}`}
+              {isSavingAll
+                ? 'Saving...'
+                : pendingCount > 0
+                  ? `Save ${pendingCount} change${pendingCount > 1 ? 's' : ''}`
+                  : 'No pending changes'}
             </button>
             <button
-                onClick={() => setShowPending(v => !v)}
+              onClick={() => pendingCount > 0 && setShowPending(v => !v)}
-                disabled={isSavingAll}
+              disabled={isSavingAll || pendingCount === 0}
-                className="flex items-center px-2 py-2 bg-green-700 hover:bg-green-600 disabled:opacity-60 text-white border-l border-green-500/40 transition-all"
+              className={cn(
+                "flex items-center px-2 py-2 text-white border-l transition-all",
+                pendingCount > 0
+                  ? "bg-green-700 hover:bg-green-600 border-green-500/40"
+                  : "bg-slate-700 cursor-not-allowed border-slate-600"
+              )}
               title="View pending changes"
             >
               <ChevronDown className={cn("w-4 h-4 transition-transform", showPending && "rotate-180")} />
@@ -103,7 +119,7 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail,
           </div>
 
           {/* Dropdown: list of pending changes */}
-            {showPending && (
+          {showPending && pendingCount > 0 && (
             <div className="absolute right-0 top-full mt-2 w-80 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 overflow-hidden">
               <div className="px-3 py-2 border-b border-slate-700 flex items-center justify-between">
                 <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Pending changes</span>
@@ -134,7 +150,6 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail,
             </div>
           )}
         </div>
-        )}
 
         {hasData && (
           <button