From 99a4cae572a9005084c2412edecfb3a400a10fdd Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Wed, 22 Apr 2026 09:07:44 +0300
Subject: [PATCH] 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
---
 frontend/components/AIOnboarding.tsx | 22 ++++++++++++++++++++++
 frontend/hooks/useAIExtraction.ts    | 27 ++++++++++++++++++---------
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/frontend/components/AIOnboarding.tsx b/frontend/components/AIOnboarding.tsx
index 10978a99..13fca635 100644
--- a/frontend/components/AIOnboarding.tsx
+++ b/frontend/components/AIOnboarding.tsx
@@ -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>
   );
 }
diff --git a/frontend/hooks/useAIExtraction.ts b/frontend/hooks/useAIExtraction.ts
index 5e006bc5..42ba836e 100644
--- a/frontend/hooks/useAIExtraction.ts
+++ b/frontend/hooks/useAIExtraction.ts
@@ -11,6 +11,7 @@ export function useAIExtraction(inventory: Item[], onComplete: (itemData: any) =
   const [mode, setMode] = useState<'item' | 'box'>('item');
   const [isLive, setIsLive] = useState(false);
   const [extractedImageBlob, setExtractedImageBlob] = useState<Blob | null>(null);
+  const [savingIndex, setSavingIndex] = useState<number | null>(null);
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -157,17 +158,24 @@ export function useAIExtraction(inventory: Item[], onComplete: (itemData: any) =
         imageProcessing: data.image_processing
       })
     };
+
+    // Show success briefly before closing
+    setSavingIndex(index);
     onComplete(newItem);
 
-    if (extractedItems.length > 1) {
-      const remaining = [...extractedItems];
-      remaining.splice(index, 1);
-      setExtractedItems(remaining);
-      setEditingIndex(null);
-    } else {
-      setExtractedItems([]);
-      setEditingIndex(null);
-    }
+    // Reset UI after brief delay so user sees the success
+    setTimeout(() => {
+      if (extractedItems.length > 1) {
+        const remaining = [...extractedItems];
+        remaining.splice(index, 1);
+        setExtractedItems(remaining);
+        setEditingIndex(null);
+      } else {
+        setExtractedItems([]);
+        setEditingIndex(null);
+      }
+      setSavingIndex(null);
+    }, 1500);
   };
 
   const confirmAllItems = async () => {
@@ -255,6 +263,7 @@ export function useAIExtraction(inventory: Item[], onComplete: (itemData: any) =
     existingBoxes,
     extractedImageBlob,
     setExtractedImageBlob,
+    savingIndex,
     startLiveCamera,
     stopLiveCamera,
     captureSnapshot,