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/organization/[id]/settings/analytics.vue

@@ -16,8 +16,9 @@
 
 <script setup>
 import ChartDisplay from "~/components/ui/charts/ChartDisplay.vue";
+import { injectOrganizationContext } from "~/providers/organization-context.ts";
 
-const { projects } = inject("organizationContext");
+const { projects } = injectOrganizationContext();
 </script>
 
 <style scoped lang="scss">

apps/frontend/src/pages/organization/[id]/settings/index.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { Button, FileInput, Avatar, ConfirmModal } from "@modrinth/ui";
-import { UploadIcon, SaveIcon, TrashIcon } from "@modrinth/assets";
+import { SaveIcon, TrashIcon, UploadIcon } from "@modrinth/assets";
+import { Avatar, Button, ConfirmModal, FileInput, injectNotificationManager } from "@modrinth/ui";
+import { injectOrganizationContext } from "~/providers/organization-context.ts";
 
+const { addNotification } = injectNotificationManager();
 const {
   organization,
   refresh: refreshOrganization,
@@ -9,7 +11,7 @@ const {
   deleteIcon,
   patchIcon,
   patchOrganization,
-} = inject("organizationContext");
+} = injectOrganizationContext();
 
 const icon = ref(null);
 const deletedIcon = ref(false);
@@ -74,7 +76,6 @@ const onSaveChanges = useClientTry(async () => {
   await refreshOrganization();
 
   addNotification({
-    group: "main",
     title: "Organization updated",
     text: "Your organization has been updated.",
     type: "success",
@@ -88,7 +89,6 @@ const onDeleteOrganization = useClientTry(async () => {
   });
 
   addNotification({
-    group: "main",
     title: "Organization deleted",
     text: "Your organization has been deleted.",
     type: "success",

apps/frontend/src/pages/organization/[id]/settings/members.vue

@@ -220,19 +220,21 @@
 
 <script setup>
 import {
+  CrownIcon,
+  DropdownIcon,
   SaveIcon,
   TransferIcon,
   UserPlusIcon,
   UserXIcon as UserRemoveIcon,
-  DropdownIcon,
-  CrownIcon,
 } from "@modrinth/assets";
-import { Button, Badge, Avatar, Checkbox } from "@modrinth/ui";
+import { Avatar, Badge, Button, Checkbox, injectNotificationManager } from "@modrinth/ui";
 import { ref } from "vue";
 import { removeTeamMember } from "~/helpers/teams.js";
+import { injectOrganizationContext } from "~/providers/organization-context.ts";
 import { isPermission } from "~/utils/permissions.ts";
 
-const { organization, refresh: refreshOrganization, currentMember } = inject("organizationContext");
+const { addNotification } = injectNotificationManager();
+const { organization, refresh: refreshOrganization, currentMember } = injectOrganizationContext();
 
 const auth = await useAuth();
 
@@ -296,7 +298,6 @@ const onInviteTeamMember = useClientTry(async (teamId, username) => {
   await refreshOrganization();
   currentUsername.value = "";
   addNotification({
-    group: "main",
     title: "Member invited",
     text: `${user.username} has been invited to the organization.`,
     type: "success",
@@ -307,7 +308,6 @@ const onRemoveMember = useClientTry(async (teamId, member) => {
   await removeTeamMember(teamId, member.user.id);
   await refreshOrganization();
   addNotification({
-    group: "main",
     title: "Member removed",
     text: `${member.user.username} has been removed from the organization.`,
     type: "success",
@@ -332,7 +332,6 @@ const onUpdateTeamMember = useClientTry(async (teamId, member) => {
   });
   await refreshOrganization();
   addNotification({
-    group: "main",
     title: "Member updated",
     text: `${member.user.username} has been updated.`,
     type: "success",
@@ -349,7 +348,6 @@ const onTransferOwnership = useClientTry(async (teamId, uid) => {
   });
   await refreshOrganization();
   addNotification({
-    group: "main",
     title: "Ownership transferred",
     text: `The ownership of ${organization.value.name} has been successfully transferred.`,
     type: "success",

apps/frontend/src/pages/organization/[id]/settings/projects.vue

@@ -298,28 +298,38 @@
 </template>
 
 <script setup>
-import { Multiselect } from "vue-multiselect";
 import {
   BoxIcon,
-  SettingsIcon,
-  TrashIcon,
+  EditIcon,
   IssuesIcon,
   PlusIcon,
-  XIcon,
-  EditIcon,
   SaveIcon,
+  SettingsIcon,
   SortAscIcon,
   SortDescIcon,
+  TrashIcon,
+  XIcon,
 } from "@modrinth/assets";
-import { Button, Modal, Avatar, CopyCode, Badge, Checkbox, commonMessages } from "@modrinth/ui";
-
+import {
+  Avatar,
+  Badge,
+  Button,
+  Checkbox,
+  commonMessages,
+  CopyCode,
+  injectNotificationManager,
+  Modal,
+} from "@modrinth/ui";
 import { formatProjectType } from "@modrinth/utils";
+import { Multiselect } from "vue-multiselect";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
 import OrganizationProjectTransferModal from "~/components/ui/OrganizationProjectTransferModal.vue";
+import { injectOrganizationContext } from "~/providers/organization-context.ts";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
-const { organization, projects, refresh } = inject("organizationContext");
+const { organization, projects, refresh } = injectOrganizationContext();
 
 const auth = await useAuth();
 
@@ -375,14 +385,12 @@ const onProjectTransferSubmit = async (projects) => {
     await refreshUserProjects();
 
     addNotification({
-      group: "main",
       title: "Success",
       text: "Transferred selected projects to organization.",
       type: "success",
     });
   } catch (err) {
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err?.data?.description || err?.message || err || "Unknown error",
       type: "error",
@@ -511,7 +519,6 @@ const onBulkEditLinks = useClientTry(async () => {
   editLinksModal.value.hide();
 
   addNotification({
-    group: "main",
     title: "Success",
     text: "Bulk edited selected project's links.",
     type: "success",