From 3714375c867f7a298c916b13e442b9a71f9d452c Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Wed, 30 Jul 2025 12:48:08 +0100
Subject: [PATCH 01/14] feat: migrate frontend notifications to dependency
 injection based notificaton manager

---
 .vscode/settings.json                         |   4 +-
 apps/frontend/src/app.vue                     |   7 +-
 .../components/ui/CollectionCreateModal.vue   |   3 +-
 .../src/components/ui/ModalCreation.vue       |  10 +-
 .../src/components/ui/NotificationItem.vue    |  27 +---
 .../components/ui/OrganizationCreateModal.vue |   4 +-
 .../src/components/ui/ProjectMemberHeader.vue |  16 +-
 .../moderation/ModerationDelphiReportCard.vue |  23 +--
 .../ui/moderation/ModerationReportCard.vue    |  23 +--
 .../checklist/ModerationChecklist.vue         |  67 ++++----
 .../ui/servers/BackupCreateModal.vue          |   6 +-
 .../ui/servers/BackupRenameModal.vue          |   8 +-
 .../ui/servers/BackupRestoreModal.vue         |   6 +-
 .../ui/servers/BackupSettingsModal.vue        |  11 +-
 .../ui/servers/FilesUploadDropdown.vue        |   9 +-
 .../PlatformChangeModpackVersionModal.vue     |   6 +-
 .../ui/servers/PlatformMrpackModal.vue        |  15 +-
 .../ui/servers/PlatformVersionSelectModal.vue |  15 +-
 .../ui/servers/ServerSubdomainLabel.vue       |   4 +-
 .../ui/servers/notice/AssignNoticeModal.vue   |  25 +--
 .../ui/thread/ConversationThread.vue          |  29 ++--
 .../src/components/ui/thread/ReportThread.vue |  10 +-
 apps/frontend/src/composables/auth.js         |   7 +-
 apps/frontend/src/composables/notifs.js       |  38 -----
 .../src/composables/use-client-try.ts         |   4 +-
 apps/frontend/src/composables/user.js         |  10 +-
 ...fications.ts => platform-notifications.ts} |   7 +-
 apps/frontend/src/layouts/default.vue         |  78 +++++----
 apps/frontend/src/pages/[type]/[id].vue       |  35 ++--
 .../src/pages/[type]/[id]/gallery.vue         |  41 ++---
 .../src/pages/[type]/[id]/moderation.vue      |   9 +-
 .../src/pages/[type]/[id]/settings/index.vue  |   8 +-
 .../pages/[type]/[id]/settings/members.vue    |  29 ++--
 .../src/pages/[type]/[id]/settings/tags.vue   |   7 +-
 .../pages/[type]/[id]/version/[version].vue   |  75 ++++-----
 .../frontend/src/pages/admin/billing/[id].vue |  23 +--
 .../src/pages/admin/servers/notices.vue       |  33 ++--
 apps/frontend/src/pages/admin/user_email.vue  |   5 +-
 apps/frontend/src/pages/auth/authorize.vue    |  13 +-
 .../src/pages/auth/reset-password.vue         |   9 +-
 apps/frontend/src/pages/auth/sign-in.vue      |  17 +-
 apps/frontend/src/pages/auth/sign-up.vue      |  19 ++-
 apps/frontend/src/pages/collection/[id].vue   |  10 +-
 apps/frontend/src/pages/dashboard/index.vue   |   2 +-
 .../src/pages/dashboard/notifications.vue     |   2 +-
 .../frontend/src/pages/dashboard/projects.vue |  21 +--
 .../src/pages/dashboard/revenue/index.vue     |   6 +-
 .../src/pages/dashboard/revenue/transfers.vue |   8 +-
 .../src/pages/dashboard/revenue/withdraw.vue  |  19 ++-
 .../organization/[id]/settings/index.vue      |   7 +-
 .../organization/[id]/settings/members.vue    |  11 +-
 .../organization/[id]/settings/projects.vue   |  26 +--
 apps/frontend/src/pages/plus.vue              |  11 +-
 apps/frontend/src/pages/report.vue            |  37 ++---
 apps/frontend/src/pages/servers/index.vue     |  21 +--
 .../src/pages/servers/manage/[id].vue         |  41 ++---
 .../src/pages/servers/manage/[id]/backups.vue |  19 ++-
 .../servers/manage/[id]/content/index.vue     |  25 +--
 .../src/pages/servers/manage/[id]/files.vue   |  39 ++---
 .../servers/manage/[id]/options/index.vue     |  11 +-
 .../servers/manage/[id]/options/info.vue      |   3 +-
 .../servers/manage/[id]/options/network.vue   |  28 ++--
 .../manage/[id]/options/preferences.vue       |   3 +-
 .../manage/[id]/options/properties.vue        |   8 +-
 .../servers/manage/[id]/options/startup.vue   |   7 +-
 apps/frontend/src/pages/settings/account.vue  |  31 ++--
 .../src/pages/settings/applications.vue       |  27 ++--
 .../src/pages/settings/authorizations.vue     |  14 +-
 .../src/pages/settings/billing/index.vue      |  75 ++++-----
 apps/frontend/src/pages/settings/index.vue    |   4 +-
 apps/frontend/src/pages/settings/pats.vue     |  23 ++-
 apps/frontend/src/pages/settings/profile.vue  |  10 +-
 apps/frontend/src/pages/settings/sessions.vue |  11 +-
 apps/frontend/src/plugins/shorthands.js       |   1 -
 .../src/providers/web-notifications.ts        |  44 +++++
 packages/ui/index.ts                          |   1 +
 .../ui/src/components/base/Notifications.vue  | 152 ------------------
 packages/ui/src/components/index.ts           |   1 +
 .../src/components/nav/NotificationPanel.vue  |  98 +++++------
 packages/ui/src/providers/index.ts            |  81 ++++++++++
 .../ui/src/providers/web-notifications.ts     | 111 +++++++++++++
 81 files changed, 932 insertions(+), 912 deletions(-)
 delete mode 100644 apps/frontend/src/composables/notifs.js
 rename apps/frontend/src/helpers/{notifications.ts => platform-notifications.ts} (97%)
 create mode 100644 apps/frontend/src/providers/web-notifications.ts
 delete mode 100644 packages/ui/src/components/base/Notifications.vue
 rename apps/frontend/src/components/ui/Notifications.vue => packages/ui/src/components/nav/NotificationPanel.vue (74%)
 create mode 100644 packages/ui/src/providers/index.ts
 create mode 100644 packages/ui/src/providers/web-notifications.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9caec96a4c..c900f4ec03 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,6 +4,8 @@
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "editor.detectIndentation": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "always",
+    "source.sortImports": "always"
   }
 }
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index ebd9fa5606..a1325645b2 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -1,11 +1,14 @@
 <template>
   <NuxtLayout>
     <ModrinthLoadingIndicator />
-    <Notifications />
+    <NotificationPanel />
     <NuxtPage />
   </NuxtLayout>
 </template>
 <script setup lang="ts">
+import { NotificationPanel, provideNotificationManager } from "@modrinth/ui";
 import ModrinthLoadingIndicator from "~/components/ui/modrinth-loading-indicator.ts";
-import Notifications from "~/components/ui/Notifications.vue";
+import { FrontendNotificationManager } from "./providers/web-notifications";
+
+provideNotificationManager(new FrontendNotificationManager());
 </script>
diff --git a/apps/frontend/src/components/ui/CollectionCreateModal.vue b/apps/frontend/src/components/ui/CollectionCreateModal.vue
index 02b0756077..ca34868f70 100644
--- a/apps/frontend/src/components/ui/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/CollectionCreateModal.vue
@@ -51,7 +51,9 @@
 <script setup>
 import { PlusIcon, XIcon } from "@modrinth/assets";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { injectNotificationManager } from "@modrinth/ui";
 
+const { addNotification } = injectNotificationManager();
 const router = useNativeRouter();
 
 const name = ref("");
@@ -87,7 +89,6 @@ async function create() {
     await router.push(`/collection/${result.id}`);
   } catch (err) {
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err?.data?.description || err?.message || err,
       type: "error",
diff --git a/apps/frontend/src/components/ui/ModalCreation.vue b/apps/frontend/src/components/ui/ModalCreation.vue
index bfc5b140f6..7e5f6ee877 100644
--- a/apps/frontend/src/components/ui/ModalCreation.vue
+++ b/apps/frontend/src/components/ui/ModalCreation.vue
@@ -84,8 +84,11 @@
 </template>
 
 <script setup>
-import { NewModal, ButtonStyled, DropdownSelect } from "@modrinth/ui";
-import { XIcon, PlusIcon } from "@modrinth/assets";
+import { PlusIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, DropdownSelect, NewModal } from "@modrinth/ui";
+import { injectNotificationManager } from "@modrinth/ui";
+
+const { addNotification } = injectNotificationManager();
 
 const router = useRouter();
 const app = useNuxtApp();
@@ -180,8 +183,7 @@ async function createProject() {
       },
     });
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 4a293684a3..d8235b3717 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -319,26 +319,17 @@
 </template>
 
 <script setup>
-import { renderString } from "@modrinth/utils";
 import {
-  UserPlusIcon,
-  ScaleIcon,
   BellIcon,
-  CheckCircleIcon,
   CalendarIcon,
-  VersionIcon,
+  CheckCircleIcon,
   CheckIcon,
-  XIcon,
   ExternalIcon,
-} from "@modrinth/assets";
-import { Avatar, ProjectStatusBadge, CopyCode, useRelativeTime } from "@modrinth/ui";
-import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
-import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
-import { getUserLink } from "~/helpers/users.js";
-import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
-import { markAsRead } from "~/helpers/notifications.ts";
-import DoubleIcon from "~/components/ui/DoubleIcon.vue";
-import Categories from "~/components/ui/search/Categories.vue";
+  ScaleIcon,
+  UserPlusIcon,
+  VersionIcon,
+  XIcon,
+} from "@modrinth/ars.js";
 
 const app = useNuxtApp();
 const emit = defineEmits(["update:notifications"]);
@@ -407,8 +398,7 @@ async function read() {
     const newNotifs = updateNotifs(props.notifications);
     emit("update:notifications", newNotifs);
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error marking notification as read",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -427,8 +417,7 @@ async function performAction(notification, actionIndex) {
       });
     }
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/components/ui/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/OrganizationCreateModal.vue
index c9e9666360..bbe42d3692 100644
--- a/apps/frontend/src/components/ui/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationCreateModal.vue
@@ -71,10 +71,11 @@
   </NewModal>
 </template>
 <script setup>
-import { XIcon, PlusIcon } from "@modrinth/assets";
+import { PlusIcon, XIcon } from "@modrinth/assets";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 
 const router = useNativeRouter();
+const { addNotification } = injectNotificationManager();
 
 const name = ref("");
 const slug = ref("");
