implement notification that pops up when users add someone to their favourites from sidebar

src/components/sidebar/SettingsButton.tsx

@@ -1,5 +1,5 @@
 import { Settings } from "@mui/icons-material";
-import { IconButton, Menu, MenuItem } from "@mui/material";
+import { Alert, IconButton, Menu, MenuItem, Snackbar } from "@mui/material";
 import { useState } from "react";
 import UserLite from "../../api-bodies/UserLite";
 import UserStatus from "../../api-bodies/UserStatus";
@@ -22,6 +22,7 @@ interface Props {
 const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
   const navigate = useNavigate();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
   const me = useAppSelector(selectMe);
   const favoritesUuids = useAppSelector(selectFavorites);
   const meeting = useAppSelector((state) =>
@@ -35,6 +36,12 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
   const handleClose = () => {
     setAnchorEl(null);
   };
+  const handleSnackbarClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setSnackbarOpen(false);
+  };
 
   return (
     <div>
@@ -66,12 +73,14 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
         ) : (
           <MenuItem
             onClick={() => {
+              setSnackbarOpen(true);
               handleClose();
               dispatch(addFavorite({ userId: me, toBeAdded: user.uuid }));
             }}
           >
             Add to Favorites
           </MenuItem>
+          
         )}
         {status.inMeeting ? (
           <MenuItem
@@ -93,6 +102,13 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
         </MenuItem>
         <MenuItem onClick={handleClose}>Create meeting</MenuItem>
       </Menu>
+      <Snackbar 
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        open={snackbarOpen} autoHideDuration={3000} onClose={handleSnackbarClose}>
+        <Alert onClose={handleSnackbarClose} severity="success" sx={{ width: "100%" }}>
+          User successfully added to favourites list!
+        </Alert>
+      </Snackbar>
     </div>
   );
 };