resolve issues with new features

frontend/src/contexts/NotificationContext.tsx

@@ -12,6 +12,7 @@ interface NotificationContextType {
   showError: (message: string) => void;
   showWarning: (message: string) => void;
   showInfo: (message: string) => void;
+  showNotificationToast: (message: string, severity?: AlertColor) => void;
 }
 
 const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
@@ -24,6 +25,9 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
   const [_notifications, setNotifications] = useState<Notification[]>([]);
   const [currentNotification, setCurrentNotification] = useState<Notification | null>(null);
 
+  // Left-side toast queue for new backend notifications
+  const [toastQueue, setToastQueue] = useState<Notification[]>([]);
+
   const addNotification = useCallback((message: string, severity: AlertColor) => {
     const id = Date.now();
     const notification: Notification = { id, message, severity };
@@ -52,6 +56,11 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
     addNotification(message, 'info');
   }, [addNotification]);
 
+  const showNotificationToast = useCallback((message: string, severity: AlertColor = 'info') => {
+    const id = Date.now() + Math.random();
+    setToastQueue((prev) => [...prev, { id, message, severity }]);
+  }, []);
+
   const handleClose = (_event?: React.SyntheticEvent | Event, reason?: string) => {
     if (reason === 'clickaway') {
       return;
@@ -71,16 +80,23 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
     }, 200);
   };
 
+  const handleToastClose = (_event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') return;
+    setToastQueue((prev) => prev.slice(1));
+  };
+
   const value: NotificationContextType = {
     showSuccess,
     showError,
     showWarning,
     showInfo,
+    showNotificationToast,
   };
 
   return (
     <NotificationContext.Provider value={value}>
       {children}
+      {/* Right-side: action feedback */}
       <Snackbar
         open={currentNotification !== null}
         autoHideDuration={6000}
@@ -96,6 +112,22 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
           {currentNotification?.message}
         </Alert>
       </Snackbar>
+      {/* Left-side: new backend notification toasts */}
+      <Snackbar
+        open={toastQueue.length > 0}
+        autoHideDuration={5000}
+        onClose={handleToastClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      >
+        <Alert
+          onClose={handleToastClose}
+          severity={toastQueue[0]?.severity || 'info'}
+          variant="filled"
+          sx={{ width: '100%' }}
+        >
+          {toastQueue[0]?.message}
+        </Alert>
+      </Snackbar>
     </NotificationContext.Provider>
   );
 };