Merge commit '74cf3f076eff43755bb4bef62f1c1bb3fc0e6c2a' into feature-clean

apps/frontend/src/assets/styles/components.scss

@@ -930,7 +930,7 @@ button {
     color: var(--color-text);
     padding: 0.5rem 0 0.5rem 1rem;
     font-weight: var(--font-weight-medium);
-    min-height: 40px;
+    min-height: 36px;
     box-sizing: border-box;
     width: fit-content;
     align-items: center;

apps/frontend/src/assets/styles/global.scss

@@ -162,6 +162,18 @@ html {
   --landing-green-label-bg: rgba(0, 216, 69, 0.15);
 
   --landing-raw-bg: #fff;
+
+  --banner-error-bg: #fee2e2;
+  --banner-error-text: #991b1b;
+  --banner-error-border: #ef4444;
+
+  --banner-warning-bg: #ffedd5;
+  --banner-warning-text: #713f12;
+  --banner-warning-border: #f97316;
+
+  --banner-info-bg: #dbeafe;
+  --banner-info-text: #1e3a8a;
+  --banner-info-border: #3b82f6;
 }
 
 .dark,
@@ -286,6 +298,18 @@ html {
 
   --hover-filter: brightness(120%);
   --active-filter: brightness(140%);
+
+  --banner-error-bg: #4c1515;
+  --banner-error-text: #fee2e2;
+  --banner-error-border: #7f1d1d;
+
+  --banner-warning-bg: #4a2a0a;
+  --banner-warning-text: #ffe6c0;
+  --banner-warning-border: #b54708;
+
+  --banner-info-bg: #1e2a44;
+  --banner-info-text: #dbeafe;
+  --banner-info-border: #2563eb;
 }
 
 .oled-mode {
@@ -451,7 +475,7 @@ textarea {
     var(--shadow-inset-sm),
     0 0 0 0 transparent;
   transition: box-shadow 0.1s ease-in-out;
-  min-height: 40px;
+  min-height: 36px;
 
   &:focus,
   &:focus-visible {

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

@@ -1,126 +0,0 @@
-<template>
-  <Modal ref="modal" :header="title">
-    <div class="modal-delete">
-      <div class="markdown-body" v-html="renderString(description)" />
-      <label v-if="hasToType" for="confirmation" class="confirmation-label">
-        <span>
-          <strong>To verify, type</strong>
-          <em class="confirmation-text">{{ confirmationText }}</em>
-          <strong>below:</strong>
-        </span>
-      </label>
-      <div class="confirmation-input">
-        <input
-          v-if="hasToType"
-          id="confirmation"
-          v-model="confirmation_typed"
-          type="text"
-          placeholder="Type here..."
-          @input="type"
-        />
-      </div>
-      <div class="button-group">
-        <button class="iconified-button" @click="cancel">
-          <XIcon />
-          Cancel
-        </button>
-        <button class="iconified-button danger-button" :disabled="action_disabled" @click="proceed">
-          <TrashIcon />
-          {{ proceedLabel }}
-        </button>
-      </div>
-    </div>
-  </Modal>
-</template>
-
-<script>
-import { renderString } from "@modrinth/utils";
-import { TrashIcon, XIcon } from "@modrinth/assets";
-import Modal from "~/components/ui/Modal.vue";
-
-export default {
-  components: {
-    XIcon,
-    TrashIcon,
-    Modal,
-  },
-  props: {
-    confirmationText: {
-      type: String,
-      default: "",
-    },
-    hasToType: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "No title defined",
-      required: true,
-    },
-    description: {
-      type: String,
-      default: "No description defined",
-      required: true,
-    },
-    proceedLabel: {
-      type: String,
-      default: "Proceed",
-    },
-  },
-  emits: ["proceed"],
-  data() {
-    return {
-      action_disabled: this.hasToType,
-      confirmation_typed: "",
-    };
-  },
-  methods: {
-    renderString,
-    cancel() {
-      this.$refs.modal.hide();
-    },
-    proceed() {
-      this.$refs.modal.hide();
-      this.$emit("proceed");
-    },
-    type() {
-      if (this.hasToType) {
-        this.action_disabled =
-          this.confirmation_typed.toLowerCase() !== this.confirmationText.toLowerCase();
-      }
-    },
-    show() {
-      this.$refs.modal.show();
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.modal-delete {
-  padding: var(--spacing-card-bg);
-  display: flex;
-  flex-direction: column;
-
-  .markdown-body {
-    margin-bottom: 1rem;
-  }
-
-  .confirmation-label {
-    margin-bottom: 0.5rem;
-  }
-
-  .confirmation-text {
-    padding-right: 0.25ch;
-    margin: 0 0.25rem;
-  }
-
-  .confirmation-input {
-    input {
-      width: 20rem;
-      max-width: 100%;
-    }
-  }
-}
-</style>

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

@@ -256,7 +256,9 @@
         </p>
         <div class="options input-group">
           <button
-            v-for="(option, index) in steps[currentStepIndex].options"
+            v-for="(option, index) in steps[currentStepIndex].options.filter(
+              (x) => x.shown !== false,
+            )"
             :key="index"
             class="btn"
             :class="{
@@ -426,6 +428,18 @@ const steps = computed(() =>
           resultingMessage: `## Misuse of Title
 Per section 5.2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) we ask that you limit the title to just the name of your project. Additional information, such as themes, tags, supported versions or loaders, etc. should be saved for the Summary or Description. When changing your project title, remember to also ensure that your project slug (URL) matches and accurately represents your project.`,
         },
+        {
+          name: "Minecraft title",
+          resultingMessage: `## Project Title
+Projects must not use Minecraft's branding or include "Minecraft" as a significant part of the title.
+The title of your project may be confusingly similar to the game, and we encourage you to change your title to avoid a potential violation of Minecraft's Usage Guidelines.
+Abbreviations like "MC" or elaborate titles that do not make the name Minecraft a significant portion of the name are okay.`,
+        },
+        {
+          name: "Title similarities",
+          resultingMessage: `## Project Branding
+Per section 1.8 of [Modrinth's Content Rules](https://modrinth.com/legal/rules) we ask that you change your project title and other relevant branding to avoid causing confusion or implying association with existing projects.`,
+        },
       ],
     },
     {
@@ -472,6 +486,12 @@ Per section 5.3 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#m
 
 This is the first thing most people will see about your mod other than the Logo, so it's important it be accurate, reasonably detailed, and exciting.`,
         },
+        {
+          name: "Non-english",
+          resultingMessage: `## No English Summary
+Per section 2.2 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#accessibility) a project's Summary and Description must be in English, unless meant exclusively for non-English use, such as translations.
+You may include your non-English Summary but we ask that you also add an English translation.`,
+        },
       ],
     },
     {
@@ -628,11 +648,21 @@ For a brief rundown of how this works:
     {
       id: "gallery",
       navigate: `/${props.project.project_type}/${props.project.slug}/gallery`,
-      question: `Are the project's gallery images relevant?`,
-      shown: props.project.gallery.length > 0,
+      question: `Are this project's gallery images sufficient?`,
+      shown: true,
       options: [
+        {
+          name: "Insufficient",
+          resultingMessage: `## Insufficient Gallery Images
+        We ask that projects like yours show off their content using images in the Gallery, or optionally in the Description, in order to effectively and clearly inform users of its content per section 2.1 of [Modrinth's content rules](https://modrinth.com/legal/rules#general-expectations).
+        Keep in mind that you should:
+        - Set a featured image that best represents your project.
+        - Ensure all your images have titles that accurately label the image, and optionally, details on the contents of the image in the images Description.
+        - Upload any relevant images in your Description to your Gallery tab for best results.`,
+        },
         {
           name: "Not relevant",
+          shown: props.project.gallery.length > 0,
           resultingMessage: `## Unrelated Gallery Images
 Per section 5.5 of [Modrinth's Content Rules](https://modrinth.com/legal/rules#miscellaneous) any images in your project's Gallery must be relevant to the project and also include a Title.`,
         },

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

@@ -184,7 +184,7 @@
               "
               class="date"
             >
-              {{ fromNow(notif.extra_data.version.date_published) }}
+              {{ formatRelativeTime(notif.extra_data.version.date_published) }}
             </span>
           </span>
         </div>
@@ -201,7 +201,7 @@
         v-tooltip="$dayjs(notification.created).format('MMMM D, YYYY [at] h:mm A')"
         class="inline-flex"
       >
-        <CalendarIcon class="mr-1" /> Received {{ fromNow(notification.created) }}
+        <CalendarIcon class="mr-1" /> Received {{ formatRelativeTime(notification.created) }}
       </span>
     </span>
     <div v-if="compact" class="notification__actions">
@@ -331,11 +331,12 @@ import {
   XIcon,
   ExternalIcon,
 } from "@modrinth/assets";
+import { useRelativeTime } from "@modrinth/ui";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
 import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
 import { getUserLink } from "~/helpers/users.js";
 import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
-import { markAsRead } from "~/helpers/notifications.js";
+import { markAsRead } from "~/helpers/notifications.ts";
 import DoubleIcon from "~/components/ui/DoubleIcon.vue";
 import Avatar from "~/components/ui/Avatar.vue";
 import Badge from "~/components/ui/Badge.vue";
@@ -345,6 +346,8 @@ import Categories from "~/components/ui/search/Categories.vue";
 const app = useNuxtApp();
 const emit = defineEmits(["update:notifications"]);
 
+const formatRelativeTime = useRelativeTime();
+
 const props = defineProps({
   notification: {
     type: Object,

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

@@ -1,85 +1,140 @@
 <template>
-  <div class="vue-notification-group">
+  <div class="vue-notification-group experimental-styles-within">
     <transition-group name="notifs">
       <div
         v-for="(item, index) in notifications"
         :key="item.id"
         class="vue-notification-wrapper"
-        @click="notifications.splice(index, 1)"
         @mouseenter="stopTimer(item)"
         @mouseleave="setNotificationTimer(item)"
       >
-        <div class="vue-notification-template vue-notification" :class="{ [item.type]: true }">
-          <div class="notification-title" v-html="item.title"></div>
-          <div class="notification-content" v-html="item.text"></div>
+        <div class="flex w-full gap-2 overflow-hidden rounded-lg bg-bg-raised shadow-xl">
+          <div
+            class="w-2"
+            :class="{
+              'bg-red': item.type === 'error',
+              'bg-orange': item.type === 'warning',
+              'bg-green': item.type === 'success',
+              'bg-blue': !item.type || !['error', 'warning', 'success'].includes(item.type),
+            }"
+          ></div>
+          <div
+            class="grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1 py-2 pl-1 pr-3"
+          >
+            <div
+              class="flex items-center"
+              :class="{
+                'text-red': item.type === 'error',
+                'text-orange': item.type === 'warning',
+                'text-green': item.type === 'success',
+                'text-blue': !item.type || !['error', 'warning', 'success'].includes(item.type),
+              }"
+            >
+              <IssuesIcon v-if="item.type === 'warning'" class="h-6 w-6" />
+              <CheckCircleIcon v-else-if="item.type === 'success'" class="h-6 w-6" />
+              <XCircleIcon v-else-if="item.type === 'error'" class="h-6 w-6" />
+              <InfoIcon v-else class="h-6 w-6" />
+            </div>
+            <div class="m-0 text-wrap font-bold text-contrast" v-html="item.title"></div>
+            <div class="flex items-center gap-1">
+              <div v-if="item.count && item.count > 1" class="text-xs font-bold text-contrast">
+                x{{ item.count }}
+              </div>
+              <ButtonStyled circular size="small">
+                <button v-tooltip="'Copy to clipboard'" @click="copyToClipboard(item)">
+                  <CheckIcon v-if="copied[createNotifText(item)]" />
+                  <CopyIcon v-else />
+                </button>
+              </ButtonStyled>
+              <ButtonStyled circular size="small">
+                <button v-tooltip="`Dismiss`" @click="notifications.splice(index, 1)">
+                  <XIcon />
+                </button>
+              </ButtonStyled>
+            </div>
+            <div></div>
+            <div class="col-span-2 text-sm text-primary" v-html="item.text"></div>
+            <template v-if="item.errorCode">
+              <div></div>
+              <div
+                class="m-0 text-wrap text-xs font-medium text-secondary"
+                v-html="item.errorCode"
+              ></div>
+            </template>
+          </div>
         </div>
       </div>
     </transition-group>
   </div>
 </template>
 <script setup>
+import { ButtonStyled } from "@modrinth/ui";
+import {
+  XCircleIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  InfoIcon,
+  IssuesIcon,
+  XIcon,
+  CopyIcon,
+} from "@modrinth/assets";
 const notifications = useNotifications();
 
 function stopTimer(notif) {
   clearTimeout(notif.timer);
 }
+
+const copied = ref({});
+
+const createNotifText = (notif) => {
+  let text = "";
+  if (notif.title) {
+    text += notif.title;
+  }
+  if (notif.text) {
+    if (text.length > 0) {
+      text += "\n";
+    }
+    text += notif.text;
+  }
+  if (notif.errorCode) {
+    if (text.length > 0) {
+      text += "\n";
+    }
+    text += notif.errorCode;
+  }
+  return text;
+};
+
+function copyToClipboard(notif) {
+  const text = createNotifText(notif);
+
+  copied.value[text] = true;
+  navigator.clipboard.writeText(text);
+  setTimeout(() => {
+    delete copied.value[text];
+  }, 2000);
+}
 </script>
 <style lang="scss" scoped>
-.vue-notification {
-  background: var(--color-blue) !important;
-  border-left: 5px solid var(--color-blue) !important;
-  color: var(--color-brand-inverted) !important;
-
-  box-sizing: border-box;
-  text-align: left;
-  font-size: 12px;
-  padding: 10px;
-  margin: 0 5px 5px;
-
-  &.success {
-    background: var(--color-green) !important;
-    border-left-color: var(--color-green) !important;
-  }
-
-  &.warn {
-    background: var(--color-orange) !important;
-    border-left-color: var(--color-orange) !important;
-  }
-
-  &.error {
-    background: var(--color-red) !important;
-    border-left-color: var(--color-red) !important;
-  }
-}
-
 .vue-notification-group {
   position: fixed;
-  right: 25px;
-  bottom: 25px;
-  z-index: 99999999;
-  width: 300px;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  z-index: 200;
+  width: 450px;
+
+  @media screen and (max-width: 500px) {
+    width: calc(100% - 0.75rem * 2);
+    right: 0.75rem;
+    bottom: 0.75rem;
+  }
 
   .vue-notification-wrapper {
     width: 100%;
     overflow: hidden;
     margin-bottom: 10px;
 
-    .vue-notification-template {
-      border-radius: var(--size-rounded-card);
-      margin: 0;
-
-      .notification-title {
-        font-size: var(--font-size-lg);
-        margin-right: auto;
-        font-weight: 600;
-      }
-
-      .notification-content {
-        margin-right: auto;
-        font-size: var(--font-size-md);
-      }
-    }
-
     &:last-child {
       margin: 0;
     }
@@ -98,10 +153,18 @@ function stopTimer(notif) {
 .notifs-enter-active,
 .notifs-leave-active,
 .notifs-move {
-  transition: all 0.5s;
+  transition: all 0.25s ease-in-out;
 }
 .notifs-enter-from,
 .notifs-leave-to {
   opacity: 0;
 }
+
+.notifs-enter-from {
+  transform: translateY(100%) scale(0.8);
+}
+
+.notifs-leave-to {
+  transform: translateX(100%) scale(0.8);
+}
 </style>

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

@@ -75,7 +75,7 @@
         class="stat date"
       >
         <UpdatedIcon aria-hidden="true" />
-        <span class="date-label">Updated </span>{{ fromNow(updatedAt) }}
+        <span class="date-label">Updated </span>{{ formatRelativeTime(updatedAt) }}
       </div>
       <div
         v-else-if="showCreatedDate"
@@ -83,7 +83,7 @@
         class="stat date"
       >
         <CalendarIcon aria-hidden="true" />
-        <span class="date-label">Published </span>{{ fromNow(createdAt) }}
+        <span class="date-label">Published </span>{{ formatRelativeTime(createdAt) }}
       </div>
     </div>
   </article>
@@ -95,6 +95,7 @@ import Categories from "~/components/ui/search/Categories.vue";
 import Badge from "~/components/ui/Badge.vue";
 import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
 import Avatar from "~/components/ui/Avatar.vue";
+import { useRelativeTime } from "@modrinth/ui";
 
 export default {
   components: {
@@ -213,8 +214,9 @@ export default {
   },
   setup() {
     const tags = useTags();
+    const formatRelativeTime = useRelativeTime();
 
-    return { tags };
+    return { tags, formatRelativeTime };
   },
   computed: {
     projectTypeDisplay() {

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -86,8 +86,8 @@
                 <UpdatedIcon />
               </Button>
               <DropdownSelect
-                class="range-dropdown"
                 v-model="selectedRange"
+                class="range-dropdown"
                 :options="ranges"
                 name="Time range"
                 :display-name="
@@ -197,11 +197,11 @@
               >
                 <div class="country-flag-container">
                   <template v-if="name.toLowerCase() === 'xx' || !name">
-                    <img
-                      src="https://cdn.modrinth.com/placeholder-banner.svg"
-                      alt="Placeholder flag"
-                      class="country-flag"
-                    />
+                    <div
+                      class="country-flag flex select-none items-center justify-center bg-bg-raised font-extrabold text-secondary"
+                    >
+                      ?
+                    </div>
                   </template>
                   <template v-else>
                     <img
@@ -213,7 +213,7 @@
                 </div>
                 <div class="country-text">
                   <strong class="country-name"
-                    ><template v-if="name.toLowerCase() === 'xx' || !name">Hidden</template>
+                    ><template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
                     <template v-else>{{ countryCodeToName(name) }}</template>
                   </strong>
                   <span class="data-point">{{ formatNumber(count) }}</span>
@@ -256,11 +256,11 @@
               >
                 <div class="country-flag-container">
                   <template v-if="name.toLowerCase() === 'xx' || !name">
-                    <img
-                      src="https://cdn.modrinth.com/placeholder-banner.svg"
-                      alt="Placeholder flag"
-                      class="country-flag"
-                    />
+                    <div
+                      class="country-flag flex select-none items-center justify-center bg-bg-raised font-extrabold text-secondary"
+                    >
+                      ?
+                    </div>
                   </template>
                   <template v-else>
                     <img
@@ -272,7 +272,7 @@
                 </div>
                 <div class="country-text">
                   <strong class="country-name">
-                    <template v-if="name.toLowerCase() === 'xx' || !name">Hidden</template>
+                    <template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
                     <template v-else>{{ countryCodeToName(name) }}</template>
                   </strong>
                   <span class="data-point">{{ formatNumber(count) }}</span>

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

@@ -95,7 +95,7 @@
       </nuxt-link>
       <span>&nbsp;</span>
       <span v-tooltip="$dayjs(report.created).format('MMMM D, YYYY [at] h:mm A')">{{
-        fromNow(report.created)
+        formatRelativeTime(report.created)
       }}</span>
       <CopyCode v-if="flags.developerMode" :text="report.id" class="report-id" />
     </div>
@@ -105,11 +105,14 @@
 <script setup>
 import { ReportIcon, UnknownIcon, VersionIcon } from "@modrinth/assets";
 import { renderHighlightedString } from "~/helpers/highlight.js";
+import { useRelativeTime } from "@modrinth/ui";
 import Avatar from "~/components/ui/Avatar.vue";
 import Badge from "~/components/ui/Badge.vue";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
 import CopyCode from "~/components/ui/CopyCode.vue";
 
+const formatRelativeTime = useRelativeTime();
+
 defineProps({
   report: {
     type: Object,

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

@@ -53,6 +53,7 @@
       <ButtonStyled circular type="transparent">
         <UiServersTeleportOverflowMenu :options="menuOptions" direction="left" position="bottom">
           <MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
+          <template #extract><PackageOpenIcon /> Extract</template>
           <template #rename><EditIcon /> Rename</template>
           <template #move><RightArrowIcon /> Move</template>
           <template #download><DownloadIcon /> Download</template>
@@ -73,6 +74,8 @@ import {
   FolderOpenIcon,
   FileIcon,
   RightArrowIcon,
+  PackageOpenIcon,
+  FileArchiveIcon,
 } from "@modrinth/assets";
 import { computed, shallowRef, ref } from "vue";
 import { renderToString } from "vue/server-renderer";
@@ -99,15 +102,14 @@ interface FileItemProps {
 const props = defineProps<FileItemProps>();
 
 const emit = defineEmits<{
-  (e: "rename", item: { name: string; type: string; path: string }): void;
-  (e: "move", item: { name: string; type: string; path: string }): void;
+  (
+    e: "rename" | "move" | "download" | "delete" | "edit" | "extract",
+    item: { name: string; type: string; path: string },
+  ): void;
   (
     e: "moveDirectTo",
     item: { name: string; type: string; path: string; destination: string },
   ): void;
-  (e: "download", item: { name: string; type: string; path: string }): void;
-  (e: "delete", item: { name: string; type: string; path: string }): void;
-  (e: "edit", item: { name: string; type: string; path: string }): void;
   (e: "contextmenu", x: number, y: number): void;
 }>();
 
@@ -143,6 +145,7 @@ const codeExtensions = Object.freeze([
 
 const textExtensions = Object.freeze(["txt", "md", "log", "cfg", "conf", "properties", "ini"]);
 const imageExtensions = Object.freeze(["png", "jpg", "jpeg", "gif", "svg", "webp"]);
+const supportedArchiveExtensions = Object.freeze(["zip"]);
 const units = Object.freeze(["B", "KB", "MB", "GB", "TB", "PB", "EB"]);
 
 const route = shallowRef(useRoute());
@@ -156,7 +159,18 @@ const containerClasses = computed(() => [
 
 const fileExtension = computed(() => props.name.split(".").pop()?.toLowerCase() || "");
 
+const isZip = computed(() => fileExtension.value === "zip");
+
 const menuOptions = computed(() => [
+  {
+    id: "extract",
+    shown: isZip.value,
+    action: () => emit("extract", { name: props.name, type: props.type, path: props.path }),
+  },
+  {
+    divider: true,
+    shown: isZip.value,
+  },
   {
     id: "rename",
     action: () => emit("rename", { name: props.name, type: props.type, path: props.path }),
@@ -189,6 +203,7 @@ const iconComponent = computed(() => {
   if (codeExtensions.includes(ext)) return UiServersIconsCodeFileIcon;
   if (textExtensions.includes(ext)) return UiServersIconsTextFileIcon;
   if (imageExtensions.includes(ext)) return UiServersIconsImageFileIcon;
+  if (supportedArchiveExtensions.includes(ext)) return FileArchiveIcon;
   return FileIcon;
 });
 

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

@@ -30,6 +30,7 @@
           :size="item.size"
           @delete="$emit('delete', item)"
           @rename="$emit('rename', item)"
+          @extract="$emit('extract', item)"
           @download="$emit('download', item)"
           @move="$emit('move', item)"
           @move-direct-to="$emit('moveDirectTo', $event)"
@@ -49,14 +50,12 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: "delete", item: any): void;
-  (e: "rename", item: any): void;
-  (e: "download", item: any): void;
-  (e: "move", item: any): void;
-  (e: "edit", item: any): void;
+  (
+    e: "delete" | "rename" | "download" | "move" | "edit" | "moveDirectTo" | "extract",
+    item: any,
+  ): void;
   (e: "contextmenu", item: any, x: number, y: number): void;
   (e: "loadMore"): void;
-  (e: "moveDirectTo", item: any): void;
 }>();
 
 const ITEM_HEIGHT = 61;

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

@@ -117,7 +117,8 @@
       </div>
 
       <ButtonStyled type="transparent">
-        <UiServersTeleportOverflowMenu
+        <OverflowMenu
+          :dropdown-id="`create-new-${baseId}`"
           position="bottom"
           direction="left"
           aria-label="Create new..."
@@ -125,6 +126,10 @@
             { id: 'file', action: () => $emit('create', 'file') },
             { id: 'directory', action: () => $emit('create', 'directory') },
             { id: 'upload', action: () => $emit('upload') },
+            { divider: true },
+            { id: 'upload-zip', shown: false, action: () => $emit('upload-zip') },
+            { id: 'install-from-url', action: () => $emit('unzip-from-url', false) },
+            { id: 'install-cf-pack', action: () => $emit('unzip-from-url', true) },
           ]"
         >
           <PlusIcon aria-hidden="true" />
@@ -132,7 +137,16 @@
           <template #file> <BoxIcon aria-hidden="true" /> New file </template>
           <template #directory> <FolderOpenIcon aria-hidden="true" /> New folder </template>
           <template #upload> <UploadIcon aria-hidden="true" /> Upload file </template>
-        </UiServersTeleportOverflowMenu>
+          <template #upload-zip>
+            <FileArchiveIcon aria-hidden="true" /> Upload from .zip file
+          </template>
+          <template #install-from-url>
+            <LinkIcon aria-hidden="true" /> Upload from .zip URL
+          </template>
+          <template #install-cf-pack>
+            <CurseForgeIcon aria-hidden="true" /> Install CurseForge pack
+          </template>
+        </OverflowMenu>
       </ButtonStyled>
     </div>
   </header>
@@ -140,6 +154,9 @@
 
 <script setup lang="ts">
 import {
+  LinkIcon,
+  CurseForgeIcon,
+  FileArchiveIcon,
   BoxIcon,
   PlusIcon,
   UploadIcon,
@@ -150,7 +167,7 @@ import {
   ChevronRightIcon,
   FilterIcon,
 } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled, OverflowMenu } from "@modrinth/ui";
 import { ref, computed } from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
 
@@ -158,12 +175,14 @@ const props = defineProps<{
   breadcrumbSegments: string[];
   searchQuery: string;
   currentFilter: string;
+  baseId: string;
 }>();
 
 defineEmits<{
   (e: "navigate", index: number): void;
   (e: "create", type: "file" | "directory"): void;
-  (e: "upload"): void;
+  (e: "upload" | "upload-zip"): void;
+  (e: "unzip-from-url", cf: boolean): void;
   (e: "update:searchQuery", value: string): void;
   (e: "filter", type: string): void;
 }>();

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

@@ -0,0 +1,56 @@
+<template>
+  <ConfirmModal
+    ref="modal"
+    title="Do you want to overwrite these conflicting files?"
+    :proceed-label="`Overwrite`"
+    :proceed-icon="CheckIcon"
+    @proceed="proceed"
+  >
+    <div class="flex max-w-[30rem] flex-col gap-4">
+      <p class="m-0 font-semibold leading-normal">
+        <template v-if="hasMany">
+          Over 100 files will be overwritten if you proceed with extraction; here is just some of
+          them:
+        </template>
+        <template v-else>
+          The following {{ files.length }} files already exist on your server, and will be
+          overwritten if you proceed with extraction:
+        </template>
+      </p>
+      <ul class="m-0 max-h-80 list-none overflow-auto rounded-2xl bg-bg px-4 py-3">
+        <li v-for="file in files" :key="file" class="flex items-center gap-1 py-1 font-medium">
+          <XIcon class="shrink-0 text-red" /> {{ file }}
+        </li>
+      </ul>
+    </div>
+  </ConfirmModal>
+</template>
+
+<script setup lang="ts">
+import { ConfirmModal } from "@modrinth/ui";
+import { ref } from "vue";
+import { XIcon, CheckIcon } from "@modrinth/assets";
+
+const path = ref("");
+const files = ref<string[]>([]);
+
+const emit = defineEmits<{
+  (e: "proceed", path: string): void;
+}>();
+
+const modal = ref<typeof ConfirmModal>();
+
+const hasMany = computed(() => files.value.length > 100);
+
+const show = (zipPath: string, conflictingFiles: string[]) => {
+  path.value = zipPath;
+  files.value = conflictingFiles;
+  modal.value?.show();
+};
+
+const proceed = () => {
+  emit("proceed", path.value);
+};
+
+defineExpose({ show });
+</script>

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

@@ -1,101 +1,105 @@
 <template>
-  <Transition name="upload-status" @enter="onUploadStatusEnter" @leave="onUploadStatusLeave">
-    <div v-show="isUploading" ref="uploadStatusRef" class="upload-status">
-      <div
-        ref="statusContentRef"
-        :class="['flex flex-col p-4 text-sm text-contrast', $attrs.class]"
-      >
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2 font-bold">
-            <FolderOpenIcon class="size-4" />
-            <span>
-              <span class="capitalize">
-                {{ props.fileType ? props.fileType : "File" }} Uploads
+  <div>
+    <Transition name="upload-status" @enter="onUploadStatusEnter" @leave="onUploadStatusLeave">
+      <div v-show="isUploading" ref="uploadStatusRef" class="upload-status">
+        <div
+          ref="statusContentRef"
+          v-bind="$attrs"
+          :class="['flex flex-col p-4 text-sm text-contrast']"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 font-bold">
+              <FolderOpenIcon class="size-4" />
+              <span>
+                <span class="capitalize">
+                  {{ props.fileType ? props.fileType : "File" }} uploads
+                </span>
+                <span>{{ activeUploads.length > 0 ? ` - ${activeUploads.length} left` : "" }}</span>
               </span>
-              <span>{{ activeUploads.length > 0 ? ` - ${activeUploads.length} left` : "" }}</span>
-            </span>
-          </div>
-        </div>
-
-        <div class="mt-2 space-y-2">
-          <div
-            v-for="item in uploadQueue"
-            :key="item.file.name"
-            class="flex h-6 items-center justify-between gap-2 text-xs"
-          >
-            <div class="flex flex-1 items-center gap-2 truncate">
-              <transition-group name="status-icon" mode="out-in">
-                <UiServersPanelSpinner
-                  v-show="item.status === 'uploading'"
-                  key="spinner"
-                  class="absolute !size-4"
-                />
-                <CheckCircleIcon
-                  v-show="item.status === 'completed'"
-                  key="check"
-                  class="absolute size-4 text-green"
-                />
-                <XCircleIcon
-                  v-show="
-                    item.status === 'error' ||
-                    item.status === 'cancelled' ||
-                    item.status === 'incorrect-type'
-                  "
-                  key="error"
-                  class="absolute size-4 text-red"
-                />
-              </transition-group>
-              <span class="ml-6 truncate">{{ item.file.name }}</span>
-              <span class="text-secondary">{{ item.size }}</span>
             </div>
-            <div class="flex min-w-[80px] items-center justify-end gap-2">
-              <template v-if="item.status === 'completed'">
-                <span>Done</span>
-              </template>
-              <template v-else-if="item.status === 'error'">
-                <span class="text-red">Failed - File already exists</span>
-              </template>
-              <template v-else-if="item.status === 'incorrect-type'">
-                <span class="text-red">Failed - Incorrect file type</span>
-              </template>
-              <template v-else>
-                <template v-if="item.status === 'uploading'">
-                  <span>{{ item.progress }}%</span>
-                  <div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
-                    <div
-                      class="h-full bg-contrast transition-all duration-200"
-                      :style="{ width: item.progress + '%' }"
-                    />
-                  </div>
-                  <ButtonStyled color="red" type="transparent" @click="cancelUpload(item)">
-                    <button>Cancel</button>
-                  </ButtonStyled>
+          </div>
+
+          <div class="mt-2 space-y-2">
+            <div
+              v-for="item in uploadQueue"
+              :key="item.file.name"
+              class="flex h-6 items-center justify-between gap-2 text-xs"
+            >
+              <div class="flex flex-1 items-center gap-2 truncate">
+                <transition-group name="status-icon" mode="out-in">
+                  <UiServersPanelSpinner
+                    v-show="item.status === 'uploading'"
+                    key="spinner"
+                    class="absolute !size-4"
+                  />
+                  <CheckCircleIcon
+                    v-show="item.status === 'completed'"
+                    key="check"
+                    class="absolute size-4 text-green"
+                  />
+                  <XCircleIcon
+                    v-show="
+                      item.status === 'error' ||
+                      item.status === 'cancelled' ||
+                      item.status === 'incorrect-type'
+                    "
+                    key="error"
+                    class="absolute size-4 text-red"
+                  />
+                </transition-group>
+                <span class="ml-6 truncate">{{ item.file.name }}</span>
+                <span class="text-secondary">{{ item.size }}</span>
+              </div>
+              <div class="flex min-w-[80px] items-center justify-end gap-2">
+                <template v-if="item.status === 'completed'">
+                  <span>Done</span>
                 </template>
-                <template v-else-if="item.status === 'cancelled'">
-                  <span class="text-red">Cancelled</span>
+                <template v-else-if="item.status === 'error'">
+                  <span class="text-red">Failed - File already exists</span>
+                </template>
+                <template v-else-if="item.status === 'incorrect-type'">
+                  <span class="text-red">Failed - Incorrect file type</span>
                 </template>
                 <template v-else>
-                  <span>{{ item.progress }}%</span>
-                  <div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
-                    <div
-                      class="h-full bg-contrast transition-all duration-200"
-                      :style="{ width: item.progress + '%' }"
-                    />
-                  </div>
+                  <template v-if="item.status === 'uploading'">
+                    <span>{{ item.progress }}%</span>
+                    <div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
+                      <div
+                        class="h-full bg-contrast transition-all duration-200"
+                        :style="{ width: item.progress + '%' }"
+                      />
+                    </div>
+                    <ButtonStyled color="red" type="transparent" @click="cancelUpload(item)">
+                      <button>Cancel</button>
+                    </ButtonStyled>
+                  </template>
+                  <template v-else-if="item.status === 'cancelled'">
+                    <span class="text-red">Cancelled</span>
+                  </template>
+                  <template v-else>
+                    <span>{{ item.progress }}%</span>
+                    <div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
+                      <div
+                        class="h-full bg-contrast transition-all duration-200"
+                        :style="{ width: item.progress + '%' }"
+                      />
+                    </div>
+                  </template>
                 </template>
-              </template>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </Transition>
+    </Transition>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { FolderOpenIcon, CheckCircleIcon, XCircleIcon } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
 import { ref, computed, watch, nextTick } from "vue";
+import type { FSModule } from "~/composables/pyroServers.ts";
 
 interface UploadItem {
   file: File;

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

@@ -0,0 +1,159 @@
+<template>
+  <NewModal
+    ref="modal"
+    :header="cf ? `Installing a CurseForge pack` : `Uploading .zip contents from URL`"
+  >
+    <form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
+      <div class="flex flex-col gap-2">
+        <div class="font-bold text-contrast">
+          {{ cf ? `How to get the modpack version's URL` : "URL of .zip file" }}
+        </div>
+        <ol v-if="cf" class="mb-1 mt-0 flex flex-col gap-1 pl-8 leading-normal text-secondary">
+          <li>
+            <a
+              href="https://www.curseforge.com/minecraft/search?page=1&pageSize=40&sortBy=relevancy&class=modpacks"
+              class="inline-flex font-semibold text-[#F16436] transition-all hover:underline active:brightness-[--hover-brightness]"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Find the CurseForge modpack
+              <ExternalIcon class="ml-1 inline size-4" stroke-width="3" />
+            </a>
+            you'd like to install on your server.
+          </li>
+          <li>
+            On the modpack's page, go to the
+            <span class="font-semibold text-primary">"Files"</span> tab, and
+            <span class="font-semibold text-primary">select the version</span> of the modpack you
+            want to install.
+          </li>
+          <li>
+            <span class="font-semibold text-primary">Copy the URL</span> of the version you want to
+            install, and paste it in the box below.
+          </li>
+        </ol>
+        <p v-else class="mb-1 mt-0">Copy and paste the direct download URL of a .zip file.</p>
+        <input
+          ref="urlInput"
+          v-model="url"
+          autofocus
+          :disabled="submitted"
+          type="text"
+          data-1p-ignore
+          data-lpignore="true"
+          data-protonpass-ignore="true"
+          required
+          :placeholder="
+            cf
+              ? 'https://www.curseforge.com/minecraft/modpacks/.../files/6412259'
+              : 'https://www.example.com/.../modpack-name-1.0.2.zip'
+          "
+          autocomplete="off"
+        />
+        <div v-if="submitted && error" class="text-red">{{ error }}</div>
+      </div>
+      <BackupWarning :backup-link="`/servers/manage/${props.server.serverId}/backups`" />
+      <div class="flex justify-start gap-2">
+        <ButtonStyled color="brand">
+          <button v-tooltip="error" :disabled="submitted || !!error" type="submit">
+            <SpinnerIcon v-if="submitted" class="animate-spin" />
+            <DownloadIcon v-else class="h-5 w-5" />
+            {{ submitted ? "Installing..." : "Install" }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button type="button" @click="hide">
+            <XIcon class="h-5 w-5" />
+            {{ submitted ? "Close" : "Cancel" }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </form>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ExternalIcon, SpinnerIcon, DownloadIcon, XIcon } from "@modrinth/assets";
+import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
+import { ref, computed, nextTick } from "vue";
+import { handleError, type Server } from "~/composables/pyroServers.ts";
+
+const cf = ref(false);
+
+const props = defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const modal = ref<typeof NewModal>();
+const urlInput = ref<HTMLInputElement | null>(null);
+const url = ref("");
+const submitted = ref(false);
+
+const trimmedUrl = computed(() => url.value.trim());
+
+const regex = /https:\/\/(www\.)?curseforge\.com\/minecraft\/modpacks\/[^/]+\/files\/\d+/;
+
+const error = computed(() => {
+  if (trimmedUrl.value.length === 0) {
+    return "URL is required.";
+  }
+  if (cf.value && !regex.test(trimmedUrl.value)) {
+    return "URL must be a CurseForge modpack version URL.";
+  } else if (!cf.value && !trimmedUrl.value.includes("/")) {
+    return "URL must be valid.";
+  }
+  return "";
+});
+
+const handleSubmit = async () => {
+  submitted.value = true;
+  if (!error.value) {
+    // hide();
+    try {
+      const dry = await props.server.fs?.extractFile(trimmedUrl.value, true, true);
+
+      if (!cf.value || dry.modpack_name) {
+        await props.server.fs?.extractFile(trimmedUrl.value, true, false, true);
+        hide();
+      } else {
+        submitted.value = false;
+        handleError(
+          new ServersError(
+            "Could not find CurseForge modpack at that URL.",
+            undefined,
+            undefined,
+            undefined,
+            {
+              context: "Error installing modpack",
+              error: `url: ${url.value}`,
+              description: "Could not find CurseForge modpack at that URL.",
+            },
+          ),
+        );
+      }
+    } catch (error) {
+      submitted.value = false;
+      console.error("Error installing:", error);
+      handleError(error);
+    }
+  }
+};
+
+const show = (isCf: boolean) => {
+  cf.value = isCf;
+  url.value = "";
+  submitted.value = false;
+  modal.value?.show();
+  nextTick(() => {
+    setTimeout(() => {
+      urlInput.value?.focus();
+    }, 100);
+  });
+};
+
+const hide = () => {
+  modal.value?.hide();
+};
+
+defineExpose({ show, hide });
+</script>

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

@@ -1,660 +0,0 @@
-<template>
-  <div class="flex items-center justify-center">
-    <div class="w-full overflow-hidden">
-      <div class="mb-4">
-        <div
-          v-for="(line, lineIndex) in motd"
-          :key="lineIndex"
-          class="relative mb-2 rounded bg-button-bg p-2"
-        >
-          <div
-            class="font-minecraft text-white"
-            :contenteditable="true"
-            spellcheck="false"
-            @input="handleInput($event, lineIndex)"
-            @keydown.enter.prevent
-            @paste.prevent="handlePaste($event, lineIndex)"
-            @mouseup="handleSelection(lineIndex)"
-            v-html="renderLine(line)"
-          ></div>
-          <div class="text-sm text-gray-400">
-            {{ motd[lineIndex].reduce((sum, segment) => sum + segment.text.length, 0) }}/45
-            characters
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <transition name="fade">
-      <div
-        v-if="showPopup"
-        :style="{ top: `${popupY}px`, left: `${popupX}px` }"
-        class="fixed z-10 flex flex-col items-end gap-2 transition-all duration-300 ease-in-out"
-      >
-        <div class="rounded-xl border bg-table-alternateRow p-2 shadow-lg">
-          <div class="flex space-x-2">
-            <Button
-              v-for="style in styles"
-              :key="style.name"
-              icon-only
-              transparent
-              @click="applyStyle({ [style.name]: !currentStyle[style.name] })"
-            >
-              <component :is="style.icon" class="h-4 w-4" />
-            </Button>
-            <div class="relative overflow-y-scroll">
-              <Button icon-only transparent :class="colorPicker ?? 'hidden'" @click="pickColor">
-                <PaintBrushIcon />
-              </Button>
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="colorPicker"
-          icon-only
-          class="w-fit overflow-y-auto rounded-xl p-2 [&&]:bg-table-alternateRow"
-        >
-          <div :class="colorPicker ? `grid grid-flow-col grid-rows-4 gap-2` : '[&&]:hidden'">
-            <button
-              v-for="format in sortedFormatCodes()"
-              :key="format.code"
-              class="rounded-full p-3"
-              :style="{ backgroundColor: format.color }"
-              :title="format.description"
-              @click="applyStyle({ color: format.color })"
-            ></button>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup>
-import {
-  ItalicIcon,
-  BoldIcon,
-  StrikethroughIcon,
-  UnderlineIcon,
-  PaintBrushIcon,
-  ChevronLeftIcon,
-} from "@modrinth/assets";
-import { Button } from "@modrinth/ui";
-
-const props = defineProps({
-  server: {
-    type: Object,
-    required: true,
-  },
-});
-
-const formatCodes = [
-  { code: "§f", color: "white", description: "White" },
-  { code: "§7", color: "#AAAAAA", description: "Gray" },
-  { code: "§8", color: "#555555", description: "Dark Gray" },
-  { code: "§0", color: "#000000", description: "Black" },
-  { code: "§9", color: "#5555FF", description: "Blue" },
-  { code: "§1", color: "#0000AA", description: "Dark Blue" },
-  { code: "§b", color: "#55FFFF", description: "Aqua" },
-  { code: "§3", color: "#00AAAA", description: "Dark Aqua" },
-  { code: "§a", color: "#55FF55", description: "Green" },
-  { code: "§2", color: "#00AA00", description: "Dark Green" },
-  { code: "§e", color: "#FFFF55", description: "Yellow" },
-  { code: "§6", color: "#FFAA00", description: "Gold" },
-  { code: "§c", color: "#FF5555", description: "Red" },
-  { code: "§4", color: "#AA0000", description: "Dark Red" },
-  { code: "§d", color: "#FF55FF", description: "Light Purple" },
-  { code: "§5", color: "#AA00AA", description: "Dark Purple" },
-];
-
-const sortedFormatCodes = () => {
-  const colors = formatCodes;
-  if (colors[0].description === "White") {
-    colors.reverse();
-  }
-  return colors;
-};
-
-const minecraftEmojis = [
-  { char: "☺", name: "SMILING FACE" },
-  { char: "☹", name: "FROWNING FACE" },
-  { char: "☠", name: "SKULL AND CROSSBONES" },
-  { char: "❣", name: "HEART EXCLAMATION" },
-  { char: "❤", name: "RED HEART" },
-  { char: "✌", name: "VICTORY HAND" },
-  { char: "☝", name: "INDEX POINTING UP" },
-  { char: "✍", name: "WRITING HAND" },
-  { char: "♨", name: "HOT SPRINGS" },
-  { char: "✈", name: "AIRPLANE" },
-  { char: "⌛", name: "HOURGLASS DONE" },
-  { char: "⌚", name: "WATCH" },
-  { char: "☀", name: "SUN" },
-  { char: "☁", name: "CLOUD" },
-  { char: "☂", name: "UMBRELLA" },
-  { char: "❄", name: "SNOWFLAKE" },
-  { char: "☃", name: "SNOWMAN" },
-  { char: "☄", name: "COMET" },
-  { char: "♠", name: "SPADE SUIT" },
-  { char: "♥", name: "HEART SUIT" },
-  { char: "♦", name: "DIAMOND SUIT" },
-  { char: "♣", name: "CLUB SUIT" },
-  { char: "♟", name: "CHESS PAWN" },
-  { char: "☎", name: "TELEPHONE" },
-  { char: "⌨", name: "KEYBOARD" },
-  { char: "✉", name: "ENVELOPE" },
-  { char: "✏", name: "PENCIL" },
-  { char: "✒", name: "BLACK PEN" },
-  { char: "✂", name: "SCISSORS" },
-  { char: "☢", name: "RADIOACTIVE" },
-  { char: "☣", name: "BIOHAZARD" },
-  { char: "⬆", name: "UP ARROW" },
-  { char: "⬇", name: "DOWN ARROW" },
-  { char: "➡", name: "RIGHT ARROW" },
-  { char: "⬅", name: "LEFT ARROW" },
-  { char: "↗", name: "UP-RIGHT ARROW" },
-  { char: "↘", name: "DOWN-RIGHT ARROW" },
-  { char: "↙", name: "DOWN-LEFT ARROW" },
-  { char: "↖", name: "UP-LEFT ARROW" },
-  { char: "↕", name: "UP-DOWN ARROW" },
-  { char: "↔", name: "LEFT-RIGHT ARROW" },
-  { char: "↩", name: "RIGHT ARROW CURVING LEFT" },
-  { char: "↪", name: "LEFT ARROW CURVING RIGHT" },
-  { char: "✡", name: "STAR OF DAVID" },
-  { char: "☸", name: "WHEEL OF DHARMA" },
-  { char: "☯", name: "YIN YANG" },
-  { char: "✝", name: "LATIN CROSS" },
-  { char: "☦", name: "ORTHODOX CROSS" },
-  { char: "☪", name: "STAR AND CRESCENT" },
-  { char: "☮", name: "PEACE SYMBOL" },
-  { char: "♈", name: "ARIES" },
-  { char: "♉", name: "TAURUS" },
-  { char: "♊", name: "GEMINI" },
-  { char: "♋", name: "CANCER" },
-  { char: "♌", name: "LEO" },
-  { char: "♍", name: "VIRGO" },
-  { char: "♎", name: "LIBRA" },
-  { char: "♏", name: "SCORPIO" },
-  { char: "♐", name: "SAGITTARIUS" },
-  { char: "♑", name: "CAPRICORN" },
-  { char: "♒", name: "AQUARIUS" },
-  { char: "♓", name: "PISCES" },
-  { char: "▶", name: "PLAY BUTTON" },
-  { char: "◀", name: "REVERSE BUTTON" },
-  { char: "♀", name: "FEMALE SIGN" },
-  { char: "♂", name: "MALE SIGN" },
-  { char: "✖", name: "MULTIPLY" },
-  { char: "‼", name: "DOUBLE EXCLAMATION MARK" },
-  { char: "〰", name: "WAVY DASH" },
-  { char: "☑", name: "CHECK BOX WITH CHECK" },
-  { char: "✔", name: "CHECK MARK" },
-  { char: "✳", name: "EIGHT-SPOKED ASTERISK" },
-  { char: "✴", name: "EIGHT-POINTED STAR" },
-  { char: "❇", name: "SPARKLE" },
-  { char: "©", name: "COPYRIGHT" },
-  { char: "®", name: "REGISTERED" },
-  { char: "™", name: "TRADE MARK" },
-  { char: "Ⓜ", name: "CIRCLED M" },
-  { char: "㊗", name: 'JAPANESE "CONGRATULATIONS" BUTTON' },
-  { char: "㊙", name: 'JAPANESE "SECRET" BUTTON' },
-  { char: "▪", name: "BLACK SMALL SQUARE" },
-  { char: "▫", name: "WHITE SMALL SQUARE" },
-  { char: "☷", name: "TRIGRAM FOR EARTH" },
-  { char: "☵", name: "TRIGRAM FOR WATER" },
-  { char: "☶", name: "TRIGRAM FOR MOUNTAIN" },
-  { char: "☋", name: "DESCENDING NODE" },
-  { char: "☌", name: "CONJUNCTION" },
-  { char: "♜", name: "BLACK CHESS ROOK" },
-  { char: "♕", name: "WHITE CHESS QUEEN" },
-  { char: "♡", name: "WHITE HEART SUIT" },
-  { char: "♬", name: "BEAMED SIXTEENTH NOTES" },
-  { char: "☚", name: "BLACK LEFT POINTING INDEX" },
-  { char: "♮", name: "MUSIC NATURAL SIGN" },
-  { char: "♝", name: "BLACK CHESS BISHOP" },
-  { char: "♯", name: "SHARP" },
-  { char: "☴", name: "TRIGRAM FOR WIND" },
-  { char: "♭", name: "FLAT" },
-  { char: "☓", name: "SALTIRE" },
-  { char: "☛", name: "BLACK RIGHT POINTING INDEX" },
-  { char: "☭", name: "HAMMER AND SICKLE" },
-  { char: "♢", name: "WHITE DIAMOND SUIT" },
-  { char: "✐", name: "UPPER RIGHT PENCIL" },
-  { char: "♖", name: "WHITE CHESS ROOK" },
-  { char: "☈", name: "THUNDERSTORM" },
-  { char: "☒", name: "BALLOT BOX WITH X" },
-  { char: "★", name: "BLACK STAR" },
-  { char: "♚", name: "BLACK CHESS KING" },
-  { char: "♛", name: "BLACK CHESS QUEEN" },
-  { char: "✎", name: "LOWER RIGHT PENCIL" },
-  { char: "♪", name: "EIGHTH NOTE" },
-  { char: "☰", name: "TRIGRAM FOR HEAVEN" },
-  { char: "☽", name: "FIRST QUARTER MOON" },
-  { char: "☡", name: "CAUTION SIGN" },
-  { char: "☼", name: "WHITE SUN WITH RAYS" },
-  { char: "♅", name: "URANUS" },
-  { char: "☐", name: "BALLOT BOX" },
-  { char: "☟", name: "WHITE DOWN POINTING INDEX" },
-  { char: "❦", name: "FLORAL HEART" },
-  { char: "☊", name: "ASCENDING NODE" },
-  { char: "☍", name: "OPPOSITION" },
-  { char: "☬", name: "ADI SHAKTI" },
-  { char: "♧", name: "WHITE CLUB SUIT" },
-  { char: "☫", name: "FARSI SYMBOL" },
-  { char: "☱", name: "TRIGRAM FOR LAKE" },
-  { char: "☾", name: "LAST QUARTER MOON" },
-  { char: "☤", name: "CADUCEUS" },
-  { char: "❧", name: "ROTATED FLORAL HEART BULLET" },
-  { char: "♄", name: "SATURN" },
-  { char: "♁", name: "EARTH" },
-  { char: "♔", name: "WHITE CHESS KING" },
-  { char: "❥", name: "ROTATED HEAVY BLACK HEART BULLET" },
-  { char: "☥", name: "ANKH" },
-  { char: "☻", name: "BLACK SMILING FACE" },
-  { char: "♤", name: "WHITE SPADE SUIT" },
-  { char: "♞", name: "BLACK CHESS KNIGHT" },
-  { char: "♆", name: "NEPTUNE" },
-  { char: "#", name: "HASH SIGN" },
-  { char: "♃", name: "JUPITER" },
-  { char: "♩", name: "QUARTER NOTE" },
-  { char: "☇", name: "LIGHTNING" },
-  { char: "☞", name: "WHITE RIGHT POINTING INDEX" },
-  { char: "♫", name: "BEAMED EIGHTH NOTES" },
-  { char: "☏", name: "WHITE TELEPHONE" },
-  { char: "♘", name: "WHITE CHESS KNIGHT" },
-  { char: "☧", name: "CHI RHO" },
-  { char: "☉", name: "SUN" },
-  { char: "♇", name: "PLUTO" },
-  { char: "☩", name: "CROSS OF JERUSALEM" },
-  { char: "♙", name: "WHITE CHESS PAWN" },
-  { char: "☜", name: "WHITE LEFT POINTING INDEX" },
-  { char: "☲", name: "TRIGRAM FOR FIRE" },
-  { char: "☨", name: "CROSS OF LORRAINE" },
-  { char: "♗", name: "WHITE CHESS BISHOP" },
-  { char: "☳", name: "TRIGRAM FOR THUNDER" },
-  { char: "⚔", name: "CROSSED SWORDS" },
-  { char: "⚀", name: "DICE ONE" },
-];
-
-const rawMotd = ref(props.server.general?.motd ?? "");
-
-const motd = computed(() => {
-  const lines = rawMotd.value.split("\n");
-  return lines.map((line) => {
-    const segments = [];
-    let currentSegment = { text: "", color: "White" };
-    let i = 0;
-    while (i < line.length) {
-      if (line[i] === "§") {
-        if (currentSegment.text) {
-          segments.push({ ...currentSegment });
-          currentSegment = { text: "", color: "White" };
-        }
-        const formatCode = line.substr(i, 2);
-        const format = formatCodes.find((f) => f.code === formatCode);
-        console.log(format);
-        console.log(formatCode);
-        if (format) {
-          currentSegment.color = format.color;
-          i += 2;
-          continue;
-        } else if (formatCode === "§l") {
-          currentSegment.bold = true;
-          i += 2;
-          continue;
-        } else if (formatCode === "§o") {
-          currentSegment.italic = true;
-          i += 2;
-          continue;
-        } else if (formatCode === "§n") {
-          currentSegment.underline = true;
-          i += 2;
-          continue;
-        } else if (formatCode === "§m") {
-          currentSegment.strikethrough = true;
-          i += 2;
-          continue;
-        }
-      }
-      currentSegment.text += line[i];
-      i++;
-    }
-    if (currentSegment.text) {
-      segments.push(currentSegment);
-    }
-    return segments;
-  });
-});
-
-const styles = [
-  {
-    name: "bold",
-    icon: BoldIcon,
-  },
-  {
-    name: "italic",
-    icon: ItalicIcon,
-  },
-  {
-    name: "underline",
-    icon: UnderlineIcon,
-  },
-  {
-    name: "strikethrough",
-    icon: StrikethroughIcon,
-  },
-];
-
-const showPopup = ref(false);
-const popupX = ref(0);
-const popupY = ref(0);
-const currentLineIndex = ref(0);
-const selectionStart = ref(0);
-const selectionEnd = ref(0);
-const colorPicker = ref(false);
-
-const pickColor = () => {
-  colorPicker.value = !colorPicker.value;
-};
-
-const totalCharacters = computed(() => {
-  return motd.value.reduce((sum, line) => {
-    return Math.max(
-      sum,
-      line.reduce((lineSum, segment) => lineSum + segment.text.length, 0),
-    );
-  }, 0);
-});
-
-const minecraftFormat = computed(() => {
-  return motd.value
-    .map((line) => {
-      return line
-        .map((segment) => {
-          let format = getColorCode(segment.color);
-          if (segment.bold) format += "§l";
-          if (segment.italic) format += "§o";
-          if (segment.underline) format += "§n";
-          if (segment.strikethrough) format += "§m";
-          return format + segment.text;
-        })
-        .join("");
-    })
-    .join("\n");
-});
-
-const currentStyle = computed(() => {
-  const line = motd.value[currentLineIndex.value];
-  if (!line) return {};
-
-  let start = 0;
-  for (const segment of line) {
-    if (start + segment.text.length > selectionStart.value) {
-      return {
-        color: segment.color || "White",
-        bold: segment.bold || false,
-        italic: segment.italic || false,
-        underline: segment.underline || false,
-        strikethrough: segment.strikethrough || false,
-      };
-    }
-    start += segment.text.length;
-  }
-  return {};
-});
-
-function getColorCode(color) {
-  const format = formatCodes.find((f) => f.description === color);
-  return format ? format.code : "§f";
-}
-
-function renderLine(line) {
-  return line
-    .map((segment) => {
-      let style = `color: ${segment.color};`;
-      if (segment.bold) style += "font-weight: 900;";
-      if (segment.italic) style += "font-style: italic;";
-      if (segment.underline) style += "text-decoration: underline;";
-      if (segment.strikethrough) style += "text-decoration: line-through;";
-      return `<span style="${style}">${segment.text}</span>`;
-    })
-    .join("");
-}
-
-function handleSelection(lineIndex) {
-  const selection = window.getSelection();
-  if (selection.toString().length > 0) {
-    const range = selection.getRangeAt(0);
-    const rect = range.getBoundingClientRect();
-
-    popupX.value = rect.left;
-    popupY.value = rect.bottom;
-    showPopup.value = true;
-    currentLineIndex.value = lineIndex;
-
-    const lineElement = document.querySelectorAll("[contenteditable]")[lineIndex];
-    const rangeClone = range.cloneRange();
-    rangeClone.selectNodeContents(lineElement);
-    rangeClone.setEnd(range.startContainer, range.startOffset);
-    selectionStart.value = rangeClone.toString().length;
-    selectionEnd.value = selectionStart.value + range.toString().length;
-  } else {
-    showPopup.value = false;
-    colorPicker.value = false;
-  }
-}
-
-function applyStyle(newStyle) {
-  const line = motd.value[currentLineIndex.value];
-  const newLine = [];
-  let currentPos = 0;
-
-  for (const segment of line) {
-    if (currentPos + segment.text.length <= selectionStart.value) {
-      newLine.push(segment);
-    } else if (currentPos >= selectionEnd.value) {
-      newLine.push(segment);
-    } else {
-      const beforeSelection = segment.text.slice(0, Math.max(0, selectionStart.value - currentPos));
-      const inSelection = segment.text.slice(
-        Math.max(0, selectionStart.value - currentPos),
-        Math.min(segment.text.length, selectionEnd.value - currentPos),
-      );
-      const afterSelection = segment.text.slice(
-        Math.min(segment.text.length, selectionEnd.value - currentPos),
-      );
-      console.log(beforeSelection);
-      console.log(inSelection);
-      console.log(afterSelection);
-
-      if (beforeSelection) newLine.push({ ...segment, text: beforeSelection });
-      if (inSelection) {
-        const mergedStyle = { ...segment, ...newStyle };
-        for (const key in newStyle) {
-          if (newStyle[key] === false) {
-            delete mergedStyle[key];
-          }
-        }
-        newLine.push({ ...mergedStyle, text: inSelection });
-      }
-      if (afterSelection) newLine.push({ ...segment, text: afterSelection });
-    }
-    currentPos += segment.text.length;
-  }
-
-  motd.value[currentLineIndex.value] = newLine;
-  showPopup.value = false;
-  colorPicker.value = false;
-
-  // Rerender the line to reflect the changes
-  nextTick(() => {
-    const lineElement = document.querySelectorAll("[contenteditable]")[currentLineIndex.value];
-    lineElement.innerHTML = renderLine(newLine);
-  });
-}
-
-function insertEmoji() {
-  const emoji = "☺";
-  if (totalCharacters.value + emoji.length <= 90) {
-    applyStyle({ text: emoji });
-  }
-}
-
-function handleInput(event, lineIndex) {
-  const newText = event.target.textContent;
-  const oldText = motd.value[lineIndex].reduce((acc, segment) => acc + segment.text, "");
-  const diff = newText.length - oldText.length;
-
-  if (newText.length <= 45) {
-    const selection = window.getSelection();
-    const range = selection.getRangeAt(0);
-    const cursorOffset = getCursorOffset(event.target, range);
-
-    const newLine = [];
-    let currentPos = 0;
-    for (const segment of motd.value[lineIndex]) {
-      const segmentEnd = currentPos + segment.text.length;
-      const newSegmentText = newText.slice(currentPos, Math.min(segmentEnd, newText.length));
-      if (newSegmentText) {
-        newLine.push({ ...segment, text: newSegmentText });
-      }
-      currentPos = segmentEnd;
-      if (currentPos >= newText.length) break;
-    }
-    if (currentPos < newText.length) {
-      newLine.push({ text: newText.slice(currentPos), color: "White" });
-    }
-    motd.value[lineIndex] = newLine;
-
-    nextTick(() => {
-      const lineElement = event.target;
-      lineElement.innerHTML = renderLine(newLine);
-
-      const newRange = document.createRange();
-      const sel = window.getSelection();
-      const { node, offset } = getCursorNodeAndOffset(lineElement, cursorOffset);
-
-      if (node) {
-        newRange.setStart(node, offset);
-        newRange.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(newRange);
-      }
-    });
-  } else {
-    event.target.innerHTML = renderLine(motd.value[lineIndex]);
-  }
-}
-
-// Helper function to get cursor offset considering styled spans
-function getCursorOffset(element, range) {
-  let offset = 0;
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  let node;
-
-  while ((node = walker.nextNode())) {
-    if (node === range.startContainer) {
-      return offset + range.startOffset;
-    }
-    offset += node.length;
-  }
-  return offset;
-}
-
-// Helper function to find the node and offset for cursor placement
-function getCursorNodeAndOffset(element, targetOffset) {
-  let currentOffset = 0;
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  let node;
-
-  while ((node = walker.nextNode())) {
-    if (currentOffset + node.length >= targetOffset) {
-      return { node, offset: targetOffset - currentOffset };
-    }
-    currentOffset += node.length;
-  }
-
-  // If we've gone past the end, return the last possible position
-  const lastTextNode = element.lastChild?.lastChild;
-  return { node: lastTextNode, offset: lastTextNode?.length || 0 };
-}
-
-function handlePaste(event, lineIndex) {
-  event.preventDefault();
-  const pastedText = (event.clipboardData || window.clipboardData).getData("text");
-  const selection = window.getSelection();
-  const range = selection.getRangeAt(0);
-  const startOffset = range.startOffset;
-
-  const currentText = motd.value[lineIndex].reduce((acc, segment) => acc + segment.text, "");
-  const newText = currentText.slice(0, startOffset) + pastedText + currentText.slice(startOffset);
-
-  if (newText.length <= 45) {
-    // Preserve existing styles by matching new text with old segments
-    const newLine = [];
-    let currentPos = 0;
-    for (const segment of motd.value[lineIndex]) {
-      if (currentPos < startOffset) {
-        const segmentEnd = Math.min(currentPos + segment.text.length, startOffset);
-        newLine.push({ ...segment, text: newText.slice(currentPos, segmentEnd) });
-        currentPos = segmentEnd;
-      } else if (currentPos >= startOffset + pastedText.length) {
-        newLine.push({ ...segment, text: newText.slice(currentPos) });
-        break;
-      }
-    }
-    // Insert pasted text as a new segment
-    if (currentPos < startOffset + pastedText.length) {
-      newLine.push({
-        text: newText.slice(currentPos, startOffset + pastedText.length),
-        color: "White",
-      });
-    }
-    motd.value[lineIndex] = newLine;
-
-    nextTick(() => {
-      const lineElement = document.querySelectorAll("[contenteditable]")[lineIndex];
-      lineElement.innerHTML = renderLine(newLine);
-      const newRange = document.createRange();
-      const sel = window.getSelection();
-      newRange.setStart(lineElement.childNodes[0], startOffset + pastedText.length);
-      newRange.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(newRange);
-    });
-  }
-}
-</script>
-
-<style scoped>
-.minecraft-font {
-  font-family: "Minecraft", monospace;
-  font-size: 16px;
-  line-height: 1.5;
-}
-
-[contenteditable] {
-  outline: none;
-}
-</style>
-
-<style scoped>
-@font-face {
-  font-family: "Monocraft";
-  src: url("/Monocraft.ttf") format("truetype");
-}
-
-.font-minecraft {
-  font-family: "Monocraft", monospace;
-}
-
-.mcbg {
-  background: url("@/assets/images/servers/minecraft-background-dark.png") repeat center center;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease-in-out;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
-  opacity: 0;
-}
-</style>

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

@@ -53,7 +53,7 @@
         </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">Minecraft version</div>
+          <div class="text-lg font-bold text-contrast">Minecraft version</div>
           <UiServersTeleportDropdownMenu
             v-model="selectedMCVersion"
             name="mcVersion"
@@ -61,6 +61,20 @@
             class="w-full max-w-[100%]"
             placeholder="Select Minecraft version..."
           />
+          <div class="mt-2 flex items-center justify-between gap-2">
+            <label for="toggle-snapshots" class="font-semibold"> Show snapshot versions </label>
+            <div
+              v-tooltip="
+                isSnapshotSelected ? 'A snapshot version is currently selected.' : undefined
+              "
+            >
+              <Toggle
+                id="toggle-snapshots"
+                v-model="showSnapshots"
+                :disabled="isSnapshotSelected"
+              />
+            </div>
+          </div>
         </div>
 
         <div
@@ -74,7 +88,7 @@
           }"
         >
           <div class="flex flex-col gap-2">
-            <div class="text-sm font-bold text-contrast">{{ selectedLoader }} version</div>
+            <div class="text-lg font-bold text-contrast">{{ selectedLoader }} version</div>
 
             <template v-if="!selectedMCVersion">
               <div
@@ -177,8 +191,9 @@
 </template>
 
 <script setup lang="ts">
-import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
-import { RightArrowIcon, XIcon, ServerIcon, DropdownIcon } from "@modrinth/assets";
+import { BackupWarning, ButtonStyled, NewModal, Toggle } from "@modrinth/ui";
+import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from "@modrinth/assets";
+import { $fetch } from "ofetch";
 import type { Server } from "~/composables/pyroServers";
 import type { Loaders } from "~/types/servers";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
@@ -214,6 +229,7 @@ const hardReset = ref(false);
 const isLoading = ref(false);
 const loadingServerCheck = ref(false);
 const serverCheckError = ref("");
+const showSnapshots = ref(false);
 
 const selectedLoader = ref<Loaders>("Vanilla");
 const selectedMCVersion = ref("");
@@ -226,6 +242,22 @@ const cachedVersions = ref<VersionCache>({});
 
 const versionStrings = ["forge", "fabric", "quilt", "neo"] as const;
 
+const isSnapshotSelected = computed(() => {
+  if (selectedMCVersion.value) {
+    const selected = tags.value.gameVersions.find((x) => x.version === selectedMCVersion.value);
+    if (selected?.version_type !== "release") {
+      return true;
+    }
+  }
+  return false;
+});
+
+const getLoaderVersions = async (loader: string) => {
+  return await $fetch(
+    `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/manifest.json`,
+  );
+};
+
 const fetchLoaderVersions = async () => {
   const versions = await Promise.all(
     versionStrings.map(async (loader) => {
@@ -234,7 +266,7 @@ const fetchLoaderVersions = async () => {
           throw new Error("Failed to fetch loader versions");
         }
         try {
-          const res = await $fetch(`/loader-versions?loader=${loader}`);
+          const res = await getLoaderVersions(loader);
           return { [loader]: (res as any).gameVersions };
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (_) {
@@ -277,11 +309,11 @@ const fetchPurpurVersions = async (mcVersion: string) => {
   }
 };
 
-const selectedLoaderVersions = computed(() => {
+const selectedLoaderVersions = computed<string[]>(() => {
   const loader = selectedLoader.value.toLowerCase();
 
   if (loader === "paper") {
-    return paperVersions.value[selectedMCVersion.value] || [];
+    return paperVersions.value[selectedMCVersion.value].map((x) => `${x}`) || [];
   }
 
   if (loader === "purpur") {
@@ -325,13 +357,22 @@ watch(selectedLoader, async () => {
 watch(
   selectedLoaderVersions,
   (newVersions) => {
-    if (newVersions.length > 0 && !selectedLoaderVersion.value) {
+    if (
+      newVersions.length > 0 &&
+      (!selectedLoaderVersion.value || !newVersions.includes(selectedLoaderVersion.value))
+    ) {
       selectedLoaderVersion.value = String(newVersions[0]);
     }
   },
   { immediate: true },
 );
 
+const getLoaderVersion = async (loader: string, version: string) => {
+  return await $fetch(
+    `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/versions/${version}.json`,
+  );
+};
+
 const checkVersionAvailability = async (version: string) => {
   if (!version || version.trim().length < 3) return;
 
@@ -339,9 +380,7 @@ const checkVersionAvailability = async (version: string) => {
   loadingServerCheck.value = true;
 
   try {
-    const mcRes =
-      cachedVersions.value[version] ||
-      (await $fetch(`/loader-versions?loader=minecraft&version=${version}`));
+    const mcRes = cachedVersions.value[version] || (await getLoaderVersion("minecraft", version));
 
     cachedVersions.value[version] = mcRes;
 
@@ -377,13 +416,15 @@ onMounted(() => {
 });
 
 const tags = useTags();
-const mcVersions = tags.value.gameVersions
-  .filter((x) => x.version_type === "release")
-  .map((x) => x.version)
-  .filter((x) => {
-    const segment = parseInt(x.split(".")[1], 10);
-    return !isNaN(segment) && segment > 2;
-  });
+const mcVersions = computed(() =>
+  tags.value.gameVersions
+    .filter((x) =>
+      showSnapshots.value
+        ? x.version_type === "snapshot" || x.version_type === "release"
+        : x.version_type === "release",
+    )
+    .map((x) => x.version),
+);
 
 const isDangerous = computed(() => hardReset.value);
 const canInstall = computed(() => {
@@ -448,6 +489,9 @@ const handleReinstall = async () => {
 
 const onShow = () => {
   selectedMCVersion.value = props.server.general?.mc_version || "";
+  if (isSnapshotSelected.value) {
+    showSnapshots.value = true;
+  }
 };
 
 const onHide = () => {

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

@@ -1,14 +0,0 @@
-<template>
-  <a
-    href="https://pyro.host"
-    target="_blank"
-    class="mx-auto mt-8 flex select-none flex-row items-center gap-2 hover:underline"
-  >
-    <PyroIcon class="size-4 text-secondary" />
-    <span class="text-sm text-secondary">Powered by Pyro</span>
-  </a>
-</template>
-
-<script setup lang="ts">
-import { PyroIcon } from "@modrinth/assets";
-</script>

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

@@ -60,15 +60,7 @@
       Your server's hardware is currently being upgraded and will be back online shortly.
     </div>
     <div
-      v-if="status === 'suspended' && suspension_reason === 'support'"
-      class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-blue p-4 text-sm font-bold text-contrast"
-    >
-      <HammerIcon />
-      You recently requested support for your server and we are actively working on it. It will be
-      back online shortly.
-    </div>
-    <div
-      v-else-if="status === 'suspended' && suspension_reason !== 'upgrading'"
+      v-else-if="status === 'suspended'"
       class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
     >
       <div class="flex flex-row gap-2">

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

@@ -32,68 +32,68 @@
           @mousedown.stop
           @mouseleave="handleMouseLeave"
         >
-          <ButtonStyled
+          <template
             v-for="(option, index) in filteredOptions"
-            :key="option.id"
-            type="transparent"
-            role="menuitem"
-            :color="option.color"
+            :key="isDivider(option) ? `divider-${index}` : option.id"
           >
-            <button
-              v-if="typeof option.action === 'function'"
-              :ref="
-                (el) => {
-                  if (el) menuItemsRef[index] = el as HTMLElement;
-                }
-              "
-              class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
-              :aria-selected="index === selectedIndex"
-              :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-              @click="handleItemClick(option, index)"
-              @focus="selectedIndex = index"
-              @mouseover="handleMouseOver(index)"
-            >
-              <slot :name="option.id">{{ option.id }}</slot>
-            </button>
-            <nuxt-link
-              v-else-if="typeof option.action === 'string' && option.action.startsWith('/')"
-              :ref="
-                (el) => {
-                  if (el) menuItemsRef[index] = el as HTMLElement;
-                }
-              "
-              :to="option.action"
-              class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
-              :aria-selected="index === selectedIndex"
-              :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-              @click="handleItemClick(option, index)"
-              @focus="selectedIndex = index"
-              @mouseover="handleMouseOver(index)"
-            >
-              <slot :name="option.id">{{ option.id }}</slot>
-            </nuxt-link>
-            <a
-              v-else-if="typeof option.action === 'string' && !option.action.startsWith('http')"
-              :ref="
-                (el) => {
-                  if (el) menuItemsRef[index] = el as HTMLElement;
-                }
-              "
-              :href="option.action"
-              target="_blank"
-              class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
-              :aria-selected="index === selectedIndex"
-              :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-              @click="handleItemClick(option, index)"
-              @focus="selectedIndex = index"
-              @mouseover="handleMouseOver(index)"
-            >
-              <slot :name="option.id">{{ option.id }}</slot>
-            </a>
-            <span v-else>
-              <slot :name="option.id">{{ option.id }}</slot>
-            </span>
-          </ButtonStyled>
+            <div v-if="isDivider(option)" class="h-px w-full bg-button-bg"></div>
+            <ButtonStyled v-else type="transparent" role="menuitem" :color="option.color">
+              <button
+                v-if="typeof option.action === 'function'"
+                :ref="
+                  (el) => {
+                    if (el) menuItemsRef[index] = el as HTMLElement;
+                  }
+                "
+                class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
+                :aria-selected="index === selectedIndex"
+                :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
+                @click="handleItemClick(option, index)"
+                @focus="selectedIndex = index"
+                @mouseover="handleMouseOver(index)"
+              >
+                <slot :name="option.id">{{ option.id }}</slot>
+              </button>
+              <nuxt-link
+                v-else-if="typeof option.action === 'string' && option.action.startsWith('/')"
+                :ref="
+                  (el) => {
+                    if (el) menuItemsRef[index] = el as HTMLElement;
+                  }
+                "
+                :to="option.action"
+                class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
+                :aria-selected="index === selectedIndex"
+                :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
+                @click="handleItemClick(option, index)"
+                @focus="selectedIndex = index"
+                @mouseover="handleMouseOver(index)"
+              >
+                <slot :name="option.id">{{ option.id }}</slot>
+              </nuxt-link>
+              <a
+                v-else-if="typeof option.action === 'string' && !option.action.startsWith('http')"
+                :ref="
+                  (el) => {
+                    if (el) menuItemsRef[index] = el as HTMLElement;
+                  }
+                "
+                :href="option.action"
+                target="_blank"
+                class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
+                :aria-selected="index === selectedIndex"
+                :style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
+                @click="handleItemClick(option, index)"
+                @focus="selectedIndex = index"
+                @mouseover="handleMouseOver(index)"
+              >
+                <slot :name="option.id">{{ option.id }}</slot>
+              </a>
+              <span v-else>
+                <slot :name="option.id">{{ option.id }}</slot>
+              </span>
+            </ButtonStyled>
+          </template>
         </div>
       </Transition>
     </Teleport>
@@ -112,9 +112,20 @@ interface Option {
   color?: "standard" | "brand" | "red" | "orange" | "green" | "blue" | "purple";
 }
 
+type Divider = {
+  divider: true;
+  shown?: boolean;
+};
+
+type Item = Option | Divider;
+
+function isDivider(item: Item): item is Divider {
+  return (item as Divider).divider;
+}
+
 const props = withDefaults(
   defineProps<{
-    options: Option[];
+    options: Item[];
     hoverable?: boolean;
   }>(),
   {
@@ -338,7 +349,9 @@ const handleKeydown = (event: KeyboardEvent) => {
     case " ":
       event.preventDefault();
       if (selectedIndex.value >= 0) {
-        selectOption(filteredOptions.value[selectedIndex.value]);
+        const option = filteredOptions.value[selectedIndex.value];
+        if (isDivider(option)) break;
+        selectOption(option);
       }
       break;
     case "Escape":
@@ -361,8 +374,9 @@ const handleKeydown = (event: KeyboardEvent) => {
     default:
       if (event.key.length === 1) {
         typeAheadBuffer.value += event.key.toLowerCase();
-        const matchIndex = filteredOptions.value.findIndex((option) =>
-          option.id.toLowerCase().startsWith(typeAheadBuffer.value),
+        const matchIndex = filteredOptions.value.findIndex(
+          (option) =>
+            !isDivider(option) && option.id.toLowerCase().startsWith(typeAheadBuffer.value),
         );
         if (matchIndex !== -1) {
           selectedIndex.value = matchIndex;

apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue

@@ -3,6 +3,7 @@ import dayjs from "dayjs";
 import { ButtonStyled, commonMessages, CopyCode, ServerNotice, TagItem } from "@modrinth/ui";
 import { EditIcon, SettingsIcon, TrashIcon } from "@modrinth/assets";
 import { ServerNotice as ServerNoticeType } from "@modrinth/utils";
+import { useRelativeTime } from "@modrinth/ui";
 import {
   DISMISSABLE,
   getDismissableMetadata,
@@ -11,6 +12,7 @@ import {
 import { useVIntl } from "@vintl/vintl";
 
 const { formatMessage } = useVIntl();
+const formatRelativeTime = useRelativeTime();
 
 const props = defineProps<{
   notice: ServerNoticeType;
@@ -25,7 +27,7 @@ const props = defineProps<{
       <div class="text-sm">
         <span v-if="notice.announce_at">
           {{ dayjs(notice.announce_at).format("MMM D, YYYY [at] h:mm A") }} ({{
-            dayjs(notice.announce_at).fromNow()
+            formatRelativeTime(notice.announce_at)
           }})
         </span>
         <template v-else> Never begins </template>
@@ -35,7 +37,7 @@ const props = defineProps<{
           v-if="notice.expires"
           v-tooltip="dayjs(notice.expires).format('MMMM D, YYYY [at] h:mm A')"
         >
-          {{ dayjs(notice.expires).fromNow() }}
+          {{ formatRelativeTime(notice.expires) }}
         </span>
         <template v-else> Never expires </template>
       </div>

apps/frontend/src/components/ui/thread/ThreadMessage.vue

@@ -103,7 +103,7 @@ import {
   ModrinthIcon,
   ScaleIcon,
 } from "@modrinth/assets";
-import { AutoLink, OverflowMenu } from "@modrinth/ui";
+import { AutoLink, OverflowMenu, useRelativeTime } from "@modrinth/ui";
 import { renderString } from "@modrinth/utils";
 import Avatar from "~/components/ui/Avatar.vue";
 import Badge from "~/components/ui/Badge.vue";

apps/frontend/src/composables/country.js

@@ -1,6 +0,0 @@
-export const useUserCountry = () =>
-  useState("userCountry", () => {
-    const headers = useRequestHeaders(["cf-ipcountry"]);
-
-    return headers["cf-ipcountry"] ?? "US";
-  });

apps/frontend/src/composables/country.ts

@@ -0,0 +1,36 @@
+import { useState, useRequestHeaders } from "#imports";
+
+export const useUserCountry = () => {
+  const country = useState<string>("userCountry", () => "US");
+  const fromServer = useState<boolean>("userCountryFromServer", () => false);
+
+  if (import.meta.server) {
+    const headers = useRequestHeaders(["cf-ipcountry", "accept-language"]);
+    const cf = headers["cf-ipcountry"];
+    if (cf) {
+      country.value = cf.toUpperCase();
+      fromServer.value = true;
+    } else {
+      const al = headers["accept-language"] || "";
+      const tag = al.split(",")[0];
+      const val = tag.split("-")[1]?.toLowerCase();
+      if (val) {
+        country.value = val;
+        fromServer.value = true;
+      }
+    }
+  }
+
+  if (import.meta.client) {
+    onMounted(() => {
+      if (fromServer.value) return;
+      const lang = navigator.language || navigator.userLanguage || "";
+      const region = lang.split("-")[1];
+      if (region) {
+        country.value = region.toUpperCase();
+      }
+    });
+  }
+
+  return country;
+};

apps/frontend/src/composables/date.js

@@ -1,17 +0,0 @@
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-dayjs.extend(relativeTime); // eslint-disable-line import/no-named-as-default-member
-
-export const useCurrentDate = () => useState("currentDate", () => Date.now());
-
-export const updateCurrentDate = () => {
-  const currentDate = useCurrentDate();
-
-  currentDate.value = Date.now();
-};
-
-export const fromNow = (date) => {
-  const currentDate = useCurrentDate();
-  return dayjs(date).from(currentDate.value);
-};

apps/frontend/src/composables/how-ago.ts

@@ -1,18 +0,0 @@
-import { createFormatter, type Formatter } from "@vintl/how-ago";
-import type { IntlController } from "@vintl/vintl/controller";
-
-const formatters = new WeakMap<IntlController<any>, Formatter>();
-
-export function useRelativeTime(): Formatter {
-  const vintl = useVIntl();
-
-  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);
-  }
-
-  return formatter;
-}

apps/frontend/src/composables/notifs.js

@@ -11,11 +11,13 @@ export const addNotification = (notification) => {
   );
   if (existingNotif) {
     setNotificationTimer(existingNotif);
+    existingNotif.count++;
 
     return;
   }
 
   notification.id = new Date();
+  notification.count = 1;
 
   setNotificationTimer(notification);
   notifications.value.push(notification);

apps/frontend/src/composables/pyroServers.ts

@@ -1,7 +1,7 @@
 // usePyroServer is a composable that interfaces with the REDACTED API to get data and control the users server
 import { $fetch, FetchError } from "ofetch";
 import type { ServerNotice } from "@modrinth/utils";
-import type { WSBackupState, WSBackupTask } from "~/types/servers.ts";
+import type { FilesystemOp, FSQueuedOp, WSBackupState, WSBackupTask } from "~/types/servers.ts";
 
 interface PyroFetchOptions {
   method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
@@ -40,12 +40,19 @@ class PyroServerError extends Error {
   }
 }
 
-export class PyroServersFetchError extends Error {
+type V1ErrorInfo = {
+  context?: string;
+  error: string;
+  description: string;
+};
+
+export class ServersError extends Error {
   constructor(
     message: string,
     public readonly statusCode?: number,
     public readonly originalError?: Error,
     public readonly module?: string,
+    public readonly v1Error?: V1ErrorInfo,
   ) {
     let errorMessage = message;
     let method = "GET";
@@ -96,17 +103,35 @@ export class PyroServersFetchError extends Error {
   }
 }
 
+export const handleError = (err: any) => {
+  if (err instanceof ServersError && err.v1Error) {
+    addNotification({
+      title: err.v1Error?.context ?? `An error occurred`,
+      type: "error",
+      text: err.v1Error.description,
+      errorCode: err.v1Error.error,
+    });
+  } else {
+    addNotification({
+      title: "An error occurred",
+      type: "error",
+      text: err.message ?? (err.data ? err.data.description : err),
+    });
+  }
+};
+
 async function PyroFetch<T>(
   path: string,
   options: PyroFetchOptions = {},
   module?: string,
+  errorContext?: string,
 ): Promise<T> {
   const config = useRuntimeConfig();
   const auth = await useAuth();
   const authToken = auth.value?.token;
 
   if (!authToken) {
-    throw new PyroServersFetchError("Missing auth token", 401, undefined, module);
+    throw new ServersError("Missing auth token", 401, undefined, module);
   }
 
   const {
@@ -124,16 +149,18 @@ async function PyroFetch<T>(
   );
 
   if (!base) {
-    throw new PyroServersFetchError(
-      "Configuration error: Missing PYRO_BASE_URL",
-      500,
-      undefined,
-      module,
-    );
+    throw new ServersError("Configuration error: Missing PYRO_BASE_URL", 500, undefined, module);
   }
 
-  const fullUrl = override?.url
-    ? `https://${override.url}/${path.replace(/^\//, "")}`
+  const versionString = `v${version}`;
+
+  let newOverrideUrl = override?.url;
+  if (newOverrideUrl && newOverrideUrl.includes("v0") && version !== 0) {
+    newOverrideUrl = newOverrideUrl.replace("v0", versionString);
+  }
+
+  const fullUrl = newOverrideUrl
+    ? `https://${newOverrideUrl}/${path.replace(/^\//, "")}`
     : `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`;
 
   const headers: Record<string, string> = {
@@ -170,11 +197,20 @@ async function PyroFetch<T>(
       attempts++;
 
       if (error instanceof FetchError) {
+        let v1Error: V1ErrorInfo | undefined;
+
+        if (error.data.error && error.data.description) {
+          v1Error = {
+            context: errorContext,
+            ...error.data,
+          };
+        }
+
         const statusCode = error.response?.status;
         const isRetryable = statusCode ? [408, 429, 500, 502, 503, 504].includes(statusCode) : true;
 
         if (!isRetryable || attempts >= maxAttempts) {
-          throw new PyroServersFetchError(error.message, statusCode, error, module);
+          throw new ServersError(error.message, statusCode, error, module, v1Error);
         }
 
         const delay = Math.min(1000 * Math.pow(2, attempts - 1) + Math.random() * 1000, 10000);
@@ -182,7 +218,7 @@ async function PyroFetch<T>(
         continue;
       }
 
-      throw new PyroServersFetchError(
+      throw new ServersError(
         "Unexpected error during fetch operation",
         undefined,
         error as Error,
@@ -271,10 +307,8 @@ interface General {
     | "moderated"
     | "paymentfailed"
     | "cancelled"
-    | "other"
-    | "transferring"
     | "upgrading"
-    | "support"
+    | "other"
     | (string & {});
   loader: string;
   loader_version: string;
@@ -419,7 +453,7 @@ const processImage = async (iconUrl: string | undefined) => {
         }
       }
     } catch (error) {
-      if (error instanceof PyroServersFetchError && error.statusCode === 404 && iconUrl) {
+      if (error instanceof ServersError && error.statusCode === 404 && iconUrl) {
         try {
           const response = await fetch(iconUrl);
           if (!response.ok) throw new Error("Failed to fetch icon");
@@ -892,7 +926,7 @@ const retryWithAuth = async (requestFn: () => Promise<any>) => {
   try {
     return await requestFn();
   } catch (error) {
-    if (error instanceof PyroServersFetchError && error.statusCode === 401) {
+    if (error instanceof ServersError && error.statusCode === 401) {
       await internalServerReference.value.refresh(["fs"]);
       return await requestFn();
     }
@@ -1051,6 +1085,68 @@ const moveFileOrFolder = (path: string, newPath: string) => {
   });
 };
 
+const clearQueuedOps = () => {
+  internalServerReference.value.fs.queuedOps = [];
+};
+
+const removeQueuedOp = (op: FSQueuedOp["op"], src: string) => {
+  internalServerReference.value.fs.queuedOps = internalServerReference.value.fs.queuedOps.filter(
+    (x: FSQueuedOp) => x.op !== op || x.src !== src,
+  );
+};
+
+const extractFile = (path: string, override = true, dry = false, silentQueue = false) =>
+  retryWithAuth(async () => {
+    console.log(
+      `Extracting: ${path}` + (dry ? " (dry run)" : "") + (silentQueue ? " (silent)" : ""),
+    );
+
+    const encodedPath = encodeURIComponent(path);
+
+    if (!silentQueue) {
+      internalServerReference.value.fs.queuedOps.push({
+        op: "unarchive",
+        src: path,
+      });
+
+      setTimeout(() => internalServerReference.value.fs.removeQueuedOp("unarchive", path), 4000);
+    }
+
+    return (await PyroFetch(
+      `/unarchive?src=${encodedPath}&trg=/&override=${override}&dry=${dry}`,
+      {
+        method: "POST",
+        override: internalServerReference.value.fs.auth,
+        version: 1,
+      },
+      undefined,
+      "Error extracting file",
+    ).catch((err) => {
+      removeQueuedOp("unarchive", path);
+      throw err;
+    })) as { modpack_name: string | null };
+  });
+
+const modifyOp = (id: string, action: "dismiss" | "cancel") =>
+  retryWithAuth(async () => {
+    return await PyroFetch(
+      `/ops/${action}?id=${id}`,
+      {
+        method: "POST",
+        override: internalServerReference.value.fs.auth,
+        version: 1,
+      },
+      undefined,
+      `Error ${action === "dismiss" ? "dismissing" : "cancelling"} filesystem operation`,
+    ).then(() => {
+      internalServerReference.value.fs.opsQueuedForModification =
+        internalServerReference.value.fs.opsQueuedForModification.filter((x: string) => x !== id);
+      internalServerReference.value.fs.ops = internalServerReference.value.fs.ops.filter(
+        (x: FilesystemOp) => x.id !== id,
+      );
+    });
+  });
+
 const deleteFileOrFolder = (path: string, recursive: boolean) => {
   const encodedPath = encodeURIComponent(path);
   return retryWithAuth(async () => {
@@ -1104,9 +1200,9 @@ const modules: any = {
         return data;
       } catch (error) {
         const fetchError =
-          error instanceof PyroServersFetchError
+          error instanceof ServersError
             ? error
-            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+            : new ServersError("Unknown error occurred", undefined, error as Error);
 
         return {
           status: "error",
@@ -1135,9 +1231,9 @@ const modules: any = {
         };
       } catch (error) {
         const fetchError =
-          error instanceof PyroServersFetchError
+          error instanceof ServersError
             ? error
-            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+            : new ServersError("Unknown error occurred", undefined, error as Error);
 
         return {
           data: [],
@@ -1160,9 +1256,9 @@ const modules: any = {
         };
       } catch (error) {
         const fetchError =
-          error instanceof PyroServersFetchError
+          error instanceof ServersError
             ? error
-            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+            : new ServersError("Unknown error occurred", undefined, error as Error);
 
         return {
           data: [],
@@ -1196,9 +1292,9 @@ const modules: any = {
         };
       } catch (error) {
         const fetchError =
-          error instanceof PyroServersFetchError
+          error instanceof ServersError
             ? error
-            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+            : new ServersError("Unknown error occurred", undefined, error as Error);
 
         return {
           allocations: [],
@@ -1221,9 +1317,9 @@ const modules: any = {
         return await PyroFetch<Startup>(`servers/${serverId}/startup`, {}, "startup");
       } catch (error) {
         const fetchError =
-          error instanceof PyroServersFetchError
+          error instanceof ServersError
             ? error
-            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+            : new ServersError("Unknown error occurred", undefined, error as Error);
 
         return {
           error: {
@@ -1241,9 +1337,9 @@ const modules: any = {
         return await PyroFetch<JWTAuth>(`servers/${serverId}/ws`, {}, "ws");
       } catch (error) {
         const fetchError =
-          error instanceof PyroServersFetchError
+          error instanceof ServersError
             ? error
-            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+            : new ServersError("Unknown error occurred", undefined, error as Error);
 
         return {
           error: {
@@ -1255,14 +1351,16 @@ const modules: any = {
     },
   },
   fs: {
+    queuedOps: [],
+    opsQueuedForModification: [],
     get: async (serverId: string) => {
       try {
         return { auth: await PyroFetch<JWTAuth>(`servers/${serverId}/fs`, {}, "fs") };
       } catch (error) {
         const fetchError =
-          error instanceof PyroServersFetchError
+          error instanceof ServersError
             ? error
-            : new PyroServersFetchError("Unknown error occurred", undefined, error as Error);
+            : new ServersError("Unknown error occurred", undefined, error as Error);
 
         return {
           auth: undefined,
@@ -1281,6 +1379,10 @@ const modules: any = {
     moveFileOrFolder,
     deleteFileOrFolder,
     downloadFile,
+    extractFile,
+    removeQueuedOp,
+    clearQueuedOps,
+    modifyOp,
   },
 };
 
@@ -1588,10 +1690,29 @@ type FSFunctions = {
    * @returns
    */
   downloadFile: (path: string, raw?: boolean) => Promise<any>;
+
+  /**
+   * @param path - The path of the file to extract
+   * @returns
+   */
+  extractFile: (
+    path: string,
+    override?: boolean,
+    dry?: boolean,
+    silentQueue?: boolean,
+  ) => Promise<{
+    modpack_name: string | null;
+    conflicting_files: string[];
+  }>;
+
+  removeQueuedOp: (op: FSQueuedOp["op"], src: string) => void;
+  clearQueuedOps: () => void;
+
+  modifyOp: (id: string, action: "dismiss" | "cancel") => Promise<any>;
 };
 
 type ModuleError = {
-  error: PyroServersFetchError;
+  error: ServersError;
   timestamp: number;
 };
 
@@ -1624,8 +1745,11 @@ type WSModule = JWTAuth & {
   error?: ModuleError;
 };
 
-type FSModule = {
+export type FSModule = {
   auth: JWTAuth;
+  ops: FilesystemOp[];
+  queuedOps: FSQueuedOp[];
+  opsQueuedForModification: string[];
   error?: ModuleError;
 } & FSFunctions;
 

apps/frontend/src/error.vue

@@ -5,12 +5,7 @@
         <Logo404 />
       </div>
       <div class="error-box" :class="{ 'has-bot': !is404 }">
-        <img
-          v-if="!is404"
-          src="https://cdn-raw.modrinth.com/sad-bot.webp"
-          alt="Sad Modrinth bot"
-          class="error-box__sad-bot"
-        />
+        <img v-if="!is404" :src="SadRinthbot" alt="Sad Modrinth bot" class="error-box__sad-bot" />
         <div v-if="!is404" class="error-box__top-glow" />
         <div class="error-box__body">
           <h1 class="error-box__title">{{ formatMessage(errorMessages.title) }}</h1>
@@ -55,6 +50,7 @@
 
 <script setup>
 import { defineMessage, useVIntl } from "@vintl/vintl";
+import { SadRinthbot } from "@modrinth/assets";
 import Logo404 from "~/assets/images/404.svg";
 
 const { formatMessage } = useVIntl();
@@ -272,6 +268,19 @@ const routeMessages = [
   }
 }
 
+.error-graphic {
+  margin-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+
+  svg {
+    fill: var(--color-text);
+    color: var(--color-text);
+    width: min(15rem, 100%);
+    height: auto;
+  }
+}
+
 .error-box {
   background-color: var(--color-raised-bg);
   border-radius: 1.25rem;
@@ -281,105 +290,96 @@ const routeMessages = [
   gap: 1.25rem;
   box-shadow: var(--shadow-card);
   position: relative;
-}
 
-.error-box.has-bot {
-  margin-block: 120px;
-}
+  &.has-bot {
+    margin-block: 120px;
+  }
 
-.error-box p {
-  margin: 0;
-}
+  p {
+    margin: 0;
+  }
 
-.error-box a {
-  color: var(--color-brand);
-  font-weight: 600;
-}
+  a {
+    color: var(--color-brand);
+    font-weight: 600;
 
-.error-box a:hover,
-.error-box a:focus {
-  filter: brightness(1.125);
-  text-decoration: underline;
-}
+    &:hover,
+    &:focus {
+      filter: brightness(1.125);
+      text-decoration: underline;
+    }
+  }
 
-.error-graphic {
-  margin-bottom: 2rem;
-  display: flex;
-  justify-content: center;
-}
+  &__sad-bot {
+    --_bot-height: 112px;
+    position: absolute;
+    top: calc(-1 * var(--_bot-height));
+    right: 5rem;
+    width: auto;
+    height: var(--_bot-height);
 
-.error-graphic svg {
-  fill: var(--color-text);
-  color: var(--color-text);
+    @media screen and (max-width: 768px) {
+      --_bot-height: 70px;
+      right: 2rem;
+    }
+  }
 
-  width: min(15rem, 100%);
-  height: auto;
-}
+  &__top-glow {
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(
+      to right,
+      transparent 2rem,
+      var(--color-green) calc(100% - 13rem),
+      var(--color-green) calc(100% - 5rem),
+      transparent calc(100% - 2rem)
+    );
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.4;
+  }
 
-.error-box__sad-bot {
-  --_bot-height: 112px;
-  position: absolute;
-  top: calc(-1 * var(--_bot-height));
-  right: 5rem;
-  width: auto;
-  height: var(--_bot-height);
-}
+  &__title {
+    font-size: 2rem;
+    font-weight: 900;
+    margin: 0;
+  }
 
-.error-box__top-glow {
-  width: 100%;
-  height: 1px;
-  background: linear-gradient(
-    to right,
-    transparent 2rem,
-    var(--color-green) calc(100% - 13rem),
-    var(--color-green) calc(100% - 5rem),
-    transparent calc(100% - 2rem)
-  );
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0.4;
-}
+  &__subtitle {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
 
-.error-box__title {
-  font-size: 2rem;
-  font-weight: 900;
-  margin: 0;
-}
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
 
-.error-box__subtitle {
-  font-size: 1.25rem;
-  font-weight: 600;
-}
+  &__list-title {
+    font-weight: 600;
+  }
 
-.error-box__body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
+  &__list {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding-left: 1.25rem;
+  }
 
-.error-box__list-title {
-  font-weight: 600;
-}
+  li {
+    line-height: 1.5;
+  }
 
-.error-box__list {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding-left: 1.25rem;
-}
-
-.error-box li {
-  line-height: 1.5;
-}
-
-.error-box__details {
-  display: flex;
-  flex-direction: column;
-  color: var(--color-secondary);
-  gap: 0.25rem;
-  font-weight: 500;
-  font-size: 0.875rem;
+  &__details {
+    display: flex;
+    flex-direction: column;
+    color: var(--color-secondary);
+    gap: 0.25rem;
+    font-weight: 500;
+    font-size: 0.875rem;
+  }
 }
 </style>

apps/frontend/src/helpers/notifications.js

@@ -1,170 +0,0 @@
-import { useNuxtApp } from "#imports";
-
-async function getBulk(type, ids, apiVersion = 2) {
-  if (ids.length === 0) {
-    return [];
-  }
-
-  const url = `${type}?ids=${encodeURIComponent(JSON.stringify([...new Set(ids)]))}`;
-  return await useBaseFetch(url, { apiVersion });
-}
-
-export async function fetchExtraNotificationData(notifications) {
-  const bulk = {
-    projects: [],
-    reports: [],
-    threads: [],
-    users: [],
-    versions: [],
-    organizations: [],
-  };
-
-  for (const notification of notifications) {
-    if (notification.body) {
-      if (notification.body.project_id) {
-        bulk.projects.push(notification.body.project_id);
-      }
-      if (notification.body.version_id) {
-        bulk.versions.push(notification.body.version_id);
-      }
-      if (notification.body.report_id) {
-        bulk.reports.push(notification.body.report_id);
-      }
-      if (notification.body.thread_id) {
-        bulk.threads.push(notification.body.thread_id);
-      }
-      if (notification.body.invited_by) {
-        bulk.users.push(notification.body.invited_by);
-      }
-      if (notification.body.organization_id) {
-        bulk.organizations.push(notification.body.organization_id);
-      }
-    }
-  }
-
-  const reports = await getBulk("reports", bulk.reports);
-  for (const report of reports) {
-    if (report.item_type === "project") {
-      bulk.projects.push(report.item_id);
-    } else if (report.item_type === "user") {
-      bulk.users.push(report.item_id);
-    } else if (report.item_type === "version") {
-      bulk.versions.push(report.item_id);
-    }
-  }
-  const versions = await getBulk("versions", bulk.versions);
-  for (const version of versions) {
-    bulk.projects.push(version.project_id);
-  }
-  const [projects, threads, users, organizations] = await Promise.all([
-    getBulk("projects", bulk.projects),
-    getBulk("threads", bulk.threads),
-    getBulk("users", bulk.users),
-    getBulk("organizations", bulk.organizations, 3),
-  ]);
-  for (const notification of notifications) {
-    notification.extra_data = {};
-    if (notification.body) {
-      if (notification.body.project_id) {
-        notification.extra_data.project = projects.find(
-          (x) => x.id === notification.body.project_id,
-        );
-      }
-      if (notification.body.organization_id) {
-        notification.extra_data.organization = organizations.find(
-          (x) => x.id === notification.body.organization_id,
-        );
-      }
-      if (notification.body.report_id) {
-        notification.extra_data.report = reports.find((x) => x.id === notification.body.report_id);
-
-        const type = notification.extra_data.report.item_type;
-        if (type === "project") {
-          notification.extra_data.project = projects.find(
-            (x) => x.id === notification.extra_data.report.item_id,
-          );
-        } else if (type === "user") {
-          notification.extra_data.user = users.find(
-            (x) => x.id === notification.extra_data.report.item_id,
-          );
-        } else if (type === "version") {
-          notification.extra_data.version = versions.find(
-            (x) => x.id === notification.extra_data.report.item_id,
-          );
-          notification.extra_data.project = projects.find(
-            (x) => x.id === notification.extra_data.version.project_id,
-          );
-        }
-      }
-      if (notification.body.thread_id) {
-        notification.extra_data.thread = threads.find((x) => x.id === notification.body.thread_id);
-      }
-      if (notification.body.invited_by) {
-        notification.extra_data.invited_by = users.find(
-          (x) => x.id === notification.body.invited_by,
-        );
-      }
-      if (notification.body.version_id) {
-        notification.extra_data.version = versions.find(
-          (x) => x.id === notification.body.version_id,
-        );
-      }
-    }
-  }
-  return notifications;
-}
-
-export function groupNotifications(notifications) {
-  const grouped = [];
-
-  for (let i = 0; i < notifications.length; i++) {
-    const current = notifications[i];
-    const next = notifications[i + 1];
-    if (current.body && i < notifications.length - 1 && isSimilar(current, next)) {
-      current.grouped_notifs = [next];
-
-      let j = i + 2;
-      while (j < notifications.length && isSimilar(current, notifications[j])) {
-        current.grouped_notifs.push(notifications[j]);
-        j++;
-      }
-
-      grouped.push(current);
-      i = j - 1; // skip i to the last ungrouped
-    } else {
-      grouped.push(current);
-    }
-  }
-
-  return grouped;
-}
-
-function isSimilar(notifA, notifB) {
-  return !!notifA.body.project_id && notifA.body.project_id === notifB.body.project_id;
-}
-
-export async function markAsRead(ids) {
-  try {
-    await useBaseFetch(`notifications?ids=${JSON.stringify([...new Set(ids)])}`, {
-      method: "PATCH",
-    });
-    return (notifications) => {
-      const newNotifs = notifications;
-      newNotifs.forEach((notif) => {
-        if (ids.includes(notif.id)) {
-          notif.read = true;
-        }
-      });
-      return newNotifs;
-    };
-  } catch (err) {
-    const app = useNuxtApp();
-    app.$notify({
-      group: "main",
-      title: "Error marking notification as read",
-      text: err.data ? err.data.description : err,
-      type: "error",
-    });
-    return () => {};
-  }
-}

apps/frontend/src/helpers/notifications.ts

@@ -0,0 +1,185 @@
+import { useNuxtApp } from "#imports";
+
+// TODO: There needs to be a standardized way to get these types, eg; @modrinth/types generated from api schema. Later problem.
+type Project = { id: string };
+type Version = { id: string; project_id: string };
+type Report = { id: string; item_type: "project" | "user" | "version"; item_id: string };
+type Thread = { id: string };
+type User = { id: string };
+type Organization = { id: string };
+
+export type NotificationAction = {
+  title: string;
+  action_route: [string, string];
+};
+
+export type NotificationBody = {
+  project_id?: string;
+  version_id?: string;
+  report_id?: string;
+  thread_id?: string;
+  invited_by?: string;
+  organization_id?: string;
+};
+
+export type Notification = {
+  id: string;
+  user_id: string;
+  type: "project_update" | "team_invite" | "status_change" | "moderator_message";
+  title: string;
+  text: string;
+  link: string;
+  read: boolean;
+  created: string;
+  actions: NotificationAction[];
+  body?: NotificationBody;
+  extra_data?: Record<string, unknown>;
+  grouped_notifs?: Notification[];
+};
+
+async function getBulk<T extends { id: string }>(
+  type: string,
+  ids: string[],
+  apiVersion = 2,
+): Promise<T[]> {
+  if (!ids || ids.length === 0) {
+    return [];
+  }
+  const url = `${type}?ids=${encodeURIComponent(JSON.stringify([...new Set(ids)]))}`;
+  try {
+    const res = await useBaseFetch(url, { apiVersion });
+    return Array.isArray(res) ? res : [];
+  } catch {
+    return [];
+  }
+}
+
+export async function fetchExtraNotificationData(
+  notifications: Notification[],
+): Promise<Notification[]> {
+  const bulk = {
+    projects: [] as string[],
+    reports: [] as string[],
+    threads: [] as string[],
+    users: [] as string[],
+    versions: [] as string[],
+    organizations: [] as string[],
+  };
+
+  for (const notification of notifications) {
+    if (notification.body) {
+      if (notification.body.project_id) bulk.projects.push(notification.body.project_id);
+      if (notification.body.version_id) bulk.versions.push(notification.body.version_id);
+      if (notification.body.report_id) bulk.reports.push(notification.body.report_id);
+      if (notification.body.thread_id) bulk.threads.push(notification.body.thread_id);
+      if (notification.body.invited_by) bulk.users.push(notification.body.invited_by);
+      if (notification.body.organization_id)
+        bulk.organizations.push(notification.body.organization_id);
+    }
+  }
+
+  const reports = (await getBulk<Report>("reports", bulk.reports)).filter(Boolean);
+  for (const r of reports) {
+    if (!r?.item_type) continue;
+    if (r.item_type === "project") bulk.projects.push(r.item_id);
+    else if (r.item_type === "user") bulk.users.push(r.item_id);
+    else if (r.item_type === "version") bulk.versions.push(r.item_id);
+  }
+
+  const versions = (await getBulk<Version>("versions", bulk.versions)).filter(Boolean);
+  for (const v of versions) bulk.projects.push(v.project_id);
+
+  const [projects, threads, users, organizations] = await Promise.all([
+    getBulk<Project>("projects", bulk.projects),
+    getBulk<Thread>("threads", bulk.threads),
+    getBulk<User>("users", bulk.users),
+    getBulk<Organization>("organizations", bulk.organizations, 3),
+  ]);
+
+  for (const n of notifications) {
+    n.extra_data = {};
+    if (n.body) {
+      if (n.body.project_id)
+        n.extra_data.project = projects.find((x) => x.id === n.body!.project_id);
+      if (n.body.organization_id)
+        n.extra_data.organization = organizations.find((x) => x.id === n.body!.organization_id);
+      if (n.body.report_id) {
+        n.extra_data.report = reports.find((x) => x.id === n.body!.report_id);
+        const t = (n.extra_data.report as Report | undefined)?.item_type;
+        if (t === "project")
+          n.extra_data.project = projects.find(
+            (x) => x.id === (n.extra_data?.report as Report | undefined)?.item_id,
+          );
+        else if (t === "user")
+          n.extra_data.user = users.find(
+            (x) => x.id === (n.extra_data?.report as Report | undefined)?.item_id,
+          );
+        else if (t === "version") {
+          n.extra_data.version = versions.find(
+            (x) => x.id === (n.extra_data?.report as Report | undefined)?.item_id,
+          );
+          n.extra_data.project = projects.find(
+            (x) => x.id === (n.extra_data?.version as Version | undefined)?.project_id,
+          );
+        }
+      }
+      if (n.body.thread_id) n.extra_data.thread = threads.find((x) => x.id === n.body!.thread_id);
+      if (n.body.invited_by)
+        n.extra_data.invited_by = users.find((x) => x.id === n.body!.invited_by);
+      if (n.body.version_id)
+        n.extra_data.version = versions.find((x) => x.id === n.body!.version_id);
+    }
+  }
+  return notifications;
+}
+
+export function groupNotifications(notifications: Notification[]): Notification[] {
+  const grouped: Notification[] = [];
+  for (let i = 0; i < notifications.length; i++) {
+    const current = notifications[i];
+    const next = notifications[i + 1];
+    if (current.body && i < notifications.length - 1 && isSimilar(current, next)) {
+      current.grouped_notifs = [next];
+      let j = i + 2;
+      while (j < notifications.length && isSimilar(current, notifications[j])) {
+        current.grouped_notifs.push(notifications[j]);
+        j++;
+      }
+      grouped.push(current);
+      i = j - 1;
+    } else {
+      grouped.push(current);
+    }
+  }
+  return grouped;
+}
+
+function isSimilar(a: Notification, b: Notification | undefined): boolean {
+  return !!a?.body?.project_id && a.body!.project_id === b?.body?.project_id;
+}
+
+export async function markAsRead(
+  ids: string[],
+): Promise<(notifications: Notification[]) => Notification[]> {
+  try {
+    await useBaseFetch(`notifications?ids=${JSON.stringify([...new Set(ids)])}`, {
+      method: "PATCH",
+    });
+    return (notifications: Notification[]) => {
+      const newNotifs = notifications ?? [];
+      newNotifs.forEach((n) => {
+        if (ids.includes(n.id)) n.read = true;
+      });
+      return newNotifs;
+    };
+  } catch (err: any) {
+    const app: any = useNuxtApp();
+    app.$notify({
+      group: "main",
+      title: "Error marking notification as read",
+      text: err?.data?.description ?? err,
+      type: "error",
+    });
+    return () => [];
+  }
+}

apps/frontend/src/layouts/default.vue

@@ -27,76 +27,90 @@
     </div>
   </div>
   <div ref="main_page" class="layout" :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }">
-    <div
+    <PagewideBanner
       v-if="auth.user && !auth.user.email_verified && route.path !== '/auth/verify-email'"
-      class="email-nag"
+      variant="warning"
     >
-      <template v-if="auth.user.email">
-        <span>{{ formatMessage(verifyEmailBannerMessages.title) }}</span>
-        <button class="btn" @click="resendVerifyEmail">
+      <template #title>
+        <span>
+          {{
+            auth?.user?.email
+              ? formatMessage(verifyEmailBannerMessages.title)
+              : formatMessage(addEmailBannerMessages.title)
+          }}
+        </span>
+      </template>
+      <template #description>
+        <span>
+          {{
+            auth?.user?.email
+              ? formatMessage(verifyEmailBannerMessages.description)
+              : formatMessage(addEmailBannerMessages.description)
+          }}
+        </span>
+      </template>
+      <template #actions>
+        <button v-if="auth?.user?.email" class="btn" @click="resendVerifyEmail">
           {{ formatMessage(verifyEmailBannerMessages.action) }}
         </button>
-      </template>
-      <template v-else>
-        <span>{{ formatMessage(addEmailBannerMessages.title) }}</span>
-        <nuxt-link class="btn" to="/settings/account">
+        <nuxt-link v-else class="btn" to="/settings/account">
           <SettingsIcon aria-hidden="true" />
           {{ formatMessage(addEmailBannerMessages.action) }}
         </nuxt-link>
       </template>
-    </div>
-    <div
+    </PagewideBanner>
+    <PagewideBanner
       v-if="
-        user &&
-        user.subscriptions &&
         user.subscriptions.some((x) => x.status === 'payment-failed') &&
         route.path !== '/settings/billing'
       "
-      class="email-nag"
+      variant="error"
     >
-      <span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.title) }}</span>
-      <nuxt-link class="btn" to="/settings/billing">
-        <SettingsIcon aria-hidden="true" />
-        {{ formatMessage(subscriptionPaymentFailedBannerMessages.action) }}
-      </nuxt-link>
-    </div>
-    <div
+      <template #title>
+        <span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.title) }}</span>
+      </template>
+      <template #description>
+        <span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.description) }}</span>
+      </template>
+      <template #actions>
+        <nuxt-link class="btn" to="/settings/billing">
+          <SettingsIcon aria-hidden="true" />
+          {{ formatMessage(subscriptionPaymentFailedBannerMessages.action) }}
+        </nuxt-link>
+      </template>
+    </PagewideBanner>
+    <PagewideBanner
       v-if="
         config.public.apiBaseUrl.startsWith('https://staging-api.modrinth.com') &&
         !cosmetics.hideStagingBanner
       "
-      class="site-banner site-banner--warning [&>*]:z-[6]"
+      variant="warning"
     >
-      <div class="site-banner__title">
-        <IssuesIcon aria-hidden="true" />
+      <template #title>
         <span>{{ formatMessage(stagingBannerMessages.title) }}</span>
-      </div>
-      <div class="site-banner__description">
+      </template>
+      <template #description>
         {{ formatMessage(stagingBannerMessages.description) }}
-      </div>
-      <div class="site-banner__actions">
-        <Button transparent icon-only :action="hideStagingBanner" aria-label="Close banner"
-          ><XIcon aria-hidden="true"
-        /></Button>
-      </div>
-    </div>
-    <div
-      v-if="generatedStateErrors && generatedStateErrors.length > 0"
-      class="site-banner site-banner--warning [&>*]:z-[6]"
-    >
-      <div class="site-banner__title">
-        <IssuesIcon aria-hidden="true" />
+      </template>
+      <template #actions_right>
+        <Button transparent icon-only aria-label="Close" @click="hideStagingBanner">
+          <XIcon aria-hidden="true" />
+        </Button>
+      </template>
+    </PagewideBanner>
+    <PagewideBanner v-if="generatedStateErrors?.length" variant="error">
+      <template #title>
         <span>{{ formatMessage(failedToBuildBannerMessages.title) }}</span>
-      </div>
-      <div class="site-banner__description">
+      </template>
+      <template #description>
         {{
           formatMessage(failedToBuildBannerMessages.description, {
             errors: generatedStateErrors,
             url: config.public.apiBaseUrl,
           })
         }}
-      </div>
-    </div>
+      </template>
+    </PagewideBanner>
     <header
       class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
     >
@@ -692,7 +706,14 @@ import {
   GitHubIcon,
   ScaleIcon,
 } from "@modrinth/assets";
-import { Button, ButtonStyled, OverflowMenu, Avatar, commonMessages } from "@modrinth/ui";
+import {
+  Button,
+  ButtonStyled,
+  OverflowMenu,
+  PagewideBanner,
+  Avatar,
+  commonMessages,
+} from "@modrinth/ui";
 import { isAdmin, isStaff } from "@modrinth/utils";
 import { errors as generatedStateErrors } from "~/generated/state.json";
 
@@ -720,8 +741,13 @@ const basePopoutId = useId();
 
 const verifyEmailBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.verify-email.title",
-    defaultMessage: "For security purposes, please verify your email address on Modrinth.",
+    id: "layout.banner.account-action",
+    defaultMessage: "Account action required",
+  },
+  description: {
+    id: "layout.banner.verify-email.description",
+    defaultMessage:
+      "For security reasons, Modrinth needs you to verify the email address associated with your account.",
   },
   action: {
     id: "layout.banner.verify-email.action",
@@ -731,8 +757,13 @@ const verifyEmailBannerMessages = defineMessages({
 
 const addEmailBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.add-email.title",
-    defaultMessage: "For security purposes, please enter your email on Modrinth.",
+    id: "layout.banner.account-action",
+    defaultMessage: "Account action required",
+  },
+  description: {
+    id: "layout.banner.add-email.description",
+    defaultMessage:
+      "For security reasons, Modrinth needs you to register an email address to your account.",
   },
   action: {
     id: "layout.banner.add-email.button",
@@ -743,8 +774,12 @@ const addEmailBannerMessages = defineMessages({
 const subscriptionPaymentFailedBannerMessages = defineMessages({
   title: {
     id: "layout.banner.subscription-payment-failed.title",
+    defaultMessage: "Billing action required.",
+  },
+  description: {
+    id: "layout.banner.subscription-payment-failed.description",
     defaultMessage:
-      "Your subscription failed to renew. Please update your payment method to prevent losing access.",
+      "One or more subscriptions failed to renew. Please update your payment method to prevent losing access!",
   },
   action: {
     id: "layout.banner.subscription-payment-failed.button",
@@ -755,7 +790,7 @@ const subscriptionPaymentFailedBannerMessages = defineMessages({
 const stagingBannerMessages = defineMessages({
   title: {
     id: "layout.banner.staging.title",
-    defaultMessage: "You’re viewing Modrinth’s staging environment.",
+    defaultMessage: "You’re viewing Modrinth’s staging environment",
   },
   description: {
     id: "layout.banner.staging.description",
@@ -1052,7 +1087,6 @@ watch(
       document.body.removeAttribute("tabindex");
     }
 
-    updateCurrentDate();
     runAnalytics();
   },
 );
@@ -1348,72 +1382,6 @@ const footerLinks = [
   }
 }
 
-.email-nag {
-  z-index: 6;
-  position: relative;
-  background-color: var(--color-raised-bg);
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  padding: 0.5rem 1rem;
-}
-
-.site-banner--warning {
-  // On some pages, there's gradient backgrounds that seep underneath
-  // the banner, so we need to add a solid color underlay.
-  background-color: black;
-  border-bottom: 2px solid var(--color-red);
-  display: grid;
-  gap: 0.5rem;
-  grid-template: "title actions" "description actions";
-  padding-block: var(--gap-xl);
-  padding-inline: max(calc((100% - 80rem) / 2 + var(--gap-md)), var(--gap-xl));
-  z-index: 4;
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--color-red-bg);
-    z-index: 5;
-  }
-
-  .site-banner__title {
-    grid-area: title;
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    font-weight: bold;
-    font-size: var(--font-size-md);
-    color: var(--color-contrast);
-
-    svg {
-      color: var(--color-red);
-      width: 1.5rem;
-      height: 1.5rem;
-      flex-shrink: 0;
-    }
-  }
-
-  .site-banner__description {
-    grid-area: description;
-  }
-
-  .site-banner__actions {
-    grid-area: actions;
-  }
-
-  a {
-    color: var(--color-red);
-  }
-}
-
 @media (max-width: 1200px) {
   .app-btn {
     display: none;

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

@@ -159,7 +159,7 @@
     "message": "Subscribe to updates about Modrinth"
   },
   "auth.welcome.description": {
-    "message": "Thank you for creating an account. You can now follow and create projects, receive updates about your favorite projects, and more!"
+    "message": "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with amazing mods."
   },
   "auth.welcome.label.tos": {
     "message": "By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
@@ -344,35 +344,38 @@
   "layout.avatar.alt": {
     "message": "Your avatar"
   },
+  "layout.banner.account-action": {
+    "message": "Account action required"
+  },
   "layout.banner.add-email.button": {
     "message": "Visit account settings"
   },
-  "layout.banner.add-email.title": {
-    "message": "For security purposes, please enter your email on Modrinth."
-  },
   "layout.banner.build-fail.description": {
     "message": "This deploy of Modrinth's frontend failed to generate state from the API. This may be due to an outage or an error in configuration. Rebuild when the API is available. Error codes: {errors}; Current API URL is: {url}"
   },
   "layout.banner.build-fail.title": {
-    "message": "Error generating state from API when building."
+    "message": "Error generating state from API when building"
   },
   "layout.banner.staging.description": {
     "message": "The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance."
   },
   "layout.banner.staging.title": {
-    "message": "You’re viewing Modrinth’s staging environment."
+    "message": "You’re viewing Modrinth’s staging environment"
   },
   "layout.banner.subscription-payment-failed.button": {
     "message": "Update billing info"
   },
   "layout.banner.subscription-payment-failed.title": {
-    "message": "Your subscription failed to renew. Please update your payment method to prevent losing access."
+    "message": "Billing action required"
+  },
+  "layout.banner.subscription-payment-failed.description": {
+    "message": "One or more subscriptions failed to renew. Please update your payment method to prevent losing access!"
   },
   "layout.banner.verify-email.action": {
     "message": "Re-send verification email"
   },
-  "layout.banner.verify-email.title": {
-    "message": "For security purposes, please verify your email address on Modrinth."
+  "layout.banner.verify-email.description": {
+    "message": "For security reasons, Modrinth needs you to verify the email address associated with your account."
   },
   "layout.footer.about": {
     "message": "About"

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

@@ -638,6 +638,7 @@
                     shown: !isMember,
                   },
                   { id: 'copy-id', action: () => copyId() },
+                  { id: 'copy-permalink', action: () => copyPermalink() },
                 ]"
                 aria-label="More options"
                 :dropdown-id="`${baseId}-more-options`"
@@ -659,6 +660,10 @@
                   <ClipboardCopyIcon aria-hidden="true" />
                   Copy ID
                 </template>
+                <template #copy-permalink>
+                  <ClipboardCopyIcon aria-hidden="true" />
+                  Copy permanent link
+                </template>
               </OverflowMenu>
             </ButtonStyled>
           </template>
@@ -866,6 +871,7 @@ import {
   ProjectSidebarDetails,
   ProjectSidebarLinks,
   ScrollablePanel,
+  useRelativeTime,
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
 import { formatCategory, isRejected, isStaff, isUnderReview, renderString } from "@modrinth/utils";
@@ -888,6 +894,7 @@ import { reportProject } from "~/utils/report-helpers.ts";
 
 const data = useNuxtApp();
 const route = useNativeRoute();
+const config = useRuntimeConfig();
 
 const auth = await useAuth();
 const user = await useUser();
@@ -1458,6 +1465,10 @@ async function copyId() {
   await navigator.clipboard.writeText(project.value.id);
 }
 
+async function copyPermalink() {
+  await navigator.clipboard.writeText(`${config.public.siteUrl}/project/${project.value.id}`);
+}
+
 const collapsedChecklist = ref(false);
 
 const showModerationChecklist = ref(false);

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

@@ -77,7 +77,7 @@
         This is a private conversation thread with the Modrinth moderators. They may message you
         with issues concerning this project. This thread is only checked when you submit your
         project for review. For additional inquiries, contact
-        <a href="https://support.modrinth.com">Modrinth support</a>.
+        <a href="https://support.modrinth.com">Modrinth Support</a>.
       </p>
       <ConversationThread
         v-if="thread"

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ModalConfirm
+    <ConfirmModal
       ref="modal_confirm"
       title="Are you sure you want to delete this project?"
       description="If you proceed, all versions and any attached data will be removed from our servers. This may break other projects, so be careful."
@@ -242,8 +242,8 @@
 import { formatProjectStatus } from "@modrinth/utils";
 import { UploadIcon, SaveIcon, TrashIcon, XIcon, IssuesIcon, CheckIcon } from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
+import { ConfirmModal } from "@modrinth/ui";
 import Avatar from "~/components/ui/Avatar.vue";
-import ModalConfirm from "~/components/ui/ModalConfirm.vue";
 import FileInput from "~/components/ui/FileInput.vue";
 
 const props = defineProps({

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ModalConfirm
+    <ConfirmModal
       ref="modal_remove"
       title="Are you sure you want to remove this project from the organization?"
       description="If you proceed, this project will no longer be managed by the organization."
@@ -530,8 +530,7 @@ import {
   OrganizationIcon,
   CrownIcon,
 } from "@modrinth/assets";
-import { Avatar, Badge, Card, Checkbox } from "@modrinth/ui";
-import ModalConfirm from "~/components/ui/ModalConfirm.vue";
+import { Avatar, Badge, Card, Checkbox, ConfirmModal } from "@modrinth/ui";
 import { removeSelfFromTeam } from "~/helpers/teams.js";
 
 const props = defineProps({

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

@@ -541,7 +541,6 @@
             :close-on-select="false"
             :clear-on-select="false"
             :show-labels="false"
-            :limit="6"
             :hide-selected="true"
             placeholder="Choose loaders..."
           />
@@ -566,7 +565,6 @@
               :close-on-select="false"
               :clear-on-select="false"
               :show-labels="false"
-              :limit="6"
               :hide-selected="true"
               :custom-label="(version) => version"
               placeholder="Choose versions..."
@@ -622,7 +620,7 @@
           <CopyCode :text="version.id" />
         </div>
         <div v-if="!isEditing && flags.developerMode">
-          <h4>Modrinth Maven</h4>
+          <h4>Maven coordinates</h4>
           <div class="maven-section">
             <CopyCode :text="`maven.modrinth:${project.id}:${version.id}`" />
           </div>
@@ -1555,6 +1553,10 @@ export default defineNuxtComponent({
     display: flex;
     align-items: center;
     gap: 0.5rem;
+
+    button {
+      max-width: 100%;
+    }
   }
 
   .team-member {

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

@@ -169,7 +169,7 @@
             </template>
             <template #copy-maven>
               <ClipboardCopyIcon aria-hidden="true" />
-              Copy Modrinth Maven
+              Copy Maven coordinates
             </template>
           </OverflowMenu>
         </ButtonStyled>

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

@@ -92,7 +92,7 @@
             <div class="mb-4 mt-2 flex w-full items-center gap-1 text-sm text-secondary">
               {{ formatCategory(subscription.interval) }} ⋅ {{ subscription.status }} ⋅
               {{ dayjs(subscription.created).format("MMMM D, YYYY [at] h:mma") }} ({{
-                dayjs(subscription.created).fromNow()
+                formatRelativeTime(subscription.created)
               }})
             </div>
           </div>
@@ -151,7 +151,7 @@
                 </span>
                 <span class="text-sm text-secondary">
                   {{ dayjs(charge.due).format("MMMM D, YYYY [at] h:mma") }}
-                  <span class="text-secondary">({{ dayjs(charge.due).fromNow() }}) </span>
+                  <span class="text-secondary">({{ formatRelativeTime(charge.due) }}) </span>
                 </span>
                 <div
                   v-if="flags.developerMode"
@@ -196,7 +196,15 @@
   </div>
 </template>
 <script setup>
-import { Avatar, ButtonStyled, CopyCode, DropdownSelect, NewModal, Toggle } from "@modrinth/ui";
+import {
+  Avatar,
+  ButtonStyled,
+  CopyCode,
+  DropdownSelect,
+  NewModal,
+  Toggle,
+  useRelativeTime,
+} from "@modrinth/ui";
 import { formatCategory, formatPrice } from "@modrinth/utils";
 import {
   CheckIcon,
@@ -215,7 +223,9 @@ const flags = useFeatureFlags();
 const route = useRoute();
 const data = useNuxtApp();
 const vintl = useVIntl();
+
 const { formatMessage } = vintl;
+const formatRelativeTime = useRelativeTime();
 
 const messages = defineMessages({
   userNotFoundError: {

apps/frontend/src/pages/admin/servers/notices.vue

@@ -156,7 +156,7 @@
             <div class="text-sm">
               <span v-if="notice.announce_at">
                 {{ dayjs(notice.announce_at).format("MMM D, YYYY [at] h:mm A") }} ({{
-                  dayjs(notice.announce_at).fromNow()
+                  formatRelativeTime(notice.announce_at)
                 }})
               </span>
               <template v-else> Never begins </template>
@@ -166,7 +166,7 @@
                 v-if="notice.expires"
                 v-tooltip="dayjs(notice.expires).format('MMMM D, YYYY [at] h:mm A')"
               >
-                {{ dayjs(notice.expires).fromNow() }}
+                {{ formatRelativeTime(notice.expires) }}
               </span>
               <template v-else> Never expires </template>
             </div>
@@ -267,6 +267,7 @@ import {
   NewModal,
   TeleportDropdownMenu,
   Toggle,
+  useRelativeTime,
 } from "@modrinth/ui";
 import { SettingsIcon, PlusIcon, SaveIcon, TrashIcon, EditIcon, XIcon } from "@modrinth/assets";
 import dayjs from "dayjs";
@@ -278,6 +279,8 @@ import { usePyroFetch } from "~/composables/pyroFetch.ts";
 import AssignNoticeModal from "~/components/ui/servers/notice/AssignNoticeModal.vue";
 
 const { formatMessage } = useVIntl();
+const formatRelativeTime = useRelativeTime();
+
 const app = useNuxtApp() as unknown as { $notify: any };
 
 const notices = ref<ServerNoticeType[]>([]);

apps/frontend/src/pages/app.vue

@@ -19,7 +19,6 @@ import Checkbox from "~/components/ui/Checkbox.vue";
 import { homePageProjects } from "~/generated/state.json";
 
 const os = ref(null);
-const macValue = ref(null);
 const downloadWindows = ref(null);
 const downloadLinux = ref(null);
 const downloadSection = ref(null);
@@ -31,8 +30,7 @@ const linuxLinks = {
   thirdParty: "https://support.modrinth.com/en/articles/9298760",
 };
 const macLinks = {
-  appleSilicon: null,
-  intel: null,
+  universal: null,
 };
 
 let downloadLauncher;
@@ -53,8 +51,7 @@ const [{ data: launcherUpdates }] = await Promise.all([
   ),
 ]);
 
-macLinks.appleSilicon = launcherUpdates.value.platforms["darwin-aarch64"].install_urls[0];
-macLinks.intel = launcherUpdates.value.platforms["darwin-x86_64"].install_urls[0];
+macLinks.universal = launcherUpdates.value.platforms["darwin-aarch64"].install_urls[0];
 windowsLink.value = launcherUpdates.value.platforms["windows-x86_64"].install_urls[0];
 linuxLinks.appImage = launcherUpdates.value.platforms["linux-x86_64"].install_urls[1];
 linuxLinks.deb = launcherUpdates.value.platforms["linux-x86_64"].install_urls[0];
@@ -85,24 +82,6 @@ onMounted(() => {
   }
 });
 
-watch(macValue, () => {
-  if (macValue.value === "Download for Apple Silicon") {
-    const link = document.createElement("a");
-    link.href = macLinks.appleSilicon;
-    link.download = "";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  } else if (macValue.value === "Download for Intel") {
-    const link = document.createElement("a");
-    link.href = macLinks.intel;
-    link.download = "";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
-});
-
 const scrollToSection = () => {
   nextTick(() => {
     window.scrollTo({
@@ -834,13 +813,9 @@ useSeoMeta({
             Mac
           </div>
           <div class="description apple">
-            <a :href="macLinks.appleSilicon" download="">
+            <a :href="macLinks.universal" download="">
               <DownloadIcon />
-              <span> Download for Apple Silicon </span>
-            </a>
-            <a :href="macLinks.intel" download="">
-              <DownloadIcon />
-              <span> Download for Intel </span>
+              <span> Download the beta </span>
             </a>
           </div>
         </div>

apps/frontend/src/pages/auth/welcome.vue

@@ -1,10 +1,20 @@
 <template>
-  <div>
-    <h1>{{ formatMessage(messages.welcomeLongTitle) }}</h1>
+  <div class="welcome-box has-bot">
+    <img :src="WavingRinthbot" alt="Waving Modrinth Bot" class="welcome-box__waving-bot" />
+    <div class="welcome-box__top-glow" />
+    <div class="welcome-box__body">
+      <h1 class="welcome-box__title">
+        {{ formatMessage(messages.welcomeLongTitle) }}
+      </h1>
 
-    <section class="auth-form">
-      <p>
-        {{ formatMessage(messages.welcomeDescription) }}
+      <p class="welcome-box__subtitle">
+        <IntlFormatted :message-id="messages.welcomeDescription">
+          <template #bold="{ children }">
+            <strong>
+              <component :is="() => normalizeChildren(children)" />
+            </strong>
+          </template>
+        </IntlFormatted>
       </p>
 
       <Checkbox
@@ -14,11 +24,12 @@
         :description="formatMessage(messages.subscribeCheckbox)"
       />
 
-      <button class="btn btn-primary continue-btn centered-btn" @click="continueSignUp">
-        {{ formatMessage(commonMessages.continueButton) }} <RightArrowIcon />
+      <button class="btn btn-primary centered-btn" @click="continueSignUp">
+        {{ formatMessage(commonMessages.continueButton) }}
+        <RightArrowIcon />
       </button>
 
-      <p>
+      <p class="tos-text">
         <IntlFormatted :message-id="messages.tosLabel">
           <template #terms-link="{ children }">
             <NuxtLink to="/legal/terms" class="text-link">
@@ -32,12 +43,15 @@
           </template>
         </IntlFormatted>
       </p>
-    </section>
+    </div>
   </div>
 </template>
+
 <script setup>
 import { Checkbox, commonMessages } from "@modrinth/ui";
-import { RightArrowIcon } from "@modrinth/assets";
+import { RightArrowIcon, WavingRinthbot } from "@modrinth/assets";
+
+const route = useRoute();
 
 const { formatMessage } = useVIntl();
 
@@ -54,7 +68,7 @@ const messages = defineMessages({
   welcomeDescription: {
     id: "auth.welcome.description",
     defaultMessage:
-      "Thank you for creating an account. You can now follow and create projects, receive updates about your favorite projects, and more!",
+      "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with awazing mods.",
   },
   welcomeLongTitle: {
     id: "auth.welcome.long-title",
@@ -72,20 +86,18 @@ useHead({
 
 const subscribe = ref(true);
 
-async function continueSignUp() {
-  const route = useRoute();
-
+onMounted(async () => {
   await useAuth(route.query.authToken);
   await useUser();
+});
 
+async function continueSignUp() {
   if (subscribe.value) {
     try {
       await useBaseFetch("auth/email/subscribe", {
         method: "POST",
       });
-    } catch {
-      /* empty */
-    }
+    } catch {}
   }
 
   if (route.query.redirect) {
@@ -95,3 +107,84 @@ async function continueSignUp() {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.welcome-box {
+  background-color: var(--color-raised-bg);
+  border-radius: var(--size-rounded-lg);
+  padding: 1.75rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  box-shadow: var(--shadow-card);
+  position: relative;
+
+  &.has-bot {
+    margin-block: 120px;
+  }
+
+  p {
+    margin: 0;
+  }
+  a {
+    color: var(--color-brand);
+    font-weight: var(--weight-bold);
+    &:hover,
+    &:focus {
+      filter: brightness(1.125);
+      text-decoration: underline;
+    }
+  }
+
+  &__waving-bot {
+    --bot-height: 112px;
+    position: absolute;
+    top: calc(-1 * var(--bot-height));
+    right: 5rem;
+    height: var(--bot-height);
+    width: auto;
+
+    @media (max-width: 768px) {
+      --bot-height: 70px;
+      right: 2rem;
+    }
+  }
+
+  &__top-glow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    opacity: 0.4;
+    background: linear-gradient(
+      to right,
+      transparent 2rem,
+      var(--color-green) calc(100% - 13rem),
+      var(--color-green) calc(100% - 5rem),
+      transparent calc(100% - 2rem)
+    );
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  &__title {
+    font-size: var(--text-32);
+    font-weight: var(--weight-extrabold);
+    margin: 0;
+  }
+
+  &__subtitle {
+    font-size: var(--text-18);
+  }
+
+  .tos-text {
+    font-size: var(--text-14);
+    line-height: 1.5;
+  }
+}
+</style>

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

@@ -391,6 +391,7 @@ import {
   DropdownSelect,
   FileInput,
   PopoutMenu,
+  useRelativeTime,
 } from "@modrinth/ui";
 
 import { isAdmin } from "@modrinth/utils";

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

@@ -99,7 +99,7 @@
 import { ChevronRightIcon, HistoryIcon } from "@modrinth/assets";
 import Avatar from "~/components/ui/Avatar.vue";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
-import { fetchExtraNotificationData, groupNotifications } from "~/helpers/notifications.js";
+import { fetchExtraNotificationData, groupNotifications } from "~/helpers/notifications.ts";
 
 useHead({
   title: "Dashboard - Modrinth",

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

@@ -12,7 +12,7 @@
           <h2 v-else class="text-2xl">Notifications</h2>
         </div>
         <template v-if="!history">
-          <Button v-if="hasRead" @click="updateRoute()">
+          <Button v-if="data.hasRead" @click="updateRoute()">
             <HistoryIcon />
             View history
           </Button>
@@ -60,7 +60,7 @@ import {
   fetchExtraNotificationData,
   groupNotifications,
   markAsRead,
-} from "~/helpers/notifications.js";
+} from "~/helpers/notifications.ts";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import Pagination from "~/components/ui/Pagination.vue";
@@ -70,93 +70,69 @@ useHead({
 });
 
 const auth = await useAuth();
-
 const route = useNativeRoute();
 const router = useNativeRouter();
 
-const history = computed(() => {
-  return route.name === "dashboard-notifications-history";
-});
-
+const history = computed(() => route.name === "dashboard-notifications-history");
 const selectedType = ref("all");
 const page = ref(1);
-
 const perPage = ref(50);
 
 const { data, pending, error, refresh } = await useAsyncData(
   async () => {
     const pageNum = page.value - 1;
-
-    const notifications = await useBaseFetch(`user/${auth.value.user.id}/notifications`);
     const showRead = history.value;
-    const hasRead = notifications.some((notif) => notif.read);
+    const notifications = await useBaseFetch(`user/${auth.value.user.id}/notifications`);
 
-    const types = [
-      ...new Set(
-        notifications
-          .filter((notification) => {
-            return showRead || !notification.read;
-          })
-          .map((notification) => notification.type),
-      ),
+    const typesInFeed = [
+      ...new Set(notifications.filter((n) => showRead || !n.read).map((n) => n.type)),
     ];
 
-    const filteredNotifications = notifications.filter(
-      (notification) =>
-        (selectedType.value === "all" || notification.type === selectedType.value) &&
-        (showRead || !notification.read),
+    const filtered = notifications.filter(
+      (n) =>
+        (selectedType.value === "all" || n.type === selectedType.value) && (showRead || !n.read),
     );
-    const pages = Math.ceil(filteredNotifications.length / perPage.value);
+
+    const pages = Math.max(1, Math.ceil(filtered.length / perPage.value));
 
     return fetchExtraNotificationData(
-      filteredNotifications.slice(pageNum * perPage.value, perPage.value + pageNum * perPage.value),
-    ).then((notifications) => {
-      return {
-        notifications,
-        types: types.length > 1 ? ["all", ...types] : types,
-        pages,
-        hasRead,
-      };
-    });
+      filtered.slice(pageNum * perPage.value, pageNum * perPage.value + perPage.value),
+    ).then((notifs) => ({
+      notifications: notifs,
+      notifTypes: typesInFeed.length > 1 ? ["all", ...typesInFeed] : typesInFeed,
+      pages,
+      hasRead: notifications.some((n) => n.read),
+    }));
   },
   { watch: [page, history, selectedType] },
 );
 
-const notifications = computed(() => {
-  if (data.value === null) {
-    return [];
-  }
-  return groupNotifications(data.value.notifications, history.value);
-});
-const notifTypes = computed(() => data.value.types);
-const pages = computed(() => data.value.pages);
-const hasRead = computed(() => data.value.hasRead);
+const notifications = computed(() =>
+  data.value ? groupNotifications(data.value.notifications, history.value) : [],
+);
+
+const notifTypes = computed(() => data.value?.notifTypes || []);
+const pages = computed(() => data.value?.pages ?? 1);
 
 function updateRoute() {
-  if (history.value) {
-    router.push("/dashboard/notifications");
-  } else {
-    router.push("/dashboard/notifications/history");
-  }
+  router.push(history.value ? "/dashboard/notifications" : "/dashboard/notifications/history");
   selectedType.value = "all";
   page.value = 1;
 }
 
 async function readAll() {
-  const ids = notifications.value.flatMap((notification) => [
-    notification.id,
-    ...(notification.grouped_notifs ? notification.grouped_notifs.map((notif) => notif.id) : []),
+  const ids = notifications.value.flatMap((n) => [
+    n.id,
+    ...(n.grouped_notifs ? n.grouped_notifs.map((g) => g.id) : []),
   ]);
 
-  const updateNotifs = await markAsRead(ids);
-  allNotifs.value = updateNotifs(allNotifs.value);
+  await markAsRead(ids);
+  await refresh();
 }
 
 function changePage(newPage) {
   page.value = newPage;
-  if (import.meta.client) {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }
+  if (import.meta.client) window.scrollTo({ top: 0, behavior: "smooth" });
 }
 </script>
 <style lang="scss" scoped>

apps/frontend/src/pages/frog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useRelativeTime } from "@modrinth/ui";
+
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 

apps/frontend/src/pages/index.vue

@@ -185,7 +185,7 @@
                       <CalendarIcon aria-hidden="true" />
                       <span>
                         Received
-                        {{ fromNow(notification.date_modified) }}
+                        {{ formatRelativeTime(notification.date_modified) }}
                       </span>
                     </div>
                   </div>
@@ -527,7 +527,7 @@
 </template>
 <script setup>
 import { Multiselect } from "vue-multiselect";
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled, useRelativeTime } from "@modrinth/ui";
 import {
   CompassIcon,
   LogInIcon,
@@ -544,6 +544,8 @@ import ProjectCard from "~/components/ui/ProjectCard.vue";
 
 import { homePageProjects, homePageSearch, homePageNotifs } from "~/generated/state.json";
 
+const formatRelativeTime = useRelativeTime();
+
 const searchQuery = ref("leave");
 const sortType = ref("relevance");
 

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

@@ -52,10 +52,7 @@
     >
       <div class="project-title">
         <div class="mobile-row">
-          <nuxt-link
-            :to="`/${project.inferred_project_type}/${project.slug}`"
-            class="iconified-stacked-link"
-          >
+          <nuxt-link :to="`/project/${project.id}`" class="iconified-stacked-link">
             <Avatar :src="project.icon_url" size="xs" no-shadow raised />
             <span class="stacked">
               <span class="title">{{ project.name }}</span>
@@ -67,7 +64,7 @@
           by
           <nuxt-link
             v-if="project.owner"
-            :to="`/user/${project.owner.user.username}`"
+            :to="`/user/${project.owner.user.id}`"
             class="iconified-link"
           >
             <Avatar :src="project.owner.user.avatar_url" circle size="xxs" raised />
@@ -75,7 +72,7 @@
           </nuxt-link>
           <nuxt-link
             v-else-if="project.org"
-            :to="`/organization/${project.org.slug}`"
+            :to="`/organization/${project.org.id}`"
             class="iconified-link"
           >
             <Avatar :src="project.org.icon_url" circle size="xxs" raised />
@@ -88,10 +85,7 @@
         </div>
       </div>
       <div class="input-group">
-        <nuxt-link
-          :to="`/${project.inferred_project_type}/${project.slug}`"
-          class="iconified-button raised-button"
-        >
+        <nuxt-link :to="`/project/${project.id}`" class="iconified-button raised-button">
           <EyeIcon />
           View project
         </nuxt-link>
@@ -100,7 +94,7 @@
         <IssuesIcon v-if="project.age_warning" />
         Submitted
         <span v-tooltip="$dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')">{{
-          fromNow(project.queued)
+          formatRelativeTime(project.queued)
         }}</span>
       </span>
       <span v-else class="submitter-info"><UnknownIcon /> Unknown queue date</span>
@@ -109,7 +103,7 @@
 </template>
 
 <script setup>
-import { Chips } from "@modrinth/ui";
+import { Chips, useRelativeTime } from "@modrinth/ui";
 import {
   UnknownIcon,
   EyeIcon,
@@ -134,6 +128,8 @@ const now = app.$dayjs();
 const TIME_24H = 86400000;
 const TIME_48H = TIME_24H * 2;
 
+const formatRelativeTime = useRelativeTime();
+
 const { data: projects } = await useAsyncData("moderation/projects?count=1000", () =>
   useBaseFetch("moderation/projects?count=1000", { internal: true }),
 );

apps/frontend/src/pages/news/changelog/[product]/[date].vue

@@ -39,13 +39,8 @@ if (!changelogEntry.value) {
     >
       <ChevronLeftIcon /> View full changelog
     </nuxt-link>
-    <Timeline fade-out-end :fade-out-start="!isFirst" :class="{ '-mt-8': !isFirst }">
-      <ChangelogEntry
-        :entry="changelogEntry"
-        :first="isFirst"
-        show-type
-        :class="{ 'mt-8': !isFirst }"
-      />
+    <Timeline fade-out-end :fade-out-start="!isFirst">
+      <ChangelogEntry :entry="changelogEntry" :first="isFirst" show-type />
     </Timeline>
   </div>
 </template>

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

@@ -123,6 +123,7 @@
                   },
                   { divider: true, shown: auth.user && currentMember },
                   { id: 'copy-id', action: () => copyId() },
+                  { id: 'copy-permalink', action: () => copyPermalink() },
                 ]"
                 aria-label="More options"
               >
@@ -135,6 +136,10 @@
                   <ClipboardCopyIcon aria-hidden="true" />
                   {{ formatMessage(commonMessages.copyIdButton) }}
                 </template>
+                <template #copy-permalink>
+                  <ClipboardCopyIcon aria-hidden="true" />
+                  {{ formatMessage(commonMessages.copyPermalinkButton) }}
+                </template>
               </OverflowMenu>
             </ButtonStyled>
           </template>
@@ -287,6 +292,7 @@ const cosmetics = useCosmetics();
 const route = useNativeRoute();
 const tags = useTags();
 const flags = useFeatureFlags();
+const config = useRuntimeConfig();
 
 let orgId = useRouteId();
 
@@ -502,6 +508,12 @@ const navLinks = computed(() => [
 async function copyId() {
   await navigator.clipboard.writeText(organization.value.id);
 }
+
+async function copyPermalink() {
+  await navigator.clipboard.writeText(
+    `${config.public.siteUrl}/organization/${organization.value.id}`,
+  );
+}
 </script>
 
 <style scoped lang="scss">

apps/frontend/src/pages/report.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="experimental-styles-within flex flex-col gap-2">
-      <RadialHeader class="top-box mb-2 text-center" color="orange">
+      <RadialHeader class="top-box mb-2 flex flex-col items-center justify-center" color="orange">
         <ScaleIcon class="h-12 w-12 text-brand-orange" />
         <h1 class="m-3 gap-2 text-3xl font-extrabold">
           {{

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

@@ -303,7 +303,7 @@
               </svg>
               <h2 class="m-0 text-lg font-bold">Backups included</h2>
               <h3 class="m-0 text-base font-normal text-secondary">
-                Every server comes with 15 backups stored securely off-site with Backblaze.
+                Every server comes with 15 backups stored securely off-site.
               </h3>
             </div>
           </div>
@@ -399,7 +399,7 @@
               </summary>
               <p class="m-0 ml-6 leading-[160%]">
                 Modrinth Servers are powered by AMD Ryzen 7900 and 7950X3D equivalent CPUs at 5+
-                GHz, paired with with DDR5 memory.
+                GHz, paired with DDR5 memory.
               </p>
             </details>
             <details pyro-hash="cpu-burst" class="group" :open="$route.hash === '#cpu-burst'">
@@ -480,6 +480,18 @@
                 plan for the content you're running on the server.
               </p>
             </details>
+
+            <details pyro-hash="players" class="group" :open="$route.hash === '#prices'">
+              <summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
+                <span class="mr-2 transition-transform duration-200 group-open:rotate-90">
+                  <RightArrowIcon />
+                </span>
+                What currency are the prices in?
+              </summary>
+              <p class="m-0 ml-6 leading-[160%]">
+                All prices are listed in United States Dollars (USD).
+              </p>
+            </details>
           </div>
         </div>
       </div>

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

@@ -33,26 +33,7 @@
     </div>
   </div>
   <div
-    v-if="serverData?.status === 'suspended' && serverData.suspension_reason === 'support'"
-    class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-  >
-    <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-      <div class="flex flex-col items-center text-center">
-        <div class="flex flex-col items-center gap-4">
-          <div class="grid place-content-center rounded-full bg-bg-blue p-4">
-            <TransferIcon class="size-12 text-blue" />
-          </div>
-          <h1 class="m-0 mb-2 w-fit text-4xl font-bold">We're working on your server</h1>
-        </div>
-        <p class="text-lg text-secondary">
-          You recently contacted Modrinth Support, and we're actively working on your server. It
-          will be back online shortly.
-        </p>
-      </div>
-    </div>
-  </div>
-  <div
-    v-else-if="serverData?.status === 'suspended' && serverData.suspension_reason !== 'upgrading'"
+    v-else-if="serverData?.status === 'suspended'"
     class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
   >
     <div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
@@ -72,7 +53,7 @@
                 : "Your server has been suspended."
           }}
           <br />
-          Contact Modrinth support if you believe this is an error.
+          Contact Modrinth Support if you believe this is an error.
         </p>
       </div>
       <ButtonStyled size="large" color="brand" @click="() => router.push('/settings/billing')">
@@ -97,7 +78,7 @@
         </div>
         <p class="text-lg text-secondary">
           You don't have permission to view this server or it no longer exists. If you believe this
-          is an error, please contact Modrinth support.
+          is an error, please contact Modrinth Support.
         </p>
       </div>
       <UiCopyCode :text="JSON.stringify(server.general?.error)" />
@@ -289,7 +270,7 @@
                     can change the loader by clicking the "Change Loader" button.
                   </li>
                   <li>
-                    If you're stuck, please contact Modrinth support with the information below:
+                    If you're stuck, please contact Modrinth Support with the information below:
                   </li>
                 </ul>
                 <ButtonStyled>
@@ -309,7 +290,7 @@
                 An error occurred while installing your server because Modrinth Servers does not
                 support the version of Minecraft or the loader you specified. Try reinstalling your
                 server with a different version or loader, and if the problem persists, please
-                contact Modrinth support with your server's debug information.
+                contact Modrinth Support with your server's debug information.
               </div>
 
               <div
@@ -787,6 +768,40 @@ const handleWebSocketMessage = (data: WSEvent) => {
 
       break;
     }
+    case "filesystem-ops": {
+      if (!server.fs) {
+        console.error("FilesystemOps received, but server.fs is not available", data.all);
+        break;
+      }
+      if (JSON.stringify(server.fs.ops) !== JSON.stringify(data.all)) {
+        server.fs.ops = data.all;
+      }
+
+      server.fs.queuedOps = server.fs.queuedOps.filter(
+        (queuedOp) => !data.all.some((x) => x.src === queuedOp.src),
+      );
+
+      const cancelled = data.all.filter((x) => x.state === "cancelled");
+      Promise.all(cancelled.map((x) => server.fs?.modifyOp(x.id, "dismiss")));
+
+      const completed = data.all.filter((x) => x.state === "done");
+      if (completed.length > 0) {
+        setTimeout(
+          async () =>
+            await Promise.all(
+              completed.map((x) => {
+                if (!server.fs?.opsQueuedForModification.includes(x.id)) {
+                  server.fs?.opsQueuedForModification.push(x.id);
+                  return server.fs?.modifyOp(x.id, "dismiss");
+                }
+                return Promise.resolve();
+              }),
+            ),
+          3000,
+        );
+      }
+      break;
+    }
     default:
       console.warn("Unhandled WebSocket event:", data);
   }

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

@@ -56,8 +56,7 @@
           </TagItem>
         </div>
         <p class="m-0">
-          You can have up to {{ data.backup_quota }} backups at once, securely off-site with
-          Backblaze.
+          You can have up to {{ data.backup_quota }} backups at once, stored securely off-site.
         </p>
       </div>
       <div

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

@@ -5,6 +5,8 @@
       :type="newItemType"
       @create="handleCreateNewItem"
     />
+    <FilesUploadZipUrlModal ref="uploadZipModal" :server="server" />
+    <FilesUploadConflictModal ref="uploadConflictModal" @proceed="extractItem" />
 
     <LazyUiServersFilesRenameItemModal
       ref="renameItemModal"
@@ -35,9 +37,12 @@
             :breadcrumb-segments="breadcrumbSegments"
             :search-query="searchQuery"
             :current-filter="viewFilter"
+            :base-id="`browse-navbar-${baseId}`"
             @navigate="navigateToSegment"
             @create="showCreateModal"
             @upload="initiateFileUpload"
+            @upload-zip="() => {}"
+            @unzip-from-url="showUnzipFromUrlModal"
             @filter="handleFilter"
             @update:search-query="searchQuery = $event"
           />
@@ -46,6 +51,110 @@
             :sort-desc="sortDesc"
             @sort="handleSort"
           />
+          <div
+            v-for="op in ops"
+            :key="`fs-op-${op.op}-${op.src}`"
+            class="sticky top-20 z-20 grid grid-cols-[auto_1fr_auto] items-center gap-2 border-0 border-b-[1px] border-solid border-button-bg bg-table-alternateRow px-4 py-2 md:grid-cols-[auto_1fr_1fr_2fr_auto]"
+          >
+            <div>
+              <PackageOpenIcon class="h-5 w-5 text-secondary" />
+            </div>
+            <div class="flex flex-wrap gap-x-4 gap-y-1 md:contents">
+              <div class="flex items-center text-wrap break-all text-sm font-bold text-contrast">
+                Extracting {{ op.src.includes("https://") ? "modpack from URL" : op.src }}
+              </div>
+              <span
+                class="flex items-center gap-2 text-sm font-semibold"
+                :class="{
+                  'text-green': op.state === 'done',
+                  'text-red': op.state?.startsWith('fail'),
+                  'text-orange': !op.state?.startsWith('fail') && op.state !== 'done',
+                }"
+              >
+                <template v-if="op.state === 'done'">
+                  Done
+                  <CheckIcon style="stroke-width: 3px" />
+                </template>
+                <template v-else-if="op.state?.startsWith('fail')">
+                  Failed
+                  <XIcon style="stroke-width: 3px" />
+                </template>
+                <template v-else-if="op.state === 'cancelled'">
+                  <SpinnerIcon class="animate-spin" />
+                  Cancelling
+                </template>
+                <template v-else-if="op.state === 'queued'">
+                  <SpinnerIcon class="animate-spin" />
+                  Queued...
+                </template>
+                <template v-else-if="op.state === 'ongoing'">
+                  <SpinnerIcon class="animate-spin" />
+                  Extracting...
+                </template>
+                <template v-else>
+                  <UnknownIcon />
+                  Unknown state: {{ op.state }}
+                </template>
+              </span>
+              <div class="col-span-2 flex grow flex-col gap-1 md:col-span-1 md:items-end">
+                <div class="text-xs font-semibold text-contrast opacity-80">
+                  <span :class="{ invisible: 'current_file' in op && !op.current_file }">
+                    {{
+                      "current_file" in op
+                        ? op.current_file?.split("/")?.pop() ?? "unknown"
+                        : "unknown"
+                    }}
+                  </span>
+                </div>
+                <ProgressBar
+                  :progress="'progress' in op ? op.progress : 0"
+                  :max="1"
+                  :color="
+                    op.state === 'done'
+                      ? 'green'
+                      : op.state?.startsWith('fail')
+                        ? 'red'
+                        : op.state === 'cancelled'
+                          ? 'gray'
+                          : 'orange'
+                  "
+                  :waiting="op.state === 'queued' || !op.progress || op.progress === 0"
+                />
+                <div
+                  class="text-xs text-secondary opacity-80"
+                  :class="{ invisible: 'bytes_processed' in op && !op.bytes_processed }"
+                >
+                  {{ "bytes_processed" in op ? formatBytes(op.bytes_processed) : "0 B" }} extracted
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <ButtonStyled circular>
+                <button
+                  :disabled="!('id' in op) || !op.id"
+                  class="radial-progress-animation-overlay"
+                  :class="{ active: op.state === 'done' }"
+                  @click="
+                    () => {
+                      op.state === 'done'
+                        ? server.fs?.modifyOp(op.id, 'dismiss')
+                        : 'id' in op
+                          ? server.fs?.modifyOp(op.id, 'cancel')
+                          : () => {};
+                    }
+                  "
+                >
+                  <XIcon />
+                </button>
+              </ButtonStyled>
+            </div>
+            <pre
+              v-if="flags.advancedDebugInfo"
+              class="markdown-body col-span-full m-0 rounded-xl bg-button-bg text-xs"
+              >{{ op }}</pre
+            >
+          </div>
           <FilesUploadDropdown
             v-if="props.server.fs"
             ref="uploadDropdownRef"
@@ -55,7 +164,6 @@
             @upload-complete="refreshList()"
           />
         </div>
-
         <UiServersFilesEditingNavbar
           v-else
           :file-name="editingFile?.name"
@@ -97,10 +205,10 @@
           />
           <UiServersFilesImageViewer v-else :image-blob="imagePreview" />
         </div>
-
         <div v-else-if="items.length > 0" class="h-full w-full overflow-hidden rounded-b-2xl">
           <UiServersFileVirtualList
             :items="filteredItems"
+            @extract="handleExtractItem"
             @delete="showDeleteModal"
             @rename="showRenameModal"
             @download="downloadFile"
@@ -159,10 +267,32 @@
 
 <script setup lang="ts">
 import { useInfiniteScroll } from "@vueuse/core";
-import { UploadIcon, FolderOpenIcon } from "@modrinth/assets";
-import type { DirectoryResponse, DirectoryItem, Server } from "~/composables/pyroServers";
+import {
+  UnknownIcon,
+  XIcon,
+  SpinnerIcon,
+  PackageOpenIcon,
+  CheckIcon,
+  UploadIcon,
+  FolderOpenIcon,
+} from "@modrinth/assets";
+import { computed } from "vue";
+import { ButtonStyled, ProgressBar } from "@modrinth/ui";
+import { formatBytes } from "@modrinth/utils";
+import {
+  type DirectoryResponse,
+  type DirectoryItem,
+  type Server,
+  handleError,
+} from "~/composables/pyroServers.ts";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
 import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
+import type { FilesystemOp, FSQueuedOp } from "~/types/servers.ts";
+import FilesUploadZipUrlModal from "~/components/ui/servers/FilesUploadZipUrlModal.vue";
+import FilesUploadConflictModal from "~/components/ui/servers/FilesUploadConflictModal.vue";
+
+const flags = useFeatureFlags();
+const baseId = useId();
 
 interface BaseOperation {
   type: "move" | "rename";
@@ -217,6 +347,8 @@ const createItemModal = ref();
 const renameItemModal = ref();
 const moveItemModal = ref();
 const deleteItemModal = ref();
+const uploadZipModal = ref();
+const uploadConflictModal = ref();
 
 const newItemType = ref<"file" | "directory">("file");
 const selectedItem = ref<any>(null);
@@ -449,6 +581,33 @@ const handleRenameItem = async (newName: string) => {
   }
 };
 
+const extractItem = async (path: string) => {
+  try {
+    await props.server.fs?.extractFile(path, true, false);
+  } catch (error) {
+    console.error("Error extracting item:", error);
+    handleError(error);
+  }
+};
+
+const handleExtractItem = async (item: { name: string; type: string; path: string }) => {
+  try {
+    const dry = await props.server.fs?.extractFile(item.path, true, true, true);
+    if (dry) {
+      if (dry.conflicting_files.length === 0) {
+        await extractItem(item.path);
+      } else {
+        uploadConflictModal.value.show(item.path, dry.conflicting_files);
+      }
+    } else {
+      handleError(new Error("Error running dry run"));
+    }
+  } catch (error) {
+    console.error("Error extracting item:", error);
+    handleError(error);
+  }
+};
+
 const handleMoveItem = async (destination: string) => {
   try {
     const itemType = selectedItem.value.type;
@@ -536,6 +695,10 @@ const showCreateModal = (type: "file" | "directory") => {
   createItemModal.value?.show();
 };
 
+const showUnzipFromUrlModal = (cf: boolean) => {
+  uploadZipModal.value?.show(cf);
+};
+
 const showRenameModal = (item: any) => {
   selectedItem.value = item;
   renameItemModal.value?.show(item);
@@ -760,6 +923,8 @@ onMounted(async () => {
       redoLastOperation();
     }
   });
+
+  props.server.fs?.clearQueuedOps();
 });
 
 onUnmounted(() => {
@@ -768,6 +933,22 @@ onUnmounted(() => {
   document.removeEventListener("keydown", () => {});
 });
 
+const clientSideQueued = computed<FSQueuedOp[]>(() => props.server.fs?.queuedOps ?? []);
+
+type QueuedOpWithState = FSQueuedOp & { state: "queued" };
+
+const ops = computed<(QueuedOpWithState | FilesystemOp)[]>(() => [
+  ...clientSideQueued.value.map((x) => ({ ...x, state: "queued" }) satisfies QueuedOpWithState),
+  ...(props.server.fs?.ops ?? []),
+]);
+
+watch(
+  () => props.server.fs?.ops,
+  () => {
+    refreshList();
+  },
+);
+
 watch(
   () => route.query,
   async (newQuery) => {
@@ -984,4 +1165,43 @@ const onScroll = () => {
   transform: scale(1);
   opacity: 1;
 }
+
+.radial-progress-animation-overlay {
+  position: relative;
+}
+
+@property --_radial-percentage {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+.radial-progress-animation-overlay.active::before {
+  animation: radial-progress 3s linear forwards;
+}
+
+.radial-progress-animation-overlay::before {
+  content: "";
+  inset: -2px;
+  position: absolute;
+  border-radius: 50%;
+  box-sizing: content-box;
+  border: 2px solid var(--color-button-bg);
+  filter: brightness(var(--hover-brightness));
+  mask-image: conic-gradient(
+    black 0%,
+    black var(--_radial-percentage),
+    transparent var(--_radial-percentage),
+    transparent 100%
+  );
+}
+
+@keyframes radial-progress {
+  from {
+    --_radial-percentage: 0%;
+  }
+  to {
+    --_radial-percentage: 100%;
+  }
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ModalConfirm
+    <ConfirmModal
       ref="modal_confirm"
       title="Are you sure you want to delete your account?"
       description="This will **immediately delete all of your user data and follows**. This will not delete your projects. Deleting your account cannot be reversed.<br><br>If you need help with your account, get support on the [Modrinth Discord](https://discord.modrinth.com)."
@@ -421,6 +421,7 @@ import {
   DownloadIcon,
 } from "@modrinth/assets";
 import QrcodeVue from "qrcode.vue";
+import { ConfirmModal } from "@modrinth/ui";
 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";
@@ -428,7 +429,6 @@ import SteamIcon from "assets/icons/auth/sso-steam.svg";
 import DiscordIcon from "assets/icons/auth/sso-discord.svg";
 import KeyIcon from "assets/icons/auth/key.svg";
 import GitLabIcon from "assets/icons/auth/sso-gitlab.svg";
-import ModalConfirm from "~/components/ui/ModalConfirm.vue";
 import Modal from "~/components/ui/Modal.vue";
 
 useHead({

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

@@ -64,6 +64,21 @@
               </template>
             </span>
             <template v-if="midasCharge">
+              <span
+                v-if="
+                  midasCharge.status === 'open' && midasCharge.subscription_interval === 'monthly'
+                "
+                class="text-sm text-purple"
+              >
+                Save
+                {{
+                  formatPrice(
+                    vintl.locale,
+                    midasCharge.amount * 12 - oppositePrice,
+                    midasCharge.currency_code,
+                  )
+                }}/year by switching to yearly billing!
+              </span>
               <span class="text-sm text-secondary">
                 Since {{ $dayjs(midasSubscription.created).format("MMMM D, YYYY") }}
               </span>
@@ -118,19 +133,46 @@
               </OverflowMenu>
             </ButtonStyled>
           </div>
-          <ButtonStyled v-else-if="midasCharge && midasCharge.status !== 'cancelled'">
-            <button
-              class="ml-auto"
-              @click="
-                () => {
-                  cancelSubscriptionId = midasSubscription.id;
-                  $refs.modalCancel.show();
-                }
-              "
+          <div
+            v-else-if="midasCharge && midasCharge.status !== 'cancelled'"
+            class="ml-auto flex gap-2"
+          >
+            <ButtonStyled>
+              <button
+                :disabled="changingInterval"
+                @click="
+                  () => {
+                    cancelSubscriptionId = midasSubscription.id;
+                    $refs.modalCancel.show();
+                  }
+                "
+              >
+                <XIcon /> Cancel
+              </button>
+            </ButtonStyled>
+            <ButtonStyled
+              :color="midasCharge.subscription_interval === 'yearly' ? 'standard' : 'purple'"
+              color-fill="text"
             >
-              <XIcon /> Cancel
-            </button>
-          </ButtonStyled>
+              <button
+                v-tooltip="
+                  midasCharge.subscription_interval === 'yearly'
+                    ? `Monthly billing will cost you an additional ${formatPrice(
+                        vintl.locale,
+                        oppositePrice * 12 - midasCharge.amount,
+                        midasCharge.currency_code,
+                      )} per year`
+                    : undefined
+                "
+                :disabled="changingInterval"
+                @click="switchMidasInterval(oppositeInterval)"
+              >
+                <SpinnerIcon v-if="changingInterval" class="animate-spin" />
+                <TransferIcon v-else /> {{ changingInterval ? "Switching" : "Switch" }} to
+                {{ oppositeInterval }}
+              </button>
+            </ButtonStyled>
+          </div>
           <ButtonStyled
             v-else-if="midasCharge && midasCharge.status === 'cancelled'"
             color="purple"
@@ -178,8 +220,12 @@
               />
               <div v-else class="w-fit">
                 <p>
-                  A linked server couldn't be found with this subscription. It may have been deleted
-                  or suspended. Please contact Modrinth support with the following information:
+                  A linked server couldn't be found for this subscription. There are a few possible
+                  explanations for this. If you just purchased your server, this is normal. It could
+                  take up to an hour for your server to be provisioned. Otherwise, if you purchased
+                  this server a while ago, it has likely since been suspended. If this is not what
+                  you were expecting, please contact Modrinth Support with the following
+                  information:
                 </p>
                 <div class="flex w-full flex-col gap-2">
                   <CopyCode
@@ -288,7 +334,7 @@
                         getPyroCharge(subscription).status !== 'failed'
                       "
                     >
-                      <button @click="showPyroCancelModal(subscription.id)">
+                      <button @click="showCancellationSurvey(subscription)">
                         <XIcon />
                         Cancel
                       </button>
@@ -315,7 +361,14 @@
                       "
                       color="green"
                     >
-                      <button @click="resubscribePyro(subscription.id)">
+                      <button
+                        @click="
+                          resubscribePyro(
+                            subscription.id,
+                            $dayjs(getPyroCharge(subscription).due).isBefore($dayjs()),
+                          )
+                        "
+                      >
                         Resubscribe <RightArrowIcon />
                       </button>
                     </ButtonStyled>
@@ -547,6 +600,8 @@ import {
 } from "@modrinth/ui";
 import {
   PlusIcon,
+  TransferIcon,
+  SpinnerIcon,
   ArrowBigUpDashIcon,
   XIcon,
   CardIcon,
@@ -750,6 +805,13 @@ const midasCharge = computed(() =>
     : null,
 );
 
+const oppositePrice = computed(() =>
+  midasSubscription.value
+    ? midasProduct.value?.prices?.find((price) => price.id === midasSubscription.value.price_id)
+        ?.prices?.intervals?.[oppositeInterval.value]
+    : undefined,
+);
+
 const pyroSubscriptions = computed(() => {
   const pyroSubs = subscriptions.value?.filter((s) => s?.metadata?.type === "pyro") || [];
   const servers = serversData.value?.servers || [];
@@ -847,6 +909,31 @@ async function submit() {
 
 const removePaymentMethodIndex = ref();
 
+const changingInterval = ref(false);
+
+const oppositeInterval = computed(() =>
+  midasCharge.value?.subscription_interval === "yearly" ? "monthly" : "yearly",
+);
+
+async function switchMidasInterval(interval) {
+  changingInterval.value = true;
+  startLoading();
+  try {
+    await useBaseFetch(`billing/subscription/${midasSubscription.value.id}`, {
+      internal: true,
+      method: "PATCH",
+      body: {
+        interval,
+      },
+    });
+    await refresh();
+  } catch (error) {
+    console.error("Error switching Modrinth+ payment interval:", error);
+  }
+  stopLoading();
+  changingInterval.value = false;
+}
+
 async function editPaymentMethod(index, primary) {
   startLoading();
   try {
@@ -946,15 +1033,6 @@ const getProductPrice = (product, interval) => {
 
 const modalCancel = ref(null);
 
-const showPyroCancelModal = (subscriptionId) => {
-  cancelSubscriptionId.value = subscriptionId;
-  if (modalCancel.value) {
-    modalCancel.value.show();
-  } else {
-    console.error("modalCancel ref is undefined");
-  }
-};
-
 const pyroPurchaseModal = ref();
 const currentSubscription = ref(null);
 const currentProduct = ref(null);
@@ -1027,7 +1105,7 @@ async function fetchCapacityStatuses(serverId, product) {
   }
 }
 
-const resubscribePyro = async (subscriptionId) => {
+const resubscribePyro = async (subscriptionId, wasSuspended) => {
   try {
     await useBaseFetch(`billing/subscription/${subscriptionId}`, {
       internal: true,
@@ -1037,6 +1115,21 @@ const resubscribePyro = async (subscriptionId) => {
       },
     });
     await refresh();
+    if (wasSuspended) {
+      data.$notify({
+        group: "main",
+        title: "Resubscription request submitted",
+        text: "If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.",
+        type: "success",
+      });
+    } else {
+      data.$notify({
+        group: "main",
+        title: "Success",
+        text: "Server subscription resubscribed successfully",
+        type: "success",
+      });
+    }
   } catch {
     data.$notify({
       group: "main",
@@ -1057,4 +1150,66 @@ const refresh = async () => {
     refreshServers(),
   ]);
 };
+
+function showCancellationSurvey(subscription) {
+  if (!subscription) {
+    console.warn("No survey notice to open");
+    return;
+  }
+
+  const product = getPyroProduct(subscription);
+  const priceObj = product?.prices?.find((x) => x.id === subscription.price_id);
+  const price = priceObj?.prices?.intervals?.[subscription.interval];
+  const currency = priceObj?.currency_code;
+
+  const popupOptions = {
+    layout: "modal",
+    width: 700,
+    autoClose: 2000,
+    hideTitle: true,
+    hiddenFields: {
+      username: auth.value?.user?.username,
+      user_id: auth.value?.user?.id,
+      user_email: auth.value?.user?.email,
+      subscription_id: subscription.id,
+      price_id: subscription.price_id,
+      interval: subscription.interval,
+      started: subscription.created,
+      plan_ram: product?.metadata.ram / 1024,
+      plan_cpu: product?.metadata.cpu,
+      price: price ? `${price / 100}` : "unknown",
+      currency: currency ?? "unknown",
+    },
+    onOpen: () => console.log(`Opened cancellation survey for: ${subscription.id}`),
+    onClose: () => console.log(`Closed cancellation survey for: ${subscription.id}`),
+    onSubmit: (payload) => {
+      console.log("Form submitted, cancelling server.", payload);
+      cancelSubscription(subscription.id, true);
+    },
+  };
+
+  const formId = "mOr7lM";
+
+  try {
+    if (window.Tally?.openPopup) {
+      console.log(
+        `Opening Tally popup for servers subscription ${subscription.id} (form ID: ${formId})`,
+      );
+      window.Tally.openPopup(formId, popupOptions);
+    } else {
+      console.warn("Tally script not yet loaded");
+    }
+  } catch (e) {
+    console.error("Error opening Tally popup:", e);
+  }
+}
+
+useHead({
+  script: [
+    {
+      src: "https://tally.so/widgets/embed.js",
+      defer: true,
+    },
+  ],
+});
 </script>

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

@@ -203,7 +203,13 @@
 </template>
 <script setup>
 import { PlusIcon, XIcon, TrashIcon, EditIcon, SaveIcon } from "@modrinth/assets";
-import { Checkbox, ConfirmModal, commonSettingsMessages, commonMessages } from "@modrinth/ui";
+import {
+  Checkbox,
+  ConfirmModal,
+  commonSettingsMessages,
+  commonMessages,
+  useRelativeTime,
+} from "@modrinth/ui";
 
 import {
   hasScope,

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

@@ -57,7 +57,7 @@
 </template>
 <script setup>
 import { XIcon } from "@modrinth/assets";
-import { commonMessages, commonSettingsMessages } from "@modrinth/ui";
+import { commonMessages, commonSettingsMessages, useRelativeTime } from "@modrinth/ui";
 
 definePageMeta({
   middleware: "auth",

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

@@ -125,6 +125,7 @@
                     shown: auth.user?.id !== user.id,
                   },
                   { id: 'copy-id', action: () => copyId() },
+                  { id: 'copy-permalink', action: () => copyPermalink() },
                   {
                     id: 'open-billing',
                     action: () => navigateTo(`/admin/billing/${user.id}`),
@@ -151,6 +152,10 @@
                   <ClipboardCopyIcon aria-hidden="true" />
                   {{ formatMessage(commonMessages.copyIdButton) }}
                 </template>
+                <template #copy-permalink>
+                  <ClipboardCopyIcon aria-hidden="true" />
+                  {{ formatMessage(commonMessages.copyPermalinkButton) }}
+                </template>
                 <template #open-billing>
                   <CurrencyIcon aria-hidden="true" />
                   {{ formatMessage(messages.billingButton) }}
@@ -355,6 +360,7 @@ import {
   ContentPageHeader,
   commonMessages,
   NewModal,
+  useRelativeTime,
 } from "@modrinth/ui";
 import { isStaff } from "~/helpers/users.js";
 import NavTabs from "~/components/ui/NavTabs.vue";
@@ -381,6 +387,7 @@ const auth = await useAuth();
 const cosmetics = useCosmetics();
 const tags = useTags();
 const flags = useFeatureFlags();
+const config = useRuntimeConfig();
 
 const vintl = useVIntl();
 const { formatMessage } = vintl;
@@ -616,6 +623,10 @@ async function copyId() {
   await navigator.clipboard.writeText(user.value.id);
 }
 
+async function copyPermalink() {
+  await navigator.clipboard.writeText(`${config.public.siteUrl}/user/${user.value.id}`);
+}
+
 const navLinks = computed(() => [
   {
     label: formatMessage(commonMessages.allProjectType),

apps/frontend/src/server/routes/loader-versions.ts

@@ -1,36 +0,0 @@
-const getLoaderVersions = async (loader: string) => {
-  const loaderVersions = await fetch(
-    `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/manifest.json`,
-  );
-  return loaderVersions.json();
-};
-
-const getLoaderVersion = async (loader: string, version: string) => {
-  const loaderVersion = await fetch(
-    `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/versions/${version}.json`,
-  );
-  return loaderVersion.json();
-};
-
-export default defineEventHandler(async (e) => {
-  const params = new URLSearchParams(e._path?.split("?")[1] ?? "");
-  if (!params.has("loader"))
-    return new Response(
-      JSON.stringify({
-        error: "Missing loader",
-      }),
-      { status: 400, headers: { "Content-Type": "application/json" } },
-    );
-  const loader = params.get("loader");
-  const version = params.get("version");
-  if (version) {
-    const loaderVersion = await getLoaderVersion(loader!, version);
-    return new Response(JSON.stringify(loaderVersion), {
-      headers: { "Content-Type": "application/json" },
-    });
-  }
-  const loaderVersions = await getLoaderVersions(loader!);
-  return new Response(JSON.stringify(loaderVersions), {
-    headers: { "Content-Type": "application/json" },
-  });
-});

apps/frontend/src/types/servers.ts

@@ -224,6 +224,45 @@ export interface WSBackupProgressEvent {
   ready: boolean;
 }
 
+export type FSQueuedOpUnarchive = {
+  op: "unarchive";
+  src: string;
+};
+
+export type FSQueuedOp = FSQueuedOpUnarchive;
+
+export type FSOpUnarchive = {
+  op: "unarchive";
+  progress: number; // Note: 1 does not mean it's done
+  id: string; // UUID
+
+  mime: string;
+  src: string;
+  state:
+    | "queued"
+    | "ongoing"
+    | "cancelled"
+    | "done"
+    | "failed-corrupted"
+    | "failed-invalid-path"
+    | "failed-cf-no-serverpack"
+    | "failed-cf-not-available"
+    | "failed-not-reachable";
+
+  current_file: string | null;
+  failed_path?: string;
+  bytes_processed: number;
+  files_processed: number;
+  started: string;
+};
+
+export type FilesystemOp = FSOpUnarchive;
+
+export interface WSFilesystemOpsEvent {
+  event: "filesystem-ops";
+  all: FilesystemOp[];
+}
+
 export type WSEvent =
   | WSLogEvent
   | WSStatsEvent
@@ -234,7 +273,8 @@ export type WSEvent =
   | WSAuthOkEvent
   | WSUptimeEvent
   | WSNewModEvent
-  | WSBackupProgressEvent;
+  | WSBackupProgressEvent
+  | WSFilesystemOpsEvent;
 
 export interface Servers {
   servers: Server[];

apps/frontend/src/utils/analytics.js

@@ -262,8 +262,9 @@ export const processAnalyticsByCountry = (category, projects, sortFn) => {
 
   loadedProjectData.forEach((data) => {
     Object.entries(data).forEach(([country, value]) => {
-      const current = countrySums.get(country) || 0;
-      countrySums.set(country, current + value);
+      const countryCode = country || "XX";
+      const current = countrySums.get(countryCode) || 0;
+      countrySums.set(countryCode, current + value);
     });
   });