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/skin/EditSkinModal.vue

@@ -100,37 +100,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, useTemplateRef } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import {
-  SkinPreviewRenderer,
-  Button,
-  RadioButtons,
-  CapeButton,
-  CapeLikeTextButton,
-  ButtonStyled,
-} from '@modrinth/ui'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
 import {
   add_and_equip_custom_skin,
+  determineModelType,
+  get_normalized_skin_texture,
   remove_custom_skin,
   unequip_skin,
-  type Skin,
   type Cape,
+  type Skin,
   type SkinModel,
-  get_normalized_skin_texture,
-  determineModelType,
 } from '@/helpers/skins.ts'
-import { handleError } from '@/store/notifications'
 import {
-  UploadIcon,
   CheckIcon,
-  SaveIcon,
-  XIcon,
   ChevronRightIcon,
+  SaveIcon,
   SpinnerIcon,
+  UploadIcon,
+  XIcon,
 } from '@modrinth/assets'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
+import {
+  Button,
+  ButtonStyled,
+  CapeButton,
+  CapeLikeTextButton,
+  injectNotificationManager,
+  RadioButtons,
+  SkinPreviewRenderer,
+} from '@modrinth/ui'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const modal = useTemplateRef('modal')
 const selectCapeModal = useTemplateRef('selectCapeModal')

apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue

@@ -27,14 +27,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeUnmount, watch } from 'vue'
-import { UploadIcon } from '@modrinth/assets'
-import { useNotifications } from '@/store/state'
-import { getCurrentWebview } from '@tauri-apps/api/webview'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get_dragged_skin_data } from '@/helpers/skins'
+import { UploadIcon } from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { onBeforeUnmount, ref, watch } from 'vue'
 
-const notifications = useNotifications()
+const { addNotification } = injectNotificationManager()
 
 const modal = ref()
 const fileInput = ref<HTMLInputElement>()
@@ -99,7 +99,7 @@ async function setupDragDropListener() {
           const data = await get_dragged_skin_data(filePath)
           await processData(data.buffer)
         } catch (error) {
-          notifications.addNotification({
+          addNotification({
             title: 'Error processing file',
             text: error instanceof Error ? error.message : 'Failed to read the dropped file.',
             type: 'error',