feat: edit an existing custom type

web/src/components/BuilderBadge.vue

@@ -3,7 +3,10 @@ import { t } from '@/i18n'
 
 import { computed } from 'vue'
 
-const props = defineProps<{ kind: 'new' | 'required' | 'unique'; onSand?: boolean }>()
+const props = defineProps<{
+	kind: 'new' | 'changed' | 'cause' | 'required' | 'unique'
+	onSand?: boolean
+}>()
 
 const badges = {
 	new: {
@@ -12,6 +15,19 @@ const badges = {
 		},
 		class: 'border border-(--rc-sand) bg-(--rc-sand) text-(--rc-on-sand)',
 	},
+	changed: {
+		get label() {
+			return t('Changed')
+		},
+		class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
+	},
+	cause: {
+		get label() {
+			return t('Possible cause')
+		},
+		icon: 'i-lucide-triangle-alert',
+		class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
+	},
 	required: {
 		get label() {
 			return t('Required')
@@ -29,6 +45,7 @@ const badges = {
 const OUTLINE_ON_SAND = 'border border-(--rc-on-sand) bg-transparent text-(--rc-on-sand)'
 
 const badge = computed(() => badges[props.kind])
+const badgeIcon = computed(() => ('icon' in badge.value ? badge.value.icon : undefined))
 const badgeClass = computed(() =>
 	props.onSand && props.kind !== 'new' ? OUTLINE_ON_SAND : badge.value.class,
 )
@@ -38,8 +55,12 @@ const badgeClass = computed(() =>
 	<UBadge
 		color="neutral"
 		variant="soft"
+		:icon="badgeIcon"
 		:class="badgeClass"
-		:ui="{ base: 'h-5 shrink-0 px-1.5 py-0 text-xs font-medium whitespace-nowrap' }"
+		:ui="{
+			base: 'h-5 shrink-0 gap-1 px-1.5 py-0 text-xs font-medium whitespace-nowrap',
+			leadingIcon: 'size-3',
+		}"
 	>
 		{{ badge.label }}
 	</UBadge>