christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 14:45:24 +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
+69 -54
View File
@@ -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