@@ -104,7 +105,6 @@ async function createOrganization() {
   } catch (err) {
     console.error(err);
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/components/ui/ProjectMemberHeader.vue b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
index 9bef208591..d3430d42a2 100644
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -109,18 +109,21 @@
 
 <script setup>
 import {
-  ChevronRightIcon,
-  CheckIcon,
-  XIcon,
   AsteriskIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  DropdownIcon,
   LightBulbIcon,
-  SendIcon,
   ScaleIcon,
-  DropdownIcon,
+  SendIcon,
+  XIcon,
 } from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
 import { formatProjectType } from "@modrinth/utils";
 import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
 
+const { addNotification } = injectNotificationManager();
+
 const props = defineProps({
   project: {
     type: Object,
@@ -165,7 +168,6 @@ const props = defineProps({
     default() {
       return () => {
         addNotification({
-          group: "main",
           title: "An error occurred",
           text: "setProcessing function not found",
           type: "error",
@@ -178,7 +180,6 @@ const props = defineProps({
     default() {
       return () => {
         addNotification({
-          group: "main",
           title: "An error occurred",
           text: "toggleCollapsed function not found",
           type: "error",
@@ -191,7 +192,6 @@ const props = defineProps({
     default() {
       return () => {
         addNotification({
-          group: "main",
           title: "An error occurred",
           text: "updateMembers function not found",
           type: "error",
diff --git a/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue
index 961f340a34..7801fd77fa 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue
@@ -118,22 +118,25 @@
 </template>
 
 <script setup lang="ts">
-import dayjs from "dayjs";
-import {
-  Avatar,
-  useRelativeTime,
-  OverflowMenu,
-  type OverflowMenuOption,
-  ButtonStyled,
-} from "@modrinth/ui";
 import {
+  ClipboardCopyIcon,
   EllipsisVerticalIcon,
-  OrganizationIcon,
   EyeIcon,
-  ClipboardCopyIcon,
   LinkIcon,
+  OrganizationIcon,
 } from "@modrinth/assets";
 import type { ExtendedDelphiReport } from "@modrinth/moderation";
+import {
+  Avatar,
+  ButtonStyled,
+  injectNotificationManager,
+  OverflowMenu,
+  useRelativeTime,
+  type OverflowMenuOption,
+} from "@modrinth/ui";
+import dayjs from "dayjs";
+
+const { addNotification } = injectNotificationManager();
 
 const props = defineProps<{
   report: ExtendedDelphiReport;
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 499b1d381a..4867e39a6c 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -135,28 +135,31 @@
 </template>
 <script setup lang="ts">
 import {
-  Avatar,
-  useRelativeTime,
-  OverflowMenu,
-  type OverflowMenuOption,
-  CollapsibleRegion,
-  ButtonStyled,
-} from "@modrinth/ui";
-import {
+  ClipboardCopyIcon,
   EllipsisVerticalIcon,
-  OrganizationIcon,
   EyeIcon,
-  ClipboardCopyIcon,
   LinkIcon,
+  OrganizationIcon,
 } from "@modrinth/assets";
 import {
   type ExtendedReport,
   reportQuickReplies,
   type ReportQuickReply,
 } from "@modrinth/moderation";
+import {
+  Avatar,
+  ButtonStyled,
+  CollapsibleRegion,
+  injectNotificationManager,
+  OverflowMenu,
+  type OverflowMenuOption,
+  useRelativeTime,
+} from "@modrinth/ui";
 import ChevronDownIcon from "../servers/icons/ChevronDownIcon.vue";
 import ReportThread from "../thread/ReportThread.vue";
 
+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
   report: ExtendedReport;
 }>();
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index d456c5b8b2..f43d6226c8 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -313,64 +313,65 @@
 
 <script lang="ts" setup>
 import {
-  LeftArrowIcon,
-  RightArrowIcon,
-  DropdownIcon,
-  XIcon,
-  ScaleIcon,
-  ListBulletedIcon,
-  FileTextIcon,
   BrushCleaningIcon,
   CheckIcon,
-  KeyboardIcon,
+  DropdownIcon,
   EyeOffIcon,
+  FileTextIcon,
+  KeyboardIcon,
+  LeftArrowIcon,
+  ListBulletedIcon,
+  RightArrowIcon,
+  ScaleIcon,
+  XIcon,
 } from "@modrinth/assets";
 import {
+  type Action,
+  type ButtonAction,
+  type ConditionalButtonAction,
+  type DropdownAction,
+  type MultiSelectChipsAction,
+  type Stage,
+  type ToggleAction,
   checklist,
+  deserializeActionStates,
+  expandVariables,
+  finalPermissionMessages,
+  findMatchingVariant,
+  flattenProjectVariables,
   getActionIdForStage,
-  initializeActionState,
   getActionMessage,
-  findMatchingVariant,
-  processMessage,
   getVisibleInputs,
-  serializeActionStates,
-  deserializeActionStates,
-  kebabToTitleCase,
-  flattenProjectVariables,
-  expandVariables,
   handleKeybind,
+  initializeActionState,
+  kebabToTitleCase,
   keybinds,
+  processMessage,
+  serializeActionStates,
 } from "@modrinth/moderation";
 import {
   ButtonStyled,
-  Collapsible,
-  OverflowMenu,
-  type OverflowMenuOption,
   Checkbox,
+  Collapsible,
   DropdownSelect,
   MarkdownEditor,
+  OverflowMenu,
+  type OverflowMenuOption,
+  injectNotificationManager,
 } from "@modrinth/ui";
 import {
-  type Project,
-  renderHighlightedString,
   type ModerationJudgements,
   type ModerationModpackItem,
+  type Project,
+  renderHighlightedString,
 } from "@modrinth/utils";
 import { computedAsync, useLocalStorage } from "@vueuse/core";
-import {
-  type Action,
-  type MultiSelectChipsAction,
-  type DropdownAction,
-  type ButtonAction,
-  type ToggleAction,
-  type ConditionalButtonAction,
-  type Stage,
-  finalPermissionMessages,
-} from "@modrinth/moderation";
 import * as prettier from "prettier";
-import ModpackPermissionsFlow from "./ModpackPermissionsFlow.vue";
-import KeybindsModal from "./ChecklistKeybindsModal.vue";
 import { useModerationStore } from "~/store/moderation.ts";
+import KeybindsModal from "./ChecklistKeybindsModal.vue";
+import ModpackPermissionsFlow from "./ModpackPermissionsFlow.vue";
+
+const { addNotification } = injectNotificationManager();
 
 const keybindsModal = ref<InstanceType<typeof KeybindsModal>>();
 
diff --git a/apps/frontend/src/components/ui/servers/BackupCreateModal.vue b/apps/frontend/src/components/ui/servers/BackupCreateModal.vue
index 427142a588..9e6f39df6a 100644
--- 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;
 }>();
diff --git a/apps/frontend/src/components/ui/servers/BackupRenameModal.vue b/apps/frontend/src/components/ui/servers/BackupRenameModal.vue
index d5db4ba32c..e4aae9c220 100644
--- 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;
 }>();
diff --git a/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue b/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue
index b77c5f4c7e..97d6585f59 100644
--- 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;
 }>();
diff --git a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
index fe4c32bbcc..8556e246c6 100644
--- 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",
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue b/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
index 001b6624a3..abbc6ef786 100644
--- 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",
diff --git a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
index 853b83c6d7..89d7a5a31c 100644
--- 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",
diff --git a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
index a9810f4f11..dc403df86a 100644
--- 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,
+  ArrowBigRightDashIcon,
   RightArrowIcon,
-  XIcon,
   ServerIcon,
-  ArrowBigRightDashIcon,
+  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",
diff --git a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
index 1ed8a61476..43f6f4f706 100644
--- 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",
diff --git a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
index d27d44b9f9..48b9d252c6 100644
--- 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",
diff --git a/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue b/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
index 4b10b7a43b..f36326ed33 100644
--- 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",
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index 13be399cd0..7a3d5f6b6e 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -251,23 +251,25 @@
 </template>
 
 <script setup>
-import { CopyCode, OverflowMenu, MarkdownEditor } from "@modrinth/ui";
 import {
+  CheckCircleIcon,
+  CheckIcon,
   DropdownIcon,
+  EyeOffIcon,
   ReplyIcon,
+  ScaleIcon,
   SendIcon,
-  CheckCircleIcon,
   XIcon,
-  EyeOffIcon,
-  CheckIcon,
-  ScaleIcon,
 } from "@modrinth/assets";
-import { useImageUpload } from "~/composables/image-upload.ts";
+import { CopyCode, MarkdownEditor, OverflowMenu, injectNotificationManager } from "@modrinth/ui";
+import Checkbox from "~/components/ui/Checkbox.vue";
+import Modal from "~/components/ui/Modal.vue";
 import ThreadMessage from "~/components/ui/thread/ThreadMessage.vue";
-import { isStaff } from "~/helpers/users.js";
+import { useImageUpload } from "~/composables/image-upload.ts";
 import { isApproved, isRejected } from "~/helpers/projects.js";
-import Modal from "~/components/ui/Modal.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
+import { isStaff } from "~/helpers/users.js";
+
+const { addNotification } = injectNotificationManager();
 
 const props = defineProps({
   thread: {
@@ -388,8 +390,7 @@ async function sendReply(status = null, privateMessage = false) {
       props.setStatus(status);
     }
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error sending message",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -411,8 +412,7 @@ async function closeReport(reply) {
     });
     await updateThreadLocal();
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error closing report",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -430,8 +430,7 @@ async function reopenReport() {
     });
     await updateThreadLocal();
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error reopening report",
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/components/ui/thread/ReportThread.vue b/apps/frontend/src/components/ui/thread/ReportThread.vue
index 83875029d1..99c885d154 100644
--- a/apps/frontend/src/components/ui/thread/ReportThread.vue
+++ b/apps/frontend/src/components/ui/thread/ReportThread.vue
@@ -110,13 +110,15 @@
 </template>
 
 <script setup lang="ts">
-import { CopyCode, MarkdownEditor, ButtonStyled } from "@modrinth/ui";
-import { ReplyIcon, SendIcon, CheckCircleIcon, ScaleIcon } from "@modrinth/assets";
-import type { Thread, Report, User, ThreadMessage as TypeThreadMessage } from "@modrinth/utils";
+import { CheckCircleIcon, ReplyIcon, ScaleIcon, SendIcon } from "@modrinth/assets";
+import { ButtonStyled, CopyCode, injectNotificationManager, MarkdownEditor } from "@modrinth/ui";
+import type { Report, Thread, ThreadMessage as TypeThreadMessage, User } from "@modrinth/utils";
 import dayjs from "dayjs";
-import ThreadMessage from "./ThreadMessage.vue";
 import { useImageUpload } from "~/composables/image-upload.ts";
 import { isStaff } from "~/helpers/users.js";
+import ThreadMessage from "./ThreadMessage.vue";
+
+const { addNotification } = injectNotificationManager();
 
 const props = defineProps<{
   thread: Thread;
diff --git a/apps/frontend/src/composables/auth.js b/apps/frontend/src/composables/auth.js
index 978a4d8443..784a62f794 100644
--- a/apps/frontend/src/composables/auth.js
+++ b/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",
diff --git a/apps/frontend/src/composables/notifs.js b/apps/frontend/src/composables/notifs.js
deleted file mode 100644
index 7ec7786c21..0000000000
--- a/apps/frontend/src/composables/notifs.js
+++ /dev/null
@@ -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);
-};
diff --git a/apps/frontend/src/composables/use-client-try.ts b/apps/frontend/src/composables/use-client-try.ts
index 697fcae341..300c71e72d 100644
--- a/apps/frontend/src/composables/use-client-try.ts
+++ b/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",
diff --git a/apps/frontend/src/composables/user.js b/apps/frontend/src/composables/user.js
index a4764b9034..8e1173d27e 100644
--- a/apps/frontend/src/composables/user.js
+++ b/apps/frontend/src/composables/user.js
@@ -1,3 +1,5 @@
+import { injectNotificationManager } from "@modrinth/ui";
+
 export const useUser = async (force = false) => {
   const user = useState("user", () => {});
 
@@ -135,7 +137,7 @@ export const userFollowProject = async (project) => {
   }
 };
 export const resendVerifyEmail = async () => {
-  const app = useNuxtApp();
+  const { addNotification } = injectNotificationManager();
 
   startLoading();
   try {
@@ -144,15 +146,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",
diff --git a/apps/frontend/src/helpers/notifications.ts b/apps/frontend/src/helpers/platform-notifications.ts
similarity index 97%
rename from apps/frontend/src/helpers/notifications.ts
rename to apps/frontend/src/helpers/platform-notifications.ts
index 789a07d302..e443a5236f 100644
--- a/apps/frontend/src/helpers/notifications.ts
+++ b/apps/frontend/src/helpers/platform-notifications.ts
@@ -1,4 +1,4 @@
-import { useNuxtApp } from "#imports";
+import { injectNotificationManager } from "@modrinth/ui";
 
 // TODO: There needs to be a standardized way to get these types, eg; @modrinth/types generated from api schema. Later problem.
 type Project = { id: string };
@@ -173,9 +173,8 @@ export async function markAsRead(
       return newNotifs;
     };
   } catch (err: any) {
-    const app: any = useNuxtApp();
-    app.$notify({
-      group: "main",
+    const { addNotification } = injectNotificationManager();
+    addNotification({
       title: "Error marking notification as read",
       text: err?.data?.description ?? err,
       type: "error",
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 0a118099c8..1cfc602ca0 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -666,65 +666,65 @@
 </template>
 <script setup>
 import {
-  ModrinthIcon,
   ArrowBigUpDashIcon,
+  BellIcon,
+  BlueskyIcon,
   BookmarkIcon,
-  ServerIcon,
-  LogInIcon,
-  DownloadIcon,
-  LibraryIcon,
-  XIcon,
-  IssuesIcon,
-  ReportIcon,
+  BoxIcon,
+  BracesIcon,
+  ChartIcon,
+  CollectionIcon,
   CompassIcon,
+  CurrencyIcon,
+  DiscordIcon,
+  DownloadIcon,
+  DropdownIcon,
+  GithubIcon,
+  GlassesIcon,
   HamburgerIcon,
-  SearchIcon,
-  BellIcon,
-  SettingsIcon,
   HomeIcon,
-  MoonIcon,
-  SunIcon,
-  PlugIcon,
-  PlusIcon,
-  DropdownIcon,
+  IssuesIcon,
+  LibraryIcon,
+  LogInIcon,
   LogOutIcon,
-  ChartIcon,
-  BoxIcon,
-  CollectionIcon,
+  MastodonIcon,
+  ModrinthIcon,
+  MoonIcon,
   OrganizationIcon,
-  UserIcon,
-  CurrencyIcon,
-  BracesIcon,
-  GlassesIcon,
-  PaintbrushIcon,
   PackageOpenIcon,
-  DiscordIcon,
-  BlueskyIcon,
-  TwitterIcon,
-  MastodonIcon,
-  GithubIcon,
+  PaintbrushIcon,
+  PlugIcon,
+  PlusIcon,
+  ReportIcon,
   ScaleIcon,
+  SearchIcon,
+  ServerIcon,
+  SettingsIcon,
+  SunIcon,
+  TwitterIcon,
+  UserIcon,
+  XIcon,
 } from "@modrinth/assets";
 import {
+  Avatar,
   Button,
   ButtonStyled,
+  commonMessages,
+  injectNotificationManager,
   OverflowMenu,
   PagewideBanner,
-  Avatar,
-  commonMessages,
 } from "@modrinth/ui";
 import { isAdmin, isStaff } from "@modrinth/utils";
-import { errors as generatedStateErrors } from "~/generated/state.json";
-
-import ModalCreation from "~/components/ui/ModalCreation.vue";
-import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
+import ModalCreation from "~/components/ui/ModalCreation.vue";
 import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
 import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.vue";
+import { errors as generatedStateErrors } from "~/generated/state.json";
+import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
-const app = useNuxtApp();
 const auth = await useAuth();
 const user = await useUser();
 
@@ -1079,15 +1079,13 @@ function developerModeIncrement() {
     developerModeCounter.value = 0;
     saveFeatureFlags();
     if (flags.value.developerMode) {
-      app.$notify({
-        group: "main",
+      addNotification({
         title: "Developer mode activated",
         text: "Developer mode has been enabled",
         type: "success",
       });
     } else {
-      app.$notify({
-        group: "main",
+      addNotification({
         title: "Developer mode deactivated",
         text: "Developer mode has been disabled",
         type: "success",
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 1dc0cfd6be..b079b4167d 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -890,6 +890,7 @@
 </template>
 
 <script setup>
+import { navigateTo } from "#app";
 import {
   BookmarkIcon,
   BookTextIcon,
@@ -906,6 +907,7 @@ import {
   HeartIcon,
   InfoIcon,
   LinkIcon as LinksIcon,
+  ModrinthIcon,
   MoreVerticalIcon,
   PlusIcon,
   ReportIcon,
@@ -917,13 +919,13 @@ import {
   UsersIcon,
   VersionIcon,
   WrenchIcon,
-  ModrinthIcon,
   XIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
   ButtonStyled,
   Checkbox,
+  injectNotificationManager,
   NewModal,
   OverflowMenu,
   PopoutMenu,
@@ -935,36 +937,37 @@ import {
   ProjectSidebarLinks,
   ProjectStatusBadge,
   ScrollablePanel,
-  TagItem,
   ServersPromo,
+  TagItem,
   useRelativeTime,
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
 import { formatCategory, formatProjectType, renderString } from "@modrinth/utils";
+import { useLocalStorage } from "@vueuse/core";
 import dayjs from "dayjs";
 import { Tooltip } from "floating-vue";
-import { useLocalStorage } from "@vueuse/core";
-import { navigateTo } from "#app";
 import Accordion from "~/components/ui/Accordion.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
+import ModerationChecklist from "~/components/ui/moderation/checklist/ModerationChecklist.vue";
 import NavStack from "~/components/ui/NavStack.vue";
 import NavStackItem from "~/components/ui/NavStackItem.vue";
 import NavTabs from "~/components/ui/NavTabs.vue";
 import ProjectMemberHeader from "~/components/ui/ProjectMemberHeader.vue";
-import { userCollectProject } from "~/composables/user.js";
-import { reportProject } from "~/utils/report-helpers.ts";
 import { saveFeatureFlags } from "~/composables/featureFlags.ts";
-import ModerationChecklist from "~/components/ui/moderation/checklist/ModerationChecklist.vue";
+import { userCollectProject } from "~/composables/user.js";
 import { useModerationStore } from "~/store/moderation.ts";
+import { reportProject } from "~/utils/report-helpers.ts";
 
 const data = useNuxtApp();
 const route = useNativeRoute();
 const config = useRuntimeConfig();
 const moderationStore = useModerationStore();
+const notifications = injectNotificationManager();
+const { addNotification } = notifications;
 
 const auth = await useAuth();
 const user = await useUser();
@@ -974,7 +977,6 @@ const flags = useFeatureFlags();
 const cosmetics = useCosmetics();
 
 const { formatMessage } = useVIntl();
-const { setVisible } = useNotificationRightwards();
 
 const settingsModal = ref();
 const downloadModal = ref();
@@ -1425,8 +1427,7 @@ async function setProcessing() {
 
     project.value.status = "processing";
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -1459,8 +1460,7 @@ async function patchProject(resData, quiet = false) {
 
     result = true;
     if (!quiet) {
-      data.$notify({
-        group: "main",
+      addNotification({
         title: "Project updated",
         text: "Your project has been updated.",
         type: "success",
@@ -1468,8 +1468,7 @@ async function patchProject(resData, quiet = false) {
       window.scrollTo({ top: 0, behavior: "smooth" });
     }
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -1498,15 +1497,13 @@ async function patchIcon(icon) {
     );
     await resetProject();
     result = true;
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "Project icon updated",
       text: "Your project's icon has been updated.",
       type: "success",
     });
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -1555,7 +1552,7 @@ const collapsedModerationChecklist = useLocalStorage("collapsed-moderation-check
 watch(
   showModerationChecklist,
   (newValue) => {
-    setVisible(newValue);
+    notifications.setNotificationsPanelRightwards(newValue);
   },
   { immediate: true },
 );
diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index 7b5327ed3d..d8cd923a49 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -278,26 +278,26 @@
 
 <script setup>
 import {
-  PlusIcon,
   CalendarIcon,
+  ContractIcon,
   EditIcon,
-  TrashIcon,
-  SaveIcon,
-  StarIcon,
-  XIcon,
-  RightArrowIcon,
-  LeftArrowIcon,
-  ExternalIcon,
   ExpandIcon,
-  ContractIcon,
-  UploadIcon,
-  InfoIcon,
+  ExternalIcon,
   ImageIcon,
+  InfoIcon,
+  LeftArrowIcon,
+  PlusIcon,
+  RightArrowIcon,
+  SaveIcon,
+  StarIcon,
   TransferIcon,
+  TrashIcon,
+  UploadIcon,
+  XIcon,
 } from "@modrinth/assets";
-import { ConfirmModal } from "@modrinth/ui";
-import FileInput from "~/components/ui/FileInput.vue";
+import { ConfirmModal, injectNotificationManager } from "@modrinth/ui";
 import DropArea from "~/components/ui/DropArea.vue";
+import FileInput from "~/components/ui/FileInput.vue";
 import Modal from "~/components/ui/Modal.vue";
 
 import { isPermission } from "~/utils/permissions.ts";
@@ -425,6 +425,8 @@ export default defineNuxtComponent({
       this.shouldPreventActions = true;
       startLoading();
 
+      const { addNotification } = injectNotificationManager();
+
       try {
         let url = `project/${this.project.id}/gallery?ext=${
           this.editFile
@@ -450,8 +452,7 @@ export default defineNuxtComponent({
 
         this.$refs.modal_edit_item.hide();
       } catch (err) {
-        this.$notify({
-          group: "main",
+        addNotification({
           title: "An error occurred",
           text: err.data ? err.data.description : err,
           type: "error",
@@ -465,6 +466,8 @@ export default defineNuxtComponent({
       this.shouldPreventActions = true;
       startLoading();
 
+      const { addNotification } = injectNotificationManager();
+
       try {
         let url = `project/${this.project.id}/gallery?url=${encodeURIComponent(
           this.project.gallery[this.editIndex].url,
@@ -487,8 +490,7 @@ export default defineNuxtComponent({
         await this.resetProject();
         this.$refs.modal_edit_item.hide();
       } catch (err) {
-        this.$notify({
-          group: "main",
+        addNotification({
           title: "An error occurred",
           text: err.data ? err.data.description : err,
           type: "error",
@@ -501,6 +503,8 @@ export default defineNuxtComponent({
     async deleteGalleryImage() {
       startLoading();
 
+      const { addNotification } = injectNotificationManager();
+
       try {
         await useBaseFetch(
           `project/${this.project.id}/gallery?url=${encodeURIComponent(
@@ -513,8 +517,7 @@ export default defineNuxtComponent({
 
         await this.resetProject();
       } catch (err) {
-        this.$notify({
-          group: "main",
+        addNotification({
           title: "An error occurred",
           text: err.data ? err.data.description : err,
           type: "error",
diff --git a/apps/frontend/src/pages/[type]/[id]/moderation.vue b/apps/frontend/src/pages/[type]/[id]/moderation.vue
index 0a299a1492..8927e15664 100644
--- a/apps/frontend/src/pages/[type]/[id]/moderation.vue
+++ b/apps/frontend/src/pages/[type]/[id]/moderation.vue
@@ -99,8 +99,8 @@
   </div>
 </template>
 <script setup>
-import { XIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
-import { Badge } from "@modrinth/ui";
+import { CheckIcon, IssuesIcon, XIcon } from "@modrinth/assets";
+import { Badge, injectNotificationManager } from "@modrinth/ui";
 import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
 import {
   getProjectLink,
@@ -111,6 +111,7 @@ import {
   isUnderReview,
 } from "~/helpers/projects.js";
 
+const { addNotification } = injectNotificationManager();
 const props = defineProps({
   project: {
     type: Object,
@@ -131,7 +132,6 @@ const props = defineProps({
   },
 });
 
-const app = useNuxtApp();
 const auth = await useAuth();
 
 const { data: thread } = await useAsyncData(`thread/${props.project.thread_id}`, () =>
@@ -153,8 +153,7 @@ async function setStatus(status) {
     await props.resetProject();
     thread.value = await useBaseFetch(`thread/${thread.value.id}`);
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index 9b01da2a3a..f762199322 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -239,12 +239,14 @@
 </template>
 
 <script setup>
+import { CheckIcon, IssuesIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from "@modrinth/assets";
+import { Avatar, ConfirmModal, injectNotificationManager } from "@modrinth/ui";
 import { formatProjectStatus, formatProjectType } from "@modrinth/utils";
-import { UploadIcon, SaveIcon, TrashIcon, XIcon, IssuesIcon, CheckIcon } from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
-import { ConfirmModal, Avatar } from "@modrinth/ui";
 import FileInput from "~/components/ui/FileInput.vue";
 
+const { addNotification } = injectNotificationManager();
+
 const props = defineProps({
   project: {
     type: Object,
@@ -374,7 +376,6 @@ const deleteProject = async () => {
   await initUserProjects();
   await router.push("/dashboard/projects");
   addNotification({
-    group: "main",
     title: "Project deleted",
     text: "Your project has been deleted.",
     type: "success",
@@ -393,7 +394,6 @@ const deleteIcon = async () => {
   });
   await props.resetProject();
   addNotification({
-    group: "main",
     title: "Project icon removed",
     text: "Your project's icon has been removed.",
     type: "success",
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/members.vue b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
index c6f26c9648..47f5d4e79b 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
@@ -518,21 +518,30 @@
 </template>
 
 <script setup>
-import { Multiselect } from "vue-multiselect";
 import {
-  TransferIcon,
   CheckIcon,
-  UsersIcon,
+  CrownIcon,
   DropdownIcon,
+  OrganizationIcon,
   SaveIcon,
+  TransferIcon,
   UserPlusIcon,
+  UsersIcon,
   UserXIcon,
-  OrganizationIcon,
-  CrownIcon,
 } from "@modrinth/assets";
-import { Avatar, Badge, Card, Checkbox, ConfirmModal } from "@modrinth/ui";
+import {
+  Avatar,
+  Badge,
+  Card,
+  Checkbox,
+  ConfirmModal,
+  injectNotificationManager,
+} from "@modrinth/ui";
+import { Multiselect } from "vue-multiselect";
 import { removeSelfFromTeam } from "~/helpers/teams.js";
 
+const { addNotification } = injectNotificationManager();
+
 const props = defineProps({
   project: {
     type: Object,
@@ -654,7 +663,6 @@ const onAddToOrg = useClientTry(async () => {
   await updateMembers();
 
   addNotification({
-    group: "main",
     title: "Project transferred",
     text: "Your project has been transferred to the organization.",
     type: "success",
@@ -675,7 +683,6 @@ const onRemoveFromOrg = useClientTry(async () => {
   await updateMembers();
 
   addNotification({
-    group: "main",
     title: "Project removed",
     text: "Your project has been removed from the organization.",
     type: "success",
@@ -703,7 +710,6 @@ const inviteTeamMember = async () => {
     await updateMembers();
   } catch (err) {
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err?.data?.description || err?.message || err || "Unknown error",
       type: "error",
@@ -726,7 +732,6 @@ const removeTeamMember = async (index) => {
     await updateMembers();
   } catch (err) {
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err?.data?.description || err?.message || err || "Unknown error",
       type: "error",
@@ -760,14 +765,12 @@ const updateTeamMember = async (index) => {
     );
     await updateMembers();
     addNotification({
-      group: "main",
       title: "Member(s) updated",
       text: "Your project's member(s) has been updated.",
       type: "success",
     });
   } catch (err) {
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err?.data?.description || err?.message || err || "Unknown error",
       type: "error",
@@ -790,7 +793,6 @@ const transferOwnership = async (index) => {
     await updateMembers();
   } catch (err) {
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err?.data?.description || err?.message || err || "Unknown error",
       type: "error",
@@ -837,7 +839,6 @@ async function updateOrgMember(index) {
     await updateMembers();
   } catch (err) {
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err?.data?.description || err?.message || err || "Unknown error",
       type: "error",
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index cc51f88c48..d08b2733d5 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -113,7 +113,8 @@
 </template>
 
 <script>
-import { StarIcon, SaveIcon } from "@modrinth/assets";
+import { SaveIcon, StarIcon } from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
 import { formatCategory, formatCategoryHeader, formatProjectType } from "@modrinth/utils";
 import Checkbox from "~/components/ui/Checkbox.vue";
 
@@ -146,8 +147,8 @@ export default defineNuxtComponent({
       type: Function,
       default() {
         return () => {
-          this.$notify({
-            group: "main",
+          const { addNotification } = injectNotificationManager();
+          addNotification({
             title: "An error occurred",
             text: "Patch project function not found",
             type: "error",
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 13d7f555ee..e48af3d87e 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -631,45 +631,46 @@
 </template>
 <script>
 import {
-  Avatar,
-  Badge,
-  CopyCode,
-  Checkbox,
-  ButtonStyled,
-  ConfirmModal,
-  MarkdownEditor,
-} from "@modrinth/ui";
-import {
-  FileIcon,
-  TrashIcon,
-  EditIcon,
+  BoxIcon,
+  ChevronRightIcon,
   DownloadIcon,
-  StarIcon,
-  ReportIcon,
-  SaveIcon,
-  XIcon,
+  EditIcon,
+  FileIcon,
   HashIcon,
   PlusIcon,
+  ReportIcon,
+  RightArrowIcon,
+  SaveIcon,
+  StarIcon,
   TransferIcon,
+  TrashIcon,
   UploadIcon,
-  BoxIcon,
-  RightArrowIcon,
-  ChevronRightIcon,
+  XIcon,
 } from "@modrinth/assets";
-import { Multiselect } from "vue-multiselect";
+import {
+  Avatar,
+  Badge,
+  ButtonStyled,
+  Checkbox,
+  ConfirmModal,
+  CopyCode,
+  injectNotificationManager,
+  MarkdownEditor,
+} from "@modrinth/ui";
 import { formatBytes, formatCategory } from "@modrinth/utils";
+import { Multiselect } from "vue-multiselect";
+import { useImageUpload } from "~/composables/image-upload.ts";
 import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
+import { renderHighlightedString } from "~/helpers/highlight.js";
 import { inferVersionInfo } from "~/helpers/infer.js";
 import { createDataPackVersion } from "~/helpers/package.js";
-import { renderHighlightedString } from "~/helpers/highlight.js";
 import { reportVersion } from "~/utils/report-helpers.ts";
-import { useImageUpload } from "~/composables/image-upload.ts";
 
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import Categories from "~/components/ui/search/Categories.vue";
 import FileInput from "~/components/ui/FileInput.vue";
 import Modal from "~/components/ui/Modal.vue";
+import Categories from "~/components/ui/search/Categories.vue";
 
 export default defineNuxtComponent({
   components: {
@@ -997,8 +998,8 @@ export default defineNuxtComponent({
           const project = await useBaseFetch(`project/${newDependencyId}`);
 
           if (this.version.dependencies.some((dep) => project.id === dep.project_id)) {
-            this.$notify({
-              group: "main",
+            const { addNotification } = injectNotificationManager();
+            addNotification({
               title: "Dependency already added",
               text: "You cannot add the same dependency twice.",
               type: "error",
@@ -1022,8 +1023,8 @@ export default defineNuxtComponent({
           const project = await useBaseFetch(`project/${version.project_id}`);
 
           if (this.version.dependencies.some((dep) => version.id === dep.version_id)) {
-            this.$notify({
-              group: "main",
+            const { addNotification } = injectNotificationManager();
+            addNotification({
               title: "Dependency already added",
               text: "You cannot add the same dependency twice.",
               type: "error",
@@ -1050,8 +1051,8 @@ export default defineNuxtComponent({
         this.newDependencyId = "";
       } catch {
         if (!hideErrors) {
-          this.$notify({
-            group: "main",
+          const { addNotification } = injectNotificationManager();
+          addNotification({
             title: "Invalid Dependency",
             text: "The specified dependency could not be found",
             type: "error",
@@ -1144,8 +1145,8 @@ export default defineNuxtComponent({
           )}`,
         );
       } catch (err) {
-        this.$notify({
-          group: "main",
+        const { addNotification } = injectNotificationManager();
+        addNotification({
           title: "An error occurred",
           text: err.data ? err.data.description : err,
           type: "error",
@@ -1169,8 +1170,8 @@ export default defineNuxtComponent({
       try {
         await this.createVersionRaw(this.version);
       } catch (err) {
-        this.$notify({
-          group: "main",
+        const { addNotification } = injectNotificationManager();
+        addNotification({
           title: "An error occurred",
           text: err.data ? err.data.description : err,
           type: "error",
@@ -1293,15 +1294,15 @@ export default defineNuxtComponent({
 
         this.$refs.modal_package_mod.hide();
 
-        this.$notify({
-          group: "main",
+        const { addNotification } = injectNotificationManager();
+        addNotification({
           title: "Packaging Success",
           text: "Your data pack was successfully packaged as a mod! Make sure to playtest to check for errors.",
           type: "success",
         });
       } catch (err) {
-        this.$notify({
-          group: "main",
+        const { addNotification } = injectNotificationManager();
+        addNotification({
           title: "An error occurred",
           text: err.data ? err.data.description : err,
           type: "error",
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
index 4bded6a5f5..4f400bafa3 100644
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -251,28 +251,31 @@
   </div>
 </template>
 <script setup>
+import {
+  CheckIcon,
+  CurrencyIcon,
+  ExternalIcon,
+  ModrinthPlusIcon,
+  ServerIcon,
+  UserIcon,
+  XIcon,
+} from "@modrinth/assets";
 import {
   Avatar,
   ButtonStyled,
   CopyCode,
   DropdownSelect,
+  injectNotificationManager,
   NewModal,
   Toggle,
   useRelativeTime,
 } from "@modrinth/ui";
 import { formatCategory, formatPrice } from "@modrinth/utils";
-import {
-  CheckIcon,
-  XIcon,
-  UserIcon,
-  ModrinthPlusIcon,
-  ServerIcon,
-  ExternalIcon,
-  CurrencyIcon,
-} from "@modrinth/assets";
 import dayjs from "dayjs";
-import { products } from "~/generated/state.json";
 import ModrinthServersIcon from "~/components/ui/servers/ModrinthServersIcon.vue";
+import { products } from "~/generated/state.json";
+
+const { addNotification } = injectNotificationManager();
 
 const route = useRoute();
 const vintl = useVIntl();
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index 480cf82574..018a3898b6 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -258,31 +258,31 @@
   </div>
 </template>
 <script setup lang="ts">
+import { EditIcon, PlusIcon, SaveIcon, SettingsIcon, TrashIcon, XIcon } from "@modrinth/assets";
 import {
-  CopyCode,
-  TagItem,
   ButtonStyled,
-  ServerNotice,
   commonMessages,
+  CopyCode,
+  injectNotificationManager,
   NewModal,
+  ServerNotice,
+  TagItem,
   TeleportDropdownMenu,
   Toggle,
   useRelativeTime,
 } from "@modrinth/ui";
-import { SettingsIcon, PlusIcon, SaveIcon, TrashIcon, EditIcon, XIcon } from "@modrinth/assets";
-import dayjs from "dayjs";
-import { useVIntl } from "@vintl/vintl";
+import { NOTICE_LEVELS } from "@modrinth/ui/src/utils/notices.ts";
 import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
+import { useVIntl } from "@vintl/vintl";
+import dayjs from "dayjs";
 import { computed } from "vue";
-import { NOTICE_LEVELS } from "@modrinth/ui/src/utils/notices.ts";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 import AssignNoticeModal from "~/components/ui/servers/notice/AssignNoticeModal.vue";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 const formatRelativeTime = useRelativeTime();
 
-const app = useNuxtApp() as unknown as { $notify: any };
-
 const notices = ref<ServerNoticeType[]>([]);
 const createNoticeModal = ref<InstanceType<typeof NewModal>>();
 const assignNoticeModal = ref<InstanceType<typeof AssignNoticeModal>>();
@@ -351,15 +351,13 @@ async function deleteNotice(notice: ServerNoticeType) {
     method: "DELETE",
   })
     .then(() => {
-      app.$notify({
-        group: "main",
+      addNotification({
         title: `Successfully deleted notice #${notice.id}`,
         type: "success",
       });
     })
     .catch((err) => {
-      app.$notify({
-        group: "main",
+      addNotification({
         title: "Error deleting notice",
         text: err,
         type: "error",
@@ -386,7 +384,6 @@ const noticeSubmitError = computed(() => {
 function validateSubmission(message: string) {
   if (noticeSubmitError.value) {
     addNotification({
-      group: "main",
       title: message,
       text: noticeSubmitError.value,
       type: "error",
@@ -416,8 +413,7 @@ async function saveChanges() {
         : undefined,
     },
   }).catch((err) => {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error saving changes to notice",
       text: err,
       type: "error",
@@ -447,8 +443,7 @@ async function createNotice() {
         : undefined,
     },
   }).catch((err) => {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error creating notice",
       text: err,
       type: "error",
diff --git a/apps/frontend/src/pages/admin/user_email.vue b/apps/frontend/src/pages/admin/user_email.vue
index 40b5e1886b..5364f391ac 100644
--- a/apps/frontend/src/pages/admin/user_email.vue
+++ b/apps/frontend/src/pages/admin/user_email.vue
@@ -32,8 +32,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
 import { MailIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager } from "@modrinth/ui";
+
+const { addNotification } = injectNotificationManager();
 
 const userEmail = ref("");
 
@@ -50,7 +52,6 @@ async function getUserFromEmail() {
   } catch (err) {
     console.error(err);
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err.data.description,
       type: "error",
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index 76cb389488..e681e0f795 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -80,13 +80,14 @@
 </template>
 
 <script setup>
-import { Button, Avatar, commonMessages } from "@modrinth/ui";
-import { XIcon, CheckIcon } from "@modrinth/assets";
-import { useBaseFetch } from "@/composables/fetch.js";
 import { useAuth } from "@/composables/auth.js";
+import { useBaseFetch } from "@/composables/fetch.js";
+import { CheckIcon, XIcon } from "@modrinth/assets";
+import { Avatar, Button, commonMessages, injectNotificationManager } from "@modrinth/ui";
 
 import { useScopes } from "@/composables/auth/scopes.ts";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const messages = defineMessages({
@@ -196,8 +197,7 @@ const onAuthorize = async () => {
 
     throw new Error(formatMessage(messages.noRedirectUrlError));
   } catch {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
@@ -223,8 +223,7 @@ const onReject = async () => {
 
     throw new Error(formatMessage(messages.noRedirectUrlError));
   } catch {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 5d4802ca38..6b09627d52 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -67,10 +67,11 @@
   </div>
 </template>
 <script setup>
-import { SendIcon, MailIcon, KeyIcon } from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
 import HCaptcha from "@/components/ui/HCaptcha.vue";
+import { KeyIcon, MailIcon, SendIcon } from "@modrinth/assets";
+import { commonMessages, injectNotificationManager } from "@modrinth/ui";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const methodChoiceMessages = defineMessages({
@@ -179,14 +180,12 @@ async function recovery() {
     });
 
     addNotification({
-      group: "main",
       title: formatMessage(emailSentNotificationMessages.title),
       text: formatMessage(emailSentNotificationMessages.text),
       type: "success",
     });
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
@@ -211,7 +210,6 @@ async function changePassword() {
     });
 
     addNotification({
-      group: "main",
       title: formatMessage(passwordResetNotificationMessages.title),
       text: formatMessage(passwordResetNotificationMessages.text),
       type: "success",
@@ -219,7 +217,6 @@ async function changePassword() {
     await navigateTo("/auth/sign-in");
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index 23d6b8de5e..3f3e7a0ff3 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -129,20 +129,21 @@
 </template>
 
 <script setup>
+import HCaptcha from "@/components/ui/HCaptcha.vue";
 import {
+  KeyIcon,
+  MailIcon,
   RightArrowIcon,
+  SSODiscordIcon,
   SSOGitHubIcon,
+  SSOGitLabIcon,
+  SSOGoogleIcon,
   SSOMicrosoftIcon,
   SSOSteamIcon,
-  SSOGoogleIcon,
-  SSODiscordIcon,
-  SSOGitLabIcon,
-  KeyIcon,
-  MailIcon,
 } from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
-import HCaptcha from "@/components/ui/HCaptcha.vue";
+import { commonMessages, injectNotificationManager } from "@modrinth/ui";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const messages = defineMessages({
@@ -232,7 +233,6 @@ async function beginPasswordSignIn() {
     }
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
@@ -257,7 +257,6 @@ async function begin2FASignIn() {
     await finishSignIn(res.session);
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index a8cb5664cb..99b67c69b7 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -133,21 +133,22 @@
 </template>
 
 <script setup>
+import HCaptcha from "@/components/ui/HCaptcha.vue";
 import {
+  KeyIcon,
+  MailIcon,
   RightArrowIcon,
-  UserIcon,
+  SSODiscordIcon,
   SSOGitHubIcon,
-  SSOMicrosoftIcon,
+  SSOGitLabIcon,
   SSOGoogleIcon,
+  SSOMicrosoftIcon,
   SSOSteamIcon,
-  SSODiscordIcon,
-  KeyIcon,
-  MailIcon,
-  SSOGitLabIcon,
+  UserIcon,
 } from "@modrinth/assets";
-import { Checkbox, commonMessages } from "@modrinth/ui";
-import HCaptcha from "@/components/ui/HCaptcha.vue";
+import { Checkbox, commonMessages, injectNotificationManager } from "@modrinth/ui";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const messages = defineMessages({
@@ -225,7 +226,6 @@ async function createAccount() {
   try {
     if (confirmPassword.value !== password.value) {
       addNotification({
-        group: "main",
         title: formatMessage(commonMessages.errorNotificationTitle),
         text: formatMessage({
           id: "auth.sign-up.notification.password-mismatch.text",
@@ -262,7 +262,6 @@ async function createAccount() {
     }
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index a738d43e2b..b0fb239ad6 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -367,6 +367,7 @@ import {
   BoxIcon,
   CalendarIcon,
   EditIcon,
+  GlobeIcon,
   GridIcon,
   ImageIcon,
   LibraryIcon,
@@ -378,7 +379,6 @@ import {
   UpdatedIcon,
   UploadIcon,
   XIcon,
-  GlobeIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
@@ -387,17 +387,17 @@ import {
   ConfirmModal,
   DropdownSelect,
   FileInput,
+  injectNotificationManager,
   PopoutMenu,
   useRelativeTime,
 } from "@modrinth/ui";
-
 import { isAdmin } from "@modrinth/utils";
 import UpToDate from "assets/images/illustrations/up_to_date.svg";
-import { addNotification } from "~/composables/notifs.js";
+import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import NavRow from "~/components/ui/NavRow.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 
+const { addNotification } = injectNotificationManager();
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 const formatRelativeTime = useRelativeTime();
@@ -664,7 +664,6 @@ async function saveChanges() {
     isEditing.value = false;
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err,
       type: "error",
@@ -688,7 +687,6 @@ async function deleteCollection() {
     }
   } catch (err) {
     addNotification({
-      group: "main",
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index 9ee6f7d756..31b846656e 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/apps/frontend/src/pages/dashboard/index.vue
@@ -99,7 +99,7 @@
 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";
 
 useHead({
   title: "Dashboard - Modrinth",
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index 9567370c3b..27f9f8a987 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -63,7 +63,7 @@ import {
   fetchExtraNotificationData,
   groupNotifications,
   markAsRead,
-} from "~/helpers/notifications.ts";
+} from "~/helpers/platform-notifications";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 2680ee2c2a..c662e65beb 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/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",
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index bded3c849a..7690ac0e27 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/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",
diff --git a/apps/frontend/src/pages/dashboard/revenue/transfers.vue b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
index 8926522c72..665200e83f 100644
--- a/apps/frontend/src/pages/dashboard/revenue/transfers.vue
+++ b/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;
 
@@ -155,8 +156,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",
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index 032a39357a..0a4c4d95cc 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/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",
diff --git a/apps/frontend/src/pages/organization/[id]/settings/index.vue b/apps/frontend/src/pages/organization/[id]/settings/index.vue
index 5308b444c7..2e6f21e414 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/index.vue
@@ -1,7 +1,8 @@
 <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";
 
+const { addNotification } = injectNotificationManager();
 const {
   organization,
   refresh: refreshOrganization,
@@ -74,7 +75,6 @@ const onSaveChanges = useClientTry(async () => {
   await refreshOrganization();
 
   addNotification({
-    group: "main",
     title: "Organization updated",
     text: "Your organization has been updated.",
     type: "success",
@@ -88,7 +88,6 @@ const onDeleteOrganization = useClientTry(async () => {
   });
 
   addNotification({
-    group: "main",
     title: "Organization deleted",
     text: "Your organization has been deleted.",
     type: "success",
diff --git a/apps/frontend/src/pages/organization/[id]/settings/members.vue b/apps/frontend/src/pages/organization/[id]/settings/members.vue
index 4a2266bd33..5257e37abf 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/members.vue
@@ -220,18 +220,19 @@
 
 <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 { isPermission } from "~/utils/permissions.ts";
 
+const { addNotification } = injectNotificationManager();
 const { organization, refresh: refreshOrganization, currentMember } = inject("organizationContext");
 
 const auth = await useAuth();
@@ -296,7 +297,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 +307,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 +331,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 +347,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",
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index 86226cc291..fd6f998ec9 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -298,25 +298,34 @@
 </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";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const { organization, projects, refresh } = inject("organizationContext");
@@ -375,14 +384,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 +518,6 @@ const onBulkEditLinks = useClientTry(async () => {
   editLinksModal.value.hide();
 
   addNotification({
-    group: "main",
     title: "Success",
     text: "Bulk edited selected project's links.",
     type: "success",
diff --git a/apps/frontend/src/pages/plus.vue b/apps/frontend/src/pages/plus.vue
index 864af2656b..9bd4851d71 100644
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -11,8 +11,7 @@
     :fetch-payment-data="fetchPaymentData"
     :on-error="
       (err) =>
-        data.$notify({
-          group: 'main',
+        addNotification({
           title: 'An error occurred',
           type: 'error',
           text: err.message ?? (err.data ? err.data.description : err),
@@ -87,16 +86,18 @@
 </template>
 <script setup>
 import {
-  ModrinthPlusIcon,
   HeartIcon,
+  ModrinthPlusIcon,
+  SettingsIcon,
   SparklesIcon,
   StarIcon,
-  SettingsIcon,
 } from "@modrinth/assets";
-import { PurchaseModal } from "@modrinth/ui";
+import { injectNotificationManager, PurchaseModal } from "@modrinth/ui";
 import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
 import { products } from "~/generated/state.json";
 
+const { addNotification } = injectNotificationManager();
+
 const title = "Subscribe to Modrinth Plus!";
 const description =
   "Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an exclusive profile badge! Half your subscription goes directly to Modrinth creators.";
diff --git a/apps/frontend/src/pages/report.vue b/apps/frontend/src/pages/report.vue
index 9da7b5ec52..84647cf653 100644
--- a/apps/frontend/src/pages/report.vue
+++ b/apps/frontend/src/pages/report.vue
@@ -243,30 +243,33 @@
 
 <script setup lang="ts">
 import {
-  MarkdownEditor,
-  RadialHeader,
-  RadioButtons,
-  ButtonStyled,
-  Avatar,
-  AutoLink,
-} from "@modrinth/ui";
-import {
+  CheckCircleIcon,
+  CheckIcon,
   ExternalIcon,
+  IssuesIcon,
   LeftArrowIcon,
   RightArrowIcon,
-  CheckIcon,
-  SpinnerIcon,
-  SendIcon,
-  IssuesIcon,
-  CheckCircleIcon,
-  XCircleIcon,
   ScaleIcon,
+  SendIcon,
+  SpinnerIcon,
   VersionIcon,
+  XCircleIcon,
 } from "@modrinth/assets";
-import type { User, Version, Report } from "@modrinth/utils";
-import { useVIntl, defineMessages, type MessageDescriptor } from "@vintl/vintl";
+import {
+  AutoLink,
+  Avatar,
+  ButtonStyled,
+  injectNotificationManager,
+  MarkdownEditor,
+  RadialHeader,
+  RadioButtons,
+} from "@modrinth/ui";
+import type { Project, Report, User, Version } from "@modrinth/utils";
+import { defineMessages, useVIntl, type MessageDescriptor } from "@vintl/vintl";
 import { useImageUpload } from "~/composables/image-upload.ts";
 
+const { addNotification } = injectNotificationManager();
+
 const tags = useTags();
 const route = useNativeRoute();
 const router = useRouter();
@@ -439,7 +442,6 @@ const submitReport = async () => {
 
     if (error instanceof Error) {
       addNotification({
-        group: "main",
         title: "An error occurred",
         text: error.message,
         type: "error",
@@ -465,7 +467,6 @@ const submitReport = async () => {
 
     if (error instanceof Error) {
       addNotification({
-        group: "main",
         title: "An error occurred",
         text: error.message,
         type: "error",
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index 2ac52cbe86..f23dc79fce 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -632,26 +632,31 @@
 </template>
 
 <script setup>
-import { ButtonStyled, ModrinthServersPurchaseModal } from "@modrinth/ui";
 import {
   BoxIcon,
   GameIcon,
   RightArrowIcon,
+  ServerIcon,
   TerminalSquareIcon,
   TransferIcon,
   VersionIcon,
-  ServerIcon,
 } from "@modrinth/assets";
-import { computed } from "vue";
+import {
+  ButtonStyled,
+  injectNotificationManager,
+  ModrinthServersPurchaseModal,
+} from "@modrinth/ui";
 import { monthsInInterval } from "@modrinth/ui/src/utils/billing.ts";
 import { formatPrice } from "@modrinth/utils";
 import { useVIntl } from "@vintl/vintl";
-import { products } from "~/generated/state.json";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import { computed } from "vue";
+import OptionGroup from "~/components/ui/OptionGroup.vue";
 import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
 import ServerPlanSelector from "~/components/ui/servers/marketing/ServerPlanSelector.vue";
-import OptionGroup from "~/components/ui/OptionGroup.vue";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import { products } from "~/generated/state.json";
 
+const { addNotification } = injectNotificationManager();
 const { locale } = useVIntl();
 
 const billingPeriods = ref(["monthly", "quarterly"]);
@@ -812,7 +817,6 @@ const startTyping = () => {
 
 const handleError = (err) => {
   addNotification({
-    group: "main",
     title: "An error occurred",
     type: "error",
     text: err.message ?? (err.data ? err.data.description : err),
@@ -831,7 +835,6 @@ async function fetchPaymentData() {
   } catch (error) {
     console.error("Error fetching payment data:", error);
     addNotification({
-      group: "main",
       title: "Error fetching payment data",
       type: "error",
       text: error.message || "An unexpected error occurred",
@@ -886,7 +889,6 @@ const selectProduct = async (product) => {
 
   if ((product === "custom" && isCustomAtCapacity.value) || isAtCapacity.value) {
     addNotification({
-      group: "main",
       title: "Server Capacity Full",
       type: "error",
       text: "We are currently at capacity. Please try again later.",
@@ -902,7 +904,6 @@ const selectProduct = async (product) => {
     (product !== "custom" && !selectedPlan.metadata)
   ) {
     addNotification({
-      group: "main",
       title: "Invalid product",
       type: "error",
       text: "The selected product was found but lacks necessary data. Please contact support.",
diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
index 83f0961d01..87f3996363 100644
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -350,38 +350,43 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, type Reactive } from "vue";
+import { reloadNuxtApp } from "#app";
+import { Intercom, shutdown } from "@intercom/messenger-js-sdk";
 import {
-  SettingsIcon,
+  CheckIcon,
   CopyIcon,
+  FileIcon,
   IssuesIcon,
   LeftArrowIcon,
+  LockIcon,
   RightArrowIcon,
-  CheckIcon,
-  FileIcon,
+  SettingsIcon,
   TransferIcon,
-  LockIcon,
 } from "@modrinth/assets";
-import DOMPurify from "dompurify";
-import { ButtonStyled, ErrorInformationCard, ServerNotice } from "@modrinth/ui";
-import { Intercom, shutdown } from "@intercom/messenger-js-sdk";
-import type { MessageDescriptor } from "@vintl/vintl";
 import {
+  ButtonStyled,
+  ErrorInformationCard,
+  injectNotificationManager,
+  ServerNotice,
+} from "@modrinth/ui";
+import {
+  type Backup,
+  type PowerAction,
   type ServerState,
   type Stats,
   type WSEvent,
   type WSInstallationResultEvent,
-  type Backup,
-  type PowerAction,
 } from "@modrinth/utils";
-import { reloadNuxtApp } from "#app";
-import { useModrinthServersConsole } from "~/store/console.ts";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
-import { ModrinthServer, useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
+import type { MessageDescriptor } from "@vintl/vintl";
+import DOMPurify from "dompurify";
+import { computed, onMounted, onUnmounted, ref, type Reactive } from "vue";
 import ServerInstallation from "~/components/ui/servers/ServerInstallation.vue";
 import PanelErrorIcon from "~/components/ui/servers/icons/PanelErrorIcon.vue";
+import { ModrinthServer, useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
+import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import { useModrinthServersConsole } from "~/store/console.ts";
 
-const app = useNuxtApp() as unknown as { $notify: any };
+const { addNotification } = injectNotificationManager();
 
 const socket = ref<WebSocket | null>(null);
 const isReconnecting = ref(false);
@@ -964,7 +969,6 @@ const sendPowerAction = async (action: PowerAction) => {
 
 const notifyError = (title: string, text: string) => {
   addNotification({
-    group: "server",
     title,
     text,
     type: "error",
@@ -1149,8 +1153,7 @@ async function dismissNotice(noticeId: number) {
   await useServersFetch(`servers/${serverId}/notices/${noticeId}/dismiss`, {
     method: "POST",
   }).catch((err) => {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error dismissing notice",
       text: err,
       type: "error",
diff --git a/apps/frontend/src/pages/servers/manage/[id]/backups.vue b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
index 1160192567..246b697c6a 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/backups.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
@@ -150,19 +150,20 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled, TagItem } from "@modrinth/ui";
-import { useStorage } from "@vueuse/core";
-import { SpinnerIcon, PlusIcon, DownloadIcon, SettingsIcon, IssuesIcon } from "@modrinth/assets";
-import { ref, computed } from "vue";
+import { DownloadIcon, IssuesIcon, PlusIcon, SettingsIcon, SpinnerIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager, TagItem } from "@modrinth/ui";
 import type { Backup } from "@modrinth/utils";
+import { useStorage } from "@vueuse/core";
+import { computed, ref } from "vue";
+import BackupCreateModal from "~/components/ui/servers/BackupCreateModal.vue";
+import BackupDeleteModal from "~/components/ui/servers/BackupDeleteModal.vue";
 import BackupItem from "~/components/ui/servers/BackupItem.vue";
 import BackupRenameModal from "~/components/ui/servers/BackupRenameModal.vue";
-import BackupCreateModal from "~/components/ui/servers/BackupCreateModal.vue";
 import BackupRestoreModal from "~/components/ui/servers/BackupRestoreModal.vue";
-import BackupDeleteModal from "~/components/ui/servers/BackupDeleteModal.vue";
 import BackupSettingsModal from "~/components/ui/servers/BackupSettingsModal.vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
 const props = defineProps<{
   server: ModrinthServer;
   isServerRunning: boolean;
@@ -236,7 +237,11 @@ const prepareDownload = async (backupId: string) => {
     await props.server.backups?.prepare(backupId);
   } catch (error) {
     console.error("Failed to prepare download:", error);
-    addNotification({ type: "error", title: "Failed to prepare backup for download", text: error });
+    addNotification({
+      type: "error",
+      title: "Failed to prepare backup for download",
+      text: error as string,
+    });
   }
 };
 
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
index be1ba27559..e76a83d805 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -335,28 +335,29 @@
 
 <script setup lang="ts">
 import {
-  SearchIcon,
+  CompassIcon,
+  DropdownIcon,
   EditIcon,
-  TrashIcon,
-  PackageClosedIcon,
+  FileIcon,
   FilterIcon,
-  DropdownIcon,
-  PlusIcon,
+  IssuesIcon,
+  ListIcon,
   MoreVerticalIcon,
-  CompassIcon,
+  PackageClosedIcon,
+  PlusIcon,
+  SearchIcon,
+  TrashIcon,
   WrenchIcon,
-  ListIcon,
-  FileIcon,
-  IssuesIcon,
 } from "@modrinth/assets";
-import { Avatar, ButtonStyled } from "@modrinth/ui";
-import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import { Avatar, ButtonStyled, injectNotificationManager } from "@modrinth/ui";
 import type { Mod } from "@modrinth/utils";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
 import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
-import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
 
+const { addNotification } = injectNotificationManager();
 const props = defineProps<{
   server: ModrinthServer;
 }>();
diff --git a/apps/frontend/src/pages/servers/manage/[id]/files.vue b/apps/frontend/src/pages/servers/manage/[id]/files.vue
index 80a61c7efe..010a84cbd7 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/files.vue
@@ -266,26 +266,27 @@
 </template>
 
 <script setup lang="ts">
-import { useInfiniteScroll } from "@vueuse/core";
 import {
-  UnknownIcon,
-  XIcon,
-  SpinnerIcon,
-  PackageOpenIcon,
   CheckIcon,
-  UploadIcon,
   FolderOpenIcon,
+  PackageOpenIcon,
+  SpinnerIcon,
+  UnknownIcon,
+  UploadIcon,
+  XIcon,
 } from "@modrinth/assets";
-import { computed } from "vue";
-import { ButtonStyled, ProgressBar } from "@modrinth/ui";
+import { ButtonStyled, injectNotificationManager, ProgressBar } from "@modrinth/ui";
+import type { DirectoryItem, DirectoryResponse, FilesystemOp, FSQueuedOp } from "@modrinth/utils";
 import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
-import type { FilesystemOp, FSQueuedOp, DirectoryItem, DirectoryResponse } from "@modrinth/utils";
-import { handleError, ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import { useInfiniteScroll } from "@vueuse/core";
+import { computed } from "vue";
+import FilesUploadConflictModal from "~/components/ui/servers/FilesUploadConflictModal.vue";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
 import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
 import FilesUploadZipUrlModal from "~/components/ui/servers/FilesUploadZipUrlModal.vue";
-import FilesUploadConflictModal from "~/components/ui/servers/FilesUploadConflictModal.vue";
+import { handleError, ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
 const flags = useFeatureFlags();
 const baseId = useId();
 
@@ -449,7 +450,6 @@ const undoLastOperation = async () => {
 
     refreshList();
     addNotification({
-      group: "files",
       title: `${lastOperation.type === "move" ? "Move" : "Rename"} undone`,
       text: `${lastOperation.fileName} has been restored to its original ${lastOperation.type === "move" ? "location" : "name"}`,
       type: "success",
@@ -457,7 +457,6 @@ const undoLastOperation = async () => {
   } catch (error) {
     console.error(`Error undoing ${lastOperation.type}:`, error);
     addNotification({
-      group: "files",
       title: "Undo failed",
       text: `Failed to undo the last ${lastOperation.type} operation`,
       type: "error",
@@ -489,7 +488,6 @@ const redoLastOperation = async () => {
 
     refreshList();
     addNotification({
-      group: "files",
       title: `${lastOperation.type === "move" ? "Move" : "Rename"} redone`,
       text: `${lastOperation.fileName} has been ${lastOperation.type === "move" ? "moved" : "renamed"} again`,
       type: "success",
@@ -497,7 +495,6 @@ const redoLastOperation = async () => {
   } catch (error) {
     console.error(`Error redoing ${lastOperation.type}:`, error);
     addNotification({
-      group: "files",
       title: "Redo failed",
       text: `Failed to redo the last ${lastOperation.type} operation`,
       type: "error",
@@ -513,7 +510,6 @@ const handleCreateNewItem = async (name: string) => {
     refreshList();
 
     addNotification({
-      group: "files",
       title: `${newItemType.value === "directory" ? "Folder" : "File"} created`,
       text: `New ${newItemType.value === "directory" ? "folder" : "file"} ${name} has been created.`,
       type: "success",
@@ -549,7 +545,6 @@ const handleRenameItem = async (newName: string) => {
     }
 
     addNotification({
-      group: "files",
       title: `${selectedItem.value.type === "directory" ? "Folder" : "File"} renamed`,
       text: `${selectedItem.value.name} has been renamed to ${newName}`,
       type: "success",
@@ -559,7 +554,6 @@ const handleRenameItem = async (newName: string) => {
     if (error instanceof ModrinthServersFetchError) {
       if (error.statusCode === 400) {
         addNotification({
-          group: "files",
           title: "Could not rename",
           text: `An item named "${newName}" already exists in this location`,
           type: "error",
@@ -567,7 +561,6 @@ const handleRenameItem = async (newName: string) => {
         return;
       }
       addNotification({
-        group: "files",
         title: "Could not rename item",
         text: "An unexpected error occurred",
         type: "error",
@@ -625,7 +618,6 @@ const handleMoveItem = async (destination: string) => {
 
     refreshList();
     addNotification({
-      group: "files",
       title: `${itemType === "directory" ? "Folder" : "File"} moved`,
       text: `${selectedItem.value.name} has been moved to ${newPath}`,
       type: "success",
@@ -658,7 +650,6 @@ const handleDirectMove = async (moveData: {
 
     refreshList();
     addNotification({
-      group: "files",
       title: `${moveData.type === "directory" ? "Folder" : "File"} moved`,
       text: `${moveData.name} has been moved to ${newPath}`,
       type: "success",
@@ -675,7 +666,6 @@ const handleDeleteItem = async () => {
 
     refreshList();
     addNotification({
-      group: "files",
       title: "File deleted",
       text: "Your file has been deleted.",
       type: "success",
@@ -717,14 +707,12 @@ const handleCreateError = (error: any) => {
   if (error instanceof ModrinthServersFetchError) {
     if (error.statusCode === 400) {
       addNotification({
-        group: "files",
         title: "Error creating item",
         text: "Invalid file",
         type: "error",
       });
     } else if (error.statusCode === 500) {
       addNotification({
-        group: "files",
         title: "Error creating item",
         text: "Something went wrong. The file may already exist.",
         type: "error",
@@ -1010,7 +998,6 @@ const requestShareLink = async () => {
     if (response.success) {
       await navigator.clipboard.writeText(response.url);
       addNotification({
-        group: "files",
         title: "Log URL copied",
         text: "Your log file URL has been copied to your clipboard.",
         type: "success",
@@ -1080,7 +1067,6 @@ const saveFileContent = async (exit: boolean = true) => {
     }
 
     addNotification({
-      group: "files",
       title: "File saved",
       text: "Your file has been saved.",
       type: "success",
@@ -1095,7 +1081,6 @@ const saveFileContentRestart = async () => {
   await props.server.general?.power("Restart");
 
   addNotification({
-    group: "files",
     title: "Server restarted",
     text: "Your server has been restarted.",
     type: "success",
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
index c1c1911c4a..c0cca3ae95 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
+++ b/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.",
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/info.vue b/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
index a823db514a..5273a3554f 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
+++ b/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;
 }>();
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
index 811a0a3cfe..fb7471fa9f 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
+++ b/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`,
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue b/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
index c739e01c2f..e2bbd6a411 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
+++ b/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.",
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
index c8b3227a8b..a4ddd4967b 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
+++ b/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.",
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
index bd9a7edd4b..49e68d737c 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
+++ b/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;
 }>();
@@ -216,7 +217,6 @@ const saveStartup = async () => {
     }
 
     addNotification({
-      group: "serverOptions",
       type: "success",
       title: "Server settings updated",
       text: "Your server settings were successfully changed.",
@@ -224,7 +224,6 @@ const saveStartup = async () => {
   } catch (error) {
     console.error(error);
     addNotification({
-      group: "serverOptions",
       type: "error",
       title: "Failed to update server arguments",
       text: "Please try again later.",
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 8a9a2d0c7c..ca9b331aaf 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -408,6 +408,7 @@
 <script setup>
 import {
   CheckIcon,
+  DownloadIcon,
   EditIcon,
   ExternalIcon,
   LeftArrowIcon,
@@ -418,17 +419,16 @@ import {
   TrashIcon,
   UpdatedIcon,
   XIcon,
-  DownloadIcon,
 } from "@modrinth/assets";
-import QrcodeVue from "qrcode.vue";
-import { ConfirmModal } from "@modrinth/ui";
+import { ConfirmModal, injectNotificationManager } from "@modrinth/ui";
+import KeyIcon from "assets/icons/auth/key.svg";
+import DiscordIcon from "assets/icons/auth/sso-discord.svg";
 import GithubIcon from "assets/icons/auth/sso-github.svg";
-import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
+import GitLabIcon from "assets/icons/auth/sso-gitlab.svg";
 import GoogleIcon from "assets/icons/auth/sso-google.svg";
+import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
 import SteamIcon from "assets/icons/auth/sso-steam.svg";
-import DiscordIcon from "assets/icons/auth/sso-discord.svg";
-import KeyIcon from "assets/icons/auth/key.svg";
-import GitLabIcon from "assets/icons/auth/sso-gitlab.svg";
+import QrcodeVue from "qrcode.vue";
 import Modal from "~/components/ui/Modal.vue";
 
 useHead({
@@ -439,7 +439,7 @@ definePageMeta({
   middleware: "auth",
 });
 
-const data = useNuxtApp();
+const { addNotification } = injectNotificationManager();
 const auth = await useAuth();
 
 const changeEmailModal = ref();
@@ -460,8 +460,7 @@ async function saveEmail() {
     changeEmailModal.value.hide();
     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",
@@ -492,8 +491,7 @@ async function savePassword() {
     managePasswordModal.value.hide();
     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",
@@ -529,8 +527,7 @@ async function showTwoFactorModal() {
     twoFactorSecret.value = res.secret;
     twoFactorFlow.value = res.flow;
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -619,8 +616,7 @@ async function deleteAccount() {
       method: "DELETE",
     });
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -649,8 +645,7 @@ async function exportData() {
     const blob = new Blob([jsonString], { type: "application/json" });
     generated.value = URL.createObjectURL(blob);
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index 7945ad12ef..f89660dc61 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -215,26 +215,27 @@
   </div>
 </template>
 <script setup>
-import { UploadIcon, PlusIcon, XIcon, TrashIcon, EditIcon, SaveIcon } from "@modrinth/assets";
+import { EditIcon, PlusIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from "@modrinth/assets";
 import {
-  CopyCode,
-  ConfirmModal,
+  Avatar,
   Button,
   Checkbox,
-  Avatar,
+  ConfirmModal,
+  CopyCode,
   FileInput,
   commonSettingsMessages,
+  injectNotificationManager,
 } from "@modrinth/ui";
 import Modal from "~/components/ui/Modal.vue";
-
 import {
-  scopeList,
+  getScopeValue,
   hasScope,
+  scopeList,
   toggleScope,
   useScopes,
-  getScopeValue,
 } from "~/composables/auth/scopes.ts";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 definePageMeta({
@@ -343,8 +344,7 @@ async function onImageSelection(files) {
       setForm(app);
     }
 
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "Icon updated",
       text: "Your application icon has been updated.",
       type: "success",
@@ -374,8 +374,7 @@ async function createApp() {
 
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -443,8 +442,7 @@ async function editApp() {
 
     appModal.value.hide();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -467,8 +465,7 @@ async function removeApp() {
     await refresh();
     editingId.value = null;
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/settings/authorizations.vue b/apps/frontend/src/pages/settings/authorizations.vue
index 08586321da..473925dc42 100644
--- a/apps/frontend/src/pages/settings/authorizations.vue
+++ b/apps/frontend/src/pages/settings/authorizations.vue
@@ -88,10 +88,17 @@
   </div>
 </template>
 <script setup>
-import { Button, ConfirmModal, Avatar, commonSettingsMessages } from "@modrinth/ui";
-import { TrashIcon, CheckIcon } from "@modrinth/assets";
+import { CheckIcon, TrashIcon } from "@modrinth/assets";
+import {
+  Avatar,
+  Button,
+  commonSettingsMessages,
+  ConfirmModal,
+  injectNotificationManager,
+} from "@modrinth/ui";
 import { useScopes } from "~/composables/auth/scopes.ts";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const { scopesToDefinitions } = useScopes();
@@ -163,8 +170,7 @@ async function revokeApp(id) {
     revokingId.value = null;
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 09ccbaf374..a25dee37a1 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -392,8 +392,7 @@
       "
       :on-error="
         (err) =>
-          data.$notify({
-            group: 'main',
+          addNotification({
             title: 'An error occurred',
             type: 'error',
             text: err.message ?? (err.data ? err.data.description : err),
@@ -422,8 +421,7 @@
       :renewal-date="currentSubRenewalDate"
       :on-error="
         (err) =>
-          data.$notify({
-            group: 'main',
+          addNotification({
             title: 'An error occurred',
             type: 'error',
             text: err.message ?? (err.data ? err.data.description : err),
@@ -554,43 +552,44 @@
 
 <script setup>
 import {
-  ConfirmModal,
-  AddPaymentMethodModal,
-  OverflowMenu,
-  PurchaseModal,
-  ButtonStyled,
-  CopyCode,
-  commonMessages,
-} from "@modrinth/ui";
-import {
-  PlusIcon,
-  TransferIcon,
-  SpinnerIcon,
   ArrowBigUpDashIcon,
-  XIcon,
   CardIcon,
-  MoreVerticalIcon,
-  TrashIcon,
+  CheckCircleIcon,
+  CurrencyIcon,
   EditIcon,
-  StarIcon,
+  HistoryIcon,
+  ModrinthPlusIcon,
+  MoreVerticalIcon,
   PayPalIcon,
-  CurrencyIcon,
-  CheckCircleIcon,
+  PlusIcon,
   RightArrowIcon,
-  ModrinthPlusIcon,
+  SpinnerIcon,
+  StarIcon,
+  TransferIcon,
+  TrashIcon,
   UpdatedIcon,
-  HistoryIcon,
+  XIcon,
 } from "@modrinth/assets";
+import {
+  AddPaymentMethodModal,
+  ButtonStyled,
+  ConfirmModal,
+  CopyCode,
+  OverflowMenu,
+  PurchaseModal,
+  commonMessages,
+  injectNotificationManager,
+} from "@modrinth/ui";
 import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
 import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 import { products } from "~/generated/state.json";
 
+const { addNotification } = injectNotificationManager();
 definePageMeta({
   middleware: "auth",
 });
 
-const app = useNuxtApp();
 const auth = await useAuth();
 const baseId = useId();
 
@@ -845,8 +844,7 @@ async function editPaymentMethod(index, primary) {
     });
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -864,8 +862,7 @@ async function removePaymentMethod(index) {
     });
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -887,8 +884,7 @@ async function cancelSubscription(id, cancelled) {
     });
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -955,8 +951,7 @@ const showPyroUpgradeModal = async (subscription) => {
 
   if (!currentProduct.value) {
     console.error("Could not find product for current subscription");
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: "Could not find product for current subscription",
       type: "error",
@@ -988,8 +983,7 @@ async function fetchCapacityStatuses(serverId, product) {
       };
     } catch (error) {
       console.error("Error checking server capacities:", error);
-      app.$notify({
-        group: "main",
+      addNotification({
         title: "Error checking server capacities",
         text: error,
         type: "error",
@@ -1015,23 +1009,20 @@ const resubscribePyro = async (subscriptionId, wasSuspended) => {
     });
     await refresh();
     if (wasSuspended) {
-      data.$notify({
-        group: "main",
+      addNotification({
         title: "Resubscription request submitted",
         text: "If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.",
         type: "success",
       });
     } else {
-      data.$notify({
-        group: "main",
+      addNotification({
         title: "Success",
         text: "Server subscription resubscribed successfully",
         type: "success",
       });
     }
   } catch {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "Error resubscribing",
       text: "An error occurred while resubscribing to your Modrinth server.",
       type: "error",
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 55faecd188..172c14e616 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -199,7 +199,7 @@
 
 <script setup lang="ts">
 import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from "@modrinth/assets";
-import { Button, ThemeSelector } from "@modrinth/ui";
+import { Button, injectNotificationManager, ThemeSelector } from "@modrinth/ui";
 import { formatProjectType } from "@modrinth/utils";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
 import type { DisplayLocation } from "~/plugins/cosmetics";
@@ -209,6 +209,7 @@ useHead({
   title: "Display settings - Modrinth",
 });
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const developerModeBanner = defineMessages({
@@ -377,7 +378,6 @@ function disableDeveloperMode() {
   flags.value.developerMode = !flags.value.developerMode;
   saveFeatureFlags();
   addNotification({
-    group: "main",
     title: "Developer mode deactivated",
     text: "Developer mode has been disabled",
     type: "success",
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 56b0397efb..a4aed02e0a 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -202,26 +202,26 @@
   </div>
 </template>
 <script setup>
-import { PlusIcon, XIcon, TrashIcon, EditIcon, SaveIcon } from "@modrinth/assets";
+import { EditIcon, PlusIcon, SaveIcon, TrashIcon, XIcon } from "@modrinth/assets";
 import {
   Checkbox,
-  CopyCode,
   ConfirmModal,
-  commonSettingsMessages,
+  CopyCode,
   commonMessages,
+  commonSettingsMessages,
+  injectNotificationManager,
   useRelativeTime,
 } from "@modrinth/ui";
-
+import Modal from "~/components/ui/Modal.vue";
 import {
+  getScopeValue,
   hasScope,
   scopeList,
   toggleScope,
   useScopes,
-  getScopeValue,
 } from "~/composables/auth/scopes.ts";
 
-import Modal from "~/components/ui/Modal.vue";
-
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const formatRelativeTime = useRelativeTime();
@@ -346,8 +346,7 @@ async function createPat() {
     pats.value.push(res);
     patModal.value.hide();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
@@ -372,8 +371,7 @@ async function editPat() {
     await refresh();
     patModal.value.hide();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
@@ -392,8 +390,7 @@ async function removePat(id) {
     });
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/pages/settings/profile.vue b/apps/frontend/src/pages/settings/profile.vue
index 7395c1d45d..c08f708bed 100644
--- a/apps/frontend/src/pages/settings/profile.vue
+++ b/apps/frontend/src/pages/settings/profile.vue
@@ -90,8 +90,11 @@
 </template>
 
 <script setup>
-import { UserIcon, SaveIcon, UploadIcon, UndoIcon, XIcon, TrashIcon } from "@modrinth/assets";
-import { Avatar, FileInput, Button, commonMessages } from "@modrinth/ui";
+import { SaveIcon, TrashIcon, UndoIcon, UploadIcon, UserIcon, XIcon } from "@modrinth/assets";
+import { Avatar, Button, commonMessages, FileInput, injectNotificationManager } from "@modrinth/ui";
+
+const { addNotification } = injectNotificationManager();
+const { formatMessage } = useVIntl();
 
 useHead({
   title: "Profile settings - Modrinth",
@@ -101,8 +104,6 @@ definePageMeta({
   middleware: "auth",
 });
 
-const { formatMessage } = useVIntl();
-
 const messages = defineMessages({
   title: {
     id: "settings.profile.profile-info",
@@ -222,7 +223,6 @@ async function saveChanges() {
     saved.value = true;
   } catch (err) {
     addNotification({
-      group: "main",
       title: "An error occurred",
       text: err
         ? err.data
diff --git a/apps/frontend/src/pages/settings/sessions.vue b/apps/frontend/src/pages/settings/sessions.vue
index 8a1d161c74..4548880d82 100644
--- a/apps/frontend/src/pages/settings/sessions.vue
+++ b/apps/frontend/src/pages/settings/sessions.vue
@@ -57,12 +57,18 @@
 </template>
 <script setup>
 import { XIcon } from "@modrinth/assets";
-import { commonMessages, commonSettingsMessages, useRelativeTime } from "@modrinth/ui";
+import {
+  commonMessages,
+  commonSettingsMessages,
+  injectNotificationManager,
+  useRelativeTime,
+} from "@modrinth/ui";
 
 definePageMeta({
   middleware: "auth",
 });
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 const formatRelativeTime = useRelativeTime();
 
@@ -116,8 +122,7 @@ async function revokeSession(id) {
     });
     await refresh();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
       type: "error",
diff --git a/apps/frontend/src/plugins/shorthands.js b/apps/frontend/src/plugins/shorthands.js
index 218b20d203..74a89d91f2 100644
--- a/apps/frontend/src/plugins/shorthands.js
+++ b/apps/frontend/src/plugins/shorthands.js
@@ -120,7 +120,6 @@ export default defineNuxtPlugin((nuxtApp) => {
       return 0;
     });
   });
-  nuxtApp.provide("notify", (notif) => addNotification(notif));
 });
 export const formatNumber = (number, abbreviate = true) => {
   const x = +number;
diff --git a/apps/frontend/src/providers/web-notifications.ts b/apps/frontend/src/providers/web-notifications.ts
new file mode 100644
index 0000000000..a5af24d5d5
--- /dev/null
+++ b/apps/frontend/src/providers/web-notifications.ts
@@ -0,0 +1,44 @@
+import { type WebNotification, AbstractWebNotificationManager } from "@modrinth/ui";
+import { useState } from "#app";
+
+export class FrontendNotificationManager extends AbstractWebNotificationManager {
+  private readonly state: Ref<WebNotification[]>;
+  private readonly isRightwards: Ref<boolean>;
+
+  public constructor() {
+    super();
+    this.state = useState<WebNotification[]>("notifications", () => []);
+    this.isRightwards = useState<boolean>("notifications.isRightwards", () => true);
+  }
+
+  public getNotifications(): WebNotification[] {
+    return this.state.value;
+  }
+
+  public isNotificationsPanelRightwards(): boolean {
+    return this.isRightwards.value;
+  }
+
+  public setNotificationsPanelRightwards(isRightwards: boolean): void {
+    this.isRightwards.value = isRightwards;
+  }
+
+  protected addNotificationToStorage(notification: WebNotification): void {
+    this.state.value.push(notification);
+  }
+
+  protected removeNotificationFromStorage(id: string | number): void {
+    const index = this.state.value.findIndex((n) => n.id === id);
+    if (index > -1) {
+      this.state.value.splice(index, 1);
+    }
+  }
+
+  protected removeNotificationFromStorageByIndex(index: number): void {
+    this.state.value.splice(index, 1);
+  }
+
+  protected clearAllNotificationsFromStorage(): void {
+    this.state.value.splice(0);
+  }
+}
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 93cb120715..eb929b519f 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,3 +1,4 @@
 export * from './src/components'
 export * from './src/utils'
 export * from './src/composables'
+export * from './src/providers'
diff --git a/packages/ui/src/components/base/Notifications.vue b/packages/ui/src/components/base/Notifications.vue
deleted file mode 100644
index dd174a0f4f..0000000000
--- a/packages/ui/src/components/base/Notifications.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <div class="vue-notification-group" :class="{ 'has-sidebar': sidebar }">
-    <transition-group name="notifs">
-      <div
-        v-for="(item, index) in notifications"
-        :key="item.id"
-        class="vue-notification-wrapper"
-        @click="notifications.splice(index, 1)"
-        @mouseenter="stopTimer(item)"
-        @mouseleave="setNotificationTimer(item)"
-      >
-        <div class="vue-notification-template vue-notification" :class="{ [item.type]: true }">
-          <div class="notification-title" v-html="item.title"></div>
-          <div class="notification-content" v-html="item.text"></div>
-        </div>
-      </div>
-    </transition-group>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  sidebar: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const notifications = ref([])
-
-defineExpose({
-  addNotification: (notification) => {
-    const existingNotif = notifications.value.find(
-      (x) =>
-        x.text === notification.text &&
-        x.title === notification.title &&
-        x.type === notification.type,
-    )
-    if (existingNotif) {
-      setNotificationTimer(existingNotif)
-
-      return
-    }
-
-    notification.id = new Date()
-
-    setNotificationTimer(notification)
-    notifications.value.push(notification)
-  },
-})
-
-function setNotificationTimer(notification) {
-  if (!notification) return
-
-  if (notification.timer) {
-    clearTimeout(notification.timer)
-  }
-
-  notification.timer = setTimeout(() => {
-    notifications.value.splice(notifications.value.indexOf(notification), 1)
-  }, 30000)
-}
-
-function stopTimer(notif) {
-  clearTimeout(notif.timer)
-}
-</script>
-<style lang="scss" scoped>
-.vue-notification {
-  background: var(--color-blue) !important;
-  color: var(--color-accent-contrast) !important;
-
-  box-sizing: border-box;
-  text-align: left;
-  font-size: 12px;
-  padding: 10px;
-  margin: 0 5px 5px;
-
-  &.success {
-    background: var(--color-green) !important;
-  }
-
-  &.warn {
-    background: var(--color-orange) !important;
-  }
-
-  &.error {
-    background: var(--color-red) !important;
-  }
-}
-
-.vue-notification-group {
-  position: fixed;
-  right: 25px;
-  bottom: 25px;
-  z-index: 99999999;
-  width: 300px;
-
-  &.has-sidebar {
-    right: 325px;
-  }
-
-  .vue-notification-wrapper {
-    width: 100%;
-    overflow: hidden;
-    margin-bottom: 10px;
-
-    .vue-notification-template {
-      border-radius: var(--radius-md);
-      margin: 0;
-
-      .notification-title {
-        font-size: var(--font-size-lg);
-        margin-right: auto;
-        font-weight: 600;
-      }
-
-      .notification-content {
-        margin-right: auto;
-        font-size: var(--font-size-md);
-      }
-    }
-
-    &:last-child {
-      margin: 0;
-    }
-  }
-
-  @media screen and (max-width: 750px) {
-    bottom: calc(var(--size-mobile-navbar-height, 15px) + 10px) !important;
-
-    &.browse-menu-open {
-      bottom: calc(var(--size-mobile-navbar-height-expanded, 15px) + 10px) !important;
-    }
-  }
-}
-
-.notifs-enter-active,
-.notifs-leave-active,
-.notifs-move {
-  transition: all 0.5s;
-
-  @media (prefers-reduced-motion) {
-    transition: none !important;
-  }
-}
-.notifs-enter-from,
-.notifs-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 85b7f2da0b..4613884468 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -76,6 +76,7 @@ export { default as Breadcrumbs } from './nav/Breadcrumbs.vue'
 export { default as NavItem } from './nav/NavItem.vue'
 export { default as NavRow } from './nav/NavRow.vue'
 export { default as NavStack } from './nav/NavStack.vue'
+export { default as NotificationPanel } from './nav/NotificationPanel.vue'
 export { default as PagewideBanner } from './nav/PagewideBanner.vue'
 
 // Project
diff --git a/apps/frontend/src/components/ui/Notifications.vue b/packages/ui/src/components/nav/NotificationPanel.vue
similarity index 74%
rename from apps/frontend/src/components/ui/Notifications.vue
rename to packages/ui/src/components/nav/NotificationPanel.vue
index ebb43c2e0c..88db6128a1 100644
--- a/apps/frontend/src/components/ui/Notifications.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -1,10 +1,7 @@
 <template>
   <div
     class="vue-notification-group experimental-styles-within"
-    :class="{
-      'intercom-present': isIntercomPresent,
-      rightwards: moveNotificationsRight,
-    }"
+    :class="{ 'intercom-present': isIntercomPresent }"
   >
     <transition-group name="notifs">
       <div
@@ -53,7 +50,7 @@
                 </button>
               </ButtonStyled>
               <ButtonStyled circular size="small">
-                <button v-tooltip="`Dismiss`" @click="notifications.splice(index, 1)">
+                <button v-tooltip="`Dismiss`" @click="dismissNotification(index)">
                   <XIcon />
                 </button>
               </ButtonStyled>
@@ -73,8 +70,10 @@
     </transition-group>
   </div>
 </template>
-<script setup>
-import { ButtonStyled } from "@modrinth/ui";
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { ButtonStyled, injectNotificationManager, type WebNotification } from '@modrinth/ui'
 import {
   XCircleIcon,
   CheckCircleIcon,
@@ -83,69 +82,55 @@ import {
   IssuesIcon,
   XIcon,
   CopyIcon,
-} from "@modrinth/assets";
-const notifications = useNotifications();
-const { isVisible: moveNotificationsRight } = useNotificationRightwards();
+} from '@modrinth/assets'
+
+const notificationManager = injectNotificationManager()
+const notifications = computed<WebNotification[]>(() => notificationManager.getNotifications())
+
+const isIntercomPresent = ref<boolean>(false)
+const copied = ref<Record<string, boolean>>({})
 
-const isIntercomPresent = ref(false);
+const stopTimer = (n: WebNotification) => notificationManager.stopNotificationTimer(n)
+const setNotificationTimer = (n: WebNotification) => notificationManager.setNotificationTimer(n)
+const dismissNotification = (n: number) => notificationManager.removeNotificationByIndex(n)
 
-function stopTimer(notif) {
-  clearTimeout(notif.timer);
+function createNotifText(notif: WebNotification): string {
+  return [notif.title, notif.text, notif.errorCode].filter(Boolean).join('\n')
 }
 
-const copied = ref({});
+function checkIntercomPresence(): void {
+  isIntercomPresent.value = !!document.querySelector('.intercom-lightweight-app')
+}
 
-const createNotifText = (notif) => {
-  let text = "";
-  if (notif.title) {
-    text += notif.title;
-  }
-  if (notif.text) {
-    if (text.length > 0) {
-      text += "\n";
-    }
-    text += notif.text;
-  }
-  if (notif.errorCode) {
-    if (text.length > 0) {
-      text += "\n";
-    }
-    text += notif.errorCode;
-  }
-  return text;
-};
+function copyToClipboard(notif: WebNotification): void {
+  const text = createNotifText(notif)
+
+  copied.value[text] = true
+  navigator.clipboard.writeText(text)
 
-function checkIntercomPresence() {
-  isIntercomPresent.value = !!document.querySelector(".intercom-lightweight-app");
+  setTimeout(() => {
+    delete copied.value[text]
+  }, 2000)
 }
 
 onMounted(() => {
-  checkIntercomPresence();
+  checkIntercomPresence()
 
   const observer = new MutationObserver(() => {
-    checkIntercomPresence();
-  });
+    checkIntercomPresence()
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 
   onBeforeUnmount(() => {
-    observer.disconnect();
-  });
-});
-
-function copyToClipboard(notif) {
-  const text = createNotifText(notif);
-
-  copied.value[text] = true;
-  navigator.clipboard.writeText(text);
-  setTimeout(() => {
-    delete copied.value[text];
-  }, 2000);
-}
+    observer.disconnect()
+  })
+})
 </script>
+
 <style lang="scss" scoped>
 .vue-notification-group {
   position: fixed;
@@ -164,15 +149,6 @@ function copyToClipboard(notif) {
     bottom: 5rem;
   }
 
-  &.rightwards {
-    right: unset !important;
-    left: 1.5rem;
-
-    @media screen and (max-width: 500px) {
-      left: 0.75rem;
-    }
-  }
-
   .vue-notification-wrapper {
     width: 100%;
     overflow: hidden;
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
new file mode 100644
index 0000000000..c8859edc1f
--- /dev/null
+++ b/packages/ui/src/providers/index.ts
@@ -0,0 +1,81 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2023 UnoVue
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * @source https://github.com/unovue/reka-ui/blob/53b4734734f8ebef9a344b1e62db291177c59bfe/packages/core/src/shared/createContext.ts
+ */
+
+import type { InjectionKey } from 'vue'
+import { inject, provide } from 'vue'
+
+/**
+ * @param providerComponentName - The name(s) of the component(s) providing the context.
+ *
+ * There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
+ *
+ * @param contextName The description for injection key symbol.
+ */
+export function createContext<ContextValue>(
+  providerComponentName: string | string[],
+  contextName?: string,
+) {
+  const symbolDescription =
+    typeof providerComponentName === 'string' && !contextName
+      ? `${providerComponentName}Context`
+      : contextName
+
+  const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
+
+  /**
+   * @param fallback The context value to return if the injection fails.
+   *
+   * @throws When context injection failed and no fallback is specified.
+   * This happens when the component injecting the context is not a child of the root component providing the context.
+   */
+  const injectContext = <T extends ContextValue | null | undefined = ContextValue>(
+    fallback?: T,
+  ): T extends null ? ContextValue | null : ContextValue => {
+    const context = inject(injectionKey, fallback)
+    if (context) return context
+
+    if (context === null)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return context as any
+
+    throw new Error(
+      `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${
+        Array.isArray(providerComponentName)
+          ? `one of the following components: ${providerComponentName.join(', ')}`
+          : `\`${providerComponentName}\``
+      }`,
+    )
+  }
+
+  const provideContext = (contextValue: ContextValue) => {
+    provide(injectionKey, contextValue)
+    return contextValue
+  }
+
+  return [injectContext, provideContext] as const
+}
+
+export * from './web-notifications'
diff --git a/packages/ui/src/providers/web-notifications.ts b/packages/ui/src/providers/web-notifications.ts
new file mode 100644
index 0000000000..7b82a3a6c5
--- /dev/null
+++ b/packages/ui/src/providers/web-notifications.ts
@@ -0,0 +1,111 @@
+import { createContext } from '.'
+
+export interface WebNotification {
+  id: string | number
+  title?: string
+  text?: string
+  type?: 'error' | 'warning' | 'success' | 'info'
+  errorCode?: string
+  count?: number
+  timer?: NodeJS.Timeout
+}
+
+export abstract class AbstractWebNotificationManager {
+  protected readonly AUTO_DISMISS_DELAY_MS = 30 * 1000
+
+  abstract getNotifications(): WebNotification[]
+
+  protected abstract addNotificationToStorage(notification: WebNotification): void
+  protected abstract removeNotificationFromStorage(id: string | number): void
+  protected abstract removeNotificationFromStorageByIndex(index: number): void
+  protected abstract clearAllNotificationsFromStorage(): void
+
+  addNotification(notification: Partial<WebNotification>): void {
+    const existingNotif = this.findExistingNotification(notification)
+
+    if (existingNotif) {
+      this.refreshNotificationTimer(existingNotif)
+      existingNotif.count = (existingNotif.count || 0) + 1
+      return
+    }
+
+    const newNotification = this.createNotification(notification)
+    this.setNotificationTimer(newNotification)
+    this.addNotificationToStorage(newNotification)
+  }
+
+  removeNotification(id: string | number): void {
+    const notifications = this.getNotifications()
+    const notification = notifications.find((n) => n.id === id)
+
+    if (notification) {
+      this.clearNotificationTimer(notification)
+      this.removeNotificationFromStorage(id)
+    }
+  }
+
+  removeNotificationByIndex(index: number): void {
+    const notifications = this.getNotifications()
+
+    if (index >= 0 && index < notifications.length) {
+      const notification = notifications[index]
+      this.clearNotificationTimer(notification)
+      this.removeNotificationFromStorageByIndex(index)
+    }
+  }
+
+  clearAllNotifications(): void {
+    const notifications = this.getNotifications()
+    notifications.forEach((notification) => {
+      this.clearNotificationTimer(notification)
+    })
+    this.clearAllNotificationsFromStorage()
+  }
+
+  setNotificationTimer(notification: WebNotification): void {
+    if (!notification) return
+
+    this.clearNotificationTimer(notification)
+
+    notification.timer = setTimeout(() => {
+      this.removeNotification(notification.id)
+    }, this.AUTO_DISMISS_DELAY_MS)
+  }
+
+  stopNotificationTimer(notification: WebNotification): void {
+    this.clearNotificationTimer(notification)
+  }
+
+  private refreshNotificationTimer(notification: WebNotification): void {
+    this.setNotificationTimer(notification)
+  }
+
+  private clearNotificationTimer(notification: WebNotification): void {
+    if (notification.timer) {
+      clearTimeout(notification.timer)
+      notification.timer = undefined
+    }
+  }
+
+  private findExistingNotification(
+    notification: Partial<WebNotification>,
+  ): WebNotification | undefined {
+    return this.getNotifications().find(
+      (existing) =>
+        existing.text === notification.text &&
+        existing.title === notification.title &&
+        existing.type === notification.type,
+    )
+  }
+
+  private createNotification(notification: Partial<WebNotification>): WebNotification {
+    return {
+      ...notification,
+      id: new Date().getTime(),
+      count: 1,
+    } as WebNotification
+  }
+}
+
+export const [injectNotificationManager, provideNotificationManager] =
+  createContext<AbstractWebNotificationManager>('root', 'notificationManager')

From 43dcc03aed6283e335a7fd71c51cbf06fea8053a Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Wed, 30 Jul 2025 12:50:19 +0100
Subject: [PATCH 02/14] fix: lint

---
 apps/frontend/src/app.vue                              |  2 +-
 apps/frontend/src/pages/auth/authorize.vue             |  6 ++----
 apps/frontend/src/pages/auth/reset-password.vue        |  2 +-
 apps/frontend/src/pages/auth/sign-in.vue               |  2 +-
 apps/frontend/src/pages/auth/sign-up.vue               |  2 +-
 apps/frontend/src/pages/dashboard/index.vue            |  5 ++++-
 apps/frontend/src/pages/dashboard/notifications.vue    | 10 +++++-----
 .../frontend/src/pages/dashboard/revenue/transfers.vue |  1 -
 apps/frontend/src/pages/plus.vue                       |  1 -
 apps/frontend/src/pages/settings/account.vue           |  2 +-
 apps/frontend/src/pages/settings/applications.vue      |  1 -
 apps/frontend/src/pages/settings/billing/index.vue     |  1 -
 apps/frontend/src/pages/settings/sessions.vue          |  1 -
 13 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index a1325645b2..8f2c7f4d92 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -7,8 +7,8 @@
 </template>
 <script setup lang="ts">
 import { NotificationPanel, provideNotificationManager } from "@modrinth/ui";
+import { FrontendNotificationManager } from "./providers/web-notifications.ts";
 import ModrinthLoadingIndicator from "~/components/ui/modrinth-loading-indicator.ts";
-import { FrontendNotificationManager } from "./providers/web-notifications";
 
 provideNotificationManager(new FrontendNotificationManager());
 </script>
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index e681e0f795..7e48778ca8 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -80,10 +80,10 @@
 </template>
 
 <script setup>
-import { useAuth } from "@/composables/auth.js";
-import { useBaseFetch } from "@/composables/fetch.js";
 import { CheckIcon, XIcon } from "@modrinth/assets";
 import { Avatar, Button, commonMessages, injectNotificationManager } from "@modrinth/ui";
+import { useAuth } from "@/composables/auth.js";
+import { useBaseFetch } from "@/composables/fetch.js";
 
 import { useScopes } from "@/composables/auth/scopes.ts";
 
@@ -118,8 +118,6 @@ const messages = defineMessages({
   },
 });
 
-const data = useNuxtApp();
-
 const router = useNativeRoute();
 const auth = await useAuth();
 const { scopesToDefinitions } = useScopes();
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 6b09627d52..930ac61294 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -67,9 +67,9 @@
   </div>
 </template>
 <script setup>
-import HCaptcha from "@/components/ui/HCaptcha.vue";
 import { KeyIcon, MailIcon, SendIcon } from "@modrinth/assets";
 import { commonMessages, injectNotificationManager } from "@modrinth/ui";
+import HCaptcha from "@/components/ui/HCaptcha.vue";
 
 const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index 3f3e7a0ff3..583efbe25e 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -129,7 +129,6 @@
 </template>
 
 <script setup>
-import HCaptcha from "@/components/ui/HCaptcha.vue";
 import {
   KeyIcon,
   MailIcon,
@@ -142,6 +141,7 @@ import {
   SSOSteamIcon,
 } from "@modrinth/assets";
 import { commonMessages, injectNotificationManager } from "@modrinth/ui";
+import HCaptcha from "@/components/ui/HCaptcha.vue";
 
 const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index 99b67c69b7..65b87f8e02 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -133,7 +133,6 @@
 </template>
 
 <script setup>
-import HCaptcha from "@/components/ui/HCaptcha.vue";
 import {
   KeyIcon,
   MailIcon,
@@ -147,6 +146,7 @@ import {
   UserIcon,
 } from "@modrinth/assets";
 import { Checkbox, commonMessages, injectNotificationManager } from "@modrinth/ui";
+import HCaptcha from "@/components/ui/HCaptcha.vue";
 
 const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index 31b846656e..5deffb1c80 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/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/platform-notifications";
+import {
+  fetchExtraNotificationData,
+  groupNotifications,
+} from "~/helpers/platform-notifications.ts";
 
 useHead({
   title: "Dashboard - Modrinth",
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index 27f9f8a987..2bd7e710aa 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/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/platform-notifications";
-import NotificationItem from "~/components/ui/NotificationItem.vue";
-import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
+} from "~/helpers/platform-notifications.ts";
 
 useHead({
   title: "Notifications - Modrinth",
diff --git a/apps/frontend/src/pages/dashboard/revenue/transfers.vue b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
index 665200e83f..a25a7f0d7d 100644
--- a/apps/frontend/src/pages/dashboard/revenue/transfers.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
@@ -109,7 +109,6 @@ useHead({
   title: "Transfer history - Modrinth",
 });
 
-const data = await useNuxtApp();
 const auth = await useAuth();
 
 const { data: payouts, refresh } = await useAsyncData(`payout`, () =>
diff --git a/apps/frontend/src/pages/plus.vue b/apps/frontend/src/pages/plus.vue
index 9bd4851d71..b33ec493f3 100644
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -121,7 +121,6 @@ useHead({
 
 const vintl = useVIntl();
 
-const data = useNuxtApp();
 const config = useRuntimeConfig();
 
 const auth = await useAuth();
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index ca9b331aaf..b87b34ca59 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -421,6 +421,7 @@ import {
   XIcon,
 } from "@modrinth/assets";
 import { ConfirmModal, injectNotificationManager } from "@modrinth/ui";
+import QrcodeVue from "qrcode.vue";
 import KeyIcon from "assets/icons/auth/key.svg";
 import DiscordIcon from "assets/icons/auth/sso-discord.svg";
 import GithubIcon from "assets/icons/auth/sso-github.svg";
@@ -428,7 +429,6 @@ import GitLabIcon from "assets/icons/auth/sso-gitlab.svg";
 import GoogleIcon from "assets/icons/auth/sso-google.svg";
 import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
 import SteamIcon from "assets/icons/auth/sso-steam.svg";
-import QrcodeVue from "qrcode.vue";
 import Modal from "~/components/ui/Modal.vue";
 
 useHead({
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index f89660dc61..b202176b76 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -246,7 +246,6 @@ useHead({
   title: "Applications - Modrinth",
 });
 
-const data = useNuxtApp();
 const { scopesToLabels } = useScopes();
 
 const appModal = ref();
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index a25dee37a1..16ef29594d 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -603,7 +603,6 @@ useHead({
   ],
 });
 
-const data = useNuxtApp();
 const config = useRuntimeConfig();
 
 const vintl = useVIntl();
diff --git a/apps/frontend/src/pages/settings/sessions.vue b/apps/frontend/src/pages/settings/sessions.vue
index 4548880d82..ee24afe51b 100644
--- a/apps/frontend/src/pages/settings/sessions.vue
+++ b/apps/frontend/src/pages/settings/sessions.vue
@@ -108,7 +108,6 @@ useHead({
   title: () => `${formatMessage(commonSettingsMessages.sessions)} - Modrinth`,
 });
 
-const data = useNuxtApp();
 const { data: sessions, refresh } = await useAsyncData("session/list", () =>
   useBaseFetch("session/list"),
 );

From a11c58274c4244e25ca58efbc43101998da8f074 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Wed, 30 Jul 2025 13:23:29 +0100
Subject: [PATCH 03/14] fix: issues

---
 .../frontend/src/components/ui/NotificationItem.vue |  6 +++---
 .../src/components/ui/ProjectMemberHeader.vue       |  5 +++--
 packages/ui/src/components/index.ts                 | 13 ++++++-------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index d8235b3717..a8bada6972 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -329,11 +329,11 @@ import {
   UserPlusIcon,
   VersionIcon,
   XIcon,
-} from "@modrinth/ars.js";
+} from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
 
-const app = useNuxtApp();
+const { addNotification } = injectNotificationManager();
 const emit = defineEmits(["update:notifications"]);
-
 const formatRelativeTime = useRelativeTime();
 
 const props = defineProps({
diff --git a/apps/frontend/src/components/ui/ProjectMemberHeader.vue b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
index d3430d42a2..63801a9111 100644
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -122,8 +122,6 @@ import { injectNotificationManager } from "@modrinth/ui";
 import { formatProjectType } from "@modrinth/utils";
 import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
 
-const { addNotification } = injectNotificationManager();
-
 const props = defineProps({
   project: {
     type: Object,
@@ -167,6 +165,7 @@ const props = defineProps({
     type: Function,
     default() {
       return () => {
+        const { addNotification } = injectNotificationManager();
         addNotification({
           title: "An error occurred",
           text: "setProcessing function not found",
@@ -179,6 +178,7 @@ const props = defineProps({
     type: Function,
     default() {
       return () => {
+        const { addNotification } = injectNotificationManager();
         addNotification({
           title: "An error occurred",
           text: "toggleCollapsed function not found",
@@ -191,6 +191,7 @@ const props = defineProps({
     type: Function,
     default() {
       return () => {
+        const { addNotification } = injectNotificationManager();
         addNotification({
           title: "An error occurred",
           text: "updateMembers function not found",
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 4613884468..59e62f4613 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -25,7 +25,6 @@ export { default as HeadingLink } from './base/HeadingLink.vue'
 export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
-export { default as Notifications } from './base/Notifications.vue'
 export { default as OverflowMenu } from './base/OverflowMenu.vue'
 export type { Option as OverflowMenuOption } from './base/OverflowMenu.vue'
 export { default as Page } from './base/Page.vue'
@@ -64,9 +63,9 @@ export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
 export type { Article as NewsArticle } from './content/NewsArticleCard.vue'
 
 // Modals
-export { default as NewModal } from './modal/NewModal.vue'
-export { default as Modal } from './modal/Modal.vue'
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
+export { default as Modal } from './modal/Modal.vue'
+export { default as NewModal } from './modal/NewModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
 export { default as TabbedModal } from './modal/TabbedModal.vue'
 export type { Tab as TabbedModalTab } from './modal/TabbedModal.vue'
@@ -101,16 +100,16 @@ export { default as SearchFilterOption } from './search/SearchFilterOption.vue'
 export { default as SearchSidebarFilter } from './search/SearchSidebarFilter.vue'
 
 // Billing
-export { default as PurchaseModal } from './billing/PurchaseModal.vue'
 export { default as AddPaymentMethodModal } from './billing/AddPaymentMethodModal.vue'
 export { default as ModrinthServersPurchaseModal } from './billing/ModrinthServersPurchaseModal.vue'
+export { default as PurchaseModal } from './billing/PurchaseModal.vue'
 
 // Skins
-export { default as SkinPreviewRenderer } from './skin/SkinPreviewRenderer.vue'
 export { default as CapeButton } from './skin/CapeButton.vue'
 export { default as CapeLikeTextButton } from './skin/CapeLikeTextButton.vue'
 export { default as SkinButton } from './skin/SkinButton.vue'
 export { default as SkinLikeTextButton } from './skin/SkinLikeTextButton.vue'
+export { default as SkinPreviewRenderer } from './skin/SkinPreviewRenderer.vue'
 
 // Version
 export { default as VersionChannelIndicator } from './version/VersionChannelIndicator.vue'
@@ -121,6 +120,6 @@ export { default as VersionSummary } from './version/VersionSummary.vue'
 export { default as ThemeSelector } from './settings/ThemeSelector.vue'
 
 // Servers
-export { default as ServersPromo } from './servers/ServersPromo.vue'
-export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
 export { default as ServersSpecs } from './billing/ServersSpecs.vue'
+export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
+export { default as ServersPromo } from './servers/ServersPromo.vue'

From 1602aa9556c29ad461d83e96b7d894896110d27d Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Wed, 30 Jul 2025 15:59:49 +0100
Subject: [PATCH 04/14] fix: compile error + notif binding issue

---
 .../components/ui/OrganizationCreateModal.vue | 46 +++++++++++--------
 apps/frontend/src/composables/user.js         |  5 +-
 .../src/helpers/platform-notifications.ts     | 33 ++++++-------
 apps/frontend/src/pages/[type]/[id].vue       |  6 ++-
 .../src/providers/web-notifications.ts        | 22 +++++----
 .../src/components/nav/NotificationPanel.vue  | 43 +++++++++++++----
 .../ui/src/providers/web-notifications.ts     | 16 ++++---
 7 files changed, 107 insertions(+), 64 deletions(-)

diff --git a/apps/frontend/src/components/ui/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/OrganizationCreateModal.vue
index bbe42d3692..b5278e169b 100644
--- a/apps/frontend/src/components/ui/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationCreateModal.vue
@@ -15,7 +15,7 @@
           maxlength="64"
           :placeholder="`Enter organization name...`"
           autocomplete="off"
-          @input="updateSlug()"
+          @input="updateSlug"
         />
       </div>
       <div class="flex flex-col gap-2">
@@ -33,7 +33,7 @@
             type="text"
             maxlength="64"
             autocomplete="off"
-            @input="manualSlug = true"
+            @input="setManualSlug"
           />
         </div>
       </div>
@@ -61,7 +61,7 @@
           </button>
         </ButtonStyled>
         <ButtonStyled>
-          <button @click="modal.hide()">
+          <button @click="hide">
             <XIcon aria-hidden="true" />
             Cancel
           </button>
@@ -70,21 +70,22 @@
     </div>
   </NewModal>
 </template>
-<script setup>
+
+<script setup lang="ts">
 import { PlusIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { ButtonStyled, NewModal, injectNotificationManager } from "@modrinth/ui";
+import { ref } from "vue";
 
 const router = useNativeRouter();
 const { addNotification } = injectNotificationManager();
 
-const name = ref("");
-const slug = ref("");
-const description = ref("");
-const manualSlug = ref(false);
-
-const modal = ref();
+const name = ref<string>("");
+const slug = ref<string>("");
+const description = ref<string>("");
+const manualSlug = ref<boolean>(false);
+const modal = ref<InstanceType<typeof NewModal>>();
 
-async function createOrganization() {
+async function createOrganization(): Promise<void> {
   startLoading();
   try {
     const value = {
@@ -93,16 +94,16 @@ async function createOrganization() {
       slug: slug.value.trim().replace(/ +/g, ""),
     };
 
-    const result = await useBaseFetch("organization", {
+    const result: any = await useBaseFetch("organization", {
       method: "POST",
       body: JSON.stringify(value),
       apiVersion: 3,
     });
 
-    modal.value.hide();
+    modal.value?.hide();
 
     await router.push(`/organization/${result.slug}`);
-  } catch (err) {
+  } catch (err: any) {
     console.error(err);
     addNotification({
       title: "An error occurred",
@@ -112,13 +113,18 @@ async function createOrganization() {
   }
   stopLoading();
 }
-function show(event) {
+
+function show(event?: MouseEvent): void {
   name.value = "";
   description.value = "";
-  modal.value.show(event);
+  modal.value?.show(event);
 }
 
-function updateSlug() {
+function hide(): void {
+  modal.value?.hide();
+}
+
+function updateSlug(): void {
   if (!manualSlug.value) {
     slug.value = name.value
       .trim()
@@ -129,6 +135,10 @@ function updateSlug() {
   }
 }
 
+function setManualSlug(): void {
+  manualSlug.value = true;
+}
+
 defineExpose({
   show,
 });
diff --git a/apps/frontend/src/composables/user.js b/apps/frontend/src/composables/user.js
index 8e1173d27e..7493606fa0 100644
--- a/apps/frontend/src/composables/user.js
+++ b/apps/frontend/src/composables/user.js
@@ -1,5 +1,3 @@
-import { injectNotificationManager } from "@modrinth/ui";
-
 export const useUser = async (force = false) => {
   const user = useState("user", () => {});
 
@@ -137,7 +135,8 @@ export const userFollowProject = async (project) => {
   }
 };
 export const resendVerifyEmail = async () => {
-  const { addNotification } = injectNotificationManager();
+  // const { injectNotificationManager } = await import("@modrinth/ui");
+  // const { addNotification } = injectNotificationManager();
 
   startLoading();
   try {
diff --git a/apps/frontend/src/helpers/platform-notifications.ts b/apps/frontend/src/helpers/platform-notifications.ts
index e443a5236f..360302f554 100644
--- a/apps/frontend/src/helpers/platform-notifications.ts
+++ b/apps/frontend/src/helpers/platform-notifications.ts
@@ -1,19 +1,14 @@
 import { injectNotificationManager } from "@modrinth/ui";
+import type { Organization, Project, Report, User, Version } from "@modrinth/utils";
 
-// TODO: There needs to be a standardized way to get these types, eg; @modrinth/types generated from api schema. Later problem.
-type Project = { id: string };
-type Version = { id: string; project_id: string };
-type Report = { id: string; item_type: "project" | "user" | "version"; item_id: string };
 type Thread = { id: string };
-type User = { id: string };
-type Organization = { id: string };
 
-export type NotificationAction = {
+export type PlatformNotificationAction = {
   title: string;
   action_route: [string, string];
 };
 
-export type NotificationBody = {
+export type PlatformNotificationBody = {
   project_id?: string;
   version_id?: string;
   report_id?: string;
@@ -22,7 +17,7 @@ export type NotificationBody = {
   organization_id?: string;
 };
 
-export type Notification = {
+export type PlatformNotification = {
   id: string;
   user_id: string;
   type: "project_update" | "team_invite" | "status_change" | "moderator_message";
@@ -31,10 +26,10 @@ export type Notification = {
   link: string;
   read: boolean;
   created: string;
-  actions: NotificationAction[];
-  body?: NotificationBody;
+  actions: PlatformNotificationAction[];
+  body?: PlatformNotificationBody;
   extra_data?: Record<string, unknown>;
-  grouped_notifs?: Notification[];
+  grouped_notifs?: PlatformNotification[];
 };
 
 async function getBulk<T extends { id: string }>(
@@ -55,8 +50,8 @@ async function getBulk<T extends { id: string }>(
 }
 
 export async function fetchExtraNotificationData(
-  notifications: Notification[],
-): Promise<Notification[]> {
+  notifications: PlatformNotification[],
+): Promise<PlatformNotification[]> {
   const bulk = {
     projects: [] as string[],
     reports: [] as string[],
@@ -133,8 +128,8 @@ export async function fetchExtraNotificationData(
   return notifications;
 }
 
-export function groupNotifications(notifications: Notification[]): Notification[] {
-  const grouped: Notification[] = [];
+export function groupNotifications(notifications: PlatformNotification[]): PlatformNotification[] {
+  const grouped: PlatformNotification[] = [];
   for (let i = 0; i < notifications.length; i++) {
     const current = notifications[i];
     const next = notifications[i + 1];
@@ -154,18 +149,18 @@ export function groupNotifications(notifications: Notification[]): Notification[
   return grouped;
 }
 
-function isSimilar(a: Notification, b: Notification | undefined): boolean {
+function isSimilar(a: PlatformNotification, b: PlatformNotification | undefined): boolean {
   return !!a?.body?.project_id && a.body!.project_id === b?.body?.project_id;
 }
 
 export async function markAsRead(
   ids: string[],
-): Promise<(notifications: Notification[]) => Notification[]> {
+): Promise<(notifications: PlatformNotification[]) => PlatformNotification[]> {
   try {
     await useBaseFetch(`notifications?ids=${JSON.stringify([...new Set(ids)])}`, {
       method: "PATCH",
     });
-    return (notifications: Notification[]) => {
+    return (notifications: PlatformNotification[]) => {
       const newNotifs = notifications ?? [];
       newNotifs.forEach((n) => {
         if (ids.includes(n.id)) n.read = true;
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index b079b4167d..d86ec59826 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -1552,11 +1552,15 @@ const collapsedModerationChecklist = useLocalStorage("collapsed-moderation-check
 watch(
   showModerationChecklist,
   (newValue) => {
-    notifications.setNotificationsPanelRightwards(newValue);
+    notifications.setNotificationLocation(newValue ? "left" : "right");
   },
   { immediate: true },
 );
 
+onUnmounted(() => {
+  notifications.setNotificationLocation("right");
+});
+
 if (import.meta.client && history && history.state && history.state.showChecklist) {
   showModerationChecklist.value = true;
 }
diff --git a/apps/frontend/src/providers/web-notifications.ts b/apps/frontend/src/providers/web-notifications.ts
index a5af24d5d5..b8ba3b9005 100644
--- a/apps/frontend/src/providers/web-notifications.ts
+++ b/apps/frontend/src/providers/web-notifications.ts
@@ -1,26 +1,30 @@
-import { type WebNotification, AbstractWebNotificationManager } from "@modrinth/ui";
 import { useState } from "#app";
+import {
+  type WebNotification,
+  type WebNotificationLocation,
+  AbstractWebNotificationManager,
+} from "@modrinth/ui";
 
 export class FrontendNotificationManager extends AbstractWebNotificationManager {
   private readonly state: Ref<WebNotification[]>;
-  private readonly isRightwards: Ref<boolean>;
+  private readonly locationState: Ref<WebNotificationLocation>;
 
   public constructor() {
     super();
     this.state = useState<WebNotification[]>("notifications", () => []);
-    this.isRightwards = useState<boolean>("notifications.isRightwards", () => true);
+    this.locationState = useState<WebNotificationLocation>("notifications.location", () => "right");
   }
 
-  public getNotifications(): WebNotification[] {
-    return this.state.value;
+  public getNotificationLocation(): WebNotificationLocation {
+    return this.locationState.value;
   }
 
-  public isNotificationsPanelRightwards(): boolean {
-    return this.isRightwards.value;
+  public setNotificationLocation(location: WebNotificationLocation): void {
+    this.locationState.value = location;
   }
 
-  public setNotificationsPanelRightwards(isRightwards: boolean): void {
-    this.isRightwards.value = isRightwards;
+  public getNotifications(): WebNotification[] {
+    return this.state.value;
   }
 
   protected addNotificationToStorage(notification: WebNotification): void {
diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index 88db6128a1..d8e4366cc7 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -1,7 +1,11 @@
 <template>
   <div
     class="vue-notification-group experimental-styles-within"
-    :class="{ 'intercom-present': isIntercomPresent }"
+    :class="{
+      'intercom-present': isIntercomPresent,
+      'location-left': notificationLocation === 'left',
+      'location-right': notificationLocation === 'right',
+    }"
   >
     <transition-group name="notifs">
       <div
@@ -72,20 +76,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
-import { ButtonStyled, injectNotificationManager, type WebNotification } from '@modrinth/ui'
 import {
-  XCircleIcon,
   CheckCircleIcon,
   CheckIcon,
+  CopyIcon,
   InfoIcon,
   IssuesIcon,
+  XCircleIcon,
   XIcon,
-  CopyIcon,
 } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, type WebNotification } from '@modrinth/ui'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const notificationManager = injectNotificationManager()
 const notifications = computed<WebNotification[]>(() => notificationManager.getNotifications())
+const notificationLocation = computed(() => notificationManager.getNotificationLocation())
 
 const isIntercomPresent = ref<boolean>(false)
 const copied = ref<Record<string, boolean>>({})
@@ -134,15 +139,31 @@ onMounted(() => {
 <style lang="scss" scoped>
 .vue-notification-group {
   position: fixed;
-  right: 1.5rem;
   bottom: 1.5rem;
   z-index: 200;
   width: 450px;
 
+  &.location-right {
+    right: 1.5rem;
+  }
+
+  &.location-left {
+    left: 1.5rem;
+  }
+
   @media screen and (max-width: 500px) {
     width: calc(100% - 0.75rem * 2);
-    right: 0.75rem;
     bottom: 0.75rem;
+
+    &.location-right {
+      right: 0.75rem;
+      left: auto;
+    }
+
+    &.location-left {
+      left: 0.75rem;
+      right: auto;
+    }
   }
 
   &.intercom-present {
@@ -184,6 +205,12 @@ onMounted(() => {
 }
 
 .notifs-leave-to {
-  transform: translateX(100%) scale(0.8);
+  .location-right & {
+    transform: translateX(100%) scale(0.8);
+  }
+
+  .location-left & {
+    transform: translateX(-100%) scale(0.8);
+  }
 }
 </style>
diff --git a/packages/ui/src/providers/web-notifications.ts b/packages/ui/src/providers/web-notifications.ts
index 7b82a3a6c5..be120f20be 100644
--- a/packages/ui/src/providers/web-notifications.ts
+++ b/packages/ui/src/providers/web-notifications.ts
@@ -10,17 +10,21 @@ export interface WebNotification {
   timer?: NodeJS.Timeout
 }
 
+export type WebNotificationLocation = 'left' | 'right'
+
 export abstract class AbstractWebNotificationManager {
   protected readonly AUTO_DISMISS_DELAY_MS = 30 * 1000
 
   abstract getNotifications(): WebNotification[]
+  abstract getNotificationLocation(): WebNotificationLocation
+  abstract setNotificationLocation(location: WebNotificationLocation): void
 
   protected abstract addNotificationToStorage(notification: WebNotification): void
   protected abstract removeNotificationFromStorage(id: string | number): void
   protected abstract removeNotificationFromStorageByIndex(index: number): void
   protected abstract clearAllNotificationsFromStorage(): void
 
-  addNotification(notification: Partial<WebNotification>): void {
+  addNotification = (notification: Partial<WebNotification>): void => {
     const existingNotif = this.findExistingNotification(notification)
 
     if (existingNotif) {
@@ -34,7 +38,7 @@ export abstract class AbstractWebNotificationManager {
     this.addNotificationToStorage(newNotification)
   }
 
-  removeNotification(id: string | number): void {
+  removeNotification = (id: string | number): void => {
     const notifications = this.getNotifications()
     const notification = notifications.find((n) => n.id === id)
 
@@ -44,7 +48,7 @@ export abstract class AbstractWebNotificationManager {
     }
   }
 
-  removeNotificationByIndex(index: number): void {
+  removeNotificationByIndex = (index: number): void => {
     const notifications = this.getNotifications()
 
     if (index >= 0 && index < notifications.length) {
@@ -54,7 +58,7 @@ export abstract class AbstractWebNotificationManager {
     }
   }
 
-  clearAllNotifications(): void {
+  clearAllNotifications = (): void => {
     const notifications = this.getNotifications()
     notifications.forEach((notification) => {
       this.clearNotificationTimer(notification)
@@ -62,7 +66,7 @@ export abstract class AbstractWebNotificationManager {
     this.clearAllNotificationsFromStorage()
   }
 
-  setNotificationTimer(notification: WebNotification): void {
+  setNotificationTimer = (notification: WebNotification): void => {
     if (!notification) return
 
     this.clearNotificationTimer(notification)
@@ -72,7 +76,7 @@ export abstract class AbstractWebNotificationManager {
     }, this.AUTO_DISMISS_DELAY_MS)
   }
 
-  stopNotificationTimer(notification: WebNotification): void {
+  stopNotificationTimer = (notification: WebNotification): void => {
     this.clearNotificationTimer(notification)
   }
 

From 718a35737abb2628bcf97a014f6c99233e5be294 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Thu, 31 Jul 2025 12:33:16 +0100
Subject: [PATCH 05/14] refactor: move org context to new DI setup

---
 .../composables/servers/modrinth-servers.ts   |  10 +-
 apps/frontend/src/pages/organization/[id].vue | 183 +++++++-----------
 .../organization/[id]/settings/analytics.vue  |   3 +-
 .../organization/[id]/settings/index.vue      |   3 +-
 .../organization/[id]/settings/members.vue    |   3 +-
 .../organization/[id]/settings/projects.vue   |   3 +-
 .../src/providers/organization-context.ts     | 108 +++++++++++
 packages/utils/types.ts                       |  70 +++++++
 8 files changed, 259 insertions(+), 124 deletions(-)
 create mode 100644 apps/frontend/src/providers/organization-context.ts

diff --git a/apps/frontend/src/composables/servers/modrinth-servers.ts b/apps/frontend/src/composables/servers/modrinth-servers.ts
index d0e3cd921c..22d1126fbb 100644
--- a/apps/frontend/src/composables/servers/modrinth-servers.ts
+++ b/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`,
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index 9013001610..1e629c5da8 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -28,7 +28,7 @@
                 </nuxt-link>
               </h2>
               <span>
-                {{ $formatNumber(acceptedMembers?.length || 0) }}
+                {{ formatNumber(acceptedMembers?.length || 0) }}
                 member<template v-if="acceptedMembers?.length !== 1">s</template>
               </span>
             </div>
@@ -120,11 +120,11 @@
                   {
                     id: 'manage-projects',
                     action: () =>
-                      navigateTo('/organization/' + organization.slug + '/settings/projects'),
-                    hoverOnly: true,
-                    shown: auth.user && currentMember,
+                      router.push('/organization/' + organization?.slug + '/settings/projects'),
+                    hoverFilledOnly: true,
+                    shown: !!(auth.user && currentMember),
                   },
-                  { divider: true, shown: auth.user && currentMember },
+                  { divider: true, shown: !!(auth?.user && currentMember) },
                   { id: 'copy-id', action: () => copyId() },
                   { id: 'copy-permalink', action: () => copyPermalink() },
                 ]"
@@ -157,20 +157,20 @@
             <template v-for="member in acceptedMembers" :key="member.user.id">
               <nuxt-link
                 class="details-list__item details-list__item--type-large"
-                :to="`/user/${member.user.username}`"
+                :to="`/user/${member?.user?.username}`"
               >
-                <Avatar :src="member.user.avatar_url" circle />
+                <Avatar :src="member?.user.avatar_url" circle />
                 <div class="rows">
                   <span class="flex items-center gap-1">
-                    {{ member.user.username }}
+                    {{ member?.user?.username }}
                     <CrownIcon
-                      v-if="member.is_owner"
+                      v-if="member?.is_owner"
                       v-tooltip="'Organization owner'"
                       class="text-brand-orange"
                     />
                   </span>
                   <span class="details-list__item__text--style-secondary">
-                    {{ member.role ? member.role : "Member" }}
+                    {{ member?.role ? member.role : "Member" }}
                   </span>
                 </div>
               </nuxt-link>
@@ -196,16 +196,21 @@
         <div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
           <NavTabs :links="navLinks" />
         </div>
-        <template v-if="projects?.length > 0">
+        <template v-if="projects && projects.length > 0">
           <div class="project-list display-mode--list">
             <ProjectCard
               v-for="project in (route.params.projectType !== undefined
-                ? projects.filter((x) =>
+                ? (projects ?? []).filter((x) =>
                     x.project_types.includes(
-                      route.params.projectType.substr(0, route.params.projectType.length - 1),
+                      typeof route.params.projectType === 'string'
+                        ? route.params.projectType.slice(0, route.params.projectType.length - 1)
+                        : route.params.projectType[0]?.slice(
+                            0,
+                            route.params.projectType[0].length - 1,
+                          ) || '',
                     ),
                   )
-                : projects
+                : (projects ?? [])
               )
                 .slice()
                 .sort((a, b) => b.downloads - a.downloads)"
@@ -225,9 +230,10 @@
               :client-side="project.client_side"
               :server-side="project.server_side"
               :status="
-                auth.user && (auth.user.id === user.id || tags.staffRoles.includes(auth.user.role))
-                  ? project.status
-                  : null
+                auth.user &&
+                (auth.user.id! === (user as any).id || tags.staffRoles.includes(auth.user.role))
+                  ? (project.status as ProjectStatus)
+                  : undefined
               "
               :type="project.project_types[0] ?? 'project'"
               :color="project.color"
@@ -240,9 +246,9 @@
           <br />
           <span class="preserve-lines text">
             This organization doesn't have any projects yet.
-            <template v-if="isPermission(currentMember?.organization_permissions, 1 << 4)">
+            <template v-if="isPermission(currentMember?.permissions, 1 << 4)">
               Would you like to
-              <a class="link" @click="$refs.modal_creation.show()">create one</a>?
+              <a class="link" @click="($refs as any).modal_creation?.show()">create one</a>?
             </template>
           </span>
         </div>
@@ -251,50 +257,58 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
   BoxIcon,
-  MoreVerticalIcon,
-  UsersIcon,
-  SettingsIcon,
   ChartIcon,
   CheckIcon,
-  XIcon,
   ClipboardCopyIcon,
-  OrganizationIcon,
-  DownloadIcon,
   CrownIcon,
+  DownloadIcon,
+  MoreVerticalIcon,
+  OrganizationIcon,
+  SettingsIcon,
+  UsersIcon,
+  XIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
-  ButtonStyled,
   Breadcrumbs,
+  ButtonStyled,
+  commonMessages,
   ContentPageHeader,
   OverflowMenu,
-  commonMessages,
 } from "@modrinth/ui";
+import type { Organization, ProjectStatus, ProjectType, ProjectV3 } from "@modrinth/utils";
+import { formatNumber } from "@modrinth/utils";
+import UpToDate from "~/assets/images/illustrations/up_to_date.svg?component";
+import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
+import ModalCreation from "~/components/ui/ModalCreation.vue";
 import NavStack from "~/components/ui/NavStack.vue";
 import NavStackItem from "~/components/ui/NavStackItem.vue";
-import ModalCreation from "~/components/ui/ModalCreation.vue";
-import UpToDate from "~/assets/images/illustrations/up_to_date.svg?component";
+import NavTabs from "~/components/ui/NavTabs.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
-import NavTabs from "~/components/ui/NavTabs.vue";
+import {
+  OrganizationContext,
+  provideOrganizationContext,
+} from "~/providers/organization-context.ts";
+import { isPermission } from "~/utils/permissions.ts";
 
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 
 const formatCompactNumber = useCompactNumber(true);
 
-const auth = await useAuth();
+const auth: { user: any } & any = await useAuth();
 const user = await useUser();
 const cosmetics = useCosmetics();
 const route = useNativeRoute();
+const router = useRouter();
 const tags = useTags();
 const config = useRuntimeConfig();
 
-let orgId = useRouteId();
+const orgId = useRouteId();
 
 // hacky way to show the edit button on the corner of the card.
 const routeHasSettings = computed(() => route.path.includes("settings"));
@@ -303,12 +317,13 @@ const [
   { data: organization, refresh: refreshOrganization },
   { data: projects, refresh: refreshProjects },
 ] = await Promise.all([
-  useAsyncData(`organization/${orgId}`, () =>
-    useBaseFetch(`organization/${orgId}`, { apiVersion: 3 }),
+  useAsyncData(
+    `organization/${orgId}`,
+    () => useBaseFetch(`organization/${orgId}`, { apiVersion: 3 }) as Promise<Organization>,
   ),
   useAsyncData(
     `organization/${orgId}/projects`,
-    () => useBaseFetch(`organization/${orgId}/projects`, { apiVersion: 3 }),
+    () => useBaseFetch(`organization/${orgId}/projects`, { apiVersion: 3 }) as Promise<ProjectV3[]>,
     {
       transform: (projects) => {
         for (const project of projects) {
@@ -359,7 +374,7 @@ if (!organization.value) {
 
 // Filter accepted, sort by role, then by name and Owner role always goes first
 const acceptedMembers = computed(() => {
-  const acceptedMembers = organization.value.members?.filter((x) => x.accepted);
+  const acceptedMembers = organization.value?.members?.filter((x) => x.accepted) ?? [];
   const owner = acceptedMembers.find((x) => x.is_owner);
   const rest = acceptedMembers.filter((x) => !x.is_owner) || [];
 
@@ -374,43 +389,14 @@ const acceptedMembers = computed(() => {
   return [owner, ...rest];
 });
 
-const currentMember = computed(() => {
-  if (auth.value.user && organization.value) {
-    const member = organization.value.members.find((x) => x.user.id === auth.value.user.id);
-
-    if (member) {
-      return member;
-    }
-
-    if (tags.value.staffRoles.includes(auth.value.user.role)) {
-      return {
-        user: auth.value.user,
-        role: auth.value.user.role,
-        permissions: auth.value.user.role === "admin" ? 1023 : 12,
-        accepted: true,
-        payouts_split: 0,
-        avatar_url: auth.value.user.avatar_url,
-        name: auth.value.user.username,
-      };
-    }
-  }
-
-  return null;
-});
-
-const hasPermission = computed(() => {
-  const EDIT_DETAILS = 1 << 2;
-  return currentMember.value && (currentMember.value.permissions & EDIT_DETAILS) === EDIT_DETAILS;
-});
-
 const isInvited = computed(() => {
   return currentMember.value?.accepted === false;
 });
 
 const projectTypes = computed(() => {
-  const obj = {};
+  const obj: Record<string, boolean> = {};
 
-  for (const project of projects.value) {
+  for (const project of projects.value ?? []) {
     obj[project.project_types[0] ?? "project"] = true;
   }
 
@@ -421,62 +407,27 @@ const projectTypes = computed(() => {
 const sumDownloads = computed(() => {
   let sum = 0;
 
-  for (const project of projects.value) {
+  for (const project of projects.value ?? []) {
     sum += project.downloads;
   }
 
   return sum;
 });
 
-const patchIcon = async (icon) => {
-  const ext = icon.name.split(".").pop();
-  await useBaseFetch(`organization/${organization.value.id}/icon`, {
-    method: "PATCH",
-    body: icon,
-    query: { ext },
-    apiVersion: 3,
-  });
-};
-
-const deleteIcon = async () => {
-  await useBaseFetch(`organization/${organization.value.id}/icon`, {
-    method: "DELETE",
-    apiVersion: 3,
-  });
-};
-
-const patchOrganization = async (id, newData) => {
-  await useBaseFetch(`organization/${id}`, {
-    method: "PATCH",
-    body: newData,
-    apiVersion: 3,
-  });
-
-  if (newData.slug) {
-    orgId = newData.slug;
-  }
-};
-
 const onAcceptInvite = useClientTry(async () => {
-  await acceptTeamInvite(organization.value.team_id);
+  await acceptTeamInvite(organization.value?.team_id);
   await refreshOrganization();
 });
 
 const onDeclineInvite = useClientTry(async () => {
-  await removeTeamMember(organization.value.team_id, auth.value?.user.id);
+  await removeTeamMember(organization.value?.team_id, auth.value?.user?.id);
   await refreshOrganization();
 });
 
-provide("organizationContext", {
-  organization,
-  projects,
-  refresh,
-  currentMember,
-  hasPermission,
-  patchIcon,
-  deleteIcon,
-  patchOrganization,
-});
+const organizationContext = new OrganizationContext(organization, projects, auth, tags, refresh);
+const { currentMember } = organizationContext;
+
+provideOrganizationContext(organizationContext);
 
 const title = `${organization.value.name} - Organization`;
 const description = `${organization.value.description} - View the organization ${organization.value.name} on Modrinth`;
@@ -492,13 +443,13 @@ useSeoMeta({
 const navLinks = computed(() => [
   {
     label: formatMessage(commonMessages.allProjectType),
-    href: `/organization/${organization.value.slug}`,
+    href: `/organization/${organization.value?.slug}`,
   },
   ...projectTypes.value
     .map((x) => {
       return {
-        label: formatMessage(getProjectTypeMessage(x, true)),
-        href: `/organization/${organization.value.slug}/${x}s`,
+        label: formatMessage(getProjectTypeMessage(x as ProjectType, true)),
+        href: `/organization/${organization.value?.slug}/${x}s`,
       };
     })
     .slice()
@@ -506,12 +457,12 @@ const navLinks = computed(() => [
 ]);
 
 async function copyId() {
-  await navigator.clipboard.writeText(organization.value.id);
+  await navigator.clipboard.writeText(organization.value?.id ?? "");
 }
 
 async function copyPermalink() {
   await navigator.clipboard.writeText(
-    `${config.public.siteUrl}/organization/${organization.value.id}`,
+    `${config.public.siteUrl}/organization/${organization.value?.id}`,
   );
 }
 </script>
diff --git a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
index f78ef4b742..23c0dc6a76 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
+++ b/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">
diff --git a/apps/frontend/src/pages/organization/[id]/settings/index.vue b/apps/frontend/src/pages/organization/[id]/settings/index.vue
index 2e6f21e414..e26030ea1d 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 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 {
@@ -10,7 +11,7 @@ const {
   deleteIcon,
   patchIcon,
   patchOrganization,
-} = inject("organizationContext");
+} = injectOrganizationContext();
 
 const icon = ref(null);
 const deletedIcon = ref(false);
diff --git a/apps/frontend/src/pages/organization/[id]/settings/members.vue b/apps/frontend/src/pages/organization/[id]/settings/members.vue
index 5257e37abf..e2115aef3f 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/members.vue
@@ -230,10 +230,11 @@ import {
 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 { addNotification } = injectNotificationManager();
-const { organization, refresh: refreshOrganization, currentMember } = inject("organizationContext");
+const { organization, refresh: refreshOrganization, currentMember } = injectOrganizationContext();
 
 const auth = await useAuth();
 
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index fd6f998ec9..c3a16b2781 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -324,11 +324,12 @@ 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();
 
diff --git a/apps/frontend/src/providers/organization-context.ts b/apps/frontend/src/providers/organization-context.ts
new file mode 100644
index 0000000000..f9c9002c81
--- /dev/null
+++ b/apps/frontend/src/providers/organization-context.ts
@@ -0,0 +1,108 @@
+import { createContext } from "@modrinth/ui";
+import { type Organization, type OrganizationMember, type ProjectV3 } from "@modrinth/utils";
+
+export class OrganizationContext {
+  public readonly organization: Ref<Organization | null>;
+  public readonly projects: Ref<ProjectV3[] | null>;
+  private readonly auth: Ref<any>;
+  private readonly tags: Ref<any>;
+  private readonly refreshFunction: () => Promise<void>;
+
+  public constructor(
+    organization: Ref<Organization | null>,
+    projects: Ref<ProjectV3[] | null>,
+    auth: Ref<any>,
+    tags: Ref<any>,
+    refreshFunction: () => Promise<void>,
+  ) {
+    this.organization = organization;
+    this.projects = projects;
+    this.auth = auth;
+    this.tags = tags;
+    this.refreshFunction = refreshFunction;
+  }
+
+  public refresh = async () => {
+    if (this.organization.value === null) {
+      throw new Error("Organization is not set.");
+    }
+
+    await this.refreshFunction();
+  };
+
+  public currentMember = computed<Partial<OrganizationMember> | null>(() => {
+    if (this.auth.value.user && this.organization.value) {
+      const member = this.organization.value.members.find(
+        (x) => x.user.id === this.auth.value.user.id,
+      );
+
+      if (member) {
+        return member;
+      }
+
+      if (this.tags.value.staffRoles.includes(this.auth.value.user.role)) {
+        return {
+          user: this.auth.value.user,
+          role: this.auth.value.user.role,
+          permissions: this.auth.value.user.role === "admin" ? 1023 : 12,
+          accepted: true,
+          payouts_split: 0,
+          avatar_url: this.auth.value.user.avatar_url,
+          name: this.auth.value.user.username,
+        } as Partial<OrganizationMember>;
+      }
+    }
+
+    return null;
+  });
+
+  public hasPermission = computed(() => {
+    const EDIT_DETAILS = 1 << 2;
+    return (
+      this.currentMember.value &&
+      (this.currentMember.value.permissions & EDIT_DETAILS) === EDIT_DETAILS
+    );
+  });
+
+  public patchIcon = async (icon: { name: string }) => {
+    if (this.organization.value === null) {
+      throw new Error("Organization is not set.");
+    }
+
+    const ext = icon.name.split(".").pop();
+    await useBaseFetch(`organization/${this.organization.value.id}/icon`, {
+      method: "PATCH",
+      body: icon,
+      query: { ext },
+      apiVersion: 3,
+    });
+  };
+
+  public deleteIcon = async () => {
+    if (this.organization.value === null) {
+      throw new Error("Organization is not set.");
+    }
+
+    await useBaseFetch(`organization/${this.organization.value.id}/icon`, {
+      method: "DELETE",
+      apiVersion: 3,
+    });
+  };
+
+  public patchOrganization = async (newData: { slug: any }) => {
+    if (this.organization.value === null) {
+      throw new Error("Organization is not set.");
+    }
+
+    await useBaseFetch(`organization/${this.organization.value.id}`, {
+      method: "PATCH",
+      body: newData,
+      apiVersion: 3,
+    });
+
+    await this.refreshFunction();
+  };
+}
+
+export const [injectOrganizationContext, provideOrganizationContext] =
+  createContext<OrganizationContext>("[id].vue", "organizationContext");
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index 61f553a207..f76a903e97 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -42,6 +42,76 @@ export interface GalleryImage {
   description?: string
 }
 
+export interface ProjectV3 {
+  id: ModrinthId
+  slug?: string
+  project_types: string[]
+  games: string[]
+  team_id: ModrinthId
+  organization?: ModrinthId
+  name: string
+  summary: string
+  description: string
+
+  published: string
+  updated: string
+  approved?: string
+  queued?: string
+
+  status: ProjectStatus
+  requested_status?: ProjectStatus
+
+  /** @deprecated moved to threads system */
+  moderator_message?: {
+    message: string
+    body?: string
+  }
+
+  license: {
+    id: string
+    name: string
+    url?: string
+  }
+
+  downloads: number
+  followers: number
+
+  categories: string[]
+  additional_categories: string[]
+  loaders: string[]
+
+  versions: ModrinthId[]
+  icon_url?: string
+
+  link_urls: Record<
+    string,
+    {
+      platform: string
+      donation: boolean
+      url: string
+    }
+  >
+
+  gallery: {
+    url: string
+    raw_url: string
+    featured: boolean
+    name?: string
+    description?: string
+    created: string
+    ordering: number
+  }[]
+
+  color?: number
+  thread_id: ModrinthId
+  monetization_status: MonetizationStatus
+  side_types_migration_review_status: 'reviewed' | 'pending'
+
+  [key: string]: any
+}
+
+export type SideTypesMigrationReviewStatus = 'reviewed' | 'pending'
+
 export interface Project {
   id: ModrinthId
   project_type: ProjectType

From d7ea034963b5b3eac2b6de4286a8f6c494d7f1c8 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Thu, 31 Jul 2025 13:20:39 +0100
Subject: [PATCH 06/14] feat: migrate app notifications to DI + frontend
 styling

---
 .vscode/settings.json                         |   1 -
 apps/app-frontend/src/App.vue                 | 102 +++++++++---------
 .../src/components/GridDisplay.vue            |  19 ++--
 .../src/components/RowDisplay.vue             |  37 +++----
 .../src/components/ui/AccountsCard.vue        |  21 ++--
 .../src/components/ui/AddContentButton.vue    |  10 +-
 .../src/components/ui/ErrorModal.vue          |  25 ++---
 .../src/components/ui/ExportModal.vue         |  11 +-
 .../src/components/ui/Instance.vue            |  20 ++--
 .../components/ui/InstanceCreationModal.vue   |  33 +++---
 .../src/components/ui/JavaDetectionModal.vue  |  13 +--
 .../src/components/ui/JavaSelector.vue        |  21 ++--
 .../components/ui/QuickInstanceSwitcher.vue   |  13 +--
 .../src/components/ui/RunningAppBar.vue       |  19 ++--
 .../src/components/ui/URLConfirmModal.vue     |  11 +-
 .../src/components/ui/friends/FriendsList.vue |  27 +++--
 .../IncompatibilityWarningModal.vue           |  11 +-
 .../ui/install_flow/InstallConfirmModal.vue   |  11 +-
 .../ui/install_flow/ModInstallModal.vue       |  32 +++---
 .../ui/instance_settings/GeneralSettings.vue  |  23 ++--
 .../ui/instance_settings/HooksSettings.vue    |  13 +--
 .../InstallationSettings.vue                  |  44 ++++----
 .../ui/instance_settings/JavaSettings.vue     |  17 +--
 .../ui/instance_settings/WindowSettings.vue   |  11 +-
 .../components/ui/settings/JavaSettings.vue   |   8 +-
 .../settings/ResourceManagementSettings.vue   |  10 +-
 .../src/components/ui/skin/EditSkinModal.vue  |  39 +++----
 .../components/ui/skin/UploadSkinModal.vue    |  12 +--
 .../src/components/ui/world/InstanceItem.vue  |  30 +++---
 .../components/ui/world/RecentWorldsList.vue  |  30 +++---
 .../ui/world/modal/AddServerModal.vue         |  13 +--
 .../ui/world/modal/EditServerModal.vue        |  17 +--
 .../modal/EditSingleplayerWorldModal.vue      |  13 +--
 .../src/composables/useMemorySlider.js        |   5 +-
 apps/app-frontend/src/helpers/fetch.js        |   5 +-
 apps/app-frontend/src/helpers/profile.js      |   5 +-
 apps/app-frontend/src/helpers/skins.ts        |   6 +-
 apps/app-frontend/src/main.js                 |  12 +--
 apps/app-frontend/src/pages/Browse.vue        |  36 ++++---
 apps/app-frontend/src/pages/Index.vue         |  18 ++--
 apps/app-frontend/src/pages/Skins.vue         |  66 ++++++------
 .../app-frontend/src/pages/instance/Index.vue |  44 ++++----
 apps/app-frontend/src/pages/instance/Logs.vue |  18 ++--
 apps/app-frontend/src/pages/instance/Mods.vue |  61 ++++++-----
 .../src/pages/instance/Worlds.vue             |  67 ++++++------
 apps/app-frontend/src/pages/library/Index.vue |  16 +--
 apps/app-frontend/src/pages/project/Index.vue |  44 ++++----
 .../src/pages/project/Versions.vue            |  14 ++-
 .../src/providers/app-notifications.ts        |  56 ++++++++++
 apps/app-frontend/src/store/install.js        |  12 ++-
 apps/app-frontend/src/store/notifications.js  |  25 -----
 apps/app-frontend/src/store/state.js          |   7 +-
 ...fications.ts => frontend-notifications.ts} |   0
 53 files changed, 670 insertions(+), 564 deletions(-)
 create mode 100644 apps/app-frontend/src/providers/app-notifications.ts
 delete mode 100644 apps/app-frontend/src/store/notifications.js
 rename apps/frontend/src/providers/{web-notifications.ts => frontend-notifications.ts} (100%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c900f4ec03..4d178702a8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,6 +6,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "always",
-    "source.sortImports": "always"
   }
 }
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index abfabdf526..45c63eb487 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1,6 +1,35 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch, provide } from 'vue'
-import { RouterView, useRoute, useRouter } from 'vue-router'
+import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
+import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
+import AccountsCard from '@/components/ui/AccountsCard.vue'
+import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
+import ErrorModal from '@/components/ui/ErrorModal.vue'
+import FriendsList from '@/components/ui/friends/FriendsList.vue'
+import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
+import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
+import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
+import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
+import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
+import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
+import NavButton from '@/components/ui/NavButton.vue'
+import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
+import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
+import RunningAppBar from '@/components/ui/RunningAppBar.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'
+import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
+import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
+import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
+import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { get_user } from '@/helpers/cache.js'
+import { command_listener, warning_listener } from '@/helpers/events.js'
+import { useFetch } from '@/helpers/fetch.js'
+import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
+import { get } from '@/helpers/settings.ts'
+import { get_opening_command, initialize_state } from '@/helpers/state'
+import { getOS, isDev, restartApp } from '@/helpers/utils.js'
+import { useError } from '@/store/error.js'
+import { useInstall } from '@/store/install.js'
+import { useLoading, useTheming } from '@/store/state'
 import {
   ArrowBigUpDashIcon,
   ChangeSkinIcon,
@@ -13,68 +42,44 @@ import {
   LogOutIcon,
   MaximizeIcon,
   MinimizeIcon,
+  NewspaperIcon,
   PlusIcon,
   RestoreIcon,
   RightArrowIcon,
   SettingsIcon,
   WorldIcon,
   XIcon,
-  NewspaperIcon,
 } from '@modrinth/assets'
 import {
   Avatar,
   Button,
   ButtonStyled,
-  Notifications,
-  OverflowMenu,
   NewsArticleCard,
+  NotificationPanel,
+  OverflowMenu,
+  provideNotificationManager,
 } from '@modrinth/ui'
-import { useLoading, useTheming } from '@/store/state'
-import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
-import AccountsCard from '@/components/ui/AccountsCard.vue'
-import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { get } from '@/helpers/settings.ts'
-import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
-import RunningAppBar from '@/components/ui/RunningAppBar.vue'
-import SplashScreen from '@/components/ui/SplashScreen.vue'
-import ErrorModal from '@/components/ui/ErrorModal.vue'
-import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
-import { handleError, useNotifications } from '@/store/notifications.js'
-import { command_listener, warning_listener } from '@/helpers/events.js'
-import { type } from '@tauri-apps/plugin-os'
-import { getOS, isDev, restartApp } from '@/helpers/utils.js'
-import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
-import { getCurrentWindow } from '@tauri-apps/api/window'
+import { renderString } from '@modrinth/utils'
 import { getVersion } from '@tauri-apps/api/app'
-import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
-import { create_profile_and_install_from_file } from './helpers/pack'
-import { useError } from '@/store/error.js'
-import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
-import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
-import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
-import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
-import { useInstall } from '@/store/install.js'
 import { invoke } from '@tauri-apps/api/core'
-import { get_opening_command, initialize_state } from '@/helpers/state'
-import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { renderString } from '@modrinth/utils'
-import { useFetch } from '@/helpers/fetch.js'
-import { check } from '@tauri-apps/plugin-updater'
-import NavButton from '@/components/ui/NavButton.vue'
-import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
-import { get_user } from '@/helpers/cache.js'
-import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
-import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
-import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
-import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
-import FriendsList from '@/components/ui/friends/FriendsList.vue'
+import { getCurrentWindow } from '@tauri-apps/api/window'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
-import { get_available_capes, get_available_skins } from './helpers/skins'
+import { type } from '@tauri-apps/plugin-os'
+import { check } from '@tauri-apps/plugin-updater'
+import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
+import { create_profile_and_install_from_file } from './helpers/pack'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
+import { get_available_capes, get_available_skins } from './helpers/skins'
+import { AppNotificationManager } from './providers/app-notifications'
 
 const themeStore = useTheming()
 
+const notificationManager = new AppNotificationManager()
+provideNotificationManager(notificationManager)
+const { handleError, addNotification } = notificationManager
+
 const news = ref([])
 
 const urlModal = ref(null)
@@ -167,7 +172,7 @@ async function setupApp() {
   }
 
   await warning_listener((e) =>
-    notificationsWrapper.value.addNotification({
+    addNotification({
       title: 'Warning',
       text: e.message,
       type: 'warn',
@@ -251,9 +256,6 @@ const route = useRoute()
 const loading = useLoading()
 loading.setEnabled(false)
 
-const notifications = useNotifications()
-const notificationsWrapper = ref()
-
 const error = useError()
 const errorModal = ref()
 
@@ -335,8 +337,6 @@ watch(
 onMounted(() => {
   invoke('show_window')
 
-  notifications.setNotifs(notificationsWrapper.value)
-
   error.setErrorModal(errorModal.value)
 
   install.setIncompatibilityWarningModal(incompatibilityWarningModal)
@@ -657,7 +657,7 @@ function handleAuxClick(e) {
     </div>
   </div>
   <URLConfirmModal ref="urlModal" />
-  <Notifications ref="notificationsWrapper" sidebar />
+  <NotificationPanel />
   <ErrorModal ref="errorModal" />
   <ModInstallModal ref="modInstallModal" />
   <IncompatibilityWarningModal ref="incompatibilityWarningModal" />
diff --git a/apps/app-frontend/src/components/GridDisplay.vue b/apps/app-frontend/src/components/GridDisplay.vue
index 2ced29564b..896c55b984 100644
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -1,24 +1,25 @@
 <script setup>
+import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
-import { computed, ref } from 'vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { duplicate, remove } from '@/helpers/profile.js'
 import {
   ClipboardCopyIcon,
+  EyeIcon,
   FolderOpenIcon,
   PlayIcon,
   PlusIcon,
-  TrashIcon,
-  StopCircleIcon,
-  EyeIcon,
   SearchIcon,
+  StopCircleIcon,
+  TrashIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect } from '@modrinth/ui'
+import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
 import { formatCategoryHeader } from '@modrinth/utils'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
 import dayjs from 'dayjs'
-import { duplicate, remove } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { computed, ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
   instances: {
diff --git a/apps/app-frontend/src/components/RowDisplay.vue b/apps/app-frontend/src/components/RowDisplay.vue
index d40546486e..f0a3edbdd6 100644
--- a/apps/app-frontend/src/components/RowDisplay.vue
+++ b/apps/app-frontend/src/components/RowDisplay.vue
@@ -1,31 +1,32 @@
 <script setup>
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import Instance from '@/components/ui/Instance.vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ProjectCard from '@/components/ui/ProjectCard.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_by_profile_path } from '@/helpers/process.js'
+import { duplicate, kill, remove, run } from '@/helpers/profile.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import { handleSevereError } from '@/store/error.js'
+import { install as installVersion } from '@/store/install.js'
 import {
   ClipboardCopyIcon,
+  DownloadIcon,
+  ExternalIcon,
+  EyeIcon,
   FolderOpenIcon,
+  GlobeIcon,
   PlayIcon,
   PlusIcon,
-  TrashIcon,
-  DownloadIcon,
-  GlobeIcon,
   StopCircleIcon,
-  ExternalIcon,
-  EyeIcon,
+  TrashIcon,
 } from '@modrinth/assets'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import Instance from '@/components/ui/Instance.vue'
+import { HeadingLink, injectNotificationManager } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import ProjectCard from '@/components/ui/ProjectCard.vue'
-import { get_by_profile_path } from '@/helpers/process.js'
-import { handleError } from '@/store/notifications.js'
-import { duplicate, kill, remove, run } from '@/helpers/profile.js'
 import { useRouter } from 'vue-router'
-import { showProfileInFolder } from '@/helpers/utils.js'
-import { trackEvent } from '@/helpers/analytics'
-import { handleSevereError } from '@/store/error.js'
-import { install as installVersion } from '@/store/install.js'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import { HeadingLink } from '@modrinth/ui'
+
+const { handleError } = injectNotificationManager()
 
 const router = useRouter()
 
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index 5cb4f6050c..f26d8c6f65 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -73,22 +73,23 @@
 </template>
 
 <script setup>
-import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, SpinnerIcon } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
-import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
+import { trackEvent } from '@/helpers/analytics'
 import {
-  users,
+  get_default_user,
+  login as login_flow,
   remove_user,
   set_default_user,
-  login as login_flow,
-  get_default_user,
+  users,
 } from '@/helpers/auth'
-import { handleError } from '@/store/state.js'
-import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
-import { handleSevereError } from '@/store/error.js'
-import { get_available_skins } from '@/helpers/skins'
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { get_available_skins } from '@/helpers/skins'
+import { handleSevereError } from '@/store/error.js'
+import { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 defineProps({
   mode: {
diff --git a/apps/app-frontend/src/components/ui/AddContentButton.vue b/apps/app-frontend/src/components/ui/AddContentButton.vue
index 414634c92d..3b73b3397c 100644
--- a/apps/app-frontend/src/components/ui/AddContentButton.vue
+++ b/apps/app-frontend/src/components/ui/AddContentButton.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { DropdownIcon, PlusIcon, FolderOpenIcon } from '@modrinth/assets'
-import { ButtonStyled, OverflowMenu } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
 import { add_project_from_path } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
+import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
+
 const props = defineProps({
   instance: {
     type: Object,
diff --git a/apps/app-frontend/src/components/ui/ErrorModal.vue b/apps/app-frontend/src/components/ui/ErrorModal.vue
index bae9190815..bdd1acf798 100644
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -1,23 +1,24 @@
 <script setup>
+import { ChatIcon } from '@/assets/icons'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { install } from '@/helpers/profile.js'
+import { cancel_directory_change } from '@/helpers/settings.ts'
+import { handleSevereError } from '@/store/error.js'
 import {
   CheckIcon,
+  CopyIcon,
   DropdownIcon,
-  XIcon,
   HammerIcon,
   LogInIcon,
   UpdatedIcon,
-  CopyIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { ChatIcon } from '@/assets/icons'
-import { ButtonStyled, Collapsible } from '@modrinth/ui'
-import { ref, computed } from 'vue'
-import { login as login_flow, set_default_user } from '@/helpers/auth.js'
-import { handleError } from '@/store/notifications.js'
-import { handleSevereError } from '@/store/error.js'
-import { cancel_directory_change } from '@/helpers/settings.ts'
-import { install } from '@/helpers/profile.js'
-import { trackEvent } from '@/helpers/analytics'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const errorModal = ref()
 const error = ref()
diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue
index 0b96afb113..3957a5addc 100644
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -1,12 +1,13 @@
 <script setup>
-import { XIcon, PlusIcon } from '@modrinth/assets'
-import { Button, Checkbox } from '@modrinth/ui'
 import { PackageIcon, VersionIcon } from '@/assets/icons'
-import { ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { Button, Checkbox, injectNotificationManager } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
-import { handleError } from '@/store/notifications.js'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
   instance: {
diff --git a/apps/app-frontend/src/components/ui/Instance.vue b/apps/app-frontend/src/components/ui/Instance.vue
index 3f9176f60c..c515ed2be4 100644
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -1,6 +1,10 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { trackEvent } from '@/helpers/analytics'
+import { process_listener } from '@/helpers/events'
+import { get_by_profile_path } from '@/helpers/process'
+import { finish_install, kill, run } from '@/helpers/profile'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import { handleSevereError } from '@/store/error.js'
 import {
   DownloadIcon,
   GameIcon,
@@ -9,17 +13,13 @@ import {
   StopCircleIcon,
   TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, useRelativeTime } from '@modrinth/ui'
+import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { finish_install, kill, run } from '@/helpers/profile'
-import { get_by_profile_path } from '@/helpers/process'
-import { process_listener } from '@/helpers/events'
-import { handleError } from '@/store/state.js'
-import { showProfileInFolder } from '@/helpers/utils.js'
-import { handleSevereError } from '@/store/error.js'
-import { trackEvent } from '@/helpers/analytics'
 import dayjs from 'dayjs'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps({
diff --git a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
index ee6328ff09..7c7d005222 100644
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -198,6 +198,17 @@
 
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { trackEvent } from '@/helpers/analytics'
+import {
+  get_default_launcher_path,
+  get_importable_instances,
+  import_instance,
+} from '@/helpers/import.js'
+import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
+import { create_profile_and_install_from_file } from '@/helpers/pack.js'
+import { create } from '@/helpers/profile'
+import { get_loaders } from '@/helpers/tags'
 import {
   CodeIcon,
   FolderOpenIcon,
@@ -208,24 +219,14 @@ import {
   UploadIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Checkbox, Chips } from '@modrinth/ui'
-import { computed, onUnmounted, ref, shallowRef } from 'vue'
-import { get_loaders } from '@/helpers/tags'
-import { create } from '@/helpers/profile'
-import { open } from '@tauri-apps/plugin-dialog'
+import { Avatar, Button, Checkbox, Chips, injectNotificationManager } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
-import { handleError } from '@/store/notifications.js'
-import Multiselect from 'vue-multiselect'
-import { trackEvent } from '@/helpers/analytics'
-import { create_profile_and_install_from_file } from '@/helpers/pack.js'
-import {
-  get_default_launcher_path,
-  get_importable_instances,
-  import_instance,
-} from '@/helpers/import.js'
-import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, onUnmounted, ref, shallowRef } from 'vue'
+import Multiselect from 'vue-multiselect'
+
+const { handleError } = injectNotificationManager()
 
 const profile_name = ref('')
 const game_version = ref('')
diff --git a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
index bbb2a86cad..960b33e880 100644
--- a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
+++ b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
@@ -35,13 +35,14 @@
   </ModalWrapper>
 </template>
 <script setup>
-import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { ref } from 'vue'
-import { find_filtered_jres } from '@/helpers/jre.js'
-import { handleError } from '@/store/notifications.js'
-import { trackEvent } from '@/helpers/analytics'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { find_filtered_jres } from '@/helpers/jre.js'
+import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
diff --git a/apps/app-frontend/src/components/ui/JavaSelector.vue b/apps/app-frontend/src/components/ui/JavaSelector.vue
index ebbeed89c0..da712eec67 100644
--- a/apps/app-frontend/src/components/ui/JavaSelector.vue
+++ b/apps/app-frontend/src/components/ui/JavaSelector.vue
@@ -52,21 +52,22 @@
 </template>
 
 <script setup>
+import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
 import {
-  SearchIcon,
-  PlayIcon,
   CheckIcon,
-  XIcon,
-  FolderSearchIcon,
   DownloadIcon,
+  FolderSearchIcon,
+  PlayIcon,
+  SearchIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
-import { ref } from 'vue'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
-import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import { handleError } from '@/store/state.js'
-import { trackEvent } from '@/helpers/analytics'
+import { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
   version: {
diff --git a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
index 77099feb51..0a5130fb87 100644
--- a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
+++ b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
@@ -1,13 +1,14 @@
 <script setup>
+import NavButton from '@/components/ui/NavButton.vue'
+import { profile_listener } from '@/helpers/events.js'
 import { list } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
+import { SpinnerIcon } from '@modrinth/assets'
+import { Avatar, injectNotificationManager } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { onUnmounted, ref } from 'vue'
-import { profile_listener } from '@/helpers/events.js'
-import NavButton from '@/components/ui/NavButton.vue'
-import { Avatar } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { SpinnerIcon } from '@modrinth/assets'
+
+const { handleError } = injectNotificationManager()
 
 const recentInstances = ref([])
 const getInstances = async () => {
diff --git a/apps/app-frontend/src/components/ui/RunningAppBar.vue b/apps/app-frontend/src/components/ui/RunningAppBar.vue
index 292ce70204..3572b2e9ff 100644
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -94,23 +94,24 @@
 </template>
 
 <script setup>
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { loading_listener, process_listener } from '@/helpers/events'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { get_many } from '@/helpers/profile.js'
+import { progress_bars_list } from '@/helpers/state.js'
 import {
   DownloadIcon,
+  DropdownIcon,
   StopCircleIcon,
   TerminalSquareIcon,
-  DropdownIcon,
   UnplugIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, Card } from '@modrinth/ui'
+import { Button, ButtonStyled, Card, injectNotificationManager } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-import { loading_listener, process_listener } from '@/helpers/events'
 import { useRouter } from 'vue-router'
-import { progress_bars_list } from '@/helpers/state.js'
-import ProgressBar from '@/components/ui/ProgressBar.vue'
-import { handleError } from '@/store/notifications.js'
-import { get_many } from '@/helpers/profile.js'
-import { trackEvent } from '@/helpers/analytics'
+
+const { handleError } = injectNotificationManager()
 
 const router = useRouter()
 const card = ref(null)
diff --git a/apps/app-frontend/src/components/ui/URLConfirmModal.vue b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
index 91014edc8c..ca598506d0 100644
--- a/apps/app-frontend/src/components/ui/URLConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
@@ -1,12 +1,13 @@
 <script setup>
-import { Button } from '@modrinth/ui'
-import { ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import SearchCard from '@/components/ui/SearchCard.vue'
+import { get_project, get_version } from '@/helpers/cache.js'
 import { get_categories } from '@/helpers/tags.js'
-import { handleError } from '@/store/notifications.js'
-import { get_version, get_project } from '@/helpers/cache.js'
 import { install as installVersion } from '@/store/install.js'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const confirmModal = ref(null)
 const project = ref(null)
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index 095e4d1e98..4b5ca6fcc7 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -1,23 +1,30 @@
 <script setup lang="ts">
-import { Avatar, ButtonStyled, OverflowMenu, useRelativeTime } from '@modrinth/ui'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_user_many } from '@/helpers/cache'
+import { friend_listener } from '@/helpers/events'
+import { add_friend, friend_statuses, friends, remove_friend } from '@/helpers/friends'
+import type { AppNotificationManager } from '@/providers/app-notifications'
 import {
-  UserPlusIcon,
-  MoreVerticalIcon,
   MailIcon,
+  MoreVerticalIcon,
   SettingsIcon,
   TrashIcon,
+  UserPlusIcon,
   XIcon,
 } from '@modrinth/assets'
-import { ref, onUnmounted, watch, computed } from 'vue'
-import { friend_listener } from '@/helpers/events'
-import { friends, friend_statuses, add_friend, remove_friend } from '@/helpers/friends'
-import { get_user_many } from '@/helpers/cache'
-import { handleError } from '@/store/notifications.js'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+import {
+  Avatar,
+  ButtonStyled,
+  injectNotificationManager,
+  OverflowMenu,
+  useRelativeTime,
+} from '@modrinth/ui'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{
diff --git a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
index 31029e1e6d..e8c860cb74 100644
--- a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
@@ -57,15 +57,16 @@
 
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { XIcon, DownloadIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { trackEvent } from '@/helpers/analytics'
 import { add_project_from_version as installMod } from '@/helpers/profile'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
 import { ref } from 'vue'
-import { handleError } from '@/store/state.js'
-import { trackEvent } from '@/helpers/analytics'
 import Multiselect from 'vue-multiselect'
 
+const { handleError } = injectNotificationManager()
+
 const instance = ref(null)
 const project = ref(null)
 const versions = ref(null)
diff --git a/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue b/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
index 6803c350ed..ba0f7e7805 100644
--- a/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
 import { create_profile_and_install as pack_install } from '@/helpers/pack'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-import { trackEvent } from '@/helpers/analytics'
-import { handleError } from '@/store/state.js'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+
+const { handleError } = injectNotificationManager()
 
 const versionId = ref()
 const project = ref()
diff --git a/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue b/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue
index f89df8bc4a..0a75987b2b 100644
--- a/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue
@@ -1,29 +1,29 @@
 <script setup>
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import {
+  check_installed,
+  create,
+  get,
+  add_project_from_version as installMod,
+  list,
+} from '@/helpers/profile'
+import { installVersionDependencies } from '@/store/install.js'
 import {
+  CheckIcon,
   DownloadIcon,
   PlusIcon,
+  RightArrowIcon,
   UploadIcon,
   XIcon,
-  RightArrowIcon,
-  CheckIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-import {
-  add_project_from_version as installMod,
-  check_installed,
-  get,
-  list,
-  create,
-} from '@/helpers/profile'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
-import { installVersionDependencies } from '@/store/install.js'
-import { handleError } from '@/store/notifications.js'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { trackEvent } from '@/helpers/analytics'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
+const { handleError } = injectNotificationManager()
 const router = useRouter()
 
 const versions = ref()
diff --git a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
index 6d035dce6d..d5aad05cb9 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { SpinnerIcon, TrashIcon, UploadIcon, PlusIcon, EditIcon, CopyIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, OverflowMenu, Checkbox } from '@modrinth/ui'
-import { computed, ref, type Ref, watch } from 'vue'
-import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
+import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  injectNotificationManager,
+  OverflowMenu,
+} from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
 import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, type Ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import type { InstanceSettingsTabProps, GameInstance } from '../../../helpers/types'
+import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 const router = useRouter()
 
diff --git a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
index c7de8bece7..201436cd0d 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings.ts'
 import { edit } from '@/helpers/profile'
-import type { InstanceSettingsTabProps, AppSettings, Hooks } from '../../../helpers/types'
+import { get } from '@/helpers/settings.ts'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { Checkbox, injectNotificationManager } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, watch } from 'vue'
+import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
diff --git a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
index 7810581a36..6127602768 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -1,23 +1,31 @@
 <script setup lang="ts">
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project, get_version_many } from '@/helpers/cache'
+import { get_loader_versions } from '@/helpers/metadata'
+import { edit, install, update_repair_modrinth } from '@/helpers/profile'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
+import type { AppNotificationManager } from '@/providers/app-notifications'
 import {
-  TransferIcon,
-  IssuesIcon,
-  HammerIcon,
   DownloadIcon,
-  WrenchIcon,
-  UndoIcon,
+  HammerIcon,
+  IssuesIcon,
   SpinnerIcon,
-  UnplugIcon,
+  TransferIcon,
+  UndoIcon,
   UnlinkIcon,
+  UnplugIcon,
+  WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, Checkbox, Chips, ButtonStyled, TeleportDropdownMenu } from '@modrinth/ui'
-import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
-import { edit, install, update_repair_modrinth } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { trackEvent } from '@/helpers/analytics'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get_loader_versions } from '@/helpers/metadata'
-import { get_game_versions, get_loaders } from '@/helpers/tags'
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  Chips,
+  TeleportDropdownMenu,
+  injectNotificationManager,
+} from '@modrinth/ui'
 import {
   formatCategory,
   type GameVersionTag,
@@ -25,16 +33,16 @@ import {
   type Project,
   type Version,
 } from '@modrinth/utils'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { get_project, get_version_many } from '@/helpers/cache'
-import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
+import { computed, ref, shallowRef, watch, type ComputedRef, type Ref } from 'vue'
 import type {
   InstanceSettingsTabProps,
-  ManifestLoaderVersion,
   Manifest,
+  ManifestLoaderVersion,
 } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 
 const repairConfirmModal = ref()
diff --git a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
index cd1b58d3d9..4097c5d8b3 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { Checkbox, Slider } from '@modrinth/ui'
-import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { computed, readonly, ref, watch } from 'vue'
-import { edit, get_optimal_jre_key } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
-import { get } from '@/helpers/settings.ts'
-import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'
 import useMemorySlider from '@/composables/useMemorySlider'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
+import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, readonly, ref, watch } from 'vue'
+import type { AppSettings, InstanceSettingsTabProps, MemorySettings } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
diff --git a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
index 3f2f88270a..11d9b5c052 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { Checkbox, Toggle } from '@modrinth/ui'
-import { computed, ref, type Ref, watch } from 'vue'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings.ts'
 import { edit } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, type Ref, watch } from 'vue'
 import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
diff --git a/apps/app-frontend/src/components/ui/settings/JavaSettings.vue b/apps/app-frontend/src/components/ui/settings/JavaSettings.vue
index 226c809d1c..f47b316da4 100644
--- a/apps/app-frontend/src/components/ui/settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/JavaSettings.vue
@@ -1,8 +1,10 @@
 <script setup>
-import { ref } from 'vue'
-import { get_java_versions, set_java_version } from '@/helpers/jre'
-import { handleError } from '@/store/notifications'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
+import { get_java_versions, set_java_version } from '@/helpers/jre'
+import { injectNotificationManager } from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const javaVersions = ref(await get_java_versions().catch(handleError))
 async function updateJavaVersion(version) {
diff --git a/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue b/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
index 328e329ce4..cfbed3360a 100644
--- a/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { Button, Slider } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings.ts'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import { purge_cache_types } from '@/helpers/cache.js'
-import { handleError } from '@/store/notifications.js'
+import { get, set } from '@/helpers/settings.ts'
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { Button, Slider, injectNotificationManager } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
+import { ref, watch } from 'vue'
 
+const { handleError } = injectNotificationManager()
 const settings = ref(await get())
 
 watch(
diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index 06b45fd1df..79322e2dcb 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -100,37 +100,40 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, useTemplateRef } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import {
-  SkinPreviewRenderer,
-  Button,
-  RadioButtons,
-  CapeButton,
-  CapeLikeTextButton,
-  ButtonStyled,
-} from '@modrinth/ui'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
 import {
   add_and_equip_custom_skin,
+  determineModelType,
+  get_normalized_skin_texture,
   remove_custom_skin,
   unequip_skin,
-  type Skin,
   type Cape,
+  type Skin,
   type SkinModel,
-  get_normalized_skin_texture,
-  determineModelType,
 } from '@/helpers/skins.ts'
-import { handleError } from '@/store/notifications'
+import type { AppNotificationManager } from '@/providers/app-notifications'
 import {
-  UploadIcon,
   CheckIcon,
-  SaveIcon,
-  XIcon,
   ChevronRightIcon,
+  SaveIcon,
   SpinnerIcon,
+  UploadIcon,
+  XIcon,
 } from '@modrinth/assets'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
+import {
+  Button,
+  ButtonStyled,
+  CapeButton,
+  CapeLikeTextButton,
+  injectNotificationManager,
+  RadioButtons,
+  SkinPreviewRenderer,
+} from '@modrinth/ui'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+
+const { handleError } = injectNotificationManager() as AppNotificationManager
 
 const modal = useTemplateRef('modal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
diff --git a/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue b/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
index 818922effb..8cdf0e5f3d 100644
--- a/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
@@ -27,14 +27,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeUnmount, watch } from 'vue'
-import { UploadIcon } from '@modrinth/assets'
-import { useNotifications } from '@/store/state'
-import { getCurrentWebview } from '@tauri-apps/api/webview'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get_dragged_skin_data } from '@/helpers/skins'
+import { UploadIcon } from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { onBeforeUnmount, ref, watch } from 'vue'
 
-const notifications = useNotifications()
+const { addNotification } = injectNotificationManager()
 
 const modal = ref()
 const fileInput = ref<HTMLInputElement>()
@@ -99,7 +99,7 @@ async function setupDragDropListener() {
           const data = await get_dragged_skin_data(filePath)
           await processData(data.buffer)
         } catch (error) {
-          notifications.addNotification({
+          addNotification({
             title: 'Error processing file',
             text: error instanceof Error ? error.message : 'Failed to read the dropped file.',
             type: 'error',
diff --git a/apps/app-frontend/src/components/ui/world/InstanceItem.vue b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
index 12fc674681..2fc3e25f01 100644
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
-import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project } from '@/helpers/cache'
+import { process_listener } from '@/helpers/events'
+import { get_by_profile_path } from '@/helpers/process'
+import { kill, run } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
+import { showProfileInFolder } from '@/helpers/utils'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { handleSevereError } from '@/store/error'
 import {
   EyeIcon,
   FolderOpenIcon,
@@ -13,25 +20,20 @@ import {
   Avatar,
   ButtonStyled,
   commonMessages,
+  injectNotificationManager,
   OverflowMenu,
   SmartClickable,
   useRelativeTime,
 } from '@modrinth/ui'
-import { useVIntl } from '@vintl/vintl'
-import { computed, nextTick, ref, onMounted, onUnmounted } from 'vue'
-import { showProfileInFolder } from '@/helpers/utils'
+import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
+import { useVIntl } from '@vintl/vintl'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import type { GameInstance } from '@/helpers/types'
-import { get_project } from '@/helpers/cache'
-import { capitalizeString } from '@modrinth/utils'
-import { kill, run } from '@/helpers/profile'
-import { handleSevereError } from '@/store/error'
-import { trackEvent } from '@/helpers/analytics'
-import { get_by_profile_path } from '@/helpers/process'
-import { handleError } from '@/store/notifications'
-import { process_listener } from '@/helpers/events'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 
diff --git a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
index 5f80a194f9..14ad67b32a 100644
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -1,30 +1,32 @@
 <script setup lang="ts">
+import InstanceItem from '@/components/ui/world/InstanceItem.vue'
+import WorldItem from '@/components/ui/world/WorldItem.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { process_listener, profile_listener } from '@/helpers/events'
+import { get_all } from '@/helpers/process'
+import { kill, run } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
 import {
   type ProtocolVersion,
-  type ServerWorld,
   type ServerData,
+  type ServerWorld,
   type WorldWithProfile,
-  get_recent_worlds,
   getWorldIdentifier,
   get_profile_protocol_version,
+  get_recent_worlds,
   refreshServerData,
   start_join_server,
   start_join_singleplayer_world,
 } from '@/helpers/worlds.ts'
-import { HeadingLink, GAME_MODES } from '@modrinth/ui'
-import WorldItem from '@/components/ui/world/WorldItem.vue'
-import InstanceItem from '@/components/ui/world/InstanceItem.vue'
-import { watch, onMounted, onUnmounted, ref, computed } from 'vue'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { handleSevereError } from '@/store/error'
+import { useTheming } from '@/store/theme.ts'
+import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import { useTheming } from '@/store/theme.ts'
-import { kill, run } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { trackEvent } from '@/helpers/analytics'
-import { process_listener, profile_listener } from '@/helpers/events'
-import { get_all } from '@/helpers/process'
-import type { GameInstance } from '@/helpers/types'
-import { handleSevereError } from '@/store/error'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+const { handleError } = injectNotificationManager() as AppNotificationManager
 
 const props = defineProps<{
   recentInstances: GameInstance[]
diff --git a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
index 00fab96ecc..b03996993b 100644
--- a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { ref } from 'vue'
+import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
-import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
 import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { handleError } from '@/store/notifications'
-import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+import { ref } from 'vue'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
index 5e03bbb89d..924afd9f70 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import { SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { computed, ref } from 'vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
+import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
 import {
-  type ServerPackStatus,
   edit_server_in_profile,
-  type ServerWorld,
   set_world_display_status,
   type DisplayStatus,
+  type ServerPackStatus,
+  type ServerWorld,
 } from '@/helpers/worlds.ts'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { SaveIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { defineMessage, useVIntl } from '@vintl/vintl'
-import { handleError } from '@/store/notifications'
-import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
-import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
+import { computed, ref } from 'vue'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
index 5a01d93ece..19ff99a31a 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { ChevronRightIcon, SaveIcon, XIcon, UndoIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages } from '@modrinth/ui'
-import { computed, ref } from 'vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
 import type { GameInstance } from '@/helpers/types'
 import type { DisplayStatus, SingleplayerWorld } from '@/helpers/worlds.ts'
-import { set_world_display_status, rename_world, reset_world_icon } from '@/helpers/worlds.ts'
+import { rename_world, reset_world_icon, set_world_display_status } from '@/helpers/worlds.ts'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { handleError } from '@/store/notifications'
-import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
+import { computed, ref } from 'vue'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
diff --git a/apps/app-frontend/src/composables/useMemorySlider.js b/apps/app-frontend/src/composables/useMemorySlider.js
index c52f457e06..78738cbd47 100644
--- a/apps/app-frontend/src/composables/useMemorySlider.js
+++ b/apps/app-frontend/src/composables/useMemorySlider.js
@@ -1,8 +1,9 @@
-import { ref, computed } from 'vue'
 import { get_max_memory } from '@/helpers/jre.js'
-import { handleError } from '@/store/notifications.js'
+import { injectNotificationManager } from '@modrinth/ui'
+import { computed, ref } from 'vue'
 
 export default async function () {
+  const { handleError } = injectNotificationManager()
   const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
 
   const snapPoints = computed(() => {
diff --git a/apps/app-frontend/src/helpers/fetch.js b/apps/app-frontend/src/helpers/fetch.js
index 5c5cf39cf2..b9f27f5513 100644
--- a/apps/app-frontend/src/helpers/fetch.js
+++ b/apps/app-frontend/src/helpers/fetch.js
@@ -1,6 +1,6 @@
-import { fetch } from '@tauri-apps/plugin-http'
-import { handleError } from '@/store/state.js'
+import { injectNotificationManager } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
+import { fetch } from '@tauri-apps/plugin-http'
 
 export const useFetch = async (url, item, isSilent) => {
   try {
@@ -11,6 +11,7 @@ export const useFetch = async (url, item, isSilent) => {
     })
   } catch (err) {
     if (!isSilent) {
+      const { handleError } = injectNotificationManager()
       handleError({ message: `Error fetching ${item}` })
     }
     console.error(err)
diff --git a/apps/app-frontend/src/helpers/profile.js b/apps/app-frontend/src/helpers/profile.js
index ed9741bdbc..13086606e9 100644
--- a/apps/app-frontend/src/helpers/profile.js
+++ b/apps/app-frontend/src/helpers/profile.js
@@ -3,9 +3,9 @@
  * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
-import { invoke } from '@tauri-apps/api/core'
 import { install_to_existing_profile } from '@/helpers/pack.js'
-import { handleError } from '@/store/notifications.js'
+import { injectNotificationManager } from '@modrinth/ui'
+import { invoke } from '@tauri-apps/api/core'
 
 /// Add instance
 /*
@@ -190,6 +190,7 @@ export async function edit_icon(path, iconPath) {
 }
 
 export async function finish_install(instance) {
+  const { handleError } = injectNotificationManager()
   if (instance.install_stage !== 'pack_installed') {
     let linkedData = instance.linked_data
     await install_to_existing_profile(
diff --git a/apps/app-frontend/src/helpers/skins.ts b/apps/app-frontend/src/helpers/skins.ts
index e31b67b1c3..ecfe87608e 100644
--- a/apps/app-frontend/src/helpers/skins.ts
+++ b/apps/app-frontend/src/helpers/skins.ts
@@ -1,6 +1,7 @@
-import { invoke } from '@tauri-apps/api/core'
-import { handleError } from '@/store/notifications'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { injectNotificationManager } from '@modrinth/ui'
 import { arrayBufferToBase64 } from '@modrinth/utils'
+import { invoke } from '@tauri-apps/api/core'
 
 export interface Cape {
   id: string
@@ -39,6 +40,7 @@ export const DEFAULT_MODELS: Record<string, SkinModel> = {
 
 export function filterSavedSkins(list: Skin[]) {
   const customSkins = list.filter((s) => s.source !== 'default')
+  const { handleError } = injectNotificationManager() as AppNotificationManager
   fixUnknownSkins(customSkins).catch(handleError)
   return customSkins
 }
diff --git a/apps/app-frontend/src/main.js b/apps/app-frontend/src/main.js
index a37a7018f9..b402f2b512 100644
--- a/apps/app-frontend/src/main.js
+++ b/apps/app-frontend/src/main.js
@@ -1,12 +1,12 @@
-import { createApp } from 'vue'
-import router from '@/routes'
 import App from '@/App.vue'
-import { createPinia } from 'pinia'
-import FloatingVue from 'floating-vue'
-import 'floating-vue/dist/style.css'
-import { createPlugin } from '@vintl/vintl/plugin'
+import router from '@/routes'
 import * as Sentry from '@sentry/vue'
 import { VueScanPlugin } from '@taijased/vue-render-tracker'
+import { createPlugin } from '@vintl/vintl/plugin'
+import FloatingVue from 'floating-vue'
+import 'floating-vue/dist/style.css'
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
 
 const VIntlPlugin = createPlugin({
   controllerOpts: {
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index 16bfefac14..adf013d216 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, shallowRef, watch } from 'vue'
-import type { Ref } from 'vue'
-import { SearchIcon, XIcon, ClipboardCopyIcon, GlobeIcon, ExternalIcon } from '@modrinth/assets'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import type Instance from '@/components/ui/Instance.vue'
+import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import NavTabs from '@/components/ui/NavTabs.vue'
+import SearchCard from '@/components/ui/SearchCard.vue'
+import { get_search_results } from '@/helpers/cache.js'
+import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile.js'
+import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { ClipboardCopyIcon, ExternalIcon, GlobeIcon, SearchIcon, XIcon } from '@modrinth/assets'
 import type { Category, GameVersion, Platform, ProjectType, SortType, Tags } from '@modrinth/ui'
 import {
-  SearchFilterControl,
-  SearchSidebarFilter,
   Button,
   Checkbox,
   DropdownSelect,
+  injectNotificationManager,
   LoadingIndicator,
   Pagination,
+  SearchFilterControl,
+  SearchSidebarFilter,
   useSearch,
 } from '@modrinth/ui'
-import { handleError } from '@/store/state'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import type { Ref } from 'vue'
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
-import SearchCard from '@/components/ui/SearchCard.vue'
-import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile.js'
-import { get_search_results } from '@/helpers/cache.js'
-import NavTabs from '@/components/ui/NavTabs.vue'
-import type Instance from '@/components/ui/Instance.vue'
-import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import { openUrl } from '@tauri-apps/plugin-opener'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const { formatMessage } = useVIntl()
 
 const router = useRouter()
diff --git a/apps/app-frontend/src/pages/Index.vue b/apps/app-frontend/src/pages/Index.vue
index 3eba1ba684..098216954b 100644
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import { ref, onUnmounted, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
-import { list } from '@/helpers/profile.js'
+import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
+import { get_search_results } from '@/helpers/cache.js'
 import { profile_listener } from '@/helpers/events'
+import { list } from '@/helpers/profile.js'
+import type { GameInstance } from '@/helpers/types'
+import type { AppNotificationManager } from '@/providers/app-notifications'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { handleError } from '@/store/notifications.js'
-import dayjs from 'dayjs'
-import { get_search_results } from '@/helpers/cache.js'
+import { injectNotificationManager } from '@modrinth/ui'
 import type { SearchResult } from '@modrinth/utils'
-import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
-import type { GameInstance } from '@/helpers/types'
+import dayjs from 'dayjs'
+import { computed, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index 8f27549450..30bba5b41b 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -1,4 +1,27 @@
 <script setup lang="ts">
+import type AccountsCard from '@/components/ui/AccountsCard.vue'
+import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_default_user, login as login_flow, users } from '@/helpers/auth'
+import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { generateSkinPreviews, skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { get as getSettings } from '@/helpers/settings.ts'
+import type { Cape, Skin } from '@/helpers/skins.ts'
+import {
+  equip_skin,
+  filterDefaultSkins,
+  filterSavedSkins,
+  get_available_capes,
+  get_available_skins,
+  get_normalized_skin_texture,
+  normalize_skin_texture,
+  remove_custom_skin,
+  set_default_cape,
+} from '@/helpers/skins.ts'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { handleSevereError } from '@/store/error'
 import {
   EditIcon,
   ExcitedRinthbot,
@@ -12,42 +35,21 @@ import {
   Button,
   ButtonStyled,
   ConfirmModal,
+  injectNotificationManager,
   SkinButton,
   SkinLikeTextButton,
   SkinPreviewRenderer,
 } from '@modrinth/ui'
+import { arrayBufferToBase64 } from '@modrinth/utils'
 import { computedAsync } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
-import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
-import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
-import { handleError, useNotifications } from '@/store/notifications'
-import type { Cape, Skin } from '@/helpers/skins.ts'
-import {
-  normalize_skin_texture,
-  equip_skin,
-  filterDefaultSkins,
-  filterSavedSkins,
-  get_available_capes,
-  get_available_skins,
-  get_normalized_skin_texture,
-  remove_custom_skin,
-  set_default_cape,
-} from '@/helpers/skins.ts'
-import { get as getSettings } from '@/helpers/settings.ts'
-import { get_default_user, login as login_flow, users } from '@/helpers/auth'
-import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { generateSkinPreviews, skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { handleSevereError } from '@/store/error'
-import { trackEvent } from '@/helpers/analytics'
-import type AccountsCard from '@/components/ui/AccountsCard.vue'
-import { arrayBufferToBase64 } from '@modrinth/utils'
 const editSkinModal = useTemplateRef('editSkinModal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
 const uploadSkinModal = useTemplateRef('uploadSkinModal')
 
-const notifications = useNotifications()
+const notifications = injectNotificationManager() as AppNotificationManager
+const { handleError } = notifications
 
 const settings = ref(await getSettings())
 const skins = ref<Skin[]>([])
@@ -113,7 +115,7 @@ async function loadCapes() {
     defaultCape.value = capes.value.find((c) => c.is_equipped)
     originalDefaultCape.value = defaultCape.value
   } catch (error) {
-    if (currentUser.value) {
+    if (currentUser.value && error instanceof Error) {
       handleError(error)
     }
   }
@@ -126,7 +128,7 @@ async function loadSkins() {
     selectedSkin.value = skins.value.find((s) => s.is_equipped) ?? null
     originalSelectedSkin.value = selectedSkin.value
   } catch (error) {
-    if (currentUser.value) {
+    if (currentUser.value && error instanceof Error) {
       handleError(error)
     }
   }
@@ -161,7 +163,7 @@ async function changeSkin(newSkin: Skin) {
         text: "You're changing your skin too frequently. Mojang's servers have temporarily blocked further requests. Please wait a moment before trying again.",
       })
     } else {
-      handleError(error)
+      handleError(error as Error)
     }
   }
 }
@@ -190,7 +192,7 @@ async function handleCapeSelected(cape: Cape | undefined) {
         text: "You're changing your cape too frequently. Mojang's servers have temporarily blocked further requests. Please wait a moment before trying again.",
       })
     } else {
-      handleError(error)
+      handleError(error as Error)
     }
   }
 }
@@ -207,7 +209,7 @@ async function loadCurrentUser() {
     const allAccounts = await users()
     currentUser.value = allAccounts.find((acc) => acc.profile.id === defaultId)
   } catch (e) {
-    handleError(e)
+    handleError(e as Error)
     currentUser.value = undefined
     currentUserId.value = undefined
   }
@@ -276,7 +278,7 @@ async function checkUserChanges() {
       await loadSkins()
     }
   } catch (error) {
-    if (currentUser.value) {
+    if (currentUser.value && error instanceof Error) {
       handleError(error)
     }
   }
@@ -376,7 +378,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
                 color="green"
                 aria-label="Edit skin"
                 class="pointer-events-auto"
-                @click.stop="(e) => editSkinModal?.show(e, skin)"
+                @click.stop="(e: MouseEvent) => editSkinModal?.show(e, skin)"
               >
                 <EditIcon /> Edit
               </Button>
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 8b6d63bfa8..273009592e 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -157,13 +157,18 @@
   </div>
 </template>
 <script setup>
-import {
-  Avatar,
-  ButtonStyled,
-  ContentPageHeader,
-  LoadingIndicator,
-  OverflowMenu,
-} from '@modrinth/ui'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import ExportModal from '@/components/ui/ExportModal.vue'
+import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
+import NavTabs from '@/components/ui/NavTabs.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project, get_version_many } from '@/helpers/cache.js'
+import { process_listener, profile_listener } from '@/helpers/events'
+import { get_by_profile_path } from '@/helpers/process'
+import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import { handleSevereError } from '@/store/error.js'
+import { useBreadcrumbs, useLoading } from '@/store/state'
 import {
   CheckCircleIcon,
   ClipboardCopyIcon,
@@ -187,28 +192,25 @@ import {
   UserPlusIcon,
   XIcon,
 } from '@modrinth/assets'
-import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
-import { get_by_profile_path } from '@/helpers/process'
-import { process_listener, profile_listener } from '@/helpers/events'
-import { useRoute, useRouter } from 'vue-router'
-import { computed, onUnmounted, ref, watch } from 'vue'
-import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
-import { showProfileInFolder } from '@/helpers/utils.js'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import NavTabs from '@/components/ui/NavTabs.vue'
-import { trackEvent } from '@/helpers/analytics'
+import {
+  Avatar,
+  ButtonStyled,
+  ContentPageHeader,
+  injectNotificationManager,
+  LoadingIndicator,
+  OverflowMenu,
+} from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { handleSevereError } from '@/store/error.js'
-import { get_project, get_version_many } from '@/helpers/cache.js'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import ExportModal from '@/components/ui/ExportModal.vue'
-import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const router = useRouter()
diff --git a/apps/app-frontend/src/pages/instance/Logs.vue b/apps/app-frontend/src/pages/instance/Logs.vue
index 83d0cbe8d0..b56673e938 100644
--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -88,30 +88,30 @@
 </template>
 
 <script setup>
-import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
-import { Button, Card, Checkbox, DropdownSelect } from '@modrinth/ui'
+import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
+import { process_listener } from '@/helpers/events.js'
 import {
   delete_logs_by_filename,
+  get_latest_log_cursor,
   get_logs,
   get_output_by_filename,
-  get_latest_log_cursor,
 } from '@/helpers/logs.js'
-import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { get_by_profile_path } from '@/helpers/process.js'
+import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
+import { Button, Card, Checkbox, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import isToday from 'dayjs/plugin/isToday'
 import isYesterday from 'dayjs/plugin/isYesterday'
-import { get_by_profile_path } from '@/helpers/process.js'
-import { useRoute } from 'vue-router'
-import { process_listener } from '@/helpers/events.js'
-import { handleError } from '@/store/notifications.js'
 import { ofetch } from 'ofetch'
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 
 dayjs.extend(isToday)
 dayjs.extend(isYesterday)
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const props = defineProps({
diff --git a/apps/app-frontend/src/pages/instance/Mods.vue b/apps/app-frontend/src/pages/instance/Mods.vue
index d14da99f5c..d49308dcf0 100644
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -249,6 +249,31 @@
   </div>
 </template>
 <script setup lang="ts">
+import { TextInputIcon } from '@/assets/icons'
+import AddContentButton from '@/components/ui/AddContentButton.vue'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import ExportModal from '@/components/ui/ExportModal.vue'
+import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import {
+  get_organization_many,
+  get_project_many,
+  get_team_many,
+  get_version_many,
+} from '@/helpers/cache.js'
+import { profile_listener } from '@/helpers/events.js'
+import {
+  add_project_from_path,
+  get_projects,
+  remove_project,
+  toggle_disable_project,
+  update_all,
+  update_project,
+} from '@/helpers/profile.js'
+import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
+import { highlightModInProfile } from '@/helpers/utils.js'
+import type { AppNotificationManager } from '@/providers/app-notifications'
 import {
   CheckCircleIcon,
   ClipboardCopyIcon,
@@ -271,44 +296,22 @@ import {
   Button,
   ButtonStyled,
   ContentListPanel,
+  injectNotificationManager,
   OverflowMenu,
   Pagination,
   RadialHeader,
   Toggle,
 } from '@modrinth/ui'
+import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'
 import type { Organization, Project, TeamMember, Version } from '@modrinth/utils'
 import { formatProjectType } from '@modrinth/utils'
-import type { ComputedRef } from 'vue'
-import { computed, onUnmounted, ref, watch } from 'vue'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import {
-  add_project_from_path,
-  get_projects,
-  remove_project,
-  toggle_disable_project,
-  update_all,
-  update_project,
-} from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
-import { trackEvent } from '@/helpers/analytics'
-import { highlightModInProfile } from '@/helpers/utils.js'
-import { TextInputIcon } from '@/assets/icons'
-import ExportModal from '@/components/ui/ExportModal.vue'
-import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
-import AddContentButton from '@/components/ui/AddContentButton.vue'
-import {
-  get_organization_many,
-  get_project_many,
-  get_team_many,
-  get_version_many,
-} from '@/helpers/cache.js'
-import { profile_listener } from '@/helpers/events.js'
-import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
-import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
-import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'
+import type { ComputedRef } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+const { handleError } = injectNotificationManager() as AppNotificationManager
 
 const props = defineProps<{
   instance: GameInstance
diff --git a/apps/app-frontend/src/pages/instance/Worlds.vue b/apps/app-frontend/src/pages/instance/Worlds.vue
index 03971facc9..6dc435efd9 100644
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -120,54 +120,55 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, onUnmounted, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
+import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
+import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
+import WorldItem from '@/components/ui/world/WorldItem.vue'
+import { profile_listener } from '@/helpers/events'
+import { get_game_versions } from '@/helpers/tags'
 import type { GameInstance } from '@/helpers/types'
 import {
-  Button,
-  ButtonStyled,
-  RadialHeader,
-  FilterBar,
-  type FilterBarOption,
-  type GameVersion,
-  GAME_MODES,
-} from '@modrinth/ui'
-import { PlusIcon, SpinnerIcon, UpdatedIcon, SearchIcon, XIcon } from '@modrinth/assets'
-import {
+  type ProfileEvent,
   type ProtocolVersion,
+  type ServerData,
+  type ServerWorld,
   type SingleplayerWorld,
   type World,
-  type ServerWorld,
-  type ServerData,
-  type ProfileEvent,
-  get_profile_protocol_version,
-  remove_server_from_profile,
   delete_world,
-  start_join_server,
-  start_join_singleplayer_world,
   getWorldIdentifier,
+  get_profile_protocol_version,
+  handleDefaultProfileUpdateEvent,
+  hasQuickPlaySupport,
   refreshServerData,
-  refreshWorld,
-  sortWorlds,
   refreshServers,
-  hasQuickPlaySupport,
+  refreshWorld,
   refreshWorlds,
-  handleDefaultProfileUpdateEvent,
+  remove_server_from_profile,
   showWorldInFolder,
+  sortWorlds,
+  start_join_server,
+  start_join_singleplayer_world,
 } from '@/helpers/worlds.ts'
-import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
-import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
-import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
-import WorldItem from '@/components/ui/world/WorldItem.vue'
-
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { handleError } from '@/store/notifications'
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { AppNotificationManager } from '@/providers/app-notifications'
+import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon, XIcon } from '@modrinth/assets'
+import {
+  Button,
+  ButtonStyled,
+  FilterBar,
+  type FilterBarOption,
+  GAME_MODES,
+  type GameVersion,
+  RadialHeader,
+  injectNotificationManager,
+} from '@modrinth/ui'
 import type { Version } from '@modrinth/utils'
-import { profile_listener } from '@/helpers/events'
-import { get_game_versions } from '@/helpers/tags'
 import { defineMessages } from '@vintl/vintl'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
+const { handleError } = injectNotificationManager() as AppNotificationManager
 const route = useRoute()
 
 const addServerModal = ref<InstanceType<typeof AddServerModal>>()
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index 2176f8e990..fbbbb31a0f 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -1,16 +1,16 @@
 <script setup>
-import { onUnmounted, ref, shallowRef } from 'vue'
+import { NewInstanceImage } from '@/assets/icons'
+import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
+import NavTabs from '@/components/ui/NavTabs.vue'
+import { profile_listener } from '@/helpers/events.js'
 import { list } from '@/helpers/profile.js'
-import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs.js'
-import { profile_listener } from '@/helpers/events.js'
-import { handleError } from '@/store/notifications.js'
-import { Button } from '@modrinth/ui'
 import { PlusIcon } from '@modrinth/assets'
-import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { NewInstanceImage } from '@/assets/icons'
-import NavTabs from '@/components/ui/NavTabs.vue'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { onUnmounted, ref, shallowRef } from 'vue'
+import { useRoute } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 941ab0d080..02255c487b 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -129,46 +129,46 @@
 </template>
 
 <script setup>
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import NavTabs from '@/components/ui/NavTabs.vue'
+import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
+import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
+import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { install as installVersion } from '@/store/install.js'
+import { useTheming } from '@/store/state.js'
 import {
   BookmarkIcon,
-  MoreVerticalIcon,
+  CheckIcon,
+  ClipboardCopyIcon,
   DownloadIcon,
-  ReportIcon,
-  HeartIcon,
   ExternalIcon,
-  CheckIcon,
   GlobeIcon,
-  ClipboardCopyIcon,
+  HeartIcon,
+  MoreVerticalIcon,
+  ReportIcon,
 } from '@modrinth/assets'
 import {
-  ProjectHeader,
-  ProjectSidebarCompatibility,
   ButtonStyled,
   OverflowMenu,
-  ProjectSidebarLinks,
+  ProjectBackgroundGradient,
+  ProjectHeader,
+  ProjectSidebarCompatibility,
   ProjectSidebarCreators,
   ProjectSidebarDetails,
-  ProjectBackgroundGradient,
+  ProjectSidebarLinks,
+  injectNotificationManager,
 } from '@modrinth/ui'
-
-import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
-import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
+import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { handleError } from '@/store/notifications.js'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import { install as installVersion } from '@/store/install.js'
-import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
-import NavTabs from '@/components/ui/NavTabs.vue'
-import { useTheming } from '@/store/state.js'
-import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import { openUrl } from '@tauri-apps/plugin-opener'
+import { useRoute, useRouter } from 'vue-router'
 
 dayjs.extend(relativeTime)
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
diff --git a/apps/app-frontend/src/pages/project/Versions.vue b/apps/app-frontend/src/pages/project/Versions.vue
index d52a9f21b4..7747dd2932 100644
--- a/apps/app-frontend/src/pages/project/Versions.vue
+++ b/apps/app-frontend/src/pages/project/Versions.vue
@@ -65,12 +65,16 @@
 </template>
 
 <script setup>
-import { ProjectPageVersions, ButtonStyled, OverflowMenu } from '@modrinth/ui'
-import { CheckIcon, DownloadIcon, ExternalIcon, MoreVerticalIcon } from '@modrinth/assets'
-import { ref } from 'vue'
 import { SwapIcon } from '@/assets/icons/index.js'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
-import { handleError } from '@/store/notifications.js'
+import { CheckIcon, DownloadIcon, ExternalIcon, MoreVerticalIcon } from '@modrinth/assets'
+import {
+  ButtonStyled,
+  OverflowMenu,
+  ProjectPageVersions,
+  injectNotificationManager,
+} from '@modrinth/ui'
+import { ref } from 'vue'
 
 defineProps({
   project: {
@@ -103,6 +107,8 @@ defineProps({
   },
 })
 
+const { handleError } = injectNotificationManager()
+
 const [loaders, gameVersions] = await Promise.all([
   get_loaders().catch(handleError).then(ref),
   get_game_versions().catch(handleError).then(ref),
diff --git a/apps/app-frontend/src/providers/app-notifications.ts b/apps/app-frontend/src/providers/app-notifications.ts
new file mode 100644
index 0000000000..23cc7d260d
--- /dev/null
+++ b/apps/app-frontend/src/providers/app-notifications.ts
@@ -0,0 +1,56 @@
+import {
+  AbstractWebNotificationManager,
+  type WebNotification,
+  type WebNotificationLocation,
+} from '@modrinth/ui'
+import { ref, type Ref } from 'vue'
+
+export class AppNotificationManager extends AbstractWebNotificationManager {
+  private readonly state: Ref<WebNotification[]>
+  private readonly locationState: Ref<WebNotificationLocation>
+
+  public constructor() {
+    super()
+    this.state = ref<WebNotification[]>([])
+    this.locationState = ref<WebNotificationLocation>('right')
+  }
+
+  public handleError = (error: Error): void => {
+    this.addNotification({
+      title: 'An error occurred',
+      text: error.message ?? error,
+      type: 'error',
+    })
+  }
+
+  public getNotificationLocation(): WebNotificationLocation {
+    return this.locationState.value
+  }
+
+  public setNotificationLocation(location: WebNotificationLocation): void {
+    this.locationState.value = location
+  }
+
+  public getNotifications(): WebNotification[] {
+    return this.state.value
+  }
+
+  protected addNotificationToStorage(notification: WebNotification): void {
+    this.state.value.push(notification)
+  }
+
+  protected removeNotificationFromStorage(id: string | number): void {
+    const index = this.state.value.findIndex((n) => n.id === id)
+    if (index > -1) {
+      this.state.value.splice(index, 1)
+    }
+  }
+
+  protected removeNotificationFromStorageByIndex(index: number): void {
+    this.state.value.splice(index, 1)
+  }
+
+  protected clearAllNotificationsFromStorage(): void {
+    this.state.value.splice(0)
+  }
+}
diff --git a/apps/app-frontend/src/store/install.js b/apps/app-frontend/src/store/install.js
index 4746b9070a..f99d3166cc 100644
--- a/apps/app-frontend/src/store/install.js
+++ b/apps/app-frontend/src/store/install.js
@@ -1,4 +1,6 @@
-import { defineStore } from 'pinia'
+import { trackEvent } from '@/helpers/analytics.js'
+import { get_project, get_version_many } from '@/helpers/cache.js'
+import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
 import {
   add_project_from_version,
   check_installed,
@@ -7,11 +9,9 @@ import {
   list,
   remove_project,
 } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
-import { get_project, get_version_many } from '@/helpers/cache.js'
-import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
-import { trackEvent } from '@/helpers/analytics.js'
+import { injectNotificationManager } from '@modrinth/ui'
 import dayjs from 'dayjs'
+import { defineStore } from 'pinia'
 
 export const useInstall = defineStore('installStore', {
   state: () => ({
@@ -49,6 +49,7 @@ export const install = async (
   callback = () => {},
   createInstanceCallback = () => {},
 ) => {
+  const { handleError } = injectNotificationManager()
   const project = await get_project(projectId, 'must_revalidate').catch(handleError)
 
   if (project.project_type === 'modpack') {
@@ -160,6 +161,7 @@ export const install = async (
 }
 
 export const installVersionDependencies = async (profile, version) => {
+  const { handleError } = injectNotificationManager()
   for (const dep of version.dependencies) {
     if (dep.dependency_type !== 'required') continue
     // disallow fabric api install on quilt
diff --git a/apps/app-frontend/src/store/notifications.js b/apps/app-frontend/src/store/notifications.js
deleted file mode 100644
index 52cc534762..0000000000
--- a/apps/app-frontend/src/store/notifications.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useNotifications = defineStore('notificationsStore', {
-  state: () => ({
-    notificationsWrapper: null,
-  }),
-  actions: {
-    setNotifs(notifs) {
-      this.notificationsWrapper = notifs
-    },
-    addNotification(notif) {
-      this.notificationsWrapper.addNotification(notif)
-    },
-  },
-})
-
-export const handleError = (err) => {
-  const notifs = useNotifications()
-  notifs.addNotification({
-    title: 'An error occurred',
-    text: err.message ?? err,
-    type: 'error',
-  })
-  console.error(err)
-}
diff --git a/apps/app-frontend/src/store/state.js b/apps/app-frontend/src/store/state.js
index e9811e6238..1d7dd04d41 100644
--- a/apps/app-frontend/src/store/state.js
+++ b/apps/app-frontend/src/store/state.js
@@ -1,7 +1,6 @@
-import { useTheming } from './theme.ts'
 import { useBreadcrumbs } from './breadcrumbs'
-import { useLoading } from './loading'
-import { useNotifications, handleError } from './notifications'
 import { useInstall } from './install'
+import { useLoading } from './loading'
+import { useTheming } from './theme.ts'
 
-export { useTheming, useBreadcrumbs, useLoading, useNotifications, handleError, useInstall }
+export { useBreadcrumbs, useInstall, useLoading, useTheming }
diff --git a/apps/frontend/src/providers/web-notifications.ts b/apps/frontend/src/providers/frontend-notifications.ts
similarity index 100%
rename from apps/frontend/src/providers/web-notifications.ts
rename to apps/frontend/src/providers/frontend-notifications.ts

From 17c08ecd446dbaeec9d1d0f9c62c94d7e9799ba0 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Thu, 31 Jul 2025 13:25:21 +0100
Subject: [PATCH 07/14] fix: sidebar issues

---
 apps/app-frontend/src/App.vue                      |  2 +-
 .../ui/src/components/nav/NotificationPanel.vue    | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 45c63eb487..6d2451c319 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -657,7 +657,7 @@ function handleAuxClick(e) {
     </div>
   </div>
   <URLConfirmModal ref="urlModal" />
-  <NotificationPanel />
+  <NotificationPanel has-sidebar />
   <ErrorModal ref="errorModal" />
   <ModInstallModal ref="modInstallModal" />
   <IncompatibilityWarningModal ref="incompatibilityWarningModal" />
diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index d8e4366cc7..2fb4d2599d 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -5,6 +5,7 @@
       'intercom-present': isIntercomPresent,
       'location-left': notificationLocation === 'left',
       'location-right': notificationLocation === 'right',
+      'has-sidebar': hasSidebar,
     }"
   >
     <transition-group name="notifs">
@@ -134,6 +135,15 @@ onMounted(() => {
     observer.disconnect()
   })
 })
+
+withDefaults(
+  defineProps<{
+    hasSidebar: boolean
+  }>(),
+  {
+    hasSidebar: false,
+  },
+)
 </script>
 
 <style lang="scss" scoped>
@@ -145,6 +155,10 @@ onMounted(() => {
 
   &.location-right {
     right: 1.5rem;
+
+    &.has-sidebar {
+      right: 325px;
+    }
   }
 
   &.location-left {

From 9e0892778c8f0b392a918eae4c0e0a8249eab38d Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Thu, 31 Jul 2025 13:25:52 +0100
Subject: [PATCH 08/14] fix: dont use delete in computed

---
 packages/ui/src/components/nav/NotificationPanel.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index 2fb4d2599d..df04fb9344 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -115,7 +115,8 @@ function copyToClipboard(notif: WebNotification): void {
   navigator.clipboard.writeText(text)
 
   setTimeout(() => {
-    delete copied.value[text]
+    const { [text]: _, ...rest } = copied.value
+    copied.value = rest
   }, 2000)
 }
 

From 444ace8e5495f321c4453cffc9e955e8176e3dd8 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Thu, 31 Jul 2025 13:28:47 +0100
Subject: [PATCH 09/14] fix: import and prop issue

---
 apps/frontend/src/app.vue                            | 2 +-
 packages/ui/src/components/nav/NotificationPanel.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index 8f2c7f4d92..b6a3be6754 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -7,8 +7,8 @@
 </template>
 <script setup lang="ts">
 import { NotificationPanel, provideNotificationManager } from "@modrinth/ui";
-import { FrontendNotificationManager } from "./providers/web-notifications.ts";
 import ModrinthLoadingIndicator from "~/components/ui/modrinth-loading-indicator.ts";
+import { FrontendNotificationManager } from "./providers/frontend-notifications.ts";
 
 provideNotificationManager(new FrontendNotificationManager());
 </script>
diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index df04fb9344..32384cf4ee 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -139,7 +139,7 @@ onMounted(() => {
 
 withDefaults(
   defineProps<{
-    hasSidebar: boolean
+    hasSidebar?: boolean
   }>(),
   {
     hasSidebar: false,

From c0f9bc0f48cc9719abd67efac4aa90cff77acc74 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Sat, 2 Aug 2025 12:40:40 +0100
Subject: [PATCH 10/14] refactor: move handleError to main notification manager
 class

---
 .../src/components/ui/AddContentButton.vue    |  3 +-
 .../src/components/ui/friends/FriendsList.vue |  3 +-
 .../ui/instance_settings/GeneralSettings.vue  |  3 +-
 .../ui/instance_settings/HooksSettings.vue    |  3 +-
 .../InstallationSettings.vue                  |  3 +-
 .../ui/instance_settings/JavaSettings.vue     |  3 +-
 .../ui/instance_settings/WindowSettings.vue   |  3 +-
 .../src/components/ui/skin/EditSkinModal.vue  |  3 +-
 .../src/components/ui/world/InstanceItem.vue  |  3 +-
 .../components/ui/world/RecentWorldsList.vue  |  3 +-
 .../ui/world/modal/AddServerModal.vue         |  3 +-
 .../ui/world/modal/EditServerModal.vue        |  3 +-
 .../modal/EditSingleplayerWorldModal.vue      |  3 +-
 apps/app-frontend/src/helpers/skins.ts        |  3 +-
 apps/app-frontend/src/pages/Browse.vue        |  3 +-
 apps/app-frontend/src/pages/Index.vue         |  3 +-
 apps/app-frontend/src/pages/Skins.vue         |  3 +-
 apps/app-frontend/src/pages/instance/Mods.vue |  3 +-
 .../src/pages/instance/Worlds.vue             |  3 +-
 .../src/providers/app-notifications.ts        | 18 +++--------
 .../src/providers/frontend-notifications.ts   | 13 +++++---
 .../ui/src/providers/web-notifications.ts     | 32 +++++++++++++++----
 22 files changed, 57 insertions(+), 63 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/AddContentButton.vue b/apps/app-frontend/src/components/ui/AddContentButton.vue
index 3b73b3397c..d3447bf0a4 100644
--- a/apps/app-frontend/src/components/ui/AddContentButton.vue
+++ b/apps/app-frontend/src/components/ui/AddContentButton.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { add_project_from_path } from '@/helpers/profile.js'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
   instance: {
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index 4b5ca6fcc7..4414a28fdb 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -4,7 +4,6 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get_user_many } from '@/helpers/cache'
 import { friend_listener } from '@/helpers/events'
 import { add_friend, friend_statuses, friends, remove_friend } from '@/helpers/friends'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import {
   MailIcon,
   MoreVerticalIcon,
@@ -24,7 +23,7 @@ import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{
diff --git a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
index d5aad05cb9..1c3ffa12da 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -2,7 +2,6 @@
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
 import {
   Avatar,
@@ -18,7 +17,7 @@ import { computed, ref, type Ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
 
diff --git a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
index 201436cd0d..93014f7d8e 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { Checkbox, injectNotificationManager } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'
 import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
diff --git a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
index 6127602768..b62a737669 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -6,7 +6,6 @@ import { get_project, get_version_many } from '@/helpers/cache'
 import { get_loader_versions } from '@/helpers/metadata'
 import { edit, install, update_repair_modrinth } from '@/helpers/profile'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import {
   DownloadIcon,
   HammerIcon,
@@ -42,7 +41,7 @@ import type {
   ManifestLoaderVersion,
 } from '../../../helpers/types'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const repairConfirmModal = ref()
diff --git a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
index 4097c5d8b3..78f019f8fd 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
@@ -3,14 +3,13 @@ import JavaSelector from '@/components/ui/JavaSelector.vue'
 import useMemorySlider from '@/composables/useMemorySlider'
 import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
 import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, readonly, ref, watch } from 'vue'
 import type { AppSettings, InstanceSettingsTabProps, MemorySettings } from '../../../helpers/types'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
diff --git a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
index 11d9b5c052..c72e37eb95 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref, type Ref, watch } from 'vue'
 import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index 79322e2dcb..0fcaa8b22e 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -113,7 +113,6 @@ import {
   type Skin,
   type SkinModel,
 } from '@/helpers/skins.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import {
   CheckIcon,
   ChevronRightIcon,
@@ -133,7 +132,7 @@ import {
 } from '@modrinth/ui'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 
 const modal = useTemplateRef('modal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
diff --git a/apps/app-frontend/src/components/ui/world/InstanceItem.vue b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
index 2fc3e25f01..7012c10281 100644
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -6,7 +6,6 @@ import { get_by_profile_path } from '@/helpers/process'
 import { kill, run } from '@/helpers/profile'
 import type { GameInstance } from '@/helpers/types'
 import { showProfileInFolder } from '@/helpers/utils'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { handleSevereError } from '@/store/error'
 import {
   EyeIcon,
@@ -33,7 +32,7 @@ import dayjs from 'dayjs'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 
diff --git a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
index 14ad67b32a..04ff30dd89 100644
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -18,7 +18,6 @@ import {
   start_join_server,
   start_join_singleplayer_world,
 } from '@/helpers/worlds.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { handleSevereError } from '@/store/error'
 import { useTheming } from '@/store/theme.ts'
 import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
@@ -26,7 +25,7 @@ import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 
 const props = defineProps<{
   recentInstances: GameInstance[]
diff --git a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
index b03996993b..17f27cc958 100644
--- a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
@@ -4,13 +4,12 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
 import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { ref } from 'vue'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
index 924afd9f70..f33217f78c 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -10,13 +10,12 @@ import {
   type ServerPackStatus,
   type ServerWorld,
 } from '@/helpers/worlds.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { SaveIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { defineMessage, useVIntl } from '@vintl/vintl'
 import { computed, ref } from 'vue'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
index 19ff99a31a..d07ccbabc0 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -4,13 +4,12 @@ import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.v
 import type { GameInstance } from '@/helpers/types'
 import type { DisplayStatus, SingleplayerWorld } from '@/helpers/worlds.ts'
 import { rename_world, reset_world_icon, set_world_display_status } from '@/helpers/worlds.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
 import { Avatar, ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref } from 'vue'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
diff --git a/apps/app-frontend/src/helpers/skins.ts b/apps/app-frontend/src/helpers/skins.ts
index ecfe87608e..a075e41c09 100644
--- a/apps/app-frontend/src/helpers/skins.ts
+++ b/apps/app-frontend/src/helpers/skins.ts
@@ -1,4 +1,3 @@
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { injectNotificationManager } from '@modrinth/ui'
 import { arrayBufferToBase64 } from '@modrinth/utils'
 import { invoke } from '@tauri-apps/api/core'
@@ -40,7 +39,7 @@ export const DEFAULT_MODELS: Record<string, SkinModel> = {
 
 export function filterSavedSkins(list: Skin[]) {
   const customSkins = list.filter((s) => s.source !== 'default')
-  const { handleError } = injectNotificationManager() as AppNotificationManager
+  const { handleError } = injectNotificationManager()
   fixUnknownSkins(customSkins).catch(handleError)
   return customSkins
 }
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index adf013d216..3ecfb6a0d3 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -7,7 +7,6 @@ import SearchCard from '@/components/ui/SearchCard.vue'
 import { get_search_results } from '@/helpers/cache.js'
 import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile.js'
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { ClipboardCopyIcon, ExternalIcon, GlobeIcon, SearchIcon, XIcon } from '@modrinth/assets'
 import type { Category, GameVersion, Platform, ProjectType, SortType, Tags } from '@modrinth/ui'
@@ -29,7 +28,7 @@ import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const router = useRouter()
diff --git a/apps/app-frontend/src/pages/Index.vue b/apps/app-frontend/src/pages/Index.vue
index 098216954b..918d9ce6f3 100644
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -5,7 +5,6 @@ import { get_search_results } from '@/helpers/cache.js'
 import { profile_listener } from '@/helpers/events'
 import { list } from '@/helpers/profile.js'
 import type { GameInstance } from '@/helpers/types'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { injectNotificationManager } from '@modrinth/ui'
 import type { SearchResult } from '@modrinth/utils'
@@ -13,7 +12,7 @@ import dayjs from 'dayjs'
 import { computed, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index 30bba5b41b..049cce72ab 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -20,7 +20,6 @@ import {
   remove_custom_skin,
   set_default_cape,
 } from '@/helpers/skins.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { handleSevereError } from '@/store/error'
 import {
   EditIcon,
@@ -48,7 +47,7 @@ const editSkinModal = useTemplateRef('editSkinModal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
 const uploadSkinModal = useTemplateRef('uploadSkinModal')
 
-const notifications = injectNotificationManager() as AppNotificationManager
+const notifications = injectNotificationManager()
 const { handleError } = notifications
 
 const settings = ref(await getSettings())
diff --git a/apps/app-frontend/src/pages/instance/Mods.vue b/apps/app-frontend/src/pages/instance/Mods.vue
index d49308dcf0..a527ee1cd0 100644
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -273,7 +273,6 @@ import {
 } from '@/helpers/profile.js'
 import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
 import { highlightModInProfile } from '@/helpers/utils.js'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import {
   CheckCircleIcon,
   ClipboardCopyIcon,
@@ -311,7 +310,7 @@ import dayjs from 'dayjs'
 import type { ComputedRef } from 'vue'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 
 const props = defineProps<{
   instance: GameInstance
diff --git a/apps/app-frontend/src/pages/instance/Worlds.vue b/apps/app-frontend/src/pages/instance/Worlds.vue
index 6dc435efd9..bff63eae3c 100644
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -151,7 +151,6 @@ import {
   start_join_server,
   start_join_singleplayer_world,
 } from '@/helpers/worlds.ts'
-import type { AppNotificationManager } from '@/providers/app-notifications'
 import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon, XIcon } from '@modrinth/assets'
 import {
   Button,
@@ -168,7 +167,7 @@ import { defineMessages } from '@vintl/vintl'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-const { handleError } = injectNotificationManager() as AppNotificationManager
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const addServerModal = ref<InstanceType<typeof AddServerModal>>()
diff --git a/apps/app-frontend/src/providers/app-notifications.ts b/apps/app-frontend/src/providers/app-notifications.ts
index 23cc7d260d..569e4e3cb1 100644
--- a/apps/app-frontend/src/providers/app-notifications.ts
+++ b/apps/app-frontend/src/providers/app-notifications.ts
@@ -1,33 +1,25 @@
 import {
   AbstractWebNotificationManager,
+  type NotificationPanelLocation,
   type WebNotification,
-  type WebNotificationLocation,
 } from '@modrinth/ui'
 import { ref, type Ref } from 'vue'
 
 export class AppNotificationManager extends AbstractWebNotificationManager {
   private readonly state: Ref<WebNotification[]>
-  private readonly locationState: Ref<WebNotificationLocation>
+  private readonly locationState: Ref<NotificationPanelLocation>
 
   public constructor() {
     super()
     this.state = ref<WebNotification[]>([])
-    this.locationState = ref<WebNotificationLocation>('right')
+    this.locationState = ref<NotificationPanelLocation>('right')
   }
 
-  public handleError = (error: Error): void => {
-    this.addNotification({
-      title: 'An error occurred',
-      text: error.message ?? error,
-      type: 'error',
-    })
-  }
-
-  public getNotificationLocation(): WebNotificationLocation {
+  public getNotificationLocation(): NotificationPanelLocation {
     return this.locationState.value
   }
 
-  public setNotificationLocation(location: WebNotificationLocation): void {
+  public setNotificationLocation(location: NotificationPanelLocation): void {
     this.locationState.value = location
   }
 
diff --git a/apps/frontend/src/providers/frontend-notifications.ts b/apps/frontend/src/providers/frontend-notifications.ts
index b8ba3b9005..b3365657db 100644
--- a/apps/frontend/src/providers/frontend-notifications.ts
+++ b/apps/frontend/src/providers/frontend-notifications.ts
@@ -1,25 +1,28 @@
 import { useState } from "#app";
 import {
+  type NotificationPanelLocation,
   type WebNotification,
-  type WebNotificationLocation,
   AbstractWebNotificationManager,
 } from "@modrinth/ui";
 
 export class FrontendNotificationManager extends AbstractWebNotificationManager {
   private readonly state: Ref<WebNotification[]>;
-  private readonly locationState: Ref<WebNotificationLocation>;
+  private readonly locationState: Ref<NotificationPanelLocation>;
 
   public constructor() {
     super();
     this.state = useState<WebNotification[]>("notifications", () => []);
-    this.locationState = useState<WebNotificationLocation>("notifications.location", () => "right");
+    this.locationState = useState<NotificationPanelLocation>(
+      "notifications.location",
+      () => "right",
+    );
   }
 
-  public getNotificationLocation(): WebNotificationLocation {
+  public getNotificationLocation(): NotificationPanelLocation {
     return this.locationState.value;
   }
 
-  public setNotificationLocation(location: WebNotificationLocation): void {
+  public setNotificationLocation(location: NotificationPanelLocation): void {
     this.locationState.value = location;
   }
 
diff --git a/packages/ui/src/providers/web-notifications.ts b/packages/ui/src/providers/web-notifications.ts
index be120f20be..c56507b0fe 100644
--- a/packages/ui/src/providers/web-notifications.ts
+++ b/packages/ui/src/providers/web-notifications.ts
@@ -10,35 +10,47 @@ export interface WebNotification {
   timer?: NodeJS.Timeout
 }
 
-export type WebNotificationLocation = 'left' | 'right'
+export type NotificationPanelLocation = 'left' | 'right'
 
 export abstract class AbstractWebNotificationManager {
   protected readonly AUTO_DISMISS_DELAY_MS = 30 * 1000
 
   abstract getNotifications(): WebNotification[]
-  abstract getNotificationLocation(): WebNotificationLocation
-  abstract setNotificationLocation(location: WebNotificationLocation): void
+  abstract getNotificationLocation(): NotificationPanelLocation
+  abstract setNotificationLocation(location: NotificationPanelLocation): void
 
   protected abstract addNotificationToStorage(notification: WebNotification): void
   protected abstract removeNotificationFromStorage(id: string | number): void
   protected abstract removeNotificationFromStorageByIndex(index: number): void
   protected abstract clearAllNotificationsFromStorage(): void
 
-  addNotification = (notification: Partial<WebNotification>): void => {
+  addNotification = (notification: Partial<WebNotification>): WebNotification => {
     const existingNotif = this.findExistingNotification(notification)
 
     if (existingNotif) {
       this.refreshNotificationTimer(existingNotif)
       existingNotif.count = (existingNotif.count || 0) + 1
-      return
+      return existingNotif
     }
 
     const newNotification = this.createNotification(notification)
     this.setNotificationTimer(newNotification)
     this.addNotificationToStorage(newNotification)
+    return newNotification
   }
 
-  removeNotification = (id: string | number): void => {
+  /**
+   * @deprecated You should use `addNotification` instead to provide a more human-readable error message to the user.
+   */
+  handleError = (error: Error): void => {
+    this.addNotification({
+      title: 'An error occurred',
+      text: error.message ?? error,
+      type: 'error',
+    })
+  }
+
+  removeNotification = (id: string | number): WebNotification | undefined => {
     const notifications = this.getNotifications()
     const notification = notifications.find((n) => n.id === id)
 
@@ -46,16 +58,22 @@ export abstract class AbstractWebNotificationManager {
       this.clearNotificationTimer(notification)
       this.removeNotificationFromStorage(id)
     }
+
+    return notification
   }
 
-  removeNotificationByIndex = (index: number): void => {
+  removeNotificationByIndex = (index: number): WebNotification | null => {
     const notifications = this.getNotifications()
 
     if (index >= 0 && index < notifications.length) {
       const notification = notifications[index]
       this.clearNotificationTimer(notification)
       this.removeNotificationFromStorageByIndex(index)
+
+      return notification
     }
+
+    return null
   }
 
   clearAllNotifications = (): void => {

From 174d358c99ac0dcc378b84d3f7492f0c4000ed1d Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Sat, 2 Aug 2025 13:27:21 +0100
Subject: [PATCH 11/14] fix: lint & build

---
 apps/frontend/src/app.vue                            | 2 +-
 packages/ui/src/components/nav/NotificationPanel.vue | 3 ++-
 packages/utils/types.ts                              | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index b6a3be6754..c4253d14e2 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -7,8 +7,8 @@
 </template>
 <script setup lang="ts">
 import { NotificationPanel, provideNotificationManager } from "@modrinth/ui";
-import ModrinthLoadingIndicator from "~/components/ui/modrinth-loading-indicator.ts";
 import { FrontendNotificationManager } from "./providers/frontend-notifications.ts";
+import ModrinthLoadingIndicator from "~/components/ui/modrinth-loading-indicator.ts";
 
 provideNotificationManager(new FrontendNotificationManager());
 </script>
diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index 32384cf4ee..c99cfdb3ba 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -86,8 +86,9 @@ import {
   XCircleIcon,
   XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, type WebNotification } from '@modrinth/ui'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { injectNotificationManager, type WebNotification } from '../../providers'
+import ButtonStyled from '../base/ButtonStyled.vue'
 
 const notificationManager = injectNotificationManager()
 const notifications = computed<WebNotification[]>(() => notificationManager.getNotifications())
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index f76a903e97..07d2aadfeb 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -107,7 +107,7 @@ export interface ProjectV3 {
   monetization_status: MonetizationStatus
   side_types_migration_review_status: 'reviewed' | 'pending'
 
-  [key: string]: any
+  [key: string]: unknown
 }
 
 export type SideTypesMigrationReviewStatus = 'reviewed' | 'pending'

From eebd3a407e57796fdf82e93ed8f756cfc9bfcbf3 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Tue, 5 Aug 2025 11:29:37 +0100
Subject: [PATCH 12/14] fix: merge issues

---
 apps/app-frontend/src/pages/instance/Worlds.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/app-frontend/src/pages/instance/Worlds.vue b/apps/app-frontend/src/pages/instance/Worlds.vue
index 7bb2c2cf17..d487a77c38 100644
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -141,18 +141,17 @@ import {
   getWorldIdentifier,
   get_profile_protocol_version,
   handleDefaultProfileUpdateEvent,
-  hasQuickPlaySupport,
+  hasServerQuickPlaySupport,
+  hasWorldQuickPlaySupport,
   refreshServerData,
   refreshServers,
   refreshWorld,
-  hasWorldQuickPlaySupport,
   refreshWorlds,
   remove_server_from_profile,
   showWorldInFolder,
   sortWorlds,
   start_join_server,
   start_join_singleplayer_world,
-  hasServerQuickPlaySupport,
 } from '@/helpers/worlds.ts'
 import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon, XIcon } from '@modrinth/assets'
 import {
@@ -283,7 +282,7 @@ async function editServer(server: ServerWorld) {
       await refreshServer(server.address)
     }
   } else {
-    handleError(`Error refreshing server, refreshing all worlds`)
+    handleError(new Error(`Error refreshing server, refreshing all worlds`))
     await refreshAllWorlds()
   }
 }
@@ -302,7 +301,7 @@ async function editWorld(path: string, name: string, removeIcon: boolean) {
     }
     sortWorlds(worlds.value)
   } else {
-    handleError(`Error finding world in list, refreshing all worlds`)
+    handleError(new Error(`Error finding world in list, refreshing all worlds`))
     await refreshAllWorlds()
   }
 }
@@ -312,7 +311,7 @@ async function deleteWorld(world: SingleplayerWorld) {
   worlds.value = worlds.value.filter((w) => w.type !== 'singleplayer' || w.path !== world.path)
 }
 
-function handleJoinError(err: unknown) {
+function handleJoinError(err: Error) {
   handleError(err)
   startingInstance.value = false
   worldPlaying.value = undefined
@@ -437,7 +436,7 @@ function promptToRemoveWorld(world: World): boolean {
 
 async function proceedRemoveServer() {
   if (!serverToRemove.value) {
-    handleError(`Error removing server, no server marked for removal.`)
+    handleError(new Error(`Error removing server, no server marked for removal.`))
     return
   }
   await removeServer(serverToRemove.value)
@@ -446,7 +445,7 @@ async function proceedRemoveServer() {
 
 async function proceedDeleteWorld() {
   if (!worldToDelete.value) {
-    handleError(`Error deleting world, no world marked for removal.`)
+    handleError(new Error(`Error deleting world, no world marked for removal.`))
     return
   }
   await deleteWorld(worldToDelete.value)

From 29f19014cb4f67921aa5db1c9472202deb7db76a Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <hendersoncal117@gmail.com>
Date: Sat, 9 Aug 2025 22:51:04 +0100
Subject: [PATCH 13/14] fix: lint issues

---
 .../checklist/ModerationChecklist.vue           | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index 4917a8f538..960af8e835 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -345,9 +345,9 @@ import {
   ListBulletedIcon,
   RightArrowIcon,
   ScaleIcon,
-  XIcon,
   ToggleLeftIcon,
   ToggleRightIcon,
+  XIcon,
 } from "@modrinth/assets";
 import {
   type Action,
@@ -387,23 +387,10 @@ import {
   type ModerationJudgements,
   type ModerationModpackItem,
   type Project,
-  renderHighlightedString,
   type ProjectStatus,
+  renderHighlightedString,
 } from "@modrinth/utils";
 import { computedAsync, useLocalStorage } from "@vueuse/core";
-import * as prettier from "prettier";
-import {
-  type Action,
-  type MultiSelectChipsAction,
-  type DropdownAction,
-  type ButtonAction,
-  type ToggleAction,
-  type ConditionalButtonAction,
-  type Stage,
-  finalPermissionMessages,
-} from "@modrinth/moderation";
-import ModpackPermissionsFlow from "./ModpackPermissionsFlow.vue";
-import KeybindsModal from "./ChecklistKeybindsModal.vue";
 import { useModerationStore } from "~/store/moderation.ts";
 import KeybindsModal from "./ChecklistKeybindsModal.vue";
 import ModpackPermissionsFlow from "./ModpackPermissionsFlow.vue";

From 5b1da91ee8d4c99d7d19e7862958d74110966df5 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Wed, 13 Aug 2025 21:39:58 +0100
Subject: [PATCH 14/14] fix: lint issues

---
 .../src/components/ui/ProjectMemberHeader.vue | 61 +++----------------
 .../src/pages/[type]/[id]/settings/index.vue  | 13 ++--
 2 files changed, 12 insertions(+), 62 deletions(-)

diff --git a/apps/frontend/src/components/ui/ProjectMemberHeader.vue b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
index 82b2d1feaa..1eecafe5a1 100644
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -112,23 +112,18 @@ import {
   LightBulbIcon,
   ScaleIcon,
   SendIcon,
-  XIcon,
-} from "@modrinth/assets";
-import { injectNotificationManager } from "@modrinth/ui";
-import { formatProjectType } from "@modrinth/utils";
   TriangleAlertIcon,
-  DropdownIcon,
-  SendIcon,
-  ScaleIcon,
-  InfoIcon,
+  XIcon,
 } from "@modrinth/assets";
-import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
-import { nags } from "@modrinth/moderation";
-import { ButtonStyled } from "@modrinth/ui";
-import { useVIntl, defineMessages, type MessageDescriptor } from "@vintl/vintl";
 import type { Nag, NagContext, NagStatus } from "@modrinth/moderation";
+import { nags } from "@modrinth/moderation";
+import { ButtonStyled, injectNotificationManager } from "@modrinth/ui";
 import type { Project, User, Version } from "@modrinth/utils";
+import { defineMessages, useVIntl, type MessageDescriptor } from "@vintl/vintl";
 import type { Component } from "vue";
+import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
+
+const { addNotification } = injectNotificationManager();
 
 interface Tags {
   rejectedStatuses: string[];
@@ -200,44 +195,6 @@ const messages = defineMessages({
     id: "project-member-header.resubmit-for-review",
     defaultMessage: "Resubmit for review",
   },
-  setProcessing: {
-    type: Function,
-    default() {
-      return () => {
-        const { addNotification } = injectNotificationManager();
-        addNotification({
-          title: "An error occurred",
-          text: "setProcessing function not found",
-          type: "error",
-        });
-      };
-    },
-  },
-  toggleCollapsed: {
-    type: Function,
-    default() {
-      return () => {
-        const { addNotification } = injectNotificationManager();
-        addNotification({
-          title: "An error occurred",
-          text: "toggleCollapsed function not found",
-          type: "error",
-        });
-      };
-    },
-  },
-  updateMembers: {
-    type: Function,
-    default() {
-      return () => {
-        const { addNotification } = injectNotificationManager();
-        addNotification({
-          title: "An error occurred",
-          text: "updateMembers function not found",
-          type: "error",
-        });
-      };
-    },
   resubmitForReviewDesc: {
     id: "project-member-header.resubmit-for-review-desc",
     defaultMessage:
@@ -477,14 +434,12 @@ async function acceptInvite(): Promise<void> {
     await acceptTeamInvite(props.project.team);
     await updateMembers();
     addNotification({
-      group: "main",
       title: formatMessage(messages.success),
       text: formatMessage(messages.successJoin),
       type: "success",
     });
   } catch (error) {
     addNotification({
-      group: "main",
       title: formatMessage(messages.error),
       text: formatMessage(messages.errorJoin),
       type: "error",
@@ -500,14 +455,12 @@ async function declineInvite(): Promise<void> {
     await removeTeamMember(props.project.team, props.auth.user.id);
     await updateMembers();
     addNotification({
-      group: "main",
       title: formatMessage(messages.success),
       text: formatMessage(messages.successDecline),
       type: "success",
     });
   } catch (error) {
     addNotification({
-      group: "main",
       title: formatMessage(messages.error),
       text: formatMessage(messages.errorDecline),
       type: "error",
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index 7ac6deb0d5..f89587d188 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -243,21 +243,18 @@
 </template>
 
 <script setup>
-import { CheckIcon, IssuesIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from "@modrinth/assets";
-import { Avatar, ConfirmModal, injectNotificationManager } from "@modrinth/ui";
-import { formatProjectStatus, formatProjectType } from "@modrinth/utils";
-import { Multiselect } from "vue-multiselect";
 import {
-  UploadIcon,
+  CheckIcon,
+  IssuesIcon,
   SaveIcon,
   TrashIcon,
+  UploadIcon,
   XIcon,
-  IssuesIcon,
-  CheckIcon,
   TriangleAlertIcon,
 } from "@modrinth/assets";
+import { Avatar, ConfirmModal, injectNotificationManager } from "@modrinth/ui";
+import { formatProjectStatus, formatProjectType } from "@modrinth/utils";
 import { Multiselect } from "vue-multiselect";
-import { ConfirmModal, Avatar } from "@modrinth/ui";
 import { MIN_SUMMARY_CHARS } from "@modrinth/moderation";
 import FileInput from "~/components/ui/FileInput.vue";