fix: show item save confirmation with image before closing

- Add savingIndex state to track saving operation
- Display success overlay with saved image for 1.5 seconds
- Show item name in confirmation message
- Prevents modal from closing immediately after save

Fixes user complaint about image disappearing too quickly without confirmation
This commit is contained in:
2026-04-22 09:07:44 +03:00
parent e5615826d6
commit 99a4cae572
2 changed files with 40 additions and 9 deletions

View File

@@ -29,6 +29,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
fileInputRef,
existingTypes,
existingBoxes,
savingIndex,
startLiveCamera,
stopLiveCamera,
captureSnapshot,
@@ -483,6 +484,27 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
</div>
)}
{/* Success confirmation overlay */}
{savingIndex !== null && image && (
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 animate-in fade-in duration-200">
<div className="flex flex-col items-center gap-4">
<div className="w-48 h-48 rounded-3xl overflow-hidden border-4 border-green-500 shadow-2xl">
<img
src={image}
alt="Saved item photo"
className="w-full h-full object-contain bg-black"
/>
</div>
<div className="text-center">
<p className="text-white text-lg font-normal mb-2">Item saved!</p>
<p className="text-secondary text-xs font-normal">
{extractedItems[savingIndex]?.Item || extractedItems[savingIndex]?.name || "New item"} added to catalog
</p>
</div>
</div>
</div>
)}
</div>
);
}