Merge remote-tracking branch 'origin/main' into security-txt

Signed-off-by: Erb3 <49862976+Erb3@users.noreply.github.com>

.cargo/config.toml

@@ -2,8 +2,5 @@
 [target.'cfg(windows)']
 rustflags = ["-C", "link-args=/STACK:16777220", "--cfg", "tokio_unstable"]
 
-[target.x86_64-pc-windows-msvc]
-linker = "rust-lld"
-
 [build]
 rustflags = ["--cfg", "tokio_unstable"]

.github/workflows/daedalus-docker.yml

@@ -22,26 +22,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
       - name: Fetch docker metadata
         id: docker_meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v3
         with:
           images: ghcr.io/modrinth/daedalus
       - name: Login to GitHub Images
-        uses: docker/login-action@v3
+        uses: docker/login-action@v1
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        uses: docker/build-push-action@v6
+        id: docker_build
+        uses: docker/build-push-action@v2
         with:
           file: ./apps/daedalus_client/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.docker_meta.outputs.tags }}
           labels: ${{ steps.docker_meta.outputs.labels }}
-          cache-from: type=registry,ref=ghcr.io/modrinth/daedalus:main
-          cache-to: type=inline

.github/workflows/labrinth-docker.yml

@@ -20,26 +20,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
       - name: Fetch docker metadata
         id: docker_meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v3
         with:
           images: ghcr.io/modrinth/labrinth
       - name: Login to GitHub Images
-        uses: docker/login-action@v3
+        uses: docker/login-action@v1
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        uses: docker/build-push-action@v6
+        id: docker_build
+        uses: docker/build-push-action@v2
         with:
           file: ./apps/labrinth/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.docker_meta.outputs.tags }}
           labels: ${{ steps.docker_meta.outputs.labels }}
-          cache-from: type=registry,ref=ghcr.io/modrinth/labrinth:main
-          cache-to: type=inline

.github/workflows/theseus-build.yml

@@ -75,7 +75,7 @@ jobs:
           rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
           chmod: 0755
 
-      - name: ⚙️ Set application version and environment
+      - name: ⚙️ Set application version
         shell: bash
         run: |
           APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
@@ -84,8 +84,6 @@ jobs:
           dasel put -f packages/app-lib/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
           dasel put -f apps/app-frontend/package.json -t string -v "${APP_VERSION#v}" 'version'
 
-          cp packages/app-lib/.env.prod packages/app-lib/.env
-
       - name: 💨 Setup Turbo cache
         uses: rharkor/caching-for-turbo@v1.8
 

.github/workflows/turbo-ci.yml

@@ -52,7 +52,7 @@ jobs:
       # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
       # back to a cached cargo install
       - name: 🧰 Setup cargo-sqlx
-        uses: taiki-e/cache-cargo-install-action@v2
+        uses: AlexTMjugador/cache-cargo-install-action@feat/features-support
         with:
           tool: sqlx-cli
           locked: false
@@ -74,14 +74,5 @@ jobs:
           cp .env.local .env
           sqlx database setup
 
-      - name: ⚙️ Set app environment
-        working-directory: packages/app-lib
-        run: cp .env.staging .env
-
       - name: 🔍 Lint and test
         run: pnpm run ci
