From 1b0b35d3bfca143c2fc33423413bb636ac3d8998 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 9 Apr 2026 09:03:19 +0200
Subject: [PATCH] feat: show Save button always, disabled when no pending
 changes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/TopBar.tsx | 123 +++++++++++++++++++++-----------------
 1 file changed, 69 insertions(+), 54 deletions(-)

diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 3e0b159..1d44331 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -80,61 +80,76 @@ 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">
-              <button
-                onClick={onSaveAll}
-                disabled={isSavingAll}
-                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"
-              >
-                {isSavingAll ? <Loader2 className="w-4 h-4 animate-spin" /> : <CloudUpload className="w-4 h-4" />}
-                {isSavingAll ? 'Saving...' : `Save ${pendingCount} change${pendingCount > 1 ? 's' : ''}`}
-              </button>
-              <button
-                onClick={() => setShowPending(v => !v)}
-                disabled={isSavingAll}
-                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"
-                title="View pending changes"
-              >
-                <ChevronDown className={cn("w-4 h-4 transition-transform", showPending && "rotate-180")} />
-              </button>
-            </div>
-
-            {/* Dropdown: list of pending changes */}
-            {showPending && (
-              <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>
-                  <span className="text-xs text-slate-500">{pendingCount} unsaved</span>
-                </div>
-                <div className="max-h-64 overflow-y-auto">
-                  {Object.entries(pendingChanges).map(([articleNo, { articleName }]) => (
-                    <div
-                      key={articleNo}
-                      className="flex items-center gap-2 px-3 py-2.5 hover:bg-slate-700/50 border-b border-slate-700/50 last:border-0"
-                    >
-                      <div className="w-2 h-2 rounded-full bg-yellow-400 shrink-0" />
-                      <div className="flex-1 min-w-0">
-                        <p className="text-xs font-mono text-slate-400">{articleNo}</p>
-                        <p className="text-sm text-white truncate">{articleName}</p>
-                      </div>
-                      <button
-                        onClick={() => onRevertRow(articleNo)}
-                        title="Discard this change"
-                        className="shrink-0 flex items-center gap-1 px-2 py-1 text-xs text-red-400 hover:text-white hover:bg-red-600 rounded transition-colors"
-                      >
-                        <RotateCcw className="w-3 h-3" />
-                        Revert
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+        <div className="relative" ref={dropdownRef}>
+          {/* Split button: Save All + dropdown toggle */}
+          <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 || pendingCount === 0}
+              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...'
+                : pendingCount > 0
+                  ? `Save ${pendingCount} change${pendingCount > 1 ? 's' : ''}`
+                  : 'No pending changes'}
+            </button>
+            <button
+              onClick={() => pendingCount > 0 && setShowPending(v => !v)}
+              disabled={isSavingAll || pendingCount === 0}
+              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")} />
+            </button>
           </div>
-        )}
+
+          {/* Dropdown: list of pending changes */}
+          {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>
+                <span className="text-xs text-slate-500">{pendingCount} unsaved</span>
+              </div>
+              <div className="max-h-64 overflow-y-auto">
+                {Object.entries(pendingChanges).map(([articleNo, { articleName }]) => (
+                  <div
+                    key={articleNo}
+                    className="flex items-center gap-2 px-3 py-2.5 hover:bg-slate-700/50 border-b border-slate-700/50 last:border-0"
+                  >
+                    <div className="w-2 h-2 rounded-full bg-yellow-400 shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-xs font-mono text-slate-400">{articleNo}</p>
+                      <p className="text-sm text-white truncate">{articleName}</p>
+                    </div>
+                    <button
+                      onClick={() => onRevertRow(articleNo)}
+                      title="Discard this change"
+                      className="shrink-0 flex items-center gap-1 px-2 py-1 text-xs text-red-400 hover:text-white hover:bg-red-600 rounded transition-colors"
+                    >
+                      <RotateCcw className="w-3 h-3" />
+                      Revert
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
 
         {hasData && (
           <button