Merge commit 'eb595cdc3e4a6953cbde00c0e119e476ef767a52' into beta

2025-07-16 14:34:07 +03:00
parent 2d5d747202 eb595cdc3e
commit 3f606a08aa
108 changed files with 4999 additions and 412 deletions
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -197,13 +197,13 @@
  }

  > :where(
-      input + *,
-      .input-group + *,
-      .textarea-wrapper + *,
-      .chips + *,
-      .resizable-textarea-wrapper + *,
-      .input-div + *
-    ) {
+    input + *,
+    .input-group + *,
+    .textarea-wrapper + *,
+    .chips + *,
+    .resizable-textarea-wrapper + *,
+    .input-div + *
+  ) {
    &:not(:empty) {
      margin-block-start: var(--spacing-card-md);
    }
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -115,10 +115,12 @@ html {
  --shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);

  --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
-  --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
+  --shadow-raised:
+    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
    1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
    4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
-  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+  --shadow-floating:
+    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;

  --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
@@ -150,8 +152,8 @@ html {
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.2695) 100%
  );
-  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16),
-    inset 2px 2px 64px rgba(255, 255, 255, 0.45);
+  --landing-blob-shadow:
+    2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(255, 255, 255, 0.45);

  --landing-card-bg: rgba(255, 255, 255, 0.8);
  --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -251,13 +253,15 @@ html {

  --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
  --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
-  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+  --shadow-floating:
+    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

  --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;

  --landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing.webp");
-  --landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
+  --landing-maze-gradient-bg:
+    linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
    url("https://cdn.modrinth.com/landing-new/landing-lower.webp");
  --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);

@@ -284,7 +288,8 @@ html {
    rgba(44, 48, 79, 0.35) 0%,
    rgba(32, 35, 50, 0.2695) 100%
  );
-  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
+  --landing-blob-shadow:
+    2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);

  --landing-card-bg: rgba(59, 63, 85, 0.15);
  --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -360,8 +365,9 @@ body {
  // Defaults
  background-color: var(--color-bg);
  color: var(--color-text);
-  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
-    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --font-standard:
+    Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell,
+    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-family: var(--font-standard);
  font-size: 16px;
--- a/apps/frontend/src/components/ui/Notifications.vue
+++ b/apps/frontend/src/components/ui/Notifications.vue
@@ -1,7 +1,10 @@
 <template>
  <div
    class="vue-notification-group experimental-styles-within"
-    :class="{ 'intercom-present': isIntercomPresent }"
+    :class="{
+      'intercom-present': isIntercomPresent,
+      rightwards: moveNotificationsRight,
+    }"
  >
    <transition-group name="notifs">
      <div
@@ -82,6 +85,7 @@ import {
  CopyIcon,
 } from "@modrinth/assets";
 const notifications = useNotifications();
+const { isVisible: moveNotificationsRight } = useNotificationRightwards();

 const isIntercomPresent = ref(false);

@@ -160,6 +164,15 @@ function copyToClipboard(notif) {
    bottom: 5rem;
  }

