feat: built-in type read-only view,s chema list, states, spec files

web/src/views/SchemaView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
-import { computed, onBeforeUnmount, watch } from 'vue'
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useMediaQuery } from '@vueuse/core'
 import DashboardShell from '@/components/DashboardShell.vue'
@@ -10,60 +10,35 @@ import DirectoryLoadError from '@/components/DirectoryLoadError.vue'
 import SchemaEmpty from '@/components/SchemaEmpty.vue'
 import SchemaForbidden from '@/components/SchemaForbidden.vue'
 import SchemaTable from '@/components/SchemaTable.vue'
-import { useDelayedSkeleton } from '@/composables/useDelayedSkeleton'
+import { useSchemaGate } from '@/composables/useSchemaGate'
 import { builtinRow, customRow, schemaSummary } from '@/lib/schemaRows'
-import { useContentTypesStore } from '@/stores/contentTypes'
-import { useSessionStore } from '@/stores/session'
 
 const DESKTOP_QUERY = '(min-width: 48rem)'
 const NEW_TYPE_PATH = '/schema/new'
 
 const router = useRouter()
-const session = useSessionStore()
-const store = useContentTypesStore()
 const isDesktop = useMediaQuery(DESKTOP_QUERY)
-const skeleton = useDelayedSkeleton()
 
-const sessionReady = computed(() => session.status === 'ready')
-const forbidden = computed(
-	() => (sessionReady.value && !session.canManageContent) || store.forbidden,
-)
-const loading = computed(
-	() =>
-		!forbidden.value &&
-		(store.status === 'idle' ||
-			store.status === 'loading' ||
-			store.builtinStatus === 'idle' ||
-			store.builtinStatus === 'loading'),
-)
-const failed = computed(
-	() => !forbidden.value && !loading.value && (store.error || store.builtinStatus === 'failed'),
-)
-const empty = computed(() => !loading.value && !failed.value && store.items.length === 0)
-const populated = computed(() => !loading.value && !failed.value)
-const showSkeleton = computed(() => loading.value && skeleton.visible.value)
-
-const customRows = computed(() => store.items.map(customRow))
-const builtinRows = computed(() => store.builtinItems.map(builtinRow))
-const summary = computed(() => schemaSummary(store.items.length, store.builtinItems.length))
-
-function retry() {
-	store.retry()
-}
-
-watch(
+const {
+	sessionReady,
+	forbidden,
 	loading,
-	(isLoading) => {
-		if (isLoading) {
-			skeleton.start()
-		} else {
-			skeleton.stop()
-		}
-	},
-	{ immediate: true },
+	showSkeleton,
+	customFailed,
+	builtinFailed,
+	customItems,
+	builtinItems,
+	retry,
+} = useSchemaGate('all')
+const failed = computed(
+	() => !forbidden.value && !loading.value && (customFailed.value || builtinFailed.value),
 )
+const empty = computed(() => !loading.value && !failed.value && customItems.value.length === 0)
+const populated = computed(() => !loading.value && !failed.value)
 
-onBeforeUnmount(skeleton.stop)
+const customRows = computed(() => customItems.value.map(customRow))
+const builtinRows = computed(() => builtinItems.value.map(builtinRow))
+const summary = computed(() => schemaSummary(customItems.value.length, builtinItems.value.length))
 
 function createType() {
 	router.push(NEW_TYPE_PATH)