feat: moderation improvements (#3881)

* feat: rough draft of tool

* fix: example doc

* feat: multiselect chips

* feat: conditional actions+messaages + utils for handling conditions

* feat: migrate checklist v1 to new format.

* fix: lint issues

* fix: severity util

* feat: README.md

* feat: start implementing new moderation checklist

* feat: message assembly + fix imports

* fix: lint issues

* feat: add input suggestions

* feat: utility cleanup

* fix: icon

* chore: remove debug logging

* chore: remove debug button

* feat: modpack permissions flow into it's own component

* feat: icons + use id in stage selection button

* Support md/plain text in stages.

* fix: checklist not persisting/showing on subpages

* feat: message gen + appr/with/deny buttons

* feat: better notification placement + queue navigation

* fix: default props for futureProjects

* fix: modpack perms message

* fix: issue with future projects props

* fix: tab index + z index fixes

* feat: keybinds

* fix: file approval types

* fix: generate message for non-modpack projects

* feat: add generate message to stages dropdown

* fix: variables not expanding

* feat: requests

* fix: empty message approval

* fix: issues from sync

* chore: add comment for old moderation checklist impl

* fix: git artifacts

* fix: update visibility logic for stages and actions

* fix: cleanup logic for should show

* fix: markdown editor accidental edit

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

@@ -470,10 +470,14 @@
       class="new-page sidebar"
       :class="{
         'alt-layout': cosmetics.leftContentLayout,
-        'ultimate-sidebar':
+        'checklist-open':
           showModerationChecklist &&
           !collapsedModerationChecklist &&
           !flags.alwaysShowChecklistAsPopup,
+        'checklist-collapsed':
+          showModerationChecklist &&
+          collapsedModerationChecklist &&
+          !flags.alwaysShowChecklistAsPopup,
       }"
     >
       <div class="normal-page__header relative my-4">
@@ -878,7 +882,8 @@
         />
       </div>
       <div class="normal-page__ultimate-sidebar">
-        <ModerationChecklist
+        <!-- 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"
@@ -886,10 +891,22 @@
           :collapsed="collapsedModerationChecklist"
           @exit="showModerationChecklist = false"
           @toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
-        />
+        /> -->
       </div>
     </div>
   </div>
+  <div
+    v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
+    class="moderation-checklist"
+  >
+    <NewModerationChecklist
+      :project="project"
+      :future-project-ids="futureProjectIds"
+      :collapsed="collapsedModerationChecklist"
+      @exit="showModerationChecklist = false"
+      @toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
+    />
+  </div>
 </template>
 <script setup>
 import {
@@ -950,16 +967,16 @@ import {
   isUnderReview,
   renderString,
 } from "@modrinth/utils";
-import { navigateTo } from "#app";
 import dayjs from "dayjs";
 import { Tooltip } from "floating-vue";
+import { useLocalStorage } from "@vueuse/core";
+import { navigateTo } from "#app";
 import Accordion from "~/components/ui/Accordion.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
-import ModerationChecklist from "~/components/ui/ModerationChecklist.vue";
 import NavStack from "~/components/ui/NavStack.vue";
 import NavStackItem from "~/components/ui/NavStackItem.vue";
 import NavTabs from "~/components/ui/NavTabs.vue";
@@ -967,6 +984,7 @@ import ProjectMemberHeader from "~/components/ui/ProjectMemberHeader.vue";
 import { userCollectProject } from "~/composables/user.js";
 import { reportProject } from "~/utils/report-helpers.ts";
 import { saveFeatureFlags } from "~/composables/featureFlags.ts";
+import NewModerationChecklist from "~/components/ui/moderation/NewModerationChecklist.vue";
 
 const data = useNuxtApp();
 const route = useNativeRoute();
@@ -980,6 +998,7 @@ const flags = useFeatureFlags();
 const cosmetics = useCosmetics();
 
 const { formatMessage } = useVIntl();
+const { setVisible } = useNotificationRightwards();
 
 const settingsModal = ref();
 const downloadModal = ref();
@@ -1551,12 +1570,30 @@ async function copyPermalink() {
 
 const collapsedChecklist = ref(false);
 
-const showModerationChecklist = ref(false);
-const collapsedModerationChecklist = ref(false);
-const futureProjects = ref([]);
+console.log(project.value.id);
+
+const showModerationChecklist = useLocalStorage(
+  `show-moderation-checklist-${project.value.id}`,
+  false,
+);
+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) => {
+    setVisible(newValue);
+  },
+  { immediate: true },
+);
+
 if (import.meta.client && history && history.state && history.state.showChecklist) {
   showModerationChecklist.value = true;
-  futureProjects.value = history.state.projects;
 }
 
 function closeDownloadModal(event) {
@@ -1781,4 +1818,16 @@ const navLinks = computed(() => {
     left: 18px;
   }
 }
+
+.moderation-checklist {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  overflow-y: auto;
+  z-index: 50;
+
+  > div {
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+  }
+}
 </style>

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

@@ -212,6 +212,10 @@ if (projects.value) {
 
 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: {
@@ -220,7 +224,6 @@ async function goToProjects() {
     },
     state: {
       showChecklist: true,
-      projects: projectsFiltered.value.slice(1).map((x) => (x.slug ? x.slug : x.id)),
     },
   });
 }