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>

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: '',
   },
 )
 

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,