Add --color to intl:extract verification

.cargo/config.toml

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

.github/workflows/daedalus-docker.yml

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

.github/workflows/labrinth-docker.yml

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

.github/workflows/theseus-build.yml

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

.github/workflows/turbo-ci.yml

@@ -52,7 +52,7 @@ jobs:
       # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
       # back to a cached cargo install
       - name: 🧰 Setup cargo-sqlx
-        uses: taiki-e/cache-cargo-install-action@v2
+        uses: AlexTMjugador/cache-cargo-install-action@feat/features-support
         with:
           tool: sqlx-cli
           locked: false
@@ -74,10 +74,6 @@ jobs:
           cp .env.local .env
           sqlx database setup
 
-      - name: ⚙️ Set app environment
-        working-directory: packages/app-lib
-        run: cp .env.staging .env
-
       - name: 🔍 Lint and test
         run: pnpm run ci
 

.idea/code.iml

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

Cargo.lock

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

Cargo.toml

@@ -67,7 +67,6 @@ 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",
@@ -99,7 +98,6 @@ notify = { version = "8.0.0", default-features = false }
 notify-debouncer-mini = { version = "0.6.0", default-features = false }
 p256 = "0.13.2"
 paste = "1.0.15"
-phf = { version = "0.12.1", features = ["macros"] }
 png = "0.17.16"
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"

apps/app-frontend/package.json

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

apps/app-frontend/src/App.vue

@@ -61,10 +61,9 @@ 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 { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
+import { get as getCreds, login, logout } from '@/helpers/mr_auth.js'
 import { get_user } from '@/helpers/cache.js'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
-import 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'
@@ -264,8 +263,6 @@ const incompatibilityWarningModal = ref()
 
 const credentials = ref()
 
-const modrinthLoginFlowWaitModal = ref()
-
 async function fetchCredentials() {
   const creds = await getCreds().catch(handleError)
   if (creds && creds.user_id) {
@@ -275,24 +272,8 @@ async function fetchCredentials() {
 }
 
 async function signIn() {
-  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()
-  }
+  await login().catch(handleError)
+  await fetchCredentials()
 }
 
 async function logOut() {
@@ -421,9 +402,6 @@ function handleAuxClick(e) {
     <Suspense>
       <AppSettingsModal ref="settingsModal" />
     </Suspense>
-    <Suspense>
-      <AuthGrantFlowWaitModal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
-    </Suspense>
     <Suspense>
       <InstanceCreationModal ref="installationModal" />
     </Suspense>

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

@@ -305,16 +305,12 @@ 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()),
-      ),
+      value
+        .filter((item) => item.supported_project_types.includes('modpack'))
+        .map((item) => item.name.toLowerCase()),
     )
-    .catch((err) => {
-      handleError(err)
-      return ref([])
-    }),
+    .then(ref)
+    .catch(handleError),
 ])
 loaders.value.unshift('vanilla')
 

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  type ProtocolVersion,
   type ServerWorld,
   type ServerData,
   type WorldWithProfile,
@@ -34,7 +33,7 @@ const theme = useTheming()
 
 const jumpBackInItems = ref<JumpBackInItem[]>([])
 const serverData = ref<Record<string, ServerData>>({})
-const protocolVersions = ref<Record<string, ProtocolVersion | null>>({})
+const protocolVersions = ref<Record<string, number | null>>({})
 
 const MIN_JUMP_BACK_IN = 3
 const MAX_JUMP_BACK_IN = 6
@@ -122,8 +121,11 @@ async function populateJumpBackIn() {
       }
     })
 
-    servers.forEach(({ instancePath, address }) =>
-      refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
+    // fetch each server's data
+    Promise.all(
+      servers.map(({ instancePath, address }) =>
+        refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
+      ),
     )
   }
 
@@ -148,8 +150,8 @@ async function populateJumpBackIn() {
     .slice(0, MAX_JUMP_BACK_IN)
 }
 