+  &.rightwards {
+    right: unset !important;
+    left: 1.5rem;
+
+    @media screen and (max-width: 500px) {
+      left: 0.75rem;
+    }
+  }
+
  .vue-notification-wrapper {
    width: 100%;
    overflow: hidden;
--- a/apps/frontend/src/components/ui/moderation/ChecklistKeybindsModal.vue
+++ b/apps/frontend/src/components/ui/moderation/ChecklistKeybindsModal.vue
@@ -0,0 +1,116 @@
+<template>
+  <NewModal ref="modal" header="Moderation shortcuts" :closable="true">
+    <div>
+      <div class="keybinds-sections">
+        <div class="grid grid-cols-2 gap-x-12 gap-y-3">
+          <div
+            v-for="keybind in keybinds"
+            :key="keybind.id"
+            class="keybind-item flex items-center justify-between gap-4"
+            :class="{
+              'col-span-2': keybinds.length % 2 === 1 && keybinds[keybinds.length - 1] === keybind,
+            }"
+          >
+            <span class="text-sm text-secondary">{{ keybind.description }}</span>
+            <div class="flex items-center gap-1">
+              <kbd
+                v-for="(key, index) in parseKeybindDisplay(keybind.keybind)"
+                :key="`${keybind.id}-key-${index}`"
+                class="keybind-key"
+              >
+                {{ key }}
+              </kbd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import NewModal from "@modrinth/ui/src/components/modal/NewModal.vue";
+import { keybinds, type KeybindListener, normalizeKeybind } from "@modrinth/moderation";
+
+const modal = ref<InstanceType<typeof NewModal>>();
+
+function parseKeybindDisplay(keybind: KeybindListener["keybind"]): string[] {
+  const keybinds = Array.isArray(keybind) ? keybind : [keybind];
+  const normalized = keybinds[0];
+  const def = normalizeKeybind(normalized);
+
+  const keys = [];
+
+  if (def.ctrl || def.meta) {
+    keys.push(isMac() ? "CMD" : "CTRL");
+  }
+  if (def.shift) keys.push("SHIFT");
+  if (def.alt) keys.push("ALT");
+
+  const mainKey = def.key
+    .replace("ArrowLeft", "←")
+    .replace("ArrowRight", "→")
+    .replace("ArrowUp", "↑")
+    .replace("ArrowDown", "↓")
+    .replace("Enter", "↵")
+    .replace("Space", "SPACE")
+    .replace("Escape", "ESC")
+    .toUpperCase();
+
+  keys.push(mainKey);
+
+  return keys;
+}
+
+function isMac() {
+  return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+}
+
+function show(event?: MouseEvent) {
+  modal.value?.show(event);
+}
+
+function hide() {
+  modal.value?.hide();
+}
+
+defineExpose({
+  show,
+  hide,
+});
+</script>
+
+<style scoped lang="scss">
+.keybind-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--color-contrast);
+
+  + .keybind-key {
+    margin-left: 0.25rem;
+  }
+}
+
+.keybind-item {
+  min-height: 2rem;
+}
+
+@media (max-width: 768px) {
+  .keybinds-sections {
+    .grid {
+      grid-template-columns: 1fr;
+      gap: 0.75rem;
+    }
+  }
+}
+</style>
--- a/apps/frontend/src/components/ui/moderation/ModpackPermissionsFlow.vue
+++ b/apps/frontend/src/components/ui/moderation/ModpackPermissionsFlow.vue
@@ -0,0 +1,422 @@
+<template>
+  <div>
+    <h2 v-if="modPackData" class="m-0 mb-2 text-lg font-extrabold">
+      Modpack permissions ({{ Math.min(modPackData.length, currentIndex + 1) }} /
+      {{ modPackData.length }})
+    </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[currentIndex]">
+      <p>All permission checks complete!</p>
+    </div>
+
+    <div v-else>
+      <div v-if="modPackData[currentIndex].type === 'unknown'">
+        <p>What is the approval type of {{ modPackData[currentIndex].file_name }}?</p>
+        <div class="input-group">
+          <ButtonStyled
+            v-for="(option, index) in fileApprovalTypes"
+            :key="index"
+            :color="modPackData[currentIndex].status === option.id ? 'brand' : 'standard'"
+            @click="setStatus(currentIndex, option.id)"
+          >
+            <button>
+              {{ option.name }}
+            </button>
+          </ButtonStyled>
+        </div>
+        <div v-if="modPackData[currentIndex].status !== 'unidentified'" class="flex flex-col gap-1">
+          <label for="proof">
+            <span class="label__title">Proof</span>
+          </label>
+          <input
+            id="proof"
+            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).proof"
+            type="text"
+            autocomplete="off"
+            placeholder="Enter proof of status..."
+            @input="persistAll()"
+          />
+          <label for="link">
+            <span class="label__title">Link</span>
+          </label>
+          <input
+            id="link"
+            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).url"
+            type="text"
+            autocomplete="off"
+            placeholder="Enter link of project..."
+            @input="persistAll()"
+          />
+          <label for="title">
+            <span class="label__title">Title</span>
+          </label>
+          <input
+            id="title"
+            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).title"
+            type="text"
+            autocomplete="off"
+            placeholder="Enter title of project..."
+            @input="persistAll()"
+          />
+        </div>
+      </div>
+
+      <div v-else-if="modPackData[currentIndex].type === 'flame'">
+        <p>
+          What is the approval type of {{ modPackData[currentIndex].title }} (<a
+            :href="modPackData[currentIndex].url"
+            target="_blank"
+            class="text-link"
+            >{{ modPackData[currentIndex].url }}</a
+          >)?
+        </p>
+        <div class="input-group">
+          <ButtonStyled
+            v-for="(option, index) in fileApprovalTypes"
+            :key="index"
+            :color="modPackData[currentIndex].status === option.id ? 'brand' : 'standard'"
+            @click="setStatus(currentIndex, option.id)"
+          >
+            <button>
+              {{ option.name }}
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+
+      <div
+        v-if="
+          ['unidentified', 'no', 'with-attribution'].includes(
+            modPackData[currentIndex].status || '',
+          )
+        "
+      >
+        <p v-if="modPackData[currentIndex].status === 'unidentified'">
+          Does this project provide identification and permission for
+          <strong>{{ modPackData[currentIndex].file_name }}</strong
+          >?
+        </p>
+        <p v-else-if="modPackData[currentIndex].status === 'with-attribution'">
+          Does this project provide attribution for
+          <strong>{{ modPackData[currentIndex].file_name }}</strong
+          >?
+        </p>
+        <p v-else>
+          Does this project provide proof of permission for
+          <strong>{{ modPackData[currentIndex].file_name }}</strong
+          >?
+        </p>
+        <div class="input-group">
+          <ButtonStyled
+            v-for="(option, index) in filePermissionTypes"
+            :key="index"
+            :color="modPackData[currentIndex].approved === option.id ? 'brand' : 'standard'"
+            @click="setApproval(currentIndex, option.id)"
+          >
+            <button>
+              {{ option.name }}
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-4 flex gap-2">
+      <ButtonStyled>
+        <button :disabled="currentIndex <= 0" @click="goToPrevious">
+          <LeftArrowIcon aria-hidden="true" />
+          Previous
+        </button>
+      </ButtonStyled>
+      <ButtonStyled v-if="modPackData && currentIndex < modPackData.length" color="blue">
+        <button :disabled="!canGoNext" @click="goToNext">
+          <RightArrowIcon aria-hidden="true" />
+          {{ currentIndex + 1 >= modPackData.length ? "Complete" : "Next" }}
+        </button>
+      </ButtonStyled>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LeftArrowIcon, RightArrowIcon } from "@modrinth/assets";
+import type {
+  ModerationJudgements,
+  ModerationModpackItem,
+  ModerationModpackResponse,
+  ModerationUnknownModpackItem,
+  ModerationFlameModpackItem,
+  ModerationModpackPermissionApprovalType,
+  ModerationPermissionType,
+} from "@modrinth/utils";
+import { ButtonStyled } from "@modrinth/ui";
+import { ref, computed, watch, onMounted } from "vue";
+import { useLocalStorage } from "@vueuse/core";
+
+const props = defineProps<{
+  projectId: string;
+  modelValue?: ModerationJudgements;
+}>();
+
+const emit = defineEmits<{
+  complete: [];
+  "update:modelValue": [judgements: ModerationJudgements];
+}>();
+
+const persistedModPackData = useLocalStorage<ModerationModpackItem[] | null>(
+  `modpack-permissions-${props.projectId}`,
+  null,
+  {
+    serializer: {
+      read: (v: any) => (v ? JSON.parse(v) : null),
+      write: (v: any) => JSON.stringify(v),
+    },
+  },
+);
+
+const persistedIndex = useLocalStorage<number>(`modpack-permissions-index-${props.projectId}`, 0);
+
+const modPackData = ref<ModerationModpackItem[] | null>(null);
+const currentIndex = ref(0);
+
+const fileApprovalTypes: ModerationModpackPermissionApprovalType[] = [
+  {
+    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: ModerationPermissionType[] = [
+  { id: "yes", name: "Yes" },
+  { id: "no", name: "No" },
+];
+
+function persistAll() {
+  persistedModPackData.value = modPackData.value;
+  persistedIndex.value = currentIndex.value;
+}
+
+watch(
+  modPackData,
+  (newValue) => {
+    persistedModPackData.value = newValue;
+  },
+  { deep: true },
+);
+
+watch(currentIndex, (newValue) => {
+  persistedIndex.value = newValue;
+});
+
+function loadPersistedData(): void {
+  if (persistedModPackData.value) {
+    modPackData.value = persistedModPackData.value;
+  }
+  currentIndex.value = persistedIndex.value;
+}
+
+function clearPersistedData(): void {
+  persistedModPackData.value = null;
+  persistedIndex.value = 0;
+}
+
+async function fetchModPackData(): Promise<void> {
+  try {
+    const data = (await useBaseFetch(`moderation/project/${props.projectId}`, {
+      internal: true,
+    })) as ModerationModpackResponse;
+    const sortedData: ModerationModpackItem[] = [
+      ...Object.entries(data.unknown_files || {})
+        .map(
+          ([sha1, fileName]): ModerationUnknownModpackItem => ({
+            sha1,
+            file_name: fileName,
+            type: "unknown",
+            status: null,
+            approved: null,
+            proof: "",
+            url: "",
+            title: "",
+          }),
+        )
+        .sort((a, b) => a.file_name.localeCompare(b.file_name)),
+      ...Object.entries(data.flame_files || {})
+        .map(
+          ([sha1, info]): ModerationFlameModpackItem => ({
+            sha1,
+            file_name: info.file_name,
+            type: "flame",
+            status: null,
+            approved: null,
+            id: info.id,
+            title: info.title || info.file_name,
+            url: info.url || `https://www.curseforge.com/minecraft/mc-mods/${info.id}`,
+          }),
+        )
+        .sort((a, b) => a.file_name.localeCompare(b.file_name)),
+    ];
+
+    if (modPackData.value) {
+      const existingMap = new Map(modPackData.value.map((item) => [item.sha1, item]));
+
+      sortedData.forEach((item) => {
+        const existing = existingMap.get(item.sha1);
+        if (existing) {
+          Object.assign(item, {
+            status: existing.status,
+            approved: existing.approved,
+            ...(item.type === "unknown" && {
+              proof: (existing as ModerationUnknownModpackItem).proof || "",
+              url: (existing as ModerationUnknownModpackItem).url || "",
+              title: (existing as ModerationUnknownModpackItem).title || "",
+            }),
+            ...(item.type === "flame" && {
+              url: (existing as ModerationFlameModpackItem).url || item.url,
+              title: (existing as ModerationFlameModpackItem).title || item.title,
+            }),
+          });
+        }
+      });
+    }
+
+    modPackData.value = sortedData;
+    persistAll();
+  } catch (error) {
+    console.error("Failed to fetch modpack data:", error);
+    modPackData.value = [];
+    persistAll();
+  }
+}
+
+function goToPrevious(): void {
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+    persistAll();
+  }
+}
+
+function goToNext(): void {
+  if (modPackData.value && currentIndex.value < modPackData.value.length) {
+    currentIndex.value++;
+
+    if (currentIndex.value >= modPackData.value.length) {
+      const judgements = getJudgements();
+      emit("update:modelValue", judgements);
+      emit("complete");
+      clearPersistedData();
+    } else {
+      persistAll();
+    }
+  }
+}
+
+function setStatus(index: number, status: ModerationModpackPermissionApprovalType["id"]): void {
+  if (modPackData.value && modPackData.value[index]) {
+    modPackData.value[index].status = status;
+    modPackData.value[index].approved = null;
+    persistAll();
+    emit("update:modelValue", getJudgements());
+  }
+}
+
+function setApproval(index: number, approved: ModerationPermissionType["id"]): void {
+  if (modPackData.value && modPackData.value[index]) {
+    modPackData.value[index].approved = approved;
+    persistAll();
+    emit("update:modelValue", getJudgements());
+  }
+}
+
+const canGoNext = computed(() => {
+  if (!modPackData.value || !modPackData.value[currentIndex.value]) return false;
+  const current = modPackData.value[currentIndex.value];
+  return current.status !== null;
+});
+
+function getJudgements(): ModerationJudgements {
+  if (!modPackData.value) return {};
+
+  const judgements: ModerationJudgements = {};
+
+  modPackData.value.forEach((item) => {
+    if (item.type === "flame") {
+      judgements[item.sha1] = {
+        type: "flame",
+        id: item.id,
+        status: item.status,
+        link: item.url,
+        title: item.title,
+        file_name: item.file_name,
+      };
+    } else if (item.type === "unknown") {
+      judgements[item.sha1] = {
+        type: "unknown",
+        status: item.status,
+        proof: item.proof,
+        link: item.url,
+        title: item.title,
+        file_name: item.file_name,
+      };
+    }
+  });
+
+  return judgements;
+}
+
+onMounted(() => {
+  loadPersistedData();
+  if (!modPackData.value) {
+    fetchModPackData();
+  }
+});
+
+watch(
+  () => props.projectId,
+  () => {
+    clearPersistedData();
+    loadPersistedData();
+    if (!modPackData.value) {
+      fetchModPackData();
+    }
+  },
+);
+</script>
+
+<style scoped>
+.input-group {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.modpack-buttons {
+  margin-top: 1rem;
+}
+</style>
--- a/apps/frontend/src/components/ui/moderation/NewModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/NewModerationChecklist.vue
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -31,9 +31,9 @@
                class="flex cursor-pointer items-center gap-1 bg-transparent p-0"
                @click="
                  versionFilter &&
-                    (unlockFilterAccordion.isOpen
-                      ? unlockFilterAccordion.close()
-                      : unlockFilterAccordion.open())
+                  (unlockFilterAccordion.isOpen
+                    ? unlockFilterAccordion.close()
+                    : unlockFilterAccordion.open())
                "
              >
                <TagItem
--- a/apps/frontend/src/composables/servers/servers-fetch.ts
+++ b/apps/frontend/src/composables/servers/servers-fetch.ts
@@ -112,7 +112,8 @@ export async function useServersFetch<T>(
      const response = await $fetch<T>(fullUrl, {
        method,
        headers,
-        body: body && contentType === "application/json" ? JSON.stringify(body) : body ?? undefined,
+        body:
+          body && contentType === "application/json" ? JSON.stringify(body) : (body ?? undefined),
        timeout: 10000,
      });

--- a/apps/frontend/src/composables/util.ts
+++ b/apps/frontend/src/composables/util.ts
@@ -0,0 +1,12 @@
+export const useNotificationRightwards = () => {
+  const isVisible = useState("moderation-checklist-notifications", () => false);
+
+  const setVisible = (visible: boolean) => {
+    isVisible.value = visible;
+  };
+
+  return {
+    isVisible: readonly(isVisible),
+    setVisible,
+  };
+};
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -1346,6 +1346,15 @@ const footerLinks = [
          }),
        ),
      },
