feat: relation field and picker

web/src/components/RelationChip.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ label: string; missing?: boolean; tall?: boolean }>(), {
+	missing: false,
+	tall: false,
+})
+</script>
+
+<template>
+	<UBadge
+		color="neutral"
+		variant="soft"
+		:label="label"
+		data-testid="relation-chip"
+		:data-missing="missing ? 'true' : undefined"
+		class="max-w-full ring-0"
+		:class="
+			missing
+				? 'border border-dashed border-accented bg-transparent text-toned'
+				: 'bg-(--rc-sand) text-(--rc-on-sand)'
+		"
+		:ui="{
+			base: [
+				tall ? 'h-5.5 px-2' : 'h-5 px-1.5',
+				'rounded-none py-0 text-xs font-medium whitespace-nowrap',
+			],
+			label: 'truncate',
+		}"
+	/>
+</template>