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

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>