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/composables/auth.js

@@ -1,3 +1,5 @@
+import { injectNotificationManager } from "@modrinth/ui";
+
 export const useAuth = async (oldToken = null) => {
   const auth = useState("auth", () => ({
     user: null,
@@ -128,9 +130,8 @@ export const removeAuthProvider = async (provider) => {
     });
     await useAuth(auth.value.token);
   } catch (err) {
-    const data = useNuxtApp();
-    data.$notify({
-      group: "main",
+    const { addNotification } = injectNotificationManager();
+    addNotification({
       title: "An error occurred",
       text: err.data.description,
       type: "error",

apps/frontend/src/composables/notifs.js

@@ -1,38 +0,0 @@
-export const useNotifications = () => useState("notifications", () => []);
-
-export const addNotification = (notification) => {
-  const notifications = useNotifications();
-
-  const existingNotif = notifications.value.find(
-    (x) =>
-      x.text === notification.text &&
-      x.title === notification.title &&
-      x.type === notification.type,
-  );
-  if (existingNotif) {
-    setNotificationTimer(existingNotif);
-    existingNotif.count++;
-
-    return;
-  }
-
-  notification.id = new Date();
-  notification.count = 1;
-
-  setNotificationTimer(notification);
-  notifications.value.push(notification);
-};
-
-export const setNotificationTimer = (notification) => {
-  if (!notification) return;
-
-  const notifications = useNotifications();
-
-  if (notification.timer) {
-    clearTimeout(notification.timer);
-  }
-
-  notification.timer = setTimeout(() => {
-    notifications.value.splice(notifications.value.indexOf(notification), 1);
-  }, 30000);
-};

apps/frontend/src/composables/servers/modrinth-servers.ts

@@ -1,18 +1,20 @@
-import { ModrinthServerError } from "@modrinth/utils";
 import type { JWTAuth, ModuleError, ModuleName } from "@modrinth/utils";
+import { ModrinthServerError } from "@modrinth/utils";
+import { injectNotificationManager } from "@modrinth/ui";
 import { useServersFetch } from "./servers-fetch.ts";
 
 import {
-  GeneralModule,
-  ContentModule,
   BackupsModule,
+  ContentModule,
+  FSModule,
+  GeneralModule,
   NetworkModule,
   StartupModule,
   WSModule,
-  FSModule,
 } from "./modules/index.ts";
 
 export function handleError(err: any) {
+  const { addNotification } = injectNotificationManager();
   if (err instanceof ModrinthServerError && err.v1Error) {
     addNotification({
       title: err.v1Error?.context ?? `An error occurred`,

apps/frontend/src/composables/use-client-try.ts

@@ -1,3 +1,5 @@
+import { injectNotificationManager } from "@modrinth/ui";
+
 type AsyncFunction<TArgs extends any[], TResult> = (...args: TArgs) => Promise<TResult>;
 type ErrorFunction = (err: any) => void | Promise<void>;
 type VoidFunction = () => void | Promise<void>;
@@ -9,8 +11,8 @@ type useClientTry = <TArgs extends any[], TResult>(
 ) => (...args: TArgs) => Promise<TResult | undefined>;
 
 const defaultOnError: ErrorFunction = (error) => {
+  const { addNotification } = injectNotificationManager();
   addNotification({
-    group: "main",
     title: "An error occurred",
     text: error?.data?.description || error.message || error || "Unknown error",
     type: "error",

apps/frontend/src/composables/user.js

@@ -135,7 +135,8 @@ export const userFollowProject = async (project) => {
   }
 };
 export const resendVerifyEmail = async () => {
-  const app = useNuxtApp();
+  // const { injectNotificationManager } = await import("@modrinth/ui");
+  // const { addNotification } = injectNotificationManager();
 
   startLoading();
   try {
@@ -144,15 +145,13 @@ export const resendVerifyEmail = async () => {
     });
 
     const auth = await useAuth();
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Email sent",
       text: `An email with a link to verify your account has been sent to ${auth.value.user.email}.`,
       type: "success",
     });
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data.description,
       type: "error",