+      {
+        href: "/legal/copyright",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.legal.copyright-policy",
+            defaultMessage: "Copyright Policy and DMCA",
+          }),
+        ),
+      },
    ],
  },
 ];
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -383,15 +383,15 @@
  "layout.footer.about": {
    "message": "About"
  },
-  "layout.footer.about.news": {
-    "message": "News"
-  },
  "layout.footer.about.careers": {
    "message": "Careers"
  },
  "layout.footer.about.changelog": {
    "message": "Changelog"
  },
+  "layout.footer.about.news": {
+    "message": "News"
+  },
  "layout.footer.about.rewards-program": {
    "message": "Rewards Program"
  },
@@ -404,6 +404,9 @@
  "layout.footer.legal-disclaimer": {
    "message": "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT."
  },
+  "layout.footer.legal.copyright-policy": {
+    "message": "Copyright Policy and DMCA"
+  },
  "layout.footer.legal.privacy-policy": {
    "message": "Privacy Policy"
  },
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -29,12 +29,11 @@
            class="settings-header__icon"
          />
          <div class="settings-header__text">
-            <h1 class="wrap-as-needed">
-              {{ project.title }}
-            </h1>
+            <h1 class="wrap-as-needed">{{ project.title }}</h1>
            <ProjectStatusBadge :status="project.status" />
          </div>
        </div>
