Merge commit '8faea1663ae0c6d1190a5043054197b6a58019f3' into feature-clean

2025-07-05 23:11:27 +03:00
parent 84bbb0d68f 8faea1663a
commit 7e58d7dd35
512 changed files with 16548 additions and 3058 deletions
--- a/apps/frontend/src/components/ui/AdPlaceholder.vue
+++ b/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>
--- a/apps/frontend/src/components/ui/ModerationChecklist.vue
+++ b/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";
--- a/apps/frontend/src/components/ui/NewsletterButton.vue
+++ b/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>
--- a/apps/frontend/src/components/ui/Notifications.vue
+++ b/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;
--- a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
+++ b/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);

--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/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({
--- a/apps/frontend/src/components/ui/ShareArticleButtons.vue
+++ b/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>
--- a/apps/frontend/src/components/ui/news/LatestNewsRow.vue
+++ b/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>
--- a/apps/frontend/src/components/ui/report/ReportInfo.vue
+++ b/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();

--- a/apps/frontend/src/components/ui/search/Categories.vue
+++ b/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>

--- a/apps/frontend/src/components/ui/servers/BackupItem.vue
+++ b/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) ||
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/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";
--- a/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
+++ b/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 () => {
--- a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
+++ b/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>
--- a/apps/frontend/src/components/ui/servers/ServerListing.vue
+++ b/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>>();

--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/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,