Merge commit '8faea1663ae0c6d1190a5043054197b6a58019f3' into feature-clean

apps/frontend/src/components/ui/AdPlaceholder.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
-    <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
-      <p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
-      <nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
-        <span>
-          Support creators and Modrinth ad-free with
-          <span class="font-bold">Modrinth+</span>
-        </span>
-        <ChevronRightIcon class="relative top-[3px] h-5 w-5" />
-      </nuxt-link>
-    </div>
+    <nuxt-link
+      to="/servers"
+      class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
+    >
+      <img
+        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
+        alt="Host your next server with Modrinth Servers"
+        class="light-image hidden rounded-[inherit]"
+      />
+      <img
+        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
+        alt="Host your next server with Modrinth Servers"
+        class="dark-image rounded-[inherit]"
+      />
+    </nuxt-link>
     <div
       class="absolute top-0 flex items-center justify-center overflow-hidden rounded-2xl bg-bg-raised"
     >
@@ -18,8 +23,6 @@
   </div>
 </template>
 <script setup>
-import { ChevronRightIcon } from "@modrinth/assets";
-
 useHead({
   script: [
     // {
@@ -137,3 +140,16 @@ iframe[id^="google_ads_iframe"] {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+.light,
+.light-mode {
+  .dark-image {
+    display: none;
+  }
+
+  .light-image {
+    display: block;
+  }
+}
+</style>

apps/frontend/src/components/ui/ModerationChecklist.vue

@@ -9,7 +9,7 @@
       </h1>
       <ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
         <button v-tooltip="`Exit moderation`" @click="exitModeration">
-          <CrossIcon />
+          <XIcon />
         </button>
       </ButtonStyled>
       <ButtonStyled circular>
@@ -306,7 +306,7 @@
           <div class="flex items-center gap-2">
             <ButtonStyled v-if="!done">
               <button aria-label="Skip" @click="goToNextProject">
-                <ExitIcon aria-hidden="true" />
+                <XIcon aria-hidden="true" />
                 <template v-if="futureProjects.length > 0">Skip</template>
                 <template v-else>Exit</template>
               </button>
@@ -335,7 +335,7 @@
               <div class="joined-buttons">
                 <ButtonStyled color="red">
                   <button @click="sendMessage('rejected')">
-                    <CrossIcon aria-hidden="true" /> Reject
+                    <XIcon aria-hidden="true" /> Reject
                   </button>
                 </ButtonStyled>
                 <ButtonStyled color="red">
@@ -373,9 +373,8 @@ import {
   UpdatedIcon,
   CheckIcon,
   DropdownIcon,
-  XIcon as CrossIcon,
   EyeOffIcon,
-  ExitIcon,
+  XIcon,
   ScaleIcon,
 } from "@modrinth/assets";
 import { ButtonStyled, MarkdownEditor, OverflowMenu, Collapsible } from "@modrinth/ui";

apps/frontend/src/components/ui/NewsletterButton.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+import { MailIcon, CheckIcon } from "@modrinth/assets";
+import { ref, watchEffect } from "vue";
+import { useBaseFetch } from "~/composables/fetch.js";
+
+const auth = await useAuth();
+const showSubscriptionConfirmation = ref(false);
+const subscribed = ref(false);
+
+async function checkSubscribed() {
+  if (auth.value?.user) {
+    try {
+      const { data } = await useBaseFetch("auth/email/subscribe", {
+        method: "GET",
+      });
+      subscribed.value = data?.subscribed || false;
+    } catch {
+      subscribed.value = false;
+    }
+  }
+}
+
+watchEffect(() => {
+  checkSubscribed();
+});
+
+async function subscribe() {
+  try {
+    await useBaseFetch("auth/email/subscribe", {
+      method: "POST",
+    });
+    showSubscriptionConfirmation.value = true;
+  } catch {
+  } finally {
+    setTimeout(() => {
+      showSubscriptionConfirmation.value = false;
+      subscribed.value = true;
+    }, 2500);
+  }
+}
+</script>
+
+<template>
+  <ButtonStyled v-if="auth?.user && !subscribed" color="brand" type="outlined">
+    <button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe">
+      <template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template>
+      <template v-else> <CheckIcon /> Subscribed! </template>
+    </button>
+  </ButtonStyled>
+</template>

apps/frontend/src/components/ui/Notifications.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="vue-notification-group experimental-styles-within">
+  <div
+    class="vue-notification-group experimental-styles-within"
+    :class="{ 'intercom-present': isIntercomPresent }"
+  >
     <transition-group name="notifs">
       <div
         v-for="(item, index) in notifications"
@@ -80,6 +83,8 @@ import {
 } from "@modrinth/assets";
 const notifications = useNotifications();
 
+const isIntercomPresent = ref(false);
+
 function stopTimer(notif) {
   clearTimeout(notif.timer);
 }
@@ -106,6 +111,27 @@ const createNotifText = (notif) => {
   return text;
 };
 
+function checkIntercomPresence() {
+  isIntercomPresent.value = !!document.querySelector(".intercom-lightweight-app");
+}
+
+onMounted(() => {
+  checkIntercomPresence();
+
+  const observer = new MutationObserver(() => {
+    checkIntercomPresence();
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+
+  onBeforeUnmount(() => {
+    observer.disconnect();
+  });
+});
+
 function copyToClipboard(notif) {
   const text = createNotifText(notif);
 
@@ -130,6 +156,10 @@ function copyToClipboard(notif) {
     bottom: 0.75rem;
   }
 
+  &.intercom-present {
+    bottom: 5rem;
+  }
+
   .vue-notification-wrapper {
     width: 100%;
     overflow: hidden;

apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue

@@ -57,7 +57,7 @@
             <div class="table-cell">
               <BoxIcon />
               <span>{{
-                $formatProjectType(
+                formatProjectType(
                   $getProjectTypeForDisplay(
                     project.project_types?.[0] ?? "project",
                     project.loaders,
@@ -111,6 +111,7 @@
 <script setup>
 import { BoxIcon, SettingsIcon, TransferIcon, XIcon } from "@modrinth/assets";
 import { Button, Modal, Checkbox, CopyCode, Avatar } from "@modrinth/ui";
+import { formatProjectType } from "@modrinth/utils";
 
 const modalOpen = ref(null);
 

apps/frontend/src/components/ui/ProjectMemberHeader.vue

@@ -118,7 +118,7 @@ import {
   ScaleIcon,
   DropdownIcon,
 } from "@modrinth/assets";
-import { formatProjectType } from "~/plugins/shorthands.js";
+import { formatProjectType } from "@modrinth/utils";
 import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
 
 const props = defineProps({

apps/frontend/src/components/ui/ShareArticleButtons.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="flex gap-2">
+    <ButtonStyled circular>
+      <a
+        v-tooltip="`Share on Bluesky`"
+        :href="`https://bsky.app/intent/compose?text=${encodedUrl}`"
+        target="_blank"
+      >
+        <BlueskyIcon />
+      </a>
+    </ButtonStyled>
+    <ButtonStyled circular>
+      <a
+        v-tooltip="`Share on Mastodon`"
+        :href="`https://tootpick.org/#text=${encodedUrl}`"
+        target="_blank"
+      >
+        <MastodonIcon />
+      </a>
+    </ButtonStyled>
+    <ButtonStyled circular>
+      <a
+        v-tooltip="`Share on X`"
+        :href="`https://www.x.com/intent/post?url=${encodedUrl}`"
+        target="_blank"
+      >
+        <TwitterIcon />
+      </a>
+    </ButtonStyled>
+    <ButtonStyled circular>
+      <a
+        v-tooltip="`Share via email`"
+        :href="`mailto:${encodedTitle ? `?subject=${encodedTitle}&` : `?`}body=${encodedUrl}`"
+        target="_blank"
+      >
+        <MailIcon />
+      </a>
+    </ButtonStyled>
+    <ButtonStyled circular>
+      <button
+        v-tooltip="copied ? `Copied to clipboard` : `Copy link`"
+        :disabled="copied"
+        class="relative grid place-items-center overflow-hidden"
+        @click="copyToClipboard(url)"
+      >
+        <CheckIcon
+          class="absolute transition-all ease-in-out"
+          :class="copied ? 'translate-y-0' : 'translate-y-7'"
+        />
+        <LinkIcon
+          class="absolute transition-all ease-in-out"
+          :class="copied ? '-translate-y-7' : 'translate-y-0'"
+        />
+      </button>
+    </ButtonStyled>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  BlueskyIcon,
+  CheckIcon,
+  LinkIcon,
+  MailIcon,
+  MastodonIcon,
+  TwitterIcon,
+} from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+
+const props = defineProps<{
+  title?: string;
+  url: string;
+}>();
+
+const copied = ref(false);
+const encodedUrl = computed(() => encodeURIComponent(props.url));
+const encodedTitle = computed(() => (props.title ? encodeURIComponent(props.title) : undefined));
+
+async function copyToClipboard(text: string) {
+  await navigator.clipboard.writeText(text);
+  copied.value = true;
+  setTimeout(() => {
+    copied.value = false;
+  }, 3000);
+}
+</script>

apps/frontend/src/components/ui/news/LatestNewsRow.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="mx-2 p-4 !py-8 sm:mx-8 sm:p-32">
+    <div class="my-8 flex items-center justify-between">
+      <h2 class="m-0 mx-auto text-3xl font-extrabold sm:text-4xl">Latest news from Modrinth</h2>
+    </div>
+
+    <div v-if="latestArticles" class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
+      <div
+        v-for="(article, index) in latestArticles"
+        :key="article.slug"
+        :class="{ 'max-xl:hidden': index === 2 }"
+      >
+        <NewsArticleCard :article="article" />
+      </div>
+    </div>
+    <div class="mx-2 my-8 flex w-full items-center justify-center">
+      <ButtonStyled color="brand" size="large">
+        <nuxt-link to="/news">
+          <NewspaperIcon />
+          View all news
+        </nuxt-link>
+      </ButtonStyled>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NewspaperIcon } from "@modrinth/assets";
+import { articles as rawArticles } from "@modrinth/blog";
+import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
+import { ref, computed } from "vue";
+
+const articles = ref(
+  rawArticles
+    .map((article) => ({
+      ...article,
+      path: `/news/article/${article.slug}/`,
+      thumbnail: article.thumbnail
+        ? `/news/article/${article.slug}/thumbnail.webp`
+        : `/news/default.webp`,
+      title: article.title,
+      summary: article.summary,
+      date: article.date,
+    }))
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
+);
+
+const latestArticles = computed(() => articles.value.slice(0, 3));
+</script>

apps/frontend/src/components/ui/report/ReportInfo.vue

@@ -11,8 +11,8 @@
         <div class="stacked">
           <span class="title">{{ report.project.title }}</span>
           <span>{{
-            $formatProjectType(
-              $getProjectTypeForUrl(report.project.project_type, report.project.loaders),
+            formatProjectType(
+              getProjectTypeForUrl(report.project.project_type, report.project.loaders),
             )
           }}</span>
         </div>
@@ -53,8 +53,8 @@
         <div class="stacked">
           <span class="title">{{ report.project.title }}</span>
           <span>{{
-            $formatProjectType(
-              $getProjectTypeForUrl(report.project.project_type, report.project.loaders),
+            formatProjectType(
+              getProjectTypeForUrl(report.project.project_type, report.project.loaders),
             )
           }}</span>
         </div>
@@ -105,8 +105,10 @@
 <script setup>
 import { ReportIcon, UnknownIcon, VersionIcon } from "@modrinth/assets";
 import { Avatar, Badge, CopyCode, useRelativeTime } from "@modrinth/ui";
+import { formatProjectType } from "@modrinth/utils";
 import { renderHighlightedString } from "~/helpers/highlight.js";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
+import { getProjectTypeForUrl } from "~/helpers/projects.js";
 
 const formatRelativeTime = useRelativeTime();
 

apps/frontend/src/components/ui/search/Categories.vue

@@ -4,12 +4,14 @@
     <span
       v-for="category in categoriesFiltered"
       :key="category.name"
-      v-html="category.icon + $formatCategory(category.name)"
+      v-html="category.icon + formatCategory(category.name)"
     />
   </div>
 </template>
 
 <script>
+import { formatCategory } from "@modrinth/utils";
+
 export default {
   props: {
     categories: {
@@ -38,6 +40,7 @@ export default {
         );
     },
   },
+  methods: { formatCategory },
 };
 </script>
 

apps/frontend/src/components/ui/servers/BackupItem.vue

@@ -16,7 +16,7 @@ import {
 } from "@modrinth/assets";
 import { ButtonStyled, commonMessages, OverflowMenu, ProgressBar } from "@modrinth/ui";
 import { defineMessages, useVIntl } from "@vintl/vintl";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import type { Backup } from "@modrinth/utils";
 
 const flags = useFeatureFlags();
@@ -52,9 +52,10 @@ const failedToCreate = computed(() => props.backup.interrupted);
 const preparedDownloadStates = ["ready", "done"];
 const inactiveStates = ["failed", "cancelled"];
 
-const hasPreparedDownload = computed(() =>
-  preparedDownloadStates.includes(props.backup.task?.file?.state ?? ""),
-);
+const hasPreparedDownload = computed(() => {
+  const fileState = props.backup.task?.file?.state ?? "";
+  return preparedDownloadStates.includes(fileState);
+});
 
 const creating = computed(() => {
   const task = props.backup.task?.create;
@@ -81,6 +82,10 @@ const restoring = computed(() => {
 const initiatedPrepare = ref(false);
 
 const preparingFile = computed(() => {
+  if (hasPreparedDownload.value) {
+    return false;
+  }
+
   const task = props.backup.task?.file;
   return (
     (!task && initiatedPrepare.value) ||

apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue

@@ -2,7 +2,7 @@
   <NewModal ref="modModal" :header="`Editing ${type.toLocaleLowerCase()} version`">
     <template #title>
       <div class="flex min-w-full items-center gap-2 md:w-[calc(420px-5.5rem)]">
-        <UiAvatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
+        <Avatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
         <span class="truncate text-xl font-extrabold text-contrast">{{ modDetails?.name }}</span>
       </div>
     </template>
@@ -185,7 +185,7 @@
             Something went wrong trying to load versions for this {{ type.toLocaleLowerCase() }}.
             Please try again later or contact support if the issue persists.
           </span>
-          <LazyUiCopyCode class="!mt-2 !break-all" :text="versionsError" />
+          <CopyCode class="!mt-2 !break-all" :text="versionsError" />
         </div>
       </Admonition>
 
@@ -236,7 +236,7 @@ import {
   GameIcon,
   ExternalIcon,
 } from "@modrinth/assets";
-import { Admonition, ButtonStyled, NewModal } from "@modrinth/ui";
+import { Admonition, Avatar, ButtonStyled, CopyCode, NewModal } from "@modrinth/ui";
 import TagItem from "@modrinth/ui/src/components/base/TagItem.vue";
 import { ref, computed } from "vue";
 import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from "@modrinth/utils";

apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue

@@ -39,7 +39,7 @@
                   />
                   <XCircleIcon
                     v-show="
-                      item.status === 'error' ||
+                      item.status.includes('error') ||
                       item.status === 'cancelled' ||
                       item.status === 'incorrect-type'
                     "
@@ -54,9 +54,14 @@
                 <template v-if="item.status === 'completed'">
                   <span>Done</span>
                 </template>
-                <template v-else-if="item.status === 'error'">
+                <template v-else-if="item.status === 'error-file-exists'">
                   <span class="text-red">Failed - File already exists</span>
                 </template>
+                <template v-else-if="item.status === 'error-generic'">
+                  <span class="text-red"
+                    >Failed - {{ item.error?.message || "An unexpected error occured." }}</span
+                  >
+                </template>
                 <template v-else-if="item.status === 'incorrect-type'">
                   <span class="text-red">Failed - Incorrect file type</span>
                 </template>
@@ -104,9 +109,17 @@ import { FSModule } from "~/composables/servers/modules/fs.ts";
 interface UploadItem {
   file: File;
   progress: number;
-  status: "pending" | "uploading" | "completed" | "error" | "cancelled" | "incorrect-type";
+  status:
+    | "pending"
+    | "uploading"
+    | "completed"
+    | "error-file-exists"
+    | "error-generic"
+    | "cancelled"
+    | "incorrect-type";
   size: string;
   uploader?: any;
+  error?: Error;
 }
 
 interface Props {
@@ -245,8 +258,18 @@ const uploadFile = async (file: File) => {
     console.error("Error uploading file:", error);
     const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
     if (index !== -1 && uploadQueue.value[index].status !== "cancelled") {
-      uploadQueue.value[index].status =
-        error instanceof Error && error.message === badFileTypeMsg ? "incorrect-type" : "error";
+      const target = uploadQueue.value[index];
+
+      if (error instanceof Error) {
+        if (error.message === badFileTypeMsg) {
+          target.status = "incorrect-type";
+        } else if (target.progress === 100 && error.message.includes("401")) {
+          target.status = "error-file-exists";
+        } else {
+          target.status = "error-generic";
+          target.error = error;
+        }
+      }
     }
 
     setTimeout(async () => {

apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue

@@ -1,124 +1,176 @@
 <template>
-  <NewModal ref="mrpackModal" header="Uploading mrpack" @hide="onHide" @show="onShow">
+  <NewModal ref="mrpackModal" header="Uploading mrpack" :closable="!isLoading" @show="onShow">
     <div class="flex flex-col gap-4 md:w-[600px]">
-      <p
-        v-if="isMrpackModalSecondPhase"
-        :style="{
-          lineHeight: isMrpackModalSecondPhase ? '1.5' : undefined,
-          marginBottom: isMrpackModalSecondPhase ? '-12px' : '0',
-          marginTop: isMrpackModalSecondPhase ? '-4px' : '-2px',
-        }"
+      <Transition
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="opacity-0 max-h-0"
+        enter-to-class="opacity-100 max-h-20"
+        leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 max-h-20"
+        leave-to-class="opacity-0 max-h-0"
       >
-        This will reinstall your server and erase all data. You may want to back up your server
-        before proceeding. Are you sure you want to continue?
-      </p>
-      <div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
-        <div class="mx-auto flex flex-row items-center gap-4">
-          <div
-            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
-          >
-            <UploadIcon class="size-10" />
+        <div v-if="isLoading" class="w-full">
+          <div class="mb-2 flex justify-between text-sm">
+            <Transition name="phrase-fade" mode="out-in">
+              <span :key="currentPhrase" class="text-lg font-medium text-contrast">{{
+                currentPhrase
+              }}</span>
+            </Transition>
+            <div class="flex flex-col items-end">
+              <span class="text-secondary">{{ Math.round(uploadProgress) }}%</span>
+              <span class="text-xs text-secondary"
+                >{{ formatBytes(uploadedBytes) }} / {{ formatBytes(totalBytes) }}</span
+              >
+            </div>
           </div>
-          <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="size-10"
-          >
-            <path d="M5 9v6" />
-            <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
-          </svg>
-          <div
-            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
-          >
-            <ServerIcon class="size-10" />
+          <div class="h-2 w-full rounded-full bg-divider">
+            <div
+              class="h-2 animate-pulse rounded-full bg-brand transition-all duration-300 ease-out"
+              :style="{ width: `${uploadProgress}%` }"
+            ></div>
           </div>
         </div>
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="text-sm font-bold text-contrast">Upload mrpack</div>
-          <input
-            type="file"
-            accept=".mrpack"
-            class=""
-            :disabled="isLoading"
-            @change="uploadMrpack"
-          />
-        </div>
+      </Transition>
 
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="flex w-full flex-row items-center justify-between">
-            <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
-              Erase all data
-            </label>
-            <input
-              id="hard-reset"
-              v-model="hardReset"
-              class="switch stylized-toggle shrink-0"
-              type="checkbox"
-            />
-          </div>
-          <div>
-            Removes all data on your server, including your worlds, mods, and configuration files,
-            then reinstalls it with the selected version.
-          </div>
-          <div class="font-bold">This does not affect your backups, which are stored off-site.</div>
-        </div>
-
-        <BackupWarning :backup-link="`/servers/manage/${props.server?.serverId}/backups`" />
-      </div>
-      <div class="mt-4 flex justify-start gap-4">
-        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
-          <button
-            v-tooltip="backupInProgress ? formatMessage(backupInProgress.tooltip) : undefined"
-            :disabled="canInstall || backupInProgress"
-            @click="handleReinstall"
+      <Transition
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="opacity-0 max-h-0"
+        enter-to-class="opacity-100 max-h-20"
+        leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 max-h-20"
+        leave-to-class="opacity-0 max-h-0"
+      >
+        <div v-if="!isLoading" class="flex flex-col gap-4">
+          <p
+            v-if="isMrpackModalSecondPhase"
+            :style="{
+              lineHeight: isMrpackModalSecondPhase ? '1.5' : undefined,
+              marginBottom: isMrpackModalSecondPhase ? '-12px' : '0',
+              marginTop: isMrpackModalSecondPhase ? '-4px' : '-2px',
+            }"
           >
-            <RightArrowIcon />
-            {{
-              isMrpackModalSecondPhase
-                ? "Erase and install"
-                : loadingServerCheck
-                  ? "Loading..."
-                  : isDangerous
+            This will reinstall your server and erase all data. You may want to back up your server
+            before proceeding. Are you sure you want to continue?
+          </p>
+          <div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
+            <div class="mx-auto flex flex-row items-center gap-4">
+              <div
+                class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
+              >
+                <UploadIcon class="size-10" />
+              </div>
+              <ArrowBigRightDashIcon class="size-10" />
+              <div
+                class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
+              >
+                <ServerIcon class="size-10" />
+              </div>
+            </div>
+            <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+              <div class="text-sm font-bold text-contrast">Upload mrpack</div>
+              <input
+                type="file"
+                accept=".mrpack"
+                class=""
+                :disabled="isLoading"
+                @change="uploadMrpack"
+              />
+            </div>
+
+            <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+              <div class="flex w-full flex-row items-center justify-between">
+                <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
+                  Erase all data
+                </label>
+                <input
+                  id="hard-reset"
+                  v-model="hardReset"
+                  class="switch stylized-toggle shrink-0"
+                  type="checkbox"
+                />
+              </div>
+              <div>
+                Removes all data on your server, including your worlds, mods, and configuration
+                files, then reinstalls it with the selected version.
+              </div>
+              <div class="font-bold">
+                This does not affect your backups, which are stored off-site.
+              </div>
+            </div>
+
+            <BackupWarning :backup-link="`/servers/manage/${props.server?.serverId}/backups`" />
+          </div>
+          <div class="mt-4 flex justify-start gap-4">
+            <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
+              <button
+                v-tooltip="backupInProgress ? backupInProgress.tooltip : undefined"
+                :disabled="canInstall || !!backupInProgress"
+                @click="handleReinstall"
+              >
+                <RightArrowIcon />
+                {{
+                  isMrpackModalSecondPhase
                     ? "Erase and install"
-                    : "Install"
-            }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled>
-          <button
-            :disabled="isLoading"
-            @click="
-              () => {
-                if (isMrpackModalSecondPhase) {
-                  isMrpackModalSecondPhase = false;
-                } else {
-                  hide();
-                }
-              }
-            "
-          >
-            <XIcon />
-            {{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
-          </button>
-        </ButtonStyled>
-      </div>
+                    : loadingServerCheck
+                      ? "Loading..."
+                      : isDangerous
+                        ? "Erase and install"
+                        : "Install"
+                }}
+              </button>
+            </ButtonStyled>
+            <ButtonStyled>
+              <button
+                :disabled="isLoading"
+                @click="
+                  () => {
+                    if (isMrpackModalSecondPhase) {
+                      isMrpackModalSecondPhase = false;
+                    } else {
+                      hide();
+                    }
+                  }
+                "
+              >
+                <XIcon />
+                {{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
+              </button>
+            </ButtonStyled>
+          </div>
+        </div>
+      </Transition>
     </div>
   </NewModal>
 </template>
 
 <script setup lang="ts">
 import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
-import { UploadIcon, RightArrowIcon, XIcon, ServerIcon } from "@modrinth/assets";
-import { ModrinthServersFetchError } from "@modrinth/utils";
+import {
+  UploadIcon,
+  RightArrowIcon,
+  XIcon,
+  ServerIcon,
+  ArrowBigRightDashIcon,
+} from "@modrinth/assets";
+import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
+import { onMounted, onUnmounted } from "vue";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
-import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from "~/composables/servers/modrinth-servers";
+
+const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+  if (isLoading.value) {
+    event.preventDefault();
+    return "Upload in progress. Are you sure you want to leave?";
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("beforeunload", handleBeforeUnload);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("beforeunload", handleBeforeUnload);
+});
 
 const props = defineProps<{
   server: ModrinthServer;
@@ -135,6 +187,49 @@ const hardReset = ref(false);
 const isLoading = ref(false);
 const loadingServerCheck = ref(false);
 const mrpackFile = ref<File | null>(null);
+const uploadProgress = ref(0);
+const uploadedBytes = ref(0);
+const totalBytes = ref(0);
+
+const uploadPhrases = [
+  "Removing Herobrine...",
+  "Feeding parrots...",
+  "Teaching villagers new trades...",
+  "Convincing creepers to be friendly...",
+  "Polishing diamonds...",
+  "Training wolves to fetch...",
+  "Building pixel art...",
+  "Explaining redstone to beginners...",
+  "Collecting all the cats...",
+  "Negotiating with endermen...",
+  "Planting suspicious stew ingredients...",
+  "Calibrating TNT blast radius...",
+  "Teaching chickens to fly...",
+  "Sorting inventory alphabetically...",
+  "Convincing iron golems to smile...",
+];
+
+const currentPhrase = ref("Uploading...");
+let phraseInterval: NodeJS.Timeout | null = null;
+const usedPhrases = ref(new Set<number>());
+
+const getNextPhrase = () => {
+  if (usedPhrases.value.size >= uploadPhrases.length) {
+    const currentPhraseIndex = uploadPhrases.indexOf(currentPhrase.value);
+    usedPhrases.value.clear();
+    if (currentPhraseIndex !== -1) {
+      usedPhrases.value.add(currentPhraseIndex);
+    }
+  }
+  const availableIndices = uploadPhrases
+    .map((_, index) => index)
+    .filter((index) => !usedPhrases.value.has(index));
+
+  const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
+  usedPhrases.value.add(randomIndex);
+
+  return uploadPhrases[randomIndex];
+};
 
 const isDangerous = computed(() => hardReset.value);
 const canInstall = computed(() => !mrpackFile.value || isLoading.value || loadingServerCheck.value);
@@ -153,18 +248,46 @@ const handleReinstall = async () => {
     return;
   }
 
+  if (!mrpackFile.value) {
+    addNotification({
+      group: "server",
+      title: "No file selected",
+      text: "Choose a .mrpack file before installing.",
+      type: "error",
+    });
+    return;
+  }
+
   isLoading.value = true;
+  uploadProgress.value = 0;
+  uploadProgress.value = 0;
+  uploadedBytes.value = 0;
+  totalBytes.value = mrpackFile.value.size;
+
+  currentPhrase.value = getNextPhrase();
+  phraseInterval = setInterval(() => {
+    currentPhrase.value = getNextPhrase();
+  }, 4500);
+
+  const { onProgress, promise } = props.server.general.reinstallFromMrpack(
+    mrpackFile.value,
+    hardReset.value,
+  );
+
+  onProgress(({ loaded, total, progress }) => {
+    uploadProgress.value = progress;
+    uploadedBytes.value = loaded;
+    totalBytes.value = total;
+
+    if (phraseInterval && progress >= 100) {
+      clearInterval(phraseInterval);
+      phraseInterval = null;
+      currentPhrase.value = "Installing modpack...";
+    }
+  });
 
   try {
-    if (!mrpackFile.value) {
-      throw new Error("No mrpack file selected");
-    }
-
-    const mrpack = new File([mrpackFile.value], mrpackFile.value.name, {
-      type: mrpackFile.value.type,
-    });
-
-    await props.server.general?.reinstallFromMrpack(mrpack, hardReset.value);
+    await promise;
 
     emit("reinstall", {
       loader: "mrpack",
@@ -176,36 +299,44 @@ const handleReinstall = async () => {
     window.scrollTo(0, 0);
     hide();
   } catch (error) {
-    if (error instanceof ModrinthServersFetchError && error?.statusCode === 429) {
+    if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
       addNotification({
         group: "server",
-        title: "Cannot reinstall server",
+        title: "Cannot upload and install modpack to server",
         text: "You are being rate limited. Please try again later.",
         type: "error",
       });
     } else {
       addNotification({
         group: "server",
-        title: "Reinstall Failed",
-        text: "An unexpected error occurred while reinstalling. Please try again later.",
+        title: "Modpack upload and install failed",
+        text: "An unexpected error occurred while uploading/installing. Please try again later.",
         type: "error",
       });
     }
   } finally {
     isLoading.value = false;
+    if (phraseInterval) {
+      clearInterval(phraseInterval);
+      phraseInterval = null;
+    }
   }
 };
-
 const onShow = () => {
   hardReset.value = false;
   isMrpackModalSecondPhase.value = false;
   loadingServerCheck.value = false;
   isLoading.value = false;
   mrpackFile.value = null;
-};
-
-const onHide = () => {
-  onShow();
+  uploadProgress.value = 0;
+  uploadedBytes.value = 0;
+  totalBytes.value = 0;
+  currentPhrase.value = "Uploading...";
+  usedPhrases.value.clear();
+  if (phraseInterval) {
+    clearInterval(phraseInterval);
+    phraseInterval = null;
+  }
 };
 
 const show = () => mrpackModal.value?.show();
@@ -218,4 +349,14 @@ defineExpose({ show, hide });
 .stylized-toggle:checked::after {
   background: var(--color-accent-contrast) !important;
 }
+
+.phrase-fade-enter-active,
+.phrase-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.phrase-fade-enter-from,
+.phrase-fade-leave-to {
+  opacity: 0;
+}
 </style>

apps/frontend/src/components/ui/servers/ServerListing.vue

@@ -33,7 +33,7 @@
           v-if="projectData?.title"
           class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
         >
-          <UiAvatar
+          <Avatar
             :src="iconUrl"
             no-shadow
             style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
@@ -74,7 +74,7 @@
         <UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been suspended. Please
         update your billing information or contact Modrinth Support for more information.
       </div>
-      <UiCopyCode :text="`${props.server_id}`" class="ml-auto" />
+      <CopyCode :text="`${props.server_id}`" class="ml-auto" />
     </div>
   </NuxtLink>
 </template>
@@ -83,6 +83,7 @@
 import { ChevronRightIcon, LockIcon, SparklesIcon } from "@modrinth/assets";
 import type { Project, Server } from "@modrinth/utils";
 import { useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
+import { Avatar, CopyCode } from "@modrinth/ui";
 
 const props = defineProps<Partial<Server>>();
 

apps/frontend/src/components/ui/servers/ServerStats.vue

@@ -50,9 +50,7 @@
         </ClientOnly>
       </div>
     </div>
-
-    <component
-      :is="loading ? 'div' : 'NuxtLink'"
+    <nuxt-link
       :to="loading ? undefined : `/servers/manage/${serverId}/files`"
       class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
       :class="loading ? '' : 'transition-transform duration-100 hover:scale-105 active:scale-100'"
@@ -64,16 +62,17 @@
       </div>
       <h3 class="text-base font-normal text-secondary">Storage usage</h3>
       <FolderOpenIcon class="absolute right-10 top-10 size-8" />
-    </component>
+    </nuxt-link>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, shallowRef } from "vue";
-import { FolderOpenIcon, CPUIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
+import { FolderOpenIcon, CpuIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
 import { useStorage } from "@vueuse/core";
 import type { Stats } from "@modrinth/utils";
 
+const flags = useFeatureFlags();
 const route = useNativeRoute();
 const serverId = route.params.id;
 const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
@@ -127,7 +126,7 @@ const metrics = computed(() => {
         title: "CPU usage",
         value: "0.00%",
         max: "100%",
-        icon: CPUIcon,
+        icon: CpuIcon,
         data: cpuData.value,
         showGraph: false,
         warning: null,
@@ -158,17 +157,21 @@ const metrics = computed(() => {
       title: "CPU usage",
       value: `${cpuPercent.toFixed(2)}%`,
       max: "100%",
-      icon: CPUIcon,
+      icon: CpuIcon,
       data: cpuData.value,
       showGraph: true,
       warning: cpuPercent >= 90 ? "CPU usage is very high" : null,
     },
     {
       title: "Memory usage",
-      value: userPreferences.value.ramAsNumber
-        ? formatBytes(stats.value.ram_usage_bytes)
-        : `${ramPercent.toFixed(2)}%`,
-      max: userPreferences.value.ramAsNumber ? formatBytes(stats.value.ram_total_bytes) : "100%",
+      value:
+        userPreferences.value.ramAsNumber || flags.developerMode
+          ? formatBytes(stats.value.ram_usage_bytes)
+          : `${ramPercent.toFixed(2)}%`,
+      max:
+        userPreferences.value.ramAsNumber || flags.developerMode
+          ? formatBytes(stats.value.ram_total_bytes)
+          : "100%",
       icon: DatabaseIcon,
       data: ramData.value,
       showGraph: true,

apps/frontend/src/composables/compact-number.ts

@@ -1,18 +1,26 @@
-import { createFormatter, type Formatter } from "@vintl/compact-number";
-import type { IntlController } from "@vintl/vintl/controller";
+const formatters = new WeakMap<object, Intl.NumberFormat>();
 
-const formatters = new WeakMap<IntlController<any>, Formatter>();
+export function useCompactNumber(truncate = false, fractionDigits = 2, locale?: string) {
+  const context = {};
 
-export function useCompactNumber(): Formatter {
-  const vintl = useVIntl();
+  let formatter = formatters.get(context);
 
-  let formatter = formatters.get(vintl);
-
-  if (formatter == null) {
-    const formatterRef = computed(() => createFormatter(vintl.intl));
-    formatter = (value, options) => formatterRef.value(value, options);
-    formatters.set(vintl, formatter);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(locale, {
+      notation: "compact",
+      maximumFractionDigits: fractionDigits,
+    });
+    formatters.set(context, formatter);
   }
 
-  return formatter;
+  function format(value: number): string {
+    let formattedValue = value;
+    if (truncate) {
+      const scale = Math.pow(10, fractionDigits);
+      formattedValue = Math.floor(value * scale) / scale;
+    }
+    return formatter!.format(formattedValue);
+  }
+
+  return format;
 }

apps/frontend/src/composables/featureFlags.ts

@@ -31,6 +31,9 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
   projectBackground: false,
   searchBackground: false,
   advancedDebugInfo: false,
+  showProjectPageDownloadModalServersPromo: false,
+  showProjectPageCreateServersTooltip: true,
+  showProjectPageQuickServerButton: false,
   // advancedRendering: true,
   // externalLinksNewTab: true,
   // notUsingBlockers: false,

apps/frontend/src/composables/servers/modules/general.ts

@@ -98,28 +98,67 @@ export class GeneralModule extends ServerModule implements ServerGeneral {
     }
   }
 
-  async reinstallFromMrpack(mrpack: File, hardReset: boolean = false): Promise<void> {
+  reinstallFromMrpack(
+    mrpack: File,
+    hardReset: boolean = false,
+  ): {
+    promise: Promise<void>;
+    onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) => void;
+  } {
     const hardResetParam = hardReset ? "true" : "false";
-    const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/reinstallFromMrpack`);
 
-    const formData = new FormData();
-    formData.append("file", mrpack);
+    const progressSubject = new EventTarget();
 
-    const response = await fetch(
-      `https://${auth.url}/reinstallMrpackMultiparted?hard=${hardResetParam}`,
-      {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${auth.token}`,
-        },
-        body: formData,
-        signal: AbortSignal.timeout(30 * 60 * 1000),
-      },
-    );
+    const uploadPromise = (async () => {
+      try {
+        const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/reinstallFromMrpack`);
 
-    if (!response.ok) {
-      throw new Error(`[pyroservers] native fetch err status: ${response.status}`);
-    }
+        await new Promise<void>((resolve, reject) => {
+          const xhr = new XMLHttpRequest();
+
+          xhr.upload.addEventListener("progress", (e) => {
+            if (e.lengthComputable) {
+              progressSubject.dispatchEvent(
+                new CustomEvent("progress", {
+                  detail: {
+                    loaded: e.loaded,
+                    total: e.total,
+                    progress: (e.loaded / e.total) * 100,
+                  },
+                }),
+              );
+            }
+          });
+
+          xhr.onload = () =>
+            xhr.status >= 200 && xhr.status < 300
+              ? resolve()
+              : reject(new Error(`[pyroservers] XHR error status: ${xhr.status}`));
+
+          xhr.onerror = () => reject(new Error("[pyroservers] .mrpack upload failed"));
+          xhr.onabort = () => reject(new Error("[pyroservers] .mrpack upload cancelled"));
+          xhr.ontimeout = () => reject(new Error("[pyroservers] .mrpack upload timed out"));
+          xhr.timeout = 30 * 60 * 1000;
+
+          xhr.open("POST", `https://${auth.url}/reinstallMrpackMultiparted?hard=${hardResetParam}`);
+          xhr.setRequestHeader("Authorization", `Bearer ${auth.token}`);
+
+          const formData = new FormData();
+          formData.append("file", mrpack);
+          xhr.send(formData);
+        });
+      } catch (err) {
+        console.error("Error reinstalling from mrpack:", err);
+        throw err;
+      }
+    })();
+
+    return {
+      promise: uploadPromise,
+      onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) =>
+        progressSubject.addEventListener("progress", ((e: CustomEvent) =>
+          cb(e.detail)) as EventListener),
+    };
   }
 
   async suspend(status: boolean): Promise<void> {

apps/frontend/src/helpers/fileUtils.js

@@ -1,4 +1,4 @@
-import { formatBytes } from "~/plugins/shorthands.js";
+import { formatBytes } from "@modrinth/utils";
 
 export const fileIsValid = (file, validationOptions) => {
   const { maxSize, alertOnInvalid } = validationOptions;

apps/frontend/src/layouts/default.vue

@@ -142,7 +142,7 @@
             "
           >
             <nuxt-link to="/resourcepacks">
-              <PaintBrushIcon aria-hidden="true" /> Resource Packs
+              <PaintbrushIcon aria-hidden="true" /> Resource Packs
             </nuxt-link>
           </ButtonStyled>
           <ButtonStyled
@@ -221,7 +221,7 @@
                 v-if="route.name === 'search-mods' || route.path.startsWith('/mod/')"
                 aria-hidden="true"
               />
-              <PaintBrushIcon
+              <PaintbrushIcon
                 v-else-if="
                   route.name === 'search-resourcepacks' || route.path.startsWith('/resourcepack/')
                 "
@@ -250,7 +250,7 @@
 
               <template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
               <template #resourcepacks>
-                <PaintBrushIcon aria-hidden="true" /> Resource Packs
+                <PaintbrushIcon aria-hidden="true" /> Resource Packs
               </template>
               <template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
               <template #plugins> <PlugIcon aria-hidden="true" /> Plugins </template>
@@ -696,14 +696,14 @@ import {
   CurrencyIcon,
   BracesIcon,
   GlassesIcon,
-  PaintBrushIcon,
+  PaintbrushIcon,
   PackageOpenIcon,
   DiscordIcon,
   BlueskyIcon,
   TumblrIcon,
   TwitterIcon,
   MastodonIcon,
-  GitHubIcon,
+  GithubIcon,
   ScaleIcon,
 } from "@modrinth/assets";
 import {
@@ -1202,7 +1202,7 @@ const socialLinks = [
       defineMessage({ id: "layout.footer.social.github", defaultMessage: "GitHub" }),
     ),
     href: "https://github.com/modrinth",
-    icon: GitHubIcon,
+    icon: GithubIcon,
   },
 ];
 
@@ -1211,9 +1211,9 @@ const footerLinks = [
     label: formatMessage(defineMessage({ id: "layout.footer.about", defaultMessage: "About" })),
     links: [
       {
-        href: "https://blog.modrinth.com",
+        href: "/news",
         label: formatMessage(
-          defineMessage({ id: "layout.footer.about.blog", defaultMessage: "Blog" }),
+          defineMessage({ id: "layout.footer.about.news", defaultMessage: "News" }),
         ),
       },
       {

apps/frontend/src/locales/en-US/index.json

@@ -383,8 +383,8 @@
   "layout.footer.about": {
     "message": "About"
   },
-  "layout.footer.about.blog": {
-    "message": "Blog"
+  "layout.footer.about.news": {
+    "message": "News"
   },
   "layout.footer.about.careers": {
     "message": "Careers"

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

@@ -452,6 +452,16 @@
               {{ formatCategory(currentPlatform) }}.
             </p>
           </AutomaticAccordion>
+          <ServersPromo
+            v-if="flags.showProjectPageDownloadModalServersPromo"
+            :link="`/servers#plan`"
+            @close="
+              () => {
+                flags.showProjectPageDownloadModalServersPromo = false;
+                saveFeatureFlags();
+              }
+            "
+          />
         </div>
       </template>
     </NewModal>
@@ -495,6 +505,64 @@
                 </button>
               </ButtonStyled>
             </div>
+            <Tooltip
+              v-if="canCreateServerFrom && flags.showProjectPageQuickServerButton"
+              theme="dismissable-prompt"
+              :triggers="[]"
+              :shown="flags.showProjectPageCreateServersTooltip"
+              :auto-hide="false"
+              placement="bottom-start"
+            >
+              <ButtonStyled size="large" circular>
+                <nuxt-link
+                  v-tooltip="'Create a server'"
+                  :to="`/servers?project=${project.id}#plan`"
+                  @click="
+                    () => {
+                      flags.showProjectPageCreateServersTooltip = false;
+                      saveFeatureFlags();
+                    }
+                  "
+                >
+                  <ServerPlusIcon aria-hidden="true" />
+                </nuxt-link>
+              </ButtonStyled>
+              <template #popper>
+                <div class="experimental-styles-within flex max-w-60 flex-col gap-1">
+                  <div class="flex items-center justify-between gap-4">
+                    <h3 class="m-0 flex items-center gap-2 text-base font-bold text-contrast">
+                      Create a server
+                      <TagItem
+                        :style="{
+                          '--_color': 'var(--color-brand)',
+                          '--_bg-color': 'var(--color-brand-highlight)',
+                        }"
+                        >New</TagItem
+                      >
+                    </h3>
+                    <ButtonStyled size="small" circular>
+                      <button
+                        v-tooltip="`Don't show again`"
+                        @click="
+                          () => {
+                            flags.showProjectPageCreateServersTooltip = false;
+                            saveFeatureFlags();
+                          }
+                        "
+                      >
+                        <XIcon aria-hidden="true" />
+                      </button>
+                    </ButtonStyled>
+                  </div>
+                  <p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
+                    Modrinth Servers is the easiest way to play with your friends without hassle!
+                  </p>
+                  <p class="m-0 text-wrap text-sm font-bold text-primary">
+                    Starting at $5<span class="text-xs"> / month</span>
+                  </p>
+                </div>
+              </template>
+            </Tooltip>
             <ClientOnly>
               <ButtonStyled
                 size="large"
@@ -694,12 +762,7 @@
           :tags="tags"
           class="card flex-card experimental-styles-within"
         />
-        <!-- <AdPlaceholder
-          v-if="
-            (!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus) &&
-            tags.approvedStatuses.includes(project.status)
-          "
-        /> -->
+        <!-- <AdPlaceholder v-if="!auth.user && tags.approvedStatuses.includes(project.status)" /> -->
         <ProjectSidebarLinks
           :project="project"
           :link-target="$external()"
@@ -850,12 +913,14 @@ import {
   ReportIcon,
   ScaleIcon,
   SearchIcon,
+  ServerPlusIcon,
   SettingsIcon,
   TagsIcon,
   UsersIcon,
   VersionIcon,
   WrenchIcon,
   ModrinthIcon,
+  XIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
@@ -872,12 +937,22 @@ import {
   ProjectSidebarLinks,
   ProjectStatusBadge,
   ScrollablePanel,
+  TagItem,
+  ServersPromo,
   useRelativeTime,
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
-import { formatCategory, isRejected, isStaff, isUnderReview, renderString } from "@modrinth/utils";
+import {
+  formatCategory,
+  formatProjectType,
+  isRejected,
+  isStaff,
+  isUnderReview,
+  renderString,
+} from "@modrinth/utils";
 import { navigateTo } from "#app";
 import dayjs from "dayjs";
+import { Tooltip } from "floating-vue";
 import Accordion from "~/components/ui/Accordion.vue";
 // import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
@@ -891,6 +966,7 @@ import NavTabs from "~/components/ui/NavTabs.vue";
 import ProjectMemberHeader from "~/components/ui/ProjectMemberHeader.vue";
 import { userCollectProject } from "~/composables/user.js";
 import { reportProject } from "~/utils/report-helpers.ts";
+import { saveFeatureFlags } from "~/composables/featureFlags.ts";
 
 const data = useNuxtApp();
 const route = useNativeRoute();
@@ -1286,7 +1362,7 @@ featuredVersions.value.sort((a, b) => {
 });
 
 const projectTypeDisplay = computed(() =>
-  data.$formatProjectType(
+  formatProjectType(
     data.$getProjectTypeForDisplay(project.value.project_type, project.value.loaders),
   ),
 );
@@ -1304,6 +1380,10 @@ const description = computed(
     } by ${members.value.find((x) => x.is_owner)?.user?.username || "a Creator"} on Modrinth`,
 );
 
+const canCreateServerFrom = computed(() => {
+  return project.value.project_type === "modpack" && project.value.server_side !== "unsupported";
+});
+
 if (!route.name.startsWith("type-id-settings")) {
   useSeoMeta({
     title: () => title.value,
@@ -1672,4 +1752,33 @@ const navLinks = computed(() => {
     display: none;
   }
 }
+
+.servers-popup {
+  box-shadow:
+    0 0 12px 1px rgba(0, 175, 92, 0.6),
+    var(--shadow-floating);
+
+  &::before {
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid var(--color-button-bg);
+    content: " ";
+    position: absolute;
+    top: -7px;
+    left: 17px;
+  }
+  &::after {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid var(--color-raised-bg);
+    content: " ";
+    position: absolute;
+    top: -5px;
+    left: 18px;
+  }
+}
 </style>

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

@@ -50,7 +50,7 @@
           Listed in search results
         </li>
         <li v-else>
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not listed in search results
         </li>
         <li v-if="isListed(project)">
@@ -58,11 +58,11 @@
           Listed on the profiles of members
         </li>
         <li v-else>
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not listed on the profiles of members
         </li>
         <li v-if="isPrivate(project)">
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not accessible with a direct link
         </li>
         <li v-else>
@@ -92,7 +92,7 @@
   </div>
 </template>
 <script setup>
-import { ExitIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
+import { XIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
 import { Badge } from "@modrinth/ui";
 import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
 import {

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

@@ -104,7 +104,7 @@
             <span class="label__title">Client-side</span>
             <span class="label__description">
               Select based on if the
-              {{ $formatProjectType(project.project_type).toLowerCase() }} has functionality on the
+              {{ formatProjectType(project.project_type).toLowerCase() }} has functionality on the
               client side. Just because a mod works in Singleplayer doesn't mean it has actual
               client-side functionality.
             </span>
@@ -128,7 +128,7 @@
             <span class="label__title">Server-side</span>
             <span class="label__description">
               Select based on if the
-              {{ $formatProjectType(project.project_type).toLowerCase() }} has functionality on the
+              {{ formatProjectType(project.project_type).toLowerCase() }} has functionality on the
               <strong>logical</strong> server. Remember that Singleplayer contains an integrated
               server.
             </span>
@@ -239,7 +239,7 @@
 </template>
 
 <script setup>
-import { formatProjectStatus } from "@modrinth/utils";
+import { formatProjectStatus, formatProjectType } from "@modrinth/utils";
 import { UploadIcon, SaveIcon, TrashIcon, XIcon, IssuesIcon, CheckIcon } from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
 import { ConfirmModal, Avatar } from "@modrinth/ui";

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

@@ -7,14 +7,14 @@
         {{ formatProjectType(project.project_type).toLowerCase() }}. You may choose one from our
         list or provide a custom license. You may also provide a custom URL to your chosen license;
         otherwise, the license text will be displayed. See our
-        <a
-          href="https://blog.modrinth.com/licensing-guide/"
+        <nuxt-link
+          to="/news/article/licensing-guide/"
           target="_blank"
           rel="noopener"
           class="text-link"
         >
           licensing guide
-        </a>
+        </nuxt-link>
         for more information.
       </p>
 

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

@@ -8,7 +8,7 @@
       </div>
       <p>
         Accurate tagging is important to help people find your
-        {{ $formatProjectType(project.project_type).toLowerCase() }}. Make sure to select all tags
+        {{ formatProjectType(project.project_type).toLowerCase() }}. Make sure to select all tags
         that apply.
       </p>
       <p v-if="project.versions.length === 0" class="known-errors">
@@ -18,25 +18,25 @@
         <template v-for="header in Object.keys(categoryLists)" :key="`categories-${header}`">
           <div class="label">
             <h4>
-              <span class="label__title">{{ $formatCategoryHeader(header) }}</span>
+              <span class="label__title">{{ formatCategoryHeader(header) }}</span>
             </h4>
             <span class="label__description">
               <template v-if="header === 'categories'">
                 Select all categories that reflect the themes or function of your
-                {{ $formatProjectType(project.project_type).toLowerCase() }}.
+                {{ formatProjectType(project.project_type).toLowerCase() }}.
               </template>
               <template v-else-if="header === 'features'">
                 Select all of the features that your
-                {{ $formatProjectType(project.project_type).toLowerCase() }} makes use of.
+                {{ formatProjectType(project.project_type).toLowerCase() }} makes use of.
               </template>
               <template v-else-if="header === 'resolutions'">
                 Select the resolution(s) of textures in your
-                {{ $formatProjectType(project.project_type).toLowerCase() }}.
+                {{ formatProjectType(project.project_type).toLowerCase() }}.
               </template>
               <template v-else-if="header === 'performance impact'">
                 Select the realistic performance impact of your
-                {{ $formatProjectType(project.project_type).toLowerCase() }}. Select multiple if the
-                {{ $formatProjectType(project.project_type).toLowerCase() }} is configurable to
+                {{ formatProjectType(project.project_type).toLowerCase() }}. Select multiple if the
+                {{ formatProjectType(project.project_type).toLowerCase() }} is configurable to
                 different levels of performance impact.
               </template>
             </span>
@@ -46,7 +46,7 @@
               v-for="category in categoryLists[header]"
               :key="`category-${header}-${category.name}`"
               :model-value="selectedTags.includes(category)"
-              :description="$formatCategory(category.name)"
+              :description="formatCategory(category.name)"
               class="category-selector"
               @update:model-value="toggleCategory(category)"
             >
@@ -57,7 +57,7 @@
                   class="icon"
                   v-html="category.icon"
                 />
-                <span aria-hidden="true"> {{ $formatCategory(category.name) }}</span>
+                <span aria-hidden="true"> {{ formatCategory(category.name) }}</span>
               </div>
             </Checkbox>
           </div>
@@ -80,7 +80,7 @@
             :key="`featured-category-${category.name}`"
             class="category-selector"
             :model-value="featuredTags.includes(category)"
-            :description="$formatCategory(category.name)"
+            :description="formatCategory(category.name)"
             :disabled="featuredTags.length >= 3 && !featuredTags.includes(category)"
             @update:model-value="toggleFeaturedCategory(category)"
           >
@@ -91,7 +91,7 @@
                 class="icon"
                 v-html="category.icon"
               />
-              <span aria-hidden="true"> {{ $formatCategory(category.name) }}</span>
+              <span aria-hidden="true"> {{ formatCategory(category.name) }}</span>
             </div>
           </Checkbox>
         </div>
@@ -114,6 +114,7 @@
 
 <script>
 import { StarIcon, SaveIcon } from "@modrinth/assets";
+import { formatCategory, formatCategoryHeader, formatProjectType } from "@modrinth/utils";
 import Checkbox from "~/components/ui/Checkbox.vue";
 
 export default defineNuxtComponent({
@@ -222,6 +223,9 @@ export default defineNuxtComponent({
     },
   },
   methods: {
+    formatProjectType,
+    formatCategoryHeader,
+    formatCategory,
     toggleCategory(category) {
       if (this.selectedTags.includes(category)) {
         this.selectedTags = this.selectedTags.filter((x) => x !== category);

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

@@ -144,7 +144,7 @@
       <div v-else class="input-group">
         <ButtonStyled v-if="primaryFile" color="brand">
           <a
-            v-tooltip="primaryFile.filename + ' (' + $formatBytes(primaryFile.size) + ')'"
+            v-tooltip="primaryFile.filename + ' (' + formatBytes(primaryFile.size) + ')'"
             :href="primaryFile.url"
             @click="emit('onDownload')"
           >
@@ -320,7 +320,7 @@
         <FileIcon aria-hidden="true" />
         <span class="filename">
           <strong>{{ replaceFile.name }}</strong>
-          <span class="file-size">({{ $formatBytes(replaceFile.size) }})</span>
+          <span class="file-size">({{ formatBytes(replaceFile.size) }})</span>
         </span>
         <FileInput
           class="iconified-button raised-button"
@@ -345,7 +345,7 @@
         <FileIcon aria-hidden="true" />
         <span class="filename">
           <strong>{{ file.filename }}</strong>
-          <span class="file-size">({{ $formatBytes(file.size) }})</span>
+          <span class="file-size">({{ formatBytes(file.size) }})</span>
           <span v-if="primaryFile.hashes.sha1 === file.hashes.sha1" class="file-type">
             Primary
           </span>
@@ -412,7 +412,7 @@
           <FileIcon aria-hidden="true" />
           <span class="filename">
             <strong>{{ file.name }}</strong>
-            <span class="file-size">({{ $formatBytes(file.size) }})</span>
+            <span class="file-size">({{ formatBytes(file.size) }})</span>
           </span>
           <multiselect
             v-if="version.loaders.some((x) => tags.loaderData.dataPackLoaders.includes(x))"
@@ -533,7 +533,7 @@
                 )
                 .map((it) => it.name)
             "
-            :custom-label="(value) => $formatCategory(value)"
+            :custom-label="formatCategory"
             :loading="tags.loaders.length === 0"
             :multiple="true"
             :searchable="true"
@@ -657,6 +657,7 @@ import {
   ChevronRightIcon,
 } from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
+import { formatBytes, formatCategory } from "@modrinth/utils";
 import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
 import { inferVersionInfo } from "~/helpers/infer.js";
 import { createDataPackVersion } from "~/helpers/package.js";
@@ -962,6 +963,8 @@ export default defineNuxtComponent({
     },
   },
   methods: {
+    formatBytes,
+    formatCategory,
     async onImageUpload(file) {
       const response = await useImageUpload(file, { context: "version" });
 

apps/frontend/src/pages/admin/billing/[id].vue

@@ -153,10 +153,7 @@
                   {{ dayjs(charge.due).format("MMMM D, YYYY [at] h:mma") }}
                   <span class="text-secondary">({{ formatRelativeTime(charge.due) }}) </span>
                 </span>
-                <div
-                  v-if="flags.developerMode"
-                  class="flex w-full items-center gap-1 text-xs text-secondary"
-                >
+                <div class="flex w-full items-center gap-1 text-xs text-secondary">
                   {{ charge.status }}
                   ⋅
                   {{ charge.type }}
@@ -219,7 +216,6 @@ import dayjs from "dayjs";
 import { products } from "~/generated/state.json";
 import ModrinthServersIcon from "~/components/ui/servers/ModrinthServersIcon.vue";
 
-const flags = useFeatureFlags();
 const route = useRoute();
 const data = useNuxtApp();
 const vintl = useVIntl();
@@ -289,13 +285,13 @@ const selectedCharge = ref(null);
 const refundType = ref("full");
 const refundTypes = ref(["full", "partial", "none"]);
 const refundAmount = ref(0);
-const unprovision = ref(false);
+const unprovision = ref(true);
 
 function showRefundModal(charge) {
   selectedCharge.value = charge;
   refundType.value = "full";
   refundAmount.value = 0;
-  unprovision.value = false;
+  unprovision.value = true;
   refundModal.value.show();
 }
 

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

@@ -248,9 +248,7 @@
             </div>
           </template>
         </div>
-        <!-- <AdPlaceholder
-          v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus"
-        /> -->
+        <!-- <AdPlaceholder v-if="!auth.user" /> -->
       </div>
       <div class="normal-page__content">
         <nav class="navigation-card">
@@ -492,7 +490,6 @@ const route = useNativeRoute();
 const auth = await useAuth();
 const cosmetics = useCosmetics();
 const tags = useTags();
-const flags = useFeatureFlags();
 
 const isEditing = ref(false);
 

apps/frontend/src/pages/dashboard/notifications.vue

@@ -26,7 +26,7 @@
         v-if="notifTypes.length > 1"
         v-model="selectedType"
         :items="notifTypes"
-        :format-label="(x) => (x === 'all' ? 'All' : $formatProjectType(x).replace('_', ' ') + 's')"
+        :format-label="(x) => (x === 'all' ? 'All' : formatProjectType(x).replace('_', ' ') + 's')"
         :capitalize="false"
       />
       <p v-if="pending">Loading notifications...</p>
@@ -58,6 +58,7 @@
 <script setup>
 import { Button, Pagination, Chips } from "@modrinth/ui";
 import { HistoryIcon, CheckCheckIcon } from "@modrinth/assets";
+import { formatProjectType } from "@modrinth/utils";
 import {
   fetchExtraNotificationData,
   groupNotifications,

apps/frontend/src/pages/dashboard/projects.vue

@@ -146,7 +146,7 @@
         />
         <div class="push-right input-group">
           <button class="iconified-button" @click="$refs.editLinksModal.hide()">
-            <CrossIcon />
+            <XIcon />
             Cancel
           </button>
           <button class="iconified-button brand-button" @click="bulkEditLinks()">
@@ -199,8 +199,8 @@
                 class="square-button"
                 @click="updateDescending()"
               >
-                <DescendingIcon v-if="descending" />
-                <AscendingIcon v-else />
+                <SortDescIcon v-if="descending" />
+                <SortAscIcon v-else />
               </button>
             </div>
           </div>
@@ -239,7 +239,7 @@
             <div>
               <nuxt-link
                 tabindex="-1"
-                :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
+                :to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
                   project.slug ? project.slug : project.id
                 }`"
               >
@@ -261,7 +261,7 @@
 
                 <nuxt-link
                   class="hover-link wrap-as-needed"
-                  :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
+                  :to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
                     project.slug ? project.slug : project.id
                   }`"
                 >
@@ -275,7 +275,7 @@
             </div>
 
             <div>
-              {{ $formatProjectType($getProjectTypeForUrl(project.project_type, project.loaders)) }}
+              {{ formatProjectType(getProjectTypeForUrl(project.project_type, project.loaders)) }}
             </div>
 
             <div>
@@ -285,7 +285,7 @@
             <div>
               <ButtonStyled circular>
                 <nuxt-link
-                  :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
+                  :to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
                     project.slug ? project.slug : project.id
                   }/settings`"
                 >
@@ -306,12 +306,12 @@ import {
   SettingsIcon,
   TrashIcon,
   PlusIcon,
-  XIcon as CrossIcon,
+  XIcon,
   IssuesIcon,
   EditIcon,
   SaveIcon,
-  SortAscendingIcon as AscendingIcon,
-  SortDescendingIcon as DescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
@@ -321,9 +321,11 @@ import {
   ProjectStatusBadge,
   commonMessages,
 } from "@modrinth/ui";
+import { formatProjectType } from "@modrinth/utils";
 
 import Modal from "~/components/ui/Modal.vue";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
+import { getProjectTypeForUrl } from "~/helpers/projects.js";
 
 export default defineNuxtComponent({
   components: {
@@ -335,15 +337,15 @@ export default defineNuxtComponent({
     Checkbox,
     IssuesIcon,
     PlusIcon,
-    CrossIcon,
+    XIcon,
     EditIcon,
     SaveIcon,
     Modal,
     ModalCreation,
     Multiselect,
     CopyCode,
-    AscendingIcon,
-    DescendingIcon,
+    SortAscIcon,
+    SortDescIcon,
   },
   async setup() {
     const { formatMessage } = useVIntl();
@@ -395,6 +397,8 @@ export default defineNuxtComponent({
     this.DELETE_PROJECT = 1 << 7;
   },
   methods: {
+    getProjectTypeForUrl,
+    formatProjectType,
     updateDescending() {
       this.descending = !this.descending;
       this.projects = this.updateSort(this.projects, this.sortBy, this.descending);

apps/frontend/src/pages/dashboard/revenue/transfers.vue

@@ -76,7 +76,7 @@
             </span>
             <template v-if="payout.method">
               <span>⋅</span>
-              <span>{{ $formatWallet(payout.method) }} ({{ payout.method_address }})</span>
+              <span>{{ formatWallet(payout.method) }} ({{ payout.method_address }})</span>
             </template>
           </div>
         </div>
@@ -95,7 +95,7 @@
 </template>
 <script setup>
 import { XIcon, PayPalIcon, UnknownIcon } from "@modrinth/assets";
-import { capitalizeString } from "@modrinth/utils";
+import { capitalizeString, formatWallet } from "@modrinth/utils";
 import { Badge, Breadcrumbs, DropdownSelect } from "@modrinth/ui";
 import dayjs from "dayjs";
 import TremendousIcon from "~/assets/images/external/tremendous.svg?component";

apps/frontend/src/pages/dashboard/revenue/withdraw.vue

@@ -139,8 +139,8 @@
       <template v-if="knownErrors.length === 0 && amount">
         <Checkbox v-if="fees > 0" v-model="agreedFees" description="Consent to fee">
           I acknowledge that an estimated
-          {{ $formatMoney(fees) }} will be deducted from the amount I receive to cover
-          {{ $formatWallet(selectedMethod.type) }} processing fees.
+          {{ formatMoney(fees) }} will be deducted from the amount I receive to cover
+          {{ formatWallet(selectedMethod.type) }} processing fees.
         </Checkbox>
         <Checkbox v-model="agreedTransfer" description="Confirm transfer">
           <template v-if="selectedMethod.type === 'tremendous'">
@@ -149,7 +149,7 @@
           </template>
           <template v-else>
             I confirm that I am initiating a transfer to the following
-            {{ $formatWallet(selectedMethod.type) }} account: {{ withdrawAccount }}
+            {{ formatWallet(selectedMethod.type) }} account: {{ withdrawAccount }}
           </template>
         </Checkbox>
         <Checkbox v-model="agreedTerms" class="rewards-checkbox">
@@ -198,6 +198,7 @@ import {
 } from "@modrinth/assets";
 import { Chips, Checkbox, Breadcrumbs } from "@modrinth/ui";
 import { all } from "iso-3166-1";
+import { formatMoney, formatWallet } from "@modrinth/utils";
 import VenmoIcon from "~/assets/images/external/venmo.svg?component";
 
 const auth = await useAuth();
@@ -360,9 +361,7 @@ async function withdraw() {
       text:
         selectedMethod.value.type === "tremendous"
           ? "An email has been sent to your account with further instructions on how to redeem your payout!"
-          : `Payment has been sent to your ${data.$formatWallet(
-              selectedMethod.value.type,
-            )} account!`,
+          : `Payment has been sent to your ${formatWallet(selectedMethod.value.type)} account!`,
       type: "success",
     });
   } catch (err) {

apps/frontend/src/pages/legal/cmp-info.vue

@@ -147,9 +147,9 @@
       <tbody>
         <tr v-for="item in platformRevenueData" :key="item.time">
           <td>{{ formatDate(dayjs.unix(item.time)) }}</td>
-          <td>{{ formatMoney(item.revenue) }}</td>
-          <td>{{ formatMoney(item.creator_revenue) }}</td>
-          <td>{{ formatMoney(item.revenue - item.creator_revenue) }}</td>
+          <td>{{ formatMoney(Number(item.revenue) + Number(item.creator_revenue)) }}</td>
+          <td>{{ formatMoney(Number(item.creator_revenue)) }}</td>
+          <td>{{ formatMoney(Number(item.revenue)) }}</td>
         </tr>
       </tbody>
     </table>
@@ -187,6 +187,6 @@ const { data: transparencyInformation } = await useAsyncData("payout/platform_re
   }),
 );
 
-const platformRevenue = transparencyInformation.value.all_time;
-const platformRevenueData = transparencyInformation.value.data.slice(0, 5);
+const platformRevenue = (transparencyInformation.value as any)?.all_time;
+const platformRevenueData = (transparencyInformation.value as any)?.data?.slice(0, 5) ?? [];
 </script>

apps/frontend/src/pages/legal/privacy.vue

@@ -122,8 +122,8 @@
     <h3>Creator Monetization Program data</h3>
     <p>
       When you sign up for our
-      <a href="https://blog.modrinth.com/p/creator-monetization-beta">
-        Creator Monetization Program</a
+      <nuxt-link to="/news/article/creator-monetization-beta">
+        Creator Monetization Program</nuxt-link
       >
       (the "CMP"), we collect:
     </p>

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

@@ -32,7 +32,7 @@
   </div>
 </template>
 <script setup>
-import { formatNumber } from "~/plugins/shorthands.js";
+import { formatNumber } from "@modrinth/utils";
 
 useHead({
   title: "Staff overview - Modrinth",

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

@@ -5,14 +5,14 @@
       <Chips
         v-model="projectType"
         :items="projectTypes"
-        :format-label="(x) => (x === 'all' ? 'All' : $formatProjectType(x) + 's')"
+        :format-label="(x) => (x === 'all' ? 'All' : formatProjectType(x) + 's')"
       />
       <button v-if="oldestFirst" class="iconified-button push-right" @click="oldestFirst = false">
-        <SortDescendingIcon />
+        <SortDescIcon />
         Sorting by oldest
       </button>
       <button v-else class="iconified-button push-right" @click="oldestFirst = true">
-        <SortAscendingIcon />
+        <SortAscIcon />
         Sorting by newest
       </button>
       <button
@@ -56,7 +56,7 @@
             <Avatar :src="project.icon_url" size="xs" no-shadow raised />
             <span class="stacked">
               <span class="title">{{ project.name }}</span>
-              <span>{{ $formatProjectType(project.inferred_project_type) }}</span>
+              <span>{{ formatProjectType(project.inferred_project_type) }}</span>
             </span>
           </nuxt-link>
         </div>
@@ -109,12 +109,12 @@ import { Avatar, ProjectStatusBadge, Chips, useRelativeTime } from "@modrinth/ui
 import {
   UnknownIcon,
   EyeIcon,
-  SortAscendingIcon,
-  SortDescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
   IssuesIcon,
   ScaleIcon,
 } from "@modrinth/assets";
-import { formatProjectType } from "~/plugins/shorthands.js";
+import { formatProjectType } from "@modrinth/utils";
 import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
 
 useHead({

apps/frontend/src/pages/news/article/[slug].vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { ButtonStyled } from "@modrinth/ui";
+import { RssIcon, GitGraphIcon } from "@modrinth/assets";
+import dayjs from "dayjs";
+import { articles as rawArticles } from "@modrinth/blog";
+import { computed } from "vue";
+import ShareArticleButtons from "~/components/ui/ShareArticleButtons.vue";
+import NewsletterButton from "~/components/ui/NewsletterButton.vue";
+
+const config = useRuntimeConfig();
+const route = useRoute();
+
+const rawArticle = rawArticles.find((article) => article.slug === route.params.slug);
+
+if (!rawArticle) {
+  throw createError({
+    fatal: true,
+    statusCode: 404,
+    message: "The requested article could not be found.",
+  });
+}
+
+const html = await rawArticle.html();
+
+const article = computed(() => ({
+  ...rawArticle,
+  path: `/news/${rawArticle.slug}`,
+  thumbnail: rawArticle.thumbnail
+    ? `/news/article/${rawArticle.slug}/thumbnail.webp`
+    : `/news/default.webp`,
+  title: rawArticle.title,
+  summary: rawArticle.summary,
+  date: rawArticle.date,
+  html,
+}));
+
+const articleTitle = computed(() => article.value.title);
+const articleUrl = computed(() => `https://modrinth.com/news/article/${route.params.slug}`);
+
+const thumbnailPath = computed(() =>
+  article.value.thumbnail
+    ? `${config.public.siteUrl}${article.value.thumbnail}`
+    : `${config.public.siteUrl}/news/default.jpg`,
+);
+
+const dayjsDate = computed(() => dayjs(article.value.date));
+
+useSeoMeta({
+  title: () => `${articleTitle.value} - Modrinth News`,
+  ogTitle: () => articleTitle.value,
+  description: () => article.value.summary,
+  ogDescription: () => article.value.summary,
+  ogType: "article",
+  ogImage: () => thumbnailPath.value,
+  articlePublishedTime: () => dayjsDate.value.toISOString(),
+  twitterCard: "summary_large_image",
+  twitterImage: () => thumbnailPath.value,
+});
+</script>
+
+<template>
+  <div class="page experimental-styles-within py-6">
+    <div
+      class="flex flex-wrap items-center justify-between gap-4 border-0 border-b-[1px] border-solid border-divider px-6 pb-6"
+    >
+      <nuxt-link :to="`/news`">
+        <h1 class="m-0 text-3xl font-extrabold hover:underline">News</h1>
+      </nuxt-link>
+      <div class="flex gap-2">
+        <NewsletterButton />
+        <ButtonStyled circular>
+          <a v-tooltip="`RSS feed`" aria-label="RSS feed" href="/news/feed/rss.xml" target="_blank">
+            <RssIcon />
+          </a>
+        </ButtonStyled>
+        <ButtonStyled circular icon-only>
+          <a v-tooltip="`Changelog`" href="/news/changelog" aria-label="Changelog">
+            <GitGraphIcon />
+          </a>
+        </ButtonStyled>
+      </div>
+    </div>
+    <article class="mt-6 flex flex-col gap-4 px-6">
+      <h2 class="m-0 text-2xl font-extrabold leading-tight sm:text-4xl">{{ article.title }}</h2>
+      <p class="m-0 text-base leading-tight sm:text-lg">{{ article.summary }}</p>
+      <div class="mt-auto text-sm text-secondary sm:text-base">
+        Posted on {{ dayjsDate.format("MMMM D, YYYY") }}
+      </div>
+      <ShareArticleButtons :title="article.title" :url="articleUrl" />
+      <img
+        :src="article.thumbnail"
+        class="aspect-video w-full rounded-xl border-[1px] border-solid border-button-border object-cover sm:rounded-2xl"
+        :alt="article.title"
+      />
+      <div class="markdown-body" v-html="article.html" />
+      <h3
+        class="mb-0 mt-4 border-0 border-t-[1px] border-solid border-divider pt-4 text-base font-extrabold sm:text-lg"
+      >
+        Share this article
+      </h3>
+      <ShareArticleButtons :title="article.title" :url="articleUrl" />
+    </article>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  > *:not(.full-width-bg),
+  > .full-width-bg > * {
+    max-width: 56rem;
+    margin-inline: auto;
+  }
+}
+
+.brand-gradient-bg {
+  background: var(--brand-gradient-bg);
+  border-color: var(--brand-gradient-border);
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  article {
+    gap: 1rem;
+  }
+}
+
+:deep(.markdown-body) {
+  h1,
+  h2 {
+    border-bottom: none;
+    padding: 0;
+  }
+
+  ul > li:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+
+  ul,
+  ol {
+    p {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  ul,
+  ol {
+    strong {
+      color: var(--color-contrast);
+      font-weight: 600;
+    }
+  }
+
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 0.25rem;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    @media (min-width: 640px) {
+      font-size: 2rem;
+    }
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    @media (min-width: 640px) {
+      font-size: 1.5rem;
+    }
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    @media (min-width: 640px) {
+      font-size: 1.25rem;
+    }
+  }
+
+  p {
+    margin-bottom: 1.25rem;
+    font-size: 0.875rem;
+    @media (min-width: 640px) {
+      font-size: 1rem;
+    }
+  }
+
+  a {
+    color: var(--color-brand);
+    font-weight: 600;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  h1,
+  h2 {
+    a {
+      font-weight: 800;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    a {
+      color: var(--color-contrast);
+    }
+  }
+
+  img {
+    border: 1px solid var(--color-button-border);
+    border-radius: var(--radius-md);
+    @media (min-width: 640px) {
+      border-radius: var(--radius-lg);
+    }
+  }
+
+  > img,
+  > :has(img:first-child:last-child) {
+    display: flex;
+    justify-content: center;
+  }
+
+  @media (max-width: 640px) {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-bottom: 0.5rem;
+    }
+
+    p {
+      margin-bottom: 1rem;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.25rem;
+    }
+
+    pre {
+      overflow-x: auto;
+      font-size: 0.75rem;
+    }
+
+    table {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

apps/frontend/src/pages/news/changelog.vue

@@ -6,6 +6,21 @@
   </div>
 </template>
 
+<script lang="ts" setup>
+const config = useRuntimeConfig();
+
+useSeoMeta({
+  title: "Modrinth Changelog",
+  ogTitle: "Modrinth Changelog",
+  description: "Keep up-to-date on what's new with Modrinth.",
+  ogDescription: "Keep up-to-date on what's new with Modrinth.",
+  ogType: "website",
+  ogImage: () => `${config.public.siteUrl}/news/changelog.webp`,
+  twitterCard: "summary_large_image",
+  twitterImage: () => `${config.public.siteUrl}/news/changelog.webp`,
+});
+</script>
+
 <style lang="scss" scoped>
 .page {
   padding: 1rem;

apps/frontend/src/pages/news/index.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
+import { ChevronRightIcon, RssIcon, GitGraphIcon } from "@modrinth/assets";
+import dayjs from "dayjs";
+import { articles as rawArticles } from "@modrinth/blog";
+import { computed, ref } from "vue";
+import NewsletterButton from "~/components/ui/NewsletterButton.vue";
+
+const articles = ref(
+  rawArticles
+    .map((article) => ({
+      ...article,
+      path: `/news/article/${article.slug}/`,
+      thumbnail: article.thumbnail
+        ? `/news/article/${article.slug}/thumbnail.webp`
+        : `/news/default.webp`,
+      title: article.title,
+      summary: article.summary,
+      date: article.date,
+    }))
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
+);
+
+const featuredArticle = computed(() => articles.value?.[0]);
+const config = useRuntimeConfig();
+
+useSeoMeta({
+  title: "Modrinth News",
+  ogTitle: "Modrinth News",
+  description: "Keep up-to-date on the latest news from Modrinth.",
+  ogDescription: "Keep up-to-date on the latest news from Modrinth.",
+  ogType: "website",
+  ogImage: () => `${config.public.siteUrl}/news/thumbnail.webp`,
+  twitterCard: "summary_large_image",
+  twitterImage: () => `${config.public.siteUrl}/news/thumbnail.webp`,
+});
+</script>
+
+<template>
+  <div class="page experimental-styles-within py-6">
+    <div class="flex flex-wrap items-center justify-between gap-4 px-6">
+      <div>
+        <h1 class="m-0 text-3xl font-extrabold">News</h1>
+      </div>
+      <div class="flex gap-2">
+        <NewsletterButton />
+        <ButtonStyled circular>
+          <a v-tooltip="`RSS feed`" aria-label="RSS feed" href="/news/feed/rss.xml" target="_blank">
+            <RssIcon />
+          </a>
+        </ButtonStyled>
+        <ButtonStyled circular icon-only>
+          <a v-tooltip="`Changelog`" href="/news/changelog" aria-label="Changelog">
+            <GitGraphIcon />
+          </a>
+        </ButtonStyled>
+      </div>
+    </div>
+
+    <template v-if="articles && articles.length">
+      <div
+        v-if="featuredArticle"
+        class="full-width-bg brand-gradient-bg mt-6 border-0 border-y-[1px] border-solid py-4"
+      >
+        <nuxt-link
+          :to="`${featuredArticle.path}`"
+          class="active:scale-[0.99]! group flex cursor-pointer transition-all ease-in-out hover:brightness-125"
+        >
+          <article class="featured-article px-6">
+            <div class="featured-image-container">
+              <img
+                :src="featuredArticle.thumbnail"
+                class="aspect-video w-full rounded-2xl border-[1px] border-solid border-button-border object-cover"
+              />
+            </div>
+            <div class="featured-content">
+              <p class="m-0 font-bold">Featured article</p>
+              <h3 class="m-0 text-3xl leading-tight group-hover:underline">
+                {{ featuredArticle?.title }}
+              </h3>
+              <p class="m-0 text-lg leading-tight">{{ featuredArticle?.summary }}</p>
+              <div class="mt-auto text-secondary">
+                {{ dayjs(featuredArticle?.date).format("MMMM D, YYYY") }}
+              </div>
+            </div>
+          </article>
+        </nuxt-link>
+      </div>
+
+      <div class="mt-6 px-6">
+        <div class="group flex w-fit items-center gap-1">
+          <h2 class="m-0 text-xl font-extrabold">More articles</h2>
+          <ChevronRightIcon
+            v-if="false"
+            class="ml-0 h-6 w-6 transition-all group-hover:ml-1 group-hover:text-brand"
+          />
+        </div>
+
+        <div class="mt-4 grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
+          <NewsArticleCard
+            v-for="article in articles.slice(1)"
+            :key="article.path"
+            :article="article"
+          />
+        </div>
+      </div>
+    </template>
+
+    <div v-else class="pt-4">Error: Articles could not be loaded.</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  > *:not(.full-width-bg),
+  > .full-width-bg > * {
+    max-width: 56rem;
+    margin-inline: auto;
+  }
+}
+
+.brand-gradient-bg {
+  background: var(--brand-gradient-bg);
+  border-color: var(--brand-gradient-border);
+}
+
+.featured-article {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+}
+
+.featured-image-container {
+  flex: 1;
+  min-width: 0;
+}
+
+.featured-content {
+  flex: 1;
+  min-width: 16rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .featured-article {
+    flex-direction: column;
+  }
+
+  .featured-image-container {
+    order: 1;
+  }
+
+  .featured-content {
+    order: 2;
+    min-width: 0;
+  }
+}
+</style>

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

@@ -98,7 +98,10 @@
               {{ formatCompactNumber(projects?.length || 0) }}
               projects
             </div>
-            <div class="flex items-center gap-2 font-semibold">
+            <div
+              v-tooltip="sumDownloads.toLocaleString()"
+              class="flex items-center gap-2 font-semibold"
+            >
               <DownloadIcon class="h-6 w-6 text-secondary" />
               {{ formatCompactNumber(sumDownloads) }}
               downloads
@@ -146,9 +149,7 @@
         </ContentPageHeader>
       </div>
       <div class="normal-page__sidebar">
-        <!-- <AdPlaceholder
-          v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus"
-        /> -->
+        <!-- <AdPlaceholder v-if="!auth.user" /> -->
 
         <div class="card flex-card">
           <h2>Members</h2>
@@ -284,14 +285,13 @@ import NavTabs from "~/components/ui/NavTabs.vue";
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 
-const formatCompactNumber = useCompactNumber();
+const formatCompactNumber = useCompactNumber(true);
 
 const auth = await useAuth();
 const user = await useUser();
 const cosmetics = useCosmetics();
 const route = useNativeRoute();
 const tags = useTags();
-const flags = useFeatureFlags();
 const config = useRuntimeConfig();
 
 let orgId = useRouteId();

apps/frontend/src/pages/organization/[id]/settings/projects.vue

@@ -201,8 +201,8 @@
                 icon-only
                 @click="updateDescending()"
               >
-                <SortDescendingIcon v-if="descending" />
-                <SortAscendingIcon v-else />
+                <SortDescIcon v-if="descending" />
+                <SortAscIcon v-else />
               </Button>
             </div>
           </div>
@@ -272,7 +272,7 @@
             <div class="table-cell">
               <BoxIcon />
               <span>{{
-                $formatProjectType(
+                formatProjectType(
                   $getProjectTypeForDisplay(project.project_types[0] ?? "project", project.loaders),
                 )
               }}</span>
@@ -308,11 +308,12 @@ import {
   XIcon,
   EditIcon,
   SaveIcon,
-  SortAscendingIcon,
-  SortDescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
 } from "@modrinth/assets";
 import { Button, Modal, Avatar, CopyCode, Badge, Checkbox, commonMessages } from "@modrinth/ui";
 
+import { formatProjectType } from "@modrinth/utils";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
 import OrganizationProjectTransferModal from "~/components/ui/OrganizationProjectTransferModal.vue";
 

apps/frontend/src/pages/plus.vue

@@ -73,7 +73,7 @@
         <SparklesIcon class="h-8 w-8 text-purple" />
         <span class="text-lg font-bold">Remove all ads</span>
         <span class="leading-5 text-secondary">
-          Never see an advertisement again on the Modrinth app or the website.
+          Never see an advertisement again on the Modrinth app.
         </span>
       </div>
       <div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
@@ -82,7 +82,7 @@
         <span class="leading-5 text-secondary">Get an exclusive badge on your user page.</span>
       </div>
     </div>
-    <span class="mt-4 text-secondary">...and much more coming soon!</span>
+    <span class="mt-4 text-secondary">...and much more coming soon™!</span>
   </div>
 </template>
 <script setup>

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -55,12 +55,7 @@
       }"
       aria-label="Filters"
     >
-      <!-- <AdPlaceholder
-        v-if="
-          (!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus) &&
-          !server
-        "
-      /> -->
+      <!-- <AdPlaceholder v-if="!auth.user && !server" /> -->
       <div v-if="filtersMenuOpen" class="fixed inset-0 z-40 bg-bg"></div>
       <div
         class="flex flex-col gap-3"

apps/frontend/src/pages/servers/index.vue

@@ -500,6 +500,7 @@
 
     <section
       id="plan"
+      pyro-hash="plan"
       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>
@@ -603,7 +604,9 @@
                 <RightArrowIcon class="shrink-0" />
               </button>
             </ButtonStyled>
-            <p class="m-0 text-sm">Starting at $3/GB RAM</p>
+            <p v-if="lowestPrice" class="m-0 text-sm">
+              Starting at {{ formatPrice(locale, lowestPrice, selectedCurrency, true) }} / month
+            </p>
           </div>
         </div>
       </div>
@@ -622,20 +625,34 @@ import {
   VersionIcon,
   ServerIcon,
 } from "@modrinth/assets";
+import { computed } from "vue";
+import { monthsInInterval } from "@modrinth/ui/src/utils/billing.ts";
+import { formatPrice } from "@modrinth/utils";
+import { useVIntl } from "@vintl/vintl";
 import { products } from "~/generated/state.json";
 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";
 
+const { locale } = useVIntl();
+
 const billingPeriods = ref(["monthly", "quarterly"]);
 const billingPeriod = ref(billingPeriods.value.includes("quarterly") ? "quarterly" : "monthly");
 
-const pyroProducts = products.filter((p) => p.metadata.type === "pyro");
+const pyroProducts = products
+  .filter((p) => p.metadata.type === "pyro")
+  .sort((a, b) => a.metadata.ram - b.metadata.ram);
 const pyroPlanProducts = pyroProducts.filter(
   (p) => p.metadata.ram === 4096 || p.metadata.ram === 6144 || p.metadata.ram === 8192,
 );
-pyroPlanProducts.sort((a, b) => a.metadata.ram - b.metadata.ram);
+
+const lowestPrice = computed(() => {
+  const amount = pyroProducts[0]?.prices?.find(
+    (price) => price.currency_code === selectedCurrency.value,
+  )?.prices?.intervals?.[billingPeriod.value];
+  return amount ? amount / monthsInInterval[billingPeriod.value] : undefined;
+});
 
 const title = "Modrinth Servers";
 const description =
@@ -799,6 +816,8 @@ async function fetchPaymentData() {
   }
 }
 
+const selectedProjectId = ref();
+
 const route = useRoute();
 const isAtCapacity = computed(
   () => isSmallAtCapacity.value && isMediumAtCapacity.value && isLargeAtCapacity.value,
@@ -817,7 +836,12 @@ const scrollToFaq = () => {
   }
 };
 
-onMounted(scrollToFaq);
+onMounted(() => {
+  scrollToFaq();
+  if (route.query?.project) {
+    selectedProjectId.value = route.query?.project;
+  }
+});
 
 watch(() => route.hash, scrollToFaq);
 
@@ -876,9 +900,9 @@ const selectProduct = async (product) => {
   await nextTick();
 
   if (product === "custom") {
-    purchaseModal.value?.show(billingPeriod.value);
+    purchaseModal.value?.show(billingPeriod.value, undefined, selectedProjectId.value);
   } else {
-    purchaseModal.value?.show(billingPeriod.value, selectedProduct.value);
+    purchaseModal.value?.show(billingPeriod.value, selectedProduct.value, selectedProjectId.value);
   }
 };
 

apps/frontend/src/pages/servers/manage/[id]/content/index.vue

@@ -136,7 +136,7 @@
                       class="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2"
                       draggable="false"
                     >
-                      <UiAvatar
+                      <Avatar
                         :src="mod.icon_url"
                         size="sm"
                         alt="Server Icon"
@@ -349,7 +349,7 @@ import {
   FileIcon,
   IssuesIcon,
 } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { Avatar, ButtonStyled } from "@modrinth/ui";
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import type { Mod } from "@modrinth/utils";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";

apps/frontend/src/pages/servers/manage/[id]/options/info.vue

@@ -104,7 +104,7 @@
             <tr v-for="property in properties" :key="property.name">
               <td v-if="property.value !== 'Unknown'" class="py-3">{{ property.name }}</td>
               <td v-if="property.value !== 'Unknown'" class="px-4">
-                <UiCopyCode :text="property.value" />
+                <CopyCode :text="property.value" />
               </td>
             </tr>
           </tbody>
@@ -115,13 +115,10 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled, CopyCode } from "@modrinth/ui";
 import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from "@modrinth/assets";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
-const route = useNativeRoute();
-const serverId = route.params.id as string;
-
 const props = defineProps<{
   server: ModrinthServer;
 }>();
@@ -147,8 +144,8 @@ const copyToClipboard = (name: string, textToCopy?: string) => {
 };
 
 const properties = [
-  { name: "Server ID", value: serverId ?? "Unknown" },
-  { name: "Node", value: data.value?.datacenter ?? "Unknown" },
+  { name: "Server ID", value: props.server.serverId ?? "Unknown" },
+  { name: "Node", value: data.value?.node?.instance ?? "Unknown" },
   { name: "Kind", value: data.value?.upstream?.kind ?? data.value?.loader ?? "Unknown" },
   { name: "Project ID", value: data.value?.upstream?.project_id ?? "Unknown" },
   { name: "Version ID", value: data.value?.upstream?.version_id ?? "Unknown" },

apps/frontend/src/pages/servers/manage/[id]/options/network.vue

@@ -194,7 +194,7 @@
                   Primary allocation
                 </span>
 
-                <UiCopyCode :text="`${serverIP}:${serverPrimaryPort}`" />
+                <CopyCode :text="`${serverIP}:${serverPrimaryPort}`" />
               </div>
             </div>
 
@@ -228,7 +228,7 @@
                 </div>
 
                 <div class="flex w-full flex-row items-center gap-2 sm:w-auto">
-                  <UiCopyCode :text="`${serverIP}:${allocation.port}`" />
+                  <CopyCode :text="`${serverIP}:${allocation.port}`" />
                   <ButtonStyled icon-only>
                     <button
                       class="!w-full sm:!w-auto"
@@ -273,7 +273,7 @@ import {
   UploadIcon,
   IssuesIcon,
 } from "@modrinth/assets";
-import { ButtonStyled, NewModal, ConfirmModal } from "@modrinth/ui";
+import { ButtonStyled, NewModal, ConfirmModal, CopyCode } from "@modrinth/ui";
 import { ref, computed, nextTick } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 

apps/frontend/src/pages/servers/manage/index.vue

@@ -35,7 +35,7 @@
 
             <li v-if="fetchError" class="text-red">
               <p>Error details:</p>
-              <UiCopyCode
+              <CopyCode
                 :text="(fetchError as ModrinthServersFetchError).message || 'Unknown error'"
                 :copyable="false"
                 :selectable="false"
@@ -120,7 +120,7 @@
 import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import Fuse from "fuse.js";
 import { HammerIcon, PlusIcon, SearchIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled, CopyCode } from "@modrinth/ui";
 import type { Server, ModrinthServersFetchError } from "@modrinth/utils";
 import { reloadNuxtApp } from "#app";
 import { useServersFetch } from "~/composables/servers/servers-fetch.ts";

apps/frontend/src/pages/settings.vue

@@ -12,7 +12,7 @@
               link="/settings"
               :label="formatMessage(commonSettingsMessages.appearance)"
             >
-              <PaintBrushIcon />
+              <PaintbrushIcon />
             </NavStackItem>
             <NavStackItem
               v-if="isStaging"
@@ -82,7 +82,7 @@
 import {
   ServerIcon,
   GridIcon,
-  PaintBrushIcon,
+  PaintbrushIcon,
   UserIcon,
   ShieldIcon,
   KeyIcon,

apps/frontend/src/pages/settings/account.vue

@@ -422,7 +422,7 @@ import {
 } from "@modrinth/assets";
 import QrcodeVue from "qrcode.vue";
 import { ConfirmModal } from "@modrinth/ui";
-import GitHubIcon from "assets/icons/auth/sso-github.svg";
+import GithubIcon from "assets/icons/auth/sso-github.svg";
 import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
 import GoogleIcon from "assets/icons/auth/sso-google.svg";
 import SteamIcon from "assets/icons/auth/sso-steam.svg";
@@ -583,7 +583,7 @@ const authProviders = [
   {
     id: "github",
     display: "GitHub",
-    icon: GitHubIcon,
+    icon: GithubIcon,
   },
   {
     id: "gitlab",

apps/frontend/src/pages/settings/index.vue

@@ -200,9 +200,9 @@
 <script setup lang="ts">
 import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from "@modrinth/assets";
 import { Button, ThemeSelector } from "@modrinth/ui";
+import { formatProjectType } from "@modrinth/utils";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
 import type { DisplayLocation } from "~/plugins/cosmetics";
-import { formatProjectType } from "~/plugins/shorthands.js";
 import { isDarkTheme, type Theme } from "~/plugins/theme/index.ts";
 
 useHead({

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

@@ -80,6 +80,7 @@
               projects
             </div>
             <div
+              v-tooltip="sumDownloads.toLocaleString()"
               class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
             >
               <DownloadIcon class="h-6 w-6 text-secondary" />
@@ -329,9 +330,7 @@
             </div>
           </div>
         </div>
-        <!-- <AdPlaceholder
-          v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus"
-        /> -->
+        <!-- <AdPlaceholder v-if="!auth.user" /> -->
       </div>
     </div>
   </div>
@@ -386,13 +385,12 @@ const route = useNativeRoute();
 const auth = await useAuth();
 const cosmetics = useCosmetics();
 const tags = useTags();
-const flags = useFeatureFlags();
 const config = useRuntimeConfig();
 
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 
-const formatCompactNumber = useCompactNumber();
+const formatCompactNumber = useCompactNumber(true);
 
 const formatRelativeTime = useRelativeTime();
 

apps/frontend/src/plugins/floating-vue.js

@@ -10,6 +10,10 @@ export default defineNuxtPlugin((nuxtApp) => {
         instantMove: true,
         distance: 8,
       },
+      "dismissable-prompt": {
+        $extend: "dropdown",
+        placement: "bottom-start",
+      },
     },
   });
 });

apps/frontend/src/plugins/shorthands.js

@@ -13,11 +13,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 
     return cosmeticsStore.externalLinksNewTab ? "_blank" : "";
   });
-  nuxtApp.provide("formatBytes", formatBytes);
-  nuxtApp.provide("formatWallet", formatWallet);
-  nuxtApp.provide("formatProjectType", formatProjectType);
-  nuxtApp.provide("formatCategory", formatCategory);
-  nuxtApp.provide("formatCategoryHeader", formatCategoryHeader);
 
   /*
     Only use on the complete list of versions for a project, partial lists will generate
@@ -156,89 +151,10 @@ export const formatMoney = (number, abbreviate = false) => {
   }
 };
 
-export const formatBytes = (bytes, decimals = 2) => {
-  if (bytes === 0) {
-    return "0 Bytes";
-  }
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KiB", "MiB", "GiB"];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-};
-
 export const capitalizeString = (name) => {
   return name ? name.charAt(0).toUpperCase() + name.slice(1) : name;
 };
 
-export const formatWallet = (name) => {
-  if (name === "paypal") {
-    return "PayPal";
-  }
-  return capitalizeString(name);
-};
-
-export const formatProjectType = (name) => {
-  if (name === "resourcepack") {
-    return "Resource Pack";
-  } else if (name === "datapack") {
-    return "Data Pack";
-  }
-
-  return capitalizeString(name);
-};
-
-export const formatCategory = (name) => {
-  if (name === "modloader") {
-    return "Risugami's ModLoader";
-  } else if (name === "bungeecord") {
-    return "BungeeCord";
-  } else if (name === "liteloader") {
-    return "LiteLoader";
-  } else if (name === "neoforge") {
-    return "NeoForge";
-  } else if (name === "game-mechanics") {
-    return "Game Mechanics";
-  } else if (name === "worldgen") {
-    return "World Generation";
-  } else if (name === "core-shaders") {
-    return "Core Shaders";
-  } else if (name === "gui") {
-    return "GUI";
-  } else if (name === "8x-") {
-    return "8x or lower";
-  } else if (name === "512x+") {
-    return "512x or higher";
-  } else if (name === "kitchen-sink") {
-    return "Kitchen Sink";
-  } else if (name === "path-tracing") {
-    return "Path Tracing";
-  } else if (name === "pbr") {
-    return "PBR";
-  } else if (name === "datapack") {
-    return "Data Pack";
-  } else if (name === "colored-lighting") {
-    return "Colored Lighting";
-  } else if (name === "optifine") {
-    return "OptiFine";
-  } else if (name === "mrpack") {
-    return "Modpack";
-  } else if (name === "minecraft") {
-    return "Resource Pack";
-  } else if (name === "vanilla") {
-    return "Vanilla Shader";
-  }
-
-  return capitalizeString(name);
-};
-
-export const formatCategoryHeader = (name) => {
-  return capitalizeString(name);
-};
-
 export const formatVersions = (tag, versionArray) => {
   const allVersions = tag.value.gameVersions.slice().reverse();
   const allReleases = allVersions.filter((x) => x.version_type === "release");