fix: merge issues

Signed-off-by: IMB11 <hendersoncal117@gmail.com>

.vscode/settings.json

@@ -4,6 +4,7 @@
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "editor.detectIndentation": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "always",
   }
 }

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 { 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 { getVersion } from '@tauri-apps/api/app'
+import { invoke } from '@tauri-apps/api/core'
+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 has-sidebar />
   <ErrorModal ref="errorModal" />
   <ModInstallModal ref="modInstallModal" />
   <IncompatibilityWarningModal ref="incompatibilityWarningModal" />

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: {

apps/app-frontend/src/components/RowDisplay.vue

@@ -1,31 +1,32 @@
 <script setup>
-import {
-  ClipboardCopyIcon,
-  FolderOpenIcon,
-  PlayIcon,
-  PlusIcon,
-  TrashIcon,
-  DownloadIcon,
-  GlobeIcon,
-  StopCircleIcon,
-  ExternalIcon,
-  EyeIcon,
-} from '@modrinth/assets'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import Instance from '@/components/ui/Instance.vue'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
 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 { 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 { 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,
+  StopCircleIcon,
+  TrashIcon,
+} from '@modrinth/assets'
+import { HeadingLink, injectNotificationManager } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { HeadingLink } from '@modrinth/ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const { handleError } = injectNotificationManager()
 
 const router = useRouter()
 

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: {

apps/app-frontend/src/components/ui/AddContentButton.vue

@@ -1,11 +1,12 @@
 <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 { 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()
+
 const props = defineProps({
   instance: {
     type: Object,

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()

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 { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
-import { open } from '@tauri-apps/plugin-dialog'
-import { handleError } from '@/store/notifications.js'
 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 { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
   instance: {

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({

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('')

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)

apps/app-frontend/src/components/ui/JavaSelector.vue

@@ -52,21 +52,22 @@
 </template>
 
 <script setup>
-import {
-  SearchIcon,
-  PlayIcon,
-  CheckIcon,
-  XIcon,
-  FolderSearchIcon,
-  DownloadIcon,
-} 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 { 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 { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
+import {
+  CheckIcon,
+  DownloadIcon,
+  FolderSearchIcon,
+  PlayIcon,
+  SearchIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { open } from '@tauri-apps/plugin-dialog'
+import { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
   version: {

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 () => {

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)

apps/app-frontend/src/components/ui/URLConfirmModal.vue

@@ -1,12 +1,13 @@
 <script setup>
-import { Button } from '@modrinth/ui'
-import { ref } from 'vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
-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 SearchCard from '@/components/ui/SearchCard.vue'
+import { get_project, get_version } from '@/helpers/cache.js'
+import { get_categories } from '@/helpers/tags.js'
+import { install as installVersion } from '@/store/install.js'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const confirmModal = ref(null)
 const project = ref(null)

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -1,23 +1,29 @@
 <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 {
-  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()
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{

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 { add_project_from_version as installMod } from '@/helpers/profile'
-import { ref } from 'vue'
-import { handleError } from '@/store/state.js'
 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 Multiselect from 'vue-multiselect'
 
+const { handleError } = injectNotificationManager()
+
 const instance = ref(null)
 const project = ref(null)
 const versions = ref(null)

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 { create_profile_and_install as pack_install } from '@/helpers/pack'
-import { ref } from 'vue'
-import { trackEvent } from '@/helpers/analytics'
-import { handleError } from '@/store/state.js'
 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'
+
+const { handleError } = injectNotificationManager()
 
 const versionId = ref()
 const project = ref()

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 { open } from '@tauri-apps/plugin-dialog'
-import { installVersionDependencies } from '@/store/install.js'
-import { handleError } from '@/store/notifications.js'
-import { useRouter } from 'vue-router'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { trackEvent } from '@/helpers/analytics'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
 const router = useRouter()
 
 const versions = ref()

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -1,17 +1,23 @@
 <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 { 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()
 const { formatMessage } = useVIntl()
 const router = useRouter()
 

apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue

@@ -1,12 +1,12 @@
 <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 { 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()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -1,23 +1,30 @@
 <script setup lang="ts">
-import {
-  TransferIcon,
-  IssuesIcon,
-  HammerIcon,
-  DownloadIcon,
-  WrenchIcon,
-  UndoIcon,
-  SpinnerIcon,
-  UnplugIcon,
-  UnlinkIcon,
-} 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 ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+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 {
+  DownloadIcon,
+  HammerIcon,
+  IssuesIcon,
+  SpinnerIcon,
+  TransferIcon,
+  UndoIcon,
+  UnlinkIcon,
+  UnplugIcon,
+  WrenchIcon,
+} from '@modrinth/assets'
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  Chips,
+  TeleportDropdownMenu,
+  injectNotificationManager,
+} from '@modrinth/ui'
 import {
   formatCategory,
   type GameVersionTag,
@@ -25,16 +32,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()
 const { formatMessage } = useVIntl()
 
 const repairConfirmModal = ref()

apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue

@@ -1,15 +1,15 @@
 <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 { 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()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue

@@ -1,12 +1,12 @@
 <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 { 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()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

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) {

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 { purge_cache_types } from '@/helpers/cache.js'
-import { handleError } from '@/store/notifications.js'
-import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { purge_cache_types } from '@/helpers/cache.js'
+import { get, set } from '@/helpers/settings.ts'
+import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
+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(

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -100,37 +100,39 @@
 </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 {
-  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()
 
 const modal = useTemplateRef('modal')
 const selectCapeModal = useTemplateRef('selectCapeModal')

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',

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -1,6 +1,12 @@
 <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 { handleSevereError } from '@/store/error'
 import {
   EyeIcon,
   FolderOpenIcon,
@@ -13,25 +19,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 { convertFileSrc } from '@tauri-apps/api/core'
-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'
+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'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 

apps/app-frontend/src/components/ui/world/RecentWorldsList.vue

@@ -1,30 +1,31 @@
 <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 { 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()
 
 const props = defineProps<{
   recentInstances: GameInstance[]

apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { ref } from 'vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.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 { defineMessages, useVIntl } from '@vintl/vintl'
-import { handleError } from '@/store/notifications'
+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 { 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()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue

@@ -1,21 +1,21 @@
 <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 { 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()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue

@@ -1,15 +1,15 @@
 <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 { 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()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

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(() => {

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)

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(

apps/app-frontend/src/helpers/skins.ts

@@ -1,6 +1,6 @@
-import { invoke } from '@tauri-apps/api/core'
-import { handleError } from '@/store/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 +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()
   fixUnknownSkins(customSkins).catch(handleError)
   return customSkins
 }

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: {

apps/app-frontend/src/pages/Browse.vue

@@ -1,33 +1,34 @@
 <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 { 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()
 const { formatMessage } = useVIntl()
 
 const router = useRouter()

apps/app-frontend/src/pages/Index.vue

@@ -1,17 +1,18 @@
 <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 { profile_listener } from '@/helpers/events'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { handleError } from '@/store/notifications.js'
-import dayjs from 'dayjs'
-import { get_search_results } from '@/helpers/cache.js'
-import type { SearchResult } from '@modrinth/utils'
 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 { useBreadcrumbs } from '@/store/breadcrumbs'
+import { injectNotificationManager } from '@modrinth/ui'
+import type { SearchResult } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 

apps/app-frontend/src/pages/Skins.vue

@@ -1,4 +1,26 @@
 <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 { handleSevereError } from '@/store/error'
 import {
   EditIcon,
   ExcitedRinthbot,
@@ -12,42 +34,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()
+const { handleError } = notifications
 
 const settings = ref(await getSettings())
 const skins = ref<Skin[]>([])
@@ -113,7 +114,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 +127,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 +162,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 +191,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 +208,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 +277,7 @@ async function checkUserChanges() {
       await loadSkins()
     }
   } catch (error) {
-    if (currentUser.value) {
+    if (currentUser.value && error instanceof Error) {
       handleError(error)
     }
   }
@@ -376,7 +377,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>

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()

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({

apps/app-frontend/src/pages/instance/Mods.vue

@@ -249,6 +249,30 @@
   </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 {
   CheckCircleIcon,
   ClipboardCopyIcon,
@@ -271,44 +295,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 { getCurrentWebview } from '@tauri-apps/api/webview'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import dayjs from 'dayjs'
 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 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'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps<{
   instance: GameInstance

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -121,55 +121,55 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, onUnmounted, watch } from 'vue'
-import { useRoute } from 'vue-router'
-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 ProtocolVersion,
-  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,
-  refreshServerData,
-  refreshWorld,
-  sortWorlds,
-  refreshServers,
-  hasWorldQuickPlaySupport,
-  refreshWorlds,
-  handleDefaultProfileUpdateEvent,
-  showWorldInFolder,
-  hasServerQuickPlaySupport,
-} from '@/helpers/worlds.ts'
+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 ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { handleError } from '@/store/notifications'
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
-import type { Version } from '@modrinth/utils'
 import { profile_listener } from '@/helpers/events'
 import { get_game_versions } from '@/helpers/tags'
+import type { GameInstance } from '@/helpers/types'
+import {
+  type ProfileEvent,
+  type ProtocolVersion,
+  type ServerData,
+  type ServerWorld,
+  type SingleplayerWorld,
+  type World,
+  delete_world,
+  getWorldIdentifier,
+  get_profile_protocol_version,
+  handleDefaultProfileUpdateEvent,
+  hasServerQuickPlaySupport,
+  hasWorldQuickPlaySupport,
+  refreshServerData,
+  refreshServers,
+  refreshWorld,
+  refreshWorlds,
+  remove_server_from_profile,
+  showWorldInFolder,
+  sortWorlds,
+  start_join_server,
+  start_join_singleplayer_world,
+} from '@/helpers/worlds.ts'
+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 { defineMessages } from '@vintl/vintl'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const addServerModal = ref<InstanceType<typeof AddServerModal>>()
@@ -282,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()
   }
 }
@@ -301,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()
   }
 }
@@ -311,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
@@ -436,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)
@@ -445,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)

apps/app-frontend/src/pages/library/Index.vue

@@ -1,16 +1,16 @@
 <script setup>
-import { onUnmounted, ref, shallowRef } from 'vue'
-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 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 { useBreadcrumbs } from '@/store/breadcrumbs.js'
+import { PlusIcon } from '@modrinth/assets'
+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()
 

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,
-  DownloadIcon,
-  ReportIcon,
-  HeartIcon,
-  ExternalIcon,
   CheckIcon,
-  GlobeIcon,
   ClipboardCopyIcon,
+  DownloadIcon,
+  ExternalIcon,
+  GlobeIcon,
+  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()

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),

apps/app-frontend/src/providers/app-notifications.ts

@@ -0,0 +1,48 @@
+import {
+  AbstractWebNotificationManager,
+  type NotificationPanelLocation,
+  type WebNotification,
+} from '@modrinth/ui'
+import { ref, type Ref } from 'vue'
+
+export class AppNotificationManager extends AbstractWebNotificationManager {
+  private readonly state: Ref<WebNotification[]>
+  private readonly locationState: Ref<NotificationPanelLocation>
+
+  public constructor() {
+    super()
+    this.state = ref<WebNotification[]>([])
+    this.locationState = ref<NotificationPanelLocation>('right')
+  }
+
+  public getNotificationLocation(): NotificationPanelLocation {
+    return this.locationState.value
+  }
+
+  public setNotificationLocation(location: NotificationPanelLocation): 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)
+  }
+}

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

apps/app-frontend/src/store/notifications.js

@@ -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)
-}

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 }

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 { FrontendNotificationManager } from "./providers/frontend-notifications.ts";
 import ModrinthLoadingIndicator from "~/components/ui/modrinth-loading-indicator.ts";
-import Notifications from "~/components/ui/Notifications.vue";
+
+provideNotificationManager(new FrontendNotificationManager());
 </script>

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",

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",

apps/frontend/src/components/ui/NotificationItem.vue

@@ -319,30 +319,21 @@
 </template>
 
 <script setup>
-import { renderString } from "@modrinth/utils";
 import {
-  UserPlusIcon,
-  ScaleIcon,
   BellIcon,
-  CheckCircleIcon,
   CalendarIcon,
-  VersionIcon,
+  CheckCircleIcon,
   CheckIcon,
-  XIcon,
   ExternalIcon,
+  ScaleIcon,
+  UserPlusIcon,
+  VersionIcon,
+  XIcon,
 } 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";
+import { injectNotificationManager } from "@modrinth/ui";
 
-const app = useNuxtApp();
+const { addNotification } = injectNotificationManager();
 const emit = defineEmits(["update:notifications"]);
-
 const formatRelativeTime = useRelativeTime();
 
 const props = defineProps({
@@ -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",

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,20 +70,22 @@
     </div>
   </NewModal>
 </template>
-<script setup>
-import { XIcon, PlusIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
+
+<script setup lang="ts">
+import { PlusIcon, XIcon } from "@modrinth/assets";
+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 name = ref<string>("");
+const slug = ref<string>("");
+const description = ref<string>("");
+const manualSlug = ref<boolean>(false);
+const modal = ref<InstanceType<typeof NewModal>>();
 
-const modal = ref();
-
-async function createOrganization() {
+async function createOrganization(): Promise<void> {
   startLoading();
   try {
     const value = {
@@ -92,19 +94,18 @@ 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({
-      group: "main",
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -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,
 });

apps/frontend/src/components/ui/ProjectMemberHeader.vue

@@ -109,15 +109,16 @@
 
 <script setup>
 import {
-  ChevronRightIcon,
-  CheckIcon,
-  XIcon,
   AsteriskIcon,
-  LightBulbIcon,
-  SendIcon,
-  ScaleIcon,
+  CheckIcon,
+  ChevronRightIcon,
   DropdownIcon,
+  LightBulbIcon,
+  ScaleIcon,
+  SendIcon,
+  XIcon,
 } from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
 import { formatProjectType } from "@modrinth/utils";
 import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
 
@@ -164,8 +165,8 @@ const props = defineProps({
     type: Function,
     default() {
       return () => {
+        const { addNotification } = injectNotificationManager();
         addNotification({
-          group: "main",
           title: "An error occurred",
           text: "setProcessing function not found",
           type: "error",
@@ -177,8 +178,8 @@ const props = defineProps({
     type: Function,
     default() {
       return () => {
+        const { addNotification } = injectNotificationManager();
         addNotification({
-          group: "main",
           title: "An error occurred",
           text: "toggleCollapsed function not found",
           type: "error",
@@ -190,8 +191,8 @@ const props = defineProps({
     type: Function,
     default() {
       return () => {
+        const { addNotification } = injectNotificationManager();
         addNotification({
-          group: "main",
           title: "An error occurred",
           text: "updateMembers function not found",
           type: "error",

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 {
-  EllipsisVerticalIcon,
-  OrganizationIcon,
-  EyeIcon,
   ClipboardCopyIcon,
+  EllipsisVerticalIcon,
+  EyeIcon,
   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;

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 {
-  EllipsisVerticalIcon,
-  OrganizationIcon,
-  EyeIcon,
   ClipboardCopyIcon,
+  EllipsisVerticalIcon,
+  EyeIcon,
   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;
 }>();

apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue

@@ -313,65 +313,66 @@
 
 <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,
-  getActionIdForStage,
-  initializeActionState,
-  getActionMessage,
-  findMatchingVariant,
-  processMessage,
-  getVisibleInputs,
-  serializeActionStates,
   deserializeActionStates,
-  kebabToTitleCase,
-  flattenProjectVariables,
   expandVariables,
+  finalPermissionMessages,
+  findMatchingVariant,
+  flattenProjectVariables,
+  getActionIdForStage,
+  getActionMessage,
+  getVisibleInputs,
   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,
   type ProjectStatus,
 } 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>>();
 

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;
 }>();

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;
 }>();

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;
 }>();

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",

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",

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",

apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue

@@ -144,18 +144,20 @@
 </template>
 
 <script setup lang="ts">
-import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
 import {
-  UploadIcon,
-  RightArrowIcon,
-  XIcon,
-  ServerIcon,
   ArrowBigRightDashIcon,
+  RightArrowIcon,
+  ServerIcon,
+  UploadIcon,
+  XIcon,
 } from "@modrinth/assets";
+import { BackupWarning, ButtonStyled, injectNotificationManager, NewModal } from "@modrinth/ui";
 import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
 import { onMounted, onUnmounted } from "vue";
-import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
 import type { ModrinthServer } from "~/composables/servers/modrinth-servers";
+import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+
+const { addNotification } = injectNotificationManager();
 
 const handleBeforeUnload = (event: BeforeUnloadEvent) => {
   if (isLoading.value) {
@@ -250,7 +252,6 @@ const handleReinstall = async () => {
 
   if (!mrpackFile.value) {
     addNotification({
-      group: "server",
       title: "No file selected",
       text: "Choose a .mrpack file before installing.",
       type: "error",
@@ -301,14 +302,12 @@ const handleReinstall = async () => {
   } catch (error) {
     if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
       addNotification({
-        group: "server",
         title: "Cannot upload and install modpack to server",
         text: "You are being rate limited. Please try again later.",
         type: "error",
       });
     } else {
       addNotification({
-        group: "server",
         title: "Modpack upload and install failed",
         text: "An unexpected error occurred while uploading/installing. Please try again later.",
         type: "error",

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",

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",

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",

apps/frontend/src/components/ui/thread/ConversationThread.vue

@@ -251,23 +251,25 @@
 </template>
 
 <script setup>
-import { CopyCode, OverflowMenu, MarkdownEditor } from "@modrinth/ui";
 import {
-  DropdownIcon,
-  ReplyIcon,
-  SendIcon,
   CheckCircleIcon,
-  XIcon,
-  EyeOffIcon,
   CheckIcon,
+  DropdownIcon,
+  EyeOffIcon,
+  ReplyIcon,
   ScaleIcon,
+  SendIcon,
+  XIcon,
 } from "@modrinth/assets";
-import { useImageUpload } from "~/composables/image-upload.ts";
-import ThreadMessage from "~/components/ui/thread/ThreadMessage.vue";
-import { isStaff } from "~/helpers/users.js";
-import { isApproved, isRejected } from "~/helpers/projects.js";
-import Modal from "~/components/ui/Modal.vue";
+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 { useImageUpload } from "~/composables/image-upload.ts";
+import { isApproved, isRejected } from "~/helpers/projects.js";
+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",

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;

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",

apps/frontend/src/composables/notifs.js

@@ -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);
-};

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`,

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",

apps/frontend/src/composables/user.js

@@ -135,7 +135,8 @@ export const userFollowProject = async (project) => {
   }
 };
 export const resendVerifyEmail = async () => {
-  const app = useNuxtApp();
+  // const { injectNotificationManager } = await import("@modrinth/ui");
+  // const { addNotification } = injectNotificationManager();
 
   startLoading();
   try {
@@ -144,15 +145,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",

apps/frontend/src/helpers/platform-notifications.ts

@@ -1,19 +1,14 @@
-import { useNuxtApp } from "#imports";
+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;
@@ -173,9 +168,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",

apps/frontend/src/layouts/default.vue

@@ -666,65 +666,65 @@
 </template>
 <script setup>
 import {
-  ModrinthIcon,
   ArrowBigUpDashIcon,
-  BookmarkIcon,
-  ServerIcon,
-  LogInIcon,
-  DownloadIcon,
-  LibraryIcon,
-  XIcon,
-  IssuesIcon,
-  ReportIcon,
-  CompassIcon,
-  HamburgerIcon,
-  SearchIcon,
   BellIcon,
-  SettingsIcon,
+  BlueskyIcon,
+  BookmarkIcon,
+  BoxIcon,
+  BracesIcon,
+  ChartIcon,
+  CollectionIcon,
+  CompassIcon,
+  CurrencyIcon,
+  DiscordIcon,
+  DownloadIcon,
+  DropdownIcon,
+  GithubIcon,
+  GlassesIcon,
+  HamburgerIcon,
   HomeIcon,
+  IssuesIcon,
+  LibraryIcon,
+  LogInIcon,
+  LogOutIcon,
+  MastodonIcon,
+  ModrinthIcon,
   MoonIcon,
-  SunIcon,
+  OrganizationIcon,
+  PackageOpenIcon,
+  PaintbrushIcon,
   PlugIcon,
   PlusIcon,
-  DropdownIcon,
-  LogOutIcon,
-  ChartIcon,
-  BoxIcon,
-  CollectionIcon,
-  OrganizationIcon,
-  UserIcon,
-  CurrencyIcon,
-  BracesIcon,
-  GlassesIcon,
-  PaintbrushIcon,
-  PackageOpenIcon,
-  DiscordIcon,
-  BlueskyIcon,
-  TwitterIcon,
-  MastodonIcon,
-  GithubIcon,
+  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",

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,11 +1552,15 @@ const collapsedModerationChecklist = useLocalStorage("collapsed-moderation-check
 watch(
   showModerationChecklist,
   (newValue) => {
-    setVisible(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;
 }

apps/frontend/src/pages/[type]/[id]/gallery.vue

@@ -278,26 +278,26 @@
 
 <script setup>
 import {
-  PlusIcon,
   CalendarIcon,
+  ContractIcon,
   EditIcon,
-  TrashIcon,
+  ExpandIcon,
+  ExternalIcon,
+  ImageIcon,
+  InfoIcon,
+  LeftArrowIcon,
+  PlusIcon,
+  RightArrowIcon,
   SaveIcon,
   StarIcon,
-  XIcon,
-  RightArrowIcon,
-  LeftArrowIcon,
-  ExternalIcon,
-  ExpandIcon,
-  ContractIcon,
-  UploadIcon,
-  InfoIcon,
-  ImageIcon,
   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",

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",

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",

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,
-  DropdownIcon,
-  SaveIcon,
-  UserPlusIcon,
-  UserXIcon,
-  OrganizationIcon,
   CrownIcon,
+  DropdownIcon,
+  OrganizationIcon,
+  SaveIcon,
+  TransferIcon,
+  UserPlusIcon,
+  UsersIcon,
+  UserXIcon,
 } 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",

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",

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,
-  TransferIcon,
-  UploadIcon,
-  BoxIcon,
+  ReportIcon,
   RightArrowIcon,
-  ChevronRightIcon,
+  SaveIcon,
+  StarIcon,
+  TransferIcon,
+  TrashIcon,
+  UploadIcon,
+  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",

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();

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 type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
-import { computed } from "vue";
 import { NOTICE_LEVELS } from "@modrinth/ui/src/utils/notices.ts";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
+import { useVIntl } from "@vintl/vintl";
+import dayjs from "dayjs";
+import { computed } from "vue";
 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",

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",

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 { 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";
 
+const { addNotification } = injectNotificationManager();
 const { formatMessage } = useVIntl();
 
 const messages = defineMessages({
@@ -117,8 +118,6 @@ const messages = defineMessages({
   },
 });
 
-const data = useNuxtApp();
-
 const router = useNativeRoute();
 const auth = await useAuth();
 const { scopesToDefinitions } = useScopes();
@@ -196,8 +195,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 +221,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",

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 { 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();
 
 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",

apps/frontend/src/pages/auth/sign-in.vue

@@ -130,19 +130,20 @@
 
 <script setup>
 import {
-  RightArrowIcon,
-  SSOGitHubIcon,
-  SSOMicrosoftIcon,
-  SSOSteamIcon,
-  SSOGoogleIcon,
-  SSODiscordIcon,
-  SSOGitLabIcon,
   KeyIcon,
   MailIcon,
+  RightArrowIcon,
+  SSODiscordIcon,
+  SSOGitHubIcon,
+  SSOGitLabIcon,
+  SSOGoogleIcon,
+  SSOMicrosoftIcon,
+  SSOSteamIcon,
 } from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
+import { commonMessages, injectNotificationManager } from "@modrinth/ui";
 import HCaptcha from "@/components/ui/HCaptcha.vue";
 
+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",

apps/frontend/src/pages/auth/sign-up.vue

@@ -134,20 +134,21 @@
 
 <script setup>
 import {
-  RightArrowIcon,
-  UserIcon,
-  SSOGitHubIcon,
-  SSOMicrosoftIcon,
-  SSOGoogleIcon,
-  SSOSteamIcon,
-  SSODiscordIcon,
   KeyIcon,
   MailIcon,
+  RightArrowIcon,
+  SSODiscordIcon,
+  SSOGitHubIcon,
   SSOGitLabIcon,
+  SSOGoogleIcon,
+  SSOMicrosoftIcon,
+  SSOSteamIcon,
+  UserIcon,
 } from "@modrinth/assets";
-import { Checkbox, commonMessages } from "@modrinth/ui";
+import { Checkbox, commonMessages, injectNotificationManager } from "@modrinth/ui";
 import HCaptcha from "@/components/ui/HCaptcha.vue";
 
+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",

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",

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

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

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

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

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

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

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

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

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

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