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/plus.vue

@@ -11,8 +11,7 @@
     :fetch-payment-data="fetchPaymentData"
     :on-error="
       (err) =>
-        data.$notify({
-          group: 'main',
+        addNotification({
           title: 'An error occurred',
           type: 'error',
           text: err.message ?? (err.data ? err.data.description : err),
@@ -87,16 +86,18 @@
 </template>
 <script setup>
 import {
-  ModrinthPlusIcon,
   HeartIcon,
+  ModrinthPlusIcon,
+  SettingsIcon,
   SparklesIcon,
   StarIcon,
-  SettingsIcon,
 } from "@modrinth/assets";
-import { PurchaseModal } from "@modrinth/ui";
+import { injectNotificationManager, PurchaseModal } from "@modrinth/ui";
 import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
 import { products } from "~/generated/state.json";
 
+const { addNotification } = injectNotificationManager();
+
 const title = "Subscribe to Modrinth Plus!";
 const description =
   "Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an exclusive profile badge! Half your subscription goes directly to Modrinth creators.";
@@ -120,7 +121,6 @@ useHead({
 
 const vintl = useVIntl();
 
-const data = useNuxtApp();
 const config = useRuntimeConfig();
 
 const auth = await useAuth();