From fdb2b1195e6f6507b2d186ac93985ca0959f4c16 Mon Sep 17 00:00:00 2001
From: Emma Alexia <emma@modrinth.com>
Date: Mon, 30 Jun 2025 21:02:38 -0400
Subject: [PATCH] Fix some copy codes and avatars not showing up (#3876)

I blame @imb11
---
 .../src/components/ui/servers/ContentVersionEditModal.vue   | 6 +++---
 apps/frontend/src/components/ui/servers/ServerListing.vue   | 5 +++--
 .../src/pages/servers/manage/[id]/content/index.vue         | 4 ++--
 .../src/pages/servers/manage/[id]/options/network.vue       | 6 +++---
 apps/frontend/src/pages/servers/manage/index.vue            | 4 ++--
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
index 778c5bc8b..b142bb814 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -2,7 +2,7 @@
   <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`" />
+        <Avatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
         <span class="truncate text-xl font-extrabold text-contrast">{{ modDetails?.name }}</span>
       </div>
     </template>
@@ -185,7 +185,7 @@
             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" />
+          <CopyCode class="!mt-2 !break-all" :text="versionsError" />
         </div>
       </Admonition>
 
@@ -236,7 +236,7 @@ import {
   GameIcon,
   ExternalIcon,
 } from "@modrinth/assets";
-import { Admonition, ButtonStyled, NewModal } from "@modrinth/ui";
+import { Admonition, Avatar, ButtonStyled, CopyCode, NewModal } from "@modrinth/ui";
 import TagItem from "@modrinth/ui/src/components/base/TagItem.vue";
 import { ref, computed } from "vue";
 import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from "@modrinth/utils";
diff --git a/apps/frontend/src/components/ui/servers/ServerListing.vue b/apps/frontend/src/components/ui/servers/ServerListing.vue
index 23b78a0b8..b82227512 100644
--- a/apps/frontend/src/components/ui/servers/ServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/ServerListing.vue
@@ -33,7 +33,7 @@
           v-if="projectData?.title"
           class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
         >
-          <UiAvatar
+          <Avatar
             :src="iconUrl"
             no-shadow
             style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
@@ -74,7 +74,7 @@
         <UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been suspended. Please
         update your billing information or contact Modrinth Support for more information.
       </div>
-      <UiCopyCode :text="`${props.server_id}`" class="ml-auto" />
+      <CopyCode :text="`${props.server_id}`" class="ml-auto" />
     </div>
   </NuxtLink>
 </template>
@@ -83,6 +83,7 @@
 import { ChevronRightIcon, LockIcon, SparklesIcon } from "@modrinth/assets";
 import type { Project, Server } from "@modrinth/utils";
 import { useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
+import { Avatar, CopyCode } from "@modrinth/ui";
 
 const props = defineProps<Partial<Server>>();
 
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 24d0f58b0..be1ba2755 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -136,7 +136,7 @@
                       class="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2"
                       draggable="false"
                     >
-                      <UiAvatar
+                      <Avatar
                         :src="mod.icon_url"
                         size="sm"
                         alt="Server Icon"
@@ -349,7 +349,7 @@ import {
   FileIcon,
   IssuesIcon,
 } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { Avatar, ButtonStyled } from "@modrinth/ui";
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import type { Mod } from "@modrinth/utils";
 import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
index 21dcb1bcb..811a0a3cf 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
@@ -194,7 +194,7 @@
                   Primary allocation
                 </span>
 
-                <UiCopyCode :text="`${serverIP}:${serverPrimaryPort}`" />
+                <CopyCode :text="`${serverIP}:${serverPrimaryPort}`" />
               </div>
             </div>
 
@@ -228,7 +228,7 @@
                 </div>
 
                 <div class="flex w-full flex-row items-center gap-2 sm:w-auto">
-                  <UiCopyCode :text="`${serverIP}:${allocation.port}`" />
+                  <CopyCode :text="`${serverIP}:${allocation.port}`" />
                   <ButtonStyled icon-only>
                     <button
                       class="!w-full sm:!w-auto"
@@ -273,7 +273,7 @@ import {
   UploadIcon,
   IssuesIcon,
 } from "@modrinth/assets";
-import { ButtonStyled, NewModal, ConfirmModal } from "@modrinth/ui";
+import { ButtonStyled, NewModal, ConfirmModal, CopyCode } from "@modrinth/ui";
 import { ref, computed, nextTick } from "vue";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
diff --git a/apps/frontend/src/pages/servers/manage/index.vue b/apps/frontend/src/pages/servers/manage/index.vue
index 7b9c99df0..f4d512fc1 100644
--- a/apps/frontend/src/pages/servers/manage/index.vue
+++ b/apps/frontend/src/pages/servers/manage/index.vue
@@ -35,7 +35,7 @@
 
             <li v-if="fetchError" class="text-red">
               <p>Error details:</p>
-              <UiCopyCode
+              <CopyCode
                 :text="(fetchError as ModrinthServersFetchError).message || 'Unknown error'"
                 :copyable="false"
                 :selectable="false"
@@ -120,7 +120,7 @@
 import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import Fuse from "fuse.js";
 import { HammerIcon, PlusIcon, SearchIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled, CopyCode } from "@modrinth/ui";
 import type { Server, ModrinthServersFetchError } from "@modrinth/utils";
 import { reloadNuxtApp } from "#app";
 import { useServersFetch } from "~/composables/servers/servers-fetch.ts";