+
        <h2>Project settings</h2>
        <NavStack>
          <NavStackItem
@@ -111,6 +110,7 @@
        </NavStack>
      </aside>
    </div>
+
    <div class="normal-page__content">
      <ProjectMemberHeader
        v-if="currentMember"
@@ -145,6 +145,7 @@
      />
    </div>
  </div>
+
  <div v-else class="experimental-styles-within">
    <NewModal ref="settingsModal">
      <template #title>
@@ -174,9 +175,11 @@
        <div
          class="animation-ring-3 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-40"
        ></div>
+
        <div
          class="animation-ring-2 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-60"
        ></div>
+
        <div
          class="animation-ring-1 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight"
        >
@@ -219,8 +222,7 @@
                  :href="`modrinth://mod/${project.slug}`"
                  @click="() => installWithApp()"
                >
-                  <ModrinthIcon aria-hidden="true" />
-                  Install with Modrinth App
+                  <ModrinthIcon aria-hidden="true" /> Install with Modrinth App
                  <ExternalIcon aria-hidden="true" />
                </a>
              </ButtonStyled>
@@ -240,6 +242,7 @@
              <div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
            </div>
          </div>
+
          <div class="mx-auto flex w-fit flex-col gap-2">
            <ButtonStyled v-if="project.game_versions.length === 1">
              <div class="disabled button-like">
