feat: add error and success messages on edit page (#227)

* add notifications for loading, success and error

replace the error handling with useStates for error and success and conditional Alert component.

* put notification handling in a separate file

- less code is needed in the components to use notifications for loading/success/error.
- notifications will be consistent across the app and style/settings can be easily changed in one place.
- a tsx file was needed to have the Icon component in the notifications. -> src/lib/notifications.tsx

* refactor layout to have buttons up top and sticky

* edit some spacing

* remove DeleteRecipeButton component

its now handled inline in the EditRecipeForm component

* remove DeleteRecipeButton and title

there now rendered in the EditRecipeForm component instead

* add buttons with text for larger screens

and change title placement + content ({recipe.title} instead of "Edit Recipe")

* refactor sticky element slightly

- zIndex:1000 made it appear on top of dropdowns/drawers
  -> zIndex:100
- small edit of margins

* integrate modals for recipe deletion confirmation

* increase notification auto-close duration to 2s

* fix singular/plural typo

---------

Co-authored-by: sirisayshello <[email protected]>

package.json

@@ -15,10 +15,11 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@hello-pangea/dnd": "^17.0.0",
-    "@mantine/core": "^7.13.4",
+    "@mantine/core": "^7.14.1",
     "@mantine/form": "^7.13.5",
-    "@mantine/hooks": "^7.13.3",
-    "@mantine/notifications": "^7.13.4",
+    "@mantine/hooks": "^7.14.1",
+    "@mantine/modals": "^7.14.1",
+    "@mantine/notifications": "^7.14.1",
     "@prisma/client": "^5.21.0",
     "@tabler/icons-react": "^3.20.0",
     "bcrypt": "^5.1.1",
@@ -43,6 +44,7 @@
     "eslint-config-prettier": "^9.1.0",
     "lint-staged": "^15.2.10",
     "postcss": "^8.4.47",
+    "postcss-preset-mantine": "^1.17.0",
     "prisma": "^5.21.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.1",