From ca63c09a0d6a0a1528a86000d003beb24cf3ecd9 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 19 Feb 2025 22:00:52 -0800
Subject: [PATCH] Enhance moderation checklist (#3273)

---
 apps/frontend/src/assets/styles/layout.scss   |  52 ++
 .../src/components/ui/Collapsible.vue         |  39 +
 .../src/components/ui/ModerationChecklist.vue | 694 +++++++++---------
 apps/frontend/src/composables/featureFlags.ts |   1 +
 apps/frontend/src/pages/[type]/[id].vue       |  22 +-
 5 files changed, 475 insertions(+), 333 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/Collapsible.vue

diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss
index d9924ac1f..151066667 100644
--- a/apps/frontend/src/assets/styles/layout.scss
+++ b/apps/frontend/src/assets/styles/layout.scss
@@ -133,6 +133,19 @@
     "sidebar"
     / 100%;
 
+  .normal-page__ultimate-sidebar {
+    grid-area: ultimate-sidebar;
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 100;
+    max-width: calc(100% - 2rem);
+
+    > div {
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+    }
+  }
+
   @media screen and (min-width: 1024px) {
     &.sidebar {
       grid-template:
@@ -156,6 +169,45 @@
     }
   }
 
+  @media screen and (min-width: 1400px) {
+    &.ultimate-sidebar {
+      max-width: calc(80rem + 0.75rem + 600px);
+
+      grid-template:
+        "header header ultimate-sidebar" auto
+        "content sidebar ultimate-sidebar" auto
+        "content dummy ultimate-sidebar" 1fr
+        / 1fr 18.75rem auto;
+
+      .normal-page__header {
+        max-width: 80rem;
+      }
+
+      .normal-page__ultimate-sidebar {
+        position: sticky;
+        top: 4.5rem;
+        bottom: unset;
+        right: unset;
+        z-index: unset;
+        align-self: start;
+        display: flex;
+        height: calc(100vh - 4.5rem * 2);
+
+        > div {
+          box-shadow: none;
+        }
+      }
+
+      &.alt-layout {
+        grid-template:
+          "ultimate-sidebar header header" auto
+          "ultimate-sidebar sidebar content" auto
+          "ultimate-sidebar dummy content" 1fr
+          / auto 18.75rem 1fr;
+      }
+    }
+  }
+
   .normal-page__sidebar {
     grid-area: sidebar;
   }
diff --git a/apps/frontend/src/components/ui/Collapsible.vue b/apps/frontend/src/components/ui/Collapsible.vue
new file mode 100644
index 000000000..e930a26a6
--- /dev/null
+++ b/apps/frontend/src/components/ui/Collapsible.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="accordion-content" :class="(baseClass ?? ``) + (collapsed ? `` : ` open`)">
+    <div v-bind="$attrs" :inert="collapsed">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  baseClass?: string;
+  collapsed: boolean;
+}>();
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+<style scoped>
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-in-out;
+}
+
+@media (prefers-reduced-motion) {
+  .accordion-content {
+    transition: none !important;
+  }
+}
+
+.accordion-content.open {
+  grid-template-rows: 1fr;
+}
+
+.accordion-content > div {
+  overflow: hidden;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/ModerationChecklist.vue b/apps/frontend/src/components/ui/ModerationChecklist.vue
index c7206fb42..41d2bc196 100644
--- a/apps/frontend/src/components/ui/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/ModerationChecklist.vue
@@ -1,329 +1,362 @@
 <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
+    class="moderation-checklist flex w-[600px] max-w-full flex-col rounded-2xl border-[1px] border-solid border-orange bg-bg-raised p-4 transition-all delay-200 duration-200 ease-in-out"
+    :class="collapsed ? `sm:max-w-[300px]` : 'sm:max-w-[600px]'"
+  >
+    <div class="flex grow-0 items-center gap-2">
+      <h1 class="m-0 mr-auto flex items-center gap-2 text-2xl font-extrabold text-contrast">
+        <ScaleIcon class="text-orange" /> Moderation
+      </h1>
+      <ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
+        <button v-tooltip="`Exit moderation`" @click="exitModeration">
+          <CrossIcon />
+        </button>
+      </ButtonStyled>
+      <ButtonStyled circular>
+        <button v-tooltip="collapsed ? `Expand` : `Collapse`" @click="emit('toggleCollapsed')">
+          <DropdownIcon class="transition-transform" :class="{ 'rotate-180': collapsed }" />
+        </button>
+      </ButtonStyled>
     </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'" />
+    <Collapsible base-class="grow" class="flex grow flex-col" :collapsed="collapsed">
+      <div class="my-4 h-[1px] w-full bg-divider" />
+      <div v-if="done">
+        <p>You are done moderating this project! There are {{ futureProjects.length }} left.</p>
       </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 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="!modPackData[modPackIndex]">
-        <p>All permission checks complete!</p>
-        <div class="input-group modpack-buttons">
-          <button class="btn" @click="modPackIndex -= 1">
-            <LeftArrowIcon aria-hidden="true" />
-            Previous
-          </button>
+      <div v-else-if="steps[currentStepIndex].id === 'modpack-permissions'">
+        <h2 v-if="modPackData" class="m-0 mb-2 text-lg font-extrabold">
+          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 aria-hidden="true" />
+              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="mt-4 flex gap-2">
+            <ButtonStyled>
+              <button :disabled="modPackIndex <= 0" @click="modPackIndex -= 1">
+                <LeftArrowIcon aria-hidden="true" />
+                Previous
+              </button>
+            </ButtonStyled>
+            <ButtonStyled color="blue">
+              <button :disabled="!modPackData[modPackIndex].status" @click="modPackIndex += 1">
+                <RightArrowIcon aria-hidden="true" />
+                Next project
+              </button>
+            </ButtonStyled>
+          </div>
         </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..."
-            />
+        <h2 class="m-0 mb-2 text-lg font-extrabold">{{ steps[currentStepIndex].question }}</h2>
+        <template v-if="steps[currentStepIndex].rules && steps[currentStepIndex].rules.length > 0">
+          <strong>Guidance:</strong>
+          <ul class="mb-3 mt-2 leading-tight">
+            <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>Reject things like:</strong>
+          <ul class="mb-3 mt-2 leading-tight">
+            <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 class="mb-3 mt-2 leading-tight">
+            <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>
-        </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>
+          <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="
-            ['unidentified', 'no', 'with-attribution'].includes(modPackData[modPackIndex].status)
+            selectedOptions[steps[currentStepIndex].id] &&
+            selectedOptions[steps[currentStepIndex].id].length > 0
           "
+          class="inputs universal-labels"
         >
-          <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 }}
+          <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="mt-auto">
+        <div
+          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">
+              <button aria-label="Skip" @click="goToNextProject">
+                <ExitIcon aria-hidden="true" />
+                <template v-if="futureProjects.length > 0">Skip</template>
+                <template v-else>Exit</template>
+              </button>
+            </ButtonStyled>
+            <ButtonStyled v-if="currentStepIndex > 0">
+              <button @click="previousPage() && !done">
+                <LeftArrowIcon aria-hidden="true" /> Previous
+              </button>
+            </ButtonStyled>
+          </div>
+          <div class="flex items-center gap-2">
+            <ButtonStyled v-if="currentStepIndex < steps.length - 1 && !done" color="brand">
+              <button @click="nextPage()"><RightArrowIcon aria-hidden="true" /> Next</button>
+            </ButtonStyled>
+            <ButtonStyled v-else-if="!generatedMessage" color="brand">
+              <button :disabled="loadingMessage" @click="generateMessage">
+                <UpdatedIcon aria-hidden="true" /> Generate message
+              </button>
+            </ButtonStyled>
+            <template v-if="generatedMessage && !done">
+              <ButtonStyled color="green">
+                <button @click="sendMessage(project.requested_status ?? 'approved')">
+                  <CheckIcon aria-hidden="true" /> Approve
+                </button>
+              </ButtonStyled>
+              <div class="joined-buttons">
+                <ButtonStyled color="red">
+                  <button @click="sendMessage('rejected')">
+                    <CrossIcon aria-hidden="true" /> Reject
+                  </button>
+                </ButtonStyled>
+                <ButtonStyled color="red">
+                  <OverflowMenu
+                    class="btn-dropdown-animation"
+                    :options="[
+                      {
+                        id: 'withhold',
+                        color: 'danger',
+                        action: () => sendMessage('withheld'),
+                        hoverFilled: true,
+                      },
+                    ]"
+                  >
+                    <DropdownIcon style="rotate: 180deg" />
+                    <template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
+                  </OverflowMenu>
+                </ButtonStyled>
+              </div>
+            </template>
+            <button v-if="done" class="btn btn-primary next-project" @click="goToNextProject">
+              Next project
             </button>
           </div>
         </div>