@@ -327,8 +330,7 @@
                      }
                    "
                  >
-                    {{ gameVersion }}
-                    <CheckIcon v-if="userSelectedGameVersion === gameVersion" />
+                    {{ gameVersion }} <CheckIcon v-if="userSelectedGameVersion === gameVersion" />
                  </button>
                </ButtonStyled>
              </ScrollablePanel>
@@ -419,7 +421,6 @@
              </ScrollablePanel>
            </Accordion>
          </div>
-
          <AutomaticAccordion div class="flex flex-col gap-2">
            <VersionSummary
              v-if="filteredRelease"
@@ -470,10 +471,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">
@@ -485,11 +490,11 @@
                :color="route.name === 'type-id-version-version' ? `standard` : `brand`"
              >
                <button @click="(event) => downloadModal.show(event)">
-                  <DownloadIcon aria-hidden="true" />
-                  Download
+                  <DownloadIcon aria-hidden="true" /> Download
                </button>
              </ButtonStyled>
            </div>
+
            <div class="contents sm:hidden">
              <ButtonStyled
                size="large"
@@ -554,9 +559,11 @@
                      </button>
                    </ButtonStyled>
                  </div>
+
                  <p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
                    Modrinth Servers is the easiest way to play with your friends without hassle!
                  </p>
