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/store/install.js

@@ -1,4 +1,6 @@
-import { defineStore } from 'pinia'
+import { trackEvent } from '@/helpers/analytics.js'
+import { get_project, get_version_many } from '@/helpers/cache.js'
+import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
 import {
   add_project_from_version,
   check_installed,
@@ -7,11 +9,9 @@ import {
   list,
   remove_project,
 } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
-import { get_project, get_version_many } from '@/helpers/cache.js'
-import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
-import { trackEvent } from '@/helpers/analytics.js'
+import { injectNotificationManager } from '@modrinth/ui'
 import dayjs from 'dayjs'
+import { defineStore } from 'pinia'
 
 export const useInstall = defineStore('installStore', {
   state: () => ({
@@ -49,6 +49,7 @@ export const install = async (
   callback = () => {},
   createInstanceCallback = () => {},
 ) => {
+  const { handleError } = injectNotificationManager()
   const project = await get_project(projectId, 'must_revalidate').catch(handleError)
 
   if (project.project_type === 'modpack') {
@@ -166,6 +167,7 @@ export const install = async (
 }
 
 export const installVersionDependencies = async (profile, version) => {
+  const { handleError } = injectNotificationManager()
   for (const dep of version.dependencies) {
     if (dep.dependency_type !== 'required') continue
     // disallow fabric api install on quilt

apps/app-frontend/src/store/notifications.js

@@ -1,25 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useNotifications = defineStore('notificationsStore', {
-  state: () => ({
-    notificationsWrapper: null,
-  }),
-  actions: {
-    setNotifs(notifs) {
-      this.notificationsWrapper = notifs
-    },
-    addNotification(notif) {
-      this.notificationsWrapper.addNotification(notif)
-    },
-  },
-})
-
-export const handleError = (err) => {
-  const notifs = useNotifications()
-  notifs.addNotification({
-    title: 'An error occurred',
-    text: err.message ?? err,
-    type: 'error',
-  })
-  console.error(err)
-}

apps/app-frontend/src/store/state.js

@@ -1,7 +1,6 @@
-import { useTheming } from './theme.ts'
 import { useBreadcrumbs } from './breadcrumbs'
-import { useLoading } from './loading'
-import { useNotifications, handleError } from './notifications'
 import { useInstall } from './install'
+import { useLoading } from './loading'
+import { useTheming } from './theme.ts'
 
-export { useTheming, useBreadcrumbs, useLoading, useNotifications, handleError, useInstall }
+export { useBreadcrumbs, useInstall, useLoading, useTheming }