feat: edit an existing custom type

web/src/components/FieldList.vue

@@ -4,17 +4,31 @@ import { t } from '@/i18n'
 import { computed, nextTick, ref } from 'vue'
 import FieldRow from '@/components/FieldRow.vue'
 import { useKeyboardReorder } from '@/composables/useKeyboardReorder'
+import type { RowMarks } from '@/composables/useSchemaBuilder'
 import { BUILDER_LIMITS, type BuilderField } from '@/lib/schemaBuilderModel'
 import type { FieldErrors } from '@/lib/schemaBuilderValidation'
 
-const props = defineProps<{
-	fields: BuilderField[]
-	selectedUid: number | null
-	errors: Map<number, FieldErrors>
-	listError?: string
-	disabled: boolean
-	mobile: boolean
-}>()
+const NEW_MARKS: RowMarks = { isNew: true, changed: false, cause: false }
+
+const props = withDefaults(
+	defineProps<{
+		fields: BuilderField[]
+		selectedUid: number | null
+		errors: Map<number, FieldErrors>
+		listError?: string
+		disabled: boolean
+		mobile: boolean
+		marks?: Map<number, RowMarks>
+		removed?: BuilderField[]
+		canUndo?: boolean
+	}>(),
+	{
+		listError: undefined,
+		marks: undefined,
+		removed: () => [],
+		canUndo: true,
+	},
+)
 
 const emit = defineEmits<{
 	select: [uid: number]
@@ -22,6 +36,7 @@ const emit = defineEmits<{
 	remove: [uid: number]
 	move: [uid: number, delta: number]
 	reorder: [order: number[]]
+	undo: [key: string]
 }>()
 
 const list = ref<HTMLElement | null>(null)
@@ -120,6 +135,7 @@ function onFocusin(event: FocusEvent) {
 				:disabled="disabled"
 				:tabbable="field.uid === tabbableUid"
 				:show-actions="!mobile"
+				:marks="marks?.get(field.uid) ?? NEW_MARKS"
 				@select="emit('select', field.uid)"
 				@up="onMove(field.uid, -1)"
 				@down="onMove(field.uid, 1)"
@@ -141,6 +157,28 @@ function onFocusin(event: FocusEvent) {
 			}}</span>
 		</div>
 
+		<div
+			v-for="field in removed"
+			:key="field.key"
+			data-testid="undo-row"
+			class="flex min-h-11 items-center gap-2 border border-dashed border-accented px-3 text-toned"
+			:class="disabled ? 'opacity-60' : ''"
+		>
+			<UIcon name="i-lucide-minus" class="size-3.5 shrink-0" />
+			<span class="flex-1">{{
+				t('{0} will be removed', [field.label.trim() || t('Untitled field')])
+			}}</span>
+			<button
+				type="button"
+				data-testid="undo-action"
+				:disabled="disabled || !canUndo"
+				class="min-h-11 font-medium text-highlighted underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-primary disabled:text-dimmed md:min-h-0"
+				@click="emit('undo', field.key)"
+			>
+				{{ t('Undo') }}
+			</button>
+		</div>
+
 		<UButton
 			icon="i-lucide-plus"
 			color="neutral"