feat: roles SPA foundations

web/src/components/NoAccessState.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePermissionsStore } from '@/stores/permissions'
+
+const router = useRouter()
+const permissions = usePermissionsStore()
+
+const canReadArticles = computed(() => permissions.can('content.read', { typeKey: 'article' }))
+const actionLabel = computed(() => (canReadArticles.value ? t('Go to Articles') : t('Go to Home')))
+
+function goToSafePage() {
+	router.push(canReadArticles.value ? '/article' : '/home')
+}
+</script>
+
+<template>
+	<UEmpty
+		variant="naked"
+		icon="i-lucide-lock"
+		:title="t('You don\'t have access to this page')"
+		:description="
+			t('Your role, {0}, doesn\'t include it. Ask an owner or admin if you need it.', [
+				permissions.roleName,
+			])
+		"
+		:ui="{
+			root: 'gap-3 border border-default bg-default px-6 py-14',
+			avatar: 'mb-0 size-11 rounded-none bg-elevated text-toned',
+			title: 'text-md font-semibold',
+			description: 'max-w-85 text-pretty text-muted',
+		}"
+	>
+		<template #actions>
+			<UButton
+				color="neutral"
+				variant="outline"
+				class="h-11 border border-accented bg-default px-4 text-sm text-highlighted ring-0 sm:h-8"
+				@click="goToSafePage"
+			>
+				{{ actionLabel }}
+			</UButton>
+		</template>
+	</UEmpty>
+</template>