feat(context): delete actions

src/app/src/App.vue

@@ -23,8 +23,8 @@ function detectActiveDocuments() {
   })
 }
 
-function onContentSelect(id: string) {
-  documentTree.selectItemById(id)
+async function onContentSelect(id: string) {
+  await documentTree.selectItemById(id)
   ui.openPanel(StudioFeature.Content)
 }
 
@@ -70,7 +70,7 @@ host.on.mounted(() => {
           size="lg"
           variant="outline"
           label="Edit This Page"
-          class="shadow-lg"
+          class="shadow-lg bg-white hover:bg-gray-100"
           @click="onContentSelect(activeDocuments[0].id)"
         />
       </div>

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

@@ -27,22 +27,27 @@ const emit = defineEmits<{ close: [] }>()
 
 const titleMap = {
   [StudioItemActionId.RevertItem]: `Reverting ${name.value}`,
+  [StudioItemActionId.DeleteItem]: `Deleting ${name.value}`,
 } as Record<StudioItemActionId, string>
 
 const descriptionMap = {
   [StudioItemActionId.RevertItem]: `Are you sure you want to revert ${name.value} back to its original version?`,
+  [StudioItemActionId.DeleteItem]: `Are you sure you want to delete ${name.value}?`,
 } as Record<StudioItemActionId, string>
 
 const successLabelMap = {
   [StudioItemActionId.RevertItem]: 'Revert changes',
+  [StudioItemActionId.DeleteItem]: 'Delete',
 } as Record<StudioItemActionId, string>
 
 const successMessageMap = {
-  [StudioItemActionId.RevertItem]: 'Changes reverted successfully!',
+  [StudioItemActionId.RevertItem]: 'Revert successful!',
+  [StudioItemActionId.DeleteItem]: 'Deletion successful!',
 } as Record<StudioItemActionId, string>
 
 const errorMessageMap = {
   [StudioItemActionId.RevertItem]: 'Something went wrong while reverting your file.',
+  [StudioItemActionId.DeleteItem]: 'Something went wrong while deleting your file.',
 } as Record<StudioItemActionId, string>
 
 const handleConfirm = async () => {

src/app/src/composables/useContext.ts

@@ -7,6 +7,7 @@ import type { useDraftDocuments } from './useDraftDocuments'
 import { useModal } from './useModal'
 import type { useTree } from './useTree'
 import type { useDraftMedias } from './useDraftMedias'
+import { findDescendantsFileItemsFromId } from '../utils/tree'
 
 export const useContext = createSharedComposable((
   host: StudioHost,
@@ -58,15 +59,14 @@ export const useContext = createSharedComposable((
     [StudioItemActionId.CreateDocument]: async ({ fsPath, routePath, content }: CreateFileParams) => {
       const document = await host.document.create(fsPath, routePath, content)
       const draftItem = await draft.value.create(document)
-      tree.selectItemById(draftItem.id)
+      await tree.selectItemById(draftItem.id)
     },
     [StudioItemActionId.UploadMedia]: async ({ directory, files }: UploadMediaParams) => {
       for (const file of files) {
         await (draft.value as ReturnType<typeof useDraftMedias>).upload(directory, file)
       }
     },
     [StudioItemActionId.RevertItem]: async (id: string) => {
-      console.log('revert item', id)
       modal.openConfirmActionModal(id, StudioItemActionId.RevertItem, async () => {
         await draft.value.revert(id)
       })
@@ -75,7 +75,11 @@ export const useContext = createSharedComposable((
       alert(`rename file ${path} ${file.name}`)
     },
     [StudioItemActionId.DeleteItem]: async (id: string) => {
-      alert(`delete file ${id}`)
+      modal.openConfirmActionModal(id, StudioItemActionId.DeleteItem, async () => {
+        const ids: string[] = findDescendantsFileItemsFromId(tree.root.value, id).map(item => item.id)
+        await draft.value.remove(ids)
+        await tree.selectParentById(id)
+      })
     },
     [StudioItemActionId.DuplicateItem]: async (id: string) => {
       alert(`duplicate file ${id}`)

src/app/src/composables/useDraftDocuments.ts

@@ -88,56 +88,62 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     return existingItem
   }
 
-  async function remove(id: string) {
-    const item = await storage.getItem(id) as DraftItem<DatabaseItem>
-    const fsPath = host.document.getFileSystemPath(id)
-
-    if (item) {
-      if (item.status === DraftStatus.Deleted) return
+  async function remove(ids: string[]) {
+    for (const id of ids) {
+      const existingDraftItem = list.value.find(item => item.id === id)
+      const fsPath = host.document.getFileSystemPath(id)
+      const originalDbItem = await host.document.get(id)
 
       await storage.removeItem(id)
       await host.document.delete(id)
 
-      if (item.original) {
-        const deleteDraft: DraftItem<DatabaseItem> = {
+      let deleteDraftItem: DraftItem<DatabaseItem> | null = null
+      if (existingDraftItem) {
+        if (existingDraftItem.status === DraftStatus.Deleted) return
+
+        if (existingDraftItem.status === DraftStatus.Created) {
+          list.value = list.value.filter(item => item.id !== id)
+        }
+        else {
+          deleteDraftItem = {
+            id,
+            fsPath: existingDraftItem.fsPath,
+            status: DraftStatus.Deleted,
+            original: existingDraftItem.original,
+            githubFile: existingDraftItem.githubFile,
+          }
+
+          list.value = list.value.map(item => item.id === id ? deleteDraftItem! : item)
+        }
+      }
+      else {
+      // TODO: check if gh file has been updated
+        const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+
+        deleteDraftItem = {
           id,
-          fsPath: item.fsPath,
+          fsPath,
           status: DraftStatus.Deleted,
-          original: item.original,
-          githubFile: item.githubFile,
+          original: originalDbItem,
+          githubFile,
         }
 
-        await storage.setItem(id, deleteDraft)
-        await host.document.upsert(id, item.original!)
+        list.value.push(deleteDraftItem)
       }
-    }
-    else {
-      // Fetch github file before creating draft to detect non deployed changes
-      const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
-      const original = await host.document.get(id)
-
-      const deleteItem: DraftItem = {
-        id,
-        fsPath,
-        status: DraftStatus.Deleted,
-        original,
-        githubFile,
+
+      if (deleteDraftItem) {
+        await storage.setItem(id, deleteDraftItem)
       }
 
-      await storage.setItem(id, deleteItem)
+      host.app.requestRerender()
 
-      await host.document.delete(id)
+      await hooks.callHook('studio:draft:document:updated')
     }
-
-    list.value = list.value.filter(item => item.id !== id)
-    host.app.requestRerender()
   }
 
   async function revert(id: string) {
     const draftItems = findDescendantsFromId(list.value, id)
 
-    console.log('draftItems', draftItems)
-
     for (const draftItem of draftItems) {
       const existingItem = list.value.find(item => item.id === draftItem.id)
       if (!existingItem) {
@@ -206,6 +212,11 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
   }
 
   function select(draftItem: DraftItem<DatabaseItem> | null) {
+    // TODO: Handle editor with deleted file
+    if (draftItem?.status === DraftStatus.Deleted) {
+      return
+    }
+
     current.value = draftItem
   }
 

src/app/src/composables/useDraftMedias.ts

@@ -82,36 +82,38 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     return existingItem
   }
 
-  async function remove(id: string) {
-    const item = await storage.getItem(id) as DraftItem
-    const fsPath = host.media.getFileSystemPath(id)
+  async function remove(ids: string[]) {
+    for (const id of ids) {
+      const item = await storage.getItem(id) as DraftItem
+      const fsPath = host.media.getFileSystemPath(id)
 
-    if (item) {
-      if (item.status === DraftStatus.Deleted) return
+      if (item) {
+        if (item.status === DraftStatus.Deleted) return
 
-      await storage.removeItem(id)
-      await host.media.delete(id)
-    }
-    else {
+        await storage.removeItem(id)
+        await host.media.delete(id)
+      }
+      else {
       // Fetch github file before creating draft to detect non deployed changes
-      const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
-      const original = await host.media.get(id)
+        const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+        const original = await host.media.get(id)
+
+        const deleteItem: DraftItem = {
+          id,
+          fsPath,
+          status: DraftStatus.Deleted,
+          original,
+          githubFile,
+        }
 
-      const deleteItem: DraftItem = {
-        id,
-        fsPath,
-        status: DraftStatus.Deleted,
-        original,
-        githubFile,
-      }
+        await storage.setItem(id, deleteItem)
 
-      await storage.setItem(id, deleteItem)
+        await host.media.delete(id)
+      }
 
-      await host.media.delete(id)
+      list.value = list.value.filter(item => item.id !== id)
+      host.app.requestRerender()
     }
-
-    list.value = list.value.filter(item => item.id !== id)
-    host.app.requestRerender()
   }
 
   async function revert(id: string) {

src/app/src/composables/useStudio.ts

@@ -37,9 +37,9 @@ export const useStudio = createSharedComposable(() => {
     host.app.requestRerender()
     isReady.value = true
 
-    host.on.routeChange((to: RouteLocationNormalized, _from: RouteLocationNormalized) => {
+    host.on.routeChange(async (to: RouteLocationNormalized, _from: RouteLocationNormalized) => {
       if (ui.isPanelOpen.value && ui.config.value.syncEditorAndRoute) {
-        documentTree.selectByRoute(to)
+        await documentTree.selectByRoute(to)
       }
       // setTimeout(() => {
       //   host.document.detectActives()

src/app/src/composables/useTree.ts

@@ -2,7 +2,7 @@ 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 } from '../utils/tree'
+import { buildTree, findItemFromId, findItemFromRoute, ROOT_ITEM, findParentFromId } from '../utils/tree'
 import type { RouteLocationNormalized } from 'vue-router'
 import { useHooks } from './useHooks'
 
@@ -56,15 +56,22 @@ export const useTree = (type: StudioFeature, host: StudioHost, draft: ReturnType
 
     if (!item || item.id === currentItem.value.id) return
 
-    select(item)
+    await select(item)
   }
 
   async function selectItemById(id: string) {
     const treeItem = findItemFromId(tree.value, id)
 
     if (!treeItem || treeItem.id === currentItem.value.id) return
 
-    select(treeItem)
+    await select(treeItem)
+  }
+
+  async function selectParentById(id: string) {
+    const parent = findParentFromId(tree.value, id)
+    if (parent) {
+      await select(parent)
+    }
   }
 
   async function handleDraftUpdate() {
@@ -102,5 +109,6 @@ export const useTree = (type: StudioFeature, host: StudioHost, draft: ReturnType
     select,
     selectByRoute,
     selectItemById,
+    selectParentById,
   }
 }

src/app/src/utils/context.ts

@@ -36,18 +36,18 @@ export const STUDIO_ITEM_ACTION_DEFINITIONS: StudioAction[] = [
     icon: 'i-lucide-pencil',
     tooltip: 'Rename file',
   },
-  {
-    id: StudioItemActionId.DeleteItem,
-    label: 'Delete',
-    icon: 'i-lucide-trash',
-    tooltip: 'Delete file',
-  },
   {
     id: StudioItemActionId.DuplicateItem,
     label: 'Duplicate',
     icon: 'i-lucide-copy',
     tooltip: 'Duplicate file',
   },
+  {
+    id: StudioItemActionId.DeleteItem,
+    label: 'Delete',
+    icon: 'i-lucide-trash',
+    tooltip: 'Delete file',
+  },
 ] as const
 
 export function computeActionItems(itemActions: StudioAction[], item?: TreeItem | null): StudioAction[] {
@@ -93,6 +93,7 @@ export function computeActionItems(itemActions: StudioAction[], item?: TreeItem
 export function computeActionParams(action: StudioItemActionId, { item }: { item: TreeItem }): ActionHandlerParams[typeof action] {
   switch (action) {
     case StudioItemActionId.RevertItem:
+    case StudioItemActionId.DeleteItem:
       return item.id
     default:
       return {}

src/app/src/utils/draft.ts

@@ -13,7 +13,7 @@ export const COLOR_STATUS_MAP: { [key in DraftStatus]?: string } = {
 export const COLOR_UI_STATUS_MAP: { [key in DraftStatus]?: string } = {
   [DraftStatus.Created]: 'success',
   [DraftStatus.Updated]: 'warning',
-  [DraftStatus.Deleted]: 'danger',
+  [DraftStatus.Deleted]: 'error',
   [DraftStatus.Renamed]: 'info',
   [DraftStatus.Opened]: 'neutral',
 } as const