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/admin/billing/[id].vue

@@ -251,28 +251,31 @@
   </div>
 </template>
 <script setup>
+import {
+  CheckIcon,
+  CurrencyIcon,
+  ExternalIcon,
+  ModrinthPlusIcon,
+  ServerIcon,
+  UserIcon,
+  XIcon,
+} from "@modrinth/assets";
 import {
   Avatar,
   ButtonStyled,
   CopyCode,
   DropdownSelect,
+  injectNotificationManager,
   NewModal,
   Toggle,
   useRelativeTime,
 } from "@modrinth/ui";
 import { formatCategory, formatPrice } from "@modrinth/utils";
-import {
-  CheckIcon,
-  XIcon,
-  UserIcon,
-  ModrinthPlusIcon,
-  ServerIcon,
-  ExternalIcon,
-  CurrencyIcon,
-} from "@modrinth/assets";
 import dayjs from "dayjs";
-import { products } from "~/generated/state.json";
 import ModrinthServersIcon from "~/components/ui/servers/ModrinthServersIcon.vue";
+import { products } from "~/generated/state.json";
+
+const { addNotification } = injectNotificationManager();
 
 const route = useRoute();
 const vintl = useVIntl();

apps/frontend/src/pages/admin/servers/notices.vue

@@ -258,31 +258,31 @@
   </div>
 </template>
 <script setup lang="ts">
+import { EditIcon, PlusIcon, SaveIcon, SettingsIcon, TrashIcon, XIcon } from "@modrinth/assets";
 import {
-  CopyCode,
-  TagItem,
   ButtonStyled,
-  ServerNotice,
   commonMessages,
+  CopyCode,
+  injectNotificationManager,
   NewModal,
+  ServerNotice,
+  TagItem,
   TeleportDropdownMenu,
   Toggle,
   useRelativeTime,
 } from "@modrinth/ui";
-import { SettingsIcon, PlusIcon, SaveIcon, TrashIcon, EditIcon, XIcon } from "@modrinth/assets";
-import dayjs from "dayjs";
-import { useVIntl } from "@vintl/vintl";
-import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
-import { computed } from "vue";
 import { NOTICE_LEVELS } from "@modrinth/ui/src/utils/notices.ts";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
+import { useVIntl } from "@vintl/vintl";
+import dayjs from "dayjs";
+import { computed } from "vue";
 import AssignNoticeModal from "~/components/ui/servers/notice/AssignNoticeModal.vue";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 const formatRelativeTime = useRelativeTime();
 
-const app = useNuxtApp() as unknown as { $notify: any };
-
 const notices = ref<ServerNoticeType[]>([]);
 const createNoticeModal = ref<InstanceType<typeof NewModal>>();
 const assignNoticeModal = ref<InstanceType<typeof AssignNoticeModal>>();
@@ -351,15 +351,13 @@ async function deleteNotice(notice: ServerNoticeType) {
     method: "DELETE",
   })
     .then(() => {
-      app.$notify({
-        group: "main",
+      addNotification({
         title: `Successfully deleted notice #${notice.id}`,
         type: "success",
       });
     })
     .catch((err) => {
-      app.$notify({
-        group: "main",
+      addNotification({
         title: "Error deleting notice",
         text: err,
         type: "error",
@@ -386,7 +384,6 @@ const noticeSubmitError = computed(() => {
 function validateSubmission(message: string) {
   if (noticeSubmitError.value) {
     addNotification({
-      group: "main",
       title: message,
       text: noticeSubmitError.value,
       type: "error",
@@ -416,8 +413,7 @@ async function saveChanges() {
         : undefined,
     },
   }).catch((err) => {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error saving changes to notice",
       text: err,
       type: "error",
@@ -447,8 +443,7 @@ async function createNotice() {
         : undefined,
     },
   }).catch((err) => {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error creating notice",
       text: err,
       type: "error",

apps/frontend/src/pages/admin/user_email.vue

@@ -32,8 +32,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
 import { MailIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager } from "@modrinth/ui";
+
+const { addNotification } = injectNotificationManager();
 
 const userEmail = ref("");
 
@@ -50,7 +52,6 @@ async function getUserFromEmail() {
   } catch (err) {
     console.error(err);
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err.data.description,
       type: "error",