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/instance_settings/GeneralSettings.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { SpinnerIcon, TrashIcon, UploadIcon, PlusIcon, EditIcon, CopyIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, OverflowMenu, Checkbox } from '@modrinth/ui'
-import { computed, ref, type Ref, watch } from 'vue'
-import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
+import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  injectNotificationManager,
+  OverflowMenu,
+} from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
 import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, type Ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import type { InstanceSettingsTabProps, GameInstance } from '../../../helpers/types'
+import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
 

apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings.ts'
 import { edit } from '@/helpers/profile'
-import type { InstanceSettingsTabProps, AppSettings, Hooks } from '../../../helpers/types'
+import { get } from '@/helpers/settings.ts'
+import { Checkbox, injectNotificationManager } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, watch } from 'vue'
+import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -1,23 +1,30 @@
 <script setup lang="ts">
-import {
-  TransferIcon,
-  IssuesIcon,
-  HammerIcon,
-  DownloadIcon,
-  WrenchIcon,
-  UndoIcon,
-  SpinnerIcon,
-  UnplugIcon,
-  UnlinkIcon,
-} from '@modrinth/assets'
-import { Avatar, Checkbox, Chips, ButtonStyled, TeleportDropdownMenu } from '@modrinth/ui'
-import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
-import { edit, install, update_repair_modrinth } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import { get_project, get_version_many } from '@/helpers/cache'
 import { get_loader_versions } from '@/helpers/metadata'
+import { edit, install, update_repair_modrinth } from '@/helpers/profile'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
+import {
+  DownloadIcon,
+  HammerIcon,
+  IssuesIcon,
+  SpinnerIcon,
+  TransferIcon,
+  UndoIcon,
+  UnlinkIcon,
+  UnplugIcon,
+  WrenchIcon,
+} from '@modrinth/assets'
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  Chips,
+  TeleportDropdownMenu,
+  injectNotificationManager,
+} from '@modrinth/ui'
 import {
   formatCategory,
   type GameVersionTag,
@@ -25,16 +32,16 @@ import {
   type Project,
   type Version,
 } from '@modrinth/utils'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { get_project, get_version_many } from '@/helpers/cache'
-import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
+import { computed, ref, shallowRef, watch, type ComputedRef, type Ref } from 'vue'
 import type {
   InstanceSettingsTabProps,
-  ManifestLoaderVersion,
   Manifest,
+  ManifestLoaderVersion,
 } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const repairConfirmModal = ref()

apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { Checkbox, Slider } from '@modrinth/ui'
-import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { computed, readonly, ref, watch } from 'vue'
-import { edit, get_optimal_jre_key } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
-import { get } from '@/helpers/settings.ts'
-import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'
 import useMemorySlider from '@/composables/useMemorySlider'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
+import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, readonly, ref, watch } from 'vue'
+import type { AppSettings, InstanceSettingsTabProps, MemorySettings } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Checkbox, Toggle } from '@modrinth/ui'
-import { computed, ref, type Ref, watch } from 'vue'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings.ts'
 import { edit } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, type Ref, watch } from 'vue'
 import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()