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/dashboard/index.vue

@@ -99,7 +99,10 @@
 import { ChevronRightIcon, HistoryIcon } from "@modrinth/assets";
 import { Avatar } from "@modrinth/ui";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
-import { fetchExtraNotificationData, groupNotifications } from "~/helpers/notifications.ts";
+import {
+  fetchExtraNotificationData,
+  groupNotifications,
+} from "~/helpers/platform-notifications.ts";
 
 useHead({
   title: "Dashboard - Modrinth",

apps/frontend/src/pages/dashboard/notifications.vue

@@ -56,16 +56,16 @@
   </div>
 </template>
 <script setup>
-import { Button, Pagination, Chips } from "@modrinth/ui";
-import { HistoryIcon, CheckCheckIcon } from "@modrinth/assets";
+import { CheckCheckIcon, HistoryIcon } from "@modrinth/assets";
+import { Button, Chips, Pagination } from "@modrinth/ui";
 import { formatProjectType } from "@modrinth/utils";
+import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
+import NotificationItem from "~/components/ui/NotificationItem.vue";
 import {
   fetchExtraNotificationData,
   groupNotifications,
   markAsRead,
-} from "~/helpers/notifications.ts";
-import NotificationItem from "~/components/ui/NotificationItem.vue";
-import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
+} from "~/helpers/platform-notifications.ts";
 
 useHead({
   title: "Notifications - Modrinth",

apps/frontend/src/pages/dashboard/projects.vue

@@ -301,17 +301,16 @@
 </template>
 
 <script>
-import { Multiselect } from "vue-multiselect";
 import {
-  SettingsIcon,
-  TrashIcon,
-  PlusIcon,
-  XIcon,
-  IssuesIcon,
   EditIcon,
+  IssuesIcon,
+  PlusIcon,
   SaveIcon,
+  SettingsIcon,
   SortAscIcon,
   SortDescIcon,
+  TrashIcon,
+  XIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
@@ -320,8 +319,10 @@ import {
   CopyCode,
   ProjectStatusBadge,
   commonMessages,
+  injectNotificationManager,
 } from "@modrinth/ui";
 import { formatProjectType } from "@modrinth/utils";
+import { Multiselect } from "vue-multiselect";
 
 import Modal from "~/components/ui/Modal.vue";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
@@ -444,6 +445,8 @@ export default defineNuxtComponent({
       return sortedArray;
     },
     async bulkEditLinks() {
+      const { addNotification } = injectNotificationManager();
+
       try {
         const baseData = {
           issues_url: this.editLinks.issues.clear ? null : this.editLinks.issues.val.trim(),
@@ -477,8 +480,7 @@ export default defineNuxtComponent({
         );
 
         this.$refs.editLinksModal.hide();
-        this.$notify({
-          group: "main",
+        addNotification({
           title: "Success",
           text: "Bulk edited selected project's links.",
           type: "success",
@@ -494,8 +496,7 @@ export default defineNuxtComponent({
         this.editLinks.wiki.clear = false;
         this.editLinks.discord.clear = false;
       } catch (e) {
-        this.$notify({
-          group: "main",
+        addNotification({
           title: "An error occurred",
           text: e,
           type: "error",

apps/frontend/src/pages/dashboard/revenue/index.vue

@@ -149,10 +149,12 @@ import {
   UnknownIcon,
   XIcon,
 } from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
 import { formatDate } from "@modrinth/utils";
 import dayjs from "dayjs";
 import { computed } from "vue";
 
+const { addNotification } = injectNotificationManager();
 const auth = await useAuth();
 const minWithdraw = ref(0.01);
 
@@ -201,9 +203,7 @@ async function updateVenmo() {
     });
     await useAuth(auth.value.token);
   } catch (err) {
-    const data = useNuxtApp();
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",

apps/frontend/src/pages/dashboard/revenue/transfers.vue

@@ -94,13 +94,14 @@
   </div>
 </template>
 <script setup>
-import { XIcon, PayPalIcon, UnknownIcon } from "@modrinth/assets";
+import { PayPalIcon, UnknownIcon, XIcon } from "@modrinth/assets";
+import { Badge, Breadcrumbs, DropdownSelect, injectNotificationManager } from "@modrinth/ui";
 import { capitalizeString, formatWallet } from "@modrinth/utils";
-import { Badge, Breadcrumbs, DropdownSelect } from "@modrinth/ui";
 import dayjs from "dayjs";
 import TremendousIcon from "~/assets/images/external/tremendous.svg?component";
 import VenmoIcon from "~/assets/images/external/venmo-small.svg?component";
 
+const { addNotification } = injectNotificationManager();
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 
@@ -108,7 +109,6 @@ useHead({
   title: "Transfer history - Modrinth",
 });
 
-const data = await useNuxtApp();
 const auth = await useAuth();
 
 const { data: payouts, refresh } = await useAsyncData(`payout`, () =>
@@ -155,8 +155,7 @@ async function cancelPayout(id) {
     await refresh();
     await useAuth(auth.value.token);
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",

apps/frontend/src/pages/dashboard/revenue/withdraw.vue

@@ -187,20 +187,21 @@
 </template>
 
 <script setup>
-import { Multiselect } from "vue-multiselect";
 import {
   PayPalIcon,
-  SearchIcon,
-  RadioButtonIcon,
   RadioButtonCheckedIcon,
-  XIcon,
+  RadioButtonIcon,
+  SearchIcon,
   TransferIcon,
+  XIcon,
 } from "@modrinth/assets";
-import { Chips, Checkbox, Breadcrumbs } from "@modrinth/ui";
-import { all } from "iso-3166-1";
+import { Breadcrumbs, Checkbox, Chips, injectNotificationManager } from "@modrinth/ui";
 import { formatMoney, formatWallet } from "@modrinth/utils";
+import { all } from "iso-3166-1";
+import { Multiselect } from "vue-multiselect";
 import VenmoIcon from "~/assets/images/external/venmo.svg?component";
 
+const { addNotification } = injectNotificationManager();
 const auth = await useAuth();
 const data = useNuxtApp();
 
@@ -355,8 +356,7 @@ async function withdraw() {
     });
     await useAuth(auth.value.token);
     await navigateTo("/dashboard/revenue");
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "Withdrawal complete",
       text:
         selectedMethod.value.type === "tremendous"
@@ -365,8 +365,7 @@ async function withdraw() {
       type: "success",
     });
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",