tweak(frontend): improve Nuxt build state generation logging and caching (#4133)

Co-authored-by: IMB11 <hendersoncal117@gmail.com>

.github/workflows/daedalus-docker.yml

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

.github/workflows/labrinth-docker.yml

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

.github/workflows/turbo-ci.yml

@@ -52,7 +52,7 @@ jobs:
       # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
       # back to a cached cargo install
       - name: 🧰 Setup cargo-sqlx
-        uses: AlexTMjugador/cache-cargo-install-action@feat/features-support
+        uses: taiki-e/cache-cargo-install-action@v2
         with:
           tool: sqlx-cli
           locked: false

.idea/code.iml

@@ -10,7 +10,6 @@
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
       <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/rust-common/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>

Cargo.lock

@@ -5731,6 +5731,17 @@ dependencies = [
  "phf_shared 0.11.3",
 ]
 
+[[package]]
+name = "phf"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "913273894cec178f401a31ec4b656318d95473527be05c0752cc41cdc32be8b7"
+dependencies = [
+ "phf_macros 0.12.1",
+ "phf_shared 0.12.1",
+ "serde",
+]
+
 [[package]]
 name = "phf_codegen"
 version = "0.8.0"
@@ -5781,6 +5792,16 @@ dependencies = [
  "rand 0.8.5",
 ]
 
+[[package]]
+name = "phf_generator"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2cbb1126afed61dd6368748dae63b1ee7dc480191c6262a3b4ff1e29d86a6c5b"
+dependencies = [
+ "fastrand 2.3.0",
+ "phf_shared 0.12.1",
+]
+
 [[package]]
 name = "phf_macros"
 version = "0.10.0"
@@ -5808,6 +5829,19 @@ dependencies = [
  "syn 2.0.101",
 ]
 
+[[package]]
+name = "phf_macros"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d713258393a82f091ead52047ca779d37e5766226d009de21696c4e667044368"
+dependencies = [
+ "phf_generator 0.12.1",
+ "phf_shared 0.12.1",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.101",
+]
+
 [[package]]
 name = "phf_shared"
 version = "0.8.0"
@@ -5835,6 +5869,15 @@ dependencies = [
  "siphasher 1.0.1",
 ]
 
+[[package]]
+name = "phf_shared"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "06005508882fb681fd97892ecff4b7fd0fee13ef1aa569f8695dae7ab9099981"
+dependencies = [
+ "siphasher 1.0.1",
+]
+
 [[package]]
 name = "pin-project"
 version = "1.1.10"
@@ -8946,6 +8989,7 @@ dependencies = [
  "notify-debouncer-mini",
  "p256",
  "paste",
+ "phf 0.12.1",
  "png",
  "quartz_nbt",
  "quick-xml 0.37.5",
@@ -8985,6 +9029,8 @@ dependencies = [
  "dashmap",
  "either",
  "enumset",
+ "hyper 1.6.0",
+ "hyper-util",
  "native-dialog",
  "paste",
  "serde",

Cargo.toml

@@ -67,6 +67,7 @@ heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
+hyper = "1.6.0"
 hyper-rustls = { version = "0.27.7", default-features = false, features = [
   "http1",
   "native-tokio",
@@ -98,6 +99,7 @@ notify = { version = "8.0.0", default-features = false }
 notify-debouncer-mini = { version = "0.6.0", default-features = false }
 p256 = "0.13.2"
 paste = "1.0.15"
+phf = { version = "0.12.1", features = ["macros"] }
 png = "0.17.16"
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"

apps/app-frontend/package.json

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

apps/app-frontend/src/App.vue

@@ -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'
@@ -263,6 +264,8 @@ const incompatibilityWarningModal = ref()
 
 const credentials = ref()
 
+const modrinthLoginFlowWaitModal = ref()
+
 async function fetchCredentials() {
   const creds = await getCreds().catch(handleError)
   if (creds && creds.user_id) {
@@ -272,8 +275,24 @@ async function fetchCredentials() {
 }
 
 async function signIn() {
-  await login().catch(handleError)
+  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() {
@@ -402,6 +421,9 @@ function handleAuxClick(e) {
     <Suspense>
       <AppSettingsModal ref="settingsModal" />
     </Suspense>
+    <Suspense>
+      <AuthGrantFlowWaitModal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
+    </Suspense>
     <Suspense>
       <InstanceCreationModal ref="installationModal" />
     </Suspense>

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

@@ -305,12 +305,16 @@ const [
   get_game_versions().then(shallowRef).catch(handleError),
   get_loaders()
     .then((value) =>
+      ref(
         value
           .filter((item) => item.supported_project_types.includes('modpack'))
           .map((item) => item.name.toLowerCase()),
+      ),
     )
-    .then(ref)
+    .catch((err) => {
-    .catch(handleError),
+      handleError(err)
+      return ref([])
+    }),
 ])
 loaders.value.unshift('vanilla')
 

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

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

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

@@ -76,10 +76,10 @@ const installing = ref(false)
 const onInstall = ref(() => {})
 
 defineExpose({
-  show: (instanceVal, projectVal, projectVersions, callback) => {
+  show: (instanceVal, projectVal, projectVersions, selected, callback) => {
     instance.value = instanceVal
     versions.value = projectVersions
-    selectedVersion.value = projectVersions[0]
+    selectedVersion.value = selected ?? projectVersions[0]
 
     project.value = projectVal
 

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/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
+    servers.forEach(({ instancePath, address }) =>
-    Promise.all(
-      servers.map(({ 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) {
+function refreshServer(address: string, instancePath: string) {
-  await refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
+  refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
 }
 
 async function joinWorld(world: WorldWithProfile) {

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

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import type { ServerStatus, ServerWorld, SingleplayerWorld, World } from '@/helpers/worlds.ts'
+import type {
+  ProtocolVersion,
+  ServerStatus,
+  ServerWorld,
+  SingleplayerWorld,
+  World,
+} from '@/helpers/worlds.ts'
 import { set_world_display_status, getWorldIdentifier } from '@/helpers/worlds.ts'
 import { formatNumber, getPingLevel } from '@modrinth/utils'
 import {
@@ -54,8 +60,9 @@ const props = withDefaults(
     playingInstance?: boolean
     playingWorld?: boolean
     startingInstance?: boolean
-    supportsQuickPlay?: boolean
+    supportsServerQuickPlay?: boolean
-    currentProtocol?: number | null
+    supportsWorldQuickPlay?: boolean
+    currentProtocol?: ProtocolVersion | null
     highlighted?: boolean
 
     // Server only
@@ -78,7 +85,8 @@ const props = withDefaults(
     playingInstance: false,
     playingWorld: false,
     startingInstance: false,
-    supportsQuickPlay: false,
+    supportsServerQuickPlay: true,
+    supportsWorldQuickPlay: false,
     currentProtocol: null,
 
     refreshing: false,
@@ -102,7 +110,8 @@ const serverIncompatible = computed(
     !!props.serverStatus &&
     !!props.serverStatus.version?.protocol &&
     !!props.currentProtocol &&
-    props.serverStatus.version.protocol !== props.currentProtocol,
+    (props.serverStatus.version.protocol !== props.currentProtocol.version ||
+      props.serverStatus.version.legacy !== props.currentProtocol.legacy),
 )
 
 const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
@@ -120,9 +129,13 @@ const messages = defineMessages({
     id: 'instance.worlds.a_minecraft_server',
     defaultMessage: 'A Minecraft Server',
   },
-  noQuickPlay: {
+  noServerQuickPlay: {
-    id: 'instance.worlds.no_quick_play',
+    id: 'instance.worlds.no_server_quick_play',
-    defaultMessage: 'You can only jump straight into worlds on Minecraft 1.20+',
+    defaultMessage: 'You can only jump straight into servers on Minecraft Alpha 1.0.5+',
+  },
+  noSingleplayerQuickPlay: {
+    id: 'instance.worlds.no_singleplayer_quick_play',
+    defaultMessage: 'You can only jump straight into singleplayer worlds on Minecraft 1.20+',
   },
   gameAlreadyOpen: {
     id: 'instance.worlds.game_already_open',
@@ -144,10 +157,6 @@ const messages = defineMessages({
     id: 'instance.worlds.view_instance',
     defaultMessage: 'View instance',
   },
-  playAnyway: {
-    id: 'instance.worlds.play_anyway',
-    defaultMessage: 'Play anyway',
-  },
   playInstance: {
     id: 'instance.worlds.play_instance',
     defaultMessage: 'Play instance',
@@ -322,17 +331,24 @@ const messages = defineMessages({
         <ButtonStyled v-else>
           <button
             v-tooltip="
-              !serverStatus
+              world.type == 'server' && !supportsServerQuickPlay
+                ? formatMessage(messages.noServerQuickPlay)
+                : world.type == 'singleplayer' && !supportsWorldQuickPlay
+                  ? formatMessage(messages.noSingleplayerQuickPlay)
+                  : playingOtherWorld || locked
+                    ? formatMessage(messages.gameAlreadyOpen)
+                    : !serverStatus
                       ? formatMessage(messages.noContact)
                       : serverIncompatible
                         ? formatMessage(messages.incompatibleServer)
-                  : !supportsQuickPlay
-                    ? formatMessage(messages.noQuickPlay)
-                    : playingOtherWorld || locked
-                      ? formatMessage(messages.gameAlreadyOpen)
                         : null
             "
-            :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
+            :disabled="
+              playingOtherWorld ||
+              startingInstance ||
+              (world.type == 'server' && !supportsServerQuickPlay) ||
+              (world.type == 'singleplayer' && !supportsWorldQuickPlay)
+            "
             @click="emit('play')"
           >
             <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
@@ -349,11 +365,6 @@ const messages = defineMessages({
                 disabled: playingInstance,
                 action: () => emit('play-instance'),
               },
-              {
-                id: 'play-anyway',
-                shown: serverIncompatible && !playingInstance && supportsQuickPlay,
-                action: () => emit('play'),
-              },
               {
                 id: 'open-instance',
                 shown: !!instancePath,
@@ -419,10 +430,6 @@ const messages = defineMessages({
               <PlayIcon aria-hidden="true" />
               {{ formatMessage(messages.playInstance) }}
             </template>
-            <template #play-anyway>
-              <PlayIcon aria-hidden="true" />
-              {{ formatMessage(messages.playAnyway) }}
-            </template>
             <template #open-instance>
               <EyeIcon aria-hidden="true" />
               {{ formatMessage(messages.viewInstance) }}

apps/app-frontend/src/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/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).forEach((address) =>
-    Object.keys(serverData).map((address) =>
     refreshServerData(serverData[address], protocolVersion, address),
-    ),
   )
 }
 
@@ -297,15 +311,24 @@ export async function refreshWorlds(instancePath: string): Promise<World[]> {
   return worlds ?? []
 }
 
-const FIRST_QUICK_PLAY_VERSION = '23w14a'
+export function hasServerQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
+  if (!gameVersions.length) {
+    return true
+  }
 
-export function hasQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
+  const versionIndex = gameVersions.findIndex((v) => v.version === currentVersion)
+  const targetIndex = gameVersions.findIndex((v) => v.version === 'a1.0.5_01')
+
+  return versionIndex === -1 || targetIndex === -1 || versionIndex <= targetIndex
+}
+
+export function hasWorldQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
   if (!gameVersions.length) {
     return false
   }
 
   const versionIndex = gameVersions.findIndex((v) => v.version === currentVersion)
-  const targetIndex = gameVersions.findIndex((v) => v.version === FIRST_QUICK_PLAY_VERSION)
+  const targetIndex = gameVersions.findIndex((v) => v.version === '23w14a')
 
   return versionIndex !== -1 && targetIndex !== -1 && versionIndex <= targetIndex
 }

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

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

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

@@ -67,7 +67,8 @@
         :key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
         :world="world"
         :highlighted="highlightedWorld === getWorldIdentifier(world)"
-        :supports-quick-play="supportsQuickPlay"
+        :supports-server-quick-play="supportsServerQuickPlay"
+        :supports-world-quick-play="supportsWorldQuickPlay"
         :current-protocol="protocolVersion"
         :playing-instance="playing"
         :playing-world="worldsMatch(world, worldPlaying)"
@@ -134,6 +135,7 @@ import {
 } from '@modrinth/ui'
 import { PlusIcon, SpinnerIcon, UpdatedIcon, SearchIcon, XIcon } from '@modrinth/assets'
 import {
+  type ProtocolVersion,
   type SingleplayerWorld,
   type World,
   type ServerWorld,
@@ -149,10 +151,11 @@ import {
   refreshWorld,
   sortWorlds,
   refreshServers,
-  hasQuickPlaySupport,
+  hasWorldQuickPlaySupport,
   refreshWorlds,
   handleDefaultProfileUpdateEvent,
   showWorldInFolder,
+  hasServerQuickPlaySupport,
 } from '@/helpers/worlds.ts'
 import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
 import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
@@ -210,7 +213,9 @@ const worldPlaying = ref<World>()
 const worlds = ref<World[]>([])
 const serverData = ref<Record<string, ServerData>>({})
 
-const protocolVersion = ref<number | null>(await get_profile_protocol_version(instance.value.path))
+const protocolVersion = ref<ProtocolVersion | null>(
+  await get_profile_protocol_version(instance.value.path),
+)
 
 const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
   if (e.profile_path_id !== instance.value.path) return
@@ -246,7 +251,7 @@ async function refreshAllWorlds() {
   worlds.value = await refreshWorlds(instance.value.path).finally(
     () => (refreshingAll.value = false),
   )
-  await refreshServers(worlds.value, serverData.value, protocolVersion.value)
+  refreshServers(worlds.value, serverData.value, protocolVersion.value)
 
   const hasNoWorlds = worlds.value.length === 0
 
@@ -352,8 +357,11 @@ function worldsMatch(world: World, other: World | undefined) {
 }
 
 const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
-const supportsQuickPlay = computed(() =>
+const supportsServerQuickPlay = computed(() =>
-  hasQuickPlaySupport(gameVersions.value, instance.value.game_version),
+  hasServerQuickPlaySupport(gameVersions.value, instance.value.game_version),
+)
+const supportsWorldQuickPlay = computed(() =>
+  hasWorldQuickPlaySupport(gameVersions.value, instance.value.game_version),
 )
 
 const filterOptions = computed(() => {

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

@@ -29,8 +29,8 @@ export const useInstall = defineStore('installStore', {
     setIncompatibilityWarningModal(ref) {
       this.incompatibilityWarningModal = ref
     },
-    showIncompatibilityWarningModal(instance, project, versions, onInstall) {
+    showIncompatibilityWarningModal(instance, project, versions, selected, onInstall) {
-      this.incompatibilityWarningModal.show(instance, project, versions, onInstall)
+      this.incompatibilityWarningModal.show(instance, project, versions, selected, onInstall)
     },
     setModInstallModal(ref) {
       this.modInstallModal = ref
@@ -133,7 +133,13 @@ export const install = async (
         callback(version.id)
       } else {
         const install = useInstall()
-        install.showIncompatibilityWarningModal(instance, project, projectVersions, callback)
+        install.showIncompatibilityWarningModal(
+          instance,
+          project,
+          projectVersions,
+          version,
+          callback,
+        )
       }
     } else {
       const versions = (await get_version_many(project.versions).catch(handleError)).sort(

apps/app-playground/src/main.rs

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

apps/app/Cargo.toml

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

apps/app/build.rs

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

apps/app/src/api/auth.rs

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

apps/app/src/api/mod.rs

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

apps/app/src/api/mr_auth.rs

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

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

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

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

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

apps/app/src/api/profile.rs

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

apps/app/src/api/worlds.rs

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

apps/app/tauri.conf.json

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

apps/daedalus_client/Dockerfile

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

apps/frontend/nuxt.config.ts

@@ -143,8 +143,13 @@ export default defineNuxtConfig({
         state.lastGenerated &&
         new Date(state.lastGenerated).getTime() + TTL > new Date().getTime() &&
         // ...but only if the API URL is the same
-        state.apiUrl === API_URL
+        state.apiUrl === API_URL &&
+        // ...and if no errors were caught during the last generation
+        (state.errors ?? []).length === 0
       ) {
+        console.log(
+          "Tags already recently generated. Delete apps/frontend/generated/state.json to force regeneration.",
+        );
         return;
       }
 

apps/frontend/package.json

@@ -59,10 +59,12 @@
     "markdown-it": "14.1.0",
     "pathe": "^1.1.2",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^4.4.1",
     "prettier": "^3.6.2",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
     "three": "^0.172.0",
+    "vue-confetti-explosion": "^1.0.2",
     "vue-multiselect": "3.0.0-alpha.2",
     "vue-typed-virtual-list": "^1.0.10",
     "vue3-ace-editor": "^2.2.4",

apps/frontend/src/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);
+const showSubscribeButton = useAsyncData(
-
+  async () => {
-async function checkSubscribed() {
     if (auth.value?.user) {
       try {
-      const { data } = await useBaseFetch("auth/email/subscribe", {
+        const { subscribed } = await useBaseFetch("auth/email/subscribe", {
           method: "GET",
         });
-      subscribed.value = data?.subscribed || false;
+        return !subscribed;
       } catch {
-      subscribed.value = false;
+        return true;
       }
+    } else {
+      return false;
     }
-}
+  },
-
+  { watch: [auth], server: false },
-watchEffect(() => {
+);
-  checkSubscribed();
-});
 
 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/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

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

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

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

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

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

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

@@ -1,13 +1,21 @@
 <template>
+  <template v-if="moderation">
+    <Chips v-model="reasonFilter" :items="reasons" />
+    <p v-if="reports.length === MAX_REPORTS" class="text-red">
+      There are at least {{ MAX_REPORTS }} open reports. This page is at its max reports and will
+      not show any more recent ones.
+    </p>
+    <p v-else-if="reasonFilter === 'All'">There are {{ filteredReports.length }} open reports.</p>
+    <p v-else>
+      There are {{ filteredReports.length }}/{{ reports.length }} open '{{ reasonFilter }}' reports.
+    </p>
+  </template>
   <ReportInfo
-    v-for="report in reports.filter(
+    v-for="report in filteredReports"
-      (x) =>
-        (moderation || x.reporterUser.id === auth.user.id) &&
-        (viewMode === 'open' ? x.open : !x.open),
-    )"
     :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/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/servers/ServerSidebar.vue

@@ -2,7 +2,10 @@
   <div class="static w-full grid-cols-1 md:relative md:flex">
     <div class="static h-full flex-col pb-4 md:flex md:pb-0 md:pr-4">
       <div class="z-10 flex select-none flex-col gap-2 rounded-2xl bg-bg-raised p-4 md:w-[16rem]">
-        <div v-for="link in navLinks" :key="link.label">
+        <div
+          v-for="link in navLinks.filter((x) => x.shown === undefined || x.shown)"
+          :key="link.label"
+        >
           <NuxtLink
             :to="link.href"
             class="flex items-center gap-2 rounded-xl p-2 hover:bg-button-bg"
@@ -40,7 +43,7 @@ import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 const emit = defineEmits(["reinstall"]);
 
 defineProps<{
-  navLinks: { label: string; href: string; icon: Component; external?: boolean }[];
+  navLinks: { label: string; href: string; icon: Component; external?: boolean; shown?: boolean }[];
   route: RouteLocationNormalized;
   server: ModrinthServer;
   backupInProgress?: BackupInProgressReason;

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/modules/general.ts

@@ -6,6 +6,7 @@ import { ServerModule } from "./base.ts";
 export class GeneralModule extends ServerModule implements ServerGeneral {
   server_id!: string;
   name!: string;
+  owner_id!: string;
   net!: { ip: string; port: number; domain: string };
   game!: string;
   backup_quota!: number;

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

@@ -147,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",
@@ -167,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/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',
@@ -981,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,
     {

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."
   },
@@ -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

@@ -689,7 +689,10 @@
                   },
                   {
                     id: 'moderation-checklist',
-                    action: () => (showModerationChecklist = true),
+                    action: () => {
+                      moderationStore.setSingleProject(project.id);
+                      showModerationChecklist = true;
+                    },
                     color: 'orange',
                     hoverOnly: true,
                     shown:
@@ -870,19 +873,6 @@
           @delete-version="deleteVersion"
         />
       </div>
-
-      <div class="normal-page__ultimate-sidebar">
-        <!-- Uncomment this to enable the old moderation checklist. -->
-        <!-- <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>
 
@@ -890,9 +880,8 @@
     v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
     class="moderation-checklist"
   >
-    <NewModerationChecklist
+    <ModerationChecklist
       :project="project"
-      :future-project-ids="futureProjectIds"
       :collapsed="collapsedModerationChecklist"
       @exit="showModerationChecklist = false"
       @toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
@@ -951,14 +940,7 @@ import {
   useRelativeTime,
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
-import {
+import { formatCategory, formatProjectType, renderString } from "@modrinth/utils";
-  formatCategory,
-  formatProjectType,
-  isRejected,
-  isStaff,
-  isUnderReview,
-  renderString,
-} from "@modrinth/utils";
 import dayjs from "dayjs";
 import { Tooltip } from "floating-vue";
 import { useLocalStorage } from "@vueuse/core";
@@ -976,11 +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 NewModerationChecklist from "~/components/ui/moderation/NewModerationChecklist.vue";
+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();
@@ -1568,12 +1552,6 @@ const showModerationChecklist = useLocalStorage(
 );
 const collapsedModerationChecklist = useLocalStorage("collapsed-moderation-checklist", false);
 
-const futureProjectIds = useLocalStorage("moderation-future-projects", []);
-
-watch(futureProjectIds, (newValue) => {
-  console.log("Future project IDs updated:", newValue);
-});
-
 watch(
   showModerationChecklist,
   (newValue) => {
@@ -1646,9 +1624,7 @@ const navLinks = computed(() => {
     {
       label: formatMessage(messages.moderationTab),
       href: `${projectUrl}/moderation`,
-      shown:
+      shown: !!currentMember.value,
-        !!currentMember.value &&
-        (isRejected(project.value) || isUnderReview(project.value) || isStaff(auth.value.user)),
     },
   ];
 });

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

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
+        project for review. For additional inquiries, please go to the
-        <a href="https://support.modrinth.com">Modrinth Support</a>.
+        <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"
@@ -201,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>
@@ -234,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;
@@ -304,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";
@@ -312,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 {
@@ -327,8 +377,7 @@ async function refundCharge() {
     await refreshCharges();
     refundModal.value.hide();
   } catch (err) {
-    data.$notify({
+    addNotification({
-      group: "main",
       title: "Error refunding",
       text: err.data?.description ?? err,
       type: "error",
@@ -337,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/auth/sign-in.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div v-if="subtleLauncherRedirectUri">
-    <template v-if="flow">
+    <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/moderation.vue

@@ -1,33 +1,84 @@
 <template>
-  <div class="normal-page">
+  <div
-    <div class="normal-page__sidebar">
+    class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
-      <aside class="universal-card">
+  >
     <h1>Moderation</h1>
-        <NavStack>
+    <NavTabs :links="moderationLinks" class="mb-4 hidden sm:flex" />
-          <NavStackItem link="/moderation" label="Overview">
+    <div class="mb-4 sm:hidden">
-            <ModrinthIcon aria-hidden="true" />
+      <Chips
-          </NavStackItem>
+        v-model="selectedChip"
-          <NavStackItem link="/moderation/review" label="Review projects">
+        :items="mobileNavOptions"
-            <ScaleIcon aria-hidden="true" />
+        :never-empty="true"
-          </NavStackItem>
+        @change="navigateToPage"
-          <NavStackItem link="/moderation/reports" label="Reports">
+      />
-            <ReportIcon aria-hidden="true" />
-          </NavStackItem>
-        </NavStack>
-      </aside>
     </div>
-    <div class="normal-page__content">
     <NuxtPage />
   </div>
-  </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import { ModrinthIcon, ScaleIcon, ReportIcon } from "@modrinth/assets";
+import { defineMessages, useVIntl } from "@vintl/vintl";
-import NavStack from "~/components/ui/NavStack.vue";
+import { Chips } from "@modrinth/ui";
-import NavStackItem from "~/components/ui/NavStackItem.vue";
+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>
+  <div class="flex flex-col gap-3">
-    <section class="universal-card">
+    <div class="flex flex-col justify-between gap-3 lg:flex-row">
-      <h2>Statistics</h2>
+      <div class="iconified-input flex-1 lg:max-w-md">
-      <div class="grid-display">
+        <SearchIcon aria-hidden="true" class="text-lg" />
-        <div class="grid-display__item">
+        <input
-          <div class="label">Projects</div>
+          v-model="query"
-          <div class="value">
+          class="h-[40px]"
-            {{ formatNumber(stats.projects, false) }}
+          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" />
+        <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 class="grid-display__item">
+
-          <div class="label">Versions</div>
+    <div v-if="totalPages > 1" class="flex justify-center lg:hidden">
-          <div class="value">
+      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-            {{ formatNumber(stats.versions, false) }}
+      <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 class="grid-display__item">
+
-          <div class="label">Files</div>
+    <div v-if="totalPages > 1" class="mt-4 flex justify-center">
-          <div class="value">
+      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-            {{ 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>
-    </section>
-  </div>
 </template>
-<script setup>
+<script setup lang="ts">
-import { formatNumber } from "@modrinth/utils";
+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({
+const { formatMessage } = useVIntl();
-  title: "Staff overview - Modrinth",
+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,304 +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];
-  const remainingProjectIds = projectsFiltered.value.slice(1).map((p) => p.id);
-
-  localStorage.setItem("moderation-future-projects", JSON.stringify(remainingProjectIds));
-
-  await router.push({
-    name: "type-id",
-    params: {
-      type: project.project_types[0],
-      id: project.slug ? project.slug : project.id,
-    },
-    state: {
-      showChecklist: true,
-    },
-  });
-}
-</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/servers/manage/[id]/options.vue

@@ -16,12 +16,15 @@ import {
   CardIcon,
   UserIcon,
   WrenchIcon,
+  ModrinthIcon,
 } from "@modrinth/assets";
+import { isAdmin as isUserAdmin, type User } from "@modrinth/utils";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
 
 const route = useRoute();
 const serverId = route.params.id as string;
+const auth = await useAuth();
 
 const props = defineProps<{
   server: ModrinthServer;
@@ -32,7 +35,11 @@ useHead({
   title: `Options - ${props.server.general?.name ?? "Server"} - Modrinth`,
 });
 
-const navLinks = [
+const ownerId = computed(() => props.server.general?.owner_id ?? "Ghost");
+const isOwner = computed(() => (auth.value?.user as User | null)?.id === ownerId.value);
+const isAdmin = computed(() => isUserAdmin(auth.value?.user));
+
+const navLinks = computed(() => [
   { icon: SettingsIcon, label: "General", href: `/servers/manage/${serverId}/options` },
   { icon: WrenchIcon, label: "Platform", href: `/servers/manage/${serverId}/options/loader` },
   { icon: TextQuoteIcon, label: "Startup", href: `/servers/manage/${serverId}/options/startup` },
@@ -48,7 +55,15 @@ const navLinks = [
     label: "Billing",
     href: `/settings/billing#server-${serverId}`,
     external: true,
+    shown: isOwner.value,
+  },
+  {
+    icon: ModrinthIcon,
+    label: "Admin Billing",
+    href: `/admin/billing/${ownerId.value}`,
+    external: true,
+    shown: isAdmin.value,
   },
   { icon: InfoIcon, label: "Info", href: `/servers/manage/${serverId}/options/info` },
-];
+]);
 </script>

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 invocation = ref(props.server.startup.invocation);
-const jdkVersion = ref("");
+const jdkVersion = ref(
-const jdkBuild = ref("");
+  jdkVersionMap.find((v) => v.value === props.server.startup.jdk_version)?.label,
-
-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 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 = () => {
+function resetToDefault() {
-  invocation.value = startupSettings.value?.original_invocation ?? "";
+  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"
+          v-bind="server"
-          :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"
         />
         <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"
+                v-bind="subscription.serverInfo"
-                :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"
               />
               <div v-else class="w-fit">
                 <p>

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

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

@@ -0,0 +1,14 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        UPDATE users\n        SET is_subscribed_to_newsletter = TRUE\n        WHERE id = $1\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Int8"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "c960b09ddc19530383f143c349c7e34bf813ddbfb88bf31b9863078bc48c8623"
+}

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

@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n        SELECT id FROM mods\n        WHERE status = $1\n        ORDER BY queued ASC\n        LIMIT $2;\n        ",
+  "query": "\n        SELECT id FROM mods\n        WHERE status = $1\n        ORDER BY queued ASC\n        OFFSET $3\n        LIMIT $2\n        ",
   "describe": {
     "columns": [
       {
@@ -12,6 +12,7 @@
     "parameters": {
       "Left": [
         "Text",
+        "Int8",
         "Int8"
       ]
     },
@@ -19,5 +20,5 @@
       false
     ]
   },
-  "hash": "3baabc9f08401801fa290866888c540746fc50c1d79911f08f3322b605ce5c30"
+  "hash": "ccb0315ff52ea4402f53508334a7288fc9f8e77ffd7bce665441ff682384cbf9"
 }

apps/labrinth/Dockerfile

@@ -1,8 +1,21 @@
+# syntax=docker/dockerfile:1
+
 FROM rust:1.88.0 AS build
 
 WORKDIR /usr/src/labrinth
 COPY . .
-RUN SQLX_OFFLINE=true cargo build --release --package labrinth
+RUN --mount=type=cache,target=/usr/src/labrinth/target \
+  --mount=type=cache,target=/usr/local/cargo/git/db \
+  --mount=type=cache,target=/usr/local/cargo/registry \
+  SQLX_OFFLINE=true cargo build --release --package labrinth
+
+FROM build AS artifacts
+
+RUN --mount=type=cache,target=/usr/src/labrinth/target \
+  mkdir /labrinth \
+  && cp /usr/src/labrinth/target/release/labrinth /labrinth/labrinth \
+  && cp -r /usr/src/labrinth/apps/labrinth/migrations /labrinth \
+  && cp -r /usr/src/labrinth/apps/labrinth/assets /labrinth
 
 FROM debian:bookworm-slim
 
@@ -14,10 +27,8 @@ RUN apt-get update \
   && apt-get install -y --no-install-recommends ca-certificates dumb-init curl \
   && rm -rf /var/lib/apt/lists/*
 
-COPY --from=build /usr/src/labrinth/target/release/labrinth /labrinth/labrinth
+COPY --from=artifacts /labrinth /labrinth
-COPY --from=build /usr/src/labrinth/apps/labrinth/migrations/* /labrinth/migrations/
-COPY --from=build /usr/src/labrinth/apps/labrinth/assets /labrinth/assets
-WORKDIR /labrinth
 
+WORKDIR /labrinth
 ENTRYPOINT ["dumb-init", "--"]
 CMD ["/labrinth/labrinth"]

apps/labrinth/migrations/20250725230041_reports-closed-status-index.sql

@@ -0,0 +1 @@
+CREATE INDEX reports_closed ON reports (closed);

apps/labrinth/migrations/20250727184120_user-newsletter-subscription-column.sql

@@ -0,0 +1 @@
+ALTER TABLE users ADD COLUMN is_subscribed_to_newsletter BOOLEAN NOT NULL DEFAULT FALSE;

apps/labrinth/src/auth/checks.rs

@@ -315,9 +315,13 @@ pub async fn filter_enlisted_version_ids(
 pub async fn is_visible_collection(
     collection_data: &DBCollection,
     user_option: &Option<User>,
+    hide_unlisted: bool,
 ) -> Result<bool, ApiError> {
-    let mut authorized = !collection_data.status.is_hidden()
+    let mut authorized = (if hide_unlisted {
-        && !collection_data.projects.is_empty();
+        collection_data.status.is_searchable()
+    } else {
+        !collection_data.status.is_hidden()
+    }) && !collection_data.projects.is_empty();
     if let Some(user) = &user_option {
         if !authorized
             && (user.role.is_mod() || user.id == collection_data.user_id.into())
@@ -331,12 +335,17 @@ pub async fn is_visible_collection(
 pub async fn filter_visible_collections(
     collections: Vec<DBCollection>,
     user_option: &Option<User>,
+    hide_unlisted: bool,
 ) -> Result<Vec<crate::models::collections::Collection>, ApiError> {
     let mut return_collections = Vec::new();
     let mut check_collections = Vec::new();
 
     for collection in collections {
-        if (!collection.status.is_hidden() && !collection.projects.is_empty())
+        if ((if hide_unlisted {
+            collection.status.is_searchable()
+        } else {
+            !collection.status.is_hidden()
+        }) && !collection.projects.is_empty())
             || user_option.as_ref().is_some_and(|x| x.role.is_mod())
         {
             return_collections.push(collection.into());

apps/labrinth/src/auth/validate.rs

@@ -1,6 +1,6 @@
 use super::AuthProvider;
 use crate::auth::AuthenticationError;
-use crate::database::models::user_item;
+use crate::database::models::{DBUser, user_item};
 use crate::database::redis::RedisPool;
 use crate::models::pats::Scopes;
 use crate::models::users::User;
@@ -44,17 +44,16 @@ where
     Ok(Some((scopes, User::from_full(db_user))))
 }
 
-pub async fn get_user_from_headers<'a, E>(
+pub async fn get_full_user_from_headers<'a, E>(
     req: &HttpRequest,
     executor: E,
     redis: &RedisPool,
     session_queue: &AuthQueue,
     required_scopes: Scopes,
-) -> Result<(Scopes, User), AuthenticationError>
+) -> Result<(Scopes, DBUser), AuthenticationError>
 where
     E: sqlx::Executor<'a, Database = sqlx::Postgres> + Copy,
 {
-    // Fetch DB user record and minos user from headers
     let (scopes, db_user) = get_user_record_from_bearer_token(
         req,
         None,
@@ -65,13 +64,33 @@ where
     .await?
     .ok_or_else(|| AuthenticationError::InvalidCredentials)?;
 
-    let user = User::from_full(db_user);
-
     if !scopes.contains(required_scopes) {
         return Err(AuthenticationError::InvalidCredentials);
     }
 
-    Ok((scopes, user))
+    Ok((scopes, db_user))
+}
+
+pub async fn get_user_from_headers<'a, E>(
+    req: &HttpRequest,
+    executor: E,
+    redis: &RedisPool,
+    session_queue: &AuthQueue,
+    required_scopes: Scopes,
+) -> Result<(Scopes, User), AuthenticationError>
+where
+    E: sqlx::Executor<'a, Database = sqlx::Postgres> + Copy,
+{
+    let (scopes, db_user) = get_full_user_from_headers(
+        req,
+        executor,
+        redis,
+        session_queue,
+        required_scopes,
+    )
+    .await?;
+
+    Ok((scopes, User::from_full(db_user)))
 }
 
 pub async fn get_user_record_from_bearer_token<'a, 'b, E>(

apps/labrinth/src/database/models/user_item.rs

@@ -49,6 +49,8 @@ pub struct DBUser {
     pub badges: Badges,
 
     pub allow_friend_requests: bool,
+
+    pub is_subscribed_to_newsletter: bool,
 }
 
 impl DBUser {
@@ -63,13 +65,13 @@ impl DBUser {
                 avatar_url, raw_avatar_url, bio, created,
                 github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,
                 email_verified, password, paypal_id, paypal_country, paypal_email,
-                venmo_handle, stripe_customer_id, allow_friend_requests
+                venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter
             )
             VALUES (
                 $1, $2, $3, $4, $5,
                 $6, $7,
                 $8, $9, $10, $11, $12, $13,
-                $14, $15, $16, $17, $18, $19, $20, $21
+                $14, $15, $16, $17, $18, $19, $20, $21, $22
             )
             ",
             self.id as DBUserId,
@@ -93,6 +95,7 @@ impl DBUser {
             self.venmo_handle,
             self.stripe_customer_id,
             self.allow_friend_requests,
+            self.is_subscribed_to_newsletter,
         )
         .execute(&mut **transaction)
         .await?;
@@ -178,7 +181,7 @@ impl DBUser {
                         created, role, badges,
                         github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,
                         email_verified, password, totp_secret, paypal_id, paypal_country, paypal_email,
-                        venmo_handle, stripe_customer_id, allow_friend_requests
+                        venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter
                     FROM users
                     WHERE id = ANY($1) OR LOWER(username) = ANY($2)
                     ",
@@ -212,6 +215,7 @@ impl DBUser {
                             stripe_customer_id: u.stripe_customer_id,
                             totp_secret: u.totp_secret,
                             allow_friend_requests: u.allow_friend_requests,
+                            is_subscribed_to_newsletter: u.is_subscribed_to_newsletter,
                         };
 
                         acc.insert(u.id, (Some(u.username), user));

apps/labrinth/src/models/v3/collections.rs

@@ -92,7 +92,7 @@ impl CollectionStatus {
         }
     }
 
-    // Project pages + info cannot be viewed
+    // Collection pages + info cannot be viewed
     pub fn is_hidden(&self) -> bool {
         match self {
             CollectionStatus::Rejected => true,
@@ -103,6 +103,11 @@ impl CollectionStatus {
         }
     }
 
+    // Collection can be displayed in on user page
+    pub fn is_searchable(&self) -> bool {
+        matches!(self, CollectionStatus::Listed)
+    }
+
     pub fn is_approved(&self) -> bool {
         match self {
             CollectionStatus::Listed => true,

apps/labrinth/src/routes/internal/billing.rs

@@ -276,7 +276,11 @@ pub async fn refund_charge(
             subscription_interval: charge.subscription_interval,
             payment_platform: charge.payment_platform,
             payment_platform_id: id,
-            parent_charge_id: Some(charge.id),
+            parent_charge_id: if refund_amount != 0 {
+                Some(charge.id)
+            } else {
+                None
+            },
             net,
         }
         .upsert(&mut transaction)

apps/labrinth/src/routes/internal/flows.rs

@@ -1,5 +1,7 @@
 use crate::auth::email::send_email;
-use crate::auth::validate::get_user_record_from_bearer_token;
+use crate::auth::validate::{
+    get_full_user_from_headers, get_user_record_from_bearer_token,
+};
 use crate::auth::{AuthProvider, AuthenticationError, get_user_from_headers};
 use crate::database::models::DBUser;
 use crate::database::models::flow_item::DBFlow;
@@ -232,6 +234,7 @@ impl TempUser {
                 role: Role::Developer.to_string(),
                 badges: Badges::default(),
                 allow_friend_requests: true,
+                is_subscribed_to_newsletter: false,
             }
             .insert(transaction)
             .await?;
@@ -1291,37 +1294,6 @@ pub async fn delete_auth_provider(
     Ok(HttpResponse::NoContent().finish())
 }
 
-pub async fn sign_up_sendy(email: &str) -> Result<(), AuthenticationError> {
-    let url = dotenvy::var("SENDY_URL")?;
-    let id = dotenvy::var("SENDY_LIST_ID")?;
-    let api_key = dotenvy::var("SENDY_API_KEY")?;
-    let site_url = dotenvy::var("SITE_URL")?;
-
-    if url.is_empty() || url == "none" {
-        tracing::info!("Sendy URL not set, skipping signup");
-        return Ok(());
-    }
-
-    let mut form = HashMap::new();
-
-    form.insert("api_key", &*api_key);
-    form.insert("email", email);
-    form.insert("list", &*id);
-    form.insert("referrer", &*site_url);
-
-    let client = reqwest::Client::new();
-    client
-        .post(format!("{url}/subscribe"))
-        .form(&form)
-        .send()
-        .await?
-        .error_for_status()?
-        .text()
-        .await?;
-
-    Ok(())
-}
-
 pub async fn check_sendy_subscription(
     email: &str,
 ) -> Result<bool, AuthenticationError> {
@@ -1456,6 +1428,9 @@ pub async fn create_account_with_password(
         role: Role::Developer.to_string(),
         badges: Badges::default(),
         allow_friend_requests: true,
+        is_subscribed_to_newsletter: new_account
+            .sign_up_newsletter
+            .unwrap_or(false),
     }
     .insert(&mut transaction)
     .await?;
@@ -1476,10 +1451,6 @@ pub async fn create_account_with_password(
         &format!("Welcome to Modrinth, {}!", new_account.username),
     )?;
 
-    if new_account.sign_up_newsletter.unwrap_or(false) {
-        sign_up_sendy(&new_account.email).await?;
-    }
-
     transaction.commit().await?;
 
     Ok(HttpResponse::Ok().json(res))
@@ -2420,15 +2391,24 @@ pub async fn subscribe_newsletter(
     .await?
     .1;
 
-    if let Some(email) = user.email {
+    sqlx::query!(
-        sign_up_sendy(&email).await?;
+        "
+        UPDATE users
+        SET is_subscribed_to_newsletter = TRUE
+        WHERE id = $1
+        ",
+        user.id.0 as i64,
+    )
+    .execute(&**pool)
+    .await?;
+
+    crate::database::models::DBUser::clear_caches(
+        &[(user.id.into(), None)],
+        &redis,
+    )
+    .await?;
 
     Ok(HttpResponse::NoContent().finish())
-    } else {
-        Err(ApiError::InvalidInput(
-            "User does not have an email.".to_string(),
-        ))
-    }
 }
 
 #[get("email/subscribe")]
@@ -2438,7 +2418,7 @@ pub async fn get_newsletter_subscription_status(
     redis: Data<RedisPool>,
     session_queue: Data<AuthQueue>,
 ) -> Result<HttpResponse, ApiError> {
-    let user = get_user_from_headers(
+    let user = get_full_user_from_headers(
         &req,
         &**pool,
         &redis,
@@ -2448,16 +2428,16 @@ pub async fn get_newsletter_subscription_status(
     .await?
     .1;
 
-    if let Some(email) = user.email {
+    let is_subscribed = user.is_subscribed_to_newsletter
-        let is_subscribed = check_sendy_subscription(&email).await?;
+        || if let Some(email) = user.email {
+            check_sendy_subscription(&email).await?
+        } else {
+            false
+        };
+
     Ok(HttpResponse::Ok().json(serde_json::json!({
         "subscribed": is_subscribed
     })))
-    } else {
-        Ok(HttpResponse::Ok().json(serde_json::json!({
-            "subscribed": false
-        })))
-    }
 }
 
 fn send_email_verify(

apps/labrinth/src/routes/internal/moderation.rs

@@ -18,12 +18,14 @@ pub fn config(cfg: &mut web::ServiceConfig) {
 }
 
 #[derive(Deserialize)]
-pub struct ResultCount {
+pub struct ProjectsRequestOptions {
     #[serde(default = "default_count")]
-    pub count: i16,
+    pub count: u16,
+    #[serde(default)]
+    pub offset: u32,
 }
 
-fn default_count() -> i16 {
+fn default_count() -> u16 {
     100
 }
 
@@ -31,7 +33,7 @@ pub async fn get_projects(
     req: HttpRequest,
     pool: web::Data<PgPool>,
     redis: web::Data<RedisPool>,
-    count: web::Query<ResultCount>,
+    request_opts: web::Query<ProjectsRequestOptions>,
     session_queue: web::Data<AuthQueue>,
 ) -> Result<HttpResponse, ApiError> {
     check_is_moderator_from_headers(
@@ -50,10 +52,12 @@ pub async fn get_projects(
         SELECT id FROM mods
         WHERE status = $1
         ORDER BY queued ASC
-        LIMIT $2;
+        OFFSET $3
+        LIMIT $2
         ",
         ProjectStatus::Processing.as_str(),
-        count.count as i64
+        request_opts.count as i64,
+        request_opts.offset as i64
     )
     .fetch(&**pool)
     .map_ok(|m| database::models::DBProjectId(m.id))

apps/labrinth/src/routes/v2/moderation.rs

@@ -15,10 +15,10 @@ pub fn config(cfg: &mut web::ServiceConfig) {
 #[derive(Deserialize)]
 pub struct ResultCount {
     #[serde(default = "default_count")]
-    pub count: i16,
+    pub count: u16,
 }
 
-fn default_count() -> i16 {
+fn default_count() -> u16 {
     100
 }
 
@@ -34,7 +34,10 @@ pub async fn get_projects(
         req,
         pool.clone(),
         redis.clone(),
-        web::Query(internal::moderation::ResultCount { count: count.count }),
+        web::Query(internal::moderation::ProjectsRequestOptions {
+            count: count.count,
+            offset: 0,
+        }),
         session_queue,
     )
     .await

apps/labrinth/src/routes/v2/reports.rs

@@ -43,12 +43,12 @@ pub async fn report_create(
 #[derive(Deserialize)]
 pub struct ReportsRequestOptions {
     #[serde(default = "default_count")]
-    count: i16,
+    count: u16,
     #[serde(default = "default_all")]
     all: bool,
 }
 
-fn default_count() -> i16 {
+fn default_count() -> u16 {
     100
 }
 fn default_all() -> bool {
@@ -60,7 +60,7 @@ pub async fn reports(
     req: HttpRequest,
     pool: web::Data<PgPool>,
     redis: web::Data<RedisPool>,
-    count: web::Query<ReportsRequestOptions>,
+    request_opts: web::Query<ReportsRequestOptions>,
     session_queue: web::Data<AuthQueue>,
 ) -> Result<HttpResponse, ApiError> {
     let response = v3::reports::reports(
@@ -68,8 +68,9 @@ pub async fn reports(
         pool,
         redis,
         web::Query(v3::reports::ReportsRequestOptions {
-            count: count.count,
+            count: request_opts.count,
-            all: count.all,
+            offset: 0,
+            all: request_opts.all,
         }),
         session_queue,
     )

apps/labrinth/src/routes/v3/collections.rs

@@ -163,7 +163,8 @@ pub async fn collections_get(
     .ok();
 
     let collections =
-        filter_visible_collections(collections_data, &user_option).await?;
+        filter_visible_collections(collections_data, &user_option, false)
+            .await?;
 
     Ok(HttpResponse::Ok().json(collections))
 }
@@ -192,7 +193,7 @@ pub async fn collection_get(
     .ok();
 
     if let Some(data) = collection_data {
-        if is_visible_collection(&data, &user_option).await? {
+        if is_visible_collection(&data, &user_option, false).await? {
             return Ok(HttpResponse::Ok().json(Collection::from(data)));
         }
     }

apps/labrinth/src/routes/v3/reports.rs

@@ -222,12 +222,14 @@ pub async fn report_create(
 #[derive(Deserialize)]
 pub struct ReportsRequestOptions {
     #[serde(default = "default_count")]
-    pub count: i16,
+    pub count: u16,
+    #[serde(default)]
+    pub offset: u32,
     #[serde(default = "default_all")]
     pub all: bool,
 }
 
-fn default_count() -> i16 {
+fn default_count() -> u16 {
     100
 }
 fn default_all() -> bool {
@@ -238,7 +240,7 @@ pub async fn reports(
     req: HttpRequest,
     pool: web::Data<PgPool>,
     redis: web::Data<RedisPool>,
-    count: web::Query<ReportsRequestOptions>,
+    request_opts: web::Query<ReportsRequestOptions>,
     session_queue: web::Data<AuthQueue>,
 ) -> Result<HttpResponse, ApiError> {
     let user = get_user_from_headers(
@@ -253,15 +255,17 @@ pub async fn reports(
 
     use futures::stream::TryStreamExt;
 
-    let report_ids = if user.role.is_mod() && count.all {
+    let report_ids = if user.role.is_mod() && request_opts.all {
         sqlx::query!(
             "
             SELECT id FROM reports
             WHERE closed = FALSE
             ORDER BY created ASC
-            LIMIT $1;
+            OFFSET $2
+            LIMIT $1
             ",
-            count.count as i64
+            request_opts.count as i64,
+            request_opts.offset as i64
         )
         .fetch(&**pool)
         .map_ok(|m| crate::database::models::ids::DBReportId(m.id))
@@ -273,10 +277,12 @@ pub async fn reports(
             SELECT id FROM reports
             WHERE closed = FALSE AND reporter = $1
             ORDER BY created ASC
-            LIMIT $2;
+            OFFSET $3
+            LIMIT $2
             ",
             user.id.0 as i64,
-            count.count as i64
+            request_opts.count as i64,
+            request_opts.offset as i64
         )
         .fetch(&**pool)
         .map_ok(|m| crate::database::models::ids::DBReportId(m.id))

apps/labrinth/src/routes/v3/users.rs

@@ -1,14 +1,14 @@
 use std::{collections::HashMap, sync::Arc};
 
 use super::{ApiError, oauth_clients::get_user_clients};
-use crate::file_hosting::FileHostPublicity;
-use crate::util::img::delete_old_images;
 use crate::{
-    auth::{filter_visible_projects, get_user_from_headers},
+    auth::{
+        filter_visible_collections, filter_visible_projects,
+        get_user_from_headers,
+    },
     database::{models::DBUser, redis::RedisPool},
-    file_hosting::FileHost,
+    file_hosting::{FileHost, FileHostPublicity},
     models::{
-        collections::{Collection, CollectionStatus},
         notifications::Notification,
         pats::Scopes,
         projects::Project,
@@ -16,7 +16,7 @@ use crate::{
     },
     queue::session::AuthQueue,
     util::{
-        routes::read_limited_from_payload,
+        img::delete_old_images, routes::read_limited_from_payload,
         validate::validation_errors_to_string,
     },
 };
@@ -244,27 +244,19 @@ pub async fn collections_list(
     let id_option = DBUser::get(&info.into_inner().0, &**pool, &redis).await?;
 
     if let Some(id) = id_option.map(|x| x.id) {
-        let user_id: UserId = id.into();
+        let collection_data = DBUser::get_collections(id, &**pool).await?;
-
-        let can_view_private =
-            user.is_some_and(|y| y.role.is_mod() || y.id == user_id);
-
-        let project_data = DBUser::get_collections(id, &**pool).await?;
 
         let response: Vec<_> = crate::database::models::DBCollection::get_many(
-            &project_data,
+            &collection_data,
             &**pool,
             &redis,
         )
-        .await?
+        .await?;
-        .into_iter()
-        .filter(|x| {
-            can_view_private || matches!(x.status, CollectionStatus::Listed)
-        })
-        .map(Collection::from)
-        .collect();
 
-        Ok(HttpResponse::Ok().json(response))
+        let collections =
+            filter_visible_collections(response, &user, true).await?;
+
+        Ok(HttpResponse::Ok().json(collections))
     } else {
         Err(ApiError::NotFound)
     }

packages/app-lib/Cargo.toml

@@ -27,6 +27,7 @@ hashlink.workspace = true
 png.workspace = true
 bytemuck.workspace = true
 rgb.workspace = true
+phf.workspace = true
 
 chrono = { workspace = true, features = ["serde"] }
 daedalus.workspace = true

packages/app-lib/build.rs

@@ -53,6 +53,7 @@ fn build_java_jars() {
         .arg("build")
         .arg("--no-daemon")
         .arg("--console=rich")
+        .arg("--info")
         .current_dir(dunce::canonicalize("java").unwrap())
         .status()
         .expect("Failed to wait on Gradle build");

packages/app-lib/java/build.gradle.kts

@@ -1,6 +1,7 @@
 plugins {
     java
     id("com.diffplug.spotless") version "7.0.4"
+    id("com.gradleup.shadow") version "9.0.0-rc2"
 }
 
 repositories {
@@ -8,6 +9,9 @@ repositories {
 }
 
 dependencies {
+    implementation("org.ow2.asm:asm:9.8")
+    implementation("org.ow2.asm:asm-tree:9.8")
+
     testImplementation(libs.junit.jupiter)
     testRuntimeOnly("org.junit.platform:junit-platform-launcher")
 }
@@ -31,7 +35,17 @@ spotless {
 }
 
 tasks.jar {
+    enabled = false
+}
+
+tasks.shadowJar {
     archiveFileName = "theseus.jar"
+    manifest {
+        attributes["Premain-Class"] = "com.modrinth.theseus.agent.TheseusAgent"
+    }
+
+    enableRelocation = true
+    relocationPrefix = "com.modrinth.theseus.shadow"
 }
 
 tasks.named<Test>("test") {

packages/app-lib/java/src/main/java/com/modrinth/theseus/agent/InsnPattern.java

@@ -0,0 +1,45 @@
+package com.modrinth.theseus.agent;
+
+import java.util.ListIterator;
+import java.util.function.Predicate;
+import org.objectweb.asm.Type;
+import org.objectweb.asm.tree.AbstractInsnNode;
+import org.objectweb.asm.tree.FieldInsnNode;
+
+public interface InsnPattern extends Predicate<AbstractInsnNode> {
+    /**
+     * Advances past the first match of all instructions in the pattern.
+     * @return {@code true} if the pattern was found, {@code false} if not
+     */
+    static boolean findAndSkip(ListIterator<AbstractInsnNode> iterator, InsnPattern... pattern) {
+        if (pattern.length == 0) {
+            return true;
+        }
+        int patternIndex = 0;
+        while (iterator.hasNext()) {
+            final AbstractInsnNode insn = iterator.next();
+            if (insn.getOpcode() == -1) continue;
+            if (pattern[patternIndex].test(insn) && ++patternIndex == pattern.length) {
+                return true;
+            } else {
+                patternIndex = 0;
+            }
+        }
+        return false;
+    }
+
+    static InsnPattern opcode(int opcode) {
+        return insn -> insn.getOpcode() == opcode;
+    }
+
+    static InsnPattern field(int opcode, Type fieldType) {
+        final String typeDescriptor = fieldType.getDescriptor();
+        return insn -> {
+            if (insn.getOpcode() != opcode || !(insn instanceof FieldInsnNode)) {
+                return false;
+            }
+            final FieldInsnNode fieldInsn = (FieldInsnNode) insn;
+            return typeDescriptor.equals(fieldInsn.desc);
+        };
+    }
+}

packages/app-lib/java/src/main/java/com/modrinth/theseus/agent/QuickPlayServerVersion.java

@@ -0,0 +1,12 @@
+package com.modrinth.theseus.agent;
+
+// Must be kept up-to-date with quick_play_version.rs
+public enum QuickPlayServerVersion {
+    BUILTIN,
+    BUILTIN_LEGACY,
+    INJECTED,
+    UNSUPPORTED;
+
+    public static final QuickPlayServerVersion CURRENT =
+            valueOf(System.getProperty("modrinth.internal.quickPlay.serverVersion"));
+}