Merge commit 'affeec82f0f868d7e8260896584497dd4ea6465f' into feature-clean

2025-02-10 22:16:10 +03:00
parent 5bdbb8b5d5 affeec82f0
commit bc5991ce03
54 changed files with 3575 additions and 2778 deletions
--- a/apps/frontend/src/components/ui/servers/FileItem.vue
+++ b/apps/frontend/src/components/ui/servers/FileItem.vue
@@ -75,7 +75,7 @@ import {
  RightArrowIcon,
 } from "@modrinth/assets";
 import { computed, shallowRef, ref } from "vue";
-import { renderToString } from "@vue/server-renderer";
+import { renderToString } from "vue/server-renderer";
 import { useRouter, useRoute } from "vue-router";
 import {
  UiServersIconsCogFolderIcon,
--- a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
@@ -2,7 +2,7 @@
  <div ref="pyroFilesSentinel" class="sentinel" data-pyro-files-sentinel />
  <header
    :class="[
-      'duration-20 h-26 top-0 flex select-none flex-col justify-between gap-2 bg-table-alternateRow p-3 transition-[border-radius] sm:h-12 sm:flex-row',
+      'duration-20 top-0 flex select-none flex-col justify-between gap-2 bg-table-alternateRow p-3 transition-[border-radius] sm:h-12 sm:flex-row',
      !isStuck ? 'rounded-t-2xl' : 'sticky top-0 z-20',
    ]"
    data-pyro-files-state="browsing"
@@ -76,25 +76,23 @@
          <UiServersTeleportOverflowMenu
            position="bottom"
            direction="left"
-            aria-label="Sort files"
+            aria-label="Filter view"
            :options="[
-              { id: 'normal', action: () => $emit('sort', 'default') },
-              { id: 'modified', action: () => $emit('sort', 'modified') },
-              { id: 'created', action: () => $emit('sort', 'created') },
-              { id: 'filesOnly', action: () => $emit('sort', 'filesOnly') },
-              { id: 'foldersOnly', action: () => $emit('sort', 'foldersOnly') },
+              { id: 'all', action: () => $emit('filter', 'all') },
+              { id: 'filesOnly', action: () => $emit('filter', 'filesOnly') },
+              { id: 'foldersOnly', action: () => $emit('filter', 'foldersOnly') },
            ]"
          >
-            <span class="hidden whitespace-pre text-sm font-medium sm:block">
-              {{ sortMethodLabel }}
-            </span>
-            <SortAscendingIcon aria-hidden="true" />
+            <div class="flex items-center gap-1">
+              <FilterIcon aria-hidden="true" class="h-5 w-5" />
+              <span class="hidden text-sm font-medium sm:block">
+                {{ filterLabel }}
+              </span>
+            </div>
            <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-            <template #normal> Alphabetical </template>
-            <template #modified> Date modified </template>
-            <template #created> Date created </template>
-            <template #filesOnly> Files only </template>
-            <template #foldersOnly> Folders only </template>
+            <template #all>Show all</template>
+            <template #filesOnly>Files only</template>
+            <template #foldersOnly>Folders only</template>
          </UiServersTeleportOverflowMenu>
        </ButtonStyled>
        <div class="mx-1 w-full text-sm sm:w-48">
@@ -148,9 +146,9 @@ import {
  DropdownIcon,
  FolderOpenIcon,
  SearchIcon,
-  SortAscendingIcon,
  HomeIcon,
  ChevronRightIcon,
+  FilterIcon,
 } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
 import { ref, computed } from "vue";
@@ -159,15 +157,15 @@ import { useIntersectionObserver } from "@vueuse/core";
 const props = defineProps<{
  breadcrumbSegments: string[];
  searchQuery: string;
-  sortMethod: string;
+  currentFilter: string;
 }>();

 defineEmits<{
  (e: "navigate", index: number): void;
-  (e: "sort", method: string): void;
  (e: "create", type: "file" | "directory"): void;
  (e: "upload"): void;
  (e: "update:searchQuery", value: string): void;
+  (e: "filter", type: string): void;
 }>();

 const pyroFilesSentinel = ref<HTMLElement | null>(null);
@@ -181,18 +179,14 @@ useIntersectionObserver(
  { threshold: [0, 1] },
 );

