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/settings/billing/index.vue

@@ -392,8 +392,7 @@
       "
       :on-error="
         (err) =>
-          data.$notify({
-            group: 'main',
+          addNotification({
             title: 'An error occurred',
             type: 'error',
             text: err.message ?? (err.data ? err.data.description : err),
@@ -422,8 +421,7 @@
       :renewal-date="currentSubRenewalDate"
       :on-error="
         (err) =>
-          data.$notify({
-            group: 'main',
+          addNotification({
             title: 'An error occurred',
             type: 'error',
             text: err.message ?? (err.data ? err.data.description : err),
@@ -554,43 +552,44 @@
 
 <script setup>
 import {
-  ConfirmModal,
+  ArrowBigUpDashIcon,
+  CardIcon,
+  CheckCircleIcon,
+  CurrencyIcon,
+  EditIcon,
+  HistoryIcon,
+  ModrinthPlusIcon,
+  MoreVerticalIcon,
+  PayPalIcon,
+  PlusIcon,
+  RightArrowIcon,
+  SpinnerIcon,
+  StarIcon,
+  TransferIcon,
+  TrashIcon,
+  UpdatedIcon,
+  XIcon,
+} from "@modrinth/assets";
+import {
   AddPaymentMethodModal,
+  ButtonStyled,
+  ConfirmModal,
+  CopyCode,
   OverflowMenu,
   PurchaseModal,
-  ButtonStyled,
-  CopyCode,
   commonMessages,
+  injectNotificationManager,
 } from "@modrinth/ui";
-import {
-  PlusIcon,
-  TransferIcon,
-  SpinnerIcon,
-  ArrowBigUpDashIcon,
-  XIcon,
-  CardIcon,
-  MoreVerticalIcon,
-  TrashIcon,
-  EditIcon,
-  StarIcon,
-  PayPalIcon,
-  CurrencyIcon,
-  CheckCircleIcon,
-  RightArrowIcon,
-  ModrinthPlusIcon,
-  UpdatedIcon,
-  HistoryIcon,
-} from "@modrinth/assets";
 import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
 import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 import { products } from "~/generated/state.json";
 
+const { addNotification } = injectNotificationManager();
 definePageMeta({
   middleware: "auth",
 });
 
-const app = useNuxtApp();
 const auth = await useAuth();
 const baseId = useId();
 
@@ -604,7 +603,6 @@ useHead({
   ],
 });
 
-const data = useNuxtApp();
 const config = useRuntimeConfig();
 
 const vintl = useVIntl();
@@ -845,8 +843,7 @@ async function editPaymentMethod(index, primary) {
     });
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -864,8 +861,7 @@ async function removePaymentMethod(index) {
     });
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -887,8 +883,7 @@ async function cancelSubscription(id, cancelled) {
     });
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -955,8 +950,7 @@ const showPyroUpgradeModal = async (subscription) => {
 
   if (!currentProduct.value) {
     console.error("Could not find product for current subscription");
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: "Could not find product for current subscription",
       type: "error",
@@ -988,8 +982,7 @@ async function fetchCapacityStatuses(serverId, product) {
       };
     } catch (error) {
       console.error("Error checking server capacities:", error);
-      app.$notify({
-        group: "main",
+      addNotification({
         title: "Error checking server capacities",
         text: error,
         type: "error",
@@ -1015,23 +1008,20 @@ const resubscribePyro = async (subscriptionId, wasSuspended) => {
     });
     await refresh();
     if (wasSuspended) {
-      data.$notify({
-        group: "main",
+      addNotification({
         title: "Resubscription request submitted",
         text: "If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.",
         type: "success",
       });
     } else {
-      data.$notify({
-        group: "main",
+      addNotification({
         title: "Success",
         text: "Server subscription resubscribed successfully",
         type: "success",
       });
     }
   } catch {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "Error resubscribing",
       text: "An error occurred while resubscribing to your Modrinth server.",
       type: "error",