feat: introduce dependency injection framework (#4091)

* feat: migrate frontend notifications to dependency injection based notificaton manager

* fix: lint

* fix: issues

* fix: compile error + notif binding issue

* refactor: move org context to new DI setup

* feat: migrate app notifications to DI + frontend styling

* fix: sidebar issues

* fix: dont use delete in computed

* fix: import and prop issue

* refactor: move handleError to main notification manager class

* fix: lint & build

* fix: merge issues

* fix: lint issues

* fix: lint issues

---------

Signed-off-by: IMB11 <hendersoncal117@gmail.com>
Signed-off-by: Cal H. <hendersoncal117@gmail.com>

apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue

@@ -57,15 +57,16 @@
 
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { XIcon, DownloadIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
-import { add_project_from_version as installMod } from '@/helpers/profile'
-import { ref } from 'vue'
-import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
+import { add_project_from_version as installMod } from '@/helpers/profile'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
+import { ref } from 'vue'
 import Multiselect from 'vue-multiselect'
 
+const { handleError } = injectNotificationManager()
+
 const instance = ref(null)
 const project = ref(null)
 const versions = ref(null)

apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { create_profile_and_install as pack_install } from '@/helpers/pack'
-import { ref } from 'vue'
-import { trackEvent } from '@/helpers/analytics'
-import { handleError } from '@/store/state.js'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { create_profile_and_install as pack_install } from '@/helpers/pack'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const versionId = ref()
 const project = ref()

apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

@@ -1,29 +1,29 @@
 <script setup>
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
 import {
+  check_installed,
+  create,
+  get,
+  add_project_from_version as installMod,
+  list,
+} from '@/helpers/profile'
+import { installVersionDependencies } from '@/store/install.js'
+import {
+  CheckIcon,
   DownloadIcon,
   PlusIcon,
+  RightArrowIcon,
   UploadIcon,
   XIcon,
-  RightArrowIcon,
-  CheckIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-import {
-  add_project_from_version as installMod,
-  check_installed,
-  get,
-  list,
-  create,
-} from '@/helpers/profile'
-import { open } from '@tauri-apps/plugin-dialog'
-import { installVersionDependencies } from '@/store/install.js'
-import { handleError } from '@/store/notifications.js'
-import { useRouter } from 'vue-router'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { trackEvent } from '@/helpers/analytics'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
 const router = useRouter()
 
 const versions = ref()