Fix toast auto-dismiss and add debugging

- Added console logging to debug toast lifecycle
- Improved toast ID generation with timestamp
- Limited toasts to max 3 at a time
- Toasts should now auto-dismiss after 3 seconds

components/Toast.tsx

@@ -15,8 +15,15 @@ interface ToastProps {
 export default function Toast({ message, type, onClose, duration = 3000 }: ToastProps) {
   useEffect(() => {
     if (duration > 0) {
-      const timer = setTimeout(onClose, duration)
+      console.log(`[Toast] Setting timer for ${duration}ms`)
-      return () => clearTimeout(timer)
+      const timer = setTimeout(() => {
+        console.log('[Toast] Auto-dismissing')
+        onClose()
+      }, duration)
+      return () => {
+        console.log('[Toast] Clearing timer')
+        clearTimeout(timer)
+      }
     }
   }, [duration, onClose])
 

components/ToastContainer.tsx

@@ -27,11 +27,17 @@ export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<ToastMessage[]>([])
 
   const showToast = useCallback((message: string, type: ToastType) => {
-    const id = Math.random().toString(36).substring(7)
+    const id = `${Date.now()}-${Math.random().toString(36).substring(7)}`
-    setToasts((prev) => [...prev, { id, message, type }])
+    console.log('[ToastContainer] Showing toast:', id, message)
+    setToasts((prev) => {
+      // Limit to 3 toasts at a time
+      const newToasts = [...prev, { id, message, type }]
+      return newToasts.slice(-3)
+    })
   }, [])
 
   const removeToast = useCallback((id: string) => {
+    console.log('[ToastContainer] Removing toast:', id)
     setToasts((prev) => prev.filter((toast) => toast.id !== id))
   }, [])