-        <div class="input-group modpack-buttons">
-          <button class="btn" :disabled="modPackIndex <= 0" @click="modPackIndex -= 1">
-            <LeftArrowIcon aria-hidden="true" />
-            Previous
-          </button>
-          <button
-            class="btn btn-blue"
-            :disabled="!modPackData[modPackIndex].status"
-            @click="modPackIndex += 1"
-          >
-            <RightArrowIcon aria-hidden="true" />
-            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" aria-label="Skip" @click="goToNextProject">
-        <ExitIcon aria-hidden="true" />
-        <template v-if="futureProjects.length > 0">Skip</template>
-        <template v-else>Exit</template>
-      </button>
-      <button v-if="currentStepIndex > 0" class="btn" @click="previousPage() && !done">
-        <LeftArrowIcon aria-hidden="true" /> Previous
-      </button>
-      <button
-        v-if="currentStepIndex < steps.length - 1 && !done"
-        class="btn btn-primary"
-        @click="nextPage()"
-      >
-        <RightArrowIcon aria-hidden="true" /> Next
-      </button>
-      <button
-        v-else-if="!generatedMessage"
-        class="btn btn-primary"
-        :disabled="loadingMessage"
-        @click="generateMessage"
-      >
-        <UpdatedIcon aria-hidden="true" /> Generate message
-      </button>
-      <template v-if="generatedMessage && !done">
-        <button class="btn btn-green" @click="sendMessage(project.requested_status ?? 'approved')">
-          <CheckIcon aria-hidden="true" /> Approve
-        </button>
-        <div class="joined-buttons">
-          <button class="btn btn-danger" @click="sendMessage('rejected')">
-            <CrossIcon aria-hidden="true" /> Reject
-          </button>
-          <OverflowMenu
-            class="btn btn-danger btn-dropdown-animation icon-only"
-            :options="[
-              {
-                id: 'withhold',
-                color: 'danger',
-                action: () => sendMessage('withheld'),
-                hoverFilled: true,
-              },
-            ]"
-          >
-            <DropdownIcon style="rotate: 180deg" />
-            <template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
-          </OverflowMenu>
-        </div>
-      </template>
-      <button v-if="done" class="btn btn-primary next-project" @click="goToNextProject">
-        Next project
-      </button>
-    </div>
+    </Collapsible>
   </div>
 </template>
 
