feat: entry editor at /content/:key/new and /content/:key/:id

web/src/views/EntryEditorPage.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import DashboardShell from '@/components/DashboardShell.vue'
+import EntryEditor from '@/components/EntryEditor.vue'
+import { useEntryEditorPage } from '@/composables/useEntryEditorPage'
+import type { EntryTarget } from '@/lib/entryEditorState'
+import { contentPath } from '@/lib/routePaths'
+
+const props = defineProps<{
+	typeKey: string
+	target: EntryTarget
+	adopt: (id: number | null) => void
+}>()
+
+const page = useEntryEditorPage(props.typeKey, props.target, props.adopt)
+
+const listPath = computed(() => contentPath(props.typeKey))
+const typeMissing = computed(() => page.phase.value === 'typeNotFound')
+const centered = computed(() =>
+	['typeNotFound', 'entryNotFound', 'forbidden'].includes(page.phase.value),
+)
+const showsTitle = computed(() => page.phase.value === 'ready' && !centered.value)
+const mobileTitle = computed(() => {
+	if (typeMissing.value || page.phase.value === 'forbidden') {
+		return t('Content')
+	}
+	return showsTitle.value ? page.title.value : page.typeName.value
+})
+const breadcrumb = computed(() => {
+	if (typeMissing.value) {
+		return [{ label: t('Content') }]
+	}
+	return [
+		{ label: t('Content') },
+		{ label: page.typeName.value, to: listPath.value },
+		...(showsTitle.value ? [{ label: page.title.value }] : []),
+	]
+})
+const showDelete = computed(() => !page.isDesktop.value && page.ready.value && !page.creating.value)
+</script>
+
+<template>
+	<DashboardShell
+		compact-padding
+		sticky-footer
+		:full-bleed="centered"
+		:mobile-title="mobileTitle"
+		:back-to="listPath"
+		:back-label="page.typeName.value"
+		:no-current-nav="typeMissing"
+	>
+		<template #breadcrumb>
+			<UBreadcrumb
+				:items="breadcrumb"
+				color="neutral"
+				class="hidden lg:block"
+				:ui="{ link: 'text-sm font-medium' }"
+			/>
+		</template>
+
+		<template #navbar-right>
+			<UButton
+				v-if="showDelete"
+				type="button"
+				color="neutral"
+				variant="ghost"
+				icon="i-lucide-trash-2"
+				:disabled="page.saving.value"
+				:aria-label="t('Delete')"
+				class="size-11 justify-center text-muted"
+				:ui="{ leadingIcon: 'size-5' }"
+				@click="page.removal.open"
+			/>
+		</template>
+
+		<EntryEditor :page="page" />
+	</DashboardShell>
+</template>