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>
2025-08-13 21:48:52 +01:00
parent 9ea43a12fd
commit b81e727204
136 changed files with 2024 additions and 1719 deletions
--- a/apps/frontend/src/components/ui/servers/BackupCreateModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupCreateModal.vue
@@ -42,12 +42,14 @@
 </template>

 <script setup lang="ts">
-import { ref, nextTick, computed } from "vue";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { IssuesIcon, PlusIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager, NewModal } from "@modrinth/ui";
 import { ModrinthServersFetchError, type ServerBackup } from "@modrinth/utils";
+import { computed, nextTick, ref } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
  server: ModrinthServer;
 }>();
--- a/apps/frontend/src/components/ui/servers/BackupRenameModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupRenameModal.vue
@@ -45,12 +45,14 @@
 </template>

 <script setup lang="ts">
-import { ref, nextTick, computed } from "vue";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { SpinnerIcon, SaveIcon, XIcon, IssuesIcon } from "@modrinth/assets";
+import { IssuesIcon, SaveIcon, SpinnerIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager, NewModal } from "@modrinth/ui";
 import type { Backup } from "@modrinth/utils";
+import { computed, nextTick, ref } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
  server: ModrinthServer;
 }>();
--- a/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue
@@ -17,12 +17,14 @@
 </template>

 <script setup lang="ts">
-import { ref } from "vue";
-import { ConfirmModal, NewModal } from "@modrinth/ui";
+import { ConfirmModal, injectNotificationManager, NewModal } from "@modrinth/ui";
 import type { Backup } from "@modrinth/utils";
+import { ref } from "vue";
 import BackupItem from "~/components/ui/servers/BackupItem.vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
  server: ModrinthServer;
 }>();
--- a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
@@ -56,11 +56,13 @@
 </template>

 <script setup lang="ts">
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { XIcon, SaveIcon } from "@modrinth/assets";
-import { ref, computed } from "vue";
+import { SaveIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager, NewModal } from "@modrinth/ui";
+import { computed, ref } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
  server: ModrinthServer;
 }>();