+
                  <p class="m-0 text-wrap text-sm font-bold text-primary">
                    Starting at $5<span class="text-xs"> / month</span>
                  </p>
@@ -621,6 +628,7 @@
                        {{ option.name }}
                      </Checkbox>
                    </div>
+
                    <div v-else class="menu-text">
                      <p class="popout-text">No collections found.</p>
                    </div>
@@ -628,8 +636,7 @@
                      class="btn collection-button"
                      @click="(event) => $refs.modal_collection.show(event)"
                    >
-                      <PlusIcon aria-hidden="true" />
-                      Create new collection
+                      <PlusIcon aria-hidden="true" /> Create new collection
                    </button>
                  </template>
                </PopoutMenu>
@@ -712,25 +719,14 @@
                :dropdown-id="`${baseId}-more-options`"
              >
                <MoreVerticalIcon aria-hidden="true" />
-                <template #analytics>
-                  <ChartIcon aria-hidden="true" />
-                  Analytics
-                </template>
+                <template #analytics> <ChartIcon aria-hidden="true" /> Analytics </template>
                <template #moderation-checklist>
-                  <ScaleIcon aria-hidden="true" />
-                  Review project
-                </template>
-                <template #report>
-                  <ReportIcon aria-hidden="true" />
-                  Report
-                </template>
-                <template #copy-id>
-                  <ClipboardCopyIcon aria-hidden="true" />
-                  Copy ID
+                  <ScaleIcon aria-hidden="true" /> Review project
                </template>
