From 037cc86c1f520d8e89e721a631c9163d01c61070 Mon Sep 17 00:00:00 2001
From: he3als <65787561+he3als@users.noreply.github.com>
Date: Sat, 8 Feb 2025 18:31:38 +0000
Subject: [PATCH] Server Content Tab Fixes & Improvements (#3230)

* fix cancel button on edit modal

* make hardcoded mod text dynamic for plugins

* fix files path when clicking an external plugin

* fix plugins path for file uploads

* improve friendly mod name logic

* fix toggling plugins

* update pyroServers content definitions

* install then remove for changing version

Reinstall isn't currently implemented properly

* make the edit dialog pretty

* make new admonition component

* fix warning admonition colour

* new edit version modal

* cleanup

* make latest version default

* final touches

* lint
---
 .../ui/servers/ContentVersionEditModal.vue    | 530 ++++++++++++++++++
 .../ui/servers/ContentVersionFilter.vue       | 172 ++++++
 .../ui/servers/TeleportDropdownMenu.vue       |   2 +-
 apps/frontend/src/composables/pyroServers.ts  |  34 +-
 .../servers/manage/[id]/content/index.vue     | 220 ++++----
 .../ui/src/components/base/Admonition.vue     |  58 ++
 .../ui/src/components/base/ManySelect.vue     |  12 +-
 .../ui/src/components/base/PopoutMenu.vue     |   6 +
 .../src/components/billing/PurchaseModal.vue  |  38 +-
 packages/ui/src/components/index.ts           |   1 +
 10 files changed, 909 insertions(+), 164 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
 create mode 100644 apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
 create mode 100644 packages/ui/src/components/base/Admonition.vue

diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
new file mode 100644
index 00000000..5ea0a9a0
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -0,0 +1,530 @@
+<template>
+  <NewModal ref="modModal" :header="`Editing ${type.toLocaleLowerCase()} version`">
+    <template #title>
+      <div class="flex min-w-full items-center gap-2 md:w-[calc(420px-5.5rem)]">
+        <UiAvatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
+        <span class="truncate text-xl font-extrabold text-contrast">{{ modDetails?.name }}</span>
+      </div>
+    </template>
+    <div class="flex flex-col gap-2 md:w-[420px]">
+      <div class="flex flex-col gap-2">
+        <template v-if="versionsLoading">
+          <div class="flex items-center gap-2">
+            <div class="w-fit animate-pulse select-none rounded-md bg-button-bg font-semibold">
+              <span class="opacity-0" aria-hidden="true">{{ type }} version</span>
+            </div>
+            <div class="min-h-[22px] min-w-[140px] animate-pulse rounded-full bg-button-bg" />
+          </div>
+          <div class="min-h-9 w-full animate-pulse rounded-xl bg-button-bg" />
+          <div class="w-fit animate-pulse select-none rounded-md bg-button-bg">
+            <span class="ml-6 opacity-0" aria-hidden="true">
+              Show any beta and alpha releases
+            </span>
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="flex justify-between">
+            <div class="flex items-center gap-2">
+              <div class="font-semibold text-contrast">{{ type }} version</div>
+              <NuxtLink
+                class="flex cursor-pointer items-center gap-1 bg-transparent p-0"
+                @click="
+                  versionFilter &&
+                    (unlockFilterAccordion.isOpen
+                      ? unlockFilterAccordion.close()
+                      : unlockFilterAccordion.open())
+                "
+              >
+                <TagItem
+                  v-if="formattedVersions.game_versions.length > 0"
+                  v-tooltip="formattedVersions.game_versions.join(', ')"
+                  :style="`--_color: var(--color-green)`"
+                >
+                  {{ formattedVersions.game_versions[0] }}
+                </TagItem>
+                <TagItem
+                  v-if="formattedVersions.loaders.length > 0"
+                  v-tooltip="formattedVersions.loaders.join(', ')"
+                  :style="`--_color: var(--color-platform-${formattedVersions.loaders[0].toLowerCase()})`"
+                >
+                  {{ formattedVersions.loaders[0] }}
+                </TagItem>
+                <DropdownIcon
+                  :class="[
+                    'transition-all duration-200 ease-in-out',
+                    { 'rotate-180': unlockFilterAccordion.isOpen },
+                    { 'opacity-0': !versionFilter },
+                  ]"
+                />
+              </NuxtLink>
+            </div>
+          </div>
+          <UiServersTeleportDropdownMenu
+            v-model="selectedVersion"
+            name="Project"
+            :options="filteredVersions"
+            placeholder="No valid versions found"
+            class="!min-w-full"
+            :disabled="filteredVersions.length === 0"
+            :display-name="
+              (version) => (typeof version === 'object' ? version?.version_number : version)
+            "
+          />
+          <Checkbox v-model="showBetaAlphaReleases"> Show any beta and alpha releases </Checkbox>
+        </template>
+      </div>
+
+      <Accordion
+        ref="unlockFilterAccordion"
+        :open-by-default="!versionFilter"
+        :class="[
+          versionFilter ? '' : '!border-solid border-orange bg-bg-orange !text-contrast',
+          'flex flex-col gap-2 rounded-2xl border-2 border-dashed border-divider p-3 transition-all',
+        ]"
+      >
+        <p class="m-0 items-center font-bold">
+          <span>
+            {{
+              noCompatibleVersions
+                ? `No compatible versions of this ${type.toLowerCase()} were found`
+                : versionFilter
+                  ? "Game version and platform is provided by the server"
+                  : "Incompatible game version and platform versions are unlocked"
+            }}
+          </span>
+        </p>
+        <p class="m-0 text-sm">
+          {{
+            noCompatibleVersions
+              ? `No versions compatible with your server were found. You can still select any available version.`
+              : versionFilter
+                ? `Unlocking this filter may allow you to change this ${type.toLowerCase()}
+            to an incompatible version.`
+                : "You might see versions listed that aren't compatible with your server configuration."
+          }}
+        </p>
+        <ContentVersionFilter
+          v-if="currentVersions"
+          ref="filtersRef"
+          :versions="currentVersions"
+          :game-versions="tags.gameVersions"
+          :select-classes="'w-full'"
+          :type="type"
+          :disabled="versionFilter"
+          :platform-tags="tags.loaders"
+          :listed-game-versions="gameVersions"
+          :listed-platforms="platforms"
+          @update:query="updateFiltersFromUi($event)"
+          @vue:mounted="updateFiltersToUi"
+        >
+          <template #platform>
+            <LoaderIcon
+              v-if="filtersRef?.selectedPlatforms.length === 0"
+              :loader="'Vanilla'"
+              class="size-5 flex-none"
+            />
+            <svg
+              v-else
+              class="size-5 flex-none"
+              v-html="tags.loaders.find((x) => x.name === filtersRef?.selectedPlatforms[0])?.icon"
+            ></svg>
+
+            <div class="w-full truncate text-left">
+              {{
+                filtersRef?.selectedPlatforms.length === 0
+                  ? "All platforms"
+                  : filtersRef?.selectedPlatforms.map((x) => formatCategory(x)).join(", ")
+              }}
+            </div>
+          </template>
+          <template #game-versions>
+            <GameIcon class="size-5 flex-none" />
+            <div class="w-full truncate text-left">
+              {{
+                filtersRef?.selectedGameVersions.length === 0
+                  ? "All game versions"
+                  : filtersRef?.selectedGameVersions.join(", ")
+              }}
+            </div>
+          </template>
+        </ContentVersionFilter>
+
+        <ButtonStyled v-if="!noCompatibleVersions" color-fill="text">
+          <button
+            class="w-full"
+            :disabled="gameVersions.length < 2 && platforms.length < 2"
+            @click="
+              versionFilter = !versionFilter;
+              setInitialFilters();
+              updateFiltersToUi();
+            "
+          >
+            <LockOpenIcon />
+            {{
+              gameVersions.length < 2 && platforms.length < 2
+                ? "No other platforms or versions available"
+                : versionFilter
+                  ? "Unlock"
+                  : "Return to compatibility"
+            }}
+          </button>
+        </ButtonStyled>
+      </Accordion>
+
+      <Admonition
+        v-if="versionsError"
+        type="critical"
+        header="Failed to load versions"
+        class="mb-2"
+      >
+        <div>
+          <span>
+            Something went wrong trying to load versions for this {{ type.toLocaleLowerCase() }}.
+            Please try again later or contact support if the issue persists.
+          </span>
+          <LazyUiCopyCode class="!mt-2 !break-all" :text="versionsError" />
+        </div>
+      </Admonition>
+
+      <Admonition
+        v-else-if="props.modPack"
+        type="warning"
+        header="Changing version may cause issues"
+        class="mb-2"
+      >
+        Your server was created using a modpack. It's recommended to use the modpack's version of
+        the mod.
+        <NuxtLink
+          class="mt-2 flex items-center gap-1"
+          :to="`/servers/manage/${props.serverId}/options/loader`"
+          target="_blank"
+        >
+          <ExternalIcon class="size-5 flex-none"></ExternalIcon> Modify modpack version
+        </NuxtLink>
+      </Admonition>
+
+      <div class="flex flex-row items-center gap-4">
+        <ButtonStyled color="brand">
+          <button
+            :disabled="versionsLoading || selectedVersion.id === modDetails?.version_id"
+            @click="emitChangeModVersion"
+          >
+            <CheckIcon />
+            Install
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="modModal.hide()">
+            <XIcon />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import {
+  DropdownIcon,
+  XIcon,
+  CheckIcon,
+  LockOpenIcon,
+  GameIcon,
+  ExternalIcon,
+} from "@modrinth/assets";
+import { Admonition, ButtonStyled, NewModal } from "@modrinth/ui";
+import TagItem from "@modrinth/ui/src/components/base/TagItem.vue";
+import { ref, computed } from "vue";
+import { formatCategory, formatVersionsForDisplay, type Version } from "@modrinth/utils";
+import Accordion from "~/components/ui/Accordion.vue";
+import Checkbox from "~/components/ui/Checkbox.vue";
+import ContentVersionFilter, {
+  type ListedGameVersion,
+  type ListedPlatform,
+} from "~/components/ui/servers/ContentVersionFilter.vue";
+import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
+
+const props = defineProps<{
+  type: "Mod" | "Plugin";
+  loader: string;
+  gameVersion: string;
+  modPack: boolean;
+  serverId: string;
+}>();
+
+interface ContentItem extends Mod {
+  changing?: boolean;
+}
+
+interface EditVersion extends Version {
+  installed: boolean;
+  upgrade?: boolean;
+}
+
+const modModal = ref();
+const modDetails = ref<ContentItem>();
+const currentVersions = ref<EditVersion[] | null>(null);
+const versionsLoading = ref(false);
+const versionsError = ref("");
+const showBetaAlphaReleases = ref(false);
+const unlockFilterAccordion = ref();
+const versionFilter = ref(true);
+const tags = useTags();
+const noCompatibleVersions = ref(false);
+
+const { pluginLoaders, modLoaders } = tags.value.loaders.reduce(
+  (acc, tag) => {
+    if (tag.supported_project_types.includes("plugin")) {
+      acc.pluginLoaders.push(tag.name);
+    }
+    if (tag.supported_project_types.includes("mod")) {
+      acc.modLoaders.push(tag.name);
+    }
+    return acc;
+  },
+  { pluginLoaders: [] as string[], modLoaders: [] as string[] },
+);
+
+const selectedVersion = ref();
+const filtersRef: Ref<InstanceType<typeof ContentVersionFilter> | null> = ref(null);
+interface SelectedContentFilters {
+  selectedGameVersions: string[];
+  selectedPlatforms: string[];
+}
+const selectedFilters = ref<SelectedContentFilters>({
+  selectedGameVersions: [],
+  selectedPlatforms: [],
+});
+
+const backwardCompatPlatformMap = {
+  purpur: ["purpur", "paper", "spigot", "bukkit"],
+  paper: ["paper", "spigot", "bukkit"],
+  spigot: ["spigot", "bukkit"],
+};
+
+const platforms = ref<ListedPlatform[]>([]);
+const gameVersions = ref<ListedGameVersion[]>([]);
+const initPlatform = ref<string>("");
+
+const setInitialFilters = () => {
+  selectedFilters.value = {
+    selectedGameVersions: [
+      gameVersions.value.find((version) => version.name === props.gameVersion)?.name ??
+        gameVersions.value.find((version) => version.release)?.name ??
+        gameVersions.value[0]?.name,
+    ],
+    selectedPlatforms: [initPlatform.value],
+  };
+};
+
+const updateFiltersToUi = () => {
+  if (!filtersRef.value) return;
+  filtersRef.value.selectedGameVersions = selectedFilters.value.selectedGameVersions;
+  filtersRef.value.selectedPlatforms = selectedFilters.value.selectedPlatforms;
+
+  selectedVersion.value = filteredVersions.value[0];
+};
+
+const updateFiltersFromUi = (event: { g: string[]; l: string[] }) => {
+  selectedFilters.value = {
+    selectedGameVersions: event.g,
+    selectedPlatforms: event.l,
+  };
+};
+
+const filteredVersions = computed(() => {
+  if (!currentVersions.value) return [];
+
+  const versionsWithoutReleaseFilter = currentVersions.value.filter((version: EditVersion) => {
+    if (version.installed) return true;
+    return (
+      filtersRef.value?.selectedPlatforms.every((platform) =>
+        (
+          backwardCompatPlatformMap[platform as keyof typeof backwardCompatPlatformMap] || [
+            platform,
+          ]
+        ).some((loader) => version.loaders.includes(loader)),
+      ) &&
+      filtersRef.value?.selectedGameVersions.every((gameVersion) =>
+        version.game_versions.includes(gameVersion),
+      )
+    );
+  });
+
+  const versionTypes = new Set(
+    versionsWithoutReleaseFilter.map((v: EditVersion) => v.version_type),
+  );
+  const releaseVersions = versionTypes.has("release");
+  const betaVersions = versionTypes.has("beta");
+  const alphaVersions = versionTypes.has("alpha");
+
+  const versions = versionsWithoutReleaseFilter.filter((version: EditVersion) => {
+    if (showBetaAlphaReleases.value || version.installed) return true;
+    return releaseVersions
+      ? version.version_type === "release"
+      : betaVersions
+        ? version.version_type === "beta"
+        : alphaVersions
+          ? version.version_type === "alpha"
+          : false;
+  });
+
+  return versions.map((version: EditVersion) => {
+    let suffix = "";
+
+    if (version.version_type === "alpha" && releaseVersions && betaVersions) {
+      suffix += " (alpha)";
+    } else if (version.version_type === "beta" && releaseVersions) {
+      suffix += " (beta)";
+    }
+
+    return {
+      ...version,
+      version_number: version.version_number + suffix,
+    };
+  });
+});
+
+const formattedVersions = computed(() => {
+  return {
+    game_versions: formatVersionsForDisplay(
+      selectedVersion.value?.game_versions || [],
+      tags.value.gameVersions,
+    ),
+    loaders: (selectedVersion.value?.loaders || [])
+      .sort((firstLoader: string, secondLoader: string) => {
+        const loaderList = backwardCompatPlatformMap[
+          props.loader as keyof typeof backwardCompatPlatformMap
+        ] || [props.loader];
+
+        const firstLoaderPosition = loaderList.indexOf(firstLoader.toLowerCase());
+        const secondLoaderPosition = loaderList.indexOf(secondLoader.toLowerCase());
+
+        if (firstLoaderPosition === -1 && secondLoaderPosition === -1) return 0;
+        if (firstLoaderPosition === -1) return 1;
+        if (secondLoaderPosition === -1) return -1;
+        return firstLoaderPosition - secondLoaderPosition;
+      })
+      .map((loader: string) => formatCategory(loader)),
+  };
+});
+
+async function show(mod: ContentItem) {
+  versionFilter.value = true;
+  modModal.value.show();
+  versionsLoading.value = true;
+  modDetails.value = mod;
+  versionsError.value = "";
+  currentVersions.value = null;
+
+  try {
+    const result = await useBaseFetch(`project/${mod.project_id}/version`, {}, false);
+    if (
+      Array.isArray(result) &&
+      result.every(
+        (item) =>
+          "id" in item &&
+          "version_number" in item &&
+          "version_type" in item &&
+          "loaders" in item &&
+          "game_versions" in item,
+      )
+    ) {
+      currentVersions.value = result as EditVersion[];
+    } else {
+      throw new Error("Invalid version data received.");
+    }
+
+    // find the installed version and move it to the top of the list
+    const currentModIndex = currentVersions.value.findIndex(
+      (item: { id: string }) => item.id === mod.version_id,
+    );
+    if (currentModIndex === -1) {
+      currentVersions.value[currentModIndex] = {
+        ...currentVersions.value[currentModIndex],
+        installed: true,
+        version_number: `${mod.version_number} (current) (external)`,
+      };
+    } else {
+      currentVersions.value[currentModIndex].version_number = `${mod.version_number} (current)`;
+      currentVersions.value[currentModIndex].installed = true;
+    }
+
+    // initially filter the platform and game versions for the server config
+    const platformSet = new Set<string>();
+    const gameVersionSet = new Set<string>();
+    for (const version of currentVersions.value) {
+      for (const loader of version.loaders) {
+        platformSet.add(loader);
+      }
+      for (const gameVersion of version.game_versions) {
+        gameVersionSet.add(gameVersion);
+      }
+    }
+    if (gameVersionSet.size > 0) {
+      const filteredGameVersions = tags.value.gameVersions.filter((x) =>
+        gameVersionSet.has(x.version),
+      );
+
+      gameVersions.value = filteredGameVersions.map((x) => ({
+        name: x.version,
+        release: x.version_type === "release",
+      }));
+    }
+    if (platformSet.size > 0) {
+      const tempPlatforms = Array.from(platformSet).map((platform) => ({
+        name: platform,
+        isType:
+          props.type === "Plugin"
+            ? pluginLoaders.includes(platform)
+            : props.type === "Mod"
+              ? modLoaders.includes(platform)
+              : false,
+      }));
+      platforms.value = tempPlatforms;
+    }
+
+    // set default platform
+    const defaultPlatform = Array.from(platformSet)[0];
+    initPlatform.value = platformSet.has(props.loader)
+      ? props.loader
+      : props.loader in backwardCompatPlatformMap
+        ? backwardCompatPlatformMap[props.loader as keyof typeof backwardCompatPlatformMap].find(
+            (p) => platformSet.has(p),
+          ) || defaultPlatform
+        : defaultPlatform;
+
+    // check if there's nothing compatible with the server config
+    noCompatibleVersions.value =
+      !platforms.value.some((p) => p.isType) ||
+      !gameVersions.value.some((v) => v.name === props.gameVersion);
+
+    if (noCompatibleVersions.value) {
+      unlockFilterAccordion.value.open();
+      versionFilter.value = false;
+    }
+
+    setInitialFilters();
+    versionsLoading.value = false;
+  } catch (error) {
+    console.error("Error loading versions:", error);
+    versionsError.value = error instanceof Error ? error.message : "Unknown";
+  }
+}
+
+const emit = defineEmits<{
+  changeVersion: [string];
+}>();
+
+function emitChangeModVersion() {
+  if (!selectedVersion.value) return;
+  emit("changeVersion", selectedVersion.value.id.toString());
+}
+
+defineExpose({
+  show,
+  hide: () => modModal.value.hide(),
+});
+</script>
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue b/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
new file mode 100644
index 00000000..9ce8bf85
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="experimental-styles-within flex w-full flex-col items-center gap-2">
+    <ManySelect
+      v-model="selectedPlatforms"
+      :tooltip="
+        filterOptions.platform.length < 2 && !disabled ? 'No other platforms available' : undefined
+      "
+      :options="filterOptions.platform"
+      :dropdown-id="`${baseId}-platform`"
+      search
+      show-always
+      class="w-full"
+      :disabled="disabled || filterOptions.platform.length < 2"
+      :dropdown-class="'w-full'"
+      @change="updateFilters"
+    >
+      <slot name="platform">
+        <FilterIcon class="h-5 w-5 text-secondary" />
+        Platform
+      </slot>
+      <template #option="{ option }">
+        {{ formatCategory(option) }}
+      </template>
+      <template v-if="hasAnyUnsupportedPlatforms" #footer>
+        <Checkbox
+          v-model="showSupportedPlatformsOnly"
+          class="mx-1"
+          :label="`Show ${type?.toLowerCase()} platforms only`"
+        />
+      </template>
+    </ManySelect>
+    <ManySelect
+      v-model="selectedGameVersions"
+      :tooltip="
+        filterOptions.gameVersion.length < 2 && !disabled
+          ? 'No other game versions available'
+          : undefined
+      "
+      :options="filterOptions.gameVersion"
+      :dropdown-id="`${baseId}-game-version`"
+      search
+      show-always
+      class="w-full"
+      :disabled="disabled || filterOptions.gameVersion.length < 2"
+      :dropdown-class="'w-full'"
+      @change="updateFilters"
+    >
+      <slot name="game-versions">
+        <FilterIcon class="h-5 w-5 text-secondary" />
+        Game versions
+      </slot>
+      <template v-if="hasAnySnapshots" #footer>
+        <Checkbox v-model="showSnapshots" class="mx-1" :label="`Show all versions`" />
+      </template>
+    </ManySelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FilterIcon } from "@modrinth/assets";
+import { type Version, formatCategory, type GameVersionTag } from "@modrinth/utils";
+import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
+import ManySelect from "@modrinth/ui/src/components/base/ManySelect.vue";
+import Checkbox from "@modrinth/ui/src/components/base/Checkbox.vue";
+
+export type ListedGameVersion = {
+  name: string;
+  release: boolean;
+};
+
+export type ListedPlatform = {
+  name: string;
+  isType: boolean;
+};
+
+const props = defineProps<{
+  versions: Version[];
+  gameVersions: GameVersionTag[];
+  listedGameVersions: ListedGameVersion[];
+  listedPlatforms: ListedPlatform[];
+  baseId?: string;
+  type: "Mod" | "Plugin";
+  platformTags: {
+    name: string;
+    supported_project_types: string[];
+  }[];
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(["update:query"]);
+const route = useRoute();
+
+const showSnapshots = ref(false);
+const hasAnySnapshots = computed(() => {
+  return props.versions.some((x) =>
+    props.gameVersions.some(
+      (y) => y.version_type !== "release" && x.game_versions.includes(y.version),
+    ),
+  );
+});
+
+const hasOnlySnapshots = computed(() => {
+  return props.versions.every((version) => {
+    return version.game_versions.every((gv) => {
+      const matched = props.gameVersions.find((tag) => tag.version === gv);
+      return matched && matched.version_type !== "release";
+    });
+  });
+});
+
+const hasAnyUnsupportedPlatforms = computed(() => {
+  return props.listedPlatforms.some((x) => !x.isType);
+});
+
+const hasOnlyUnsupportedPlatforms = computed(() => {
+  return props.listedPlatforms.every((x) => !x.isType);
+});
+
+const showSupportedPlatformsOnly = ref(true);
+
+const filterOptions = computed(() => {
+  const filters: Record<"gameVersion" | "platform", string[]> = {
+    gameVersion: [],
+    platform: [],
+  };
+
+  filters.gameVersion = props.listedGameVersions
+    .filter((x) => {
+      return showSnapshots.value || hasOnlySnapshots.value ? true : x.release;
+    })
+    .map((x) => x.name);
+
+  filters.platform = props.listedPlatforms
+    .filter((x) => {
+      return !showSupportedPlatformsOnly.value || hasOnlyUnsupportedPlatforms.value
+        ? true
+        : x.isType;
+    })
+    .map((x) => x.name);
+
+  return filters;
+});
+
+const selectedGameVersions = ref<string[]>([]);
+const selectedPlatforms = ref<string[]>([]);
+
+selectedGameVersions.value = route.query.g ? getArrayOrString(route.query.g) : [];
+selectedPlatforms.value = route.query.l ? getArrayOrString(route.query.l) : [];
+
+function updateFilters() {
+  emit("update:query", {
+    g: selectedGameVersions.value,
+    l: selectedPlatforms.value,
+  });
+}
+
+defineExpose({
+  selectedGameVersions,
+  selectedPlatforms,
+});
+
+function getArrayOrString(x: string | (string | null)[]): string[] {
+  if (typeof x === "string") {
+    return [x];
+  } else {
+    return x.filter((item): item is string => item !== null);
+  }
+}
+</script>
+
+<style></style>
diff --git a/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue b/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
index 4c799454..13af59e5 100644
--- a/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
+++ b/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue
@@ -227,7 +227,7 @@ const radioValue = computed<OptionValue>({
 });
 
 const triggerClasses = computed(() => ({
-  "cursor-not-allowed opacity-50 grayscale": props.disabled,
+  "!cursor-not-allowed opacity-50 grayscale": props.disabled,
   "rounded-b-none": dropdownVisible.value && !isRenderingUp.value && !props.disabled,
   "rounded-t-none": dropdownVisible.value && isRenderingUp.value && !props.disabled,
 }));
diff --git a/apps/frontend/src/composables/pyroServers.ts b/apps/frontend/src/composables/pyroServers.ts
index 74f76e3a..930a2227 100644
--- a/apps/frontend/src/composables/pyroServers.ts
+++ b/apps/frontend/src/composables/pyroServers.ts
@@ -252,7 +252,7 @@ export interface DirectoryResponse {
   current?: number;
 }
 
-type ContentType = "Mod" | "Plugin";
+type ContentType = "mod" | "plugin";
 
 const constructServerProperties = (properties: any): string => {
   let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`;
@@ -519,8 +519,8 @@ const installContent = async (contentType: ContentType, projectId: string, versi
     await PyroFetch(`servers/${internalServerRefrence.value.serverId}/mods`, {
       method: "POST",
       body: {
-        install_as: contentType,
         rinth_ids: { project_id: projectId, version_id: versionId },
+        install_as: contentType,
       },
     });
   } catch (error) {
@@ -529,13 +529,12 @@ const installContent = async (contentType: ContentType, projectId: string, versi
   }
 };
 
-const removeContent = async (contentType: ContentType, contentId: string) => {
+const removeContent = async (path: string) => {
   try {
     await PyroFetch(`servers/${internalServerRefrence.value.serverId}/deleteMod`, {
       method: "POST",
       body: {
-        install_as: contentType,
-        path: contentId,
+        path,
       },
     });
   } catch (error) {
@@ -544,15 +543,11 @@ const removeContent = async (contentType: ContentType, contentId: string) => {
   }
 };
 
-const reinstallContent = async (
-  contentType: ContentType,
-  contentId: string,
-  newContentId: string,
-) => {
+const reinstallContent = async (replace: string, projectId: string, versionId: string) => {
   try {
-    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/mods/${contentId}`, {
-      method: "PUT",
-      body: { install_as: contentType, version_id: newContentId },
+    await PyroFetch(`servers/${internalServerRefrence.value.serverId}/mods/update`, {
+      method: "POST",
+      body: { replace, project_id: projectId, version_id: versionId },
     });
   } catch (error) {
     console.error("Error reinstalling mod:", error);
@@ -1160,18 +1155,17 @@ type ContentFunctions = {
 
   /**
    * Removes a mod from a server.
-   * @param contentType - The type of content to remove.
-   * @param contentId - The ID of the content.
+   * @param path - The path of the mod file.
    */
-  remove: (contentType: ContentType, contentId: string) => Promise<void>;
+  remove: (path: string) => Promise<void>;
 
   /**
    * Reinstalls a mod to a server.
-   * @param contentType - The type of content to reinstall.
-   * @param contentId - The ID of the content.
-   * @param newContentId - The ID of the new version.
+   * @param replace - The path of the mod to replace.
+   * @param projectId - The ID of the content.
+   * @param versionId - The ID of the new version.
    */
-  reinstall: (contentType: ContentType, contentId: string, newContentId: string) => Promise<void>;
+  reinstall: (replace: string, projectId: string, versionId: string) => Promise<void>;
 };
 
 type BackupFunctions = {
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
index 8161fa97..1dc947f3 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -1,57 +1,14 @@
 <template>
-  <NewModal ref="modModal" header="Editing mod version">
-    <div>
-      <div class="mb-4 flex flex-col gap-4">
-        <div class="inline-flex flex-wrap items-center">
-          You're changing the version of
-          <div class="inline-flex flex-wrap items-center gap-1 text-nowrap pl-2">
-            <UiAvatar
-              :src="currentMod?.icon_url"
-              size="24px"
-              class="inline-block"
-              alt="Server Icon"
-            />
-            <strong>{{ currentMod?.name + "." }}</strong>
-          </div>
-        </div>
-        <div>
-          <div v-if="props.server.general?.upstream" class="flex gap-2">
-            <InfoIcon class="hidden sm:block" />
-            <span class="text-sm text-secondary">
-              Changing the mod version may cause unexpected issues. Because your server was created
-              from a modpack, it is recommended to use the modpack's version of the mod.
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="flex items-center gap-4">
-        <UiServersTeleportDropdownMenu
-          v-model="currentVersion"
-          name="Project"
-          :options="currentVersions"
-          placeholder="Select project..."
-          class="!w-full"
-          :display-name="
-            (version) => (typeof version === 'object' ? version?.version_number : version)
-          "
-        />
-      </div>
-      <div class="mt-4 flex flex-row items-center gap-4">
-        <ButtonStyled color="brand">
-          <button :disabled="currentMod.changing" @click="changeModVersion">
-            <PlusIcon />
-            Install
-          </button>
-        </ButtonStyled>
-        <ButtonStyled>
-          <button @click="modModal.value.hide()">
-            <XIcon />
-            Cancel
-          </button>
-        </ButtonStyled>
-      </div>
-    </div>
-  </NewModal>
+  <UiServersContentVersionEditModal
+    v-if="!invalidModal"
+    ref="versionEditModal"
+    :type="type"
+    :mod-pack="Boolean(props.server.general?.upstream)"
+    :game-version="props.server.general?.mc_version ?? ''"
+    :loader="props.server.general?.loader?.toLowerCase() ?? ''"
+    :server-id="props.server.serverId"
+    @change-version="changeModVersion($event)"
+  />
 
   <div v-if="server.general && localMods" class="relative isolate flex h-full w-full flex-col">
     <div ref="pyroContentSentinel" class="sentinel" data-pyro-content-sentinel />
@@ -123,7 +80,7 @@
         class="rounded-xl bg-bg-raised"
         :margin-bottom="16"
         :file-type="type"
-        :current-path="'/mods'"
+        :current-path="`/${type.toLocaleLowerCase()}s`"
         :fs="props.server.fs"
         :accepted-types="acceptFileFromProjectType(type.toLocaleLowerCase()).split(',')"
         @upload-complete="() => props.server.refresh(['content'])"
@@ -149,7 +106,7 @@
                       :to="
                         mod.project_id
                           ? `/project/${mod.project_id}/version/${mod.version_id}`
-                          : `files?path=mods`
+                          : `files?path=${type.toLocaleLowerCase()}s`
                       "
                       class="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2"
                       draggable="false"
@@ -162,9 +119,7 @@
                       />
                       <div class="flex min-w-0 flex-col gap-1">
                         <span class="text-md flex min-w-0 items-center gap-2 font-bold">
-                          <span class="truncate text-contrast">{{
-                            mod.name || mod.filename.replace(".disabled", "")
-                          }}</span>
+                          <span class="truncate text-contrast">{{ friendlyModName(mod) }}</span>
                           <span
                             v-if="mod.disabled"
                             class="hidden rounded-full bg-button-bg p-1 px-2 text-xs text-contrast sm:block"
@@ -174,19 +129,21 @@
                         <div class="min-w-0 text-xs text-secondary">
                           <span v-if="mod.owner" class="hidden sm:block"> by {{ mod.owner }} </span>
                           <span class="block font-semibold sm:hidden">
-                            {{ mod.version_number || "External mod" }}
+                            {{ mod.version_number || `External ${type.toLocaleLowerCase()}` }}
                           </span>
                         </div>
                       </div>
                     </NuxtLink>
                     <div class="ml-2 hidden min-w-0 flex-1 flex-col text-sm sm:flex">
                       <div class="truncate font-semibold text-contrast">
-                        <span v-tooltip="'Mod version'">{{
-                          mod.version_number || "External mod"
+                        <span v-tooltip="`${type} version`">{{
+                          mod.version_number || `External ${type.toLocaleLowerCase()}`
                         }}</span>
                       </div>
                       <div class="truncate">
-                        <span v-tooltip="'Mod file name'">{{ mod.filename }}</span>
+                        <span v-tooltip="`${type} file name`">
+                          {{ mod.filename }}
+                        </span>
                       </div>
                     </div>
                     <div
@@ -194,7 +151,7 @@
                     >
                       <ButtonStyled color="red" type="transparent">
                         <button
-                          v-tooltip="'Delete mod'"
+                          v-tooltip="`Delete ${type.toLocaleLowerCase()}`"
                           :disabled="mod.changing"
                           class="!hidden sm:!block"
                           @click="removeMod(mod)"
@@ -205,14 +162,16 @@
                       <ButtonStyled type="transparent">
                         <button
                           v-tooltip="
-                            mod.project_id ? 'Edit mod version' : 'External mods cannot be edited'
+                            mod.project_id
+                              ? `Edit ${type.toLocaleLowerCase()} version`
+                              : `External ${type.toLocaleLowerCase()}s cannot be edited`
                           "
                           :disabled="mod.changing || !mod.project_id"
                           class="!hidden sm:!block"
-                          @click="beginChangeModVersion(mod)"
+                          @click="showVersionModal(mod)"
                         >
                           <template v-if="mod.changing">
-                            <UiServersIconsLoadingIcon />
+                            <UiServersIconsLoadingIcon class="animate-spin" />
                           </template>
                           <template v-else>
                             <EditIcon />
@@ -232,7 +191,7 @@
                             :options="[
                               {
                                 id: 'edit',
-                                action: () => beginChangeModVersion(mod),
+                                action: () => showVersionModal(mod),
                                 shown: !!(mod.project_id && !mod.changing),
                               },
                               {
@@ -357,8 +316,6 @@ import {
   PackageClosedIcon,
   FilterIcon,
   DropdownIcon,
-  InfoIcon,
-  XIcon,
   PlusIcon,
   MoreVerticalIcon,
   CompassIcon,
@@ -366,7 +323,7 @@ import {
   ListIcon,
   FileIcon,
 } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { ButtonStyled } from "@modrinth/ui";
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
 import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
@@ -401,6 +358,64 @@ const filterMethod = ref("all");
 
 const uploadDropdownRef = ref();
 
+const versionEditModal = ref();
+const currentEditMod = ref<ContentItem | null>(null);
+const invalidModal = computed(
+  () => !props.server.general?.mc_version || !props.server.general?.loader,
+);
+async function changeModVersion(event: string) {
+  const mod = currentEditMod.value;
+
+  if (mod) mod.changing = true;
+
+  try {
+    versionEditModal.value.hide();
+
+    // This will be used instead once backend implementation is done
+    // await props.server.content?.reinstall(
+    //   `/${type.value.toLowerCase()}s/${event.fileName}`,
+    //   currentMod.value.project_id,
+    //   currentVersion.value.id,
+    // );
+
+    await props.server.content?.install(
+      type.value.toLowerCase() as "mod" | "plugin",
+      mod?.project_id || "",
+      event,
+    );
+
+    await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod?.filename}`);
+
+    await props.server.refresh(["general", "content"]);
+  } catch (error) {
+    const errmsg = `Error changing mod version: ${error}`;
+    console.error(errmsg);
+    addNotification({
+      text: errmsg,
+      type: "error",
+    });
+    return;
+  }
+  if (mod) mod.changing = false;
+}
+
+function showVersionModal(mod: ContentItem) {
+  if (invalidModal.value || !mod?.project_id || !mod?.filename) {
+    const errmsg = invalidModal.value
+      ? "Data required for changing mod version was not found."
+      : `${!mod?.project_id ? "No mod project ID found" : "No mod filename found"} for ${friendlyModName(mod!)}`;
+    console.error(errmsg);
+    addNotification({
+      text: errmsg,
+      type: "error",
+    });
+    return;
+  }
+
+  currentEditMod.value = mod;
+  versionEditModal.value.show(mod);
+}
+
 const handleDroppedFiles = (files: File[]) => {
   files.forEach((file) => {
     uploadDropdownRef.value?.uploadFile(file);
@@ -529,17 +544,30 @@ const debouncedSearch = debounce(() => {
   }
 }, 300);
 
+function friendlyModName(mod: ContentItem) {
+  if (mod.name) return mod.name;
+
+  // remove .disabled if at the end of the filename
+  let cleanName = mod.filename.endsWith(".disabled") ? mod.filename.slice(0, -9) : mod.filename;
+
+  // remove everything after the last dot
+  const lastDotIndex = cleanName.lastIndexOf(".");
+  if (lastDotIndex !== -1) cleanName = cleanName.substring(0, lastDotIndex);
+  return cleanName;
+}
+
 async function toggleMod(mod: ContentItem) {
   mod.changing = true;
 
   const originalFilename = mod.filename;
   try {
     const newFilename = mod.filename.endsWith(".disabled")
-      ? mod.filename.replace(".disabled", "")
+      ? mod.filename.slice(0, -9)
       : `${mod.filename}.disabled`;
 
-    const sourcePath = `/mods/${mod.filename}`;
-    const destinationPath = `/mods/${newFilename}`;
+    const folder = `${type.value.toLocaleLowerCase()}s`;
+    const sourcePath = `/${folder}/${mod.filename}`;
+    const destinationPath = `/${folder}/${newFilename}`;
 
     mod.disabled = newFilename.endsWith(".disabled");
     mod.filename = newFilename;
@@ -553,7 +581,7 @@ async function toggleMod(mod: ContentItem) {
 
     console.error("Error toggling mod:", error);
     addNotification({
-      text: `Something went wrong toggling ${mod.name || mod.filename.replace(".disabled", "")}`,
+      text: `Something went wrong toggling ${friendlyModName(mod)}`,
       type: "error",
     });
   }
@@ -565,10 +593,7 @@ async function removeMod(mod: ContentItem) {
   mod.changing = true;
 
   try {
-    await props.server.content?.remove(
-      type.value as "Mod" | "Plugin",
-      `/${type.value.toLowerCase()}s/${mod.filename}`,
-    );
+    await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod.filename}`);
     await props.server.refresh(["general", "content"]);
   } catch (error) {
     console.error("Error removing mod:", error);
@@ -582,41 +607,6 @@ async function removeMod(mod: ContentItem) {
   mod.changing = false;
 }
 
-const modModal = ref();
-const currentMod = ref();
-const currentVersions = ref();
-const currentVersion = ref();
-
-async function beginChangeModVersion(mod: Mod) {
-  currentMod.value = mod;
-  currentVersions.value = await useBaseFetch(`project/${mod.project_id}/version`, {}, false);
-
-  currentVersions.value = currentVersions.value.filter((version: any) =>
-    version.loaders.includes(props.server.general?.loader?.toLowerCase()),
-  );
-
-  currentVersion.value = currentVersions.value.find(
-    (version: any) => version.id === mod.version_id,
-  );
-  modModal.value.show();
-}
-
-async function changeModVersion() {
-  currentMod.value.changing = true;
-  try {
-    modModal.value.hide();
-    await props.server.content?.reinstall(
-      type.value,
-      currentMod.value.version_id,
-      currentVersion.value.id,
-    );
-    await props.server.refresh(["general", "content"]);
-  } catch (error) {
-    console.error("Error changing mod version:", error);
-  }
-  currentMod.value.changing = false;
-}
-
 const hasMods = computed(() => {
   return localMods.value?.length > 0;
 });
@@ -646,9 +636,7 @@ const filteredMods = computed(() => {
   })();
 
   return statusFilteredMods.sort((a, b) => {
-    const aName = a.name || a.filename.replace(".disabled", "");
-    const bName = b.name || b.filename.replace(".disabled", "");
-    return aName.localeCompare(bName);
+    return friendlyModName(a).localeCompare(friendlyModName(b));
   });
 });
 </script>
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
new file mode 100644
index 00000000..fc9f691f
--- /dev/null
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    :class="[
+      'flex rounded-2xl border-2 border-solid p-4 gap-4 font-semibold text-contrast',
+      typeClasses[type],
+    ]"
+  >
+    <component
+      :is="icons[type]"
+      :class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]"
+    />
+    <div class="flex flex-col gap-2">
+      <div class="font-semibold">
+        <slot name="header">{{ header }}</slot>
+      </div>
+      <div class="font-normal">
+        <slot>{{ body }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InfoIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
+
+defineProps({
+  type: {
+    type: String as () => 'info' | 'warning' | 'critical',
+    default: 'info',
+  },
+  header: {
+    type: String,
+    default: '',
+  },
+  body: {
+    type: String,
+    default: '',
+  },
+})
+
+const typeClasses = {
+  info: 'border-blue bg-bg-blue',
+  warning: 'border-orange bg-bg-orange',
+  critical: 'border-brand-red bg-bg-red',
+}
+
+const iconClasses = {
+  info: 'text-blue',
+  warning: 'text-orange',
+  critical: 'text-brand-red',
+}
+
+const icons = {
+  info: InfoIcon,
+  warning: IssuesIcon,
+  critical: XCircleIcon,
+}
+</script>
diff --git a/packages/ui/src/components/base/ManySelect.vue b/packages/ui/src/components/base/ManySelect.vue
index 638e1f3c..9ae18c36 100644
--- a/packages/ui/src/components/base/ManySelect.vue
+++ b/packages/ui/src/components/base/ManySelect.vue
@@ -1,12 +1,14 @@
 <template>
   <ButtonStyled>
     <PopoutMenu
-      v-if="options.length > 1"
+      v-if="options.length > 1 || showAlways"
       v-bind="$attrs"
       :disabled="disabled"
       :position="position"
       :direction="direction"
       :dropdown-id="dropdownId"
+      :dropdown-class="dropdownClass"
+      :tooltip="tooltip"
       @open="
         () => {
           searchQuery = ''
@@ -87,6 +89,9 @@ const props = withDefaults(
     displayName?: (option: Option) => string
     search?: boolean
     dropdownId?: string
+    dropdownClass?: string
+    showAlways?: boolean
+    tooltip?: string
   }>(),
   {
     disabled: false,
@@ -94,7 +99,10 @@ const props = withDefaults(
     direction: 'auto',
     displayName: (option: Option) => option as string,
     search: false,
-    dropdownId: null,
+    dropdownId: '',
+    dropdownClass: '',
+    showAlways: false,
+    tooltip: '',
   },
 )
 
diff --git a/packages/ui/src/components/base/PopoutMenu.vue b/packages/ui/src/components/base/PopoutMenu.vue
index a9c13b13..4991db88 100644
--- a/packages/ui/src/components/base/PopoutMenu.vue
+++ b/packages/ui/src/components/base/PopoutMenu.vue
@@ -4,6 +4,7 @@
     no-auto-focus
     :aria-id="dropdownId || null"
     placement="bottom-end"
+    :class="dropdownClass"
     @apply-hide="focusTrigger"
     @apply-show="focusMenuChild"
   >
@@ -34,6 +35,11 @@ defineProps({
     default: null,
     required: false,
   },
+  dropdownClass: {
+    type: String,
+    default: null,
+    required: false,
+  },
   tooltip: {
     type: String,
     default: null,
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index e0788e23..17635236 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -137,32 +137,19 @@
               <input v-model="customServerConfig.storageGbFormatted" disabled class="input" />
             </div>
           </div>
-          <div
-            v-else
-            class="flex justify-between rounded-2xl border-2 border-solid border-blue bg-bg-blue p-4 font-semibold text-contrast"
+          <Admonition
+            v-else-if="customOutOfStock && customMatchingProduct"
+            type="info"
+            header="This plan is currently out of stock"
           >
-            <div class="flex w-full justify-between gap-2">
-              <div class="flex flex-row gap-4">
-                <InfoIcon class="hidden flex-none h-8 w-8 text-blue sm:block" />
-
-                <div v-if="customOutOfStock && customMatchingProduct" class="flex flex-col gap-2">
-                  <div class="font-semibold">This plan is currently out of stock</div>
-                  <div class="font-normal">
-                    We are currently
-                    <a :href="outOfStockUrl" class="underline" target="_blank">out of capacity</a>
-                    for your selected RAM amount. Please try again later, or try a different amount.
-                  </div>
-                </div>
-                <div v-else class="flex flex-col gap-2">
-                  <div class="font-semibold">We can't seem to find your selected plan</div>
-                  <div class="font-normal">
-                    We are currently unable to find a server for your selected RAM amount. Please
-                    try again later, or try a different amount.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+            We are currently
+            <a :href="outOfStockUrl" class="underline" target="_blank">out of capacity</a>
+            for your selected RAM amount. Please try again later, or try a different amount.
+          </Admonition>
+          <Admonition v-else type="info" header="We can't seem to find your selected plan">
+            We are currently unable to find a server for your selected RAM amount. Please try again
+            later, or try a different amount.
+          </Admonition>
 
           <div class="flex items-center gap-2">
             <InfoIcon class="hidden sm:block" />
@@ -500,6 +487,7 @@ import { useVIntl, defineMessages } from '@vintl/vintl'
 import { Multiselect } from 'vue-multiselect'
 import Checkbox from '../base/Checkbox.vue'
 import Slider from '../base/Slider.vue'
+import Admonition from '../base/Admonition.vue'
 
 const { locale, formatMessage } = useVIntl()
 
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index bf53d7aa..00b01655 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,5 +1,6 @@
 // Base content
 export { default as Accordion } from './base/Accordion.vue'
+export { default as Admonition } from './base/Admonition.vue'
 export { default as AutoLink } from './base/AutoLink.vue'
 export { default as Avatar } from './base/Avatar.vue'
 export { default as Badge } from './base/Badge.vue'