From cb1c8be87023008e7577a51da69d52de738d1367 Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:11:11 -0700
Subject: [PATCH] Moderation checklist (#1635)

* Moderation checklist

* Skip button

* Fix modpacks

* Fix modpack types not being sent

* Fixes

* remove explainer

* pass auth to analytics
---
 components/ui/ModerationChecklist.vue | 1035 +++++++++++++++++++++++++
 layouts/default.vue                   |    3 +
 pages/[type]/[id].vue                 |   15 +-
 pages/moderation/review.vue           |   24 +
 4 files changed, 1073 insertions(+), 4 deletions(-)
 create mode 100644 components/ui/ModerationChecklist.vue

diff --git a/components/ui/ModerationChecklist.vue b/components/ui/ModerationChecklist.vue
new file mode 100644
index 000000000..cb9fa8eae
--- /dev/null
+++ b/components/ui/ModerationChecklist.vue
@@ -0,0 +1,1035 @@
+<template>
+  <div class="card moderation-checklist">
+    <h1>Moderation checklist</h1>
+    <div v-if="done">
+      <p>You are done moderating this project! There are {{ futureProjects.length }} left.</p>
+    </div>
+    <div v-else-if="generatedMessage">
+      <p>
+        Enter your moderation message here. Remember to check the Moderation tab to answer any
+        questions an author might have!
+      </p>
+      <div class="markdown-editor-spacing">
+        <MarkdownEditor v-model="message" :placeholder="'Enter moderation message'" />
+      </div>
+    </div>
+    <div v-else-if="steps[currentStepIndex].id === 'modpack-permissions'">
+      <h2 v-if="modPackData">
+        Modpack permissions
+        <template v-if="modPackIndex + 1 <= modPackData.length">
+          ({{ modPackIndex + 1 }} / {{ modPackData.length }})
+        </template>
+      </h2>
+      <div v-if="!modPackData">Loading data...</div>
+      <div v-else-if="modPackData.length === 0">
+        <p>All permissions obtained. You may skip this step!</p>
+      </div>
+      <div v-else-if="!modPackData[modPackIndex]">
+        <p>All permission checks complete!</p>
+        <div class="input-group modpack-buttons">
+          <button class="btn" @click="modPackIndex -= 1">
+            <LeftArrowIcon />
+            Previous
+          </button>
+        </div>
+      </div>
+      <div v-else>
+        <div v-if="modPackData[modPackIndex].type === 'unknown'">
+          <p>What is the approval type of {{ modPackData[modPackIndex].file_name }}?</p>
+          <div class="input-group">
+            <button
+              v-for="(option, index) in fileApprovalTypes"
+              :key="index"
+              class="btn"
+              :class="{
+                'option-selected': modPackData[modPackIndex].status === option.id,
+              }"
+              @click="modPackData[modPackIndex].status = option.id"
+            >
+              {{ option.name }}
+            </button>
+          </div>
+          <template v-if="modPackData[modPackIndex].status !== 'unidentified'">
+            <div class="universal-labels"></div>
+            <label for="proof">
+              <span class="label__title">Proof</span>
+            </label>
+            <input
+              id="proof"
+              v-model="modPackData[modPackIndex].proof"
+              type="text"
+              autocomplete="off"
+              placeholder="Enter proof of status..."
+            />
+            <label for="link">
+              <span class="label__title">Link</span>
+            </label>
+            <input
+              id="link"
+              v-model="modPackData[modPackIndex].url"
+              type="text"
+              autocomplete="off"
+              placeholder="Enter link of project..."
+            />
+            <label for="title">
+              <span class="label__title">Title</span>
+            </label>
+            <input
+              id="title"
+              v-model="modPackData[modPackIndex].title"
+              type="text"
+              autocomplete="off"
+              placeholder="Enter title of project..."
+            />
+          </template>
+        </div>
+        <div v-else-if="modPackData[modPackIndex].type === 'flame'">
+          <p>
+            What is the approval type of {{ modPackData[modPackIndex].title }} (<a
+              :href="modPackData[modPackIndex].url"
+              target="_blank"
+              class="text-link"
+              >{{ modPackData[modPackIndex].url }}</a
+            >?
+          </p>
+          <div class="input-group">
+            <button
+              v-for="(option, index) in fileApprovalTypes"
+              :key="index"
+              class="btn"
+              :class="{
+                'option-selected': modPackData[modPackIndex].status === option.id,
+              }"
+              @click="modPackData[modPackIndex].status = option.id"
+            >
+              {{ option.name }}
+            </button>
+          </div>
+        </div>
+        <div
+          v-if="
+            ['unidentified', 'no', 'with-attribution'].includes(modPackData[modPackIndex].status)
+          "
+        >
+          <p v-if="modPackData[modPackIndex].status === 'unidentified'">
+            Does this project provide identification and permission for
+            <strong>{{ modPackData[modPackIndex].file_name }}</strong
+            >?
+          </p>
+          <p v-else-if="modPackData[modPackIndex].status === 'with-attribution'">
+            Does this project provide attribution for
+            <strong>{{ modPackData[modPackIndex].file_name }}</strong
+            >?
+          </p>
+          <p v-else>
+            Does this project provide proof of permission for
+            <strong>{{ modPackData[modPackIndex].file_name }}</strong
+            >?
+          </p>
+          <div class="input-group">
+            <button
+              v-for="(option, index) in filePermissionTypes"
+              :key="index"
+              class="btn"
+              :class="{
+                'option-selected': modPackData[modPackIndex].approved === option.id,
+              }"
+              @click="modPackData[modPackIndex].approved = option.id"
+            >
+              {{ option.name }}
+            </button>
+          </div>
+        </div>
+        <div class="input-group modpack-buttons">
+          <button class="btn" :disabled="modPackIndex <= 0" @click="modPackIndex -= 1">
+            <LeftArrowIcon />
+            Previous
+          </button>
+          <button
+            class="btn btn-blue"
+            :disabled="!modPackData[modPackIndex].status"
+            @click="modPackIndex += 1"
+          >
+            <RightArrowIcon />
+            Next project
+          </button>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <h2>{{ steps[currentStepIndex].question }}</h2>
+      <template v-if="steps[currentStepIndex].rules && steps[currentStepIndex].rules.length > 0">
+        <strong>Rules guidance:</strong>
+        <ul>
+          <li v-for="(rule, index) in steps[currentStepIndex].rules" :key="index">
+            {{ rule }}
+          </li>
+        </ul>
+      </template>
+      <template
+        v-if="steps[currentStepIndex].examples && steps[currentStepIndex].examples.length > 0"
+      >
+        <strong>Examples of what to reject:</strong>
+        <ul>
+          <li v-for="(example, index) in steps[currentStepIndex].examples" :key="index">
+            {{ example }}
+          </li>
+        </ul>
+      </template>
+      <template
+        v-if="steps[currentStepIndex].exceptions && steps[currentStepIndex].exceptions.length > 0"
+      >
+        <strong>Exceptions:</strong>
+        <ul>
+          <li v-for="(exception, index) in steps[currentStepIndex].exceptions" :key="index">
+            {{ exception }}
+          </li>
+        </ul>
+      </template>
+      <p v-if="steps[currentStepIndex].id === 'title'">
+        <strong>Title:</strong> {{ project.title }}
+      </p>
+      <p v-if="steps[currentStepIndex].id === 'slug'"><strong>Slug:</strong> {{ project.slug }}</p>
+      <p v-if="steps[currentStepIndex].id === 'summary'">
+        <strong>Summary:</strong> {{ project.description }}
+      </p>
+      <p v-if="steps[currentStepIndex].id === 'links'">
+        <template v-if="project.issues_url">
+          <strong>Issues: </strong>
+          <a class="text-link" :href="project.issues_url">{{ project.issues_url }}</a> <br />
+        </template>
+        <template v-if="project.source_url">
+          <strong>Source: </strong>
+          <a class="text-link" :href="project.source_url">{{ project.source_url }}</a> <br />
+        </template>
+        <template v-if="project.wiki_url">
+          <strong>Wiki: </strong>
+          <a class="text-link" :href="project.wiki_url">{{ project.wiki_url }}</a> <br />
+        </template>
+        <template v-if="project.discord_url">
+          <strong>Discord: </strong>
+          <a class="text-link" :href="project.discord_url">{{ project.discord_url }}</a>
+          <br />
+        </template>
+        <template v-for="(donation, index) in project.donation_urls" :key="index">
+          <strong>{{ donation.platform }}: </strong>
+          <a class="text-link" :href="donation.url">{{ donation.url }}</a>
+          <br />
+        </template>
+      </p>
+      <p v-if="steps[currentStepIndex].id === 'categories'">
+        <strong>Categories:</strong>
+        <Categories
+          :categories="project.categories.concat(project.additional_categories)"
+          :type="project.actualProjectType"
+          class="categories"
+        />
+      </p>
+      <p v-if="steps[currentStepIndex].id === 'side-types'">
+        <strong>Client side:</strong> {{ project.client_side }} <br />
+        <strong>Server side:</strong> {{ project.server_side }}
+      </p>
+      <div class="options input-group">
+        <button
+          v-for="(option, index) in steps[currentStepIndex].options"
+          :key="index"
+          class="btn"
+          :class="{
+            'option-selected':
+              selectedOptions[steps[currentStepIndex].id] &&
+              selectedOptions[steps[currentStepIndex].id].find((x) => x.name === option.name),
+          }"
+          @click="toggleOption(steps[currentStepIndex].id, option)"
+        >
+          {{ option.name }}
+        </button>
+      </div>
+      <div
+        v-if="
+          selectedOptions[steps[currentStepIndex].id] &&
+          selectedOptions[steps[currentStepIndex].id].length > 0
+        "
+        class="inputs universal-labels"
+      >
+        <div
+          v-for="(option, index) in selectedOptions[steps[currentStepIndex].id].filter(
+            (x) => x.fillers && x.fillers.length > 0
+          )"
+          :key="index"
+        >
+          <div v-for="(filler, idx) in option.fillers" :key="idx">
+            <label :for="filler.id">
+              <span class="label__title">
+                {{ filler.question }}
+                <span v-if="filler.required" class="required">*</span>
+              </span>
+            </label>
+            <div v-if="filler.large" class="markdown-editor-spacing">
+              <MarkdownEditor v-model="filler.value" :placeholder="'Enter moderation message'" />
+            </div>
+            <input v-else :id="filler.id" v-model="filler.value" type="text" autocomplete="off" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="input-group modpack-buttons">
+      <button v-if="!done" class="btn skip-btn" @click="goToNextProject">
+        <ExitIcon />
+        Skip
+      </button>
+      <button v-if="currentStepIndex > 0" class="btn" @click="previousPage() && !done">
+        <LeftArrowIcon /> Previous
+      </button>
+      <button
+        v-if="currentStepIndex < steps.length - 1 && !done"
+        class="btn btn-primary"
+        @click="nextPage()"
+      >
+        <RightArrowIcon /> Next
+      </button>
+      <button
+        v-else-if="!generatedMessage"
+        class="btn btn-primary"
+        :disabled="loadingMessage"
+        @click="generateMessage"
+      >
+        <UpdatedIcon /> Generate message
+      </button>
+      <template v-if="generatedMessage && !done">
+        <button class="btn btn-green" @click="sendMessage(project.requested_status ?? 'approved')">
+          <CheckIcon /> Approve
+        </button>
+        <div class="joined-buttons">
+          <button class="btn btn-danger" @click="sendMessage('rejected')">
+            <CrossIcon /> Reject
+          </button>
+          <OverflowMenu
+            class="btn btn-danger btn-dropdown-animation icon-only"
+            position="top"
+            direction="left"
+            :options="[
+              {
+                id: 'withhold',
+                color: 'danger',
+                action: () => sendMessage('withheld'),
+                hoverFilled: true,
+              },
+            ]"
+          >
+            <DropdownIcon style="rotate: 180deg" />
+            <template #withhold> <EyeOffIcon /> Withhold </template>
+          </OverflowMenu>
+        </div>
+      </template>
+      <button v-if="done" class="btn btn-primary next-project" @click="goToNextProject">
+        Next project
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  LeftArrowIcon,
+  MarkdownEditor,
+  RightArrowIcon,
+  UpdatedIcon,
+  CheckIcon,
+  OverflowMenu,
+  DropdownIcon,
+  XIcon as CrossIcon,
+  EyeOffIcon,
+  ExitIcon,
+} from 'omorphia'
+import Categories from '~/components/ui/search/Categories.vue'
+
+const props = defineProps({
+  project: {
+    type: Object,
+    default: null,
+  },
+  resetProject: {
+    type: Function,
+    required: true,
+    default: () => {},
+  },
+})
+
+const steps = computed(() =>
+  [
+    {
+      id: 'title',
+      question: 'Is this title free of useless information?',
+      shown: true,
+      rules: [
+        'No unnecessary data (mod loaders, game versions, etc)',
+        'No emojis / useless text decorators',
+      ],
+      examples: [
+        '✅ NoobMod [1.8+] • Kill all noobs in your world!',
+        '[FABRIC] My Optimization Pack',
+        '[1.17-1.20.4] LagFixer ⚡️ Best Performance Solution! ⭕ Well optimized ✅ Folia supported! (BETA)',
+      ],
+      exceptions: [
+        'Loaders and/or game versions allowed if this project is a port of another mod. (ex: Gravestones for 1.20)',
+        'Loaders allowed if they choose to separate their project into Forge and Fabric variants (discouraged)',
+      ],
+      options: [
+        {
+          name: 'Contains useless info',
+          resultingMessage: `## Misuse of Title
+Per section 5.2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) we ask that you limit the title to just the name of your project. Additional information, such as themes, tags, supported versions or loaders, etc. should be saved for the Summary or Description. When changing your project title, remember to also ensure that your project slug (URL) matches and accurately represents your project.`,
+        },
+      ],
+    },
+    {
+      id: 'slug',
+      question: 'Is the slug accurate and appropriate?',
+      shown: true,
+      rules: ['Matches title / not misleading (acronyms are OK)'],
+      options: [
+        {
+          name: 'Misused',
+          resultingMessage: `## Misuse of Slug
+Per section 5.2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) your project slug (URL) must accurately represent your project. `,
+        },
+      ],
+    },
+    {
+      id: 'summary',
+      question: `Is the project's summary sufficient?`,
+      shown: true,
+      rules: [
+        'The summary should provide a brief overview of your project that informs and entices users.',
+        `Should not be the exact same as the project's title`,
+        'Should not include any markdown formatting.',
+      ],
+      options: [
+        {
+          name: 'Insufficient',
+          resultingMessage: `## Insufficient Summary
+Per section 5.3 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) Your project summary should provide a brief overview of your project that informs and entices users.
+This is the first thing most people will see about your mod other than the Logo, so it's important it be accurate, reasonably detailed, and exciting.`,
+        },
+        {
+          name: 'Repeat of title',
+          resultingMessage: `## Insufficient Summary
+Per section 5.3 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) your Summary can not be the same as your project's Title. Your project summary should provide a brief overview of your project that informs and entices users.
+This is the first thing most people will see about your mod other than the Logo, so it's important it be accurate, reasonably detailed, and exciting.`,
+        },
+        {
+          name: 'Formatting',
+          resultingMessage: `## Insufficient Summary
+Per section 5.3 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) your Summary can not include any extra formatting such as lists, or links. Your project summary should provide a brief overview of your project that informs and entices users.
+This is the first thing most people will see about your mod other than the Logo, so it's important it be accurate, reasonably detailed, and exciting.`,
+        },
+      ],
+    },
+    {
+      id: 'description',
+      question: `Is the project's description sufficient?`,
+      navigate: `/${props.project.project_type}/${props.project.slug}`,
+      shown: true,
+      rules: [
+        'Should answer what the project specifically does or adds ',
+        'Should answer why someone should want to download the project ',
+        'Should indicate any other critical information the user must know before downloading',
+        'Should be accessible (no fancy characters / non-standard text, no image-only descriptions, must have English component, etc)',
+      ],
+      exceptions: [
+        'Modpacks generally have a more lax requirement to qualify as a sufficient description. Generally, a mod list and a short explainer is approvable.',
+      ],
+      options: [
+        {
+          name: 'Insufficient',
+          resultingMessage: `## Insufficient Description
+Per section 2.1 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#general-expectations) your project's Description should clearly inform the reader of the content, purpose, and appeal of your project.
+Currently, it looks like there are some missing details.
+%EXPLAINER%`,
+          fillers: [
+            {
+              id: 'EXPLAINER',
+              question: 'Please elaborate on how the author can improve their description.',
+              large: true,
+            },
+          ],
+        },
+        {
+          name: 'Non-english',
+          resultingMessage: `## No English Description
+Per section 2.2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#accessibility) a project's Summary and Description must be in English, unless meant exclusively for non-English use, such as translations.  You may include your non-English Description if you would like but we ask that you also add an English translation of the Description to your Description page, if you would like to use an online translator to do this, we recommend [DeepL](https://www.deepl.com/translator).`,
+        },
+        {
+          name: 'Unfinished',
+          resultingMessage: `## Unfinished Description
+It looks like your project Description is still a WIP seeing as %REASON%. Please remember to submit only when ready, as it is important your project meets the requirements of Section 2.1 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#general-expectations), if you have any questions on this feel free to reach out!`,
+        },
+        {
+          name: 'Headers as body text',
+          resultingMessage: `## Description Accessibility
+In accordance with section 2.2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules) we request that \`# header\`s not be used as body text. Headers are interpreted differently by screen-readers and thus should generally only be used for things like separating sections of your Description. If you would like to emphasize a particular sentence or paragraph, instead consider using \`**bold**\` text using the **B** button above the text editor.`,
+        },
+        {
+          name: 'Image-only',
+          resultingMessage: `## Image Descriptions
+In accordance with section 2.2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules) we ask that you provide a text alternative to your current Description. It is important that your Description contains enough detail about your project that a user can have a full understanding of it from text alone. A text-based transcription allows for those using screen readers, and users with slow internet connections unable to load images to be able to access the contents of your Description. This also acts as a backup in case the image in your Description ever goes offline for some reason.
+We appreciate how much effort you put into your Description, but accessibility is important to us at Modrinth, if you would like you could put the transcription of your Description entirely in a \`details\` tag, so as to not spoil the visuals of your Description.`,
+        },
+        {
+          name: 'Non-standard text',
+          resultingMessage: `## Description Accessibility
+Per section 2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#clear-and-honest-function) your description must be plainly readable and accessible. Using non-standard text characters like Zalgo or "fancy text" in place of text anywhere in your project, including the Description, Summary, or Title can make your project pages inaccessible. This is important for users who rely on Screen Readers and for search engines in order to provide relevant results to users. Please remove any instances of this type of text.`,
+        },
+      ],
+    },
+    {
+      id: 'links',
+      question: `Are the project's links accessible and not misleading?`,
+      shown:
+        props.project.issues_url ||
+        props.project.source_url ||
+        props.project.wiki_url ||
+        props.project.discord_url ||
+        props.project.donation_urls.length > 0,
+      rules: [
+        `All links must be accessible.`,
+        `All links must correspond correctly with a label (ex: Discord link should not go to a YouTube channel)`,
+      ],
+      options: [
+        {
+          name: 'Links are misused',
+          resultingMessage: `## Misuse of External Resources
+Per section 5.4 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) all links must lead to correctly labeled publicly available resources that are directly related to your project.`,
+        },
+        {
+          name: 'Not accessible (source)',
+          resultingMessage: `## Unreachable Links
+Per section 5.4 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) all links must lead to correctly labeled publicly available resources that are directly related to your project.
+Currently, your Source link directs to a Page Not Found error, likely because your repository is private, make sure to make your repository public before resubmitting your project!`,
+        },
+        {
+          name: 'Not accessible (other)',
+          resultingMessage: `## Unreachable Links
+Per section 5.4 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) all links must lead to correctly labeled publicly available resources that are directly related to your project.
+Currently, your %LINK% link is inaccessible!`,
+          fillers: [
+            {
+              id: 'LINK',
+              question: 'Please specify the link type that is inaccessible.',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'categories',
+      question: `Are the project's tags/categories accurate?`,
+      shown: props.project.categories.length > 0 || props.project.additional_categories.length > 0,
+      options: [
+        {
+          name: 'Inaccurate',
+          resultingMessage: `## Misuse of Tags
+Per section 5.1 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous), it is important that the metadata of your projects is accurate. Including that selected tags honestly represent your project.`,
+        },
+      ],
+    },
+    {
+      id: 'side-types',
+      question: `Is the project's environment information accurate?`,
+      shown: ['mod', 'modpack'].includes(props.project.project_type),
+      options: [
+        {
+          name: 'Inaccurate (modpack)',
+          resultingMessage: `## Incorrect Environment Information
+Per section 5.1 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous), it is important that the metadata of your projects is accurate, including whether the project runs on the client or server side.
+For a brief rundown of how this works:
+Some modpacks can be client-side, usually aimed at providing utility and optimization while allowing the player to join an unmodded server, for instance, [Fabulously Optimized](https://modrinth.com/modpack/fabulously-optimized).
+Most other modpacks that change how the game is played are going to be required on both the client and server, like the modpack [Dying Light](https://modrinth.com/modpack/dying-light).
+When in doubt, test for yourself or check the requirements of the mods in your pack.`,
+        },
+        {
+          name: 'Inaccurate (mod)',
+          resultingMessage: `## Environment Information
+Per section 5.1 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous), it is important that the metadata of your projects is accurate, including whether the project runs on the client or server side.
+For a brief rundown of how this works:
+**Client side** refers to a mod that is only required by the client, like [Sodium](https://modrinth.com/mod/sodium).
+**Server side** mods change the behavior of the server without the client needing the mod, like Datapacks, recipes, or server-side behaviors, like [Falling Tree](https://modrinth.com/mod/fallingtree).
+A mod that adds features, entities, or new blocks and items, generally will be required on **both** the server and the client, for example [Cobblemon](https://modrinth.com/mod/cobblemon).
+However, it looks like your project falls into the latter category and should be *required* on **both** the client and server sides.
+This has been changed accordingly for your convenience. In the future, you can edit your project's environment information on its settings page under "Client-side" and "Server-side".
+0`,
+        },
+      ],
+    },
+    {
+      id: 'gallery',
+      navigate: `/${props.project.project_type}/${props.project.slug}/gallery`,
+      question: `Are the project's gallery images relevant?`,
+      shown: props.project.gallery.length > 0,
+      options: [
+        {
+          name: 'Not relevant',
+          resultingMessage: `## Unrelated Gallery Images
+Per section 5.5 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) any images in your project's Gallery must be relevant to the project and also include a Title.`,
+        },
+      ],
+    },
+    {
+      id: 'versions',
+      navigate: `/${props.project.project_type}/${props.project.slug}/versions`,
+      question: `Are these project's files correct?`,
+      shown: !['modpack'].includes(props.project.project_type),
+      rules: [
+        'A multi-loader project should not use additional files for more loaders',
+        'Modpacks must be uploaded as MRPACK files. Be sure to check the project type is modpack (if not their file is malformed)',
+      ],
+      options: [
+        {
+          name: 'Incorrect additional files',
+          resultingMessage: `## Incorrect Use of Additional Files
+It looks like you've uploaded multiple \`mod.jar\` files to one Version as Additional Files. Per section 5.7 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) each Version of your project must include only one \`mod.jar\` that corresponds to its respective Minecraft and loader versions. This allows users to easily find and download the file they need for the version they're on with ease. The Additional Files feature can be used for things like a \`Sources.jar\`.
+Please upload each version of your mod separately, thank you.`,
+        },
+        {
+          name: 'Invalid file type (modpacks)',
+          resultingMessage: `## Modpacks on Modrinth
+It looks like you've uploaded your Modpack as a \`.zip\`, unfortunately, this is invalid and is why your project type is "Mod". I recommend taking a look at our support page about [Modrinth Modpacks](https://support.modrinth.com/en/articles/8802250-modpacks-on-modrinth), and once you're ready feel free to resubmit your project as a \`.mrpack\`. Don't forget to delete the old files from your Versions!`,
+        },
+      ],
+    },
+    {
+      id: 'copyright',
+      question: `Does the author have proper permissions to post this project?`,
+      shown: true,
+      rules: [
+        `Perform a quick search to make sure someone is not reuploading content.`,
+        `If the authors don't align or it seems like a re-post, reject and ask the user for proof they have permission.`,
+      ],
+      options: [
+        {
+          name: 'Re-upload',
+          resultingMessage: `## Reuploads are forbidden
+This project appears to contain content from %ORIGINAL_PROJECT% by %ORIGINAL_AUTHOR%.
+Per section 4 of [Modrinth's Content Rules](https://modrinth.com/legal/rules) this is strictly forbidden.
+If you believe this is an error, or you can verify you are the creator and rightful owner of this content please let us know. Otherwise, we ask that you **do not resubmit this project**.`,
+          fillers: [
+            {
+              id: 'ORIGINAL_PROJECT',
+              question: 'What is the title of the original project?',
+              required: true,
+            },
+            {
+              id: 'ORIGINAL_AUTHOR',
+              question: 'What is the author of the original project?',
+              required: true,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'rule-following',
+      question: `Does this project follow our content rules?`,
+      navigate: `/${props.project.project_type}/${props.project.slug}`,
+      shown: true,
+      rules: [
+        'Should not be a cheat/hack (without a server-side opt-out)',
+        'Should not contain sexually explicit / inappropriate content',
+        'Should not be excessively profane',
+        'Should not promote any illegal activity (including illicit drugs + substances)',
+        'Anything else infringing of our content rules (see 1.1-12, 3.1-3)',
+      ],
+      options: [
+        {
+          name: 'No',
+          resultingMessage: `%MESSAGE%`,
+          fillers: [
+            {
+              id: 'MESSAGE',
+              question: 'Please explain to the user how it infringes on our content rules.',
+              large: true,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'modpack-permissions',
+      question: 'Modpack permissions',
+      shown: ['modpack'].includes(props.project.project_type),
+      options: [],
+    },
+    {
+      id: 'private-server',
+      question: `Is this pack for a private server?`,
+      shown: ['modpack'].includes(props.project.project_type),
+      rules: [
+        'Select this if you are withholding this pack since it is for a private server (for circumstances you would normally reject for).',
+      ],
+      options: [
+        {
+          name: 'Private server (withhold)',
+          resultingMessage: `## Private Server
+Under normal circumstances, your project would be rejected due to the issues listed above. However, since your project is intended for a specific server and not for general use, these requirements will be waived and your project will be withheld. This means it will be unlisted and accessible only through a direct link, without appearing in public search results. If you're fine with this, no further action is needed. Otherwise, feel free to resubmit once all issues have been addressed. `,
+        },
+      ],
+    },
+  ].filter((x) => x.shown)
+)
+
+const currentStepIndex = ref(0)
+const selectedOptions = ref({})
+
+function toggleOption(stepId, option) {
+  if (!selectedOptions.value[stepId]) {
+    selectedOptions.value[stepId] = []
+  }
+
+  const index = selectedOptions.value[stepId].findIndex((x) => x.name === option.name)
+  if (index === -1) {
+    selectedOptions.value[stepId].push(option)
+  } else {
+    selectedOptions.value[stepId].splice(index, 1)
+  }
+
+  const instance = getCurrentInstance()
+  instance?.proxy?.$forceUpdate()
+}
+
+function previousPage() {
+  currentStepIndex.value -= 1
+  generatedMessage.value = false
+
+  if (steps.value[currentStepIndex.value].navigate) {
+    navigateTo(steps.value[currentStepIndex.value].navigate)
+  }
+}
+
+async function nextPage() {
+  currentStepIndex.value += 1
+
+  if (steps.value[currentStepIndex.value].navigate) {
+    navigateTo(steps.value[currentStepIndex.value].navigate)
+  }
+
+  if (steps.value[currentStepIndex.value].id === 'modpack-permissions') {
+    await initializeModPackData()
+  }
+}
+
+async function initializeModPackData() {
+  startLoading()
+  try {
+    const raw = await useBaseFetch(`moderation/project/${props.project.id}`, { internal: true })
+    const projects = []
+
+    for (const [hash, fileName] of Object.entries(raw.unknown_files)) {
+      projects.push({
+        type: 'unknown',
+        hash,
+        file_name: fileName,
+        status: null,
+        approved: null,
+      })
+    }
+
+    for (const [hash, file] of Object.entries(raw.flame_files)) {
+      projects.push({
+        type: 'flame',
+        hash,
+        file_name: file.file_name,
+        status: null,
+        title: file.title,
+        id: file.id,
+        url: file.url,
+        approved: null,
+      })
+    }
+
+    for (const [hash, file] of Object.entries(raw.identified)) {
+      if (file.status !== 'yes' && file.status !== 'with-attribution-and-source') {
+        projects.push({
+          type: 'identified',
+          hash,
+          file_name: file.file_name,
+          status: file.status,
+          approved: null,
+        })
+      }
+    }
+
+    modPackData.value = projects
+  } catch (err) {
+    const app = useNuxtApp()
+    app.$notify({
+      group: 'main',
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+  stopLoading()
+}
+
+const modPackData = ref(null)
+const modPackIndex = ref(0)
+
+const fileApprovalTypes = ref([
+  {
+    id: 'yes',
+    name: 'Yes',
+  },
+  {
+    id: 'with-attribution-and-source',
+    name: 'With attribution and source',
+  },
+  {
+    id: 'with-attribution',
+    name: 'With attribution',
+  },
+  {
+    id: 'no',
+    name: 'No',
+  },
+  {
+    id: 'permanent-no',
+    name: 'Permanent no',
+  },
+  {
+    id: 'unidentified',
+    name: 'Unidentified',
+  },
+])
+const filePermissionTypes = ref([
+  {
+    id: true,
+    name: 'Yes',
+  },
+  {
+    id: false,
+    name: 'No',
+  },
+])
+
+const message = ref('')
+const generatedMessage = ref(false)
+const loadingMessage = ref(false)
+async function generateMessage() {
+  message.value = ''
+  loadingMessage.value = true
+  function printMods(mods, msg) {
+    if (mods.length === 0) {
+      return
+    }
+
+    message.value += msg
+    message.value += '\n\n'
+
+    for (const mod of mods) {
+      message.value += `- ${mod}\n`
+    }
+  }
+
+  if (modPackData.value && modPackData.value.length > 0) {
+    const updateProjects = {}
+
+    const attributeMods = []
+    const noMods = []
+    const permanentNoMods = []
+    const unidentifiedMods = []
+
+    for (const project of modPackData.value) {
+      if (project.type === 'unknown') {
+        updateProjects[project.hash] = {
+          type: 'unknown',
+          status: project.status,
+          proof: project.proof,
+          title: project.title,
+          link: project.url,
+        }
+      }
+
+      if (project.type === 'flame') {
+        updateProjects[project.hash] = {
+          type: 'flame',
+          status: project.status,
+          id: project.id,
+          link: project.url,
+          title: project.title,
+        }
+      }
+
+      if (project.status === 'with-attribution' && !project.approved) {
+        attributeMods.push(project.file_name)
+      } else if (project.status === 'unidentified' && !project.approved) {
+        unidentifiedMods.push(project.file_name)
+      } else if (project.status === 'no' && !project.approved) {
+        noMods.push(project.file_name)
+      } else if (project.status === 'permanent-no') {
+        permanentNoMods.push(project.file_name)
+      }
+    }
+
+    if (updateProjects) {
+      try {
+        await useBaseFetch(`moderation/project/${props.project.id}`, {
+          internal: true,
+          method: 'POST',
+          body: {
+            judgements: updateProjects,
+          },
+        })
+      } catch (err) {
+        const app = useNuxtApp()
+        app.$notify({
+          group: 'main',
+          title: 'An error occurred',
+          text: err.data ? err.data.description : err,
+          type: 'error',
+        })
+      }
+    }
+
+    if (
+      attributeMods.length > 0 ||
+      noMods.length > 0 ||
+      permanentNoMods.length > 0 ||
+      unidentifiedMods.length > 0
+    ) {
+      message.value += '## Copyrighted Content \n'
+
+      printMods(
+        attributeMods,
+        "The following content has attribution requirements, meaning that you must link back to the page where you originally found this content in your modpack description or version changelog (e.g. linking a mod's CurseForge page if you got it from CurseForge):"
+      )
+      printMods(
+        noMods,
+        'The following content is not allowed in Modrinth modpacks due to licensing restrictions. Please contact the author(s) directly for permission or remove the content from your modpack:'
+      )
+      printMods(
+        permanentNoMods,
+        "The following content is not allowed in Modrinth modpacks, regardless of permission obtained. This may be because it breaks Modrinth's content rules or because the authors, upon being contacted for permission, have declined. Please remove the content from your modpack:"
+      )
+      printMods(
+        unidentifiedMods,
+        'The following content could not be identified. Please provide proof of its origin along with proof that you have permission to include it:'
+      )
+
+      message.value += '\n\n'
+    }
+  }
+
+  for (const options of Object.values(selectedOptions.value)) {
+    for (const option of options) {
+      let addonMessage = option.resultingMessage
+
+      if (option.fillers && option.fillers.length > 0) {
+        for (const filler of option.fillers) {
+          addonMessage = addonMessage.replace(new RegExp(`%${filler.id}%`, 'g'), filler.value ?? '')
+        }
+      }
+
+      message.value += addonMessage
+      message.value += '\n\n'
+    }
+  }
+  generatedMessage.value = true
+  loadingMessage.value = false
+  currentStepIndex.value += 1
+  await navigateTo(`/${props.project.project_type}/${props.project.slug}/moderation`)
+}
+
+const done = ref(false)
+async function sendMessage(status) {
+  startLoading()
+  try {
+    await useBaseFetch(`project/${props.project.id}`, {
+      method: 'PATCH',
+      body: {
+        status,
+      },
+    })
+
+    if (message.value) {
+      await useBaseFetch(`thread/${props.project.thread_id}`, {
+        method: 'POST',
+        body: {
+          body: {
+            type: 'text',
+            body: message.value,
+          },
+        },
+      })
+    }
+
+    await props.resetProject()
+    done.value = true
+  } catch (err) {
+    const app = useNuxtApp()
+    app.$notify({
+      group: 'main',
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+  stopLoading()
+}
+
+const futureProjects = ref([])
+
+if (process.client && history && history.state && history.state.projects) {
+  futureProjects.value = history.state.projects
+}
+
+async function goToNextProject() {
+  const router = useRouter()
+
+  const project = futureProjects.value[0]
+
+  if (!project) {
+    await navigateTo('/moderation/review')
+  }
+
+  await router.push({
+    name: 'type-id',
+    params: {
+      type: 'project',
+      id: project,
+    },
+    state: {
+      showChecklist: true,
+      projects: futureProjects.value.slice(1),
+    },
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.moderation-checklist {
+  position: sticky;
+  bottom: 0;
+  left: 100vw;
+  z-index: 100;
+  border: 1px solid var(--color-bg-inverted);
+  width: 600px;
+
+  .skip-btn {
+    margin-right: auto;
+  }
+
+  .next-project {
+    margin-left: auto;
+  }
+
+  .modpack-buttons {
+    margin-top: 1rem;
+  }
+
+  .option-selected {
+    color: var(--color-contrast);
+    background-color: var(--color-brand-highlight);
+    box-shadow: inset 0 0 0 transparent, 0 0 0 2px var(--color-brand);
+  }
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index a673f8938..89adc1309 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -702,6 +702,9 @@ function runAnalytics() {
       body: {
         url: window.location.href,
       },
+      headers: {
+        Authorization: auth.token,
+      },
     })
       .then(() => {})
       .catch(() => {})
diff --git a/pages/[type]/[id].vue b/pages/[type]/[id].vue
index e4d9ba944..ee63cc937 100644
--- a/pages/[type]/[id].vue
+++ b/pages/[type]/[id].vue
@@ -415,10 +415,6 @@
           :auth="auth"
           :tags="tags"
         />
-        <MessageBanner v-else-if="project.status === 'withheld'" message-type="warning">
-          {{ project.title }} has been removed from search by Modrinth's moderators. Please use
-          {{ project.title }} at your own risk.
-        </MessageBanner>
         <MessageBanner v-if="project.status === 'archived'" message-type="warning">
           {{ project.title }} has been archived. {{ project.title }} will not receive any further
           updates unless the author decides to unarchive the project.
@@ -755,6 +751,11 @@
         </div>
       </div>
     </div>
+    <ModerationChecklist
+      v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
+      :project="project"
+      :reset-project="resetProject"
+    />
   </div>
 </template>
 <script setup>
@@ -815,6 +816,7 @@ import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import { userCollectProject } from '~/composables/user.js'
 import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
 import OrganizationIcon from '~/assets/images/utils/organization.svg'
+import ModerationChecklist from '~/components/ui/ModerationChecklist.vue'
 
 const data = useNuxtApp()
 const route = useRoute()
@@ -1207,6 +1209,11 @@ async function copyId() {
 }
 
 const collapsedChecklist = ref(false)
+
+const showModerationChecklist = ref(false)
+if (process.client && history && history.state && history.state.showChecklist) {
+  showModerationChecklist.value = true
+}
 </script>
 <style lang="scss" scoped>
 .header {
diff --git a/pages/moderation/review.vue b/pages/moderation/review.vue
index 580247197..9c32ef1b8 100644
--- a/pages/moderation/review.vue
+++ b/pages/moderation/review.vue
@@ -13,6 +13,13 @@
       <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()"
+      >
+        <ModerationIcon /> Start moderating
+      </button>
     </div>
     <p v-if="projectType !== 'all'" class="project-count">
       Showing {{ projectsFiltered.length }} {{ projectTypePlural }} of {{ projects.length }} total
@@ -101,6 +108,7 @@ import EyeIcon from '~/assets/images/utils/eye.svg'
 import SortAscIcon from '~/assets/images/utils/sort-asc.svg'
 import SortDescIcon from '~/assets/images/utils/sort-desc.svg'
 import WarningIcon from '~/assets/images/utils/issues.svg'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg'
 import Badge from '~/components/ui/Badge.vue'
 import { formatProjectType } from '~/plugins/shorthands.js'
 
@@ -186,6 +194,22 @@ if (projects.value) {
     })
   }
 }
+async function goToProjects() {
+  const router = useRouter()
+
+  const project = projectsFiltered.value[0]
+  await router.push({
+    name: 'type-id',
+    params: {
+      type: project.project_type,
+      id: project.slug ? project.slug : project.id,
+    },
+    state: {
+      showChecklist: true,
+      projects: projectsFiltered.value.slice(1).map((x) => (x.slug ? x.slug : x.id)),
+    },
+  })
+}
 </script>
 <style lang="scss" scoped>
 .project {