christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 16:45:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-04-09 09:03:19 +02:00
co-authored by Claude Sonnet 4.6
parent a7d8dad36e
commit 1b0b35d3bf
1 changed files with 69 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TopBar.tsx
+25 -10
View File
@@ -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}
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"
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...' : `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)}
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"
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")} />
@@ -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