+                <template #report> <ReportIcon aria-hidden="true" /> Report </template>
+                <template #copy-id> <ClipboardCopyIcon aria-hidden="true" /> Copy ID </template>
                <template #copy-permalink>
-                  <ClipboardCopyIcon aria-hidden="true" />
-                  Copy permanent link
+                  <ClipboardCopyIcon aria-hidden="true" /> Copy permanent link
                </template>
              </OverflowMenu>
            </ButtonStyled>
@@ -756,6 +752,7 @@
          updates unless the author decides to unarchive the project.
        </MessageBanner>
      </div>
+
      <div class="normal-page__sidebar">
        <ProjectSidebarCompatibility
          :project="project"
@@ -785,6 +782,7 @@
        />
        <div class="card flex-card experimental-styles-within">
          <h2>{{ formatMessage(detailsMessages.title) }}</h2>
+
          <div class="details-list">
            <div class="details-list__item">
              <BookTextIcon aria-hidden="true" />
@@ -813,53 +811,48 @@
                <span v-else>{{ licenseIdDisplay }}</span>
              </div>
            </div>
+
            <div
              v-if="project.approved"
              v-tooltip="$dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
              class="details-list__item"
            >
              <CalendarIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.published, { date: publishedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.published, { date: publishedDate }) }}</div>
            </div>
+
            <div
              v-else
              v-tooltip="$dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')"
              class="details-list__item"
            >
              <CalendarIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.created, { date: createdDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.created, { date: createdDate }) }}</div>
            </div>
+
            <div
              v-if="project.status === 'processing' && project.queued"
              v-tooltip="$dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')"
              class="details-list__item"
            >
              <ScaleIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.submitted, { date: submittedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.submitted, { date: submittedDate }) }}</div>
            </div>
+
            <div
              v-if="versions.length > 0 && project.updated"
              v-tooltip="$dayjs(project.updated).format('MMMM D, YYYY [at] h:mm A')"
              class="details-list__item"
            >
              <VersionIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.updated, { date: updatedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.updated, { date: updatedDate }) }}</div>
            </div>
          </div>
        </div>
      </div>
+
      <div class="normal-page__content">
-        <div class="overflow-x-auto">
-          <NavTabs :links="navLinks" class="mb-4" />
-        </div>
+        <div class="overflow-x-auto"><NavTabs :links="navLinks" class="mb-4" /></div>
        <NuxtPage
          v-model:project="project"
          v-model:versions="versions"
