feat: entry list at /content/:key

web/src/components/ContentState.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+
+const props = defineProps<{ kind: 'forbidden' | 'notFound'; name: string }>()
+
+const emit = defineEmits<{ home: [] }>()
+
+const forbidden = computed(() => props.kind === 'forbidden')
+</script>
+
+<template>
+	<div class="flex min-h-0 flex-1 items-center justify-center px-6 py-6">
+		<UEmpty
+			variant="naked"
+			:icon="forbidden ? 'i-lucide-lock' : 'i-lucide-file-x'"
+			:title="
+				forbidden ? t('You don\'t have access to {0}', [name]) : t('Content type not found')
+			"
+			:description="
+				forbidden
+					? t(
+							'Your account can\'t open this content right now. If you think this is a mistake, ask an owner or an admin.',
+						)
+					: t('It may have been deleted, or the address may be mistyped.')
+			"
+			:ui="{
+				root: 'w-full max-w-105 gap-3 p-0 sm:p-0 lg:p-0',
+				avatar: 'mb-0 size-11 rounded-none bg-elevated text-toned',
+				title: 'text-title font-semibold text-wrap',
+				description: 'mt-1 w-full max-w-none px-0 text-base/5 text-wrap text-muted',
+			}"
+		>
+			<template #actions>
+				<UButton class="h-8 px-4 max-md:h-11" @click="emit('home')">
+					{{ t('Go to Home') }}
+				</UButton>
+			</template>
+		</UEmpty>
+	</div>
+</template>