From fbcdeb94b93d5429653688836ba1c4fe147512e5 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Fri, 3 Oct 2025 18:47:04 +0200
Subject: [PATCH 1/2] feat(content): rename folders

---
 .../components/shared/item/ItemCardForm.vue   | 26 +++++++++++++------
 src/app/src/composables/useContext.ts         | 13 ++++++++--
 src/app/src/composables/useDraftDocuments.ts  | 26 +++++++++++--------
 src/app/src/composables/useDraftMedias.ts     |  2 +-
 src/app/src/utils/context.ts                  |  1 -
 src/app/src/utils/tree.ts                     | 19 +++++++++-----
 src/module/src/runtime/utils/content.ts       |  2 --
 7 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/src/app/src/components/shared/item/ItemCardForm.vue b/src/app/src/components/shared/item/ItemCardForm.vue
index 1a4181b5..a94d2d9f 100644
--- a/src/app/src/components/shared/item/ItemCardForm.vue
+++ b/src/app/src/components/shared/item/ItemCardForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, type PropType } from 'vue'
 import * as z from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui'
 import { type CreateFileParams, type CreateFolderParams, type RenameFileParams, type StudioAction, type TreeItem, ContentFileExtension } from '../../../types'
 import { joinURL, withLeadingSlash, withoutLeadingSlash } from 'ufo'
 import { contentFileExtensions } from '../../../utils/content'
@@ -35,14 +34,21 @@ const props = defineProps({
 })
 
 const originalName = computed(() => props.renamedItem?.name || '')
-const originalExtension = computed(() => props.renamedItem?.id.split('.').pop() as ContentFileExtension || ContentFileExtension.Markdown)
+const originalExtension = computed(() => {
+  const ext = props.renamedItem?.id.split('.').pop()
+  if (ext && contentFileExtensions.includes(ext as ContentFileExtension)) {
+    return ext as ContentFileExtension
+  }
+
+  return ContentFileExtension.Markdown
+})
 
 const schema = z.object({
   name: z.string()
     .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.enum(ContentFileExtension),
+  extension: z.optional(z.enum(ContentFileExtension)),
 })
 
 type Schema = z.output<typeof schema>
@@ -88,23 +94,27 @@ const tooltipText = computed(() => {
   }
 })
 
-function onSubmit(_event: FormSubmitEvent<Schema>) {
+function onSubmit() {
   let params: CreateFileParams | CreateFolderParams | RenameFileParams
+  const newFsPath = isFolderAction.value
+    ? joinURL(props.parentItem.fsPath, state.name)
+    : joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)
+
   switch (props.actionId) {
     case StudioItemActionId.CreateDocument:
       params = {
-        fsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)),
+        fsPath: withoutLeadingSlash(newFsPath),
         content: `# ${upperFirst(state.name)} file`,
       }
       break
     case StudioItemActionId.CreateFolder:
       params = {
-        fsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, state.name)),
+        fsPath: withoutLeadingSlash(newFsPath),
       }
       break
     case StudioItemActionId.RenameItem:
       params = {
-        newFsPath: withoutLeadingSlash(joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)),
+        newFsPath: withoutLeadingSlash(newFsPath),
         id: props.renamedItem.id,
       }
       break
