feat: entry list at /content/:key

web/src/views/ContentListView.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import ContentEntries from '@/components/ContentEntries.vue'
+import DashboardShell from '@/components/DashboardShell.vue'
+import { useContentTypeDetail } from '@/composables/useContentTypeDetail'
+import type { ContentListState } from '@/lib/contentListState'
+import { useSessionStore } from '@/stores/session'
+
+const route = useRoute()
+const session = useSessionStore()
+
+const key = computed(() => String(route.params.key))
+const detail = useContentTypeDetail(() => key.value)
+const listView = ref<ContentListState>('loading')
+
+watch(key, () => {
+	listView.value = 'loading'
+})
+
+const notFound = computed(() => detail.status.value === 'missing' || listView.value === 'notFound')
+const centered = computed(
+	() => notFound.value || detail.status.value === 'forbidden' || listView.value === 'forbidden',
+)
+const displayName = computed(() =>
+	notFound.value ? undefined : (detail.type.value?.name ?? key.value),
+)
+const mobileTitle = computed(() => displayName.value ?? t('Content'))
+const breadcrumb = computed(() => [
+	{ label: t('Content') },
+	...(displayName.value ? [{ label: displayName.value }] : []),
+])
+</script>
+
+<template>
+	<DashboardShell
+		compact-padding
+		:full-bleed="centered"
+		:mobile-title="mobileTitle"
+		:no-current-nav="notFound"
+	>
+		<template #breadcrumb>
+			<UBreadcrumb
+				:items="breadcrumb"
+				color="neutral"
+				class="hidden lg:block"
+				:ui="{ link: 'text-sm font-medium' }"
+			/>
+		</template>
+
+		<ContentEntries
+			v-if="session.status === 'ready'"
+			:key="key"
+			:type-key="key"
+			:type="detail.type.value"
+			:type-status="detail.status.value"
+			:can-edit="session.canManageContent"
+			@view="listView = $event"
+			@retry-type="detail.retry"
+		/>
+	</DashboardShell>
+</template>