From 6adab3a9621532a2b49aa8dba9cb9aed216ad702 Mon Sep 17 00:00:00 2001
From: Mysterious_Dev <mysteriousdevs@gmail.com>
Date: Tue, 31 Oct 2023 16:41:35 +0100
Subject: [PATCH 1/3] Use Typescript for Badge component

---
 lib/components/base/Badge.vue | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/lib/components/base/Badge.vue b/lib/components/base/Badge.vue
index 824c55a32..cf239fe84 100644
--- a/lib/components/base/Badge.vue
+++ b/lib/components/base/Badge.vue
@@ -36,7 +36,7 @@
   </span>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
   ModrinthIcon,
   ScaleIcon,
@@ -53,16 +53,15 @@ import {
   capitalizeString,
 } from '@'
 
-defineProps({
-  type: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: '',
-  },
-})
+withDefaults(
+  defineProps<{
+    type: string
+    color: string
+  }>(),
+  {
+    color: '',
+  }
+)
 </script>
 <style lang="scss" scoped>
 .version-badge {

From 20b988b84ac955f0319a8f1f4417ecb3f3519f86 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sat, 18 Nov 2023 14:52:07 +0100
Subject: [PATCH 2/3] Apply suggestions from brawaru

---
 lib/components/base/Badge.vue | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/lib/components/base/Badge.vue b/lib/components/base/Badge.vue
index cf239fe84..72a6e01bf 100644
--- a/lib/components/base/Badge.vue
+++ b/lib/components/base/Badge.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="'version-badge ' + color + ' type--' + type">
+  <span :class="['version-badge', color, `type--${type}`]">
     <template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
 
     <!-- User roles -->
@@ -53,15 +53,10 @@ import {
   capitalizeString,
 } from '@'
 
-withDefaults(
-  defineProps<{
-    type: string
-    color: string
-  }>(),
-  {
-    color: '',
-  }
-)
+defineProps<{
+  type: string | (string & Record<never, never>)
+  color?: string
+}>()
 </script>
 <style lang="scss" scoped>
 .version-badge {

From dbd2974ebd346d8f68d341aa9cf49a60fee6bcd6 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Date: Thu, 14 Dec 2023 20:45:27 +1100
Subject: [PATCH 3/3] Narrow badge props types and move defs on top (#1)

---
 lib/components/base/Badge.vue | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/lib/components/base/Badge.vue b/lib/components/base/Badge.vue
index c53919dba..78c1d434f 100644
--- a/lib/components/base/Badge.vue
+++ b/lib/components/base/Badge.vue
@@ -90,8 +90,36 @@ import {
   CalendarIcon,
   capitalizeString,
 } from '@'
-
 import { useVIntl, defineMessages } from '@vintl/vintl'
+
+type BadgeType =
+  | 'admin'
+  | 'moderator'
+  | 'creator'
+  | 'approved'
+  | 'approved-general'
+  | 'unlisted'
+  | 'witheld'
+  | 'private'
+  | 'scheduled'
+  | 'draft'
+  | 'archived'
+  | 'rejected'
+  | 'processing'
+  | 'accepted'
+  | 'pending'
+  | 'processed'
+  | 'failed'
+  | 'returned'
+  | 'closed'
+
+type BadgeColor = 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'gray'
+
+defineProps<{
+  type: BadgeType | (string & Record<never, never>)
+  color?: BadgeColor
+}>()
+
 const messages = defineMessages({
   acceptedLabel: {
     id: 'omorphia.component.badge.label.accepted',
@@ -171,11 +199,6 @@ const messages = defineMessages({
   },
 })
 const { formatMessage } = useVIntl()
-
-defineProps<{
-  type: string | (string & Record<never, never>)
-  color?: string
-}>()
 </script>
 <style lang="scss" scoped>
 .version-badge {