@@ -110,7 +112,6 @@ const fetchSettings = async () => {
  } catch (error) {
    console.error("Error fetching backup settings:", error);
    addNotification({
-      group: "server",
      title: "Error",
      text: "Failed to load backup settings",
      type: "error",
@@ -135,7 +136,6 @@ const saveSettings = async () => {
    };

    addNotification({
-      group: "server",
      title: "Success",
      text: "Backup settings updated successfully",
      type: "success",
@@ -145,7 +145,6 @@ const saveSettings = async () => {
  } catch (error) {
    console.error("Error saving backup settings:", error);
    addNotification({
-      group: "server",
      title: "Error",
      text: "Failed to save backup settings",
      type: "error",
--- a/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
@@ -101,11 +101,13 @@
 </template>

 <script setup lang="ts">
-import { FolderOpenIcon, CheckCircleIcon, XCircleIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
-import { ref, computed, watch, nextTick } from "vue";
+import { CheckCircleIcon, FolderOpenIcon, XCircleIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager } from "@modrinth/ui";
+import { computed, nextTick, ref, watch } from "vue";
 import { FSModule } from "~/composables/servers/modules/fs.ts";

+const { addNotification } = injectNotificationManager();
+
 interface UploadItem {
  file: File;
  progress: number;
@@ -282,7 +284,6 @@ const uploadFile = async (file: File) => {

    if (error instanceof Error && error.message !== "Upload cancelled") {
      addNotification({
-        group: "files",
        title: "Upload failed",
        text: `Failed to upload ${file.name}`,
        type: "error",
--- a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
@@ -67,11 +67,13 @@
 </template>

 <script setup lang="ts">
-import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { DownloadIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager, NewModal } from "@modrinth/ui";
 import { ModrinthServersFetchError } from "@modrinth/utils";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
  server: ModrinthServer;
  project: any;
@@ -112,14 +114,12 @@ const handleReinstall = async () => {
  } catch (error) {
    if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
      addNotification({
-        group: "server",
        title: "Cannot reinstall server",
        text: "You are being rate limited. Please try again later.",
        type: "error",
      });
    } else {
      addNotification({
-        group: "server",
        title: "Reinstall Failed",
        text: "An unexpected error occurred while reinstalling. Please try again later.",
        type: "error",
--- a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
@@ -144,18 +144,20 @@
 </template>

 <script setup lang="ts">
-import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
 import {
-  UploadIcon,
-  RightArrowIcon,
-  XIcon,
-  ServerIcon,
  ArrowBigRightDashIcon,
+  RightArrowIcon,
+  ServerIcon,
+  UploadIcon,
+  XIcon,
 } from "@modrinth/assets";
+import { BackupWarning, ButtonStyled, injectNotificationManager, NewModal } from "@modrinth/ui";
 import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
 import { onMounted, onUnmounted } from "vue";
-import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
 import type { ModrinthServer } from "~/composables/servers/modrinth-servers";
+import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+
+const { addNotification } = injectNotificationManager();

 const handleBeforeUnload = (event: BeforeUnloadEvent) => {
  if (isLoading.value) {
@@ -250,7 +252,6 @@ const handleReinstall = async () => {

  if (!mrpackFile.value) {
    addNotification({
-      group: "server",
      title: "No file selected",
      text: "Choose a .mrpack file before installing.",
      type: "error",
@@ -301,14 +302,12 @@ const handleReinstall = async () => {
  } catch (error) {
    if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
      addNotification({
-        group: "server",
        title: "Cannot upload and install modpack to server",
        text: "You are being rate limited. Please try again later.",
        type: "error",
      });
    } else {
      addNotification({
-        group: "server",
        title: "Modpack upload and install failed",
        text: "An unexpected error occurred while uploading/installing. Please try again later.",
        type: "error",
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
@@ -197,13 +197,20 @@
 </template>

 <script setup lang="ts">
-import { BackupWarning, ButtonStyled, NewModal, Toggle } from "@modrinth/ui";
 import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from "@modrinth/assets";
-import { $fetch } from "ofetch";
+import {
+  BackupWarning,
+  ButtonStyled,
+  injectNotificationManager,
+  NewModal,
+  Toggle,
+} from "@modrinth/ui";
 import { type Loaders, ModrinthServersFetchError } from "@modrinth/utils";
-import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import { $fetch } from "ofetch";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";

+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();

 interface LoaderVersion {
@@ -475,14 +482,12 @@ const handleReinstall = async () => {
  } catch (error) {
    if (error instanceof ModrinthServersFetchError && (error as any)?.statusCode === 429) {
      addNotification({
-        group: "server",
        title: "Cannot reinstall server",
        text: "You are being rate limited. Please try again later.",
        type: "error",
      });
    } else {
      addNotification({
-        group: "server",
        title: "Reinstall Failed",
        text: "An unexpected error occurred while reinstalling. Please try again later.",
        type: "error",
--- a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
@@ -20,8 +20,11 @@

 <script setup lang="ts">
 import { LinkIcon } from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
 import { useStorage } from "@vueuse/core";

+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
  subdomain: string;
  noSeparator?: boolean;
@@ -30,7 +33,6 @@ const props = defineProps<{
 const copySubdomain = () => {
  navigator.clipboard.writeText(props.subdomain + ".modrinth.gg");
  addNotification({
-    group: "servers",
    title: "Custom URL copied",
    text: "Your server's URL has been copied to your clipboard.",
    type: "success",
--- a/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
+++ b/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { Accordion, ButtonStyled, NewModal, ServerNotice, TagItem } from "@modrinth/ui";
 import { PlusIcon, XIcon } from "@modrinth/assets";
-import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
+import {
+  Accordion,
+  ButtonStyled,
+  injectNotificationManager,
+  NewModal,
+  ServerNotice,
+  TagItem,
+} from "@modrinth/ui";
+import { type ServerNotice as ServerNoticeType } from "@modrinth/utils";
 import { ref } from "vue";
 import { useServersFetch } from "~/composables/servers/servers-fetch.ts";

-const app = useNuxtApp() as unknown as { $notify: any };
+const { addNotification } = injectNotificationManager();

 const modal = ref<InstanceType<typeof NewModal>>();

@@ -39,16 +46,14 @@ async function assign(server: boolean = true) {
        method: "PUT",
      },
    ).catch((err) => {
-      app.$notify({
-        group: "main",
+      addNotification({
        title: "Error assigning notice",
        text: err,
        type: "error",
      });
    });
  } else {
-    app.$notify({
-      group: "main",
+    addNotification({
      title: "Error assigning notice",
      text: "No server or node specified",
      type: "error",
@@ -64,8 +69,7 @@ async function unassignDetect() {
  const node = assignedNodes.value.some((assigned) => assigned.id === input);

  if (!server && !node) {
-    app.$notify({
-      group: "main",
+    addNotification({
      title: "Error unassigning notice",
      text: "ID is not an assigned server or node",
      type: "error",
@@ -84,8 +88,7 @@ async function unassign(id: string, server: boolean = true) {
        method: "PUT",
      },
    ).catch((err) => {
-      app.$notify({
-        group: "main",
+      addNotification({
        title: "Error unassigning notice",
        text: err,
        type: "error",