-
-      - name: 🔍 Verify intl:extract has been run
-        run: |
-          pnpm intl:extract
-          git diff --exit-code --color */*/src/locales/en-US/index.json

.idea/code.iml

@@ -10,10 +10,11 @@
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
       <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/rust-common/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
-</module>
+</module>

.vscode/settings.json

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

Cargo.lock

@@ -1706,7 +1706,7 @@ dependencies = [
  "bitflags 2.9.1",
  "core-foundation 0.10.0",
  "core-graphics-types",
- "foreign-types",
+ "foreign-types 0.5.0",
  "libc",
 ]
 
@@ -2699,6 +2699,15 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
 
+[[package]]
+name = "foreign-types"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f6f339eb8adc052cd2ca78910fda869aefa38d22d5cb648e6485e4d3fc06f3b1"
+dependencies = [
+ "foreign-types-shared 0.1.1",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.5.0"
@@ -2706,7 +2715,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
 dependencies = [
  "foreign-types-macros",
- "foreign-types-shared",
+ "foreign-types-shared 0.3.1",
 ]
 
 [[package]]
@@ -2720,6 +2729,12 @@ dependencies = [
  "syn 2.0.101",
 ]
 
+[[package]]
+name = "foreign-types-shared"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
+
 [[package]]
 name = "foreign-types-shared"
 version = "0.3.1"
@@ -3663,10 +3678,11 @@ dependencies = [
 
 [[package]]
 name = "hyper-rustls"
-version = "0.27.7"
+version = "0.27.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e3c93eb611681b207e1fe55d5a71ecf91572ec8a6705cdb6857f7d8d5242cf58"
+checksum = "2d191583f3da1305256f22463b9bb0471acad48a4e534a5218b9963e9c1f59b2"
 dependencies = [
+ "futures-util",
  "http 1.3.1",
  "hyper 1.6.0",
  "hyper-util",
@@ -3676,7 +3692,7 @@ dependencies = [
  "tokio",
  "tokio-rustls 0.26.2",
  "tower-service",
- "webpki-roots 1.0.0",
+ "webpki-roots 0.26.11",
 ]
 
 [[package]]
@@ -3692,6 +3708,22 @@ dependencies = [
  "tower-service",
 ]
 
+[[package]]
+name = "hyper-tls"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70206fc6890eaca9fde8a0bf71caa2ddfc9fe045ac9e5c70df101a7dbde866e0"
+dependencies = [
+ "bytes",
+ "http-body-util",
+ "hyper 1.6.0",
+ "hyper-util",
+ "native-tls",
+ "tokio",
+ "tokio-native-tls",
+ "tower-service",
+]
+
 [[package]]
 name = "hyper-util"
 version = "0.1.14"
@@ -4357,7 +4389,7 @@ dependencies = [
  "futures-util",
  "hex",
  "hmac",
- "hyper-rustls 0.27.7",
+ "hyper-tls",
  "hyper-util",
  "iana-time-zone",
  "image",
@@ -4954,6 +4986,23 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "native-tls"
+version = "0.2.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "87de3442987e9dbec73158d5c715e7ad9072fda936bb03d19d7fa10e00520f0e"
+dependencies = [
+ "libc",
+ "log",
+ "openssl",
+ "openssl-probe",
+ "openssl-sys",
+ "schannel",
+ "security-framework 2.11.1",
+ "security-framework-sys",
+ "tempfile",
+]
+
 [[package]]
 name = "ndk"
 version = "0.9.0"
@@ -5528,12 +5577,50 @@ dependencies = [
  "pathdiff",
 ]
 
+[[package]]
+name = "openssl"
+version = "0.10.72"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fedfea7d58a1f73118430a55da6a286e7b044961736ce96a16a17068ea25e5da"
+dependencies = [
+ "bitflags 2.9.1",
+ "cfg-if",
+ "foreign-types 0.3.2",
+ "libc",
+ "once_cell",
+ "openssl-macros",
+ "openssl-sys",
+]
+
+[[package]]
+name = "openssl-macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.101",
+]
+
 [[package]]
 name = "openssl-probe"
 version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d05e27ee213611ffe7d6348b942e8f942b37114c00cc03cec254295a4a17852e"
 
+[[package]]
+name = "openssl-sys"
+version = "0.9.108"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e145e1651e858e820e4860f7b9c5e169bc1d8ce1c86043be79fa7b7634821847"
+dependencies = [
+ "cc",
+ "libc",
+ "pkg-config",
+ "vcpkg",
+]
+
 [[package]]
 name = "option-ext"
 version = "0.2.0"
@@ -5731,17 +5818,6 @@ dependencies = [
  "phf_shared 0.11.3",
 ]
 
-[[package]]
-name = "phf"
-version = "0.12.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "913273894cec178f401a31ec4b656318d95473527be05c0752cc41cdc32be8b7"
-dependencies = [
- "phf_macros 0.12.1",
- "phf_shared 0.12.1",
- "serde",
-]
-
 [[package]]
 name = "phf_codegen"
 version = "0.8.0"
@@ -5792,16 +5868,6 @@ dependencies = [
  "rand 0.8.5",
 ]
 
-[[package]]
-name = "phf_generator"
-version = "0.12.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2cbb1126afed61dd6368748dae63b1ee7dc480191c6262a3b4ff1e29d86a6c5b"
-dependencies = [
- "fastrand 2.3.0",
- "phf_shared 0.12.1",
-]
-
 [[package]]
 name = "phf_macros"
 version = "0.10.0"
@@ -5829,19 +5895,6 @@ dependencies = [
  "syn 2.0.101",
 ]
 
-[[package]]
-name = "phf_macros"
-version = "0.12.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d713258393a82f091ead52047ca779d37e5766226d009de21696c4e667044368"
-dependencies = [
- "phf_generator 0.12.1",
- "phf_shared 0.12.1",
- "proc-macro2",
- "quote",
- "syn 2.0.101",
-]
-
 [[package]]
 name = "phf_shared"
 version = "0.8.0"
@@ -5869,15 +5922,6 @@ dependencies = [
  "siphasher 1.0.1",
 ]
 
-[[package]]
-name = "phf_shared"
-version = "0.12.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "06005508882fb681fd97892ecff4b7fd0fee13ef1aa569f8695dae7ab9099981"
-dependencies = [
- "siphasher 1.0.1",
-]
-
 [[package]]
 name = "pin-project"
 version = "1.1.10"
@@ -6806,7 +6850,7 @@ dependencies = [
  "http-body 1.0.1",
  "http-body-util",
  "hyper 1.6.0",
- "hyper-rustls 0.27.7",
+ "hyper-rustls 0.27.5",
  "hyper-util",
  "js-sys",
  "log",
@@ -7936,7 +7980,7 @@ dependencies = [
  "bytemuck",
  "cfg_aliases",
  "core-graphics",
- "foreign-types",
+ "foreign-types 0.5.0",
  "js-sys",
  "log",
  "objc2 0.5.2",
@@ -8973,7 +9017,6 @@ dependencies = [
  "data-url",
  "dirs",
  "discord-rich-presence",
- "dotenvy",
  "dunce",
  "either",
  "encoding_rs",
@@ -8989,7 +9032,6 @@ dependencies = [
  "notify-debouncer-mini",
  "p256",
  "paste",
- "phf 0.12.1",
  "png",
  "quartz_nbt",
  "quick-xml 0.37.5",
@@ -9029,8 +9071,6 @@ dependencies = [
  "dashmap",
  "either",
  "enumset",
- "hyper 1.6.0",
- "hyper-util",
  "native-dialog",
  "paste",
  "serde",
@@ -9252,6 +9292,16 @@ dependencies = [
  "syn 2.0.101",
 ]
 
+[[package]]
+name = "tokio-native-tls"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbae76ab933c85776efabc971569dd6119c580d8f5d448769dec1764bf796ef2"
+dependencies = [
+ "native-tls",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-rustls"
 version = "0.24.1"

Cargo.toml

@@ -67,13 +67,7 @@ heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
-hyper = "1.6.0"
+hyper-tls = "0.6.0"
-hyper-rustls = { version = "0.27.7", default-features = false, features = [
-  "http1",
-  "native-tokio",
-  "ring",
-  "tls12",
-] }
 hyper-util = "0.1.14"
 iana-time-zone = "0.1.63"
 image = { version = "0.25.6", default-features = false, features = ["rayon"] }
@@ -99,7 +93,6 @@ notify = { version = "8.0.0", default-features = false }
 notify-debouncer-mini = { version = "0.6.0", default-features = false }
 p256 = "0.13.2"
 paste = "1.0.15"
-phf = { version = "0.12.1", features = ["macros"] }
 png = "0.17.16"
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"

apps/app-frontend/package.json

@@ -9,7 +9,7 @@
     "tsc:check": "vue-tsc --noEmit",
     "lint": "eslint . && prettier --check .",
     "fix": "eslint . --fix && prettier --write .",
-    "intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/helpers,src/pages,src/store}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
     "test": "vue-tsc --noEmit"
   },
   "dependencies": {

apps/app-frontend/src/App.vue

@@ -1,35 +1,6 @@
 <script setup>
-import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
+import { computed, onMounted, onUnmounted, ref, watch, provide } from 'vue'
-import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
-import AccountsCard from '@/components/ui/AccountsCard.vue'
-import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
-import ErrorModal from '@/components/ui/ErrorModal.vue'
-import FriendsList from '@/components/ui/friends/FriendsList.vue'
-import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
-import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
-import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
-import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
-import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
-import NavButton from '@/components/ui/NavButton.vue'
-import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
-import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
-import RunningAppBar from '@/components/ui/RunningAppBar.vue'
-import SplashScreen from '@/components/ui/SplashScreen.vue'
-import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
-import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
-import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
-import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
-import { get_user } from '@/helpers/cache.js'
-import { command_listener, warning_listener } from '@/helpers/events.js'
-import { useFetch } from '@/helpers/fetch.js'
-import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
-import { get } from '@/helpers/settings.ts'
-import { get_opening_command, initialize_state } from '@/helpers/state'
-import { getOS, isDev, restartApp } from '@/helpers/utils.js'
-import { useError } from '@/store/error.js'
-import { useInstall } from '@/store/install.js'
-import { useLoading, useTheming } from '@/store/state'
 import {
   ArrowBigUpDashIcon,
   ChangeSkinIcon,
@@ -42,44 +13,67 @@ import {
   LogOutIcon,
   MaximizeIcon,
   MinimizeIcon,
-  NewspaperIcon,
   PlusIcon,
   RestoreIcon,
   RightArrowIcon,
   SettingsIcon,
   WorldIcon,
   XIcon,
+  NewspaperIcon,
 } from '@modrinth/assets'
 import {
   Avatar,
   Button,
   ButtonStyled,
-  NewsArticleCard,
+  Notifications,
-  NotificationPanel,
   OverflowMenu,
-  provideNotificationManager,
+  NewsArticleCard,
 } from '@modrinth/ui'
-import { renderString } from '@modrinth/utils'
+import { useLoading, useTheming } from '@/store/state'
-import { getVersion } from '@tauri-apps/api/app'
+import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
-import { invoke } from '@tauri-apps/api/core'
+import AccountsCard from '@/components/ui/AccountsCard.vue'
-import { getCurrentWindow } from '@tauri-apps/api/window'
+import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { openUrl } from '@tauri-apps/plugin-opener'
+import { get } from '@/helpers/settings.ts'
+import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
+import RunningAppBar from '@/components/ui/RunningAppBar.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'
+import ErrorModal from '@/components/ui/ErrorModal.vue'
+import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
+import { handleError, useNotifications } from '@/store/notifications.js'
+import { command_listener, warning_listener } from '@/helpers/events.js'
 import { type } from '@tauri-apps/plugin-os'
-import { check } from '@tauri-apps/plugin-updater'
+import { getOS, isDev, restartApp } from '@/helpers/utils.js'
-import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
+import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
-import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { getCurrentWindow } from '@tauri-apps/api/window'
-import { RouterView, useRoute, useRouter } from 'vue-router'
+import { getVersion } from '@tauri-apps/api/app'
+import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
 import { create_profile_and_install_from_file } from './helpers/pack'
-import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
+import { useError } from '@/store/error.js'
+import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
+import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
+import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
+import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
+import { useInstall } from '@/store/install.js'
+import { invoke } from '@tauri-apps/api/core'
+import { get_opening_command, initialize_state } from '@/helpers/state'
+import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
+import { renderString } from '@modrinth/utils'
+import { useFetch } from '@/helpers/fetch.js'
+import { check } from '@tauri-apps/plugin-updater'
+import NavButton from '@/components/ui/NavButton.vue'
+import { get as getCreds, login, logout } from '@/helpers/mr_auth.js'
+import { get_user } from '@/helpers/cache.js'
+import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
+import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
+import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
+import FriendsList from '@/components/ui/friends/FriendsList.vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import { get_available_capes, get_available_skins } from './helpers/skins'
-import { AppNotificationManager } from './providers/app-notifications'
+import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 
 const themeStore = useTheming()
 
-const notificationManager = new AppNotificationManager()
-provideNotificationManager(notificationManager)
-const { handleError, addNotification } = notificationManager
-
 const news = ref([])
 
 const urlModal = ref(null)
@@ -172,7 +166,7 @@ async function setupApp() {
   }
 
   await warning_listener((e) =>
-    addNotification({
+    notificationsWrapper.value.addNotification({
       title: 'Warning',
       text: e.message,
       type: 'warn',
@@ -256,6 +250,9 @@ const route = useRoute()
 const loading = useLoading()
 loading.setEnabled(false)
 
+const notifications = useNotifications()
+const notificationsWrapper = ref()
+
 const error = useError()
 const errorModal = ref()
 
@@ -266,8 +263,6 @@ const incompatibilityWarningModal = ref()
 
 const credentials = ref()
 
-const modrinthLoginFlowWaitModal = ref()
-
 async function fetchCredentials() {
   const creds = await getCreds().catch(handleError)
   if (creds && creds.user_id) {
@@ -277,24 +272,8 @@ async function fetchCredentials() {
 }
 
 async function signIn() {
-  modrinthLoginFlowWaitModal.value.show()
+  await login().catch(handleError)
-
+  await fetchCredentials()
-  try {
-    await login()
-    await fetchCredentials()
-  } catch (error) {
-    if (
-      typeof error === 'object' &&
-      typeof error['message'] === 'string' &&
-      error.message.includes('Login canceled')
-    ) {
-      // Not really an error due to being a result of user interaction, show nothing
-    } else {
-      handleError(error)
-    }
-  } finally {
-    modrinthLoginFlowWaitModal.value.hide()
-  }
 }
 
 async function logOut() {
@@ -337,6 +316,8 @@ watch(
 onMounted(() => {
   invoke('show_window')
 
+  notifications.setNotifs(notificationsWrapper.value)
+
   error.setErrorModal(errorModal.value)
 
   install.setIncompatibilityWarningModal(incompatibilityWarningModal)
@@ -421,9 +402,6 @@ function handleAuxClick(e) {
     <Suspense>
       <AppSettingsModal ref="settingsModal" />
     </Suspense>
-    <Suspense>
-      <AuthGrantFlowWaitModal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
-    </Suspense>
     <Suspense>
       <InstanceCreationModal ref="installationModal" />
     </Suspense>
@@ -507,13 +485,13 @@ function handleAuxClick(e) {
         <ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" />
         <div class="flex items-center gap-1 ml-3">
           <button
-            class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
             @click="router.back()"
           >
             <LeftArrowIcon />
           </button>
           <button
-            class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
             @click="router.forward()"
           >
             <RightArrowIcon />
@@ -657,7 +635,7 @@ function handleAuxClick(e) {
     </div>
   </div>
   <URLConfirmModal ref="urlModal" />
-  <NotificationPanel has-sidebar />
+  <Notifications ref="notificationsWrapper" sidebar />
   <ErrorModal ref="errorModal" />
   <ModInstallModal ref="modInstallModal" />
   <IncompatibilityWarningModal ref="incompatibilityWarningModal" />

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

@@ -1,25 +1,24 @@
 <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 { computed, ref } from 'vue'
-import { duplicate, remove } from '@/helpers/profile.js'
 import {
   ClipboardCopyIcon,
-  EyeIcon,
   FolderOpenIcon,
   PlayIcon,
   PlusIcon,
-  SearchIcon,
-  StopCircleIcon,
   TrashIcon,
+  StopCircleIcon,
+  EyeIcon,
+  SearchIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
+import { Button, DropdownSelect } from '@modrinth/ui'
 import { formatCategoryHeader } from '@modrinth/utils'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
 import dayjs from 'dayjs'
-import { computed, ref } from 'vue'
+import { duplicate, remove } from '@/helpers/profile.js'
-
+import { handleError } from '@/store/notifications.js'
-const { handleError } = injectNotificationManager()
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 
 const props = defineProps({
   instances: {
@@ -137,7 +136,7 @@ const filteredResults = computed(() => {
 
   if (sortBy.value === 'Game version') {
     instances.sort((a, b) => {
-      return a.game_version.localeCompare(b.game_version, undefined, { numeric: true })
+      return a.game_version.localeCompare(b.game_version)
     })
   }
 
@@ -214,17 +213,6 @@ const filteredResults = computed(() => {
       instanceMap.set(entry[0], entry[1])
     })
   }
-  // default sorting would do 1.20.4 < 1.8.9 because 2 < 8
-  // localeCompare with numeric=true puts 1.8.9 < 1.20.4 because 8 < 20
-  if (group.value === 'Game version') {
-    const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
-      return a[0].localeCompare(b[0], undefined, { numeric: true })
-    })
-    instanceMap.clear()
-    sortedEntries.forEach((entry) => {
-      instanceMap.set(entry[0], entry[1])
-    })
-  }
 
   return instanceMap
 })

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

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

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

@@ -73,23 +73,22 @@
 </template>
 
 <script setup>
-import { trackEvent } from '@/helpers/analytics'
+import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, SpinnerIcon } from '@modrinth/assets'
+import { Avatar, Button, Card } from '@modrinth/ui'
+import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
-  get_default_user,
+  users,
-  login as login_flow,
   remove_user,
   set_default_user,
-  users,
+  login as login_flow,
+  get_default_user,
 } from '@/helpers/auth'
+import { handleError } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'
 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 { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
+import { get_available_skins } from '@/helpers/skins'
-import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
-
-const { handleError } = injectNotificationManager()
 
 defineProps({
   mode: {

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

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { add_project_from_path } from '@/helpers/profile.js'
+import { DropdownIcon, PlusIcon, FolderOpenIcon } from '@modrinth/assets'
-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 { add_project_from_path } from '@/helpers/profile.js'
+import { handleError } from '@/store/notifications.js'
 import { useRouter } from 'vue-router'
 
-const { handleError } = injectNotificationManager()
-
 const props = defineProps({
   instance: {
     type: Object,

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

@@ -1,24 +1,23 @@
 <script setup>
-import { ChatIcon } from '@/assets/icons'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { login as login_flow, set_default_user } from '@/helpers/auth.js'
-import { install } from '@/helpers/profile.js'
-import { cancel_directory_change } from '@/helpers/settings.ts'
-import { handleSevereError } from '@/store/error.js'
 import {
   CheckIcon,
-  CopyIcon,
   DropdownIcon,
+  XIcon,
   HammerIcon,
   LogInIcon,
   UpdatedIcon,
-  XIcon,
+  CopyIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import { ChatIcon } from '@/assets/icons'
-import { computed, ref } from 'vue'
+import { ButtonStyled, Collapsible } from '@modrinth/ui'
-
+import { ref, computed } from 'vue'
-const { handleError } = injectNotificationManager()
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { handleError } from '@/store/notifications.js'
+import { handleSevereError } from '@/store/error.js'
+import { cancel_directory_change } from '@/helpers/settings.ts'
+import { install } from '@/helpers/profile.js'
+import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const errorModal = ref()
 const error = ref()

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

@@ -1,13 +1,12 @@
 <script setup>
+import { XIcon, PlusIcon } from '@modrinth/assets'
+import { Button, Checkbox } from '@modrinth/ui'
 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 { PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, Checkbox, injectNotificationManager } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
-
+import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
-const { handleError } = injectNotificationManager()
+import { open } from '@tauri-apps/plugin-dialog'
+import { handleError } from '@/store/notifications.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps({
   instance: {

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

@@ -1,10 +1,6 @@
 <script setup>
-import { trackEvent } from '@/helpers/analytics'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { process_listener } from '@/helpers/events'
+import { useRouter } from 'vue-router'
-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,
@@ -13,13 +9,17 @@ import {
   StopCircleIcon,
   TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
+import { Avatar, ButtonStyled, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
+import { finish_install, kill, run } from '@/helpers/profile'
+import { get_by_profile_path } from '@/helpers/process'
+import { process_listener } from '@/helpers/events'
+import { handleError } from '@/store/state.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import { handleSevereError } from '@/store/error.js'
+import { trackEvent } from '@/helpers/analytics'
 import dayjs from 'dayjs'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
 
-const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps({

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

@@ -198,17 +198,6 @@
 
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import ProgressBar from '@/components/ui/ProgressBar.vue'
-import { trackEvent } from '@/helpers/analytics'
-import {
-  get_default_launcher_path,
-  get_importable_instances,
-  import_instance,
-} from '@/helpers/import.js'
-import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
-import { create_profile_and_install_from_file } from '@/helpers/pack.js'
-import { create } from '@/helpers/profile'
-import { get_loaders } from '@/helpers/tags'
 import {
   CodeIcon,
   FolderOpenIcon,
@@ -219,14 +208,24 @@ import {
   UploadIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Checkbox, Chips, injectNotificationManager } from '@modrinth/ui'
+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 { get_loaders } from '@/helpers/tags'
+import { create } from '@/helpers/profile'
+import { open } from '@tauri-apps/plugin-dialog'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
+import { handleError } from '@/store/notifications.js'
 import Multiselect from 'vue-multiselect'
-
+import { trackEvent } from '@/helpers/analytics'
-const { handleError } = injectNotificationManager()
+import { create_profile_and_install_from_file } from '@/helpers/pack.js'
+import {
+  get_default_launcher_path,
+  get_importable_instances,
+  import_instance,
+} from '@/helpers/import.js'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
 
 const profile_name = ref('')
 const game_version = ref('')
@@ -306,16 +305,12 @@ const [
   get_game_versions().then(shallowRef).catch(handleError),
   get_loaders()
     .then((value) =>
-      ref(
+      value
-        value
+        .filter((item) => item.supported_project_types.includes('modpack'))
-          .filter((item) => item.supported_project_types.includes('modpack'))
+        .map((item) => item.name.toLowerCase()),
-          .map((item) => item.name.toLowerCase()),
-      ),
     )
-    .catch((err) => {
+    .then(ref)
-      handleError(err)
+    .catch(handleError),
-      return ref([])
-    }),
 ])
 loaders.value.unshift('vanilla')
 

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

@@ -35,14 +35,13 @@
   </ModalWrapper>
 </template>
 <script setup>
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
-import { trackEvent } from '@/helpers/analytics'
+import { Button } from '@modrinth/ui'
-import { find_filtered_jres } from '@/helpers/jre.js'
-import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-
+import { find_filtered_jres } from '@/helpers/jre.js'
-const { handleError } = injectNotificationManager()
+import { handleError } from '@/store/notifications.js'
+import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)

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

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

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

@@ -21,11 +21,14 @@ const props = defineProps({
 })
 
 const featuredCategory = computed(() => {
-  if (props.project.display_categories.includes('optimization')) {
+  if (props.project.categories.includes('optimization')) {
     return 'optimization'
   }
 
-  return props.project.display_categories[0] ?? props.project.categories[0]
+  if (props.project.categories.length > 0) {
+    return props.project.categories[0]
+  }
+  return undefined
 })
 
 const toColor = computed(() => {

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

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

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

@@ -94,24 +94,23 @@
 </template>
 
 <script setup>
-import ProgressBar from '@/components/ui/ProgressBar.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { loading_listener, process_listener } from '@/helpers/events'
-import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-import { get_many } from '@/helpers/profile.js'
-import { progress_bars_list } from '@/helpers/state.js'
 import {
   DownloadIcon,
-  DropdownIcon,
   StopCircleIcon,
   TerminalSquareIcon,
+  DropdownIcon,
   UnplugIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, Card, injectNotificationManager } from '@modrinth/ui'
+import { Button, ButtonStyled, Card } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { loading_listener, process_listener } from '@/helpers/events'
 import { useRouter } from 'vue-router'
-
+import { progress_bars_list } from '@/helpers/state.js'
-const { handleError } = injectNotificationManager()
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { handleError } from '@/store/notifications.js'
+import { get_many } from '@/helpers/profile.js'
+import { trackEvent } from '@/helpers/analytics'
 
 const router = useRouter()
 const card = ref(null)

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

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

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

@@ -1,29 +1,23 @@
 <script setup lang="ts">
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+import { Avatar, ButtonStyled, OverflowMenu, useRelativeTime } from '@modrinth/ui'
-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,
+  UserPlusIcon,
   MoreVerticalIcon,
+  MailIcon,
   SettingsIcon,
   TrashIcon,
-  UserPlusIcon,
   XIcon,
 } from '@modrinth/assets'
-import {
+import { ref, onUnmounted, watch, computed } from 'vue'
-  Avatar,
+import { friend_listener } from '@/helpers/events'
-  ButtonStyled,
+import { friends, friend_statuses, add_friend, remove_friend } from '@/helpers/friends'
-  injectNotificationManager,
+import { get_user_many } from '@/helpers/cache'
-  OverflowMenu,
+import { handleError } from '@/store/notifications.js'
-  useRelativeTime,
+import ContextMenu from '@/components/ui/ContextMenu.vue'
-} from '@modrinth/ui'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
-const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{

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

@@ -57,16 +57,15 @@
 
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
+import { XIcon, DownloadIcon } from '@modrinth/assets'
-import { add_project_from_version as installMod } from '@/helpers/profile'
+import { Button } from '@modrinth/ui'
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
+import { add_project_from_version as installMod } from '@/helpers/profile'
 import { ref } from 'vue'
+import { handleError } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'
 import Multiselect from 'vue-multiselect'
 
-const { handleError } = injectNotificationManager()
-
 const instance = ref(null)
 const project = ref(null)
 const versions = ref(null)

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

@@ -1,12 +1,11 @@
 <script setup>
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { create_profile_and_install as pack_install } from '@/helpers/pack'
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
+import { create_profile_and_install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
-
+import { trackEvent } from '@/helpers/analytics'
-const { handleError } = injectNotificationManager()
+import { handleError } from '@/store/state.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const versionId = ref()
 const project = ref()

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

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

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

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

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

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

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

@@ -1,30 +1,23 @@
 <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,
-  IssuesIcon,
-  SpinnerIcon,
   TransferIcon,
-  UndoIcon,
+  IssuesIcon,
-  UnlinkIcon,
+  HammerIcon,
-  UnplugIcon,
+  DownloadIcon,
   WrenchIcon,
+  UndoIcon,
+  SpinnerIcon,
+  UnplugIcon,
+  UnlinkIcon,
 } from '@modrinth/assets'
-import {
+import { Avatar, Checkbox, Chips, ButtonStyled, TeleportDropdownMenu } from '@modrinth/ui'
-  Avatar,
+import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
-  ButtonStyled,
+import { edit, install, update_repair_modrinth } from '@/helpers/profile'
-  Checkbox,
+import { handleError } from '@/store/notifications'
-  Chips,
+import { trackEvent } from '@/helpers/analytics'
-  TeleportDropdownMenu,
+import { defineMessages, useVIntl } from '@vintl/vintl'
-  injectNotificationManager,
+import { get_loader_versions } from '@/helpers/metadata'
-} from '@modrinth/ui'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
 import {
   formatCategory,
   type GameVersionTag,
@@ -32,16 +25,16 @@ import {
   type Project,
   type Version,
 } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { get_project, get_version_many } from '@/helpers/cache'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
 import dayjs from 'dayjs'
-import { computed, ref, shallowRef, watch, type ComputedRef, type Ref } from 'vue'
 import type {
   InstanceSettingsTabProps,
-  Manifest,
   ManifestLoaderVersion,
+  Manifest,
 } from '../../../helpers/types'
 
-const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const repairConfirmModal = ref()

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import JavaSelector from '@/components/ui/JavaSelector.vue'
+import { Checkbox, Slider } from '@modrinth/ui'
-import useMemorySlider from '@/composables/useMemorySlider'
-import { edit, get_optimal_jre_key } from '@/helpers/profile'
-import { get } from '@/helpers/settings.ts'
 import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, readonly, ref, watch } from 'vue'
-import type { AppSettings, InstanceSettingsTabProps, MemorySettings } from '../../../helpers/types'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
+import { handleError } from '@/store/notifications'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import JavaSelector from '@/components/ui/JavaSelector.vue'
+import { get_max_memory } from '@/helpers/jre'
+import { get } from '@/helpers/settings.ts'
+import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'
 
-const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
@@ -34,7 +34,7 @@ const envVars = ref(
 
 const overrideMemorySettings = ref(!!props.instance.memory)
 const memory = ref(props.instance.memory ?? globalSettings.memory)
-const { maxMemory, snapPoints } = await useMemorySlider()
+const maxMemory = Math.floor((await get_max_memory().catch(handleError)) / 1024)
 
 const editProfileObject = computed(() => {
   const editProfile: {
@@ -156,8 +156,6 @@ const messages = defineMessages({
       :min="512"
       :max="maxMemory"
       :step="64"
-      :snap-points="snapPoints"
-      :snap-range="512"
       unit="MB"
     />
     <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">

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

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

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

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { LogInIcon, SpinnerIcon } from '@modrinth/assets'
-import { ref } from 'vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-
-defineProps({
-  onFlowCancel: {
-    type: Function,
-    default() {
-      return async () => {}
-    },
-  },
-})
-
-const modal = ref()
-
-function show() {
-  modal.value.show()
-}
-
-function hide() {
-  modal.value.hide()
-}
-
-defineExpose({ show, hide })
-</script>
-<template>
-  <ModalWrapper ref="modal" @hide="onFlowCancel">
-    <template #title>
-      <span class="items-center gap-2 text-lg font-extrabold text-contrast">
-        <LogInIcon /> Sign in
-      </span>
-    </template>
-
-    <div class="flex justify-center gap-2">
-      <SpinnerIcon class="w-12 h-12 animate-spin" />
-    </div>
-    <p class="text-sm text-secondary">
-      Please sign in at the browser window that just opened to continue.
-    </p>
-  </ModalWrapper>
-</template>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { get, set } from '@/helpers/settings.ts'
 import { ref, watch } from 'vue'
+import { get_max_memory } from '@/helpers/jre'
+import { handleError } from '@/store/notifications'
 import { Slider, Toggle } from '@modrinth/ui'
-import useMemorySlider from '@/composables/useMemorySlider'
 
 const fetchSettings = await get()
 fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
@@ -10,7 +11,7 @@ fetchSettings.envVars = fetchSettings.custom_env_vars.map((x) => x.join('=')).jo
 
 const settings = ref(fetchSettings)
 
-const { maxMemory, snapPoints } = await useMemorySlider()
+const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
 
 watch(
   settings,
@@ -106,8 +107,6 @@ watch(
       :min="512"
       :max="maxMemory"
       :step="64"
-      :snap-points="snapPoints"
-      :snap-range="512"
       unit="MB"
     />
 

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

@@ -1,10 +1,8 @@
 <script setup>
-import JavaSelector from '@/components/ui/JavaSelector.vue'
-import { get_java_versions, set_java_version } from '@/helpers/jre'
-import { injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-
+import { get_java_versions, set_java_version } from '@/helpers/jre'
-const { handleError } = injectNotificationManager()
+import { handleError } from '@/store/notifications'
+import JavaSelector from '@/components/ui/JavaSelector.vue'
 
 const javaVersions = ref(await get_java_versions().catch(handleError))
 async function updateJavaVersion(version) {

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

@@ -1,13 +1,13 @@
 <script setup>
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { Button, Slider } from '@modrinth/ui'
-import { purge_cache_types } from '@/helpers/cache.js'
-import { get, set } from '@/helpers/settings.ts'
-import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { Button, Slider, injectNotificationManager } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
+import { get, set } from '@/helpers/settings.ts'
+import { purge_cache_types } from '@/helpers/cache.js'
+import { handleError } from '@/store/notifications.js'
+import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { open } from '@tauri-apps/plugin-dialog'
 
-const { handleError } = injectNotificationManager()
 const settings = ref(await get())
 
 watch(

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

@@ -100,39 +100,36 @@
 </template>
 
 <script setup lang="ts">
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { ref, computed, watch, useTemplateRef } from '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,
-  SaveIcon,
-  SpinnerIcon,
-  UploadIcon,
-  XIcon,
-} from '@modrinth/assets'
 import {
+  SkinPreviewRenderer,
   Button,
-  ButtonStyled,
+  RadioButtons,
   CapeButton,
   CapeLikeTextButton,
-  injectNotificationManager,
+  ButtonStyled,
-  RadioButtons,
-  SkinPreviewRenderer,
 } from '@modrinth/ui'
-import { computed, ref, useTemplateRef, watch } from 'vue'
+import {
-
+  add_and_equip_custom_skin,
-const { handleError } = injectNotificationManager()
+  remove_custom_skin,
+  unequip_skin,
+  type Skin,
+  type Cape,
+  type SkinModel,
+  get_normalized_skin_texture,
+} from '@/helpers/skins.ts'
+import { handleError } from '@/store/notifications'
+import {
+  UploadIcon,
+  CheckIcon,
+  SaveIcon,
+  XIcon,
+  ChevronRightIcon,
+  SpinnerIcon,
+} from '@modrinth/assets'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
 
 const modal = useTemplateRef('modal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
@@ -256,7 +253,7 @@ async function showNew(e: MouseEvent, skinTextureUrl: string) {
   mode.value = 'new'
   currentSkin.value = null
   uploadedTextureUrl.value = skinTextureUrl
-  variant.value = await determineModelType(skinTextureUrl)
+  variant.value = 'CLASSIC'
   selectedCape.value = undefined
   visibleCapeList.value = []
   initVisibleCapeList()

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

@@ -27,14 +27,14 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onBeforeUnmount, watch } from 'vue'
+import { UploadIcon } from '@modrinth/assets'
+import { useNotifications } from '@/store/state'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get_dragged_skin_data } from '@/helpers/skins'
-import { UploadIcon } from '@modrinth/assets'
-import { injectNotificationManager } from '@modrinth/ui'
-import { getCurrentWebview } from '@tauri-apps/api/webview'
-import { onBeforeUnmount, ref, watch } from 'vue'
 
-const { addNotification } = injectNotificationManager()
+const notifications = useNotifications()
 
 const modal = ref()
 const fileInput = ref<HTMLInputElement>()
@@ -99,7 +99,7 @@ async function setupDragDropListener() {
           const data = await get_dragged_skin_data(filePath)
           await processData(data.buffer)
         } catch (error) {
-          addNotification({
+          notifications.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,12 +1,6 @@
 <script setup lang="ts">
-import { trackEvent } from '@/helpers/analytics'
+import type { Dayjs } from 'dayjs'
-import { get_project } from '@/helpers/cache'
+import dayjs from 'dayjs'
-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,
@@ -19,20 +13,25 @@ import {
   Avatar,
   ButtonStyled,
   commonMessages,
-  injectNotificationManager,
   OverflowMenu,
   SmartClickable,
   useRelativeTime,
 } from '@modrinth/ui'
-import { capitalizeString } from '@modrinth/utils'
-import { convertFileSrc } from '@tauri-apps/api/core'
 import { useVIntl } from '@vintl/vintl'
-import type { Dayjs } from 'dayjs'
+import { computed, nextTick, ref, onMounted, onUnmounted } from 'vue'
-import dayjs from 'dayjs'
+import { showProfileInFolder } from '@/helpers/utils'
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { useRouter } from 'vue-router'
+import type { GameInstance } from '@/helpers/types'
+import { get_project } from '@/helpers/cache'
+import { capitalizeString } from '@modrinth/utils'
+import { kill, run } from '@/helpers/profile'
+import { handleSevereError } from '@/store/error'
+import { trackEvent } from '@/helpers/analytics'
+import { get_by_profile_path } from '@/helpers/process'
+import { handleError } from '@/store/notifications'
+import { process_listener } from '@/helpers/events'
 
-const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 

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

@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import InstanceItem from '@/components/ui/world/InstanceItem.vue'
-import WorldItem from '@/components/ui/world/WorldItem.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { process_listener, profile_listener } from '@/helpers/events'
-import { get_all } from '@/helpers/process'
-import { kill, run } from '@/helpers/profile'
-import type { GameInstance } from '@/helpers/types'
 import {
-  type ProtocolVersion,
-  type ServerData,
   type ServerWorld,
+  type ServerData,
   type WorldWithProfile,
+  get_recent_worlds,
   getWorldIdentifier,
   get_profile_protocol_version,
-  get_recent_worlds,
   refreshServerData,
   start_join_server,
   start_join_singleplayer_world,
 } from '@/helpers/worlds.ts'
-import { handleSevereError } from '@/store/error'
+import { HeadingLink, GAME_MODES } from '@modrinth/ui'
-import { useTheming } from '@/store/theme.ts'
+import WorldItem from '@/components/ui/world/WorldItem.vue'
-import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
+import InstanceItem from '@/components/ui/world/InstanceItem.vue'
+import { watch, onMounted, onUnmounted, ref, computed } from 'vue'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useTheming } from '@/store/theme.ts'
-
+import { kill, run } from '@/helpers/profile'
-const { handleError } = injectNotificationManager()
+import { handleError } from '@/store/notifications'
+import { trackEvent } from '@/helpers/analytics'
+import { process_listener, profile_listener } from '@/helpers/events'
+import { get_all } from '@/helpers/process'
+import type { GameInstance } from '@/helpers/types'
+import { handleSevereError } from '@/store/error'
 
 const props = defineProps<{
   recentInstances: GameInstance[]
@@ -35,7 +33,7 @@ const theme = useTheming()
 
 const jumpBackInItems = ref<JumpBackInItem[]>([])
 const serverData = ref<Record<string, ServerData>>({})
-const protocolVersions = ref<Record<string, ProtocolVersion | null>>({})
+const protocolVersions = ref<Record<string, number | null>>({})
 
 const MIN_JUMP_BACK_IN = 3
 const MAX_JUMP_BACK_IN = 6
@@ -123,8 +121,11 @@ async function populateJumpBackIn() {
       }
     })
 
-    servers.forEach(({ instancePath, address }) =>
+    // fetch each server's data
-      refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
+    Promise.all(
+      servers.map(({ instancePath, address }) =>
+        refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
+      ),
     )
   }
 
@@ -149,8 +150,8 @@ async function populateJumpBackIn() {
     .slice(0, MAX_JUMP_BACK_IN)
 }
 
-function refreshServer(address: string, instancePath: string) {
+async function refreshServer(address: string, instancePath: string) {
-  refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
+  await refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
 }
 
 async function joinWorld(world: WorldWithProfile) {

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

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import type {
+import type { ServerStatus, ServerWorld, SingleplayerWorld, World } from '@/helpers/worlds.ts'
-  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 {
@@ -60,9 +54,8 @@ const props = withDefaults(
     playingInstance?: boolean
     playingWorld?: boolean
     startingInstance?: boolean
-    supportsServerQuickPlay?: boolean
+    supportsQuickPlay?: boolean
-    supportsWorldQuickPlay?: boolean
+    currentProtocol?: number | null
-    currentProtocol?: ProtocolVersion | null
     highlighted?: boolean
 
     // Server only
@@ -85,8 +78,7 @@ const props = withDefaults(
     playingInstance: false,
     playingWorld: false,
     startingInstance: false,
-    supportsServerQuickPlay: true,
+    supportsQuickPlay: false,
-    supportsWorldQuickPlay: false,
     currentProtocol: null,
 
     refreshing: false,
@@ -110,8 +102,7 @@ const serverIncompatible = computed(
     !!props.serverStatus &&
     !!props.serverStatus.version?.protocol &&
     !!props.currentProtocol &&
-    (props.serverStatus.version.protocol !== props.currentProtocol.version ||
+    props.serverStatus.version.protocol !== props.currentProtocol,
-      props.serverStatus.version.legacy !== props.currentProtocol.legacy),
 )
 
 const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
@@ -129,26 +120,14 @@ const messages = defineMessages({
     id: 'instance.worlds.a_minecraft_server',
     defaultMessage: 'A Minecraft Server',
   },
-  noServerQuickPlay: {
+  noQuickPlay: {
-    id: 'instance.worlds.no_server_quick_play',
+    id: 'instance.worlds.no_quick_play',
-    defaultMessage: 'You can only jump straight into servers on Minecraft Alpha 1.0.5+',
+    defaultMessage: 'You can only jump straight into worlds on Minecraft 1.20+',
-  },
-  noSingleplayerQuickPlay: {
-    id: 'instance.worlds.no_singleplayer_quick_play',
-    defaultMessage: 'You can only jump straight into singleplayer worlds on Minecraft 1.20+',
   },
   gameAlreadyOpen: {
     id: 'instance.worlds.game_already_open',
     defaultMessage: 'Instance is already open',
   },
-  noContact: {
-    id: 'instance.worlds.no_contact',
-    defaultMessage: "Server couldn't be contacted",
-  },
-  incompatibleServer: {
-    id: 'instance.worlds.incompatible_server',
-    defaultMessage: 'Server is incompatible',
-  },
   copyAddress: {
     id: 'instance.worlds.copy_address',
     defaultMessage: 'Copy address',
@@ -157,6 +136,10 @@ const messages = defineMessages({
     id: 'instance.worlds.view_instance',
     defaultMessage: 'View instance',
   },
+  playAnyway: {
+    id: 'instance.worlds.play_anyway',
+    defaultMessage: 'Play anyway',
+  },
   playInstance: {
     id: 'instance.worlds.play_instance',
     defaultMessage: 'Play instance',
@@ -319,40 +302,39 @@ const messages = defineMessages({
         </template>
       </div>
       <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-        <ButtonStyled
+        <template v-if="world.type === 'singleplayer' || serverStatus">
-          v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
+          <ButtonStyled
-          color="red"
+            v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
-        >
+            color="red"
-          <button @click="emit('stop')">
-            <StopCircleIcon aria-hidden="true" />
-            {{ formatMessage(commonMessages.stopButton) }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled v-else>
-          <button
-            v-tooltip="
-              world.type == 'server' && !supportsServerQuickPlay
-                ? formatMessage(messages.noServerQuickPlay)
-                : world.type == 'singleplayer' && !supportsWorldQuickPlay
-                  ? formatMessage(messages.noSingleplayerQuickPlay)
-                  : playingOtherWorld || locked
-                    ? formatMessage(messages.gameAlreadyOpen)
-                    : !serverStatus
-                      ? formatMessage(messages.noContact)
-                      : serverIncompatible
-                        ? formatMessage(messages.incompatibleServer)
-                        : null
-            "
-            :disabled="
-              playingOtherWorld ||
-              startingInstance ||
-              (world.type == 'server' && !supportsServerQuickPlay) ||
-              (world.type == 'singleplayer' && !supportsWorldQuickPlay)
-            "
-            @click="emit('play')"
           >
-            <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+            <button @click="emit('stop')">
-            <PlayIcon v-else aria-hidden="true" />
+              <StopCircleIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.stopButton) }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-else>
+            <button
+              v-tooltip="
+                serverIncompatible
+                  ? 'Server is incompatible'
+                  : !supportsQuickPlay
+                    ? formatMessage(messages.noQuickPlay)
+                    : playingOtherWorld || locked
+                      ? formatMessage(messages.gameAlreadyOpen)
+                      : null
+              "
+              :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
+              @click="emit('play')"
+            >
+              <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+              <PlayIcon v-else aria-hidden="true" />
+              {{ formatMessage(commonMessages.playButton) }}
+            </button>
+          </ButtonStyled>
+        </template>
+        <ButtonStyled v-else>
+          <button class="invisible">
+            <PlayIcon aria-hidden="true" />
             {{ formatMessage(commonMessages.playButton) }}
           </button>
         </ButtonStyled>
@@ -365,6 +347,11 @@ const messages = defineMessages({
                 disabled: playingInstance,
                 action: () => emit('play-instance'),
               },
+              {
+                id: 'play-anyway',
+                shown: serverIncompatible && !playingInstance && supportsQuickPlay,
+                action: () => emit('play'),
+              },
               {
                 id: 'open-instance',
                 shown: !!instancePath,
@@ -430,6 +417,10 @@ const messages = defineMessages({
               <PlayIcon aria-hidden="true" />
               {{ formatMessage(messages.playInstance) }}
             </template>
+            <template #play-anyway>
+              <PlayIcon aria-hidden="true" />
+              {{ formatMessage(messages.playAnyway) }}
+            </template>
             <template #open-instance>
               <EyeIcon aria-hidden="true" />
               {{ formatMessage(messages.viewInstance) }}

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

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

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

@@ -1,21 +1,21 @@
 <script setup lang="ts">
+import { SaveIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages } from '@modrinth/ui'
+import { computed, ref } from 'vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
-import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
 import {
+  type ServerPackStatus,
   edit_server_in_profile,
+  type ServerWorld,
   set_world_display_status,
   type DisplayStatus,
-  type ServerPackStatus,
-  type ServerWorld,
 } from '@/helpers/worlds.ts'
-import { SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { defineMessage, useVIntl } from '@vintl/vintl'
-import { computed, ref } from 'vue'
+import { handleError } from '@/store/notifications'
+import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
 
-const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
+import { ChevronRightIcon, SaveIcon, XIcon, UndoIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, commonMessages } from '@modrinth/ui'
+import { computed, ref } from 'vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
 import type { GameInstance } from '@/helpers/types'
 import type { DisplayStatus, SingleplayerWorld } from '@/helpers/worlds.ts'
-import { rename_world, reset_world_icon, set_world_display_status } from '@/helpers/worlds.ts'
+import { set_world_display_status, rename_world, reset_world_icon } from '@/helpers/worlds.ts'
-import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { computed, ref } from 'vue'
+import { handleError } from '@/store/notifications'
+import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
 
-const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

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

@@ -1,22 +0,0 @@
-import { get_max_memory } from '@/helpers/jre.js'
-import { injectNotificationManager } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-
-export default async function () {
-  const { handleError } = injectNotificationManager()
-  const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
-
-  const snapPoints = computed(() => {
-    let points = []
-    let memory = 2048
-
-    while (memory <= maxMemory.value) {
-      points.push(memory)
-      memory *= 2
-    }
-
-    return points
-  })
-
-  return { maxMemory, snapPoints }
-}

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

@@ -1,6 +1,6 @@
-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'
+import { getVersion } from '@tauri-apps/api/app'
 
 export const useFetch = async (url, item, isSilent) => {
   try {
@@ -11,7 +11,6 @@ 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/mr_auth.js

@@ -16,7 +16,3 @@ export async function logout() {
 export async function get() {
   return await invoke('plugin:mr-auth|get')
 }
-
-export async function cancelLogin() {
-  return await invoke('plugin:mr-auth|cancel_modrinth_login')
-}

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

@@ -3,9 +3,9 @@
  * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
-import { install_to_existing_profile } from '@/helpers/pack.js'
-import { injectNotificationManager } from '@modrinth/ui'
 import { invoke } from '@tauri-apps/api/core'
+import { install_to_existing_profile } from '@/helpers/pack.js'
+import { handleError } from '@/store/notifications.js'
 
 /// Add instance
 /*
@@ -190,7 +190,6 @@ 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

@@ -2,46 +2,25 @@ import * as THREE from 'three'
 import type { Skin, Cape } from '../skins'
 import { get_normalized_skin_texture, determineModelType } from '../skins'
 import { reactive } from 'vue'
-import {
+import { setupSkinModel, disposeCaches } from '@modrinth/utils'
-  setupSkinModel,
-  disposeCaches,
-  loadTexture,
-  applyCapeTexture,
-  createTransparentTexture,
-} from '@modrinth/utils'
 import { skinPreviewStorage } from '../storage/skin-preview-storage'
-import { headStorage } from '../storage/head-storage'
+import { CapeModel, ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
-import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
 
 export interface RenderResult {
   forwards: string
   backwards: string
 }
 
-export interface RawRenderResult {
-  forwards: Blob
-  backwards: Blob
-}
-
 class BatchSkinRenderer {
-  private renderer: THREE.WebGLRenderer | null = null
+  private renderer: THREE.WebGLRenderer
-  private scene: THREE.Scene | null = null
+  private readonly scene: THREE.Scene
-  private camera: THREE.PerspectiveCamera | null = null
+  private readonly camera: THREE.PerspectiveCamera
   private currentModel: THREE.Group | null = null
-  private readonly width: number
-  private readonly height: number
 
   constructor(width: number = 360, height: number = 504) {
-    this.width = width
-    this.height = height
-  }
-
-  private initializeRenderer(): void {
-    if (this.renderer) return
-
     const canvas = document.createElement('canvas')
-    canvas.width = this.width
+    canvas.width = width
-    canvas.height = this.height
+    canvas.height = height
 
     this.renderer = new THREE.WebGLRenderer({
       canvas: canvas,
@@ -54,10 +33,10 @@ class BatchSkinRenderer {
     this.renderer.toneMapping = THREE.NoToneMapping
     this.renderer.toneMappingExposure = 10.0
     this.renderer.setClearColor(0x000000, 0)
-    this.renderer.setSize(this.width, this.height)
+    this.renderer.setSize(width, height)
 
     this.scene = new THREE.Scene()
-    this.camera = new THREE.PerspectiveCamera(20, this.width / this.height, 0.4, 1000)
+    this.camera = new THREE.PerspectiveCamera(20, width / height, 0.4, 1000)
 
     const ambientLight = new THREE.AmbientLight(0xffffff, 2)
     const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
@@ -71,12 +50,9 @@ class BatchSkinRenderer {
     textureUrl: string,
     modelUrl: string,
     capeUrl?: string,
-  ): Promise<RawRenderResult> {
+    capeModelUrl?: string,
-    this.initializeRenderer()
+  ): Promise<RenderResult> {
-
+    await this.setupModel(modelUrl, textureUrl, capeModelUrl, capeUrl)
-    this.clearScene()
-
-    await this.setupModel(modelUrl, textureUrl, capeUrl)
 
     const headPart = this.currentModel!.getObjectByName('Head')
     let lookAtTarget: [number, number, number]
@@ -101,35 +77,35 @@ class BatchSkinRenderer {
   private async renderView(
     cameraPosition: [number, number, number],
     lookAtPosition: [number, number, number],
-  ): Promise<Blob> {
+  ): Promise<string> {
-    if (!this.camera || !this.renderer || !this.scene) {
-      throw new Error('Renderer not initialized')
-    }
-
     this.camera.position.set(...cameraPosition)
     this.camera.lookAt(...lookAtPosition)
 
     this.renderer.render(this.scene, this.camera)
 
-    const dataUrl = this.renderer.domElement.toDataURL('image/webp', 0.9)
+    return new Promise<string>((resolve, reject) => {
-    const response = await fetch(dataUrl)
+      this.renderer.domElement.toBlob((blob) => {
-    return await response.blob()
+        if (blob) {
+          const url = URL.createObjectURL(blob)
+          resolve(url)
+        } else {
+          reject(new Error('Failed to create blob from canvas'))
+        }
+      }, 'image/png')
+    })
   }
 
-  private async setupModel(modelUrl: string, textureUrl: string, capeUrl?: string): Promise<void> {
+  private async setupModel(
-    if (!this.scene) {
+    modelUrl: string,
-      throw new Error('Renderer not initialized')
+    textureUrl: string,
+    capeModelUrl?: string,
+    capeUrl?: string,
+  ): Promise<void> {
+    if (this.currentModel) {
+      this.scene.remove(this.currentModel)
     }
 
-    const { model } = await setupSkinModel(modelUrl, textureUrl)
+    const { model } = await setupSkinModel(modelUrl, textureUrl, capeModelUrl, capeUrl)
-
-    if (capeUrl) {
-      const capeTexture = await loadTexture(capeUrl)
-      applyCapeTexture(model, capeTexture)
-    } else {
-      const transparentTexture = createTransparentTexture()
-      applyCapeTexture(model, null, transparentTexture)
-    }
 
     const group = new THREE.Group()
     group.add(model)
@@ -140,39 +116,8 @@ class BatchSkinRenderer {
     this.currentModel = group
   }
 
-  private clearScene(): void {
-    if (!this.scene) return
-
-    while (this.scene.children.length > 0) {
-      const child = this.scene.children[0]
-      this.scene.remove(child)
-
-      if (child instanceof THREE.Mesh) {
-        if (child.geometry) child.geometry.dispose()
-        if (child.material) {
-          if (Array.isArray(child.material)) {
-            child.material.forEach((material) => material.dispose())
-          } else {
-            child.material.dispose()
-          }
-        }
-      }
-    }
-
-    const ambientLight = new THREE.AmbientLight(0xffffff, 2)
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
-    directionalLight.castShadow = true
-    directionalLight.position.set(2, 4, 3)
-    this.scene.add(ambientLight)
-    this.scene.add(directionalLight)
-
-    this.currentModel = null
-  }
-
   public dispose(): void {
-    if (this.renderer) {
+    this.renderer.dispose()
-      this.renderer.dispose()
-    }
     disposeCaches()
   }
 }
@@ -188,25 +133,10 @@ function getModelUrlForVariant(variant: string): string {
   }
 }
 
-export const skinBlobUrlMap = reactive(new Map<string, RenderResult>())
+export const map = reactive(new Map<string, RenderResult>())
-export const headBlobUrlMap = reactive(new Map<string, string>())
+export const headMap = reactive(new Map<string, string>())
 const DEBUG_MODE = false
 
-let sharedRenderer: BatchSkinRenderer | null = null
-function getSharedRenderer(): BatchSkinRenderer {
-  if (!sharedRenderer) {
-    sharedRenderer = new BatchSkinRenderer()
-  }
-  return sharedRenderer
-}
-
-export function disposeSharedRenderer(): void {
-  if (sharedRenderer) {
-    sharedRenderer.dispose()
-    sharedRenderer = null
-  }
-}
-
 export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {
   const validKeys = new Set<string>()
   const validHeadKeys = new Set<string>()
@@ -220,7 +150,7 @@ export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {
 
   try {
     await skinPreviewStorage.cleanupInvalidKeys(validKeys)
-    await headStorage.cleanupInvalidKeys(validHeadKeys)
+    await skinPreviewStorage.cleanupInvalidKeys(validHeadKeys)
   } catch (error) {
     console.warn('Failed to cleanup unused skin previews:', error)
   }
@@ -299,17 +229,13 @@ export async function generatePlayerHeadBlob(skinUrl: string, size: number = 64)
           outputCtx.drawImage(hatCanvas, 0, 0, 8, 8, 0, 0, size, size)
         }
 
-        outputCanvas.toBlob(
+        outputCanvas.toBlob((blob) => {
-          (blob) => {
+          if (blob) {
-            if (blob) {
+            resolve(blob)
-              resolve(blob)
+          } else {
-            } else {
+            reject(new Error('Failed to create blob from canvas'))
-              reject(new Error('Failed to create blob from canvas'))
+          }
-            }
+        }, 'image/png')
-          },
-          'image/webp',
-          0.9,
-        )
       } catch (error) {
         reject(error)
       }
@@ -326,24 +252,35 @@ export async function generatePlayerHeadBlob(skinUrl: string, size: number = 64)
 async function generateHeadRender(skin: Skin): Promise<string> {
   const headKey = `${skin.texture_key}-head`
 
-  if (headBlobUrlMap.has(headKey)) {
+  if (headMap.has(headKey)) {
     if (DEBUG_MODE) {
-      const url = headBlobUrlMap.get(headKey)!
+      const url = headMap.get(headKey)!
       URL.revokeObjectURL(url)
-      headBlobUrlMap.delete(headKey)
+      headMap.delete(headKey)
     } else {
-      return headBlobUrlMap.get(headKey)!
+      return headMap.get(headKey)!
     }
   }
 
+  try {
+    const cached = await skinPreviewStorage.retrieve(headKey)
+    if (cached && typeof cached === 'string') {
+      headMap.set(headKey, cached)
+      return cached
+    }
+  } catch (error) {
+    console.warn('Failed to retrieve cached head render:', error)
+  }
+
   const skinUrl = await get_normalized_skin_texture(skin)
   const headBlob = await generatePlayerHeadBlob(skinUrl, 64)
   const headUrl = URL.createObjectURL(headBlob)
 
-  headBlobUrlMap.set(headKey, headUrl)
+  headMap.set(headKey, headUrl)
 
   try {
-    await headStorage.store(headKey, headBlob)
+    // @ts-expect-error - skinPreviewStorage.store expects a RenderResult, but we are storing a string url.
+    await skinPreviewStorage.store(headKey, headUrl)
   } catch (error) {
     console.warn('Failed to store head render in persistent storage:', error)
   }
@@ -356,49 +293,30 @@ export async function getPlayerHeadUrl(skin: Skin): Promise<string> {
 }
 
 export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
+  const renderer = new BatchSkinRenderer()
+
   try {
-    const skinKeys = skins.map(
-      (skin) => `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`,
-    )
-    const headKeys = skins.map((skin) => `${skin.texture_key}-head`)
-
-    const [cachedSkinPreviews, cachedHeadPreviews] = await Promise.all([
-      skinPreviewStorage.batchRetrieve(skinKeys),
-      headStorage.batchRetrieve(headKeys),
-    ])
-
-    for (let i = 0; i < skins.length; i++) {
-      const skinKey = skinKeys[i]
-      const headKey = headKeys[i]
-
-      const rawCached = cachedSkinPreviews[skinKey]
-      if (rawCached) {
-        const cached: RenderResult = {
-          forwards: URL.createObjectURL(rawCached.forwards),
-          backwards: URL.createObjectURL(rawCached.backwards),
-        }
-        skinBlobUrlMap.set(skinKey, cached)
-      }
-
-      const cachedHead = cachedHeadPreviews[headKey]
-      if (cachedHead) {
-        headBlobUrlMap.set(headKey, URL.createObjectURL(cachedHead))
-      }
-    }
-
     for (const skin of skins) {
       const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
 
-      if (skinBlobUrlMap.has(key)) {
+      if (map.has(key)) {
         if (DEBUG_MODE) {
-          const result = skinBlobUrlMap.get(key)!
+          const result = map.get(key)!
           URL.revokeObjectURL(result.forwards)
           URL.revokeObjectURL(result.backwards)
-          skinBlobUrlMap.delete(key)
+          map.delete(key)
         } else continue
       }
 
-      const renderer = getSharedRenderer()
+      try {
+        const cached = await skinPreviewStorage.retrieve(key)
+        if (cached) {
+          map.set(key, cached)
+          continue
+        }
+      } catch (error) {
+        console.warn('Failed to retrieve cached skin preview:', error)
+      }
 
       let variant = skin.variant
       if (variant === 'UNKNOWN') {
@@ -412,35 +330,25 @@ export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promis
 
       const modelUrl = getModelUrlForVariant(variant)
       const cape: Cape | undefined = capes.find((_cape) => _cape.id === skin.cape_id)
-      const rawRenderResult = await renderer.renderSkin(
+      const renderResult = await renderer.renderSkin(
         await get_normalized_skin_texture(skin),
         modelUrl,
         cape?.texture,
+        CapeModel,
       )
 
-      const renderResult: RenderResult = {
+      map.set(key, renderResult)
-        forwards: URL.createObjectURL(rawRenderResult.forwards),
-        backwards: URL.createObjectURL(rawRenderResult.backwards),
-      }
-
-      skinBlobUrlMap.set(key, renderResult)
 
       try {
-        await skinPreviewStorage.store(key, rawRenderResult)
+        await skinPreviewStorage.store(key, renderResult)
       } catch (error) {
         console.warn('Failed to store skin preview in persistent storage:', error)
       }
 
-      const headKey = `${skin.texture_key}-head`
+      await generateHeadRender(skin)
-      if (!headBlobUrlMap.has(headKey)) {
-        await generateHeadRender(skin)
-      }
     }
   } finally {
-    disposeSharedRenderer()
+    renderer.dispose()
     await cleanupUnusedPreviews(skins)
-
-    await skinPreviewStorage.debugCalculateStorage()
-    await headStorage.debugCalculateStorage()
   }
 }

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

@@ -1,6 +1,6 @@
-import { injectNotificationManager } from '@modrinth/ui'
-import { arrayBufferToBase64 } from '@modrinth/utils'
 import { invoke } from '@tauri-apps/api/core'
+import { handleError } from '@/store/notifications'
+import { arrayBufferToBase64 } from '@modrinth/utils'
 
 export interface Cape {
   id: string
@@ -39,7 +39,6 @@ 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
 }
@@ -63,12 +62,15 @@ export async function determineModelType(texture: string): Promise<'SLIM' | 'CLA
 
       context.drawImage(image, 0, 0)
 
-      const armX = 54
+      const armX = 44
-      const armY = 20
+      const armY = 16
-      const armWidth = 2
+      const armWidth = 4
       const armHeight = 12
+
       const imageData = context.getImageData(armX, armY, armWidth, armHeight).data
-      for (let alphaIndex = 3; alphaIndex < imageData.length; alphaIndex += 4) {
+
+      for (let y = 0; y < armHeight; y++) {
+        const alphaIndex = (3 + y * armWidth) * 4 + 3
         if (imageData[alphaIndex] !== 0) {
           resolve('CLASSIC')
           return

apps/app-frontend/src/helpers/storage/head-storage.ts

@@ -1,229 +0,0 @@
-interface StoredHead {
-  blob: Blob
-  timestamp: number
-}
-
-export class HeadStorage {
-  private dbName = 'head-storage'
-  private version = 1
-  private db: IDBDatabase | null = null
-
-  async init(): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const request = indexedDB.open(this.dbName, this.version)
-
-      request.onerror = () => reject(request.error)
-      request.onsuccess = () => {
-        this.db = request.result
-        resolve()
-      }
-
-      request.onupgradeneeded = () => {
-        const db = request.result
-        if (!db.objectStoreNames.contains('heads')) {
-          db.createObjectStore('heads')
-        }
-      }
-    })
-  }
-
-  async store(key: string, blob: Blob): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readwrite')
-    const store = transaction.objectStore('heads')
-
-    const storedHead: StoredHead = {
-      blob,
-      timestamp: Date.now(),
-    }
-
-    return new Promise((resolve, reject) => {
-      const request = store.put(storedHead, key)
-
-      request.onsuccess = () => resolve()
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async retrieve(key: string): Promise<string | null> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readonly')
-    const store = transaction.objectStore('heads')
-
-    return new Promise((resolve, reject) => {
-      const request = store.get(key)
-
-      request.onsuccess = () => {
-        const result = request.result as StoredHead | undefined
-
-        if (!result) {
-          resolve(null)
-          return
-        }
-
-        const url = URL.createObjectURL(result.blob)
-        resolve(url)
-      }
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async batchRetrieve(keys: string[]): Promise<Record<string, Blob | null>> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readonly')
-    const store = transaction.objectStore('heads')
-    const results: Record<string, Blob | null> = {}
-
-    return new Promise((resolve, _reject) => {
-      let completedRequests = 0
-
-      if (keys.length === 0) {
-        resolve(results)
-        return
-      }
-
-      for (const key of keys) {
-        const request = store.get(key)
-
-        request.onsuccess = () => {
-          const result = request.result as StoredHead | undefined
-
-          if (result) {
-            results[key] = result.blob
-          } else {
-            results[key] = null
-          }
-
-          completedRequests++
-          if (completedRequests === keys.length) {
-            resolve(results)
-          }
-        }
-
-        request.onerror = () => {
-          results[key] = null
-          completedRequests++
-          if (completedRequests === keys.length) {
-            resolve(results)
-          }
-        }
-      }
-    })
-  }
-
-  async cleanupInvalidKeys(validKeys: Set<string>): Promise<number> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readwrite')
-    const store = transaction.objectStore('heads')
-    let deletedCount = 0
-
-    return new Promise((resolve, reject) => {
-      const request = store.openCursor()
-
-      request.onsuccess = (event) => {
-        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
-
-        if (cursor) {
-          const key = cursor.primaryKey as string
-
-          if (!validKeys.has(key)) {
-            const deleteRequest = cursor.delete()
-            deleteRequest.onsuccess = () => {
-              deletedCount++
-            }
-            deleteRequest.onerror = () => {
-              console.warn('Failed to delete invalid head entry:', key)
-            }
-          }
-
-          cursor.continue()
-        } else {
-          resolve(deletedCount)
-        }
-      }
-
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async debugCalculateStorage(): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readonly')
-    const store = transaction.objectStore('heads')
-
-    let totalSize = 0
-    let count = 0
-    const entries: Array<{ key: string; size: number }> = []
-
-    return new Promise((resolve, reject) => {
-      const request = store.openCursor()
-
-      request.onsuccess = (event) => {
-        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
-
-        if (cursor) {
-          const key = cursor.primaryKey as string
-          const value = cursor.value as StoredHead
-
-          const entrySize = value.blob.size
-          totalSize += entrySize
-          count++
-
-          entries.push({
-            key,
-            size: entrySize,
-          })
-
-          cursor.continue()
-        } else {
-          console.group('🗄️ Head Storage Debug Info')
-          console.log(`Total entries: ${count}`)
-          console.log(`Total size: ${(totalSize / 1024 / 1024).toFixed(2)} MB`)
-          console.log(
-            `Average size per entry: ${count > 0 ? (totalSize / count / 1024).toFixed(2) : 0} KB`,
-          )
-
-          if (entries.length > 0) {
-            const sortedEntries = entries.sort((a, b) => b.size - a.size)
-            console.log(
-              'Largest entry:',
-              sortedEntries[0].key,
-              '(' + (sortedEntries[0].size / 1024).toFixed(2) + ' KB)',
-            )
-            console.log(
-              'Smallest entry:',
-              sortedEntries[sortedEntries.length - 1].key,
-              '(' + (sortedEntries[sortedEntries.length - 1].size / 1024).toFixed(2) + ' KB)',
-            )
-          }
-
-          console.groupEnd()
-          resolve()
-        }
-      }
-
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async clearAll(): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readwrite')
-    const store = transaction.objectStore('heads')
-
-    return new Promise((resolve, reject) => {
-      const request = store.clear()
-
-      request.onsuccess = () => resolve()
-      request.onerror = () => reject(request.error)
-    })
-  }
-}
-
-export const headStorage = new HeadStorage()

apps/app-frontend/src/helpers/storage/skin-preview-storage.ts

@@ -1,4 +1,4 @@
-import type { RawRenderResult } from '../rendering/batch-skin-renderer'
+import type { RenderResult } from '../rendering/batch-skin-renderer'
 
 interface StoredPreview {
   forwards: Blob
@@ -30,15 +30,18 @@ export class SkinPreviewStorage {
     })
   }
 
-  async store(key: string, result: RawRenderResult): Promise<void> {
+  async store(key: string, result: RenderResult): Promise<void> {
     if (!this.db) await this.init()
 
+    const forwardsBlob = await fetch(result.forwards).then((r) => r.blob())
+    const backwardsBlob = await fetch(result.backwards).then((r) => r.blob())
+
     const transaction = this.db!.transaction(['previews'], 'readwrite')
     const store = transaction.objectStore('previews')
 
     const storedPreview: StoredPreview = {
-      forwards: result.forwards,
+      forwards: forwardsBlob,
-      backwards: result.backwards,
+      backwards: backwardsBlob,
       timestamp: Date.now(),
     }
 
@@ -50,7 +53,7 @@ export class SkinPreviewStorage {
     })
   }
 
-  async retrieve(key: string): Promise<RawRenderResult | null> {
+  async retrieve(key: string): Promise<RenderResult | null> {
     if (!this.db) await this.init()
 
     const transaction = this.db!.transaction(['previews'], 'readonly')
@@ -67,56 +70,14 @@ export class SkinPreviewStorage {
           return
         }
 
-        resolve({ forwards: result.forwards, backwards: result.backwards })
+        const forwards = URL.createObjectURL(result.forwards)
+        const backwards = URL.createObjectURL(result.backwards)
+        resolve({ forwards, backwards })
       }
       request.onerror = () => reject(request.error)
     })
   }
 
-  async batchRetrieve(keys: string[]): Promise<Record<string, RawRenderResult | null>> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['previews'], 'readonly')
-    const store = transaction.objectStore('previews')
-    const results: Record<string, RawRenderResult | null> = {}
-
-    return new Promise((resolve, _reject) => {
-      let completedRequests = 0
-
-      if (keys.length === 0) {
-        resolve(results)
-        return
-      }
-
-      for (const key of keys) {
-        const request = store.get(key)
-
-        request.onsuccess = () => {
-          const result = request.result as StoredPreview | undefined
-
-          if (result) {
-            results[key] = { forwards: result.forwards, backwards: result.backwards }
-          } else {
-            results[key] = null
-          }
-
-          completedRequests++
-          if (completedRequests === keys.length) {
-            resolve(results)
-          }
-        }
-
-        request.onerror = () => {
-          results[key] = null
-          completedRequests++
-          if (completedRequests === keys.length) {
-            resolve(results)
-          }
-        }
-      }
-    })
-  }
-
   async cleanupInvalidKeys(validKeys: Set<string>): Promise<number> {
     if (!this.db) await this.init()
 
@@ -152,67 +113,6 @@ export class SkinPreviewStorage {
       request.onerror = () => reject(request.error)
     })
   }
-
-  async debugCalculateStorage(): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['previews'], 'readonly')
-    const store = transaction.objectStore('previews')
-
-    let totalSize = 0
-    let count = 0
-    const entries: Array<{ key: string; size: number }> = []
-
-    return new Promise((resolve, reject) => {
-      const request = store.openCursor()
-
-      request.onsuccess = (event) => {
-        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
-
-        if (cursor) {
-          const key = cursor.primaryKey as string
-          const value = cursor.value as StoredPreview
-
-          const entrySize = value.forwards.size + value.backwards.size
-          totalSize += entrySize
-          count++
-
-          entries.push({
-            key,
-            size: entrySize,
-          })
-
-          cursor.continue()
-        } else {
-          console.group('🗄️ Skin Preview Storage Debug Info')
-          console.log(`Total entries: ${count}`)
-          console.log(`Total size: ${(totalSize / 1024 / 1024).toFixed(2)} MB`)
-          console.log(
-            `Average size per entry: ${count > 0 ? (totalSize / count / 1024).toFixed(2) : 0} KB`,
-          )
-
-          if (entries.length > 0) {
-            const sortedEntries = entries.sort((a, b) => b.size - a.size)
-            console.log(
-              'Largest entry:',
-              sortedEntries[0].key,
-              '(' + (sortedEntries[0].size / 1024).toFixed(2) + ' KB)',
-            )
-            console.log(
-              'Smallest entry:',
-              sortedEntries[sortedEntries.length - 1].key,
-              '(' + (sortedEntries[sortedEntries.length - 1].size / 1024).toFixed(2) + ' KB)',
-            )
-          }
-
-          console.groupEnd()
-          resolve()
-        }
-      }
-
-      request.onerror = () => reject(request.error)
-    })
-  }
 }
 
 export const skinPreviewStorage = new SkinPreviewStorage()

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

@@ -51,7 +51,6 @@ export type ServerStatus = {
   version?: {
     name: string
     protocol: number
-    legacy: boolean
   }
   favicon?: string
   enforces_secure_chat: boolean
@@ -71,17 +70,11 @@ export interface Chat {
 
 export type ServerData = {
   refreshing: boolean
-  lastSuccessfulRefresh?: number
   status?: ServerStatus
   rawMotd?: string | Chat
   renderedMotd?: string
 }
 
-export type ProtocolVersion = {
-  version: number
-  legacy: boolean
-}
-
 export async function get_recent_worlds(
   limit: number,
   displayStatuses?: DisplayStatus[],
@@ -163,13 +156,13 @@ export async function remove_server_from_profile(path: string, index: number): P
   return await invoke('plugin:worlds|remove_server_from_profile', { path, index })
 }
 
-export async function get_profile_protocol_version(path: string): Promise<ProtocolVersion | null> {
+export async function get_profile_protocol_version(path: string): Promise<number | null> {
   return await invoke('plugin:worlds|get_profile_protocol_version', { path })
 }
 
 export async function get_server_status(
   address: string,
-  protocolVersion: ProtocolVersion | null = null,
+  protocolVersion: number | null = null,
 ): Promise<ServerStatus> {
   return await invoke('plugin:worlds|get_server_status', { address, protocolVersion })
 }
@@ -213,39 +206,30 @@ export function isServerWorld(world: World): world is ServerWorld {
 
 export async function refreshServerData(
   serverData: ServerData,
-  protocolVersion: ProtocolVersion | null,
+  protocolVersion: number | null,
   address: string,
 ): Promise<void> {
-  const refreshTime = Date.now()
   serverData.refreshing = true
   await get_server_status(address, protocolVersion)
     .then((status) => {
-      if (serverData.lastSuccessfulRefresh && serverData.lastSuccessfulRefresh > refreshTime) {
-        // Don't update if there was a more recent successful refresh
-        return
-      }
-      serverData.lastSuccessfulRefresh = Date.now()
       serverData.status = status
       if (status.description) {
         serverData.rawMotd = status.description
         serverData.renderedMotd = autoToHTML(status.description)
       }
     })
+    .catch((err) => {
+      console.error(`Refreshing addr: ${address}`, err)
+    })
     .finally(() => {
       serverData.refreshing = false
     })
-    .catch((err) => {
-      console.error(`Refreshing addr ${address}`, protocolVersion, err)
-      if (!protocolVersion?.legacy) {
-        refreshServerData(serverData, { version: 74, legacy: true }, address)
-      }
-    })
 }
 
-export function refreshServers(
+export async function refreshServers(
   worlds: World[],
   serverData: Record<string, ServerData>,
-  protocolVersion: ProtocolVersion | null,
+  protocolVersion: number | null,
 ) {
   const servers = worlds.filter(isServerWorld)
   servers.forEach((server) => {
@@ -259,8 +243,10 @@ export function refreshServers(
   })
 
   // noinspection ES6MissingAwait - handled with .then by refreshServerData already
-  Object.keys(serverData).forEach((address) =>
+  Promise.all(
-    refreshServerData(serverData[address], protocolVersion, address),
+    Object.keys(serverData).map((address) =>
+      refreshServerData(serverData[address], protocolVersion, address),
+    ),
   )
 }
 
@@ -311,24 +297,15 @@ export async function refreshWorlds(instancePath: string): Promise<World[]> {
   return worlds ?? []
 }
 
-export function hasServerQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
+const FIRST_QUICK_PLAY_VERSION = '23w14a'
-  if (!gameVersions.length) {
-    return true
-  }
 
-  const versionIndex = gameVersions.findIndex((v) => v.version === currentVersion)
+export function hasQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
-  const targetIndex = gameVersions.findIndex((v) => v.version === 'a1.0.5_01')
-
-  return versionIndex === -1 || targetIndex === -1 || versionIndex <= targetIndex
-}
-
-export function hasWorldQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
   if (!gameVersions.length) {
     return false
   }
 
   const versionIndex = gameVersions.findIndex((v) => v.version === currentVersion)
-  const targetIndex = gameVersions.findIndex((v) => v.version === '23w14a')
+  const targetIndex = gameVersions.findIndex((v) => v.version === FIRST_QUICK_PLAY_VERSION)
 
   return versionIndex !== -1 && targetIndex !== -1 && versionIndex <= targetIndex
 }

apps/app-frontend/src/locales/en-US/index.json

@@ -377,17 +377,11 @@
   "instance.worlds.hardcore": {
     "message": "Hardcore mode"
   },
-  "instance.worlds.incompatible_server": {
+  "instance.worlds.no_quick_play": {
-    "message": "Server is incompatible"
+    "message": "You can only jump straight into worlds on Minecraft 1.20+"
   },
-  "instance.worlds.no_contact": {
+  "instance.worlds.play_anyway": {
-    "message": "Server couldn't be contacted"
+    "message": "Play anyway"
-  },
-  "instance.worlds.no_server_quick_play": {
-    "message": "You can only jump straight into servers on Minecraft Alpha 1.0.5+"
-  },
-  "instance.worlds.no_singleplayer_quick_play": {
-    "message": "You can only jump straight into singleplayer worlds on Minecraft 1.20+"
   },
   "instance.worlds.play_instance": {
     "message": "Play instance"

apps/app-frontend/src/main.js

@@ -1,12 +1,12 @@
-import App from '@/App.vue'
+import { createApp } from 'vue'
 import router from '@/routes'
-import * as Sentry from '@sentry/vue'
+import App from '@/App.vue'
-import { VueScanPlugin } from '@taijased/vue-render-tracker'
+import { createPinia } from 'pinia'
-import { createPlugin } from '@vintl/vintl/plugin'
 import FloatingVue from 'floating-vue'
 import 'floating-vue/dist/style.css'
-import { createPinia } from 'pinia'
+import { createPlugin } from '@vintl/vintl/plugin'
-import { createApp } from 'vue'
+import * as Sentry from '@sentry/vue'
+import { VueScanPlugin } from '@taijased/vue-render-tracker'
 
 const VIntlPlugin = createPlugin({
   controllerOpts: {

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

@@ -1,34 +1,33 @@
 <script setup lang="ts">
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
-import type Instance from '@/components/ui/Instance.vue'
+import type { Ref } from 'vue'
-import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import { SearchIcon, XIcon, ClipboardCopyIcon, GlobeIcon, ExternalIcon } from '@modrinth/assets'
-import NavTabs from '@/components/ui/NavTabs.vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
-import { get_search_results } from '@/helpers/cache.js'
-import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile.js'
-import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { ClipboardCopyIcon, ExternalIcon, GlobeIcon, SearchIcon, XIcon } from '@modrinth/assets'
 import type { Category, GameVersion, Platform, ProjectType, SortType, Tags } from '@modrinth/ui'
 import {
+  SearchFilterControl,
+  SearchSidebarFilter,
   Button,
   Checkbox,
   DropdownSelect,
-  injectNotificationManager,
   LoadingIndicator,
   Pagination,
-  SearchFilterControl,
-  SearchSidebarFilter,
   useSearch,
 } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
+import { handleError } from '@/store/state'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
-import type { Ref } from 'vue'
+import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
-import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
+import SearchCard from '@/components/ui/SearchCard.vue'
+import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile.js'
+import { get_search_results } from '@/helpers/cache.js'
+import NavTabs from '@/components/ui/NavTabs.vue'
+import type Instance from '@/components/ui/Instance.vue'
+import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
-const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const router = useRouter()
@@ -221,7 +220,7 @@ async function refreshSearch() {
     }
   }
   results.value = rawResults.result
-  currentPage.value = 1
+  currentPage.value = Math.max(1, Math.min(pageCount.value, currentPage.value))
 
   const persistentParams: LocationQuery = {}
 
@@ -267,7 +266,6 @@ async function onSearchChangeToTop() {
 
 function clearSearch() {
   query.value = ''
-  currentPage.value = 1
 }
 
 watch(

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

@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import RowDisplay from '@/components/RowDisplay.vue'
+import { ref, onUnmounted, computed } from 'vue'
-import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
-import { get_search_results } from '@/helpers/cache.js'
-import { profile_listener } from '@/helpers/events'
-import { list } from '@/helpers/profile.js'
-import type { GameInstance } from '@/helpers/types'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { injectNotificationManager } from '@modrinth/ui'
-import type { SearchResult } from '@modrinth/utils'
-import dayjs from 'dayjs'
-import { computed, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import RowDisplay from '@/components/RowDisplay.vue'
+import { list } from '@/helpers/profile.js'
+import { profile_listener } from '@/helpers/events'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { handleError } from '@/store/notifications.js'
+import dayjs from 'dayjs'
+import { get_search_results } from '@/helpers/cache.js'
+import type { SearchResult } from '@modrinth/utils'
+import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
+import type { GameInstance } from '@/helpers/types'
 
-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 type AccountsCard from '@/components/ui/AccountsCard.vue'
-import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
-import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { get_default_user, login as login_flow, users } from '@/helpers/auth'
-import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { generateSkinPreviews, skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { get as getSettings } from '@/helpers/settings.ts'
-import type { Cape, Skin } from '@/helpers/skins.ts'
-import {
-  equip_skin,
-  filterDefaultSkins,
-  filterSavedSkins,
-  get_available_capes,
-  get_available_skins,
-  get_normalized_skin_texture,
-  normalize_skin_texture,
-  remove_custom_skin,
-  set_default_cape,
-} from '@/helpers/skins.ts'
-import { handleSevereError } from '@/store/error'
 import {
   EditIcon,
   ExcitedRinthbot,
@@ -34,21 +12,42 @@ import {
   Button,
   ButtonStyled,
   ConfirmModal,
-  injectNotificationManager,
   SkinButton,
   SkinLikeTextButton,
   SkinPreviewRenderer,
 } from '@modrinth/ui'
-import { arrayBufferToBase64 } from '@modrinth/utils'
 import { computedAsync } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
+import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
+import { handleError, useNotifications } from '@/store/notifications'
+import type { Cape, Skin } from '@/helpers/skins.ts'
+import {
+  normalize_skin_texture,
+  equip_skin,
+  filterDefaultSkins,
+  filterSavedSkins,
+  get_available_capes,
+  get_available_skins,
+  get_normalized_skin_texture,
+  remove_custom_skin,
+  set_default_cape,
+} from '@/helpers/skins.ts'
+import { get as getSettings } from '@/helpers/settings.ts'
+import { get_default_user, login as login_flow, users } from '@/helpers/auth'
+import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { generateSkinPreviews, map } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { handleSevereError } from '@/store/error'
+import { trackEvent } from '@/helpers/analytics'
+import type AccountsCard from '@/components/ui/AccountsCard.vue'
+import { arrayBufferToBase64 } from '@modrinth/utils'
 const editSkinModal = useTemplateRef('editSkinModal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
 const uploadSkinModal = useTemplateRef('uploadSkinModal')
 
-const notifications = injectNotificationManager()
+const notifications = useNotifications()
-const { handleError } = notifications
 
 const settings = ref(await getSettings())
 const skins = ref<Skin[]>([])
@@ -114,7 +113,7 @@ async function loadCapes() {
     defaultCape.value = capes.value.find((c) => c.is_equipped)
     originalDefaultCape.value = defaultCape.value
   } catch (error) {
-    if (currentUser.value && error instanceof Error) {
+    if (currentUser.value) {
       handleError(error)
     }
   }
@@ -127,7 +126,7 @@ async function loadSkins() {
     selectedSkin.value = skins.value.find((s) => s.is_equipped) ?? null
     originalSelectedSkin.value = selectedSkin.value
   } catch (error) {
-    if (currentUser.value && error instanceof Error) {
+    if (currentUser.value) {
       handleError(error)
     }
   }
@@ -162,7 +161,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 as Error)
+      handleError(error)
     }
   }
 }
@@ -191,7 +190,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 as Error)
+      handleError(error)
     }
   }
 }
@@ -208,7 +207,7 @@ async function loadCurrentUser() {
     const allAccounts = await users()
     currentUser.value = allAccounts.find((acc) => acc.profile.id === defaultId)
   } catch (e) {
-    handleError(e as Error)
+    handleError(e)
     currentUser.value = undefined
     currentUserId.value = undefined
   }
@@ -216,7 +215,7 @@ async function loadCurrentUser() {
 
 function getBakedSkinTextures(skin: Skin): RenderResult | undefined {
   const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
-  return skinBlobUrlMap.get(key)
+  return map.get(key)
 }
 
 async function login() {
@@ -277,7 +276,7 @@ async function checkUserChanges() {
       await loadSkins()
     }
   } catch (error) {
-    if (currentUser.value && error instanceof Error) {
+    if (currentUser.value) {
       handleError(error)
     }
   }
@@ -377,7 +376,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
                 color="green"
                 aria-label="Edit skin"
                 class="pointer-events-auto"
-                @click.stop="(e: MouseEvent) => editSkinModal?.show(e, skin)"
+                @click.stop="(e) => editSkinModal?.show(e, skin)"
               >
                 <EditIcon /> Edit
               </Button>

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

@@ -157,18 +157,13 @@
   </div>
 </template>
 <script setup>
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+import {
-import ExportModal from '@/components/ui/ExportModal.vue'
+  Avatar,
-import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
+  ButtonStyled,
-import NavTabs from '@/components/ui/NavTabs.vue'
+  ContentPageHeader,
-import { trackEvent } from '@/helpers/analytics'
+  LoadingIndicator,
-import { get_project, get_version_many } from '@/helpers/cache.js'
+  OverflowMenu,
-import { process_listener, profile_listener } from '@/helpers/events'
+} from '@modrinth/ui'
-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,
@@ -192,25 +187,28 @@ import {
   UserPlusIcon,
   XIcon,
 } from '@modrinth/assets'
-import {
+import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
-  Avatar,
+import { get_by_profile_path } from '@/helpers/process'
-  ButtonStyled,
+import { process_listener, profile_listener } from '@/helpers/events'
-  ContentPageHeader,
+import { useRoute, useRouter } from 'vue-router'
-  injectNotificationManager,
+import { computed, onUnmounted, ref, watch } from 'vue'
-  LoadingIndicator,
+import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
-  OverflowMenu,
+import { showProfileInFolder } from '@/helpers/utils.js'
-} from '@modrinth/ui'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import NavTabs from '@/components/ui/NavTabs.vue'
+import { trackEvent } from '@/helpers/analytics'
 import { convertFileSrc } from '@tauri-apps/api/core'
+import { handleSevereError } from '@/store/error.js'
+import { get_project, get_version_many } from '@/helpers/cache.js'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import ExportModal from '@/components/ui/ExportModal.vue'
-import { useRoute, useRouter } from 'vue-router'
+import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
-const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const router = useRouter()

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

@@ -88,30 +88,30 @@
 </template>
 
 <script setup>
-import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
+import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
-import { process_listener } from '@/helpers/events.js'
+import { Button, Card, Checkbox, DropdownSelect } from '@modrinth/ui'
 import {
   delete_logs_by_filename,
-  get_latest_log_cursor,
   get_logs,
   get_output_by_filename,
+  get_latest_log_cursor,
 } from '@/helpers/logs.js'
-import { get_by_profile_path } from '@/helpers/process.js'
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
-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 { get_by_profile_path } from '@/helpers/process.js'
-import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { process_listener } from '@/helpers/events.js'
+import { handleError } from '@/store/notifications.js'
+import { ofetch } from 'ofetch'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 
 dayjs.extend(isToday)
 dayjs.extend(isYesterday)
 
-const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const props = defineProps({
@@ -483,7 +483,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  height: 100vh;
+  height: calc(100vh - 11rem);
 }
 
 .button-row {

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

@@ -249,30 +249,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import { TextInputIcon } from '@/assets/icons'
-import AddContentButton from '@/components/ui/AddContentButton.vue'
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
-import ExportModal from '@/components/ui/ExportModal.vue'
-import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
-import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
-import { trackEvent } from '@/helpers/analytics'
-import {
-  get_organization_many,
-  get_project_many,
-  get_team_many,
-  get_version_many,
-} from '@/helpers/cache.js'
-import { profile_listener } from '@/helpers/events.js'
-import {
-  add_project_from_path,
-  get_projects,
-  remove_project,
-  toggle_disable_project,
-  update_all,
-  update_project,
-} from '@/helpers/profile.js'
-import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
-import { highlightModInProfile } from '@/helpers/utils.js'
 import {
   CheckCircleIcon,
   ClipboardCopyIcon,
@@ -295,22 +271,44 @@ import {
   Button,
   ButtonStyled,
   ContentListPanel,
-  injectNotificationManager,
   OverflowMenu,
   Pagination,
   RadialHeader,
   Toggle,
 } from '@modrinth/ui'
-import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'
 import type { Organization, Project, TeamMember, Version } from '@modrinth/utils'
 import { formatProjectType } from '@modrinth/utils'
-import { getCurrentWebview } from '@tauri-apps/api/webview'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import dayjs from 'dayjs'
 import type { ComputedRef } from 'vue'
 import { computed, onUnmounted, ref, watch } from 'vue'
-
+import { defineMessages, useVIntl } from '@vintl/vintl'
-const { handleError } = injectNotificationManager()
+import {
+  add_project_from_path,
+  get_projects,
+  remove_project,
+  toggle_disable_project,
+  update_all,
+  update_project,
+} from '@/helpers/profile.js'
+import { handleError } from '@/store/notifications.js'
+import { trackEvent } from '@/helpers/analytics'
+import { highlightModInProfile } from '@/helpers/utils.js'
+import { TextInputIcon } from '@/assets/icons'
+import ExportModal from '@/components/ui/ExportModal.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import AddContentButton from '@/components/ui/AddContentButton.vue'
+import {
+  get_organization_many,
+  get_project_many,
+  get_team_many,
+  get_version_many,
+} from '@/helpers/cache.js'
+import { profile_listener } from '@/helpers/events.js'
+import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import dayjs from 'dayjs'
+import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'
 
 const props = defineProps<{
   instance: GameInstance

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

@@ -67,8 +67,7 @@
         :key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
         :world="world"
         :highlighted="highlightedWorld === getWorldIdentifier(world)"
-        :supports-server-quick-play="supportsServerQuickPlay"
+        :supports-quick-play="supportsQuickPlay"
-        :supports-world-quick-play="supportsWorldQuickPlay"
         :current-protocol="protocolVersion"
         :playing-instance="playing"
         :playing-world="worldsMatch(world, worldPlaying)"
@@ -121,55 +120,53 @@
   </div>
 </template>
 <script setup lang="ts">
-import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import { ref, computed, onUnmounted, watch } from 'vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { useRoute } from 'vue-router'
+import type { GameInstance } from '@/helpers/types'
+import {
+  Button,
+  ButtonStyled,
+  RadialHeader,
+  FilterBar,
+  type FilterBarOption,
+  type GameVersion,
+  GAME_MODES,
+} from '@modrinth/ui'
+import { PlusIcon, SpinnerIcon, UpdatedIcon, SearchIcon, XIcon } from '@modrinth/assets'
+import {
+  type SingleplayerWorld,
+  type World,
+  type ServerWorld,
+  type ServerData,
+  type ProfileEvent,
+  get_profile_protocol_version,
+  remove_server_from_profile,
+  delete_world,
+  start_join_server,
+  start_join_singleplayer_world,
+  getWorldIdentifier,
+  refreshServerData,
+  refreshWorld,
+  sortWorlds,
+  refreshServers,
+  hasQuickPlaySupport,
+  refreshWorlds,
+  handleDefaultProfileUpdateEvent,
+  showWorldInFolder,
+} from '@/helpers/worlds.ts'
 import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
 import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
 import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
+
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { handleError } from '@/store/notifications'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { Version } from '@modrinth/utils'
 import { profile_listener } from '@/helpers/events'
 import { get_game_versions } from '@/helpers/tags'
-import type { GameInstance } from '@/helpers/types'
-import {
-  type ProfileEvent,
-  type ProtocolVersion,
-  type ServerData,
-  type ServerWorld,
-  type SingleplayerWorld,
-  type World,
-  delete_world,
-  getWorldIdentifier,
-  get_profile_protocol_version,
-  handleDefaultProfileUpdateEvent,
-  hasServerQuickPlaySupport,
-  hasWorldQuickPlaySupport,
-  refreshServerData,
-  refreshServers,
-  refreshWorld,
-  refreshWorlds,
-  remove_server_from_profile,
-  showWorldInFolder,
-  sortWorlds,
-  start_join_server,
-  start_join_singleplayer_world,
-} from '@/helpers/worlds.ts'
-import { PlusIcon, SearchIcon, SpinnerIcon, UpdatedIcon, XIcon } from '@modrinth/assets'
-import {
-  Button,
-  ButtonStyled,
-  FilterBar,
-  type FilterBarOption,
-  GAME_MODES,
-  type GameVersion,
-  RadialHeader,
-  injectNotificationManager,
-} from '@modrinth/ui'
-import type { Version } from '@modrinth/utils'
 import { defineMessages } from '@vintl/vintl'
-import { computed, onUnmounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
 
-const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const addServerModal = ref<InstanceType<typeof AddServerModal>>()
@@ -213,9 +210,7 @@ const worldPlaying = ref<World>()
 const worlds = ref<World[]>([])
 const serverData = ref<Record<string, ServerData>>({})
 
-const protocolVersion = ref<ProtocolVersion | null>(
+const protocolVersion = ref<number | null>(await get_profile_protocol_version(instance.value.path))
-  await get_profile_protocol_version(instance.value.path),
-)
 
 const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
   if (e.profile_path_id !== instance.value.path) return
@@ -251,7 +246,7 @@ async function refreshAllWorlds() {
   worlds.value = await refreshWorlds(instance.value.path).finally(
     () => (refreshingAll.value = false),
   )
-  refreshServers(worlds.value, serverData.value, protocolVersion.value)
+  await refreshServers(worlds.value, serverData.value, protocolVersion.value)
 
   const hasNoWorlds = worlds.value.length === 0
 
@@ -282,7 +277,7 @@ async function editServer(server: ServerWorld) {
       await refreshServer(server.address)
     }
   } else {
-    handleError(new Error(`Error refreshing server, refreshing all worlds`))
+    handleError(`Error refreshing server, refreshing all worlds`)
     await refreshAllWorlds()
   }
 }
@@ -301,7 +296,7 @@ async function editWorld(path: string, name: string, removeIcon: boolean) {
     }
     sortWorlds(worlds.value)
   } else {
-    handleError(new Error(`Error finding world in list, refreshing all worlds`))
+    handleError(`Error finding world in list, refreshing all worlds`)
     await refreshAllWorlds()
   }
 }
@@ -311,7 +306,7 @@ async function deleteWorld(world: SingleplayerWorld) {
   worlds.value = worlds.value.filter((w) => w.type !== 'singleplayer' || w.path !== world.path)
 }
 
-function handleJoinError(err: Error) {
+function handleJoinError(err: unknown) {
   handleError(err)
   startingInstance.value = false
   worldPlaying.value = undefined
@@ -357,11 +352,8 @@ function worldsMatch(world: World, other: World | undefined) {
 }
 
 const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
-const supportsServerQuickPlay = computed(() =>
+const supportsQuickPlay = computed(() =>
-  hasServerQuickPlaySupport(gameVersions.value, instance.value.game_version),
+  hasQuickPlaySupport(gameVersions.value, instance.value.game_version),
-)
-const supportsWorldQuickPlay = computed(() =>
-  hasWorldQuickPlaySupport(gameVersions.value, instance.value.game_version),
 )
 
 const filterOptions = computed(() => {
@@ -436,7 +428,7 @@ function promptToRemoveWorld(world: World): boolean {
 
 async function proceedRemoveServer() {
   if (!serverToRemove.value) {
-    handleError(new Error(`Error removing server, no server marked for removal.`))
+    handleError(`Error removing server, no server marked for removal.`)
     return
   }
   await removeServer(serverToRemove.value)
@@ -445,7 +437,7 @@ async function proceedRemoveServer() {
 
 async function proceedDeleteWorld() {
   if (!worldToDelete.value) {
-    handleError(new Error(`Error deleting world, no world marked for removal.`))
+    handleError(`Error deleting world, no world marked for removal.`)
     return
   }
   await deleteWorld(worldToDelete.value)

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

@@ -1,16 +1,16 @@
 <script setup>
-import { NewInstanceImage } from '@/assets/icons'
-import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import NavTabs from '@/components/ui/NavTabs.vue'
-import { profile_listener } from '@/helpers/events.js'
-import { list } from '@/helpers/profile.js'
-import { useBreadcrumbs } from '@/store/breadcrumbs.js'
-import { PlusIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
 import { onUnmounted, ref, shallowRef } from 'vue'
+import { list } from '@/helpers/profile.js'
 import { useRoute } from 'vue-router'
+import { useBreadcrumbs } from '@/store/breadcrumbs.js'
+import { profile_listener } from '@/helpers/events.js'
+import { handleError } from '@/store/notifications.js'
+import { Button } from '@modrinth/ui'
+import { PlusIcon } from '@modrinth/assets'
+import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
+import { NewInstanceImage } from '@/assets/icons'
+import NavTabs from '@/components/ui/NavTabs.vue'
 
-const { handleError } = injectNotificationManager()
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 

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

@@ -129,46 +129,46 @@
 </template>
 
 <script setup>
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import NavTabs from '@/components/ui/NavTabs.vue'
-import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
-import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
-import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { install as installVersion } from '@/store/install.js'
-import { useTheming } from '@/store/state.js'
 import {
   BookmarkIcon,
-  CheckIcon,
-  ClipboardCopyIcon,
-  DownloadIcon,
-  ExternalIcon,
-  GlobeIcon,
-  HeartIcon,
   MoreVerticalIcon,
+  DownloadIcon,
   ReportIcon,
+  HeartIcon,
+  ExternalIcon,
+  CheckIcon,
+  GlobeIcon,
+  ClipboardCopyIcon,
 } from '@modrinth/assets'
 import {
-  ButtonStyled,
-  OverflowMenu,
-  ProjectBackgroundGradient,
   ProjectHeader,
   ProjectSidebarCompatibility,
+  ButtonStyled,
+  OverflowMenu,
+  ProjectSidebarLinks,
   ProjectSidebarCreators,
   ProjectSidebarDetails,
-  ProjectSidebarLinks,
+  ProjectBackgroundGradient,
-  injectNotificationManager,
 } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
+
+import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
+import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { ref, shallowRef, watch } from 'vue'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { handleError } from '@/store/notifications.js'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import { install as installVersion } from '@/store/install.js'
+import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
+import NavTabs from '@/components/ui/NavTabs.vue'
+import { useTheming } from '@/store/state.js'
+import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 dayjs.extend(relativeTime)
 
-const { handleError } = injectNotificationManager()
 const route = useRoute()
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()

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

@@ -65,16 +65,12 @@
 </template>
 
 <script setup>
+import { ProjectPageVersions, ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import { CheckIcon, DownloadIcon, ExternalIcon, MoreVerticalIcon } from '@modrinth/assets'
+import { ref } from 'vue'
 import { SwapIcon } from '@/assets/icons/index.js'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
-import { CheckIcon, DownloadIcon, ExternalIcon, MoreVerticalIcon } from '@modrinth/assets'
+import { handleError } from '@/store/notifications.js'
-import {
-  ButtonStyled,
-  OverflowMenu,
-  ProjectPageVersions,
-  injectNotificationManager,
-} from '@modrinth/ui'
-import { ref } from 'vue'
 
 defineProps({
   project: {
@@ -107,8 +103,6 @@ defineProps({
   },
 })
 
-const { handleError } = injectNotificationManager()
-
 const [loaders, gameVersions] = await Promise.all([
   get_loaders().catch(handleError).then(ref),
   get_game_versions().catch(handleError).then(ref),

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

@@ -1,48 +0,0 @@
-import {
-  AbstractWebNotificationManager,
-  type NotificationPanelLocation,
-  type WebNotification,
-} from '@modrinth/ui'
-import { ref, type Ref } from 'vue'
-
-export class AppNotificationManager extends AbstractWebNotificationManager {
-  private readonly state: Ref<WebNotification[]>
-  private readonly locationState: Ref<NotificationPanelLocation>
-
-  public constructor() {
-    super()
-    this.state = ref<WebNotification[]>([])
-    this.locationState = ref<NotificationPanelLocation>('right')
-  }
-
-  public getNotificationLocation(): NotificationPanelLocation {
-    return this.locationState.value
-  }
-
-  public setNotificationLocation(location: NotificationPanelLocation): void {
-    this.locationState.value = location
-  }
-
-  public getNotifications(): WebNotification[] {
-    return this.state.value
-  }
-
-  protected addNotificationToStorage(notification: WebNotification): void {
-    this.state.value.push(notification)
-  }
-
-  protected removeNotificationFromStorage(id: string | number): void {
-    const index = this.state.value.findIndex((n) => n.id === id)
-    if (index > -1) {
-      this.state.value.splice(index, 1)
-    }
-  }
-
-  protected removeNotificationFromStorageByIndex(index: number): void {
-    this.state.value.splice(index, 1)
-  }
-
-  protected clearAllNotificationsFromStorage(): void {
-    this.state.value.splice(0)
-  }
-}

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

@@ -1,6 +1,4 @@
-import { trackEvent } from '@/helpers/analytics.js'
+import { defineStore } from 'pinia'
-import { get_project, get_version_many } from '@/helpers/cache.js'
-import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
 import {
   add_project_from_version,
   check_installed,
@@ -9,9 +7,11 @@ import {
   list,
   remove_project,
 } from '@/helpers/profile.js'
-import { injectNotificationManager } from '@modrinth/ui'
+import { handleError } from '@/store/notifications.js'
+import { get_project, get_version_many } from '@/helpers/cache.js'
+import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
+import { trackEvent } from '@/helpers/analytics.js'
 import dayjs from 'dayjs'
-import { defineStore } from 'pinia'
 
 export const useInstall = defineStore('installStore', {
   state: () => ({
@@ -49,7 +49,6 @@ export const install = async (
   callback = () => {},
   createInstanceCallback = () => {},
 ) => {
-  const { handleError } = injectNotificationManager()
   const project = await get_project(projectId, 'must_revalidate').catch(handleError)
 
   if (project.project_type === 'modpack') {
@@ -161,7 +160,6 @@ 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

@@ -0,0 +1,25 @@
+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,6 +1,7 @@
-import { useBreadcrumbs } from './breadcrumbs'
-import { useInstall } from './install'
-import { useLoading } from './loading'
 import { useTheming } from './theme.ts'
+import { useBreadcrumbs } from './breadcrumbs'
+import { useLoading } from './loading'
+import { useNotifications, handleError } from './notifications'
+import { useInstall } from './install'
 
-export { useBreadcrumbs, useInstall, useLoading, useTheming }
+export { useTheming, useBreadcrumbs, useLoading, useNotifications, handleError, useInstall }

apps/app-playground/src/main.rs

@@ -15,7 +15,7 @@ pub async fn authenticate_run() -> theseus::Result<Credentials> {
     println!("A browser window will now open, follow the login flow there.");
     let login = minecraft_auth::begin_login().await?;
 
-    println!("Open URL {} in a browser", login.auth_request_uri.as_str());
+    println!("Open URL {} in a browser", login.redirect_uri.as_str());
 
     println!("Please enter URL code: ");
     let mut input = String::new();

apps/app/Cargo.toml

@@ -31,8 +31,6 @@ thiserror.workspace = true
 daedalus.workspace = true
 chrono.workspace = true
 either.workspace = true
-hyper = { workspace = true, features = ["server"] }
-hyper-util.workspace = true
 
 url.workspace = true
 urlencoding.workspace = true

apps/app/build.rs

@@ -120,12 +120,7 @@ fn main() {
             .plugin(
                 "mr-auth",
                 InlinedPlugin::new()
-                    .commands(&[
+                    .commands(&["modrinth_login", "logout", "get"])
-                        "modrinth_login",
-                        "logout",
-                        "get",
-                        "cancel_modrinth_login",
-                    ])
                     .default_permission(
                         DefaultPermissionRule::AllowAllCommands,
                     ),

apps/app/src/api/auth.rs

@@ -33,7 +33,7 @@ pub async fn login<R: Runtime>(
     let window = tauri::WebviewWindowBuilder::new(
         &app,
         "signin",
-        tauri::WebviewUrl::External(flow.auth_request_uri.parse().map_err(
+        tauri::WebviewUrl::External(flow.redirect_uri.parse().map_err(
             |_| {
                 theseus::ErrorKind::OtherError(
                     "Error parsing auth redirect URL".to_string(),
@@ -77,7 +77,6 @@ pub async fn login<R: Runtime>(
     window.close()?;
     Ok(None)
 }
-
 #[tauri::command]
 pub async fn remove_user(user: uuid::Uuid) -> Result<()> {
     Ok(minecraft_auth::remove_user(user).await?)

apps/app/src/api/mod.rs

@@ -22,8 +22,6 @@ pub mod cache;
 pub mod friends;
 pub mod worlds;
 
-mod oauth_utils;
-
 pub type Result<T> = std::result::Result<T, TheseusSerializableError>;
 
 // // Main returnable Theseus GUI error

apps/app/src/api/mr_auth.rs

@@ -1,70 +1,79 @@
 use crate::api::Result;
-use crate::api::TheseusSerializableError;
+use chrono::{Duration, Utc};
-use crate::api::oauth_utils;
-use tauri::Manager;
-use tauri::Runtime;
 use tauri::plugin::TauriPlugin;
-use tauri_plugin_opener::OpenerExt;
+use tauri::{Manager, Runtime, UserAttentionType};
 use theseus::prelude::*;
-use tokio::sync::oneshot;
 
 pub fn init<R: tauri::Runtime>() -> TauriPlugin<R> {
     tauri::plugin::Builder::new("mr-auth")
-        .invoke_handler(tauri::generate_handler![
+        .invoke_handler(tauri::generate_handler![modrinth_login, logout, get,])
-            modrinth_login,
-            logout,
-            get,
-            cancel_modrinth_login,
-        ])
         .build()
 }
 
 #[tauri::command]
 pub async fn modrinth_login<R: Runtime>(
     app: tauri::AppHandle<R>,
-) -> Result<ModrinthCredentials> {
+) -> Result<Option<ModrinthCredentials>> {
-    let (auth_code_recv_socket_tx, auth_code_recv_socket) = oneshot::channel();
+    let redirect_uri = mr_auth::authenticate_begin_flow();
-    let auth_code = tokio::spawn(oauth_utils::auth_code_reply::listen(
-        auth_code_recv_socket_tx,
-    ));
 
-    let auth_code_recv_socket = auth_code_recv_socket.await.unwrap()?;
+    let start = Utc::now();
 
-    let auth_request_uri = format!(
+    if let Some(window) = app.get_webview_window("modrinth-signin") {
-        "{}?launcher=true&ipver={}&port={}",
+        window.close()?;
-        mr_auth::authenticate_begin_flow(),
-        if auth_code_recv_socket.is_ipv4() {
-            "4"
-        } else {
-            "6"
-        },
-        auth_code_recv_socket.port()
-    );
-
-    app.opener()
-        .open_url(auth_request_uri, None::<&str>)
-        .map_err(|e| {
-            TheseusSerializableError::Theseus(
-                theseus::ErrorKind::OtherError(format!(
-                    "Failed to open auth request URI: {e}"
-                ))
-                .into(),
-            )
-        })?;
-
-    let Some(auth_code) = auth_code.await.unwrap()? else {
-        return Err(TheseusSerializableError::Theseus(
-            theseus::ErrorKind::OtherError("Login canceled".into()).into(),
-        ));
-    };
-
-    let credentials = mr_auth::authenticate_finish_flow(&auth_code).await?;
-
-    if let Some(main_window) = app.get_window("main") {
-        main_window.set_focus().ok();
     }
 
-    Ok(credentials)
+    let window = tauri::WebviewWindowBuilder::new(
+        &app,
+        "modrinth-signin",
+        tauri::WebviewUrl::External(redirect_uri.parse().map_err(|_| {
+            theseus::ErrorKind::OtherError(
+                "Error parsing auth redirect URL".to_string(),
+            )
+            .as_error()
+        })?),
+    )
+    .min_inner_size(420.0, 632.0)
+    .inner_size(420.0, 632.0)
+    .max_inner_size(420.0, 632.0)
+    .zoom_hotkeys_enabled(false)
+    .title("Sign into Modrinth")
+    .always_on_top(true)
+    .center()
+    .build()?;
+
+    window.request_user_attention(Some(UserAttentionType::Critical))?;
+
+    while (Utc::now() - start) < Duration::minutes(10) {
+        if window.title().is_err() {
+            // user closed window, cancelling flow
+            return Ok(None);
+        }
+
+        if window
+            .url()?
+            .as_str()
+            .starts_with("https://launcher-files.modrinth.com")
+        {
+            let url = window.url()?;
+
+            let code = url.query_pairs().find(|(key, _)| key == "code");
+
+            window.close()?;
+
+            return if let Some((_, code)) = code {
+                let val = mr_auth::authenticate_finish_flow(&code).await?;
+
+                Ok(Some(val))
+            } else {
+                Ok(None)
+            };
+        }
+
+        tokio::time::sleep(std::time::Duration::from_millis(50)).await;
+    }
+
+    window.close()?;
+    Ok(None)
 }
 
 #[tauri::command]
@@ -76,8 +85,3 @@ pub async fn logout() -> Result<()> {
 pub async fn get() -> Result<Option<ModrinthCredentials>> {
     Ok(theseus::mr_auth::get_credentials().await?)
 }
-
-#[tauri::command]
-pub fn cancel_modrinth_login() {
-    oauth_utils::auth_code_reply::stop_listeners();
-}

apps/app/src/api/oauth_utils/auth_code_reply.rs

@@ -1,159 +0,0 @@
-//! A minimal OAuth 2.0 authorization code grant flow redirection/reply loopback URI HTTP
-//! server implementation, compliant with [RFC 6749]'s authorization code grant flow and
-//! [RFC 8252]'s best current practices for OAuth 2.0 in native apps.
-//!
-//! This server is needed for the step 4 of the OAuth authentication dance represented in
-//! figure 1 of [RFC 8252].
-//!
-//! Further reading: https://www.oauth.com/oauth2-servers/oauth-native-apps/redirect-urls-for-native-apps/
-//!
-//! [RFC 6749]: https://datatracker.ietf.org/doc/html/rfc6749
-//! [RFC 8252]: https://datatracker.ietf.org/doc/html/rfc8252
-
-use std::{
-    net::{IpAddr, Ipv4Addr, Ipv6Addr, SocketAddr},
-    sync::{LazyLock, Mutex},
-    time::Duration,
-};
-
-use hyper::body::Incoming;
-use hyper_util::rt::{TokioIo, TokioTimer};
-use theseus::ErrorKind;
-use tokio::{
-    net::TcpListener,
-    sync::{broadcast, oneshot},
-};
-
-static SERVER_SHUTDOWN: LazyLock<broadcast::Sender<()>> =
-    LazyLock::new(|| broadcast::channel(1024).0);
-
-/// Starts a temporary HTTP server to receive OAuth 2.0 authorization code grant flow redirects
-/// on a loopback interface with an ephemeral port. The caller can know the bound socket address
-/// by listening on the counterpart channel for `listen_socket_tx`.
-///
-/// If the server is stopped before receiving an authorization code, `Ok(None)` is returned.
-pub async fn listen(
-    listen_socket_tx: oneshot::Sender<Result<SocketAddr, theseus::Error>>,
-) -> Result<Option<String>, theseus::Error> {
-    // IPv4 is tried first for the best compatibility and performance with most systems.
-    // IPv6 is also tried in case IPv4 is not available. Resolving "localhost" is avoided
-    // to prevent failures deriving from improper name resolution setup. Any available
-    // ephemeral port is used to prevent conflicts with other services. This is all as per
-    // RFC 8252's recommendations
-    const ANY_LOOPBACK_SOCKET: &[SocketAddr] = &[
-        SocketAddr::new(IpAddr::V4(Ipv4Addr::LOCALHOST), 0),
-        SocketAddr::new(IpAddr::V6(Ipv6Addr::LOCALHOST), 0),
-    ];
-
-    let listener = match TcpListener::bind(ANY_LOOPBACK_SOCKET).await {
-        Ok(listener) => {
-            listen_socket_tx
-                .send(listener.local_addr().map_err(|e| {
-                    ErrorKind::OtherError(format!(
-                        "Failed to get auth code reply socket address: {e}"
-                    ))
-                    .into()
-                }))
-                .ok();
-
-            listener
-        }
-        Err(e) => {
-            let error_msg =
-                format!("Failed to bind auth code reply socket: {e}");
-
-            listen_socket_tx
-                .send(Err(ErrorKind::OtherError(error_msg.clone()).into()))
-                .ok();
-
-            return Err(ErrorKind::OtherError(error_msg).into());
-        }
-    };
-
-    let mut auth_code = Mutex::new(None);
-    let mut shutdown_notification = SERVER_SHUTDOWN.subscribe();
-
-    while auth_code.get_mut().unwrap().is_none() {
-        let client_socket = tokio::select! {
-            biased;
-            _ = shutdown_notification.recv() => {
-                break;
-            }
-            conn_accept_result = listener.accept() => {
-                match conn_accept_result {
-                    Ok((socket, _)) => socket,
-                    Err(e) => {
-                        tracing::warn!("Failed to accept auth code reply: {e}");
-                        continue;
-                    }
-                }
-            }
-        };
-
-        if let Err(e) = hyper::server::conn::http1::Builder::new()
-            .keep_alive(false)
-            .header_read_timeout(Duration::from_secs(5))
-            .timer(TokioTimer::new())
-            .auto_date_header(false)
-            .serve_connection(
-                TokioIo::new(client_socket),
-                hyper::service::service_fn(|req| handle_reply(req, &auth_code)),
-            )
-            .await
-        {
-            tracing::warn!("Failed to handle auth code reply: {e}");
-        }
-    }
-
-    Ok(auth_code.into_inner().unwrap())
-}
-
-/// Stops any active OAuth 2.0 authorization code grant flow reply listening HTTP servers.
-pub fn stop_listeners() {
-    SERVER_SHUTDOWN.send(()).ok();
-}
-
-async fn handle_reply(
-    req: hyper::Request<Incoming>,
-    auth_code_out: &Mutex<Option<String>>,
-) -> Result<hyper::Response<String>, hyper::http::Error> {
-    if req.method() != hyper::Method::GET {
-        return hyper::Response::builder()
-            .status(hyper::StatusCode::METHOD_NOT_ALLOWED)
-            .header("Allow", "GET")
-            .body("".into());
-    }
-
-    // The authorization code is guaranteed to be sent as a "code" query parameter
-    // in the request URI query string as per RFC 6749 § 4.1.2
-    let auth_code = req.uri().query().and_then(|query_string| {
-        query_string
-            .split('&')
-            .filter_map(|query_pair| query_pair.split_once('='))
-            .find_map(|(key, value)| (key == "code").then_some(value))
-    });
-
-    let response = if let Some(auth_code) = auth_code {
-        *auth_code_out.lock().unwrap() = Some(auth_code.to_string());
-
-        hyper::Response::builder()
-            .status(hyper::StatusCode::OK)
-            .header("Content-Type", "text/html;charset=utf-8")
-            .body(
-                include_str!("auth_code_reply/page.html")
-                    .replace("{{title}}", "Success")
-                    .replace("{{message}}", "You have successfully signed in! You can close this page now."),
-            )
-    } else {
-        hyper::Response::builder()
-            .status(hyper::StatusCode::BAD_REQUEST)
-            .header("Content-Type", "text/html;charset=utf-8")
-            .body(
-                include_str!("auth_code_reply/page.html")
-                    .replace("{{title}}", "Error")
-                    .replace("{{message}}", "Authorization code not found. Please try signing in again."),
-            )
-    }?;
-
-    Ok(response)
-}

apps/app/src/api/oauth_utils/auth_code_reply/page.html

@@ -1 +0,0 @@
-<!doctype html><html class=dark-mode lang=en><meta content="width=device-width,initial-scale=1" name=viewport><title>Sign In - Modrinth App</title><style>*,:after,:before,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.\!container{width:100%!important}.container{width:100%}@media (width>=640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (width>=768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (width>=1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (width>=1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (width>=1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.\!fixed{position:fixed!important}.fixed{position:fixed}.absolute{position:absolute}.\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-\[calc\(-1rem-2px\)_-2rem\]{inset:calc(-1rem - 2px) -2rem}.-right-12{right:-3rem}.-top-12{top:-3rem}.-top-28{top:-7rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.bottom-\[10\%\]{bottom:10%}.bottom-\[18\%\]{bottom:18%}.bottom-\[250px\]{bottom:250px}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.right-8{right:2rem}.top-0{top:0}.top-0\.5{top:.125rem}.top-2{top:.5rem}.top-\[-4rem\]{top:-4rem}.top-\[18\%\]{top:18%}.top-\[3px\]{top:3px}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-10{z-index:10}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-full{grid-column:1/-1}.col-start-1{grid-column-start:1}.row-start-1{grid-row-start:1}.float-end{float:inline-end}.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-6{margin:1.5rem}.\!mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-0\.5{margin-top:.125rem;margin-bottom:.125rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-auto{margin-top:auto;margin-bottom:auto}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-0{margin-left:0}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-3{margin-right:.75rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-9{margin-top:2.25rem}.mt-\[-1px\]{margin-top:-1px}.mt-auto{margin-top:auto}.mt-px{margin-top:1px}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\!block{display:block!important}.block{display:block}.inline-block{display:inline-block}.\!inline{display:inline!important}.inline{display:inline}.\!flex{display:flex!important}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.inline-table{display:inline-table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row-group{display:table-row-group}.table-row{display:table-row}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.list-item{display:list-item}.\!hidden{display:none!important}.hidden{display:none}.aspect-\[10\/16\]{aspect-ratio:10/16}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[2\/1\]{aspect-ratio:2}.aspect-\[5\/7\]{aspect-ratio:5/7}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}.size-1{width:.25rem;height:.25rem}.size-12{width:3rem;height:3rem}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-48{width:12rem;height:12rem}.size-5{width:1.25rem;height:1.25rem}.siLine truncated

apps/app/src/api/oauth_utils/mod.rs

@@ -1,3 +0,0 @@
-//! Assorted utilities for OAuth 2.0 authorization flows.
-
-pub mod auth_code_reply;

apps/app/src/api/profile.rs

@@ -250,7 +250,7 @@ pub async fn profile_get_pack_export_candidates(
 // invoke('plugin:profile|profile_run', path)
 #[tauri::command]
 pub async fn profile_run(path: &str) -> Result<ProcessMetadata> {
-    let process = profile::run(path, QuickPlayType::None).await?;
+    let process = profile::run(path, &QuickPlayType::None).await?;
 
     Ok(process)
 }

apps/app/src/api/worlds.rs

@@ -4,10 +4,9 @@ use enumset::EnumSet;
 use tauri::{AppHandle, Manager, Runtime};
 use theseus::prelude::ProcessMetadata;
 use theseus::profile::{QuickPlayType, get_full_path};
-use theseus::server_address::ServerAddress;
 use theseus::worlds::{
-    DisplayStatus, ProtocolVersion, ServerPackStatus, ServerStatus, World,
+    DisplayStatus, ServerPackStatus, ServerStatus, World, WorldType,
-    WorldType, WorldWithProfile,
+    WorldWithProfile,
 };
 use theseus::{profile, worlds};
 
@@ -184,16 +183,14 @@ pub async fn remove_server_from_profile(
 }
 
 #[tauri::command]
-pub async fn get_profile_protocol_version(
+pub async fn get_profile_protocol_version(path: &str) -> Result<Option<i32>> {
-    path: &str,
-) -> Result<Option<ProtocolVersion>> {
     Ok(worlds::get_profile_protocol_version(path).await?)
 }
 
 #[tauri::command]
 pub async fn get_server_status(
     address: &str,
-    protocol_version: Option<ProtocolVersion>,
+    protocol_version: Option<i32>,
 ) -> Result<ServerStatus> {
     Ok(worlds::get_server_status(address, protocol_version).await?)
 }
@@ -204,7 +201,7 @@ pub async fn start_join_singleplayer_world(
     world: String,
 ) -> Result<ProcessMetadata> {
     let process =
-        profile::run(path, QuickPlayType::Singleplayer(world)).await?;
+        profile::run(path, &QuickPlayType::Singleplayer(world)).await?;
 
     Ok(process)
 }
@@ -214,11 +211,8 @@ pub async fn start_join_server(
     path: &str,
     address: &str,
 ) -> Result<ProcessMetadata> {
-    let process = profile::run(
+    let process =
-        path,
+        profile::run(path, &QuickPlayType::Server(address.to_owned())).await?;
-        QuickPlayType::Server(ServerAddress::Unresolved(address.to_owned())),
-    )
-    .await?;
 
     Ok(process)
 }

apps/app/tauri.conf.json

@@ -63,7 +63,6 @@
         "height": 800,
         "resizable": true,
         "title": "Modrinth App",
-        "label": "main",
         "width": 1280,
         "minHeight": 700,
         "minWidth": 1100,

apps/daedalus_client/Dockerfile

@@ -1,19 +1,9 @@
-# syntax=docker/dockerfile:1
-
 FROM rust:1.88.0 AS build
 
 WORKDIR /usr/src/daedalus
 COPY . .
-RUN --mount=type=cache,target=/usr/src/daedalus/target \
+RUN cargo build --release --package daedalus_client
-  --mount=type=cache,target=/usr/local/cargo/git/db \
-  --mount=type=cache,target=/usr/local/cargo/registry \
-  cargo build --release --package daedalus_client
 
-FROM build AS artifacts
-
-RUN --mount=type=cache,target=/usr/src/daedalus/target \
-  mkdir /daedalus \
-  && cp /usr/src/daedalus/target/release/daedalus_client /daedalus/daedalus_client
 
 FROM debian:bookworm-slim
 
@@ -21,7 +11,7 @@ RUN apt-get update \
   && apt-get install -y --no-install-recommends ca-certificates openssl \
   && rm -rf /var/lib/apt/lists/*
 
-COPY --from=artifacts /daedalus /daedalus
+COPY --from=build /usr/src/daedalus/target/release/daedalus_client /daedalus/daedalus_client
-
 WORKDIR /daedalus_client
-CMD ["/daedalus/daedalus_client"]
+
+CMD /daedalus/daedalus_client

apps/docs/src/content/docs/contributing/labrinth.md

@@ -19,6 +19,8 @@ From there, you can create the database and perform all database migrations with
 sqlx database setup
 ```
 
+Finally, if on Linux, you will need the OpenSSL library. On Debian-based systems, this involves the `pkg-config` and `libssl-dev` packages.
+
 To enable labrinth to create a project, you need to add two things.
 
 1. An entry in the `loaders` table.

apps/frontend/package.json

@@ -38,10 +38,9 @@
     "@intercom/messenger-js-sdk": "^0.0.14",
     "@ltd/j-toml": "^1.38.0",
     "@modrinth/assets": "workspace:*",
-    "@modrinth/blog": "workspace:*",
-    "@modrinth/moderation": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
+    "@modrinth/blog": "workspace:*",
     "@pinia/nuxt": "^0.5.1",
     "@types/three": "^0.172.0",
     "@vintl/vintl": "^4.4.1",
@@ -59,12 +58,9 @@
     "markdown-it": "14.1.0",
     "pathe": "^1.1.2",
     "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^4.4.1",
-    "prettier": "^3.6.2",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
     "three": "^0.172.0",
-    "vue-confetti-explosion": "^1.0.2",
     "vue-multiselect": "3.0.0-alpha.2",
     "vue-typed-virtual-list": "^1.0.10",
     "vue3-ace-editor": "^2.2.4",

apps/frontend/src/app.vue

@@ -1,14 +1,11 @@
 <template>
   <NuxtLayout>
     <ModrinthLoadingIndicator />
-    <NotificationPanel />
+    <Notifications />
     <NuxtPage />
   </NuxtLayout>
 </template>
 <script setup lang="ts">
-import { NotificationPanel, provideNotificationManager } from "@modrinth/ui";
-import { FrontendNotificationManager } from "./providers/frontend-notifications.ts";
 import ModrinthLoadingIndicator from "~/components/ui/modrinth-loading-indicator.ts";
-
+import Notifications from "~/components/ui/Notifications.vue";
-provideNotificationManager(new FrontendNotificationManager());
 </script>

apps/frontend/src/assets/styles/components.scss

@@ -197,13 +197,13 @@
   }
 
   > :where(
-    input + *,
+      input + *,
-    .input-group + *,
+      .input-group + *,
-    .textarea-wrapper + *,
+      .textarea-wrapper + *,
-    .chips + *,
+      .chips + *,
-    .resizable-textarea-wrapper + *,
+      .resizable-textarea-wrapper + *,
-    .input-div + *
+      .input-div + *
-  ) {
+    ) {
     &:not(:empty) {
       margin-block-start: var(--spacing-card-md);
     }

apps/frontend/src/assets/styles/global.scss

@@ -115,12 +115,10 @@ html {
   --shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
 
   --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
-  --shadow-raised:
+  --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
-    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
     1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
     4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
-  --shadow-floating:
+  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
-    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
     hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
 
   --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
@@ -152,8 +150,8 @@ html {
     rgba(255, 255, 255, 0.35) 0%,
     rgba(255, 255, 255, 0.2695) 100%
   );
-  --landing-blob-shadow:
+  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16),
-    2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(255, 255, 255, 0.45);
+    inset 2px 2px 64px rgba(255, 255, 255, 0.45);
 
   --landing-card-bg: rgba(255, 255, 255, 0.8);
   --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -253,15 +251,13 @@ html {
 
   --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
   --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
-  --shadow-floating:
+  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
-    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
     hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
   --landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing.webp");
-  --landing-maze-gradient-bg:
+  --landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
-    linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
     url("https://cdn.modrinth.com/landing-new/landing-lower.webp");
   --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);
 
@@ -288,8 +284,7 @@ html {
     rgba(44, 48, 79, 0.35) 0%,
     rgba(32, 35, 50, 0.2695) 100%
   );
-  --landing-blob-shadow:
+  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
-    2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
 
   --landing-card-bg: rgba(59, 63, 85, 0.15);
   --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -365,9 +360,8 @@ body {
   // Defaults
   background-color: var(--color-bg);
   color: var(--color-text);
-  --font-standard:
+  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
-    Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   font-family: var(--font-standard);
   font-size: 16px;

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

@@ -51,9 +51,7 @@
 <script setup>
 import { PlusIcon, XIcon } from "@modrinth/assets";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { injectNotificationManager } from "@modrinth/ui";
 
-const { addNotification } = injectNotificationManager();
 const router = useNativeRouter();
 
 const name = ref("");
@@ -89,6 +87,7 @@ async function create() {
     await router.push(`/collection/${result.id}`);
   } catch (err) {
     addNotification({
+      group: "main",
       title: "An error occurred",
       text: err?.data?.description || err?.message || err,
       type: "error",

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

@@ -84,11 +84,8 @@
 </template>
 
 <script setup>
-import { PlusIcon, XIcon } from "@modrinth/assets";
+import { NewModal, ButtonStyled, DropdownSelect } from "@modrinth/ui";
-import { ButtonStyled, DropdownSelect, NewModal } from "@modrinth/ui";
+import { XIcon, PlusIcon } from "@modrinth/assets";
-import { injectNotificationManager } from "@modrinth/ui";
-
-const { addNotification } = injectNotificationManager();
 
 const router = useRouter();
 const app = useNuxtApp();
@@ -183,7 +180,8 @@ async function createProject() {
       },
     });
   } catch (err) {
-    addNotification({
+    app.$notify({
+      group: "main",
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",

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

@@ -1,28 +1,29 @@
 <script setup lang="ts">
 import { ButtonStyled } from "@modrinth/ui";
 import { MailIcon, CheckIcon } from "@modrinth/assets";
-import { ref } from "vue";
+import { ref, watchEffect } from "vue";
 import { useBaseFetch } from "~/composables/fetch.js";
 
 const auth = await useAuth();
 const showSubscriptionConfirmation = ref(false);
-const showSubscribeButton = useAsyncData(
+const subscribed = ref(false);
-  async () => {
+
-    if (auth.value?.user) {
+async function checkSubscribed() {
-      try {
+  if (auth.value?.user) {
-        const { subscribed } = await useBaseFetch("auth/email/subscribe", {
+    try {
-          method: "GET",
+      const { data } = await useBaseFetch("auth/email/subscribe", {
-        });
+        method: "GET",
-        return !subscribed;
+      });
-      } catch {
+      subscribed.value = data?.subscribed || false;
-        return true;
+    } catch {
-      }
+      subscribed.value = false;
-    } else {
-      return false;
     }
-  },
+  }
-  { watch: [auth], server: false },
+}
-);
+
+watchEffect(() => {
+  checkSubscribed();
+});
 
 async function subscribe() {
   try {
@@ -34,19 +35,14 @@ async function subscribe() {
   } finally {
     setTimeout(() => {
       showSubscriptionConfirmation.value = false;
-      showSubscribeButton.status.value = "success";
+      subscribed.value = true;
-      showSubscribeButton.data.value = false;
     }, 2500);
   }
 }
 </script>
 
 <template>
-  <ButtonStyled
+  <ButtonStyled v-if="auth?.user && !subscribed" color="brand" type="outlined">
-    v-if="showSubscribeButton.status.value === 'success' && showSubscribeButton.data.value"
-    color="brand"
-    type="outlined"
-  >
     <button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe">
       <template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template>
       <template v-else> <CheckIcon /> Subscribed! </template>

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

@@ -319,21 +319,30 @@
 </template>
 
 <script setup>
+import { renderString } from "@modrinth/utils";
 import {
-  BellIcon,
-  CalendarIcon,
-  CheckCircleIcon,
-  CheckIcon,
-  ExternalIcon,
-  ScaleIcon,
   UserPlusIcon,
+  ScaleIcon,
+  BellIcon,
+  CheckCircleIcon,
+  CalendarIcon,
   VersionIcon,
+  CheckIcon,
   XIcon,
+  ExternalIcon,
 } from "@modrinth/assets";
-import { injectNotificationManager } from "@modrinth/ui";
+import { Avatar, ProjectStatusBadge, CopyCode, useRelativeTime } from "@modrinth/ui";
+import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
+import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
+import { getUserLink } from "~/helpers/users.js";
+import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
+import { markAsRead } from "~/helpers/notifications.ts";
+import DoubleIcon from "~/components/ui/DoubleIcon.vue";
+import Categories from "~/components/ui/search/Categories.vue";
 
-const { addNotification } = injectNotificationManager();
+const app = useNuxtApp();
 const emit = defineEmits(["update:notifications"]);
+
 const formatRelativeTime = useRelativeTime();
 
 const props = defineProps({
@@ -398,7 +407,8 @@ async function read() {
     const newNotifs = updateNotifs(props.notifications);
     emit("update:notifications", newNotifs);
   } catch (err) {
-    addNotification({
+    app.$notify({
+      group: "main",
       title: "Error marking notification as read",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -417,7 +427,8 @@ async function performAction(notification, actionIndex) {
       });
     }
   } catch (err) {
-    addNotification({
+    app.$notify({
+      group: "main",
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",

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

@@ -1,12 +1,7 @@
 <template>
   <div
     class="vue-notification-group experimental-styles-within"
-    :class="{
+    :class="{ 'intercom-present': isIntercomPresent }"
-      'intercom-present': isIntercomPresent,
-      'location-left': notificationLocation === 'left',
-      'location-right': notificationLocation === 'right',
-      'has-sidebar': hasSidebar,
-    }"
   >
     <transition-group name="notifs">
       <div
@@ -55,7 +50,7 @@
                 </button>
               </ButtonStyled>
               <ButtonStyled circular size="small">
-                <button v-tooltip="`Dismiss`" @click="dismissNotification(index)">
+                <button v-tooltip="`Dismiss`" @click="notifications.splice(index, 1)">
                   <XIcon />
                 </button>
               </ButtonStyled>
@@ -75,111 +70,90 @@
     </transition-group>
   </div>
 </template>
-
+<script setup>
-<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
 import {
+  XCircleIcon,
   CheckCircleIcon,
   CheckIcon,
-  CopyIcon,
   InfoIcon,
   IssuesIcon,
-  XCircleIcon,
   XIcon,
-} from '@modrinth/assets'
+  CopyIcon,
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+} from "@modrinth/assets";
-import { injectNotificationManager, type WebNotification } from '../../providers'
+const notifications = useNotifications();
-import ButtonStyled from '../base/ButtonStyled.vue'
 
-const notificationManager = injectNotificationManager()
+const isIntercomPresent = ref(false);
-const notifications = computed<WebNotification[]>(() => notificationManager.getNotifications())
-const notificationLocation = computed(() => notificationManager.getNotificationLocation())
 
-const isIntercomPresent = ref<boolean>(false)
+function stopTimer(notif) {
-const copied = ref<Record<string, boolean>>({})
+  clearTimeout(notif.timer);
-
-const stopTimer = (n: WebNotification) => notificationManager.stopNotificationTimer(n)
-const setNotificationTimer = (n: WebNotification) => notificationManager.setNotificationTimer(n)
-const dismissNotification = (n: number) => notificationManager.removeNotificationByIndex(n)
-
-function createNotifText(notif: WebNotification): string {
-  return [notif.title, notif.text, notif.errorCode].filter(Boolean).join('\n')
 }
 
-function checkIntercomPresence(): void {
+const copied = ref({});
-  isIntercomPresent.value = !!document.querySelector('.intercom-lightweight-app')
-}
 
-function copyToClipboard(notif: WebNotification): void {
+const createNotifText = (notif) => {
-  const text = createNotifText(notif)
+  let text = "";
+  if (notif.title) {
+    text += notif.title;
+  }
+  if (notif.text) {
+    if (text.length > 0) {
+      text += "\n";
+    }
+    text += notif.text;
+  }
+  if (notif.errorCode) {
+    if (text.length > 0) {
+      text += "\n";
+    }
+    text += notif.errorCode;
+  }
+  return text;
+};
 
-  copied.value[text] = true
+function checkIntercomPresence() {
-  navigator.clipboard.writeText(text)
+  isIntercomPresent.value = !!document.querySelector(".intercom-lightweight-app");
-
-  setTimeout(() => {
-    const { [text]: _, ...rest } = copied.value
-    copied.value = rest
-  }, 2000)
 }
 
 onMounted(() => {
-  checkIntercomPresence()
+  checkIntercomPresence();
 
   const observer = new MutationObserver(() => {
-    checkIntercomPresence()
+    checkIntercomPresence();
-  })
+  });
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  })
+  });
 
   onBeforeUnmount(() => {
-    observer.disconnect()
+    observer.disconnect();
-  })
+  });
-})
+});
 
-withDefaults(
+function copyToClipboard(notif) {
-  defineProps<{
+  const text = createNotifText(notif);
-    hasSidebar?: boolean
+
-  }>(),
+  copied.value[text] = true;
-  {
+  navigator.clipboard.writeText(text);
-    hasSidebar: false,
+  setTimeout(() => {
-  },
+    delete copied.value[text];
-)
+  }, 2000);
+}
 </script>
-
 <style lang="scss" scoped>
 .vue-notification-group {
   position: fixed;
+  right: 1.5rem;
   bottom: 1.5rem;
   z-index: 200;
   width: 450px;
 
-  &.location-right {
-    right: 1.5rem;
-
-    &.has-sidebar {
-      right: 325px;
-    }
-  }
-
-  &.location-left {
-    left: 1.5rem;
-  }
-
   @media screen and (max-width: 500px) {
     width: calc(100% - 0.75rem * 2);
+    right: 0.75rem;
     bottom: 0.75rem;
-
-    &.location-right {
-      right: 0.75rem;
-      left: auto;
-    }
-
-    &.location-left {
-      left: 0.75rem;
-      right: auto;
-    }
   }
 
   &.intercom-present {
@@ -221,12 +195,6 @@ withDefaults(
 }
 
 .notifs-leave-to {
-  .location-right & {
+  transform: translateX(100%) scale(0.8);
-    transform: translateX(100%) scale(0.8);
-  }
-
-  .location-left & {
-    transform: translateX(-100%) scale(0.8);
-  }
 }
 </style>

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

@@ -15,7 +15,7 @@
           maxlength="64"
           :placeholder="`Enter organization name...`"
           autocomplete="off"
-          @input="updateSlug"
+          @input="updateSlug()"
         />
       </div>
       <div class="flex flex-col gap-2">
@@ -33,7 +33,7 @@
             type="text"
             maxlength="64"
             autocomplete="off"
-            @input="setManualSlug"
+            @input="manualSlug = true"
           />
         </div>
       </div>
@@ -61,7 +61,7 @@
           </button>
         </ButtonStyled>
         <ButtonStyled>
-          <button @click="hide">
+          <button @click="modal.hide()">
             <XIcon aria-hidden="true" />
             Cancel
           </button>
@@ -70,22 +70,20 @@
     </div>
   </NewModal>
 </template>
-
+<script setup>
-<script setup lang="ts">
+import { XIcon, PlusIcon } from "@modrinth/assets";
-import { PlusIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { ButtonStyled, NewModal, injectNotificationManager } from "@modrinth/ui";
-import { ref } from "vue";
 
 const router = useNativeRouter();
-const { addNotification } = injectNotificationManager();
 
-const name = ref<string>("");
+const name = ref("");
-const slug = ref<string>("");
+const slug = ref("");
-const description = ref<string>("");
+const description = ref("");
-const manualSlug = ref<boolean>(false);
+const manualSlug = ref(false);
-const modal = ref<InstanceType<typeof NewModal>>();
 
-async function createOrganization(): Promise<void> {
+const modal = ref();
+
+async function createOrganization() {
   startLoading();
   try {
     const value = {
@@ -94,18 +92,19 @@ async function createOrganization(): Promise<void> {
       slug: slug.value.trim().replace(/ +/g, ""),
     };
 
-    const result: any = await useBaseFetch("organization", {
+    const result = await useBaseFetch("organization", {
       method: "POST",
       body: JSON.stringify(value),
       apiVersion: 3,
     });
 
-    modal.value?.hide();
+    modal.value.hide();
 
     await router.push(`/organization/${result.slug}`);
-  } catch (err: any) {
+  } catch (err) {
     console.error(err);
     addNotification({
+      group: "main",
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -113,18 +112,13 @@ async function createOrganization(): Promise<void> {
   }
   stopLoading();
 }
-
+function show(event) {
-function show(event?: MouseEvent): void {
   name.value = "";
   description.value = "";
-  modal.value?.show(event);
+  modal.value.show(event);
 }
 
-function hide(): void {
+function updateSlug() {
-  modal.value?.hide();
-}
-
-function updateSlug(): void {
   if (!manualSlug.value) {
     slug.value = name.value
       .trim()
@@ -135,10 +129,6 @@ function updateSlug(): void {
   }
 }
 
-function setManualSlug(): void {
-  manualSlug.value = true;
-}
-
 defineExpose({
   show,
 });

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

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

apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue

@@ -1,182 +0,0 @@
-<template>
-  <div class="universal-card">
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-        <div class="flex min-w-0 flex-1 items-center gap-3">
-          <Avatar :src="report.project.icon_url" size="3rem" class="flex-shrink-0" />
-          <div class="min-w-0 flex-1">
-            <h3 class="truncate text-lg font-semibold">{{ report.project.title }}</h3>
-
-            <div class="flex flex-col gap-2 text-sm text-secondary sm:flex-row sm:items-center">
-              <nuxt-link
-                v-if="report.target"
-                :to="`/${report.target.type}/${report.target.slug}`"
-                class="inline-flex flex-row items-center gap-1 transition-colors duration-100 ease-in-out hover:text-brand"
-              >
-                <Avatar
-                  :src="report.target.avatar_url"
-                  :circle="report.target.type === 'user'"
-                  size="1rem"
-                  class="flex-shrink-0"
-                />
-                <span class="truncate">
-                  <OrganizationIcon
-                    v-if="report.target.type === 'organization'"
-                    class="align-middle"
-                  />
-                  {{ report.target.name }}
-                </span>
-              </nuxt-link>
-
-              <div class="flex flex-wrap items-center gap-2">
-                <span
-                  class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold text-secondary"
-                >
-                  Score: {{ report.priority_score }}
-                </span>
-                <span
-                  class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold"
-                  :class="{
-                    'text-brand': report.status === 'approved',
-                    'text-red': report.status === 'rejected',
-                    'text-secondary': report.status === 'pending',
-                  }"
-                >
-                  {{ report.status.charAt(0).toUpperCase() + report.status.slice(1) }}
-                </span>
-                <span class="max-w-[200px] truncate font-mono text-xs sm:max-w-none">
-                  {{
-                    report.version.files.find((file) => file.primary)?.filename ||
-                    "Unknown primary file"
-                  }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="mt-2 flex flex-col items-stretch gap-2 sm:mt-0 sm:flex-row sm:items-center sm:gap-2"
-        >
-          <span class="hidden whitespace-nowrap text-sm text-secondary sm:block">
-            {{ formatRelativeTime(dayjs(report.detected_at).toDate()) }}
-          </span>
-
-          <div class="flex flex-col gap-2 sm:flex-row">
-            <div class="flex gap-2">
-              <ButtonStyled class="flex-1 sm:flex-none">
-                <button
-                  v-tooltip="!isPending ? 'This report has already been dealt with.' : undefined"
-                  :disabled="!isPending"
-                  class="w-full sm:w-auto"
-                >
-                  Accept
-                </button>
-              </ButtonStyled>
-              <ButtonStyled class="flex-1 sm:flex-none">
-                <button
-                  v-tooltip="!isPending ? 'This report has already been dealt with.' : undefined"
-                  :disabled="!isPending"
-                  class="w-full sm:w-auto"
-                >
-                  Reject
-                </button>
-              </ButtonStyled>
-            </div>
-
-            <div class="flex justify-center gap-2 sm:justify-start">
-              <ButtonStyled circular>
-                <nuxt-link :to="versionUrl">
-                  <EyeIcon />
-                </nuxt-link>
-              </ButtonStyled>
-              <ButtonStyled circular>
-                <OverflowMenu :options="quickActions">
-                  <template #default>
-                    <EllipsisVerticalIcon />
-                  </template>
-                  <template #copy-id>
-                    <ClipboardCopyIcon />
-                    <span class="hidden sm:inline">Copy ID</span>
-                  </template>
-                  <template #copy-link>
-                    <LinkIcon />
-                    <span class="hidden sm:inline">Copy link</span>
-                  </template>
-                </OverflowMenu>
-              </ButtonStyled>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="text-sm text-secondary sm:hidden">
-        {{ formatRelativeTime(dayjs(report.detected_at).toDate()) }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  ClipboardCopyIcon,
-  EllipsisVerticalIcon,
-  EyeIcon,
-  LinkIcon,
-  OrganizationIcon,
-} from "@modrinth/assets";
-import type { ExtendedDelphiReport } from "@modrinth/moderation";
-import {
-  Avatar,
-  ButtonStyled,
-  injectNotificationManager,
-  OverflowMenu,
-  useRelativeTime,
-  type OverflowMenuOption,
-} from "@modrinth/ui";
-import dayjs from "dayjs";
-
-const { addNotification } = injectNotificationManager();
-
-const props = defineProps<{
-  report: ExtendedDelphiReport;
-}>();
-
-const formatRelativeTime = useRelativeTime();
-const isPending = computed(() => props.report.status === "pending");
-
-const quickActions: OverflowMenuOption[] = [
-  {
-    id: "copy-link",
-    action: () => {
-      const base = window.location.origin;
-      const reviewUrl = `${base}/moderation/tech-reviews?q=${props.report.version.id}`;
-      navigator.clipboard.writeText(reviewUrl).then(() => {
-        addNotification({
-          type: "success",
-          title: "Tech review link copied",
-          text: "The link to this tech review has been copied to your clipboard.",
-        });
-      });
-    },
-  },
-  {
-    id: "copy-id",
-    action: () => {
-      navigator.clipboard.writeText(props.report.version.id).then(() => {
-        addNotification({
-          type: "success",
-          title: "Version ID copied",
-          text: "The ID of this version has been copied to your clipboard.",
-        });
-      });
-    },
-  },
-];
-
-const versionUrl = computed(() => {
-  return `/${props.report.project.project_type}/${props.report.project.slug}/versions/${props.report.version.id}`;
-});
-</script>
-
-<style lang="scss" scoped></style>

apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue

@@ -1,204 +0,0 @@
-<template>
-  <div
-    class="universal-card flex min-h-[6rem] flex-col justify-between gap-3 rounded-lg p-4 sm:h-24 sm:flex-row sm:items-center sm:gap-0"
-  >
-    <div class="flex min-w-0 flex-1 items-center gap-3">
-      <div class="flex-shrink-0 rounded-lg">
-        <Avatar size="48px" :src="queueEntry.project.icon_url" />
-      </div>
-      <div class="flex min-w-0 flex-1 flex-col">
-        <h3 class="truncate text-lg font-semibold">
-          {{ queueEntry.project.name }}
-        </h3>
-        <nuxt-link
-          v-if="queueEntry.owner"
-          target="_blank"
-          class="flex items-center gap-1 truncate align-middle text-sm hover:text-brand"
-          :to="`/user/${queueEntry.owner.user.username}`"
-        >
-          <Avatar
-            :src="queueEntry.owner.user.avatar_url"
-            circle
-            size="16px"
-            class="inline-block flex-shrink-0"
-          />
-          <span class="truncate">{{ queueEntry.owner.user.username }}</span>
-        </nuxt-link>
-        <nuxt-link
-          v-else-if="queueEntry.org"
-          target="_blank"
-          class="flex items-center gap-1 truncate align-middle text-sm hover:text-brand"
-          :to="`/organization/${queueEntry.org.slug}`"
-        >
-          <Avatar
-            :src="queueEntry.org.icon_url"
-            circle
-            size="16px"
-            class="inline-block flex-shrink-0"
-          />
-          <span class="truncate">{{ queueEntry.org.name }}</span>
-        </nuxt-link>
-      </div>
-    </div>
-
-    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
-      <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-1">
-        <span class="flex items-center gap-1 whitespace-nowrap text-sm">
-          <BoxIcon
-            v-if="queueEntry.project.project_type === 'mod'"
-            class="size-4 flex-shrink-0"
-            aria-hidden="true"
-          />
-          <PaintbrushIcon
-            v-else-if="queueEntry.project.project_type === 'resourcepack'"
-            class="size-4 flex-shrink-0"
-            aria-hidden="true"
-          />
-          <BracesIcon
-            v-else-if="queueEntry.project.project_type === 'datapack'"
-            class="size-4 flex-shrink-0"
-            aria-hidden="true"
-          />
-          <PackageOpenIcon
-            v-else-if="queueEntry.project.project_type === 'modpack'"
-            class="size-4 flex-shrink-0"
-            aria-hidden="true"
-          />
-          <GlassesIcon
-            v-else-if="queueEntry.project.project_type === 'shader'"
-            class="size-4 flex-shrink-0"
-            aria-hidden="true"
-          />
-          <PlugIcon
-            v-else-if="queueEntry.project.project_type === 'plugin'"
-            class="size-4 flex-shrink-0"
-            aria-hidden="true"
-          />
-          <span class="hidden sm:inline">{{
-            props.queueEntry.project.project_types.map(formatProjectType).join(", ")
-          }}</span>
-          <span class="sm:hidden">{{
-            formatProjectType(props.queueEntry.project.project_type ?? "project").substring(0, 3)
-          }}</span>
-        </span>
-
-        <span class="hidden text-sm sm:inline">&#x2022;</span>
-
-        <div class="flex flex-row gap-2 text-sm">
-          Requesting
-          <Badge
-            v-if="props.queueEntry.project.requested_status"
-            :type="props.queueEntry.project.requested_status"
-            class="status"
-          />
-        </div>
-
-        <span class="hidden text-sm sm:inline">&#x2022;</span>
-
-        <span
-          v-tooltip="`Since ${queuedDate.toLocaleString()}`"
-          class="truncate text-sm"
-          :class="{
-            'text-red': daysInQueue > 4,
-            'text-orange': daysInQueue > 2,
-          }"
-        >
-          <span class="hidden sm:inline">{{ getSubmittedTime(queueEntry) }}</span>
-          <span class="sm:hidden">{{
-            getSubmittedTime(queueEntry).replace("Submitted ", "")
-          }}</span>
-        </span>
-      </div>
-
-      <div class="flex items-center justify-end gap-2 sm:justify-start">
-        <ButtonStyled circular>
-          <NuxtLink target="_blank" :to="`/project/${queueEntry.project.slug}`">
-            <EyeIcon class="size-4" />
-          </NuxtLink>
-        </ButtonStyled>
-        <ButtonStyled circular color="orange" @click="openProjectForReview">
-          <button>
-            <ScaleIcon class="size-4" />
-          </button>
-        </ButtonStyled>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import dayjs from "dayjs";
-import {
-  EyeIcon,
-  PaintbrushIcon,
-  ScaleIcon,
-  BoxIcon,
-  GlassesIcon,
-  PlugIcon,
-  PackageOpenIcon,
-  BracesIcon,
-} from "@modrinth/assets";
-import { useRelativeTime, Avatar, ButtonStyled, Badge } from "@modrinth/ui";
-import {
-  formatProjectType,
-  type Organization,
-  type Project,
-  type TeamMember,
-} from "@modrinth/utils";
-import { computed } from "vue";
-import { useModerationStore } from "~/store/moderation.ts";
-import type { ModerationProject } from "~/helpers/moderation";
-
-const formatRelativeTime = useRelativeTime();
-const moderationStore = useModerationStore();
-
-const props = defineProps<{
-  queueEntry: ModerationProject;
-}>();
-
-function getDaysQueued(date: Date): number {
-  const now = new Date();
-  const diff = now.getTime() - date.getTime();
-  return Math.floor(diff / (1000 * 60 * 60 * 24));
-}
-
-const queuedDate = computed(() => {
-  return dayjs(
-    props.queueEntry.project.queued ||
-      props.queueEntry.project.created ||
-      props.queueEntry.project.updated,
-  );
-});
-
-const daysInQueue = computed(() => {
-  return getDaysQueued(queuedDate.value.toDate());
-});
-
-function openProjectForReview() {
-  moderationStore.setSingleProject(props.queueEntry.project.id);
-  navigateTo({
-    name: "type-id",
-    params: {
-      type: "project",
-      id: props.queueEntry.project.id,
-    },
-    state: {
-      showChecklist: true,
-    },
-  });
-}
-
-function getSubmittedTime(project: any): string {
-  const date =
-    props.queueEntry.project.queued ||
-    props.queueEntry.project.created ||
-    props.queueEntry.project.updated;
-  if (!date) return "Unknown";
-
-  try {
-    return `Submitted ${formatRelativeTime(dayjs(date).toISOString())}`;
-  } catch {
-    return "Unknown";
-  }
-}
-</script>

apps/frontend/src/components/ui/moderation/ModerationReportCard.vue

@@ -1,278 +0,0 @@
-<template>
-  <div class="universal-card">
-    <div
-      class="flex w-full flex-col items-start justify-between gap-3 sm:flex-row sm:items-center sm:gap-0"
-    >
-      <span class="text-md flex flex-col gap-2 sm:flex-row sm:items-center">
-        <span class="flex items-center gap-2">
-          Reported for
-          <span class="whitespace-nowrap rounded-full align-middle font-semibold text-contrast">
-            {{ formattedReportType }}
-          </span>
-        </span>
-        <span class="flex items-center gap-2">
-          <span class="hidden sm:inline">By</span>
-          <span class="sm:hidden">Reporter:</span>
-          <nuxt-link
-            :to="`/user/${report.reporter_user.username}`"
-            class="inline-flex flex-row items-center gap-1 transition-colors duration-100 ease-in-out hover:text-brand"
-          >
-            <Avatar
-              :src="report.reporter_user.avatar_url"
-              circle
-              size="1.75rem"
-              class="flex-shrink-0"
-            />
-            <span class="truncate">{{ report.reporter_user.username }}</span>
-          </nuxt-link>
-        </span>
-      </span>
-
-      <div class="flex flex-row items-center gap-2 self-end sm:self-auto">
-        <span class="text-md whitespace-nowrap text-secondary">{{
-          formatRelativeTime(report.created)
-        }}</span>
-        <ButtonStyled v-if="visibleQuickReplies.length > 0" circular>
-          <OverflowMenu :options="visibleQuickReplies">
-            <span class="hidden sm:inline">Quick Reply</span>
-            <span class="sr-only sm:hidden">Quick Reply</span>
-            <ChevronDownIcon />
-          </OverflowMenu>
-        </ButtonStyled>
-        <ButtonStyled circular>
-          <OverflowMenu :options="quickActions">
-            <template #default>
-              <EllipsisVerticalIcon />
-            </template>
-            <template #copy-id>
-              <ClipboardCopyIcon />
-              <span class="hidden sm:inline">Copy ID</span>
-            </template>
-            <template #copy-link>
-              <LinkIcon />
-              <span class="hidden sm:inline">Copy link</span>
-            </template>
-          </OverflowMenu>
-        </ButtonStyled>
-      </div>
-    </div>
-
-    <hr class="my-4 rounded-xl border-solid text-divider" />
-
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-        <div class="flex min-w-0 flex-1 items-center gap-3">
-          <Avatar
-            :src="reportItemAvatarUrl"
-            :circle="report.item_type === 'user'"
-            size="3rem"
-            class="flex-shrink-0"
-          />
-          <div class="min-w-0 flex-1">
-            <span class="block truncate text-lg font-semibold">{{ reportItemTitle }}</span>
-            <div class="flex flex-col gap-2 text-sm text-secondary sm:flex-row sm:items-center">
-              <nuxt-link
-                v-if="report.target && report.item_type != 'user'"
-                :to="`/${report.target.type}/${report.target.slug}`"
-                class="inline-flex flex-row items-center gap-1 truncate transition-colors duration-100 ease-in-out hover:text-brand"
-              >
-                <Avatar
-                  :src="report.target?.avatar_url"
-                  :circle="report.target.type === 'user'"
-                  size="1rem"
-                  class="flex-shrink-0"
-                />
-                <span class="truncate">
-                  <OrganizationIcon
-                    v-if="report.target.type === 'organization'"
-                    class="align-middle"
-                  />
-                  {{ report.target.name || "Unknown User" }}
-                </span>
-              </nuxt-link>
-
-              <div class="flex flex-wrap items-center gap-2">
-                <span
-                  class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold text-secondary"
-                >
-                  {{ formattedItemType }}
-                </span>
-                <span
-                  v-if="report.item_type === 'version' && report.version"
-                  class="max-w-[200px] truncate font-mono text-xs sm:max-w-none"
-                >
-                  {{
-                    report.version.files.find((file) => file.primary)?.filename || "Unknown Version"
-                  }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end sm:justify-start">
-          <ButtonStyled circular>
-            <nuxt-link :to="reportItemUrl">
-              <EyeIcon />
-            </nuxt-link>
-          </ButtonStyled>
-        </div>
-      </div>
-    </div>
-
-    <CollapsibleRegion class="my-4" ref="collapsibleRegion">
-      <ReportThread
-        v-if="report.thread"
-        ref="reportThread"
-        class="mb-16 sm:mb-0"
-        :thread="report.thread"
-        :report="report"
-        :reporter="report.reporter_user"
-        @update-thread="updateThread"
-      />
-    </CollapsibleRegion>
-  </div>
-</template>
-<script setup lang="ts">
-import {
-  ClipboardCopyIcon,
-  EllipsisVerticalIcon,
-  EyeIcon,
-  LinkIcon,
-  OrganizationIcon,
-} from "@modrinth/assets";
-import {
-  type ExtendedReport,
-  reportQuickReplies,
-  type ReportQuickReply,
-} from "@modrinth/moderation";
-import {
-  Avatar,
-  ButtonStyled,
-  CollapsibleRegion,
-  injectNotificationManager,
-  OverflowMenu,
-  type OverflowMenuOption,
-  useRelativeTime,
-} from "@modrinth/ui";
-import ChevronDownIcon from "../servers/icons/ChevronDownIcon.vue";
-import ReportThread from "../thread/ReportThread.vue";
-
-const { addNotification } = injectNotificationManager();
-
-const props = defineProps<{
-  report: ExtendedReport;
-}>();
-
-const reportThread = ref<InstanceType<typeof ReportThread> | null>(null);
-const collapsibleRegion = ref<InstanceType<typeof CollapsibleRegion> | null>(null);
-
-const formatRelativeTime = useRelativeTime();
-
-function updateThread(newThread: any) {
-  if (props.report.thread) {
-    Object.assign(props.report.thread, newThread);
-  }
-}
-
-const quickActions: OverflowMenuOption[] = [
-  {
-    id: "copy-link",
-    action: () => {
-      const base = window.location.origin;
-      const reportUrl = `${base}/moderation/reports/${props.report.id}`;
-      navigator.clipboard.writeText(reportUrl).then(() => {
-        addNotification({
-          type: "success",
-          title: "Report link copied",
-          text: "The link to this report has been copied to your clipboard.",
-        });
-      });
-    },
-  },
-  {
-    id: "copy-id",
-    action: () => {
-      navigator.clipboard.writeText(props.report.id).then(() => {
-        addNotification({
-          type: "success",
-          title: "Report ID copied",
-          text: "The ID of this report has been copied to your clipboard.",
-        });
-      });
-    },
-  },
-];
-
-const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
-  return reportQuickReplies
-    .filter((reply) => {
-      if (reply.shouldShow === undefined) return true;
-      if (typeof reply.shouldShow === "function") {
-        return reply.shouldShow(props.report);
-      }
-
-      return reply.shouldShow;
-    })
-    .map(
-      (reply) =>
-        ({
-          id: reply.label,
-          action: () => handleQuickReply(reply),
-        }) as OverflowMenuOption,
-    );
-});
-
-async function handleQuickReply(reply: ReportQuickReply) {
-  const message =
-    typeof reply.message === "function" ? await reply.message(props.report) : reply.message;
-
-  collapsibleRegion.value?.setCollapsed(false);
-  await nextTick();
-  reportThread.value?.setReplyContent(message);
-}
-
-const reportItemAvatarUrl = computed(() => {
-  switch (props.report.item_type) {
-    case "project":
-    case "version":
-      return props.report.project?.icon_url || "";
-    case "user":
-      return props.report.user?.avatar_url || "";
-    default:
-      return undefined;
-  }
-});
-
-const reportItemTitle = computed(() => {
-  if (props.report.item_type === "user") return props.report.user?.username || "Unknown User";
-
-  return props.report.project?.title || "Unknown Project";
-});
-
-const reportItemUrl = computed(() => {
-  switch (props.report.item_type) {
-    case "user":
-      return `/user/${props.report.user?.username}`;
-    case "project":
-      return `/${props.report.project?.project_type}/${props.report.project?.slug}`;
-    case "version":
-      return `/${props.report.project?.project_type}/${props.report.project?.slug}/versions/${props.report.version?.id}`;
-  }
-});
-
-const formattedItemType = computed(() => {
-  const itemType = props.report.item_type;
-  return itemType.charAt(0).toUpperCase() + itemType.slice(1);
-});
-
-const formattedReportType = computed(() => {
-  const reportType = props.report.report_type;
-
-  // some are split by -, some are split by " "
-  const words = reportType.includes("-") ? reportType.split("-") : reportType.split(" ");
-  return words.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-});
-</script>
-
-<style lang="scss" scoped></style>