@@ -337,9 +370,11 @@ import {
   XIcon as CrossIcon,
   EyeOffIcon,
   ExitIcon,
+  ScaleIcon,
 } from "@modrinth/assets";
-import { MarkdownEditor, OverflowMenu } from "@modrinth/ui";
+import { ButtonStyled, MarkdownEditor, OverflowMenu } from "@modrinth/ui";
 import Categories from "~/components/ui/search/Categories.vue";
+import Collapsible from "~/components/ui/Collapsible.vue";
 
 const props = defineProps({
   project: {
@@ -355,8 +390,14 @@ const props = defineProps({
     required: true,
     default: () => {},
   },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(["exit", "toggleCollapsed"]);
+
 const steps = computed(() =>
   [
     {
@@ -1008,6 +1049,20 @@ async function sendMessage(status) {
 
 const router = useNativeRouter();
 
+async function exitModeration() {
+  await router.push({
+    name: "type-id",
+    params: {
+      type: "project",
+      id: props.project.id,
+    },
+    state: {
+      showChecklist: false,
+    },
+  });
+  emit("exit");
+}
+
 async function goToNextProject() {
   const project = props.futureProjects[0];
 
@@ -1031,23 +1086,8 @@ async function goToNextProject() {
 
 <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;
+  @media (prefers-reduced-motion) {
+    transition: none !important;
   }
 
   .option-selected {
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index a259071f6..e6a932590 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -21,6 +21,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
   developerMode: false,
   showVersionFilesInTable: false,
   showAdsWithPlus: false,
+  alwaysShowChecklistAsPopup: true,
 
   // Feature toggles
   projectTypesPrimaryNav: false,
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 203dff6b6..4781ab633 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -460,6 +460,10 @@
       class="new-page sidebar"
       :class="{
         'alt-layout': cosmetics.leftContentLayout,
+        'ultimate-sidebar':
+          showModerationChecklist &&
+          !collapsedModerationChecklist &&
+          !flags.alwaysShowChecklistAsPopup,
       }"
     >
       <div class="normal-page__header relative my-4">
@@ -805,13 +809,18 @@
           @delete-version="deleteVersion"
         />
       </div>
+      <div class="normal-page__ultimate-sidebar">
+        <ModerationChecklist
+          v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
+          :project="project"
+          :future-projects="futureProjects"
+          :reset-project="resetProject"
+          :collapsed="collapsedModerationChecklist"
+          @exit="showModerationChecklist = false"
+          @toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
+        />
+      </div>
     </div>
-    <ModerationChecklist
-      v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
-      :project="project"
-      :future-projects="futureProjects"
-      :reset-project="resetProject"
-    />
   </div>
 </template>
 <script setup>
@@ -1431,6 +1440,7 @@ async function copyId() {
 const collapsedChecklist = ref(false);
 
 const showModerationChecklist = ref(false);
+const collapsedModerationChecklist = ref(false);
 const futureProjects = ref([]);
 if (import.meta.client && history && history.state && history.state.showChecklist) {
   showModerationChecklist.value = true;