feat: edit an existing custom type

web/src/components/SchemaReviewDialog.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import DirectoryDialog from '@/components/DirectoryDialog.vue'
+import SchemaChangeList from '@/components/SchemaChangeList.vue'
+import { entriesLine } from '@/lib/schemaEntries'
+import { summaryLine, type FieldChange } from '@/lib/schemaBuilderDiff'
+
+const props = defineProps<{
+	name: string
+	total: number
+	changes: FieldChange[]
+	applying: boolean
+	offline: boolean
+}>()
+
+defineEmits<{ apply: []; close: [] }>()
+
+const summary = computed(() => summaryLine(props.changes))
+const entries = computed(() => entriesLine(props.name, props.total))
+</script>
+
+<template>
+	<DirectoryDialog
+		:title="t('Review changes to {0}', [name])"
+		:description="t('Apply them to save the content type.')"
+		:confirm-label="t('Apply changes')"
+		:pending-label="t('Applying…')"
+		:cancel-label="t('Back to editing')"
+		tone="neutral"
+		wide
+		:pending="applying"
+		:confirm-disabled="offline"
+		@confirm="$emit('apply')"
+		@close="$emit('close')"
+	>
+		<div class="flex flex-col gap-1">
+			<span class="text-md/4.5 font-semibold text-highlighted" data-testid="review-summary">{{
+				summary
+			}}</span>
+			<span class="text-muted">{{ entries }}</span>
+		</div>
+		<SchemaChangeList :changes="changes" test-id="review-changes" />
+		<p v-if="!applying" class="text-xs/4.5 text-muted">
+			{{
+				t(
+					"Flagged changes can be refused if existing entries don't fit. If that happens, nothing is changed.",
+				)
+			}}
+		</p>
+	</DirectoryDialog>
+</template>