Merge commit '99493b9917b5f96c56a014404340b648a9dab2ef' into beta

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.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/astralrinth-build.yml

@@ -96,6 +96,11 @@ jobs:
             librsvg2-dev \
             xdg-utils \
             openjdk-11-jdk
+  
+      - name: ⚙️ Set application environment
+        shell: bash
+        run: |
+          cp packages/app-lib/.env.prod packages/app-lib/.env
 
       - name: 💨 Setup Turbo cache
         uses: rharkor/caching-for-turbo@v1.8

Cargo.toml

@@ -67,7 +67,13 @@ heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
-hyper-tls = "0.6.0"
+hyper = "1.6.0"
+hyper-rustls = { version = "0.27.7", default-features = false, features = [
+  "http1",
+  "native-tokio",
+  "ring",
+  "tls12",
+] }
 hyper-util = "0.1.14"
 iana-time-zone = "0.1.63"
 image = { version = "0.25.6", default-features = false, features = ["rayon"] }
@@ -93,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/src/App.vue

@@ -61,9 +61,10 @@ 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 { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
 import { get_user } from '@/helpers/cache.js'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
+import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
 // import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 // import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
@@ -283,6 +284,8 @@ const incompatibilityWarningModal = ref()
 
 const credentials = ref()
 
+const modrinthLoginFlowWaitModal = ref()
+
 async function fetchCredentials() {
   const creds = await getCreds().catch(handleError)
   if (creds && creds.user_id) {
@@ -292,8 +295,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() {
@@ -422,6 +441,9 @@ function handleAuxClick(e) {
     <Suspense>
       <AppSettingsModal ref="settingsModal" />
     </Suspense>
+    <Suspense>
+      <AuthGrantFlowWaitModal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
+    </Suspense>
     <Suspense>
       <InstanceCreationModal ref="installationModal" />
     </Suspense>

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

@@ -136,7 +136,7 @@ const filteredResults = computed(() => {
 
   if (sortBy.value === 'Game version') {
     instances.sort((a, b) => {
-      return a.game_version.localeCompare(b.game_version)
+      return a.game_version.localeCompare(b.game_version, undefined, { numeric: true })
     })
   }
 
@@ -213,6 +213,17 @@ const filteredResults = computed(() => {
       instanceMap.set(entry[0], entry[1])
     })
   }
+  // default sorting would do 1.20.4 < 1.8.9 because 2 < 8
+  // localeCompare with numeric=true puts 1.8.9 < 1.20.4 because 8 < 20
+  if (group.value === 'Game version') {
+    const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
+      return a[0].localeCompare(b[0], undefined, { numeric: true })
+    })
+    instanceMap.clear()
+    sortedEntries.forEach((entry) => {
+      instanceMap.set(entry[0], entry[1])
+    })
+  }
 
   return instanceMap
 })

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

@@ -1,17 +1,9 @@
 <template>
-  <div
-    v-if="mode !== 'isolated'"
-    ref="button"
+  <div v-if="mode !== 'isolated'" ref="button"
     class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-    :class="{ expanded: mode === 'expanded' }"
-    @click="toggleMenu"
-  >
-    <Avatar
-      size="36px"
-      :src="
-        selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-      "
-    />
+    :class="{ expanded: mode === 'expanded' }" @click="toggleMenu">
+    <Avatar size="36px" :src="selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+      " />
     <div class="flex flex-col w-full">
       <span>
         <component :is="getAccountType(selectedAccount)" v-if="selectedAccount" class="vector-icon" />
@@ -32,30 +24,23 @@
           </h4>
           <p>Selected</p>
         </div>
-        <Button
-          v-tooltip="'Log out'"
-          icon-only
-          color="raised"
-          @click="logout(selectedAccount.profile.id)"
-        >
+        <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.profile.id)">
           <TrashIcon />
         </Button>
       </div>
       <div v-else class="login-section account">
         <h4>Not signed in</h4>
-        <Button
-          v-tooltip="'Log in'"
-          :disabled="loginDisabled"
-          icon-only
-          color="primary"
-          @click="login()"
-        >
-          <MicrosoftIcon v-if="!loginDisabled"/>
+        <Button v-tooltip="'Log via Microsoft'" :disabled="microsoftLoginDisabled" icon-only @click="login()">
+          <MicrosoftIcon v-if="!microsoftLoginDisabled" />
           <SpinnerIcon v-else class="animate-spin" />
         </Button>
-        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
+        <Button v-tooltip="'Add offline account'" icon-only @click="showOfflineLoginModal()">
           <PirateIcon />
         </Button>
+        <Button v-tooltip="'Log via Ely.by'" icon-only @click="showElybyLoginModal()">
+          <ElyByIcon v-if="!elybyLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
+        </Button>
       </div>
       <div v-if="displayAccounts.length > 0" class="account-group">
         <div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
@@ -72,53 +57,135 @@
         </div>
       </div>
       <div v-if="accounts.length > 0" class="login-section account centered">
-        <Button v-tooltip="'Log in'" icon-only @click="login()">
-          <MicrosoftIcon />
+        <Button v-tooltip="'Log via Microsoft'" icon-only @click="login()">
+          <MicrosoftIcon v-if="!microsoftLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
         </Button>
-        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
+        <Button v-tooltip="'Add offline account'" icon-only @click="showOfflineLoginModal()">
           <PirateIcon />
         </Button>
+        <Button v-tooltip="'Log via Ely.by'" icon-only @click="showElybyLoginModal()">
+          <ElyByIcon v-if="!elybyLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
+        </Button>
       </div>
     </Card>
   </transition>
-  <ModalWrapper ref="loginOfflineModal" class="modal" header="Add new offline account">
-    <div class="modal-body">
-      <div class="label">Enter offline username</div>
-      <input type="text" v-model="playerName" placeholder="Provide offline player name" />
-      <Button icon-only color="secondary" @click="offlineLoginFinally()">
-        Continue
-      </Button>
+  <ModalWrapper ref="addElybyModal" class="modal" header="Authenticate with Ely.by">
+    <ModalWrapper ref="requestElybyTwoFactorCodeModal" class="modal"
+      header="Ely.by requested 2FA code for authentication">
+      <div class="flex flex-col gap-4 px-6 py-5">
+        <label class="label">Enter your 2FA code</label>
+        <input v-model="elybyTwoFactorCode" type="text" placeholder="Your 2FA code here..." class="input" />
+        <div class="mt-6 ml-auto">
+          <Button icon-only color="primary" class="continue-button" @click="addElybyProfile()">
+            Continue
+          </Button>
+        </div>
+      </div>
+    </ModalWrapper>
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="label">Enter your player name or email (preferred)</label>
+      <input v-model="elybyLogin" type="text" placeholder="Your player name or email here..." class="input" />
+      <label class="label">Enter your password</label>
+      <input v-model="elybyPassword" type="password" placeholder="Your password here..." class="input" />
+      <div class="mt-6 ml-auto">
+        <Button icon-only color="primary" class="continue-button" @click="addElybyProfile()">
+          Login
+        </Button>
+      </div>
     </div>
   </ModalWrapper>
-  <ModalWrapper ref="loginErrorModal" class="modal" header="Error while proceed">
-    <div class="modal-body">
-      <div class="label">Error occurred while adding offline account</div>
-      <Button color="primary" @click="retryOfflineLogin()">
-        Try again
-      </Button>
+  <ModalWrapper ref="addOfflineModal" class="modal" header="Add new offline account">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="label">Enter your player name</label>
+      <input v-model="offlinePlayerName" type="text" placeholder="Your player name here..." class="input" />
+      <div class="mt-6 ml-auto">
+        <Button icon-only color="primary" class="continue-button" @click="addOfflineProfile()">
+          Login
+        </Button>
+      </div>
     </div>
   </ModalWrapper>
-  <ModalWrapper ref="unexpectedErrorModal" class="modal" header="Ошибка">
+  <ModalWrapper 
+    ref="authenticationElybyErrorModal"
+    class="modal"
+    header="Error while proceeding authentication event with Ely.by">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="text-base font-medium text-red-700">
+        An error occurred while logging in.
+      </label>
+
+      <div class="mt-6 ml-auto">
+        <Button color="primary" class="retry-button" @click="retryAddElybyProfile">
+          Try again
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
+  <ModalWrapper ref="inputElybyErrorModal" class="modal" header="Error while proceeding input event with Ely.by">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="text-base font-medium text-red-700">
+        An error occurred while adding the Ely.by account. Please follow the instructions below.
+      </label>
+
+      <ul class="list-disc list-inside text-sm space-y-1">
+        <li>Check that you have entered the correct player name or email.</li>
+        <li>Check that you have entered the correct password.</li>
+      </ul>
+
+      <div class="mt-6 ml-auto">
+        <Button color="primary" class="retry-button" @click="retryAddElybyProfile">
+          Try again
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
+  <ModalWrapper ref="inputErrorModal" class="modal" header="Error while proceeding input event with offline account">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="text-base font-medium text-red-700">
+        An error occurred while adding the offline account. Please follow the instructions below.
+      </label>
+
+      <ul class="list-disc list-inside text-sm space-y-1">
+        <li>Check that you have entered the correct player name.</li>
+        <li>
+          Player name must be at least {{ minOfflinePlayerNameLength }} characters long and no more than
+          {{ maxOfflinePlayerNameLength }} characters.
+        </li>
+      </ul>
+
+      <div class="mt-6 ml-auto">
+        <Button color="primary" class="retry-button" @click="retryAddOfflineProfile">
+          Try again
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
+  <ModalWrapper ref="exceptionErrorModal" class="modal" header="Unexpected error occurred">
     <div class="modal-body">
-      <div class="label">Unexcepted error</div>
+      <label class="label">An unexpected error has occurred. Please try again later.</label>
     </div>
   </ModalWrapper>
 </template>
 
 <script setup>
-import { 
+import {
   DropdownIcon,
-  PlusIcon,
   TrashIcon,
-  LogInIcon,
   PirateIcon as Offline,
   MicrosoftIcon as License,
+  ElyByIcon as Elyby,
   MicrosoftIcon,
   PirateIcon,
-  SpinnerIcon } from '@modrinth/assets'
+  ElyByIcon,
+  SpinnerIcon
+} from '@modrinth/assets'
 import { Avatar, Button, Card } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
+  elyby_auth_authenticate,
+  elyby_login,
   offline_login,
   users,
   remove_user,
@@ -145,48 +212,180 @@ defineProps({
 const emit = defineEmits(['change'])
 
 const accounts = ref({})
-const loginDisabled = ref(false)
+const microsoftLoginDisabled = ref(false)
+const elybyLoginDisabled = ref(false)
 const defaultUser = ref()
-const loginOfflineModal = ref(null)
-const loginErrorModal = ref(null)
-const unexpectedErrorModal = ref(null)
-const playerName = ref('')
 
-async function tryOfflineLogin() { // [AR] Feature
-  loginOfflineModal.value.show()
+// [AR] • Feature
+const clientToken = "astralrinth"
+const addOfflineModal = ref(null)
+const addElybyModal = ref(null)
+const requestElybyTwoFactorCodeModal = ref(null)
+const authenticationElybyErrorModal = ref(null)
+const inputElybyErrorModal = ref(null)
+const inputErrorModal = ref(null)
+const exceptionErrorModal = ref(null)
+const offlinePlayerName = ref('')
+const elybyLogin = ref('')
+const elybyPassword = ref('')
+const elybyTwoFactorCode = ref('')
+const minOfflinePlayerNameLength = 2
+const maxOfflinePlayerNameLength = 20
+
+// [AR] • Feature
+function getAccountType(account) {
+  switch (account.account_type) {
+    case 'microsoft':
+      return License
+    case 'pirate':
+      return Offline
+    case 'elyby':
+      return Elyby
+  }
 }
 
-async function offlineLoginFinally() { // [AR] Feature
-  const name = playerName.value
-  if (name.length > 1 && name.length < 20 && name !== '') {
-    const loggedIn = await offline_login(name).catch(handleError)
-    loginOfflineModal.value.hide()
-    if (loggedIn) {
-      await setAccount(loggedIn)
+// [AR] • Feature
+function showOfflineLoginModal() {
+  addOfflineModal.value?.show()
+}
+
+// [AR] • Feature
+function showElybyLoginModal() {
+  addElybyModal.value?.show()
+}
+
+// [AR] • Feature
+function retryAddOfflineProfile() {
+  inputErrorModal.value?.hide()
+  clearOfflineFields()
+  showOfflineLoginModal()
+}
+
+// [AR] • Feature
+function retryAddElybyProfile() {
+  authenticationElybyErrorModal.value?.hide()
+  inputElybyErrorModal.value?.hide()
+  clearElybyFields()
+  showElybyLoginModal()
+}
+
+// [AR] • Feature
+function clearElybyFields() {
+  elybyLogin.value = ''
+  elybyPassword.value = ''
+  elybyTwoFactorCode.value = ''
+}
+
+// [AR] • Feature
+function clearOfflineFields() {
+  offlinePlayerName.value = ''
+}
+
+// [AR] • Feature
+async function addOfflineProfile() {
+  const name = offlinePlayerName.value.trim()
+  const isValidName = name.length >= minOfflinePlayerNameLength && name.length <= maxOfflinePlayerNameLength
+
+  if (!isValidName) {
+    addOfflineModal.value?.hide()
+    inputErrorModal.value?.show()
+    clearOfflineFields()
+    return
+  }
+
+  try {
+    const result = await offline_login(name)
+
+    addOfflineModal.value?.hide()
+
+    if (result) {
+      await setAccount(result)
       await refreshValues()
     } else {
-      unexpectedErrorModal.value.show()
+      exceptionErrorModal.value?.show()
     }
-    playerName.value = ''
-  } else {
-    playerName.value = ''
-    loginOfflineModal.value.hide()
-    loginErrorModal.value.show()
+  } catch (error) {
+    handleError(error)
+    exceptionErrorModal.value?.show()
+  } finally {
+    clearOfflineFields()
   }
 }
 
-function retryOfflineLogin() { // [AR] Feature
-  loginErrorModal.value.hide()
-  tryOfflineLogin()
-}
+// [AR] • Feature
+async function addElybyProfile() {
+  if (!elybyLogin.value || !elybyPassword.value) {
+    addElybyModal.value?.hide()
+    inputElybyErrorModal.value?.show()
+    clearElybyFields()
+    return
+  }
+  elybyLoginDisabled.value = true
 
-function getAccountType(account) { // [AR] Feature
-  if (account.access_token != "null" && account.access_token != null && account.access_token != "") {
-    return License
-  } else {
-    return Offline
+  const login = elybyLogin.value.trim()
+  let password = elybyPassword.value.trim()
+  const twoFactorCode = elybyTwoFactorCode.value.trim()
+  if (password && twoFactorCode) {
+    password = `${password}:${twoFactorCode}`
+  }
+
+  try {
+    const raw_result = await elyby_auth_authenticate(
+      login,
+      password,
+      clientToken
+    )
+
+    const json_data = JSON.parse(raw_result)
+
+    console.log(json_data?.error)
+    console.log(json_data?.errorMessage)
+
+    if (!json_data.accessToken) {
+      if (
+        json_data.error === 'ForbiddenOperationException' &&
+        json_data.errorMessage?.includes('two factor')
+      ) {
+        requestElybyTwoFactorCodeModal.value?.show()
+        return
+      }
+
+      addElybyModal.value?.hide()
+      requestElybyTwoFactorCodeModal.value?.hide()
+      authenticationElybyErrorModal.value?.show()
+      return
+    }
+
+    const accessToken = json_data.accessToken
+    const selectedProfileId = convertRawStringToUUIDv4(json_data.selectedProfile.id)
+    const selectedProfileName = json_data.selectedProfile.name
+
+    const result = await elyby_login(selectedProfileId, selectedProfileName, accessToken)
+
+    addElybyModal.value?.hide()
+    requestElybyTwoFactorCodeModal.value?.hide()
+
+    clearElybyFields()
+
+    await setAccount(result)
+    await refreshValues()
+  } catch (err) {
+    handleError(err)
+    exceptionErrorModal.value?.show()
+  } finally {
+    elybyLoginDisabled.value = false
   }
 }
+
+// [AR] • Feature
+function convertRawStringToUUIDv4(rawId) {
+  if (rawId.length !== 32) {
+    console.warn('Invalid UUID string:', rawId)
+    return rawId
+  }
+  return `${rawId.slice(0, 8)}-${rawId.slice(8, 12)}-${rawId.slice(12, 16)}-${rawId.slice(16, 20)}-${rawId.slice(20)}`
+}
+
 const equippedSkin = ref(null)
 const headUrlCache = ref(new Map())
 
@@ -212,13 +411,13 @@ async function refreshValues() {
 }
 
 function setLoginDisabled(value) {
-  loginDisabled.value = value
+  microsoftLoginDisabled.value = value
 }
 
 defineExpose({
   refreshValues,
   setLoginDisabled,
-  loginDisabled,
+  loginDisabled: microsoftLoginDisabled,
 })
 await refreshValues()
 
@@ -264,7 +463,7 @@ async function setAccount(account) {
 }
 
 async function login() {
-  loginDisabled.value = true
+  microsoftLoginDisabled.value = true
   const loggedIn = await login_flow().catch(handleSevereError)
 
   if (loggedIn) {
@@ -273,7 +472,7 @@ async function login() {
   }
 
   trackEvent('AccountLogIn')
-  loginDisabled.value = false
+  microsoftLoginDisabled.value = false
 }
 
 const logout = async (id) => {

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

@@ -0,0 +1,401 @@
+<template>
+  <ModalWrapper ref="modal" :header="'Import from CurseForge Profile Code'">
+    <div class="modal-body">
+      <div class="input-row">
+        <p class="input-label">Profile Code</p>
+        <div class="iconified-input">
+          <SearchIcon aria-hidden="true" class="text-lg" />
+          <input
+            ref="codeInput"
+            v-model="profileCode"
+            autocomplete="off"
+            class="h-12 card-shadow"
+            spellcheck="false"
+            type="text"
+            placeholder="Enter CurseForge profile code"
+            maxlength="20"
+            @keyup.enter="importProfile"
+          />
+          <Button v-if="profileCode" class="r-btn" @click="() => (profileCode = '')">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      
+      <div v-if="metadata && !importing" class="profile-info">
+        <h3>Profile Information</h3>
+        <p><strong>Name:</strong> {{ metadata.name }}</p>
+      </div>
+      
+      <div v-if="error" class="error-message">
+        <p>{{ error }}</p>
+      </div>
+      
+      <div v-if="importing && importProgress.visible" class="progress-section">
+        <div class="progress-info">
+          <span class="progress-text">{{ importProgress.message }}</span>
+          <span class="progress-percentage">{{ Math.floor(importProgress.percentage) }}%</span>
+        </div>
+        <div class="progress-bar-container">
+          <div
+            class="progress-bar" 
+            :style="{ width: `${importProgress.percentage}%` }"
+          ></div>
+        </div>
+      </div>
+      
+      <div class="button-row">
+        <Button @click="hide" :disabled="importing">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button 
+          v-if="!metadata" 
+          @click="fetchMetadata" 
+          :disabled="!profileCode.trim() || fetching"
+          color="secondary"
+        >
+          <SearchIcon v-if="!fetching" />
+          {{ fetching ? 'Checking...' : 'Check Profile' }}
+        </Button>
+        <Button 
+          v-if="metadata" 
+          @click="importProfile" 
+          :disabled="importing"
+          color="primary"
+        >
+          <DownloadIcon v-if="!importing" />
+          {{ importing ? 'Importing...' : 'Import Profile' }}
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { Button } from '@modrinth/ui'
+import { 
+  XIcon, 
+  SearchIcon, 
+  DownloadIcon 
+} from '@modrinth/assets'
+import { 
+  fetch_curseforge_profile_metadata, 
+  import_curseforge_profile 
+} from '@/helpers/import.js'
+import { handleError } from '@/store/notifications.js'
+import { trackEvent } from '@/helpers/analytics'
+import { loading_listener } from '@/helpers/events.js'
+
+const props = defineProps({
+  closeParent: {
+    type: Function,
+    default: null
+  }
+})
+
+const router = useRouter()
+const modal = ref(null)
+const codeInput = ref(null)
+const profileCode = ref('')
+const metadata = ref(null)
+const fetching = ref(false)
+const importing = ref(false)
+const error = ref('')
+const importProgress = ref({
+  visible: false,
+  percentage: 0,
+  message: 'Starting import...',
+  totalMods: 0,
+  downloadedMods: 0
+})
+
+let unlistenLoading = null
+let activeLoadingBarId = null
+let progressFallbackTimer = null
+
+defineExpose({
+  show: () => {
+    profileCode.value = ''
+    metadata.value = null
+    fetching.value = false
+    importing.value = false
+    error.value = ''
+    importProgress.value = {
+      visible: false,
+      percentage: 0,
+      message: 'Starting import...',
+      totalMods: 0,
+      downloadedMods: 0
+    }
+    modal.value?.show()
+    
+    nextTick(() => {
+      setTimeout(() => {
+        codeInput.value?.focus()
+      }, 100)
+    })
+    
+    trackEvent('CurseForgeProfileImportStart', { source: 'ImportModal' })
+  },
+})
+
+const hide = () => {
+  modal.value?.hide()
+}
+
+const fetchMetadata = async () => {
+  if (!profileCode.value.trim()) return
+  
+  fetching.value = true
+  error.value = ''
+  
+  try {
+    const result = await fetch_curseforge_profile_metadata(profileCode.value.trim())
+    metadata.value = result
+    trackEvent('CurseForgeProfileMetadataFetched', { 
+      profileCode: profileCode.value.trim() 
+    })
+  } catch (err) {
+    console.error('Failed to fetch CurseForge profile metadata:', err)
+    error.value = 'Failed to fetch profile information. Please check the code and try again.'
+    handleError(err)
+  } finally {
+    fetching.value = false
+  }
+}
+
+const importProfile = async () => {
+  if (!profileCode.value.trim()) return
+  
+  importing.value = true
+  error.value = ''
+  activeLoadingBarId = null // Reset for new import session
+  importProgress.value = {
+    visible: true,
+    percentage: 0,
+    message: 'Starting import...',
+    totalMods: 0,
+    downloadedMods: 0
+  }
+  
+  // Fallback progress timer in case loading events don't work
+  progressFallbackTimer = setInterval(() => {
+    if (importing.value && importProgress.value.percentage < 90) {
+      // Slowly increment progress as a fallback
+      importProgress.value.percentage = Math.min(90, importProgress.value.percentage + 1)
+    }
+  }, 1000)
+  
+  try {
+    const { result, profilePath } = await import_curseforge_profile(profileCode.value.trim())
+    
+    trackEvent('CurseForgeProfileImported', { 
+      profileCode: profileCode.value.trim() 
+    })
+    
+    hide()
+    
+    // Close the parent modal if provided
+    if (props.closeParent) {
+      props.closeParent()
+    }
+    
+    // Navigate to the imported profile
+    await router.push(`/instance/${encodeURIComponent(profilePath)}`)
+  } catch (err) {
+    console.error('Failed to import CurseForge profile:', err)
+    error.value = 'Failed to import profile. Please try again.'
+    handleError(err)
+  } finally {
+    importing.value = false
+    importProgress.value.visible = false
+    if (progressFallbackTimer) {
+      clearInterval(progressFallbackTimer)
+      progressFallbackTimer = null
+    }
+    activeLoadingBarId = null
+  }
+}
+
+onMounted(async () => {
+  // Listen for loading events to update progress
+  unlistenLoading = await loading_listener((event) => {
+    console.log('Loading event received:', event) // Debug log
+    
+    // Handle all loading events that could be related to CurseForge profile import
+    const isCurseForgeEvent = event.event?.type === 'curseforge_profile_download'
+    const hasProfileName = event.event?.profile_name && importing.value
+    
+    if ((isCurseForgeEvent || hasProfileName) && importing.value) {
+      // Store the loading bar ID for this import session
+      if (!activeLoadingBarId) {
+        activeLoadingBarId = event.loader_uuid
+      }
+      
+      // Only process events for our current import session
+      if (event.loader_uuid === activeLoadingBarId) {
+        if (event.fraction !== null && event.fraction !== undefined) {
+          const baseProgress = (event.fraction || 0) * 100
+          
+          // Calculate custom progress based on the message
+          let finalProgress = baseProgress
+          const message = event.message || 'Importing profile...'
+          
+          // Custom progress calculation for different stages
+          if (message.includes('Fetching') || message.includes('metadata')) {
+            finalProgress = Math.min(10, baseProgress)
+          } else if (message.includes('Downloading profile ZIP') || message.includes('profile ZIP')) {
+            finalProgress = Math.min(15, 10 + (baseProgress - 10) * 0.5)
+          } else if (message.includes('Extracting') || message.includes('ZIP')) {
+            finalProgress = Math.min(20, 15 + (baseProgress - 15) * 0.5)
+          } else if (message.includes('Configuring') || message.includes('profile')) {
+            finalProgress = Math.min(30, 20 + (baseProgress - 20) * 0.5)
+          } else if (message.includes('Copying') || message.includes('files')) {
+            finalProgress = Math.min(40, 30 + (baseProgress - 30) * 0.5)
+          } else if (message.includes('Downloaded mod') && message.includes(' of ')) {
+            // Parse "Downloaded mod X of Y" message
+            const match = message.match(/Downloaded mod (\d+) of (\d+)/)
+            if (match) {
+              const current = parseInt(match[1])
+              const total = parseInt(match[2])
+              // Mods take 40% of progress (from 40% to 80%)
+              const modProgress = (current / total) * 40
+              finalProgress = 40 + modProgress
+            } else {
+              finalProgress = Math.min(80, 40 + (baseProgress - 40) * 0.5)
+            }
+          } else if (message.includes('Downloading mod') || message.includes('mods')) {
+            // General mod downloading stage (40% to 80%)
+            finalProgress = Math.min(80, 40 + (baseProgress - 40) * 0.4)
+          } else if (message.includes('Installing Minecraft') || message.includes('Minecraft')) {
+            finalProgress = Math.min(95, 80 + (baseProgress - 80) * 0.75)
+          } else if (message.includes('Finalizing') || message.includes('completed')) {
+            finalProgress = Math.min(100, 95 + (baseProgress - 95))
+          } else {
+            // Default: use the base progress but ensure minimum progression
+            finalProgress = Math.max(importProgress.value.percentage, baseProgress)
+          }
+          
+          importProgress.value.percentage = Math.min(100, Math.max(0, finalProgress))
+          importProgress.value.message = message
+        } else {
+          // Loading complete
+          importProgress.value.percentage = 100
+          importProgress.value.message = 'Import completed!'
+          activeLoadingBarId = null
+        }
+      }
+    }
+  })
+})
+
+onUnmounted(() => {
+  if (unlistenLoading) {
+    unlistenLoading()
+  }
+  if (progressFallbackTimer) {
+    clearInterval(progressFallbackTimer)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.input-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.input-label {
+  font-weight: 600;
+  color: var(--color-contrast);
+  margin: 0;
+}
+
+.profile-info {
+  background: var(--color-bg);
+  border: 1px solid var(--color-button);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  
+  h3 {
+    margin: 0 0 0.5rem 0;
+    color: var(--color-contrast);
+  }
+  
+  p {
+    margin: 0.25rem 0;
+    color: var(--color-base);
+  }
+}
+
+.error-message {
+  background: var(--color-red);
+  border: 1px solid var(--color-red);
+  border-radius: var(--radius-md);
+  padding: 0.75rem;
+  
+  p {
+    margin: 0;
+    color: var(--color-contrast);
+    font-weight: 500;
+  }
+}
+
+.progress-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  .progress-text {
+    color: var(--color-base);
+    font-size: 0.875rem;
+  }
+  
+  .progress-percentage {
+    color: var(--color-contrast);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+}
+
+.progress-bar-container {
+  width: 100%;
+  height: 4px;
+  background: var(--color-button);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: var(--color-brand);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+  min-width: 0;
+}
+
+.button-row {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: auto;
+}
+</style>

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

@@ -163,6 +163,14 @@
         <div v-else class="table-content empty">No profiles found</div>
       </div>
       <div class="button-row">
+        <Button
+          v-if="selectedProfileType.name === 'Curseforge'"
+          @click="showCurseForgeProfileModal"
+          :disabled="loading"
+        >
+          <CodeIcon />
+          Import from Profile Code
+        </Button>
         <Button
           :disabled="
             loading ||
@@ -194,10 +202,12 @@
       </div>
     </div>
   </ModalWrapper>
+  <CurseForgeProfileImportModal ref="curseforgeProfileModal" :close-parent="hide" />
 </template>
 
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import CurseForgeProfileImportModal from '@/components/ui/CurseForgeProfileImportModal.vue'
 import {
   CodeIcon,
   FolderOpenIcon,
@@ -283,6 +293,11 @@ const hide = () => {
     unlistener.value = null
   }
 }
+
+const showCurseForgeProfileModal = () => {
+  curseforgeProfileModal.value?.show()
+}
+
 onUnmounted(() => {
   if (unlistener.value) {
     unlistener.value()
@@ -305,12 +320,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')
 
@@ -334,6 +353,7 @@ const game_versions = computed(() => {
 })
 
 const modal = ref(null)
+const curseforgeProfileModal = ref(null)
 
 const check_valid = computed(() => {
   return (

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

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

apps/app-frontend/src/components/ui/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/DefaultInstanceSettings.vue

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

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

@@ -118,6 +118,7 @@ import {
   type Cape,
   type SkinModel,
   get_normalized_skin_texture,
+  determineModelType,
 } from '@/helpers/skins.ts'
 import { handleError } from '@/store/notifications'
 import {
@@ -253,7 +254,7 @@ async function showNew(e: MouseEvent, skinTextureUrl: string) {
   mode.value = 'new'
   currentSkin.value = null
   uploadedTextureUrl.value = skinTextureUrl
-  variant.value = 'CLASSIC'
+  variant.value = await determineModelType(skinTextureUrl)
   selectedCape.value = undefined
   visibleCapeList.value = []
   initVisibleCapeList()

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  type ProtocolVersion,
   type ServerWorld,
   type ServerData,
   type WorldWithProfile,
@@ -33,7 +34,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 +122,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 +148,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,7 +1,14 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import type { ServerStatus, ServerWorld, SingleplayerWorld, World } from '@/helpers/worlds.ts'
-import { set_world_display_status, getWorldIdentifier } from '@/helpers/worlds.ts'
+import type {
+  ProtocolVersion,
+  ServerStatus,
+  ServerWorld,
+  SingleplayerWorld,
+  World,
+  set_world_display_status,
+  getWorldIdentifier,
+} from '@/helpers/worlds.ts'
 import { formatNumber, getPingLevel } from '@modrinth/utils'
 import {
   useRelativeTime,
@@ -55,7 +62,7 @@ const props = withDefaults(
     playingWorld?: boolean
     startingInstance?: boolean
     supportsQuickPlay?: boolean
-    currentProtocol?: number | null
+    currentProtocol?: ProtocolVersion | null
     highlighted?: boolean
 
     // Server only
@@ -102,7 +109,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)
@@ -128,6 +136,14 @@ const messages = defineMessages({
     id: 'instance.worlds.game_already_open',
     defaultMessage: 'Instance is already open',
   },
+  noContact: {
+    id: 'instance.worlds.no_contact',
+    defaultMessage: "Server couldn't be contacted",
+  },
+  incompatibleServer: {
+    id: 'instance.worlds.incompatible_server',
+    defaultMessage: 'Server is incompatible',
+  },
   copyAddress: {
     id: 'instance.worlds.copy_address',
     defaultMessage: 'Copy address',
@@ -302,39 +318,33 @@ const messages = defineMessages({
         </template>
       </div>
       <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-        <template v-if="world.type === 'singleplayer' || serverStatus">
-          <ButtonStyled
-            v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
-            color="red"
-          >
-            <button @click="emit('stop')">
-              <StopCircleIcon aria-hidden="true" />
-              {{ formatMessage(commonMessages.stopButton) }}
-            </button>
-          </ButtonStyled>
-          <ButtonStyled v-else>
-            <button
-              v-tooltip="
-                serverIncompatible
-                  ? 'Server is incompatible'
+        <ButtonStyled
+          v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
+          color="red"
+        >
+          <button @click="emit('stop')">
+            <StopCircleIcon aria-hidden="true" />
+            {{ formatMessage(commonMessages.stopButton) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled v-else>
+          <button
+            v-tooltip="
+              !serverStatus
+                ? formatMessage(messages.noContact)
+                : serverIncompatible
+                  ? formatMessage(messages.incompatibleServer)
                   : !supportsQuickPlay
                     ? formatMessage(messages.noQuickPlay)
                     : playingOtherWorld || locked
                       ? formatMessage(messages.gameAlreadyOpen)
                       : null
-              "
-              :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
-              @click="emit('play')"
-            >
-              <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-              <PlayIcon v-else aria-hidden="true" />
-              {{ formatMessage(commonMessages.playButton) }}
-            </button>
-          </ButtonStyled>
-        </template>
-        <ButtonStyled v-else>
-          <button class="invisible">
-            <PlayIcon aria-hidden="true" />
+            "
+            :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
+            @click="emit('play')"
+          >
+            <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+            <PlayIcon v-else aria-hidden="true" />
             {{ formatMessage(commonMessages.playButton) }}
           </button>
         </ButtonStyled>

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

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

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

@@ -17,6 +17,24 @@ export async function offline_login(name) {
   return await invoke('plugin:auth|offline_login', { name: name })
 }
 
+// [AR] • Feature
+export async function elyby_login(uuid, login, accessToken) {
+  return await invoke('plugin:auth|elyby_login', {
+    uuid,
+    login,
+    accessToken
+  })
+}
+
+// [AR] • Feature
+export async function elyby_auth_authenticate(login, password, clientToken) {
+  return await invoke('plugin:auth|elyby_auth_authenticate', {
+    login,
+    password,
+    clientToken,
+  })
+}
+
 /**
  * Authenticate a user with Hydra - part 1.
  * This begins the authentication flow quasi-synchronously.

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

@@ -61,3 +61,31 @@ export async function is_valid_importable_instance(instanceFolder, launcherType)
 export async function get_default_launcher_path(launcherType) {
   return await invoke('plugin:import|get_default_launcher_path', { launcherType })
 }
+
+/// Fetch CurseForge profile metadata from profile code
+/// eg: fetch_curseforge_profile_metadata("eSrNlKNo")
+export async function fetch_curseforge_profile_metadata(profileCode) {
+  return await invoke('plugin:import|fetch_curseforge_profile_metadata', { profileCode })
+}
+
+/// Import a CurseForge profile from profile code
+/// eg: import_curseforge_profile("eSrNlKNo")
+export async function import_curseforge_profile(profileCode) {
+  try {
+    // First, fetch the profile metadata to get the actual name
+    const metadata = await fetch_curseforge_profile_metadata(profileCode)
+
+    // create a basic, empty instance using the actual profile name
+    const profilePath = await create(metadata.name, '1.19.4', 'vanilla', 'latest', null, true)
+
+    const result = await invoke('plugin:import|import_curseforge_profile', {
+      profilePath,
+      profileCode,
+    })
+
+    // Return the profile path for navigation
+    return { result, profilePath }
+  } catch (error) {
+    throw error
+  }
+}

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/rendering/batch-skin-renderer.ts

@@ -2,7 +2,13 @@ import * as THREE from 'three'
 import type { Skin, Cape } from '../skins'
 import { get_normalized_skin_texture, determineModelType } from '../skins'
 import { reactive } from 'vue'
-import { setupSkinModel, disposeCaches, loadTexture, applyCapeTexture } from '@modrinth/utils'
+import {
+  setupSkinModel,
+  disposeCaches,
+  loadTexture,
+  applyCapeTexture,
+  createTransparentTexture,
+} from '@modrinth/utils'
 import { skinPreviewStorage } from '../storage/skin-preview-storage'
 import { headStorage } from '../storage/head-storage'
 import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
@@ -120,6 +126,9 @@ class BatchSkinRenderer {
     if (capeUrl) {
       const capeTexture = await loadTexture(capeUrl)
       applyCapeTexture(model, capeTexture)
+    } else {
+      const transparentTexture = createTransparentTexture()
+      applyCapeTexture(model, null, transparentTexture)
     }
 
     const group = new THREE.Group()

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

@@ -62,15 +62,12 @@ export async function determineModelType(texture: string): Promise<'SLIM' | 'CLA
 
       context.drawImage(image, 0, 0)
 
-      const armX = 44
-      const armY = 16
-      const armWidth = 4
+      const armX = 54
+      const armY = 20
+      const armWidth = 2
       const armHeight = 12
-
       const imageData = context.getImageData(armX, armY, armWidth, armHeight).data
-
-      for (let y = 0; y < armHeight; y++) {
-        const alphaIndex = (3 + y * armWidth) * 4 + 3
+      for (let alphaIndex = 3; alphaIndex < imageData.length; alphaIndex += 4) {
         if (imageData[alphaIndex] !== 0) {
           resolve('CLASSIC')
           return

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

@@ -10,20 +10,20 @@ export async function getOS() {
   return await invoke('plugin:utils|get_os')
 }
 
-// [AR] Feature
-export async function initUpdateLauncher(downloadurl, filename, ostype, autoupdatesupported) {
-  console.log('Downloading build', downloadurl, filename, ostype, autoupdatesupported)
-  return await invoke('plugin:utils|init_update_launcher', { downloadurl, filename, ostype, autoupdatesupported })
+// [AR] Feature. Updater
+export async function initUpdateLauncher(downloadUrl, filename, osType, autoUpdateSupported) {
+  console.log('Downloading build', downloadUrl, filename, osType, autoUpdateSupported)
+  return await invoke('plugin:utils|init_update_launcher', { downloadUrl, filename, osType, autoUpdateSupported })
 }
 
-// [AR] Patch fix
+// [AR] Migration. Patch
 export async function applyMigrationFix(eol) {
   return await invoke('plugin:utils|apply_migration_fix', { eol })
 }
 
-// [AR] Feature
-export async function initAuthlibPatching(minecraftversion, ismojang) {
-  return await invoke('plugin:utils|init_authlib_patching', { minecraftversion, ismojang })
+// [AR] Feature. Ely.by
+export async function initAuthlibPatching(minecraftVersion, isMojang) {
+  return await invoke('plugin:utils|init_authlib_patching', { minecraftVersion, isMojang })
 }
 
 export async function openPath(path) {

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

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

@@ -377,6 +377,12 @@
   "instance.worlds.hardcore": {
     "message": "Hardcore mode"
   },
+  "instance.worlds.incompatible_server": {
+    "message": "Server is incompatible"
+  },
+  "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+"
   },

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

@@ -220,7 +220,7 @@ async function refreshSearch() {
     }
   }
   results.value = rawResults.result
-  currentPage.value = Math.max(1, Math.min(pageCount.value, currentPage.value))
+  currentPage.value = 1
 
   const persistentParams: LocationQuery = {}
 
@@ -266,6 +266,7 @@ async function onSearchChangeToTop() {
 
 function clearSearch() {
   query.value = ''
+  currentPage.value = 1
 }
 
 watch(

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

@@ -134,6 +134,7 @@ import {
 } from '@modrinth/ui'
 import { PlusIcon, SpinnerIcon, UpdatedIcon, SearchIcon, XIcon } from '@modrinth/assets'
 import {
+  type ProtocolVersion,
   type SingleplayerWorld,
   type World,
   type ServerWorld,
@@ -210,7 +211,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 +249,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
 

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

@@ -13,6 +13,8 @@ fn main() {
                 InlinedPlugin::new()
                     .commands(&[
                         "offline_login",
+                        "elyby_login",
+                        "elyby_auth_authenticate",
                         "login",
                         "remove_user",
                         "get_default_user",
@@ -49,6 +51,8 @@ fn main() {
                 "import",
                 InlinedPlugin::new()
                     .commands(&[
+                        "fetch_curseforge_profile_metadata",
+                        "import_curseforge_profile",
                         "get_importable_instances",
                         "import_instance",
                         "is_valid_importable_instance",
@@ -121,7 +125,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/capabilities/plugins.json

@@ -19,13 +19,10 @@
     "window-state:default",
     "window-state:allow-restore-state",
     "window-state:allow-save-window-state",
-    
+
     {
       "identifier": "http:default",
-      "allow": [
-        { "url": "https://modrinth.com/*" },
-        { "url": "https://*.modrinth.com/*" }
-      ]
+      "allow": [{ "url": "https://modrinth.com/*" }, { "url": "https://*.modrinth.com/*" }]
     },
 
     "auth:default",

apps/app/src/api/auth.rs

@@ -2,12 +2,15 @@ use crate::api::Result;
 use chrono::{Duration, Utc};
 use tauri::plugin::TauriPlugin;
 use tauri::{Manager, Runtime, UserAttentionType};
+use tauri_plugin_http::reqwest::Client;
 use theseus::prelude::*;
 
 pub fn init<R: Runtime>() -> TauriPlugin<R> {
     tauri::plugin::Builder::<R>::new("auth")
         .invoke_handler(tauri::generate_handler![
             offline_login,
+            elyby_login,
+            elyby_auth_authenticate,
             login,
             remove_user,
             get_default_user,
@@ -17,14 +20,65 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
         .build()
 }
 
+/// ### AR • Feature
 /// Create new offline user
-/// This is custom function from Astralium Org.
 #[tauri::command]
 pub async fn offline_login(name: &str) -> Result<Credentials> {
     let credentials = minecraft_auth::offline_auth(name).await?;
     Ok(credentials)
 }
 
+/// ### AR • Feature
+/// Create new Ely.by user
+#[tauri::command]
+pub async fn elyby_login(
+    uuid: uuid::Uuid,
+    login: &str,
+    access_token: &str
+) -> Result<Credentials> {
+    let credentials = minecraft_auth::elyby_auth(uuid, login, access_token).await?;
+    Ok(credentials)
+}
+
+/// ### AR • Feature
+/// Authenticate Ely.by user
+#[tauri::command]
+pub async fn elyby_auth_authenticate(
+    login: &str,
+    password: &str,
+    client_token: &str,
+) -> Result<String> {
+    let client = Client::new();
+    let auth_body = serde_json::json!({
+        "username": login,
+        "password": password,
+        "clientToken": client_token,
+    });
+
+    let response = match client
+        .post("https://authserver.ely.by/auth/authenticate")
+        .header("Content-Type", "application/json")
+        .json(&auth_body)
+        .send()
+        .await
+    {
+        Ok(resp) => resp,
+        Err(e) => {
+            tracing::error!("[AR] • Failed to send request: {}", e);
+            return Ok("".to_string());
+        }
+    };
+
+    let text = match response.text().await {
+        Ok(body) => body,
+        Err(e) => {
+            tracing::error!("[AR] • Failed to read response text: {}", e);
+            return Ok("".to_string());
+        }
+    };
+    Ok(text)
+}
+
 /// Authenticate a user with Hydra - part 1
 /// This begins the authentication flow quasi-synchronously, returning a URL to visit (that the user will sign in at)
 #[tauri::command]
@@ -42,7 +96,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(),
@@ -86,6 +140,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/import.rs

@@ -2,6 +2,11 @@ use std::path::PathBuf;
 
 use crate::api::Result;
 use theseus::pack::import::ImportLauncherType;
+use theseus::pack::import::curseforge_profile::{
+    CurseForgeProfileMetadata,
+    fetch_curseforge_profile_metadata as fetch_cf_metadata,
+    import_curseforge_profile as import_cf_profile,
+};
 
 use theseus::pack::import;
 
@@ -12,6 +17,8 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
             import_instance,
             is_valid_importable_instance,
             get_default_launcher_path,
+            fetch_curseforge_profile_metadata,
+            import_curseforge_profile,
         ])
         .build()
 }
@@ -68,3 +75,24 @@ pub async fn get_default_launcher_path(
 ) -> Result<Option<PathBuf>> {
     Ok(import::get_default_launcher_path(launcher_type))
 }
+
+/// Fetch CurseForge profile metadata from profile code
+/// eg: fetch_curseforge_profile_metadata("eSrNlKNo")
+#[tauri::command]
+pub async fn fetch_curseforge_profile_metadata(
+    profile_code: String,
+) -> Result<CurseForgeProfileMetadata> {
+    Ok(fetch_cf_metadata(&profile_code).await?)
+}
+
+/// Import a CurseForge profile from profile code
+/// profile_path should be a blank profile for this purpose- if the function fails, it will be deleted
+/// eg: import_curseforge_profile("profile-path", "eSrNlKNo")
+#[tauri::command]
+pub async fn import_curseforge_profile(
+    profile_path: String,
+    profile_code: String,
+) -> Result<()> {
+    import_cf_profile(&profile_code, &profile_path).await?;
+    Ok(())
+}

apps/app/src/api/mod.rs

@@ -21,6 +21,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/utils.rs

@@ -30,37 +30,37 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
         .build()
 }
 
-/// [AR] Feature
+/// [AR] Feature. Ely.by
 #[tauri::command]
 pub async fn init_authlib_patching(
-    minecraftversion: &str,
-    ismojang: bool,
+    minecraft_version: &str,
+    is_mojang: bool,
 ) -> Result<bool> {
     let result =
-        utils::init_authlib_patching(minecraftversion, ismojang).await?;
+        utils::init_authlib_patching(minecraft_version, is_mojang).await?;
     Ok(result)
 }
 
-/// [AR] Patch fix
+/// [AR] Migration. Patch
 #[tauri::command]
 pub async fn apply_migration_fix(eol: &str) -> Result<bool> {
     let result = utils::apply_migration_fix(eol).await?;
     Ok(result)
 }
 
-/// [AR] Feature
+/// [AR] Feature. Updater
 #[tauri::command]
 pub async fn init_update_launcher(
-    downloadurl: &str,
+    download_url: &str,
     filename: &str,
-    ostype: &str,
-    autoupdatesupported: bool,
+    os_type: &str,
+    auto_update_supported: bool,
 ) -> Result<()> {
     let _ = utils::init_update_launcher(
-        downloadurl,
+        download_url,
         filename,
-        ostype,
-        autoupdatesupported,
+        os_type,
+        auto_update_supported,
     )
     .await;
     Ok(())

apps/app/src/api/worlds.rs

@@ -5,8 +5,8 @@ use tauri::{AppHandle, Manager, Runtime};
 use theseus::prelude::ProcessMetadata;
 use theseus::profile::{QuickPlayType, get_full_path};
 use theseus::worlds::{
-    DisplayStatus, ServerPackStatus, ServerStatus, World, WorldType,
-    WorldWithProfile,
+    DisplayStatus, ProtocolVersion, ServerPackStatus, ServerStatus, World,
+    WorldType, WorldWithProfile,
 };
 use theseus::{profile, worlds};
 
@@ -183,14 +183,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?)
 }

apps/app/tauri.conf.json

@@ -41,7 +41,7 @@
     ]
   },
   "productName": "AstralRinth App",
-  "version": "0.10.304",
+  "version": "0.10.305",
   "mainBinaryName": "AstralRinth App",
   "identifier": "AstralRinthApp",
   "plugins": {
@@ -63,6 +63,7 @@
         "height": 800,
         "resizable": true,
         "title": "AstralRinth",
+        "label": "main",
         "width": 1280,
         "minHeight": 700,
         "minWidth": 1100,
@@ -86,7 +87,7 @@
       "capabilities": ["core", "plugins"],
       "csp": {
         "default-src": "'self' customprotocol: asset:",
-        "connect-src": "ipc: https://git.astralium.su http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs 'self' data: blob:",
+        "connect-src": "ipc: https://git.astralium.su https://authserver.ely.by http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs 'self' data: blob:",
         "font-src": ["https://cdn-raw.modrinth.com/fonts/"],
         "img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
         "style-src": "'unsafe-inline' 'self'",

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/docs/src/content/docs/contributing/labrinth.md

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

apps/frontend/package.json

@@ -38,9 +38,10 @@
     "@intercom/messenger-js-sdk": "^0.0.14",
     "@ltd/j-toml": "^1.38.0",
     "@modrinth/assets": "workspace:*",
+    "@modrinth/blog": "workspace:*",
+    "@modrinth/moderation": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
-    "@modrinth/blog": "workspace:*",
     "@pinia/nuxt": "^0.5.1",
     "@types/three": "^0.172.0",
     "@vintl/vintl": "^4.4.1",
@@ -58,9 +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/assets/styles/components.scss

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

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

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

apps/frontend/src/components/ui/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/Notifications.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     class="vue-notification-group experimental-styles-within"
-    :class="{ 'intercom-present': isIntercomPresent }"
+    :class="{
+      'intercom-present': isIntercomPresent,
+      rightwards: moveNotificationsRight,
+    }"
   >
     <transition-group name="notifs">
       <div
@@ -82,6 +85,7 @@ import {
   CopyIcon,
 } from "@modrinth/assets";
 const notifications = useNotifications();
+const { isVisible: moveNotificationsRight } = useNotificationRightwards();
 
 const isIntercomPresent = ref(false);
 
@@ -160,6 +164,15 @@ function copyToClipboard(notif) {
     bottom: 5rem;
   }
 
+  &.rightwards {
+    right: unset !important;
+    left: 1.5rem;
+
+    @media screen and (max-width: 500px) {
+      left: 0.75rem;
+    }
+  }
+
   .vue-notification-wrapper {
     width: 100%;
     overflow: hidden;

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

@@ -0,0 +1,179 @@
+<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 dayjs from "dayjs";
+import {
+  Avatar,
+  useRelativeTime,
+  OverflowMenu,
+  type OverflowMenuOption,
+  ButtonStyled,
+} from "@modrinth/ui";
+import {
+  EllipsisVerticalIcon,
+  OrganizationIcon,
+  EyeIcon,
+  ClipboardCopyIcon,
+  LinkIcon,
+} from "@modrinth/assets";
+import type { ExtendedDelphiReport } from "@modrinth/moderation";
+
+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,275 @@
+<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 {
+  Avatar,
+  useRelativeTime,
+  OverflowMenu,
+  type OverflowMenuOption,
+  CollapsibleRegion,
+  ButtonStyled,
+} from "@modrinth/ui";
+import {
+  EllipsisVerticalIcon,
+  OrganizationIcon,
+  EyeIcon,
+  ClipboardCopyIcon,
+  LinkIcon,
+} from "@modrinth/assets";
+import {
+  type ExtendedReport,
+  reportQuickReplies,
+  type ReportQuickReply,
+} from "@modrinth/moderation";
+import ChevronDownIcon from "../servers/icons/ChevronDownIcon.vue";
+import ReportThread from "../thread/ReportThread.vue";
+
+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

@@ -0,0 +1,116 @@
+<template>
+  <NewModal ref="modal" header="Moderation shortcuts" :closable="true">
+    <div>
+      <div class="keybinds-sections">
+        <div class="grid grid-cols-2 gap-x-12 gap-y-3">
+          <div
+            v-for="keybind in keybinds"
+            :key="keybind.id"
+            class="keybind-item flex items-center justify-between gap-4"
+            :class="{
+              'col-span-2': keybinds.length % 2 === 1 && keybinds[keybinds.length - 1] === keybind,
+            }"
+          >
+            <span class="text-sm text-secondary">{{ keybind.description }}</span>
+            <div class="flex items-center gap-1">
+              <kbd
+                v-for="(key, index) in parseKeybindDisplay(keybind.keybind)"
+                :key="`${keybind.id}-key-${index}`"
+                class="keybind-key"
+              >
+                {{ key }}
+              </kbd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import NewModal from "@modrinth/ui/src/components/modal/NewModal.vue";
+import { keybinds, type KeybindListener, normalizeKeybind } from "@modrinth/moderation";
+
+const modal = ref<InstanceType<typeof NewModal>>();
+
+function parseKeybindDisplay(keybind: KeybindListener["keybind"]): string[] {
+  const keybinds = Array.isArray(keybind) ? keybind : [keybind];
+  const normalized = keybinds[0];
+  const def = normalizeKeybind(normalized);
+
+  const keys = [];
+
+  if (def.ctrl || def.meta) {
+    keys.push(isMac() ? "CMD" : "CTRL");
+  }
+  if (def.shift) keys.push("SHIFT");
+  if (def.alt) keys.push("ALT");
+
+  const mainKey = def.key
+    .replace("ArrowLeft", "←")
+    .replace("ArrowRight", "→")
+    .replace("ArrowUp", "↑")
+    .replace("ArrowDown", "↓")
+    .replace("Enter", "↵")
+    .replace("Space", "SPACE")
+    .replace("Escape", "ESC")
+    .toUpperCase();
+
+  keys.push(mainKey);
+
+  return keys;
+}
+
+function isMac() {
+  return navigator.platform.toUpperCase().includes("MAC");
+}
+
+function show(event?: MouseEvent) {
+  modal.value?.show(event);
+}
+
+function hide() {
+  modal.value?.hide();
+}
+
+defineExpose({
+  show,
+  hide,
+});
+</script>
+
+<style scoped lang="scss">
+.keybind-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--color-contrast);
+
+  + .keybind-key {
+    margin-left: 0.25rem;
+  }
+}
+
+.keybind-item {
+  min-height: 2rem;
+}
+
+@media (max-width: 768px) {
+  .keybinds-sections {
+    .grid {
+      grid-template-columns: 1fr;
+      gap: 0.75rem;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,513 @@
+<template>
+  <div>
+    <h2 v-if="modPackData" class="m-0 mb-2 text-lg font-extrabold">
+      Modpack permissions ({{ Math.min(modPackData.length, currentIndex + 1) }} /
+      {{ modPackData.length }})
+    </h2>
+
+    <div v-if="!modPackData">Loading data...</div>
+
+    <div v-else-if="modPackData.length === 0">
+      <p>All permissions already obtained.</p>
+    </div>
+
+    <div v-else-if="!modPackData[currentIndex]">
+      <p>All permission checks complete!</p>
+    </div>
+
+    <div v-else>
+      <div v-if="modPackData[currentIndex].type === 'unknown'">
+        <p>What is the approval type of {{ modPackData[currentIndex].file_name }}?</p>
+        <div class="input-group">
+          <ButtonStyled
+            v-for="(option, index) in fileApprovalTypes"
+            :key="index"
+            :color="modPackData[currentIndex].status === option.id ? 'brand' : 'standard'"
+            @click="setStatus(currentIndex, option.id)"
+          >
+            <button>
+              {{ option.name }}
+            </button>
+          </ButtonStyled>
+        </div>
+        <div v-if="modPackData[currentIndex].status !== 'unidentified'" class="flex flex-col gap-1">
+          <label for="proof">
+            <span class="label__title">Proof</span>
+          </label>
+          <input
+            id="proof"
+            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).proof"
+            type="text"
+            autocomplete="off"
+            placeholder="Enter proof of status..."
+            @input="persistAll()"
+          />
+          <label for="link">
+            <span class="label__title">Link</span>
+          </label>
+          <input
+            id="link"
+            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).url"
+            type="text"
+            autocomplete="off"
+            placeholder="Enter link of project..."
+            @input="persistAll()"
+          />
+          <label for="title">
+            <span class="label__title">Title</span>
+          </label>
+          <input
+            id="title"
+            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).title"
+            type="text"
+            autocomplete="off"
+            placeholder="Enter title of project..."
+            @input="persistAll()"
+          />
+        </div>
+      </div>
+
+      <div v-else-if="modPackData[currentIndex].type === 'flame'">
+        <p>
+          What is the approval type of {{ modPackData[currentIndex].title }} (<a
+            :href="modPackData[currentIndex].url"
+            target="_blank"
+            class="text-link"
+            >{{ modPackData[currentIndex].url }}</a
+          >)?
+        </p>
+        <div class="input-group">
+          <ButtonStyled
+            v-for="(option, index) in fileApprovalTypes"
+            :key="index"
+            :color="modPackData[currentIndex].status === option.id ? 'brand' : 'standard'"
+            @click="setStatus(currentIndex, option.id)"
+          >
+            <button>
+              {{ option.name }}
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+
+      <div
+        v-if="
+          ['unidentified', 'no', 'with-attribution'].includes(
+            modPackData[currentIndex].status || '',
+          )
+        "
+      >
+        <p v-if="modPackData[currentIndex].status === 'unidentified'">
+          Does this project provide identification and permission for
+          <strong>{{ modPackData[currentIndex].file_name }}</strong
+          >?
+        </p>
+        <p v-else-if="modPackData[currentIndex].status === 'with-attribution'">
+          Does this project provide attribution for
+          <strong>{{ modPackData[currentIndex].file_name }}</strong
+          >?
+        </p>
+        <p v-else>
+          Does this project provide proof of permission for
+          <strong>{{ modPackData[currentIndex].file_name }}</strong
+          >?
+        </p>
+        <div class="input-group">
+          <ButtonStyled
+            v-for="(option, index) in filePermissionTypes"
+            :key="index"
+            :color="modPackData[currentIndex].approved === option.id ? 'brand' : 'standard'"
+            @click="setApproval(currentIndex, option.id)"
+          >
+            <button>
+              {{ option.name }}
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-4 flex gap-2">
+      <ButtonStyled>
+        <button :disabled="currentIndex <= 0" @click="goToPrevious">
+          <LeftArrowIcon aria-hidden="true" />
+          Previous
+        </button>
+      </ButtonStyled>
+      <ButtonStyled v-if="modPackData && currentIndex < modPackData.length" color="blue">
+        <button :disabled="!canGoNext" @click="goToNext">
+          <RightArrowIcon aria-hidden="true" />
+          {{ currentIndex + 1 >= modPackData.length ? "Complete" : "Next" }}
+        </button>
+      </ButtonStyled>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LeftArrowIcon, RightArrowIcon } from "@modrinth/assets";
+import type {
+  ModerationJudgements,
+  ModerationModpackItem,
+  ModerationModpackResponse,
+  ModerationUnknownModpackItem,
+  ModerationFlameModpackItem,
+  ModerationModpackPermissionApprovalType,
+  ModerationPermissionType,
+} from "@modrinth/utils";
+import { ButtonStyled } from "@modrinth/ui";
+import { ref, computed, watch, onMounted } from "vue";
+import { useLocalStorage, useSessionStorage } from "@vueuse/core";
+
+const props = defineProps<{
+  projectId: string;
+  modelValue?: ModerationJudgements;
+}>();
+
+const emit = defineEmits<{
+  complete: [];
+  "update:modelValue": [judgements: ModerationJudgements];
+}>();
+
+const persistedModPackData = useLocalStorage<ModerationModpackItem[] | null>(
+  `modpack-permissions-${props.projectId}`,
+  null,
+  {
+    serializer: {
+      read: (v: any) => (v ? JSON.parse(v) : null),
+      write: (v: any) => JSON.stringify(v),
+    },
+  },
+);
+
+const persistedIndex = useLocalStorage<number>(`modpack-permissions-index-${props.projectId}`, 0);
+
+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[] = [
+  {
+    id: "yes",
+    name: "Yes",
+  },
+  {
+    id: "with-attribution-and-source",
+    name: "With attribution and source",
+  },
+  {
+    id: "with-attribution",
+    name: "With attribution",
+  },
+  {
+    id: "no",
+    name: "No",
+  },
+  {
+    id: "permanent-no",
+    name: "Permanent no",
+  },
+  {
+    id: "unidentified",
+    name: "Unidentified",
+  },
+];
+
+const filePermissionTypes: ModerationPermissionType[] = [
+  { id: "yes", name: "Yes" },
+  { id: "no", name: "No" },
+];
+
+function persistAll() {
+  persistedModPackData.value = modPackData.value;
+  persistedIndex.value = currentIndex.value;
+}
+
+watch(
+  modPackData,
+  (newValue) => {
+    persistedModPackData.value = newValue;
+  },
+  { deep: true },
+);
+
+watch(currentIndex, (newValue) => {
+  persistedIndex.value = newValue;
+});
+
+function loadPersistedData(): void {
+  if (persistedModPackData.value) {
+    modPackData.value = persistedModPackData.value;
+  }
+  currentIndex.value = persistedIndex.value;
+}
+
+function clearPersistedData(): void {
+  persistedModPackData.value = null;
+  persistedIndex.value = 0;
+}
+
+async function fetchModPackData(): Promise<void> {
+  try {
+    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 => ({
+            sha1,
+            file_name: fileName,
+            type: "unknown",
+            status: null,
+            approved: null,
+            proof: "",
+            url: "",
+            title: "",
+          }),
+        )
+        .sort((a, b) => a.file_name.localeCompare(b.file_name)),
+      ...Object.entries(data.flame_files || {})
+        .map(
+          ([sha1, info]): ModerationFlameModpackItem => ({
+            sha1,
+            file_name: info.file_name,
+            type: "flame",
+            status: null,
+            approved: null,
+            id: info.id,
+            title: info.title || info.file_name,
+            url: info.url || `https://www.curseforge.com/minecraft/mc-mods/${info.id}`,
+          }),
+        )
+        .sort((a, b) => a.file_name.localeCompare(b.file_name)),
+    ];
+
+    if (modPackData.value) {
+      const existingMap = new Map(modPackData.value.map((item) => [item.sha1, item]));
+
+      sortedData.forEach((item) => {
+        const existing = existingMap.get(item.sha1);
+        if (existing) {
+          Object.assign(item, {
+            status: existing.status,
+            approved: existing.approved,
+            ...(item.type === "unknown" && {
+              proof: (existing as ModerationUnknownModpackItem).proof || "",
+              url: (existing as ModerationUnknownModpackItem).url || "",
+              title: (existing as ModerationUnknownModpackItem).title || "",
+            }),
+            ...(item.type === "flame" && {
+              url: (existing as ModerationFlameModpackItem).url || item.url,
+              title: (existing as ModerationFlameModpackItem).title || item.title,
+            }),
+          });
+        }
+      });
+    }
+
+    modPackData.value = sortedData;
+    persistAll();
+  } catch (error) {
+    console.error("Failed to fetch modpack data:", error);
+    modPackData.value = [];
+    permanentNoFiles.value = [];
+    persistAll();
+  }
+}
+
+function goToPrevious(): void {
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+    persistAll();
+  }
+}
+
+watch(
+  modPackData,
+  (newValue) => {
+    persistedModPackData.value = newValue;
+  },
+  { deep: true },
+);
+
+function goToNext(): void {
+  if (modPackData.value && currentIndex.value < modPackData.value.length) {
+    currentIndex.value++;
+
+    if (currentIndex.value >= modPackData.value.length) {
+      const judgements = getJudgements();
+      emit("update:modelValue", judgements);
+      emit("complete");
+      clearPersistedData();
+    } else {
+      persistAll();
+    }
+  }
+}
+
+function setStatus(index: number, status: ModerationModpackPermissionApprovalType["id"]): void {
+  if (modPackData.value && modPackData.value[index]) {
+    modPackData.value[index].status = status;
+    modPackData.value[index].approved = null;
+    persistAll();
+    emit("update:modelValue", getJudgements());
+  }
+}
+
+function setApproval(index: number, approved: ModerationPermissionType["id"]): void {
+  if (modPackData.value && modPackData.value[index]) {
+    modPackData.value[index].approved = approved;
+    persistAll();
+    emit("update:modelValue", getJudgements());
+  }
+}
+
+const canGoNext = computed(() => {
+  if (!modPackData.value || !modPackData.value[currentIndex.value]) return false;
+  const current = modPackData.value[currentIndex.value];
+  return current.status !== null;
+});
+
+function getJudgements(): ModerationJudgements {
+  if (!modPackData.value) return {};
+
+  const judgements: ModerationJudgements = {};
+
+  modPackData.value.forEach((item) => {
+    if (item.type === "flame") {
+      judgements[item.sha1] = {
+        type: "flame",
+        id: item.id,
+        status: item.status,
+        link: item.url,
+        title: item.title,
+        file_name: item.file_name,
+      };
+    } else if (item.type === "unknown") {
+      judgements[item.sha1] = {
+        type: "unknown",
+        status: item.status,
+        proof: item.proof,
+        link: item.url,
+        title: item.title,
+        file_name: item.file_name,
+      };
+    }
+  });
+
+  return judgements;
+}
+
+onMounted(() => {
+  loadPersistedData();
+  if (!modPackData.value) {
+    fetchModPackData();
+  }
+});
+
+watch(
+  modPackData,
+  (newValue) => {
+    if (newValue && newValue.length === 0) {
+      emit("complete");
+      clearPersistedData();
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.projectId,
+  () => {
+    clearPersistedData();
+    loadPersistedData();
+    if (!modPackData.value) {
+      fetchModPackData();
+    }
+  },
+);
+
+function getModpackFiles(): {
+  interactive: ModerationModpackItem[];
+  permanentNo: ModerationModpackItem[];
+} {
+  return {
+    interactive: modPackData.value || [],
+    permanentNo: permanentNoFiles.value,
+  };
+}
+
+defineExpose({
+  getModpackFiles,
+});
+</script>
+
+<style scoped>
+.input-group {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.modpack-buttons {
+  margin-top: 1rem;
+}
+</style>

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

@@ -172,6 +172,7 @@ const flags = useFeatureFlags();
 
   .markdown-body {
     grid-area: body;
+    max-width: 100%;
   }
 
   .reporter-info {

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/ContentVersionEditModal.vue

@@ -31,9 +31,9 @@
                 class="flex cursor-pointer items-center gap-1 bg-transparent p-0"
                 @click="
                   versionFilter &&
-                    (unlockFilterAccordion.isOpen
-                      ? unlockFilterAccordion.close()
-                      : unlockFilterAccordion.open())
+                  (unlockFilterAccordion.isOpen
+                    ? unlockFilterAccordion.close()
+                    : unlockFilterAccordion.open())
                 "
               >
                 <TagItem

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

@@ -66,6 +66,27 @@
       <UiServersPanelSpinner />
       Your server's hardware is currently being upgraded and will be back online shortly.
     </div>
+    <div
+      v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
+      class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+    >
+      <div class="flex flex-row gap-2">
+        <UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been cancelled. Please
+        update your billing information or contact Modrinth Support for more information.
+      </div>
+      <CopyCode :text="`${props.server_id}`" class="ml-auto" />
+    </div>
+    <div
+      v-else-if="status === 'suspended' && suspension_reason"
+      class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+    >
+      <div class="flex flex-row gap-2">
+        <UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been suspended:
+        {{ suspension_reason }}. Please update your billing information or contact Modrinth Support
+        for more information.
+      </div>
+      <CopyCode :text="`${props.server_id}`" class="ml-auto" />
+    </div>
     <div
       v-else-if="status === 'suspended'"
       class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
@@ -87,7 +108,8 @@ import { Avatar, CopyCode } from "@modrinth/ui";
 
 const props = defineProps<Partial<Server>>();
 
-if (props.server_id) {
+if (props.server_id && props.status === "available") {
+  // Necessary only to get server icon
   await useModrinthServers(props.server_id, ["general"]);
 }
 
@@ -109,11 +131,6 @@ if (props.upstream) {
 }
 
 const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined);
-
-if (import.meta.server && projectData.value?.icon_url) {
-  await useModrinthServers(props.server_id!, ["general"]);
-}
-
 const iconUrl = computed(() => projectData.value?.icon_url || undefined);
 const isConfiguring = computed(() => props.flows?.intro);
 </script>

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

@@ -34,6 +34,38 @@
         </div>
       </div>
     </Modal>
+    <Modal ref="modalReply" header="Reply to thread">
+      <div class="modal-submit universal-body">
+        <span>
+          Your project is already approved. As such, the moderation team does not actively monitor
+          this thread. However, they may still see your message if there is a problem with your
+          project.
+        </span>
+        <span>
+          If you need to get in contact with the moderation team, please use the
+          <a class="text-link" href="https://support.modrinth.com" target="_blank">
+            Modrinth Help Center
+          </a>
+          and click the green bubble to contact support.
+        </span>
+        <Checkbox
+          v-model="replyConfirmation"
+          description="Confirm moderators do not actively monitor this"
+        >
+          I acknowledge that the moderators do not actively monitor the thread.
+        </Checkbox>
+        <div class="input-group push-right">
+          <button
+            class="btn btn-primary"
+            :disabled="!replyConfirmation"
+            @click="sendReplyFromModal()"
+          >
+            <ReplyIcon aria-hidden="true" />
+            Reply to thread
+          </button>
+        </div>
+      </div>
+    </Modal>
     <div v-if="flags.developerMode" class="thread-id">
       Thread ID:
       <CopyCode :text="thread.id" />
@@ -71,12 +103,17 @@
           v-if="sortedMessages.length > 0"
           class="btn btn-primary"
           :disabled="!replyBody"
-          @click="sendReply()"
+          @click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
         >
           <ReplyIcon aria-hidden="true" />
           Reply
         </button>
-        <button v-else class="btn btn-primary" :disabled="!replyBody" @click="sendReply()">
+        <button
+          v-else
+          class="btn btn-primary"
+          :disabled="!replyBody"
+          @click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
+        >
           <SendIcon aria-hidden="true" />
           Send
         </button>
@@ -289,6 +326,7 @@ const sortedMessages = computed(() => {
 });
 
 const modalSubmit = ref(null);
+const modalReply = ref(null);
 
 async function updateThreadLocal() {
   let threadId = null;
@@ -316,6 +354,11 @@ async function onUploadImage(file) {
   return response.url;
 }
 
+async function sendReplyFromModal(status = null, privateMessage = false) {
+  modalReply.value.hide();
+  await sendReply(status, privateMessage);
+}
+
 async function sendReply(status = null, privateMessage = false) {
   try {
     const body = {
@@ -398,6 +441,7 @@ async function reopenReport() {
 
 const replyWithSubmission = ref(false);
 const submissionConfirmation = ref(false);
+const replyConfirmation = ref(false);
 
 function openResubmitModal(reply) {
   submissionConfirmation.value = false;
@@ -405,6 +449,11 @@ function openResubmitModal(reply) {
   modalSubmit.value.show();
 }
 
+function openReplyModal(reply) {
+  replyConfirmation.value = false;
+  modalReply.value.show();
+}
+
 async function resubmit() {
   if (replyWithSubmission.value) {
     await sendReply("processing");

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

@@ -0,0 +1,282 @@
+<template>
+  <div>
+    <div v-if="flags.developerMode" class="mb-4 font-bold text-heading">
+      Thread ID:
+      <CopyCode :text="thread.id" />
+    </div>
+
+    <div
+      v-if="sortedMessages.length > 0"
+      class="bg-raised flex flex-col space-y-4 rounded-xl p-3 sm:p-4"
+    >
+      <ThreadMessage
+        v-for="message in sortedMessages"
+        :key="'message-' + message.id"
+        :thread="thread"
+        :message="message"
+        :members="members"
+        :report="report"
+        :auth="auth"
+        raised
+        @update-thread="() => updateThreadLocal()"
+      />
+    </div>
+
+    <template v-if="reportClosed">
+      <p class="text-secondary">This thread is closed and new messages cannot be sent to it.</p>
+      <ButtonStyled v-if="isStaff(auth.user)" color="green" class="mt-2 w-full sm:w-auto">
+        <button
+          class="flex w-full items-center justify-center gap-2 sm:w-auto"
+          @click="reopenReport()"
+        >
+          <CheckCircleIcon class="size-4" />
+          Reopen Thread
+        </button>
+      </ButtonStyled>
+    </template>
+
+    <template v-else>
+      <div class="mt-4">
+        <MarkdownEditor
+          v-model="replyBody"
+          :placeholder="sortedMessages.length > 0 ? 'Reply to thread...' : 'Send a message...'"
+          :on-image-upload="onUploadImage"
+        />
+      </div>
+
+      <div
+        class="mt-4 flex flex-col items-stretch justify-between gap-3 sm:flex-row sm:items-center sm:gap-2"
+      >
+        <div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
+          <ButtonStyled v-if="sortedMessages.length > 0" color="brand" class="w-full sm:w-auto">
+            <button
+              :disabled="!replyBody"
+              class="flex w-full items-center justify-center gap-2 sm:w-auto"
+              @click="sendReply()"
+            >
+              <ReplyIcon class="size-4" />
+              Reply
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-else color="brand" class="w-full sm:w-auto">
+            <button
+              :disabled="!replyBody"
+              class="flex w-full items-center justify-center gap-2 sm:w-auto"
+              @click="sendReply()"
+            >
+              <SendIcon class="size-4" />
+              Send
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-if="isStaff(auth.user)" class="w-full sm:w-auto">
+            <button
+              :disabled="!replyBody"
+              class="flex w-full items-center justify-center gap-2 sm:w-auto"
+              @click="sendReply(true)"
+            >
+              <ScaleIcon class="size-4" />
+              <span class="hidden sm:inline">Add private note</span>
+              <span class="sm:hidden">Private note</span>
+            </button>
+          </ButtonStyled>
+        </div>
+
+        <div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
+          <template v-if="isStaff(auth.user)">
+            <ButtonStyled v-if="replyBody" color="red" class="w-full sm:w-auto">
+              <button
+                class="flex w-full items-center justify-center gap-2 sm:w-auto"
+                @click="closeReport(true)"
+              >
+                <CheckCircleIcon class="size-4" />
+                <span class="hidden sm:inline">Close with reply</span>
+                <span class="sm:hidden">Close & reply</span>
+              </button>
+            </ButtonStyled>
+            <ButtonStyled v-else color="red" class="w-full sm:w-auto">
+              <button
+                class="flex w-full items-center justify-center gap-2 sm:w-auto"
+                @click="closeReport()"
+              >
+                <CheckCircleIcon class="size-4" />
+                Close report
+              </button>
+            </ButtonStyled>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CopyCode, MarkdownEditor, ButtonStyled } from "@modrinth/ui";
+import { ReplyIcon, SendIcon, CheckCircleIcon, ScaleIcon } from "@modrinth/assets";
+import type { Thread, Report, User, ThreadMessage as TypeThreadMessage } from "@modrinth/utils";
+import dayjs from "dayjs";
+import ThreadMessage from "./ThreadMessage.vue";
+import { useImageUpload } from "~/composables/image-upload.ts";
+import { isStaff } from "~/helpers/users.js";
+
+const props = defineProps<{
+  thread: Thread;
+  reporter: User;
+  report: Report;
+}>();
+
+const auth = await useAuth();
+
+const emit = defineEmits<{
+  updateThread: [thread: Thread];
+}>();
+
+const flags = useFeatureFlags();
+
+const members = computed(() => {
+  const membersMap: Record<string, User> = {
+    [props.reporter.id]: props.reporter,
+  };
+  for (const member of props.thread.members) {
+    membersMap[member.id] = member;
+  }
+  return membersMap;
+});
+
+const replyBody = ref("");
+function setReplyContent(content: string) {
+  replyBody.value = content;
+}
+
+defineExpose({
+  setReplyContent,
+});
+
+const sortedMessages = computed(() => {
+  const messages: TypeThreadMessage[] = [
+    {
+      id: null,
+      author_id: props.reporter.id,
+      body: {
+        type: "text",
+        body: props.report.body || "Report opened.",
+        private: false,
+        replying_to: null,
+        associated_images: [],
+      },
+      created: props.report.created,
+      hide_identity: false,
+    },
+  ];
+  if (props.thread) {
+    messages.push(
+      ...[...props.thread.messages].sort(
+        (a, b) => dayjs(a.created).toDate().getTime() - dayjs(b.created).toDate().getTime(),
+      ),
+    );
+  }
+
+  return messages;
+});
+
+async function updateThreadLocal() {
+  const threadId = props.report.thread_id;
+  if (threadId) {
+    try {
+      const thread = (await useBaseFetch(`thread/${threadId}`)) as Thread;
+      emit("updateThread", thread);
+    } catch (error) {
+      console.error("Failed to update thread:", error);
+    }
+  }
+}
+
+const imageIDs = ref<string[]>([]);
+
+async function onUploadImage(file: File) {
+  const response = await useImageUpload(file, { context: "thread_message" });
+
+  imageIDs.value.push(response.id);
+  imageIDs.value = imageIDs.value.slice(-10);
+
+  return response.url;
+}
+
+async function sendReply(privateMessage = false) {
+  try {
+    const body: any = {
+      body: {
+        type: "text",
+        body: replyBody.value,
+        private: privateMessage,
+      },
+    };
+
+    if (imageIDs.value.length > 0) {
+      body.body = {
+        ...body.body,
+        uploaded_images: imageIDs.value,
+      };
+    }
+
+    await useBaseFetch(`thread/${props.thread.id}`, {
+      method: "POST",
+      body,
+    });
+
+    replyBody.value = "";
+    await updateThreadLocal();
+  } catch (err: any) {
+    addNotification({
+      title: "Error sending message",
+      text: err.data ? err.data.description : err,
+      type: "error",
+    });
+  }
+}
+
+const didCloseReport = ref(false);
+const reportClosed = computed(() => {
+  return didCloseReport.value || (props.report && props.report.closed);
+});
+
+async function closeReport(reply = false) {
+  if (reply) {
+    await sendReply();
+  }
+
+  try {
+    await useBaseFetch(`report/${props.report.id}`, {
+      method: "PATCH",
+      body: {
+        closed: true,
+      },
+    });
+    await updateThreadLocal();
+    didCloseReport.value = true;
+  } catch (err: any) {
+    addNotification({
+      title: "Error closing report",
+      text: err.data ? err.data.description : err,
+      type: "error",
+    });
+  }
+}
+
+async function reopenReport() {
+  try {
+    await useBaseFetch(`report/${props.report.id}`, {
+      method: "PATCH",
+      body: {
+        closed: false,
+      },
+    });
+    await updateThreadLocal();
+  } catch (err: any) {
+    addNotification({
+      title: "Error reopening report",
+      text: err.data ? err.data.description : err,
+      type: "error",
+    });
+  }
+}
+</script>

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

@@ -36,7 +36,7 @@
           v-tooltip="'Modrinth Team'"
         />
         <MicrophoneIcon
-          v-if="report && message.author_id === report.reporterUser.id"
+          v-if="report && message.author_id === report.reporter_user?.id"
           v-tooltip="'Reporter'"
           class="reporter-icon"
         />

apps/frontend/src/composables/servers/modrinth-servers.ts

@@ -194,13 +194,12 @@ export class ModrinthServer {
   }
 
   async testNodeReachability(): Promise<boolean> {
-    if (!this.general?.datacenter) {
-      console.warn("No datacenter info available for ping test");
+    if (!this.general?.node?.instance) {
+      console.warn("No node instance available for ping test");
       return false;
     }
 
-    const datacenter = this.general.datacenter;
-    const wsUrl = `wss://${datacenter}.nodes.modrinth.com/pingtest`;
+    const wsUrl = `wss://${this.general.node.instance}/pingtest`;
 
     try {
       return await new Promise((resolve) => {

apps/frontend/src/composables/servers/servers-fetch.ts

@@ -112,7 +112,8 @@ export async function useServersFetch<T>(
       const response = await $fetch<T>(fullUrl, {
         method,
         headers,
-        body: body && contentType === "application/json" ? JSON.stringify(body) : body ?? undefined,
+        body:
+          body && contentType === "application/json" ? JSON.stringify(body) : (body ?? undefined),
         timeout: 10000,
       });
 
@@ -146,7 +147,7 @@ export async function useServersFetch<T>(
           404: "Not Found",
           405: "Method Not Allowed",
           408: "Request Timeout",
-          429: "Too Many Requests",
+          429: "You're making requests too quickly. Please wait a moment and try again.",
           500: "Internal Server Error",
           502: "Bad Gateway",
           503: "Service Unavailable",
@@ -166,11 +167,17 @@ export async function useServersFetch<T>(
           console.error("Fetch error:", error);
 
           const fetchError = new ModrinthServersFetchError(
-            `[Modrinth Servers] ${message}`,
+            `[Modrinth Servers] ${error.message}`,
             statusCode,
             error,
           );
-          throw new ModrinthServerError(error.message, statusCode, fetchError, module, v1Error);
+          throw new ModrinthServerError(
+            `[Modrinth Servers] ${message}`,
+            statusCode,
+            fetchError,
+            module,
+            v1Error,
+          );
         }
 
         const baseDelay = statusCode && statusCode >= 500 ? 5000 : 1000;

apps/frontend/src/composables/util.ts

@@ -0,0 +1,12 @@
+export const useNotificationRightwards = () => {
+  const isVisible = useState("moderation-checklist-notifications", () => false);
+
+  const setVisible = (visible: boolean) => {
+    isVisible.value = visible;
+  };
+
+  return {
+    isVisible: readonly(isVisible),
+    setVisible,
+  };
+};

apps/frontend/src/helpers/moderation.ts

@@ -0,0 +1,236 @@
+import type { ExtendedReport, OwnershipTarget } from "@modrinth/moderation";
+import type {
+  Thread,
+  Version,
+  User,
+  Project,
+  TeamMember,
+  Organization,
+  Report,
+} from "@modrinth/utils";
+
+export const useModerationCache = () => ({
+  threads: useState<Map<string, Thread>>("moderation-report-cache-threads", () => new Map()),
+  users: useState<Map<string, User>>("moderation-report-cache-users", () => new Map()),
+  projects: useState<Map<string, Project>>("moderation-report-cache-projects", () => new Map()),
+  versions: useState<Map<string, Version>>("moderation-report-cache-versions", () => new Map()),
+  teams: useState<Map<string, TeamMember[]>>("moderation-report-cache-teams", () => new Map()),
+  orgs: useState<Map<string, Organization>>("moderation-report-cache-orgs", () => new Map()),
+});
+
+// TODO: @AlexTMjugador - backend should do all of these functions.
+export async function enrichReportBatch(reports: Report[]): Promise<ExtendedReport[]> {
+  if (reports.length === 0) return [];
+
+  const cache = useModerationCache();
+
+  const threadIDs = reports
+    .map((r) => r.thread_id)
+    .filter(Boolean)
+    .filter((id) => !cache.threads.value.has(id));
+  const userIDs = [
+    ...reports.filter((r) => r.item_type === "user").map((r) => r.item_id),
+    ...reports.map((r) => r.reporter),
+  ].filter((id) => !cache.users.value.has(id));
+  const versionIDs = reports
+    .filter((r) => r.item_type === "version")
+    .map((r) => r.item_id)
+    .filter((id) => !cache.versions.value.has(id));
+  const projectIDs = reports
+    .filter((r) => r.item_type === "project")
+    .map((r) => r.item_id)
+    .filter((id) => !cache.projects.value.has(id));
+
+  const [newThreads, newVersions, newUsers] = await Promise.all([
+    threadIDs.length > 0
+      ? (fetchSegmented(threadIDs, (ids) => `threads?ids=${asEncodedJsonArray(ids)}`) as Promise<
+          Thread[]
+        >)
+      : Promise.resolve([]),
+    versionIDs.length > 0
+      ? (fetchSegmented(versionIDs, (ids) => `versions?ids=${asEncodedJsonArray(ids)}`) as Promise<
+          Version[]
+        >)
+      : Promise.resolve([]),
+    [...new Set(userIDs)].length > 0
+      ? (fetchSegmented(
+          [...new Set(userIDs)],
+          (ids) => `users?ids=${asEncodedJsonArray(ids)}`,
+        ) as Promise<User[]>)
+      : Promise.resolve([]),
+  ]);
+
+  newThreads.forEach((t) => cache.threads.value.set(t.id, t));
+  newVersions.forEach((v) => cache.versions.value.set(v.id, v));
+  newUsers.forEach((u) => cache.users.value.set(u.id, u));
+
+  const allVersions = [...newVersions, ...Array.from(cache.versions.value.values())];
+  const fullProjectIds = new Set([
+    ...projectIDs,
+    ...allVersions
+      .filter((v) => versionIDs.includes(v.id))
+      .map((v) => v.project_id)
+      .filter(Boolean),
+  ]);
+
+  const uncachedProjectIds = Array.from(fullProjectIds).filter(
+    (id) => !cache.projects.value.has(id),
+  );
+  const newProjects =
+    uncachedProjectIds.length > 0
+      ? ((await fetchSegmented(
+          uncachedProjectIds,
+          (ids) => `projects?ids=${asEncodedJsonArray(ids)}`,
+        )) as Project[])
+      : [];
+
+  newProjects.forEach((p) => cache.projects.value.set(p.id, p));
+
+  const allProjects = [...newProjects, ...Array.from(cache.projects.value.values())];
+  const teamIds = [...new Set(allProjects.map((p) => p.team).filter(Boolean))].filter(
+    (id) => !cache.teams.value.has(id || "invalid team id"),
+  );
+  const orgIds = [...new Set(allProjects.map((p) => p.organization).filter(Boolean))].filter(
+    (id) => !cache.orgs.value.has(id),
+  );
+
+  const [newTeams, newOrgs] = await Promise.all([
+    teamIds.length > 0
+      ? (fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`) as Promise<
+          TeamMember[][]
+        >)
+      : Promise.resolve([]),
+    orgIds.length > 0
+      ? (fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
+          apiVersion: 3,
+        }) as Promise<Organization[]>)
+      : Promise.resolve([]),
+  ]);
+
+  newTeams.forEach((team) => {
+    if (team.length > 0) cache.teams.value.set(team[0].team_id, team);
+  });
+  newOrgs.forEach((org) => cache.orgs.value.set(org.id, org));
+
+  return reports.map((report) => {
+    const thread = cache.threads.value.get(report.thread_id) || ({} as Thread);
+    const version =
+      report.item_type === "version" ? cache.versions.value.get(report.item_id) : undefined;
+
+    const project =
+      report.item_type === "project"
+        ? cache.projects.value.get(report.item_id)
+        : report.item_type === "version" && version
+          ? cache.projects.value.get(version.project_id)
+          : undefined;
+
+    let target: OwnershipTarget | undefined;
+
+    if (report.item_type === "user") {
+      const targetUser = cache.users.value.get(report.item_id);
+      if (targetUser) {
+        target = {
+          name: targetUser.username,
+          slug: targetUser.username,
+          avatar_url: targetUser.avatar_url,
+          type: "user",
+        };
+      }
+    } else if (project) {
+      let owner: TeamMember | null = null;
+      let org: Organization | null = null;
+
+      if (project.team) {
+        const teamMembers = cache.teams.value.get(project.team);
+        if (teamMembers) {
+          owner = teamMembers.find((member) => member.role === "Owner") || null;
+        }
+      }
+
+      if (project.organization) {
+        org = cache.orgs.value.get(project.organization) || null;
+      }
+
+      if (org) {
+        target = {
+          name: org.name,
+          avatar_url: org.icon_url,
+          type: "organization",
+          slug: org.slug,
+        };
+      } else if (owner) {
+        target = {
+          name: owner.user.username,
+          avatar_url: owner.user.avatar_url,
+          type: "user",
+          slug: owner.user.username,
+        };
+      }
+    }
+
+    return {
+      ...report,
+      thread,
+      reporter_user: cache.users.value.get(report.reporter) || ({} as User),
+      project,
+      user: report.item_type === "user" ? cache.users.value.get(report.item_id) : undefined,
+      version,
+      target,
+    };
+  });
+}
+
+// Doesn't need to be in @modrinth/moderation because it is specific to the frontend.
+export interface ModerationProject {
+  project: any;
+  owner: TeamMember | null;
+  org: Organization | null;
+}
+
+export async function enrichProjectBatch(projects: any[]): Promise<ModerationProject[]> {
+  const teamIds = [...new Set(projects.map((p) => p.team_id).filter(Boolean))];
+  const orgIds = [...new Set(projects.map((p) => p.organization).filter(Boolean))];
+
+  const [teamsData, orgsData]: [TeamMember[][], Organization[]] = await Promise.all([
+    teamIds.length > 0
+      ? fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
+      : Promise.resolve([]),
+    orgIds.length > 0
+      ? fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
+          apiVersion: 3,
+        })
+      : Promise.resolve([]),
+  ]);
+
+  const cache = useModerationCache();
+
+  teamsData.forEach((team) => {
+    if (team.length > 0) cache.teams.value.set(team[0].team_id, team);
+  });
+
+  orgsData.forEach((org: Organization) => {
+    cache.orgs.value.set(org.id, org);
+  });
+
+  return projects.map((project) => {
+    let owner: TeamMember | null = null;
+    let org: Organization | null = null;
+
+    if (project.team_id) {
+      const teamMembers = cache.teams.value.get(project.team_id);
+      if (teamMembers) {
+        owner = teamMembers.find((member) => member.role === "Owner") || null;
+      }
+    }
+
+    if (project.organization) {
+      org = cache.orgs.value.get(project.organization) || null;
+    }
+
+    return {
+      project,
+      owner,
+      org,
+    } as ModerationProject;
+  });
+}

apps/frontend/src/layouts/default.vue

@@ -295,7 +295,7 @@
               {
                 id: 'review-projects',
                 color: 'orange',
-                link: '/moderation/review',
+                link: '/moderation/',
               },
               {
                 id: 'review-reports',
@@ -700,7 +700,6 @@ import {
   PackageOpenIcon,
   DiscordIcon,
   BlueskyIcon,
-  TumblrIcon,
   TwitterIcon,
   MastodonIcon,
   GithubIcon,
@@ -982,23 +981,6 @@ const userMenuOptions = computed(() => {
     },
   ];
 
-  if (
-    (auth.value && auth.value.user && auth.value.user.role === "moderator") ||
-    auth.value.user.role === "admin"
-  ) {
-    options = [
-      ...options,
-      {
-        divider: true,
-      },
-      {
-        id: "moderation",
-        color: "orange",
-        link: "/moderation/review",
-      },
-    ];
-  }
-
   options = [
     ...options,
     {
@@ -1185,13 +1167,6 @@ const socialLinks = [
     icon: MastodonIcon,
     rel: "me",
   },
-  {
-    label: formatMessage(
-      defineMessage({ id: "layout.footer.social.tumblr", defaultMessage: "Tumblr" }),
-    ),
-    href: "https://tumblr.com/modrinth",
-    icon: TumblrIcon,
-  },
   {
     label: formatMessage(defineMessage({ id: "layout.footer.social.x", defaultMessage: "X" })),
     href: "https://x.com/modrinth",
@@ -1346,6 +1321,15 @@ const footerLinks = [
           }),
         ),
       },
+      {
+        href: "/legal/copyright",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.legal.copyright-policy",
+            defaultMessage: "Copyright Policy and DMCA",
+          }),
+        ),
+      },
     ],
   },
 ];

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

@@ -182,9 +182,6 @@
   "collection.button.unfollow-project": {
     "message": "Unfollow project"
   },
-  "collection.button.upload-icon": {
-    "message": "Upload icon"
-  },
   "collection.delete-modal.description": {
     "message": "This will remove this collection forever. This action cannot be undone."
   },
@@ -383,15 +380,15 @@
   "layout.footer.about": {
     "message": "About"
   },
-  "layout.footer.about.news": {
-    "message": "News"
-  },
   "layout.footer.about.careers": {
     "message": "Careers"
   },
   "layout.footer.about.changelog": {
     "message": "Changelog"
   },
+  "layout.footer.about.news": {
+    "message": "News"
+  },
   "layout.footer.about.rewards-program": {
     "message": "Rewards Program"
   },
@@ -404,6 +401,9 @@
   "layout.footer.legal-disclaimer": {
     "message": "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT."
   },
+  "layout.footer.legal.copyright-policy": {
+    "message": "Copyright Policy and DMCA"
+  },
   "layout.footer.legal.privacy-policy": {
     "message": "Privacy Policy"
   },
@@ -458,9 +458,6 @@
   "layout.footer.social.mastodon": {
     "message": "Mastodon"
   },
-  "layout.footer.social.tumblr": {
-    "message": "Tumblr"
-  },
   "layout.footer.social.x": {
     "message": "X"
   },
@@ -479,6 +476,30 @@
   "layout.nav.search": {
     "message": "Search"
   },
+  "moderation.filter.by": {
+    "message": "Filter by"
+  },
+  "moderation.moderate": {
+    "message": "Moderate"
+  },
+  "moderation.page.projects": {
+    "message": "Projects"
+  },
+  "moderation.page.reports": {
+    "message": "Reports"
+  },
+  "moderation.page.technicalReview": {
+    "message": "Technical Review"
+  },
+  "moderation.search.placeholder": {
+    "message": "Search..."
+  },
+  "moderation.sort.by": {
+    "message": "Sort by"
+  },
+  "moderation.technical.search.placeholder": {
+    "message": "Search tech reviews..."
+  },
   "profile.button.billing": {
     "message": "Manage user billing"
   },

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

@@ -29,12 +29,11 @@
             class="settings-header__icon"
           />
           <div class="settings-header__text">
-            <h1 class="wrap-as-needed">
-              {{ project.title }}
-            </h1>
+            <h1 class="wrap-as-needed">{{ project.title }}</h1>
             <ProjectStatusBadge :status="project.status" />
           </div>
         </div>
+
         <h2>Project settings</h2>
         <NavStack>
           <NavStackItem
@@ -111,6 +110,7 @@
         </NavStack>
       </aside>
     </div>
+
     <div class="normal-page__content">
       <ProjectMemberHeader
         v-if="currentMember"
@@ -145,6 +145,7 @@
       />
     </div>
   </div>
+
   <div v-else class="experimental-styles-within">
     <NewModal ref="settingsModal">
       <template #title>
@@ -174,9 +175,11 @@
         <div
           class="animation-ring-3 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-40"
         ></div>
+
         <div
           class="animation-ring-2 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-60"
         ></div>
+
         <div
           class="animation-ring-1 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight"
         >
@@ -219,8 +222,7 @@
                   :href="`modrinth://mod/${project.slug}`"
                   @click="() => installWithApp()"
                 >
-                  <ModrinthIcon aria-hidden="true" />
-                  Install with Modrinth App
+                  <ModrinthIcon aria-hidden="true" /> Install with Modrinth App
                   <ExternalIcon aria-hidden="true" />
                 </a>
               </ButtonStyled>
@@ -240,6 +242,7 @@
               <div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
             </div>
           </div>
+
           <div class="mx-auto flex w-fit flex-col gap-2">
             <ButtonStyled v-if="project.game_versions.length === 1">
               <div class="disabled button-like">
@@ -327,8 +330,7 @@
                       }
                     "
                   >
-                    {{ gameVersion }}
-                    <CheckIcon v-if="userSelectedGameVersion === gameVersion" />
+                    {{ gameVersion }} <CheckIcon v-if="userSelectedGameVersion === gameVersion" />
                   </button>
                 </ButtonStyled>
               </ScrollablePanel>
@@ -419,7 +421,6 @@
               </ScrollablePanel>
             </Accordion>
           </div>
-
           <AutomaticAccordion div class="flex flex-col gap-2">
             <VersionSummary
               v-if="filteredRelease"
@@ -470,10 +471,14 @@
       class="new-page sidebar"
       :class="{
         'alt-layout': cosmetics.leftContentLayout,
-        'ultimate-sidebar':
+        'checklist-open':
           showModerationChecklist &&
           !collapsedModerationChecklist &&
           !flags.alwaysShowChecklistAsPopup,
+        'checklist-collapsed':
+          showModerationChecklist &&
+          collapsedModerationChecklist &&
+          !flags.alwaysShowChecklistAsPopup,
       }"
     >
       <div class="normal-page__header relative my-4">
@@ -485,11 +490,11 @@
                 :color="route.name === 'type-id-version-version' ? `standard` : `brand`"
               >
                 <button @click="(event) => downloadModal.show(event)">
-                  <DownloadIcon aria-hidden="true" />
-                  Download
+                  <DownloadIcon aria-hidden="true" /> Download
                 </button>
               </ButtonStyled>
             </div>
+
             <div class="contents sm:hidden">
               <ButtonStyled
                 size="large"
@@ -554,9 +559,11 @@
                       </button>
                     </ButtonStyled>
                   </div>
+
                   <p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
                     Modrinth Servers is the easiest way to play with your friends without hassle!
                   </p>
+
                   <p class="m-0 text-wrap text-sm font-bold text-primary">
                     Starting at $5<span class="text-xs"> / month</span>
                   </p>
@@ -621,6 +628,7 @@
                         {{ option.name }}
                       </Checkbox>
                     </div>
+
                     <div v-else class="menu-text">
                       <p class="popout-text">No collections found.</p>
                     </div>
@@ -628,8 +636,7 @@
                       class="btn collection-button"
                       @click="(event) => $refs.modal_collection.show(event)"
                     >
-                      <PlusIcon aria-hidden="true" />
-                      Create new collection
+                      <PlusIcon aria-hidden="true" /> Create new collection
                     </button>
                   </template>
                 </PopoutMenu>
@@ -682,7 +689,10 @@
                   },
                   {
                     id: 'moderation-checklist',
-                    action: () => (showModerationChecklist = true),
+                    action: () => {
+                      moderationStore.setSingleProject(project.id);
+                      showModerationChecklist = true;
+                    },
                     color: 'orange',
                     hoverOnly: true,
                     shown:
@@ -712,25 +722,14 @@
                 :dropdown-id="`${baseId}-more-options`"
               >
                 <MoreVerticalIcon aria-hidden="true" />
-                <template #analytics>
-                  <ChartIcon aria-hidden="true" />
-                  Analytics
-                </template>
+                <template #analytics> <ChartIcon aria-hidden="true" /> Analytics </template>
                 <template #moderation-checklist>
-                  <ScaleIcon aria-hidden="true" />
-                  Review project
-                </template>
-                <template #report>
-                  <ReportIcon aria-hidden="true" />
-                  Report
-                </template>
-                <template #copy-id>
-                  <ClipboardCopyIcon aria-hidden="true" />
-                  Copy ID
+                  <ScaleIcon aria-hidden="true" /> Review project
                 </template>
+                <template #report> <ReportIcon aria-hidden="true" /> Report </template>
+                <template #copy-id> <ClipboardCopyIcon aria-hidden="true" /> Copy ID </template>
                 <template #copy-permalink>
-                  <ClipboardCopyIcon aria-hidden="true" />
-                  Copy permanent link
+                  <ClipboardCopyIcon aria-hidden="true" /> Copy permanent link
                 </template>
               </OverflowMenu>
             </ButtonStyled>
@@ -756,6 +755,7 @@
           updates unless the author decides to unarchive the project.
         </MessageBanner>
       </div>
+
       <div class="normal-page__sidebar">
         <ProjectSidebarCompatibility
           :project="project"
@@ -785,6 +785,7 @@
         />
         <div class="card flex-card experimental-styles-within">
           <h2>{{ formatMessage(detailsMessages.title) }}</h2>
+
           <div class="details-list">
             <div class="details-list__item">
               <BookTextIcon aria-hidden="true" />
@@ -813,53 +814,48 @@
                 <span v-else>{{ licenseIdDisplay }}</span>
               </div>
             </div>
+
             <div
               v-if="project.approved"
               v-tooltip="$dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
               class="details-list__item"
             >
               <CalendarIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.published, { date: publishedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.published, { date: publishedDate }) }}</div>
             </div>
+
             <div
               v-else
               v-tooltip="$dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')"
               class="details-list__item"
             >
               <CalendarIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.created, { date: createdDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.created, { date: createdDate }) }}</div>
             </div>
+
             <div
               v-if="project.status === 'processing' && project.queued"
               v-tooltip="$dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')"
               class="details-list__item"
             >
               <ScaleIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.submitted, { date: submittedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.submitted, { date: submittedDate }) }}</div>
             </div>
+
             <div
               v-if="versions.length > 0 && project.updated"
               v-tooltip="$dayjs(project.updated).format('MMMM D, YYYY [at] h:mm A')"
               class="details-list__item"
             >
               <VersionIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.updated, { date: updatedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.updated, { date: updatedDate }) }}</div>
             </div>
           </div>
         </div>
       </div>
+
       <div class="normal-page__content">
-        <div class="overflow-x-auto">
-          <NavTabs :links="navLinks" class="mb-4" />
-        </div>
+        <div class="overflow-x-auto"><NavTabs :links="navLinks" class="mb-4" /></div>
         <NuxtPage
           v-model:project="project"
           v-model:versions="versions"
@@ -877,20 +873,22 @@
           @delete-version="deleteVersion"
         />
       </div>
-      <div class="normal-page__ultimate-sidebar">
-        <ModerationChecklist
-          v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
-          :project="project"
-          :future-projects="futureProjects"
-          :reset-project="resetProject"
-          :collapsed="collapsedModerationChecklist"
-          @exit="showModerationChecklist = false"
-          @toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
-        />
-      </div>
     </div>
   </div>
+
+  <div
+    v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
+    class="moderation-checklist"
+  >
+    <ModerationChecklist
+      :project="project"
+      :collapsed="collapsedModerationChecklist"
+      @exit="showModerationChecklist = false"
+      @toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
+    />
+  </div>
 </template>
+
 <script setup>
 import {
   BookmarkIcon,
@@ -942,24 +940,17 @@ import {
   useRelativeTime,
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
-import {
-  formatCategory,
-  formatProjectType,
-  isRejected,
-  isStaff,
-  isUnderReview,
-  renderString,
-} from "@modrinth/utils";
-import { navigateTo } from "#app";
+import { formatCategory, formatProjectType, renderString } from "@modrinth/utils";
 import dayjs from "dayjs";
 import { Tooltip } from "floating-vue";
+import { useLocalStorage } from "@vueuse/core";
+import { navigateTo } from "#app";
 import Accordion from "~/components/ui/Accordion.vue";
 // import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
-import ModerationChecklist from "~/components/ui/ModerationChecklist.vue";
 import NavStack from "~/components/ui/NavStack.vue";
 import NavStackItem from "~/components/ui/NavStackItem.vue";
 import NavTabs from "~/components/ui/NavTabs.vue";
@@ -967,10 +958,13 @@ import ProjectMemberHeader from "~/components/ui/ProjectMemberHeader.vue";
 import { userCollectProject } from "~/composables/user.js";
 import { reportProject } from "~/utils/report-helpers.ts";
 import { saveFeatureFlags } from "~/composables/featureFlags.ts";
+import ModerationChecklist from "~/components/ui/moderation/checklist/ModerationChecklist.vue";
+import { useModerationStore } from "~/store/moderation.ts";
 
 const data = useNuxtApp();
 const route = useNativeRoute();
 const config = useRuntimeConfig();
+const moderationStore = useModerationStore();
 
 const auth = await useAuth();
 const user = await useUser();
@@ -980,6 +974,7 @@ const flags = useFeatureFlags();
 const cosmetics = useCosmetics();
 
 const { formatMessage } = useVIntl();
+const { setVisible } = useNotificationRightwards();
 
 const settingsModal = ref();
 const downloadModal = ref();
@@ -1551,12 +1546,22 @@ async function copyPermalink() {
 
 const collapsedChecklist = ref(false);
 
-const showModerationChecklist = ref(false);
-const collapsedModerationChecklist = ref(false);
-const futureProjects = ref([]);
+const showModerationChecklist = useLocalStorage(
+  `show-moderation-checklist-${project.value.id}`,
+  false,
+);
+const collapsedModerationChecklist = useLocalStorage("collapsed-moderation-checklist", false);
+
+watch(
+  showModerationChecklist,
+  (newValue) => {
+    setVisible(newValue);
+  },
+  { immediate: true },
+);
+
 if (import.meta.client && history && history.state && history.state.showChecklist) {
   showModerationChecklist.value = true;
-  futureProjects.value = history.state.projects;
 }
 
 function closeDownloadModal(event) {
@@ -1619,13 +1624,12 @@ const navLinks = computed(() => {
     {
       label: formatMessage(messages.moderationTab),
       href: `${projectUrl}/moderation`,
-      shown:
-        !!currentMember.value &&
-        (isRejected(project.value) || isUnderReview(project.value) || isStaff(auth.value.user)),
+      shown: !!currentMember.value,
     },
   ];
 });
 </script>
+
 <style lang="scss" scoped>
 .settings-header {
   display: flex;
@@ -1781,4 +1785,16 @@ const navLinks = computed(() => {
     left: 18px;
   }
 }
+
+.moderation-checklist {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  overflow-y: auto;
+  z-index: 50;
+
+  > div {
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+  }
+}
 </style>

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

@@ -365,8 +365,10 @@ export default defineNuxtComponent({
         if (e.key === "Escape") {
           this.expandedGalleryItem = null;
         } else if (e.key === "ArrowLeft") {
+          e.stopPropagation();
           this.previousImage();
         } else if (e.key === "ArrowRight") {
+          e.stopPropagation();
           this.nextImage();
         }
       }
@@ -705,9 +707,9 @@ export default defineNuxtComponent({
   }
 
   .gallery-body {
-    flex-grow: 1;
     width: calc(100% - 2 * var(--spacing-card-md));
     padding: var(--spacing-card-sm) var(--spacing-card-md);
+    overflow-wrap: anywhere;
 
     .gallery-info {
       h2 {

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

@@ -76,8 +76,15 @@
       <p>
         This is a private conversation thread with the Modrinth moderators. They may message you
         with issues concerning this project. This thread is only checked when you submit your
-        project for review. For additional inquiries, contact
-        <a href="https://support.modrinth.com">Modrinth Support</a>.
+        project for review. For additional inquiries, please go to the
+        <a class="text-link" href="https://support.modrinth.com" target="_blank">
+          Modrinth Help Center
+        </a>
+        and click the green bubble to contact support.
+      </p>
+      <p v-if="isApproved(project)" class="warning">
+        <IssuesIcon /> The moderators do not actively monitor this chat. However, they may still see
+        messages here if there is a problem with your project.
       </p>
       <ConversationThread
         v-if="thread"

apps/frontend/src/pages/admin/billing/[id].vue

@@ -58,6 +58,41 @@
       </div>
     </div>
   </NewModal>
+  <NewModal ref="modifyModal">
+    <template #title>
+      <span class="text-lg font-extrabold text-contrast">Modify charge</span>
+    </template>
+    <div class="flex flex-col gap-3">
+      <div class="flex flex-col gap-2">
+        <label for="cancel" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast">
+            Cancel server
+            <span class="text-brand-red">*</span>
+          </span>
+          <span>
+            Whether or not the subscription should be cancelled. Submitting this as "true" will
+            cancel the subscription, while submitting it as "false" will force another charge
+            attempt to be made.
+          </span>
+        </label>
+        <Toggle id="cancel" v-model="cancel" />
+      </div>
+      <div class="flex gap-2">
+        <ButtonStyled color="brand">
+          <button :disabled="modifying" @click="modifyCharge">
+            <CheckIcon aria-hidden="true" />
+            Modify charge
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="modifyModal.hide()">
+            <XIcon aria-hidden="true" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
   <div class="page experimental-styles-within">
     <div
       class="mb-4 flex items-center justify-between border-0 border-b border-solid border-divider pb-4"
@@ -150,9 +185,26 @@
                   </template>
                 </span>
                 <span class="text-sm text-secondary">
+                  <span
+                    v-if="charge.status === 'cancelled' && $dayjs(charge.due).isBefore($dayjs())"
+                    class="font-bold"
+                  >
+                    Ended:
+                  </span>
+                  <span v-else-if="charge.status === 'cancelled'" class="font-bold">Ends:</span>
+                  <span v-else-if="charge.type === 'refund'" class="font-bold">Issued:</span>
+                  <span v-else class="font-bold">Due:</span>
                   {{ dayjs(charge.due).format("MMMM D, YYYY [at] h:mma") }}
                   <span class="text-secondary">({{ formatRelativeTime(charge.due) }}) </span>
                 </span>
+                <span v-if="charge.last_attempt != null" class="text-sm text-secondary">
+                  <span v-if="charge.status === 'failed'" class="font-bold">Last attempt:</span>
+                  <span v-else class="font-bold">Charged:</span>
+                  {{ dayjs(charge.last_attempt).format("MMMM D, YYYY [at] h:mma") }}
+                  <span class="text-secondary"
+                    >({{ formatRelativeTime(charge.last_attempt) }})
+                  </span>
+                </span>
                 <div class="flex w-full items-center gap-1 text-xs text-secondary">
                   {{ charge.status }}
                   ⋅
@@ -184,6 +236,12 @@
                     Refund options
                   </button>
                 </ButtonStyled>
+                <ButtonStyled v-else-if="charge.status === 'failed'" color="red" color-fill="text">
+                  <button @click="showModifyModal(subscription)">
+                    <CurrencyIcon />
+                    Modify charge
+                  </button>
+                </ButtonStyled>
               </div>
             </div>
           </div>
@@ -217,7 +275,6 @@ import { products } from "~/generated/state.json";
 import ModrinthServersIcon from "~/components/ui/servers/ModrinthServersIcon.vue";
 
 const route = useRoute();
-const data = useNuxtApp();
 const vintl = useVIntl();
 
 const { formatMessage } = vintl;
@@ -287,6 +344,10 @@ const refundTypes = ref(["full", "partial", "none"]);
 const refundAmount = ref(0);
 const unprovision = ref(true);
 
+const modifying = ref(false);
+const modifyModal = ref();
+const cancel = ref(false);
+
 function showRefundModal(charge) {
   selectedCharge.value = charge;
   refundType.value = "full";
@@ -295,6 +356,12 @@ function showRefundModal(charge) {
   refundModal.value.show();
 }
 
+function showModifyModal(charge) {
+  selectedCharge.value = charge;
+  cancel.value = false;
+  modifyModal.value.show();
+}
+
 async function refundCharge() {
   refunding.value = true;
   try {
@@ -310,8 +377,7 @@ async function refundCharge() {
     await refreshCharges();
     refundModal.value.hide();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "Error refunding",
       text: err.data?.description ?? err,
       type: "error",
@@ -320,6 +386,32 @@ async function refundCharge() {
   refunding.value = false;
 }
 
+async function modifyCharge() {
+  modifying.value = true;
+  try {
+    await useBaseFetch(`billing/subscription/${selectedCharge.value.id}`, {
+      method: "PATCH",
+      body: JSON.stringify({
+        cancelled: cancel.value,
+      }),
+      internal: true,
+    });
+    addNotification({
+      title: "Resubscription request submitted",
+      text: "If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.",
+      type: "success",
+    });
+    await refreshCharges();
+  } catch (err) {
+    addNotification({
+      title: "Error reattempting charge",
+      text: err.data?.description ?? err,
+      type: "error",
+    });
+  }
+  modifying.value = false;
+}
+
 const chargeStatuses = {
   open: {
     color: "bg-blue",

apps/frontend/src/pages/app.vue

@@ -1421,7 +1421,8 @@ useSeoMeta({
           width: 25rem;
           height: 25rem;
           opacity: 0.75;
-          background: radial-gradient(
+          background:
+            radial-gradient(
               50% 50% at 50% 50%,
               rgba(5, 206, 69, 0.19) 0%,
               rgba(15, 19, 49, 0.25) 100%

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

@@ -1,6 +1,12 @@
 <template>
-  <div>
-    <template v-if="flow">
+  <div v-if="subtleLauncherRedirectUri">
+    <iframe
+      :src="subtleLauncherRedirectUri"
+      class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
+    ></iframe>
+  </div>
+  <div v-else>
+    <template v-if="flow && !subtleLauncherRedirectUri">
       <label for="two-factor-code">
         <span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
         <span class="label__description">
@@ -189,6 +195,7 @@ const auth = await useAuth();
 const route = useNativeRoute();
 
 const redirectTarget = route.query.redirect || "";
+const subtleLauncherRedirectUri = ref();
 
 if (route.query.code && !route.fullPath.includes("new_account=true")) {
   await finishSignIn();
@@ -262,7 +269,32 @@ async function begin2FASignIn() {
 
 async function finishSignIn(token) {
   if (route.query.launcher) {
-    await navigateTo(`https://launcher-files.modrinth.com/?code=${token}`, { external: true });
+    if (!token) {
+      token = auth.value.token;
+    }
+
+    const usesLocalhostRedirectionScheme =
+      ["4", "6"].includes(route.query.ipver) && Number(route.query.port) < 65536;
+
+    const redirectUrl = usesLocalhostRedirectionScheme
+      ? `http://${route.query.ipver === "4" ? "127.0.0.1" : "[::1]"}:${route.query.port}/?code=${token}`
+      : `https://launcher-files.modrinth.com/?code=${token}`;
+
+    if (usesLocalhostRedirectionScheme) {
+      // When using this redirection scheme, the auth token is very visible in the URL to the user.
+      // While we could make it harder to find with a POST request, such is security by obscurity:
+      // the user and other applications would still be able to sniff the token in the request body.
+      // So, to make the UX a little better by not changing the displayed URL, while keeping the
+      // token hidden from very casual observation and keeping the protocol as close to OAuth's
+      // standard flows as possible, let's execute the redirect within an iframe that visually
+      // covers the entire page.
+      subtleLauncherRedirectUri.value = redirectUrl;
+    } else {
+      await navigateTo(redirectUrl, {
+        external: true,
+      });
+    }
+
     return;
   }
 

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

@@ -218,7 +218,7 @@ const username = ref("");
 const password = ref("");
 const confirmPassword = ref("");
 const token = ref("");
-const subscribe = ref(true);
+const subscribe = ref(false);
 
 async function createAccount() {
   startLoading();
@@ -247,16 +247,14 @@ async function createAccount() {
       },
     });
 
-    if (route.query.launcher) {
-      await navigateTo(`https://launcher-files.modrinth.com/?code=${res.session}`, {
-        external: true,
-      });
-      return;
-    }
-
     await useAuth(res.session);
     await useUser();
 
+    if (route.query.launcher) {
+      await navigateTo({ path: "/auth/sign-in", query: route.query });
+      return;
+    }
+
     if (route.query.redirect) {
       await navigateTo(route.query.redirect);
     } else {

apps/frontend/src/pages/collection/[id].vue

@@ -40,7 +40,6 @@
                       @change="showPreviewImage"
                     >
                       <UploadIcon aria-hidden="true" />
-                      {{ formatMessage(messages.uploadIconButton) }}
                     </FileInput>
                     <Button
                       v-if="!deletedIcon && (previewImage || collection.icon_url)"
@@ -479,10 +478,6 @@ const messages = defineMessages({
     id: "collection.label.updated-at",
     defaultMessage: "Updated {ago}",
   },
-  uploadIconButton: {
-    id: "collection.button.upload-icon",
-    defaultMessage: "Upload icon",
-  },
 });
 
 const data = useNuxtApp();

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

@@ -266,12 +266,12 @@ const getRangeOfMethod = (method) => {
 
 const maxWithdrawAmount = computed(() => {
   const interval = selectedMethod.value.interval;
-  return interval?.standard ? interval.standard.max : interval?.fixed?.values.slice(-1)[0] ?? 0;
+  return interval?.standard ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0);
 });
 
 const minWithdrawAmount = computed(() => {
   const interval = selectedMethod.value.interval;
-  return interval?.standard ? interval.standard.min : interval?.fixed?.values?.[0] ?? fees.value;
+  return interval?.standard ? interval.standard.min : (interval?.fixed?.values?.[0] ?? fees.value);
 });
 
 const withdrawAccount = computed(() => {

apps/frontend/src/pages/moderation.vue

@@ -1,33 +1,84 @@
 <template>
-  <div class="normal-page">
-    <div class="normal-page__sidebar">
-      <aside class="universal-card">
-        <h1>Moderation</h1>
-        <NavStack>
-          <NavStackItem link="/moderation" label="Overview">
-            <ModrinthIcon aria-hidden="true" />
-          </NavStackItem>
-          <NavStackItem link="/moderation/review" label="Review projects">
-            <ScaleIcon aria-hidden="true" />
-          </NavStackItem>
-          <NavStackItem link="/moderation/reports" label="Reports">
-            <ReportIcon aria-hidden="true" />
-          </NavStackItem>
-        </NavStack>
-      </aside>
-    </div>
-    <div class="normal-page__content">
-      <NuxtPage />
+  <div
+    class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
+  >
+    <h1>Moderation</h1>
+    <NavTabs :links="moderationLinks" class="mb-4 hidden sm:flex" />
+    <div class="mb-4 sm:hidden">
+      <Chips
+        v-model="selectedChip"
+        :items="mobileNavOptions"
+        :never-empty="true"
+        @change="navigateToPage"
+      />
     </div>
+    <NuxtPage />
   </div>
 </template>
 
-<script setup>
-import { ModrinthIcon, ScaleIcon, ReportIcon } from "@modrinth/assets";
-import NavStack from "~/components/ui/NavStack.vue";
-import NavStackItem from "~/components/ui/NavStackItem.vue";
+<script setup lang="ts">
+import { defineMessages, useVIntl } from "@vintl/vintl";
+import { Chips } from "@modrinth/ui";
+import NavTabs from "@/components/ui/NavTabs.vue";
 
 definePageMeta({
   middleware: "auth",
 });
+
+const { formatMessage } = useVIntl();
+const route = useRoute();
+const router = useRouter();
+
+const messages = defineMessages({
+  projectsTitle: {
+    id: "moderation.page.projects",
+    defaultMessage: "Projects",
+  },
+  technicalReviewTitle: {
+    id: "moderation.page.technicalReview",
+    defaultMessage: "Technical Review",
+  },
+  reportsTitle: {
+    id: "moderation.page.reports",
+    defaultMessage: "Reports",
+  },
+});
+
+const moderationLinks = [
+  { label: formatMessage(messages.projectsTitle), href: "/moderation" },
+  { label: formatMessage(messages.technicalReviewTitle), href: "/moderation/technical-review" },
+  { label: formatMessage(messages.reportsTitle), href: "/moderation/reports" },
+];
+
+const mobileNavOptions = [
+  formatMessage(messages.projectsTitle),
+  formatMessage(messages.technicalReviewTitle),
+  formatMessage(messages.reportsTitle),
+];
+
+const selectedChip = computed({
+  get() {
+    const path = route.path;
+    if (path === "/moderation/technical-review") {
+      return formatMessage(messages.technicalReviewTitle);
+    } else if (path.startsWith("/moderation/reports/")) {
+      return formatMessage(messages.reportsTitle);
+    } else {
+      return formatMessage(messages.projectsTitle);
+    }
+  },
+  set(value: string) {
+    navigateToPage(value);
+  },
+});
+
+function navigateToPage(selectedOption: string) {
+  if (selectedOption === formatMessage(messages.technicalReviewTitle)) {
+    router.push("/moderation/technical-review");
+  } else if (selectedOption === formatMessage(messages.reportsTitle)) {
+    router.push("/moderation/reports");
+  } else {
+    router.push("/moderation");
+  }
+}
 </script>

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

@@ -1,42 +1,339 @@
 <template>
-  <div>
-    <section class="universal-card">
-      <h2>Statistics</h2>
-      <div class="grid-display">
-        <div class="grid-display__item">
-          <div class="label">Projects</div>
-          <div class="value">
-            {{ formatNumber(stats.projects, false) }}
-          </div>
-        </div>
-        <div class="grid-display__item">
-          <div class="label">Versions</div>
-          <div class="value">
-            {{ formatNumber(stats.versions, false) }}
-          </div>
-        </div>
-        <div class="grid-display__item">
-          <div class="label">Files</div>
-          <div class="value">
-            {{ formatNumber(stats.files, false) }}
-          </div>
-        </div>
-        <div class="grid-display__item">
-          <div class="label">Authors</div>
-          <div class="value">
-            {{ formatNumber(stats.authors, false) }}
-          </div>
-        </div>
+  <div class="flex flex-col gap-3">
+    <div class="flex flex-col justify-between gap-3 lg:flex-row">
+      <div class="iconified-input flex-1 lg:max-w-md">
+        <SearchIcon aria-hidden="true" class="text-lg" />
+        <input
+          v-model="query"
+          class="h-[40px]"
+          autocomplete="off"
+          spellcheck="false"
+          type="text"
+          :placeholder="formatMessage(messages.searchPlaceholder)"
+          @input="goToPage(1)"
+        />
+        <Button v-if="query" class="r-btn" @click="() => (query = '')">
+          <XIcon />
+        </Button>
       </div>
-    </section>
+
+      <div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
+        <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+        <ConfettiExplosion v-if="visible" />
+      </div>
+
+      <div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
+        <div class="flex flex-col gap-2 sm:flex-row">
+          <DropdownSelect
+            v-slot="{ selected }"
+            v-model="currentFilterType"
+            class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
+            :name="formatMessage(messages.filterBy)"
+            :options="filterTypes as unknown[]"
+            @change="goToPage(1)"
+          >
+            <span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
+              <FilterIcon class="size-4 flex-shrink-0" />
+              <span class="truncate">{{ selected }} ({{ filteredProjects.length }})</span>
+            </span>
+          </DropdownSelect>
+
+          <DropdownSelect
+            v-slot="{ selected }"
+            v-model="currentSortType"
+            class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
+            :name="formatMessage(messages.sortBy)"
+            :options="sortTypes as unknown[]"
+            @change="goToPage(1)"
+          >
+            <span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
+              <SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
+              <SortDescIcon v-else class="size-4 flex-shrink-0" />
+              <span class="truncate">{{ selected }}</span>
+            </span>
+          </DropdownSelect>
+        </div>
+
+        <ButtonStyled color="orange" class="w-full sm:w-auto">
+          <button
+            class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
+            @click="moderateAllInFilter()"
+          >
+            <ScaleIcon class="size-4 flex-shrink-0" />
+            <span class="hidden sm:inline">{{ formatMessage(messages.moderate) }}</span>
+            <span class="sm:hidden">Moderate</span>
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+
+    <div v-if="totalPages > 1" class="flex justify-center lg:hidden">
+      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+      <ConfettiExplosion v-if="visible" />
+    </div>
+
+    <div class="mt-4 flex flex-col gap-2">
+      <div v-if="paginatedProjects.length === 0" class="universal-card h-24 animate-pulse"></div>
+      <ModerationQueueCard
+        v-for="item in paginatedProjects"
+        v-else
+        :key="item.project.id"
+        :queue-entry="item"
+        :owner="item.owner"
+        :org="item.org"
+      />
+    </div>
+
+    <div v-if="totalPages > 1" class="mt-4 flex justify-center">
+      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+    </div>
   </div>
 </template>
-<script setup>
-import { formatNumber } from "@modrinth/utils";
+<script setup lang="ts">
+import { DropdownSelect, Button, ButtonStyled, Pagination } from "@modrinth/ui";
+import {
+  XIcon,
+  SearchIcon,
+  SortAscIcon,
+  SortDescIcon,
+  FilterIcon,
+  ScaleIcon,
+} from "@modrinth/assets";
+import { defineMessages, useVIntl } from "@vintl/vintl";
+import { useLocalStorage } from "@vueuse/core";
+import ConfettiExplosion from "vue-confetti-explosion";
+import Fuse from "fuse.js";
+import ModerationQueueCard from "~/components/ui/moderation/ModerationQueueCard.vue";
+import { useModerationStore } from "~/store/moderation.ts";
+import { enrichProjectBatch, type ModerationProject } from "~/helpers/moderation.ts";
 
-useHead({
-  title: "Staff overview - Modrinth",
+const { formatMessage } = useVIntl();
+const moderationStore = useModerationStore();
+const route = useRoute();
+const router = useRouter();
+
+const visible = ref(false);
+if (import.meta.client && history && history.state && history.state.confetti) {
+  setTimeout(async () => {
+    history.state.confetti = false;
+    visible.value = true;
+    await nextTick();
+    setTimeout(() => {
+      visible.value = false;
+    }, 5000);
+  }, 1000);
+}
+
+const messages = defineMessages({
+  searchPlaceholder: {
+    id: "moderation.search.placeholder",
+    defaultMessage: "Search...",
+  },
+  filterBy: {
+    id: "moderation.filter.by",
+    defaultMessage: "Filter by",
+  },
+  sortBy: {
+    id: "moderation.sort.by",
+    defaultMessage: "Sort by",
+  },
+  moderate: {
+    id: "moderation.moderate",
+    defaultMessage: "Moderate",
+  },
 });
 
-const { data: stats } = await useAsyncData("statistics", () => useBaseFetch("statistics"));
+const { data: allProjects } = await useLazyAsyncData("moderation-projects", async () => {
+  const startTime = performance.now();
+  let currentOffset = 0;
+  const PROJECT_ENDPOINT_COUNT = 350;
+  const allProjects: ModerationProject[] = [];
+
+  const enrichmentPromises: Promise<ModerationProject[]>[] = [];
+
+  while (true) {
+    const projects = (await useBaseFetch(
+      `moderation/projects?count=${PROJECT_ENDPOINT_COUNT}&offset=${currentOffset}`,
+      { internal: true },
+    )) as any[];
+
+    if (projects.length === 0) break;
+
+    const enrichmentPromise = enrichProjectBatch(projects);
+    enrichmentPromises.push(enrichmentPromise);
+
+    currentOffset += projects.length;
+
+    if (enrichmentPromises.length >= 3) {
+      const completed = await Promise.all(enrichmentPromises.splice(0, 2));
+      allProjects.push(...completed.flat());
+    }
+
+    if (projects.length < PROJECT_ENDPOINT_COUNT) break;
+  }
+
+  const remainingBatches = await Promise.all(enrichmentPromises);
+  allProjects.push(...remainingBatches.flat());
+
+  const endTime = performance.now();
+  const duration = endTime - startTime;
+
+  console.debug(
+    `Projects fetched and processed in ${duration.toFixed(2)}ms (${(duration / 1000).toFixed(2)}s)`,
+  );
+
+  return allProjects;
+});
+
+const query = ref(route.query.q?.toString() || "");
+
+watch(
+  query,
+  (newQuery) => {
+    const currentQuery = { ...route.query };
+    if (newQuery) {
+      currentQuery.q = newQuery;
+    } else {
+      delete currentQuery.q;
+    }
+
+    router.replace({
+      path: route.path,
+      query: currentQuery,
+    });
+  },
+  { immediate: false },
+);
+
+watch(
+  () => route.query.q,
+  (newQueryParam) => {
+    const newValue = newQueryParam?.toString() || "";
+    if (query.value !== newValue) {
+      query.value = newValue;
+    }
+  },
+);
+
+const currentFilterType = useLocalStorage("moderation-current-filter-type", () => "All projects");
+const filterTypes: readonly string[] = readonly([
+  "All projects",
+  "Modpacks",
+  "Mods",
+  "Resource Packs",
+  "Data Packs",
+  "Plugins",
+  "Shaders",
+]);
+
+const currentSortType = useLocalStorage("moderation-current-sort-type", () => "Oldest");
+const sortTypes: readonly string[] = readonly(["Oldest", "Newest"]);
+
+const currentPage = ref(1);
+const itemsPerPage = 15;
+const totalPages = computed(() => Math.ceil((filteredProjects.value?.length || 0) / itemsPerPage));
+
+const fuse = computed(() => {
+  if (!allProjects.value || allProjects.value.length === 0) return null;
+  return new Fuse(allProjects.value, {
+    keys: [
+      {
+        name: "project.title",
+        weight: 3,
+      },
+      {
+        name: "project.slug",
+        weight: 2,
+      },
+      {
+        name: "project.description",
+        weight: 2,
+      },
+      {
+        name: "project.project_type",
+        weight: 1,
+      },
+      "owner.user.username",
+      "org.name",
+      "org.slug",
+    ],
+    includeScore: true,
+    threshold: 0.4,
+  });
+});
+
+const searchResults = computed(() => {
+  if (!query.value || !fuse.value) return null;
+  return fuse.value.search(query.value).map((result) => result.item);
+});
+
+const baseFiltered = computed(() => {
+  if (!allProjects.value) return [];
+  return query.value && searchResults.value ? searchResults.value : [...allProjects.value];
+});
+
+const typeFiltered = computed(() => {
+  if (currentFilterType.value === "All projects") return baseFiltered.value;
+
+  const filterMap: Record<string, string> = {
+    Modpacks: "modpack",
+    Mods: "mod",
+    "Resource Packs": "resourcepack",
+    "Data Packs": "datapack",
+    Plugins: "plugin",
+    Shaders: "shader",
+  };
+
+  const projectType = filterMap[currentFilterType.value];
+  if (!projectType) return baseFiltered.value;
+
+  return baseFiltered.value.filter((queueItem) =>
+    queueItem.project.project_types.includes(projectType),
+  );
+});
+
+const filteredProjects = computed(() => {
+  const filtered = [...typeFiltered.value];
+
+  if (currentSortType.value === "Oldest") {
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.project.queued || a.project.published || 0).getTime();
+      const dateB = new Date(b.project.queued || b.project.published || 0).getTime();
+      return dateA - dateB;
+    });
+  } else {
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.project.queued || a.project.published || 0).getTime();
+      const dateB = new Date(b.project.queued || b.project.published || 0).getTime();
+      return dateB - dateA;
+    });
+  }
+
+  return filtered;
+});
+
+const paginatedProjects = computed(() => {
+  if (!filteredProjects.value) return [];
+  const start = (currentPage.value - 1) * itemsPerPage;
+  const end = start + itemsPerPage;
+  return filteredProjects.value.slice(start, end);
+});
+
+function goToPage(page: number) {
+  currentPage.value = page;
+}
+
+function moderateAllInFilter() {
+  moderationStore.setQueue(filteredProjects.value.map((queueItem) => queueItem.project.id));
+  navigateTo({
+    name: "type-id",
+    params: {
+      type: "project",
+      id: moderationStore.getCurrentProjectId(),
+    },
+    state: {
+      showChecklist: true,
+    },
+  });
+}
 </script>

apps/frontend/src/pages/moderation/report/[id].vue

@@ -1,17 +0,0 @@
-<template>
-  <ReportView
-    :auth="auth"
-    :report-id="route.params.id"
-    :breadcrumbs-stack="[{ href: '/moderation/reports', label: 'Reports' }]"
-  />
-</template>
-<script setup>
-import ReportView from "~/components/ui/report/ReportView.vue";
-
-const auth = await useAuth();
-const route = useNativeRoute();
-
-useHead({
-  title: `Report ${route.params.id} - Modrinth`,
-});
-</script>

apps/frontend/src/pages/moderation/reports.vue

@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <section class="universal-card">
-      <h2>Reports</h2>
-      <ReportsList :auth="auth" moderation />
-    </section>
-  </div>
-</template>
-<script setup>
-import ReportsList from "~/components/ui/report/ReportsList.vue";
-
-const auth = await useAuth();
-useHead({
-  title: "Reports - Modrinth",
-});
-</script>

apps/frontend/src/pages/moderation/reports/[id].vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Report } from "@modrinth/utils";
+import { enrichReportBatch } from "~/helpers/moderation.ts";
+import ModerationReportCard from "~/components/ui/moderation/ModerationReportCard.vue";
+
+const { params } = useRoute();
+const reportId = params.id as string;
+
+const { data: report } = await useAsyncData(`moderation-report-${reportId}`, async () => {
+  try {
+    const report = (await useBaseFetch(`report/${reportId}`, { apiVersion: 3 })) as Report;
+    const enrichedReport = (await enrichReportBatch([report]))[0];
+    return enrichedReport;
+  } catch (error) {
+    console.error("Error fetching report:", error);
+    throw createError({
+      statusCode: 404,
+      statusMessage: "Report not found",
+    });
+  }
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <ModerationReportCard v-if="report" :report="report" />
+  </div>
+</template>

apps/frontend/src/pages/moderation/reports/index.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex flex-col justify-between gap-3 lg:flex-row">
+      <div class="iconified-input flex-1 lg:max-w-md">
+        <SearchIcon aria-hidden="true" class="text-lg" />
+        <input
+          v-model="query"
+          class="h-[40px]"
+          autocomplete="off"
+          spellcheck="false"
+          type="text"
+          :placeholder="formatMessage(messages.searchPlaceholder)"
+          @input="goToPage(1)"
+        />
+        <Button v-if="query" class="r-btn" @click="() => (query = '')">
+          <XIcon />
+        </Button>
+      </div>
+
+      <div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
+        <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+      </div>
+
+      <div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
+        <DropdownSelect
+          v-slot="{ selected }"
+          v-model="currentFilterType"
+          class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
+          :name="formatMessage(messages.filterBy)"
+          :options="filterTypes as unknown[]"
+          @change="goToPage(1)"
+        >
+          <span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
+            <FilterIcon class="size-4 flex-shrink-0" />
+            <span class="truncate">{{ selected }} ({{ filteredReports.length }})</span>
+          </span>
+        </DropdownSelect>
+
+        <DropdownSelect
+          v-slot="{ selected }"
+          v-model="currentSortType"
+          class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
+          :name="formatMessage(messages.sortBy)"
+          :options="sortTypes as unknown[]"
+          @change="goToPage(1)"
+        >
+          <span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
+            <SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
+            <SortDescIcon v-else class="size-4 flex-shrink-0" />
+            <span class="truncate">{{ selected }}</span>
+          </span>
+        </DropdownSelect>
+      </div>
+    </div>
+
+    <div v-if="totalPages > 1" class="flex justify-center lg:hidden">
+      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+    </div>
+
+    <div class="mt-4 flex flex-col gap-2">
+      <div v-if="paginatedReports.length === 0" class="universal-card h-24 animate-pulse"></div>
+      <ReportCard v-for="report in paginatedReports" v-else :key="report.id" :report="report" />
+    </div>
+
+    <div v-if="totalPages > 1" class="mt-4 flex justify-center">
+      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DropdownSelect, Button, Pagination } from "@modrinth/ui";
+import { XIcon, SearchIcon, SortAscIcon, SortDescIcon, FilterIcon } from "@modrinth/assets";
+import { defineMessages, useVIntl } from "@vintl/vintl";
+import { useLocalStorage } from "@vueuse/core";
+import type { Report } from "@modrinth/utils";
+import Fuse from "fuse.js";
+import type { ExtendedReport } from "@modrinth/moderation";
+import ReportCard from "~/components/ui/moderation/ModerationReportCard.vue";
+import { enrichReportBatch } from "~/helpers/moderation.ts";
+
+const { formatMessage } = useVIntl();
+const route = useRoute();
+const router = useRouter();
+
+const messages = defineMessages({
+  searchPlaceholder: {
+    id: "moderation.search.placeholder",
+    defaultMessage: "Search...",
+  },
+  filterBy: {
+    id: "moderation.filter.by",
+    defaultMessage: "Filter by",
+  },
+  sortBy: {
+    id: "moderation.sort.by",
+    defaultMessage: "Sort by",
+  },
+});
+
+const { data: allReports } = await useLazyAsyncData("new-moderation-reports", async () => {
+  const startTime = performance.now();
+  let currentOffset = 0;
+  const REPORT_ENDPOINT_COUNT = 350;
+  const allReports: ExtendedReport[] = [];
+
+  const enrichmentPromises: Promise<ExtendedReport[]>[] = [];
+
+  while (true) {
+    const reports = (await useBaseFetch(
+      `report?count=${REPORT_ENDPOINT_COUNT}&offset=${currentOffset}`,
+      { apiVersion: 3 },
+    )) as Report[];
+
+    if (reports.length === 0) break;
+
+    const enrichmentPromise = enrichReportBatch(reports);
+    enrichmentPromises.push(enrichmentPromise);
+
+    currentOffset += reports.length;
+
+    if (enrichmentPromises.length >= 3) {
+      const completed = await Promise.all(enrichmentPromises.splice(0, 2));
+      allReports.push(...completed.flat());
+    }
+
+    if (reports.length < REPORT_ENDPOINT_COUNT) break;
+  }
+
+  const remainingBatches = await Promise.all(enrichmentPromises);
+  allReports.push(...remainingBatches.flat());
+
+  const endTime = performance.now();
+  const duration = endTime - startTime;
+
+  console.debug(
+    `Reports fetched and processed in ${duration.toFixed(2)}ms (${(duration / 1000).toFixed(2)}s)`,
+  );
+
+  return allReports;
+});
+
+const query = ref(route.query.q?.toString() || "");
+
+watch(
+  query,
+  (newQuery) => {
+    const currentQuery = { ...route.query };
+    if (newQuery) {
+      currentQuery.q = newQuery;
+    } else {
+      delete currentQuery.q;
+    }
+
+    router.replace({
+      path: route.path,
+      query: currentQuery,
+    });
+  },
+  { immediate: false },
+);
+
+watch(
+  () => route.query.q,
+  (newQueryParam) => {
+    const newValue = newQueryParam?.toString() || "";
+    if (query.value !== newValue) {
+      query.value = newValue;
+    }
+  },
+);
+
+const currentFilterType = useLocalStorage("moderation-reports-filter-type", () => "All");
+const filterTypes: readonly string[] = readonly(["All", "Unread", "Read"]);
+
+const currentSortType = useLocalStorage("moderation-reports-sort-type", () => "Oldest");
+const sortTypes: readonly string[] = readonly(["Oldest", "Newest"]);
+
+const currentPage = ref(1);
+const itemsPerPage = 15;
+const totalPages = computed(() => Math.ceil((filteredReports.value?.length || 0) / itemsPerPage));
+
+const fuse = computed(() => {
+  if (!allReports.value || allReports.value.length === 0) return null;
+  return new Fuse(allReports.value, {
+    keys: [
+      {
+        name: "id",
+        weight: 3,
+      },
+      {
+        name: "body",
+        weight: 3,
+      },
+      {
+        name: "report_type",
+        weight: 3,
+      },
+      {
+        name: "item_id",
+        weight: 2,
+      },
+      {
+        name: "reporter_user.username",
+        weight: 2,
+      },
+      "project.name",
+      "project.slug",
+      "user.username",
+      "version.name",
+      "target.name",
+      "target.slug",
+    ],
+    includeScore: true,
+    threshold: 0.4,
+  });
+});
+
+const memberRoleMap = computed(() => {
+  if (!allReports.value?.length) return new Map();
+
+  const map = new Map();
+  for (const report of allReports.value) {
+    if (report.thread?.members?.length) {
+      const roleMap = new Map();
+      for (const member of report.thread.members) {
+        roleMap.set(member.id, member.role);
+      }
+      map.set(report.id, roleMap);
+    }
+  }
+  return map;
+});
+
+const searchResults = computed(() => {
+  if (!query.value || !fuse.value) return null;
+  return fuse.value.search(query.value).map((result) => result.item);
+});
+
+const baseFiltered = computed(() => {
+  if (!allReports.value) return [];
+  return query.value && searchResults.value ? searchResults.value : [...allReports.value];
+});
+
+const typeFiltered = computed(() => {
+  if (currentFilterType.value === "All") return baseFiltered.value;
+
+  return baseFiltered.value.filter((report) => {
+    const messages = report.thread?.messages || [];
+
+    if (messages.length === 0) {
+      return currentFilterType.value === "Unread";
+    }
+
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage.author_id) return false;
+
+    const roleMap = memberRoleMap.value.get(report.id);
+    if (!roleMap) return false;
+
+    const authorRole = roleMap.get(lastMessage.author_id);
+    const isModeratorMessage = authorRole === "moderator" || authorRole === "admin";
+
+    return currentFilterType.value === "Read" ? isModeratorMessage : !isModeratorMessage;
+  });
+});
+
+const filteredReports = computed(() => {
+  const filtered = [...typeFiltered.value];
+
+  if (currentSortType.value === "Oldest") {
+    filtered.sort((a, b) => new Date(a.created).getTime() - new Date(b.created).getTime());
+  } else {
+    filtered.sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());
+  }
+
+  return filtered;
+});
+
+const paginatedReports = computed(() => {
+  if (!filteredReports.value) return [];
+  const start = (currentPage.value - 1) * itemsPerPage;
+  const end = start + itemsPerPage;
+  return filteredReports.value.slice(start, end);
+});
+
+function goToPage(page: number) {
+  currentPage.value = page;
+}
+</script>

apps/frontend/src/pages/moderation/review.vue

@@ -1,301 +0,0 @@
-<template>
-  <section class="universal-card">
-    <h2>Review projects</h2>
-    <div class="input-group">
-      <Chips
-        v-model="projectType"
-        :items="projectTypes"
-        :format-label="(x) => (x === 'all' ? 'All' : formatProjectType(x) + 's')"
-      />
-      <button v-if="oldestFirst" class="iconified-button push-right" @click="oldestFirst = false">
-        <SortDescIcon />
-        Sorting by oldest
-      </button>
-      <button v-else class="iconified-button push-right" @click="oldestFirst = true">
-        <SortAscIcon />
-        Sorting by newest
-      </button>
-      <button
-        class="btn btn-highlight"
-        :disabled="projectsFiltered.length === 0"
-        @click="goToProjects()"
-      >
-        <ScaleIcon />
-        Start moderating
-      </button>
-    </div>
-    <p v-if="projectType !== 'all'" class="project-count">
-      Showing {{ projectsFiltered.length }} {{ projectTypePlural }} of {{ projects.length }} total
-      projects in the queue.
-    </p>
-    <p v-else class="project-count">There are {{ projects.length }} projects in the queue.</p>
-    <p v-if="projectsOver24Hours.length > 0" class="warning project-count">
-      <IssuesIcon />
-      {{ projectsOver24Hours.length }} {{ projectTypePlural }}
-      have been in the queue for over 24 hours.
-    </p>
-    <p v-if="projectsOver48Hours.length > 0" class="danger project-count">
-      <IssuesIcon />
-      {{ projectsOver48Hours.length }} {{ projectTypePlural }}
-      have been in the queue for over 48 hours.
-    </p>
-    <div
-      v-for="project in projectsFiltered.sort((a, b) => {
-        if (oldestFirst) {
-          return b.age - a.age;
-        } else {
-          return a.age - b.age;
-        }
-      })"
-      :key="`project-${project.id}`"
-      class="universal-card recessed project"
-    >
-      <div class="project-title">
-        <div class="mobile-row">
-          <nuxt-link :to="`/project/${project.id}`" class="iconified-stacked-link">
-            <Avatar :src="project.icon_url" size="xs" no-shadow raised />
-            <span class="stacked">
-              <span class="title">{{ project.name }}</span>
-              <span>{{ formatProjectType(project.inferred_project_type) }}</span>
-            </span>
-          </nuxt-link>
-        </div>
-        <div class="mobile-row">
-          by
-          <nuxt-link
-            v-if="project.owner"
-            :to="`/user/${project.owner.user.id}`"
-            class="iconified-link"
-          >
-            <Avatar :src="project.owner.user.avatar_url" circle size="xxs" raised />
-            <span>{{ project.owner.user.username }}</span>
-          </nuxt-link>
-          <nuxt-link
-            v-else-if="project.org"
-            :to="`/organization/${project.org.id}`"
-            class="iconified-link"
-          >
-            <Avatar :src="project.org.icon_url" circle size="xxs" raised />
-            <span>{{ project.org.name }}</span>
-          </nuxt-link>
-        </div>
-        <div class="mobile-row">
-          is requesting to be
-          <ProjectStatusBadge
-            :status="project.requested_status ? project.requested_status : 'approved'"
-          />
-        </div>
-      </div>
-      <div class="input-group">
-        <nuxt-link :to="`/project/${project.id}`" class="iconified-button raised-button">
-          <EyeIcon />
-          View project
-        </nuxt-link>
-      </div>
-      <span v-if="project.queued" :class="`submitter-info ${project.age_warning}`">
-        <IssuesIcon v-if="project.age_warning" />
-        Submitted
-        <span v-tooltip="$dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')">{{
-          formatRelativeTime(project.queued)
-        }}</span>
-      </span>
-      <span v-else class="submitter-info"><UnknownIcon /> Unknown queue date</span>
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { Avatar, ProjectStatusBadge, Chips, useRelativeTime } from "@modrinth/ui";
-import {
-  UnknownIcon,
-  EyeIcon,
-  SortAscIcon,
-  SortDescIcon,
-  IssuesIcon,
-  ScaleIcon,
-} from "@modrinth/assets";
-import { formatProjectType } from "@modrinth/utils";
-import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
-
-useHead({
-  title: "Review projects - Modrinth",
-});
-
-const app = useNuxtApp();
-
-const router = useRouter();
-
-const now = app.$dayjs();
-const TIME_24H = 86400000;
-const TIME_48H = TIME_24H * 2;
-
-const formatRelativeTime = useRelativeTime();
-
-const { data: projects } = await useAsyncData("moderation/projects?count=1000", () =>
-  useBaseFetch("moderation/projects?count=1000", { internal: true }),
-);
-const members = ref([]);
-const projectType = ref("all");
-const oldestFirst = ref(true);
-
-const projectsFiltered = computed(() =>
-  projects.value.filter(
-    (x) =>
-      projectType.value === "all" ||
-      app.$getProjectTypeForUrl(x.project_types[0], x.loaders) === projectType.value,
-  ),
-);
-
-const projectsOver24Hours = computed(() =>
-  projectsFiltered.value.filter((project) => project.age >= TIME_24H && project.age < TIME_48H),
-);
-const projectsOver48Hours = computed(() =>
-  projectsFiltered.value.filter((project) => project.age >= TIME_48H),
-);
-const projectTypePlural = computed(() =>
-  projectType.value === "all"
-    ? "projects"
-    : (formatProjectType(projectType.value) + "s").toLowerCase(),
-);
-
-const projectTypes = computed(() => {
-  const set = new Set();
-  set.add("all");
-
-  if (projects.value) {
-    for (const project of projects.value) {
-      set.add(project.inferred_project_type);
-    }
-  }
-
-  return [...set];
-});
-
-if (projects.value) {
-  const teamIds = projects.value.map((x) => x.team_id);
-  const orgIds = projects.value.filter((x) => x.organization).map((x) => x.organization);
-
-  const [{ data: teams }, { data: orgs }] = await Promise.all([
-    useAsyncData(`teams?ids=${asEncodedJsonArray(teamIds)}`, () =>
-      fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`),
-    ),
-    useAsyncData(`organizations?ids=${asEncodedJsonArray(orgIds)}`, () =>
-      fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
-        apiVersion: 3,
-      }),
-    ),
-  ]);
-
-  if (teams.value) {
-    members.value = teams.value;
-
-    projects.value = projects.value.map((project) => {
-      project.owner = members.value
-        ? members.value.flat().find((x) => x.team_id === project.team_id && x.role === "Owner")
-        : null;
-      project.org = orgs.value ? orgs.value.find((x) => x.id === project.organization) : null;
-      project.age = project.queued ? now - app.$dayjs(project.queued) : Number.MAX_VALUE;
-      project.age_warning = "";
-      if (project.age > TIME_24H * 2) {
-        project.age_warning = "danger";
-      } else if (project.age > TIME_24H) {
-        project.age_warning = "warning";
-      }
-      project.inferred_project_type = app.$getProjectTypeForUrl(
-        project.project_types[0],
-        project.loaders,
-      );
-      return project;
-    });
-  }
-}
-
-async function goToProjects() {
-  const project = projectsFiltered.value[0];
-  await router.push({
-    name: "type-id",
-    params: {
-      type: project.project_types[0],
-      id: project.slug ? project.slug : project.id,
-    },
-    state: {
-      showChecklist: true,
-      projects: projectsFiltered.value.slice(1).map((x) => (x.slug ? x.slug : x.id)),
-    },
-  });
-}
-</script>
-<style lang="scss" scoped>
-.project {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-card-sm);
-  @media screen and (min-width: 650px) {
-    display: grid;
-    grid-template: "title action" "date action";
-    grid-template-columns: 1fr auto;
-  }
-}
-
-.submitter-info {
-  margin: 0;
-  grid-area: date;
-
-  svg {
-    vertical-align: top;
-  }
-}
-
-.warning {
-  color: var(--color-orange);
-}
-
-.danger {
-  color: var(--color-red);
-  font-weight: bold;
-}
-
-.project-count {
-  margin-block: var(--spacing-card-md);
-
-  svg {
-    vertical-align: top;
-  }
-}
-
-.input-group {
-  grid-area: action;
-}
-
-.project-title {
-  display: flex;
-  gap: var(--spacing-card-xs);
-  align-items: center;
-  flex-wrap: wrap;
-
-  .mobile-row {
-    display: contents;
-  }
-
-  @media screen and (max-width: 800px) {
-    flex-direction: column;
-    align-items: flex-start;
-
-    .mobile-row {
-      display: flex;
-      flex-direction: row;
-      gap: var(--spacing-card-xs);
-      align-items: center;
-      flex-wrap: wrap;
-    }
-  }
-}
-
-:deep(.avatar) {
-  flex-shrink: 0;
-
-  &.size-xs {
-    margin-right: var(--spacing-card-xs);
-  }
-}
-</style>

apps/frontend/src/pages/moderation/technical-review-mockup.vue

@@ -0,0 +1,386 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex flex-col justify-between gap-3 lg:flex-row">
+      <div class="iconified-input flex-1 lg:max-w-md">
+        <SearchIcon aria-hidden="true" class="text-lg" />
+        <input
+          v-model="query"
+          class="h-[40px]"
+          autocomplete="off"
+          spellcheck="false"
+          type="text"
+          :placeholder="formatMessage(messages.searchPlaceholder)"
+          @input="updateSearchResults()"
+        />
+        <Button v-if="query" class="r-btn" @click="() => (query = '')">
+          <XIcon />
+        </Button>
+      </div>
+
+      <div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
+        <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+      </div>
+
+      <div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
+        <DropdownSelect
+          v-slot="{ selected }"
+          v-model="currentFilterType"
+          class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
+          :name="formatMessage(messages.filterBy)"
+          :options="filterTypes as unknown[]"
+          @change="updateSearchResults()"
+        >
+          <span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
+            <FilterIcon class="size-4 flex-shrink-0" />
+            <span class="truncate">{{ selected }} ({{ filteredReports.length }})</span>
+          </span>
+        </DropdownSelect>
+
+        <DropdownSelect
+          v-slot="{ selected }"
+          v-model="currentSortType"
+          class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
+          :name="formatMessage(messages.sortBy)"
+          :options="sortTypes as unknown[]"
+          @change="updateSearchResults()"
+        >
+          <span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
+            <SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
+            <SortDescIcon v-else class="size-4 flex-shrink-0" />
+            <span class="truncate">{{ selected }}</span>
+          </span>
+        </DropdownSelect>
+      </div>
+    </div>
+
+    <div v-if="totalPages > 1" class="flex justify-center lg:hidden">
+      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+    </div>
+
+    <div class="mt-4 flex flex-col gap-2">
+      <DelphiReportCard
+        v-for="report in paginatedReports"
+        :key="report.version.id"
+        :report="report"
+      />
+      <div
+        v-if="!paginatedReports || paginatedReports.length === 0"
+        class="universal-card h-24 animate-pulse"
+      ></div>
+    </div>
+
+    <div v-if="totalPages > 1" class="mt-4 flex justify-center">
+      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DropdownSelect, Button, Pagination } from "@modrinth/ui";
+import { XIcon, SearchIcon, SortAscIcon, SortDescIcon, FilterIcon } from "@modrinth/assets";
+import { defineMessages, useVIntl } from "@vintl/vintl";
+import { useLocalStorage } from "@vueuse/core";
+import type { TeamMember, Organization, DelphiReport, Project, Version } from "@modrinth/utils";
+import Fuse from "fuse.js";
+import type { OwnershipTarget, ExtendedDelphiReport } from "@modrinth/moderation";
+import DelphiReportCard from "~/components/ui/moderation/ModerationDelphiReportCard.vue";
+import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
+
+const { formatMessage } = useVIntl();
+const route = useRoute();
+const router = useRouter();
+
+const messages = defineMessages({
+  searchPlaceholder: {
+    id: "moderation.technical.search.placeholder",
+    defaultMessage: "Search tech reviews...",
+  },
+  filterBy: {
+    id: "moderation.filter.by",
+    defaultMessage: "Filter by",
+  },
+  sortBy: {
+    id: "moderation.sort.by",
+    defaultMessage: "Sort by",
+  },
+});
+
+async function getProjectQuicklyForMock(projectId: string): Promise<Project> {
+  return (await useBaseFetch(`project/${projectId}`)) as Project;
+}
+
+async function getVersionQuicklyForMock(versionId: string): Promise<Version> {
+  return (await useBaseFetch(`version/${versionId}`)) as Version;
+}
+
+const mockDelphiReports: DelphiReport[] = [
+  {
+    project: await getProjectQuicklyForMock("7MoE34WK"),
+    version: await getVersionQuicklyForMock("cTkKLWgA"),
+    trace_type: "url_usage",
+    file_path: "me/decce/gnetum/ASMEventHandlerHelper.java",
+    priority_score: 29,
+    status: "pending",
+    detected_at: "2025-04-01T12:00:00Z",
+  } as DelphiReport,
+  {
+    project: await getProjectQuicklyForMock("7MoE34WK"),
+    version: await getVersionQuicklyForMock("cTkKLWgA"),
+    trace_type: "url_usage",
+    file_path: "me/decce/gnetum/SomeOtherFile.java",
+    priority_score: 48,
+    status: "rejected",
+    detected_at: "2025-03-02T12:00:00Z",
+  } as DelphiReport,
+  {
+    project: await getProjectQuicklyForMock("7MoE34WK"),
+    version: await getVersionQuicklyForMock("cTkKLWgA"),
+    trace_type: "url_usage",
+    file_path: "me/decce/gnetum/YetAnotherFile.java",
+    priority_score: 15,
+    status: "approved",
+    detected_at: "2025-02-03T12:00:00Z",
+  } as DelphiReport,
+];
+
+const { data: allReports } = await useAsyncData("moderation-tech-reviews", async () => {
+  // TODO: replace with actual API call
+  const delphiReports = mockDelphiReports;
+
+  if (delphiReports.length === 0) {
+    return [];
+  }
+
+  const teamIds = [...new Set(delphiReports.map((report) => report.project.team).filter(Boolean))];
+  const orgIds = [
+    ...new Set(delphiReports.map((report) => report.project.organization).filter(Boolean)),
+  ];
+
+  const [teamsData, orgsData]: [TeamMember[][], Organization[]] = await Promise.all([
+    teamIds.length > 0
+      ? fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
+      : Promise.resolve([]),
+    orgIds.length > 0
+      ? fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
+          apiVersion: 3,
+        })
+      : Promise.resolve([]),
+  ]);
+
+  const orgTeamIds = orgsData.map((org) => org.team_id).filter(Boolean);
+  const orgTeamsData: TeamMember[][] =
+    orgTeamIds.length > 0
+      ? await fetchSegmented(orgTeamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
+      : [];
+
+  const teamMap = new Map<string, TeamMember[]>();
+  const orgMap = new Map<string, Organization>();
+
+  teamsData.forEach((team) => {
+    let teamId = null;
+    for (const member of team) {
+      teamId = member.team_id;
+      if (!teamMap.has(teamId)) {
+        teamMap.set(teamId, team);
+        break;
+      }
+    }
+  });
+
+  orgTeamsData.forEach((team) => {
+    let teamId = null;
+    for (const member of team) {
+      teamId = member.team_id;
+      if (!teamMap.has(teamId)) {
+        teamMap.set(teamId, team);
+        break;
+      }
+    }
+  });
+
+  orgsData.forEach((org: Organization) => {
+    orgMap.set(org.id, org);
+  });
+
+  const extendedReports: ExtendedDelphiReport[] = delphiReports.map((report) => {
+    let target: OwnershipTarget | undefined;
+    const project = report.project;
+
+    if (project) {
+      let owner: TeamMember | null = null;
+      let org: Organization | null = null;
+
+      if (project.team) {
+        const teamMembers = teamMap.get(project.team);
+        if (teamMembers) {
+          owner = teamMembers.find((member) => member.role === "Owner") || null;
+        }
+      }
+
+      if (project.organization) {
+        org = orgMap.get(project.organization) || null;
+      }
+
+      if (org) {
+        target = {
+          name: org.name,
+          avatar_url: org.icon_url,
+          type: "organization",
+          slug: org.slug,
+        };
+      } else if (owner) {
+        target = {
+          name: owner.user.username,
+          avatar_url: owner.user.avatar_url,
+          type: "user",
+          slug: owner.user.username,
+        };
+      }
+    }
+
+    return {
+      ...report,
+      target,
+    };
+  });
+
+  extendedReports.sort((a, b) => b.priority_score - a.priority_score);
+
+  return extendedReports;
+});
+
+const query = ref(route.query.q?.toString() || "");
+watch(
+  query,
+  (newQuery) => {
+    const currentQuery = { ...route.query };
+    if (newQuery) {
+      currentQuery.q = newQuery;
+    } else {
+      delete currentQuery.q;
+    }
+
+    router.replace({
+      path: route.path,
+      query: currentQuery,
+    });
+  },
+  { immediate: false },
+);
+
+watch(
+  () => route.query.q,
+  (newQueryParam) => {
+    const newValue = newQueryParam?.toString() || "";
+    if (query.value !== newValue) {
+      query.value = newValue;
+    }
+  },
+);
+
+const currentFilterType = useLocalStorage("moderation-tech-reviews-filter-type", () => "Pending");
+const filterTypes: readonly string[] = readonly(["All", "Pending", "Approved", "Rejected"]);
+
+const currentSortType = useLocalStorage("moderation-tech-reviews-sort-type", () => "Priority");
+const sortTypes: readonly string[] = readonly(["Priority", "Oldest", "Newest"]);
+
+const currentPage = ref(1);
+const itemsPerPage = 15;
+const totalPages = computed(() => Math.ceil((filteredReports.value?.length || 0) / itemsPerPage));
+
+const fuse = computed(() => {
+  if (!allReports.value || allReports.value.length === 0) return null;
+  return new Fuse(allReports.value, {
+    keys: [
+      {
+        name: "version.id",
+        weight: 3,
+      },
+      {
+        name: "version.version_number",
+        weight: 3,
+      },
+      {
+        name: "project.title",
+        weight: 3,
+      },
+      {
+        name: "project.slug",
+        weight: 3,
+      },
+      {
+        name: "version.files.filename",
+        weight: 2,
+      },
+      {
+        name: "trace_type",
+        weight: 2,
+      },
+      {
+        name: "content",
+        weight: 0.5,
+      },
+      "file_path",
+      "project.id",
+      "target.name",
+      "target.slug",
+    ],
+    includeScore: true,
+    threshold: 0.4,
+  });
+});
+
+const filteredReports = computed(() => {
+  if (!allReports.value) return [];
+
+  let filtered;
+
+  if (query.value && fuse.value) {
+    const results = fuse.value.search(query.value);
+    filtered = results.map((result) => result.item);
+  } else {
+    filtered = [...allReports.value];
+  }
+
+  if (currentFilterType.value === "Pending") {
+    filtered = filtered.filter((report) => report.status === "pending");
+  } else if (currentFilterType.value === "Approved") {
+    filtered = filtered.filter((report) => report.status === "approved");
+  } else if (currentFilterType.value === "Rejected") {
+    filtered = filtered.filter((report) => report.status === "rejected");
+  }
+
+  if (currentSortType.value === "Priority") {
+    filtered.sort((a, b) => b.priority_score - a.priority_score);
+  } else if (currentSortType.value === "Oldest") {
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.detected_at).getTime();
+      const dateB = new Date(b.detected_at).getTime();
+      return dateA - dateB;
+    });
+  } else {
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.detected_at).getTime();
+      const dateB = new Date(b.detected_at).getTime();
+      return dateB - dateA;
+    });
+  }
+
+  return filtered;
+});
+
+const paginatedReports = computed(() => {
+  if (!filteredReports.value) return [];
+  const start = (currentPage.value - 1) * itemsPerPage;
+  const end = start + itemsPerPage;
+  return filteredReports.value.slice(start, end);
+});
+
+function updateSearchResults() {
+  currentPage.value = 1;
+}
+
+function goToPage(page: number) {
+  currentPage.value = page;
+}
+</script>

apps/frontend/src/pages/moderation/technical-review.vue

@@ -0,0 +1,3 @@
+<template>
+  <p>Not yet implemented.</p>
+</template>

apps/frontend/src/pages/plus.vue

@@ -149,7 +149,8 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .main-hero {
-  background: linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
+  background:
+    linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
     var(--color-accent-contrast);
   margin-top: -5rem;
   padding: 11.25rem 1rem 8rem;

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

@@ -45,8 +45,9 @@
         <h2
           class="relative m-0 max-w-2xl text-base font-normal leading-[155%] text-secondary md:text-[1.2rem]"
         >
-          Modrinth Servers is the easiest way to host your own Minecraft server. Seamlessly install
-          and play your favorite mods and modpacks, all within the Modrinth platform.
+          Modrinth Servers is the easiest way to host your own Minecraft: Java Edition server.
+          Seamlessly install and play your favorite mods and modpacks, all within the Modrinth
+          platform.
         </h2>
         <div class="relative flex w-full flex-wrap items-center gap-8 align-middle sm:w-fit">
           <div
@@ -427,11 +428,8 @@
                 Do Modrinth Servers have DDoS protection?
               </summary>
               <p class="m-0 ml-6 leading-[160%]">
-                Yes. All Modrinth Servers come with DDoS protection powered by
-                <a href="https://us.ovhcloud.com/security/anti-ddos/" target="_blank"
-                  >OVHcloud® Anti-DDoS infrastructure</a
-                >
-                which has over 17Tbps capacity. Your server is safe on Modrinth.
+                Yes. All Modrinth Servers come with DDoS protection, with up to 17Tbps capacity in
+                some locations.
               </p>
             </details>
 
@@ -443,8 +441,9 @@
                 Where are Modrinth Servers located? Can I choose a region?
               </summary>
               <p class="m-0 ml-6 leading-[160%]">
-                We have servers in both North America in Vint Hill, Virginia, and Europe in Limburg,
-                Germany. More regions to come in the future!
+                We have servers available in North America and Europe at the moment that you can
+                choose upon purchase. More regions to come in the future! If you'd like to switch
+                your region, please contact support.
               </p>
             </details>
 
@@ -461,7 +460,7 @@
               </p>
             </details>
 
-            <details pyro-hash="players" class="group" :open="$route.hash === '#players'">
+            <details pyro-hash="performance" class="group" :open="$route.hash === '#performance'">
               <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
                 <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
                   <RightArrowIcon />
@@ -482,7 +481,7 @@
               </p>
             </details>
 
-            <details pyro-hash="players" class="group" :open="$route.hash === '#prices'">
+            <details pyro-hash="prices" class="group" :open="$route.hash === '#prices'">
               <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
                 <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
                   <RightArrowIcon />
@@ -493,6 +492,24 @@
                 All prices are listed in United States Dollars (USD).
               </p>
             </details>
+
+            <details pyro-hash="versions" class="group" :open="$route.hash === '#versions'">
+              <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
+                <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
+                  <RightArrowIcon />
+                </span>
+                What Minecraft versions and loaders can be used?
+              </summary>
+              <p class="m-0 ml-6 leading-[160%]">
+                Modrinth Servers can run any version of Minecraft: Java Edition going all the way
+                back to version 1.2.5, including snapshot versions.
+              </p>
+              <p class="m-0 ml-6 mt-3 leading-[160%]">
+                We also support a wide range of mod and plugin loaders, including Fabric, Quilt,
+                Forge, and NeoForge for mods, as well as Paper and Purpur for plugins. Availability
+                depends on whether the mod or plugin loader supports the selected Minecraft version.
+              </p>
+            </details>
           </div>
         </div>
       </div>

apps/frontend/src/pages/servers/manage/[id].vue

@@ -1020,7 +1020,7 @@ const nodeUnavailableDetails = computed(() => [
   {
     label: "Error message",
     value: nodeAccessible.value
-      ? server.moduleErrors?.general?.error.message ?? "Unknown"
+      ? (server.moduleErrors?.general?.error.message ?? "Unknown")
       : "Unable to reach node. Ping test failed.",
     type: "block" as const,
   },
@@ -1277,7 +1277,8 @@ useHead({
   background-repeat: no-repeat;
   filter: blur(1rem);
   content: "";
-  background-image: linear-gradient(
+  background-image:
+    linear-gradient(
       to bottom,
       rgba(from var(--color-raised-bg) r g b / 0.2),
       rgb(from var(--color-raised-bg) r g b / 0.8)

apps/frontend/src/pages/servers/manage/[id]/files.vue

@@ -101,7 +101,7 @@
                   <span :class="{ invisible: 'current_file' in op && !op.current_file }">
                     {{
                       "current_file" in op
-                        ? op.current_file?.split("/")?.pop() ?? "unknown"
+                        ? (op.current_file?.split("/")?.pop() ?? "unknown")
                         : "unknown"
                     }}
                   </span>

apps/frontend/src/pages/servers/manage/[id]/options/startup.vue

@@ -42,7 +42,7 @@
             </label>
             <ButtonStyled>
               <button
-                :disabled="invocation === startupSettings?.original_invocation"
+                :disabled="invocation === originalInvocation"
                 class="!w-full sm:!w-auto"
                 @click="resetToDefault"
               >
@@ -120,8 +120,9 @@ const props = defineProps<{
   server: ModrinthServer;
 }>();
 
+await props.server.startup.fetch();
+
 const data = computed(() => props.server.general);
-const startupSettings = computed(() => props.server.startup);
 const showAllVersions = ref(false);
 
 const jdkVersionMap = [
@@ -137,33 +138,15 @@ const jdkBuildMap = [
   { value: "graal", label: "GraalVM" },
 ];
 
-const invocation = ref("");
-const jdkVersion = ref("");
-const jdkBuild = ref("");
-
-const originalInvocation = ref("");
-const originalJdkVersion = ref("");
-const originalJdkBuild = ref("");
-
-watch(
-  startupSettings,
-  (newSettings) => {
-    if (newSettings) {
-      invocation.value = newSettings.invocation;
-      originalInvocation.value = newSettings.invocation;
-
-      const jdkVersionLabel =
-        jdkVersionMap.find((v) => v.value === newSettings.jdk_version)?.label || "";
-      jdkVersion.value = jdkVersionLabel;
-      originalJdkVersion.value = jdkVersionLabel;
-
-      const jdkBuildLabel = jdkBuildMap.find((v) => v.value === newSettings.jdk_build)?.label || "";
-      jdkBuild.value = jdkBuildLabel;
-      originalJdkBuild.value = jdkBuildLabel;
-    }
-  },
-  { immediate: true },
+const invocation = ref(props.server.startup.invocation);
+const jdkVersion = ref(
+  jdkVersionMap.find((v) => v.value === props.server.startup.jdk_version)?.label,
 );
+const jdkBuild = ref(jdkBuildMap.find((v) => v.value === props.server.startup.jdk_build)?.label);
+
+const originalInvocation = ref(invocation.value);
+const originalJdkVersion = ref(jdkVersion.value);
+const originalJdkBuild = ref(jdkBuild.value);
 
 const hasUnsavedChanges = computed(
   () =>
@@ -195,7 +178,7 @@ const displayedJavaVersions = computed(() => {
   return showAllVersions.value ? jdkVersionMap.map((v) => v.label) : compatibleJavaVersions.value;
 });
 
-const saveStartup = async () => {
+async function saveStartup() {
   try {
     isUpdating.value = true;
     const invocationValue = invocation.value ?? "";
@@ -232,17 +215,17 @@ const saveStartup = async () => {
   } finally {
     isUpdating.value = false;
   }
-};
+}
 
-const resetStartup = () => {
+function resetStartup() {
   invocation.value = originalInvocation.value;
   jdkVersion.value = originalJdkVersion.value;
   jdkBuild.value = originalJdkBuild.value;
-};
+}
 
-const resetToDefault = () => {
-  invocation.value = startupSettings.value?.original_invocation ?? "";
-};
+function resetToDefault() {
+  invocation.value = originalInvocation.value ?? "";
+}
 </script>
 
 <style scoped>

apps/frontend/src/pages/servers/manage/index.vue

@@ -96,16 +96,7 @@
         <UiServersServerListing
           v-for="server in filteredData"
           :key="server.server_id"
-          :server_id="server.server_id"
-          :name="server.name"
-          :status="server.status"
-          :game="server.game"
-          :loader="server.loader"
-          :loader_version="server.loader_version"
-          :mc_version="server.mc_version"
-          :upstream="server.upstream"
-          :net="server.net"
-          :flows="server.flows"
+          v-bind="server"
         />
         <LazyUiServersServerListingSkeleton v-if="isPollingForNewServers" />
       </ul>

apps/frontend/src/pages/settings/billing/index.vue

@@ -208,15 +208,7 @@
             <div class="flex flex-col gap-2">
               <UiServersServerListing
                 v-if="subscription.serverInfo"
-                :server_id="subscription.serverInfo.server_id"
-                :name="subscription.serverInfo.name"
-                :status="subscription.serverInfo.status"
-                :game="subscription.serverInfo.game"
-                :loader="subscription.serverInfo.loader"
-                :loader_version="subscription.serverInfo.loader_version"
-                :mc_version="subscription.serverInfo.mc_version"
-                :upstream="subscription.serverInfo.upstream"
-                :net="subscription.serverInfo.net"
+                v-bind="subscription.serverInfo"
               />
               <div v-else class="w-fit">
                 <p>

apps/frontend/src/public/.well-known/security.txt

@@ -0,0 +1,6 @@
+Contact: mailto:jai@modrinth.com
+Expires: 2025-12-31T00:00:00.000Z
+Preferred-Languages: en
+Canonical: https://modrinth.com/.well-known/security.txt
+Policy: https://modrinth.com/legal/security
+Hiring: https://careers.modrinth.com/

apps/frontend/src/public/news/feed/articles.json

@@ -98,13 +98,6 @@
       "date": "2023-02-01T20:00:00.000Z",
       "link": "https://modrinth.com/news/article/accelerating-development"
     },
-    {
-      "title": "Two years of Modrinth: a retrospective",
-      "summary": "The history of Modrinth as we know it from December 2020 to December 2022.",
-      "thumbnail": "https://modrinth.com/news/default.webp",
-      "date": "2023-01-07T00:00:00.000Z",
-      "link": "https://modrinth.com/news/article/two-years-of-modrinth-history"
-    },
     {
       "title": "Modrinth's Anniversary Update",
       "summary": "Marking two years of Modrinth and discussing our New Year's Resolutions for 2023.",
@@ -112,6 +105,13 @@
       "date": "2023-01-07T00:00:00.000Z",
       "link": "https://modrinth.com/news/article/two-years-of-modrinth"
     },
+    {
+      "title": "Two years of Modrinth: a retrospective",
+      "summary": "The history of Modrinth as we know it from December 2020 to December 2022.",
+      "thumbnail": "https://modrinth.com/news/default.webp",
+      "date": "2023-01-07T00:00:00.000Z",
+      "link": "https://modrinth.com/news/article/two-years-of-modrinth-history"
+    },
     {
       "title": "Creators can now make money on Modrinth!",
       "summary": "Introducing the Creator Monetization Program allowing creators to earn revenue from their projects.",

apps/frontend/src/store/moderation.ts

@@ -0,0 +1,98 @@
+import { defineStore, createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+export interface ModerationQueue {
+  items: string[];
+  total: number;
+  completed: number;
+  skipped: number;
+  lastUpdated: Date;
+}
+
+const EMPTY_QUEUE: Partial<ModerationQueue> = {
+  items: [],
+
+  // TODO: Consider some form of displaying this in the checklist, maybe at the end
+  total: 0,
+  completed: 0,
+  skipped: 0,
+};
+
+function createEmptyQueue(): ModerationQueue {
+  return { ...EMPTY_QUEUE, lastUpdated: new Date() } as ModerationQueue;
+}
+
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+export const useModerationStore = defineStore("moderation", {
+  state: () => ({
+    currentQueue: createEmptyQueue(),
+  }),
+
+  getters: {
+    queueLength: (state) => state.currentQueue.items.length,
+    hasItems: (state) => state.currentQueue.items.length > 0,
+    progress: (state) => {
+      if (state.currentQueue.total === 0) return 0;
+      return (state.currentQueue.completed + state.currentQueue.skipped) / state.currentQueue.total;
+    },
+  },
+
+  actions: {
+    setQueue(projectIDs: string[]) {
+      this.currentQueue = {
+        items: [...projectIDs],
+        total: projectIDs.length,
+        completed: 0,
+        skipped: 0,
+        lastUpdated: new Date(),
+      };
+    },
+
+    setSingleProject(projectId: string) {
+      this.currentQueue = {
+        items: [projectId],
+        total: 1,
+        completed: 0,
+        skipped: 0,
+        lastUpdated: new Date(),
+      };
+    },
+
+    completeCurrentProject(projectId: string, status: "completed" | "skipped" = "completed") {
+      if (status === "completed") {
+        this.currentQueue.completed++;
+      } else {
+        this.currentQueue.skipped++;
+      }
+
+      this.currentQueue.items = this.currentQueue.items.filter((id: string) => id !== projectId);
+      this.currentQueue.lastUpdated = new Date();
+
+      return this.currentQueue.items.length > 0;
+    },
+
+    getCurrentProjectId(): string | null {
+      return this.currentQueue.items[0] || null;
+    },
+
+    resetQueue() {
+      this.currentQueue = createEmptyQueue();
+    },
+  },
+
+  persist: {
+    key: "moderation-store",
+    serializer: {
+      serialize: JSON.stringify,
+      deserialize: (value: string) => {
+        const parsed = JSON.parse(value);
+        if (parsed.currentQueue?.lastUpdated) {
+          parsed.currentQueue.lastUpdated = new Date(parsed.currentQueue.lastUpdated);
+        }
+        return parsed;
+      },
+    },
+  },
+});

apps/labrinth/.sqlx/query-010c69fa61e1329156020b251e75d46bc09344c1846b3098accce5801e571e5e.json

@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n            INSERT INTO users (\n                id, username, email,\n                avatar_url, raw_avatar_url, bio, created,\n                github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                email_verified, password, paypal_id, paypal_country, paypal_email,\n                venmo_handle, stripe_customer_id, allow_friend_requests\n            )\n            VALUES (\n                $1, $2, $3, $4, $5,\n                $6, $7,\n                $8, $9, $10, $11, $12, $13,\n                $14, $15, $16, $17, $18, $19, $20, $21\n            )\n            ",
+  "query": "\n            INSERT INTO users (\n                id, username, email,\n                avatar_url, raw_avatar_url, bio, created,\n                github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                email_verified, password, paypal_id, paypal_country, paypal_email,\n                venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter\n            )\n            VALUES (\n                $1, $2, $3, $4, $5,\n                $6, $7,\n                $8, $9, $10, $11, $12, $13,\n                $14, $15, $16, $17, $18, $19, $20, $21, $22\n            )\n            ",
   "describe": {
     "columns": [],
     "parameters": {
@@ -25,10 +25,11 @@
         "Text",
         "Text",
         "Text",
+        "Bool",
         "Bool"
       ]
     },
     "nullable": []
   },
-  "hash": "32fa1030a3a69f6bc36c6ec916ba8d0724dfd683576629ab05f5df321d5f9a55"
+  "hash": "010c69fa61e1329156020b251e75d46bc09344c1846b3098accce5801e571e5e"
 }

apps/labrinth/.sqlx/query-1aea0d5e6936b043cb7727b779d60598aa812c8ef0f5895fa740859321092a1c.json

@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n            SELECT id FROM reports\n            WHERE closed = FALSE\n            ORDER BY created ASC\n            LIMIT $1;\n            ",
+  "query": "\n            SELECT id FROM reports\n            WHERE closed = FALSE\n            ORDER BY created ASC\n            OFFSET $2\n            LIMIT $1\n            ",
   "describe": {
     "columns": [
       {
@@ -11,6 +11,7 @@
     ],
     "parameters": {
       "Left": [
+        "Int8",
         "Int8"
       ]
     },
@@ -18,5 +19,5 @@
       false
     ]
   },
-  "hash": "29e171bd746ac5dc1fabae4c9f81c3d1df4e69c860b7d0f6a907377664199217"
+  "hash": "1aea0d5e6936b043cb7727b779d60598aa812c8ef0f5895fa740859321092a1c"
 }

apps/labrinth/.sqlx/query-5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4.json

@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n                    SELECT id, email,\n                        avatar_url, raw_avatar_url, username, bio,\n                        created, role, badges,\n                        github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                        email_verified, password, totp_secret, paypal_id, paypal_country, paypal_email,\n                        venmo_handle, stripe_customer_id, allow_friend_requests\n                    FROM users\n                    WHERE id = ANY($1) OR LOWER(username) = ANY($2)\n                    ",
+  "query": "\n                    SELECT id, email,\n                        avatar_url, raw_avatar_url, username, bio,\n                        created, role, badges,\n                        github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                        email_verified, password, totp_secret, paypal_id, paypal_country, paypal_email,\n                        venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter\n                    FROM users\n                    WHERE id = ANY($1) OR LOWER(username) = ANY($2)\n                    ",
   "describe": {
     "columns": [
       {
@@ -122,6 +122,11 @@
         "ordinal": 23,
         "name": "allow_friend_requests",
         "type_info": "Bool"
+      },
+      {
+        "ordinal": 24,
+        "name": "is_subscribed_to_newsletter",
+        "type_info": "Bool"
       }
     ],
     "parameters": {
@@ -154,8 +159,9 @@
       true,
       true,
       true,
+      false,
       false
     ]
   },
-  "hash": "b5857aafa522ca62294bc296fb6cddd862eca2889203e43b4962df07ba1221a0"
+  "hash": "5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4"
 }

apps/labrinth/.sqlx/query-be8a5dd2b71fdc279a6fa68fe5384da31afd91d4b480527e2dd8402aef36f12c.json

@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n            SELECT id FROM reports\n            WHERE closed = FALSE AND reporter = $1\n            ORDER BY created ASC\n            LIMIT $2;\n            ",
+  "query": "\n            SELECT id FROM reports\n            WHERE closed = FALSE AND reporter = $1\n            ORDER BY created ASC\n            OFFSET $3\n            LIMIT $2\n            ",
   "describe": {
     "columns": [
       {
@@ -11,6 +11,7 @@
     ],
     "parameters": {
       "Left": [
+        "Int8",
         "Int8",
         "Int8"
       ]
@@ -19,5 +20,5 @@
       false
     ]
   },
-  "hash": "f17a109913015a7a5ab847bb2e73794d6261a08d450de24b450222755e520881"
+  "hash": "be8a5dd2b71fdc279a6fa68fe5384da31afd91d4b480527e2dd8402aef36f12c"
 }