feat: "no servers found" impl

Merge branch 'main' into cal/server-panel-refactor
2025-08-06 16:58:36 +01:00 · 2025-08-05 11:26:41 +01:00 · 2025-08-04 17:26:00 +01:00 · 2025-07-28 19:14:23 +01:00 · 2025-07-28 18:47:53 +01:00 · 2025-07-28 18:43:00 +01:00
39 changed files with 1080 additions and 2345 deletions
--- a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
@@ -76,10 +76,10 @@ const installing = ref(false)
 const onInstall = ref(() => {})

 defineExpose({
-  show: (instanceVal, projectVal, projectVersions, selected, callback) => {
+  show: (instanceVal, projectVal, projectVersions, callback) => {
    instance.value = instanceVal
    versions.value = projectVersions
-    selectedVersion.value = selected ?? projectVersions[0]
+    selectedVersion.value = projectVersions[0]

    project.value = projectVal

--- a/apps/app-frontend/src/store/install.js
+++ b/apps/app-frontend/src/store/install.js
@@ -29,8 +29,8 @@ export const useInstall = defineStore('installStore', {
    setIncompatibilityWarningModal(ref) {
      this.incompatibilityWarningModal = ref
    },
-    showIncompatibilityWarningModal(instance, project, versions, selected, onInstall) {
-      this.incompatibilityWarningModal.show(instance, project, versions, selected, onInstall)
+    showIncompatibilityWarningModal(instance, project, versions, onInstall) {
+      this.incompatibilityWarningModal.show(instance, project, versions, onInstall)
    },
    setModInstallModal(ref) {
      this.modInstallModal = ref
@@ -133,13 +133,7 @@ export const install = async (
        callback(version.id)
      } else {
        const install = useInstall()
-        install.showIncompatibilityWarningModal(
-          instance,
-          project,
-          projectVersions,
-          version,
-          callback,
-        )
+        install.showIncompatibilityWarningModal(instance, project, projectVersions, callback)
      }
    } else {
      const versions = (await get_version_many(project.versions).catch(handleError)).sort(
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -1,481 +1,510 @@
 <template>
-  <div v-if="showInvitation" class="universal-card information invited my-4">
-    <h2>{{ getFormattedMessage(messages.invitationTitle) }}</h2>
-    <p v-if="currentMember?.project_role">
-      {{ formatMessage(messages.invitationWithRole, { role: currentMember.project_role }) }}
+  <div v-if="showInvitation" class="universal-card information invited">
+    <h2>Invitation to join project</h2>
+    <p>
+      You've been invited be a member of this project with the role of '{{ currentMember.role }}'.
    </p>
-    <p v-else>{{ getFormattedMessage(messages.invitationNoRole) }}</p>
    <div class="input-group">
-      <ButtonStyled color="brand">
-        <button class="brand-button" @click="acceptInvite()">
-          <CheckIcon />
-          {{ getFormattedMessage(messages.accept) }}
-        </button>
-      </ButtonStyled>
-      <ButtonStyled color="red">
-        <button @click="declineInvite">
-          <XIcon />
-          {{ getFormattedMessage(messages.decline) }}
-        </button>
-      </ButtonStyled>
+      <button class="iconified-button brand-button" @click="acceptInvite()">
+        <CheckIcon />
+        Accept
+      </button>
+      <button class="iconified-button danger-button" @click="declineInvite()">
+        <XIcon />
+        Decline
+      </button>
    </div>
  </div>
  <div
    v-if="
      currentMember &&
-      visibleNags.length > 0 &&
+      nags.filter((x) => x.condition).length > 0 &&
      (project.status === 'draft' || tags.rejectedStatuses.includes(project.status))
    "
-    class="universal-card my-4"
+    class="author-actions universal-card mb-4"
  >
-    <div class="flex max-w-full flex-wrap items-center gap-x-6 gap-y-4">
-      <div class="flex flex-auto flex-wrap items-center gap-x-6 gap-y-4">
-        <h2 class="my-0 mr-auto">{{ getFormattedMessage(messages.publishingChecklist) }}</h2>
-        <div class="flex flex-row gap-2">
-          <div class="flex items-center gap-1">
-            <AsteriskIcon class="size-4 text-red" />
-            <span class="text-secondary">{{ getFormattedMessage(messages.required) }}</span>
-          </div>
-          |
-          <div class="flex items-center gap-1">
-            <TriangleAlertIcon class="size-4 text-orange" />
-            <span class="text-secondary">{{ getFormattedMessage(messages.warning) }}</span>
-          </div>
-          |
-          <div class="flex items-center gap-1">
-            <LightBulbIcon class="size-4 text-purple" />
-            <span class="text-secondary">{{ getFormattedMessage(messages.suggestion) }}</span>
+    <div class="header__row">
+      <div class="header__title">
+        <h2>Publishing checklist</h2>
+        <div class="checklist">
+          <span class="checklist__title">Progress:</span>
+          <div class="checklist__items">
+            <div
+              v-for="nag in nags"
+              :key="`checklist-${nag.id}`"
+              v-tooltip="nag.title"
+              :aria-label="nag.title"
+              :class="'circle ' + (!nag.condition ? 'done' : '') + nag.status"
+              class="circle"
+            >
+              <CheckIcon v-if="!nag.condition" />
+              <AsteriskIcon v-else-if="nag.status === 'required'" />
+              <LightBulbIcon v-else-if="nag.status === 'suggestion'" />
+              <ScaleIcon v-else-if="nag.status === 'review'" />
+            </div>
          </div>
        </div>
      </div>
      <div class="input-group">
-        <ButtonStyled circular>
-          <button :class="!collapsed && '[&>svg]:rotate-180'" @click="toggleCollapsed()">
-            <DropdownIcon class="duration-250 transition-transform ease-in-out" />
-          </button>
-        </ButtonStyled>
+        <button
+          :class="{ 'not-collapsed': !collapsed }"
+          class="square-button"
+          @click="toggleCollapsed()"
+        >
+          <DropdownIcon />
+        </button>
      </div>
    </div>
-    <div v-if="!collapsed" class="grid-display width-16 mt-4">
-      <div v-for="nag in visibleNags" :key="nag.id" class="grid-display__item">
-        <span class="flex items-center gap-2 font-semibold">
-          <component
-            :is="nag.icon || getDefaultIcon(nag.status)"
-            v-tooltip="getStatusTooltip(nag.status)"
-            :class="[
-              'size-4',
-              nag.status === 'required' && 'text-red',
-              nag.status === 'warning' && 'text-orange',
-              nag.status === 'suggestion' && 'text-purple',
-            ]"
-            :aria-label="getStatusTooltip(nag.status)"
+    <div v-if="!collapsed" class="grid-display width-16">
+      <div
+        v-for="nag in nags.filter((x) => x.condition && !x.hide)"
+        :key="nag.id"
+        class="grid-display__item"
+      >
+        <span class="label">
+          <AsteriskIcon
+            v-if="nag.status === 'required'"
+            v-tooltip="'Required'"
+            :class="nag.status"
+            aria-label="Required"
          />
-          {{ getFormattedMessage(nag.title) }}
-        </span>
-        {{ getNagDescription(nag) }}
+          <LightBulbIcon
+            v-else-if="nag.status === 'suggestion'"
+            v-tooltip="'Suggestion'"
+            :class="nag.status"
+            aria-label="Suggestion"
+          />
+          <ScaleIcon
+            v-else-if="nag.status === 'review'"
+            v-tooltip="'Review'"
+            :class="nag.status"
+            aria-label="Review"
+          />{{ nag.title }}</span
+        >
+        {{ nag.description }}
        <NuxtLink
-          v-if="nag.link && shouldShowLink(nag)"
+          v-if="nag.link"
+          :class="{ invisible: nag.link.hide }"
          :to="`/${project.project_type}/${project.slug ? project.slug : project.id}/${
            nag.link.path
          }`"
          class="goto-link"
        >
-          {{ getFormattedMessage(nag.link.title) }}
+          {{ nag.link.title }}
          <ChevronRightIcon aria-hidden="true" class="featured-header-chevron" />
        </NuxtLink>
-        <ButtonStyled
-          v-if="nag.status === 'special-submit-action' && nag.id === 'submit-for-review'"
-          color="orange"
-          @click="submitForReview"
+        <button
+          v-else-if="nag.action"
+          :disabled="nag.action.disabled()"
+          class="btn btn-orange"
+          @click="nag.action.onClick"
        >
-          <button
-            :disabled="!canSubmitForReview"
-            v-tooltip="
-              !canSubmitForReview ? getFormattedMessage(messages.submitChecklistTooltip) : undefined
-            "
-          >
-            <SendIcon />
-            {{ getFormattedMessage(messages.submitForReview) }}
-          </button>
-        </ButtonStyled>
+          <SendIcon />
+          {{ nag.action.title }}
+        </button>
      </div>
    </div>
  </div>
 </template>

-<script setup lang="ts">
+<script setup>
 import {
  ChevronRightIcon,
  CheckIcon,
  XIcon,
  AsteriskIcon,
  LightBulbIcon,
-  TriangleAlertIcon,
-  DropdownIcon,
  SendIcon,
  ScaleIcon,
-  InfoIcon,
+  DropdownIcon,
 } from "@modrinth/assets";
+import { formatProjectType } from "@modrinth/utils";
 import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
-import { nags } from "@modrinth/moderation";
-import { ButtonStyled } from "@modrinth/ui";
-import { useVIntl, defineMessages, type MessageDescriptor } from "@vintl/vintl";
-import type { Nag, NagContext, NagStatus } from "@modrinth/moderation";
-import type { Project, User, Version } from "@modrinth/utils";
-import type { Component } from "vue";

-interface Tags {
-  rejectedStatuses: string[];
-}
+const props = defineProps({
+  project: {
+    type: Object,
+    required: true,
+  },
+  versions: {
+    type: Array,
+    default() {
+      return [];
+    },
+  },
+  currentMember: {
+    type: Object,
+    default: null,
+  },
+  allMembers: {
+    type: Object,
+    default: null,
+  },
+  isSettings: {
+    type: Boolean,
+    default: false,
+  },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+  routeName: {
+    type: String,
+    default: "",
+  },
+  auth: {
+    type: Object,
+    required: true,
+  },
+  tags: {
+    type: Object,
+    required: true,
+  },
+  setProcessing: {
+    type: Function,
+    default() {
+      return () => {
+        addNotification({
+          group: "main",
+          title: "An error occurred",
+          text: "setProcessing function not found",
+          type: "error",
+        });
+      };
+    },
+  },
+  toggleCollapsed: {
+    type: Function,
+    default() {
+      return () => {
+        addNotification({
+          group: "main",
+          title: "An error occurred",
+          text: "toggleCollapsed function not found",
+          type: "error",
+        });
+      };
+    },
+  },
+  updateMembers: {
+    type: Function,
+    default() {
+      return () => {
+        addNotification({
+          group: "main",
+          title: "An error occurred",
+          text: "updateMembers function not found",
+          type: "error",
+        });
+      };
+    },
+  },
+});

-interface Auth {
-  user: {
-    id: string;
-  };
-}
+const featuredGalleryImage = computed(() => props.project.gallery.find((img) => img.featured));

-interface Member {
-  accepted?: boolean;
-  project_role?: string;
-  user?: Partial<User>;
-}
-
-interface Props {
-  project: Project;
-  versions?: Version[];
-  currentMember?: Member | null;
-  allMembers?: Member[] | null;
-  isSettings?: boolean;
-  collapsed?: boolean;
-  routeName?: string;
-  auth: Auth;
-  tags: Tags;
-  setProcessing?: (processing: boolean) => void;
-  toggleCollapsed?: () => void;
-  updateMembers?: () => void | Promise<void>;
-}
-
-const messages = defineMessages({
-  invitationTitle: {
-    id: "project-member-header.invitation-title",
-    defaultMessage: "Invitation to join project",
+const nags = computed(() => [
+  {
+    condition: props.versions.length < 1,
+    title: "Upload a version",
+    id: "upload-version",
+    description: "At least one version is required for a project to be submitted for review.",
+    status: "required",
+    link: {
+      path: "versions",
+      title: "Visit versions page",
+      hide: props.routeName === "type-id-versions",
+    },
  },
-  invitationWithRole: {
-    id: "project-member-header.invitation-with-role",
-    defaultMessage: "You've been invited be a member of this project with the role of '{role}'.",
+  {
+    condition:
+      props.project.body === "" || props.project.body.startsWith("# Placeholder description"),
+    title: "Add a description",
+    id: "add-description",
+    description:
+      "A description that clearly describes the project's purpose and function is required.",
+    status: "required",
+    link: {
+      path: "settings/description",
+      title: "Visit description settings",
+      hide: props.routeName === "type-id-settings-description",
+    },
  },
-  invitationNoRole: {
-    id: "project-member-header.invitation-no-role",
-    defaultMessage:
-      "You've been invited to join this project. Please accept or decline the invitation.",
+  {
+    condition: !props.project.icon_url,
+    title: "Add an icon",
+    id: "add-icon",
+    description:
+      "Your project should have a nice-looking icon to uniquely identify your project at a glance.",
+    status: "suggestion",
+    link: {
+      path: "settings",
+      title: "Visit general settings",
+      hide: props.routeName === "type-id-settings",
+    },
  },
-  accept: {
-    id: "project-member-header.accept",
-    defaultMessage: "Accept",
+  {
+    condition: props.project.gallery.length === 0 || !featuredGalleryImage,
+    title: "Feature a gallery image",
+    id: "feature-gallery-image",
+    description: "Featured gallery images may be the first impression of many users.",
+    status: "suggestion",
+    link: {
+      path: "gallery",
+      title: "Visit gallery page",
+      hide: props.routeName === "type-id-gallery",
+    },
  },
-  decline: {
-    id: "project-member-header.decline",
-    defaultMessage: "Decline",
+  {
+    hide: props.project.versions.length === 0,
+    condition: props.project.categories.length < 1,
+    title: "Select tags",
+    id: "select-tags",
+    description: "Select all tags that apply to your project.",
+    status: "suggestion",
+    link: {
+      path: "settings/tags",
+      title: "Visit tag settings",
+      hide: props.routeName === "type-id-settings-tags",
+    },
  },
-  publishingChecklist: {
-    id: "project-member-header.publishing-checklist",
-    defaultMessage: "Publishing checklist",
+  {
+    condition: !(
+      props.project.issues_url ||
+      props.project.source_url ||
+      props.project.wiki_url ||
+      props.project.discord_url ||
+      props.project.donation_urls.length > 0
+    ),
+    title: "Add external links",
+    id: "add-links",
+    description:
+      "Add any relevant links targeted outside of Modrinth, such as sources, issues, or a Discord invite.",
+    status: "suggestion",
+    link: {
+      path: "settings/links",
+      title: "Visit links settings",
+      hide: props.routeName === "type-id-settings-links",
+    },
  },
-  submitForReview: {
-    id: "project-member-header.submit-for-review",
-    defaultMessage: "Submit for review",
+  {
+    hide:
+      props.project.versions.length === 0 ||
+      props.project.project_type === "resourcepack" ||
+      props.project.project_type === "plugin" ||
+      props.project.project_type === "shader" ||
+      props.project.project_type === "datapack",
+    condition:
+      props.project.client_side === "unknown" ||
+      props.project.server_side === "unknown" ||
+      (props.project.client_side === "unsupported" && props.project.server_side === "unsupported"),
+    title: "Select supported environments",
+    id: "select-environments",
+    description: `Select if the ${formatProjectType(
+      props.project.project_type,
+    ).toLowerCase()} functions on the client-side and/or server-side.`,
+    status: "required",
+    link: {
+      path: "settings",
+      title: "Visit general settings",
+      hide: props.routeName === "type-id-settings",
+    },
  },
-  submitForReviewDesc: {
-    id: "project-member-header.submit-for-review-desc",
-    defaultMessage:
+  {
+    condition: props.project.license.id === "LicenseRef-Unknown",
+    title: "Select license",
+    id: "select-license",
+    description: `Select the license your ${formatProjectType(
+      props.project.project_type,
+    ).toLowerCase()} is distributed under.`,
+    status: "required",
+    link: {
+      path: "settings/license",
+      title: "Visit license settings",
+      hide: props.routeName === "type-id-settings-license",
+    },
+  },
+  {
+    condition: props.project.status === "draft",
+    title: "Submit for review",
+    id: "submit-for-review",
+    description:
      "Your project is only viewable by members of the project. It must be reviewed by moderators in order to be published.",
+    status: "review",
+    link: null,
+    action: {
+      onClick: submitForReview,
+      title: "Submit for review",
+      disabled: () => nags.value.filter((x) => x.condition && x.status === "required").length > 0,
+    },
  },
-  resubmitForReview: {
-    id: "project-member-header.resubmit-for-review",
-    defaultMessage: "Resubmit for review",
+  {
+    hide: props.project.stats === "draft",
+    condition: props.tags.rejectedStatuses.includes(props.project.status),
+    title: "Resubmit for review",
+    id: "resubmit-for-review",
+    description: `Your project has been ${props.project.status} by
+            Modrinth's staff. In most cases, you can resubmit for review after
+            addressing the staff's message.`,
+    status: "review",
+    link: {
+      path: "moderation",
+      title: "Visit moderation page",
+      hide: props.routeName === "type-id-moderation",
+    },
  },
-  resubmitForReviewDesc: {
-    id: "project-member-header.resubmit-for-review-desc",
-    defaultMessage:
-      "Your project has been {status} by Modrinth's staff. In most cases, you can resubmit for review after addressing the staff's message.",
-  },
-  showKey: {
-    id: "project-member-header.show-key",
-    defaultMessage: "Toggle key",
-  },
-  keyTitle: {
-    id: "project-member-header.key-title",
-    defaultMessage: "Status Key",
-  },
-  action: {
-    id: "project-member-header.action",
-    defaultMessage: "Action",
-  },
-  visitModerationPage: {
-    id: "project-member-header.visit-moderation-page",
-    defaultMessage: "Visit moderation page",
-  },
-  submitChecklistTooltip: {
-    id: "project-member-header.submit-checklist-tooltip",
-    defaultMessage: "You must complete the required steps in the publishing checklist!",
-  },
-  successJoin: {
-    id: "project-member-header.success-join",
-    defaultMessage: "You have joined the project team",
-  },
-  errorJoin: {
-    id: "project-member-header.error-join",
-    defaultMessage: "Failed to accept team invitation",
-  },
-  successDecline: {
-    id: "project-member-header.success-decline",
-    defaultMessage: "You have declined the team invitation",
-  },
-  errorDecline: {
-    id: "project-member-header.error-decline",
-    defaultMessage: "Failed to decline team invitation",
-  },
-  success: {
-    id: "project-member-header.success",
-    defaultMessage: "Success",
-  },
-  error: {
-    id: "project-member-header.error",
-    defaultMessage: "Error",
-  },
-  required: {
-    id: "project-member-header.required",
-    defaultMessage: "Required",
-  },
-  warning: {
-    id: "project-member-header.warning",
-    defaultMessage: "Warning",
-  },
-  suggestion: {
-    id: "project-member-header.suggestion",
-    defaultMessage: "Suggestion",
-  },
-});
+]);

-const { formatMessage } = useVIntl();
-
-function getNagDescription(nag: Nag): string {
-  if (typeof nag.description === "function") {
-    return nag.description(nagContext.value);
-  }
-  return formatMessage(nag.description);
-}
-
-function getFormattedMessage(message: string | MessageDescriptor): string {
-  if (typeof message === "string") {
-    return message;
-  }
-  return formatMessage(message);
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  versions: () => [],
-  currentMember: null,
-  allMembers: null,
-  isSettings: false,
-  collapsed: false,
-  routeName: "",
-});
-
-const emit = defineEmits<{
-  toggleCollapsed: [];
-  updateMembers: [];
-  setProcessing: [processing: boolean];
-}>();
-
-const nagContext = computed<NagContext>(() => ({
-  project: props.project,
-  versions: props.versions,
-  currentMember: props.currentMember as User,
-  currentRoute: props.routeName,
-  tags: props.tags,
-  submitProject: submitForReview,
-}));
-
-const showKey = ref(false);
-function toggleKey(): void {
-  showKey.value = !showKey.value;
-}
-
-const canSubmitForReview = computed(() => {
-  return (
-    applicableNags.value.filter((nag) => nag.status === "required" && !isNagComplete(nag))
-      .length === 0
-  );
-});
-
-async function submitForReview() {
-  if (canSubmitForReview) {
-    await setProcessing(true);
-  }
-}
-
-const applicableNags = computed<Nag[]>(() => {
-  return nags.filter((nag) => {
-    return nag.shouldShow(nagContext.value);
-  });
-});
-
-function isNagComplete(nag: Nag): boolean {
-  const context = nagContext.value;
-  return !nag.shouldShow(context);
-}
-
-const visibleNags = computed<Nag[]>(() => {
-  const finalNags = applicableNags.value.filter((nag) => !isNagComplete(nag));
-
-  if (props.project.status === "draft") {
-    finalNags.push({
-      id: "submit-for-review",
-      title: messages.submitForReview,
-      description: () => formatMessage(messages.submitForReviewDesc),
-      status: "special-submit-action",
-      shouldShow: (ctx) => ctx.project.status === "draft",
-    });
-  }
-
-  if (props.tags.rejectedStatuses.includes(props.project.status)) {
-    finalNags.push({
-      id: "resubmit-for-review",
-      title: messages.resubmitForReview,
-      description: (ctx) =>
-        formatMessage(messages.resubmitForReviewDesc, { status: ctx.project.status }),
-      status: "special-submit-action",
-      shouldShow: (ctx) => ctx.tags.rejectedStatuses.includes(ctx.project.status),
-      link: {
-        path: "moderation",
-        title: messages.visitModerationPage,
-        shouldShow: () => props.routeName !== "type-id-moderation",
-      },
-    });
-  }
-
-  finalNags.sort((a, b) => {
-    const statusOrder = { required: 0, warning: 1, suggestion: 2, "special-submit-action": 3 };
-    return statusOrder[a.status] - statusOrder[b.status];
-  });
-
-  return finalNags;
-});
-
-function shouldShowLink(nag: Nag): boolean {
-  return nag.link?.shouldShow ? nag.link.shouldShow(nagContext.value) : false;
-}
-
-function getDefaultIcon(status: NagStatus): Component {
-  switch (status) {
-    case "required":
-      return AsteriskIcon;
-    case "warning":
-      return TriangleAlertIcon;
-    case "suggestion":
-      return LightBulbIcon;
-    case "special-submit-action":
-      return ScaleIcon;
-    default:
-      return AsteriskIcon;
-  }
-}
-
-function getStatusTooltip(status: NagStatus): string {
-  switch (status) {
-    case "required":
-      return formatMessage(messages.required);
-    case "warning":
-      return formatMessage(messages.warning);
-    case "suggestion":
-      return formatMessage(messages.suggestion);
-    default:
-      return formatMessage(messages.required);
-  }
-}
-
-const showInvitation = computed<boolean>(() => {
+const showInvitation = computed(() => {
  if (props.allMembers && props.auth) {
-    const member = props.allMembers.find((x) => x?.user?.id === props.auth.user.id);
-    return !!member && !member.accepted;
+    const member = props.allMembers.find((x) => x.user.id === props.auth.user.id);
+    return member && !member.accepted;
  }
  return false;
 });

-function toggleCollapsed(): void {
-  if (props.toggleCollapsed) {
-    props.toggleCollapsed();
-  } else {
-    emit("toggleCollapsed");
-  }
-}
+const acceptInvite = () => {
+  acceptTeamInvite(props.project.team);
+  props.updateMembers();
+};

-async function updateMembers(): Promise<void> {
-  if (props.updateMembers) {
-    await props.updateMembers();
-  } else {
-    emit("updateMembers");
-  }
-}
+const declineInvite = () => {
+  removeTeamMember(props.project.team, props.auth.user.id);
+  props.updateMembers();
+};

-function setProcessing(processing: boolean): void {
-  if (props.setProcessing) {
-    props.setProcessing(processing);
-  } else {
-    emit("setProcessing", processing);
+const submitForReview = async () => {
+  if (
+    !props.acknowledgedMessage ||
+    nags.value.filter((x) => x.condition && x.status === "required").length === 0
+  ) {
+    await props.setProcessing();
  }
-}
-
-async function acceptInvite(): Promise<void> {
-  try {
-    setProcessing(true);
-    await acceptTeamInvite(props.project.team);
-    await updateMembers();
-    addNotification({
-      group: "main",
-      title: formatMessage(messages.success),
-      text: formatMessage(messages.successJoin),
-      type: "success",
-    });
-  } catch (error) {
-    addNotification({
-      group: "main",
-      title: formatMessage(messages.error),
-      text: formatMessage(messages.errorJoin),
-      type: "error",
-    });
-  } finally {
-    setProcessing(false);
-  }
-}
-
-async function declineInvite(): Promise<void> {
-  try {
-    setProcessing(true);
-    await removeTeamMember(props.project.team, props.auth.user.id);
-    await updateMembers();
-    addNotification({
-      group: "main",
-      title: formatMessage(messages.success),
-      text: formatMessage(messages.successDecline),
-      type: "success",
-    });
-  } catch (error) {
-    addNotification({
-      group: "main",
-      title: formatMessage(messages.error),
-      text: formatMessage(messages.errorDecline),
-      type: "error",
-    });
-  } finally {
-    setProcessing(false);
-  }
-}
+};
 </script>

 <style lang="scss" scoped>
-.duration-250 {
-  transition-duration: 250ms;
+.invited {
+}
+
+.author-actions {
+  margin-top: var(--spacing-card-md);
+
+  &:empty {
+    display: none;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  .header__row {
+    align-items: center;
+    column-gap: var(--spacing-card-lg);
+    row-gap: var(--spacing-card-md);
+    max-width: 100%;
+
+    .header__title {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      column-gap: var(--spacing-card-lg);
+      row-gap: var(--spacing-card-md);
+      flex-basis: min-content;
+
+      h2 {
+        margin: 0 auto 0 0;
+      }
+    }
+
+    button {
+      svg {
+        transition: transform 0.25s ease-in-out;
+      }
+
+      &.not-collapsed svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .grid-display__item .label {
+    display: flex;
+    gap: var(--spacing-card-xs);
+    align-items: center;
+
+    .required {
+      color: var(--color-red);
+    }
+
+    .suggestion {
+      color: var(--color-purple);
+    }
+
+    .review {
+      color: var(--color-orange);
+    }
+  }
+
+  .checklist {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-card-xs);
+    width: fit-content;
+    flex-wrap: wrap;
+    max-width: 100%;
+
+    .checklist__title {
+      font-weight: bold;
+      margin-right: var(--spacing-card-xs);
+      color: var(--color-text-dark);
+    }
+
+    .checklist__items {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--spacing-card-xs);
+      width: fit-content;
+      max-width: 100%;
+    }
+
+    .circle {
+      --circle-size: 2rem;
+      --background-color: var(--color-bg);
+      --content-color: var(--color-gray);
+      width: var(--circle-size);
+      height: var(--circle-size);
+      border-radius: 50%;
+      background-color: var(--background-color);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        color: var(--content-color);
+        width: calc(var(--circle-size) / 2);
+        height: calc(var(--circle-size) / 2);
+      }
+
+      &.required {
+        --content-color: var(--color-red);
+      }
+
+      &.suggestion {
+        --content-color: var(--color-purple);
+      }
+
+      &.review {
+        --content-color: var(--color-orange);
+      }
+
+      &.done {
+        --background-color: var(--color-green);
+        --content-color: var(--color-brand-inverted);
+      }
+    }
+  }
 }
 </style>
--- a/apps/frontend/src/components/ui/servers/Globe.vue
+++ b/apps/frontend/src/components/ui/servers/Globe.vue
@@ -50,22 +50,27 @@ const container = ref(null);
 const showLabels = ref(false);

 const locations = ref([
-  // Active locations
-  { name: "New York", lat: 40.7128, lng: -74.006, active: true, clicked: false },
-  { name: "Los Angeles", lat: 34.0522, lng: -118.2437, active: true, clicked: false },
-  { name: "Miami", lat: 25.7617, lng: -80.1918, active: true, clicked: false },
-  { name: "Spokane", lat: 47.667309, lng: -117.411922, active: true, clicked: false },
-  { name: "Dallas", lat: 32.78372, lng: -96.7947, active: true, clicked: false },
-  // Future Locations
-  // { name: "London", lat: 51.5074, lng: -0.1278, active: false, clicked: false },
-  // { name: "Frankfurt", lat: 50.1109, lng: 8.6821, active: false, clicked: false },
-  // { name: "Amsterdam", lat: 52.3676, lng: 4.9041, active: false, clicked: false },
-  // { name: "Paris", lat: 48.8566, lng: 2.3522, active: false, clicked: false },
-  // { name: "Singapore", lat: 1.3521, lng: 103.8198, active: false, clicked: false },
-  // { name: "Tokyo", lat: 35.6762, lng: 139.6503, active: false, clicked: false },
-  // { name: "Sydney", lat: -33.8688, lng: 151.2093, active: false, clicked: false },
-  // { name: "São Paulo", lat: -23.5505, lng: -46.6333, active: false, clicked: false },
-  // { name: "Toronto", lat: 43.6532, lng: -79.3832, active: false, clicked: false },
+  {
+    name: "Vint Hill",
+    lat: 38.74724876915715,
+    lng: -77.67436507922152,
+    active: true,
+    clicked: false,
+  },
+  {
+    name: "Coventry",
+    lat: 52.39751276904742,
+    lng: -1.5777183894453757,
+    active: true,
+    clicked: false,
+  },
+  {
+    name: "Limburg",
+    lat: 50.40863558430334,
+    lng: 8.062427315007714,
+    active: true,
+    clicked: false,
+  },
 ]);

 const isLocationVisible = (location) => {
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -34,6 +34,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
  showProjectPageDownloadModalServersPromo: false,
  showProjectPageCreateServersTooltip: true,
  showProjectPageQuickServerButton: false,
+  showModrinthServersGlobe: false,
  // advancedRendering: true,
  // externalLinksNewTab: true,
  // notUsingBlockers: false,
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -554,78 +554,6 @@
  "profile.user-id": {
    "message": "User ID: {id}"
  },
-  "project-member-header.accept": {
-    "message": "Accept"
-  },
-  "project-member-header.action": {
-    "message": "Action"
-  },
-  "project-member-header.decline": {
-    "message": "Decline"
-  },
-  "project-member-header.error": {
-    "message": "Error"
-  },
-  "project-member-header.error-decline": {
-    "message": "Failed to decline team invitation"
-  },
-  "project-member-header.error-join": {
-    "message": "Failed to accept team invitation"
-  },
-  "project-member-header.invitation-no-role": {
-    "message": "You've been invited to join this project. Please accept or decline the invitation."
-  },
-  "project-member-header.invitation-title": {
-    "message": "Invitation to join project"
-  },
-  "project-member-header.invitation-with-role": {
-    "message": "You've been invited be a member of this project with the role of '{role}'."
-  },
-  "project-member-header.key-title": {
-    "message": "Status Key"
-  },
-  "project-member-header.publishing-checklist": {
-    "message": "Publishing checklist"
-  },
-  "project-member-header.required": {
-    "message": "Required"
-  },
-  "project-member-header.resubmit-for-review": {
-    "message": "Resubmit for review"
-  },
-  "project-member-header.resubmit-for-review-desc": {
-    "message": "Your project has been {status} by Modrinth's staff. In most cases, you can resubmit for review after addressing the staff's message."
-  },
-  "project-member-header.show-key": {
-    "message": "Toggle key"
-  },
-  "project-member-header.submit-checklist-tooltip": {
-    "message": "You must complete the required steps in the publishing checklist!"
-  },
-  "project-member-header.submit-for-review": {
-    "message": "Submit for review"
-  },
-  "project-member-header.submit-for-review-desc": {
-    "message": "Your project is only viewable by members of the project. It must be reviewed by moderators in order to be published."
-  },
-  "project-member-header.success": {
-    "message": "Success"
-  },
-  "project-member-header.success-decline": {
-    "message": "You have declined the team invitation"
-  },
-  "project-member-header.success-join": {
-    "message": "You have joined the project team"
-  },
-  "project-member-header.suggestion": {
-    "message": "Suggestion"
-  },
-  "project-member-header.visit-moderation-page": {
-    "message": "Visit moderation page"
-  },
-  "project-member-header.warning": {
-    "message": "Warning"
-  },
  "project-type.collection.plural": {
    "message": "Collections"
  },
--- a/apps/frontend/src/pages/[type]/[id]/settings/description.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
@@ -22,10 +22,6 @@
        "
        :on-image-upload="onUploadHandler"
      />
-      <div v-if="descriptionWarning" class="flex items-center gap-1.5 text-orange">
-        <TriangleAlertIcon class="my-auto" />
-        {{ descriptionWarning }}
-      </div>
      <div class="input-group markdown-disclaimer">
        <button
          :disabled="!hasChanges"
@@ -42,8 +38,7 @@
 </template>

 <script lang="ts" setup>
-import { SaveIcon, TriangleAlertIcon } from "@modrinth/assets";
-import { countText, MIN_DESCRIPTION_CHARS } from "@modrinth/moderation";
+import { SaveIcon } from "@modrinth/assets";
 import { MarkdownEditor } from "@modrinth/ui";
 import { type Project, type TeamMember, TeamMemberPermission } from "@modrinth/utils";
 import { computed, ref } from "vue";
@@ -58,17 +53,6 @@ const props = defineProps<{

 const description = ref(props.project.body);

-const descriptionWarning = computed(() => {
-  const text = description.value?.trim() || "";
-  const charCount = countText(text);
-
-  if (charCount < MIN_DESCRIPTION_CHARS) {
-    return `It's recommended to have a description with at least ${MIN_DESCRIPTION_CHARS} readable characters. (${charCount}/${MIN_DESCRIPTION_CHARS})`;
-  }
-
-  return null;
-});
-
 const patchRequestPayload = computed(() => {
  const payload: {
    body?: string;
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -82,10 +82,6 @@
      <label for="project-summary">
        <span class="label__title">Summary</span>
      </label>
-      <div v-if="summaryWarning" class="my-2 flex items-center gap-1.5 text-orange">
-        <TriangleAlertIcon class="my-auto" />
-        {{ summaryWarning }}
-      </div>
      <div class="textarea-wrapper summary-input">
        <textarea
          id="project-summary"
@@ -244,18 +240,9 @@

 <script setup>
 import { formatProjectStatus, formatProjectType } from "@modrinth/utils";
-import {
-  UploadIcon,
-  SaveIcon,
-  TrashIcon,
-  XIcon,
-  IssuesIcon,
-  CheckIcon,
-  TriangleAlertIcon,
-} from "@modrinth/assets";
+import { UploadIcon, SaveIcon, TrashIcon, XIcon, IssuesIcon, CheckIcon } from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
 import { ConfirmModal, Avatar } from "@modrinth/ui";
-import { MIN_SUMMARY_CHARS } from "@modrinth/moderation";
 import FileInput from "~/components/ui/FileInput.vue";

 const props = defineProps({
@@ -313,17 +300,6 @@ const hasDeletePermission = computed(() => {
  return (props.currentMember.permissions & DELETE_PROJECT) === DELETE_PROJECT;
 });

-const summaryWarning = computed(() => {
-  const text = summary.value?.trim() || "";
-  const charCount = text.length;
-
-  if (charCount < MIN_SUMMARY_CHARS) {
-    return `It's recommended to have a summary with at least ${MIN_SUMMARY_CHARS} characters. (${charCount}/${MIN_SUMMARY_CHARS})`;
-  }
-
-  return null;
-});
-
 const sideTypes = ["required", "optional", "unsupported"];

 const patchData = computed(() => {
--- a/apps/frontend/src/pages/[type]/[id]/settings/links.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/links.vue
@@ -7,26 +7,11 @@
          id="project-issue-tracker"
          title="A place for users to report bugs, issues, and concerns about your project."
        >
-          <span class="label__title">Issue tracker </span>
+          <span class="label__title">Issue tracker</span>
          <span class="label__description">
            A place for users to report bugs, issues, and concerns about your project.
          </span>
        </label>
-        <TriangleAlertIcon
-          v-if="isIssuesLinkShortener"
-          v-tooltip="`Use of link shorteners is prohibited.`"
-          class="size-6 animate-pulse text-orange"
-        />
-        <TriangleAlertIcon
-          v-else-if="isIssuesDiscordUrl"
-          v-tooltip="`Discord invites are not appropriate for this link type.`"
-          class="size-6 animate-pulse text-orange"
-        />
-        <TriangleAlertIcon
-          v-else-if="!isIssuesUrlCommon"
-          v-tooltip="`Link includes a domain which isn't common for this link type.`"
-          class="size-6 animate-pulse text-orange"
-        />
        <input
          id="project-issue-tracker"
          v-model="issuesUrl"
@@ -41,26 +26,11 @@
          id="project-source-code"
          title="A page/repository containing the source code for your project"
        >
-          <span class="label__title">Source code </span>
+          <span class="label__title">Source code</span>
          <span class="label__description">
            A page/repository containing the source code for your project
          </span>
        </label>
-        <TriangleAlertIcon
-          v-if="isSourceLinkShortener"
-          v-tooltip="`Use of link shorteners is prohibited.`"
-          class="size-6 animate-pulse text-orange"
-        />
-        <TriangleAlertIcon
-          v-else-if="isSourceDiscordUrl"
-          v-tooltip="`Discord invites are not appropriate for this link type.`"
-          class="size-6 animate-pulse text-orange"
-        />
-        <TriangleAlertIcon
-          v-else-if="!isSourceUrlCommon"
-          v-tooltip="`Link includes a domain which isn't common for this link type.`"
-          class="size-6 animate-pulse text-orange"
-        />
        <input
          id="project-source-code"
          v-model="sourceUrl"
@@ -80,16 +50,6 @@
            A page containing information, documentation, and help for the project.
          </span>
        </label>
-        <TriangleAlertIcon
-          v-if="isWikiLinkShortener"
-          v-tooltip="`Use of link shorteners is prohibited.`"
-          class="size-6 animate-pulse text-orange"
-        />
-        <TriangleAlertIcon
-          v-else-if="isWikiDiscordUrl"
-          v-tooltip="`Discord invites are not appropriate for this link type.`"
-          class="size-6 animate-pulse text-orange"
-        />
        <input
          id="project-wiki-page"
          v-model="wikiUrl"
@@ -101,19 +61,9 @@
      </div>
      <div class="adjacent-input">
        <label id="project-discord-invite" title="An invitation link to your Discord server.">
-          <span class="label__title">Discord invite </span>
+          <span class="label__title">Discord invite</span>
          <span class="label__description"> An invitation link to your Discord server. </span>
        </label>
-        <TriangleAlertIcon
-          v-if="isDiscordLinkShortener"
-          v-tooltip="`Use of link shorteners is prohibited.`"
-          class="size-6 animate-pulse text-orange"
-        />
-        <TriangleAlertIcon
-          v-else-if="!isDiscordUrlCommon"
-          v-tooltip="`You're using a link which isn't common for this link type.`"
-          class="size-6 animate-pulse text-orange"
-        />
        <input
          id="project-discord-invite"
          v-model="discordUrl"
@@ -173,13 +123,7 @@

 <script setup>
 import { DropdownSelect } from "@modrinth/ui";
-import { SaveIcon, TriangleAlertIcon } from "@modrinth/assets";
-import {
-  isCommonUrl,
-  isDiscordUrl,
-  isLinkShortener,
-  commonLinkDomains,
-} from "@modrinth/moderation";
+import { SaveIcon } from "@modrinth/assets";

 const tags = useTags();

@@ -209,46 +153,6 @@ const sourceUrl = ref(props.project.source_url);
 const wikiUrl = ref(props.project.wiki_url);
 const discordUrl = ref(props.project.discord_url);

-const isIssuesUrlCommon = computed(() => {
-  if (!issuesUrl.value || issuesUrl.value.trim().length === 0) return true;
-  return isCommonUrl(issuesUrl.value, commonLinkDomains.issues);
-});
-
-const isSourceUrlCommon = computed(() => {
-  if (!sourceUrl.value || sourceUrl.value.trim().length === 0) return true;
-  return isCommonUrl(sourceUrl.value, commonLinkDomains.source);
-});
-
-const isDiscordUrlCommon = computed(() => {
-  if (!discordUrl.value || discordUrl.value.trim().length === 0) return true;
-  return isCommonUrl(discordUrl.value, commonLinkDomains.discord);
-});
-
-const isIssuesDiscordUrl = computed(() => {
-  return isDiscordUrl(issuesUrl.value);
-});
-
-const isSourceDiscordUrl = computed(() => {
-  return isDiscordUrl(sourceUrl.value);
-});
-
-const isWikiDiscordUrl = computed(() => {
-  return isDiscordUrl(wikiUrl.value);
-});
-
-const isIssuesLinkShortener = computed(() => {
-  return isLinkShortener(issuesUrl.value);
-});
-const isSourceLinkShortener = computed(() => {
-  return isLinkShortener(sourceUrl.value);
-});
-const isWikiLinkShortener = computed(() => {
-  return isLinkShortener(wikiUrl.value);
-});
-const isDiscordLinkShortener = computed(() => {
-  return isLinkShortener(discordUrl.value);
-});
-
 const rawDonationLinks = JSON.parse(JSON.stringify(props.project.donation_urls));
 rawDonationLinks.push({
  id: null,
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -6,31 +6,11 @@
          <span class="label__title size-card-header">Tags</span>
        </h3>
      </div>
-
-      <div
-        v-if="tooManyTagsWarning && !allTagsSelectedWarning"
-        class="my-2 flex items-center gap-1.5 text-orange"
-      >
-        <TriangleAlertIcon class="my-auto" />
-        {{ tooManyTagsWarning }}
-      </div>
-
-      <div v-if="multipleResolutionTagsWarning" class="my-2 flex items-center gap-1.5 text-orange">
-        <TriangleAlertIcon class="my-auto" />
-        {{ multipleResolutionTagsWarning }}
-      </div>
-
-      <div v-if="allTagsSelectedWarning" class="my-2 flex items-center gap-1.5 text-red">
-        <TriangleAlertIcon class="my-auto" />
-        <span>{{ allTagsSelectedWarning }}</span>
-      </div>
-
      <p>
        Accurate tagging is important to help people find your
        {{ formatProjectType(project.project_type).toLowerCase() }}. Make sure to select all tags
        that apply.
      </p>
-
      <p v-if="project.versions.length === 0" class="known-errors">
        Please upload a version first in order to select tags!
      </p>
@@ -132,188 +112,145 @@
  </div>
 </template>

-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { StarIcon, SaveIcon, TriangleAlertIcon } from "@modrinth/assets";
-import {
-  formatCategory,
-  formatCategoryHeader,
-  formatProjectType,
-  sortedCategories,
-  type Project,
-} from "@modrinth/utils";
+<script>
+import { StarIcon, SaveIcon } from "@modrinth/assets";
+import { formatCategory, formatCategoryHeader, formatProjectType } from "@modrinth/utils";
 import Checkbox from "~/components/ui/Checkbox.vue";

-interface Category {
-  name: string;
-  header: string;
-  icon?: string;
-  project_type: string;
-}
+export default defineNuxtComponent({
+  components: {
+    Checkbox,
+    SaveIcon,
+    StarIcon,
+  },
+  props: {
+    project: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    allMembers: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    currentMember: {
+      type: Object,
+      default() {
+        return null;
+      },
+    },
+    patchProject: {
+      type: Function,
+      default() {
+        return () => {
+          this.$notify({
+            group: "main",
+            title: "An error occurred",
+            text: "Patch project function not found",
+            type: "error",
+          });
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      selectedTags: this.$sortedCategories().filter(
+        (x) =>
+          x.project_type === this.project.actualProjectType &&
+          (this.project.categories.includes(x.name) ||
+            this.project.additional_categories.includes(x.name)),
+      ),
+      featuredTags: this.$sortedCategories().filter(
+        (x) =>
+          x.project_type === this.project.actualProjectType &&
+          this.project.categories.includes(x.name),
+      ),
+    };
+  },
+  computed: {
+    categoryLists() {
+      const lists = {};
+      this.$sortedCategories().forEach((x) => {
+        if (x.project_type === this.project.actualProjectType) {
+          const header = x.header;
+          if (!lists[header]) {
+            lists[header] = [];
+          }
+          lists[header].push(x);
+        }
+      });
+      return lists;
+    },
+    patchData() {
+      const data = {};
+      // Promote selected categories to featured if there are less than 3 featured
+      const newFeaturedTags = this.featuredTags.slice();
+      if (newFeaturedTags.length < 1 && this.selectedTags.length > newFeaturedTags.length) {
+        const nonFeaturedCategories = this.selectedTags.filter((x) => !newFeaturedTags.includes(x));

-interface Props {
-  project: Project & {
-    actualProjectType: string;
-  };
-  allMembers?: any[];
-  currentMember?: any;
-  patchProject?: (data: any) => void;
-}
+        nonFeaturedCategories
+          .slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
+          .forEach((x) => newFeaturedTags.push(x));
+      }
+      // Convert selected and featured categories to backend-usable arrays
+      const categories = newFeaturedTags.map((x) => x.name);
+      const additionalCategories = this.selectedTags
+        .filter((x) => !newFeaturedTags.includes(x))
+        .map((x) => x.name);

-const tags = useTags();
+      if (
+        categories.length !== this.project.categories.length ||
+        categories.some((value) => !this.project.categories.includes(value))
+      ) {
+        data.categories = categories;
+      }

-const props = withDefaults(defineProps<Props>(), {
-  allMembers: () => [],
-  currentMember: null,
-  patchProject: () => {
-    addNotification({
-      title: "An error occurred",
-      text: "Patch project function not found",
-      type: "error",
-    });
+      if (
+        additionalCategories.length !== this.project.additional_categories.length ||
+        additionalCategories.some((value) => !this.project.additional_categories.includes(value))
+      ) {
+        data.additional_categories = additionalCategories;
+      }
+
+      return data;
+    },
+    hasChanges() {
+      return Object.keys(this.patchData).length > 0;
+    },
+  },
+  methods: {
+    formatProjectType,
+    formatCategoryHeader,
+    formatCategory,
+    toggleCategory(category) {
+      if (this.selectedTags.includes(category)) {
+        this.selectedTags = this.selectedTags.filter((x) => x !== category);
+        if (this.featuredTags.includes(category)) {
+          this.featuredTags = this.featuredTags.filter((x) => x !== category);
+        }
+      } else {
+        this.selectedTags.push(category);
+      }
+    },
+    toggleFeaturedCategory(category) {
+      if (this.featuredTags.includes(category)) {
+        this.featuredTags = this.featuredTags.filter((x) => x !== category);
+      } else {
+        this.featuredTags.push(category);
+      }
+    },
+    saveChanges() {
+      if (this.hasChanges) {
+        this.patchProject(this.patchData);
+      }
+    },
  },
 });
-
-const selectedTags = ref<Category[]>(
-  sortedCategories(tags.value).filter(
-    (x: Category) =>
-      x.project_type === props.project.actualProjectType &&
-      (props.project.categories.includes(x.name) ||
-        props.project.additional_categories.includes(x.name)),
-  ),
-);
-
-const featuredTags = ref<Category[]>(
-  sortedCategories(tags.value).filter(
-    (x: Category) =>
-      x.project_type === props.project.actualProjectType &&
-      props.project.categories.includes(x.name),
-  ),
-);
-
-const categoryLists = computed(() => {
-  const lists: Record<string, Category[]> = {};
-  sortedCategories(tags.value).forEach((x: Category) => {
-    if (x.project_type === props.project.actualProjectType) {
-      const header = x.header;
-      if (!lists[header]) {
-        lists[header] = [];
-      }
-      lists[header].push(x);
-    }
-  });
-  return lists;
-});
-
-const tooManyTagsWarning = computed(() => {
-  const tagCount = selectedTags.value.length;
-  if (tagCount > 8) {
-    return `You've selected ${tagCount} tags. Consider reducing to 8 or fewer to keep your project focused and easier to discover.`;
-  }
-  return null;
-});
-
-const multipleResolutionTagsWarning = computed(() => {
-  if (props.project.project_type !== "resourcepack") return null;
-
-  const resolutionTags = selectedTags.value.filter((tag) =>
-    ["8x-", "16x", "32x", "48x", "64x", "128x", "256x", "512x+"].includes(tag.name),
-  );
-
-  if (resolutionTags.length > 1) {
-    return `You've selected ${resolutionTags.length} resolution tags (${resolutionTags
-      .map((t) => t.name)
-      .join(", ")
-      .replace("8x-", "8x or lower")
-      .replace(
-        "512x+",
-        "512x or higher",
-      )}). Resource packs should typically only have one resolution tag.`;
-  }
-  return null;
-});
-
-const allTagsSelectedWarning = computed(() => {
-  const categoriesForProjectType = sortedCategories(tags.value).filter(
-    (x: Category) => x.project_type === props.project.actualProjectType,
-  );
-  const totalSelectedTags = selectedTags.value.length;
-
-  if (
-    totalSelectedTags === categoriesForProjectType.length &&
-    categoriesForProjectType.length > 0
-  ) {
-    return `You've selected all ${categoriesForProjectType.length} available tags. Please select only the tags that truly apply to your project.`;
-  }
-  return null;
-});
-
-const patchData = computed(() => {
-  const data: Record<string, string[]> = {};
-
-  // Promote selected categories to featured if there are less than 3 featured
-  const newFeaturedTags = featuredTags.value.slice();
-  if (newFeaturedTags.length < 1 && selectedTags.value.length > newFeaturedTags.length) {
-    const nonFeaturedCategories = selectedTags.value.filter((x) => !newFeaturedTags.includes(x));
-
-    nonFeaturedCategories
-      .slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
-      .forEach((x) => newFeaturedTags.push(x));
-  }
-
-  // Convert selected and featured categories to backend-usable arrays
-  const categories = newFeaturedTags.map((x) => x.name);
-  const additionalCategories = selectedTags.value
-    .filter((x) => !newFeaturedTags.includes(x))
-    .map((x) => x.name);
-
-  if (
-    categories.length !== props.project.categories.length ||
-    categories.some((value) => !props.project.categories.includes(value))
-  ) {
-    data.categories = categories;
-  }
-
-  if (
-    additionalCategories.length !== props.project.additional_categories.length ||
-    additionalCategories.some((value) => !props.project.additional_categories.includes(value))
-  ) {
-    data.additional_categories = additionalCategories;
-  }
-
-  return data;
-});
-
-const hasChanges = computed(() => {
-  return Object.keys(patchData.value).length > 0;
-});
-
-const toggleCategory = (category: Category) => {
-  if (selectedTags.value.includes(category)) {
-    selectedTags.value = selectedTags.value.filter((x) => x !== category);
-    if (featuredTags.value.includes(category)) {
-      featuredTags.value = featuredTags.value.filter((x) => x !== category);
-    }
-  } else {
-    selectedTags.value.push(category);
-  }
-};
-
-const toggleFeaturedCategory = (category: Category) => {
-  if (featuredTags.value.includes(category)) {
-    featuredTags.value = featuredTags.value.filter((x) => x !== category);
-  } else {
-    featuredTags.value.push(category);
-  }
-};
-
-const saveChanges = () => {
-  if (hasChanges.value) {
-    props.patchProject(patchData.value);
-  }
-};
 </script>
-
 <style lang="scss" scoped>
 .label__title {
  display: flex;
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -515,6 +515,98 @@
      </div>
    </section>

+    <section
+      v-if="flags.showModrinthServersGlobe"
+      class="relative mt-24 flex flex-col bg-[radial-gradient(65%_50%_at_50%_-10%,var(--color-brand-highlight)_0%,var(--color-accent-contrast)_100%)] px-3 pt-24 md:mt-48 md:pt-48"
+    >
+      <div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
+      <div class="mx-auto flex w-full max-w-7xl flex-col gap-8">
+        <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
+          <div class="flex flex-col gap-8">
+            <div class="flex flex-col gap-4">
+              <div
+                class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+              >
+                Server Locations
+              </div>
+              <h1 class="relative m-0 max-w-2xl text-4xl leading-[120%] md:text-7xl">
+                Global Coverage
+              </h1>
+            </div>
+
+            <div class="flex flex-col gap-8">
+              <div class="flex flex-col gap-4">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-8 place-content-center rounded-full bg-highlight-green">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="text-brand"
+                    >
+                      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+                      <circle cx="12" cy="10" r="3" />
+                    </svg>
+                  </div>
+                  <h2 class="relative m-0 text-xl font-medium leading-[155%] md:text-2xl">
+                    Strategic Locations
+                  </h2>
+                </div>
+                <p
+                  class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+                >
+                  With servers strategically placed in Vint Hill (USA), Coventry (UK), and Limburg
+                  (Germany), we provide excellent coverage across North America and Europe. Each
+                  location features high-performance hardware and comprehensive DDoS protection.
+                </p>
+              </div>
+
+              <div class="flex flex-col gap-4">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-8 place-content-center rounded-full bg-highlight-blue">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="text-blue"
+                    >
+                      <path d="M12 2a10 10 0 1 0 10 10" />
+                      <path d="M18 13a6 6 0 0 0-6-6" />
+                      <path d="M13 2.05a10 10 0 0 1 2 2" />
+                      <path d="M19.5 8.5a10 10 0 0 1 2 2" />
+                    </svg>
+                  </div>
+                  <h2 class="relative m-0 text-xl font-medium leading-[155%] md:text-2xl">
+                    Low Latency Connectivity
+                  </h2>
+                </div>
+                <p
+                  class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+                >
+                  Our three carefully chosen locations ensure optimal ping times and reliable
+                  connections for players across multiple continents. Choose the region closest to
+                  you for the best gaming experience.
+                </p>
+              </div>
+            </div>
+          </div>
+          <Globe />
+        </div>
+      </div>
+    </section>
+
    <section
      id="plan"
      pyro-hash="plan"
@@ -651,6 +743,7 @@ import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
 import ServerPlanSelector from "~/components/ui/servers/marketing/ServerPlanSelector.vue";
 import OptionGroup from "~/components/ui/OptionGroup.vue";
+import Globe from "~/components/ui/servers/Globe.vue";

 const { locale } = useVIntl();

@@ -842,6 +935,7 @@ async function fetchPaymentData() {
 const selectedProjectId = ref();

 const route = useRoute();
+const flags = useFeatureFlags();
 const isAtCapacity = computed(
  () => isSmallAtCapacity.value && isMediumAtCapacity.value && isLargeAtCapacity.value,
 );
--- a/apps/frontend/src/pages/servers_new/manage/index.vue
+++ b/apps/frontend/src/pages/servers_new/manage/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <div
+    class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
+  >
+    <ServersManagePage />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ServersManagePage } from "@modrinth/ui";
+</script>
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
    "blog:fix": "turbo run fix --filter=@modrinth/blog",
    "pages:build": "NITRO_PRESET=cloudflare-pages pnpm --filter frontend run build",
    "moderation:fix": "turbo run fix --filter=@modrinth/moderation",
-    "moderation:intl:extract": "pnpm run --filter=@modrinth/moderation intl:extract",
    "build": "turbo run build --continue",
    "lint": "turbo run lint --continue",
    "test": "turbo run test --continue",
--- a/packages/assets/branding/illustrations/servers-background.svg
+++ b/packages/assets/branding/illustrations/servers-background.svg
@@ -0,0 +1,56 @@
+<svg viewBox="0 0 592 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M0 3C0 1.34315 1.34315 0 3 0H93C94.6569 0 96 1.34315 96 3V93C96 94.6569 94.6569 96 93 96H3C1.34315 96 0 94.6569 0 93V3Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 18C120 16.8954 120.895 16 122 16H590C591.105 16 592 16.8954 592 18V38C592 39.1046 591.105 40 590 40H122C120.895 40 120 39.1046 120 38V18Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 62C120 60.8954 120.895 60 122 60H142C143.105 60 144 60.8954 144 62V82C144 83.1046 143.105 84 142 84H122C120.895 84 120 83.1046 120 82V62Z"
+        fill="#F3F4F6" />
+    <path
+        d="M160 62C160 60.8954 160.895 60 162 60H298C299.105 60 300 60.8954 300 62V82C300 83.1046 299.105 84 298 84H162C160.895 84 160 83.1046 160 82V62Z"
+        fill="#F3F4F6" />
+    <path
+        d="M324 62C324 60.8954 324.895 60 326 60H346C347.105 60 348 60.8954 348 62V82C348 83.1046 347.105 84 346 84H326C324.895 84 324 83.1046 324 82V62Z"
+        fill="#F3F4F6" />
+    <path
+        d="M364 62C364 60.8954 364.895 60 366 60H466C467.105 60 468 60.8954 468 62V82C468 83.1046 467.105 84 466 84H366C364.895 84 364 83.1046 364 82V62Z"
+        fill="#F3F4F6" />
+    <path
+        d="M0 147C0 145.343 1.34315 144 3 144H93C94.6569 144 96 145.343 96 147V237C96 238.657 94.6569 240 93 240H3C1.34315 240 0 238.657 0 237V147Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 162C120 160.895 120.895 160 122 160H590C591.105 160 592 160.895 592 162V182C592 183.105 591.105 184 590 184H122C120.895 184 120 183.105 120 182V162Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 206C120 204.895 120.895 204 122 204H142C143.105 204 144 204.895 144 206V226C144 227.105 143.105 228 142 228H122C120.895 228 120 227.105 120 226V206Z"
+        fill="#F3F4F6" />
+    <path
+        d="M160 206C160 204.895 160.895 204 162 204H298C299.105 204 300 204.895 300 206V226C300 227.105 299.105 228 298 228H162C160.895 228 160 227.105 160 226V206Z"
+        fill="#F3F4F6" />
+    <path
+        d="M324 206C324 204.895 324.895 204 326 204H346C347.105 204 348 204.895 348 206V226C348 227.105 347.105 228 346 228H326C324.895 228 324 227.105 324 226V206Z"
+        fill="#F3F4F6" />
+    <path
+        d="M364 206C364 204.895 364.895 204 366 204H466C467.105 204 468 204.895 468 206V226C468 227.105 467.105 228 466 228H366C364.895 228 364 227.105 364 226V206Z"
+        fill="#F3F4F6" />
+    <path
+        d="M0 291C0 289.343 1.34315 288 3 288H93C94.6569 288 96 289.343 96 291V381C96 382.657 94.6569 384 93 384H3C1.34315 384 0 382.657 0 381V291Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 306C120 304.895 120.895 304 122 304H590C591.105 304 592 304.895 592 306V326C592 327.105 591.105 328 590 328H122C120.895 328 120 327.105 120 326V306Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 350C120 348.895 120.895 348 122 348H142C143.105 348 144 348.895 144 350V370C144 371.105 143.105 372 142 372H122C120.895 372 120 371.105 120 370V350Z"
+        fill="#F3F4F6" />
+    <path
+        d="M160 350C160 348.895 160.895 348 162 348H298C299.105 348 300 348.895 300 350V370C300 371.105 299.105 372 298 372H162C160.895 372 160 371.105 160 370V350Z"
+        fill="#F3F4F6" />
+    <path
+        d="M324 350C324 348.895 324.895 348 326 348H346C347.105 348 348 348.895 348 350V370C348 371.105 347.105 372 346 372H326C324.895 372 324 371.105 324 370V350Z"
+        fill="#F3F4F6" />
+    <path
+        d="M364 350C364 348.895 364.895 348 366 348H466C467.105 348 468 348.895 468 350V370C468 371.105 467.105 372 466 372H366C364.895 372 364 371.105 364 370V350Z"
+        fill="#F3F4F6" />
+</svg>
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -50,6 +50,7 @@ import _CubeIcon from './icons/cube.svg?component'
 import _CurrencyIcon from './icons/currency.svg?component'
 import _DashboardIcon from './icons/dashboard.svg?component'
 import _DatabaseIcon from './icons/database.svg?component'
+import _DotIcon from './icons/dot.svg?component'
 import _DownloadIcon from './icons/download.svg?component'
 import _DropdownIcon from './icons/dropdown.svg?component'
 import _EditIcon from './icons/edit.svg?component'
@@ -243,6 +244,7 @@ export const CubeIcon = _CubeIcon
 export const CurrencyIcon = _CurrencyIcon
 export const DashboardIcon = _DashboardIcon
 export const DatabaseIcon = _DatabaseIcon
+export const DotIcon = _DotIcon
 export const DownloadIcon = _DownloadIcon
 export const DropdownIcon = _DropdownIcon
 export const EditIcon = _EditIcon
--- a/packages/assets/icons/dot.svg
+++ b/packages/assets/icons/dot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dot-icon lucide-dot"><circle cx="12.1" cy="12.1" r="1"/></svg>
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -12,6 +12,7 @@ import './omorphia.scss'
 import _ModrinthIcon from './branding/logo.svg?component'
 import _FourOhFourNotFound from './branding/404.svg?component'
 import _ModrinthPlusIcon from './branding/modrinth-plus.svg?component'
+import _ServersManageIllustration from './branding/illustrations/servers-background.svg?component'
 import _AngryRinthbot from './branding/rinthbot/angry.webp'
 import _AnnoyedRinthbot from './branding/rinthbot/annoyed.webp'
 import _ConfusedRinthbot from './branding/rinthbot/confused.webp'
@@ -50,6 +51,7 @@ import _YouTubeIcon from './external/youtube.svg?component'
 export const ModrinthIcon = _ModrinthIcon
 export const FourOhFourNotFound = _FourOhFourNotFound
 export const ModrinthPlusIcon = _ModrinthPlusIcon
+export const ServersManageIllustration = _ServersManageIllustration
 export const AngryRinthbot = _AngryRinthbot
 export const AnnoyedRinthbot = _AnnoyedRinthbot
 export const ConfusedRinthbot = _ConfusedRinthbot
--- a/packages/moderation/README.md
+++ b/packages/moderation/README.md
@@ -1,8 +1,6 @@
-<!-- TODO: After checklist v1.5, move everything into src directory. -->
-
 # @modrinth/moderation

-This package contains both the moderation checklist system used by moderators for reviewing projects on Modrinth, and the publishing checklist (nag system) that provides automated feedback to project authors during the submission process.
+This package contains the moderation checklist system used for reviewing projects on Modrinth. It provides a structured and transparent way to define moderation stages, actions, and messages that are displayed to moderators during the review process.

 ## Structure

@@ -11,30 +9,22 @@ The package is organized as follows:
 ```
 /packages/moderation/
 ├── data/
-│   ├── checklist.ts        # Main moderation checklist definition - imports and exports all stages
-│   ├── messages/           # Markdown files containing message templates for moderation
+│   ├── checklist.ts        # Main checklist definition - imports and exports all stages
+│   ├── messages/           # Markdown files containing message templates
 │   │   ├── title/          # Messages for the title stage
 │   │   ├── description/    # Messages for the description stage
 │   │   └── ...             # One directory per stage
-│   ├── stages/             # Moderation stage definition files
-│   │   ├── title.ts        # Title stage definition
-│   │   ├── description.ts  # Description stage definition
-│   │   └── ...             # One file per stage
-│   └── nags/               # Publishing checklist (nag system) files
-│       ├── core.ts         # Core nags (required fields, basic validation)
-│       └── ...
+│   └── stages/             # Stage definition files
+│       ├── title.ts        # Title stage definition
+│       ├── description.ts  # Description stage definition
+│       └── ...             # One file per stage
 └── types/                  # Type definitions
-    ├── actions.ts          # Action-related types (moderation)
-    ├── messages.ts         # Message-related types (moderation)
-    ├── stage.ts            # Stage-related types (moderation)
-    └── nags.ts             # Nag-related types (publishing checklist)
+    ├── actions.ts          # Action-related types
+    ├── messages.ts         # Message-related types
+    └── stage.ts            # Stage-related types
 ```

-## Moderation Checklist System
-
-The moderation checklist provides a structured and transparent way to define moderation stages, actions, and messages that are displayed to moderators during the review process.
-
-### Stages
+## Stages

 A stage represents a discrete step in the moderation process, like checking a project's title, description, or links. Each stage has:

@@ -45,7 +35,7 @@ A stage represents a discrete step in the moderation process, like checking a pr

 Stages are defined in individual files in the `data/stages` directory and are assembled into the complete checklist in `data/checklist.ts`.

-### Actions
+## Actions

 Actions represent decisions moderators can make for each stage. They can be buttons, dropdowns, toggles, etc. Actions can have:

@@ -57,11 +47,11 @@ Actions represent decisions moderators can make for each stage. They can be butt

 Each action requires a unique `id` field that is used for conditional logic and action relationships. The `suggestedStatus` and `severity` fields help determine the overall moderation outcome.

-### Messages
+## Messages

 Messages are the actual text that will be included in communications to project authors. To promote maintainability and reuse, messages are stored as Markdown files in the `data/messages` directory, organized by stage.

-#### Variable replacement
+### Variable replacement

 You can use variables in your messages that will be replaced with user input:

@@ -91,11 +81,11 @@ More text after the variable.

 The `%MESSAGE%` placeholder will be replaced with the text entered by the moderator.

-### Conditional logic
+## Conditional logic

 The moderation system supports conditional behavior that changes based on the selection of other actions.

-#### Conditional messages
+### Conditional messages

 You can define different messages for an action based on other selected actions:

@@ -118,7 +108,7 @@ You can define different messages for an action based on other selected actions:
 }
 ```

-#### Enabling and disabling actions
+### Enabling and disabling actions

 Actions can enable or disable other actions when selected:

@@ -141,7 +131,7 @@ Actions can enable or disable other actions when selected:
 }
 ```

-#### Conditional text inputs
+### Conditional text inputs

 Text inputs can be conditionally shown based on selected actions:

@@ -157,86 +147,3 @@ relevantExtraInput: [
  },
 ]
 ```
-
-## Publishing Checklist (Nag System)
-
-The nag system provides automated feedback to project authors during the submission process, helping them improve their projects before they reach moderation. It analyzes project data and provides suggestions, warnings, and requirements.
-
-### Nags
-
-A nag represents a specific issue or suggestion for improvement. Each nag has:
-
- A unique `id` for identification
- A `title` and `description` displayed to the user
- A `status` indicating severity: `'required'`, `'warning'`, or `'suggestion'`
- A `shouldShow` function that determines when the nag should be displayed
- An optional `link` to help users address the issue
-
-### Internationalization
-
-Use vintl's `defineMessage` syntax.
-
-If you want to use context in the messages, you can do so like this:
-
-```typescript
-description: (context: NagContext) => {
-  const { formatMessage } = useVIntl()
-
-  return formatMessage(defineMessage(...), {
-    length: context.project.body?.length || 0,
-    minChars: MIN_DESCRIPTION_CHARS,
-  })
-}
-```
-
-### Nag Context
-
-The `NagContext` type provides access to:
-
- `project`: Current project data
- `versions`: Project versions
- `tags`: Frontend "tags" (generated state)
- `currentRoute`: Current page route
- and other data...
-
-### Adding New Nags
-
-To add a new nag:
-
-1. Add the nag definition to the appropriate category file (or make a new category file and add it to `data/nags.ts`)
-2. Add corresponding i18n messages to the `.i18n.ts` file
-3. Implement the `shouldShow` logic based on project state
-4. Add appropriate links to help users resolve the issue
-5. Run `pnpm run fix` to fix lint issues & generate the root locale index.json file.
-
-Example:
-
-```typescript
-// In description.ts
-{
-  id: 'new-nag',
-  title: messages.newNagTitle,
-  description: messages.newNagDescription,
-  status: 'warning',
-  shouldShow: (context: NagContext) => {
-    // Your validation logic here
-    return someCondition
-  },
-  link: {
-    path: 'settings/description',
-    title: messages.editDescriptionTitle,
-    shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-description',
-  },
-}
-```
-
-```typescript
-// In description.i18n.ts
-newNagTitle: {
-  id: 'nags.new-nag.title',
-  defaultMessage: 'New Nag Title',
-},
-newNagDescription: {
-  id: 'nags.new-nag.description',
-  defaultMessage: 'Description of the new nag issue.',
-```
--- a/packages/moderation/data/nags.ts
+++ b/packages/moderation/data/nags.ts
@@ -1,7 +0,0 @@
-import type { Nag } from '../types/nags'
-import { coreNags } from './nags/core'
-import { descriptionNags } from './nags/description'
-import { linksNags } from './nags/links'
-import { tagsNags } from './nags/tags'
-
-export default [...coreNags, ...linksNags, ...descriptionNags, ...tagsNags] as Nag[]
--- a/packages/moderation/data/nags/core.ts
+++ b/packages/moderation/data/nags/core.ts
@@ -1,241 +0,0 @@
-import type { Nag, NagContext } from '../../types/nags'
-import { formatProjectType } from '@modrinth/utils'
-import { useVIntl, defineMessage } from '@vintl/vintl'
-
-export const coreNags: Nag[] = [
-  {
-    id: 'moderator-feedback',
-    title: defineMessage({
-      id: 'nags.moderator-feedback.title',
-      defaultMessage: 'Review moderator feedback',
-    }),
-    description: defineMessage({
-      id: 'nags.moderator-feedback.description',
-      defaultMessage:
-        'Review and address all concerns from the moderation team before resubmitting.',
-    }),
-    status: 'warning',
-    shouldShow: (context: NagContext) =>
-      context.tags.rejectedStatuses.includes(context.project.status),
-    link: {
-      path: 'moderation',
-      title: defineMessage({
-        id: 'nags.moderation.title',
-        defaultMessage: 'Visit moderation thread',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-moderation',
-    },
-  },
-  {
-    id: 'upload-version',
-    title: defineMessage({
-      id: 'nags.upload-version.title',
-      defaultMessage: 'Upload a version',
-    }),
-    description: defineMessage({
-      id: 'nags.upload-version.description',
-      defaultMessage: 'At least one version is required for a project to be submitted for review.',
-    }),
-    status: 'required',
-    shouldShow: (context: NagContext) => context.versions.length < 1,
-    link: {
-      path: 'versions',
-      title: defineMessage({
-        id: 'nags.versions.title',
-        defaultMessage: 'Visit versions page',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-versions',
-    },
-  },
-  {
-    id: 'add-description',
-    title: defineMessage({
-      id: 'nags.add-description.title',
-      defaultMessage: 'Add a description',
-    }),
-    description: defineMessage({
-      id: 'nags.add-description.description',
-      defaultMessage:
-        "A description that clearly describes the project's purpose and function is required.",
-    }),
-    status: 'required',
-    shouldShow: (context: NagContext) => context.project.body === '',
-    link: {
-      path: 'settings/description',
-      title: defineMessage({
-        id: 'nags.settings.description.title',
-        defaultMessage: 'Visit description settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-description',
-    },
-  },
-  {
-    id: 'add-icon',
-    title: defineMessage({
-      id: 'nags.add-icon.title',
-      defaultMessage: 'Add an icon',
-    }),
-    description: defineMessage({
-      id: 'nags.add-icon.description',
-      defaultMessage:
-        'Adding a unique, relevant, and engaging icon makes your project identifiable and helps it stand out.',
-    }),
-    status: 'suggestion',
-    shouldShow: (context: NagContext) => !context.project.icon_url,
-    link: {
-      path: 'settings',
-      title: defineMessage({
-        id: 'nags.settings.title',
-        defaultMessage: 'Visit general settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings',
-    },
-  },
-  {
-    id: 'feature-gallery-image',
-    title: defineMessage({
-      id: 'nags.feature-gallery-image.title',
-      defaultMessage: 'Feature a gallery image',
-    }),
-    description: defineMessage({
-      id: 'nags.feature-gallery-image.description',
-      defaultMessage:
-        'The featured gallery image is often how your project makes its first impression.',
-    }),
-    status: 'suggestion',
-    shouldShow: (context: NagContext) => {
-      const featuredGalleryImage = context.project.gallery?.find((img) => img.featured)
-      return context.project?.gallery?.length === 0 || !featuredGalleryImage
-    },
-    link: {
-      path: 'gallery',
-      title: defineMessage({
-        id: 'nags.gallery.title',
-        defaultMessage: 'Visit gallery page',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-gallery',
-    },
-  },
-  {
-    id: 'select-tags',
-    title: defineMessage({
-      id: 'nags.select-tags.title',
-      defaultMessage: 'Select tags',
-    }),
-    description: defineMessage({
-      id: 'nags.select-tags.description',
-      defaultMessage:
-        'Select the tags that correctly apply to your project to help the right users find it.',
-    }),
-    status: 'suggestion',
-    shouldShow: (context: NagContext) =>
-      context.project.versions.length > 0 && context.project.categories.length < 1,
-    link: {
-      path: 'settings/tags',
-      title: defineMessage({
-        id: 'nags.settings.tags.title',
-        defaultMessage: 'Visit tag settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-tags',
-    },
-  },
-  {
-    id: 'add-links',
-    title: defineMessage({
-      id: 'nags.add-links.title',
-      defaultMessage: 'Add external links',
-    }),
-    description: defineMessage({
-      id: 'nags.add-links.description',
-      defaultMessage:
-        'Add any relevant links targeted outside of Modrinth, such as source code, an issue tracker, or a Discord invite.',
-    }),
-    status: 'suggestion',
-    shouldShow: (context: NagContext) =>
-      !(
-        context.project.issues_url ||
-        context.project.source_url ||
-        context.project.wiki_url ||
-        context.project.discord_url ||
-        context.project.donation_urls.length > 0
-      ),
-    link: {
-      path: 'settings/links',
-      title: defineMessage({
-        id: 'nags.settings.links.title',
-        defaultMessage: 'Visit links settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-links',
-    },
-  },
-  {
-    id: 'select-environments',
-    title: defineMessage({
-      id: 'nags.select-environments.title',
-      defaultMessage: 'Select supported environments',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.select-environments.description',
-          defaultMessage: `Select if the {projectType} functions on the client-side and/or server-side.`,
-        }),
-        {
-          projectType: formatProjectType(context.project.project_type).toLowerCase(),
-        },
-      )
-    },
-    status: 'required',
-    shouldShow: (context: NagContext) => {
-      const excludedTypes = ['resourcepack', 'plugin', 'shader', 'datapack']
-      return (
-        context.project.versions.length > 0 &&
-        !excludedTypes.includes(context.project.project_type) &&
-        (context.project.client_side === 'unknown' ||
-          context.project.server_side === 'unknown' ||
-          (context.project.client_side === 'unsupported' &&
-            context.project.server_side === 'unsupported'))
-      )
-    },
-    link: {
-      path: 'settings',
-      title: defineMessage({
-        id: 'nags.settings.environments.title',
-        defaultMessage: 'Visit general settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings',
-    },
-  },
-  {
-    id: 'select-license',
-    title: defineMessage({
-      id: 'nags.select-license.title',
-      defaultMessage: 'Select a license',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.select-license.description',
-          defaultMessage: 'Select the license your {projectType} is distributed under.',
-        }),
-        {
-          projectType: formatProjectType(context.project.project_type).toLowerCase(),
-        },
-      )
-    },
-    status: 'required',
-    shouldShow: (context: NagContext) => context.project.license.id === 'LicenseRef-Unknown',
-    link: {
-      path: 'settings/license',
-      title: defineMessage({
-        id: 'nags.settings.license.title',
-        defaultMessage: 'Visit license settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-license',
-    },
-  },
-]
--- a/packages/moderation/data/nags/description.ts
+++ b/packages/moderation/data/nags/description.ts
@@ -1,343 +0,0 @@
-import { renderHighlightedString } from '@modrinth/utils'
-import type { Nag, NagContext } from '../../types/nags'
-import { useVIntl, defineMessage } from '@vintl/vintl'
-
-export const MIN_DESCRIPTION_CHARS = 200
-export const MAX_HEADER_LENGTH = 80
-export const MIN_SUMMARY_CHARS = 30
-export const MIN_CHARS_PER_IMAGE = 60
-
-export function analyzeHeaderLength(markdown: string): {
-  hasLongHeaders: boolean
-  longHeaders: string[]
-} {
-  if (!markdown) return { hasLongHeaders: false, longHeaders: [] }
-
-  const withoutCodeBlocks = markdown.replace(/```[\s\S]*?```/g, '').replace(/`[^`]*`/g, '')
-
-  const headerRegex = /^(#{1,3})\s+(.+)$/gm
-  const headers = [...withoutCodeBlocks.matchAll(headerRegex)]
-
-  const longHeaders: string[] = []
-
-  headers.forEach((match) => {
-    const headerText = match[2].trim()
-    const sentenceEnders = /[.!?]+/g
-    const sentences = headerText.split(sentenceEnders).filter((s) => s.trim().length > 0)
-
-    const isVeryLong = headerText.length > MAX_HEADER_LENGTH
-    const hasMultipleSentences = sentences.length > 1
-
-    if (isVeryLong || hasMultipleSentences) {
-      longHeaders.push(headerText)
-    }
-  })
-
-  return {
-    hasLongHeaders: longHeaders.length > 0,
-    longHeaders,
-  }
-}
-
-export function analyzeImageContent(markdown: string): {
-  imageHeavy: boolean
-  hasEmptyAltText: boolean
-} {
-  if (!markdown) return { imageHeavy: false, hasEmptyAltText: false }
-
-  const withoutCodeBlocks = markdown.replace(/```[\s\S]*?```/g, '').replace(/`[^`]*`/g, '')
-
-  const imageRegex = /!\[([^\]]*)\]\([^)]+\)/g
-  const images = [...withoutCodeBlocks.matchAll(imageRegex)]
-
-  const htmlImageRegex = /<img[^>]*>/gi
-  const htmlImages = [...withoutCodeBlocks.matchAll(htmlImageRegex)]
-
-  const totalImages = images.length + htmlImages.length
-  if (totalImages === 0) return { imageHeavy: false, hasEmptyAltText: false }
-
-  const textWithoutImages = withoutCodeBlocks
-    .replace(/!\[([^\]]*)\]\([^)]+\)/g, '')
-    .replace(/<img[^>]*>/gi, '')
-    .replace(/\s+/g, ' ')
-    .trim()
-
-  const textLength = textWithoutImages.length
-  const recommendedTextLength = MIN_CHARS_PER_IMAGE * totalImages
-
-  const imageHeavy =
-    recommendedTextLength > MIN_DESCRIPTION_CHARS && textLength < recommendedTextLength
-
-  const hasEmptyAltText =
-    images.some((match) => !match[1]?.trim()) ||
-    htmlImages.some((match) => {
-      const altMatch = match[0].match(/alt\s*=\s*["']([^"']*)["']/i)
-      return !altMatch || !altMatch[1]?.trim()
-    })
-
-  return { imageHeavy, hasEmptyAltText }
-}
-
-export function countText(markdown: string): number {
-  const htmlString = renderHighlightedString(markdown)
-  const parser = new DOMParser()
-  const doc = parser.parseFromString(htmlString, 'text/html')
-  const walker = document.createTreeWalker(doc, NodeFilter.SHOW_TEXT)
-
-  const textList: string[] = []
-  let currentNode: Node | null = walker.currentNode
-
-  while (currentNode) {
-    if (currentNode.textContent !== null) {
-      textList.push(currentNode.textContent)
-    }
-    currentNode = walker.nextNode()
-  }
-
-  return textList.join(' ').trim().length
-}
-
-export const descriptionNags: Nag[] = [
-  {
-    id: 'description-too-short',
-    title: defineMessage({
-      id: 'nags.description-too-short.title',
-      defaultMessage: 'Expand the description',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-      const readableLength = countText(context.project.body || '')
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.description-too-short.description',
-          defaultMessage:
-            'Your description is {length} readable characters. At least {minChars} characters is recommended to create a clear and informative description.',
-        }),
-        {
-          length: readableLength,
-          minChars: MIN_DESCRIPTION_CHARS,
-        },
-      )
-    },
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      const readableLength = countText(context.project.body || '')
-      return readableLength < MIN_DESCRIPTION_CHARS && readableLength > 0
-    },
-    link: {
-      path: 'settings/description',
-      title: defineMessage({
-        id: 'nags.edit-description.title',
-        defaultMessage: 'Edit description',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-description',
-    },
-  },
-  {
-    id: 'long-headers',
-    title: defineMessage({
-      id: 'nags.long-headers.title',
-      defaultMessage: 'Shorten headers',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-      const { longHeaders } = analyzeHeaderLength(context.project.body || '')
-      const count = longHeaders.length
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.long-headers.description',
-          defaultMessage:
-            '{count, plural, one {# header} other {# headers}} in your description {count, plural, one {is} other {are}} too long. Headers should be concise and act as section titles, not full sentences.',
-        }),
-        {
-          count,
-        },
-      )
-    },
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      const { hasLongHeaders } = analyzeHeaderLength(context.project.body || '')
-      return hasLongHeaders
-    },
-    link: {
-      path: 'settings/description',
-      title: defineMessage({
-        id: 'nags.edit-description.title',
-        defaultMessage: 'Edit description',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-description',
-    },
-  },
-  {
-    id: 'summary-too-short',
-    title: defineMessage({
-      id: 'nags.summary-too-short.title',
-      defaultMessage: 'Expand the summary',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.summary-too-short.description',
-          defaultMessage:
-            'Your summary is {length} characters. At least {minChars} characters is recommended to create an informative and enticing summary.',
-        }),
-        {
-          length: context.project.description?.length || 0,
-          minChars: MIN_SUMMARY_CHARS,
-        },
-      )
-    },
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      const summaryLength = context.project.description?.trim()?.length || 0
-      return summaryLength < MIN_SUMMARY_CHARS && summaryLength !== 0
-    },
-    link: {
-      path: 'settings',
-      title: defineMessage({
-        id: 'nags.edit-summary.title',
-        defaultMessage: 'Edit summary',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings',
-    },
-  },
-  {
-    id: 'minecraft-title-clause',
-    title: defineMessage({
-      id: 'nags.minecraft-title-clause.title',
-      defaultMessage: 'Avoid brand infringement',
-    }),
-    description: defineMessage({
-      id: 'nags.minecraft-title-clause.description',
-      defaultMessage: `Projects must not use Minecraft's branding or include "Minecraft" as a significant part of the name.`,
-    }),
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      const title = context.project.title?.toLowerCase() || ''
-      const wordsInTitle = title.split(' ').filter((word) => word.length > 0)
-      return title.includes('minecraft') && title.length > 0 && wordsInTitle.length <= 3
-    },
-    link: {
-      path: 'settings',
-      title: defineMessage({
-        id: 'nags.edit-title.title',
-        defaultMessage: 'Edit title',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings',
-    },
-  },
-  {
-    id: 'title-contains-technical-info',
-    title: defineMessage({
-      id: 'nags.title-contains-technical-info.title',
-      defaultMessage: 'Clean up the name',
-    }),
-    description: defineMessage({
-      id: 'nags.title-contains-technical-info.description',
-      defaultMessage:
-        "Keeping your project's Name clean and makes it memorable easier to find. Version and loader information is automatically displayed alongside your project.",
-    }),
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      const title = context.project.title?.toLowerCase() || ''
-      if (!title) return false
-
-      const loaderNames =
-        context.tags.loaders?.map((loader: { name: string }) => loader.name?.toLowerCase()) || []
-      const hasLoader = loaderNames.some((loader) => loader && title.includes(loader.toLowerCase()))
-      const versionPatterns = [/\b1\.\d+(\.\d+)?\b/]
-      const hasVersionPattern = versionPatterns.some((pattern) => pattern.test(title))
-
-      return hasLoader || hasVersionPattern
-    },
-    link: {
-      path: 'settings',
-      title: defineMessage({
-        id: 'nags.edit-title.title',
-        defaultMessage: 'Edit title',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings',
-    },
-  },
-  {
-    id: 'summary-same-as-title',
-    title: defineMessage({
-      id: 'nags.summary-same-as-title.title',
-      defaultMessage: 'Make the summary unique',
-    }),
-    description: defineMessage({
-      id: 'nags.summary-same-as-title.description',
-      defaultMessage:
-        "Your summary can not be the same as your project's Name. It's important to create an informative and enticing Summary.",
-    }),
-    status: 'required',
-    shouldShow: (context: NagContext) => {
-      const title = context.project.title?.trim() || ''
-      const summary = context.project.description?.trim() || ''
-      return title === summary && title.length > 0 && summary.length > 0
-    },
-    link: {
-      path: 'settings',
-      title: defineMessage({
-        id: 'nags.edit-summary.title',
-        defaultMessage: 'Edit summary',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings',
-    },
-  },
-  {
-    // Don't like this one, is this needed?
-    id: 'image-heavy-description',
-    title: defineMessage({
-      id: 'nags.image-heavy-description.title',
-      defaultMessage: 'Ensure accessibility',
-    }),
-    description: defineMessage({
-      id: 'nags.image-heavy-description.description',
-      defaultMessage:
-        'Your Description should contain sufficient plain text or image alt-text, keeping it accessible to those using screen readers or with slow internet connections.',
-    }),
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      const { imageHeavy } = analyzeImageContent(context.project.body || '')
-      return imageHeavy
-    },
-    link: {
-      path: 'settings/description',
-      title: defineMessage({
-        id: 'nags.edit-description.title',
-        defaultMessage: 'Edit description',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-description',
-    },
-  },
-  {
-    id: 'missing-alt-text',
-    title: defineMessage({
-      id: 'nags.missing-alt-text.title',
-      defaultMessage: 'Add image alt text',
-    }),
-    description: defineMessage({
-      id: 'nags.missing-alt-text.description',
-      defaultMessage:
-        'Some of your images are missing alt text, which is important for accessibility, especially for visually impaired users.',
-    }),
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      const { hasEmptyAltText } = analyzeImageContent(context.project.body || '')
-      return hasEmptyAltText
-    },
-    link: {
-      path: 'settings/description',
-      title: defineMessage({
-        id: 'nags.edit-description.title',
-        defaultMessage: 'Edit description',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-description',
-    },
-  },
-]
--- a/packages/moderation/data/nags/index.ts
+++ b/packages/moderation/data/nags/index.ts
@@ -1,4 +0,0 @@
-export * from './core'
-export * from './links'
-export * from './description'
-export * from './tags'
--- a/packages/moderation/data/nags/links.ts
+++ b/packages/moderation/data/nags/links.ts
@@ -1,269 +0,0 @@
-import type { Nag, NagContext } from '../../types/nags'
-import { formatProjectType } from '@modrinth/utils'
-import { useVIntl, defineMessage } from '@vintl/vintl'
-
-export const commonLinkDomains = {
-  source: ['github.com', 'gitlab.com', 'bitbucket.org', 'codeberg.org', 'git.sr.ht'],
-  issues: ['github.com', 'gitlab.com', 'bitbucket.org', 'codeberg.org', 'docs.google.com'],
-  discord: ['discord.gg', 'discord.com', 'dsc.gg'],
-  licenseBlocklist: [
-    'youtube.com',
-    'youtu.be',
-    'modrinth.com',
-    'curseforge.com',
-    'twitter.com',
-    'x.com',
-    'discord.gg',
-    'discord.com',
-    'instagram.com',
-    'facebook.com',
-    'tiktok.com',
-    'reddit.com',
-    'twitch.tv',
-    'patreon.com',
-    'ko-fi.com',
-    'paypal.com',
-    'buymeacoffee.com',
-    'google.com',
-    'example.com',
-    't.me',
-  ],
-  linkShorteners: ['bit.ly', 'adf.ly', 'tinyurl.com', 'short.io', 'is.gd'],
-}
-
-export function isCommonUrl(url: string | null, commonDomains: string[]): boolean {
-  if (url === null || url === '') return true
-  try {
-    const domain = new URL(url).hostname.toLowerCase()
-    return commonDomains.some((allowed) => domain.includes(allowed))
-  } catch {
-    return false
-  }
-}
-
-export function isCommonUrlOfType(url: string | null, commonDomains: string[]): boolean {
-  if (url === null || url === '') return false
-  return isCommonUrl(url, commonDomains)
-}
-
-export function isDiscordUrl(url: string | null): boolean {
-  return isCommonUrlOfType(url, commonLinkDomains.discord)
-}
-
-export function isLinkShortener(url: string | null): boolean {
-  return isCommonUrlOfType(url, commonLinkDomains.linkShorteners)
-}
-
-export function isUncommonLicenseUrl(url: string | null): boolean {
-  return isCommonUrlOfType(url, commonLinkDomains.licenseBlocklist)
-}
-
-export const linksNags: Nag[] = [
-  {
-    id: 'verify-external-links',
-    title: defineMessage({
-      id: 'nags.verify-external-links.title',
-      defaultMessage: 'Verify external links',
-    }),
-    description: defineMessage({
-      id: 'nags.verify-external-links.description',
-      defaultMessage:
-        'Some of your external links may be using domains that are inappropriate for that type of link.',
-    }),
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      return (
-        !isCommonUrl(context.project.source_url, commonLinkDomains.source) ||
-        !isCommonUrl(context.project.issues_url, commonLinkDomains.issues) ||
-        !isCommonUrl(context.project.discord_url, commonLinkDomains.discord)
-      )
-    },
-    link: {
-      path: 'settings/links',
-      title: defineMessage({
-        id: 'nags.visit-links-settings.title',
-        defaultMessage: 'Visit links settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-links',
-    },
-  },
-  {
-    id: 'misused-discord-link',
-    title: defineMessage({
-      id: 'nags.misused-discord-link.title',
-      defaultMessage: 'Move Discord invite',
-    }),
-    description: defineMessage({
-      id: 'nags.misused-discord-link-description',
-      defaultMessage:
-        'Discord invites can not be used for other link types. Please put your Discord link in the Discord Invite link field only.',
-    }),
-    status: 'required',
-    shouldShow: (context: NagContext) =>
-      isDiscordUrl(context.project.source_url) ||
-      isDiscordUrl(context.project.issues_url) ||
-      isDiscordUrl(context.project.wiki_url),
-    link: {
-      path: 'settings/links',
-      title: defineMessage({
-        id: 'nags.visit-links-settings.title',
-        defaultMessage: 'Visit links settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-links',
-    },
-  },
-  {
-    id: 'link-shortener-usage',
-    title: defineMessage({
-      id: 'nags.link-shortener-usage.title',
-      defaultMessage: "Don't use link shorteners",
-    }),
-    description: defineMessage({
-      id: 'nags.link-shortener-usage.description',
-      defaultMessage:
-        'Use of link shorteners or other methods to obscure where a link may lead in your external links or license link is prohibited, please only use appropriate full length links.',
-    }),
-    status: 'required',
-    shouldShow: (context: NagContext) =>
-      isLinkShortener(context.project.source_url) ||
-      isLinkShortener(context.project.issues_url) ||
-      isLinkShortener(context.project.wiki_url) ||
-      Boolean(context.project.license.url && isLinkShortener(context.project.license.url)),
-  },
-  {
-    id: 'invalid-license-url',
-    title: defineMessage({
-      id: 'nags.invalid-license-url.title',
-      defaultMessage: 'Add a valid license link',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-      const licenseUrl = context.project.license.url
-
-      if (!licenseUrl) {
-        return formatMessage(
-          defineMessage({
-            id: 'nags.invalid-license-url.description.default',
-            defaultMessage: 'License URL is invalid.',
-          }),
-        )
-      }
-
-      try {
-        const domain = new URL(licenseUrl).hostname.toLowerCase()
-        return formatMessage(
-          defineMessage({
-            id: 'nags.invalid-license-url.description.domain',
-            defaultMessage:
-              'Your license URL points to {domain}, which is not appropriate for license information. License URLs should link directly to your license file, not social media, gaming platforms, etc.',
-          }),
-          { domain },
-        )
-      } catch {
-        return formatMessage(
-          defineMessage({
-            id: 'nags.invalid-license-url.description.malformed',
-            defaultMessage:
-              'Your license URL appears to be malformed. Please provide a valid URL to your license text.',
-          }),
-        )
-      }
-    },
-    status: 'required',
-    shouldShow: (context: NagContext) => {
-      const licenseUrl = context.project.license.url
-      if (!licenseUrl) return false
-
-      const isBlocklisted = isUncommonLicenseUrl(licenseUrl)
-
-      try {
-        new URL(licenseUrl)
-        return isBlocklisted
-      } catch {
-        return true
-      }
-    },
-    link: {
-      path: 'settings',
-      title: defineMessage({
-        id: 'nags.edit-license.title',
-        defaultMessage: 'Edit license',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings',
-    },
-  },
-  {
-    id: 'gpl-license-source-required',
-    title: defineMessage({
-      id: 'nags.gpl-license-source-required.title',
-      defaultMessage: 'Provide source code',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.gpl-license-source-required.description',
-          defaultMessage:
-            'Your {projectType} uses a license which requires source code to be available. Please provide a source code link or sources file for each additional version, or consider using a different license.',
-        }),
-        {
-          projectType: formatProjectType(context.project.project_type).toLowerCase(),
-        },
-      )
-    },
-    status: 'required',
-    shouldShow: (context: NagContext) => {
-      const gplLicenses = [
-        'GPL-2.0',
-        'GPL-2.0+',
-        'GPL-2.0-only',
-        'GPL-2.0-or-later',
-        'GPL-3.0',
-        'GPL-3.0+',
-        'GPL-3.0-only',
-        'GPL-3.0-or-later',
-        'LGPL-2.1',
-        'LGPL-2.1+',
-        'LGPL-2.1-only',
-        'LGPL-2.1-or-later',
-        'LGPL-3.0',
-        'LGPL-3.0+',
-        'LGPL-3.0-only',
-        'LGPL-3.0-or-later',
-        'AGPL-3.0',
-        'AGPL-3.0+',
-        'AGPL-3.0-only',
-        'AGPL-3.0-or-later',
-        'MPL-2.0',
-      ]
-
-      const isGplLicense = gplLicenses.includes(context.project.license.id)
-      const hasSourceUrl = !!context.project.source_url
-      const hasAdditionalFiles = (context: NagContext) => {
-        let hasAdditional = true
-        context.versions.forEach((version) => {
-          if (version.files.length < 2) hasAdditional = false
-        })
-        return hasAdditional
-      }
-      const notSourceAsDistributed = (context: NagContext) =>
-        context.project.project_type === 'mod' || context.project.project_type === 'plugin'
-
-      return (
-        isGplLicense &&
-        notSourceAsDistributed(context) &&
-        !hasSourceUrl &&
-        !hasAdditionalFiles(context)
-      )
-    },
-    link: {
-      path: 'settings/links',
-      title: defineMessage({
-        id: 'nags.visit-links-settings.title',
-        defaultMessage: 'Visit links settings',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-links',
-    },
-  },
-]
--- a/packages/moderation/data/nags/tags.ts
+++ b/packages/moderation/data/nags/tags.ts
@@ -1,160 +0,0 @@
-import type { Project } from '@modrinth/utils'
-import type { Nag, NagContext } from '../../types/nags'
-import { useVIntl, defineMessage } from '@vintl/vintl'
-
-const allResolutionTags = ['8x-', '16x', '32x', '48x', '64x', '128x', '256x', '512x+']
-
-const MAX_TAG_COUNT = 8
-
-function getCategories(
-  project: Project & { actualProjectType: string },
-  tags: {
-    categories?: {
-      project_type: string
-    }[]
-  },
-) {
-  return (
-    tags.categories?.filter(
-      (category: { project_type: string }) => category.project_type === project.actualProjectType,
-    ) ?? []
-  )
-}
-
-export const tagsNags: Nag[] = [
-  {
-    id: 'too-many-tags',
-    title: defineMessage({
-      id: 'nags.too-many-tags.title',
-      defaultMessage: 'Select accurate tags',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-      const tagCount =
-        context.project.categories.length + (context.project.additional_categories?.length || 0)
-      const maxTagCount = MAX_TAG_COUNT
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.too-many-tags.description',
-          defaultMessage:
-            "You've selected {tagCount} tags. Consider reducing to {maxTagCount} or fewer to make sure your project appears in relevant search results.",
-        }),
-        {
-          tagCount,
-          maxTagCount,
-        },
-      )
-    },
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      const tagCount =
-        context.project.categories.length + (context.project.additional_categories?.length || 0)
-      return tagCount > MAX_TAG_COUNT
-    },
-    link: {
-      path: 'settings/tags',
-      title: defineMessage({
-        id: 'nags.edit-tags.title',
-        defaultMessage: 'Edit tags',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-tags',
-    },
-  },
-  {
-    id: 'multiple-resolution-tags',
-    title: defineMessage({
-      id: 'nags.multiple-resolution-tags.title',
-      defaultMessage: 'Select correct resolution',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-      const resolutionTags = context.project.categories
-        .concat(context.project.additional_categories)
-        .filter((tag: string) => allResolutionTags.includes(tag))
-
-      const sortedTags = resolutionTags.toSorted((a, b) => {
-        return allResolutionTags.indexOf(a) - allResolutionTags.indexOf(b)
-      })
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.multiple-resolution-tags.description',
-          defaultMessage:
-            "You've selected {count} resolution tags ({tags}). Resource packs should typically only have one resolution tag that matches their primary resolution.",
-        }),
-        {
-          count: resolutionTags.length,
-          tags: sortedTags
-            .join(', ')
-            .replace('8x-', '8x or lower')
-            .replace('512x+', '512x or higher'),
-        },
-      )
-    },
-    status: 'warning',
-    shouldShow: (context: NagContext) => {
-      if (context.project.project_type !== 'resourcepack') return false
-
-      const resolutionTags = context.project.categories
-        .concat(context.project.additional_categories)
-        .filter((tag: string) => allResolutionTags.includes(tag))
-      return resolutionTags.length > 1
-    },
-    link: {
-      path: 'settings/tags',
-      title: defineMessage({
-        id: 'nags.edit-tags.title',
-        defaultMessage: 'Edit tags',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-tags',
-    },
-  },
-  {
-    id: 'all-tags-selected',
-    title: defineMessage({
-      id: 'nags.all-tags-selected.title',
-      defaultMessage: 'Select accurate tags',
-    }),
-    description: (context: NagContext) => {
-      const { formatMessage } = useVIntl()
-      const categoriesForProjectType = getCategories(
-        context.project as Project & { actualProjectType: string },
-        context.tags,
-      )
-      const totalAvailableTags = categoriesForProjectType.length
-
-      return formatMessage(
-        defineMessage({
-          id: 'nags.all-tags-selected.description',
-          defaultMessage:
-            "You've selected all {totalAvailableTags} available tags. This defeats the purpose of tags, which are meant to help users find relevant projects. Please select only the tags that are relevant to your project.",
-        }),
-        {
-          totalAvailableTags,
-        },
-      )
-    },
-    status: 'required',
-    shouldShow: (context: NagContext) => {
-      const categoriesForProjectType = getCategories(
-        context.project as Project & { actualProjectType: string },
-        context.tags,
-      )
-      const totalSelectedTags =
-        context.project.categories.length + (context.project.additional_categories?.length || 0)
-      return (
-        totalSelectedTags === categoriesForProjectType.length &&
-        context.project.project_type !== 'project'
-      )
-    },
-    link: {
-      path: 'settings/tags',
-      title: defineMessage({
-        id: 'nags.edit-tags.title',
-        defaultMessage: 'Edit tags',
-      }),
-      shouldShow: (context: NagContext) => context.currentRoute !== 'type-id-settings-tags',
-    },
-  },
-]
--- a/packages/moderation/index.ts
+++ b/packages/moderation/index.ts
@@ -2,12 +2,9 @@ export * from './types/actions'
 export * from './types/messages'
 export * from './types/stage'
 export * from './types/keybinds'
-export * from './types/nags'
 export * from './types/reports'
 export * from './utils'

-export * from './data/nags/index'
-export { default as nags } from './data/nags'
 export { finalPermissionMessages } from './data/modpack-permissions-stage'
 export { default as checklist } from './data/checklist'
 export { default as keybinds } from './data/keybinds'
--- a/packages/moderation/locales/en-US/index.json
+++ b/packages/moderation/locales/en-US/index.json
@@ -1,203 +0,0 @@
-{
-  "nags.add-description.description": {
-    "defaultMessage": "A description that clearly describes the project's purpose and function is required."
-  },
-  "nags.add-description.title": {
-    "defaultMessage": "Add a description"
-  },
-  "nags.add-icon.description": {
-    "defaultMessage": "Adding a unique, relevant, and engaging icon makes your project identifiable and helps it stand out."
-  },
-  "nags.add-icon.title": {
-    "defaultMessage": "Add an icon"
-  },
-  "nags.add-links.description": {
-    "defaultMessage": "Add any relevant links targeted outside of Modrinth, such as source code, an issue tracker, or a Discord invite."
-  },
-  "nags.add-links.title": {
-    "defaultMessage": "Add external links"
-  },
-  "nags.all-tags-selected.description": {
-    "defaultMessage": "You've selected all {totalAvailableTags} available tags. This defeats the purpose of tags, which are meant to help users find relevant projects. Please select only the tags that are relevant to your project."
-  },
-  "nags.all-tags-selected.title": {
-    "defaultMessage": "Select accurate tags"
-  },
-  "nags.description-too-short.description": {
-    "defaultMessage": "Your description is {length} readable characters. At least {minChars} characters is recommended to create a clear and informative description."
-  },
-  "nags.description-too-short.title": {
-    "defaultMessage": "Expand the description"
-  },
-  "nags.edit-description.title": {
-    "defaultMessage": "Edit description"
-  },
-  "nags.edit-license.title": {
-    "defaultMessage": "Edit license"
-  },
-  "nags.edit-summary.title": {
-    "defaultMessage": "Edit summary"
-  },
-  "nags.edit-tags.title": {
-    "defaultMessage": "Edit tags"
-  },
-  "nags.edit-title.title": {
-    "defaultMessage": "Edit title"
-  },
-  "nags.feature-gallery-image.description": {
-    "defaultMessage": "The featured gallery image is often how your project makes its first impression."
-  },
-  "nags.feature-gallery-image.title": {
-    "defaultMessage": "Feature a gallery image"
-  },
-  "nags.gallery.title": {
-    "defaultMessage": "Visit gallery page"
-  },
-  "nags.gpl-license-source-required.description": {
-    "defaultMessage": "Your {projectType} uses a license which requires source code to be available. Please provide a source code link or sources file for each additional version, or consider using a different license."
-  },
-  "nags.gpl-license-source-required.title": {
-    "defaultMessage": "Provide source code"
-  },
-  "nags.image-heavy-description.description": {
-    "defaultMessage": "Your Description should contain sufficient plain text or image alt-text, keeping it accessible to those using screen readers or with slow internet connections."
-  },
-  "nags.image-heavy-description.title": {
-    "defaultMessage": "Ensure accessibility"
-  },
-  "nags.invalid-license-url.description.default": {
-    "defaultMessage": "License URL is invalid."
-  },
-  "nags.invalid-license-url.description.domain": {
-    "defaultMessage": "Your license URL points to {domain}, which is not appropriate for license information. License URLs should link directly to your license file, not social media, gaming platforms, etc."
-  },
-  "nags.invalid-license-url.description.malformed": {
-    "defaultMessage": "Your license URL appears to be malformed. Please provide a valid URL to your license text."
-  },
-  "nags.invalid-license-url.title": {
-    "defaultMessage": "Add a valid license link"
-  },
-  "nags.link-shortener-usage.description": {
-    "defaultMessage": "Use of link shorteners or other methods to obscure where a link may lead in your external links or license link is prohibited, please only use appropriate full length links."
-  },
-  "nags.link-shortener-usage.title": {
-    "defaultMessage": "Don't use link shorteners"
-  },
-  "nags.long-headers.description": {
-    "defaultMessage": "{count, plural, one {# header} other {# headers}} in your description {count, plural, one {is} other {are}} too long. Headers should be concise and act as section titles, not full sentences."
-  },
-  "nags.long-headers.title": {
-    "defaultMessage": "Shorten headers"
-  },
-  "nags.minecraft-title-clause.description": {
-    "defaultMessage": "Projects must not use Minecraft's branding or include \"Minecraft\" as a significant part of the name."
-  },
-  "nags.minecraft-title-clause.title": {
-    "defaultMessage": "Avoid brand infringement"
-  },
-  "nags.missing-alt-text.description": {
-    "defaultMessage": "Some of your images are missing alt text, which is important for accessibility, especially for visually impaired users."
-  },
-  "nags.missing-alt-text.title": {
-    "defaultMessage": "Add image alt text"
-  },
-  "nags.misused-discord-link-description": {
-    "defaultMessage": "Discord invites can not be used for other link types. Please put your Discord link in the Discord Invite link field only."
-  },
-  "nags.misused-discord-link.title": {
-    "defaultMessage": "Move Discord invite"
-  },
-  "nags.moderation.title": {
-    "defaultMessage": "Visit moderation thread"
-  },
-  "nags.moderator-feedback.description": {
-    "defaultMessage": "Review and address all concerns from the moderation team before resubmitting."
-  },
-  "nags.moderator-feedback.title": {
-    "defaultMessage": "Review moderator feedback"
-  },
-  "nags.multiple-resolution-tags.description": {
-    "defaultMessage": "You've selected {count} resolution tags ({tags}). Resource packs should typically only have one resolution tag that matches their primary resolution."
-  },
-  "nags.multiple-resolution-tags.title": {
-    "defaultMessage": "Select correct resolution"
-  },
-  "nags.select-environments.description": {
-    "defaultMessage": "Select if the {projectType} functions on the client-side and/or server-side."
-  },
-  "nags.select-environments.title": {
-    "defaultMessage": "Select supported environments"
-  },
-  "nags.select-license.description": {
-    "defaultMessage": "Select the license your {projectType} is distributed under."
-  },
-  "nags.select-license.title": {
-    "defaultMessage": "Select a license"
-  },
-  "nags.select-tags.description": {
-    "defaultMessage": "Select the tags that correctly apply to your project to help the right users find it."
-  },
-  "nags.select-tags.title": {
-    "defaultMessage": "Select tags"
-  },
-  "nags.settings.description.title": {
-    "defaultMessage": "Visit description settings"
-  },
-  "nags.settings.environments.title": {
-    "defaultMessage": "Visit general settings"
-  },
-  "nags.settings.license.title": {
-    "defaultMessage": "Visit license settings"
-  },
-  "nags.settings.links.title": {
-    "defaultMessage": "Visit links settings"
-  },
-  "nags.settings.tags.title": {
-    "defaultMessage": "Visit tag settings"
-  },
-  "nags.settings.title": {
-    "defaultMessage": "Visit general settings"
-  },
-  "nags.summary-same-as-title.description": {
-    "defaultMessage": "Your summary can not be the same as your project's Name. It's important to create an informative and enticing Summary."
-  },
-  "nags.summary-same-as-title.title": {
-    "defaultMessage": "Make the summary unique"
-  },
-  "nags.summary-too-short.description": {
-    "defaultMessage": "Your summary is {length} characters. At least {minChars} characters is recommended to create an informative and enticing summary."
-  },
-  "nags.summary-too-short.title": {
-    "defaultMessage": "Expand the summary"
-  },
-  "nags.title-contains-technical-info.description": {
-    "defaultMessage": "Keeping your project's Name clean and makes it memorable easier to find. Version and loader information is automatically displayed alongside your project."
-  },
-  "nags.title-contains-technical-info.title": {
-    "defaultMessage": "Clean up the name"
-  },
-  "nags.too-many-tags.description": {
-    "defaultMessage": "You've selected {tagCount} tags. Consider reducing to {maxTagCount} or fewer to make sure your project appears in relevant search results."
-  },
-  "nags.too-many-tags.title": {
-    "defaultMessage": "Select accurate tags"
-  },
-  "nags.upload-version.description": {
-    "defaultMessage": "At least one version is required for a project to be submitted for review."
-  },
-  "nags.upload-version.title": {
-    "defaultMessage": "Upload a version"
-  },
-  "nags.verify-external-links.description": {
-    "defaultMessage": "Some of your external links may be using domains that are inappropriate for that type of link."
-  },
-  "nags.verify-external-links.title": {
-    "defaultMessage": "Verify external links"
-  },
-  "nags.versions.title": {
-    "defaultMessage": "Visit versions page"
-  },
-  "nags.visit-links-settings.title": {
-    "defaultMessage": "Visit links settings"
-  }
-}
--- a/packages/moderation/package.json
+++ b/packages/moderation/package.json
@@ -6,17 +6,14 @@
  "types": "./index.d.ts",
  "scripts": {
    "lint": "eslint . && prettier --check .",
-    "fix": "eslint . --fix && prettier --write . && pnpm run intl:extract",
-    "intl:extract": "formatjs extract \"**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"**/*.d.ts\" --ignore \"node_modules/**/*\" --out-file locales/en-US/index.json --preserve-whitespace"
+    "fix": "eslint . --fix && prettier --write ."
  },
  "dependencies": {
-    "@modrinth/assets": "workspace:*",
    "@modrinth/utils": "workspace:*",
+    "@modrinth/assets": "workspace:*",
    "vue": "^3.5.13"
  },
  "devDependencies": {
-    "@formatjs/cli": "^6.2.12",
-    "@vintl/vintl": "^4.4.1",
    "eslint": "^8.57.0",
    "eslint-config-custom": "workspace:*",
    "tsconfig": "workspace:*"
--- a/packages/moderation/types/nags.ts
+++ b/packages/moderation/types/nags.ts
@@ -1,96 +0,0 @@
-import type { Project, User, Version } from '@modrinth/utils'
-import type { MessageDescriptor } from '@vintl/vintl'
-import type { FunctionalComponent, SVGAttributes } from 'vue'
-
-/**
- * Type which represents the status type of a nag.
- *
- * - `required` indicates that the nag must be addressed.
- * - `warning` indicates that the nag is important but not critical, and can be ignored. It is often used for issues that should be resolved but do not block project submission.
- * - `suggestion` indicates that the nag is a recommendation and can be ignored.
- */
-export type NagStatus = 'required' | 'warning' | 'suggestion' | 'special-submit-action'
-
-/**
- * Interface representing the context in which a nag is displayed.
- * It includes the project, versions, current member, all members, and the current route.
- * This context is used to determine whether a nag or it's link should be shown and how it should be presented.
- */
-export interface NagContext {
-  /**
-   * The project associated with the nag.
-   */
-  project: Project
-  /**
-   * The versions associated with the project.
-   */
-  versions: Version[]
-  /**
-   * The current project member viewing the nag.
-   */
-  currentMember: User
-  /**
-   * The current route in the application.
-   */
-  currentRoute: string
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  tags: any
-  submitProject: (...any: any) => any
-  /* eslint-enable @typescript-eslint/no-explicit-any */
-}
-
-/**
- * Interface representing a nag's link.
- */
-export interface NagLink {
-  /**
-   * A relative path to the nag's link, e.g. '/settings'.
-   */
-  path: string
-  /**
-   * The text to display for the nag's link.
-   */
-  title: MessageDescriptor | string
-  /**
-   * The status of the nag, which can be 'required', 'warning', or 'suggestion'.
-   */
-  shouldShow?: (context: NagContext) => boolean
-}
-
-/**
- * Interface representing a nag.
- */
-export interface Nag {
-  /**
-   * A unique identifier for the nag.
-   */
-  id: string
-  /**
-   * The title of the nag.
-   */
-  title: MessageDescriptor | string
-  /**
-   * A function that returns the description of the nag.
-   * It can accept a context to provide dynamic descriptions.
-   */
-  description: MessageDescriptor | ((context: NagContext) => string)
-  /**
-   * The status of the nag, which can be 'required', 'warning', or 'suggestion'.
-   */
-  status: NagStatus
-  /**
-   * An optional icon for the nag, usually from `@modrinth/assets`.
-   * If not specified it will use the default icon associated with the nag status.
-   */
-  icon?: FunctionalComponent<SVGAttributes>
-
-  /**
-   * A function that determines whether the nag should be shown based on the context.
-   */
-  shouldShow: (context: NagContext) => boolean
-  /**
-   * An optional link associated with the nag.
-   * If provided, it should be displayed alongside the nag.
-   */
-  link?: NagLink
-}
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,3 +1,4 @@
 export * from './src/components'
 export * from './src/utils'
 export * from './src/composables'
+export * from './src/servers'
--- a/packages/ui/src/components/base/RaisedBadge.vue
+++ b/packages/ui/src/components/base/RaisedBadge.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="flex items-center gap-2 w-fit px-3 py-1 bg-button-bg rounded-full text-sm">
+    <slot />
+  </div>
+</template>
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -36,6 +36,7 @@ export { default as ProgressBar } from './base/ProgressBar.vue'
 export { default as ProjectCard } from './base/ProjectCard.vue'
 export { default as RadialHeader } from './base/RadialHeader.vue'
 export { default as RadioButtons } from './base/RadioButtons.vue'
+export { default as RaisedBadge } from './base/RaisedBadge.vue'
 export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
 export { default as ServerNotice } from './base/ServerNotice.vue'
 export { default as SimpleBadge } from './base/SimpleBadge.vue'
--- a/packages/ui/src/servers/components/.gitkeep
+++ b/packages/ui/src/servers/components/.gitkeep
--- a/packages/ui/src/servers/components/management/ServerCard.vue
+++ b/packages/ui/src/servers/components/management/ServerCard.vue
@@ -0,0 +1,141 @@
+<template>
+  <Card>
+    <div class="server-card-grid">
+      <div class="header-section flex gap-4 items-center mb-4">
+        <Avatar size="4rem" />
+        <div class="flex flex-col gap-2">
+          <span class="text-xl text-contrast font-bold">{{ server_name }}</span>
+          <span class="text-md text-secondary" v-tooltip="server_created.toLocaleString()">
+            Created {{ formatRelativeTime(server_created) }}
+          </span>
+        </div>
+      </div>
+
+      <div class="badges-section flex gap-2 items-center mb-4">
+        <RaisedBadge>{{ server_plan }}</RaisedBadge>
+        <RaisedBadge class="text-lg" :color="serverStatusColor">
+          &bull; {{ formattedServerStatus }}
+        </RaisedBadge>
+      </div>
+
+      <div class="content-section flex flex-col gap-2 mb-4">
+        <div class="flex flex-row gap-2">
+          <UsersIcon class="size-4 my-auto" />
+          <span class="text-secondary">
+            {{ players_online }} / {{ max_players_online }} players
+          </span>
+        </div>
+        <div class="flex flex-row gap-2">
+          <GlobeIcon class="size-4 my-auto" />
+          <span class="text-secondary">{{ world_name }}</span>
+        </div>
+        <div class="flex flex-row gap-2">
+          <LinkIcon class="size-4 my-auto" />
+          <CopyCode :text="ip" />
+        </div>
+      </div>
+
+      <div class="actions-section flex gap-2">
+        <ButtonStyled color="brand">
+          <RouterLink :to="`/servers/manage/${id}`">
+            <EditIcon class="size-4" />
+            Manage
+          </RouterLink>
+        </ButtonStyled>
+        <ButtonStyled>
+          <RouterLink :to="`/servers/manage/${id}`">
+            <CurrencyIcon class="size-4" />
+            Billing
+          </RouterLink>
+        </ButtonStyled>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import { CurrencyIcon, EditIcon, GlobeIcon, LinkIcon, UsersIcon } from '@modrinth/assets'
+import { Avatar, Card, RaisedBadge, useRelativeTime, CopyCode, ButtonStyled } from '@modrinth/ui'
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps<{
+  server_name: string
+  server_created: Date
+  server_plan: string
+  server_status: string
+  players_online: number
+  max_players_online: number
+  world_name: string
+  ip: string
+  id: string
+}>()
+
+const formatRelativeTime = useRelativeTime()
+
+const serverStatusColor = computed(() => {
+  switch (props.server_status) {
+    case 'online':
+      return 'green'
+    case 'restarting':
+      return 'orange'
+    case 'offline':
+      return undefined
+    default:
+      return undefined
+  }
+})
+
+const formattedServerStatus = computed(() => {
+  return props.server_status.slice(0, 1).toUpperCase() + props.server_status.slice(1)
+})
+</script>
+
+<style scoped>
+.server-card-grid {
+  display: grid;
+  grid-template-areas:
+    'header badges'
+    'content content'
+    'actions actions';
+  grid-template-columns: 1fr auto;
+  align-items: start;
+}
+
+@media (max-width: 768px) {
+  .server-card-grid {
+    grid-template-areas:
+      'header'
+      'badges'
+      'content'
+      'actions';
+    grid-template-columns: 1fr;
+  }
+
+  .badges-section {
+    justify-self: start;
+  }
+}
+
+@media (min-width: 769px) {
+  .badges-section {
+    justify-self: end;
+  }
+}
+
+.header-section {
+  grid-area: header;
+}
+
+.badges-section {
+  grid-area: badges;
+}
+
+.content-section {
+  grid-area: content;
+}
+
+.actions-section {
+  grid-area: actions;
+}
+</style>
--- a/packages/ui/src/servers/composables/.gitkeep
+++ b/packages/ui/src/servers/composables/.gitkeep
--- a/packages/ui/src/servers/index.ts
+++ b/packages/ui/src/servers/index.ts
@@ -0,0 +1 @@
+export { default as ServersManagePage } from './pages/manage.vue'
--- a/packages/ui/src/servers/pages/.gitkeep
+++ b/packages/ui/src/servers/pages/.gitkeep
--- a/packages/ui/src/servers/pages/manage.vue
+++ b/packages/ui/src/servers/pages/manage.vue
@@ -0,0 +1,130 @@
+<template>
+  <div v-if="servers.length + sharedServers.length === 0" class="text-center py-24 relative">
+    <ServersManageIllustration class="servers-manage-illustration" />
+    <ServerIcon class="size-24 mx-auto text-contrast mb-4" />
+    <h3 class="text-3xl font-medium text-contrast mb-2">No servers found</h3>
+    <p class="text-gray-500 mb-6 px-4">Get started by creating your first server</p>
+    <ButtonStyled color="green" size="large" type="outlined">
+      <button class="flex items-center justify-center gap-2 mx-auto">
+        <PlusIcon class="size-4" /> New server
+      </button>
+    </ButtonStyled>
+  </div>
+
+  <div v-else class="flex flex-col sm:flex-row gap-4 sm:gap-0 my-4">
+    <div class="flex flex-col gap-2">
+      <span class="text-3xl text-contrast font-bold">Servers</span>
+      <span class="text-sm sm:text-base text-secondary">View and manage all your servers</span>
+    </div>
+    <div class="sm:ml-auto">
+      <ButtonStyled color="green" size="large" class="w-full sm:w-auto">
+        <button class="flex items-center justify-center gap-2">
+          <PlusIcon class="size-4" />
+          <span>New server</span>
+        </button>
+      </ButtonStyled>
+    </div>
+  </div>
+
+  <template v-if="servers.length > 0">
+    <span class="text-xl text-contrast font-bold mb-4 flex flex-row gap-2"> Your servers </span>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 gap-y-2">
+      <ServerCard
+        v-for="server in servers"
+        :id="server.id"
+        :key="server.id"
+        :server_name="server.server_name"
+        :server_created="server.server_created"
+        :server_plan="server.server_plan"
+        :server_status="server.server_status"
+        :players_online="server.players_online"
+        :max_players_online="server.max_players_online"
+        :world_name="server.world_name"
+        :ip="server.ip"
+      />
+    </div>
+  </template>
+
+  <template v-if="sharedServers.length > 0">
+    <span class="text-xl text-contrast font-bold mb-4 flex flex-row gap-2"> Shared servers </span>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 gap-y-2">
+      <ServerCard
+        v-for="server in sharedServers"
+        :id="server.id"
+        :key="server.id"
+        :server_name="server.server_name"
+        :server_created="server.server_created"
+        :server_plan="server.server_plan"
+        :server_status="server.server_status"
+        :players_online="server.players_online"
+        :max_players_online="server.max_players_online"
+        :world_name="server.world_name"
+        :ip="server.ip"
+      />
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ButtonStyled } from '@modrinth/ui'
+import ServerCard from '../components/management/ServerCard.vue'
+import { PlusIcon, ServerIcon, ServersManageIllustration } from '@modrinth/assets'
+
+const sharedServers = ref([
+  {
+    id: 'server-1',
+    server_name: 'Rinth SMP',
+    server_created: new Date('2023-10-01T12:00:00Z'),
+    server_plan: 'Large',
+    server_status: 'online',
+    players_online: 5,
+    max_players_online: 20,
+    world_name: 'Example World',
+    ip: 'valiant-apple.modrinth.gg',
+  },
+])
+
+// const sharedServers = ref([])
+// const servers = ref([])
+
+const servers = ref([
+  {
+    id: 'server-1',
+    server_name: 'Rinth SMP',
+    server_created: new Date('2023-10-01T12:00:00Z'),
+    server_plan: 'Large',
+    server_status: 'online',
+    players_online: 5,
+    max_players_online: 20,
+    world_name: 'Example World',
+    ip: 'valiant-apple.modrinth.gg',
+  },
+  {
+    id: 'server-1',
+    server_name: 'Rinth SMP',
+    server_created: new Date('2023-10-01T12:00:00Z'),
+    server_plan: 'Large',
+    server_status: 'online',
+    players_online: 5,
+    max_players_online: 20,
+    world_name: 'Example World',
+    ip: 'valiant-apple.modrinth.gg',
+  },
+])
+</script>
+
+<style scoped lang="scss">
+.servers-manage-illustration {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  width: 500px;
+  height: 500px;
+  opacity: 0.05;
+  mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+}
+</style>
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -18,14 +18,7 @@ export type DonationPlatform =
  | { short: 'ko-fi'; name: 'Ko-fi' }
  | { short: 'other'; name: 'Other' }

-export type ProjectType =
-  | 'mod'
-  | 'modpack'
-  | 'resourcepack'
-  | 'shader'
-  | 'plugin'
-  | 'datapack'
-  | 'project'
+export type ProjectType = 'mod' | 'modpack' | 'resourcepack' | 'shader' | 'plugin' | 'datapack'
 export type MonetizationStatus = 'monetized' | 'demonetized' | 'force-demonetized'

 export type GameVersion = string
@@ -77,10 +70,10 @@ export interface Project {
  thread_id: ModrinthId
  organization: ModrinthId

-  issues_url: string | null
-  source_url: string | null
-  wiki_url: string | null
-  discord_url: string | null
+  issues_url?: string
+  source_url?: string
+  wiki_url?: string
+  discord_url?: string
  donation_urls: DonationLink<DonationPlatform>[]

  published: string
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -479,12 +479,6 @@ importers:
        specifier: ^3.5.13
        version: 3.5.13(typescript@5.8.3)
    devDependencies:
-      '@formatjs/cli':
-        specifier: ^6.2.12
-        version: 6.2.12(@vue/compiler-core@3.5.13)(vue@3.5.13(typescript@5.8.3))
-      '@vintl/vintl':
-        specifier: ^4.4.1
-        version: 4.4.1(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
      eslint:
        specifier: ^8.57.0
        version: 8.57.0
@@ -4178,8 +4172,8 @@ packages:
  ee-first@1.1.1:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}

-  electron-to-chromium@1.5.182:
-    resolution: {integrity: sha512-Lv65Btwv9W4J9pyODI6EWpdnhfvrve/us5h1WspW8B2Fb0366REPtY3hX7ounk1CkV/TBjWCEvCBBbYbmV0qCA==}
+  electron-to-chromium@1.5.191:
+    resolution: {integrity: sha512-xcwe9ELcuxYLUFqZZxL19Z6HVKcvNkIwhbHUz7L3us6u12yR+7uY89dSl570f/IqNthx8dAw3tojG7i4Ni4tDA==}

  electron-to-chromium@1.5.71:
    resolution: {integrity: sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==}
@@ -8969,10 +8963,6 @@ snapshots:
    dependencies:
      vue: 3.5.13(typescript@5.5.4)

-  '@braw/async-computed@5.0.2(vue@3.5.13(typescript@5.8.3))':
-    dependencies:
-      vue: 3.5.13(typescript@5.8.3)
-
  '@cloudflare/kv-asset-handler@0.3.4':
    dependencies:
      mime: 3.0.0
@@ -9500,11 +9490,6 @@ snapshots:
      '@vue/compiler-core': 3.5.13
      vue: 3.5.13(typescript@5.5.4)

-  '@formatjs/cli@6.2.12(@vue/compiler-core@3.5.13)(vue@3.5.13(typescript@5.8.3))':
-    optionalDependencies:
-      '@vue/compiler-core': 3.5.13
-      vue: 3.5.13(typescript@5.8.3)
-
  '@formatjs/ecma402-abstract@1.18.3':
    dependencies:
      '@formatjs/intl-localematcher': 0.5.4
@@ -9562,18 +9547,6 @@ snapshots:
    optionalDependencies:
      typescript: 5.5.4

-  '@formatjs/intl@2.10.4(typescript@5.8.3)':
-    dependencies:
-      '@formatjs/ecma402-abstract': 2.0.0
-      '@formatjs/fast-memoize': 2.2.0
-      '@formatjs/icu-messageformat-parser': 2.7.8
-      '@formatjs/intl-displaynames': 6.6.8
-      '@formatjs/intl-listformat': 7.5.7
-      intl-messageformat: 10.5.14
-      tslib: 2.6.3
-    optionalDependencies:
-      typescript: 5.8.3
-
  '@formatjs/ts-transformer@3.13.14':
    dependencies:
      '@formatjs/icu-messageformat-parser': 2.7.8
@@ -11261,17 +11234,6 @@ snapshots:
    transitivePeerDependencies:
      - typescript

-  '@vintl/vintl@4.4.1(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))':
-    dependencies:
-      '@braw/async-computed': 5.0.2(vue@3.5.13(typescript@5.8.3))
-      '@formatjs/icu-messageformat-parser': 2.7.8
-      '@formatjs/intl': 2.10.4(typescript@5.8.3)
-      '@formatjs/intl-localematcher': 0.4.2
-      intl-messageformat: 10.5.14
-      vue: 3.5.13(typescript@5.8.3)
-    transitivePeerDependencies:
-      - typescript
-
  '@vitejs/plugin-vue-jsx@4.1.1(vite@5.4.11(@types/node@20.14.11)(sass@1.77.6)(terser@5.43.1))(vue@3.5.13(typescript@5.5.4))':
    dependencies:
      '@babel/core': 7.26.0
@@ -12077,7 +12039,7 @@ snapshots:
  browserslist@4.25.1:
    dependencies:
      caniuse-lite: 1.0.30001727
-      electron-to-chromium: 1.5.182
+      electron-to-chromium: 1.5.191
      node-releases: 2.0.19
      update-browserslist-db: 1.1.3(browserslist@4.25.1)
    optional: true
@@ -12655,7 +12617,7 @@ snapshots:

  ee-first@1.1.1: {}

-  electron-to-chromium@1.5.182:
+  electron-to-chromium@1.5.191:
    optional: true

  electron-to-chromium@1.5.71: {}
@@ -17414,7 +17376,7 @@ snapshots:
      magic-string: 0.30.17
      mlly: 1.7.4
      pathe: 2.0.3
-      picomatch: 4.0.2
+      picomatch: 4.0.3
      pkg-types: 2.2.0
      scule: 1.3.0
      strip-literal: 3.0.0
Author	SHA1	Message	Date
Calum H.	475ee69cfb	feat: "no servers found" impl	2025-08-06 16:58:36 +01:00
IMB11	ab48d4b144	Merge branch 'main' into cal/server-panel-refactor	2025-08-05 11:26:41 +01:00
IMB11	3480448351	Merge branch 'main' into cal/server-panel-refactor	2025-08-04 17:26:00 +01:00
IMB11	daae37806c	fix: update button size for new server action	2025-07-28 19:14:23 +01:00
IMB11	6a4c140420	refactor: remove mobile pull refresh logic	2025-07-28 18:47:53 +01:00
IMB11	5d98b16270	feat: manage page	2025-07-28 18:43:00 +01:00
IMB11	6c452f86b6	feat: hide globe behind flag	2025-07-28 17:30:22 +01:00
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dot-icon lucide-dot"><circle cx="12.1" cy="12.1" r="1"/></svg>`
				`@@ -0,0 +1 @@`
				`export { default as ServersManagePage } from './pages/manage.vue'`