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/auth/authorize.vue

@@ -80,13 +80,14 @@
 </template>
 
 <script setup>
-import { Button, Avatar, commonMessages } from "@modrinth/ui";
-import { XIcon, CheckIcon } from "@modrinth/assets";
-import { useBaseFetch } from "@/composables/fetch.js";
+import { CheckIcon, XIcon } from "@modrinth/assets";
+import { Avatar, Button, commonMessages, injectNotificationManager } from "@modrinth/ui";
 import { useAuth } from "@/composables/auth.js";
+import { useBaseFetch } from "@/composables/fetch.js";
 
 import { useScopes } from "@/composables/auth/scopes.ts";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const messages = defineMessages({
@@ -117,8 +118,6 @@ const messages = defineMessages({
   },
 });
 
-const data = useNuxtApp();
-
 const router = useNativeRoute();
 const auth = await useAuth();
 const { scopesToDefinitions } = useScopes();
@@ -196,8 +195,7 @@ const onAuthorize = async () => {
 
     throw new Error(formatMessage(messages.noRedirectUrlError));
   } catch {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
@@ -223,8 +221,7 @@ const onReject = async () => {
 
     throw new Error(formatMessage(messages.noRedirectUrlError));
   } catch {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",

apps/frontend/src/pages/auth/reset-password.vue

@@ -67,10 +67,11 @@
   </div>
 </template>
 <script setup>
-import { SendIcon, MailIcon, KeyIcon } from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
+import { KeyIcon, MailIcon, SendIcon } from "@modrinth/assets";
+import { commonMessages, injectNotificationManager } from "@modrinth/ui";
 import HCaptcha from "@/components/ui/HCaptcha.vue";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const methodChoiceMessages = defineMessages({
@@ -179,14 +180,12 @@ async function recovery() {
     });
 
     addNotification({
-      group: "main",
       title: formatMessage(emailSentNotificationMessages.title),
       text: formatMessage(emailSentNotificationMessages.text),
       type: "success",
     });
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
@@ -211,7 +210,6 @@ async function changePassword() {
     });
 
     addNotification({
-      group: "main",
       title: formatMessage(passwordResetNotificationMessages.title),
       text: formatMessage(passwordResetNotificationMessages.text),
       type: "success",
@@ -219,7 +217,6 @@ async function changePassword() {
     await navigateTo("/auth/sign-in");
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",

apps/frontend/src/pages/auth/sign-in.vue

@@ -130,19 +130,20 @@
 
 <script setup>
 import {
-  RightArrowIcon,
-  SSOGitHubIcon,
-  SSOMicrosoftIcon,
-  SSOSteamIcon,
-  SSOGoogleIcon,
-  SSODiscordIcon,
-  SSOGitLabIcon,
   KeyIcon,
   MailIcon,
+  RightArrowIcon,
+  SSODiscordIcon,
+  SSOGitHubIcon,
+  SSOGitLabIcon,
+  SSOGoogleIcon,
+  SSOMicrosoftIcon,
+  SSOSteamIcon,
 } from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
+import { commonMessages, injectNotificationManager } from "@modrinth/ui";
 import HCaptcha from "@/components/ui/HCaptcha.vue";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const messages = defineMessages({
@@ -232,7 +233,6 @@ async function beginPasswordSignIn() {
     }
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
@@ -257,7 +257,6 @@ async function begin2FASignIn() {
     await finishSignIn(res.session);
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",

apps/frontend/src/pages/auth/sign-up.vue

@@ -134,20 +134,21 @@
 
 <script setup>
 import {
-  RightArrowIcon,
-  UserIcon,
-  SSOGitHubIcon,
-  SSOMicrosoftIcon,
-  SSOGoogleIcon,
-  SSOSteamIcon,
-  SSODiscordIcon,
   KeyIcon,
   MailIcon,
+  RightArrowIcon,
+  SSODiscordIcon,
+  SSOGitHubIcon,
   SSOGitLabIcon,
+  SSOGoogleIcon,
+  SSOMicrosoftIcon,
+  SSOSteamIcon,
+  UserIcon,
 } from "@modrinth/assets";
-import { Checkbox, commonMessages } from "@modrinth/ui";
+import { Checkbox, commonMessages, injectNotificationManager } from "@modrinth/ui";
 import HCaptcha from "@/components/ui/HCaptcha.vue";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const messages = defineMessages({
@@ -225,7 +226,6 @@ async function createAccount() {
   try {
     if (confirmPassword.value !== password.value) {
       addNotification({
-        group: "main",
         title: formatMessage(commonMessages.errorNotificationTitle),
         text: formatMessage({
           id: "auth.sign-up.notification.password-mismatch.text",
@@ -262,7 +262,6 @@ async function createAccount() {
     }
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",