-const sortMethodLabel = computed(() => {
-  switch (props.sortMethod) {
-    case "modified":
-      return "Date modified";
-    case "created":
-      return "Date created";
+const filterLabel = computed(() => {
+  switch (props.currentFilter) {
    case "filesOnly":
      return "Files only";
    case "foldersOnly":
      return "Folders only";
    default:
-      return "Alphabetical";
+      return "Show all";
  }
 });
 </script>
--- a/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
+++ b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
@@ -9,7 +9,7 @@
      @mouseleave="stopPan"
      @wheel.prevent="handleWheel"
    >
-      <UiServersPyroLoading v-if="state.isLoading" />
+      <div v-if="state.isLoading" />
      <div
        v-if="state.hasError"
        class="flex h-full w-full flex-col items-center justify-center gap-8"
--- a/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
@@ -1,14 +1,65 @@
 <template>
  <div
    aria-hidden="true"
-    class="flex w-full select-none flex-row items-center border-0 border-b border-solid border-bg-raised px-3 py-2 text-xs font-bold uppercase"
+    class="sticky top-12 z-20 flex h-8 w-full select-none flex-row items-center border-0 border-b border-solid border-bg-raised bg-bg px-3 text-xs font-bold uppercase"
  >
    <div class="min-w-[48px]"></div>
-    <span class="flex w-full">Name</span>
+    <button
+      class="flex h-full w-full appearance-none items-center gap-1 bg-transparent text-left hover:text-brand"
+      @click="$emit('sort', 'name')"
+    >
+      <span>Name</span>
+      <ChevronUpIcon v-if="sortField === 'name' && !sortDesc" class="h-3 w-3" aria-hidden="true" />
+      <ChevronDownIcon v-if="sortField === 'name' && sortDesc" class="h-3 w-3" aria-hidden="true" />
+    </button>
    <div class="flex shrink-0 gap-4 text-right md:gap-12">
-      <span class="hidden min-w-[160px] md:block">Created</span>
-      <span class="mr-4 min-w-[160px]">Modified</span>
-      <div class="min-w-[36px]"></div>
+      <button
+        class="hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
+        @click="$emit('sort', 'created')"
+      >
+        <span>Created</span>
+        <ChevronUpIcon
+          v-if="sortField === 'created' && !sortDesc"
+          class="h-3 w-3"
+          aria-hidden="true"
+        />
+        <ChevronDownIcon
+          v-if="sortField === 'created' && sortDesc"
+          class="h-3 w-3"
+          aria-hidden="true"
+        />
+      </button>
+      <button
+        class="mr-4 hidden min-w-[160px] appearance-none items-center justify-start gap-1 bg-transparent hover:text-brand md:flex"
+        @click="$emit('sort', 'modified')"
+      >
+        <span>Modified</span>
+        <ChevronUpIcon
+          v-if="sortField === 'modified' && !sortDesc"
+          class="h-3 w-3"
+          aria-hidden="true"
+        />
+        <ChevronDownIcon
+          v-if="sortField === 'modified' && sortDesc"
+          class="h-3 w-3"
+          aria-hidden="true"
+        />
+      </button>
+      <div class="min-w-[24px]"></div>
    </div>
  </div>
 </template>
+
+<script setup lang="ts">
+import ChevronDownIcon from "./icons/ChevronDownIcon.vue";
+import ChevronUpIcon from "./icons/ChevronUpIcon.vue";
+
+defineProps<{
+  sortField: string;
+  sortDesc: boolean;
+}>();
+
+defineEmits<{
+  (e: "sort", field: string): void;
+}>();
+</script>
--- a/apps/frontend/src/components/ui/servers/InstallingTicker.vue
+++ b/apps/frontend/src/components/ui/servers/InstallingTicker.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="ticker-container">
+    <div class="ticker-content">
+      <div
+        v-for="(message, index) in msgs"
+        :key="message"
+        class="ticker-item text-xs"
+        :class="{ active: index === currentIndex % msgs.length }"
+      >
+        {{ message }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+
+const msgs = [
+  "Organizing files...",
+  "Downloading mods...",
+  "Configuring server...",
+  "Setting up environment...",
+  "Adding Java...",
+];
+
+const currentIndex = ref(0);
+
+let intervalId: NodeJS.Timeout | null = null;
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    currentIndex.value = (currentIndex.value + 1) % msgs.length;
+  }, 3000);
+});
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+});
+</script>
+
+<style scoped>
+.ticker-container {
+  height: 20px;
+  width: 100%;
+  position: relative;
+}
+
+.ticker-content {
+  position: relative;
+  width: 100%;
+}
+
+.ticker-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  color: var(--color-secondary-text);
+  opacity: 0;
+  transform: scale(0.9);
+  filter: blur(4px);
+  transition: all 0.3s ease-in-out;
+}
+
+.ticker-item.active {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+</style>
--- a/apps/frontend/src/components/ui/servers/LoaderSelector.vue
+++ b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
@@ -10,6 +10,7 @@
        :is-current="isCurrentLoader(loader.name)"
        :loader-version="data.loader_version"
        :current-loader="data.loader"
+        :is-installing="isInstalling"
        @select="selectLoader"
      />
    </div>
@@ -28,6 +29,7 @@
          :is-current="isCurrentLoader(loader.name)"
          :loader-version="data.loader_version"
          :current-loader="data.loader"
+          :is-installing="isInstalling"
          @select="selectLoader"
        />
      </div>
@@ -47,6 +49,7 @@
          :is-current="isCurrentLoader(loader.name)"
          :loader-version="data.loader_version"
          :current-loader="data.loader"
+          :is-installing="isInstalling"
          @select="selectLoader"
        />
      </div>
@@ -60,6 +63,7 @@ const props = defineProps<{
    loader: string | null;
    loader_version: string | null;
  };
+  isInstalling?: boolean;
 }>();

 const emit = defineEmits<{
--- a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
+++ b/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
@@ -31,7 +31,7 @@
    </div>

    <ButtonStyled>
-      <button @click="onSelect">
+      <button :disabled="isInstalling" @click="onSelect">
        <DownloadIcon class="h-5 w-5" />
        {{ isCurrentLoader ? "Reinstall" : "Install" }}
      </button>
@@ -52,6 +52,7 @@ interface Props {
  loader: LoaderInfo;
  currentLoader: string | null;
  loaderVersion: string | null;
+  isInstalling?: boolean;
 }

 const props = defineProps<Props>();
--- a/apps/frontend/src/components/ui/servers/LogLine.vue
+++ b/apps/frontend/src/components/ui/servers/LogLine.vue
@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="parsed-log relative flex h-8 w-full items-center overflow-hidden rounded-lg px-6"
+    @mouseenter="checkOverflow"
+    @touchstart="checkOverflow"
+  >
+    <div ref="logContent" class="log-content flex-1 truncate whitespace-pre">
+      <span v-html="sanitizedLog"></span>
+    </div>
+    <button
+      v-if="isOverflowing"
+      class="ml-2 flex h-6 items-center rounded-md bg-bg px-2 text-xs text-contrast opacity-50 transition-opacity hover:opacity-100"
+      type="button"
+      @click.stop="$emit('show-full-log', props.log)"
+    >
+      ...
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import Convert from "ansi-to-html";
+import DOMPurify from "dompurify";
+
+const props = defineProps<{
+  log: string;
+}>();
+
+defineEmits<{
+  "show-full-log": [log: string];
+}>();
+
+const logContent = ref<HTMLElement | null>(null);
+const isOverflowing = ref(false);
+
+const checkOverflow = () => {
+  if (logContent.value && !isOverflowing.value) {
+    isOverflowing.value = logContent.value.scrollWidth > logContent.value.clientWidth;
+  }
+};
+
+const convert = new Convert({
+  fg: "#FFF",
+  bg: "#000",
+  newline: false,
+  escapeXML: true,
+  stream: false,
+});
+
+const sanitizedLog = computed(() =>
+  DOMPurify.sanitize(convert.toHtml(props.log), {
+    ALLOWED_TAGS: ["span"],
+    ALLOWED_ATTR: ["style"],
+    USE_PROFILES: { html: true },
+  }),
+);
+
+const preventSelection = (e: MouseEvent) => {
+  e.preventDefault();
+};
+
+onMounted(() => {
+  logContent.value?.addEventListener("mousedown", preventSelection);
+});
+
+onUnmounted(() => {
+  logContent.value?.removeEventListener("mousedown", preventSelection);
+});
+</script>
+
+<style scoped>
+.parsed-log {
+  background: transparent;
+  transition: background-color 0.1s;
+}
+
+.parsed-log:hover {
+  background: rgba(128, 128, 128, 0.25);
+  transition: 0s;
+}
+
+.log-content > span {
+  user-select: none;
+  white-space: pre;
+}
+
+.log-content {
+  white-space: pre;
+}
+</style>
--- a/apps/frontend/src/components/ui/servers/LogParser.vue
+++ b/apps/frontend/src/components/ui/servers/LogParser.vue
@@ -1,107 +0,0 @@
-<template>
-  <div class="parsed-log group relative w-full overflow-hidden px-6 py-1">
-    <div
-      ref="logContent"
-      class="log-content selectable whitespace-pre-wrap selection:bg-black selection:text-white dark:selection:bg-white dark:selection:text-black"
-      v-html="sanitizedLog"
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import Convert from "ansi-to-html";
-import DOMPurify from "dompurify";
-
-const props = defineProps<{
-  log: string;
-  index: number;
-}>();
-
-const logContent = ref<HTMLElement | null>(null);
-
-const colors = {
-  30: "#101010",
-  31: "#EFA6A2",
-  32: "#80C990",
-  33: "#A69460",
-  34: "#A3B8EF",
-  35: "#E6A3DC",
-  36: "#50CACD",
-  37: "#808080",
-  90: "#454545",
-  91: "#E0AF85",
-  92: "#5ACCAF",
-  93: "#C8C874",
-  94: "#CCACED",
-  95: "#F2A1C2",
-  96: "#74C3E4",
-  97: "#C0C0C0",
-};
-
-const convert = new Convert({
-  fg: "#FFF",
-  bg: "#000",
-  newline: false,
-  escapeXML: true,
-  stream: false,
-  colors,
-});
-
-const urlRegex = /https?:\/\/[^\s]+/g;
-const usernameRegex = /&lt;([^&]+)&gt;/g;
-
-const sanitizedLog = computed(() => {
-  let html = convert.toHtml(props.log);
-  html = html.replace(
-    urlRegex,
-    (url) =>
-      `<a style="color:var(--color-link);text-decoration:underline;" href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`,
-  );
-  html = html.replace(
-    usernameRegex,
-    (_, username) => `<span class="minecraft-username">&lt;${username}&gt;</span>`,
-  );
-  return DOMPurify.sanitize(html, {
-    ALLOWED_TAGS: ["span", "a"],
-    ALLOWED_ATTR: ["style", "href", "target", "rel", "class"],
-    ADD_ATTR: ["target"],
-    RETURN_TRUSTED_TYPE: true,
-    USE_PROFILES: { html: true },
-  });
-});
-</script>
-
-<style scoped>
-.parsed-log:hover:not(.selected) {
-  border-radius: 0.5rem;
-}
-
-html.light-mode .parsed-log:hover:not(.selected) {
-  background-color: #ccc;
-}
-
-html.dark-mode .parsed-log:hover:not(.selected) {
-  background-color: #222;
-}
-
-html.oled-mode .parsed-log:hover:not(.selected) {
-  background-color: #222;
-}
-
-.minecraft-username {
-  font-weight: bold;
-}
-
-::v-deep(.log-content) {
-  user-select: none;
-}
-
-::v-deep(.log-content.selectable) {
-  user-select: text;
-}
-
-::v-deep(.log-content *) {
-  user-select: text;
-}
-</style>
--- a/apps/frontend/src/components/ui/servers/PanelCopyIP.vue
+++ b/apps/frontend/src/components/ui/servers/PanelCopyIP.vue
@@ -1,31 +0,0 @@
-<template>
-  <ButtonStyled type="standard">
-    <button aria-label="Copy server IP" @click="copyText">
-      <CopyIcon />
-      Copy IP
-    </button>
-  </ButtonStyled>
-</template>
-
-<script setup lang="ts">
-import { CopyIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
-
-const props = defineProps<{
-  ip: string;
-  port: number;
-  subdomain?: string | null;
-}>();
-
-const copyText = () => {
-  const text = props.subdomain ? `${props.subdomain}.modrinth.gg` : `${props.ip}:${props.port}`;
-  navigator.clipboard.writeText(text);
-
-  addNotification({
-    group: "server",
-    title: `Copied IP`,
-    text: `Your server's IP has been copied to your clipboard`,
-    type: "success",
-  });
-};
-</script>
--- a/apps/frontend/src/components/ui/servers/PanelOverviewLoading.vue
+++ b/apps/frontend/src/components/ui/servers/PanelOverviewLoading.vue
@@ -1,77 +0,0 @@
-<template>
-  <div
-    aria-hidden="true"
-    style="font-variant-numeric: tabular-nums"
-    class="pointer-events-none h-full w-full select-none"
-  >
-    <div class="flex flex-col gap-6">
-      <div class="flex flex-row items-center gap-6">
-        <div
-          class="relative max-h-[156px] min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
-        >
-          <div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
-            <div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
-              <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">0.00%</h2>
-              <h3 class="relative z-10 text-sm font-normal text-secondary">/ 100%</h3>
-            </div>
-            <h3 class="relative z-10 text-base font-normal text-secondary">CPU usage</h3>
-          </div>
-          <CPUIcon class="absolute right-10 top-10" />
-        </div>
-        <div
-          class="relative max-h-[156px] min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
-        >
-          <div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
-            <div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
-              <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">0.00%</h2>
-              <h3 class="relative z-10 text-sm font-normal text-secondary">/ 100%</h3>
-            </div>
-            <h3 class="relative z-10 text-base font-normal text-secondary">Memory usage</h3>
-          </div>
-          <DBIcon class="absolute right-10 top-10" />
-        </div>
-        <div
-          class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8 transition-transform duration-100 hover:scale-105 active:scale-100"
-        >
-          <div class="flex flex-row items-center gap-2">
-            <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">0 Bytes</h2>
-            <h3 class="relative z-10 text-sm font-normal text-secondary">/ 0 Bytes</h3>
-          </div>
-          <h3 class="relative z-10 text-base font-normal text-secondary">Storage usage</h3>
-          <FolderOpenIcon class="absolute right-10 top-10 size-8" />
-        </div>
-      </div>
-
-      <div
-        class="relative flex h-full w-full flex-col gap-3 overflow-hidden rounded-2xl bg-bg-raised p-8"
-      >
-        <div class="experimental-styles-within flex flex-row items-center">
-          <div class="flex flex-row items-center gap-4">
-            <h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
-          </div>
-        </div>
-        <div
-          class="console relative h-full min-h-[488px] w-full overflow-hidden rounded-xl bg-bg text-sm"
-        ></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { CPUIcon, DBIcon, FolderOpenIcon } from "@modrinth/assets";
-</script>
-
-<style scoped>
-html.light-mode .console {
-  background: var(--color-bg);
-}
-
-html.dark-mode .console {
-  background: black;
-}
-
-html.oled-mode .console {
-  background: black;
-}
-</style>
--- a/apps/frontend/src/components/ui/servers/PanelTerminal.vue
+++ b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
--- a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
@@ -0,0 +1,164 @@
+<template>
+  <NewModal
+    ref="modal"
+    :header="'Changing ' + props.project?.title + ' version'"
+    @hide="onHide"
+    @show="onShow"
+  >
+    <div class="flex flex-col gap-4 md:w-[600px]">
+      <div class="flex flex-col gap-2">
+        <p class="m-0">
+          Select the version of {{ props.project?.title || "the modpack" }} you want to install on
+          your server.
+        </p>
+        <p v-if="props.currentVersion" class="m-0 text-sm text-secondary">
+          Currently installed: {{ props.currentVersion.version_number }}
+        </p>
+      </div>
+
+      <div class="flex w-full flex-col gap-4">
+        <UiServersTeleportDropdownMenu
+          v-if="props.versions?.length"
+          v-model="selectedVersion"
+          :options="versionOptions"
+          placeholder="Select version..."
+          name="version"
+          class="w-full max-w-full"
+        />
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
+              Erase all data
+            </label>
+            <input
+              id="modpack-hard-reset"
+              v-model="hardReset"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            If enabled, existing mods, worlds, and configurations, will be deleted before installing
+            the new modpack version.
+          </div>
+        </div>
+
+        <div class="mt-4 flex justify-start gap-4">
+          <ButtonStyled :color="hardReset ? 'red' : 'brand'">
+            <button
+              :disabled="isLoading || !selectedVersion || props.serverStatus === 'installing'"
+              @click="handleReinstall"
+            >
+              <DownloadIcon class="size-4" />
+              {{ isLoading ? "Installing..." : hardReset ? "Erase and install" : "Install" }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled>
+            <button :disabled="isLoading" @click="hide">
+              <XIcon />
+              Cancel
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { DownloadIcon, XIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  project: any;
+  versions: any[];
+  currentVersion?: any;
+  currentVersionId?: string;
+  serverStatus?: string;
+}>();
+
+const emit = defineEmits<{
+  reinstall: [any?];
+}>();
+
+const modal = ref();
+const hardReset = ref(false);
+const isLoading = ref(false);
+const selectedVersion = ref("");
+
+const versionOptions = computed(() => props.versions?.map((v) => v.version_number) || []);
+
+const handleReinstall = async () => {
+  if (!selectedVersion.value || !props.project?.id) return;
+
+  isLoading.value = true;
+  try {
+    const versionId = props.versions.find((v) => v.version_number === selectedVersion.value)?.id;
+
+    await props.server.general?.reinstall(
+      props.server.serverId,
+      false,
+      props.project.id,
+      versionId,
+      undefined,
+      hardReset.value,
+    );
+
+    emit("reinstall");
+    hide();
+  } catch (error) {
+    if (error instanceof PyroFetchError && error.statusCode === 429) {
+      addNotification({
+        group: "server",
+        title: "Cannot reinstall server",
+        text: "You are being rate limited. Please try again later.",
+        type: "error",
+      });
+    } else {
+      addNotification({
+        group: "server",
+        title: "Reinstall Failed",
+        text: "An unexpected error occurred while reinstalling. Please try again later.",
+        type: "error",
+      });
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+watch(
+  () => props.serverStatus,
+  (newStatus) => {
+    if (newStatus === "installing") {
+      hide();
+    }
+  },
+);
+
+const onShow = () => {
+  hardReset.value = false;
+  selectedVersion.value =
+    props.currentVersion?.version_number ?? props.versions?.[0]?.version_number ?? "";
+};
+
+const onHide = () => {
+  hardReset.value = false;
+  selectedVersion.value = "";
+  isLoading.value = false;
+};
+
+const show = () => modal.value?.show();
+const hide = () => modal.value?.hide();
+
+defineExpose({ show, hide });
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
--- a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
@@ -0,0 +1,281 @@
+<template>
+  <NewModal ref="mrpackModal" header="Uploading mrpack" @hide="onHide" @show="onShow">
+    <div class="flex flex-col gap-4 md:w-[600px]">
+      <p
+        v-if="isMrpackModalSecondPhase"
+        :style="{
+          lineHeight: isMrpackModalSecondPhase ? '1.5' : undefined,
+          marginBottom: isMrpackModalSecondPhase ? '-12px' : '0',
+          marginTop: isMrpackModalSecondPhase ? '-4px' : '-2px',
+        }"
+      >
+        This will reinstall your server and erase all data. You may want to back up your server
+        before proceeding. Are you sure you want to continue?
+      </p>
+      <div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
+        <div class="mx-auto flex flex-row items-center gap-4">
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
+          >
+            <UploadIcon class="size-10" />
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-10"
+          >
+            <path d="M5 9v6" />
+            <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
+          </svg>
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
+          >
+            <ServerIcon class="size-10" />
+          </div>
+        </div>
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="text-sm font-bold text-contrast">Upload mrpack</div>
+          <input
+            type="file"
+            accept=".mrpack"
+            class=""
+            :disabled="isLoading"
+            @change="uploadMrpack"
+          />
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
+              Erase all data
+            </label>
+            <input
+              id="hard-reset"
+              v-model="hardReset"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            Removes all data on your server, including your worlds, mods, and configuration files,
+            then reinstalls it with the selected version.
+          </div>
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="backup-server-mrpack">
+              Backup server
+            </label>
+            <input
+              id="backup-server-mrpack"
+              v-model="backupServer"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>Creates a backup of your server before proceeding.</div>
+        </div>
+      </div>
+      <div class="mt-4 flex justify-start gap-4">
+        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
+          <button :disabled="canInstall" @click="handleReinstall">
+            <RightArrowIcon />
+            {{
+              isBackingUp
+                ? "Backing up..."
+                : isMrpackModalSecondPhase
+                  ? "Erase and install"
+                  : loadingServerCheck
+                    ? "Loading..."
+                    : isDangerous
+                      ? "Erase and install"
+                      : "Install"
+            }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button
+            :disabled="isLoading"
+            @click="
+              if (isMrpackModalSecondPhase) {
+                isMrpackModalSecondPhase = false;
+              } else {
+                hide();
+              }
+            "
+          >
+            <XIcon />
+            {{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { UploadIcon, RightArrowIcon, XIcon, ServerIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const emit = defineEmits<{
+  reinstall: [any?];
+}>();
+
+const mrpackModal = ref();
+const isMrpackModalSecondPhase = ref(false);
+const hardReset = ref(false);
+const backupServer = ref(false);
+const isLoading = ref(false);
+const isBackingUp = ref(false);
+const loadingServerCheck = ref(false);
+const mrpackFile = ref<File | null>(null);
+
+const isDangerous = computed(() => hardReset.value);
+const canInstall = computed(() => !mrpackFile.value || isLoading.value || loadingServerCheck.value);
+
+const uploadMrpack = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (!target.files || target.files.length === 0) {
+    return;
+  }
+  mrpackFile.value = target.files[0];
+};
+
+const performBackup = async (): Promise<boolean> => {
+  try {
+    const date = new Date();
+    const format = date.toLocaleString(navigator.language || "en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short",
+    });
+    const backupName = `Reinstallation - ${format}`;
+    isLoading.value = true;
+    const backupId = await props.server.backups?.create(backupName);
+    isBackingUp.value = true;
+    let attempts = 0;
+    while (true) {
+      attempts++;
+      if (attempts > 100) {
+        addNotification({
+          group: "server",
+          title: "Backup Failed",
+          text: "An unexpected error occurred while backing up. Please try again later.",
+        });
+        return false;
+      }
+      await props.server.refresh(["backups"]);
+      const backups = await props.server.backups?.data;
+      const backup = backupId ? backups?.find((x) => x.id === backupId) : undefined;
+      if (backup && !backup.ongoing) {
+        isBackingUp.value = false;
+        break;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 5000));
+    }
+    return true;
+  } catch {
+    addNotification({
+      group: "server",
+      title: "Backup Failed",
+      text: "An unexpected error occurred while backing up. Please try again later.",
+    });
+    return false;
+  }
+};
+
+const handleReinstall = async () => {
+  if (hardReset.value && !backupServer.value && !isMrpackModalSecondPhase.value) {
+    isMrpackModalSecondPhase.value = true;
+    return;
+  }
+
+  if (backupServer.value && !(await performBackup())) {
+    isLoading.value = false;
+    return;
+  }
+
+  isLoading.value = true;
+
+  try {
+    if (!mrpackFile.value) {
+      throw new Error("No mrpack file selected");
+    }
+
+    const mrpack = new File([mrpackFile.value], mrpackFile.value.name, {
+      type: mrpackFile.value.type,
+    });
+
+    await props.server.general?.reinstallFromMrpack(mrpack, hardReset.value);
+
+    emit("reinstall", {
+      loader: "mrpack",
+      lVersion: "",
+      mVersion: "",
+    });
+
+    await nextTick();
+    window.scrollTo(0, 0);
+    hide();
+  } catch (error) {
+    if (error instanceof PyroFetchError && error.statusCode === 429) {
+      addNotification({
+        group: "server",
+        title: "Cannot reinstall server",
+        text: "You are being rate limited. Please try again later.",
+        type: "error",
+      });
+    } else {
+      addNotification({
+        group: "server",
+        title: "Reinstall Failed",
+        text: "An unexpected error occurred while reinstalling. Please try again later.",
+        type: "error",
+      });
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const onShow = () => {
+  hardReset.value = false;
+  backupServer.value = false;
+  isMrpackModalSecondPhase.value = false;
+  loadingServerCheck.value = false;
+  isLoading.value = false;
+  mrpackFile.value = null;
+};
+
+const onHide = () => {
+  onShow();
+};
+
+const show = () => mrpackModal.value?.show();
+const hide = () => mrpackModal.value?.hide();
+
+defineExpose({ show, hide });
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
@@ -0,0 +1,551 @@
+<template>
+  <NewModal
+    ref="versionSelectModal"
+    :header="
+      isSecondPhase
+        ? 'Confirming reinstallation'
+        : `${props.currentLoader === selectedLoader ? 'Reinstalling' : 'Installing'}
+      ${selectedLoader.toLowerCase() === 'vanilla' ? 'Vanilla Minecraft' : selectedLoader}`
+    "
+    @hide="onHide"
+    @show="onShow"
+  >
+    <div class="flex flex-col gap-4 md:w-[600px]">
+      <p
+        v-if="isSecondPhase"
+        :style="{
+          lineHeight: isSecondPhase ? '1.5' : undefined,
+          marginBottom: isSecondPhase ? '-12px' : '0',
+          marginTop: isSecondPhase ? '-4px' : '-2px',
+        }"
+      >
+        {{
+          backupServer
+            ? "A backup will be created before proceeding with the reinstallation, then all data will be erased from your server. Are you sure you want to continue?"
+            : "This will reinstall your server and erase all data. Are you sure you want to continue?"
+        }}
+      </p>
+      <div v-if="!isSecondPhase" class="flex flex-col gap-4">
+        <div class="mx-auto flex flex-row items-center gap-4">
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
+          >
+            <UiServersIconsLoaderIcon class="size-10" :loader="selectedLoader" />
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-10"
+          >
+            <path d="M5 9v6" />
+            <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
+          </svg>
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
+          >
+            <ServerIcon class="size-10" />
+          </div>
+        </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>
+          <UiServersTeleportDropdownMenu
+            v-model="selectedMCVersion"
+            name="mcVersion"
+            :options="mcVersions"
+            class="w-full max-w-[100%]"
+            placeholder="Select Minecraft version..."
+          />
+        </div>
+
+        <div
+          v-if="selectedLoader.toLowerCase() !== 'vanilla'"
+          class="flex w-full flex-col gap-2 rounded-2xl p-4"
+          :class="{
+            'bg-table-alternateRow':
+              !selectedMCVersion || isLoading || selectedLoaderVersions.length > 0,
+            'bg-highlight-red':
+              selectedMCVersion && !isLoading && selectedLoaderVersions.length === 0,
+          }"
+        >
+          <div class="flex flex-col gap-2">
+            <div class="text-sm font-bold text-contrast">{{ selectedLoader }} version</div>
+
+            <template v-if="!selectedMCVersion">
+              <div
+                class="relative flex h-9 w-full select-none items-center rounded-xl bg-button-bg px-4 opacity-50"
+              >
+                Select a Minecraft version to see available versions
+                <DropdownIcon class="absolute right-4" />
+              </div>
+            </template>
+            <template v-else-if="isLoading">
+              <div
+                class="relative flex h-9 w-full items-center rounded-xl bg-button-bg px-4 opacity-50"
+              >
+                <UiServersIconsLoadingIcon class="mr-2 animate-spin" />
+                Loading versions...
+                <DropdownIcon class="absolute right-4" />
+              </div>
+            </template>
+            <template v-else-if="selectedLoaderVersions.length > 0">
+              <UiServersTeleportDropdownMenu
+                v-model="selectedLoaderVersion"
+                name="loaderVersion"
+                :options="selectedLoaderVersions"
+                class="w-full max-w-[100%]"
+                :placeholder="
+                  selectedLoader.toLowerCase() === 'paper' ||
+                  selectedLoader.toLowerCase() === 'purpur'
+                    ? `Select build number...`
+                    : `Select loader version...`
+                "
+              />
+            </template>
+            <template v-else>
+              <div>No versions available for Minecraft {{ selectedMCVersion }}.</div>
+            </template>
+          </div>
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
+              Erase all data
+            </label>
+            <input
+              id="hard-reset"
+              v-model="hardReset"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            Removes all data on your server, including your worlds, mods, and configuration files,
+            then reinstalls it with the selected version.
+          </div>
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="backup-server">
+              Backup server
+            </label>
+            <input
+              id="backup-server"
+              v-model="backupServer"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            Creates a backup of your server before proceeding with the installation or
+            reinstallation.
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-4 flex justify-start gap-4">
+        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
+          <button :disabled="canInstall" @click="handleReinstall">
+            <RightArrowIcon />
+            {{
+              isBackingUp
+                ? "Backing up..."
+                : isLoading
+                  ? "Installing..."
+                  : isSecondPhase
+                    ? "Erase and install"
+                    : hardReset
+                      ? "Continue"
+                      : "Install"
+            }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button
+            :disabled="isLoading"
+            @click="
+              if (isSecondPhase) {
+                isSecondPhase = false;
+              } else {
+                hide();
+              }
+            "
+          >
+            <XIcon />
+            {{ isSecondPhase ? "Go back" : "Cancel" }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { RightArrowIcon, XIcon, ServerIcon, DropdownIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+import type { Loaders } from "~/types/servers";
+
+interface LoaderVersion {
+  id: string;
+  stable: boolean;
+  loaders: {
+    id: string;
+    url: string;
+    stable: boolean;
+  }[];
+}
+
+type VersionMap = Record<string, LoaderVersion[]>;
+type VersionCache = Record<string, any>;
+
+const props = defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  currentLoader: Loaders | undefined;
+}>();
+
+const emit = defineEmits<{
+  reinstall: [any?];
+}>();
+
+const versionSelectModal = ref();
+const isSecondPhase = ref(false);
+const hardReset = ref(false);
+const backupServer = ref(false);
+const isLoading = ref(false);
+const isBackingUp = ref(false);
+const loadingServerCheck = ref(false);
+const serverCheckError = ref("");
+
+const selectedLoader = ref<Loaders>("Vanilla");
+const selectedMCVersion = ref("");
+const selectedLoaderVersion = ref("");
+
+const paperVersions = ref<Record<string, number[]>>({});
+const purpurVersions = ref<Record<string, string[]>>({});
+const loaderVersions = ref<VersionMap>({});
+const cachedVersions = ref<VersionCache>({});
+
+const versionStrings = ["forge", "fabric", "quilt", "neo"] as const;
+
+const fetchLoaderVersions = async () => {
+  const versions = await Promise.all(
+    versionStrings.map(async (loader) => {
+      const runFetch = async (iterations: number) => {
+        if (iterations > 5) {
+          throw new Error("Failed to fetch loader versions");
+        }
+        try {
+          const res = await $fetch(`/loader-versions?loader=${loader}`);
+          return { [loader]: (res as any).gameVersions };
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_) {
+          return await runFetch(iterations + 1);
+        }
+      };
+      try {
+        return await runFetch(0);
+      } catch (e) {
+        console.error(e);
+        return { [loader]: [] };
+      }
+    }),
+  );
+
+  loaderVersions.value = versions.reduce((acc, val) => ({ ...acc, ...val }), {});
+};
+
+const fetchPaperVersions = async (mcVersion: string) => {
+  try {
+    const res = await $fetch(`https://api.papermc.io/v2/projects/paper/versions/${mcVersion}`);
+    paperVersions.value[mcVersion] = (res as any).builds.sort((a: number, b: number) => b - a);
+    return res;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+};
+
+const fetchPurpurVersions = async (mcVersion: string) => {
+  try {
+    const res = await $fetch(`https://api.purpurmc.org/v2/purpur/${mcVersion}`);
+    purpurVersions.value[mcVersion] = (res as any).builds.all.sort(
+      (a: string, b: string) => parseInt(b) - parseInt(a),
+    );
+    return res;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+};
+
+const selectedLoaderVersions = computed(() => {
+  const loader = selectedLoader.value.toLowerCase();
+
+  if (loader === "paper") {
+    return paperVersions.value[selectedMCVersion.value] || [];
+  }
+
+  if (loader === "purpur") {
+    return purpurVersions.value[selectedMCVersion.value] || [];
+  }
+
+  if (loader === "vanilla") {
+    return [];
+  }
+
+  let apiLoader = loader;
+  if (loader === "neoforge") {
+    apiLoader = "neo";
+  }
+
+  const backwardsCompatibleVersion = loaderVersions.value[apiLoader]?.find(
+    // eslint-disable-next-line no-template-curly-in-string
+    (x) => x.id === "${modrinth.gameVersion}",
+  );
+
+  if (backwardsCompatibleVersion) {
+    return backwardsCompatibleVersion.loaders.map((x) => x.id);
+  }
+
+  return (
+    loaderVersions.value[apiLoader]
+      ?.find((x) => x.id === selectedMCVersion.value)
+      ?.loaders.map((x) => x.id) || []
+  );
+});
+
+watch(selectedLoader, async () => {
+  if (selectedMCVersion.value) {
+    selectedLoaderVersion.value = "";
+    serverCheckError.value = "";
+
+    await checkVersionAvailability(selectedMCVersion.value);
+  }
+});
+
+watch(
+  selectedLoaderVersions,
+  (newVersions) => {
+    if (newVersions.length > 0 && !selectedLoaderVersion.value) {
+      selectedLoaderVersion.value = String(newVersions[0]); // Ensure string type
+    }
+  },
+  { immediate: true },
+);
+
+const checkVersionAvailability = async (version: string) => {
+  if (!version || version.trim().length < 3) return;
+
+  isLoading.value = true;
+  loadingServerCheck.value = true;
+
+  try {
+    const mcRes =
+      cachedVersions.value[version] ||
+      (await $fetch(`/loader-versions?loader=minecraft&version=${version}`));
+
+    cachedVersions.value[version] = mcRes;
+
+    if (!mcRes.downloads?.server) {
+      serverCheckError.value = "We couldn't find a server.jar for this version.";
+      return;
+    }
+
+    const loader = selectedLoader.value.toLowerCase();
+    if (loader === "paper" || loader === "purpur") {
+      const fetchFn = loader === "paper" ? fetchPaperVersions : fetchPurpurVersions;
+      const result = await fetchFn(version);
+      if (!result) {
+        serverCheckError.value = `This Minecraft version is not supported by ${loader}.`;
+        return;
+      }
+    }
+
+    serverCheckError.value = "";
+  } catch (error) {
+    console.error(error);
+    serverCheckError.value = "Failed to fetch versions.";
+  } finally {
+    loadingServerCheck.value = false;
+    isLoading.value = false;
+  }
+};
+
+watch(selectedMCVersion, checkVersionAvailability);
+
+onMounted(() => {
+  fetchLoaderVersions();
+});
+
+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 isDangerous = computed(() => hardReset.value);
+const canInstall = computed(() => {
+  const conds =
+    !selectedMCVersion.value ||
+    isLoading.value ||
+    loadingServerCheck.value ||
+    serverCheckError.value.trim().length > 0;
+
+  if (selectedLoader.value.toLowerCase() === "vanilla") {
+    return conds;
+  }
+
+  return conds || !selectedLoaderVersion.value;
+});
+
+const performBackup = async (): Promise<boolean> => {
+  try {
+    const date = new Date();
+    const format = date.toLocaleString(navigator.language || "en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      timeZoneName: "short",
+    });
+    const backupName = `Reinstallation - ${format}`;
+    isLoading.value = true;
+    const backupId = await props.server.backups?.create(backupName);
+    isBackingUp.value = true;
+    let attempts = 0;
+    while (true) {
+      attempts++;
+      if (attempts > 100) {
+        addNotification({
+          group: "server",
+          title: "Backup Failed",
+          text: "An unexpected error occurred while backing up. Please try again later.",
+        });
+        return false;
+      }
+      await props.server.refresh(["backups"]);
+      const backups = await props.server.backups?.data;
+      const backup = backupId ? backups?.find((x) => x.id === backupId) : undefined;
+      if (backup && !backup.ongoing) {
+        isBackingUp.value = false;
+        break;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 5000));
+    }
+    return true;
+  } catch {
+    addNotification({
+      group: "server",
+      title: "Backup Failed",
+      text: "An unexpected error occurred while backing up. Please try again later.",
+    });
+    return false;
+  }
+};
+
+const handleReinstall = async () => {
+  if (hardReset.value && !isSecondPhase.value) {
+    isSecondPhase.value = true;
+    return;
+  }
+
+  if (backupServer.value) {
+    isBackingUp.value = true;
+    if (!(await performBackup())) {
+      isBackingUp.value = false;
+      isLoading.value = false;
+      return;
+    }
+    isBackingUp.value = false;
+  }
+
+  isLoading.value = true;
+
+  try {
+    await props.server.general?.reinstall(
+      props.server.serverId,
+      true,
+      selectedLoader.value,
+      selectedMCVersion.value,
+      selectedLoader.value === "Vanilla" ? "" : selectedLoaderVersion.value,
+      hardReset.value,
+    );
+
+    emit("reinstall", {
+      loader: selectedLoader.value,
+      lVersion: selectedLoaderVersion.value,
+      mVersion: selectedMCVersion.value,
+    });
+
+    hide();
+  } catch (error) {
+    if (error instanceof PyroFetchError && error.statusCode === 429) {
+      addNotification({
+        group: "server",
+        title: "Cannot reinstall server",
+        text: "You are being rate limited. Please try again later.",
+        type: "error",
+      });
+    } else {
+      addNotification({
+        group: "server",
+        title: "Reinstall Failed",
+        text: "An unexpected error occurred while reinstalling. Please try again later.",
+        type: "error",
+      });
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const onShow = () => {
+  selectedMCVersion.value = props.server.general?.mc_version || "";
+  selectedLoaderVersion.value = "";
+  hardReset.value = false;
+};
+
+const onHide = () => {
+  hardReset.value = false;
+  backupServer.value = false;
+  isSecondPhase.value = false;
+  serverCheckError.value = "";
+  loadingServerCheck.value = false;
+  isLoading.value = false;
+  selectedMCVersion.value = "";
+  selectedLoaderVersion.value = "";
+  serverCheckError.value = "";
+  paperVersions.value = {};
+  purpurVersions.value = {};
+};
+
+const show = (loader: Loaders) => {
+  selectedLoader.value = loader;
+  selectedMCVersion.value = props.server.general?.mc_version || "";
+  versionSelectModal.value?.show();
+};
+const hide = () => versionSelectModal.value?.hide();
+
+defineExpose({ show, hide });
+</script>
+
+<style scoped>
+.stylized-toggle:checked::after {
+  background: var(--color-accent-contrast) !important;
+}
+</style>
--- a/apps/frontend/src/components/ui/servers/ProjectSelect.vue
+++ b/apps/frontend/src/components/ui/servers/ProjectSelect.vue
@@ -1,167 +0,0 @@
-<template>
-  <div class="flex h-[400px] w-full max-w-xl flex-col overflow-hidden">
-    <div class="iconified-input mb-4 w-full">
-      <label class="hidden" for="search">Search</label>
-      <SearchIcon aria-hidden="true" />
-      <input
-        id="search"
-        v-model="queryFilter"
-        name="search"
-        type="search"
-        :placeholder="`Search ${props.type}s...`"
-        autocomplete="off"
-        @keyup.enter="resetList"
-      />
-    </div>
-    <div class="flex h-full w-full flex-col">
-      <div
-        v-if="mods && mods.hits.length > 0"
-        ref="scrollContainer"
-        class="flex h-full w-full flex-col gap-2 overflow-y-scroll"
-      >
-        <div v-for="mod in mods.hits" :key="mod.title" class="rounded-lg px-2 py-2 hover:bg-bg">
-          <div class="flex cursor-pointer gap-2" @click="toggleMod(mod.project_id)">
-            <UiAvatar :src="mod.icon_url" class="!h-12 !min-h-12 !w-12 !min-w-12" />
-            <div class="flex flex-col gap-1">
-              <h1 class="m-0 text-2xl font-bold leading-none text-contrast">
-                {{ mod.title }}
-              </h1>
-              <span class="text-sm text-secondary">
-                {{ mod.description.substring(0, 100) }}
-                {{ mod.description.length > 100 ? "..." : "" }}
-              </span>
-            </div>
-          </div>
-          <div v-if="expandedMods[mod.project_id]" class="mt-2 flex items-center gap-2">
-            <DropdownSelect
-              id="version-select"
-              v-model="selectedVersions[mod.project_id]"
-              name="version-select"
-              :options="expandedMods[mod.project_id].versions"
-              placeholder="Select version..."
-            />
-            <Button icon-only @click="emits('select', mod, selectedVersions[mod.project_id])">
-              <ChevronRightIcon />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ChevronRightIcon, SearchIcon } from "@modrinth/assets";
-import { Button, DropdownSelect } from "@modrinth/ui";
-import { useInfiniteScroll } from "@vueuse/core";
-
-const emits = defineEmits(["select"]);
-
-const props = defineProps<{
-  type: "mod" | "modpack" | "plugin" | "datapack";
-  isserver?: boolean;
-}>();
-
-const route = useNativeRoute();
-const serverId = route.params.id as string;
-const server = serverId ? await usePyroServer(serverId, ["general"]) : null;
-
-const data = computed(() => (serverId ? server?.general : null));
-
-const scrollContainer = ref<HTMLElement | null>(null);
-const pages = ref(1);
-const page = ref(0);
-
-const queryFilter = ref("");
-const facets = ref<any>([]);
-
-if (props.isserver === false && props.type !== "modpack") {
-  facets.value.push(`["categories:${data.value?.loader?.toLocaleLowerCase()}"]`);
-  facets.value.push(`["versions:${data.value?.mc_version}"]`);
-}
-
-facets.value.push(`["project_type:${props.type}"]`);
-
-const buildFacetString = (facets: string[]) => {
-  return "[" + facets.map((facet) => `${facet}`).join(",") + "]";
-};
-
-const mods = ref<any>({ hits: [] });
-const modsStatus = ref("idle");
-
-const loadMods = async () => {
-  modsStatus.value = "loading";
-
-  const newMods = (await useBaseFetch(
-    `search?query=${queryFilter.value}&facets=${buildFacetString(facets.value)}&index=relevance&limit=25&offset=${page.value * 25}`,
-    {},
-    false,
-  )) as any;
-  pages.value = newMods.total_hits;
-  mods.value.hits.push(...newMods.hits);
-  modsStatus.value = "success";
-};
-
-const versions = reactive<{ [key: string]: any[] }>({});
-
-const getVersions = async (projectId: string) => {
-  if (!versions[projectId]) {
-    const allVersions = (await useBaseFetch(`project/${projectId}/version`, {}, false)) as any;
-
-    if (props.isserver === false && props.type !== "modpack") {
-      versions[projectId] = allVersions
-        .filter((x: any) => x.loaders.includes(data.value?.loader?.toLocaleLowerCase()))
-        .filter((x: any) => x.game_versions.includes(data.value?.mc_version))
-        .map((x: any) => x.version_number);
-    } else {
-      versions[projectId] = allVersions.map((x: any) => x.version_number);
-    }
-  }
-  return versions[projectId];
-};
-
-const selectedVersions = reactive<{ [key: string]: string }>({});
-
-const expandedMods = reactive<{ [key: string]: { expanded: boolean; versions: any[] } }>({});
-
-const toggleMod = async (modId: string) => {
-  if (!expandedMods[modId]) {
-    expandedMods[modId] = { expanded: false, versions: [] };
-  }
-  expandedMods[modId].expanded = !expandedMods[modId].expanded;
-  if (expandedMods[modId].expanded && expandedMods[modId].versions.length === 0) {
-    expandedMods[modId].versions = await getVersions(modId);
-    // Select the first version by default
-    if (expandedMods[modId].versions.length > 0) {
-      selectedVersions[modId] = expandedMods[modId].versions[0];
-    }
-  }
-};
-
-const loadMore = async () => {
-  page.value++;
-  await loadMods();
-};
-
-const { reset } = useInfiniteScroll(scrollContainer, async () => {
-  if (page.value <= pages.value) {
-    await loadMore();
-    console.log("loading more");
-    console.log(page.value);
-    console.log(pages.value);
-  }
-});
-
-const resetList = () => {
-  mods.value.hits = [];
-  Object.keys(expandedMods).forEach((key) => delete expandedMods[key]);
-  Object.keys(selectedVersions).forEach((key) => delete selectedVersions[key]);
-  page.value = 0;
-  loadMods();
-  reset();
-};
-
-onMounted(async () => {
-  await loadMods();
-});
-</script>
--- a/apps/frontend/src/components/ui/servers/PyroLoading.vue
+++ b/apps/frontend/src/components/ui/servers/PyroLoading.vue
@@ -1,94 +0,0 @@
-<template>
-  <div class="flex h-[70vh] w-full flex-col items-center justify-center">
-    <PyroIcon class="pyro-logo-animation size-32 opacity-10" />
-    <p
-      class="text-sm transition"
-      :class="{ 'opacity-0': !showLoading, 'animate-pulse opacity-100': showLoading }"
-    >
-      Loading...
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { PyroIcon } from "@modrinth/assets";
-
-const showLoading = ref(false);
-
-onMounted(() => {
-  setTimeout(() => {
-    showLoading.value = true;
-  }, 5000);
-});
-</script>
-
-<style>
-.page-enter-active,
-.page-leave-active {
-  transition: all 0.1s;
-}
-
-.page-enter-from,
-.page-leave-to {
-  opacity: 0;
-}
-
-@keyframes zoom-in {
-  0% {
-    transform: scale(0.5);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-.pyro-logo-animation {
-  animation: zoom-in 0.8s
-    linear(
-      0 0%,
-      0.01 0.8%,
-      0.04 1.6%,
-      0.161 3.3%,
-      0.816 9.4%,
-      1.046 11.9%,
-      1.189 14.4%,
-      1.231 15.7%,
-      1.254 17%,
-      1.259 17.8%,
-      1.257 18.6%,
-      1.236 20.45%,
-      1.194 22.3%,
-      1.057 27%,
-      0.999 29.4%,
-      0.955 32.1%,
-      0.942 33.5%,
-      0.935 34.9%,
-      0.933 36.65%,
-      0.939 38.4%,
-      1 47.3%,
-      1.011 49.95%,
-      1.017 52.6%,
-      1.016 56.4%,
-      1 65.2%,
-      0.996 70.2%,
-      1.001 87.2%,
-      1 100%
-    );
-}
-
-@keyframes fade-bg-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0.6;
-  }
-}
-
-.bg-loading-animation {
-  animation: fade-bg-in 0.12s linear forwards;
-}
-</style>
--- a/apps/frontend/src/components/ui/servers/PyroModal.vue
+++ b/apps/frontend/src/components/ui/servers/PyroModal.vue
@@ -1,60 +0,0 @@
-<template>
-  <div
-    class="flex h-full flex-col gap-4 py-6"
-    :class="
-      'flex h-full flex-col gap-4 py-6' +
-      (danger
-        ? ' rounded-2xl border-2 border-solid border-[#cb2245] bg-[#fff5f6] dark:border-[#FF496E] dark:bg-[#270B11]'
-        : '')
-    "
-  >
-    <div class="mb-2 flex items-center justify-between gap-4 px-6">
-      <div class="flex w-full items-center gap-4">
-        <UiServersServerIcon v-if="data" :image="data.image" class="h-12 w-12 rounded-lg" />
-        <div class="text-2xl font-extrabold text-contrast">{{ props.header }}</div>
-      </div>
-      <button
-        :class="
-          'h-8 w-8 rounded-full bg-button-bg p-2 text-contrast hover:bg-button-bgActive' +
-          (danger ? 'hover:bg-[#ffffff20] [&&]:bg-[#ffffff10]' : '')
-        "
-        @click="$emit('modal')"
-      >
-        <XIcon class="h-4 w-4" />
-      </button>
-    </div>
-    <div
-      class="border-0 border-b border-solid"
-      :class="danger ? 'border-[#cb2245] dark:border-[#612d38]' : 'border-divider'"
-    ></div>
-    <div class="mt-2 h-full w-full overflow-auto px-6">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { XIcon } from "@modrinth/assets";
-
-const emit = defineEmits(["modal"]);
-
-const props = defineProps<{
-  header?: string;
-  data?: any;
-  danger?: boolean;
-}>();
-
-const onEscKeyRelease = (event: KeyboardEvent) => {
-  if (event.key === "Escape") {
-    emit("modal");
-  }
-};
-
-onMounted(() => {
-  document.body.addEventListener("keyup", onEscKeyRelease);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("keyup", onEscKeyRelease);
-});
-</script>
--- a/apps/frontend/src/components/ui/servers/SaveBanner.vue
+++ b/apps/frontend/src/components/ui/servers/SaveBanner.vue
@@ -39,7 +39,7 @@ const props = defineProps<{
  save: () => void;
  reset: () => void;
  isVisible: boolean;
-  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();

 const saveAndRestart = async () => {
--- a/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
@@ -8,13 +8,19 @@
    <NuxtLink
      v-if="isLink"
      :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
-      class="min-w-0 truncate text-sm font-semibold"
+      class="flex min-w-0 items-center truncate text-sm font-semibold"
      :class="serverId ? 'hover:underline' : ''"
    >
-      {{ game[0].toUpperCase() + game.slice(1) }} {{ mcVersion }}
+      <div class="flex flex-row items-center gap-1">
+        {{ game[0].toUpperCase() + game.slice(1) }}
+        <span v-if="mcVersion">{{ mcVersion }}</span>
+        <span v-else class="inline-block h-3 w-12 animate-pulse rounded bg-button-border"></span>
+      </div>
    </NuxtLink>
-    <div v-else class="min-w-0 truncate text-sm font-semibold">
-      {{ game[0].toUpperCase() + game.slice(1) }} {{ mcVersion }}
+    <div v-else class="flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold">
+      {{ game[0].toUpperCase() + game.slice(1) }}
+      <span v-if="mcVersion">{{ mcVersion }}</span>
+      <span v-else class="inline-block h-3 w-16 animate-pulse rounded bg-button-border"></span>
    </div>
  </div>
 </template>
--- a/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
+++ b/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
@@ -2,19 +2,18 @@
  <div>
    <UiServersServerGameLabel
      v-if="showGameLabel"
-      :game="serverData.game!"
+      :game="serverData.game"
      :mc-version="serverData.mc_version ?? ''"
      :is-link="linked"
    />
    <UiServersServerLoaderLabel
-      v-if="showLoaderLabel"
-      :loader="serverData.loader!"
+      :loader="serverData.loader"
      :loader-version="serverData.loader_version ?? ''"
      :no-separator="column"
      :is-link="linked"
    />
    <UiServersServerSubdomainLabel
-      v-if="serverData.net.domain"
+      v-if="serverData.net?.domain"
      :subdomain="serverData.net.domain"
      :no-separator="column"
      :is-link="linked"
--- a/apps/frontend/src/components/ui/servers/ServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/ServerListing.vue
@@ -47,7 +47,6 @@
          :server-data="{ game, mc_version, loader, loader_version, net }"
          :show-game-label="showGameLabel"
          :show-loader-label="showLoaderLabel"
-          :show-subdomain-label="showSubdomainLabel"
          :linked="false"
          class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
        />
@@ -85,9 +84,12 @@ import type { Project, Server } from "~/types/servers";

 const props = defineProps<Partial<Server>>();

+if (props.server_id) {
+  await usePyroServer(props.server_id, ["general"]);
+}
+
 const showGameLabel = computed(() => !!props.game);
 const showLoaderLabel = computed(() => !!props.loader);
-const showSubdomainLabel = computed(() => !!props.net?.domain);

 let projectData: Ref<Project | null>;
 if (props.upstream) {
@@ -103,39 +105,11 @@ if (props.upstream) {
  projectData = ref(null);
 }

-const image = ref<string | undefined>();
+const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined);

-onMounted(async () => {
-  const auth = (await usePyroFetch(`servers/${props.server_id}/fs`)) as any;
-  try {
-    const fileData = await usePyroFetch(`/download?path=/server-icon-original.png`, {
-      override: auth,
-    });
-
-    if (fileData instanceof Blob) {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      const img = new Image();
-      img.src = URL.createObjectURL(fileData);
-      await new Promise<void>((resolve) => {
-        img.onload = () => {
-          canvas.width = 512;
-          canvas.height = 512;
-          ctx?.drawImage(img, 0, 0, 512, 512);
-          const dataURL = canvas.toDataURL("image/png");
-          image.value = dataURL;
-          resolve();
-        };
-      });
-    }
-  } catch (error) {
-    if (error instanceof PyroFetchError && error.statusCode === 404) {
-      image.value = undefined;
-    } else {
-      console.error(error);
-    }
-  }
-});
+if (import.meta.server && projectData.value?.icon_url) {
+  await usePyroServer(props.server_id!, ["general"]);
+}

 const iconUrl = computed(() => projectData.value?.icon_url || undefined);
 </script>
--- a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
@@ -1,22 +1,33 @@
 <template>
-  <div
-    v-if="loader"
-    v-tooltip="'Change server loader'"
-    class="flex min-w-0 flex-row items-center gap-4 truncate"
-  >
+  <div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-4 truncate">
    <div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
    <div class="flex flex-row items-center gap-2">
-      <UiServersIconsLoaderIcon :loader="loader" class="flex shrink-0 [&&]:size-5" />
+      <UiServersIconsLoaderIcon v-if="loader" :loader="loader" class="flex shrink-0 [&&]:size-5" />
+      <div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
      <NuxtLink
        v-if="isLink"
        :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
-        class="min-w-0 text-sm font-semibold"
+        class="flex min-w-0 items-center text-sm font-semibold"
        :class="serverId ? 'hover:underline' : ''"
      >
-        {{ loader }} <span v-if="loaderVersion">{{ loaderVersion }}</span>
+        <span v-if="loader">
+          {{ loader }}
+          <span v-if="loaderVersion">{{ loaderVersion }}</span>
+        </span>
+        <span v-else class="flex gap-2">
+          <span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+          <span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+        </span>
      </NuxtLink>
      <div v-else class="min-w-0 text-sm font-semibold">
-        {{ loader }} <span v-if="loaderVersion">{{ loaderVersion }}</span>
+        <span v-if="loader">
+          {{ loader }}
+          <span v-if="loaderVersion">{{ loaderVersion }}</span>
+        </span>
+        <span v-else class="flex gap-2">
+          <span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+          <span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
+        </span>
      </div>
    </div>
  </div>
@@ -25,8 +36,8 @@
 <script setup lang="ts">
 defineProps<{
  noSeparator?: boolean;
-  loader: "Fabric" | "Quilt" | "Forge" | "NeoForge" | "Paper" | "Spigot" | "Bukkit" | "Vanilla";
-  loaderVersion: string;
+  loader?: "Fabric" | "Quilt" | "Forge" | "NeoForge" | "Paper" | "Spigot" | "Bukkit" | "Vanilla";
+  loaderVersion?: string;
  isLink?: boolean;
 }>();

--- a/apps/frontend/src/components/ui/servers/ServerSidebar.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
@@ -36,7 +36,7 @@ const emit = defineEmits(["reinstall"]);
 const props = defineProps<{
  navLinks: { label: string; href: string; icon: Component; external?: boolean }[];
  route: RouteLocationNormalized;
-  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();

 const onReinstall = (...args: any[]) => {
--- a/apps/frontend/src/components/ui/servers/ServerSkeleton.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSkeleton.vue
@@ -1,18 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div
-      v-for="n in count"
-      :key="n"
-      class="relative h-[128px] w-full animate-pulse rounded-3xl bg-bg-raised p-4"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  count: {
-    type: Number,
-    default: 3,
-  },
-});
-</script>
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -9,44 +9,34 @@
      :key="index"
      class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
    >
-      <div
-        class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1"
-        :style="{
-          backdropFilter: 'blur(6px)',
-        }"
-      >
-        <div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
-          <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">
-            {{ metric.value }}
-          </h2>
-          <h3 class="relative z-10 text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
+      <div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
+        <div class="relative z-10">
+          <div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
+            <h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">{{ metric.value }}</h2>
+            <h3 class="text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
+          </div>
+          <h3 class="flex items-center gap-2 text-base font-normal text-secondary">
+            {{ metric.title }}
+            <WarningIcon
+              v-if="metric.warning"
+              v-tooltip="metric.warning"
+              class="size-5"
+              :style="{ color: 'var(--color-orange)' }"
+            />
+          </h3>
        </div>
-        <h3 class="relative z-10 flex items-center gap-2 text-base font-normal text-secondary">
-          {{ metric.title }}
-          <WarningIcon
-            v-tooltip="getPotentialWarning(metric)"
-            :style="{
-              color: 'var(--color-orange)',
-              width: '1.25rem',
-              height: '1.25rem',
-              display: getPotentialWarning(metric) ? 'block' : 'none',
-            }"
-          />
-        </h3>
+        <div class="absolute -left-8 -top-4 h-28 w-56 rounded-full bg-bg-raised blur-lg" />
      </div>

      <component :is="metric.icon" class="absolute right-10 top-10 z-10" />
      <ClientOnly>
        <VueApexCharts
-          v-if="
-            metric.data.length && !(metric.title === 'Memory usage' && userPreferences.ramAsNumber)
-          "
-          ref="chart"
+          v-if="metric.showGraph"
          type="area"
          height="142"
-          :options="generateOptions(metric)"
-          :series="[{ name: 'Chart', data: metric.data }]"
-          class="chart chart-animation absolute bottom-0 left-0 right-0 w-full"
+          :options="getChartOptions(metric.warning)"
+          :series="[{ name: metric.title, data: metric.data }]"
+          class="chart absolute bottom-0 left-0 right-0 w-full opacity-0"
        />
      </ClientOnly>
    </div>
@@ -57,21 +47,17 @@
    >
      <div class="flex flex-row items-center gap-2">
        <h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">
-          {{ formatBytes(animatedStorageUsage) }}
+          {{ formatBytes(stats.storage_usage_bytes) }}
        </h2>
-        <!-- <h3 class="relative z-10 text-sm font-normal text-secondary">
-          / {{ formatBytes(props.data.current.storage_total_bytes) }}
-        </h3> -->
      </div>
-      <h3 class="relative z-10 text-base font-normal text-secondary">Storage usage</h3>
-
+      <h3 class="text-base font-normal text-secondary">Storage usage</h3>
      <FolderOpenIcon class="absolute right-10 top-10 size-8" />
    </NuxtLink>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, computed, shallowRef } from "vue";
 import { FolderOpenIcon, CPUIcon, DBIcon } from "@modrinth/assets";
 import { useStorage } from "@vueuse/core";
 import type { Stats } from "~/types/servers";
@@ -79,252 +65,132 @@ import WarningIcon from "~/assets/images/utils/issues.svg?component";

 const route = useNativeRoute();
 const serverId = route.params.id;
+const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));

 const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
  ramAsNumber: false,
-  autoRestart: false,
-  backupWhileRunning: false,
 });

-const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
+const props = defineProps<{ data: Stats }>();

-const props = defineProps({
-  data: {
-    type: Object as PropType<Stats>,
-    required: true,
-  },
-});
+const stats = shallowRef(props.data.current);

-const lerp = (a: number, b: number) => {
-  return a + (b - a) * 0.5;
-};
-
-// I told you it would go into prod
 const formatBytes = (bytes: number) => {
-  const units = ["Bytes", "KB", "MB", "GB", "TB"];
+  const units = ["B", "KB", "MB", "GB"];
  let value = bytes;
-  let unitIndex = 0;
-
-  while (value >= 1024 && unitIndex < units.length - 2) {
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
    value /= 1024;
-    unitIndex++;
+    unit++;
  }
-
-  return `${Math.round(value * 100) / 100} ${units[unitIndex]}`;
+  return `${Math.round(value * 10) / 10} ${units[unit]}`;
 };

-const animatedStorageUsage = ref(0);
+const cpuData = ref<number[]>(Array(20).fill(0));
+const ramData = ref<number[]>(Array(20).fill(0));

-const animateValue = (start: number, end: number, duration: number): void => {
-  let startTimestamp: number | null = null;
-  const step = (timestamp: number) => {
-    if (!startTimestamp) startTimestamp = timestamp;
-    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-    animatedStorageUsage.value = Math.floor(progress * (end - start) + start);
-    if (progress < 1) {
-      requestAnimationFrame(step);
-    }
-  };
-  requestAnimationFrame(step);
+const updateGraphData = (arr: number[], newValue: number) => {
+  arr.push(newValue);
+  arr.shift();
 };

-onMounted(() => {
-  animateValue(0, props.data.current.storage_usage_bytes, 250);
+const metrics = computed(() => {
+  const ramPercent = Math.min(
+    (stats.value.ram_usage_bytes / stats.value.ram_total_bytes) * 100,
+    100,
+  );
+  const cpuPercent = Math.min(stats.value.cpu_percent, 100);
+
+  updateGraphData(cpuData.value, cpuPercent);
+  updateGraphData(ramData.value, ramPercent);
+
+  return [
+    {
+      title: "CPU usage",
+      value: `${cpuPercent.toFixed(2)}%`,
+      max: "100%",
+      icon: CPUIcon,
+      data: cpuData.value,
+      showGraph: true,
+      warning: cpuPercent >= 90 ? "CPU usage is very high" : null,
+    },
+    {
+      title: "Memory usage",
+      value: userPreferences.value.ramAsNumber
+        ? formatBytes(stats.value.ram_usage_bytes)
+        : `${ramPercent.toFixed(2)}%`,
+      max: userPreferences.value.ramAsNumber ? formatBytes(stats.value.ram_total_bytes) : "100%",
+      icon: DBIcon,
+      data: ramData.value,
+      showGraph: true,
+      warning: ramPercent >= 90 ? "Memory usage is very high" : null,
+    },
+  ];
+});
+
+const getChartOptions = (hasWarning: string | null) => ({
+  chart: {
+    type: "area",
+    animations: { enabled: false },
+    sparkline: { enabled: true },
+    toolbar: { show: false },
+    padding: {
+      left: -10,
+      right: -10,
+      top: 0,
+      bottom: 0,
+    },
+  },
+  stroke: { curve: "smooth", width: 3 },
+  fill: {
+    type: "gradient",
+    gradient: {
+      shadeIntensity: 1,
+      opacityFrom: 0.25,
+      opacityTo: 0.05,
+      stops: [0, 100],
+    },
+  },
+  tooltip: { enabled: false },
+  grid: { show: false },
+  xaxis: {
+    labels: { show: false },
+    axisBorder: { show: false },
+    type: "numeric",
+    tickAmount: 20,
+    range: 20,
+  },
+  yaxis: {
+    show: false,
+    min: 0,
+    max: 100,
+    forceNiceScale: false,
+  },
+  colors: [hasWarning ? "var(--color-orange)" : "var(--color-brand)"],
+  dataLabels: {
+    enabled: false,
+  },
 });

 watch(
-  () => props.data.current.storage_usage_bytes,
-  (newValue, oldValue) => {
-    animateValue(oldValue, newValue, 250);
+  () => props.data.current,
+  (newStats) => {
+    stats.value = newStats;
  },
 );
-
-const metrics = ref([
-  {
-    title: "CPU usage",
-    value: "0%",
-    max: "100%",
-    icon: markRaw(CPUIcon),
-    data: [] as number[],
-  },
-  {
-    title: "Memory usage",
-    value: "0%",
-    max: userPreferences.value.ramAsNumber
-      ? formatBytes(props.data.current.ram_total_bytes)
-      : "100%",
-    icon: markRaw(DBIcon),
-    data: [] as number[],
-  },
-]);
-
-const updateMetrics = () => {
-  console.log(props.data.current.ram_usage_bytes);
-  metrics.value = metrics.value.map((metric, index) => {
-    if (userPreferences.value.ramAsNumber && index === 1) {
-      return {
-        ...metric,
-        value: formatBytes(props.data.current.ram_usage_bytes),
-        data: [...metric.data.slice(-10), props.data.current.ram_usage_bytes],
-        max: formatBytes(props.data.current.ram_total_bytes),
-      };
-    } else {
-      const currentValue =
-        index === 0
-          ? props.data.current.cpu_percent
-          : Math.min(
-              (props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100,
-              100,
-            );
-      const pastValue =
-        index === 0
-          ? props.data.past.cpu_percent
-          : Math.min(
-              (props.data.past.ram_usage_bytes / props.data.past.ram_total_bytes) * 100,
-              100,
-            );
-
-      const newValue = lerp(currentValue, pastValue);
-      return {
-        ...metric,
-        value: `${newValue.toFixed(2)}%`,
-        data: [...metric.data.slice(-10), newValue],
-        // data: [36, 36],
-      };
-    }
-  });
-};
-
-// aww, you gotta give em that rinth tuah, mod on that thang
-const getPotentialWarning = (metric: (typeof metrics.value)[0]) => {
-  // make all words in the string lowercase, unless the word is in all caps
-  const split = metric.title.split(" ");
-  const title = split
-    .map((word) => {
-      if (word === word.toUpperCase()) {
-        return word;
-      }
-      return word.toLowerCase();
-    })
-    .join(" ");
-  let data = metric.data.at(-1) || 0;
-  if (userPreferences.value.ramAsNumber) {
-    data = (props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100;
-  }
-  switch (true) {
-    case data >= 90:
-      return `Your server's ${title} is very high.`;
-    default:
-      return "";
-  }
-};
-
-const generateOptions = (metric: (typeof metrics.value)[0]) => {
-  let color = "var(--color-brand)";
-  let data = metric.data.at(-1) || 0;
-  if (userPreferences.value.ramAsNumber) {
-    data = (props.data.current.ram_usage_bytes / props.data.current.ram_total_bytes) * 100;
-  }
-  switch (true) {
-    case data >= 90:
-      color = "var(--color-red)";
-      break;
-    case data >= 80:
-      color = "var(--color-orange)";
-      break;
-  }
-  return {
-    chart: {
-      id: "stats",
-      fontFamily:
-        "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
-      foreColor: "var(--color-base)",
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      sparkline: { enabled: true },
-      animations: {
-        enabled: true,
-        easing: "linear",
-        dynamicAnimation: { speed: 1000 },
-      },
-    },
-    stroke: { curve: "smooth" },
-    fill: {
-      colors: [color],
-      type: "gradient",
-      opacity: 1,
-      gradient: {
-        shade: "light",
-        type: "vertical",
-        shadeIntensity: 0,
-        gradientToColors: [color],
-        inverseColors: true,
-        opacityFrom: 0.5,
-        opacityTo: 0,
-        stops: [0, 100],
-        colorStops: [],
-      },
-    },
-    grid: { show: false },
-    legend: { show: false },
-    colors: [color],
-    dataLabels: { enabled: false },
-    xaxis: {
-      type: "numeric",
-      lines: { show: false },
-      axisBorder: { show: false },
-      labels: { show: false },
-    },
-    yaxis: {
-      min: 0,
-      max: 100,
-      tickAmount: 5,
-      labels: { show: false },
-      axisBorder: { show: false },
-      axisTicks: { show: false },
-    },
-    tooltip: { enabled: false },
-  };
-};
-
-// watch(
-//   metrics,
-//   () => {
-//     console.log(metrics.value[0].data.at(-1));
-//   },
-//   {
-//     deep: true,
-//     immediate: true,
-//   },
-// );
-
-let interval: number;
-
-onMounted(() => {
-  updateMetrics();
-  interval = window.setInterval(updateMetrics, 1000);
-});
-
-onUnmounted(() => {
-  if (interval) {
-    clearInterval(interval);
-  }
-});
 </script>

 <style scoped>
-@keyframes chart-enter-animation {
-  0% {
-    opacity: 0;
-  }
-  100% {
+.chart {
+  animation: fadeIn 0.2s ease-out 0.2s forwards;
+  margin-left: -24px;
+  margin-right: -24px;
+  width: calc(100% + 48px) !important;
+}
+
+@keyframes fadeIn {
+  to {
    opacity: 1;
  }
 }
-
-.chart-animation {
-  opacity: 0;
-  animation: chart-enter-animation 0.5s ease-out forwards;
-  animation-delay: 1s;
-}
 </style>
--- a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    v-if="subdomain"
+    v-if="subdomain && !isHidden"
    v-tooltip="'Copy custom URL'"
    class="flex min-w-0 flex-row items-center gap-4 truncate hover:cursor-pointer"
  >
@@ -20,6 +20,8 @@

 <script setup lang="ts">
 import { LinkIcon } from "@modrinth/assets";
+import { useStorage } from "@vueuse/core";
+
 const props = defineProps<{
  subdomain: string;
  noSeparator?: boolean;
@@ -29,12 +31,18 @@ const copySubdomain = () => {
  navigator.clipboard.writeText(props.subdomain + ".modrinth.gg");
  addNotification({
    group: "servers",
-    title: "Subdomain copied",
-    text: "Your subdomain has been copied to your clipboard.",
+    title: "Custom URL copied",
+    text: "Your server's URL has been copied to your clipboard.",
    type: "success",
  });
 };

 const route = useNativeRoute();
 const serverId = computed(() => route.params.id as string);
+
+const userPreferences = useStorage(`pyro-server-${serverId.value}-preferences`, {
+  hideSubdomainLabel: false,
+});
+
+const isHidden = computed(() => userPreferences.value.hideSubdomainLabel);
 </script>
--- a/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
@@ -8,7 +8,7 @@
    <div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>

    <div class="flex gap-2">
-      <UiServersTimer class="flex size-5 shrink-0" />
+      <UiServersIconsTimer class="flex size-5 shrink-0" />
      <time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
        {{ formattedUptime }}
      </time>
--- a/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
+++ b/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
@@ -1,28 +1,23 @@
 <template>
-  <div
-    ref="dropdown"
-    data-pyro-dropdown
-    tabindex="0"
-    role="combobox"
-    :aria-expanded="dropdownVisible"
-    class="relative inline-block h-9 w-full max-w-80"
-    @focus="onFocus"
-    @blur="onBlur"
-    @mousedown.prevent
-    @keydown="handleKeyDown"
-  >
-    <div
-      data-pyro-dropdown-trigger
-      class="duration-50 flex h-full w-full cursor-pointer select-none items-center justify-between gap-4 rounded-xl bg-button-bg px-4 py-2 shadow-sm transition-all ease-in-out"
+  <div class="relative inline-block h-9 w-full max-w-80">
+    <button
+      ref="triggerRef"
+      type="button"
+      aria-haspopup="listbox"
+      :aria-expanded="dropdownVisible"
+      :aria-controls="listboxId"
+      :aria-labelledby="listboxId"
+      class="duration-50 flex h-full w-full cursor-pointer select-none appearance-none items-center justify-between gap-4 rounded-xl border-none bg-button-bg px-4 py-2 shadow-sm !outline-none transition-all ease-in-out"
      :class="triggerClasses"
      @click="toggleDropdown"
+      @keydown="handleTriggerKeyDown"
    >
      <span>{{ selectedOption }}</span>
      <DropdownIcon
        class="transition-transform duration-200 ease-in-out"
        :class="{ 'rotate-180': dropdownVisible }"
      />
-    </div>
+    </button>

    <Teleport to="#teleports">
      <transition
@@ -35,27 +30,28 @@
      >
        <div
          v-if="dropdownVisible"
+          :id="listboxId"
          ref="optionsContainer"
-          data-pyro-dropdown-options
-          class="experimental-styles-within fixed z-50 bg-button-bg shadow-lg"
+          role="listbox"
+          tabindex="-1"
+          :aria-activedescendant="activeDescendant"
+          class="experimental-styles-within fixed z-50 bg-button-bg shadow-lg outline-none"
          :class="{
            'rounded-b-xl': !isRenderingUp,
            'rounded-t-xl': isRenderingUp,
          }"
          :style="positionStyle"
-          @keydown.stop="handleDropdownKeyDown"
+          @keydown="handleListboxKeyDown"
        >
          <div
            class="overflow-y-auto"
            :style="{ height: `${virtualListHeight}px` }"
-            data-pyro-dropdown-options-virtual-scroller
            @scroll="handleScroll"
          >
            <div :style="{ height: `${totalHeight}px`, position: 'relative' }">
              <div
                v-for="item in visibleOptions"
                :key="item.index"
-                data-pyro-dropdown-option
                :style="{
                  position: 'absolute',
                  top: 0,
@@ -65,32 +61,20 @@
                }"
              >
                <div
-                  :ref="(el) => handleOptionRef(el as HTMLElement, item.index)"
+                  :id="`${listboxId}-option-${item.index}`"
                  role="option"
-                  :tabindex="focusedOptionIndex === item.index ? 0 : -1"
-                  class="hover:brightness-85 flex h-full cursor-pointer select-none items-center px-4 transition-colors duration-150 ease-in-out focus:border-none focus:outline-none"
+                  :aria-selected="selectedValue === item.option"
+                  class="hover:brightness-85 flex h-full cursor-pointer select-none items-center px-4 transition-colors duration-150 ease-in-out"
                  :class="{
                    'bg-brand font-bold text-brand-inverted': selectedValue === item.option,
                    'bg-bg-raised': focusedOptionIndex === item.index,
                    'rounded-b-xl': item.index === props.options.length - 1 && !isRenderingUp,
                    'rounded-t-xl': item.index === 0 && isRenderingUp,
                  }"
-                  :aria-selected="selectedValue === item.option"
                  @click="selectOption(item.option, item.index)"
-                  @mouseover="focusedOptionIndex = item.index"
-                  @focus="focusedOptionIndex = item.index"
+                  @mousemove="focusedOptionIndex = item.index"
                >
-                  <input
-                    :id="`${name}-${item.index}`"
-                    v-model="radioValue"
-                    type="radio"
-                    :value="item.option"
-                    :name="name"
-                    class="hidden"
-                  />
-                  <label :for="`${name}-${item.index}`" class="w-full cursor-pointer">
-                    {{ displayName(item.option) }}
-                  </label>
+                  {{ displayName(item.option) }}
                </div>
              </div>
            </div>
@@ -140,13 +124,14 @@ const emit = defineEmits<{
 const dropdownVisible = ref(false);
 const selectedValue = ref<OptionValue | null>(props.modelValue || props.defaultValue);
 const focusedOptionIndex = ref<number | null>(null);
-const focusedOptionRef = ref<HTMLElement | null>(null);
-const dropdown = ref<HTMLElement | null>(null);
 const optionsContainer = ref<HTMLElement | null>(null);
 const scrollTop = ref(0);
 const isRenderingUp = ref(false);
 const virtualListHeight = ref(300);
-const lastFocusedElement = ref<HTMLElement | null>(null);
+const isOpen = ref(false);
+const openDropdownCount = ref(0);
+const listboxId = `pyro-listbox-${Math.random().toString(36).substring(2, 11)}`;
+const triggerRef = ref<HTMLButtonElement | null>(null);

 const positionStyle = ref<CSSProperties>({
  position: "fixed",
@@ -156,41 +141,6 @@ const positionStyle = ref<CSSProperties>({
  zIndex: 999,
 });

-const handleOptionRef = (el: HTMLElement | null, index: number) => {
-  if (focusedOptionIndex.value === index) {
-    focusedOptionRef.value = el;
-  }
-};
-
-const onFocus = async () => {
-  if (!props.disabled) {
-    focusedOptionIndex.value = props.options.findIndex((option) => option === selectedValue.value);
-    lastFocusedElement.value = document.activeElement as HTMLElement;
-    dropdownVisible.value = true;
-    await updatePosition();
-    nextTick(() => {
-      dropdown.value?.focus();
-    });
-  }
-};
-
-const onBlur = (event: FocusEvent) => {
-  if (!isChildOfDropdown(event.relatedTarget as HTMLElement | null)) {
-    closeDropdown();
-  }
-};
-
-const isChildOfDropdown = (element: HTMLElement | null): boolean => {
-  let currentNode: HTMLElement | null = element;
-  while (currentNode) {
-    if (currentNode === dropdown.value || currentNode === optionsContainer.value) {
-      return true;
-    }
-    currentNode = currentNode.parentElement;
-  }
-  return false;
-};
-
 const totalHeight = computed(() => props.options.length * ITEM_HEIGHT);

 const visibleOptions = computed(() => {
@@ -233,10 +183,10 @@ const triggerClasses = computed(() => ({
 }));

 const updatePosition = async () => {
-  if (!dropdown.value) return;
+  if (!triggerRef.value) return;

  await nextTick();
-  const triggerRect = dropdown.value.getBoundingClientRect();
+  const triggerRect = triggerRef.value.getBoundingClientRect();
  const viewportHeight = window.innerHeight;
  const margin = 8;

@@ -263,20 +213,6 @@ const updatePosition = async () => {
  };
 };

-const openDropdown = async () => {
-  if (!props.disabled) {
-    closeAllDropdowns();
-    dropdownVisible.value = true;
-    focusedOptionIndex.value = props.options.findIndex((option) => option === selectedValue.value);
-    lastFocusedElement.value = document.activeElement as HTMLElement;
-    await updatePosition();
-
-    requestAnimationFrame(() => {
-      updatePosition();
-    });
-  }
-};
-
 const toggleDropdown = () => {
  if (!props.disabled) {
    if (dropdownVisible.value) {
@@ -300,61 +236,6 @@ const handleScroll = (event: Event) => {
  scrollTop.value = target.scrollTop;
 };

-const handleKeyDown = (event: KeyboardEvent) => {
-  if (!dropdownVisible.value) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      lastFocusedElement.value = document.activeElement as HTMLElement;
-      toggleDropdown();
-    }
-  } else {
-    handleDropdownKeyDown(event);
-  }
-};
-
-const handleDropdownKeyDown = (event: KeyboardEvent) => {
-  event.stopPropagation();
-
-  switch (event.key) {
-    case "ArrowDown":
-      event.preventDefault();
-      focusNextOption();
-      break;
-    case "ArrowUp":
-      event.preventDefault();
-      focusPreviousOption();
-      break;
-    case "Enter":
-      event.preventDefault();
-      if (focusedOptionIndex.value !== null) {
-        selectOption(props.options[focusedOptionIndex.value], focusedOptionIndex.value);
-      }
-      break;
-    case "Escape":
-      event.preventDefault();
-      event.stopPropagation();
-      closeDropdown();
-      break;
-    case "Tab":
-      event.preventDefault();
-      if (event.shiftKey) {
-        focusPreviousOption();
-      } else {
-        focusNextOption();
-      }
-      break;
-  }
-};
-
-const closeDropdown = () => {
-  dropdownVisible.value = false;
-  focusedOptionIndex.value = null;
-  if (lastFocusedElement.value) {
-    lastFocusedElement.value.focus();
-    lastFocusedElement.value = null;
-  }
-};
-
 const closeAllDropdowns = () => {
  const event = new CustomEvent("close-all-dropdowns");
  window.dispatchEvent(event);
@@ -373,9 +254,6 @@ const focusNextOption = () => {
    focusedOptionIndex.value = (focusedOptionIndex.value + 1) % props.options.length;
  }
  scrollToFocused();
-  nextTick(() => {
-    focusedOptionRef.value?.focus();
-  });
 };

 const focusPreviousOption = () => {
@@ -386,9 +264,6 @@ const focusPreviousOption = () => {
      (focusedOptionIndex.value - 1 + props.options.length) % props.options.length;
  }
  scrollToFocused();
-  nextTick(() => {
-    focusedOptionRef.value?.focus();
-  });
 };

 const scrollToFocused = () => {
@@ -407,6 +282,119 @@ const scrollToFocused = () => {
  }
 };

+const openDropdown = async () => {
+  if (!props.disabled) {
+    closeAllDropdowns();
+    dropdownVisible.value = true;
+    isOpen.value = true;
+    openDropdownCount.value++;
+    document.body.style.overflow = "hidden";
+    await updatePosition();
+
+    nextTick(() => {
+      optionsContainer.value?.focus();
+    });
+  }
+};
+
+const closeDropdown = () => {
+  if (isOpen.value) {
+    dropdownVisible.value = false;
+    isOpen.value = false;
+    openDropdownCount.value--;
+    if (openDropdownCount.value === 0) {
+      document.body.style.overflow = "";
+    }
+    focusedOptionIndex.value = null;
+    triggerRef.value?.focus();
+  }
+};
+
+const handleTriggerKeyDown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "ArrowDown":
+    case "ArrowUp":
+      event.preventDefault();
+      if (!dropdownVisible.value) {
+        openDropdown();
+        focusedOptionIndex.value = event.key === "ArrowUp" ? props.options.length - 1 : 0;
+      } else if (event.key === "ArrowDown") {
+        focusNextOption();
+      } else {
+        focusPreviousOption();
+      }
+      break;
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      if (!dropdownVisible.value) {
+        openDropdown();
+        focusedOptionIndex.value = 0;
+      } else if (focusedOptionIndex.value !== null) {
+        selectOption(props.options[focusedOptionIndex.value], focusedOptionIndex.value);
+      }
+      break;
+    case "Escape":
+      event.preventDefault();
+      closeDropdown();
+      break;
+    case "Tab":
+      if (dropdownVisible.value) {
+        event.preventDefault();
+      }
+      break;
+  }
+};
+
+const handleListboxKeyDown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      if (focusedOptionIndex.value !== null) {
+        selectOption(props.options[focusedOptionIndex.value], focusedOptionIndex.value);
+      }
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      focusNextOption();
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      focusPreviousOption();
+      break;
+    case "Escape":
+      event.preventDefault();
+      closeDropdown();
+      break;
+    case "Tab":
+      event.preventDefault();
+      break;
+    case "Home":
+      event.preventDefault();
+      focusedOptionIndex.value = 0;
+      scrollToFocused();
+      break;
+    case "End":
+      event.preventDefault();
+      focusedOptionIndex.value = props.options.length - 1;
+      scrollToFocused();
+      break;
+    default:
+      if (event.key.length === 1) {
+        const char = event.key.toLowerCase();
+        const index = props.options.findIndex((option) =>
+          props.displayName(option).toLowerCase().startsWith(char),
+        );
+        if (index !== -1) {
+          focusedOptionIndex.value = index;
+          scrollToFocused();
+        }
+      }
+      break;
+  }
+};
+
 onMounted(() => {
  window.addEventListener("resize", handleResize);
  window.addEventListener("scroll", handleResize, true);
@@ -416,6 +404,10 @@ onMounted(() => {
    }
  });
  window.addEventListener("close-all-dropdowns", closeDropdown);
+
+  if (selectedValue.value) {
+    focusedOptionIndex.value = props.options.findIndex((option) => option === selectedValue.value);
+  }
 });

 onUnmounted(() => {
@@ -427,7 +419,13 @@ onUnmounted(() => {
    }
  });
  window.removeEventListener("close-all-dropdowns", closeDropdown);
-  lastFocusedElement.value = null;
+
+  if (isOpen.value) {
+    openDropdownCount.value--;
+    if (openDropdownCount.value === 0) {
+      document.body.style.overflow = "";
+    }
+  }
 });

 watch(
@@ -443,4 +441,19 @@ watch(dropdownVisible, async (newValue) => {
    scrollTop.value = 0;
  }
 });
+
+const activeDescendant = computed(() =>
+  focusedOptionIndex.value !== null ? `${listboxId}-option-${focusedOptionIndex.value}` : undefined,
+);
+
+const isChildOfDropdown = (element: HTMLElement | null): boolean => {
+  let currentNode: HTMLElement | null = element;
+  while (currentNode) {
+    if (currentNode === triggerRef.value || currentNode === optionsContainer.value) {
+      return true;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return false;
+};
 </script>
--- a/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
+++ b/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-chevron-down"
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+</template>
--- a/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
+++ b/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-chevron-up"
+  >
+    <path d="m18 15-6-6-6 6" />
+  </svg>
+</template>
--- a/apps/frontend/src/components/ui/servers/PanelTerminalFullscreen.vue
+++ b/apps/frontend/src/components/ui/servers/PanelTerminalFullscreen.vue
--- a/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
+++ b/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
--- a/apps/frontend/src/components/ui/servers/icons/Timer.vue
+++ b/apps/frontend/src/components/ui/servers/icons/Timer.vue