@@ -126,7 +136,7 @@ function onSubmit(_event: FormSubmitEvent<Schema>) {
         class="hover:bg-white relative w-full min-w-0"
       >
         <div
-          v-if="!isFolderAction"
+          v-show="!isFolderAction"
           class="relative"
         >
           <div class="z-[-1] aspect-video rounded-lg bg-elevated" />
diff --git a/src/app/src/composables/useContext.ts b/src/app/src/composables/useContext.ts
index c0a2df18..1dd0fa3a 100644
--- a/src/app/src/composables/useContext.ts
+++ b/src/app/src/composables/useContext.ts
@@ -16,7 +16,7 @@ import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '
 import { useModal } from './useModal'
 import type { useTree } from './useTree'
 import { useRoute } from 'vue-router'
-import { findDescendantsFileItemsFromId } from '../utils/tree'
+import { findDescendantsFileItemsFromId, findItemFromId } from '../utils/tree'
 import type { useDraftMedias } from './useDraftMedias'
 import { joinURL } from 'ufo'
 import { upperFirst } from 'scule'
@@ -109,7 +109,16 @@ export const useContext = createSharedComposable((
     },
     [StudioItemActionId.RenameItem]: async (params: TreeItem | RenameFileParams) => {
       const { id, newFsPath } = params as RenameFileParams
-      await activeTree.value.draft.rename(id, newFsPath)
+
+      const descendants = findDescendantsFileItemsFromId(activeTree.value.root.value, id)
+      if (descendants.length > 0) {
+        const parent = findItemFromId(activeTree.value.root.value, id)!
+        const itemsToRename = descendants.map(item => ({ id: item.id, newFsPath: item.fsPath.replace(parent.fsPath, newFsPath) }))
+        await activeTree.value.draft.rename(itemsToRename)
+      }
+      else {
+        await activeTree.value.draft.rename([{ id, newFsPath }])
+      }
     },
     [StudioItemActionId.DeleteItem]: async (item: TreeItem) => {
       modal.openConfirmActionModal(item.id, StudioItemActionId.DeleteItem, async () => {
diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index 9129a498..91eac60e 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -171,20 +171,24 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     host.app.requestRerender()
   }
 
-  async function rename(id: string, newFsPath: string) {
-    const currentDbItem: DatabaseItem = await host.document.get(id)
-    if (!currentDbItem) {
-      throw new Error(`Database item not found for document ${id}`)
-    }
+  async function rename(items: { id: string, newFsPath: string }[]) {
+    for (const item of items) {
+      const { id, newFsPath } = item
 
-    const content = await generateContentFromDocument(currentDbItem)
+      const currentDbItem: DatabaseItem = await host.document.get(id)
+      if (!currentDbItem) {
+        throw new Error(`Database item not found for document ${id}`)
+      }
+
+      const content = await generateContentFromDocument(currentDbItem)
 
-    // Delete renamed draft item
-    await remove([id])
+      // Delete renamed draft item
+      await remove([id])
 
-    // Create new draft item
-    const newDbItem = await host.document.create(newFsPath, content!)
-    return await create(newDbItem, currentDbItem)
+      // Create new draft item
+      const newDbItem = await host.document.create(newFsPath, content!)
+      await create(newDbItem, currentDbItem)
+    }
   }
 
   async function duplicate(id: string): Promise<DraftItem<DatabaseItem>> {
diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index be40150c..88085ede 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -153,7 +153,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
   //   host.app.requestRerender()
   // }
 
-  async function rename(_id: string, _newFsPath: string) {
+  async function rename(_items: { id: string, newFsPath: string }[]) {
     // let currentDbItem: MediaItem = await host.document.get(id)
     // if (!currentDbItem) {
     //   throw new Error(`Database item not found for document ${id}`)
diff --git a/src/app/src/utils/context.ts b/src/app/src/utils/context.ts
index 2dbb9da6..94ba0b5e 100644
--- a/src/app/src/utils/context.ts
+++ b/src/app/src/utils/context.ts
@@ -72,7 +72,6 @@ export function computeActionItems(itemActions: StudioAction[], item?: TreeItem
       forbiddenActions.push(StudioItemActionId.DuplicateItem, StudioItemActionId.RenameItem, StudioItemActionId.DeleteItem)
       break
     case TreeStatus.Renamed:
-      forbiddenActions.push(StudioItemActionId.RenameItem)
       break
     default:
       forbiddenActions.push(StudioItemActionId.RevertItem)
diff --git a/src/app/src/utils/tree.ts b/src/app/src/utils/tree.ts
index 5fc9bc92..60cc4c50 100644
--- a/src/app/src/utils/tree.ts
+++ b/src/app/src/utils/tree.ts
@@ -317,15 +317,20 @@ function calculateDirectoryStatuses(items: TreeItem[]) {
       const childrenWithStatus = item.children.filter(child => child.status && child.status !== TreeStatus.Opened)
 
       if (childrenWithStatus.length > 0) {
-        // Check if ALL children with status are deleted
-        const allDeleted = childrenWithStatus.every(child => child.status === TreeStatus.Deleted)
-
-        if (allDeleted && childrenWithStatus.length === item.children.length) {
-          // If all children are deleted, mark directory as deleted
-          item.status = TreeStatus.Deleted
+        const allChildrenHaveStatus = childrenWithStatus.length === item.children.length
+
+        if (allChildrenHaveStatus) {
+          if (childrenWithStatus.every(child => child.status === TreeStatus.Deleted)) {
+            item.status = TreeStatus.Created
+          }
+          else if (childrenWithStatus.every(child => child.status === TreeStatus.Renamed)) {
+            item.status = TreeStatus.Renamed
+          }
+          else if (childrenWithStatus.every(child => child.status === TreeStatus.Created)) {
+            item.status = TreeStatus.Created
+          }
         }
         else {
-          // Otherwise, mark as updated
           item.status = TreeStatus.Updated
         }
       }
diff --git a/src/module/src/runtime/utils/content.ts b/src/module/src/runtime/utils/content.ts
index 1df0de3b..5576751f 100644
--- a/src/module/src/runtime/utils/content.ts
+++ b/src/module/src/runtime/utils/content.ts
@@ -111,8 +111,6 @@ async function generateDocumentFromMarkdownContent(id: string, content: string):
     },
   })
 
-  console.log('document =>', document)
-
   // Remove nofollow from links
   visit(document.body, (node: Node) => (node as MDCElement).type === 'element' && (node as MDCElement).tag === 'a', (node: Node) => {
     if ((node as MDCElement).props?.rel?.join(' ') === 'nofollow') {

From 1ba1c7093d5ca38ebca0e122850c87b9d3bd489e Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Mon, 6 Oct 2025 17:02:15 +0200
Subject: [PATCH 2/2] up

---
 src/app/src/components/AppFooter.vue          |   2 +-
 .../components/shared/item/ItemBreadcrumb.vue |  14 +-
 src/app/src/composables/useDraftMedias.ts     |   5 +-
 src/app/src/composables/useTree.ts            |  25 +--
 src/app/src/pages/content.vue                 |   2 +-
 src/app/src/pages/media.vue                   |  14 +-
 src/app/src/utils/context.ts                  |  17 +-
 src/app/src/utils/draft.ts                    |   4 +-
 src/app/src/utils/tree.ts                     |  12 +-
 .../composables/useDraftDocuments.test.ts     |  13 +-
 src/app/test/mocks/host.ts                    |  11 +-
 src/app/test/unit/utils/context.test.ts       | 158 ++++++++++--------
 src/app/test/unit/utils/draft.test.ts         |   4 +-
 src/app/test/unit/utils/tree.test.ts          |  19 ++-
 14 files changed, 169 insertions(+), 131 deletions(-)

diff --git a/src/app/src/components/AppFooter.vue b/src/app/src/components/AppFooter.vue
index cb87f42e..6ffd5073 100644
--- a/src/app/src/components/AppFooter.vue
+++ b/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' }"
           />
diff --git a/src/app/src/components/shared/item/ItemBreadcrumb.vue b/src/app/src/components/shared/item/ItemBreadcrumb.vue
index fdca8ee8..3daff580 100644
--- a/src/app/src/components/shared/item/ItemBreadcrumb.vue
+++ b/src/app/src/components/shared/item/ItemBreadcrumb.vue
@@ -4,7 +4,7 @@ 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()
 
@@ -12,16 +12,18 @@ 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) {
diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index 88085ede..e27a5e4f 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/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('.'),
diff --git a/src/app/src/composables/useTree.ts b/src/app/src/composables/useTree.ts
index 49141031..d2fad875 100644
--- a/src/app/src/composables/useTree.ts
+++ b/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, 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'
@@ -10,11 +10,20 @@ 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,
diff --git a/src/app/src/pages/content.vue b/src/app/src/pages/content.vue
index 7526d0b8..699aff80 100644
--- a/src/app/src/pages/content.vue
+++ b/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 />
diff --git a/src/app/src/pages/media.vue b/src/app/src/pages/media.vue
index 9135d149..53ba5be2 100644
--- a/src/app/src/pages/media.vue
+++ b/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"
diff --git a/src/app/src/utils/context.ts b/src/app/src/utils/context.ts
index 94ba0b5e..b3d46245 100644
--- a/src/app/src/utils/context.ts
+++ b/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)
diff --git a/src/app/src/utils/draft.ts b/src/app/src/utils/draft.ts
index 8528a8f0..731bd9c0 100644
--- a/src/app/src/utils/draft.ts
+++ b/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
   }
 
diff --git a/src/app/src/utils/tree.ts b/src/app/src/utils/tree.ts
index 60cc4c50..febeccf6 100644
--- a/src/app/src/utils/tree.ts
+++ b/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
-        }
       }
     }
   }
diff --git a/src/app/test/integration/composables/useDraftDocuments.test.ts b/src/app/test/integration/composables/useDraftDocuments.test.ts
index cec6e339..88bf4b43 100644
--- a/src/app/test/integration/composables/useDraftDocuments.test.ts
+++ b/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)
diff --git a/src/app/test/mocks/host.ts b/src/app/test/mocks/host.ts
index 5b40b5d8..238c2a8c 100644
--- a/src/app/test/mocks/host.ts
+++ b/src/app/test/mocks/host.ts
@@ -10,16 +10,9 @@ const getFileSystemPath = (id: string) => {
 export const createMockHost = (): StudioHost => ({
   document: {
     get: vi.fn().mockImplementation(async (id: string) => createMockDocument(id)),
-    create: vi.fn().mockImplementation(async (fsPath: string, routePath: string, content: string) => {
+    create: vi.fn().mockImplementation(async (fsPath: string, _content: string) => {
       const id = fsPath.startsWith('docs/') ? fsPath : `docs${fsPath}`
-      return createMockDocument(id, {
-        path: routePath,
-        stem: fsPath.split('/').pop()?.replace('.md', ''),
-        body: {
-          type: 'minimark',
-          value: [content || 'Test content'],
-        },
-      })
+      return createMockDocument(id)
     }),
     upsert: vi.fn().mockResolvedValue(undefined),
     delete: vi.fn().mockResolvedValue(undefined),
diff --git a/src/app/test/unit/utils/context.test.ts b/src/app/test/unit/utils/context.test.ts
index eacf37f7..074671a6 100644
--- a/src/app/test/unit/utils/context.test.ts
+++ b/src/app/test/unit/utils/context.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { computeActionItems, STUDIO_ITEM_ACTION_DEFINITIONS } from '../../../src/utils/context'
 import { StudioItemActionId, type TreeItem } from '../../../src/types'
 import { TreeStatus } from '../../../src/types'
+import { TreeRootId } from '../../../src/utils/tree'
 
 describe('computeActionItems', () => {
   it('should return all actions when item is undefined', () => {
@@ -12,51 +13,68 @@ describe('computeActionItems', () => {
   /**************************************************
    ******************* Root items *******************
    **************************************************/
-  it('should filter out actions for root items', () => {
+  it('should filter out actions for content root items', () => {
     const rootItem: TreeItem = {
+      id: TreeRootId.Content,
       type: 'root',
       name: 'content',
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, rootItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.RenameItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.DeleteItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.DuplicateItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.RenameItem
       && action.id !== StudioItemActionId.DeleteItem
-      && action.id !== StudioItemActionId.DuplicateItem,
+      && action.id !== StudioItemActionId.DuplicateItem
+      && action.id !== StudioItemActionId.UploadMedia
+      && action.id !== StudioItemActionId.RevertItem,
+    )
+    expect(result).toEqual(expectedActions)
+  })
+
+  it('should filter out actions for media root items', () => {
+    const rootItem: TreeItem = {
+      id: TreeRootId.Media,
+      type: 'root',
+      name: 'media',
+    } as TreeItem
+
+    const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, rootItem)
+
+    const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
+      action.id !== StudioItemActionId.RevertItem
+      && action.id !== StudioItemActionId.DeleteItem
+      && action.id !== StudioItemActionId.DuplicateItem
+      && action.id !== StudioItemActionId.RenameItem,
     )
+
     expect(result).toEqual(expectedActions)
   })
 
   /**************************************************
    ******************* File items *******************
    **************************************************/
-  it('should filter out actions for file items without draft status', () => {
+  it('should filter out actions for content file items without draft status', () => {
     const fileItem: TreeItem = {
+      id: 'docs/test.md',
       type: 'file',
       name: 'test.md',
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.CreateFolder)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.CreateDocument)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.RevertItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.CreateFolder
       && action.id !== StudioItemActionId.CreateDocument
-      && action.id !== StudioItemActionId.RevertItem,
+      && action.id !== StudioItemActionId.RevertItem
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for file items with draft OPENED status', () => {
+  it('should filter out actions for content file items with draft OPENED status', () => {
     const fileItem: TreeItem = {
+      id: 'docs/test.md',
       type: 'file',
       name: 'test.md',
       status: TreeStatus.Opened,
@@ -64,20 +82,18 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.CreateFolder)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.CreateDocument)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.RevertItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.CreateFolder
       && action.id !== StudioItemActionId.CreateDocument
-      && action.id !== StudioItemActionId.RevertItem,
+      && action.id !== StudioItemActionId.RevertItem
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for file items with draft UPDATED status', () => {
+  it('should filter out actions for content file items with draft UPDATED status', () => {
     const fileItem: TreeItem = {
+      id: 'docs/test.md',
       type: 'file',
       name: 'test.md',
       status: TreeStatus.Updated,
@@ -85,18 +101,17 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.CreateFolder)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.CreateDocument)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.CreateFolder
-      && action.id !== StudioItemActionId.CreateDocument,
+      && action.id !== StudioItemActionId.CreateDocument
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for file items with draft CREATED status', () => {
+  it('should filter out actions for content file items with draft CREATED status', () => {
     const fileItem: TreeItem = {
+      id: 'docs/test.md',
       type: 'file',
       name: 'test.md',
       status: TreeStatus.Created,
@@ -104,18 +119,17 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.CreateFolder)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.CreateDocument)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.CreateFolder
-      && action.id !== StudioItemActionId.CreateDocument,
+      && action.id !== StudioItemActionId.CreateDocument
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for file items with draft DELETED status', () => {
+  it('should filter out actions for content file items with draft DELETED status', () => {
     const fileItem: TreeItem = {
+      id: 'docs/test.md',
       type: 'file',
       name: 'test.md',
       status: TreeStatus.Deleted,
@@ -123,24 +137,20 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.CreateFolder)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.CreateDocument)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.DuplicateItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.RenameItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.DeleteItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.CreateFolder
       && action.id !== StudioItemActionId.CreateDocument
       && action.id !== StudioItemActionId.DuplicateItem
       && action.id !== StudioItemActionId.RenameItem
-      && action.id !== StudioItemActionId.DeleteItem,
+      && action.id !== StudioItemActionId.DeleteItem
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for file items with draft RENAMED status', () => {
+  it('should filter out actions for content file items with draft RENAMED status', () => {
     const fileItem: TreeItem = {
+      id: 'docs/test.md',
       type: 'file',
       name: 'test.md',
       status: TreeStatus.Renamed,
@@ -148,14 +158,10 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.CreateFolder)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.CreateDocument)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.RenameItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.CreateFolder
       && action.id !== StudioItemActionId.CreateDocument
-      && action.id !== StudioItemActionId.RenameItem,
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
@@ -164,26 +170,27 @@ describe('computeActionItems', () => {
    ****************** Directory items ***************
    **************************************************/
 
-  it('should filter out actions for directory items without draft status', () => {
+  it('should filter out actions for content directory items without draft status', () => {
     const directoryItem: TreeItem = {
+      id: 'docs/folder',
       type: 'directory',
       name: 'folder',
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.DuplicateItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.RevertItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.DuplicateItem
-      && action.id !== StudioItemActionId.RevertItem,
+      && action.id !== StudioItemActionId.RevertItem
+      && action.id !== StudioItemActionId.UploadMedia,
     )
+
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for directory items with draft OPENED status', () => {
+  it('should filter out actions for content directory items with draft OPENED status', () => {
     const directoryItem: TreeItem = {
+      id: 'docs/folder',
       type: 'directory',
       name: 'folder',
       status: TreeStatus.Opened,
@@ -191,18 +198,17 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.DuplicateItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.RevertItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.DuplicateItem
-      && action.id !== StudioItemActionId.RevertItem,
+      && action.id !== StudioItemActionId.RevertItem
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for directory items with draft UPDATED status', () => {
+  it('should filter out actions for content directory items with draft UPDATED status', () => {
     const directoryItem: TreeItem = {
+      id: 'docs/folder',
       type: 'directory',
       name: 'folder',
       status: TreeStatus.Updated,
@@ -210,16 +216,16 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.DuplicateItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
-      action.id !== StudioItemActionId.DuplicateItem,
+      action.id !== StudioItemActionId.DuplicateItem
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for directory items with draft CREATED status', () => {
+  it('should filter out actions for content directory items with draft CREATED status', () => {
     const directoryItem: TreeItem = {
+      id: 'docs/folder',
       type: 'directory',
       name: 'folder',
       status: TreeStatus.Created,
@@ -227,16 +233,16 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.DuplicateItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
-      action.id !== StudioItemActionId.DuplicateItem,
+      action.id !== StudioItemActionId.DuplicateItem
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for directory items with draft DELETED status', () => {
+  it('should filter out actions for content directory items with draft DELETED status', () => {
     const directoryItem: TreeItem = {
+      id: 'docs/folder',
       type: 'directory',
       name: 'folder',
       status: TreeStatus.Deleted,
@@ -244,20 +250,18 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.DuplicateItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.RenameItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.DeleteItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.DuplicateItem
       && action.id !== StudioItemActionId.RenameItem
-      && action.id !== StudioItemActionId.DeleteItem,
+      && action.id !== StudioItemActionId.DeleteItem
+      && action.id !== StudioItemActionId.UploadMedia,
     )
     expect(result).toEqual(expectedActions)
   })
 
-  it('should filter out actions for directory items with draft RENAMED status', () => {
+  it('should filter out actions for content directory items with draft RENAMED status', () => {
     const directoryItem: TreeItem = {
+      id: 'docs/folder',
       type: 'directory',
       name: 'folder',
       status: TreeStatus.Renamed,
@@ -265,12 +269,24 @@ describe('computeActionItems', () => {
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
 
-    expect(result.find(action => action.id === StudioItemActionId.DuplicateItem)).toBeUndefined()
-    expect(result.find(action => action.id === StudioItemActionId.RenameItem)).toBeUndefined()
-
     const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
       action.id !== StudioItemActionId.DuplicateItem
-      && action.id !== StudioItemActionId.RenameItem,
+      && action.id !== StudioItemActionId.UploadMedia,
+    )
+    expect(result).toEqual(expectedActions)
+  })
+
+  it('should filter out actions for media directory items', () => {
+    const directoryItem: TreeItem = {
+      id: `${TreeRootId.Media}/folder`,
+      type: 'directory',
+    } as TreeItem
+
+    const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
+
+    const expectedActions = STUDIO_ITEM_ACTION_DEFINITIONS.filter(action =>
+      action.id !== StudioItemActionId.RevertItem
+      && action.id !== StudioItemActionId.DuplicateItem,
     )
     expect(result).toEqual(expectedActions)
   })
diff --git a/src/app/test/unit/utils/draft.test.ts b/src/app/test/unit/utils/draft.test.ts
index 86ea0265..796b93c7 100644
--- a/src/app/test/unit/utils/draft.test.ts
+++ b/src/app/test/unit/utils/draft.test.ts
@@ -2,8 +2,8 @@ import { describe, it, expect } from 'vitest'
 import { findDescendantsFromId, getDraftStatus } from '../../../src/utils/draft'
 import { draftItemsList } from '../../../test/mocks/draft'
 import { dbItemsList } from '../../../test/mocks/database'
-import { ROOT_ITEM } from '../../../src/utils/tree'
 import { DraftStatus } from '../../../src/types'
+import { TreeRootId } from '../../../src/utils/tree'
 
 describe('findDescendantsFromId', () => {
   it('returns exact match for a root level file', () => {
@@ -40,7 +40,7 @@ describe('findDescendantsFromId', () => {
   })
 
   it('returns all descendants for root item', () => {
-    const descendants = findDescendantsFromId(draftItemsList, ROOT_ITEM.id)
+    const descendants = findDescendantsFromId(draftItemsList, TreeRootId.Content)
 
     expect(descendants).toHaveLength(draftItemsList.length)
   })
diff --git a/src/app/test/unit/utils/tree.test.ts b/src/app/test/unit/utils/tree.test.ts
index c20cb58b..354a60fe 100644
--- a/src/app/test/unit/utils/tree.test.ts
+++ b/src/app/test/unit/utils/tree.test.ts
@@ -249,7 +249,13 @@ describe('buildTree with one level of depth', () => {
 
   it('With same id DELETED and CREATED draft file resulting in RENAMED', () => {
     const deletedDbItem: DatabaseItem & { fsPath: string } = dbItemsList[1] // 2.introduction.md
-    const createdDbItem: DatabaseItem & { fsPath: string } = dbItemsList[2] // 3.installation.md
+    const createdDbItem: DatabaseItem & { fsPath: string } = {
+      ...dbItemsList[1],
+      id: 'docs/1.getting-started/2.renamed.md',
+      path: '/getting-started/renamed',
+      stem: '1.getting-started/2.renamed',
+      fsPath: '1.getting-started/2.renamed.md',
+    }
 
     const draftList: DraftItem[] = [{
       id: deletedDbItem.id,
@@ -265,9 +271,11 @@ describe('buildTree with one level of depth', () => {
       original: deletedDbItem,
     }]
 
-    const dbItemsListWithoutDeletedDbItem = dbItemsList.filter(item => item.id !== deletedDbItem.id)
+    // Remove deleted item and replace with created item
+    const dbItemsWithoutDeletedWithCreated = dbItemsList.filter(item => item.id !== deletedDbItem.id)
+    dbItemsWithoutDeletedWithCreated.push(createdDbItem)
 
-    const tree = buildTree(dbItemsListWithoutDeletedDbItem, draftList)
+    const tree = buildTree(dbItemsWithoutDeletedWithCreated, draftList)
 
     expect(tree).toStrictEqual([
       result[0],
@@ -275,11 +283,12 @@ describe('buildTree with one level of depth', () => {
         ...result[1],
         status: TreeStatus.Updated,
         children: [
+          ...result[1].children!.slice(1),
           {
             id: createdDbItem.id,
             fsPath: createdDbItem.fsPath,
-            routePath: '/getting-started/installation',
-            name: 'installation',
+            routePath: createdDbItem.path,
+            name: createdDbItem.path!.split('/').pop()!,
             type: 'file',
             status: TreeStatus.Renamed,
           },