@@ -877,8 +870,10 @@
          @delete-version="deleteVersion"
        />
      </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,11 +881,25 @@
          :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 {
  BookmarkIcon,
@@ -950,16 +959,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 +976,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 +990,7 @@ const flags = useFeatureFlags();
 const cosmetics = useCosmetics();

 const { formatMessage } = useVIntl();
+const { setVisible } = useNotificationRightwards();

 const settingsModal = ref();
 const downloadModal = ref();
@@ -1551,12 +1562,28 @@ async function copyPermalink() {

 const collapsedChecklist = ref(false);

-const showModerationChecklist = ref(false);
-const collapsedModerationChecklist = ref(false);
-const futureProjects = ref([]);
+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) {
@@ -1626,6 +1653,7 @@ const navLinks = computed(() => {
  ];
 });
 </script>
+
 <style lang="scss" scoped>
 .settings-header {
  display: flex;
@@ -1781,4 +1809,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>
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -705,9 +705,9 @@ export default defineNuxtComponent({
  }

  .gallery-body {
-    flex-grow: 1;
    width: calc(100% - 2 * var(--spacing-card-md));
    padding: var(--spacing-card-sm) var(--spacing-card-md);
+    overflow-wrap: anywhere;

    .gallery-info {
      h2 {
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -1421,7 +1421,8 @@ useSeoMeta({
          width: 25rem;
          height: 25rem;
          opacity: 0.75;
-          background: radial-gradient(
+          background:
+            radial-gradient(
              50% 50% at 50% 50%,
              rgba(5, 206, 69, 0.19) 0%,
              rgba(15, 19, 49, 0.25) 100%
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -266,12 +266,12 @@ const getRangeOfMethod = (method) => {

 const maxWithdrawAmount = computed(() => {
  const interval = selectedMethod.value.interval;
-  return interval?.standard ? interval.standard.max : interval?.fixed?.values.slice(-1)[0] ?? 0;
+  return interval?.standard ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0);
 });

 const minWithdrawAmount = computed(() => {
  const interval = selectedMethod.value.interval;
-  return interval?.standard ? interval.standard.min : interval?.fixed?.values?.[0] ?? fees.value;
+  return interval?.standard ? interval.standard.min : (interval?.fixed?.values?.[0] ?? fees.value);
 });

 const withdrawAccount = computed(() => {
--- a/apps/frontend/src/pages/moderation/review.vue
+++ b/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)),
    },
  });
 }
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -149,7 +149,8 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .main-hero {
-  background: linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
+  background:
+    linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
    var(--color-accent-contrast);
  margin-top: -5rem;
  padding: 11.25rem 1rem 8rem;
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -427,11 +427,8 @@
                Do Modrinth Servers have DDoS protection?
              </summary>
              <p class="m-0 ml-6 leading-[160%]">
-                Yes. All Modrinth Servers come with DDoS protection powered by
-                <a href="https://us.ovhcloud.com/security/anti-ddos/" target="_blank"
-                  >OVHcloud® Anti-DDoS infrastructure</a
-                >
-                which has over 17Tbps capacity. Your server is safe on Modrinth.
+                Yes. All Modrinth Servers come with DDoS protection, with up to 17Tbps capacity in
+                some locations.
              </p>
            </details>

@@ -443,8 +440,9 @@
                Where are Modrinth Servers located? Can I choose a region?
              </summary>
              <p class="m-0 ml-6 leading-[160%]">
-                We have servers in both North America in Vint Hill, Virginia, and Europe in Limburg,
-                Germany. More regions to come in the future!
+                We have servers available in North America and Europe at the moment that you can
+                choose upon purchase. More regions to come in the future! If you'd like to switch
+                your region, please contact support.
              </p>
            </details>

--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -1020,7 +1020,7 @@ const nodeUnavailableDetails = computed(() => [
  {
    label: "Error message",
    value: nodeAccessible.value
-      ? server.moduleErrors?.general?.error.message ?? "Unknown"
+      ? (server.moduleErrors?.general?.error.message ?? "Unknown")
      : "Unable to reach node. Ping test failed.",
    type: "block" as const,
  },
@@ -1277,7 +1277,8 @@ useHead({
  background-repeat: no-repeat;
  filter: blur(1rem);
  content: "";
-  background-image: linear-gradient(
+  background-image:
+    linear-gradient(
      to bottom,
      rgba(from var(--color-raised-bg) r g b / 0.2),
      rgb(from var(--color-raised-bg) r g b / 0.8)
--- a/apps/frontend/src/pages/servers/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/files.vue
@@ -101,7 +101,7 @@
                  <span :class="{ invisible: 'current_file' in op && !op.current_file }">
                    {{
                      "current_file" in op
-                        ? op.current_file?.split("/")?.pop() ?? "unknown"
+                        ? (op.current_file?.split("/")?.pop() ?? "unknown")
                        : "unknown"
                    }}
                  </span>
--- a/apps/frontend/src/public/.well-known/security.txt
+++ b/apps/frontend/src/public/.well-known/security.txt
@@ -0,0 +1,6 @@
+Contact: mailto:jai@modrinth.com
+Expires: 2025-12-31T00:00:00.000Z
+Preferred-Languages: en
+Canonical: https://modrinth.com/.well-known/security.txt
+Policy: https://modrinth.com/legal/security
+Hiring: https://careers.modrinth.com/