bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: improve checkbox styling and remove popup

Browse Source 
- Update photo save checkbox to match app design (border-slate-600, htmlFor label)
- Remove success popup overlay - modal closes immediately after save
- Simplify confirmSingleItem to remove setTimeout logic
- Toast notification used for user feedback instead
This commit is contained in:
Daniel Bedeleanu
2026-04-22 09:17:56 +03:00
parent 99a4cae572
commit ba581744ec
2 changed files with 16 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/components/AIOnboarding.tsx
View File

@@ -29,7 +29,6 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
fileInputRef, fileInputRef,
existingTypes, existingTypes,
existingBoxes, existingBoxes,
savingIndex,
startLiveCamera, startLiveCamera,
stopLiveCamera, stopLiveCamera,
captureSnapshot, captureSnapshot,
@@ -238,15 +237,18 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div> </div>
<div className="p-3 space-y-2"> <div className="p-3 space-y-2">
<p className="text-xs text-muted font-normal">Extracted Photo</p> <p className="text-xs text-muted font-normal">Extracted Photo</p>
<label className="flex items-center gap-2 cursor-pointer"> <div className="flex items-center gap-2">
<input <input
type="checkbox" type="checkbox"
id="save-photo-check"
checked={!extractedItems[editingIndex]._skipPhoto} checked={!extractedItems[editingIndex]._skipPhoto}
onChange={(e) => updateEditingItem({ _skipPhoto: !e.target.checked })} onChange={(e) => updateEditingItem({ _skipPhoto: !e.target.checked })}
className="w-4 h-4 accent-primary cursor-pointer" className="w-4 h-4 rounded border-slate-600 accent-primary cursor-pointer"
/> />
<span className="text-xs text-secondary font-normal">Save this photo with the item</span> <label htmlFor="save-photo-check" className="text-xs text-slate-300 font-normal cursor-pointer">
</label> Save this photo with the item
</label>
</div>
</div> </div>
</div> </div>
)} )}
@@ -485,26 +487,6 @@ 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> </div>
); );
} }

26
frontend/hooks/useAIExtraction.ts
View File

@@ -11,7 +11,6 @@ export function useAIExtraction(inventory: Item[], onComplete: (itemData: any) =
const [mode, setMode] = useState<'item' | 'box'>('item'); const [mode, setMode] = useState<'item' | 'box'>('item');
const [isLive, setIsLive] = useState(false); const [isLive, setIsLive] = useState(false);
const [extractedImageBlob, setExtractedImageBlob] = useState<Blob | null>(null); const [extractedImageBlob, setExtractedImageBlob] = useState<Blob | null>(null);
const [savingIndex, setSavingIndex] = useState<number | null>(null);
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -159,23 +158,17 @@ export function useAIExtraction(inventory: Item[], onComplete: (itemData: any) =
}) })
}; };
// Show success briefly before closing
setSavingIndex(index);
onComplete(newItem); onComplete(newItem);
// Reset UI after brief delay so user sees the success if (extractedItems.length > 1) {
setTimeout(() => { const remaining = [...extractedItems];
if (extractedItems.length > 1) { remaining.splice(index, 1);
const remaining = [...extractedItems]; setExtractedItems(remaining);
remaining.splice(index, 1); setEditingIndex(null);
setExtractedItems(remaining); } else {
setEditingIndex(null); setExtractedItems([]);
} else { setEditingIndex(null);
setExtractedItems([]); }
setEditingIndex(null);
}
setSavingIndex(null);
}, 1500);
}; };
const confirmAllItems = async () => { const confirmAllItems = async () => {
@@ -263,7 +256,6 @@ export function useAIExtraction(inventory: Item[], onComplete: (itemData: any) =
existingBoxes, existingBoxes,
extractedImageBlob, extractedImageBlob,
setExtractedImageBlob, setExtractedImageBlob,
savingIndex,
startLiveCamera, startLiveCamera,
stopLiveCamera, stopLiveCamera,
captureSnapshot, captureSnapshot,