From dbde3c4669af10dd577590ed6980e5bd4552d13c Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:07:15 -0700
Subject: [PATCH] Remove duplicate components in web frontend Avatar, Badge,
 CopyCode, and Pagination (#3741)

---
 apps/frontend/src/components/ui/Avatar.vue    |  46 ----
 apps/frontend/src/components/ui/Badge.vue     | 131 ------------
 apps/frontend/src/components/ui/CopyCode.vue  |  75 -------
 .../src/components/ui/NotificationItem.vue    |  11 +-
 .../frontend/src/components/ui/Pagination.vue | 196 ------------------
 .../src/components/ui/ProjectCard.vue         |   8 +-
 .../src/components/ui/report/ReportInfo.vue   |   5 +-
 .../ui/thread/ConversationThread.vue          |   3 +-
 .../components/ui/thread/ThreadMessage.vue    |   4 +-
 apps/frontend/src/pages/[type]/[id].vue       |   4 +-
 .../src/pages/[type]/[id]/settings/index.vue  |   3 +-
 .../pages/[type]/[id]/version/[version].vue   |  14 +-
 apps/frontend/src/pages/app.vue               |   4 +-
 apps/frontend/src/pages/dashboard/index.vue   |   2 +-
 .../src/pages/dashboard/notifications.vue     |   7 +-
 .../frontend/src/pages/dashboard/projects.vue |  35 ++--
 apps/frontend/src/pages/index.vue             |   3 +-
 apps/frontend/src/pages/moderation/review.vue |   8 +-
 apps/frontend/src/pages/settings/pats.vue     |   2 +-
 apps/frontend/src/pages/user/[id].vue         |   2 +-
 20 files changed, 55 insertions(+), 508 deletions(-)
 delete mode 100644 apps/frontend/src/components/ui/Avatar.vue
 delete mode 100644 apps/frontend/src/components/ui/Badge.vue
 delete mode 100644 apps/frontend/src/components/ui/CopyCode.vue
 delete mode 100644 apps/frontend/src/components/ui/Pagination.vue

diff --git a/apps/frontend/src/components/ui/Avatar.vue b/apps/frontend/src/components/ui/Avatar.vue
deleted file mode 100644
index 6216aa5d8..000000000
--- a/apps/frontend/src/components/ui/Avatar.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <OmorphiaAvatar
-    :src="src"
-    :alt="alt"
-    :size="size"
-    :circle="circle"
-    :no-shadow="noShadow"
-    :loading="loading"
-    :raised="raised"
-  />
-</template>
-
-<script setup>
-import { Avatar as OmorphiaAvatar } from "@modrinth/ui";
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: null,
-  },
-  alt: {
-    type: String,
-    default: "",
-  },
-  size: {
-    type: String,
-    default: "2rem",
-  },
-  circle: {
-    type: Boolean,
-    default: false,
-  },
-  noShadow: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: String,
-    default: "eager",
-  },
-  raised: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
diff --git a/apps/frontend/src/components/ui/Badge.vue b/apps/frontend/src/components/ui/Badge.vue
deleted file mode 100644
index 1ebb84510..000000000
--- a/apps/frontend/src/components/ui/Badge.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <span
-    :class="
-      'badge flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
-    "
-  >
-    <template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
-
-    <!-- User roles -->
-    <template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team</template>
-    <template v-else-if="type === 'moderator'"> <ModeratorIcon /> Moderator</template>
-    <template v-else-if="type === 'creator'"><CreatorIcon /> Creator</template>
-    <template v-else-if="type === 'plus'"><PlusIcon /> Modrinth Plus</template>
-
-    <!-- Project statuses -->
-    <template v-else-if="type === 'approved'"><GlobeIcon /> Public</template>
-    <template v-else-if="type === 'approved-general'"><CheckIcon /> Approved</template>
-    <template v-else-if="type === 'unlisted' || type === 'withheld'"
-      ><LinkIcon /> Unlisted</template
-    >
-    <template v-else-if="type === 'private'"><LockIcon /> Private</template>
-    <template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled</template>
-    <template v-else-if="type === 'draft'"><DraftIcon /> Draft</template>
-    <template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived</template>
-    <template v-else-if="type === 'rejected'"><CrossIcon /> Rejected</template>
-    <template v-else-if="type === 'processing'"> <ProcessingIcon /> Under review</template>
-
-    <!-- Team members -->
-    <template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>
-    <template v-else-if="type === 'pending'"> <ProcessingIcon /> Pending </template>
-
-    <!-- Transaction statuses -->
-    <template v-else-if="type === 'success'"><CheckIcon /> Success</template>
-
-    <!-- Report status -->
-    <template v-else-if="type === 'closed'"> <CloseIcon /> Closed</template>
-
-    <!-- Other -->
-    <template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
-  </span>
-</template>
-
-<script setup>
-import {
-  GlobeIcon,
-  LinkIcon,
-  ModrinthIcon,
-  PlusIcon,
-  ScaleIcon as ModeratorIcon,
-  BoxIcon as CreatorIcon,
-  FileTextIcon as DraftIcon,
-  XIcon as CrossIcon,
-  ArchiveIcon,
-  UpdatedIcon as ProcessingIcon,
-  CheckIcon,
-  LockIcon,
-  CalendarIcon,
-  XCircleIcon as CloseIcon,
-} from "@modrinth/assets";
-import { capitalizeString } from "@modrinth/utils";
-
-defineProps({
-  type: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.badge {
-  .circle {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 0.25rem;
-    background-color: var(--badge-color);
-  }
-
-  svg {
-    vertical-align: -15%;
-    width: 1em;
-    height: 1em;
-  }
-
-  &.type--closed,
-  &.type--withheld,
-  &.type--rejected,
-  &.red {
-    --badge-color: var(--color-red);
-  }
-
-  &.type--pending,
-  &.type--moderator,
-  &.type--processing,
-  &.type--scheduled,
-  &.orange {
-    --badge-color: var(--color-orange);
-  }
-
-  &.type--accepted,
-  &.type--admin,
-  &.type--success,
-  &.type--approved-general,
-  &.green {
-    --badge-color: var(--color-green);
-  }
-
-  &.type--creator,
-  &.blue {
-    --badge-color: var(--color-blue);
-  }
-
-  &.type--unlisted,
-  &.type--plus,
-  &.purple {
-    --badge-color: var(--color-purple);
-  }
-
-  &.type--private,
-  &.type--approved,
-  &.gray {
-    --badge-color: var(--color-secondary);
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/CopyCode.vue b/apps/frontend/src/components/ui/CopyCode.vue
deleted file mode 100644
index 98cb14c06..000000000
--- a/apps/frontend/src/components/ui/CopyCode.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <button class="code" :class="{ copied }" title="Copy code to clipboard" @click="copyText">
-    <span>{{ text }}</span>
-    <CheckIcon v-if="copied" />
-    <ClipboardCopyIcon v-else />
-  </button>
-</template>
-
-<script>
-import { CheckIcon, ClipboardCopyIcon } from "@modrinth/assets";
-
-export default {
-  components: {
-    CheckIcon,
-    ClipboardCopyIcon,
-  },
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      copied: false,
-    };
-  },
-  methods: {
-    async copyText() {
-      await navigator.clipboard.writeText(this.text);
-      this.copied = true;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.code {
-  color: var(--color-text);
-  display: inline-flex;
-  grid-gap: 0.5rem;
-  font-family: var(--mono-font);
-  font-size: var(--font-size-sm);
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--color-code-bg);
-  width: fit-content;
-  border-radius: 10px;
-  user-select: text;
-  transition:
-    opacity 0.5s ease-in-out,
-    filter 0.2s ease-in-out,
-    transform 0.05s ease-in-out,
-    outline 0.2s ease-in-out;
-
-  span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  svg {
-    width: 1em;
-    height: 1em;
-  }
-
-  &:hover {
-    filter: brightness(0.85);
-  }
-
-  &:active {
-    transform: scale(0.95);
-    filter: brightness(0.8);
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 1da769a34..4a293684a 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -104,13 +104,13 @@
         </nuxt-link>
         <template v-if="tags.rejectedStatuses.includes(notification.body.new_status)">
           has been
-          <Badge :type="notification.body.new_status" />
+          <ProjectStatusBadge :status="notification.body.new_status" />
         </template>
         <template v-else>
           updated from
-          <Badge :type="notification.body.old_status" />
+          <ProjectStatusBadge :status="notification.body.old_status" />
           to
-          <Badge :type="notification.body.new_status" />
+          <ProjectStatusBadge :status="notification.body.new_status" />
         </template>
         by the moderators.
       </template>
@@ -331,16 +331,13 @@ import {
   XIcon,
   ExternalIcon,
 } from "@modrinth/assets";
-import { useRelativeTime } from "@modrinth/ui";
+import { Avatar, ProjectStatusBadge, CopyCode, useRelativeTime } from "@modrinth/ui";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
 import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
 import { getUserLink } from "~/helpers/users.js";
 import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
 import { markAsRead } from "~/helpers/notifications.ts";
 import DoubleIcon from "~/components/ui/DoubleIcon.vue";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 import Categories from "~/components/ui/search/Categories.vue";
 
 const app = useNuxtApp();
diff --git a/apps/frontend/src/components/ui/Pagination.vue b/apps/frontend/src/components/ui/Pagination.vue
deleted file mode 100644
index 99fb555ca..000000000
--- a/apps/frontend/src/components/ui/Pagination.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-  <div v-if="count > 1" class="columns paginates">
-    <a
-      :class="{ disabled: page === 1 }"
-      :tabindex="page === 1 ? -1 : 0"
-      class="left-arrow paginate has-icon"
-      aria-label="Previous Page"
-      :href="linkFunction(page - 1)"
-      @click.prevent="page !== 1 ? switchPage(page - 1) : null"
-    >
-      <LeftArrowIcon />
-    </a>
-    <div
-      v-for="(item, index) in pages"
-      :key="'page-' + item + '-' + index"
-      :class="{
-        'page-number': page !== item,
-        shrink: item > 99,
-      }"
-      class="page-number-container"
-    >
-      <div v-if="item === '-'" class="has-icon">
-        <GapIcon />
-      </div>
-      <a
-        v-else
-        :class="{
-          'page-number current': page === item,
-          shrink: item > 99,
-        }"
-        :href="linkFunction(item)"
-        @click.prevent="page !== item ? switchPage(item) : null"
-      >
-        {{ item }}
-      </a>
-    </div>
-
-    <a
-      :class="{
-        disabled: page === pages[pages.length - 1],
-      }"
-      :tabindex="page === pages[pages.length - 1] ? -1 : 0"
-      class="right-arrow paginate has-icon"
-      aria-label="Next Page"
-      :href="linkFunction(page + 1)"
-      @click.prevent="page !== pages[pages.length - 1] ? switchPage(page + 1) : null"
-    >
-      <RightArrowIcon />
-    </a>
-  </div>
-</template>
-
-<script>
-import { GapIcon, LeftArrowIcon, RightArrowIcon } from "@modrinth/assets";
-
-export default {
-  components: {
-    GapIcon,
-    LeftArrowIcon,
-    RightArrowIcon,
-  },
-  props: {
-    page: {
-      type: Number,
-      default: 1,
-    },
-    count: {
-      type: Number,
-      default: 1,
-    },
-    linkFunction: {
-      type: Function,
-      default() {
-        return () => "/";
-      },
-    },
-  },
-  emits: ["switch-page"],
-  computed: {
-    pages() {
-      let pages = [];
-
-      if (this.count > 7) {
-        if (this.page + 3 >= this.count) {
-          pages = [
-            1,
-            "-",
-            this.count - 4,
-            this.count - 3,
-            this.count - 2,
-            this.count - 1,
-            this.count,
-          ];
-        } else if (this.page > 5) {
-          pages = [1, "-", this.page - 1, this.page, this.page + 1, "-", this.count];
-        } else {
-          pages = [1, 2, 3, 4, 5, "-", this.count];
-        }
-      } else {
-        pages = Array.from({ length: this.count }, (_, i) => i + 1);
-      }
-
-      return pages;
-    },
-  },
-  methods: {
-    switchPage(newPage) {
-      this.$emit("switch-page", newPage);
-      if (newPage !== null && newPage !== "" && !isNaN(newPage)) {
-        this.$emit("switch-page", Math.min(Math.max(newPage, 1), this.count));
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-a {
-  position: relative;
-  color: var(--color-button-text);
-  box-shadow: var(--shadow-raised), var(--shadow-inset);
-
-  padding: 0.5rem 1rem;
-  margin: 0;
-  border-radius: 2rem;
-  background: var(--color-raised-bg);
-
-  transition:
-    opacity 0.5s ease-in-out,
-    filter 0.2s ease-in-out,
-    transform 0.05s ease-in-out,
-    outline 0.2s ease-in-out;
-
-  &.page-number.current {
-    background: var(--color-brand);
-    color: var(--color-brand-inverted);
-    cursor: default;
-    outline: 2px solid transparent;
-  }
-
-  &.paginate.disabled {
-    background-color: transparent;
-    cursor: not-allowed;
-    filter: grayscale(50%);
-    opacity: 0.5;
-  }
-}
-
-.has-icon {
-  display: flex;
-  align-items: center;
-
-  svg {
-    width: 1em;
-  }
-}
-
-.page-number-container,
-a,
-.has-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.paginates {
-  height: 2em;
-  margin: 0.5rem 0;
-
-  > div,
-  .has-icon {
-    margin: 0 0.3em;
-  }
-}
-
-.left-arrow {
-  margin-left: auto !important;
-}
-
-.right-arrow {
-  margin-right: auto !important;
-}
-
-@media screen and (max-width: 400px) {
-  .paginates {
-    font-size: 80%;
-  }
-}
-
-@media screen and (max-width: 530px) {
-  a {
-    width: 2.5rem;
-    padding: 0.5rem 0;
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/ProjectCard.vue b/apps/frontend/src/components/ui/ProjectCard.vue
index fbb147c2a..1be6f86c4 100644
--- a/apps/frontend/src/components/ui/ProjectCard.vue
+++ b/apps/frontend/src/components/ui/ProjectCard.vue
@@ -29,7 +29,7 @@
           {{ author }}
         </nuxt-link>
       </p>
-      <Badge v-if="status && status !== 'approved'" :type="status" class="status" />
+      <ProjectStatusBadge v-if="status && status !== 'approved'" :status="status" class="status" />
     </div>
     <p class="description">
       {{ description }}
@@ -91,18 +91,16 @@
 
 <script>
 import { CalendarIcon, UpdatedIcon, DownloadIcon, HeartIcon } from "@modrinth/assets";
+import { Avatar, ProjectStatusBadge, useRelativeTime } from "@modrinth/ui";
 import Categories from "~/components/ui/search/Categories.vue";
-import Badge from "~/components/ui/Badge.vue";
 import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
-import Avatar from "~/components/ui/Avatar.vue";
-import { useRelativeTime } from "@modrinth/ui";
 
 export default {
   components: {
+    ProjectStatusBadge,
     EnvironmentIndicator,
     Avatar,
     Categories,
-    Badge,
     CalendarIcon,
     UpdatedIcon,
     DownloadIcon,
diff --git a/apps/frontend/src/components/ui/report/ReportInfo.vue b/apps/frontend/src/components/ui/report/ReportInfo.vue
index 924ad8f9d..42d36e30d 100644
--- a/apps/frontend/src/components/ui/report/ReportInfo.vue
+++ b/apps/frontend/src/components/ui/report/ReportInfo.vue
@@ -104,12 +104,9 @@
 
 <script setup>
 import { ReportIcon, UnknownIcon, VersionIcon } from "@modrinth/assets";
+import { Avatar, Badge, CopyCode, useRelativeTime } from "@modrinth/ui";
 import { renderHighlightedString } from "~/helpers/highlight.js";
-import { useRelativeTime } from "@modrinth/ui";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 
 const formatRelativeTime = useRelativeTime();
 
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index abec85273..9109822e0 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -214,7 +214,7 @@
 </template>
 
 <script setup>
-import { OverflowMenu, MarkdownEditor } from "@modrinth/ui";
+import { CopyCode, OverflowMenu, MarkdownEditor } from "@modrinth/ui";
 import {
   DropdownIcon,
   ReplyIcon,
@@ -226,7 +226,6 @@ import {
   ScaleIcon,
 } from "@modrinth/assets";
 import { useImageUpload } from "~/composables/image-upload.ts";
-import CopyCode from "~/components/ui/CopyCode.vue";
 import ThreadMessage from "~/components/ui/thread/ThreadMessage.vue";
 import { isStaff } from "~/helpers/users.js";
 import { isApproved, isRejected } from "~/helpers/projects.js";
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index 607b269b3..9d962c98e 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -103,10 +103,8 @@ import {
   ModrinthIcon,
   ScaleIcon,
 } from "@modrinth/assets";
-import { AutoLink, OverflowMenu, useRelativeTime } from "@modrinth/ui";
+import { AutoLink, Avatar, Badge, OverflowMenu, useRelativeTime } from "@modrinth/ui";
 import { renderString } from "@modrinth/utils";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
 import { isStaff } from "~/helpers/users.js";
 
 const props = defineProps({
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 8b0d430ac..bce77e7f8 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -32,7 +32,7 @@
             <h1 class="wrap-as-needed">
               {{ project.title }}
             </h1>
-            <Badge :type="project.status" />
+            <ProjectStatusBadge :status="project.status" />
           </div>
         </div>
         <h2>Project settings</h2>
@@ -870,6 +870,7 @@ import {
   ProjectSidebarCreators,
   ProjectSidebarDetails,
   ProjectSidebarLinks,
+  ProjectStatusBadge,
   ScrollablePanel,
   useRelativeTime,
 } from "@modrinth/ui";
@@ -880,7 +881,6 @@ import dayjs from "dayjs";
 import Accordion from "~/components/ui/Accordion.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
-import Badge from "~/components/ui/Badge.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index f17a36cc7..a0593483c 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -242,8 +242,7 @@
 import { formatProjectStatus } from "@modrinth/utils";
 import { UploadIcon, SaveIcon, TrashIcon, XIcon, IssuesIcon, CheckIcon } from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
-import { ConfirmModal } from "@modrinth/ui";
-import Avatar from "~/components/ui/Avatar.vue";
+import { ConfirmModal, Avatar } from "@modrinth/ui";
 import FileInput from "~/components/ui/FileInput.vue";
 
 const props = defineProps({
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index b79b9b632..7e274c93c 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -630,7 +630,15 @@
   </div>
 </template>
 <script>
-import { ButtonStyled, ConfirmModal, MarkdownEditor } from "@modrinth/ui";
+import {
+  Avatar,
+  Badge,
+  CopyCode,
+  Checkbox,
+  ButtonStyled,
+  ConfirmModal,
+  MarkdownEditor,
+} from "@modrinth/ui";
 import {
   FileIcon,
   TrashIcon,
@@ -656,13 +664,9 @@ import { renderHighlightedString } from "~/helpers/highlight.js";
 import { reportVersion } from "~/utils/report-helpers.ts";
 import { useImageUpload } from "~/composables/image-upload.ts";
 
-import Avatar from "~/components/ui/Avatar.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
-import Badge from "~/components/ui/Badge.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 import Categories from "~/components/ui/search/Categories.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
 import FileInput from "~/components/ui/FileInput.vue";
 import Modal from "~/components/ui/Modal.vue";
 
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index 6aa9d7163..6e311d187 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -8,13 +8,11 @@ import {
   DownloadIcon,
   LinkIcon,
 } from "@modrinth/assets";
-import Avatar from "~/components/ui/Avatar.vue";
+import { Avatar, Checkbox, Badge } from "@modrinth/ui";
 import LogoAnimated from "~/components/brand/LogoAnimated.vue";
-import Badge from "~/components/ui/Badge.vue";
 import PrismIcon from "~/assets/images/external/prism.svg?component";
 import ATLauncher from "~/assets/images/external/atlauncher.svg?component";
 import CurseForge from "~/assets/images/external/curseforge.svg?component";
-import Checkbox from "~/components/ui/Checkbox.vue";
 
 import { homePageProjects } from "~/generated/state.json";
 
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index bacc6e4d1..9ee6f7d75 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/apps/frontend/src/pages/dashboard/index.vue
@@ -97,7 +97,7 @@
 </template>
 <script setup>
 import { ChevronRightIcon, HistoryIcon } from "@modrinth/assets";
-import Avatar from "~/components/ui/Avatar.vue";
+import { Avatar } from "@modrinth/ui";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
 import { fetchExtraNotificationData, groupNotifications } from "~/helpers/notifications.ts";
 
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index cc1be438c..9403107ab 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -49,12 +49,14 @@
         />
       </template>
       <p v-else>You don't have any unread notifications.</p>
-      <Pagination :page="page" :count="pages" @switch-page="changePage" />
+      <div class="flex justify-end">
+        <Pagination :page="page" :count="pages" @switch-page="changePage" />
+      </div>
     </section>
   </div>
 </template>
 <script setup>
-import { Button, Chips } from "@modrinth/ui";
+import { Button, Pagination, Chips } from "@modrinth/ui";
 import { HistoryIcon, CheckCheckIcon } from "@modrinth/assets";
 import {
   fetchExtraNotificationData,
@@ -63,7 +65,6 @@ import {
 } from "~/helpers/notifications.ts";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import Pagination from "~/components/ui/Pagination.vue";
 
 useHead({
   title: "Notifications - Modrinth",
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 1947f1408..d77de66aa 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -279,18 +279,19 @@
             </div>
 
             <div>
-              <Badge v-if="project.status" :type="project.status" class="status" />
+              <ProjectStatusBadge v-if="project.status" :status="project.status" />
             </div>
 
             <div>
-              <nuxt-link
-                class="square-button"
-                :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
-                  project.slug ? project.slug : project.id
-                }/settings`"
-              >
-                <SettingsIcon />
-              </nuxt-link>
+              <ButtonStyled circular>
+                <nuxt-link
+                  :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
+                    project.slug ? project.slug : project.id
+                  }/settings`"
+                >
+                  <SettingsIcon />
+                </nuxt-link>
+              </ButtonStyled>
             </div>
           </div>
         </div>
@@ -312,19 +313,23 @@ import {
   SortAscendingIcon as AscendingIcon,
   SortDescendingIcon as DescendingIcon,
 } from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
+import {
+  Avatar,
+  ButtonStyled,
+  Checkbox,
+  CopyCode,
+  ProjectStatusBadge,
+  commonMessages,
+} from "@modrinth/ui";
 
-import Badge from "~/components/ui/Badge.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
 import Modal from "~/components/ui/Modal.vue";
-import Avatar from "~/components/ui/Avatar.vue";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 
 export default defineNuxtComponent({
   components: {
     Avatar,
-    Badge,
+    ButtonStyled,
+    ProjectStatusBadge,
     SettingsIcon,
     TrashIcon,
     Checkbox,
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 5532ed42d..b3bdeb4d1 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -527,7 +527,7 @@
 </template>
 <script setup>
 import { Multiselect } from "vue-multiselect";
-import { ButtonStyled, useRelativeTime } from "@modrinth/ui";
+import { Avatar, ButtonStyled, useRelativeTime } from "@modrinth/ui";
 import {
   CompassIcon,
   LogInIcon,
@@ -539,7 +539,6 @@ import {
 } from "@modrinth/assets";
 import PrismLauncherLogo from "~/assets/images/external/prism.svg?component";
 import ATLauncherLogo from "~/assets/images/external/atlauncher.svg?component";
-import Avatar from "~/components/ui/Avatar.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 
 import { homePageProjects, homePageSearch, homePageNotifs } from "~/generated/state.json";
diff --git a/apps/frontend/src/pages/moderation/review.vue b/apps/frontend/src/pages/moderation/review.vue
index ddfa2c7c9..0c797dc11 100644
--- a/apps/frontend/src/pages/moderation/review.vue
+++ b/apps/frontend/src/pages/moderation/review.vue
@@ -81,7 +81,9 @@
         </div>
         <div class="mobile-row">
           is requesting to be
-          <Badge :type="project.requested_status ? project.requested_status : 'approved'" />
+          <ProjectStatusBadge
+            :status="project.requested_status ? project.requested_status : 'approved'"
+          />
         </div>
       </div>
       <div class="input-group">
@@ -103,7 +105,7 @@
 </template>
 
 <script setup>
-import { Chips, useRelativeTime } from "@modrinth/ui";
+import { Avatar, ProjectStatusBadge, Chips, useRelativeTime } from "@modrinth/ui";
 import {
   UnknownIcon,
   EyeIcon,
@@ -112,8 +114,6 @@ import {
   IssuesIcon,
   ScaleIcon,
 } from "@modrinth/assets";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
 import { formatProjectType } from "~/plugins/shorthands.js";
 import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
 
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index a8f67019c..56b0397ef 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -205,6 +205,7 @@
 import { PlusIcon, XIcon, TrashIcon, EditIcon, SaveIcon } from "@modrinth/assets";
 import {
   Checkbox,
+  CopyCode,
   ConfirmModal,
   commonSettingsMessages,
   commonMessages,
@@ -219,7 +220,6 @@ import {
   getScopeValue,
 } from "~/composables/auth/scopes.ts";
 
-import CopyCode from "~/components/ui/CopyCode.vue";
 import Modal from "~/components/ui/Modal.vue";
 
 const { formatMessage } = useVIntl();
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 11f567866..1c211c503 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -355,6 +355,7 @@ import {
   GlobeIcon,
 } from "@modrinth/assets";
 import {
+  Avatar,
   OverflowMenu,
   ButtonStyled,
   ContentPageHeader,
@@ -377,7 +378,6 @@ import BetaTesterBadge from "~/assets/images/badges/beta-tester.svg?component";
 
 import UpToDate from "~/assets/images/illustrations/up_to_date.svg?component";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
-import Avatar from "~/components/ui/Avatar.vue";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";