feat: roles SPA foundations

web/src/views/SchemaView.vue

@@ -3,12 +3,13 @@ import { t } from '@/i18n'
 
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
+import { usePermissionsStore } from '@/stores/permissions'
 import { useMediaQuery } from '@vueuse/core'
 import DashboardShell from '@/components/DashboardShell.vue'
 import DirectoryAddButton from '@/components/DirectoryAddButton.vue'
 import DirectoryLoadError from '@/components/DirectoryLoadError.vue'
 import SchemaEmpty from '@/components/SchemaEmpty.vue'
-import SchemaForbidden from '@/components/SchemaForbidden.vue'
+import NoAccessState from '@/components/NoAccessState.vue'
 import SchemaTable from '@/components/SchemaTable.vue'
 import { useSchemaGate } from '@/composables/useSchemaGate'
 import { builtinRow, customRow, schemaSummary } from '@/lib/schemaRows'
@@ -17,6 +18,7 @@ const DESKTOP_QUERY = '(min-width: 48rem)'
 const NEW_TYPE_PATH = '/schema/new'
 
 const router = useRouter()
+const permissions = usePermissionsStore()
 const isDesktop = useMediaQuery(DESKTOP_QUERY)
 
 const {
@@ -40,18 +42,16 @@ const customRows = computed(() => customItems.value.map(customRow))
 const builtinRows = computed(() => builtinItems.value.map(builtinRow))
 const summary = computed(() => schemaSummary(customItems.value.length, builtinItems.value.length))
 
+const canEdit = computed(() => permissions.can('schema.edit'))
+
 function createType() {
 	router.push(NEW_TYPE_PATH)
 }
-
-function goHome() {
-	router.push('/home')
-}
 </script>
 
 <template>
 	<DashboardShell compact-padding :full-bleed="forbidden" :mobile-title="t('Schema')">
-		<SchemaForbidden v-if="forbidden" @back="goHome" />
+		<NoAccessState v-if="forbidden" />
 
 		<div v-else-if="sessionReady" class="flex flex-col gap-4">
 			<div class="flex flex-wrap items-end gap-4">
@@ -64,6 +64,7 @@ function goHome() {
 					</p>
 				</div>
 				<UButton
+					v-if="canEdit"
 					icon="i-lucide-plus"
 					class="h-8 px-3.5 max-md:h-11"
 					:disabled="loading"
@@ -95,7 +96,7 @@ function goHome() {
 		</div>
 
 		<DirectoryAddButton
-			v-if="!isDesktop && !forbidden && populated && !empty"
+			v-if="!isDesktop && !forbidden && canEdit && populated && !empty"
 			pinned
 			@click="createType"
 		>