refac: split useSchemaBuilder & SchemaDeleteControls

web/src/components/SchemaBuilderPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useMediaQuery } from '@vueuse/core'
 import ApiPreview from '@/components/ApiPreview.vue'
@@ -9,13 +9,12 @@ import ApiPreviewSheet from '@/components/ApiPreviewSheet.vue'
 import BuilderActions from '@/components/BuilderActions.vue'
 import BuilderBadge from '@/components/BuilderBadge.vue'
 import BuilderInspector from '@/components/BuilderInspector.vue'
-import BuilderMoreMenu from '@/components/BuilderMoreMenu.vue'
 import BuilderTypeBar from '@/components/BuilderTypeBar.vue'
-import DeleteTypeDialog from '@/components/DeleteTypeDialog.vue'
 import FieldList from '@/components/FieldList.vue'
 import FieldSheet from '@/components/FieldSheet.vue'
 import RetryAlert from '@/components/RetryAlert.vue'
 import SchemaForbidden from '@/components/SchemaForbidden.vue'
+import SchemaDeleteControls from '@/components/SchemaDeleteControls.vue'
 import SchemaRefusalDialog from '@/components/SchemaRefusalDialog.vue'
 import SchemaReviewDialog from '@/components/SchemaReviewDialog.vue'
 import { useSchemaBuilder, type EditSource } from '@/composables/useSchemaBuilder'
@@ -24,7 +23,6 @@ import { useUnsavedChangesGuard } from '@/composables/useUnsavedChangesGuard'
 import { HOME_PATH } from '@/lib/routePaths'
 import { sampleJson } from '@/lib/schemaBuilderSample'
 import { entriesNotice } from '@/lib/schemaEntries'
-import { TOPBAR_ACTION_ID } from '@/lib/uiSlots'
 import { formatClock } from '@/lib/updateFormat'
 
 const DESKTOP_QUERY = '(min-width: 48rem)'
@@ -36,7 +34,6 @@ const isDesktop = useMediaQuery(DESKTOP_QUERY)
 const builder = useSchemaBuilder(props.edit)
 const { form } = builder
 const remove = props.edit ? useSchemaDelete(() => props.edit!) : undefined
-const moreMenu = ref<InstanceType<typeof BuilderMoreMenu> | null>(null)
 const moreDisabled = computed(() => builder.saving.value || Boolean(remove?.pending.value))
 const forbidden = computed(
 	() => builder.failure.value === 'forbidden' || Boolean(remove?.forbidden.value),
@@ -73,16 +70,6 @@ const selectedName = computed(() => builder.selected.value?.label.trim() || t('U
 const sheetTitle = computed(() => t('Field: {0}', [selectedName.value]))
 const reviewName = computed(() => builder.baseline.value?.name ?? '')
 
-watch(
-	() => remove?.stage.value,
-	async (stage) => {
-		if (stage === 'closed') {
-			await nextTick()
-			moreMenu.value?.focus()
-		}
-	},
-)
-
 function goHome() {
 	router.push(HOME_PATH)
 }
@@ -160,11 +147,11 @@ async function restoreRowFocus() {
 							@save="builder.save"
 							@discard="builder.discard"
 						>
-							<BuilderMoreMenu
+							<SchemaDeleteControls
 								v-if="remove"
-								ref="moreMenu"
+								:remove="remove"
 								:disabled="moreDisabled"
-								@delete="remove.open"
+								:mobile="false"
 							/>
 						</BuilderActions>
 					</template>
@@ -311,9 +298,7 @@ async function restoreRowFocus() {
 		</div>
 
 		<template v-if="!isDesktop">
-			<Teleport v-if="remove" :to="`#${TOPBAR_ACTION_ID}`" defer>
-				<BuilderMoreMenu ref="moreMenu" :disabled="moreDisabled" @delete="remove.open" />
-			</Teleport>
+			<SchemaDeleteControls v-if="remove" :remove="remove" :disabled="moreDisabled" mobile />
 			<ApiPreviewSheet v-model:open="apiSheetOpen" :key-value="form.key" :json="json" />
 			<FieldSheet
 				v-model:open="fieldSheetOpen"
@@ -346,18 +331,6 @@ async function restoreRowFocus() {
 			@apply="builder.apply"
 			@close="builder.closeReview"
 		/>
-		<DeleteTypeDialog
-			v-if="remove && remove.stage.value !== 'closed'"
-			:stage="remove.stage.value"
-			:name="remove.type.value.name"
-			:key-value="remove.type.value.key"
-			:total="remove.total.value"
-			:pending="remove.pending.value"
-			:offline="remove.offline.value"
-			@confirm="remove.confirm"
-			@close="remove.close"
-			@view-entries="remove.viewEntries"
-		/>
 		<SchemaRefusalDialog
 			v-if="builder.refusal.value === 'dialog'"
 			:causes="refusalCauses"