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

@@ -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,