-function refreshServer(address: string, instancePath: string) {
-  refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
+async function refreshServer(address: string, instancePath: string) {
+  await refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
 }
 
 async function joinWorld(world: WorldWithProfile) {

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

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

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

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

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

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

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

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

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

@@ -67,8 +67,7 @@
         :key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
         :world="world"
         :highlighted="highlightedWorld === getWorldIdentifier(world)"
-        :supports-server-quick-play="supportsServerQuickPlay"
-        :supports-world-quick-play="supportsWorldQuickPlay"
+        :supports-quick-play="supportsQuickPlay"
         :current-protocol="protocolVersion"
         :playing-instance="playing"
         :playing-world="worldsMatch(world, worldPlaying)"
@@ -135,7 +134,6 @@ import {
 } from '@modrinth/ui'
 import { PlusIcon, SpinnerIcon, UpdatedIcon, SearchIcon, XIcon } from '@modrinth/assets'
 import {
-  type ProtocolVersion,
   type SingleplayerWorld,
   type World,
   type ServerWorld,
@@ -151,11 +149,10 @@ import {
   refreshWorld,
   sortWorlds,
   refreshServers,
-  hasWorldQuickPlaySupport,
+  hasQuickPlaySupport,
   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'
@@ -213,9 +210,7 @@ const worldPlaying = ref<World>()
 const worlds = ref<World[]>([])
 const serverData = ref<Record<string, ServerData>>({})
 
-const protocolVersion = ref<ProtocolVersion | null>(
-  await get_profile_protocol_version(instance.value.path),
-)
+const protocolVersion = ref<number | 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
@@ -251,7 +246,7 @@ async function refreshAllWorlds() {
   worlds.value = await refreshWorlds(instance.value.path).finally(
     () => (refreshingAll.value = false),
   )
-  refreshServers(worlds.value, serverData.value, protocolVersion.value)
+  await refreshServers(worlds.value, serverData.value, protocolVersion.value)
 
   const hasNoWorlds = worlds.value.length === 0
 
@@ -357,11 +352,8 @@ function worldsMatch(world: World, other: World | undefined) {
 }
 
 const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
-const supportsServerQuickPlay = computed(() =>
-  hasServerQuickPlaySupport(gameVersions.value, instance.value.game_version),
-)
-const supportsWorldQuickPlay = computed(() =>
-  hasWorldQuickPlaySupport(gameVersions.value, instance.value.game_version),
+const supportsQuickPlay = computed(() =>
+  hasQuickPlaySupport(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, selected, onInstall) {
-      this.incompatibilityWarningModal.show(instance, project, versions, selected, onInstall)
+    showIncompatibilityWarningModal(instance, project, versions, onInstall) {
+      this.incompatibilityWarningModal.show(instance, project, versions, onInstall)
     },
     setModInstallModal(ref) {
       this.modInstallModal = ref
@@ -133,13 +133,7 @@ export const install = async (
         callback(version.id)
       } else {
         const install = useInstall()
-        install.showIncompatibilityWarningModal(
-          instance,
-          project,
-          projectVersions,
-          version,
-          callback,
-        )
+        install.showIncompatibilityWarningModal(instance, project, projectVersions, 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.auth_request_uri.as_str());
+    println!("Open URL {} in a browser", login.redirect_uri.as_str());
 
     println!("Please enter URL code: ");
     let mut input = String::new();

apps/app/Cargo.toml

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

apps/app/build.rs

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

apps/app/src/api/auth.rs

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

apps/app/src/api/mod.rs

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

apps/app/src/api/mr_auth.rs

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

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

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

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

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

apps/app/src/api/profile.rs

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

apps/app/src/api/worlds.rs

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

apps/app/tauri.conf.json

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

apps/daedalus_client/Dockerfile

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

apps/frontend/nuxt.config.ts

@@ -34,7 +34,7 @@ const enabledLocales: string[] = [];
 /**
  * Overrides for the categories of the certain locales.
  */
-const localesCategoriesOverrides: Partial<Record<string, "fun" | "experimental">> = {
+const localesCategoriesOverrides: Partial = {
   "en-x-pirate": "fun",
   "en-x-updown": "fun",
   "en-x-lolcat": "fun",
@@ -143,13 +143,8 @@ 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 &&
-        // ...and if no errors were caught during the last generation
-        (state.errors ?? []).length === 0
+        state.apiUrl === API_URL
       ) {
-        console.log(
-          "Tags already recently generated. Delete apps/frontend/generated/state.json to force regeneration.",
-        );
         return;
       }
 
@@ -265,21 +260,28 @@ export default defineNuxtConfig({
         const omorphiaLocales: string[] = [];
         const omorphiaLocaleSets = new Map<string, { files: { from: string }[] }>();
 
-        for await (const localeDir of globIterate("node_modules/@modrinth/ui/src/locales/*", {
-          posix: true,
-        })) {
-          const tag = basename(localeDir);
-          omorphiaLocales.push(tag);
+        const externalLocales = [
+          "node_modules/@modrinth/ui/src/locales/en-US",
+          "node_modules/@modrinth/moderation/locales/en-US",
+        ];
 
-          const localeFiles: { from: string; format?: string }[] = [];
+        for (const localePath of externalLocales) {
+          for await (const localeDir of globIterate(localePath, {
+            posix: true,
+          })) {
+            const tag = basename(localeDir);
+            omorphiaLocales.push(tag);
 
-          omorphiaLocaleSets.set(tag, { files: localeFiles });
+            const localeFiles: { from: string; format?: string }[] = [];
 
-          for await (const localeFile of globIterate(`${localeDir}/*`, { posix: true })) {
-            localeFiles.push({
-              from: pathToFileURL(localeFile).toString(),
-              format: "default",
-            });
+            omorphiaLocaleSets.set(tag, { files: localeFiles });
+
+            for await (const localeFile of globIterate(`${localeDir}/*`, { posix: true })) {
+              localeFiles.push({
+                from: pathToFileURL(localeFile).toString(),
+                format: "default",
+              });
+            }
           }
         }
 
@@ -306,7 +308,7 @@ export default defineNuxtConfig({
               format: "crowdin",
             });
           } else if (fileName === "meta.json") {
-            const meta: Record<string, { message: string }> = await fs
+            const meta: Record = await fs
               .readFile(localeFile, "utf8")
               .then((date) => JSON.parse(date));
             const localeMeta = (locale.meta ??= {});

apps/frontend/package.json

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

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

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

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } 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().includes("MAC");
+  return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
 }
 
 function show(event?: MouseEvent) {

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

@@ -1,179 +0,0 @@
-<template>
-  <div class="universal-card">
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-        <div class="flex min-w-0 flex-1 items-center gap-3">
-          <Avatar :src="report.project.icon_url" size="3rem" class="flex-shrink-0" />
-          <div class="min-w-0 flex-1">
-            <h3 class="truncate text-lg font-semibold">{{ report.project.title }}</h3>
-
-            <div class="flex flex-col gap-2 text-sm text-secondary sm:flex-row sm:items-center">
-              <nuxt-link
-                v-if="report.target"
-                :to="`/${report.target.type}/${report.target.slug}`"
-                class="inline-flex flex-row items-center gap-1 transition-colors duration-100 ease-in-out hover:text-brand"
-              >
-                <Avatar
-                  :src="report.target.avatar_url"
-                  :circle="report.target.type === 'user'"
-                  size="1rem"
-                  class="flex-shrink-0"
-                />
-                <span class="truncate">
-                  <OrganizationIcon
-                    v-if="report.target.type === 'organization'"
-                    class="align-middle"
-                  />
-                  {{ report.target.name }}
-                </span>
-              </nuxt-link>
-
-              <div class="flex flex-wrap items-center gap-2">
-                <span
-                  class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold text-secondary"
-                >
-                  Score: {{ report.priority_score }}
-                </span>
-                <span
-                  class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold"
-                  :class="{
-                    'text-brand': report.status === 'approved',
-                    'text-red': report.status === 'rejected',
-                    'text-secondary': report.status === 'pending',
-                  }"
-                >
-                  {{ report.status.charAt(0).toUpperCase() + report.status.slice(1) }}
-                </span>
-                <span class="max-w-[200px] truncate font-mono text-xs sm:max-w-none">
-                  {{
-                    report.version.files.find((file) => file.primary)?.filename ||
-                    "Unknown primary file"
-                  }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="mt-2 flex flex-col items-stretch gap-2 sm:mt-0 sm:flex-row sm:items-center sm:gap-2"
-        >
-          <span class="hidden whitespace-nowrap text-sm text-secondary sm:block">
-            {{ formatRelativeTime(dayjs(report.detected_at).toDate()) }}
-          </span>
-
-          <div class="flex flex-col gap-2 sm:flex-row">
-            <div class="flex gap-2">
-              <ButtonStyled class="flex-1 sm:flex-none">
-                <button
-                  v-tooltip="!isPending ? 'This report has already been dealt with.' : undefined"
-                  :disabled="!isPending"
-                  class="w-full sm:w-auto"
-                >
-                  Accept
-                </button>
-              </ButtonStyled>
-              <ButtonStyled class="flex-1 sm:flex-none">
-                <button
-                  v-tooltip="!isPending ? 'This report has already been dealt with.' : undefined"
-                  :disabled="!isPending"
-                  class="w-full sm:w-auto"
-                >
-                  Reject
-                </button>
-              </ButtonStyled>
-            </div>
-
-            <div class="flex justify-center gap-2 sm:justify-start">
-              <ButtonStyled circular>
-                <nuxt-link :to="versionUrl">
-                  <EyeIcon />
-                </nuxt-link>
-              </ButtonStyled>
-              <ButtonStyled circular>
-                <OverflowMenu :options="quickActions">
-                  <template #default>
-                    <EllipsisVerticalIcon />
-                  </template>
-                  <template #copy-id>
-                    <ClipboardCopyIcon />
-                    <span class="hidden sm:inline">Copy ID</span>
-                  </template>
-                  <template #copy-link>
-                    <LinkIcon />
-                    <span class="hidden sm:inline">Copy link</span>
-                  </template>
-                </OverflowMenu>
-              </ButtonStyled>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="text-sm text-secondary sm:hidden">
-        {{ formatRelativeTime(dayjs(report.detected_at).toDate()) }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import 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

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

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

@@ -1,275 +0,0 @@
-<template>
-  <div class="universal-card">
-    <div
-      class="flex w-full flex-col items-start justify-between gap-3 sm:flex-row sm:items-center sm:gap-0"
-    >
-      <span class="text-md flex flex-col gap-2 sm:flex-row sm:items-center">
-        <span class="flex items-center gap-2">
-          Reported for
-          <span class="whitespace-nowrap rounded-full align-middle font-semibold text-contrast">
-            {{ formattedReportType }}
-          </span>
-        </span>
-        <span class="flex items-center gap-2">
-          <span class="hidden sm:inline">By</span>
-          <span class="sm:hidden">Reporter:</span>
-          <nuxt-link
-            :to="`/user/${report.reporter_user.username}`"
-            class="inline-flex flex-row items-center gap-1 transition-colors duration-100 ease-in-out hover:text-brand"
-          >
-            <Avatar
-              :src="report.reporter_user.avatar_url"
-              circle
-              size="1.75rem"
-              class="flex-shrink-0"
-            />
-            <span class="truncate">{{ report.reporter_user.username }}</span>
-          </nuxt-link>
-        </span>
-      </span>
-
-      <div class="flex flex-row items-center gap-2 self-end sm:self-auto">
-        <span class="text-md whitespace-nowrap text-secondary">{{
-          formatRelativeTime(report.created)
-        }}</span>
-        <ButtonStyled v-if="visibleQuickReplies.length > 0" circular>
-          <OverflowMenu :options="visibleQuickReplies">
-            <span class="hidden sm:inline">Quick Reply</span>
-            <span class="sr-only sm:hidden">Quick Reply</span>
-            <ChevronDownIcon />
-          </OverflowMenu>
-        </ButtonStyled>
-        <ButtonStyled circular>
-          <OverflowMenu :options="quickActions">
-            <template #default>
-              <EllipsisVerticalIcon />
-            </template>
-            <template #copy-id>
-              <ClipboardCopyIcon />
-              <span class="hidden sm:inline">Copy ID</span>
-            </template>
-            <template #copy-link>
-              <LinkIcon />
-              <span class="hidden sm:inline">Copy link</span>
-            </template>
-          </OverflowMenu>
-        </ButtonStyled>
-      </div>
-    </div>
-
-    <hr class="my-4 rounded-xl border-solid text-divider" />
-
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-        <div class="flex min-w-0 flex-1 items-center gap-3">
-          <Avatar
-            :src="reportItemAvatarUrl"
-            :circle="report.item_type === 'user'"
-            size="3rem"
-            class="flex-shrink-0"
-          />
-          <div class="min-w-0 flex-1">
-            <span class="block truncate text-lg font-semibold">{{ reportItemTitle }}</span>
-            <div class="flex flex-col gap-2 text-sm text-secondary sm:flex-row sm:items-center">
-              <nuxt-link
-                v-if="report.target && report.item_type != 'user'"
-                :to="`/${report.target.type}/${report.target.slug}`"
-                class="inline-flex flex-row items-center gap-1 truncate transition-colors duration-100 ease-in-out hover:text-brand"
-              >
-                <Avatar
-                  :src="report.target?.avatar_url"
-                  :circle="report.target.type === 'user'"
-                  size="1rem"
-                  class="flex-shrink-0"
-                />
-                <span class="truncate">
-                  <OrganizationIcon
-                    v-if="report.target.type === 'organization'"
-                    class="align-middle"
-                  />
-                  {{ report.target.name || "Unknown User" }}
-                </span>
-              </nuxt-link>
-
-              <div class="flex flex-wrap items-center gap-2">
-                <span
-                  class="whitespace-nowrap rounded-full bg-button-bg p-0.5 px-2 text-xs font-semibold text-secondary"
-                >
-                  {{ formattedItemType }}
-                </span>
-                <span
-                  v-if="report.item_type === 'version' && report.version"
-                  class="max-w-[200px] truncate font-mono text-xs sm:max-w-none"
-                >
-                  {{
-                    report.version.files.find((file) => file.primary)?.filename || "Unknown Version"
-                  }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end sm:justify-start">
-          <ButtonStyled circular>
-            <nuxt-link :to="reportItemUrl">
-              <EyeIcon />
-            </nuxt-link>
-          </ButtonStyled>
-        </div>
-      </div>
-    </div>
-
-    <CollapsibleRegion class="my-4" ref="collapsibleRegion">
-      <ReportThread
-        v-if="report.thread"
-        ref="reportThread"
-        class="mb-16 sm:mb-0"
-        :thread="report.thread"
-        :report="report"
-        :reporter="report.reporter_user"
-        @update-thread="updateThread"
-      />
-    </CollapsibleRegion>
-  </div>
-</template>
-<script setup lang="ts">
-import {
-  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/ModpackPermissionsFlow.vue

@@ -8,7 +8,7 @@
     <div v-if="!modPackData">Loading data...</div>
 
     <div v-else-if="modPackData.length === 0">
-      <p>All permissions already obtained.</p>
+      <p>All permissions obtained. You may skip this step!</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, useSessionStorage } from "@vueuse/core";
+import { useLocalStorage } from "@vueuse/core";
 
 const props = defineProps<{
   projectId: string;
@@ -182,26 +182,7 @@ const persistedModPackData = useLocalStorage<ModerationModpackItem[] | null>(
 
 const persistedIndex = useLocalStorage<number>(`modpack-permissions-index-${props.projectId}`, 0);
 
-const modPackData = useSessionStorage<ModerationModpackItem[] | null>(
-  `modpack-permissions-data-${props.projectId}`,
-  null,
-  {
-    serializer: {
-      read: (v: any) => (v ? JSON.parse(v) : null),
-      write: (v: any) => JSON.stringify(v),
-    },
-  },
-);
-const permanentNoFiles = useSessionStorage<ModerationModpackItem[]>(
-  `modpack-permissions-permanent-no-${props.projectId}`,
-  [],
-  {
-    serializer: {
-      read: (v: any) => (v ? JSON.parse(v) : []),
-      write: (v: any) => JSON.stringify(v),
-    },
-  },
-);
+const modPackData = ref<ModerationModpackItem[] | null>(null);
 const currentIndex = ref(0);
 
 const fileApprovalTypes: ModerationModpackPermissionApprovalType[] = [
@@ -270,45 +251,7 @@ 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 => ({
@@ -367,7 +310,6 @@ async function fetchModPackData(): Promise<void> {
   } catch (error) {
     console.error("Failed to fetch modpack data:", error);
     modPackData.value = [];
-    permanentNoFiles.value = [];
     persistAll();
   }
 }
@@ -379,14 +321,6 @@ function goToPrevious(): void {
   }
 }
 
-watch(
-  modPackData,
-  (newValue) => {
-    persistedModPackData.value = newValue;
-  },
-  { deep: true },
-);
-
 function goToNext(): void {
   if (modPackData.value && currentIndex.value < modPackData.value.length) {
     currentIndex.value++;
@@ -462,17 +396,6 @@ onMounted(() => {
   }
 });
 
-watch(
-  modPackData,
-  (newValue) => {
-    if (newValue && newValue.length === 0) {
-      emit("complete");
-      clearPersistedData();
-    }
-  },
-  { immediate: true },
-);
-
 watch(
   () => props.projectId,
   () => {
@@ -483,20 +406,6 @@ watch(
     }
   },
 );
-
-function getModpackFiles(): {
-  interactive: ModerationModpackItem[];
-  permanentNo: ModerationModpackItem[];
-} {
-  return {
-    interactive: modPackData.value || [],
-    permanentNo: permanentNoFiles.value,
-  };
-}
-
-defineExpose({
-  getModpackFiles,
-});
 </script>
 
 <style scoped>

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

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

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

@@ -1,21 +1,13 @@
 <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 filteredReports"
+    v-for="report in reports.filter(
+      (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"
@@ -24,12 +16,11 @@
   <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";
 
-const props = defineProps({
+defineProps({
   moderation: {
     type: Boolean,
     default: false,
@@ -41,14 +32,9 @@ const props = defineProps({
 });
 
 const viewMode = ref("open");
-const reasonFilter = ref("All");
 const reports = ref([]);
 
-const MAX_REPORTS = 1500;
-
-let { data: rawReports } = await useAsyncData("report", () =>
-  useBaseFetch(`report?count=${MAX_REPORTS}`),
-);
+let { data: rawReports } = await useAsyncData("report", () => useBaseFetch("report?count=1000"));
 
 rawReports = rawReports.value.map((report) => {
   report.item_id = report.item_id.replace(/"/g, "");
@@ -65,7 +51,6 @@ 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)}`, () =>
@@ -108,13 +93,4 @@ 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,27 +66,6 @@
       <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"
@@ -108,8 +87,7 @@ import { Avatar, CopyCode } from "@modrinth/ui";
 
 const props = defineProps<Partial<Server>>();
 
-if (props.server_id && props.status === "available") {
-  // Necessary only to get server icon
+if (props.server_id) {
   await useModrinthServers(props.server_id, ["general"]);
 }
 
@@ -131,6 +109,11 @@ 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,10 +2,7 @@
   <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.filter((x) => x.shown === undefined || x.shown)"
-          :key="link.label"
-        >
+        <div v-for="link in navLinks" :key="link.label">
           <NuxtLink
             :to="link.href"
             class="flex items-center gap-2 rounded-xl p-2 hover:bg-button-bg"
@@ -43,7 +40,7 @@ import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 const emit = defineEmits(["reinstall"]);
 
 defineProps<{
-  navLinks: { label: string; href: string; icon: Component; external?: boolean; shown?: boolean }[];
+  navLinks: { label: string; href: string; icon: Component; external?: boolean }[];
   route: RouteLocationNormalized;
   server: ModrinthServer;
   backupInProgress?: BackupInProgressReason;

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

@@ -34,38 +34,6 @@
         </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" />
@@ -103,17 +71,12 @@
           v-if="sortedMessages.length > 0"
           class="btn btn-primary"
           :disabled="!replyBody"
-          @click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
+          @click="sendReply()"
         >
           <ReplyIcon aria-hidden="true" />
           Reply
         </button>
-        <button
-          v-else
-          class="btn btn-primary"
-          :disabled="!replyBody"
-          @click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
-        >
+        <button v-else class="btn btn-primary" :disabled="!replyBody" @click="sendReply()">
           <SendIcon aria-hidden="true" />
           Send
         </button>
@@ -326,7 +289,6 @@ const sortedMessages = computed(() => {
 });
 
 const modalSubmit = ref(null);
-const modalReply = ref(null);
 
 async function updateThreadLocal() {
   let threadId = null;
@@ -354,11 +316,6 @@ 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 = {
@@ -441,7 +398,6 @@ async function reopenReport() {
 
 const replyWithSubmission = ref(false);
 const submissionConfirmation = ref(false);
-const replyConfirmation = ref(false);
 
 function openResubmitModal(reply) {
   submissionConfirmation.value = false;
@@ -449,11 +405,6 @@ 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

@@ -1,282 +0,0 @@
-<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.reporter_user?.id"
+          v-if="report && message.author_id === report.reporterUser.id"
           v-tooltip="'Reporter'"
           class="reporter-icon"
         />

apps/frontend/src/composables/servers/modules/general.ts

@@ -6,7 +6,6 @@ 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: "You're making requests too quickly. Please wait a moment and try again.",
+          429: "Too Many Requests",
           500: "Internal Server Error",
           502: "Bad Gateway",
           503: "Service Unavailable",
@@ -167,17 +167,11 @@ export async function useServersFetch<T>(
           console.error("Fetch error:", error);
 
           const fetchError = new ModrinthServersFetchError(
-            `[Modrinth Servers] ${error.message}`,
+            `[Modrinth Servers] ${message}`,
             statusCode,
             error,
           );
-          throw new ModrinthServerError(
-            `[Modrinth Servers] ${message}`,
-            statusCode,
-            fetchError,
-            module,
-            v1Error,
-          );
+          throw new ModrinthServerError(error.message, statusCode, fetchError, module, v1Error);
         }
 
         const baseDelay = statusCode && statusCode >= 500 ? 5000 : 1000;

apps/frontend/src/helpers/moderation.ts

@@ -1,236 +0,0 @@
-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/',
+                link: '/moderation/review',
               },
               {
                 id: 'review-reports',
@@ -981,6 +981,23 @@ 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,6 +182,9 @@
   "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."
   },
@@ -476,30 +479,6 @@
   "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"
   },
@@ -554,6 +533,69 @@
   "profile.user-id": {
     "message": "User ID: {id}"
   },
+  "project-member-header.accept": {
+    "message": "Accept"
+  },
+  "project-member-header.decline": {
+    "message": "Decline"
+  },
+  "project-member-header.error": {
+    "message": "Error"
+  },
+  "project-member-header.error-decline": {
+    "message": "Failed to decline team invitation"
+  },
+  "project-member-header.error-join": {
+    "message": "Failed to accept team invitation"
+  },
+  "project-member-header.invitation-no-role": {
+    "message": "You've been invited to join this project. Please accept or decline the invitation."
+  },
+  "project-member-header.invitation-title": {
+    "message": "Invitation to join project"
+  },
+  "project-member-header.invitation-with-role": {
+    "message": "You've been invited be a member of this project with the role of '{role}'."
+  },
+  "project-member-header.publishing-checklist": {
+    "message": "Publishing checklist"
+  },
+  "project-member-header.required": {
+    "message": "Required"
+  },
+  "project-member-header.resubmit-for-review": {
+    "message": "Resubmit for review"
+  },
+  "project-member-header.resubmit-for-review-desc": {
+    "message": "Your project has been {status} by Modrinth's staff. In most cases, you can resubmit for review after addressing the staff's message."
+  },
+  "project-member-header.submit-checklist-tooltip": {
+    "message": "You must complete the required steps in the publishing checklist!"
+  },
+  "project-member-header.submit-for-review": {
+    "message": "Submit for review"
+  },
+  "project-member-header.submit-for-review-desc": {
+    "message": "Your project is only viewable by members of the project. It must be reviewed by moderators in order to be published."
+  },
+  "project-member-header.success": {
+    "message": "Success"
+  },
+  "project-member-header.success-decline": {
+    "message": "You have declined the team invitation"
+  },
+  "project-member-header.success-join": {
+    "message": "You have joined the project team"
+  },
+  "project-member-header.suggestion": {
+    "message": "Suggestion"
+  },
+  "project-member-header.visit-moderation-page": {
+    "message": "Visit moderation page"
+  },
+  "project-member-header.warning": {
+    "message": "Warning"
+  },
   "project-type.collection.plural": {
     "message": "Collections"
   },

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

@@ -689,10 +689,7 @@
                   },
                   {
                     id: 'moderation-checklist',
-                    action: () => {
-                      moderationStore.setSingleProject(project.id);
-                      showModerationChecklist = true;
-                    },
+                    action: () => (showModerationChecklist = true),
                     color: 'orange',
                     hoverOnly: true,
                     shown:
@@ -873,6 +870,19 @@
           @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>
 
@@ -880,8 +890,9 @@
     v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
     class="moderation-checklist"
   >
-    <ModerationChecklist
+    <NewModerationChecklist
       :project="project"
+      :future-project-ids="futureProjectIds"
       :collapsed="collapsedModerationChecklist"
       @exit="showModerationChecklist = false"
       @toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
@@ -940,7 +951,14 @@ import {
   useRelativeTime,
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
-import { formatCategory, formatProjectType, renderString } from "@modrinth/utils";
+import {
+  formatCategory,
+  formatProjectType,
+  isRejected,
+  isStaff,
+  isUnderReview,
+  renderString,
+} from "@modrinth/utils";
 import dayjs from "dayjs";
 import { Tooltip } from "floating-vue";
 import { useLocalStorage } from "@vueuse/core";
@@ -958,13 +976,11 @@ import ProjectMemberHeader from "~/components/ui/ProjectMemberHeader.vue";
 import { userCollectProject } from "~/composables/user.js";
 import { reportProject } from "~/utils/report-helpers.ts";
 import { saveFeatureFlags } from "~/composables/featureFlags.ts";
-import ModerationChecklist from "~/components/ui/moderation/checklist/ModerationChecklist.vue";
-import { useModerationStore } from "~/store/moderation.ts";
+import NewModerationChecklist from "~/components/ui/moderation/NewModerationChecklist.vue";
 
 const data = useNuxtApp();
 const route = useNativeRoute();
 const config = useRuntimeConfig();
-const moderationStore = useModerationStore();
 
 const auth = await useAuth();
 const user = await useUser();
@@ -1552,6 +1568,12 @@ 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) => {
@@ -1624,7 +1646,9 @@ const navLinks = computed(() => {
     {
       label: formatMessage(messages.moderationTab),
       href: `${projectUrl}/moderation`,
-      shown: !!currentMember.value,
+      shown:
+        !!currentMember.value &&
+        (isRejected(project.value) || isUnderReview(project.value) || isStaff(auth.value.user)),
     },
   ];
 });

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

@@ -365,10 +365,8 @@ 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,15 +76,8 @@
       <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, please go to the
-        <a class="text-link" href="https://support.modrinth.com" target="_blank">
-          Modrinth Help Center
-        </a>
-        and click the green bubble to contact support.
-      </p>
-      <p v-if="isApproved(project)" class="warning">
-        <IssuesIcon /> The moderators do not actively monitor this chat. However, they may still see
-        messages here if there is a problem with your project.
+        project for review. For additional inquiries, contact
+        <a href="https://support.modrinth.com">Modrinth Support</a>.
       </p>
       <ConversationThread
         v-if="thread"

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

@@ -22,6 +22,10 @@
         "
         :on-image-upload="onUploadHandler"
       />
+      <div v-if="descriptionWarning" class="flex items-center gap-1.5 text-orange">
+        <TriangleAlertIcon class="my-auto" />
+        {{ descriptionWarning }}
+      </div>
       <div class="input-group markdown-disclaimer">
         <button
           :disabled="!hasChanges"
@@ -38,7 +42,8 @@
 </template>
 
 <script lang="ts" setup>
-import { SaveIcon } from "@modrinth/assets";
+import { SaveIcon, TriangleAlertIcon } from "@modrinth/assets";
+import { MIN_DESCRIPTION_CHARS } from "@modrinth/moderation";
 import { MarkdownEditor } from "@modrinth/ui";
 import { type Project, type TeamMember, TeamMemberPermission } from "@modrinth/utils";
 import { computed, ref } from "vue";
@@ -53,6 +58,17 @@ const props = defineProps<{
 
 const description = ref(props.project.body);
 
+const descriptionWarning = computed(() => {
+  const text = description.value?.trim() || "";
+  const charCount = text.length;
+
+  if (charCount < MIN_DESCRIPTION_CHARS) {
+    return `It's recommended to have a description with at least ${MIN_DESCRIPTION_CHARS} characters. (${charCount}/${MIN_DESCRIPTION_CHARS})`;
+  }
+
+  return null;
+});
+
 const patchRequestPayload = computed(() => {
   const payload: {
     body?: string;

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

@@ -82,6 +82,10 @@
       <label for="project-summary">
         <span class="label__title">Summary</span>
       </label>
+      <div v-if="summaryWarning" class="my-2 flex items-center gap-1.5 text-orange">
+        <TriangleAlertIcon class="my-auto" />
+        {{ summaryWarning }}
+      </div>
       <div class="textarea-wrapper summary-input">
         <textarea
           id="project-summary"
@@ -240,9 +244,18 @@
 
 <script setup>
 import { formatProjectStatus, formatProjectType } from "@modrinth/utils";
-import { UploadIcon, SaveIcon, TrashIcon, XIcon, IssuesIcon, CheckIcon } from "@modrinth/assets";
+import {
+  UploadIcon,
+  SaveIcon,
+  TrashIcon,
+  XIcon,
+  IssuesIcon,
+  CheckIcon,
+  TriangleAlertIcon,
+} from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
 import { ConfirmModal, Avatar } from "@modrinth/ui";
+import { MIN_SUMMARY_CHARS } from "@modrinth/moderation";
 import FileInput from "~/components/ui/FileInput.vue";
 
 const props = defineProps({
@@ -300,6 +313,17 @@ const hasDeletePermission = computed(() => {
   return (props.currentMember.permissions & DELETE_PROJECT) === DELETE_PROJECT;
 });
 
+const summaryWarning = computed(() => {
+  const text = summary.value?.trim() || "";
+  const charCount = text.length;
+
+  if (charCount < MIN_SUMMARY_CHARS) {
+    return `It's recommended to have a summary with at least ${MIN_SUMMARY_CHARS} characters. (${charCount}/${MIN_SUMMARY_CHARS})`;
+  }
+
+  return null;
+});
+
 const sideTypes = ["required", "optional", "unsupported"];
 
 const patchData = computed(() => {

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

@@ -7,11 +7,16 @@
           id="project-issue-tracker"
           title="A place for users to report bugs, issues, and concerns about your project."
         >
-          <span class="label__title">Issue tracker</span>
+          <span class="label__title">Issue tracker </span>
           <span class="label__description">
             A place for users to report bugs, issues, and concerns about your project.
           </span>
         </label>
+        <TriangleAlertIcon
+          v-if="!isIssuesUrlCommon"
+          v-tooltip="`You're using a link which isn't common for this link type.`"
+          class="size-6 animate-pulse text-orange"
+        />
         <input
           id="project-issue-tracker"
           v-model="issuesUrl"
@@ -26,11 +31,16 @@
           id="project-source-code"
           title="A page/repository containing the source code for your project"
         >
-          <span class="label__title">Source code</span>
+          <span class="label__title">Source code </span>
           <span class="label__description">
             A page/repository containing the source code for your project
           </span>
         </label>
+        <TriangleAlertIcon
+          v-if="!isSourceUrlCommon"
+          v-tooltip="`You're using a link which isn't common for this link type.`"
+          class="size-6 animate-pulse text-orange"
+        />
         <input
           id="project-source-code"
           v-model="sourceUrl"
@@ -61,9 +71,14 @@
       </div>
       <div class="adjacent-input">
         <label id="project-discord-invite" title="An invitation link to your Discord server.">
-          <span class="label__title">Discord invite</span>
+          <span class="label__title">Discord invite </span>
           <span class="label__description"> An invitation link to your Discord server. </span>
         </label>
+        <TriangleAlertIcon
+          v-if="!isDiscordUrlCommon"
+          v-tooltip="`You're using a link which isn't common for this link type.`"
+          class="size-6 animate-pulse text-orange"
+        />
         <input
           id="project-discord-invite"
           v-model="discordUrl"
@@ -123,7 +138,8 @@
 
 <script setup>
 import { DropdownSelect } from "@modrinth/ui";
-import { SaveIcon } from "@modrinth/assets";
+import { SaveIcon, TriangleAlertIcon } from "@modrinth/assets";
+import { isCommonUrl, commonLinkDomains } from "@modrinth/moderation";
 
 const tags = useTags();
 
@@ -153,6 +169,21 @@ const sourceUrl = ref(props.project.source_url);
 const wikiUrl = ref(props.project.wiki_url);
 const discordUrl = ref(props.project.discord_url);
 
+const isIssuesUrlCommon = computed(() => {
+  if (!issuesUrl.value || issuesUrl.value.trim().length === 0) return true;
+  return isCommonUrl(issuesUrl.value, commonLinkDomains.issues);
+});
+
+const isSourceUrlCommon = computed(() => {
+  if (!sourceUrl.value || sourceUrl.value.trim().length === 0) return true;
+  return isCommonUrl(sourceUrl.value, commonLinkDomains.source);
+});
+
+const isDiscordUrlCommon = computed(() => {
+  if (!discordUrl.value || discordUrl.value.trim().length === 0) return true;
+  return isCommonUrl(discordUrl.value, commonLinkDomains.discord);
+});
+
 const rawDonationLinks = JSON.parse(JSON.stringify(props.project.donation_urls));
 rawDonationLinks.push({
   id: null,

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

@@ -6,11 +6,31 @@
           <span class="label__title size-card-header">Tags</span>
         </h3>
       </div>
+
+      <div
+        v-if="tooManyTagsWarning && !allTagsSelectedWarning"
+        class="my-2 flex items-center gap-1.5 text-orange"
+      >
+        <TriangleAlertIcon class="my-auto" />
+        {{ tooManyTagsWarning }}
+      </div>
+
+      <div v-if="multipleResolutionTagsWarning" class="my-2 flex items-center gap-1.5 text-orange">
+        <TriangleAlertIcon class="my-auto" />
+        {{ multipleResolutionTagsWarning }}
+      </div>
+
+      <div v-if="allTagsSelectedWarning" class="my-2 flex items-center gap-1.5 text-red">
+        <TriangleAlertIcon class="my-auto" />
+        <span>{{ allTagsSelectedWarning }}</span>
+      </div>
+
       <p>
         Accurate tagging is important to help people find your
         {{ formatProjectType(project.project_type).toLowerCase() }}. Make sure to select all tags
         that apply.
       </p>
+
       <p v-if="project.versions.length === 0" class="known-errors">
         Please upload a version first in order to select tags!
       </p>
@@ -112,145 +132,181 @@
   </div>
 </template>
 
-<script>
-import { StarIcon, SaveIcon } from "@modrinth/assets";
-import { formatCategory, formatCategoryHeader, formatProjectType } from "@modrinth/utils";
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { StarIcon, SaveIcon, TriangleAlertIcon } from "@modrinth/assets";
+import {
+  formatCategory,
+  formatCategoryHeader,
+  formatProjectType,
+  sortedCategories,
+  type Project,
+} from "@modrinth/utils";
 import Checkbox from "~/components/ui/Checkbox.vue";
 
-export default defineNuxtComponent({
-  components: {
-    Checkbox,
-    SaveIcon,
-    StarIcon,
-  },
-  props: {
-    project: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    allMembers: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    currentMember: {
-      type: Object,
-      default() {
-        return null;
-      },
-    },
-    patchProject: {
-      type: Function,
-      default() {
-        return () => {
-          this.$notify({
-            group: "main",
-            title: "An error occurred",
-            text: "Patch project function not found",
-            type: "error",
-          });
-        };
-      },
-    },
-  },
-  data() {
-    return {
-      selectedTags: this.$sortedCategories().filter(
-        (x) =>
-          x.project_type === this.project.actualProjectType &&
-          (this.project.categories.includes(x.name) ||
-            this.project.additional_categories.includes(x.name)),
-      ),
-      featuredTags: this.$sortedCategories().filter(
-        (x) =>
-          x.project_type === this.project.actualProjectType &&
-          this.project.categories.includes(x.name),
-      ),
-    };
-  },
-  computed: {
-    categoryLists() {
-      const lists = {};
-      this.$sortedCategories().forEach((x) => {
-        if (x.project_type === this.project.actualProjectType) {
-          const header = x.header;
-          if (!lists[header]) {
-            lists[header] = [];
-          }
-          lists[header].push(x);
-        }
-      });
-      return lists;
-    },
-    patchData() {
-      const data = {};
-      // Promote selected categories to featured if there are less than 3 featured
-      const newFeaturedTags = this.featuredTags.slice();
-      if (newFeaturedTags.length < 1 && this.selectedTags.length > newFeaturedTags.length) {
-        const nonFeaturedCategories = this.selectedTags.filter((x) => !newFeaturedTags.includes(x));
+interface Category {
+  name: string;
+  header: string;
+  icon?: string;
+  project_type: string;
+}
 
-        nonFeaturedCategories
-          .slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
-          .forEach((x) => newFeaturedTags.push(x));
-      }
-      // Convert selected and featured categories to backend-usable arrays
-      const categories = newFeaturedTags.map((x) => x.name);
-      const additionalCategories = this.selectedTags
-        .filter((x) => !newFeaturedTags.includes(x))
-        .map((x) => x.name);
+interface Props {
+  project: Project & {
+    actualProjectType: string;
+  };
+  allMembers?: any[];
+  currentMember?: any;
+  patchProject?: (data: any) => void;
+}
 
-      if (
-        categories.length !== this.project.categories.length ||
-        categories.some((value) => !this.project.categories.includes(value))
-      ) {
-        data.categories = categories;
-      }
+const tags = useTags();
 
-      if (
-        additionalCategories.length !== this.project.additional_categories.length ||
-        additionalCategories.some((value) => !this.project.additional_categories.includes(value))
-      ) {
-        data.additional_categories = additionalCategories;
-      }
-
-      return data;
-    },
-    hasChanges() {
-      return Object.keys(this.patchData).length > 0;
-    },
-  },
-  methods: {
-    formatProjectType,
-    formatCategoryHeader,
-    formatCategory,
-    toggleCategory(category) {
-      if (this.selectedTags.includes(category)) {
-        this.selectedTags = this.selectedTags.filter((x) => x !== category);
-        if (this.featuredTags.includes(category)) {
-          this.featuredTags = this.featuredTags.filter((x) => x !== category);
-        }
-      } else {
-        this.selectedTags.push(category);
-      }
-    },
-    toggleFeaturedCategory(category) {
-      if (this.featuredTags.includes(category)) {
-        this.featuredTags = this.featuredTags.filter((x) => x !== category);
-      } else {
-        this.featuredTags.push(category);
-      }
-    },
-    saveChanges() {
-      if (this.hasChanges) {
-        this.patchProject(this.patchData);
-      }
-    },
+const props = withDefaults(defineProps<Props>(), {
+  allMembers: () => [],
+  currentMember: null,
+  patchProject: () => {
+    addNotification({
+      title: "An error occurred",
+      text: "Patch project function not found",
+      type: "error",
+    });
   },
 });
+
+const selectedTags = ref<Category[]>(
+  sortedCategories(tags.value).filter(
+    (x: Category) =>
+      x.project_type === props.project.actualProjectType &&
+      (props.project.categories.includes(x.name) ||
+        props.project.additional_categories.includes(x.name)),
+  ),
+);
+
+const featuredTags = ref<Category[]>(
+  sortedCategories(tags.value).filter(
+    (x: Category) =>
+      x.project_type === props.project.actualProjectType &&
+      props.project.categories.includes(x.name),
+  ),
+);
+
+const categoryLists = computed(() => {
+  const lists: Record<string, Category[]> = {};
+  sortedCategories(tags.value).forEach((x: Category) => {
+    if (x.project_type === props.project.actualProjectType) {
+      const header = x.header;
+      if (!lists[header]) {
+        lists[header] = [];
+      }
+      lists[header].push(x);
+    }
+  });
+  return lists;
+});
+
+const tooManyTagsWarning = computed(() => {
+  const tagCount = selectedTags.value.length;
+  if (tagCount > 5) {
+    return `You've selected ${tagCount} tags. Consider reducing to 5 or fewer to keep your project focused and easier to discover.`;
+  }
+  return null;
+});
+
+const multipleResolutionTagsWarning = computed(() => {
+  if (props.project.project_type !== "resourcepack") return null;
+
+  const resolutionTags = selectedTags.value.filter((tag) =>
+    ["16x", "32x", "48x", "64x", "128x", "256x", "512x", "1024x"].includes(tag.name),
+  );
+
+  if (resolutionTags.length > 1) {
+    return `You've selected ${resolutionTags.length} resolution tags (${resolutionTags.map((t) => t.name).join(", ")}). Resource packs should typically only have one resolution tag.`;
+  }
+  return null;
+});
+
+const allTagsSelectedWarning = computed(() => {
+  const categoriesForProjectType = sortedCategories(tags.value).filter(
+    (x: Category) => x.project_type === props.project.actualProjectType,
+  );
+  const totalSelectedTags = selectedTags.value.length;
+
+  if (
+    totalSelectedTags === categoriesForProjectType.length &&
+    categoriesForProjectType.length > 0
+  ) {
+    return `You've selected all ${categoriesForProjectType.length} available tags. Please select only the tags that truly apply to your project.`;
+  }
+  return null;
+});
+
+const patchData = computed(() => {
+  const data: Record<string, string[]> = {};
+
+  // Promote selected categories to featured if there are less than 3 featured
+  const newFeaturedTags = featuredTags.value.slice();
+  if (newFeaturedTags.length < 1 && selectedTags.value.length > newFeaturedTags.length) {
+    const nonFeaturedCategories = selectedTags.value.filter((x) => !newFeaturedTags.includes(x));
+
+    nonFeaturedCategories
+      .slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
+      .forEach((x) => newFeaturedTags.push(x));
+  }
+
+  // Convert selected and featured categories to backend-usable arrays
+  const categories = newFeaturedTags.map((x) => x.name);
+  const additionalCategories = selectedTags.value
+    .filter((x) => !newFeaturedTags.includes(x))
+    .map((x) => x.name);
+
+  if (
+    categories.length !== props.project.categories.length ||
+    categories.some((value) => !props.project.categories.includes(value))
+  ) {
+    data.categories = categories;
+  }
+
+  if (
+    additionalCategories.length !== props.project.additional_categories.length ||
+    additionalCategories.some((value) => !props.project.additional_categories.includes(value))
+  ) {
+    data.additional_categories = additionalCategories;
+  }
+
+  return data;
+});
+
+const hasChanges = computed(() => {
+  return Object.keys(patchData.value).length > 0;
+});
+
+const toggleCategory = (category: Category) => {
+  if (selectedTags.value.includes(category)) {
+    selectedTags.value = selectedTags.value.filter((x) => x !== category);
+    if (featuredTags.value.includes(category)) {
+      featuredTags.value = featuredTags.value.filter((x) => x !== category);
+    }
+  } else {
+    selectedTags.value.push(category);
+  }
+};
+
+const toggleFeaturedCategory = (category: Category) => {
+  if (featuredTags.value.includes(category)) {
+    featuredTags.value = featuredTags.value.filter((x) => x !== category);
+  } else {
+    featuredTags.value.push(category);
+  }
+};
+
+const saveChanges = () => {
+  if (hasChanges.value) {
+    props.patchProject(patchData.value);
+  }
+};
 </script>
+
 <style lang="scss" scoped>
 .label__title {
   display: flex;

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

@@ -58,41 +58,6 @@
       </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"
@@ -185,26 +150,9 @@
                   </template>
                 </span>
                 <span class="text-sm text-secondary">
-                  <span
-                    v-if="charge.status === 'cancelled' && $dayjs(charge.due).isBefore($dayjs())"
-                    class="font-bold"
-                  >
-                    Ended:
-                  </span>
-                  <span v-else-if="charge.status === 'cancelled'" class="font-bold">Ends:</span>
-                  <span v-else-if="charge.type === 'refund'" class="font-bold">Issued:</span>
-                  <span v-else class="font-bold">Due:</span>
                   {{ dayjs(charge.due).format("MMMM D, YYYY [at] h:mma") }}
                   <span class="text-secondary">({{ formatRelativeTime(charge.due) }}) </span>
                 </span>
-                <span v-if="charge.last_attempt != null" class="text-sm text-secondary">
-                  <span v-if="charge.status === 'failed'" class="font-bold">Last attempt:</span>
-                  <span v-else class="font-bold">Charged:</span>
-                  {{ dayjs(charge.last_attempt).format("MMMM D, YYYY [at] h:mma") }}
-                  <span class="text-secondary"
-                    >({{ formatRelativeTime(charge.last_attempt) }})
-                  </span>
-                </span>
                 <div class="flex w-full items-center gap-1 text-xs text-secondary">
                   {{ charge.status }}
                   ⋅
@@ -236,12 +184,6 @@
                     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>
@@ -275,6 +217,7 @@ 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;
@@ -344,10 +287,6 @@ 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";
@@ -356,12 +295,6 @@ 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 {
@@ -377,7 +310,8 @@ async function refundCharge() {
     await refreshCharges();
     refundModal.value.hide();
   } catch (err) {
-    addNotification({
+    data.$notify({
+      group: "main",
       title: "Error refunding",
       text: err.data?.description ?? err,
       type: "error",
@@ -386,32 +320,6 @@ 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,12 +1,6 @@
 <template>
-  <div v-if="subtleLauncherRedirectUri">
-    <iframe
-      :src="subtleLauncherRedirectUri"
-      class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
-    ></iframe>
-  </div>
-  <div v-else>
-    <template v-if="flow && !subtleLauncherRedirectUri">
+  <div>
+    <template v-if="flow">
       <label for="two-factor-code">
         <span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
         <span class="label__description">
@@ -195,7 +189,6 @@ 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();
@@ -269,32 +262,7 @@ async function begin2FASignIn() {
 
 async function finishSignIn(token) {
   if (route.query.launcher) {
-    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,
-      });
-    }
-
+    await navigateTo(`https://launcher-files.modrinth.com/?code=${token}`, { 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(false);
+const subscribe = ref(true);
 
 async function createAccount() {
   startLoading();
@@ -247,14 +247,16 @@ async function createAccount() {
       },
     });
 
-    await useAuth(res.session);
-    await useUser();
-
     if (route.query.launcher) {
-      await navigateTo({ path: "/auth/sign-in", query: route.query });
+      await navigateTo(`https://launcher-files.modrinth.com/?code=${res.session}`, {
+        external: true,
+      });
       return;
     }
 
+    await useAuth(res.session);
+    await useUser();
+
     if (route.query.redirect) {
       await navigateTo(route.query.redirect);
     } else {

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

@@ -40,6 +40,7 @@
                       @change="showPreviewImage"
                     >
                       <UploadIcon aria-hidden="true" />
+                      {{ formatMessage(messages.uploadIconButton) }}
                     </FileInput>
                     <Button
                       v-if="!deletedIcon && (previewImage || collection.icon_url)"
@@ -478,6 +479,10 @@ 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,84 +1,33 @@
 <template>
-  <div
-    class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
-  >
-    <h1>Moderation</h1>
-    <NavTabs :links="moderationLinks" class="mb-4 hidden sm:flex" />
-    <div class="mb-4 sm:hidden">
-      <Chips
-        v-model="selectedChip"
-        :items="mobileNavOptions"
-        :never-empty="true"
-        @change="navigateToPage"
-      />
+  <div class="normal-page">
+    <div class="normal-page__sidebar">
+      <aside class="universal-card">
+        <h1>Moderation</h1>
+        <NavStack>
+          <NavStackItem link="/moderation" label="Overview">
+            <ModrinthIcon aria-hidden="true" />
+          </NavStackItem>
+          <NavStackItem link="/moderation/review" label="Review projects">
+            <ScaleIcon aria-hidden="true" />
+          </NavStackItem>
+          <NavStackItem link="/moderation/reports" label="Reports">
+            <ReportIcon aria-hidden="true" />
+          </NavStackItem>
+        </NavStack>
+      </aside>
+    </div>
+    <div class="normal-page__content">
+      <NuxtPage />
     </div>
-    <NuxtPage />
   </div>
 </template>
 
-<script setup lang="ts">
-import { defineMessages, useVIntl } from "@vintl/vintl";
-import { Chips } from "@modrinth/ui";
-import NavTabs from "@/components/ui/NavTabs.vue";
+<script setup>
+import { ModrinthIcon, ScaleIcon, ReportIcon } from "@modrinth/assets";
+import NavStack from "~/components/ui/NavStack.vue";
+import NavStackItem from "~/components/ui/NavStackItem.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,339 +1,42 @@
 <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" />
-        <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>
+    <section class="universal-card">
+      <h2>Statistics</h2>
+      <div class="grid-display">
+        <div class="grid-display__item">
+          <div class="label">Projects</div>
+          <div class="value">
+            {{ formatNumber(stats.projects, false) }}
+          </div>
+        </div>
+        <div class="grid-display__item">
+          <div class="label">Versions</div>
+          <div class="value">
+            {{ formatNumber(stats.versions, false) }}
+          </div>
+        </div>
+        <div class="grid-display__item">
+          <div class="label">Files</div>
+          <div class="value">
+            {{ formatNumber(stats.files, false) }}
+          </div>
+        </div>
+        <div class="grid-display__item">
+          <div class="label">Authors</div>
+          <div class="value">
+            {{ formatNumber(stats.authors, false) }}
+          </div>
         </div>
-
-        <ButtonStyled color="orange" class="w-full sm:w-auto">
-          <button
-            class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
-            @click="moderateAllInFilter()"
-          >
-            <ScaleIcon class="size-4 flex-shrink-0" />
-            <span class="hidden sm:inline">{{ formatMessage(messages.moderate) }}</span>
-            <span class="sm:hidden">Moderate</span>
-          </button>
-        </ButtonStyled>
       </div>
-    </div>
-
-    <div v-if="totalPages > 1" class="flex justify-center lg:hidden">
-      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-      <ConfettiExplosion v-if="visible" />
-    </div>
-
-    <div class="mt-4 flex flex-col gap-2">
-      <div v-if="paginatedProjects.length === 0" class="universal-card h-24 animate-pulse"></div>
-      <ModerationQueueCard
-        v-for="item in paginatedProjects"
-        v-else
-        :key="item.project.id"
-        :queue-entry="item"
-        :owner="item.owner"
-        :org="item.org"
-      />
-    </div>
-
-    <div v-if="totalPages > 1" class="mt-4 flex justify-center">
-      <Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
-    </div>
+    </section>
   </div>
 </template>
-<script setup lang="ts">
-import { DropdownSelect, Button, ButtonStyled, Pagination } from "@modrinth/ui";
-import {
-  XIcon,
-  SearchIcon,
-  SortAscIcon,
-  SortDescIcon,
-  FilterIcon,
-  ScaleIcon,
-} from "@modrinth/assets";
-import { defineMessages, useVIntl } from "@vintl/vintl";
-import { useLocalStorage } from "@vueuse/core";
-import ConfettiExplosion from "vue-confetti-explosion";
-import Fuse from "fuse.js";
-import ModerationQueueCard from "~/components/ui/moderation/ModerationQueueCard.vue";
-import { useModerationStore } from "~/store/moderation.ts";
-import { enrichProjectBatch, type ModerationProject } from "~/helpers/moderation.ts";
+<script setup>
+import { formatNumber } from "@modrinth/utils";
 
-const { formatMessage } = useVIntl();
-const moderationStore = useModerationStore();
-const route = useRoute();
-const router = useRouter();
-
-const visible = ref(false);
-if (import.meta.client && history && history.state && history.state.confetti) {
-  setTimeout(async () => {
-    history.state.confetti = false;
-    visible.value = true;
-    await nextTick();
-    setTimeout(() => {
-      visible.value = false;
-    }, 5000);
-  }, 1000);
-}
-
-const messages = defineMessages({
-  searchPlaceholder: {
-    id: "moderation.search.placeholder",
-    defaultMessage: "Search...",
-  },
-  filterBy: {
-    id: "moderation.filter.by",
-    defaultMessage: "Filter by",
-  },
-  sortBy: {
-    id: "moderation.sort.by",
-    defaultMessage: "Sort by",
-  },
-  moderate: {
-    id: "moderation.moderate",
-    defaultMessage: "Moderate",
-  },
+useHead({
+  title: "Staff overview - Modrinth",
 });
 
-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,
-    },
-  });
-}
+const { data: stats } = await useAsyncData("statistics", () => useBaseFetch("statistics"));
 </script>

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

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

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

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

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

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

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

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

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

@@ -16,15 +16,12 @@ 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;
@@ -35,11 +32,7 @@ useHead({
   title: `Options - ${props.server.general?.name ?? "Server"} - Modrinth`,
 });
 
-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(() => [
+const navLinks = [
   { 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` },
@@ -55,15 +48,7 @@ const navLinks = computed(() => [
     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 === originalInvocation"
+                :disabled="invocation === startupSettings?.original_invocation"
                 class="!w-full sm:!w-auto"
                 @click="resetToDefault"
               >
@@ -120,9 +120,8 @@ 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 = [
@@ -138,15 +137,33 @@ const jdkBuildMap = [
   { value: "graal", label: "GraalVM" },
 ];
 
-const invocation = ref(props.server.startup.invocation);
-const jdkVersion = ref(
-  jdkVersionMap.find((v) => v.value === props.server.startup.jdk_version)?.label,
-);
-const jdkBuild = ref(jdkBuildMap.find((v) => v.value === props.server.startup.jdk_build)?.label);
+const invocation = ref("");
+const jdkVersion = ref("");
+const jdkBuild = ref("");
 
-const originalInvocation = ref(invocation.value);
-const originalJdkVersion = ref(jdkVersion.value);
-const originalJdkBuild = ref(jdkBuild.value);
+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 hasUnsavedChanges = computed(
   () =>
@@ -178,7 +195,7 @@ const displayedJavaVersions = computed(() => {
   return showAllVersions.value ? jdkVersionMap.map((v) => v.label) : compatibleJavaVersions.value;
 });
 
-async function saveStartup() {
+const saveStartup = async () => {
   try {
     isUpdating.value = true;
     const invocationValue = invocation.value ?? "";
@@ -215,17 +232,17 @@ async function saveStartup() {
   } finally {
     isUpdating.value = false;
   }
-}
+};
 
-function resetStartup() {
+const resetStartup = () => {
   invocation.value = originalInvocation.value;
   jdkVersion.value = originalJdkVersion.value;
   jdkBuild.value = originalJdkBuild.value;
-}
+};
 
-function resetToDefault() {
-  invocation.value = originalInvocation.value ?? "";
-}
+const resetToDefault = () => {
+  invocation.value = startupSettings.value?.original_invocation ?? "";
+};
 </script>
 
 <style scoped>

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

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

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

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

apps/frontend/src/store/moderation.ts

@@ -1,98 +0,0 @@
-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-29e171bd746ac5dc1fabae4c9f81c3d1df4e69c860b7d0f6a907377664199217.json

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

apps/labrinth/.sqlx/query-32fa1030a3a69f6bc36c6ec916ba8d0724dfd683576629ab05f5df321d5f9a55.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, 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            ",
+  "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            ",
   "describe": {
     "columns": [],
     "parameters": {
@@ -25,11 +25,10 @@
         "Text",
         "Text",
         "Text",
-        "Bool",
         "Bool"
       ]
     },
     "nullable": []
   },
-  "hash": "010c69fa61e1329156020b251e75d46bc09344c1846b3098accce5801e571e5e"
+  "hash": "32fa1030a3a69f6bc36c6ec916ba8d0724dfd683576629ab05f5df321d5f9a55"
 }

apps/labrinth/.sqlx/query-3baabc9f08401801fa290866888c540746fc50c1d79911f08f3322b605ce5c30.json

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

apps/labrinth/.sqlx/query-99cca53fd3f35325e2da3b671532bf98b8c7ad8e7cb9158e4eb9c5bac66d20b2.json

@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n            SELECT\n                id, user_id, price_id, amount, currency_code, status, due, last_attempt,\n                charge_type, subscription_id,\n                -- Workaround for https://github.com/launchbadge/sqlx/issues/3336\n                subscription_interval AS \"subscription_interval?\",\n                payment_platform,\n                payment_platform_id AS \"payment_platform_id?\",\n                parent_charge_id AS \"parent_charge_id?\",\n                net AS \"net?\"\n            FROM charges\n            WHERE subscription_id = $1 AND (status = 'open' OR status = 'cancelled' OR status = 'failed')",
+  "query": "\n            SELECT\n                id, user_id, price_id, amount, currency_code, status, due, last_attempt,\n                charge_type, subscription_id,\n                -- Workaround for https://github.com/launchbadge/sqlx/issues/3336\n                subscription_interval AS \"subscription_interval?\",\n                payment_platform,\n                payment_platform_id AS \"payment_platform_id?\",\n                parent_charge_id AS \"parent_charge_id?\",\n                net AS \"net?\"\n            FROM charges\n            WHERE subscription_id = $1 AND (status = 'open' OR status = 'cancelled')",
   "describe": {
     "columns": [
       {
@@ -102,5 +102,5 @@
       true
     ]
   },
-  "hash": "cf020daa52a1316e5f60d197196b880b72c0b2a576e470d9fd7182558103d055"
+  "hash": "99cca53fd3f35325e2da3b671532bf98b8c7ad8e7cb9158e4eb9c5bac66d20b2"
 }

apps/labrinth/.sqlx/query-b5857aafa522ca62294bc296fb6cddd862eca2889203e43b4962df07ba1221a0.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, is_subscribed_to_newsletter\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\n                    FROM users\n                    WHERE id = ANY($1) OR LOWER(username) = ANY($2)\n                    ",
   "describe": {
     "columns": [
       {
@@ -122,11 +122,6 @@
         "ordinal": 23,
         "name": "allow_friend_requests",
         "type_info": "Bool"
-      },
-      {
-        "ordinal": 24,
-        "name": "is_subscribed_to_newsletter",
-        "type_info": "Bool"
       }
     ],
     "parameters": {
@@ -159,9 +154,8 @@
       true,
       true,
       true,
-      false,
       false
     ]
   },
-  "hash": "5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4"
+  "hash": "b5857aafa522ca62294bc296fb6cddd862eca2889203e43b4962df07ba1221a0"
 }

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

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

apps/labrinth/Dockerfile

@@ -1,21 +1,8 @@
-# syntax=docker/dockerfile:1
-
 FROM rust:1.88.0 AS build
 
 WORKDIR /usr/src/labrinth
 COPY . .
-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
+RUN SQLX_OFFLINE=true cargo build --release --package labrinth
 
 FROM debian:bookworm-slim
 
@@ -27,8 +14,10 @@ RUN apt-get update \
   && apt-get install -y --no-install-recommends ca-certificates dumb-init curl \
   && rm -rf /var/lib/apt/lists/*
 
-COPY --from=artifacts /labrinth /labrinth
-
+COPY --from=build /usr/src/labrinth/target/release/labrinth /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
+
 ENTRYPOINT ["dumb-init", "--"]
 CMD ["/labrinth/labrinth"]

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

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

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

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

apps/labrinth/src/auth/checks.rs

@@ -315,13 +315,9 @@ 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 = (if hide_unlisted {
-        collection_data.status.is_searchable()
-    } else {
-        !collection_data.status.is_hidden()
-    }) && !collection_data.projects.is_empty();
+    let mut authorized = !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())
@@ -335,17 +331,12 @@ 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 ((if hide_unlisted {
-            collection.status.is_searchable()
-        } else {
-            !collection.status.is_hidden()
-        }) && !collection.projects.is_empty())
+        if (!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::{DBUser, user_item};
+use crate::database::models::user_item;
 use crate::database::redis::RedisPool;
 use crate::models::pats::Scopes;
 use crate::models::users::User;
@@ -44,33 +44,6 @@ where
     Ok(Some((scopes, User::from_full(db_user))))
 }
 
-pub async fn get_full_user_from_headers<'a, E>(
-    req: &HttpRequest,
-    executor: E,
-    redis: &RedisPool,
-    session_queue: &AuthQueue,
-    required_scopes: Scopes,
-) -> Result<(Scopes, DBUser), AuthenticationError>
-where
-    E: sqlx::Executor<'a, Database = sqlx::Postgres> + Copy,
-{
-    let (scopes, db_user) = get_user_record_from_bearer_token(
-        req,
-        None,
-        executor,
-        redis,
-        session_queue,
-    )
-    .await?
-    .ok_or_else(|| AuthenticationError::InvalidCredentials)?;
-
-    if !scopes.contains(required_scopes) {
-        return Err(AuthenticationError::InvalidCredentials);
-    }
-
-    Ok((scopes, db_user))
-}
-
 pub async fn get_user_from_headers<'a, E>(
     req: &HttpRequest,
     executor: E,
@@ -81,16 +54,24 @@ pub async fn get_user_from_headers<'a, E>(
 where
     E: sqlx::Executor<'a, Database = sqlx::Postgres> + Copy,
 {
-    let (scopes, db_user) = get_full_user_from_headers(
+    // Fetch DB user record and minos user from headers
+    let (scopes, db_user) = get_user_record_from_bearer_token(
         req,
+        None,
         executor,
         redis,
         session_queue,
-        required_scopes,
     )
-    .await?;
+    .await?
+    .ok_or_else(|| AuthenticationError::InvalidCredentials)?;
 
-    Ok((scopes, User::from_full(db_user)))
+    let user = User::from_full(db_user);
+
+    if !scopes.contains(required_scopes) {
+        return Err(AuthenticationError::InvalidCredentials);
+    }
+
+    Ok((scopes, user))
 }
 
 pub async fn get_user_record_from_bearer_token<'a, 'b, E>(

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

@@ -197,7 +197,7 @@ impl DBCharge {
     ) -> Result<Option<DBCharge>, DatabaseError> {
         let user_subscription_id = user_subscription_id.0;
         let res = select_charges_with_predicate!(
-            "WHERE subscription_id = $1 AND (status = 'open' OR status = 'cancelled' OR status = 'failed')",
+            "WHERE subscription_id = $1 AND (status = 'open' OR status = 'cancelled')",
             user_subscription_id
         )
         .fetch_optional(exec)

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

@@ -49,8 +49,6 @@ pub struct DBUser {
     pub badges: Badges,
 
     pub allow_friend_requests: bool,
-
-    pub is_subscribed_to_newsletter: bool,
 }
 
 impl DBUser {
@@ -65,13 +63,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, is_subscribed_to_newsletter
+                venmo_handle, stripe_customer_id, allow_friend_requests
             )
             VALUES (
                 $1, $2, $3, $4, $5,
                 $6, $7,
                 $8, $9, $10, $11, $12, $13,
-                $14, $15, $16, $17, $18, $19, $20, $21, $22
+                $14, $15, $16, $17, $18, $19, $20, $21
             )
             ",
             self.id as DBUserId,
@@ -95,7 +93,6 @@ impl DBUser {
             self.venmo_handle,
             self.stripe_customer_id,
             self.allow_friend_requests,
-            self.is_subscribed_to_newsletter,
         )
         .execute(&mut **transaction)
         .await?;
@@ -181,7 +178,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, is_subscribed_to_newsletter
+                        venmo_handle, stripe_customer_id, allow_friend_requests
                     FROM users
                     WHERE id = ANY($1) OR LOWER(username) = ANY($2)
                     ",
@@ -215,7 +212,6 @@ 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 {
         }
     }
 
-    // Collection pages + info cannot be viewed
+    // Project pages + info cannot be viewed
     pub fn is_hidden(&self) -> bool {
         match self {
             CollectionStatus::Rejected => true,
@@ -103,11 +103,6 @@ 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,11 +276,7 @@ pub async fn refund_charge(
             subscription_interval: charge.subscription_interval,
             payment_platform: charge.payment_platform,
             payment_platform_id: id,
-            parent_charge_id: if refund_amount != 0 {
-                Some(charge.id)
-            } else {
-                None
-            },
+            parent_charge_id: Some(charge.id),
             net,
         }
         .upsert(&mut transaction)

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

@@ -1,7 +1,5 @@
 use crate::auth::email::send_email;
-use crate::auth::validate::{
-    get_full_user_from_headers, get_user_record_from_bearer_token,
-};
+use crate::auth::validate::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;
@@ -234,7 +232,6 @@ impl TempUser {
                 role: Role::Developer.to_string(),
                 badges: Badges::default(),
                 allow_friend_requests: true,
-                is_subscribed_to_newsletter: false,
             }
             .insert(transaction)
             .await?;
@@ -1294,6 +1291,37 @@ 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> {
@@ -1428,9 +1456,6 @@ 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?;
@@ -1451,6 +1476,10 @@ 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))
@@ -2391,24 +2420,15 @@ pub async fn subscribe_newsletter(
     .await?
     .1;
 
-    sqlx::query!(
-        "
-        UPDATE users
-        SET is_subscribed_to_newsletter = TRUE
-        WHERE id = $1
-        ",
-        user.id.0 as i64,
-    )
-    .execute(&**pool)
-    .await?;
+    if let Some(email) = user.email {
+        sign_up_sendy(&email).await?;
 
-    crate::database::models::DBUser::clear_caches(
-        &[(user.id.into(), None)],
-        &redis,
-    )
-    .await?;
-
-    Ok(HttpResponse::NoContent().finish())
+        Ok(HttpResponse::NoContent().finish())
+    } else {
+        Err(ApiError::InvalidInput(
+            "User does not have an email.".to_string(),
+        ))
+    }
 }
 
 #[get("email/subscribe")]
@@ -2418,7 +2438,7 @@ pub async fn get_newsletter_subscription_status(
     redis: Data<RedisPool>,
     session_queue: Data<AuthQueue>,
 ) -> Result<HttpResponse, ApiError> {
-    let user = get_full_user_from_headers(
+    let user = get_user_from_headers(
         &req,
         &**pool,
         &redis,
@@ -2428,16 +2448,16 @@ pub async fn get_newsletter_subscription_status(
     .await?
     .1;
 
-    let is_subscribed = user.is_subscribed_to_newsletter
-        || if let Some(email) = user.email {
-            check_sendy_subscription(&email).await?
-        } else {
-            false
-        };
-
-    Ok(HttpResponse::Ok().json(serde_json::json!({
-        "subscribed": is_subscribed
-    })))
+    if let Some(email) = user.email {
+        let is_subscribed = check_sendy_subscription(&email).await?;
+        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,14 +18,12 @@ pub fn config(cfg: &mut web::ServiceConfig) {
 }
 
 #[derive(Deserialize)]
-pub struct ProjectsRequestOptions {
+pub struct ResultCount {
     #[serde(default = "default_count")]
-    pub count: u16,
-    #[serde(default)]
-    pub offset: u32,
+    pub count: i16,
 }
 
-fn default_count() -> u16 {
+fn default_count() -> i16 {
     100
 }
 
@@ -33,7 +31,7 @@ pub async fn get_projects(
     req: HttpRequest,
     pool: web::Data<PgPool>,
     redis: web::Data<RedisPool>,
-    request_opts: web::Query<ProjectsRequestOptions>,
+    count: web::Query<ResultCount>,
     session_queue: web::Data<AuthQueue>,
 ) -> Result<HttpResponse, ApiError> {
     check_is_moderator_from_headers(
@@ -52,12 +50,10 @@ pub async fn get_projects(
         SELECT id FROM mods
         WHERE status = $1
         ORDER BY queued ASC
-        OFFSET $3
-        LIMIT $2
+        LIMIT $2;
         ",
         ProjectStatus::Processing.as_str(),
-        request_opts.count as i64,
-        request_opts.offset as i64
+        count.count 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: u16,
+    pub count: i16,
 }
 
-fn default_count() -> u16 {
+fn default_count() -> i16 {
     100
 }
 
@@ -34,10 +34,7 @@ pub async fn get_projects(
         req,
         pool.clone(),
         redis.clone(),
-        web::Query(internal::moderation::ProjectsRequestOptions {
-            count: count.count,
-            offset: 0,
-        }),
+        web::Query(internal::moderation::ResultCount { count: count.count }),
         session_queue,
     )
     .await