fix: merge issues

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

.cargo/config.toml

@@ -2,5 +2,8 @@
 [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,23 +22,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
       - name: Fetch docker metadata
         id: docker_meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v5
         with:
           images: ghcr.io/modrinth/daedalus
       - name: Login to GitHub Images
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        id: docker_build
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v6
         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,23 +20,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
       - name: Fetch docker metadata
         id: docker_meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v5
         with:
           images: ghcr.io/modrinth/labrinth
       - name: Login to GitHub Images
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        id: docker_build
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v6
         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
+      - name: ⚙️ Set application version and environment
         shell: bash
         run: |
           APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
@@ -84,6 +84,8 @@ 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: AlexTMjugador/cache-cargo-install-action@feat/features-support
+        uses: taiki-e/cache-cargo-install-action@v2
         with:
           tool: sqlx-cli
           locked: false
@@ -74,6 +74,10 @@ 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
 

.idea/code.iml

@@ -10,11 +10,10 @@
       <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,6 +4,7 @@
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "editor.detectIndentation": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "always",
   }
 }

Cargo.lock

@@ -5731,6 +5731,17 @@ 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"
@@ -5781,6 +5792,16 @@ 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"
@@ -5808,6 +5829,19 @@ 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"
@@ -5835,6 +5869,15 @@ 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"
@@ -8930,6 +8973,7 @@ dependencies = [
  "data-url",
  "dirs",
  "discord-rich-presence",
+ "dotenvy",
  "dunce",
  "either",
  "encoding_rs",
@@ -8945,6 +8989,7 @@ dependencies = [
  "notify-debouncer-mini",
  "p256",
  "paste",
+ "phf 0.12.1",
  "png",
  "quartz_nbt",
  "quick-xml 0.37.5",
@@ -8984,6 +9029,8 @@ dependencies = [
  "dashmap",
  "either",
  "enumset",
+ "hyper 1.6.0",
+ "hyper-util",
  "native-dialog",
  "paste",
  "serde",

Cargo.toml

@@ -67,6 +67,7 @@ heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
+hyper = "1.6.0"
 hyper-rustls = { version = "0.27.7", default-features = false, features = [
   "http1",
   "native-tokio",
@@ -98,6 +99,7 @@ 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/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",
+    "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",
     "test": "vue-tsc --noEmit"
   },
   "dependencies": {

apps/app-frontend/src/App.vue

@@ -1,6 +1,35 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch, provide } from 'vue'
-import { RouterView, useRoute, useRouter } from 'vue-router'
+import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
+import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
+import AccountsCard from '@/components/ui/AccountsCard.vue'
+import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
+import ErrorModal from '@/components/ui/ErrorModal.vue'
+import FriendsList from '@/components/ui/friends/FriendsList.vue'
+import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
+import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
+import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
+import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
+import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
+import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
+import NavButton from '@/components/ui/NavButton.vue'
+import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
+import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
+import RunningAppBar from '@/components/ui/RunningAppBar.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'
+import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
+import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
+import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
+import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { get_user } from '@/helpers/cache.js'
+import { command_listener, warning_listener } from '@/helpers/events.js'
+import { useFetch } from '@/helpers/fetch.js'
+import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
+import { get } from '@/helpers/settings.ts'
+import { get_opening_command, initialize_state } from '@/helpers/state'
+import { getOS, isDev, restartApp } from '@/helpers/utils.js'
+import { useError } from '@/store/error.js'
+import { useInstall } from '@/store/install.js'
+import { useLoading, useTheming } from '@/store/state'
 import {
   ArrowBigUpDashIcon,
   ChangeSkinIcon,
@@ -13,67 +42,44 @@ import {
   LogOutIcon,
   MaximizeIcon,
   MinimizeIcon,
+  NewspaperIcon,
   PlusIcon,
   RestoreIcon,
   RightArrowIcon,
   SettingsIcon,
   WorldIcon,
   XIcon,
-  NewspaperIcon,
 } from '@modrinth/assets'
 import {
   Avatar,
   Button,
   ButtonStyled,
-  Notifications,
-  OverflowMenu,
   NewsArticleCard,
+  NotificationPanel,
+  OverflowMenu,
+  provideNotificationManager,
 } from '@modrinth/ui'
-import { useLoading, useTheming } from '@/store/state'
-import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
-import AccountsCard from '@/components/ui/AccountsCard.vue'
-import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { get } from '@/helpers/settings.ts'
-import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
-import RunningAppBar from '@/components/ui/RunningAppBar.vue'
-import SplashScreen from '@/components/ui/SplashScreen.vue'
-import ErrorModal from '@/components/ui/ErrorModal.vue'
-import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
-import { handleError, useNotifications } from '@/store/notifications.js'
-import { command_listener, warning_listener } from '@/helpers/events.js'
-import { type } from '@tauri-apps/plugin-os'
-import { getOS, isDev, restartApp } from '@/helpers/utils.js'
-import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
-import { getCurrentWindow } from '@tauri-apps/api/window'
-import { getVersion } from '@tauri-apps/api/app'
-import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
-import { create_profile_and_install_from_file } from './helpers/pack'
-import { useError } from '@/store/error.js'
-import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
-import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
-import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
-import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
-import { useInstall } from '@/store/install.js'
-import { invoke } from '@tauri-apps/api/core'
-import { get_opening_command, initialize_state } from '@/helpers/state'
-import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { renderString } from '@modrinth/utils'
-import { useFetch } from '@/helpers/fetch.js'
-import { check } from '@tauri-apps/plugin-updater'
-import NavButton from '@/components/ui/NavButton.vue'
-import { 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 { getVersion } from '@tauri-apps/api/app'
+import { invoke } from '@tauri-apps/api/core'
+import { getCurrentWindow } from '@tauri-apps/api/window'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
-import { get_available_capes, get_available_skins } from './helpers/skins'
+import { type } from '@tauri-apps/plugin-os'
+import { check } from '@tauri-apps/plugin-updater'
+import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
+import { create_profile_and_install_from_file } from './helpers/pack'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
+import { get_available_capes, get_available_skins } from './helpers/skins'
+import { AppNotificationManager } from './providers/app-notifications'
 
 const themeStore = useTheming()
 
+const notificationManager = new AppNotificationManager()
+provideNotificationManager(notificationManager)
+const { handleError, addNotification } = notificationManager
+
 const news = ref([])
 
 const urlModal = ref(null)
@@ -166,7 +172,7 @@ async function setupApp() {
   }
 
   await warning_listener((e) =>
-    notificationsWrapper.value.addNotification({
+    addNotification({
       title: 'Warning',
       text: e.message,
       type: 'warn',
@@ -250,9 +256,6 @@ const route = useRoute()
 const loading = useLoading()
 loading.setEnabled(false)
 
-const notifications = useNotifications()
-const notificationsWrapper = ref()
-
 const error = useError()
 const errorModal = ref()
 
@@ -263,6 +266,8 @@ const incompatibilityWarningModal = ref()
 
 const credentials = ref()
 
+const modrinthLoginFlowWaitModal = ref()
+
 async function fetchCredentials() {
   const creds = await getCreds().catch(handleError)
   if (creds && creds.user_id) {
@@ -272,8 +277,24 @@ async function fetchCredentials() {
 }
 
 async function signIn() {
-  await login().catch(handleError)
-  await fetchCredentials()
+  modrinthLoginFlowWaitModal.value.show()
+
+  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() {
@@ -316,8 +337,6 @@ watch(
 onMounted(() => {
   invoke('show_window')
 
-  notifications.setNotifs(notificationsWrapper.value)
-
   error.setErrorModal(errorModal.value)
 
   install.setIncompatibilityWarningModal(incompatibilityWarningModal)
@@ -402,6 +421,9 @@ function handleAuxClick(e) {
     <Suspense>
       <AppSettingsModal ref="settingsModal" />
     </Suspense>
+    <Suspense>
+      <AuthGrantFlowWaitModal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
+    </Suspense>
     <Suspense>
       <InstanceCreationModal ref="installationModal" />
     </Suspense>
@@ -635,7 +657,7 @@ function handleAuxClick(e) {
     </div>
   </div>
   <URLConfirmModal ref="urlModal" />
-  <Notifications ref="notificationsWrapper" sidebar />
+  <NotificationPanel has-sidebar />
   <ErrorModal ref="errorModal" />
   <ModInstallModal ref="modInstallModal" />
   <IncompatibilityWarningModal ref="incompatibilityWarningModal" />

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

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

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

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

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

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

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { DropdownIcon, PlusIcon, FolderOpenIcon } from '@modrinth/assets'
-import { ButtonStyled, OverflowMenu } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
 import { add_project_from_path } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
+import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
+import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
+
 const props = defineProps({
   instance: {
     type: Object,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { Checkbox, Slider } from '@modrinth/ui'
-import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { computed, readonly, ref, watch } from 'vue'
-import { edit, get_optimal_jre_key } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
-import { get } from '@/helpers/settings.ts'
-import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'
 import useMemorySlider from '@/composables/useMemorySlider'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
+import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, readonly, ref, watch } from 'vue'
+import type { AppSettings, InstanceSettingsTabProps, MemorySettings } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

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

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

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

@@ -0,0 +1,42 @@
+<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/JavaSettings.vue

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

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

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

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

@@ -100,37 +100,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, useTemplateRef } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import {
-  SkinPreviewRenderer,
-  Button,
-  RadioButtons,
-  CapeButton,
-  CapeLikeTextButton,
-  ButtonStyled,
-} from '@modrinth/ui'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
 import {
   add_and_equip_custom_skin,
+  determineModelType,
+  get_normalized_skin_texture,
   remove_custom_skin,
   unequip_skin,
-  type Skin,
   type Cape,
+  type Skin,
   type SkinModel,
-  get_normalized_skin_texture,
-  determineModelType,
 } from '@/helpers/skins.ts'
-import { handleError } from '@/store/notifications'
 import {
-  UploadIcon,
   CheckIcon,
-  SaveIcon,
-  XIcon,
   ChevronRightIcon,
+  SaveIcon,
   SpinnerIcon,
+  UploadIcon,
+  XIcon,
 } from '@modrinth/assets'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
+import {
+  Button,
+  ButtonStyled,
+  CapeButton,
+  CapeLikeTextButton,
+  injectNotificationManager,
+  RadioButtons,
+  SkinPreviewRenderer,
+} from '@modrinth/ui'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+
+const { handleError } = injectNotificationManager()
 
 const modal = useTemplateRef('modal')
 const selectCapeModal = useTemplateRef('selectCapeModal')

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

@@ -27,14 +27,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeUnmount, watch } from 'vue'
-import { UploadIcon } from '@modrinth/assets'
-import { useNotifications } from '@/store/state'
-import { getCurrentWebview } from '@tauri-apps/api/webview'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get_dragged_skin_data } from '@/helpers/skins'
+import { UploadIcon } from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { onBeforeUnmount, ref, watch } from 'vue'
 
-const notifications = useNotifications()
+const { addNotification } = injectNotificationManager()
 
 const modal = ref()
 const fileInput = ref<HTMLInputElement>()
@@ -99,7 +99,7 @@ async function setupDragDropListener() {
           const data = await get_dragged_skin_data(filePath)
           await processData(data.buffer)
         } catch (error) {
-          notifications.addNotification({
+          addNotification({
             title: 'Error processing file',
             text: error instanceof Error ? error.message : 'Failed to read the dropped file.',
             type: 'error',

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

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project } from '@/helpers/cache'
+import { process_listener } from '@/helpers/events'
+import { get_by_profile_path } from '@/helpers/process'
+import { kill, run } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
+import { showProfileInFolder } from '@/helpers/utils'
+import { handleSevereError } from '@/store/error'
 import {
   EyeIcon,
   FolderOpenIcon,
@@ -13,25 +19,20 @@ import {
   Avatar,
   ButtonStyled,
   commonMessages,
+  injectNotificationManager,
   OverflowMenu,
   SmartClickable,
   useRelativeTime,
 } from '@modrinth/ui'
-import { useVIntl } from '@vintl/vintl'
-import { computed, nextTick, ref, onMounted, onUnmounted } from 'vue'
-import { showProfileInFolder } from '@/helpers/utils'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { useRouter } from 'vue-router'
-import type { GameInstance } from '@/helpers/types'
-import { get_project } from '@/helpers/cache'
 import { capitalizeString } from '@modrinth/utils'
-import { kill, run } from '@/helpers/profile'
-import { handleSevereError } from '@/store/error'
-import { trackEvent } from '@/helpers/analytics'
-import { get_by_profile_path } from '@/helpers/process'
-import { handleError } from '@/store/notifications'
-import { process_listener } from '@/helpers/events'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { useVIntl } from '@vintl/vintl'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 

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

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

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

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import type { ServerStatus, ServerWorld, SingleplayerWorld, World } from '@/helpers/worlds.ts'
+import type {
+  ProtocolVersion,
+  ServerStatus,
+  ServerWorld,
+  SingleplayerWorld,
+  World,
+} from '@/helpers/worlds.ts'
 import { set_world_display_status, getWorldIdentifier } from '@/helpers/worlds.ts'
 import { formatNumber, getPingLevel } from '@modrinth/utils'
 import {
@@ -54,8 +60,9 @@ const props = withDefaults(
     playingInstance?: boolean
     playingWorld?: boolean
     startingInstance?: boolean
-    supportsQuickPlay?: boolean
-    currentProtocol?: number | null
+    supportsServerQuickPlay?: boolean
+    supportsWorldQuickPlay?: boolean
+    currentProtocol?: ProtocolVersion | null
     highlighted?: boolean
 
     // Server only
@@ -78,7 +85,8 @@ const props = withDefaults(
     playingInstance: false,
     playingWorld: false,
     startingInstance: false,
-    supportsQuickPlay: false,
+    supportsServerQuickPlay: true,
+    supportsWorldQuickPlay: false,
     currentProtocol: null,
 
     refreshing: false,
@@ -102,7 +110,8 @@ const serverIncompatible = computed(
     !!props.serverStatus &&
     !!props.serverStatus.version?.protocol &&
     !!props.currentProtocol &&
-    props.serverStatus.version.protocol !== props.currentProtocol,
+    (props.serverStatus.version.protocol !== props.currentProtocol.version ||
+      props.serverStatus.version.legacy !== props.currentProtocol.legacy),
 )
 
 const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
@@ -120,9 +129,13 @@ const messages = defineMessages({
     id: 'instance.worlds.a_minecraft_server',
     defaultMessage: 'A Minecraft Server',
   },
-  noQuickPlay: {
-    id: 'instance.worlds.no_quick_play',
-    defaultMessage: 'You can only jump straight into worlds on Minecraft 1.20+',
+  noServerQuickPlay: {
+    id: 'instance.worlds.no_server_quick_play',
+    defaultMessage: 'You can only jump straight into servers on Minecraft Alpha 1.0.5+',
+  },
+  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',
@@ -144,10 +157,6 @@ 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',
@@ -322,17 +331,24 @@ const messages = defineMessages({
         <ButtonStyled v-else>
           <button
             v-tooltip="
-              !serverStatus
-                ? formatMessage(messages.noContact)
-                : serverIncompatible
-                  ? formatMessage(messages.incompatibleServer)
-                  : !supportsQuickPlay
-                    ? formatMessage(messages.noQuickPlay)
-                    : playingOtherWorld || locked
-                      ? formatMessage(messages.gameAlreadyOpen)
-                      : null
+              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)
             "
-            :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
             @click="emit('play')"
           >
             <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
@@ -349,11 +365,6 @@ const messages = defineMessages({
                 disabled: playingInstance,
                 action: () => emit('play-instance'),
               },
-              {
-                id: 'play-anyway',
-                shown: serverIncompatible && !playingInstance && supportsQuickPlay,
-                action: () => emit('play'),
-              },
               {
                 id: 'open-instance',
                 shown: !!instancePath,
@@ -419,10 +430,6 @@ 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 { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { ref } from 'vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import type { GameInstance } from '@/helpers/types'
 import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
-import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { handleError } from '@/store/notifications'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+import type { GameInstance } from '@/helpers/types'
+import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
+import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { ref } from 'vue'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

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

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

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

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

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

@@ -1,8 +1,9 @@
-import { ref, computed } from 'vue'
 import { get_max_memory } from '@/helpers/jre.js'
-import { handleError } from '@/store/notifications.js'
+import { injectNotificationManager } from '@modrinth/ui'
+import { computed, ref } from 'vue'
 
 export default async function () {
+  const { handleError } = injectNotificationManager()
   const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
 
   const snapPoints = computed(() => {

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

@@ -1,6 +1,6 @@
-import { fetch } from '@tauri-apps/plugin-http'
-import { handleError } from '@/store/state.js'
+import { injectNotificationManager } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
+import { fetch } from '@tauri-apps/plugin-http'
 
 export const useFetch = async (url, item, isSilent) => {
   try {
@@ -11,6 +11,7 @@ export const useFetch = async (url, item, isSilent) => {
     })
   } catch (err) {
     if (!isSilent) {
+      const { handleError } = injectNotificationManager()
       handleError({ message: `Error fetching ${item}` })
     }
     console.error(err)

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

@@ -16,3 +16,7 @@ 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 { invoke } from '@tauri-apps/api/core'
 import { install_to_existing_profile } from '@/helpers/pack.js'
-import { handleError } from '@/store/notifications.js'
+import { injectNotificationManager } from '@modrinth/ui'
+import { invoke } from '@tauri-apps/api/core'
 
 /// Add instance
 /*
@@ -190,6 +190,7 @@ export async function edit_icon(path, iconPath) {
 }
 
 export async function finish_install(instance) {
+  const { handleError } = injectNotificationManager()
   if (instance.install_stage !== 'pack_installed') {
     let linkedData = instance.linked_data
     await install_to_existing_profile(

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

@@ -1,6 +1,6 @@
-import { invoke } from '@tauri-apps/api/core'
-import { handleError } from '@/store/notifications'
+import { injectNotificationManager } from '@modrinth/ui'
 import { arrayBufferToBase64 } from '@modrinth/utils'
+import { invoke } from '@tauri-apps/api/core'
 
 export interface Cape {
   id: string
@@ -39,6 +39,7 @@ export const DEFAULT_MODELS: Record<string, SkinModel> = {
 
 export function filterSavedSkins(list: Skin[]) {
   const customSkins = list.filter((s) => s.source !== 'default')
+  const { handleError } = injectNotificationManager()
   fixUnknownSkins(customSkins).catch(handleError)
   return customSkins
 }

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

@@ -51,6 +51,7 @@ export type ServerStatus = {
   version?: {
     name: string
     protocol: number
+    legacy: boolean
   }
   favicon?: string
   enforces_secure_chat: boolean
@@ -70,11 +71,17 @@ 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[],
@@ -156,13 +163,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<number | null> {
+export async function get_profile_protocol_version(path: string): Promise<ProtocolVersion | null> {
   return await invoke('plugin:worlds|get_profile_protocol_version', { path })
 }
 
 export async function get_server_status(
   address: string,
-  protocolVersion: number | null = null,
+  protocolVersion: ProtocolVersion | null = null,
 ): Promise<ServerStatus> {
   return await invoke('plugin:worlds|get_server_status', { address, protocolVersion })
 }
@@ -206,30 +213,39 @@ export function isServerWorld(world: World): world is ServerWorld {
 
 export async function refreshServerData(
   serverData: ServerData,
-  protocolVersion: number | null,
+  protocolVersion: ProtocolVersion | 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 async function refreshServers(
+export function refreshServers(
   worlds: World[],
   serverData: Record<string, ServerData>,
-  protocolVersion: number | null,
+  protocolVersion: ProtocolVersion | null,
 ) {
   const servers = worlds.filter(isServerWorld)
   servers.forEach((server) => {
@@ -243,10 +259,8 @@ export async function refreshServers(
   })
 
   // noinspection ES6MissingAwait - handled with .then by refreshServerData already
-  Promise.all(
-    Object.keys(serverData).map((address) =>
-      refreshServerData(serverData[address], protocolVersion, address),
-    ),
+  Object.keys(serverData).forEach((address) =>
+    refreshServerData(serverData[address], protocolVersion, address),
   )
 }
 
@@ -297,15 +311,24 @@ export async function refreshWorlds(instancePath: string): Promise<World[]> {
   return worlds ?? []
 }
 
-const FIRST_QUICK_PLAY_VERSION = '23w14a'
+export function hasServerQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
+  if (!gameVersions.length) {
+    return true
+  }
 
-export function hasQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
+  const versionIndex = gameVersions.findIndex((v) => v.version === currentVersion)
+  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 === FIRST_QUICK_PLAY_VERSION)
+  const targetIndex = gameVersions.findIndex((v) => v.version === '23w14a')
 
   return versionIndex !== -1 && targetIndex !== -1 && versionIndex <= targetIndex
 }

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

@@ -383,11 +383,11 @@
   "instance.worlds.no_contact": {
     "message": "Server couldn't be contacted"
   },
-  "instance.worlds.no_quick_play": {
-    "message": "You can only jump straight into worlds on Minecraft 1.20+"
+  "instance.worlds.no_server_quick_play": {
+    "message": "You can only jump straight into servers on Minecraft Alpha 1.0.5+"
   },
-  "instance.worlds.play_anyway": {
-    "message": "Play anyway"
+  "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 { createApp } from 'vue'
-import router from '@/routes'
 import App from '@/App.vue'
-import { createPinia } from 'pinia'
-import FloatingVue from 'floating-vue'
-import 'floating-vue/dist/style.css'
-import { createPlugin } from '@vintl/vintl/plugin'
+import router from '@/routes'
 import * as Sentry from '@sentry/vue'
 import { VueScanPlugin } from '@taijased/vue-render-tracker'
+import { createPlugin } from '@vintl/vintl/plugin'
+import FloatingVue from 'floating-vue'
+import 'floating-vue/dist/style.css'
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
 
 const VIntlPlugin = createPlugin({
   controllerOpts: {

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

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

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

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { ref, onUnmounted, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
-import { list } from '@/helpers/profile.js'
-import { profile_listener } from '@/helpers/events'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { handleError } from '@/store/notifications.js'
-import dayjs from 'dayjs'
-import { get_search_results } from '@/helpers/cache.js'
-import type { SearchResult } from '@modrinth/utils'
 import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
+import { get_search_results } from '@/helpers/cache.js'
+import { profile_listener } from '@/helpers/events'
+import { list } from '@/helpers/profile.js'
 import type { GameInstance } from '@/helpers/types'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { injectNotificationManager } from '@modrinth/ui'
+import type { SearchResult } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 

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

@@ -1,4 +1,26 @@
 <script setup lang="ts">
+import type AccountsCard from '@/components/ui/AccountsCard.vue'
+import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_default_user, login as login_flow, users } from '@/helpers/auth'
+import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { generateSkinPreviews, skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { get as getSettings } from '@/helpers/settings.ts'
+import type { Cape, Skin } from '@/helpers/skins.ts'
+import {
+  equip_skin,
+  filterDefaultSkins,
+  filterSavedSkins,
+  get_available_capes,
+  get_available_skins,
+  get_normalized_skin_texture,
+  normalize_skin_texture,
+  remove_custom_skin,
+  set_default_cape,
+} from '@/helpers/skins.ts'
+import { handleSevereError } from '@/store/error'
 import {
   EditIcon,
   ExcitedRinthbot,
@@ -12,42 +34,21 @@ import {
   Button,
   ButtonStyled,
   ConfirmModal,
+  injectNotificationManager,
   SkinButton,
   SkinLikeTextButton,
   SkinPreviewRenderer,
 } from '@modrinth/ui'
+import { arrayBufferToBase64 } from '@modrinth/utils'
 import { computedAsync } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
-import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
-import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
-import { handleError, useNotifications } from '@/store/notifications'
-import type { Cape, Skin } from '@/helpers/skins.ts'
-import {
-  normalize_skin_texture,
-  equip_skin,
-  filterDefaultSkins,
-  filterSavedSkins,
-  get_available_capes,
-  get_available_skins,
-  get_normalized_skin_texture,
-  remove_custom_skin,
-  set_default_cape,
-} from '@/helpers/skins.ts'
-import { get as getSettings } from '@/helpers/settings.ts'
-import { get_default_user, login as login_flow, users } from '@/helpers/auth'
-import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { generateSkinPreviews, skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { handleSevereError } from '@/store/error'
-import { trackEvent } from '@/helpers/analytics'
-import type AccountsCard from '@/components/ui/AccountsCard.vue'
-import { arrayBufferToBase64 } from '@modrinth/utils'
 const editSkinModal = useTemplateRef('editSkinModal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
 const uploadSkinModal = useTemplateRef('uploadSkinModal')
 
-const notifications = useNotifications()
+const notifications = injectNotificationManager()
+const { handleError } = notifications
 
 const settings = ref(await getSettings())
 const skins = ref<Skin[]>([])
@@ -113,7 +114,7 @@ async function loadCapes() {
     defaultCape.value = capes.value.find((c) => c.is_equipped)
     originalDefaultCape.value = defaultCape.value
   } catch (error) {
-    if (currentUser.value) {
+    if (currentUser.value && error instanceof Error) {
       handleError(error)
     }
   }
@@ -126,7 +127,7 @@ async function loadSkins() {
     selectedSkin.value = skins.value.find((s) => s.is_equipped) ?? null
     originalSelectedSkin.value = selectedSkin.value
   } catch (error) {
-    if (currentUser.value) {
+    if (currentUser.value && error instanceof Error) {
       handleError(error)
     }
   }
@@ -161,7 +162,7 @@ async function changeSkin(newSkin: Skin) {
         text: "You're changing your skin too frequently. Mojang's servers have temporarily blocked further requests. Please wait a moment before trying again.",
       })
     } else {
-      handleError(error)
+      handleError(error as Error)
     }
   }
 }
@@ -190,7 +191,7 @@ async function handleCapeSelected(cape: Cape | undefined) {
         text: "You're changing your cape too frequently. Mojang's servers have temporarily blocked further requests. Please wait a moment before trying again.",
       })
     } else {
-      handleError(error)
+      handleError(error as Error)
     }
   }
 }
@@ -207,7 +208,7 @@ async function loadCurrentUser() {
     const allAccounts = await users()
     currentUser.value = allAccounts.find((acc) => acc.profile.id === defaultId)
   } catch (e) {
-    handleError(e)
+    handleError(e as Error)
     currentUser.value = undefined
     currentUserId.value = undefined
   }
@@ -276,7 +277,7 @@ async function checkUserChanges() {
       await loadSkins()
     }
   } catch (error) {
-    if (currentUser.value) {
+    if (currentUser.value && error instanceof Error) {
       handleError(error)
     }
   }
@@ -376,7 +377,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
                 color="green"
                 aria-label="Edit skin"
                 class="pointer-events-auto"
-                @click.stop="(e) => editSkinModal?.show(e, skin)"
+                @click.stop="(e: MouseEvent) => editSkinModal?.show(e, skin)"
               >
                 <EditIcon /> Edit
               </Button>

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

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

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

@@ -88,30 +88,30 @@
 </template>
 
 <script setup>
-import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
-import { Button, Card, Checkbox, DropdownSelect } from '@modrinth/ui'
+import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
+import { process_listener } from '@/helpers/events.js'
 import {
   delete_logs_by_filename,
+  get_latest_log_cursor,
   get_logs,
   get_output_by_filename,
-  get_latest_log_cursor,
 } from '@/helpers/logs.js'
-import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { get_by_profile_path } from '@/helpers/process.js'
+import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
+import { Button, Card, Checkbox, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import isToday from 'dayjs/plugin/isToday'
 import isYesterday from 'dayjs/plugin/isYesterday'
-import { get_by_profile_path } from '@/helpers/process.js'
-import { useRoute } from 'vue-router'
-import { process_listener } from '@/helpers/events.js'
-import { handleError } from '@/store/notifications.js'
 import { ofetch } from 'ofetch'
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 
 dayjs.extend(isToday)
 dayjs.extend(isYesterday)
 
+const { handleError } = injectNotificationManager()
 const route = useRoute()
 
 const props = defineProps({

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,6 @@
-import { defineStore } from 'pinia'
+import { trackEvent } from '@/helpers/analytics.js'
+import { get_project, get_version_many } from '@/helpers/cache.js'
+import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
 import {
   add_project_from_version,
   check_installed,
@@ -7,11 +9,9 @@ import {
   list,
   remove_project,
 } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
-import { get_project, get_version_many } from '@/helpers/cache.js'
-import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
-import { trackEvent } from '@/helpers/analytics.js'
+import { injectNotificationManager } from '@modrinth/ui'
 import dayjs from 'dayjs'
+import { defineStore } from 'pinia'
 
 export const useInstall = defineStore('installStore', {
   state: () => ({
@@ -49,6 +49,7 @@ export const install = async (
   callback = () => {},
   createInstanceCallback = () => {},
 ) => {
+  const { handleError } = injectNotificationManager()
   const project = await get_project(projectId, 'must_revalidate').catch(handleError)
 
   if (project.project_type === 'modpack') {
@@ -160,6 +161,7 @@ export const install = async (
 }
 
 export const installVersionDependencies = async (profile, version) => {
+  const { handleError } = injectNotificationManager()
   for (const dep of version.dependencies) {
     if (dep.dependency_type !== 'required') continue
     // disallow fabric api install on quilt

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

@@ -1,25 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useNotifications = defineStore('notificationsStore', {
-  state: () => ({
-    notificationsWrapper: null,
-  }),
-  actions: {
-    setNotifs(notifs) {
-      this.notificationsWrapper = notifs
-    },
-    addNotification(notif) {
-      this.notificationsWrapper.addNotification(notif)
-    },
-  },
-})
-
-export const handleError = (err) => {
-  const notifs = useNotifications()
-  notifs.addNotification({
-    title: 'An error occurred',
-    text: err.message ?? err,
-    type: 'error',
-  })
-  console.error(err)
-}

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

@@ -1,7 +1,6 @@
-import { useTheming } from './theme.ts'
 import { useBreadcrumbs } from './breadcrumbs'
-import { useLoading } from './loading'
-import { useNotifications, handleError } from './notifications'
 import { useInstall } from './install'
+import { useLoading } from './loading'
+import { useTheming } from './theme.ts'
 
-export { useTheming, useBreadcrumbs, useLoading, useNotifications, handleError, useInstall }
+export { useBreadcrumbs, useInstall, useLoading, useTheming }

apps/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.redirect_uri.as_str());
+    println!("Open URL {} in a browser", login.auth_request_uri.as_str());
 
     println!("Please enter URL code: ");
     let mut input = String::new();

apps/app/Cargo.toml

@@ -31,6 +31,8 @@ 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,7 +120,12 @@ fn main() {
             .plugin(
                 "mr-auth",
                 InlinedPlugin::new()
-                    .commands(&["modrinth_login", "logout", "get"])
+                    .commands(&[
+                        "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.redirect_uri.parse().map_err(
+        tauri::WebviewUrl::External(flow.auth_request_uri.parse().map_err(
             |_| {
                 theseus::ErrorKind::OtherError(
                     "Error parsing auth redirect URL".to_string(),
@@ -77,6 +77,7 @@ 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,6 +22,8 @@ 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,79 +1,70 @@
 use crate::api::Result;
-use chrono::{Duration, Utc};
+use crate::api::TheseusSerializableError;
+use crate::api::oauth_utils;
+use tauri::Manager;
+use tauri::Runtime;
 use tauri::plugin::TauriPlugin;
-use tauri::{Manager, Runtime, UserAttentionType};
+use tauri_plugin_opener::OpenerExt;
 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![modrinth_login, logout, get,])
+        .invoke_handler(tauri::generate_handler![
+            modrinth_login,
+            logout,
+            get,
+            cancel_modrinth_login,
+        ])
         .build()
 }
 
 #[tauri::command]
 pub async fn modrinth_login<R: Runtime>(
     app: tauri::AppHandle<R>,
-) -> Result<Option<ModrinthCredentials>> {
-    let redirect_uri = mr_auth::authenticate_begin_flow();
+) -> Result<ModrinthCredentials> {
+    let (auth_code_recv_socket_tx, auth_code_recv_socket) = oneshot::channel();
+    let auth_code = tokio::spawn(oauth_utils::auth_code_reply::listen(
+        auth_code_recv_socket_tx,
+    ));
 
-    let start = Utc::now();
+    let auth_code_recv_socket = auth_code_recv_socket.await.unwrap()?;
 
-    if let Some(window) = app.get_webview_window("modrinth-signin") {
-        window.close()?;
-    }
+    let auth_request_uri = format!(
+        "{}?launcher=true&ipver={}&port={}",
+        mr_auth::authenticate_begin_flow(),
+        if auth_code_recv_socket.is_ipv4() {
+            "4"
+        } else {
+            "6"
+        },
+        auth_code_recv_socket.port()
+    );
 
-    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(),
+    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(),
             )
-            .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))?;
+    let Some(auth_code) = auth_code.await.unwrap()? else {
+        return Err(TheseusSerializableError::Theseus(
+            theseus::ErrorKind::OtherError("Login canceled".into()).into(),
+        ));
+    };
 
-    while (Utc::now() - start) < Duration::minutes(10) {
-        if window.title().is_err() {
-            // user closed window, cancelling flow
-            return Ok(None);
-        }
+    let credentials = mr_auth::authenticate_finish_flow(&auth_code).await?;
 
-        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;
+    if let Some(main_window) = app.get_window("main") {
+        main_window.set_focus().ok();
     }
 
-    window.close()?;
-    Ok(None)
+    Ok(credentials)
 }
 
 #[tauri::command]
@@ -85,3 +76,8 @@ 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

@@ -0,0 +1,159 @@
+//! 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/mod.rs

@@ -0,0 +1,3 @@
+//! 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,9 +4,10 @@ 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, ServerPackStatus, ServerStatus, World, WorldType,
-    WorldWithProfile,
+    DisplayStatus, ProtocolVersion, ServerPackStatus, ServerStatus, World,
+    WorldType, WorldWithProfile,
 };
 use theseus::{profile, worlds};
 
@@ -183,14 +184,16 @@ pub async fn remove_server_from_profile(
 }
 
 #[tauri::command]
-pub async fn get_profile_protocol_version(path: &str) -> Result<Option<i32>> {
+pub async fn get_profile_protocol_version(
+    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<i32>,
+    protocol_version: Option<ProtocolVersion>,
 ) -> Result<ServerStatus> {
     Ok(worlds::get_server_status(address, protocol_version).await?)
 }
@@ -201,7 +204,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)
 }
@@ -211,8 +214,11 @@ pub async fn start_join_server(
     path: &str,
     address: &str,
 ) -> Result<ProcessMetadata> {
-    let process =
-        profile::run(path, &QuickPlayType::Server(address.to_owned())).await?;
+    let process = profile::run(
+        path,
+        QuickPlayType::Server(ServerAddress::Unresolved(address.to_owned())),
+    )
+    .await?;
 
     Ok(process)
 }

apps/app/tauri.conf.json

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

apps/daedalus_client/Dockerfile

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

apps/frontend/nuxt.config.ts

@@ -34,7 +34,7 @@ const enabledLocales: string[] = [];
 /**
  * Overrides for the categories of the certain locales.
  */
-const localesCategoriesOverrides: Partial = {
+const localesCategoriesOverrides: Partial<Record<string, "fun" | "experimental">> = {
   "en-x-pirate": "fun",
   "en-x-updown": "fun",
   "en-x-lolcat": "fun",
@@ -260,28 +260,21 @@ export default defineNuxtConfig({
         const omorphiaLocales: string[] = [];
         const omorphiaLocaleSets = new Map<string, { files: { from: string }[] }>();
 
-        const externalLocales = [
-          "node_modules/@modrinth/ui/src/locales/en-US",
-          "node_modules/@modrinth/moderation/locales/en-US",
-        ];
+        for await (const localeDir of globIterate("node_modules/@modrinth/ui/src/locales/*", {
+          posix: true,
+        })) {
+          const tag = basename(localeDir);
+          omorphiaLocales.push(tag);
 
-        for (const localePath of externalLocales) {
-          for await (const localeDir of globIterate(localePath, {
-            posix: true,
-          })) {
-            const tag = basename(localeDir);
-            omorphiaLocales.push(tag);
+          const localeFiles: { from: string; format?: string }[] = [];
 
-            const localeFiles: { from: string; format?: string }[] = [];
+          omorphiaLocaleSets.set(tag, { files: localeFiles });
 
-            omorphiaLocaleSets.set(tag, { files: localeFiles });
-
-            for await (const localeFile of globIterate(`${localeDir}/*`, { posix: true })) {
-              localeFiles.push({
-                from: pathToFileURL(localeFile).toString(),
-                format: "default",
-              });
-            }
+          for await (const localeFile of globIterate(`${localeDir}/*`, { posix: true })) {
+            localeFiles.push({
+              from: pathToFileURL(localeFile).toString(),
+              format: "default",
+            });
           }
         }
 
@@ -308,7 +301,7 @@ export default defineNuxtConfig({
               format: "crowdin",
             });
           } else if (fileName === "meta.json") {
-            const meta: Record = await fs
+            const meta: Record<string, { message: string }> = await fs
               .readFile(localeFile, "utf8")
               .then((date) => JSON.parse(date));
             const localeMeta = (locale.meta ??= {});

apps/frontend/package.json

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

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

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

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

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

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

@@ -1,29 +1,28 @@
 <script setup lang="ts">
 import { ButtonStyled } from "@modrinth/ui";
 import { MailIcon, CheckIcon } from "@modrinth/assets";
-import { ref, watchEffect } from "vue";
+import { ref } from "vue";
 import { useBaseFetch } from "~/composables/fetch.js";
 
 const auth = await useAuth();
 const showSubscriptionConfirmation = ref(false);
-const subscribed = ref(false);
-
-async function checkSubscribed() {
-  if (auth.value?.user) {
-    try {
-      const { data } = await useBaseFetch("auth/email/subscribe", {
-        method: "GET",
-      });
-      subscribed.value = data?.subscribed || false;
-    } catch {
-      subscribed.value = false;
+const showSubscribeButton = useAsyncData(
+  async () => {
+    if (auth.value?.user) {
+      try {
+        const { subscribed } = await useBaseFetch("auth/email/subscribe", {
+          method: "GET",
+        });
+        return !subscribed;
+      } catch {
+        return true;
+      }
+    } else {
+      return false;
     }
-  }
-}
-
-watchEffect(() => {
-  checkSubscribed();
-});
+  },
+  { watch: [auth], server: false },
+);
 
 async function subscribe() {
   try {
@@ -35,14 +34,19 @@ async function subscribe() {
   } finally {
     setTimeout(() => {
       showSubscriptionConfirmation.value = false;
-      subscribed.value = true;
+      showSubscribeButton.status.value = "success";
+      showSubscribeButton.data.value = false;
     }, 2500);
   }
 }
 </script>
 
 <template>
-  <ButtonStyled v-if="auth?.user && !subscribed" color="brand" type="outlined">
+  <ButtonStyled
+    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,30 +319,21 @@
 </template>
 
 <script setup>
-import { renderString } from "@modrinth/utils";
 import {
-  UserPlusIcon,
-  ScaleIcon,
   BellIcon,
-  CheckCircleIcon,
   CalendarIcon,
-  VersionIcon,
+  CheckCircleIcon,
   CheckIcon,
-  XIcon,
   ExternalIcon,
+  ScaleIcon,
+  UserPlusIcon,
+  VersionIcon,
+  XIcon,
 } from "@modrinth/assets";
-import { Avatar, ProjectStatusBadge, CopyCode, useRelativeTime } from "@modrinth/ui";
-import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
-import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
-import { getUserLink } from "~/helpers/users.js";
-import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
-import { markAsRead } from "~/helpers/notifications.ts";
-import DoubleIcon from "~/components/ui/DoubleIcon.vue";
-import Categories from "~/components/ui/search/Categories.vue";
+import { injectNotificationManager } from "@modrinth/ui";
 
-const app = useNuxtApp();
+const { addNotification } = injectNotificationManager();
 const emit = defineEmits(["update:notifications"]);
-
 const formatRelativeTime = useRelativeTime();
 
 const props = defineProps({
@@ -407,8 +398,7 @@ async function read() {
     const newNotifs = updateNotifs(props.notifications);
     emit("update:notifications", newNotifs);
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "Error marking notification as read",
       text: err.data ? err.data.description : err,
       type: "error",
@@ -427,8 +417,7 @@ async function performAction(notification, actionIndex) {
       });
     }
   } catch (err) {
-    app.$notify({
-      group: "main",
+    addNotification({
       title: "An error occurred",
       text: err.data ? err.data.description : err,
       type: "error",

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

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

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

@@ -1,442 +1,511 @@
 <template>
-  <div v-if="showInvitation" class="universal-card information invited my-4">
-    <h2>{{ getFormattedMessage(messages.invitationTitle) }}</h2>
-    <p v-if="currentMember?.project_role">
-      {{ formatMessage(messages.invitationWithRole, { role: currentMember.project_role }) }}
+  <div v-if="showInvitation" class="universal-card information invited">
+    <h2>Invitation to join project</h2>
+    <p>
+      You've been invited be a member of this project with the role of '{{ currentMember.role }}'.
     </p>
-    <p v-else>{{ getFormattedMessage(messages.invitationNoRole) }}</p>
     <div class="input-group">
-      <ButtonStyled color="brand">
-        <button class="brand-button" @click="acceptInvite()">
-          <CheckIcon />
-          {{ getFormattedMessage(messages.accept) }}
-        </button>
-      </ButtonStyled>
-      <ButtonStyled color="red">
-        <button @click="declineInvite">
-          <XIcon />
-          {{ getFormattedMessage(messages.decline) }}
-        </button>
-      </ButtonStyled>
+      <button class="iconified-button brand-button" @click="acceptInvite()">
+        <CheckIcon />
+        Accept
+      </button>
+      <button class="iconified-button danger-button" @click="declineInvite()">
+        <XIcon />
+        Decline
+      </button>
     </div>
   </div>
   <div
     v-if="
       currentMember &&
-      visibleNags.length > 0 &&
+      nags.filter((x) => x.condition).length > 0 &&
       (project.status === 'draft' || tags.rejectedStatuses.includes(project.status))
     "
-    class="universal-card my-4"
+    class="author-actions universal-card mb-4"
   >
-    <div class="flex max-w-full flex-wrap items-center gap-x-6 gap-y-4">
-      <div class="flex flex-auto flex-wrap items-center gap-x-6 gap-y-4">
-        <h2 class="my-0 mr-auto">{{ getFormattedMessage(messages.publishingChecklist) }}</h2>
+    <div class="header__row">
+      <div class="header__title">
+        <h2>Publishing checklist</h2>
+        <div class="checklist">
+          <span class="checklist__title">Progress:</span>
+          <div class="checklist__items">
+            <div
+              v-for="nag in nags"
+              :key="`checklist-${nag.id}`"
+              v-tooltip="nag.title"
+              :aria-label="nag.title"
+              :class="'circle ' + (!nag.condition ? 'done' : '') + nag.status"
+              class="circle"
+            >
+              <CheckIcon v-if="!nag.condition" />
+              <AsteriskIcon v-else-if="nag.status === 'required'" />
+              <LightBulbIcon v-else-if="nag.status === 'suggestion'" />
+              <ScaleIcon v-else-if="nag.status === 'review'" />
+            </div>
+          </div>
+        </div>
       </div>
       <div class="input-group">
-        <ButtonStyled circular>
-          <button :class="!collapsed && '[&>svg]:rotate-180'" @click="toggleCollapsed()">
-            <DropdownIcon class="duration-250 transition-transform ease-in-out" />
-          </button>
-        </ButtonStyled>
+        <button
+          :class="{ 'not-collapsed': !collapsed }"
+          class="square-button"
+          @click="toggleCollapsed()"
+        >
+          <DropdownIcon />
+        </button>
       </div>
     </div>
-    <div v-if="!collapsed" class="grid-display width-16 mt-4">
-      <div v-for="nag in visibleNags" :key="nag.id" class="grid-display__item">
-        <span class="flex items-center gap-2 font-semibold">
-          <component
-            :is="nag.icon || getDefaultIcon(nag.status)"
-            v-tooltip="getStatusTooltip(nag.status)"
-            :class="[
-              'h-4 w-4',
-              nag.status === 'required' && 'text-red',
-              nag.status === 'warning' && 'text-orange',
-              nag.status === 'suggestion' && 'text-purple',
-            ]"
-            :aria-label="getStatusTooltip(nag.status)"
+    <div v-if="!collapsed" class="grid-display width-16">
+      <div
+        v-for="nag in nags.filter((x) => x.condition && !x.hide)"
+        :key="nag.id"
+        class="grid-display__item"
+      >
+        <span class="label">
+          <AsteriskIcon
+            v-if="nag.status === 'required'"
+            v-tooltip="'Required'"
+            :class="nag.status"
+            aria-label="Required"
           />
-          {{ getFormattedMessage(nag.title) }}
-        </span>
-        {{ getNagDescription(nag) }}
+          <LightBulbIcon
+            v-else-if="nag.status === 'suggestion'"
+            v-tooltip="'Suggestion'"
+            :class="nag.status"
+            aria-label="Suggestion"
+          />
+          <ScaleIcon
+            v-else-if="nag.status === 'review'"
+            v-tooltip="'Review'"
+            :class="nag.status"
+            aria-label="Review"
+          />{{ nag.title }}</span
+        >
+        {{ nag.description }}
         <NuxtLink
-          v-if="nag.link && shouldShowLink(nag)"
+          v-if="nag.link"
+          :class="{ invisible: nag.link.hide }"
           :to="`/${project.project_type}/${project.slug ? project.slug : project.id}/${
             nag.link.path
           }`"
           class="goto-link"
         >
-          {{ getFormattedMessage(nag.link.title) }}
+          {{ nag.link.title }}
           <ChevronRightIcon aria-hidden="true" class="featured-header-chevron" />
         </NuxtLink>
-        <ButtonStyled
-          v-if="nag.status === 'special-submit-action' && nag.id === 'submit-for-review'"
-          color="orange"
-          @click="submitForReview"
+        <button
+          v-else-if="nag.action"
+          :disabled="nag.action.disabled()"
+          class="btn btn-orange"
+          @click="nag.action.onClick"
         >
-          <button
-            :disabled="!canSubmitForReview"
-            v-tooltip="
-              !canSubmitForReview ? getFormattedMessage(messages.submitChecklistTooltip) : undefined
-            "
-          >
-            <SendIcon />
-            {{ getFormattedMessage(messages.submitForReview) }}
-          </button>
-        </ButtonStyled>
+          <SendIcon />
+          {{ nag.action.title }}
+        </button>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import {
-  ChevronRightIcon,
-  CheckIcon,
-  XIcon,
   AsteriskIcon,
-  LightBulbIcon,
-  TriangleAlertIcon,
+  CheckIcon,
+  ChevronRightIcon,
   DropdownIcon,
-  SendIcon,
+  LightBulbIcon,
   ScaleIcon,
+  SendIcon,
+  XIcon,
 } from "@modrinth/assets";
+import { injectNotificationManager } from "@modrinth/ui";
+import { formatProjectType } from "@modrinth/utils";
 import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
-import { nags } from "@modrinth/moderation";
-import { ButtonStyled } from "@modrinth/ui";
-import { useVIntl, defineMessages, type MessageDescriptor } from "@vintl/vintl";
-import type { Nag, NagContext, NagStatus } from "@modrinth/moderation";
-import type { Project, User, Version } from "@modrinth/utils";
-import type { Component } from "vue";
 
-interface Tags {
-  rejectedStatuses: string[];
-}
+const props = defineProps({
+  project: {
+    type: Object,
+    required: true,
+  },
+  versions: {
+    type: Array,
+    default() {
+      return [];
+    },
+  },
+  currentMember: {
+    type: Object,
+    default: null,
+  },
+  allMembers: {
+    type: Object,
+    default: null,
+  },
+  isSettings: {
+    type: Boolean,
+    default: false,
+  },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+  routeName: {
+    type: String,
+    default: "",
+  },
+  auth: {
+    type: Object,
+    required: true,
+  },
+  tags: {
+    type: Object,
+    required: true,
+  },
+  setProcessing: {
+    type: Function,
+    default() {
+      return () => {
+        const { addNotification } = injectNotificationManager();
+        addNotification({
+          title: "An error occurred",
+          text: "setProcessing function not found",
+          type: "error",
+        });
+      };
+    },
+  },
+  toggleCollapsed: {
+    type: Function,
+    default() {
+      return () => {
+        const { addNotification } = injectNotificationManager();
+        addNotification({
+          title: "An error occurred",
+          text: "toggleCollapsed function not found",
+          type: "error",
+        });
+      };
+    },
+  },
+  updateMembers: {
+    type: Function,
+    default() {
+      return () => {
+        const { addNotification } = injectNotificationManager();
+        addNotification({
+          title: "An error occurred",
+          text: "updateMembers function not found",
+          type: "error",
+        });
+      };
+    },
+  },
+});
 
-interface Auth {
-  user: {
-    id: string;
-  };
-}
+const featuredGalleryImage = computed(() => props.project.gallery.find((img) => img.featured));
 
-interface Member {
-  accepted?: boolean;
-  project_role?: string;
-  user?: Partial<User>;
-}
-
-interface Props {
-  project: Project;
-  versions?: Version[];
-  currentMember?: Member | null;
-  allMembers?: Member[] | null;
-  isSettings?: boolean;
-  collapsed?: boolean;
-  routeName?: string;
-  auth: Auth;
-  tags: Tags;
-  setProcessing?: (processing: boolean) => void;
-  toggleCollapsed?: () => void;
-  updateMembers?: () => void | Promise<void>;
-}
-
-const messages = defineMessages({
-  invitationTitle: {
-    id: "project-member-header.invitation-title",
-    defaultMessage: "Invitation to join project",
+const nags = computed(() => [
+  {
+    condition: props.versions.length < 1,
+    title: "Upload a version",
+    id: "upload-version",
+    description: "At least one version is required for a project to be submitted for review.",
+    status: "required",
+    link: {
+      path: "versions",
+      title: "Visit versions page",
+      hide: props.routeName === "type-id-versions",
+    },
   },
-  invitationWithRole: {
-    id: "project-member-header.invitation-with-role",
-    defaultMessage: "You've been invited be a member of this project with the role of '{role}'.",
+  {
+    condition:
+      props.project.body === "" || props.project.body.startsWith("# Placeholder description"),
+    title: "Add a description",
+    id: "add-description",
+    description:
+      "A description that clearly describes the project's purpose and function is required.",
+    status: "required",
+    link: {
+      path: "settings/description",
+      title: "Visit description settings",
+      hide: props.routeName === "type-id-settings-description",
+    },
   },
-  invitationNoRole: {
-    id: "project-member-header.invitation-no-role",
-    defaultMessage:
-      "You've been invited to join this project. Please accept or decline the invitation.",
+  {
+    condition: !props.project.icon_url,
+    title: "Add an icon",
+    id: "add-icon",
+    description:
+      "Your project should have a nice-looking icon to uniquely identify your project at a glance.",
+    status: "suggestion",
+    link: {
+      path: "settings",
+      title: "Visit general settings",
+      hide: props.routeName === "type-id-settings",
+    },
   },
-  accept: {
-    id: "project-member-header.accept",
-    defaultMessage: "Accept",
+  {
+    condition: props.project.gallery.length === 0 || !featuredGalleryImage,
+    title: "Feature a gallery image",
+    id: "feature-gallery-image",
+    description: "Featured gallery images may be the first impression of many users.",
+    status: "suggestion",
+    link: {
+      path: "gallery",
+      title: "Visit gallery page",
+      hide: props.routeName === "type-id-gallery",
+    },
   },
-  decline: {
-    id: "project-member-header.decline",
-    defaultMessage: "Decline",
+  {
+    hide: props.project.versions.length === 0,
+    condition: props.project.categories.length < 1,
+    title: "Select tags",
+    id: "select-tags",
+    description: "Select all tags that apply to your project.",
+    status: "suggestion",
+    link: {
+      path: "settings/tags",
+      title: "Visit tag settings",
+      hide: props.routeName === "type-id-settings-tags",
+    },
   },
-  publishingChecklist: {
-    id: "project-member-header.publishing-checklist",
-    defaultMessage: "Publishing checklist",
+  {
+    condition: !(
+      props.project.issues_url ||
+      props.project.source_url ||
+      props.project.wiki_url ||
+      props.project.discord_url ||
+      props.project.donation_urls.length > 0
+    ),
+    title: "Add external links",
+    id: "add-links",
+    description:
+      "Add any relevant links targeted outside of Modrinth, such as sources, issues, or a Discord invite.",
+    status: "suggestion",
+    link: {
+      path: "settings/links",
+      title: "Visit links settings",
+      hide: props.routeName === "type-id-settings-links",
+    },
   },
-  submitForReview: {
-    id: "project-member-header.submit-for-review",
-    defaultMessage: "Submit for review",
+  {
+    hide:
+      props.project.versions.length === 0 ||
+      props.project.project_type === "resourcepack" ||
+      props.project.project_type === "plugin" ||
+      props.project.project_type === "shader" ||
+      props.project.project_type === "datapack",
+    condition:
+      props.project.client_side === "unknown" ||
+      props.project.server_side === "unknown" ||
+      (props.project.client_side === "unsupported" && props.project.server_side === "unsupported"),
+    title: "Select supported environments",
+    id: "select-environments",
+    description: `Select if the ${formatProjectType(
+      props.project.project_type,
+    ).toLowerCase()} functions on the client-side and/or server-side.`,
+    status: "required",
+    link: {
+      path: "settings",
+      title: "Visit general settings",
+      hide: props.routeName === "type-id-settings",
+    },
   },
-  submitForReviewDesc: {
-    id: "project-member-header.submit-for-review-desc",
-    defaultMessage:
+  {
+    condition: props.project.license.id === "LicenseRef-Unknown",
+    title: "Select license",
+    id: "select-license",
+    description: `Select the license your ${formatProjectType(
+      props.project.project_type,
+    ).toLowerCase()} is distributed under.`,
+    status: "required",
+    link: {
+      path: "settings/license",
+      title: "Visit license settings",
+      hide: props.routeName === "type-id-settings-license",
+    },
+  },
+  {
+    condition: props.project.status === "draft",
+    title: "Submit for review",
+    id: "submit-for-review",
+    description:
       "Your project is only viewable by members of the project. It must be reviewed by moderators in order to be published.",
+    status: "review",
+    link: null,
+    action: {
+      onClick: submitForReview,
+      title: "Submit for review",
+      disabled: () => nags.value.filter((x) => x.condition && x.status === "required").length > 0,
+    },
   },
-  resubmitForReview: {
-    id: "project-member-header.resubmit-for-review",
-    defaultMessage: "Resubmit for review",
+  {
+    hide: props.project.stats === "draft",
+    condition: props.tags.rejectedStatuses.includes(props.project.status),
+    title: "Resubmit for review",
+    id: "resubmit-for-review",
+    description: `Your project has been ${props.project.status} by
+            Modrinth's staff. In most cases, you can resubmit for review after
+            addressing the staff's message.`,
+    status: "review",
+    link: {
+      path: "moderation",
+      title: "Visit moderation page",
+      hide: props.routeName === "type-id-moderation",
+    },
   },
-  resubmitForReviewDesc: {
-    id: "project-member-header.resubmit-for-review-desc",
-    defaultMessage:
-      "Your project has been {status} by Modrinth's staff. In most cases, you can resubmit for review after addressing the staff's message.",
-  },
-  visitModerationPage: {
-    id: "project-member-header.visit-moderation-page",
-    defaultMessage: "Visit moderation page",
-  },
-  submitChecklistTooltip: {
-    id: "project-member-header.submit-checklist-tooltip",
-    defaultMessage: "You must complete the required steps in the publishing checklist!",
-  },
-  successJoin: {
-    id: "project-member-header.success-join",
-    defaultMessage: "You have joined the project team",
-  },
-  errorJoin: {
-    id: "project-member-header.error-join",
-    defaultMessage: "Failed to accept team invitation",
-  },
-  successDecline: {
-    id: "project-member-header.success-decline",
-    defaultMessage: "You have declined the team invitation",
-  },
-  errorDecline: {
-    id: "project-member-header.error-decline",
-    defaultMessage: "Failed to decline team invitation",
-  },
-  success: {
-    id: "project-member-header.success",
-    defaultMessage: "Success",
-  },
-  error: {
-    id: "project-member-header.error",
-    defaultMessage: "Error",
-  },
-  required: {
-    id: "project-member-header.required",
-    defaultMessage: "Required",
-  },
-  warning: {
-    id: "project-member-header.warning",
-    defaultMessage: "Warning",
-  },
-  suggestion: {
-    id: "project-member-header.suggestion",
-    defaultMessage: "Suggestion",
-  },
-});
+]);
 
-const { formatMessage } = useVIntl();
-
-function getNagDescription(nag: Nag): string {
-  if (typeof nag.description === "function") {
-    return nag.description(nagContext.value);
-  }
-  return formatMessage(nag.description);
-}
-
-function getFormattedMessage(message: string | MessageDescriptor): string {
-  if (typeof message === "string") {
-    return message;
-  }
-  return formatMessage(message);
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  versions: () => [],
-  currentMember: null,
-  allMembers: null,
-  isSettings: false,
-  collapsed: false,
-  routeName: "",
-});
-
-const emit = defineEmits<{
-  toggleCollapsed: [];
-  updateMembers: [];
-  setProcessing: [processing: boolean];
-}>();
-
-const nagContext = computed<NagContext>(() => ({
-  project: props.project,
-  versions: props.versions,
-  currentMember: props.currentMember as User,
-  currentRoute: props.routeName,
-  tags: props.tags,
-  submitProject: submitForReview,
-}));
-
-const canSubmitForReview = computed(() => {
-  return (
-    applicableNags.value.filter((nag) => nag.status === "required" && !isNagComplete(nag))
-      .length === 0
-  );
-});
-
-async function submitForReview() {
-  if (canSubmitForReview) {
-    await setProcessing(true);
-  }
-}
-
-const applicableNags = computed<Nag[]>(() => {
-  return nags.filter((nag) => {
-    return nag.shouldShow(nagContext.value);
-  });
-});
-
-function isNagComplete(nag: Nag): boolean {
-  const context = nagContext.value;
-  return !nag.shouldShow(context);
-}
-
-const visibleNags = computed<Nag[]>(() => {
-  const finalNags = applicableNags.value.filter((nag) => !isNagComplete(nag));
-
-  if (props.project.status === "draft") {
-    finalNags.push({
-      id: "submit-for-review",
-      title: messages.submitForReview,
-      description: () => formatMessage(messages.submitForReviewDesc),
-      status: "special-submit-action",
-      shouldShow: (ctx) => ctx.project.status === "draft",
-    });
-  }
-
-  if (props.tags.rejectedStatuses.includes(props.project.status)) {
-    finalNags.push({
-      id: "resubmit-for-review",
-      title: messages.resubmitForReview,
-      description: (ctx) =>
-        formatMessage(messages.resubmitForReviewDesc, { status: ctx.project.status }),
-      status: "special-submit-action",
-      shouldShow: (ctx) => ctx.tags.rejectedStatuses.includes(ctx.project.status),
-      link: {
-        path: "moderation",
-        title: messages.visitModerationPage,
-        shouldShow: () => props.routeName !== "type-id-moderation",
-      },
-    });
-  }
-
-  return finalNags;
-});
-
-function shouldShowLink(nag: Nag): boolean {
-  return nag.link?.shouldShow ? nag.link.shouldShow(nagContext.value) : false;
-}
-
-function getDefaultIcon(status: NagStatus): Component {
-  switch (status) {
-    case "required":
-      return AsteriskIcon;
-    case "warning":
-      return TriangleAlertIcon;
-    case "suggestion":
-      return LightBulbIcon;
-    case "special-submit-action":
-      return ScaleIcon;
-    default:
-      return AsteriskIcon;
-  }
-}
-
-function getStatusTooltip(status: NagStatus): string {
-  switch (status) {
-    case "required":
-      return formatMessage(messages.required);
-    case "warning":
-      return formatMessage(messages.warning);
-    case "suggestion":
-      return formatMessage(messages.suggestion);
-    default:
-      return formatMessage(messages.required);
-  }
-}
-
-const showInvitation = computed<boolean>(() => {
+const showInvitation = computed(() => {
   if (props.allMembers && props.auth) {
-    const member = props.allMembers.find((x) => x?.user?.id === props.auth.user.id);
-    return !!member && !member.accepted;
+    const member = props.allMembers.find((x) => x.user.id === props.auth.user.id);
+    return member && !member.accepted;
   }
   return false;
 });
 
-function toggleCollapsed(): void {
-  if (props.toggleCollapsed) {
-    props.toggleCollapsed();
-  } else {
-    emit("toggleCollapsed");
-  }
-}
+const acceptInvite = () => {
+  acceptTeamInvite(props.project.team);
+  props.updateMembers();
+};
 
-async function updateMembers(): Promise<void> {
-  if (props.updateMembers) {
-    await props.updateMembers();
-  } else {
-    emit("updateMembers");
-  }
-}
+const declineInvite = () => {
+  removeTeamMember(props.project.team, props.auth.user.id);
+  props.updateMembers();
+};
 
-function setProcessing(processing: boolean): void {
-  if (props.setProcessing) {
-    props.setProcessing(processing);
-  } else {
-    emit("setProcessing", processing);
+const submitForReview = async () => {
+  if (
+    !props.acknowledgedMessage ||
+    nags.value.filter((x) => x.condition && x.status === "required").length === 0
+  ) {
+    await props.setProcessing();
   }
-}
-
-async function acceptInvite(): Promise<void> {
-  try {
-    setProcessing(true);
-    await acceptTeamInvite(props.project.team);
-    await updateMembers();
-    addNotification({
-      group: "main",
-      title: formatMessage(messages.success),
-      text: formatMessage(messages.successJoin),
-      type: "success",
-    });
-  } catch (error) {
-    addNotification({
-      group: "main",
-      title: formatMessage(messages.error),
-      text: formatMessage(messages.errorJoin),
-      type: "error",
-    });
-  } finally {
-    setProcessing(false);
-  }
-}
-
-async function declineInvite(): Promise<void> {
-  try {
-    setProcessing(true);
-    await removeTeamMember(props.project.team, props.auth.user.id);
-    await updateMembers();
-    addNotification({
-      group: "main",
-      title: formatMessage(messages.success),
-      text: formatMessage(messages.successDecline),
-      type: "success",
-    });
-  } catch (error) {
-    addNotification({
-      group: "main",
-      title: formatMessage(messages.error),
-      text: formatMessage(messages.errorDecline),
-      type: "error",
-    });
-  } finally {
-    setProcessing(false);
-  }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.duration-250 {
-  transition-duration: 250ms;
+.invited {
+}
+
+.author-actions {
+  margin-top: var(--spacing-card-md);
+
+  &:empty {
+    display: none;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  .header__row {
+    align-items: center;
+    column-gap: var(--spacing-card-lg);
+    row-gap: var(--spacing-card-md);
+    max-width: 100%;
+
+    .header__title {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      column-gap: var(--spacing-card-lg);
+      row-gap: var(--spacing-card-md);
+      flex-basis: min-content;
+
+      h2 {
+        margin: 0 auto 0 0;
+      }
+    }
+
+    button {
+      svg {
+        transition: transform 0.25s ease-in-out;
+      }
+
+      &.not-collapsed svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .grid-display__item .label {
+    display: flex;
+    gap: var(--spacing-card-xs);
+    align-items: center;
+
+    .required {
+      color: var(--color-red);
+    }
+
+    .suggestion {
+      color: var(--color-purple);
+    }
+
+    .review {
+      color: var(--color-orange);
+    }
+  }
+
+  .checklist {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-card-xs);
+    width: fit-content;
+    flex-wrap: wrap;
+    max-width: 100%;
+
+    .checklist__title {
+      font-weight: bold;
+      margin-right: var(--spacing-card-xs);
+      color: var(--color-text-dark);
+    }
+
+    .checklist__items {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--spacing-card-xs);
+      width: fit-content;
+      max-width: 100%;
+    }
+
+    .circle {
+      --circle-size: 2rem;
+      --background-color: var(--color-bg);
+      --content-color: var(--color-gray);
+      width: var(--circle-size);
+      height: var(--circle-size);
+      border-radius: 50%;
+      background-color: var(--background-color);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        color: var(--content-color);
+        width: calc(var(--circle-size) / 2);
+        height: calc(var(--circle-size) / 2);
+      }
+
+      &.required {
+        --content-color: var(--color-red);
+      }
+
+      &.suggestion {
+        --content-color: var(--color-purple);
+      }
+
+      &.review {
+        --content-color: var(--color-orange);
+      }
+
+      &.done {
+        --background-color: var(--color-green);
+        --content-color: var(--color-brand-inverted);
+      }
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,182 @@
+<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

@@ -0,0 +1,204 @@
+<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

@@ -0,0 +1,278 @@
+<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>

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

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import NewModal from "@modrinth/ui/src/components/modal/NewModal.vue";
 import { keybinds, type KeybindListener, normalizeKeybind } from "@modrinth/moderation";
 
@@ -64,7 +64,7 @@ function parseKeybindDisplay(keybind: KeybindListener["keybind"]): string[] {
 }
 
 function isMac() {
-  return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  return navigator.platform.toUpperCase().includes("MAC");
 }
 
 function show(event?: MouseEvent) {

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

@@ -42,9 +42,9 @@
         <div v-if="done">
           <p>
             You are done moderating this project!
-            <template v-if="futureProjectCount > 0">
+            <template v-if="moderationStore.hasItems">
               There are
-              {{ futureProjectCount }} left.
+              {{ moderationStore.queueLength }} left.
             </template>
           </p>
         </div>
@@ -98,7 +98,7 @@
             <div v-if="toggleActions.length > 0" class="toggle-actions-group space-y-3">
               <template v-for="action in toggleActions" :key="getActionKey(action)">
                 <Checkbox
-                  :model-value="actionStates[getActionId(action)]?.selected ?? false"
+                  :model-value="isActionSelected(action)"
                   :label="action.label"
                   :description="action.description"
                   :disabled="false"
@@ -215,49 +215,31 @@
           class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-divider pt-4"
         >
           <div class="flex items-center gap-2">
-            <ButtonStyled v-if="!done && !generatedMessage && futureProjectCount > 0">
-              <button @click="goToNextProject">
+            <ButtonStyled v-if="!done && !generatedMessage && moderationStore.hasItems">
+              <button @click="skipCurrentProject">
                 <XIcon aria-hidden="true" />
-                Skip
+                Skip ({{ moderationStore.queueLength }} left)
               </button>
             </ButtonStyled>
           </div>
 
           <div class="flex items-center gap-2">
             <div v-if="done">
-              <ButtonStyled v-if="futureProjectCount > 0" color="brand">
-                <button @click="goToNextProject">
-                  <RightArrowIcon aria-hidden="true" />
-                  Next Project
-                </button>
-              </ButtonStyled>
-              <ButtonStyled v-else color="brand">
-                <button @click="exitModeration">
-                  <CheckIcon aria-hidden="true" />
-                  Done
+              <ButtonStyled color="brand">
+                <button @click="endChecklist(undefined)">
+                  <template v-if="hasNextProject">
+                    <RightArrowIcon aria-hidden="true" />
+                    Next Project ({{ moderationStore.queueLength }} left)
+                  </template>
+                  <template v-else>
+                    <CheckIcon aria-hidden="true" />
+                    All Done!
+                  </template>
                 </button>
               </ButtonStyled>
             </div>
 
             <div v-else-if="generatedMessage" class="flex items-center gap-2">
-              <OverflowMenu :options="stageOptions" class="bg-transparent p-0">
-                <ButtonStyled circular>
-                  <button v-tooltip="`Stages`">
-                    <ListBulletedIcon />
-                  </button>
-                </ButtonStyled>
-
-                <template
-                  v-for="opt in stageOptions.filter(
-                    (opt) => 'id' in opt && 'text' in opt && 'icon' in opt,
-                  )"
-                  #[opt.id]
-                  :key="opt.id"
-                >
-                  <component :is="opt.icon" v-if="opt.icon" class="mr-2" />
-                  {{ opt.text }}
-                </template>
-              </OverflowMenu>
               <ButtonStyled>
                 <button @click="goBackToStages">
                   <LeftArrowIcon aria-hidden="true" />
@@ -277,7 +259,7 @@
                 </button>
               </ButtonStyled>
               <ButtonStyled color="green">
-                <button @click="sendMessage('approved')">
+                <button @click="sendMessage(project.requested_status ?? 'approved')">
                   <CheckIcon aria-hidden="true" />
                   Approve
                 </button>
@@ -331,81 +313,80 @@
 
 <script lang="ts" setup>
 import {
-  LeftArrowIcon,
-  RightArrowIcon,
-  DropdownIcon,
-  XIcon,
-  ScaleIcon,
-  ListBulletedIcon,
-  FileTextIcon,
   BrushCleaningIcon,
   CheckIcon,
-  KeyboardIcon,
+  DropdownIcon,
   EyeOffIcon,
+  FileTextIcon,
+  KeyboardIcon,
+  LeftArrowIcon,
+  ListBulletedIcon,
+  RightArrowIcon,
+  ScaleIcon,
+  XIcon,
 } from "@modrinth/assets";
 import {
+  type Action,
+  type ButtonAction,
+  type ConditionalButtonAction,
+  type DropdownAction,
+  type MultiSelectChipsAction,
+  type Stage,
+  type ToggleAction,
   checklist,
-  getActionIdForStage,
-  initializeActionState,
-  getActionMessage,
-  findMatchingVariant,
-  processMessage,
-  getVisibleInputs,
-  serializeActionStates,
   deserializeActionStates,
-  kebabToTitleCase,
-  flattenProjectVariables,
   expandVariables,
+  finalPermissionMessages,
+  findMatchingVariant,
+  flattenProjectVariables,
+  getActionIdForStage,
+  getActionMessage,
+  getVisibleInputs,
   handleKeybind,
+  initializeActionState,
+  kebabToTitleCase,
   keybinds,
+  processMessage,
+  serializeActionStates,
 } from "@modrinth/moderation";
 import {
   ButtonStyled,
-  Collapsible,
-  OverflowMenu,
-  type OverflowMenuOption,
   Checkbox,
+  Collapsible,
   DropdownSelect,
   MarkdownEditor,
+  OverflowMenu,
+  type OverflowMenuOption,
+  injectNotificationManager,
 } from "@modrinth/ui";
-import { type Project, renderHighlightedString, type ModerationJudgements } from "@modrinth/utils";
+import {
+  type ModerationJudgements,
+  type ModerationModpackItem,
+  type Project,
+  renderHighlightedString,
+  type ProjectStatus,
+} from "@modrinth/utils";
 import { computedAsync, useLocalStorage } from "@vueuse/core";
-import type {
-  Action,
-  MultiSelectChipsAction,
-  DropdownAction,
-  ButtonAction,
-  ToggleAction,
-  ConditionalButtonAction,
-  Stage,
-} from "@modrinth/moderation";
-import ModpackPermissionsFlow from "./ModpackPermissionsFlow.vue";
+import * as prettier from "prettier";
+import { useModerationStore } from "~/store/moderation.ts";
 import KeybindsModal from "./ChecklistKeybindsModal.vue";
-import { finalPermissionMessages } from "@modrinth/moderation/data/modpack-permissions-stage";
-import prettier from "prettier";
+import ModpackPermissionsFlow from "./ModpackPermissionsFlow.vue";
+
+const { addNotification } = injectNotificationManager();
 
 const keybindsModal = ref<InstanceType<typeof KeybindsModal>>();
 
-const props = withDefaults(
-  defineProps<{
-    project: Project;
-    futureProjectIds?: string[];
-    collapsed: boolean;
-  }>(),
-  {
-    futureProjectIds: () => [] as string[],
-  },
-);
+const props = defineProps<{
+  project: Project;
+  collapsed: boolean;
+}>();
+
+const moderationStore = useModerationStore();
 
 const variables = computed(() => {
   return flattenProjectVariables(props.project);
 });
 
-const futureProjectCount = computed(() => {
-  const ids = JSON.parse(localStorage.getItem("moderation-future-projects") || "[]");
-  return ids.length;
-});
-
 const modpackPermissionsComplete = ref(false);
 const modpackJudgements = ref<ModerationJudgements>({});
 const isModpackPermissionsStage = computed(() => {
@@ -419,7 +400,6 @@ const done = ref(false);
 
 function handleModpackPermissionsComplete() {
   modpackPermissionsComplete.value = true;
-  nextStage();
 }
 
 const emit = defineEmits<{
@@ -530,7 +510,7 @@ function handleKeybinds(event: KeyboardEvent) {
         isLoadingMessage: loadingMessage.value,
         isModpackPermissionsStage: isModpackPermissionsStage.value,
 
-        futureProjectCount: futureProjectCount.value,
+        futureProjectCount: moderationStore.queueLength,
         visibleActionsCount: visibleActions.value.length,
 
         focusedActionIndex: focusedActionIndex.value,
@@ -543,13 +523,13 @@ function handleKeybinds(event: KeyboardEvent) {
         tryGoNext: nextStage,
         tryGoBack: previousStage,
         tryGenerateMessage: generateMessage,
-        trySkipProject: goToNextProject,
+        trySkipProject: skipCurrentProject,
 
         tryToggleCollapse: () => emit("toggleCollapsed"),
         tryResetProgress: resetProgress,
         tryExitModeration: () => emit("exit"),
 
-        tryApprove: () => sendMessage("approved"),
+        tryApprove: () => sendMessage(props.project.requested_status),
         tryReject: () => sendMessage("rejected"),
         tryWithhold: () => sendMessage("withheld"),
         tryEditMessage: goBackToStages,
@@ -666,12 +646,17 @@ function initializeStageActions(stage: Stage, stageIndex: number) {
 }
 
 function getActionId(action: Action, index?: number): string {
+  // If index is not provided, find it in the current stage's actions
+  if (index === undefined) {
+    index = currentStageObj.value.actions.indexOf(action);
+  }
   return getActionIdForStage(action, currentStage.value, index);
 }
 
 function getActionKey(action: Action): string {
-  const index = visibleActions.value.indexOf(action);
-  return `${currentStage.value}-${index}-${getActionId(action)}`;
+  // Find the actual index of this action in the current stage's actions array
+  const index = currentStageObj.value.actions.indexOf(action);
+  return `${currentStage.value}-${index}-${getActionId(action, index)}`;
 }
 
 const visibleActions = computed(() => {
@@ -741,7 +726,8 @@ const multiSelectActions = computed(() =>
 );
 
 function getDropdownValue(action: DropdownAction) {
-  const actionId = getActionId(action);
+  const actionIndex = currentStageObj.value.actions.indexOf(action);
+  const actionId = getActionId(action, actionIndex);
   const visibleOptions = getVisibleDropdownOptions(action);
   const currentValue = actionStates.value[actionId]?.value ?? action.defaultOption ?? 0;
 
@@ -756,12 +742,14 @@ function getDropdownValue(action: DropdownAction) {
 }
 
 function isActionSelected(action: Action): boolean {
-  const actionId = getActionId(action);
+  const actionIndex = currentStageObj.value.actions.indexOf(action);
+  const actionId = getActionId(action, actionIndex);
   return actionStates.value[actionId]?.selected || false;
 }
 
 function toggleAction(action: Action) {
-  const actionId = getActionId(action);
+  const actionIndex = currentStageObj.value.actions.indexOf(action);
+  const actionId = getActionId(action, actionIndex);
   const state = actionStates.value[actionId];
   if (state) {
     state.selected = !state.selected;
@@ -770,7 +758,8 @@ function toggleAction(action: Action) {
 }
 
 function selectDropdownOption(action: DropdownAction, selected: any) {
-  const actionId = getActionId(action);
+  const actionIndex = currentStageObj.value.actions.indexOf(action);
+  const actionId = getActionId(action, actionIndex);
   const state = actionStates.value[actionId];
   if (state && selected !== undefined && selected !== null) {
     const optionIndex = action.options.findIndex(
@@ -786,7 +775,8 @@ function selectDropdownOption(action: DropdownAction, selected: any) {
 }
 
 function isChipSelected(action: MultiSelectChipsAction, optionIndex: number): boolean {
-  const actionId = getActionId(action);
+  const actionIndex = currentStageObj.value.actions.indexOf(action);
+  const actionId = getActionId(action, actionIndex);
   const selectedSet = actionStates.value[actionId]?.value as Set<number> | undefined;
 
   const visibleOptions = getVisibleMultiSelectOptions(action);
@@ -797,7 +787,8 @@ function isChipSelected(action: MultiSelectChipsAction, optionIndex: number): bo
 }
 
 function toggleChip(action: MultiSelectChipsAction, optionIndex: number) {
-  const actionId = getActionId(action);
+  const actionIndex = currentStageObj.value.actions.indexOf(action);
+  const actionId = getActionId(action, actionIndex);
   const state = actionStates.value[actionId];
   if (state && state.value instanceof Set) {
     const visibleOptions = getVisibleMultiSelectOptions(action);
@@ -823,6 +814,31 @@ const isAnyVisibleInputs = computed(() => {
   });
 });
 
+function getModpackFilesFromStorage(): {
+  interactive: ModerationModpackItem[];
+  permanentNo: ModerationModpackItem[];
+} {
+  try {
+    const sessionData = sessionStorage.getItem(`modpack-permissions-data-${props.project.id}`);
+    const interactive = sessionData ? (JSON.parse(sessionData) as ModerationModpackItem[]) : [];
+
+    const permanentNoData = sessionStorage.getItem(
+      `modpack-permissions-permanent-no-${props.project.id}`,
+    );
+    const permanentNo = permanentNoData
+      ? (JSON.parse(permanentNoData) as ModerationModpackItem[])
+      : [];
+
+    return {
+      interactive: interactive || [],
+      permanentNo: permanentNo || [],
+    };
+  } catch (error) {
+    console.warn("Failed to parse session storage modpack data:", error);
+    return { interactive: [], permanentNo: [] };
+  }
+}
+
 async function assembleFullMessage() {
   const messageParts: MessagePart[] = [];
 
@@ -1045,7 +1061,7 @@ function nextStage() {
   if (isModpackPermissionsStage.value && !modpackPermissionsComplete.value) {
     addNotification({
       title: "Modpack permissions stage unfinished",
-      message: "Please complete the modpack permissions stage before proceeding.",
+      text: "Please complete the modpack permissions stage before proceeding.",
       type: "error",
     });
 
@@ -1092,13 +1108,14 @@ async function generateMessage() {
     const baseMessage = await assembleFullMessage();
     let fullMessage = baseMessage;
 
-    if (
-      props.project.project_type === "modpack" &&
-      Object.keys(modpackJudgements.value).length > 0
-    ) {
-      const modpackMessage = generateModpackMessage(modpackJudgements.value);
-      if (modpackMessage) {
-        fullMessage = baseMessage ? `${baseMessage}\n\n${modpackMessage}` : modpackMessage;
+    if (props.project.project_type === "modpack") {
+      const modpackFilesData = getModpackFilesFromStorage();
+
+      if (modpackFilesData.interactive.length > 0 || modpackFilesData.permanentNo.length > 0) {
+        const modpackMessage = generateModpackMessage(modpackFilesData);
+        if (modpackMessage) {
+          fullMessage = baseMessage ? `${baseMessage}\n\n${modpackMessage}` : modpackMessage;
+        }
       }
     }
 
@@ -1121,7 +1138,7 @@ async function generateMessage() {
     console.error("Error generating message:", error);
     addNotification({
       title: "Error generating message",
-      message: "Failed to generate moderation message. Please try again.",
+      text: "Failed to generate moderation message. Please try again.",
       type: "error",
     });
   } finally {
@@ -1129,25 +1146,34 @@ async function generateMessage() {
   }
 }
 
-function generateModpackMessage(judgements: ModerationJudgements) {
+function generateModpackMessage(allFiles: {
+  interactive: ModerationModpackItem[];
+  permanentNo: ModerationModpackItem[];
+}) {
   const issues = [];
 
-  const attributeMods = [];
-  const noMods = [];
-  const permanentNoMods = [];
-  const unidentifiedMods = [];
+  const attributeMods: string[] = [];
+  const noMods: string[] = [];
+  const permanentNoMods: string[] = [];
+  const unidentifiedMods: string[] = [];
 
-  for (const [, judgement] of Object.entries(judgements)) {
-    if (judgement.status === "with-attribution") {
-      attributeMods.push(judgement.file_name);
-    } else if (judgement.status === "no") {
-      noMods.push(judgement.file_name);
-    } else if (judgement.status === "permanent-no") {
-      permanentNoMods.push(judgement.file_name);
-    } else if (judgement.status === "unidentified") {
-      unidentifiedMods.push(judgement.file_name);
+  allFiles.interactive.forEach((file) => {
+    if (file.status === "unidentified") {
+      if (file.approved === "no") {
+        unidentifiedMods.push(file.file_name);
+      }
+    } else if (file.status === "with-attribution" && file.approved === "no") {
+      attributeMods.push(file.file_name);
+    } else if (file.status === "no" && file.approved === "no") {
+      noMods.push(file.file_name);
+    } else if (file.status === "permanent-no") {
+      permanentNoMods.push(file.file_name);
     }
-  }
+  });
+
+  allFiles.permanentNo.forEach((file) => {
+    permanentNoMods.push(file.file_name);
+  });
 
   if (
     attributeMods.length > 0 ||
@@ -1157,6 +1183,12 @@ function generateModpackMessage(judgements: ModerationJudgements) {
   ) {
     issues.push("## Copyrighted content");
 
+    if (unidentifiedMods.length > 0) {
+      issues.push(
+        `${finalPermissionMessages.unidentified}\n${unidentifiedMods.map((mod) => `- ${mod}`).join("\n")}`,
+      );
+    }
+
     if (attributeMods.length > 0) {
       issues.push(
         `${finalPermissionMessages["with-attribution"]}\n${attributeMods.map((mod) => `- ${mod}`).join("\n")}`,
@@ -1172,18 +1204,13 @@ function generateModpackMessage(judgements: ModerationJudgements) {
         `${finalPermissionMessages["permanent-no"]}\n${permanentNoMods.map((mod) => `- ${mod}`).join("\n")}`,
       );
     }
-
-    if (unidentifiedMods.length > 0) {
-      issues.push(
-        `${finalPermissionMessages["unidentified"]}\n${unidentifiedMods.map((mod) => `- ${mod}`).join("\n")}`,
-      );
-    }
   }
 
   return issues.join("\n\n");
 }
 
-async function sendMessage(status: "approved" | "rejected" | "withheld") {
+const hasNextProject = ref(false);
+async function sendMessage(status: ProjectStatus) {
   try {
     await useBaseFetch(`project/${props.project.id}`, {
       method: "PATCH",
@@ -1217,55 +1244,73 @@ async function sendMessage(status: "approved" | "rejected" | "withheld") {
 
     done.value = true;
 
-    // Clear local storage for future reviews
-    localStorage.removeItem(`modpack-permissions-${props.project.id}`);
-    localStorage.removeItem(`modpack-permissions-index-${props.project.id}`);
-    localStorage.removeItem(`moderation-actions-${props.project.slug}`);
-    localStorage.removeItem(`moderation-inputs-${props.project.slug}`);
-    actionStates.value = {};
-
-    addNotification({
-      title: "Moderation submitted",
-      message: `Project ${status} successfully.`,
-      type: "success",
-    });
+    hasNextProject.value = await moderationStore.completeCurrentProject(
+      props.project.id,
+      "completed",
+    );
   } catch (error) {
     console.error("Error submitting moderation:", error);
     addNotification({
       title: "Error submitting moderation",
-      message: "Failed to submit moderation decision. Please try again.",
+      text: "Failed to submit moderation decision. Please try again.",
       type: "error",
     });
   }
 }
 
-async function goToNextProject() {
-  const currentIds = JSON.parse(localStorage.getItem("moderation-future-projects") || "[]");
+async function endChecklist(status?: string) {
+  clearProjectLocalStorage();
 
-  if (currentIds.length === 0) {
-    await navigateTo("/moderation/review");
-    return;
+  if (!hasNextProject.value) {
+    await navigateTo({
+      name: "moderation",
+      state: {
+        confetti: true,
+      },
+    });
+
+    await nextTick();
+
+    if (moderationStore.currentQueue.total > 1) {
+      addNotification({
+        title: "Moderation completed",
+        text: `You have completed the moderation queue.`,
+        type: "success",
+      });
+    } else {
+      addNotification({
+        title: "Moderation submitted",
+        text: `Project ${status ?? "completed successfully"}.`,
+        type: "success",
+      });
+    }
+  } else {
+    navigateTo({
+      name: "type-id",
+      params: {
+        type: "project",
+        id: moderationStore.getCurrentProjectId(),
+      },
+      state: {
+        showChecklist: true,
+      },
+    });
   }
-
-  const nextProjectId = currentIds[0];
-  const remainingIds = currentIds.slice(1);
-
-  localStorage.setItem("moderation-future-projects", JSON.stringify(remainingIds));
-
-  await router.push({
-    name: "type-id",
-    params: {
-      type: "project",
-      id: nextProjectId,
-    },
-    state: {
-      showChecklist: true,
-    },
-  });
 }
 
-async function exitModeration() {
-  await navigateTo("/moderation/review");
+async function skipCurrentProject() {
+  hasNextProject.value = await moderationStore.completeCurrentProject(props.project.id, "skipped");
+
+  await endChecklist("skipped");
+}
+
+function clearProjectLocalStorage() {
+  localStorage.removeItem(`modpack-permissions-${props.project.id}`);
+  localStorage.removeItem(`modpack-permissions-index-${props.project.id}`);
+  localStorage.removeItem(`moderation-actions-${props.project.slug}`);
+  localStorage.removeItem(`moderation-inputs-${props.project.slug}`);
+  localStorage.removeItem(`moderation-stage-${props.project.slug}`);
+  actionStates.value = {};
 }
 
 const isLastVisibleStage = computed(() => {

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

@@ -8,7 +8,7 @@
     <div v-if="!modPackData">Loading data...</div>
 
     <div v-else-if="modPackData.length === 0">
-      <p>All permissions obtained. You may skip this step!</p>
+      <p>All permissions already obtained.</p>
     </div>
 
     <div v-else-if="!modPackData[currentIndex]">
@@ -157,7 +157,7 @@ import type {
 } from "@modrinth/utils";
 import { ButtonStyled } from "@modrinth/ui";
 import { ref, computed, watch, onMounted } from "vue";
-import { useLocalStorage } from "@vueuse/core";
+import { useLocalStorage, useSessionStorage } from "@vueuse/core";
 
 const props = defineProps<{
   projectId: string;
@@ -182,7 +182,26 @@ const persistedModPackData = useLocalStorage<ModerationModpackItem[] | null>(
 
 const persistedIndex = useLocalStorage<number>(`modpack-permissions-index-${props.projectId}`, 0);
 
-const modPackData = ref<ModerationModpackItem[] | null>(null);
+const modPackData = useSessionStorage<ModerationModpackItem[] | null>(
+  `modpack-permissions-data-${props.projectId}`,
+  null,
+  {
+    serializer: {
+      read: (v: any) => (v ? JSON.parse(v) : null),
+      write: (v: any) => JSON.stringify(v),
+    },
+  },
+);
+const permanentNoFiles = useSessionStorage<ModerationModpackItem[]>(
+  `modpack-permissions-permanent-no-${props.projectId}`,
+  [],
+  {
+    serializer: {
+      read: (v: any) => (v ? JSON.parse(v) : []),
+      write: (v: any) => JSON.stringify(v),
+    },
+  },
+);
 const currentIndex = ref(0);
 
 const fileApprovalTypes: ModerationModpackPermissionApprovalType[] = [
@@ -251,7 +270,45 @@ async function fetchModPackData(): Promise<void> {
     const data = (await useBaseFetch(`moderation/project/${props.projectId}`, {
       internal: true,
     })) as ModerationModpackResponse;
+
+    const permanentNoItems: ModerationModpackItem[] = Object.entries(data.identified || {})
+      .filter(([_, file]) => file.status === "permanent-no")
+      .map(
+        ([sha1, file]): ModerationModpackItem => ({
+          sha1,
+          file_name: file.file_name,
+          type: "identified",
+          status: file.status,
+          approved: null,
+        }),
+      )
+      .sort((a, b) => a.file_name.localeCompare(b.file_name));
+
+    permanentNoFiles.value = permanentNoItems;
+
     const sortedData: ModerationModpackItem[] = [
+      ...Object.entries(data.identified || {})
+        .filter(
+          ([_, file]) =>
+            file.status !== "yes" &&
+            file.status !== "with-attribution-and-source" &&
+            file.status !== "permanent-no",
+        )
+        .map(
+          ([sha1, file]): ModerationModpackItem => ({
+            sha1,
+            file_name: file.file_name,
+            type: "identified",
+            status: file.status,
+            approved: null,
+            ...(file.status === "unidentified" && {
+              proof: "",
+              url: "",
+              title: "",
+            }),
+          }),
+        )
+        .sort((a, b) => a.file_name.localeCompare(b.file_name)),
       ...Object.entries(data.unknown_files || {})
         .map(
           ([sha1, fileName]): ModerationUnknownModpackItem => ({
@@ -310,6 +367,7 @@ async function fetchModPackData(): Promise<void> {
   } catch (error) {
     console.error("Failed to fetch modpack data:", error);
     modPackData.value = [];
+    permanentNoFiles.value = [];
     persistAll();
   }
 }
@@ -321,6 +379,14 @@ function goToPrevious(): void {
   }
 }
 
+watch(
+  modPackData,
+  (newValue) => {
+    persistedModPackData.value = newValue;
+  },
+  { deep: true },
+);
+
 function goToNext(): void {
   if (modPackData.value && currentIndex.value < modPackData.value.length) {
     currentIndex.value++;
@@ -396,6 +462,17 @@ onMounted(() => {
   }
 });
 
+watch(
+  modPackData,
+  (newValue) => {
+    if (newValue && newValue.length === 0) {
+      emit("complete");
+      clearPersistedData();
+    }
+  },
+  { immediate: true },
+);
+
 watch(
   () => props.projectId,
   () => {
@@ -406,6 +483,20 @@ watch(
     }
   },
 );
+
+function getModpackFiles(): {
+  interactive: ModerationModpackItem[];
+  permanentNo: ModerationModpackItem[];
+} {
+  return {
+    interactive: modPackData.value || [],
+    permanentNo: permanentNoFiles.value,
+  };
+}
+
+defineExpose({
+  getModpackFiles,
+});
 </script>
 
 <style scoped>

apps/frontend/src/components/ui/report/ReportsList.vue

@@ -1,13 +1,21 @@
 <template>
+  <template v-if="moderation">
+    <Chips v-model="reasonFilter" :items="reasons" />
+    <p v-if="reports.length === MAX_REPORTS" class="text-red">
+      There are at least {{ MAX_REPORTS }} open reports. This page is at its max reports and will
+      not show any more recent ones.
+    </p>
+    <p v-else-if="reasonFilter === 'All'">There are {{ filteredReports.length }} open reports.</p>
+    <p v-else>
+      There are {{ filteredReports.length }}/{{ reports.length }} open '{{ reasonFilter }}' reports.
+    </p>
+  </template>
   <ReportInfo
-    v-for="report in reports.filter(
-      (x) =>
-        (moderation || x.reporterUser.id === auth.user.id) &&
-        (viewMode === 'open' ? x.open : !x.open),
-    )"
+    v-for="report in filteredReports"
     :key="report.id"
     :report="report"
     :thread="report.thread"
+    :show-message="false"
     :moderation="moderation"
     raised
     :auth="auth"
@@ -16,11 +24,12 @@
   <p v-if="reports.length === 0">You don't have any active reports.</p>
 </template>
 <script setup>
+import { Chips } from "@modrinth/ui";
 import ReportInfo from "~/components/ui/report/ReportInfo.vue";
 import { addReportMessage } from "~/helpers/threads.js";
 import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
 
-defineProps({
+const props = defineProps({
   moderation: {
     type: Boolean,
     default: false,
@@ -32,9 +41,14 @@ defineProps({
 });
 
 const viewMode = ref("open");
+const reasonFilter = ref("All");
 const reports = ref([]);
 
-let { data: rawReports } = await useAsyncData("report", () => useBaseFetch("report?count=1000"));
+const MAX_REPORTS = 1500;
+
+let { data: rawReports } = await useAsyncData("report", () =>
+  useBaseFetch(`report?count=${MAX_REPORTS}`),
+);
 
 rawReports = rawReports.value.map((report) => {
   report.item_id = report.item_id.replace(/"/g, "");
@@ -51,6 +65,7 @@ const userIds = [...new Set(reporterUsers.concat(reportedUsers))];
 const threadIds = [
   ...new Set(rawReports.filter((report) => report.thread_id).map((report) => report.thread_id)),
 ];
+const reasons = ["All", ...new Set(rawReports.map((report) => report.report_type))];
 
 const [{ data: users }, { data: versions }, { data: threads }] = await Promise.all([
   await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
@@ -93,4 +108,13 @@ reports.value = rawReports.map((report) => {
   report.open = true;
   return report;
 });
+
+const filteredReports = computed(() =>
+  reports.value?.filter(
+    (x) =>
+      (props.moderation || x.reporterUser.id === props.auth.user.id) &&
+      (viewMode.value === "open" ? x.open : !x.open) &&
+      (reasonFilter.value === "All" || reasonFilter.value === x.report_type),
+  ),
+);
 </script>

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

@@ -42,12 +42,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed } from "vue";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { IssuesIcon, PlusIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager, NewModal } from "@modrinth/ui";
 import { ModrinthServersFetchError, type ServerBackup } from "@modrinth/utils";
+import { computed, nextTick, ref } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
   server: ModrinthServer;
 }>();

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

@@ -45,12 +45,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed } from "vue";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { SpinnerIcon, SaveIcon, XIcon, IssuesIcon } from "@modrinth/assets";
+import { IssuesIcon, SaveIcon, SpinnerIcon, XIcon } from "@modrinth/assets";
+import { ButtonStyled, injectNotificationManager, NewModal } from "@modrinth/ui";
 import type { Backup } from "@modrinth/utils";
+import { computed, nextTick, ref } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
   server: ModrinthServer;
 }>();

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

@@ -17,12 +17,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { ConfirmModal, NewModal } from "@modrinth/ui";
+import { ConfirmModal, injectNotificationManager, NewModal } from "@modrinth/ui";
 import type { Backup } from "@modrinth/utils";
+import { ref } from "vue";
 import BackupItem from "~/components/ui/servers/BackupItem.vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
+const { addNotification } = injectNotificationManager();
+
 const props = defineProps<{
   server: ModrinthServer;
 }>();