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/eslint.config.mjs

@@ -1,2 +1,22 @@
-import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
-export default config
+import { fixupPluginRules } from '@eslint/compat'
+import turboPlugin from 'eslint-plugin-turbo'
+
+export default createConfigForNuxt().append([
+  {
+    name: 'turbo',
+    plugins: {
+      turbo: fixupPluginRules(turboPlugin),
+    },
+    rules: {
+      'turbo/no-undeclared-env-vars': 'error',
+    },
+  },
+  {
+    name: 'modrinth',
+    rules: {
+      'vue/html-self-closing': 'off',
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+])

apps/app-frontend/package.json

@@ -41,7 +41,6 @@
     "vue-virtual-scroller": "v2.0.0-beta.8"
   },
   "devDependencies": {
-    "@modrinth/tooling-config": "workspace:*",
     "@eslint/compat": "^1.1.1",
     "@formatjs/cli": "^6.2.12",
     "@nuxt/eslint-config": "^0.5.6",
@@ -49,11 +48,13 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.9.1",
+    "eslint-config-custom": "workspace:*",
     "eslint-plugin-turbo": "^2.5.4",
     "postcss": "^8.4.39",
     "prettier": "^3.2.5",
     "sass": "^1.74.1",
     "tailwindcss": "^3.4.4",
+    "tsconfig": "workspace:*",
     "typescript": "^5.5.4",
     "vite": "^5.4.6",
     "vue-tsc": "^2.1.6"

apps/app-frontend/src/App.vue

@@ -1,43 +1,4 @@
 <script setup>
-import {
-  ArrowBigUpDashIcon,
-  ChangeSkinIcon,
-  CompassIcon,
-  DownloadIcon,
-  HomeIcon,
-  LeftArrowIcon,
-  LibraryIcon,
-  LogInIcon,
-  LogOutIcon,
-  MaximizeIcon,
-  MinimizeIcon,
-  NewspaperIcon,
-  PlusIcon,
-  RestoreIcon,
-  RightArrowIcon,
-  SettingsIcon,
-  WorldIcon,
-  XIcon,
-} from '@modrinth/assets'
-import {
-  Avatar,
-  Button,
-  ButtonStyled,
-  NewsArticleCard,
-  Notifications,
-  OverflowMenu,
-} from '@modrinth/ui'
-import { renderString } from '@modrinth/utils'
-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 { 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 ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
 import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
@@ -68,15 +29,57 @@ 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 { handleError, useNotifications } from '@/store/notifications.js'
 import { useLoading, useTheming } from '@/store/state'
-
+import {
+  ArrowBigUpDashIcon,
+  ChangeSkinIcon,
+  CompassIcon,
+  DownloadIcon,
+  HomeIcon,
+  LeftArrowIcon,
+  LibraryIcon,
+  LogInIcon,
+  LogOutIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+  NewspaperIcon,
+  PlusIcon,
+  RestoreIcon,
+  RightArrowIcon,
+  SettingsIcon,
+  WorldIcon,
+  XIcon,
+} from '@modrinth/assets'
+import {
+  Avatar,
+  Button,
+  ButtonStyled,
+  NewsArticleCard,
+  NotificationPanel,
+  OverflowMenu,
+  provideNotificationManager,
+} from '@modrinth/ui'
+import { renderString } from '@modrinth/utils'
+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 { 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)
@@ -169,7 +172,7 @@ async function setupApp() {
   }
 
   await warning_listener((e) =>
-    notificationsWrapper.value.addNotification({
+    addNotification({
       title: 'Warning',
       text: e.message,
       type: 'warn',
@@ -253,9 +256,6 @@ const route = useRoute()
 const loading = useLoading()
 loading.setEnabled(false)
 
-const notifications = useNotifications()
-const notificationsWrapper = ref()
-
 const error = useError()
 const errorModal = ref()
 
@@ -337,8 +337,6 @@ watch(
 onMounted(() => {
   invoke('show_window')
 
-  notifications.setNotifs(notificationsWrapper.value)
-
   error.setErrorModal(errorModal.value)
 
   install.setIncompatibilityWarningModal(incompatibilityWarningModal)
@@ -659,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/assets/external/index.js

@@ -1,18 +1,18 @@
-export { default as ATLauncherIcon } from './atlauncher.svg'
 export { default as BuyMeACoffeeIcon } from './bmac.svg'
 export { default as DiscordIcon } from './discord.svg'
-export { default as GDLauncherIcon } from './gdlauncher.png'
-export { default as GithubIcon } from './github.svg'
-export { default as GitLabIcon } from './gitlab.svg'
-export { default as GoogleIcon } from './google.svg'
 export { default as KoFiIcon } from './kofi.svg'
-export { default as MastodonIcon } from './mastodon.svg'
-export { default as MicrosoftIcon } from './microsoft.svg'
-export { default as MultiMCIcon } from './multimc.webp'
-export { default as OpenCollectiveIcon } from './opencollective.svg'
 export { default as PatreonIcon } from './patreon.svg'
 export { default as PaypalIcon } from './paypal.svg'
-export { default as PrismIcon } from './prism.svg'
+export { default as OpenCollectiveIcon } from './opencollective.svg'
-export { default as RedditIcon } from './reddit.svg'
-export { default as SteamIcon } from './steam.svg'
 export { default as TwitterIcon } from './twitter.svg'
+export { default as GithubIcon } from './github.svg'
+export { default as MastodonIcon } from './mastodon.svg'
+export { default as RedditIcon } from './reddit.svg'
+export { default as GoogleIcon } from './google.svg'
+export { default as MicrosoftIcon } from './microsoft.svg'
+export { default as SteamIcon } from './steam.svg'
+export { default as GitLabIcon } from './gitlab.svg'
+export { default as ATLauncherIcon } from './atlauncher.svg'
+export { default as GDLauncherIcon } from './gdlauncher.png'
+export { default as MultiMCIcon } from './multimc.webp'
+export { default as PrismIcon } from './prism.svg'

apps/app-frontend/src/assets/icons/index.js

@@ -1,9 +1,9 @@
-export { default as AddProjectImage } from './add-project.svg'
 export { default as SwapIcon } from './arrow-left-right.svg'
+export { default as ToggleIcon } from './toggle.svg'
+export { default as PackageIcon } from './package.svg'
+export { default as VersionIcon } from './milestone.svg'
+export { default as TextInputIcon } from './text-cursor-input.svg'
+export { default as AddProjectImage } from './add-project.svg'
+export { default as NewInstanceImage } from './new-instance.svg'
 export { default as MenuIcon } from './menu.svg'
 export { default as ChatIcon } from './messages-square.svg'
-export { default as VersionIcon } from './milestone.svg'
-export { default as NewInstanceImage } from './new-instance.svg'
-export { default as PackageIcon } from './package.svg'
-export { default as TextInputIcon } from './text-cursor-input.svg'
-export { default as ToggleIcon } from './toggle.svg'

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

@@ -1,4 +1,8 @@
 <script setup>
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import Instance from '@/components/ui/Instance.vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { duplicate, remove } from '@/helpers/profile.js'
 import {
   ClipboardCopyIcon,
   EyeIcon,
@@ -10,16 +14,12 @@ import {
   TrashIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect } from '@modrinth/ui'
+import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
 import { formatCategoryHeader } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+const { handleError } = injectNotificationManager()
-import Instance from '@/components/ui/Instance.vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { duplicate, remove } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
 
 const props = defineProps({
   instances: {

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

@@ -1,6 +1,5 @@
 <script setup>
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-
 import { useLoading } from '@/store/state.js'
 
 const props = defineProps({

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

@@ -1,4 +1,14 @@
 <script setup>
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import Instance from '@/components/ui/Instance.vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ProjectCard from '@/components/ui/ProjectCard.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_by_profile_path } from '@/helpers/process.js'
+import { duplicate, kill, remove, run } from '@/helpers/profile.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import { handleSevereError } from '@/store/error.js'
+import { install as installVersion } from '@/store/install.js'
 import {
   ClipboardCopyIcon,
   DownloadIcon,
@@ -11,22 +21,12 @@ import {
   StopCircleIcon,
   TrashIcon,
 } from '@modrinth/assets'
-import { HeadingLink } from '@modrinth/ui'
+import { HeadingLink, injectNotificationManager } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+const { handleError } = injectNotificationManager()
-import Instance from '@/components/ui/Instance.vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import ProjectCard from '@/components/ui/ProjectCard.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { get_by_profile_path } from '@/helpers/process.js'
-import { duplicate, kill, remove, run } from '@/helpers/profile.js'
-import { showProfileInFolder } from '@/helpers/utils.js'
-import { handleSevereError } from '@/store/error.js'
-import { install as installVersion } from '@/store/install.js'
-import { handleError } from '@/store/notifications.js'
 
 const router = useRouter()
 

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

@@ -73,10 +73,6 @@
 </template>
 
 <script setup>
-import { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
-import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
-
 import { trackEvent } from '@/helpers/analytics'
 import {
   get_default_user,
@@ -89,7 +85,11 @@ import { process_listener } from '@/helpers/events'
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
 import { get_available_skins } from '@/helpers/skins'
 import { handleSevereError } from '@/store/error.js'
-import { handleError } from '@/store/state.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,11 @@
 <script setup lang="ts">
+import { add_project_from_path } from '@/helpers/profile.js'
 import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
-import { ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'
 
-import { add_project_from_path } from '@/helpers/profile.js'
+const { handleError } = injectNotificationManager()
-import { handleError } from '@/store/notifications.js'
 
 const props = defineProps({
   instance: {

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

@@ -42,12 +42,11 @@
 </template>
 
 <script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
+import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
 import { Button } from '@modrinth/ui'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
 import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
 
 const route = useRoute()
 

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

@@ -1,4 +1,11 @@
 <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,
@@ -8,17 +15,10 @@ import {
   UpdatedIcon,
   XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Collapsible } from '@modrinth/ui'
+import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import { ChatIcon } from '@/assets/icons'
+const { handleError } = injectNotificationManager()
-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 { handleError } from '@/store/notifications.js'
 
 const errorModal = ref()
 const error = ref()

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

@@ -1,13 +1,13 @@
 <script setup>
-import { PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, Checkbox } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
-import { ref } from 'vue'
-
 import { PackageIcon, VersionIcon } from '@/assets/icons'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.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,4 +1,10 @@
 <script setup>
+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,
@@ -7,20 +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 dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { trackEvent } from '@/helpers/analytics'
+const { handleError } = injectNotificationManager()
-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 { handleError } from '@/store/state.js'
-
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps({

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

@@ -197,23 +197,6 @@
 </template>
 
 <script setup>
-import {
-  CodeIcon,
-  FolderOpenIcon,
-  FolderSearchIcon,
-  InfoIcon,
-  PlusIcon,
-  UpdatedIcon,
-  UploadIcon,
-  XIcon,
-} from '@modrinth/assets'
-import { Avatar, Button, Checkbox, Chips } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-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'
-
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { trackEvent } from '@/helpers/analytics'
@@ -226,7 +209,24 @@ 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 { handleError } from '@/store/notifications.js'
+import {
+  CodeIcon,
+  FolderOpenIcon,
+  FolderSearchIcon,
+  InfoIcon,
+  PlusIcon,
+  UpdatedIcon,
+  UploadIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { Avatar, Button, Checkbox, Chips, injectNotificationManager } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+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/InstanceIndicator.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { formatCategory } from '@modrinth/utils'
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
 import { Avatar, ButtonStyled } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
-import { convertFileSrc } from '@tauri-apps/api/core'
 
 type Instance = {
   game_version: string

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

@@ -35,14 +35,14 @@
   </ModalWrapper>
 </template>
 <script setup>
-import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { ref } from 'vue'
-
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { find_filtered_jres } from '@/helpers/jre.js'
-import { handleError } from '@/store/notifications.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,6 +52,9 @@
 </template>
 
 <script setup>
+import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
 import {
   CheckIcon,
   DownloadIcon,
@@ -60,14 +63,11 @@ import {
   SearchIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 
-import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
+const { handleError } = injectNotificationManager()
-import { trackEvent } from '@/helpers/analytics'
-import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
-import { handleError } from '@/store/state.js'
 
 const props = defineProps({
   version: {

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

@@ -1,12 +1,11 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, Button } from '@modrinth/ui'
+import { Button, Badge } from '@modrinth/ui'
 import { computed, ref } from 'vue'
-
-import { SwapIcon } from '@/assets/icons/index.js'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { update_managed_modrinth_version } from '@/helpers/profile'
 import { releaseColor } from '@/helpers/utils'
+import { SwapIcon } from '@/assets/icons/index.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps({
   versions: {

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

@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { RouterLink, useRoute } from 'vue-router'
+import { useRoute, RouterLink } from 'vue-router'
 
 const route = useRoute()
 

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

@@ -1,10 +1,10 @@
 <script setup>
-import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
 import { Avatar, TagItem } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
+import { formatNumber, formatCategory } from '@modrinth/utils'
+import { computed } from 'vue'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 dayjs.extend(relativeTime)

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

@@ -1,6 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref, onMounted } from 'vue'
-
 import { init_ads_window } from '@/helpers/ads.js'
 
 const adsWrapper = ref(null)

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

@@ -1,14 +1,14 @@
 <script setup>
+import NavButton from '@/components/ui/NavButton.vue'
+import { profile_listener } from '@/helpers/events.js'
+import { list } from '@/helpers/profile'
 import { SpinnerIcon } from '@modrinth/assets'
-import { Avatar } from '@modrinth/ui'
+import { Avatar, injectNotificationManager } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { onUnmounted, ref } from 'vue'
 
-import NavButton from '@/components/ui/NavButton.vue'
+const { handleError } = injectNotificationManager()
-import { profile_listener } from '@/helpers/events.js'
-import { list } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
 
 const recentInstances = ref([])
 const getInstances = async () => {

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

@@ -94,6 +94,12 @@
 </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,
@@ -101,17 +107,11 @@ import {
   TerminalSquareIcon,
   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 { useRouter } from 'vue-router'
 
-import ProgressBar from '@/components/ui/ProgressBar.vue'
+const { handleError } = injectNotificationManager()
-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 { handleError } from '@/store/notifications.js'
 
 const router = useRouter()
 const card = ref(null)

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

@@ -117,15 +117,14 @@
 </template>
 
 <script setup>
-import { CheckIcon, DownloadIcon, HeartIcon, PlusIcon, TagsIcon } from '@modrinth/assets'
+import { TagsIcon, DownloadIcon, HeartIcon, PlusIcon, CheckIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { ButtonStyled, Avatar } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { formatNumber, formatCategory } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { computed, ref } from 'vue'
+import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
-
 import { install as installVersion } from '@/store/install.js'
+import { useRouter } from 'vue-router'
 dayjs.extend(relativeTime)
 
 const router = useRouter()

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

@@ -82,12 +82,11 @@
 </template>
 
 <script setup>
-import { MaximizeIcon, MinimizeIcon, XIcon } from '@modrinth/assets'
-import { getCurrentWindow } from '@tauri-apps/api/window'
 import { ref, watch } from 'vue'
-
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { loading_listener } from '@/helpers/events.js'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { XIcon, MaximizeIcon, MinimizeIcon } from '@modrinth/assets'
 import { getOS } from '@/helpers/utils.js'
 import { useLoading } from '@/store/loading.js'
 

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

@@ -1,13 +1,13 @@
 <script setup>
-import { Button } from '@modrinth/ui'
-import { ref } from 'vue'
-
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import SearchCard from '@/components/ui/SearchCard.vue'
 import { get_project, get_version } from '@/helpers/cache.js'
 import { get_categories } from '@/helpers/tags.js'
 import { install as installVersion } from '@/store/install.js'
-import { handleError } from '@/store/notifications.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,4 +1,9 @@
 <script setup lang="ts">
+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 {
   MailIcon,
   MoreVerticalIcon,
@@ -7,18 +12,18 @@ import {
   UserPlusIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, OverflowMenu, useRelativeTime } from '@modrinth/ui'
+import {
+  Avatar,
+  ButtonStyled,
+  injectNotificationManager,
+  OverflowMenu,
+  useRelativeTime,
+} from '@modrinth/ui'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+const { handleError } = injectNotificationManager()
-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 { handleError } from '@/store/notifications.js'
-
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{

apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue

@@ -56,16 +56,16 @@
 </template>
 
 <script setup>
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { add_project_from_version as installMod } from '@/helpers/profile'
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 import { ref } from 'vue'
 import Multiselect from 'vue-multiselect'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+const { handleError } = injectNotificationManager()
-import { trackEvent } from '@/helpers/analytics'
-import { add_project_from_version as installMod } from '@/helpers/profile'
-import { handleError } from '@/store/state.js'
 
 const instance = ref(null)
 const project = ref(null)
@@ -77,10 +77,10 @@ const installing = ref(false)
 const onInstall = ref(() => {})
 
 defineExpose({
-  show: (instanceVal, projectVal, projectVersions, selected, callback) => {
+  show: (instanceVal, projectVal, projectVersions, callback) => {
     instance.value = instanceVal
     versions.value = projectVersions
-    selectedVersion.value = selected ?? projectVersions[0]
+    selectedVersion.value = projectVersions[0]
 
     project.value = projectVal
 

apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { ref } from 'vue'
-
 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 { handleError } from '@/store/state.js'
+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,4 +1,14 @@
 <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,
@@ -7,24 +17,13 @@ import {
   UploadIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+const { handleError } = injectNotificationManager()
-import { trackEvent } from '@/helpers/analytics'
-import {
-  add_project_from_version as installMod,
-  check_installed,
-  create,
-  get,
-  list,
-} from '@/helpers/profile'
-import { installVersionDependencies } from '@/store/install.js'
-import { handleError } from '@/store/notifications.js'
-
 const router = useRouter()
 
 const versions = ref()

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

@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, Checkbox, 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, type Ref, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
+import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
-
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  injectNotificationManager,
+  OverflowMenu,
+} from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { open } from '@tauri-apps/plugin-dialog'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, type Ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import 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,14 +1,12 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { computed, ref, watch } from 'vue'
-
 import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
-import { handleError } from '@/store/notifications'
+import { Checkbox, injectNotificationManager } from '@modrinth/ui'
-
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, watch } from 'vue'
 import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

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

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project, get_version_many } from '@/helpers/cache'
+import { get_loader_versions } from '@/helpers/metadata'
+import { edit, install, update_repair_modrinth } from '@/helpers/profile'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
 import {
   DownloadIcon,
   HammerIcon,
@@ -10,7 +17,14 @@ import {
   UnplugIcon,
   WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, Checkbox, Chips, TeleportDropdownMenu } from '@modrinth/ui'
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  Chips,
+  TeleportDropdownMenu,
+  injectNotificationManager,
+} from '@modrinth/ui'
 import {
   formatCategory,
   type GameVersionTag,
@@ -20,23 +34,14 @@ import {
 } from '@modrinth/utils'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
-import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef, watch, type ComputedRef, type Ref } from 'vue'
-
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { get_project, get_version_many } from '@/helpers/cache'
-import { get_loader_versions } from '@/helpers/metadata'
-import { edit, install, update_repair_modrinth } from '@/helpers/profile'
-import { get_game_versions, get_loaders } from '@/helpers/tags'
-import { handleError } from '@/store/notifications'
-
 import type {
   InstanceSettingsTabProps,
   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,17 +1,15 @@
 <script setup lang="ts">
-import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { Checkbox, Slider } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { computed, readonly, ref, watch } from 'vue'
-
 import JavaSelector from '@/components/ui/JavaSelector.vue'
 import useMemorySlider from '@/composables/useMemorySlider'
 import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
-import { handleError } from '@/store/notifications'
+import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-
+import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, readonly, ref, watch } from 'vue'
 import type { AppSettings, InstanceSettingsTabProps, MemorySettings } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

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

@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { Checkbox, Toggle } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { computed, type Ref, ref, watch } from 'vue'
-
 import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
-import { handleError } from '@/store/notifications'
+import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
-
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref, type Ref, watch } from 'vue'
 import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue

@@ -1,29 +1,28 @@
 <script setup lang="ts">
 import {
-  CoffeeIcon,
-  GameIcon,
-  GaugeIcon,
-  ModrinthIcon,
-  PaintbrushIcon,
   ReportIcon,
-  SettingsIcon,
+  ModrinthIcon,
   ShieldIcon,
+  SettingsIcon,
+  GaugeIcon,
+  PaintbrushIcon,
+  GameIcon,
+  CoffeeIcon,
 } from '@modrinth/assets'
 import { TabbedModal } from '@modrinth/ui'
-import { getVersion } from '@tauri-apps/api/app'
-import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { defineMessage, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'
-
+import { useVIntl, defineMessage } from '@vintl/vintl'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
-import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
-import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
 import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
-import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
-import { get, set } from '@/helpers/settings.ts'
+import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
+import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
+import { getVersion } from '@tauri-apps/api/app'
+import { version as getOsVersion, platform as getOsPlatform } from '@tauri-apps/plugin-os'
 import { useTheming } from '@/store/state'
+import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get, set } from '@/helpers/settings.ts'
 
 const themeStore = useTheming()
 

apps/app-frontend/src/components/ui/modal/AuthGrantFlowWaitModal.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { LogInIcon, SpinnerIcon } from '@modrinth/assets'
 import { ref } from 'vue'
-
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 defineProps({

apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ConfirmModal } from '@modrinth/ui'
 import { ref } from 'vue'
-
+import { ConfirmModal } from '@modrinth/ui'
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.ts'
 
 const themeStore = useTheming()

apps/app-frontend/src/components/ui/modal/InstanceModalTitlePrefix.vue

@@ -2,7 +2,6 @@
 import { ChevronRightIcon } from '@modrinth/assets'
 import { Avatar } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-
 import type { GameInstance } from '@/helpers/types'
 
 defineProps<{

apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
 import {
   ChevronRightIcon,
-  CodeIcon,
   CoffeeIcon,
   InfoIcon,
-  MonitorIcon,
   WrenchIcon,
+  MonitorIcon,
+  CodeIcon,
 } from '@modrinth/assets'
 import { Avatar, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { defineMessage, useVIntl } from '@vintl/vintl'
 import { ref } from 'vue'
-
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
-import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
-
 import type { InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()

apps/app-frontend/src/components/ui/modal/ModalWrapper.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { NewModal as Modal } from '@modrinth/ui'
 import { useTemplateRef } from 'vue'
-
+import { NewModal as Modal } from '@modrinth/ui'
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.ts'
 
 const themeStore = useTheming()

apps/app-frontend/src/components/ui/modal/ShareModalWrapper.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ShareModal } from '@modrinth/ui'
 import { ref } from 'vue'
-
+import { ShareModal } from '@modrinth/ui'
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.ts'
 
 const themeStore = useTheming()

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-
-import { get, set } from '@/helpers/settings.ts'
-import { getOS } from '@/helpers/utils'
 import { useTheming } from '@/store/state'
+import { get, set } from '@/helpers/settings.ts'
+import { ref, watch } from 'vue'
+import { getOS } from '@/helpers/utils'
 import type { ColorTheme } from '@/store/theme.ts'
 
 const themeStore = useTheming()

apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { Slider, Toggle } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-
-import useMemorySlider from '@/composables/useMemorySlider'
 import { get, set } from '@/helpers/settings.ts'
+import { ref, watch } from 'vue'
+import { Slider, Toggle } from '@modrinth/ui'
+import useMemorySlider from '@/composables/useMemorySlider'
 
 const fetchSettings = await get()
 fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')

apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { Toggle } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-
-import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { useTheming } from '@/store/state'
+import { ref, watch } from 'vue'
+import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { DEFAULT_FEATURE_FLAGS, type FeatureFlag } from '@/store/theme.ts'
 
 const themeStore = useTheming()

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

@@ -1,9 +1,10 @@
 <script setup>
-import { ref } from 'vue'
-
 import JavaSelector from '@/components/ui/JavaSelector.vue'
 import { get_java_versions, set_java_version } from '@/helpers/jre'
-import { handleError } from '@/store/notifications'
+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/PrivacySettings.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
-
-import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'
 import { get, set } from '@/helpers/settings.ts'
+import { Toggle } from '@modrinth/ui'
+import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'
 
 const settings = ref(await get())
 

apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue

@@ -1,14 +1,13 @@
 <script setup>
-import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { Button, Slider } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
-import { ref, watch } from 'vue'
-
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import { purge_cache_types } from '@/helpers/cache.js'
 import { get, set } from '@/helpers/settings.ts'
-import { handleError } from '@/store/notifications.js'
+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,6 +100,19 @@
 </template>
 
 <script setup lang="ts">
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+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 Cape,
+  type Skin,
+  type SkinModel,
+} from '@/helpers/skins.ts'
 import {
   CheckIcon,
   ChevronRightIcon,
@@ -113,25 +126,13 @@ import {
   ButtonStyled,
   CapeButton,
   CapeLikeTextButton,
+  injectNotificationManager,
   RadioButtons,
   SkinPreviewRenderer,
 } from '@modrinth/ui'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+const { handleError } = injectNotificationManager()
-import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
-import {
-  add_and_equip_custom_skin,
-  type Cape,
-  determineModelType,
-  get_normalized_skin_texture,
-  remove_custom_skin,
-  type Skin,
-  type SkinModel,
-  unequip_skin,
-} from '@/helpers/skins.ts'
-import { handleError } from '@/store/notifications'
 
 const modal = useTemplateRef('modal')
 const selectCapeModal = useTemplateRef('selectCapeModal')

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

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { CheckIcon, XIcon } from '@modrinth/assets'
+import { useTemplateRef, ref, computed } from 'vue'
+import type { Cape, SkinModel } from '@/helpers/skins.ts'
 import {
   ButtonStyled,
+  ScrollablePanel,
   CapeButton,
   CapeLikeTextButton,
-  ScrollablePanel,
   SkinPreviewRenderer,
 } from '@modrinth/ui'
-import { computed, ref, useTemplateRef } from 'vue'
+import { CheckIcon, XIcon } from '@modrinth/assets'
-
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import type { Cape, SkinModel } from '@/helpers/skins.ts'
 
 const modal = useTemplateRef('modal')
 

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

@@ -27,15 +27,14 @@
 </template>
 
 <script setup lang="ts">
+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'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+const { addNotification } = injectNotificationManager()
-import { get_dragged_skin_data } from '@/helpers/skins'
-import { useNotifications } from '@/store/state'
-
-const notifications = useNotifications()
 
 const modal = ref()
 const fileInput = ref<HTMLInputElement>()
@@ -100,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,4 +1,12 @@
 <script setup lang="ts">
+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,
@@ -11,6 +19,7 @@ import {
   Avatar,
   ButtonStyled,
   commonMessages,
+  injectNotificationManager,
   OverflowMenu,
   SmartClickable,
   useRelativeTime,
@@ -23,16 +32,7 @@ import dayjs from 'dayjs'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { trackEvent } from '@/helpers/analytics'
+const { handleError } = injectNotificationManager()
-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 { handleError } from '@/store/notifications'
-
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 

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

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { GAME_MODES, HeadingLink } from '@modrinth/ui'
-import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
 import InstanceItem from '@/components/ui/world/InstanceItem.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
 import { trackEvent } from '@/helpers/analytics'
@@ -12,20 +7,25 @@ import { get_all } from '@/helpers/process'
 import { kill, run } from '@/helpers/profile'
 import type { GameInstance } from '@/helpers/types'
 import {
-  get_profile_protocol_version,
-  get_recent_worlds,
-  getWorldIdentifier,
   type ProtocolVersion,
-  refreshServerData,
   type ServerData,
   type ServerWorld,
+  type WorldWithProfile,
+  getWorldIdentifier,
+  get_profile_protocol_version,
+  get_recent_worlds,
+  refreshServerData,
   start_join_server,
   start_join_singleplayer_world,
-  type WorldWithProfile,
 } from '@/helpers/worlds.ts'
 import { handleSevereError } from '@/store/error'
-import { handleError } from '@/store/notifications'
 import { useTheming } from '@/store/theme.ts'
+import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps<{
   recentInstances: GameInstance[]

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

@@ -1,10 +1,28 @@
 <script setup lang="ts">
+import dayjs from 'dayjs'
+import type {
+  ProtocolVersion,
+  ServerStatus,
+  ServerWorld,
+  SingleplayerWorld,
+  World,
+} from '@/helpers/worlds.ts'
+import { set_world_display_status, getWorldIdentifier } from '@/helpers/worlds.ts'
+import { formatNumber, getPingLevel } from '@modrinth/utils'
 import {
+  useRelativeTime,
+  Avatar,
+  ButtonStyled,
+  commonMessages,
+  OverflowMenu,
+  SmartClickable,
+} from '@modrinth/ui'
+import {
+  IssuesIcon,
+  EyeIcon,
   ClipboardCopyIcon,
   EditIcon,
-  EyeIcon,
   FolderOpenIcon,
-  IssuesIcon,
   MoreVerticalIcon,
   NoSignalIcon,
   PlayIcon,
@@ -17,33 +35,14 @@ import {
   UserIcon,
   XIcon,
 } from '@modrinth/assets'
-import {
-  Avatar,
-  ButtonStyled,
-  commonMessages,
-  OverflowMenu,
-  SmartClickable,
-  useRelativeTime,
-} from '@modrinth/ui'
-import { formatNumber, getPingLevel } from '@modrinth/utils'
-import { convertFileSrc } from '@tauri-apps/api/core'
 import type { MessageDescriptor } from '@vintl/vintl'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import dayjs from 'dayjs'
-import { Tooltip } from 'floating-vue'
 import type { Component } from 'vue'
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-
 import { copyToClipboard } from '@/helpers/utils'
-import type {
+import { convertFileSrc } from '@tauri-apps/api/core'
-  ProtocolVersion,
+import { useRouter } from 'vue-router'
-  ServerStatus,
+import { Tooltip } from 'floating-vue'
-  ServerWorld,
-  SingleplayerWorld,
-  World,
-} from '@/helpers/worlds.ts'
-import { getWorldIdentifier, set_world_display_status } from '@/helpers/worlds.ts'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()

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

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { ref } from 'vue'
-
 import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
 import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
-import { handleError } from '@/store/notifications'
+import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { ref } from 'vue'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

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

@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import { SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { defineMessage, useVIntl } from '@vintl/vintl'
-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 DisplayStatus,
   edit_server_in_profile,
+  set_world_display_status,
+  type DisplayStatus,
   type ServerPackStatus,
   type ServerWorld,
-  set_world_display_status,
 } from '@/helpers/worlds.ts'
-import { handleError } from '@/store/notifications'
+import { SaveIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import { computed, ref } from 'vue'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

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

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-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 { rename_world, reset_world_icon, set_world_display_status } from '@/helpers/worlds.ts'
-import { handleError } from '@/store/notifications'
+import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref } from 'vue'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
 import { defineMessage, useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
+import { Checkbox } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 const value = defineModel<boolean>({ required: true })

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { TeleportDropdownMenu } from '@modrinth/ui'
-import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
-
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
+import { type MessageDescriptor, defineMessages, useVIntl } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 

apps/app-frontend/src/composables/macCssFix.js

@@ -1,5 +1,4 @@
 import { invoke } from '@tauri-apps/api/core'
-
 import cssContent from '@/assets/stylesheets/macFix.css?inline'
 
 export async function useCheckDisableMouseover() {

apps/app-frontend/src/composables/useMemorySlider.js

@@ -1,9 +1,9 @@
+import { get_max_memory } from '@/helpers/jre.js'
+import { injectNotificationManager } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import { get_max_memory } from '@/helpers/jre.js'
-import { handleError } from '@/store/notifications.js'
-
 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,8 +1,7 @@
+import { injectNotificationManager } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { fetch } from '@tauri-apps/plugin-http'
 
-import { handleError } from '@/store/state.js'
-
 export const useFetch = async (url, item, isSilent) => {
   try {
     const version = await getVersion()
@@ -12,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/import.js

@@ -4,7 +4,6 @@
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
-
 import { create } from './profile'
 
 /*

apps/app-frontend/src/helpers/pack.js

@@ -4,7 +4,6 @@
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
-
 import { create } from './profile'
 
 // Installs pack from a version ID

apps/app-frontend/src/helpers/profile.js

@@ -3,10 +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
 /*
@@ -191,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/rendering/batch-skin-renderer.ts

@@ -1,18 +1,17 @@
-import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
+import * as THREE from 'three'
+import type { Skin, Cape } from '../skins'
+import { get_normalized_skin_texture, determineModelType } from '../skins'
+import { reactive } from 'vue'
 import {
-  applyCapeTexture,
+  setupSkinModel,
-  createTransparentTexture,
   disposeCaches,
   loadTexture,
-  setupSkinModel,
+  applyCapeTexture,
+  createTransparentTexture,
 } from '@modrinth/utils'
-import * as THREE from 'three'
-import { reactive } from 'vue'
-
-import type { Cape, Skin } from '../skins'
-import { determineModelType, get_normalized_skin_texture } from '../skins'
-import { headStorage } from '../storage/head-storage'
 import { skinPreviewStorage } from '../storage/skin-preview-storage'
+import { headStorage } from '../storage/head-storage'
+import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
 
 export interface RenderResult {
   forwards: string

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

@@ -4,9 +4,8 @@
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
-
-import type { Hooks, MemorySettings, WindowSize } from '@/helpers/types'
 import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
+import type { Hooks, MemorySettings, WindowSize } from '@/helpers/types'
 
 // Settings object
 /*

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

@@ -1,8 +1,7 @@
+import { injectNotificationManager } from '@modrinth/ui'
 import { arrayBufferToBase64 } from '@modrinth/utils'
 import { invoke } from '@tauri-apps/api/core'
 
-import { handleError } from '@/store/notifications'
-
 export interface Cape {
   id: string
   name: string
@@ -40,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/helpers/utils.js

@@ -1,6 +1,5 @@
-import { invoke } from '@tauri-apps/api/core'
-
 import { get_full_path, get_mod_full_path } from '@/helpers/profile'
+import { invoke } from '@tauri-apps/api/core'
 
 export async function isDev() {
   return await invoke('is_dev')

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

@@ -1,10 +1,9 @@
-import { autoToHTML } from '@geometrically/minecraft-motd-parser'
-import type { GameVersion } from '@modrinth/ui'
 import { invoke } from '@tauri-apps/api/core'
-import dayjs from 'dayjs'
-
 import { get_full_path } from '@/helpers/profile'
 import { openPath } from '@/helpers/utils'
+import { autoToHTML } from '@geometrically/minecraft-motd-parser'
+import dayjs from 'dayjs'
+import type { GameVersion } from '@modrinth/ui'
 
 type BaseWorld = {
   name: string

apps/app-frontend/src/main.js

@@ -1,15 +1,13 @@
-import 'floating-vue/dist/style.css'
+import App from '@/App.vue'
-
+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'
 
-import App from '@/App.vue'
-import router from '@/routes'
-
 const VIntlPlugin = createPlugin({
   controllerOpts: {
     defaultLocale: 'en-US',

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

@@ -1,10 +1,20 @@
 <script setup lang="ts">
+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 {
   Button,
   Checkbox,
   DropdownSelect,
+  injectNotificationManager,
   LoadingIndicator,
   Pagination,
   SearchFilterControl,
@@ -18,17 +28,7 @@ import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+const { handleError } = injectNotificationManager()
-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 { handleError } from '@/store/state'
-
 const { formatMessage } = useVIntl()
 
 const router = useRouter()

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

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import type { SearchResult } from '@modrinth/utils'
-import dayjs from 'dayjs'
-import { computed, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-
 import RowDisplay from '@/components/RowDisplay.vue'
 import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
 import { get_search_results } from '@/helpers/cache.js'
@@ -11,8 +6,13 @@ import { profile_listener } from '@/helpers/events'
 import { list } from '@/helpers/profile.js'
 import type { GameInstance } from '@/helpers/types'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { handleError } from '@/store/notifications.js'
+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,26 +1,4 @@
 <script setup lang="ts">
-import {
-  EditIcon,
-  ExcitedRinthbot,
-  LogInIcon,
-  PlusIcon,
-  SpinnerIcon,
-  TrashIcon,
-  UpdatedIcon,
-} from '@modrinth/assets'
-import {
-  Button,
-  ButtonStyled,
-  ConfirmModal,
-  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 type AccountsCard from '@/components/ui/AccountsCard.vue'
 import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
 import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
@@ -43,12 +21,34 @@ import {
   set_default_cape,
 } from '@/helpers/skins.ts'
 import { handleSevereError } from '@/store/error'
-import { handleError, useNotifications } from '@/store/notifications'
+import {
+  EditIcon,
+  ExcitedRinthbot,
+  LogInIcon,
+  PlusIcon,
+  SpinnerIcon,
+  TrashIcon,
+  UpdatedIcon,
+} from '@modrinth/assets'
+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'
 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[]>([])
@@ -114,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)
     }
   }
@@ -127,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)
     }
   }
@@ -162,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)
     }
   }
 }
@@ -191,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)
     }
   }
 }
@@ -208,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
   }
@@ -277,7 +277,7 @@ async function checkUserChanges() {
       await loadSkins()
     }
   } catch (error) {
-    if (currentUser.value) {
+    if (currentUser.value && error instanceof Error) {
       handleError(error)
     }
   }
@@ -377,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/index.js

@@ -1,6 +1,6 @@
-import Browse from './Browse.vue'
 import Index from './Index.vue'
-import Skins from './Skins.vue'
+import Browse from './Browse.vue'
 import Worlds from './Worlds.vue'
+import Skins from './Skins.vue'
 
-export { Browse, Index, Skins, Worlds }
+export { Index, Browse, Worlds, Skins }

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

@@ -157,6 +157,18 @@
   </div>
 </template>
 <script setup>
+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,
@@ -184,6 +196,7 @@ import {
   Avatar,
   ButtonStyled,
   ContentPageHeader,
+  injectNotificationManager,
   LoadingIndicator,
   OverflowMenu,
 } from '@modrinth/ui'
@@ -194,22 +207,10 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-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 { handleError, useBreadcrumbs, useLoading } from '@/store/state'
-
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const router = useRouter()

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

@@ -88,18 +88,6 @@
 </template>
 
 <script setup>
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-
-import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
-import { Button, Card, Checkbox, DropdownSelect } from '@modrinth/ui'
-import dayjs from 'dayjs'
-import isToday from 'dayjs/plugin/isToday'
-import isYesterday from 'dayjs/plugin/isYesterday'
-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 ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import { process_listener } from '@/helpers/events.js'
 import {
@@ -109,11 +97,21 @@ import {
   get_output_by_filename,
 } from '@/helpers/logs.js'
 import { get_by_profile_path } from '@/helpers/process.js'
-import { handleError } from '@/store/notifications.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 { 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'
 
 dayjs.extend(isToday)
 dayjs.extend(isYesterday)
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const props = defineProps({

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

@@ -249,42 +249,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import {
-  CheckCircleIcon,
-  ClipboardCopyIcon,
-  CodeIcon,
-  DownloadIcon,
-  DropdownIcon,
-  ExternalIcon,
-  FileIcon,
-  FilterIcon,
-  LinkIcon,
-  MoreVerticalIcon,
-  SearchIcon,
-  ShareIcon,
-  SlashIcon,
-  TrashIcon,
-  UpdatedIcon,
-  XIcon,
-} from '@modrinth/assets'
-import {
-  Button,
-  ButtonStyled,
-  ContentListPanel,
-  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 { TextInputIcon } from '@/assets/icons'
 import AddContentButton from '@/components/ui/AddContentButton.vue'
 import type ContextMenu from '@/components/ui/ContextMenu.vue'
@@ -309,7 +273,44 @@ import {
 } from '@/helpers/profile.js'
 import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
 import { highlightModInProfile } from '@/helpers/utils.js'
-import { handleError } from '@/store/notifications.js'
+import {
+  CheckCircleIcon,
+  ClipboardCopyIcon,
+  CodeIcon,
+  DownloadIcon,
+  DropdownIcon,
+  ExternalIcon,
+  FileIcon,
+  FilterIcon,
+  LinkIcon,
+  MoreVerticalIcon,
+  SearchIcon,
+  ShareIcon,
+  SlashIcon,
+  TrashIcon,
+  UpdatedIcon,
+  XIcon,
+} from '@modrinth/assets'
+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'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps<{
   instance: GameInstance

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

@@ -1,9 +1,8 @@
 <template>{{ instance.name }} overview</template>
 <script setup lang="ts">
-import type { Version } from '@modrinth/utils'
-
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
 import type { GameInstance } from '@/helpers/types'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { Version } from '@modrinth/utils'
 
 defineProps<{
   instance: GameInstance

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

@@ -121,21 +121,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon, XIcon } from '@modrinth/assets'
-import {
-  Button,
-  ButtonStyled,
-  FilterBar,
-  type FilterBarOption,
-  GAME_MODES,
-  type GameVersion,
-  RadialHeader,
-} 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'
-
 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'
@@ -146,30 +131,45 @@ 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,
-  get_profile_protocol_version,
   getWorldIdentifier,
+  get_profile_protocol_version,
   handleDefaultProfileUpdateEvent,
   hasServerQuickPlaySupport,
   hasWorldQuickPlaySupport,
-  type ProfileEvent,
-  type ProtocolVersion,
   refreshServerData,
   refreshServers,
   refreshWorld,
   refreshWorlds,
   remove_server_from_profile,
-  type ServerData,
-  type ServerWorld,
   showWorldInFolder,
-  type SingleplayerWorld,
   sortWorlds,
   start_join_server,
   start_join_singleplayer_world,
-  type World,
 } from '@/helpers/worlds.ts'
-import { handleError } from '@/store/notifications'
+import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon, XIcon } from '@modrinth/assets'
+import {
+  Button,
+  ButtonStyled,
+  FilterBar,
+  type FilterBarOption,
+  GAME_MODES,
+  type GameVersion,
+  RadialHeader,
+  injectNotificationManager,
+} from '@modrinth/ui'
+import type { Version } from '@modrinth/utils'
+import { 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/instance/index.js

@@ -1,7 +1,7 @@
 import Index from './Index.vue'
-import Logs from './Logs.vue'
-import Mods from './Mods.vue'
 import Overview from './Overview.vue'
 import Worlds from './Worlds.vue'
+import Mods from './Mods.vue'
+import Logs from './Logs.vue'
 
-export { Index, Logs, Mods, Overview, Worlds }
+export { Index, Overview, Worlds, Mods, Logs }

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

@@ -1,17 +1,16 @@
 <script setup>
-import { PlusIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { onUnmounted, ref, shallowRef } from 'vue'
-import { useRoute } from 'vue-router'
-
 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 { handleError } from '@/store/notifications.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/library/index.js

@@ -1,6 +1,6 @@
-import Custom from './Custom.vue'
-import Downloaded from './Downloaded.vue'
 import Index from './Index.vue'
 import Overview from './Overview.vue'
+import Downloaded from './Downloaded.vue'
+import Custom from './Custom.vue'
 
-export { Custom, Downloaded, Index, Overview }
+export { Index, Overview, Downloaded, Custom }

apps/app-frontend/src/pages/project/Gallery.vue

@@ -83,19 +83,18 @@
 
 <script setup>
 import {
-  CalendarIcon,
-  ContractIcon,
   ExpandIcon,
-  ExternalIcon,
-  LeftArrowIcon,
   RightArrowIcon,
+  LeftArrowIcon,
+  ExternalIcon,
+  ContractIcon,
   XIcon,
+  CalendarIcon,
 } from '@modrinth/assets'
 import { Button, Card } from '@modrinth/ui'
 import { ref } from 'vue'
-
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { trackEvent } from '@/helpers/analytics'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 
 const props = defineProps({
   project: {

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

@@ -129,6 +129,15 @@
 </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,
   CheckIcon,
@@ -149,6 +158,7 @@ import {
   ProjectSidebarCreators,
   ProjectSidebarDetails,
   ProjectSidebarLinks,
+  injectNotificationManager,
 } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
@@ -156,19 +166,9 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import { ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-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 { handleError } from '@/store/notifications.js'
-import { useTheming } from '@/store/state.js'
-
 dayjs.extend(relativeTime)
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()

apps/app-frontend/src/pages/project/Version.vue

@@ -182,16 +182,15 @@
 </template>
 
 <script setup>
-import { CheckIcon, DownloadIcon, ExternalIcon, FileIcon, ReportIcon } from '@modrinth/assets'
+import { DownloadIcon, FileIcon, ReportIcon, ExternalIcon, CheckIcon } from '@modrinth/assets'
-import { Avatar, Badge, Breadcrumbs, Button, Card, CopyCode } from '@modrinth/ui'
 import { formatBytes, renderString } from '@modrinth/utils'
-import { computed, ref, watch } from 'vue'
+import { Breadcrumbs, Badge, Avatar, Card, Button, CopyCode } from '@modrinth/ui'
+import { releaseColor } from '@/helpers/utils'
+import { ref, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
-
+import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { SwapIcon } from '@/assets/icons'
 import { get_project_many, get_version_many } from '@/helpers/cache.js'
-import { releaseColor } from '@/helpers/utils'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
 
 const breadcrumbs = useBreadcrumbs()
 

apps/app-frontend/src/pages/project/Versions.vue

@@ -65,13 +65,16 @@
 </template>
 
 <script setup>
-import { CheckIcon, DownloadIcon, ExternalIcon, MoreVerticalIcon } from '@modrinth/assets'
-import { ButtonStyled, OverflowMenu, ProjectPageVersions } from '@modrinth/ui'
-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: {
@@ -104,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/pages/project/index.js

@@ -1,7 +1,7 @@
-import Description from './Description.vue'
-import Gallery from './Gallery.vue'
 import Index from './Index.vue'
-import Version from './Version.vue'
+import Description from './Description.vue'
 import Versions from './Versions.vue'
+import Gallery from './Gallery.vue'
+import Version from './Version.vue'
 
-export { Description, Gallery, Index, Version, Versions }
+export { Index, Description, Versions, Gallery, Version }

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/routes.js

@@ -1,9 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
-
 import * as Pages from '@/pages'
+import * as Project from '@/pages/project'
 import * as Instance from '@/pages/instance'
 import * as Library from '@/pages/library'
-import * as Project from '@/pages/project'
 
 /**
  * Configures application routing. Add page to pages/index and then add to route table here.

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

@@ -1,6 +1,3 @@
-import dayjs from 'dayjs'
-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'
@@ -12,7 +9,9 @@ import {
   list,
   remove_project,
 } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
+import { injectNotificationManager } from '@modrinth/ui'
+import dayjs from 'dayjs'
+import { defineStore } from 'pinia'
 
 export const useInstall = defineStore('installStore', {
   state: () => ({
@@ -30,8 +29,8 @@ export const useInstall = defineStore('installStore', {
     setIncompatibilityWarningModal(ref) {
       this.incompatibilityWarningModal = ref
     },
-    showIncompatibilityWarningModal(instance, project, versions, selected, onInstall) {
+    showIncompatibilityWarningModal(instance, project, versions, onInstall) {
-      this.incompatibilityWarningModal.show(instance, project, versions, selected, onInstall)
+      this.incompatibilityWarningModal.show(instance, project, versions, onInstall)
     },
     setModInstallModal(ref) {
       this.modInstallModal = ref
@@ -50,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') {
@@ -134,13 +134,7 @@ export const install = async (
         callback(version.id)
       } else {
         const install = useInstall()
-        install.showIncompatibilityWarningModal(
+        install.showIncompatibilityWarningModal(instance, project, projectVersions, callback)
-          instance,
-          project,
-          projectVersions,
-          version,
-          callback,
-        )
       }
     } else {
       const versions = (await get_version_many(project.versions).catch(handleError)).sort(
@@ -167,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 { useBreadcrumbs } from './breadcrumbs'
 import { useInstall } from './install'
 import { useLoading } from './loading'
-import { handleError, useNotifications } from './notifications'
 import { useTheming } from './theme.ts'
 
-export { handleError, useBreadcrumbs, useInstall, useLoading, useNotifications, useTheming }
+export { useBreadcrumbs, useInstall, useLoading, useTheming }

apps/app-frontend/vite.config.ts

@@ -1,8 +1,9 @@
-import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import svgLoader from 'vite-svg-loader'
 
+import vue from '@vitejs/plugin-vue'
+
 import tauriConf from '../app/tauri.conf.json'
 
 const projectRootDir = resolve(__dirname)

apps/frontend/.eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ["../../packages/eslint-config-custom/nuxt.js"],
+  rules: {
+    "import/no-unresolved": "off",
+  },
+};

apps/frontend/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

apps/frontend/crowdin.yml

@@ -1,6 +1,6 @@
 project_id: 518556
 preserve_hierarchy: true
-commit_message: '[ci skip]'
+commit_message: "[ci skip]"
 
 files:
   - source: /locales/en-US/*

apps/frontend/eslint.config.mjs

@@ -1,10 +0,0 @@
-import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
-export default config.append([
-  {
-    rules: {
-      '@typescript-eslint/no-explicit-any': 'off',
-      'import/no-unresolved': 'off',
-      'no-undef': 'off',
-    },
-  },
-])