up

Author: larbish

src/app/src/components/AppFooter.vue

@@ -60,7 +60,7 @@ const userMenuItems = computed(() => [
         >
           <USwitch
             v-model="showTechnicalMode"
-            label="Technical view"
+            label="Developer view"
             size="xs"
             :ui="{ root: 'w-full flex-row-reverse justify-between', wrapper: 'ms-0' }"
           />

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

@@ -4,24 +4,26 @@ import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue.d.ts
 import { computed, unref } from 'vue'
 import { type TreeItem, TreeStatus } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
-import { findParentFromId, ROOT_ITEM } from '../../../utils/tree'
+import { findParentFromId } from '../../../utils/tree'
 
 const { context } = useStudio()
 
 const currentItem = computed(() => context.activeTree.value.currentItem.value)
 const tree = computed(() => context.activeTree.value.root.value)
 
 const items = computed<BreadcrumbItem[]>(() => {
-  const rootItem = {
+  const rootTreeItem = context.activeTree.value.rootItem.value
+  const rootBreadcrumbItem = {
     icon: 'i-lucide-folder-git',
+    label: rootTreeItem.name,
     onClick: () => {
       // TODO: update for ROOT_DOCUMENT_ITEM and ROOT_MEDIA_ITEM
-      context.activeTree.value.select(ROOT_ITEM)
+      context.activeTree.value.select(rootTreeItem)
     },
   }
 
-  if (currentItem.value.id === ROOT_ITEM.id) {
-    return [rootItem]
+  if (currentItem.value.id === rootTreeItem.id) {
+    return [rootBreadcrumbItem]
   }
 
   const breadcrumbItems: BreadcrumbItem[] = []
@@ -39,7 +41,7 @@ const items = computed<BreadcrumbItem[]>(() => {
     currentTreeItem = findParentFromId(tree.value, currentTreeItem.id)
   }
 
-  const allItems = [rootItem, ...breadcrumbItems]
+  const allItems = [rootBreadcrumbItem, ...breadcrumbItems]
 
   // Handle ellipsis dropdown
   if (allItems.length > 3) {

src/app/src/composables/useDraftMedias.ts

@@ -8,6 +8,7 @@ import type { useGit } from './useGit'
 import { getDraftStatus } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
+import { TreeRootId } from '../utils/tree'
 
 const storage = createStorage({
   driver: indexedDbDriver({
@@ -267,12 +268,12 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     const fsPath = directory && directory !== '/' ? joinURL(directory, file.name) : file.name
 
     return {
-      id: `public-assets/${fsPath}`,
+      id: `${TreeRootId.Media}/${fsPath}`,
       fsPath,
       githubFile: undefined,
       status: DraftStatus.Created,
       modified: {
-        id: `public-assets/${fsPath}`,
+        id: `${TreeRootId.Media}/${fsPath}`,
         fsPath,
         extension: fsPath.split('.').pop()!,
         stem: fsPath.split('.').join('.'),

src/app/src/composables/useTree.ts

@@ -2,19 +2,28 @@ import { StudioFeature, type StudioHost, type TreeItem } from '../types'
 import { ref, computed } from 'vue'
 import type { useDraftDocuments } from './useDraftDocuments'
 import type { useDraftMedias } from './useDraftMedias'
-import { buildTree, findItemFromId, findItemFromRoute, ROOT_ITEM, findParentFromId } from '../utils/tree'
+import { buildTree, findItemFromId, findItemFromRoute, findParentFromId, TreeRootId } from '../utils/tree'
 import type { RouteLocationNormalized } from 'vue-router'
 import { useHooks } from './useHooks'
 import type { useUI } from './useUI'
 
 export const useTree = (type: StudioFeature, host: StudioHost, ui: ReturnType<typeof useUI>, draft: ReturnType<typeof useDraftDocuments | typeof useDraftMedias>) => {
   const hooks = useHooks()
 
+  const rootItem = computed<TreeItem>(() => {
+    return {
+      id: type === StudioFeature.Content ? TreeRootId.Content : TreeRootId.Media,
+      name: type === StudioFeature.Content ? 'content' : 'media',
+      type: 'root',
+      fsPath: '/',
+    } as TreeItem
+  })
+
   const tree = ref<TreeItem[]>([])
-  const currentItem = ref<TreeItem>(ROOT_ITEM)
+  const currentItem = ref<TreeItem>(rootItem.value)
 
   const currentTree = computed<TreeItem[]>(() => {
-    if (currentItem.value.id === ROOT_ITEM.id) {
+    if (currentItem.value.id === rootItem.value.id) {
       return tree.value
     }
 
@@ -31,15 +40,8 @@ export const useTree = (type: StudioFeature, host: StudioHost, ui: ReturnType<ty
     return subTree
   })
 
-  // const parentItem = computed<TreeItem | null>(() => {
-  //   if (currentItem.value.id === ROOT_ITEM.id) return null
-
-  //   const parent = findParentFromId(tree.value, currentItem.value.id)
-  //   return parent || ROOT_ITEM
-  // })
-
   async function select(item: TreeItem) {
-    currentItem.value = item || ROOT_ITEM
+    currentItem.value = item || rootItem.value
     if (item?.type === 'file') {
       if (type === StudioFeature.Content && ui.config.value.syncEditorAndRoute) {
         host.app.navigateTo(item.routePath!)
@@ -103,6 +105,7 @@ export const useTree = (type: StudioFeature, host: StudioHost, ui: ReturnType<ty
 
   return {
     root: tree,
+    rootItem,
     current: currentTree,
     currentItem,
     // parentItem,

src/app/src/pages/content.vue

@@ -25,7 +25,7 @@ const showFileForm = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div>
     <div class="flex items-center justify-between gap-2 px-4 py-1 border-b-[0.5px] border-default bg-muted/70">
       <ItemBreadcrumb />
       <ItemActionsToolbar />

src/app/src/pages/media.vue

@@ -12,6 +12,10 @@ const isFileCreationInProgress = computed(() => context.actionInProgress.value?.
 const isFolderCreationInProgress = computed(() => context.actionInProgress.value?.id === StudioItemActionId.CreateFolder)
 
 async function onFileDrop(event: DragEvent) {
+  if (mediaTree.draft.current.value) {
+    return
+  }
+
   if (event.dataTransfer?.files) {
     await context.itemActionHandler[StudioItemActionId.UploadMedia]({
       directory: mediaTree.currentItem.value.fsPath,
@@ -22,7 +26,11 @@ async function onFileDrop(event: DragEvent) {
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div
+    class="flex flex-col"
+    @drop.prevent.stop="onFileDrop"
+    @dragover.prevent.stop
+  >
     <div class="flex items-center justify-between gap-2 px-4 py-1 border-b-[0.5px] border-default bg-muted/70">
       <ItemBreadcrumb />
       <ItemActionsToolbar />
@@ -33,9 +41,7 @@ async function onFileDrop(event: DragEvent) {
     />
     <div
       v-else
-      class="flex flex-col p-4"
-      @drop.prevent.stop="onFileDrop"
-      @dragover.prevent.stop
+      class="flex flex-col p-4 min-h-[200px]"
     >
       <ItemTree
         v-if="folderTree?.length > 0 || isFolderCreationInProgress"

src/app/src/utils/context.ts

@@ -1,4 +1,5 @@
 import { type StudioAction, type TreeItem, TreeStatus, StudioItemActionId } from '../types'
+import { TreeRootId } from './tree'
 
 export const oneStepActions: StudioItemActionId[] = [StudioItemActionId.RevertItem, StudioItemActionId.DeleteItem, StudioItemActionId.DuplicateItem]
 export const twoStepActions: StudioItemActionId[] = [StudioItemActionId.CreateDocument, StudioItemActionId.CreateFolder, StudioItemActionId.RenameItem]
@@ -16,6 +17,12 @@ export const STUDIO_ITEM_ACTION_DEFINITIONS: StudioAction[] = [
     icon: 'i-lucide-file-plus',
     tooltip: 'Create a new file',
   },
+  {
+    id: StudioItemActionId.UploadMedia,
+    label: 'Upload media',
+    icon: 'i-lucide-upload',
+    tooltip: 'Upload media',
+  },
   {
     id: StudioItemActionId.CreateFolder,
     label: 'Create folder',
@@ -49,14 +56,18 @@ export function computeActionItems(itemActions: StudioAction[], item?: TreeItem
 
   const forbiddenActions: StudioItemActionId[] = []
 
-  if (item.type === 'root') {
-    return itemActions.filter(action => ![StudioItemActionId.RenameItem, StudioItemActionId.DeleteItem, StudioItemActionId.DuplicateItem].includes(action.id))
+  // Upload only available for medias
+  if (!item.id.startsWith(TreeRootId.Media)) {
+    forbiddenActions.push(StudioItemActionId.UploadMedia)
   }
 
   // Item type filtering
   switch (item.type) {
+    case 'root':
+      forbiddenActions.push(StudioItemActionId.RenameItem, StudioItemActionId.DeleteItem, StudioItemActionId.DuplicateItem)
+      break
     case 'file':
-      forbiddenActions.push(StudioItemActionId.CreateFolder, StudioItemActionId.CreateDocument)
+      forbiddenActions.push(StudioItemActionId.CreateFolder, StudioItemActionId.CreateDocument, StudioItemActionId.UploadMedia)
       break
     case 'directory':
       forbiddenActions.push(StudioItemActionId.DuplicateItem)

src/app/src/utils/draft.ts

@@ -1,7 +1,7 @@
 import { type DatabasePageItem, type DraftItem, type BaseItem, ContentFileExtension } from '../types'
 import { DraftStatus } from '../types'
-import { ROOT_ITEM } from './tree'
 import { isEqual } from './database'
+import { TreeRootId } from './tree'
 
 export function getDraftStatus(modified?: BaseItem, original?: BaseItem): DraftStatus {
   if (!modified && !original) {
@@ -31,7 +31,7 @@ export function getDraftStatus(modified?: BaseItem, original?: BaseItem): DraftS
 }
 
 export function findDescendantsFromId(list: DraftItem[], id: string): DraftItem[] {
-  if (id === ROOT_ITEM.id) {
+  if ([TreeRootId.Content, TreeRootId.Media].includes(id as TreeRootId)) {
     return list
   }
 

src/app/src/utils/tree.ts

@@ -5,7 +5,10 @@ import type { RouteLocationNormalized } from 'vue-router'
 import type { BaseItem } from '../types/item'
 import { isEqual } from './database'
 
-export const ROOT_ITEM: TreeItem = { id: 'root', name: 'content', fsPath: '/', type: 'root' }
+export enum TreeRootId {
+  Content = 'content',
+  Media = 'public-assets',
+}
 
 export const EXTENSIONS_WITH_PREVIEW = new Set([
   'jpg',
@@ -317,11 +320,13 @@ function calculateDirectoryStatuses(items: TreeItem[]) {
       const childrenWithStatus = item.children.filter(child => child.status && child.status !== TreeStatus.Opened)
 
       if (childrenWithStatus.length > 0) {
+        item.status = TreeStatus.Updated
+
         const allChildrenHaveStatus = childrenWithStatus.length === item.children.length
 
         if (allChildrenHaveStatus) {
           if (childrenWithStatus.every(child => child.status === TreeStatus.Deleted)) {
-            item.status = TreeStatus.Created
+            item.status = TreeStatus.Deleted
           }
           else if (childrenWithStatus.every(child => child.status === TreeStatus.Renamed)) {
             item.status = TreeStatus.Renamed
@@ -330,9 +335,6 @@ function calculateDirectoryStatuses(items: TreeItem[]) {
             item.status = TreeStatus.Created
           }
         }
-        else {
-          item.status = TreeStatus.Updated
-        }
       }
     }
   }

src/app/test/integration/composables/useDraftDocuments.test.ts

@@ -141,10 +141,6 @@ describe('useDraftDocuments - Action Chains Integration Tests', () => {
     const draftDocuments = useDraftDocuments(mockHost, mockGit as never)
     const { selectById, update, revert, list } = draftDocuments
 
-    const mockDocument = createMockDocument(documentId)
-    const fsPath = mockHost.document.getFileSystemPath(documentId)
-    await mockHost.document.create(fsPath, mockDocument.path, '')
-
     /*
       STEP 1: SELECT
     */
@@ -198,9 +194,7 @@ describe('useDraftDocuments - Action Chains Integration Tests', () => {
     const draftDocuments = useDraftDocuments(mockHost, mockGit as never)
     const { selectById, rename, update, list } = draftDocuments
 
-    const mockDocument = createMockDocument(documentId)
-    const fsPath = mockHost.document.getFileSystemPath(documentId)
-    const createdDocument = await mockHost.document.create(fsPath, mockDocument.path, '')
+    const createdDocument = createMockDocument(documentId)
 
     /*
       STEP 1: SELECT
@@ -220,12 +214,13 @@ describe('useDraftDocuments - Action Chains Integration Tests', () => {
       STEP 2: RENAME
     */
     const newId = generateUniqueDocumentId()
-    const renamedDraftItem = await rename(documentId, newId)
+    const newFsPath = mockHost.document.getFileSystemPath(newId)
+    await rename([{ id: documentId, newFsPath }])
 
     // Storage
     expect(mockStorage.size).toEqual(2)
 
-    const renamedDraftStorage = JSON.parse(mockStorage.get(normalizeKey(renamedDraftItem.id))!)
+    const renamedDraftStorage = JSON.parse(mockStorage.get(normalizeKey(newId))!)
     expect(renamedDraftStorage).toHaveProperty('status', DraftStatus.Created)
     expect(renamedDraftStorage).toHaveProperty('id', newId)
     expect(renamedDraftStorage).toHaveProperty('original', createdDocument)