Merge branch 'main' into feat/dev-ex

Author: farnabaz

src/app/src/app.vue

@@ -5,7 +5,7 @@ import { StudioFeature } from './types'
 import { defineShortcuts } from '#imports'
 import { useRouter } from 'vue-router'
 
-const { host, ui, isReady, documentTree } = useStudio()
+const { host, ui, isReady, context } = useStudio()
 const router = useRouter()
 
 defineShortcuts({
@@ -31,7 +31,7 @@ function detectActiveDocuments() {
 }
 
 async function editContentFile(id: string) {
-  await documentTree.selectItemById(id)
+  await context.activeTree.value.selectItemById(id)
   ui.open(StudioFeature.Content)
 }
 

src/app/src/components/AppHeader.vue

@@ -10,10 +10,12 @@ const items: TabsItem[] = [
   {
     label: 'Content',
     value: 'content',
+    to: '/content',
   },
   {
     label: 'Media',
     value: 'media',
+    to: '/media',
   },
 ]
 

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

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

src/app/src/components/modal/ModalConfirmAction.vue

@@ -58,7 +58,9 @@ const handleConfirm = async () => {
       color: 'success',
     })
   }
-  catch {
+  catch (e) {
+    console.error(e)
+
     toast.add({
       title: errorMessageMap[props.actionId],
       color: 'error',

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

@@ -1,14 +1,38 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { computeActionItems } from '../../../utils/context'
 import { useStudio } from '../../../composables/useStudio'
+import { type StudioAction, StudioItemActionId } from '../../../types'
+import { mediaFileExtensions } from '../../../utils/media'
 
 const { context } = useStudio()
+const fileInputRef = ref<HTMLInputElement>()
 
 const item = computed(() => context.activeTree.value.currentItem.value)
 const actions = computed(() => {
   return computeActionItems(context.itemActions.value, item.value)
 })
+
+const handleFileSelection = (event: Event) => {
+  const target = event.target as HTMLInputElement
+
+  if (target.files && target.files.length > 0) {
+    context.itemActionHandler[StudioItemActionId.UploadMedia]({
+      parentFsPath: item.value.fsPath,
+      files: Array.from(target.files),
+    })
+    target.value = ''
+  }
+}
+
+const actionHandler = (action: StudioAction) => {
+  if (action.id === StudioItemActionId.UploadMedia) {
+    fileInputRef.value?.click()
+    return
+  }
+
+  action.handler!(item.value)
+}
 </script>
 
 <template>
@@ -24,8 +48,17 @@ const actions = computed(() => {
         size="sm"
         color="neutral"
         variant="ghost"
-        @click="action.handler!(item)"
+        @click="actionHandler(action)"
       />
     </UTooltip>
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      :accept="mediaFileExtensions.map(ext => `.${ext}`).join(', ')"
+      class="hidden"
+      @change="handleFileSelection"
+    >
   </div>
 </template>

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

@@ -4,7 +4,7 @@ import type { PropType } from 'vue'
 import { computed } from 'vue'
 import { Image } from '@unpic/vue'
 import { titleCase } from 'scule'
-import { COLOR_UI_STATUS_MAP } from '../../../utils/tree'
+import { COLOR_UI_STATUS_MAP, TreeRootId } from '../../../utils/tree'
 import { getFileIcon } from '../../../utils/file'
 
 const props = defineProps({
@@ -14,12 +14,13 @@ const props = defineProps({
   },
 })
 
+const isMedia = computed(() => props.item.id.startsWith(TreeRootId.Media))
 const isFolder = computed(() => props.item.type === 'directory')
 const name = computed(() => titleCase(props.item.name))
 
 const itemExtensionIcon = computed(() => props.item.preview ? '' : getFileIcon(props.item.id))
 
-const imageSrc = computed(() => props.item.preview || '')
+const imageSrc = computed(() => props.item.routePath || '')
 
 // ring-(--ui-success) ring-(--ui-info) ring-(--ui-warning) ring-(--ui-error) ring-(--ui-neutral)
 const statusRingColor = computed(() => props.item.status ? `ring-(--ui-${COLOR_UI_STATUS_MAP[props.item.status]})` : 'ring-(--ui-border) hover:ring-(--ui-border-accented)')

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive, type PropType } from 'vue'
 import * as z from 'zod'
-import { type CreateFileParams, type CreateFolderParams, type RenameFileParams, type StudioAction, type TreeItem, ContentFileExtension } from '../../../types'
+import { type CreateFileParams, type CreateFolderParams, type RenameFileParams, type StudioAction, type TreeItem, ContentFileExtension, MediaFileExtension } from '../../../types'
 import { joinURL, withLeadingSlash, withoutLeadingSlash } from 'ufo'
 import { contentFileExtensions } from '../../../utils/content'
 import { useStudio } from '../../../composables/useStudio'
@@ -10,6 +10,8 @@ import { stripNumericPrefix } from '../../../utils/string'
 import { defineShortcuts } from '#imports'
 import { upperFirst } from 'scule'
 import { getFileExtension } from '../../../utils/file'
+import { TreeRootId } from '../../../utils/tree'
+import { mediaFileExtensions } from '../../../utils/media'
 
 const { context } = useStudio()
 
@@ -35,8 +37,16 @@ const props = defineProps({
 })
 
 const originalName = computed(() => props.renamedItem?.name || '')
+const isMedia = computed(() => props.renamedItem?.id.startsWith(TreeRootId.Media))
 const originalExtension = computed(() => {
   const ext = getFileExtension(props.renamedItem?.id || '')
+  if (isMedia.value) {
+    if (ext && mediaFileExtensions.includes(ext as MediaFileExtension)) {
+      return ext as MediaFileExtension
+    }
+    return null
+  }
+
   if (ext && contentFileExtensions.includes(ext as ContentFileExtension)) {
     return ext as ContentFileExtension
   }
@@ -49,7 +59,7 @@ const schema = z.object({
     .min(1, 'Name cannot be empty')
     .refine((name: string) => !name.endsWith('.'), 'Name cannot end with "."')
     .refine((name: string) => !name.startsWith('/'), 'Name cannot start with "/"'),
-  extension: z.optional(z.enum(ContentFileExtension)),
+  extension: z.enum([...Object.values(ContentFileExtension), ...Object.values(MediaFileExtension)]).nullish(),
 })
 
 type Schema = z.output<typeof schema>
@@ -216,7 +226,8 @@ function onSubmit() {
                 </template>
                 <USelect
                   v-model="state.extension"
-                  :items="contentFileExtensions"
+                  :items="isMedia ? mediaFileExtensions : contentFileExtensions"
+                  :disabled="isMedia"
                   variant="soft"
                   class="w-18"
                 />

src/app/src/composables/useContext.ts

@@ -11,6 +11,7 @@ import {
   type StudioActionInProgress,
   type CreateFolderParams,
   StudioItemActionId,
+  type DatabaseItem,
 } from '../types'
 import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '../utils/context'
 import { useModal } from './useModal'
@@ -94,12 +95,12 @@ export const useContext = createSharedComposable((
     [StudioItemActionId.CreateDocument]: async (params: CreateFileParams) => {
       const { fsPath, content } = params
       const document = await host.document.create(fsPath, content)
-      const draftItem = await activeTree.value.draft.create(document)
+      const draftItem = await activeTree.value.draft.create(document as DatabaseItem)
       await activeTree.value.selectItemById(draftItem.id)
     },
-    [StudioItemActionId.UploadMedia]: async ({ directory, files }: UploadMediaParams) => {
+    [StudioItemActionId.UploadMedia]: async ({ parentFsPath, files }: UploadMediaParams) => {
       for (const file of files) {
-        await (activeTree.value.draft as ReturnType<typeof useDraftMedias>).upload(directory, file)
+        await (activeTree.value.draft as ReturnType<typeof useDraftMedias>).upload(parentFsPath, file)
       }
     },
     [StudioItemActionId.RevertItem]: async (item: TreeItem) => {
@@ -128,7 +129,7 @@ export const useContext = createSharedComposable((
     },
     [StudioItemActionId.DuplicateItem]: async (item: TreeItem) => {
       const draftItem = await activeTree.value.draft.duplicate(item.id)
-      await activeTree.value.selectItemById(draftItem.id)
+      await activeTree.value.selectItemById(draftItem!.id)
     },
   }