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/frontend/src/pages/servers/manage/[id].vue

@@ -350,38 +350,43 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, type Reactive } from "vue";
+import { reloadNuxtApp } from "#app";
+import { Intercom, shutdown } from "@intercom/messenger-js-sdk";
 import {
-  SettingsIcon,
+  CheckIcon,
   CopyIcon,
+  FileIcon,
   IssuesIcon,
   LeftArrowIcon,
-  RightArrowIcon,
-  CheckIcon,
-  FileIcon,
-  TransferIcon,
   LockIcon,
+  RightArrowIcon,
+  SettingsIcon,
+  TransferIcon,
 } from "@modrinth/assets";
-import DOMPurify from "dompurify";
-import { ButtonStyled, ErrorInformationCard, ServerNotice } from "@modrinth/ui";
-import { Intercom, shutdown } from "@intercom/messenger-js-sdk";
-import type { MessageDescriptor } from "@vintl/vintl";
 import {
+  ButtonStyled,
+  ErrorInformationCard,
+  injectNotificationManager,
+  ServerNotice,
+} from "@modrinth/ui";
+import {
+  type Backup,
+  type PowerAction,
   type ServerState,
   type Stats,
   type WSEvent,
   type WSInstallationResultEvent,
-  type Backup,
-  type PowerAction,
 } from "@modrinth/utils";
-import { reloadNuxtApp } from "#app";
-import { useModrinthServersConsole } from "~/store/console.ts";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
-import { ModrinthServer, useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
+import type { MessageDescriptor } from "@vintl/vintl";
+import DOMPurify from "dompurify";
+import { computed, onMounted, onUnmounted, ref, type Reactive } from "vue";
 import ServerInstallation from "~/components/ui/servers/ServerInstallation.vue";
 import PanelErrorIcon from "~/components/ui/servers/icons/PanelErrorIcon.vue";
+import { ModrinthServer, useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import { useModrinthServersConsole } from "~/store/console.ts";
 
-const app = useNuxtApp() as unknown as { $notify: any };
+const { addNotification } = injectNotificationManager();
 
 const socket = ref<WebSocket | null>(null);
 const isReconnecting = ref(false);
@@ -964,7 +969,6 @@ const sendPowerAction = async (action: PowerAction) => {
 
 const notifyError = (title: string, text: string) => {
   addNotification({
-    group: "server",
     title,
     text,
     type: "error",
@@ -1149,8 +1153,7 @@ async function dismissNotice(noticeId: number) {
   await useServersFetch(`servers/${serverId}/notices/${noticeId}/dismiss`, {
     method: "POST",
   }).catch((err) => {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error dismissing notice",
       text: err,
       type: "error",