refactor(studio): separation of concern between app and module (#91)

Author: larbish

playground/docus/app/pages/test.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const { data } = await useAsyncData('pages', () => queryCollection('custom').first())
+</script>
+
+<template>
+  <div>
+    <ContentRenderer :value="data" />
+  </div>
+</template>

playground/docus/content.config.ts

@@ -0,0 +1,38 @@
+import type { DefinedCollection } from '@nuxt/content'
+import { defineContentConfig, defineCollection, z } from '@nuxt/content'
+
+const createDocsSchema = () => z.object({
+  layout: z.string().optional(),
+  links: z.array(z.object({
+    label: z.string(),
+    icon: z.string(),
+    to: z.string(),
+    target: z.string().optional(),
+  })).optional(),
+})
+
+const collections: Record<string, DefinedCollection> = {
+  custom: defineCollection({
+    type: 'page',
+    source: {
+      include: '3.custom-case/**/*.md',
+      prefix: '/',
+    },
+  }),
+  landing: defineCollection({
+    type: 'page',
+    source: {
+      include: 'index.md',
+    },
+  }),
+  docs: defineCollection({
+    type: 'page',
+    source: {
+      include: '**',
+      exclude: ['index.md', '3.custom-case/**/*.md'],
+    },
+    schema: createDocsSchema(),
+  }),
+}
+
+export default defineContentConfig({ collections })

playground/docus/content/3.custom-case/test.md

@@ -0,0 +1,18 @@
+---
+title: Test
+description: Test
+navigation:
+  icon: i-lucide-test
+---
+
+This test file is corresponding to a custom case collection:
+
+```[content.config.ts]
+pages: defineCollection({
+    type: 'page',
+    source: {
+      include: '3.custom-case/**/*.md',
+      prefix: '/',
+    },
+  }),
+```

src/app/src/app.vue

@@ -25,18 +25,17 @@ watch(ui.sidebar.sidebarWidth, () => {
 // Nuxt UI Portal element
 const appPortal = ref<HTMLElement>()
 
-const activeDocuments = ref<{ id: string, title: string }[]>([])
+const activeDocuments = ref<{ fsPath: string, title: string }[]>([])
 function detectActiveDocuments() {
   activeDocuments.value = host.document.detectActives().map((content) => {
     return {
-      id: content.id,
+      fsPath: content.fsPath,
       title: content.title,
     }
   })
 }
 
-async function editContentFile(id: string) {
-  const fsPath = host.document.getFileSystemPath(id)
+async function editContentFile(fsPath: string) {
   await context.activeTree.value.selectItemByFsPath(fsPath)
   ui.open()
 }
@@ -140,7 +139,7 @@ router.beforeEach((to, from) => {
             variant="outline"
             class="bg-transparent backdrop-blur-md px-2"
             label="Edit this page"
-            @click="editContentFile(activeDocuments[0].id)"
+            @click="editContentFile(activeDocuments[0].fsPath)"
           />
         </UFieldGroup>
       </div>

src/app/src/components/content/ContentCard.vue

@@ -21,8 +21,6 @@ const props = defineProps({
 })
 
 const itemExtensionIcon = computed(() => getFileIcon(props.item.fsPath))
-const collectionName = computed(() => props.item.collections[0])
-const isDirectory = computed(() => props.item.type === 'directory')
 </script>
 
 <template>
@@ -58,13 +56,5 @@ const isDirectory = computed(() => props.item.type === 'directory')
         class="bg-elevated"
       />
     </template>
-    <template #bottom-right>
-      <UBadge
-        v-if="!isDirectory"
-        :label="collectionName"
-        size="xs"
-        variant="soft"
-      />
-    </template>
   </ItemCard>
 </template>

src/app/src/components/content/ContentEditor.vue

@@ -50,7 +50,7 @@ const document = computed<DatabasePageItem>({
       return
     }
 
-    context.activeTree.value.draft.update(props.draftItem.id, {
+    context.activeTree.value.draft.update(props.draftItem.fsPath, {
       ...toRaw(document.value as DatabasePageItem),
       ...toRaw(value),
     })

src/app/src/components/shared/item/ItemActionsDropdown.vue

@@ -40,7 +40,7 @@ const actions = computed<DropdownMenuItem[]>(() => {
   const hasPendingAction = pendingAction.value !== null
   const hasLoadingAction = loadingAction.value !== null
 
-  return computeItemActions(context.itemActions.value, props.item).map((action) => {
+  return computeItemActions(context.itemActions.value, props.item, context.currentFeature.value).map((action) => {
     const isOneStepAction = oneStepActions.includes(action.id)
     const isPending = pendingAction.value?.id === action.id
     const isLoading = loadingAction.value?.id === action.id

src/app/src/components/shared/item/ItemActionsToolbar.vue

@@ -24,7 +24,7 @@ const actions = computed(() => {
   const hasPendingAction = pendingAction.value !== null
   const hasLoadingAction = loadingAction.value !== null
 
-  return computeItemActions(context.itemActions.value, item.value).map((action) => {
+  return computeItemActions(context.itemActions.value, item.value, context.currentFeature.value).map((action) => {
     const isOneStepAction = oneStepActions.includes(action.id)
     const isPending = pendingAction.value?.id === action.id
     const isLoading = loadingAction.value?.id === action.id

src/app/src/components/shared/item/ItemCard.vue

@@ -22,8 +22,7 @@ const statusRingColor = computed(() => props.item.status && props.item.status !=
 const displayInfo = computed(() => {
   if (isDirectory.value) {
     const itemcount = props.item.children?.filter(child => !child.hide).length || 0
-    const collectionCount = props.item.collections.length
-    return `${itemcount} ${itemcount === 1 ? 'item' : 'items'} from ${collectionCount} ${collectionCount === 1 ? 'collection' : 'collections'}`
+    return `${itemcount} ${itemcount === 1 ? 'item' : 'items'}`
   }
   return props.item.routePath || props.item.fsPath
 })
@@ -70,9 +69,8 @@ const displayInfo = computed(() => {
             </div>
           </div>
 
-          <div class="flex flex-col items-end justify-between self-stretch">
+          <div class="flex items-end">
             <ItemActionsDropdown :item="item" />
-            <slot name="bottom-right" />
           </div>
         </div>
       </UTooltip>

src/app/src/components/shared/item/ItemCardReview.vue

@@ -2,12 +2,9 @@
 import type { DraftItem } from '../../../types'
 import type { PropType } from 'vue'
 import { computed } from 'vue'
-import { DraftStatus, TreeRootId } from '../../../types'
+import { DraftStatus } from '../../../types'
 import { getFileIcon } from '../../../utils/file'
 import { COLOR_UI_STATUS_MAP } from '../../../utils/tree'
-import { useStudio } from '../../../composables/useStudio'
-
-const { host } = useStudio()
 
 const props = defineProps({
   draftItem: {
@@ -28,9 +25,7 @@ const originalPath = computed(() => {
     return null
   }
 
-  const isMedia = props.draftItem.original.id.startsWith(TreeRootId.Media)
-  const hostApi = isMedia ? host.media : host.document
-  return hostApi.getFileSystemPath(props.draftItem.original.id)
+  return props.draftItem.original.fsPath
 })
 
 function toggleOpen() {