update on timeline on portfolio view + some corrections

client/src/components/ToastContainer.jsx

@@ -0,0 +1,52 @@
+import { createContext, useContext, useState, useCallback } from 'react'
+import Toast from './Toast'
+
+const ToastContext = createContext()
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider')
+  }
+  return context
+}
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([])
+
+  const addToast = useCallback((message, type = 'info', duration = 4000) => {
+    const id = Date.now() + Math.random()
+    setToasts(prev => [...prev, { id, message, type, duration }])
+  }, [])
+
+  const removeToast = useCallback((id) => {
+    setToasts(prev => prev.filter(t => t.id !== id))
+  }, [])
+
+  const toast = {
+    success: (message, duration) => addToast(message, 'success', duration),
+    error: (message, duration) => addToast(message, 'error', duration),
+    info: (message, duration) => addToast(message, 'info', duration),
+    warning: (message, duration) => addToast(message, 'warning', duration),
+  }
+
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+      {/* Toast container - fixed position */}
+      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+        <div className="flex flex-col gap-2 pointer-events-auto">
+          {toasts.map(t => (
+            <Toast
+              key={t.id}
+              message={t.message}
+              type={t.type}
+              duration={t.duration}
+              onClose={() => removeToast(t.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </ToastContext.Provider>
+  )
+}