feat: Initialize media feature

src/app/src/App.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import { useStudio } from './composables/useStudio'
-import PanelContent from './components/panel/content/PanelContent.vue'
-import PanelMedia from './components/panel/PanelMedia.vue'
-import PanelConfig from './components/panel/PanelConfig.vue'
 import { useSidebar } from './composables/useSidebar'
 import { watch, ref } from 'vue'
 import { StudioFeature } from './types'
 
 const { sidebarWidth } = useSidebar()
-const { ui, host, isReady, tree } = useStudio()
+const { ui, host, isReady } = useStudio()
 watch(sidebarWidth, () => {
   if (ui.isPanelOpen.value) {
     host.ui.updateStyles()
@@ -48,20 +45,10 @@ host.on.mounted(() => {
     >
       <PanelBase v-model="ui.isPanelOpen.value">
         <template #header>
-          <div class="flex items-center justify-between gap-2">
-            <ItemBreadcrumb
-              :current-item="tree.currentItem.value"
-              :tree="tree.root.value"
-            />
-            <ItemActionsToolbar
-              :item="tree.currentItem.value"
-            />
-          </div>
+          <PanelBaseSubHeader />
         </template>
 
-        <PanelContent v-if="ui.panels.content" />
-        <PanelMedia v-else-if="ui.panels.media" />
-        <PanelConfig v-else-if="ui.panels.config" />
+        <PanelBaseBody />
       </PanelBase>
 
       <!-- Floating Files Panel Toggle -->

src/app/src/components/CommitPreviewModal.vue

@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue'
 import ReviewPanel from './ReviewPanel.vue'
 import { useStudio } from '../composables/useStudio'
-import type { DraftFileItem } from '../types'
+import type { DraftItem } from '../types'
 // import { useToast } from '@nuxt/ui/composables/useToast'
 
 const modelValue = defineModel<any>()
@@ -17,7 +17,7 @@ const preview = useStudio()
 // const toast = useToast()
 
 const loading = ref(false)
-const filesToReview = ref<DraftFileItem[]>([])
+const filesToReview = ref<DraftItem[]>([])
 
 async function prepareReview() {
   loading.value = true

src/app/src/components/panel/base/PanelBaseBody.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStudio } from '../../../composables/useStudio'
+import { StudioFeature, StudioItemActionId } from '../../../types'
+
+const { documentTree, mediaTree, draftDocuments, draftMedias, context } = useStudio()
+
+const tree = computed(() => context.feature.value === StudioFeature.Content ? documentTree : mediaTree)
+
+const currentFile = computed(() => context.feature.value === StudioFeature.Content ? draftDocuments.current.value : draftMedias.current.value)
+
+const folderTree = computed(() => (tree.value.current.value || []).filter(f => f.type === 'directory'))
+const fileTree = computed(() => (tree.value.current.value || []).filter(f => f.type === 'file'))
+
+const isFileCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateDocument)
+const isFolderCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateFolder)
+</script>
+
+<template>
+  <PanelBaseBodyEditor
+    v-if="tree.currentItem.value.type === 'file' && currentFile"
+    :draft-item="currentFile"
+  />
+  <div
+    v-else
+    class="flex flex-col"
+  >
+    <PanelBaseBodyTree
+      v-if="folderTree?.length > 0 || isFolderCreationInProgress"
+      class="mb-4"
+      :tree="folderTree"
+      :show-creation-form="isFolderCreationInProgress"
+      type="directory"
+    />
+    <PanelBaseBodyTree
+      v-if="fileTree?.length > 0 || isFileCreationInProgress"
+      :tree="fileTree"
+      :show-creation-form="isFileCreationInProgress"
+      type="file"
+    />
+  </div>
+</template>

src/app/src/components/panel/base/PanelBaseBodyEditor.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type DraftItem, StudioFeature } from '../../../types'
+import type { PropType } from 'vue'
+import { useStudio } from '../../../composables/useStudio'
+
+defineProps({
+  draftItem: {
+    type: Object as PropType<DraftItem>,
+    required: true,
+  },
+})
+
+const { context } = useStudio()
+</script>
+
+<template>
+  <PanelContentEditor
+    v-if="context.feature.value === StudioFeature.Content"
+    :draft-item="draftItem"
+  />
+  <PanelMediaEditor
+    v-else
+    :draft-item="draftItem"
+  />
+</template>

src/app/src/components/panel/content/PanelContentTree.vue → src/app/src/components/panel/base/PanelBaseBodyTree.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import type { TreeItem } from '../../../types'
-import type { PropType } from 'vue'
+import { StudioFeature, type TreeItem } from '../../../types'
+import { computed, type PropType } from 'vue'
 import { useStudio } from '../../../composables/useStudio'
 
-const { tree: treeApi, context } = useStudio()
+const { documentTree, mediaTree, context } = useStudio()
+
+const treeApi = computed(() => context.feature.value === StudioFeature.Content ? documentTree : mediaTree)
 
 defineProps({
   type: {

src/app/src/components/panel/base/PanelBaseHeader.vue

@@ -3,14 +3,14 @@ import { useStudio } from '../../../composables/useStudio'
 import { StudioFeature } from '../../../types'
 import { ROOT_ITEM } from '../../../utils/tree'
 
-const { ui, context, tree } = useStudio()
+const { ui, context, documentTree, mediaTree } = useStudio()
 
 const features = [{
   label: 'Content',
   icon: 'i-lucide-files',
   onClick: () => {
     if (context.feature.value === StudioFeature.Content) {
-      tree.select(ROOT_ITEM)
+      documentTree.select(ROOT_ITEM)
       return
     }
 
@@ -21,24 +21,12 @@ const features = [{
   icon: 'i-lucide-image',
   onClick: () => {
     if (context.feature.value === StudioFeature.Media) {
-      tree.select(ROOT_ITEM)
+      mediaTree.select(ROOT_ITEM)
       return
     }
 
     ui.openPanel(StudioFeature.Media)
   },
-},
-{
-  label: 'Config',
-  icon: 'i-lucide-settings',
-  onClick: () => {
-    if (context.feature.value === StudioFeature.Config) {
-      tree.select(ROOT_ITEM)
-      return
-    }
-
-    ui.openPanel(StudioFeature.Config)
-  },
 }]
 </script>
 

src/app/src/components/panel/base/PanelBaseSubHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { StudioFeature } from '../../../types'
+import { computed } from 'vue'
+import { useStudio } from '../../../composables/useStudio'
+
+const { context, documentTree, mediaTree } = useStudio()
+
+const tree = computed(() => context.feature.value === StudioFeature.Content ? documentTree : mediaTree)
+</script>
+
+<template>
+  <div class="flex items-center justify-between gap-2">
+    <ItemBreadcrumb
+      :current-item="tree.currentItem.value"
+      :tree="tree.root.value"
+    />
+    <ItemActionsToolbar
+      :item="tree.currentItem.value"
+    />
+  </div>
+</template>

src/app/src/components/panel/content/editor/PanelContentEditor.vue

@@ -2,31 +2,31 @@
 import { computed, type PropType, toRaw } from 'vue'
 import { decompressTree } from '@nuxt/content/runtime'
 import type { MarkdownRoot } from '@nuxt/content'
-import type { DatabasePageItem, DraftFileItem } from '../../../../types'
+import type { DatabasePageItem, DraftItem } from '../../../../types'
 import { useStudio } from '../../../../composables/useStudio'
 
 const props = defineProps({
   draftItem: {
-    type: Object as PropType<DraftFileItem>,
+    type: Object as PropType<DraftItem>,
     required: true,
   },
 })
 
-const { draftFiles } = useStudio()
+const { draftDocuments } = useStudio()
 
 const document = computed<DatabasePageItem>({
   get() {
     if (!props.draftItem) {
       return {} as DatabasePageItem
     }
 
-    const dbItem = props.draftItem.document as DatabasePageItem
+    const dbItem = props.draftItem.modified as DatabasePageItem
 
     let result: DatabasePageItem
     // TODO: check mdcRoot and markdownRoot types with Ahad
     if (dbItem.body?.type === 'minimark') {
       result = {
-        ...props.draftItem.document as DatabasePageItem,
+        ...props.draftItem.modified as DatabasePageItem,
         // @ts-expect-error todo fix MarkdownRoot/MDCRoot conversion in MDC module
         body: decompressTree(dbItem.body) as MarkdownRoot,
       }
@@ -38,7 +38,7 @@ const document = computed<DatabasePageItem>({
     return result
   },
   set(value) {
-    draftFiles.update(props.draftItem.id, {
+    draftDocuments.update(props.draftItem.id, {
       ...toRaw(document.value as DatabasePageItem),
       ...toRaw(value),
     })

src/app/src/components/panel/content/editor/PanelContentEditorCode.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, shallowRef, watch } from 'vue'
-import type { DatabasePageItem, DraftFileItem } from '../../../../types'
+import type { DatabasePageItem, DraftItem } from '../../../../types'
 import type { PropType } from 'vue'
 import { setupMonaco, type Editor } from '../../../../utils/monaco'
 import { generateContentFromDocument, generateDocumentFromContent, pickReservedKeysFromDocument } from '../../../../utils/content'
 
 const props = defineProps({
   draftItem: {
-    type: Object as PropType<DraftFileItem>,
+    type: Object as PropType<DraftItem>,
     required: true,
   },
 })
@@ -22,7 +22,7 @@ const currentDocumentId = ref<string | null>(null)
 // Trigger on action events
 watch(() => props.draftItem.status, () => {
   if (editor.value) {
-    setContent(props.draftItem.document as DatabasePageItem)
+    setContent(props.draftItem.modified as DatabasePageItem)
   }
 })
 
@@ -53,7 +53,7 @@ onMounted(async () => {
 
     generateDocumentFromContent(document.value!.id, content.value).then((doc) => {
       document.value = {
-        ...pickReservedKeysFromDocument(props.draftItem.originalDatabaseItem as DatabasePageItem || document.value!),
+        ...pickReservedKeysFromDocument(props.draftItem.original as DatabasePageItem || document.value!),
         ...doc,
       } as DatabasePageItem
     })

src/app/src/components/panel/media/PanelMediaEditor.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { DraftItem } from '../../../types'
+
+defineProps({
+  draftItem: {
+    type: Object as PropType<DraftItem>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div class="bg-neutral-800">
+    <img :src="draftItem.modified?.path">
+  </div>
+</template>

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

@@ -2,13 +2,13 @@
 import type { BreadcrumbItem } from '@nuxt/ui/components/Breadcrumb.vue.d.ts'
 import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue.d.ts'
 import { computed, type PropType, unref } from 'vue'
-import type { TreeItem } from '../../../types'
+import { StudioFeature, type TreeItem } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
 import { findParentFromId, ROOT_ITEM } from '../../../utils/tree'
 import { FEATURE_DISPLAY_MAP } from '../../../utils/context'
 import { DraftStatus } from '../../../types/draft'
 
-const { tree: treeApi, context } = useStudio()
+const { documentTree, mediaTree, context } = useStudio()
 
 const props = defineProps({
   currentItem: {
@@ -21,11 +21,14 @@ const props = defineProps({
   },
 })
 
+const treeApi = computed(() => context.feature.value === StudioFeature.Content ? documentTree : mediaTree)
+
 const items = computed<BreadcrumbItem[]>(() => {
   const rootItem = {
     label: FEATURE_DISPLAY_MAP[context.feature.value as keyof typeof FEATURE_DISPLAY_MAP],
     onClick: () => {
-      treeApi.select(ROOT_ITEM)
+      // TODO: update for ROOT_DOCUMENT_ITEM and ROOT_MEDIA_ITEM
+      treeApi.value.select(ROOT_ITEM)
     },
   }
 
@@ -41,7 +44,7 @@ const items = computed<BreadcrumbItem[]>(() => {
     breadcrumbItems.unshift({
       label: currentTreeItem.name,
       onClick: async () => {
-        await treeApi.select(itemToSelect)
+        await treeApi.value.select(itemToSelect)
       },
     })