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/servers/manage/[id]/options/index.vue

@@ -113,9 +113,11 @@
 
 <script setup lang="ts">
 import { EditIcon, TransferIcon } from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
 import ButtonStyled from "@modrinth/ui/src/components/base/ButtonStyled.vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
 const props = defineProps<{
   server: ModrinthServer;
 }>();
@@ -161,7 +163,6 @@ const saveGeneral = async () => {
 
         if (!available) {
           addNotification({
-            group: "serverOptions",
             type: "error",
             title: "Subdomain not available",
             text: "The subdomain you entered is already in use.",
@@ -173,7 +174,6 @@ const saveGeneral = async () => {
       } catch (error) {
         console.error("Error checking subdomain availability:", error);
         addNotification({
-          group: "serverOptions",
           type: "error",
           title: "Error checking availability",
           text: "Failed to verify if the subdomain is available.",
@@ -184,7 +184,6 @@ const saveGeneral = async () => {
     await new Promise((resolve) => setTimeout(resolve, 500));
     await props.server.refresh();
     addNotification({
-      group: "serverOptions",
       type: "success",
       title: "Server settings updated",
       text: "Your server settings were successfully changed.",
@@ -192,7 +191,6 @@ const saveGeneral = async () => {
   } catch (error) {
     console.error(error);
     addNotification({
-      group: "serverOptions",
       type: "error",
       title: "Failed to update server settings",
       text: "An error occurred while attempting to update your server settings.",
@@ -211,7 +209,6 @@ const uploadFile = async (e: Event) => {
   const file = (e.target as HTMLInputElement).files?.[0];
   if (!file) {
     addNotification({
-      group: "serverOptions",
       type: "error",
       title: "No file selected",
       text: "Please select a file to upload.",
@@ -267,7 +264,6 @@ const uploadFile = async (e: Event) => {
     });
 
     addNotification({
-      group: "serverOptions",
       type: "success",
       title: "Server icon updated",
       text: "Your server icon was successfully changed.",
@@ -275,7 +271,6 @@ const uploadFile = async (e: Event) => {
   } catch (error) {
     console.error("Error uploading icon:", error);
     addNotification({
-      group: "serverOptions",
       type: "error",
       title: "Upload failed",
       text: "Failed to upload server icon.",
@@ -295,7 +290,6 @@ const resetIcon = async () => {
       await props.server.refresh(["general"]);
 
       addNotification({
-        group: "serverOptions",
         type: "success",
         title: "Server icon reset",
         text: "Your server icon was successfully reset.",
@@ -303,7 +297,6 @@ const resetIcon = async () => {
     } catch (error) {
       console.error("Error resetting icon:", error);
       addNotification({
-        group: "serverOptions",
         type: "error",
         title: "Reset failed",
         text: "Failed to reset server icon.",

apps/frontend/src/pages/servers/manage/[id]/options/info.vue

@@ -115,10 +115,11 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled, CopyCode } from "@modrinth/ui";
 import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from "@modrinth/assets";
+import { ButtonStyled, CopyCode, injectNotificationManager } from "@modrinth/ui";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
 const props = defineProps<{
   server: ModrinthServer;
 }>();

apps/frontend/src/pages/servers/manage/[id]/options/network.vue

@@ -264,19 +264,26 @@
 
 <script setup lang="ts">
 import {
-  PlusIcon,
-  TrashIcon,
   EditIcon,
-  VersionIcon,
-  SaveIcon,
   InfoIcon,
-  UploadIcon,
   IssuesIcon,
+  PlusIcon,
+  SaveIcon,
+  TrashIcon,
+  UploadIcon,
+  VersionIcon,
 } from "@modrinth/assets";
-import { ButtonStyled, NewModal, ConfirmModal, CopyCode } from "@modrinth/ui";
-import { ref, computed, nextTick } from "vue";
+import {
+  ButtonStyled,
+  ConfirmModal,
+  CopyCode,
+  injectNotificationManager,
+  NewModal,
+} from "@modrinth/ui";
+import { computed, nextTick, ref } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
 const props = defineProps<{
   server: ModrinthServer;
 }>();
@@ -317,7 +324,6 @@ const addNewAllocation = async () => {
     newAllocationName.value = "";
 
     addNotification({
-      group: "serverOptions",
       type: "success",
       title: "Allocation reserved",
       text: "Your allocation has been reserved.",
@@ -359,7 +365,6 @@ const confirmDeleteAllocation = async () => {
   await props.server.refresh(["network"]);
 
   addNotification({
-    group: "serverOptions",
     type: "success",
     title: "Allocation removed",
     text: "Your allocation has been removed.",
@@ -379,7 +384,6 @@ const editAllocation = async () => {
     newAllocationName.value = "";
 
     addNotification({
-      group: "serverOptions",
       type: "success",
       title: "Allocation updated",
       text: "Your allocation has been updated.",
@@ -397,7 +401,6 @@ const saveNetwork = async () => {
     const available = await props.server.network?.checkSubdomainAvailability(serverSubdomain.value);
     if (!available) {
       addNotification({
-        group: "serverOptions",
         type: "error",
         title: "Subdomain not available",
         text: "The subdomain you entered is already in use.",
@@ -416,7 +419,6 @@ const saveNetwork = async () => {
     await new Promise((resolve) => setTimeout(resolve, 500));
     await props.server.refresh();
     addNotification({
-      group: "serverOptions",
       type: "success",
       title: "Server settings updated",
       text: "Your server settings were successfully changed.",
@@ -424,7 +426,6 @@ const saveNetwork = async () => {
   } catch (error) {
     console.error(error);
     addNotification({
-      group: "serverOptions",
       type: "error",
       title: "Failed to update server settings",
       text: "An error occurred while attempting to update your server settings.",
@@ -483,7 +484,6 @@ const exportDnsRecords = () => {
 const copyText = (text: string) => {
   navigator.clipboard.writeText(text);
   addNotification({
-    group: "serverOptions",
     type: "success",
     title: "Text copied",
     text: `${text} has been copied to your clipboard`,

apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue

@@ -42,9 +42,11 @@
 </template>
 
 <script setup lang="ts">
+import { injectNotificationManager } from "@modrinth/ui";
 import { useStorage } from "@vueuse/core";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
 const route = useNativeRoute();
 const serverId = route.params.id as string;
 
@@ -109,7 +111,6 @@ const hasUnsavedChanges = computed(() => {
 const savePreferences = () => {
   userPreferences.value = { ...newUserPreferences.value };
   addNotification({
-    group: "serverOptions",
     type: "success",
     title: "Preferences saved",
     text: "Your preferences have been saved.",

apps/frontend/src/pages/servers/manage/[id]/options/properties.vue

@@ -143,11 +143,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, inject } from "vue";
-import { EyeIcon, SearchIcon, IssuesIcon } from "@modrinth/assets";
+import { EyeIcon, IssuesIcon, SearchIcon } from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
 import Fuse from "fuse.js";
+import { computed, inject, ref, watch } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
 const props = defineProps<{
   server: ModrinthServer;
 }>();
@@ -281,7 +283,6 @@ const saveProperties = async () => {
     originalProperties.value = JSON.parse(JSON.stringify(liveProperties.value));
     await props.server.refresh();
     addNotification({
-      group: "serverOptions",
       type: "success",
       title: "Server properties updated",
       text: "Your server properties were successfully changed.",
@@ -289,7 +290,6 @@ const saveProperties = async () => {
   } catch (error) {
     console.error("Error updating server properties:", error);
     addNotification({
-      group: "serverOptions",
       type: "error",
       title: "Failed to update server properties",
       text: "An error occurred while attempting to update your server properties.",

apps/frontend/src/pages/servers/manage/[id]/options/startup.vue

@@ -112,10 +112,11 @@
 </template>
 
 <script setup lang="ts">
-import { UpdatedIcon, IssuesIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { IssuesIcon, UpdatedIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager } from "@modrinth/ui";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
 const props = defineProps<{
   server: ModrinthServer;
 }>();
@@ -199,7 +200,6 @@ async function saveStartup() {
     }
 
     addNotification({
-      group: "serverOptions",
       type: "success",
       title: "Server settings updated",
       text: "Your server settings were successfully changed.",
@@ -207,7 +207,6 @@ async function saveStartup() {
   } catch (error) {
     console.error(error);
     addNotification({
-      group: "serverOptions",
       type: "error",
       title: "Failed to update server arguments",
       text: "Please try again later.",