From caac3aa8ffff749eef6f3b7cc5297f3066b74698 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Mon, 29 Sep 2025 22:19:27 +0200
Subject: [PATCH 1/7] feat(context): duplicate and rename actions

---
 src/app/src/composables/useContext.ts        |  3 +-
 src/app/src/composables/useDraftDocuments.ts | 86 +++++++++++++++-----
 src/app/src/composables/useDraftMedias.ts    | 81 +++++++++++++++---
 src/app/src/utils/context.ts                 |  1 +
 src/app/src/utils/draft.ts                   |  1 +
 5 files changed, 136 insertions(+), 36 deletions(-)

diff --git a/src/app/src/composables/useContext.ts b/src/app/src/composables/useContext.ts
index 8ecdb21a..380ae022 100644
--- a/src/app/src/composables/useContext.ts
+++ b/src/app/src/composables/useContext.ts
@@ -82,7 +82,8 @@ export const useContext = createSharedComposable((
       })
     },
     [StudioItemActionId.DuplicateItem]: async (id: string) => {
-      alert(`duplicate file ${id}`)
+      const draftItem = await draft.value.duplicate(id)
+      await tree.selectItemById(draftItem.id)
     },
   }
 
diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index e768c1a4..db7b1ca8 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -8,6 +8,7 @@ import { generateContentFromDocument } from '../utils/content'
 import { getDraftStatus, findDescendantsFromId } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
+import { stripNumericPrefix } from '../utils/string'
 
 const storage = createStorage({
   driver: indexedDbDriver({
@@ -22,15 +23,15 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
 
   const hooks = useHooks()
 
-  async function get(id: string, { generateContent = false }: { generateContent?: boolean } = {}) {
-    const item = list.value.find(item => item.id === id)
-    if (item && generateContent) {
-      return {
-        ...item,
-        content: await generateContentFromDocument(item!.modified as DatabasePageItem) || '',
-      }
-    }
-    return item
+  async function get(id: string): Promise<DraftItem<DatabaseItem> | undefined> {
+    return list.value.find(item => item.id === id)
+    // if (item && generateContent) {
+    //   return {
+    //     ...item,
+    //     content: await generateContentFromDocument(item!.modified as DatabasePageItem) || '',
+    //   }
+    // }
+    // return item
   }
 
   async function create(document: DatabaseItem, status: DraftStatus = DraftStatus.Created) {
@@ -60,7 +61,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     return item
   }
 
-  async function update(id: string, document: DatabaseItem) {
+  async function update(id: string, document: DatabaseItem): Promise<DraftItem<DatabaseItem>> {
     const existingItem = list.value.find(item => item.id === id)
     if (!existingItem) {
       throw new Error(`Draft file not found for document ${id}`)
@@ -168,18 +169,58 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     host.app.requestRerender()
   }
 
-  async function revertAll() {
-    await storage.clear()
-    for (const item of list.value) {
-      if (item.original) {
-        await host.document.upsert(item.id, item.original)
-      }
-      else if (item.status === DraftStatus.Created) {
-        await host.document.delete(item.id)
-      }
+  async function rename(id: string, newNameWithExtension: string) {
+    let currentDbItem: DatabaseItem = await host.document.get(id)
+    if (!currentDbItem) {
+      throw new Error(`Database item not found for document ${id}`)
     }
-    list.value = []
-    host.app.requestRerender()
+
+    const currentDraftItem: DraftItem<DatabaseItem> | undefined = list.value.find(item => item.id === id)
+    if (currentDraftItem) {
+      currentDbItem = currentDraftItem.modified as DatabasePageItem
+    }
+
+    const newNameWithoutExtension = newNameWithExtension.split('.').slice(0, -1).join('.')
+    const newId = `${currentDbItem.id.split('/').slice(0, -1).join('/')}/${newNameWithExtension}`
+    const newPath = `${currentDbItem.path!.split('/').slice(0, -1).join('/')}/${newNameWithExtension}`
+    const newStem = `${currentDbItem.stem.split('/').slice(0, -1).join('/')}/${newNameWithoutExtension}`
+    const newExtension = newNameWithExtension.split('.').pop()!
+
+    const newDbItem: DatabaseItem = {
+      ...currentDbItem,
+      id: newId,
+      path: newPath,
+      stem: newStem,
+      extension: newExtension,
+    }
+
+    return await update(id, newDbItem)
+  }
+
+  async function duplicate(id: string): Promise<DraftItem<DatabaseItem>> {
+    let currentDbItem = await host.document.get(id)
+    if (!currentDbItem) {
+      throw new Error(`Database item not found for document ${id}`)
+    }
+
+    const currentDraftItem = list.value.find(item => item.id === id)
+    if (currentDraftItem) {
+      currentDbItem = currentDraftItem.modified!
+    }
+
+    const currentFsPath = currentDraftItem?.fsPath || host.document.getFileSystemPath(id)
+    const currentRoutePath = currentDbItem.path!
+    const currentContent = await generateContentFromDocument(currentDbItem) || ''
+    const currentName = currentFsPath.split('/').pop()!
+    const currentExtension = currentName.split('.').pop()!
+    const currentNameWithoutExtension = currentName.split('.').slice(0, -1).join('.')
+
+    const newFsPath = `${currentFsPath.split('/').slice(0, -1).join('/')}/${currentNameWithoutExtension}-copy.${currentExtension}`
+    const newRoutePath = `${currentRoutePath.split('/').slice(0, -1).join('/')}/${stripNumericPrefix(currentNameWithoutExtension)}-copy`
+
+    const newDbItem = await host.document.create(newFsPath, newRoutePath, currentContent)
+
+    return await create(newDbItem, DraftStatus.Created)
   }
 
   async function load() {
@@ -242,7 +283,8 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     update,
     remove,
     revert,
-    revertAll,
+    rename,
+    duplicate,
     list,
     load,
     current,
diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index da1b8090..393e6716 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -139,18 +139,72 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     host.app.requestRerender()
   }
 
-  async function revertAll() {
-    await storage.clear()
-    for (const item of list.value) {
-      if (item.original) {
-        await host.media.upsert(item.id, item.original)
-      }
-      else if (item.status === DraftStatus.Created) {
-        await host.media.delete(item.id)
-      }
-    }
-    list.value = []
-    host.app.requestRerender()
+  // async function revertAll() {
+  //   await storage.clear()
+  //   for (const item of list.value) {
+  //     if (item.original) {
+  //       await host.media.upsert(item.id, item.original)
+  //     }
+  //     else if (item.status === DraftStatus.Created) {
+  //       await host.media.delete(item.id)
+  //     }
+  //   }
+  //   list.value = []
+  //   host.app.requestRerender()
+  // }
+
+  async function rename(_id: string, _newNameWithExtension: string) {
+    // let currentDbItem: MediaItem = await host.document.get(id)
+    // if (!currentDbItem) {
+    //   throw new Error(`Database item not found for document ${id}`)
+    // }
+
+    // const currentDraftItem: DraftItem<MediaItem> | undefined = list.value.find(item => item.id === id)
+    // if (currentDraftItem) {
+    //   currentDbItem = currentDraftItem.modified as DatabasePageItem
+    // }
+
+    // const newNameWithoutExtension = newNameWithExtension.split('.').slice(0, -1).join('.')
+    // const newId = `${currentDbItem.id.split('/').slice(0, -1).join('/')}/${newNameWithExtension}`
+    // const newPath = `${currentDbItem.path!.split('/').slice(0, -1).join('/')}/${newNameWithExtension}`
+    // const newStem = `${currentDbItem.stem.split('/').slice(0, -1).join('/')}/${newNameWithoutExtension}`
+    // const newExtension = newNameWithExtension.split('.').pop()!
+
+    // const newDbItem = {
+    //   ...currentDbItem,
+    //   id: newId,
+    //   path: newPath,
+    //   stem: newStem,
+    //   extension: newExtension,
+    // }
+
+    // return await update(id, newDbItem)
+  }
+
+  async function duplicate(_id: string): Promise<DraftItem<MediaItem>> {
+    return { } as DraftItem<MediaItem>
+    // let currentDbItem = await host.media.get(id)
+    // if (!currentDbItem) {
+    //   throw new Error(`Database item not found for document ${id}`)
+    // }
+
+    // const currentDraftItem = list.value.find(item => item.id === id)
+    // if (currentDraftItem) {
+    //   currentDbItem = currentDraftItem.modified!
+    // }
+
+    // const currentFsPath = currentDraftItem?.fsPath || host.document.getFileSystemPath(id)
+    // const currentRoutePath = currentDbItem.path!
+    // const currentContent = ''
+    // const currentName = currentFsPath.split('/').pop()!
+    // const currentExtension = currentName.split('.').pop()!
+    // const currentNameWithoutExtension = currentName.split('.').slice(0, -1).join('.')
+
+    // const newFsPath = `${currentFsPath.split('/').slice(0, -1).join('/')}/${currentNameWithoutExtension}-copy.${currentExtension}`
+    // const newRoutePath = `${currentRoutePath.split('/').slice(0, -1).join('/')}/${currentNameWithoutExtension}-copy`
+
+    // const newDbItem = await host.media.create(newFsPath, newRoutePath, currentContent)
+    // return await create(newDbItem, DraftStatus.Created)
   }
 
   async function load() {
@@ -264,7 +318,8 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     update,
     remove,
     revert,
-    revertAll,
+    rename,
+    duplicate,
     list,
     load,
     current,
diff --git a/src/app/src/utils/context.ts b/src/app/src/utils/context.ts
index 60ea4199..6b6bf2e0 100644
--- a/src/app/src/utils/context.ts
+++ b/src/app/src/utils/context.ts
@@ -94,6 +94,7 @@ export function computeActionParams(action: StudioItemActionId, { item }: { item
   switch (action) {
     case StudioItemActionId.RevertItem:
     case StudioItemActionId.DeleteItem:
+    case StudioItemActionId.DuplicateItem:
       return item.id
     default:
       return {}
diff --git a/src/app/src/utils/draft.ts b/src/app/src/utils/draft.ts
index cd88e5a3..472a4d96 100644
--- a/src/app/src/utils/draft.ts
+++ b/src/app/src/utils/draft.ts
@@ -68,6 +68,7 @@ function isEqual(document1: DatabasePageItem, document2: DatabasePageItem) {
     if (document1.body?.type === 'minimark') {
       document1 = removeLastStyle(document1)
     }
+
     if (document2.body?.type === 'minimark') {
       document2 = removeLastStyle(document2)
     }

From 8af76e4b8281720ed60673a1790a563a5f5934f0 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Tue, 30 Sep 2025 15:37:33 +0200
Subject: [PATCH 2/7] up

---
 src/module/src/runtime/utils/content.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/module/src/runtime/utils/content.ts b/src/module/src/runtime/utils/content.ts
index 59af166b..5248c5a0 100644
--- a/src/module/src/runtime/utils/content.ts
+++ b/src/module/src/runtime/utils/content.ts
@@ -35,6 +35,7 @@ export async function generateDocumentFromContent(id: string, fsPath: string, ro
   // TODO expose document creation logic from content module and use it there
   const stem = generateStemFromFsPath(fsPath)
 
+  // TODO: minify parsed response
   const parsed = await parseMarkdown(content)
 
   return {

From d9556b9ff5026c407ff83548154616186120c52d Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Wed, 1 Oct 2025 15:34:46 +0200
Subject: [PATCH 3/7] up

---
 .../panel/base/PanelBaseBodyTree.vue          | 17 ++++++++++-----
 .../components/shared/item/ItemCardForm.vue   | 11 ++++++++--
 src/app/src/composables/useContext.ts         | 21 +++++++++++++------
 src/app/src/types/context.ts                  |  9 ++++++--
 src/app/src/utils/context.ts                  |  7 ++++++-
 5 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/app/src/components/panel/base/PanelBaseBodyTree.vue b/src/app/src/components/panel/base/PanelBaseBodyTree.vue
index 6a5a0a66..a15feedf 100644
--- a/src/app/src/components/panel/base/PanelBaseBodyTree.vue
+++ b/src/app/src/components/panel/base/PanelBaseBodyTree.vue
@@ -7,7 +7,7 @@ const { documentTree, mediaTree, context } = useStudio()
 
 const treeApi = computed(() => context.feature.value === StudioFeature.Content ? documentTree : mediaTree)
 
-defineProps({
+const props = defineProps({
   type: {
     type: String as PropType<'directory' | 'file'>,
     required: true,
@@ -16,11 +16,17 @@ defineProps({
     type: Array as PropType<TreeItem[]>,
     default: () => [],
   },
-  showCreationForm: {
+  showForm: {
     type: Boolean,
     default: false,
   },
 })
+
+const filteredTree = computed(() => {
+  if (!context.actionInProgress.value?.item) return props.tree
+
+  return props.tree.filter(item => item.id !== context.actionInProgress.value!.item?.id)
+})
 </script>
 
 <template>
@@ -29,14 +35,15 @@ defineProps({
       ref="container"
       class="grid grid-cols-1 @sm:grid-cols-2 @xl:grid-cols-3 @4xl:grid-cols-4 @7xl:grid-cols-6 gap-4"
     >
-      <li v-if="showCreationForm">
+      <li v-if="showForm">
         <ItemCardForm
           :parent-item="treeApi.currentItem.value"
-          :action-id="context.actionInProgress.value!"
+          :action-id="context.actionInProgress.value!.id"
+          :renamed-item="context.actionInProgress.value!.item"
         />
       </li>
       <li
-        v-for="(item, index) in tree"
+        v-for="(item, index) in filteredTree"
         :key="`${item.id}-${index}`"
       >
         <ItemCard
diff --git a/src/app/src/components/shared/item/ItemCardForm.vue b/src/app/src/components/shared/item/ItemCardForm.vue
index 6fc6c40d..c07f694b 100644
--- a/src/app/src/components/shared/item/ItemCardForm.vue
+++ b/src/app/src/components/shared/item/ItemCardForm.vue
@@ -21,8 +21,15 @@ const props = defineProps({
     type: Object as PropType<TreeItem>,
     required: true,
   },
+  renamedItem: {
+    type: Object as PropType<TreeItem>,
+    default: null,
+  },
 })
 
+const originalName = computed(() => props.renamedItem?.name || '')
+const originalExtension = computed(() => props.renamedItem?.id.split('.').pop() as ContentFileExtension || ContentFileExtension.Markdown)
+
 const schema = z.object({
   name: z.string()
     .min(1, 'Name cannot be empty')
@@ -33,8 +40,8 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 const state = reactive<Schema>({
-  name: '',
-  extension: ContentFileExtension.Markdown,
+  name: originalName.value,
+  extension: originalExtension.value,
 })
 
 const action = computed<StudioAction>(() => {
diff --git a/src/app/src/composables/useContext.ts b/src/app/src/composables/useContext.ts
index a0398557..e0086dbc 100644
--- a/src/app/src/composables/useContext.ts
+++ b/src/app/src/composables/useContext.ts
@@ -1,7 +1,16 @@
 import { createSharedComposable } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import type { useUi } from './useUi'
-import { type UploadMediaParams, type CreateFileParams, type StudioHost, type StudioAction, type TreeItem, StudioItemActionId, type ActionHandlerParams, StudioFeature } from '../types'
+import {
+  type StudioActionInProgress,
+  type UploadMediaParams,
+  type CreateFileParams,
+  type StudioHost,
+  type StudioAction,
+  type ActionHandlerParams,
+  StudioItemActionId,
+  StudioFeature,
+} from '../types'
 import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '../utils/context'
 import type { useDraftDocuments } from './useDraftDocuments'
 import { useModal } from './useModal'
@@ -18,7 +27,7 @@ export const useContext = createSharedComposable((
 ) => {
   const modal = useModal()
 
-  const actionInProgress = ref<StudioItemActionId | null>(null)
+  const actionInProgress = ref<StudioActionInProgress | null>(null)
   const currentFeature = computed<keyof typeof ui.panels | null>(() =>
     Object.keys(ui.panels).find(key => ui.panels[key as keyof typeof ui.panels]) as keyof typeof ui.panels,
   )
@@ -28,7 +37,7 @@ export const useContext = createSharedComposable((
     return STUDIO_ITEM_ACTION_DEFINITIONS.map(action => ({
       ...action,
       handler: async (args) => {
-        if (actionInProgress.value === action.id) {
+        if (actionInProgress.value?.id === action.id) {
           // Two steps actions need to be already in progress to be executed
           if (twoStepActions.includes(action.id)) {
             await itemActionHandler[action.id](args as never)
@@ -41,7 +50,7 @@ export const useContext = createSharedComposable((
           }
         }
 
-        actionInProgress.value = action.id
+        actionInProgress.value = { id: action.id, item: args.item }
 
         // One step actions can be executed immediately
         if (oneStepActions.includes(action.id)) {
@@ -71,8 +80,8 @@ export const useContext = createSharedComposable((
         await draft.value.revert(id)
       })
     },
-    [StudioItemActionId.RenameItem]: async ({ path, file }: { path: string, file: TreeItem }) => {
-      alert(`rename file ${path} ${file.name}`)
+    [StudioItemActionId.RenameItem]: async ({ id, newNameWithExtension }: { id: string, newNameWithExtension: string }) => {
+      alert(`rename file ${id} ${newNameWithExtension}`)
     },
     [StudioItemActionId.DeleteItem]: async (id: string) => {
       modal.openConfirmActionModal(id, StudioItemActionId.DeleteItem, async () => {
diff --git a/src/app/src/types/context.ts b/src/app/src/types/context.ts
index eb74ab21..37e6ead6 100644
--- a/src/app/src/types/context.ts
+++ b/src/app/src/types/context.ts
@@ -15,6 +15,11 @@ export enum StudioItemActionId {
   DuplicateItem = 'duplicate-item',
 }
 
+export interface StudioActionInProgress {
+  id: StudioItemActionId
+  item?: TreeItem
+}
+
 export interface StudioAction {
   id: StudioItemActionId
   label: string
@@ -30,8 +35,8 @@ export interface CreateFileParams {
 }
 
 export interface RenameFileParams {
-  path: string
-  file: TreeItem
+  id: string
+  newNameWithExtension: string
 }
 
 export interface UploadMediaParams {
diff --git a/src/app/src/utils/context.ts b/src/app/src/utils/context.ts
index 6b6bf2e0..e2951279 100644
--- a/src/app/src/utils/context.ts
+++ b/src/app/src/utils/context.ts
@@ -96,7 +96,12 @@ export function computeActionParams(action: StudioItemActionId, { item }: { item
     case StudioItemActionId.DeleteItem:
     case StudioItemActionId.DuplicateItem:
       return item.id
+    case StudioItemActionId.RenameItem:
+      return {
+        id: item.id,
+        item
+      }
     default:
-      return {}
+      return item.id
   }
 }

From 30322123ac417226d32a27a82770ad07aa8ee499 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Wed, 1 Oct 2025 22:48:37 +0200
Subject: [PATCH 4/7] up

---
 .../src/components/content/ContentEditor.vue  |   7 +-
 .../shared/item/ItemActionsDropdown.vue       |   4 +-
 .../shared/item/ItemActionsToolbar.vue        |   2 +-
 .../src/components/shared/item/ItemBadge.vue  |   6 +-
 .../components/shared/item/ItemBreadcrumb.vue |   5 +-
 .../src/components/shared/item/ItemCard.vue   |   6 +-
 .../components/shared/item/ItemCardForm.vue   |  32 +-
 .../src/components/shared/item/ItemTree.vue   |   2 +-
 src/app/src/composables/useContext.ts         |  53 +-
 src/app/src/composables/useDraftDocuments.ts  |  40 +-
 src/app/src/composables/useDraftMedias.ts     |  14 +-
 src/app/src/pages/content.vue                 |  29 +-
 src/app/src/pages/media.vue                   |   4 +-
 src/app/src/types/context.ts                  |  21 +-
 src/app/src/types/draft.ts                    |   1 -
 src/app/src/types/tree.ts                     |  10 +-
 src/app/src/utils/context.ts                  |  27 +-
 src/app/src/utils/database.ts                 |  53 ++
 src/app/src/utils/draft.ts                    |  68 +--
 src/app/src/utils/tree.ts                     |  66 ++-
 src/app/test/mocks/draft.ts                   | 131 +++++
 src/app/test/utils/context.test.ts            |  22 +-
 src/app/test/utils/draft.test.ts              |  45 +-
 src/app/test/utils/tree.test.ts               | 500 ++++++++++++------
 src/app/vite.config.ts                        |   2 +-
 25 files changed, 730 insertions(+), 420 deletions(-)
 create mode 100644 src/app/src/utils/database.ts

diff --git a/src/app/src/components/content/ContentEditor.vue b/src/app/src/components/content/ContentEditor.vue
index e8969108..093ae7af 100644
--- a/src/app/src/components/content/ContentEditor.vue
+++ b/src/app/src/components/content/ContentEditor.vue
@@ -2,7 +2,7 @@
 import { computed, type PropType, toRaw } from 'vue'
 import { decompressTree } from '@nuxt/content/runtime'
 import type { MarkdownRoot } from '@nuxt/content'
-import type { DatabasePageItem, DraftItem } from '../../types'
+import { DraftStatus, type DatabasePageItem, type DraftItem } from '../../types'
 import { useStudio } from '../../composables/useStudio'
 
 const props = defineProps({
@@ -25,10 +25,13 @@ const document = computed<DatabasePageItem>({
       return {} as DatabasePageItem
     }
 
+    if (props.draftItem.status === DraftStatus.Deleted) {
+      return props.draftItem.original 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.modified as DatabasePageItem,
diff --git a/src/app/src/components/shared/item/ItemActionsDropdown.vue b/src/app/src/components/shared/item/ItemActionsDropdown.vue
index 1d5baec1..00c8d929 100644
--- a/src/app/src/components/shared/item/ItemActionsDropdown.vue
+++ b/src/app/src/components/shared/item/ItemActionsDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computeActionItems, computeActionParams } from '../../../utils/context'
+import { computeActionItems } from '../../../utils/context'
 import { computed, type PropType } from 'vue'
 import type { TreeItem } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
@@ -17,7 +17,7 @@ const props = defineProps({
 const actions = computed<DropdownMenuItem[]>(() => {
   return computeActionItems(context.itemActions.value, props.item).map(action => ({
     ...action,
-    onSelect: () => action.handler?.(computeActionParams(action.id, { item: props.item })),
+    onSelect: () => action.handler!(props.item),
   }))
 })
 </script>
diff --git a/src/app/src/components/shared/item/ItemActionsToolbar.vue b/src/app/src/components/shared/item/ItemActionsToolbar.vue
index 413666a3..68dfbbaf 100644
--- a/src/app/src/components/shared/item/ItemActionsToolbar.vue
+++ b/src/app/src/components/shared/item/ItemActionsToolbar.vue
@@ -24,7 +24,7 @@ const actions = computed(() => {
         size="sm"
         color="neutral"
         variant="ghost"
-        @click="action.handler!(item.id)"
+        @click="action.handler!(item)"
       />
     </UTooltip>
   </div>
diff --git a/src/app/src/components/shared/item/ItemBadge.vue b/src/app/src/components/shared/item/ItemBadge.vue
index 91ee174d..def78a56 100644
--- a/src/app/src/components/shared/item/ItemBadge.vue
+++ b/src/app/src/components/shared/item/ItemBadge.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { COLOR_UI_STATUS_MAP } from '../../../utils/draft'
-import type { DraftStatus } from '../../../types/draft'
+import { COLOR_UI_STATUS_MAP } from '../../../utils/tree'
+import type { TreeStatus } from '../../../types'
 import type { PropType } from 'vue'
 
 defineProps({
   status: {
-    type: String as PropType<DraftStatus>,
+    type: String as PropType<TreeStatus>,
     required: true,
   },
 })
diff --git a/src/app/src/components/shared/item/ItemBreadcrumb.vue b/src/app/src/components/shared/item/ItemBreadcrumb.vue
index b61ec9f6..7a38e2e9 100644
--- a/src/app/src/components/shared/item/ItemBreadcrumb.vue
+++ b/src/app/src/components/shared/item/ItemBreadcrumb.vue
@@ -2,11 +2,10 @@
 import type { BreadcrumbItem } from '@nuxt/ui/components/Breadcrumb.vue.d.ts'
 import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue.d.ts'
 import { computed, unref } from 'vue'
-import type { TreeItem } from '../../../types'
+import { type TreeItem, TreeStatus } 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 { context } = useStudio()
 
@@ -87,7 +86,7 @@ const items = computed<BreadcrumbItem[]>(() => {
       </template>
     </UBreadcrumb>
     <ItemBadge
-      v-if="currentItem.status && currentItem.status !== DraftStatus.Opened"
+      v-if="currentItem.status && currentItem.status !== TreeStatus.Opened"
       :status="currentItem.status"
     />
   </div>
diff --git a/src/app/src/components/shared/item/ItemCard.vue b/src/app/src/components/shared/item/ItemCard.vue
index d36d5c10..690c96be 100644
--- a/src/app/src/components/shared/item/ItemCard.vue
+++ b/src/app/src/components/shared/item/ItemCard.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { TreeItem } from '../../../types'
+import { TreeStatus, type TreeItem } from '../../../types'
 import type { PropType } from 'vue'
 import { computed } from 'vue'
 import { Image } from '@unpic/vue'
 import { titleCase } from 'scule'
-import { COLOR_STATUS_MAP } from '../../../utils/draft'
+import { COLOR_STATUS_MAP } from '../../../utils/tree'
 
 const props = defineProps({
   item: {
@@ -90,7 +90,7 @@ const statusRingColor = computed(() => props.item.status ? `ring-${COLOR_STATUS_
             />
             <h3
               class="text-sm font-semibold truncate"
-              :class="props.item.status === 'deleted' && 'line-through'"
+              :class="props.item.status === TreeStatus.Deleted && 'line-through'"
             >
               {{ name }}
             </h3>
diff --git a/src/app/src/components/shared/item/ItemCardForm.vue b/src/app/src/components/shared/item/ItemCardForm.vue
index c07f694b..a40505cf 100644
--- a/src/app/src/components/shared/item/ItemCardForm.vue
+++ b/src/app/src/components/shared/item/ItemCardForm.vue
@@ -3,7 +3,7 @@ import { computed, reactive, type PropType } from 'vue'
 import { Image } from '@unpic/vue'
 import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
-import { type StudioAction, type TreeItem, ContentFileExtension } from '../../../types'
+import { type CreateFileParams, type CreateFolderParams, type RenameFileParams, type StudioAction, type TreeItem, ContentFileExtension } from '../../../types'
 import { joinURL, withLeadingSlash } from 'ufo'
 import { contentFileExtensions } from '../../../utils/content'
 import { useStudio } from '../../../composables/useStudio'
@@ -14,7 +14,7 @@ const { context } = useStudio()
 
 const props = defineProps({
   actionId: {
-    type: String as PropType<StudioItemActionId>,
+    type: String as PropType<StudioItemActionId.CreateDocument | StudioItemActionId.CreateFolder | StudioItemActionId.RenameItem>,
     required: true,
   },
   parentItem: {
@@ -76,11 +76,29 @@ const tooltipText = computed(() => {
 function onSubmit(_event: FormSubmitEvent<Schema>) {
   const fsPath = joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`)
 
-  action.value.handler!({
-    routePath: routePath.value,
-    fsPath,
-    content: `New ${state.name} file`,
-  })
+  let params: CreateFileParams | CreateFolderParams | RenameFileParams
+  switch (props.actionId) {
+    case StudioItemActionId.CreateDocument:
+      params = {
+        routePath: routePath.value,
+        fsPath,
+        content: `New ${state.name} file`,
+      }
+      break
+    case StudioItemActionId.CreateFolder:
+      params = {
+        fsPath,
+      }
+      break
+    case StudioItemActionId.RenameItem:
+      params = {
+        id: props.renamedItem.id,
+        newFsPath: joinURL(props.parentItem.fsPath, `${state.name}.${state.extension}`),
+      }
+      break
+  }
+
+  action.value.handler!(params)
 }
 </script>
 
diff --git a/src/app/src/components/shared/item/ItemTree.vue b/src/app/src/components/shared/item/ItemTree.vue
index da71b0b5..c5a5fb00 100644
--- a/src/app/src/components/shared/item/ItemTree.vue
+++ b/src/app/src/components/shared/item/ItemTree.vue
@@ -37,7 +37,7 @@ const filteredTree = computed(() => {
       <li v-if="showForm">
         <ItemCardForm
           :parent-item="context.activeTree.value.currentItem.value"
-          :action-id="context.actionInProgress.value!.id"
+          :action-id="context.actionInProgress.value!.id as never"
           :renamed-item="context.actionInProgress.value!.item"
         />
       </li>
diff --git a/src/app/src/composables/useContext.ts b/src/app/src/composables/useContext.ts
index c0718daa..c221a640 100644
--- a/src/app/src/composables/useContext.ts
+++ b/src/app/src/composables/useContext.ts
@@ -1,12 +1,15 @@
 import { createSharedComposable } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import {
+  type RenameFileParams,
+  type TreeItem,
   type UploadMediaParams,
   type CreateFileParams,
   type StudioHost,
   type StudioAction,
   type ActionHandlerParams,
   type StudioActionInProgress,
+  type CreateFolderParams,
   StudioItemActionId,
 } from '../types'
 import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '../utils/context'
@@ -33,13 +36,13 @@ export const useContext = createSharedComposable((
   })
 
   const itemActions = computed<StudioAction[]>(() => {
-    return STUDIO_ITEM_ACTION_DEFINITIONS.map(action => ({
+    return STUDIO_ITEM_ACTION_DEFINITIONS.map(<K extends StudioItemActionId>(action: StudioAction<K>) => ({
       ...action,
-      handler: async (args) => {
+      handler: async (args: ActionHandlerParams[K]) => {
+        // Two steps actions need to be already in progress to be executed
         if (actionInProgress.value?.id === action.id) {
-          // Two steps actions need to be already in progress to be executed
           if (twoStepActions.includes(action.id)) {
-            await itemActionHandler[action.id](args as never)
+            await itemActionHandler[action.id](args)
             unsetActionInProgress()
             return
           }
@@ -49,11 +52,19 @@ export const useContext = createSharedComposable((
           }
         }
 
-        actionInProgress.value = { id: action.id, item: args.item }
+        actionInProgress.value = { id: action.id }
+
+        if (action.id === StudioItemActionId.RenameItem) {
+          if (activeTree.value.currentItem.value) {
+            const itemToRename = args as TreeItem
+            await activeTree.value.selectParentById(itemToRename.id)
+            actionInProgress.value.item = itemToRename
+          }
+        }
 
         // One step actions can be executed immediately
         if (oneStepActions.includes(action.id)) {
-          await itemActionHandler[action.id](args as never)
+          await itemActionHandler[action.id](args)
           unsetActionInProgress()
         }
       },
@@ -61,10 +72,11 @@ export const useContext = createSharedComposable((
   })
 
   const itemActionHandler: { [K in StudioItemActionId]: (args: ActionHandlerParams[K]) => Promise<void> } = {
-    [StudioItemActionId.CreateFolder]: async (args: string) => {
-      alert(`create folder ${args}`)
+    [StudioItemActionId.CreateFolder]: async (params: CreateFolderParams) => {
+      alert(`create folder in ${params.fsPath}`)
     },
-    [StudioItemActionId.CreateDocument]: async ({ fsPath, routePath, content }: CreateFileParams) => {
+    [StudioItemActionId.CreateDocument]: async (params: CreateFileParams) => {
+      const { fsPath, routePath, content } = params
       const document = await host.document.create(fsPath, routePath, content)
       const draftItem = await activeTree.value.draft.create(document)
       await activeTree.value.selectItemById(draftItem.id)
@@ -74,23 +86,23 @@ export const useContext = createSharedComposable((
         await (activeTree.value.draft as ReturnType<typeof useDraftMedias>).upload(directory, file)
       }
     },
-    [StudioItemActionId.RevertItem]: async (id: string) => {
-      modal.openConfirmActionModal(id, StudioItemActionId.RevertItem, async () => {
-        await activeTree.value.draft.revert(id)
+    [StudioItemActionId.RevertItem]: async (item: TreeItem) => {
+      modal.openConfirmActionModal(item.id, StudioItemActionId.RevertItem, async () => {
+        await activeTree.value.draft.revert(item.id)
       })
     },
-    [StudioItemActionId.RenameItem]: async ({ id, newNameWithExtension }: { id: string, newNameWithExtension: string }) => {
-      alert(`rename file ${id} ${newNameWithExtension}`)
+    [StudioItemActionId.RenameItem]: async (params: TreeItem | RenameFileParams) => {
+      const { id, newFsPath } = params as RenameFileParams
+      await activeTree.value.draft.rename(id, newFsPath)
     },
-    [StudioItemActionId.DeleteItem]: async (id: string) => {
-      modal.openConfirmActionModal(id, StudioItemActionId.DeleteItem, async () => {
-        const ids: string[] = findDescendantsFileItemsFromId(activeTree.value.root.value, id).map(item => item.id)
+    [StudioItemActionId.DeleteItem]: async (item: TreeItem) => {
+      modal.openConfirmActionModal(item.id, StudioItemActionId.DeleteItem, async () => {
+        const ids: string[] = findDescendantsFileItemsFromId(activeTree.value.root.value, item.id).map(item => item.id)
         await activeTree.value.draft.remove(ids)
-        await activeTree.value.selectParentById(id)
       })
     },
-    [StudioItemActionId.DuplicateItem]: async (id: string) => {
-      const draftItem = await activeTree.value.draft.duplicate(id)
+    [StudioItemActionId.DuplicateItem]: async (item: TreeItem) => {
+      const draftItem = await activeTree.value.draft.duplicate(item.id)
       await activeTree.value.selectItemById(draftItem.id)
     },
   }
@@ -103,7 +115,6 @@ export const useContext = createSharedComposable((
     activeTree,
     itemActions,
     actionInProgress,
-
     unsetActionInProgress,
     itemActionHandler,
   }
diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index 88087ae5..5e1e688f 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -5,7 +5,7 @@ import type { DatabaseItem, DraftItem, StudioHost, GithubFile, DatabasePageItem,
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
 import { generateContentFromDocument } from '../utils/content'
-import { getDraftStatus, findDescendantsFromId } from '../utils/draft'
+import { findDescendantsFromId, getUpdatedDraftStatus } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
 import { stripNumericPrefix } from '../utils/string'
@@ -35,7 +35,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     // return item
   }
 
-  async function create(document: DatabaseItem, status: DraftStatus = DraftStatus.Created) {
+  async function create(document: DatabaseItem, status: DraftStatus = DraftStatus.Created, original?: DatabaseItem) {
     const existingItem = list.value.find(item => item.id === document.id)
     if (existingItem) {
       throw new Error(`Draft file already exists for document ${document.id}`)
@@ -47,7 +47,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     const item: DraftItem<DatabaseItem> = {
       id: document.id,
       fsPath,
-      original: document,
+      original: original || document,
       githubFile,
       status,
       modified: document,
@@ -69,7 +69,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     }
 
     const oldStatus = existingItem.status
-    existingItem.status = getDraftStatus(document, existingItem.original)
+    existingItem.status = getUpdatedDraftStatus(document, existingItem.original)
     existingItem.modified = document
 
     await storage.setItem(id, existingItem)
@@ -170,7 +170,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     host.app.requestRerender()
   }
 
-  async function rename(id: string, newNameWithExtension: string) {
+  async function rename(id: string, newFsPath: string) {
     let currentDbItem: DatabaseItem = await host.document.get(id)
     if (!currentDbItem) {
       throw new Error(`Database item not found for document ${id}`)
@@ -181,21 +181,16 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
       currentDbItem = currentDraftItem.modified as DatabasePageItem
     }
 
-    const newNameWithoutExtension = newNameWithExtension.split('.').slice(0, -1).join('.')
-    const newId = `${currentDbItem.id.split('/').slice(0, -1).join('/')}/${newNameWithExtension}`
-    const newPath = `${currentDbItem.path!.split('/').slice(0, -1).join('/')}/${newNameWithExtension}`
-    const newStem = `${currentDbItem.stem.split('/').slice(0, -1).join('/')}/${newNameWithoutExtension}`
-    const newExtension = newNameWithExtension.split('.').pop()!
-
-    const newDbItem: DatabaseItem = {
-      ...currentDbItem,
-      id: newId,
-      path: newPath,
-      stem: newStem,
-      extension: newExtension,
-    }
+    const nameWithoutExtension = newFsPath.split('/').pop()!.split('.').slice(0, -1).join('.')
+    const newRoutePath = `${currentDbItem.path!.split('/').slice(0, -1).join('/')}/${nameWithoutExtension}`
+    const content = await generateContentFromDocument(currentDbItem)
+
+    // Delete renamed draft item
+    await remove([id])
 
-    return await update(id, newDbItem)
+    // Create new draft item
+    const newDbItem = await host.document.create(newFsPath, newRoutePath, content!)
+    return await create(newDbItem, DraftStatus.Created, currentDbItem)
   }
 
   async function duplicate(id: string): Promise<DraftItem<DatabaseItem>> {
@@ -221,7 +216,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
 
     const newDbItem = await host.document.create(newFsPath, newRoutePath, currentContent)
 
-    return await create(newDbItem, DraftStatus.Created)
+    return await create(newDbItem)
   }
 
   async function load() {
@@ -254,11 +249,6 @@ 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
   }
 
diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index 752e7ece..d66cdce9 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -5,7 +5,7 @@ import { joinURL, withLeadingSlash } from 'ufo'
 import type { DraftItem, StudioHost, GithubFile, MediaItem, RawFile } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
-import { getDraftStatus } from '../utils/draft'
+import { getUpdatedDraftStatus } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
 
@@ -61,7 +61,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     }
 
     const oldStatus = existingItem.status
-    existingItem.status = getDraftStatus(media, existingItem.original)
+    existingItem.status = getUpdatedDraftStatus(media, existingItem.original)
     existingItem.modified = media
 
     await storage.setItem(id, existingItem)
@@ -153,7 +153,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
   //   host.app.requestRerender()
   // }
 
-  async function rename(_id: string, _newNameWithExtension: string) {
+  async function rename(_id: string, _newFsPath: string) {
     // let currentDbItem: MediaItem = await host.document.get(id)
     // if (!currentDbItem) {
     //   throw new Error(`Database item not found for document ${id}`)
@@ -164,11 +164,11 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     //   currentDbItem = currentDraftItem.modified as DatabasePageItem
     // }
 
-    // const newNameWithoutExtension = newNameWithExtension.split('.').slice(0, -1).join('.')
-    // const newId = `${currentDbItem.id.split('/').slice(0, -1).join('/')}/${newNameWithExtension}`
-    // const newPath = `${currentDbItem.path!.split('/').slice(0, -1).join('/')}/${newNameWithExtension}`
+    // const newNameWithoutExtension = newFsPath.split('.').slice(0, -1).join('.')
+    // const newId = `${currentDbItem.id.split('/').slice(0, -1).join('/')}/${newFsPath}`
+    // const newPath = `${currentDbItem.path!.split('/').slice(0, -1).join('/')}/${newFsPath}`
     // const newStem = `${currentDbItem.stem.split('/').slice(0, -1).join('/')}/${newNameWithoutExtension}`
-    // const newExtension = newNameWithExtension.split('.').pop()!
+    // const newExtension = newFsPath.split('.').pop()!
 
     // const newDbItem = {
     //   ...currentDbItem,
diff --git a/src/app/src/pages/content.vue b/src/app/src/pages/content.vue
index eeac4346..1836bcd5 100644
--- a/src/app/src/pages/content.vue
+++ b/src/app/src/pages/content.vue
@@ -1,15 +1,27 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useStudio } from '../composables/useStudio'
-import { StudioItemActionId } from '../types'
+import { StudioItemActionId, TreeStatus } from '../types'
 
 const { documentTree, context } = useStudio()
 
 const folderTree = computed(() => (documentTree.current.value || []).filter(f => f.type === 'directory'))
 const fileTree = computed(() => (documentTree.current.value || []).filter(f => f.type === 'file'))
 
-const isFileCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateDocument)
-const isFolderCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateFolder)
+const showFolderForm = computed(() => {
+  return context.actionInProgress.value?.id === StudioItemActionId.CreateFolder
+    || (
+      context.actionInProgress.value?.id === StudioItemActionId.RenameItem
+      && context.actionInProgress.value?.item?.type === 'directory'
+    )
+})
+
+const showFileForm = computed(() => {
+  return context.actionInProgress.value?.id === StudioItemActionId.CreateDocument
+    || (
+      context.actionInProgress.value?.id === StudioItemActionId.RenameItem
+      && context.actionInProgress.value?.item?.type === 'file')
+})
 </script>
 
 <template>
@@ -20,23 +32,24 @@ const isFolderCreationInProgress = computed(() => context.actionInProgress.value
     </div>
     <ContentEditor
       v-if="documentTree.currentItem.value.type === 'file' && documentTree.draft.current.value"
-      :draft-item="documentTree.draft.current.value"
+      :draft-item="documentTree.draft.current.value!"
+      :read-only="documentTree.currentItem.value.status === TreeStatus.Deleted"
     />
     <div
       v-else
       class="flex flex-col p-4"
     >
       <ItemTree
-        v-if="folderTree?.length > 0 || isFolderCreationInProgress"
+        v-if="folderTree?.length > 0 || showFolderForm"
         class="mb-2"
         :tree="folderTree"
-        :show-creation-form="isFolderCreationInProgress"
+        :show-form="showFolderForm"
         type="directory"
       />
       <ItemTree
-        v-if="fileTree?.length > 0 || isFileCreationInProgress"
+        v-if="fileTree?.length > 0 || showFileForm"
         :tree="fileTree"
-        :show-creation-form="isFileCreationInProgress"
+        :show-form="showFileForm"
         type="file"
       />
     </div>
diff --git a/src/app/src/pages/media.vue b/src/app/src/pages/media.vue
index 98bff657..861d82d0 100644
--- a/src/app/src/pages/media.vue
+++ b/src/app/src/pages/media.vue
@@ -8,8 +8,8 @@ const { mediaTree, context } = useStudio()
 const folderTree = computed(() => (mediaTree.current.value || []).filter(f => f.type === 'directory'))
 const fileTree = computed(() => (mediaTree.current.value || []).filter(f => f.type === 'file'))
 
-const isFileCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateDocument)
-const isFolderCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateFolder)
+const isFileCreationInProgress = computed(() => context.actionInProgress.value?.id === StudioItemActionId.CreateDocument)
+const isFolderCreationInProgress = computed(() => context.actionInProgress.value?.id === StudioItemActionId.CreateFolder)
 
 async function onFileDrop(event: DragEvent) {
   if (event.dataTransfer?.files) {
diff --git a/src/app/src/types/context.ts b/src/app/src/types/context.ts
index 37e6ead6..024131ef 100644
--- a/src/app/src/types/context.ts
+++ b/src/app/src/types/context.ts
@@ -20,14 +20,17 @@ export interface StudioActionInProgress {
   item?: TreeItem
 }
 
-export interface StudioAction {
-  id: StudioItemActionId
+export interface StudioAction<K extends StudioItemActionId = StudioItemActionId> {
+  id: K
   label: string
   icon: string
   tooltip: string
-  handler?: (args: ActionHandlerParams[StudioItemActionId]) => void
+  handler?: (args: ActionHandlerParams[K]) => void
 }
 
+export interface CreateFolderParams {
+  fsPath: string
+}
 export interface CreateFileParams {
   fsPath: string
   routePath: string
@@ -36,7 +39,7 @@ export interface CreateFileParams {
 
 export interface RenameFileParams {
   id: string
-  newNameWithExtension: string
+  newFsPath: string
 }
 
 export interface UploadMediaParams {
@@ -45,11 +48,11 @@ export interface UploadMediaParams {
 }
 
 export type ActionHandlerParams = {
-  [StudioItemActionId.CreateFolder]: string
+  [StudioItemActionId.CreateFolder]: CreateFolderParams
   [StudioItemActionId.CreateDocument]: CreateFileParams
   [StudioItemActionId.UploadMedia]: UploadMediaParams
-  [StudioItemActionId.RevertItem]: string
-  [StudioItemActionId.RenameItem]: RenameFileParams
-  [StudioItemActionId.DeleteItem]: string
-  [StudioItemActionId.DuplicateItem]: string
+  [StudioItemActionId.RevertItem]: TreeItem
+  [StudioItemActionId.RenameItem]: TreeItem | RenameFileParams // Two steps actions (item to rename first then rename params)
+  [StudioItemActionId.DeleteItem]: TreeItem
+  [StudioItemActionId.DuplicateItem]: TreeItem
 }
diff --git a/src/app/src/types/draft.ts b/src/app/src/types/draft.ts
index 55e1fbc1..a260ce45 100644
--- a/src/app/src/types/draft.ts
+++ b/src/app/src/types/draft.ts
@@ -6,7 +6,6 @@ export enum DraftStatus {
   Deleted = 'deleted',
   Created = 'created',
   Updated = 'updated',
-  Renamed = 'renamed',
   Opened = 'opened',
 }
 
diff --git a/src/app/src/types/tree.ts b/src/app/src/types/tree.ts
index e6235378..73b12104 100644
--- a/src/app/src/types/tree.ts
+++ b/src/app/src/types/tree.ts
@@ -1,11 +1,17 @@
-import type { DraftStatus } from '../types/draft'
+export enum TreeStatus {
+  Deleted = 'deleted',
+  Created = 'created',
+  Updated = 'updated',
+  Renamed = 'renamed',
+  Opened = 'opened',
+}
 
 export interface TreeItem {
   id: string
   name: string
   fsPath: string
   type: 'file' | 'directory' | 'root'
-  status?: DraftStatus
+  status?: TreeStatus
   routePath?: string
   children?: TreeItem[]
   /**
diff --git a/src/app/src/utils/context.ts b/src/app/src/utils/context.ts
index 7bd2cc8a..9c8d34b2 100644
--- a/src/app/src/utils/context.ts
+++ b/src/app/src/utils/context.ts
@@ -1,6 +1,5 @@
 import { type StudioAction, StudioFeature, type TreeItem } from '../types'
-import { DraftStatus } from '../types/draft'
-import type { ActionHandlerParams } from '../types/context'
+import { TreeStatus } from '../types'
 import { StudioItemActionId } from '../types/context'
 
 export const FEATURE_DISPLAY_MAP = {
@@ -73,13 +72,13 @@ export function computeActionItems(itemActions: StudioAction[], item?: TreeItem
 
   // Draft status filtering
   switch (item.status) {
-    case DraftStatus.Updated:
-    case DraftStatus.Created:
+    case TreeStatus.Updated:
+    case TreeStatus.Created:
       break
-    case DraftStatus.Deleted:
+    case TreeStatus.Deleted:
       forbiddenActions.push(StudioItemActionId.DuplicateItem, StudioItemActionId.RenameItem, StudioItemActionId.DeleteItem)
       break
-    case DraftStatus.Renamed:
+    case TreeStatus.Renamed:
       forbiddenActions.push(StudioItemActionId.RenameItem)
       break
     default:
@@ -89,19 +88,3 @@ export function computeActionItems(itemActions: StudioAction[], item?: TreeItem
 
   return itemActions.filter(action => !forbiddenActions.includes(action.id))
 }
-
-export function computeActionParams(action: StudioItemActionId, { item }: { item: TreeItem }): ActionHandlerParams[typeof action] {
-  switch (action) {
-    case StudioItemActionId.RevertItem:
-    case StudioItemActionId.DeleteItem:
-    case StudioItemActionId.DuplicateItem:
-      return item.id
-    case StudioItemActionId.RenameItem:
-      return {
-        id: item.id,
-        item
-      }
-    default:
-      return item.id
-  }
-}
diff --git a/src/app/src/utils/database.ts b/src/app/src/utils/database.ts
new file mode 100644
index 00000000..794c542d
--- /dev/null
+++ b/src/app/src/utils/database.ts
@@ -0,0 +1,53 @@
+import { type DatabasePageItem, ContentFileExtension } from '../types'
+// import { stringify } from 'minimark/stringify'
+
+export function isEqual(document1: DatabasePageItem, document2: DatabasePageItem) {
+  function removeLastStyle(document: DatabasePageItem) {
+    if (document.body?.value[document.body?.value.length - 1]?.[0] === 'style') {
+      return { ...document, body: { ...document.body, value: document.body?.value.slice(0, -1) } }
+    }
+    return document
+  }
+
+  const { body: body1, meta: meta1, ...documentData1 } = document1
+  const { body: body2, meta: meta2, ...documentData2 } = document2
+
+  // Compare body first
+  if (document1.extension === ContentFileExtension.Markdown) {
+    if (document1.body?.type === 'minimark') {
+      document1 = removeLastStyle(document1)
+    }
+
+    if (document2.body?.type === 'minimark') {
+      document2 = removeLastStyle(document2)
+    }
+
+    // TODO: fix issue with created files
+    // if (stringify(body1) !== stringify(body2)) {
+    //   return false
+    // }
+    if (JSON.stringify(body1) !== JSON.stringify(body2)) {
+      return false
+    }
+  }
+  else {
+    // For other file types, we compare the JSON stringified bodies
+    if (JSON.stringify(body1) !== JSON.stringify(body2)) {
+      return false
+    }
+  }
+
+  if (JSON.stringify(documentData1) !== JSON.stringify(documentData2)) {
+    return false
+  }
+
+  if (meta1 && meta2) {
+    const { __hash__: _hash1, ...metaFields1 } = meta1
+    const { __hash__: _hash2, ...metaFields2 } = meta2
+    if (JSON.stringify(metaFields1) !== JSON.stringify(metaFields2)) {
+      return false
+    }
+  }
+
+  return true
+}
diff --git a/src/app/src/utils/draft.ts b/src/app/src/utils/draft.ts
index 472a4d96..5a8e8d9b 100644
--- a/src/app/src/utils/draft.ts
+++ b/src/app/src/utils/draft.ts
@@ -1,24 +1,9 @@
-import { type BaseItem, type DatabasePageItem, ContentFileExtension, DraftStatus, type DraftItem } from '../types'
-import { stringify } from 'minimark/stringify'
+import { type DatabasePageItem, type DraftItem, type BaseItem, ContentFileExtension } from '../types'
+import { DraftStatus } from '../types'
 import { ROOT_ITEM } from './tree'
+import { isEqual } from './database'
 
-export const COLOR_STATUS_MAP: { [key in DraftStatus]?: string } = {
-  [DraftStatus.Created]: 'green',
-  [DraftStatus.Updated]: 'orange',
-  [DraftStatus.Deleted]: 'red',
-  [DraftStatus.Renamed]: 'blue',
-  [DraftStatus.Opened]: 'gray',
-} as const
-
-export const COLOR_UI_STATUS_MAP: { [key in DraftStatus]?: string } = {
-  [DraftStatus.Created]: 'success',
-  [DraftStatus.Updated]: 'warning',
-  [DraftStatus.Deleted]: 'error',
-  [DraftStatus.Renamed]: 'info',
-  [DraftStatus.Opened]: 'neutral',
-} as const
-
-export function getDraftStatus(modified: BaseItem, original: BaseItem | undefined) {
+export function getUpdatedDraftStatus(modified: BaseItem, original: BaseItem | undefined): DraftStatus {
   if (!original) {
     return DraftStatus.Created
   }
@@ -51,48 +36,3 @@ export function findDescendantsFromId(list: DraftItem[], id: string): DraftItem[
 
   return descendants
 }
-
-function isEqual(document1: DatabasePageItem, document2: DatabasePageItem) {
-  function removeLastStyle(document: DatabasePageItem) {
-    if (document.body?.value[document.body?.value.length - 1]?.[0] === 'style') {
-      return { ...document, body: { ...document.body, value: document.body?.value.slice(0, -1) } }
-    }
-    return document
-  }
-
-  const { body: body1, meta: meta1, ...documentData1 } = document1
-  const { body: body2, meta: meta2, ...documentData2 } = document2
-
-  // Compare body first
-  if (document1.extension === ContentFileExtension.Markdown) {
-    if (document1.body?.type === 'minimark') {
-      document1 = removeLastStyle(document1)
-    }
-
-    if (document2.body?.type === 'minimark') {
-      document2 = removeLastStyle(document2)
-    }
-
-    if (stringify(body1) !== stringify(body2)) {
-      return false
-    }
-  }
-  else {
-    // For other file types, we compare the JSON stringified bodies
-    if (JSON.stringify(body1) !== JSON.stringify(body2)) {
-      return false
-    }
-  }
-
-  if (JSON.stringify(documentData1) !== JSON.stringify(documentData2)) {
-    return false
-  }
-
-  const { __hash__: _hash1, ...metaFields1 } = meta1
-  const { __hash__: _hash2, ...metaFields2 } = meta2
-  if (JSON.stringify(metaFields1) !== JSON.stringify(metaFields2)) {
-    return false
-  }
-
-  return true
-}
diff --git a/src/app/src/utils/tree.ts b/src/app/src/utils/tree.ts
index 8b706faa..70612c85 100644
--- a/src/app/src/utils/tree.ts
+++ b/src/app/src/utils/tree.ts
@@ -1,8 +1,9 @@
-import { DraftStatus, type DraftItem, type TreeItem } from '../types'
+import { type DatabasePageItem, DraftStatus, TreeStatus, type DraftItem, type TreeItem, ContentFileExtension } from '../types'
 import { withLeadingSlash } from 'ufo'
 import { stripNumericPrefix } from './string'
 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' }
 
@@ -16,16 +17,67 @@ export const EXTENSIONS_WITH_PREVIEW = new Set([
   'avif',
 ])
 
+export const COLOR_STATUS_MAP: { [key in TreeStatus]?: string } = {
+  [TreeStatus.Created]: 'green',
+  [TreeStatus.Updated]: 'orange',
+  [TreeStatus.Deleted]: 'red',
+  [TreeStatus.Renamed]: 'blue',
+  [TreeStatus.Opened]: 'gray',
+} as const
+
+export const COLOR_UI_STATUS_MAP: { [key in TreeStatus]?: string } = {
+  [TreeStatus.Created]: 'success',
+  [TreeStatus.Updated]: 'warning',
+  [TreeStatus.Deleted]: 'error',
+  [TreeStatus.Renamed]: 'info',
+  [TreeStatus.Opened]: 'neutral',
+} as const
+
+export function getTreeStatus(modified: BaseItem, original: BaseItem | undefined): TreeStatus {
+  if (!original) {
+    return TreeStatus.Created
+  }
+
+  if (!modified) {
+    return TreeStatus.Deleted
+  }
+
+  if (modified.id !== original.id) {
+    return TreeStatus.Renamed
+  }
+
+  if (original.extension === ContentFileExtension.Markdown) {
+    if (!isEqual(original as DatabasePageItem, modified as DatabasePageItem)) {
+      return TreeStatus.Updated
+    }
+  }
+  else {
+    if (JSON.stringify(original) !== JSON.stringify(modified)) {
+      return TreeStatus.Updated
+    }
+  }
+
+  return TreeStatus.Opened
+}
+
 export function buildTree(dbItems: ((BaseItem) & { fsPath: string })[], draftList: DraftItem[] | null):
 TreeItem[] {
   const tree: TreeItem[] = []
   const directoryMap = new Map<string, TreeItem>()
 
   const deletedDraftItems = draftList?.filter(draft => draft.status === DraftStatus.Deleted) || []
+  const createdDraftItems = draftList?.filter(draft => draft.status === DraftStatus.Created) || []
 
   function addDeletedDraftItemsInDbItems(dbItems: ((BaseItem) & { fsPath: string })[], deletedItems: DraftItem[]) {
     dbItems = [...dbItems]
     for (const deletedItem of deletedItems) {
+      // Files in both deleted and original created draft are considered as renamed
+      // We don't want to add them to the tree and duplicate them
+      const renamedDraftItem = createdDraftItems.find(createdDraftItem => createdDraftItem.original?.id === deletedItem.id)
+      if (renamedDraftItem) {
+        continue
+      }
+
       const virtualDbItems: BaseItem & { fsPath: string } = {
         id: deletedItem.id,
         extension: deletedItem.id.split('.').pop()!,
@@ -77,7 +129,7 @@ TreeItem[] {
 
       const draftFileItem = draftList?.find(draft => draft.id === dbItem.id)
       if (draftFileItem) {
-        fileItem.status = draftFileItem.status
+        fileItem.status = getTreeStatus(draftFileItem.modified!, draftFileItem.original!)
       }
 
       tree.push(fileItem)
@@ -144,7 +196,7 @@ TreeItem[] {
 
     const draftFileItem = draftList?.find(draft => draft.id === dbItem.id)
     if (draftFileItem) {
-      fileItem.status = draftFileItem.status
+      fileItem.status = getTreeStatus(draftFileItem.modified!, draftFileItem.original!)
     }
 
     if (dbItem.path) {
@@ -258,19 +310,19 @@ function calculateDirectoryStatuses(items: TreeItem[]) {
     if (item.type === 'directory' && item.children) {
       calculateDirectoryStatuses(item.children)
 
-      const childrenWithStatus = item.children.filter(child => child.status && child.status !== DraftStatus.Opened)
+      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 === DraftStatus.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 = DraftStatus.Deleted
+          item.status = TreeStatus.Deleted
         }
         else {
           // Otherwise, mark as updated
-          item.status = DraftStatus.Updated
+          item.status = TreeStatus.Updated
         }
       }
     }
diff --git a/src/app/test/mocks/draft.ts b/src/app/test/mocks/draft.ts
index 7d8d29da..549448d1 100644
--- a/src/app/test/mocks/draft.ts
+++ b/src/app/test/mocks/draft.ts
@@ -7,11 +7,51 @@ const draftItemsList: DraftItem[] = [
     id: 'landing/index.md',
     fsPath: '/index.md',
     status: DraftStatus.Updated,
+    original: {
+      id: 'landing/index.md',
+      path: '/index.md',
+      stem: 'index',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
+    modified: {
+      id: 'landing/index.md',
+      path: '/index.md',
+      stem: 'index',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Modified' }],
+      },
+    },
   },
   {
     id: 'docs/root-file.md',
     fsPath: '/root-file.md',
     status: DraftStatus.Created,
+    original: {
+      id: 'docs/root-file.md',
+      path: '/root-file.md',
+      stem: 'root-file',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
+    modified: {
+      id: 'docs/root-file.md',
+      path: '/root-file.md',
+      stem: 'root-file',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
   },
 
   // Files in getting-started directory
@@ -19,16 +59,67 @@ const draftItemsList: DraftItem[] = [
     id: 'docs/1.getting-started/2.introduction.md',
     fsPath: '/1.getting-started/2.introduction.md',
     status: DraftStatus.Updated,
+    original: {
+      id: 'docs/1.getting-started/2.introduction.md',
+      path: '/1.getting-started/2.introduction.md',
+      stem: '2.introduction',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
+    modified: {
+      id: 'docs/1.getting-started/2.introduction.md',
+      path: '/1.getting-started/2.introduction.md',
+      stem: '2.introduction',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Modified' }],
+      },
+    },
   },
   {
     id: 'docs/1.getting-started/3.installation.md',
     fsPath: '/1.getting-started/3.installation.md',
     status: DraftStatus.Created,
+    original: {
+      id: 'docs/1.getting-started/3.installation.md',
+      path: '/1.getting-started/3.installation.md',
+      stem: '3.installation',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
+    modified: {
+      id: 'docs/1.getting-started/3.installation.md',
+      path: '/1.getting-started/3.installation.md',
+      stem: '3.installation',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Modified' }],
+      },
+    },
   },
   {
     id: 'docs/1.getting-started/4.configuration.md',
     fsPath: '/1.getting-started/4.configuration.md',
     status: DraftStatus.Deleted,
+    modified: undefined,
+    original: {
+      id: 'docs/1.getting-started/4.configuration.md',
+      path: '/1.getting-started/4.configuration.md',
+      stem: '4.configuration',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
   },
 
   // Files in advanced subdirectory
@@ -36,11 +127,51 @@ const draftItemsList: DraftItem[] = [
     id: 'docs/1.getting-started/1.advanced/1.studio.md',
     fsPath: '/1.getting-started/1.advanced/1.studio.md',
     status: DraftStatus.Updated,
+    original: {
+      id: 'docs/1.getting-started/1.advanced/1.studio.md',
+      path: '/1.getting-started/1.advanced/1.studio.md',
+      stem: '1.studio',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
+    modified: {
+      id: 'docs/1.getting-started/1.advanced/1.studio.md',
+      path: '/1.getting-started/1.advanced/1.studio.md',
+      stem: '1.studio',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Modified' }],
+      },
+    },
   },
   {
     id: 'docs/1.getting-started/1.advanced/2.deployment.md',
     fsPath: '/1.getting-started/1.advanced/2.deployment.md',
     status: DraftStatus.Created,
+    original: {
+      id: 'docs/1.getting-started/1.advanced/2.deployment.md',
+      path: '/1.getting-started/1.advanced/2.deployment.md',
+      stem: '2.deployment',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
+    modified: {
+      id: 'docs/1.getting-started/1.advanced/2.deployment.md',
+      path: '/1.getting-started/1.advanced/2.deployment.md',
+      stem: '2.deployment',
+      extension: 'md',
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Original' }],
+      },
+    },
   },
 ]
 
diff --git a/src/app/test/utils/context.test.ts b/src/app/test/utils/context.test.ts
index 90680a52..7882f945 100644
--- a/src/app/test/utils/context.test.ts
+++ b/src/app/test/utils/context.test.ts
@@ -1,7 +1,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 { DraftStatus } from '../../src/types/draft'
+import { TreeStatus } from '../../src/types'
 
 describe('computeActionItems', () => {
   it('should return all actions when item is undefined', () => {
@@ -59,7 +59,7 @@ describe('computeActionItems', () => {
     const fileItem: TreeItem = {
       type: 'file',
       name: 'test.md',
-      status: DraftStatus.Opened,
+      status: TreeStatus.Opened,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
@@ -80,7 +80,7 @@ describe('computeActionItems', () => {
     const fileItem: TreeItem = {
       type: 'file',
       name: 'test.md',
-      status: DraftStatus.Updated,
+      status: TreeStatus.Updated,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
@@ -99,7 +99,7 @@ describe('computeActionItems', () => {
     const fileItem: TreeItem = {
       type: 'file',
       name: 'test.md',
-      status: DraftStatus.Created,
+      status: TreeStatus.Created,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
@@ -118,7 +118,7 @@ describe('computeActionItems', () => {
     const fileItem: TreeItem = {
       type: 'file',
       name: 'test.md',
-      status: DraftStatus.Deleted,
+      status: TreeStatus.Deleted,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
@@ -143,7 +143,7 @@ describe('computeActionItems', () => {
     const fileItem: TreeItem = {
       type: 'file',
       name: 'test.md',
-      status: DraftStatus.Renamed,
+      status: TreeStatus.Renamed,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
@@ -186,7 +186,7 @@ describe('computeActionItems', () => {
     const directoryItem: TreeItem = {
       type: 'directory',
       name: 'folder',
-      status: DraftStatus.Opened,
+      status: TreeStatus.Opened,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
@@ -205,7 +205,7 @@ describe('computeActionItems', () => {
     const directoryItem: TreeItem = {
       type: 'directory',
       name: 'folder',
-      status: DraftStatus.Updated,
+      status: TreeStatus.Updated,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
@@ -222,7 +222,7 @@ describe('computeActionItems', () => {
     const directoryItem: TreeItem = {
       type: 'directory',
       name: 'folder',
-      status: DraftStatus.Created,
+      status: TreeStatus.Created,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
@@ -239,7 +239,7 @@ describe('computeActionItems', () => {
     const directoryItem: TreeItem = {
       type: 'directory',
       name: 'folder',
-      status: DraftStatus.Deleted,
+      status: TreeStatus.Deleted,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
@@ -260,7 +260,7 @@ describe('computeActionItems', () => {
     const directoryItem: TreeItem = {
       type: 'directory',
       name: 'folder',
-      status: DraftStatus.Renamed,
+      status: TreeStatus.Renamed,
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, directoryItem)
diff --git a/src/app/test/utils/draft.test.ts b/src/app/test/utils/draft.test.ts
index 3d28a3a1..648254c7 100644
--- a/src/app/test/utils/draft.test.ts
+++ b/src/app/test/utils/draft.test.ts
@@ -1,51 +1,8 @@
 import { describe, it, expect } from 'vitest'
-import type { DatabaseItem } from '../../src/types/database'
-import { getDraftStatus, findDescendantsFromId } from '../../src/utils/draft'
-import { DraftStatus } from '../../src/types/draft'
-import { dbItemsList } from '../mocks/database'
+import { findDescendantsFromId } from '../../src/utils/draft'
 import { draftItemsList } from '../mocks/draft'
 import { ROOT_ITEM } from '../../src/utils/tree'
 
-describe('getDraftStatus', () => {
-  it('draft is CREATED if originalDatabaseItem is not defined', () => {
-    const originalDatabaseItem: DatabaseItem = undefined as never
-    const draft: DatabaseItem = {
-      id: 'landing/index.md',
-      title: 'Home',
-      body: {
-        type: 'minimark',
-        value: [],
-      },
-      description: 'Home page',
-      extension: 'md',
-      stem: 'index',
-      meta: {},
-    }
-
-    const status = getDraftStatus(draft, originalDatabaseItem)
-    expect(status).toBe(DraftStatus.Created)
-  })
-
-  it('draft is OPENED if originalDatabaseItem is defined and is the same as draftedDocument', () => {
-    const originalDatabaseItem: DatabaseItem = dbItemsList[0]
-    const draft: DatabaseItem = originalDatabaseItem
-
-    const status = getDraftStatus(draft, originalDatabaseItem)
-    expect(status).toBe(DraftStatus.Opened)
-  })
-
-  it('draft is UPDATED if originalDatabaseItem is defined and is different from draftedDocument', () => {
-    const originalDatabaseItem: DatabaseItem = dbItemsList[0]
-    const draft: DatabaseItem = {
-      ...originalDatabaseItem,
-      title: 'New title',
-    }
-
-    const status = getDraftStatus(draft, originalDatabaseItem)
-    expect(status).toBe(DraftStatus.Updated)
-  })
-})
-
 describe('findDescendantsFromId', () => {
   it('returns exact match for a root level file', () => {
     const descendants = findDescendantsFromId(draftItemsList, 'landing/index.md')
diff --git a/src/app/test/utils/tree.test.ts b/src/app/test/utils/tree.test.ts
index 439c0312..8614a81c 100644
--- a/src/app/test/utils/tree.test.ts
+++ b/src/app/test/utils/tree.test.ts
@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest'
-import { buildTree, findParentFromId, findItemFromRoute, findItemFromId, findDescendantsFileItemsFromId } from '../../src/utils/tree'
+import { buildTree, findParentFromId, findItemFromRoute, findItemFromId, findDescendantsFileItemsFromId, getTreeStatus } from '../../src/utils/tree'
 import { tree } from '../mocks/tree'
 import type { TreeItem } from '../../src/types/tree'
 import { dbItemsList, nestedDbItemsList } from '../mocks/database'
 import type { DraftItem } from '../../src/types/draft'
-import { DraftStatus } from '../../src/types/draft'
+import { DraftStatus, TreeStatus, ContentFileExtension } from '../../src/types'
 import type { RouteLocationNormalized } from 'vue-router'
 import type { DatabaseItem } from '../../src/types/database'
 
@@ -43,35 +43,59 @@ describe('buildTree with one level of depth', () => {
     },
   ]
 
-  it('Db items list without draft', () => {
+  it('Without draft', () => {
     const tree = buildTree(dbItemsList, null)
     expect(tree).toStrictEqual(result)
   })
 
-  it('Db items list with draft', () => {
+  it('With draft', () => {
     const draftList: DraftItem[] = [{
       id: dbItemsList[0].id,
       fsPath: 'index.md',
       status: DraftStatus.Created,
+      original: {
+        id: dbItemsList[0].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Created']],
+        },
+      } as unknown as DatabaseItem,
+      modified: {
+        id: dbItemsList[0].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Created']],
+        },
+      } as unknown as DatabaseItem,
     }]
+
     const tree = buildTree(dbItemsList, draftList)
 
     expect(tree).toStrictEqual([
       {
         ...result[0],
-        status: DraftStatus.Created,
+        status: TreeStatus.Created,
       },
       ...result.slice(1)])
   })
 
-  it('Db items list with DELETED non existing file in existing directory in draft', () => {
+  it('With DELETED draft file in existing directory', () => {
     const draftList: DraftItem[] = [{
       id: 'docs/1.getting-started/2.deleted.md',
       fsPath: '1.getting-started/2.deleted.md',
       status: DraftStatus.Deleted,
+      modified: undefined,
       original: {
+        id: 'docs/1.getting-started/2.deleted.md',
         path: '/getting-started/deleted',
-      } as DatabaseItem,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Deleted']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -80,7 +104,7 @@ describe('buildTree with one level of depth', () => {
       { ...result[0] },
       {
         ...result[1],
-        status: DraftStatus.Updated,
+        status: TreeStatus.Updated,
         children: [
           ...result[1].children!,
           {
@@ -89,21 +113,28 @@ describe('buildTree with one level of depth', () => {
             fsPath: '1.getting-started/2.deleted.md',
             type: 'file',
             routePath: '/getting-started/deleted',
-            status: DraftStatus.Deleted,
+            status: TreeStatus.Deleted,
           },
         ],
       },
     ])
   })
 
-  it('Db items list with DELETED non existing file in non existing directory in draft', () => {
+  it('With DELETED draft file in non existing directory', () => {
     const draftList: DraftItem[] = [{
       id: 'docs/1.deleted-directory/2.deleted-file.md',
       fsPath: '1.deleted-directory/2.deleted-file.md',
       status: DraftStatus.Deleted,
+      modified: undefined,
       original: {
+        id: 'docs/1.deleted-directory/2.deleted-file.md',
         path: '/deleted-directory/deleted-file',
-      } as DatabaseItem,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Deleted']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -116,7 +147,7 @@ describe('buildTree with one level of depth', () => {
         fsPath: '1.deleted-directory',
         routePath: '/deleted-directory',
         type: 'directory',
-        status: DraftStatus.Deleted,
+        status: TreeStatus.Deleted,
         children: [
           {
             id: 'docs/1.deleted-directory/2.deleted-file.md',
@@ -124,68 +155,47 @@ describe('buildTree with one level of depth', () => {
             fsPath: '1.deleted-directory/2.deleted-file.md',
             routePath: '/deleted-directory/deleted-file',
             type: 'file',
-            status: DraftStatus.Deleted,
+            status: TreeStatus.Deleted,
           },
         ],
       },
     ])
   })
 
-  it('Db items list with all DELETED existing files in existing directory in draft (directory status is set to DELETED)', () => {
+  it('With UPDATED draft file in existing directory (directory status is set)', () => {
     const draftList: DraftItem[] = [{
       id: dbItemsList[1].id,
       fsPath: '1.getting-started/2.introduction.md',
-      status: DraftStatus.Deleted,
-      original: {
-        path: '/getting-started/introduction',
-      } as DatabaseItem,
-    }, {
-      id: dbItemsList[2].id,
-      fsPath: '1.getting-started/3.installation.md',
-      status: DraftStatus.Deleted,
+      status: DraftStatus.Updated,
       original: {
-        path: '/getting-started/installation',
-      } as DatabaseItem,
+        id: dbItemsList[1].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
+        },
+      } as unknown as DatabaseItem,
+      modified: {
+        id: dbItemsList[1].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Modified']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(dbItemsList, draftList)
 
-    expect(tree).toStrictEqual([
-      result[0],
-      {
-        ...result[1],
-        status: DraftStatus.Deleted,
-        children: [
-          {
-            ...result[1].children![0],
-            status: DraftStatus.Deleted,
-          },
-          {
-            ...result[1].children![1],
-            status: DraftStatus.Deleted,
-          },
-        ],
-      },
-    ])
-  })
-
-  it('Db items list with UPDATED file in existing directory in draft (directory status is set)', () => {
-    const draftList: DraftItem[] = [{
-      id: dbItemsList[1].id,
-      fsPath: '1.getting-started/2.introduction.md',
-      status: DraftStatus.Updated,
-    }]
-    const tree = buildTree(dbItemsList, draftList)
-
     const expectedTree: TreeItem[] = [
       result[0],
       {
         ...result[1],
-        status: DraftStatus.Updated,
+        status: TreeStatus.Updated,
         children: [
           {
             ...result[1].children![0],
-            status: DraftStatus.Updated,
+            status: TreeStatus.Updated,
           },
           ...result[1].children!.slice(1),
         ],
@@ -195,15 +205,47 @@ describe('buildTree with one level of depth', () => {
     expect(tree).toStrictEqual(expectedTree)
   })
 
-  it('Db items list with UPDATED and OPENED files in exsiting directory in draft (directory status is set)', () => {
+  it('With Created and OPENED draft files in exsiting directory (directory status is set)', () => {
     const draftList: DraftItem[] = [{
       id: dbItemsList[1].id,
       fsPath: '1.getting-started/2.introduction.md',
       status: DraftStatus.Created,
+      original: {
+        id: dbItemsList[1].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Created']],
+        },
+      } as unknown as DatabaseItem,
+      modified: {
+        id: dbItemsList[1].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Created']],
+        },
+      } as unknown as DatabaseItem,
     }, {
       id: dbItemsList[2].id,
       fsPath: '1.getting-started/3.installation.md',
       status: DraftStatus.Opened,
+      original: {
+        id: dbItemsList[2].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
+        },
+      } as unknown as DatabaseItem,
+      modified: {
+        id: dbItemsList[2].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -212,10 +254,10 @@ describe('buildTree with one level of depth', () => {
       result[0],
       {
         ...result[1],
-        status: DraftStatus.Updated,
+        status: TreeStatus.Updated,
         children: [
-          { ...result[1].children![0], status: DraftStatus.Created },
-          { ...result[1].children![1], status: DraftStatus.Opened },
+          { ...result[1].children![0], status: TreeStatus.Created },
+          { ...result[1].children![1], status: TreeStatus.Opened },
           ...result[1].children!.slice(2),
         ],
       },
@@ -224,15 +266,47 @@ describe('buildTree with one level of depth', () => {
     expect(tree).toStrictEqual(expectedTree)
   })
 
-  it('Db items list with OPENED files in existing directory in draft (directory status is not set)', () => {
+  it('With OPENED draft files in existing directory (directory status is not set)', () => {
     const draftList: DraftItem[] = [{
       id: dbItemsList[1].id,
       fsPath: '1.getting-started/2.introduction.md',
       status: DraftStatus.Opened,
+      original: {
+        id: dbItemsList[1].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
+        },
+      } as unknown as DatabaseItem,
+      modified: {
+        id: dbItemsList[1].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
+        },
+      } as unknown as DatabaseItem,
     }, {
       id: dbItemsList[2].id,
       fsPath: '1.getting-started/3.installation.md',
       status: DraftStatus.Opened,
+      original: {
+        id: dbItemsList[2].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
+        },
+      } as unknown as DatabaseItem,
+      modified: {
+        id: dbItemsList[2].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -243,8 +317,8 @@ describe('buildTree with one level of depth', () => {
         ...result[1],
         children: [
           {
-            ...result[1].children![0], status: DraftStatus.Opened },
-          { ...result[1].children![1], status: DraftStatus.Opened },
+            ...result[1].children![0], status: TreeStatus.Opened },
+          { ...result[1].children![1], status: TreeStatus.Opened },
           ...result[1].children!.slice(2),
         ],
       },
@@ -252,6 +326,47 @@ describe('buildTree with one level of depth', () => {
 
     expect(tree).toStrictEqual(expectedTree)
   })
+
+  it.only('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 draftList: DraftItem[] = [{
+      id: deletedDbItem.id,
+      fsPath: deletedDbItem.fsPath,
+      status: DraftStatus.Deleted,
+      modified: undefined,
+      original: deletedDbItem,
+    }, {
+      id: createdDbItem.id,
+      fsPath: createdDbItem.fsPath,
+      status: DraftStatus.Created,
+      modified: createdDbItem,
+      original: deletedDbItem,
+    }]
+
+    const dbItemsListWithoutDeletedDbItem = dbItemsList.filter(item => item.id !== deletedDbItem.id)
+
+    const tree = buildTree(dbItemsListWithoutDeletedDbItem, draftList)
+
+    expect(tree).toStrictEqual([
+      result[0],
+      {
+        ...result[1],
+        status: TreeStatus.Updated,
+        children: [
+          {
+            id: createdDbItem.id,
+            fsPath: createdDbItem.fsPath,
+            routePath: '/getting-started/installation',
+            name: 'installation',
+            type: 'file',
+            status: TreeStatus.Renamed,
+          },
+        ],
+      },
+    ])
+  })
 })
 
 describe('buildTree with two levels of depth', () => {
@@ -290,107 +405,83 @@ describe('buildTree with two levels of depth', () => {
     },
   ]
 
-  it('Db items list without draft', () => {
+  it('Without draft', () => {
     const tree = buildTree(nestedDbItemsList, null)
     expect(tree).toStrictEqual(result)
   })
 
-  it('Db items list with one level of depth draft', () => {
+  it('With one level of depth draft files', () => {
     const draftList: DraftItem[] = [{
       id: nestedDbItemsList[0].id,
       fsPath: '1.essentials/2.configuration.md',
       status: DraftStatus.Updated,
+      original: {
+        id: nestedDbItemsList[0].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
+        },
+      } as unknown as DatabaseItem,
+      modified: {
+        id: nestedDbItemsList[0].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Modified']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(nestedDbItemsList, draftList)
 
     expect(tree).toStrictEqual([{
       ...result[0],
-      status: DraftStatus.Updated,
+      status: TreeStatus.Updated,
       children: [
-        { ...result[0].children![0], status: DraftStatus.Updated },
+        { ...result[0].children![0], status: TreeStatus.Updated },
         result[0].children![1],
       ],
     }])
   })
 
-  it('Db items list with nested levels of depth draft', () => {
+  it('With nested levels of depth draft files', () => {
     const draftList: DraftItem[] = [{
       id: nestedDbItemsList[1].id,
       fsPath: '1.essentials/1.nested/2.advanced.md',
       status: DraftStatus.Updated,
-    }]
-
-    const tree = buildTree(nestedDbItemsList, draftList)
-
-    expect(tree).toStrictEqual([{
-      ...result[0],
-      status: DraftStatus.Updated,
-      children: [
-        result[0].children![0],
-        {
-          ...result[0].children![1],
-          status: DraftStatus.Updated,
-          children: [
-            {
-              ...result[0].children![1].children![0],
-              status: DraftStatus.Updated,
-            },
-          ],
-        },
-      ],
-    }])
-  })
-
-  it('Db items list with DELETED existing file in first level directory in draft', () => {
-    const draftList: DraftItem[] = [{
-      id: nestedDbItemsList[0].id,
-      fsPath: '1.essentials/2.configuration.md',
-      status: DraftStatus.Deleted,
       original: {
-        path: '/essentials/configuration',
-      } as DatabaseItem,
-    }]
-
-    const tree = buildTree(nestedDbItemsList, draftList)
-
-    expect(tree).toStrictEqual([{
-      ...result[0],
-      status: DraftStatus.Updated,
-      children: [
-        {
-          ...result[0].children![0],
-          status: DraftStatus.Deleted,
+        id: nestedDbItemsList[1].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Original']],
         },
-        result[0].children![1],
-      ],
-    }])
-  })
-
-  it ('Db items list with DELETED existing file in nested existing directory in draft (directory status is set to DELETED)', () => {
-    const draftList: DraftItem[] = [{
-      id: nestedDbItemsList[1].id,
-      fsPath: '1.essentials/1.nested/2.advanced.md',
-      status: DraftStatus.Deleted,
-      original: {
-        path: '/essentials/nested/advanced',
-      } as DatabaseItem,
+      } as unknown as DatabaseItem,
+      modified: {
+        id: nestedDbItemsList[1].id,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Modified']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(nestedDbItemsList, draftList)
 
     expect(tree).toStrictEqual([{
       ...result[0],
-      status: DraftStatus.Updated,
+      status: TreeStatus.Updated,
       children: [
         result[0].children![0],
         {
           ...result[0].children![1],
-          status: DraftStatus.Deleted,
+          status: TreeStatus.Updated,
           children: [
             {
               ...result[0].children![1].children![0],
-              status: DraftStatus.Deleted,
+              status: TreeStatus.Updated,
             },
           ],
         },
@@ -398,65 +489,42 @@ describe('buildTree with two levels of depth', () => {
     }])
   })
 
-  it ('Db items list with DELETED non exisitng file in first level existing directory in draft', () => {
+  it ('With DELETED draft file in nested existing directory ', () => {
     const draftList: DraftItem[] = [{
-      id: 'docs/1.essentials/1.deleted.md',
-      fsPath: '1.essentials/1.deleted.md',
-      status: DraftStatus.Deleted,
-      original: {
-        path: '/essentials/deleted',
-      } as DatabaseItem,
-    }]
-
-    const tree = buildTree(nestedDbItemsList, draftList)
-
-    expect(tree).toStrictEqual([{
-      ...result[0],
-      status: DraftStatus.Updated,
-      children: [
-        result[0].children![0],
-        result[0].children![1],
-        {
-          id: 'docs/1.essentials/1.deleted.md',
-          name: 'deleted',
-          fsPath: '1.essentials/1.deleted.md',
-          routePath: '/essentials/deleted',
-          type: 'file',
-          status: DraftStatus.Deleted,
-        },
-      ],
-    }])
-  })
-
-  it ('Db items list with DELETED non existing file in nested existing directory in draft', () => {
-    const draftList: DraftItem[] = [{
-      id: 'docs/1.essentials/1.nested/1.deleted.md',
-      fsPath: '1.essentials/1.nested/1.deleted.md',
+      id: 'docs/1.essentials/1.nested/2.deleted.md',
+      fsPath: '1.essentials/1.nested/2.deleted.md',
       status: DraftStatus.Deleted,
+      modified: undefined,
       original: {
+        id: 'docs/1.essentials/1.nested/2.deleted.md',
         path: '/essentials/nested/deleted',
-      } as DatabaseItem,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Deleted']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(nestedDbItemsList, draftList)
 
     expect(tree).toStrictEqual([{
       ...result[0],
-      status: DraftStatus.Updated,
+      status: TreeStatus.Updated,
       children: [
         result[0].children![0],
         {
           ...result[0].children![1],
-          status: DraftStatus.Updated,
+          status: TreeStatus.Updated,
           children: [
-            result[0].children![1].children![0],
+            ...result[0].children![1].children!,
             {
-              id: 'docs/1.essentials/1.nested/1.deleted.md',
+              id: 'docs/1.essentials/1.nested/2.deleted.md',
               name: 'deleted',
-              fsPath: '1.essentials/1.nested/1.deleted.md',
+              fsPath: '1.essentials/1.nested/2.deleted.md',
               routePath: '/essentials/nested/deleted',
               type: 'file',
-              status: DraftStatus.Deleted,
+              status: TreeStatus.Deleted,
             },
           ],
         },
@@ -464,21 +532,28 @@ describe('buildTree with two levels of depth', () => {
     }])
   })
 
-  it ('Db items list with DELETED existing file in nested non existing directory in draft', () => {
+  it ('With DELETED draft file in nested non existing directory', () => {
     const draftList: DraftItem[] = [{
       id: 'docs/1.essentials/1.deleted/1.deleted.md',
       fsPath: '1.essentials/1.deleted/1.deleted.md',
       status: DraftStatus.Deleted,
+      modified: undefined,
       original: {
+        id: 'docs/1.essentials/1.deleted/1.deleted.md',
         path: '/essentials/deleted/deleted',
-      } as DatabaseItem,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Deleted']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(nestedDbItemsList, draftList)
 
     expect(tree).toStrictEqual([{
       ...result[0],
-      status: DraftStatus.Updated,
+      status: TreeStatus.Updated,
       children: [
         result[0].children![0],
         result[0].children![1],
@@ -488,7 +563,7 @@ describe('buildTree with two levels of depth', () => {
           fsPath: '1.essentials/1.deleted',
           routePath: '/essentials/deleted',
           type: 'directory',
-          status: DraftStatus.Deleted,
+          status: TreeStatus.Deleted,
           children: [
             {
               id: 'docs/1.essentials/1.deleted/1.deleted.md',
@@ -496,7 +571,7 @@ describe('buildTree with two levels of depth', () => {
               fsPath: '1.essentials/1.deleted/1.deleted.md',
               routePath: '/essentials/deleted/deleted',
               type: 'file',
-              status: DraftStatus.Deleted,
+              status: TreeStatus.Deleted,
             },
           ],
         },
@@ -504,21 +579,28 @@ describe('buildTree with two levels of depth', () => {
     }])
   })
 
-  it ('Db items list with DELETED file in multi-nested non existing directory chain in draft', () => {
+  it ('With DELETED draft file in multi-nested non existing directory chain', () => {
     const draftList: DraftItem[] = [{
       id: 'docs/1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
       fsPath: '1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
       status: DraftStatus.Deleted,
+      modified: undefined,
       original: {
+        id: 'docs/1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
         path: '/essentials/deep/deeper/deepest/file',
-      } as DatabaseItem,
+        extension: ContentFileExtension.Markdown,
+        body: {
+          type: 'minimark',
+          value: [['text', 'Deleted']],
+        },
+      } as unknown as DatabaseItem,
     }]
 
     const tree = buildTree(nestedDbItemsList, draftList)
 
     expect(tree).toStrictEqual([{
       ...result[0],
-      status: DraftStatus.Updated,
+      status: TreeStatus.Updated,
       children: [
         result[0].children![0],
         result[0].children![1],
@@ -528,7 +610,7 @@ describe('buildTree with two levels of depth', () => {
           fsPath: '1.essentials/1.deep',
           routePath: '/essentials/deep',
           type: 'directory',
-          status: DraftStatus.Deleted,
+          status: TreeStatus.Deleted,
           children: [
             {
               id: 'docs/1.essentials/1.deep/2.deeper',
@@ -536,7 +618,7 @@ describe('buildTree with two levels of depth', () => {
               fsPath: '1.essentials/1.deep/2.deeper',
               routePath: '/essentials/deep/deeper',
               type: 'directory',
-              status: DraftStatus.Deleted,
+              status: TreeStatus.Deleted,
               children: [
                 {
                   id: 'docs/1.essentials/1.deep/2.deeper/3.deepest',
@@ -544,7 +626,7 @@ describe('buildTree with two levels of depth', () => {
                   fsPath: '1.essentials/1.deep/2.deeper/3.deepest',
                   routePath: '/essentials/deep/deeper/deepest',
                   type: 'directory',
-                  status: DraftStatus.Deleted,
+                  status: TreeStatus.Deleted,
                   children: [
                     {
                       id: 'docs/1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
@@ -552,7 +634,7 @@ describe('buildTree with two levels of depth', () => {
                       fsPath: '1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
                       routePath: '/essentials/deep/deeper/deepest/file',
                       type: 'file',
-                      status: DraftStatus.Deleted,
+                      status: TreeStatus.Deleted,
                     },
                   ],
                 },
@@ -565,6 +647,76 @@ describe('buildTree with two levels of depth', () => {
   })
 })
 
+describe('getTreeStatus', () => {
+  it('draft is CREATED if originalDatabaseItem is not defined', () => {
+    const original: DatabaseItem = undefined as never
+    const modified: DatabaseItem = {
+      id: 'landing/index.md',
+      title: 'Home',
+      body: {
+        type: 'minimark',
+        value: [],
+      },
+      description: 'Home page',
+      extension: 'md',
+      stem: 'index',
+      meta: {},
+    }
+
+    const status = getTreeStatus(modified, original)
+    expect(status).toBe(TreeStatus.Created)
+  })
+
+  it('draft is OPENED if originalDatabaseItem is defined and is the same as draftedDocument', () => {
+    const original: DatabaseItem = dbItemsList[0]
+    const draft: DatabaseItem = original
+
+    const status = getTreeStatus(draft, original)
+    expect(status).toBe(TreeStatus.Opened)
+  })
+
+  it('draft is UPDATED if originalDatabaseItem is defined and one of its data field is different from draftedDocument', () => {
+    const original: DatabaseItem = dbItemsList[0]
+    const modified: DatabaseItem = {
+      ...original,
+      title: 'New title',
+    }
+
+    const status = getTreeStatus(modified, original)
+    expect(status).toBe(TreeStatus.Updated)
+  })
+
+  it('draft is UPDATED if originalDatabaseItem is defined and its body is different from draftedDocument', () => {
+    const original: DatabaseItem = dbItemsList[0]
+    const modified: DatabaseItem = {
+      ...original,
+      body: { type: 'minimark', value: ['text', 'New body'] },
+    }
+
+    const status = getTreeStatus(modified, original)
+    expect(status).toBe(TreeStatus.Updated)
+  })
+
+  it('draft is RENAMED if originalDatabaseItem is defined and id is different from draftedDocument', () => {
+    const original: DatabaseItem = dbItemsList[0]
+    const modified: DatabaseItem = {
+      ...original,
+      id: 'landing/renamed.md',
+    }
+
+    const status = getTreeStatus(modified, original)
+    expect(status).toBe(TreeStatus.Renamed)
+  })
+
+  it('draft is DELETED if modifiedDatabaseItem is not defined', () => {
+    const original: DatabaseItem = dbItemsList[0]
+    const modified: DatabaseItem = undefined as never
+
+    const status = getTreeStatus(modified, original)
+    expect(status).toBe(TreeStatus.Deleted)
+  })
+})
+
 describe('findParentFromId', () => {
   it('should find direct parent of a child', () => {
     const parent = findParentFromId(tree, 'docs/1.getting-started/2.introduction.md')
diff --git a/src/app/vite.config.ts b/src/app/vite.config.ts
index 2dd98f35..8a5ff878 100644
--- a/src/app/vite.config.ts
+++ b/src/app/vite.config.ts
@@ -41,7 +41,7 @@ export default defineConfig({
           slots: {
             link: 'cursor-pointer',
           },
-        }
+        },
       },
     }),
     libCss(),

From d9aeab57fb1019398f30e4c27bbfd73d5987bcd4 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Thu, 2 Oct 2025 08:18:44 +0200
Subject: [PATCH 5/7] up

---
 src/app/src/composables/useDraftDocuments.ts |  19 +-
 src/app/src/composables/useDraftMedias.ts    |  16 +-
 src/app/src/types/draft.ts                   |   2 +-
 src/app/src/utils/draft.ts                   |  14 +-
 src/app/src/utils/tree.ts                    |  58 +--
 src/app/test/utils/draft.test.ts             |  44 +-
 src/app/test/utils/tree.test.ts              | 427 +++++--------------
 7 files changed, 209 insertions(+), 371 deletions(-)

diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index 5e1e688f..dd945cc4 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -5,7 +5,7 @@ import type { DatabaseItem, DraftItem, StudioHost, GithubFile, DatabasePageItem,
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
 import { generateContentFromDocument } from '../utils/content'
-import { findDescendantsFromId, getUpdatedDraftStatus } from '../utils/draft'
+import { findDescendantsFromId, getDraftStatus } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
 import { stripNumericPrefix } from '../utils/string'
@@ -35,7 +35,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     // return item
   }
 
-  async function create(document: DatabaseItem, status: DraftStatus = DraftStatus.Created, original?: DatabaseItem) {
+  async function create(document: DatabaseItem, original?: DatabaseItem) {
     const existingItem = list.value.find(item => item.id === document.id)
     if (existingItem) {
       throw new Error(`Draft file already exists for document ${document.id}`)
@@ -47,9 +47,9 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     const item: DraftItem<DatabaseItem> = {
       id: document.id,
       fsPath,
-      original: original || document,
       githubFile,
-      status,
+      status: getDraftStatus(document, original),
+      original,
       modified: document,
     }
 
@@ -69,7 +69,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     }
 
     const oldStatus = existingItem.status
-    existingItem.status = getUpdatedDraftStatus(document, existingItem.original)
+    existingItem.status = getDraftStatus(document, existingItem.original)
     existingItem.modified = document
 
     await storage.setItem(id, existingItem)
@@ -159,7 +159,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
       }
       else {
         await host.document.upsert(draftItem.id, existingItem.original!)
-        existingItem.status = DraftStatus.Opened
+        existingItem.status = getDraftStatus(existingItem.original!, existingItem.original)
         existingItem.modified = existingItem.original
         await storage.setItem(draftItem.id, existingItem)
       }
@@ -190,7 +190,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
 
     // Create new draft item
     const newDbItem = await host.document.create(newFsPath, newRoutePath, content!)
-    return await create(newDbItem, DraftStatus.Created, currentDbItem)
+    return await create(newDbItem, currentDbItem)
   }
 
   async function duplicate(id: string): Promise<DraftItem<DatabaseItem>> {
@@ -223,7 +223,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     const storedList = await storage.getKeys().then(async (keys) => {
       return Promise.all(keys.map(async (key) => {
         const item = await storage.getItem(key) as DraftItem
-        if (item.status === DraftStatus.Opened) {
+        if (item.status === DraftStatus.Pristine) {
           await storage.removeItem(key)
           return null
         }
@@ -264,7 +264,8 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
       throw new Error(`Cannot select item: no corresponding database entry found for id ${id}`)
     }
 
-    const draftItem = await create(dbItem, DraftStatus.Opened)
+    const draftItem = await create(dbItem, dbItem)
+
     select(draftItem)
   }
 
diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index d66cdce9..be40150c 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -5,7 +5,7 @@ import { joinURL, withLeadingSlash } from 'ufo'
 import type { DraftItem, StudioHost, GithubFile, MediaItem, RawFile } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
-import { getUpdatedDraftStatus } from '../utils/draft'
+import { getDraftStatus } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
 
@@ -27,8 +27,8 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     return item
   }
 
-  async function create(media: MediaItem, status: DraftStatus = DraftStatus.Created) {
-    const existingItem = list.value.find(item => item.id === media.id)
+  async function create(media: MediaItem) {
+    const existingItem = list.value.find(item => item.id === media.id) as DraftItem<MediaItem>
     if (existingItem) {
       throw new Error(`Draft file already exists for document ${media.id}`)
     }
@@ -41,7 +41,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
       fsPath,
       original: media,
       githubFile,
-      status,
+      status: getDraftStatus(media),
       modified: media,
     }
 
@@ -61,7 +61,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     }
 
     const oldStatus = existingItem.status
-    existingItem.status = getUpdatedDraftStatus(media, existingItem.original)
+    existingItem.status = getDraftStatus(media, existingItem.original)
     existingItem.modified = media
 
     await storage.setItem(id, existingItem)
@@ -129,7 +129,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     }
     else {
       await host.media.upsert(id, existingItem.original!)
-      existingItem.status = DraftStatus.Opened
+      existingItem.status = getDraftStatus(existingItem.original!, existingItem.original)
       existingItem.modified = existingItem.original
       await storage.setItem(id, existingItem)
     }
@@ -211,7 +211,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     const storedList = await storage.getKeys().then(async (keys) => {
       return Promise.all(keys.map(async (key) => {
         const item = await storage.getItem(key) as DraftItem
-        if (item.status === DraftStatus.Opened) {
+        if (item.status === DraftStatus.Pristine) {
           await storage.removeItem(key)
           return null
         }
@@ -252,7 +252,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
       throw new Error(`Cannot select item: no corresponding database entry found for id ${id}`)
     }
 
-    const draftItem = await create(dbItem, DraftStatus.Opened)
+    const draftItem = await create(dbItem)
     select(draftItem)
   }
 
diff --git a/src/app/src/types/draft.ts b/src/app/src/types/draft.ts
index a260ce45..0754ea1e 100644
--- a/src/app/src/types/draft.ts
+++ b/src/app/src/types/draft.ts
@@ -6,7 +6,7 @@ export enum DraftStatus {
   Deleted = 'deleted',
   Created = 'created',
   Updated = 'updated',
-  Opened = 'opened',
+  Pristine = 'pristine',
 }
 
 export interface DraftItem<T = DatabaseItem | MediaItem> {
diff --git a/src/app/src/utils/draft.ts b/src/app/src/utils/draft.ts
index 5a8e8d9b..8528a8f0 100644
--- a/src/app/src/utils/draft.ts
+++ b/src/app/src/utils/draft.ts
@@ -3,8 +3,16 @@ import { DraftStatus } from '../types'
 import { ROOT_ITEM } from './tree'
 import { isEqual } from './database'
 
-export function getUpdatedDraftStatus(modified: BaseItem, original: BaseItem | undefined): DraftStatus {
-  if (!original) {
+export function getDraftStatus(modified?: BaseItem, original?: BaseItem): DraftStatus {
+  if (!modified && !original) {
+    throw new Error('Unconsistent state: both modified and original are undefined')
+  }
+
+  if (!modified) {
+    return DraftStatus.Deleted
+  }
+
+  if (!original || original.id !== modified.id) {
     return DraftStatus.Created
   }
 
@@ -19,7 +27,7 @@ export function getUpdatedDraftStatus(modified: BaseItem, original: BaseItem | u
     }
   }
 
-  return DraftStatus.Opened
+  return DraftStatus.Pristine
 }
 
 export function findDescendantsFromId(list: DraftItem[], id: string): DraftItem[] {
diff --git a/src/app/src/utils/tree.ts b/src/app/src/utils/tree.ts
index 70612c85..5fc9bc92 100644
--- a/src/app/src/utils/tree.ts
+++ b/src/app/src/utils/tree.ts
@@ -33,33 +33,6 @@ export const COLOR_UI_STATUS_MAP: { [key in TreeStatus]?: string } = {
   [TreeStatus.Opened]: 'neutral',
 } as const
 
-export function getTreeStatus(modified: BaseItem, original: BaseItem | undefined): TreeStatus {
-  if (!original) {
-    return TreeStatus.Created
-  }
-
-  if (!modified) {
-    return TreeStatus.Deleted
-  }
-
-  if (modified.id !== original.id) {
-    return TreeStatus.Renamed
-  }
-
-  if (original.extension === ContentFileExtension.Markdown) {
-    if (!isEqual(original as DatabasePageItem, modified as DatabasePageItem)) {
-      return TreeStatus.Updated
-    }
-  }
-  else {
-    if (JSON.stringify(original) !== JSON.stringify(modified)) {
-      return TreeStatus.Updated
-    }
-  }
-
-  return TreeStatus.Opened
-}
-
 export function buildTree(dbItems: ((BaseItem) & { fsPath: string })[], draftList: DraftItem[] | null):
 TreeItem[] {
   const tree: TreeItem[] = []
@@ -211,6 +184,37 @@ TreeItem[] {
   return tree
 }
 
+export function getTreeStatus(modified?: BaseItem, original?: BaseItem): TreeStatus {
+  if (!original && !modified) {
+    throw new Error('Unconsistent state: both modified and original are undefined')
+  }
+
+  if (!original) {
+    return TreeStatus.Created
+  }
+
+  if (!modified) {
+    return TreeStatus.Deleted
+  }
+
+  if (modified.id !== original.id) {
+    return TreeStatus.Renamed
+  }
+
+  if (original.extension === ContentFileExtension.Markdown) {
+    if (!isEqual(original as DatabasePageItem, modified as DatabasePageItem)) {
+      return TreeStatus.Updated
+    }
+  }
+  else {
+    if (JSON.stringify(original) !== JSON.stringify(modified)) {
+      return TreeStatus.Updated
+    }
+  }
+
+  return TreeStatus.Opened
+}
+
 export function findItemFromId(tree: TreeItem[], id: string): TreeItem | null {
   for (const item of tree) {
     if (item.id === id) {
diff --git a/src/app/test/utils/draft.test.ts b/src/app/test/utils/draft.test.ts
index 648254c7..9d52b2c3 100644
--- a/src/app/test/utils/draft.test.ts
+++ b/src/app/test/utils/draft.test.ts
@@ -1,7 +1,9 @@
 import { describe, it, expect } from 'vitest'
-import { findDescendantsFromId } from '../../src/utils/draft'
+import { findDescendantsFromId, getDraftStatus } from '../../src/utils/draft'
 import { draftItemsList } from '../mocks/draft'
+import { dbItemsList } from '../mocks/database'
 import { ROOT_ITEM } from '../../src/utils/tree'
+import { DraftStatus } from '../../src/types'
 
 describe('findDescendantsFromId', () => {
   it('returns exact match for a root level file', () => {
@@ -50,3 +52,43 @@ describe('findDescendantsFromId', () => {
     expect(descendants[0].id).toBe('docs/1.getting-started/1.advanced/1.studio.md')
   })
 })
+
+describe('getDraftStatus', () => {
+  it('returns Deleted status when modified item is undefined', () => {
+    const original = dbItemsList[0] // landing/index.md
+
+    expect(getDraftStatus(undefined, original)).toBe(DraftStatus.Deleted)
+  })
+
+  it('returns Created status when original is undefined', () => {
+    const modified = dbItemsList[1] // docs/1.getting-started/2.introduction.md
+
+    expect(getDraftStatus(modified, undefined)).toBe(DraftStatus.Created)
+  })
+
+  it('returns Created status when original has different id', () => {
+    const original = dbItemsList[0] // landing/index.md
+    const modified = dbItemsList[1] // docs/1.getting-started/2.introduction.md
+
+    expect(getDraftStatus(modified, original)).toBe(DraftStatus.Created)
+  })
+
+  it('returns Updated status when markdown content is different', () => {
+    const original = dbItemsList[1] // docs/1.getting-started/2.introduction.md
+    const modified = {
+      ...original,
+      body: {
+        type: 'minimark',
+        value: ['text', 'Modified'],
+      },
+    }
+
+    expect(getDraftStatus(modified, original)).toBe(DraftStatus.Updated)
+  })
+
+  it('returns Pristine status when markdown content is identical', () => {
+    const original = dbItemsList[1] // docs/1.getting-started/2.introduction.md
+
+    expect(getDraftStatus(original, original)).toBe(DraftStatus.Pristine)
+  })
+})
diff --git a/src/app/test/utils/tree.test.ts b/src/app/test/utils/tree.test.ts
index 8614a81c..0d596d3e 100644
--- a/src/app/test/utils/tree.test.ts
+++ b/src/app/test/utils/tree.test.ts
@@ -4,7 +4,7 @@ import { tree } from '../mocks/tree'
 import type { TreeItem } from '../../src/types/tree'
 import { dbItemsList, nestedDbItemsList } from '../mocks/database'
 import type { DraftItem } from '../../src/types/draft'
-import { DraftStatus, TreeStatus, ContentFileExtension } from '../../src/types'
+import { DraftStatus, TreeStatus } from '../../src/types'
 import type { RouteLocationNormalized } from 'vue-router'
 import type { DatabaseItem } from '../../src/types/database'
 
@@ -49,26 +49,20 @@ describe('buildTree with one level of depth', () => {
   })
 
   it('With draft', () => {
+    const createdDbItem: DatabaseItem & { fsPath: string } = dbItemsList[0]
+
     const draftList: DraftItem[] = [{
-      id: dbItemsList[0].id,
-      fsPath: 'index.md',
+      id: createdDbItem.id,
+      fsPath: createdDbItem.fsPath,
       status: DraftStatus.Created,
-      original: {
-        id: dbItemsList[0].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Created']],
-        },
-      } as unknown as DatabaseItem,
+      original: undefined,
       modified: {
-        id: dbItemsList[0].id,
-        extension: ContentFileExtension.Markdown,
+        ...dbItemsList[0],
         body: {
           type: 'minimark',
           value: [['text', 'Created']],
         },
-      } as unknown as DatabaseItem,
+      },
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -82,23 +76,19 @@ describe('buildTree with one level of depth', () => {
   })
 
   it('With DELETED draft file in existing directory', () => {
+    const deletedDbItem: DatabaseItem & { fsPath: string } = dbItemsList[1] // 2.introduction.md
+
     const draftList: DraftItem[] = [{
-      id: 'docs/1.getting-started/2.deleted.md',
-      fsPath: '1.getting-started/2.deleted.md',
+      id: deletedDbItem.id,
+      fsPath: deletedDbItem.fsPath,
       status: DraftStatus.Deleted,
       modified: undefined,
-      original: {
-        id: 'docs/1.getting-started/2.deleted.md',
-        path: '/getting-started/deleted',
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Deleted']],
-        },
-      } as unknown as DatabaseItem,
+      original: deletedDbItem,
     }]
 
-    const tree = buildTree(dbItemsList, draftList)
+    const dbItemsListWithoutDeletedDbItem = dbItemsList.filter(item => item.id !== deletedDbItem.id)
+
+    const tree = buildTree(dbItemsListWithoutDeletedDbItem, draftList)
 
     expect(tree).toStrictEqual([
       { ...result[0] },
@@ -106,13 +96,13 @@ describe('buildTree with one level of depth', () => {
         ...result[1],
         status: TreeStatus.Updated,
         children: [
-          ...result[1].children!,
+          result[1].children![1],
           {
-            id: 'docs/1.getting-started/2.deleted.md',
-            name: 'deleted',
-            fsPath: '1.getting-started/2.deleted.md',
+            id: deletedDbItem.id,
+            name: 'introduction',
+            fsPath: deletedDbItem.fsPath,
             type: 'file',
-            routePath: '/getting-started/deleted',
+            routePath: deletedDbItem.path,
             status: TreeStatus.Deleted,
           },
         ],
@@ -121,40 +111,33 @@ describe('buildTree with one level of depth', () => {
   })
 
   it('With DELETED draft file in non existing directory', () => {
+    const deletedDbItem: DatabaseItem & { fsPath: string } = dbItemsList[2] // 3.installation.md
+
     const draftList: DraftItem[] = [{
-      id: 'docs/1.deleted-directory/2.deleted-file.md',
-      fsPath: '1.deleted-directory/2.deleted-file.md',
+      id: deletedDbItem.id,
+      fsPath: deletedDbItem.fsPath,
       status: DraftStatus.Deleted,
       modified: undefined,
-      original: {
-        id: 'docs/1.deleted-directory/2.deleted-file.md',
-        path: '/deleted-directory/deleted-file',
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Deleted']],
-        },
-      } as unknown as DatabaseItem,
+      original: deletedDbItem,
     }]
 
-    const tree = buildTree(dbItemsList, draftList)
+    const dbItemsListWithoutDeletedDbItem = dbItemsList.filter(item => item.id !== deletedDbItem.id)
+
+    const tree = buildTree(dbItemsListWithoutDeletedDbItem, draftList)
 
     expect(tree).toStrictEqual([
-      ...result,
+      result[0],
       {
-        id: 'docs/1.deleted-directory',
-        name: 'deleted-directory',
-        fsPath: '1.deleted-directory',
-        routePath: '/deleted-directory',
-        type: 'directory',
-        status: TreeStatus.Deleted,
+        ...result[1],
+        status: TreeStatus.Updated,
         children: [
+          result[1].children![0],
           {
-            id: 'docs/1.deleted-directory/2.deleted-file.md',
-            name: 'deleted-file',
-            fsPath: '1.deleted-directory/2.deleted-file.md',
-            routePath: '/deleted-directory/deleted-file',
+            id: deletedDbItem.id,
+            name: 'installation',
+            fsPath: deletedDbItem.fsPath,
             type: 'file',
+            routePath: deletedDbItem.path,
             status: TreeStatus.Deleted,
           },
         ],
@@ -163,26 +146,20 @@ describe('buildTree with one level of depth', () => {
   })
 
   it('With UPDATED draft file in existing directory (directory status is set)', () => {
+    const updatedDbItem: DatabaseItem & { fsPath: string } = dbItemsList[1] // 2.introduction.md
+
     const draftList: DraftItem[] = [{
-      id: dbItemsList[1].id,
-      fsPath: '1.getting-started/2.introduction.md',
+      id: updatedDbItem.id,
+      fsPath: updatedDbItem.fsPath,
       status: DraftStatus.Updated,
-      original: {
-        id: dbItemsList[1].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
+      original: updatedDbItem,
       modified: {
-        id: dbItemsList[1].id,
-        extension: ContentFileExtension.Markdown,
+        ...updatedDbItem,
         body: {
           type: 'minimark',
           value: [['text', 'Modified']],
         },
-      } as unknown as DatabaseItem,
+      },
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -205,47 +182,22 @@ describe('buildTree with one level of depth', () => {
     expect(tree).toStrictEqual(expectedTree)
   })
 
-  it('With Created and OPENED draft files in exsiting directory (directory status is set)', () => {
+  it('With CREATED and OPENED draft files in exsiting directory (directory status is set)', () => {
+    const createdDbItem: DatabaseItem & { fsPath: string } = dbItemsList[1] // 2.introduction.md
+    const openedDbItem: DatabaseItem & { fsPath: string } = dbItemsList[2] // 3.installation.md
+
     const draftList: DraftItem[] = [{
-      id: dbItemsList[1].id,
-      fsPath: '1.getting-started/2.introduction.md',
+      id: createdDbItem.id,
+      fsPath: createdDbItem.fsPath,
       status: DraftStatus.Created,
-      original: {
-        id: dbItemsList[1].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Created']],
-        },
-      } as unknown as DatabaseItem,
-      modified: {
-        id: dbItemsList[1].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Created']],
-        },
-      } as unknown as DatabaseItem,
+      original: undefined,
+      modified: createdDbItem,
     }, {
-      id: dbItemsList[2].id,
-      fsPath: '1.getting-started/3.installation.md',
-      status: DraftStatus.Opened,
-      original: {
-        id: dbItemsList[2].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
-      modified: {
-        id: dbItemsList[2].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
+      id: openedDbItem.id,
+      fsPath: openedDbItem.fsPath,
+      status: DraftStatus.Pristine,
+      original: openedDbItem,
+      modified: openedDbItem,
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -258,7 +210,6 @@ describe('buildTree with one level of depth', () => {
         children: [
           { ...result[1].children![0], status: TreeStatus.Created },
           { ...result[1].children![1], status: TreeStatus.Opened },
-          ...result[1].children!.slice(2),
         ],
       },
     ]
@@ -267,46 +218,21 @@ describe('buildTree with one level of depth', () => {
   })
 
   it('With OPENED draft files in existing directory (directory status is not set)', () => {
+    const openedDbItem1: DatabaseItem & { fsPath: string } = dbItemsList[1] // 2.introduction.md
+    const openedDbItem2: DatabaseItem & { fsPath: string } = dbItemsList[2] // 3.installation.md
+
     const draftList: DraftItem[] = [{
-      id: dbItemsList[1].id,
-      fsPath: '1.getting-started/2.introduction.md',
-      status: DraftStatus.Opened,
-      original: {
-        id: dbItemsList[1].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
-      modified: {
-        id: dbItemsList[1].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
+      id: openedDbItem1.id,
+      fsPath: openedDbItem1.fsPath,
+      status: DraftStatus.Pristine,
+      original: openedDbItem1,
+      modified: openedDbItem1,
     }, {
-      id: dbItemsList[2].id,
-      fsPath: '1.getting-started/3.installation.md',
-      status: DraftStatus.Opened,
-      original: {
-        id: dbItemsList[2].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
-      modified: {
-        id: dbItemsList[2].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
+      id: openedDbItem2.id,
+      fsPath: openedDbItem2.fsPath,
+      status: DraftStatus.Pristine,
+      original: openedDbItem2,
+      modified: openedDbItem2,
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -327,7 +253,7 @@ describe('buildTree with one level of depth', () => {
     expect(tree).toStrictEqual(expectedTree)
   })
 
-  it.only('With same id DELETED and CREATED draft file resulting in RENAMED', () => {
+  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
 
@@ -411,26 +337,20 @@ describe('buildTree with two levels of depth', () => {
   })
 
   it('With one level of depth draft files', () => {
+    const updatedDbItem: DatabaseItem & { fsPath: string } = nestedDbItemsList[0] // 1.essentials/2.configuration.md
+
     const draftList: DraftItem[] = [{
-      id: nestedDbItemsList[0].id,
-      fsPath: '1.essentials/2.configuration.md',
+      id: updatedDbItem.id,
+      fsPath: updatedDbItem.fsPath,
       status: DraftStatus.Updated,
-      original: {
-        id: nestedDbItemsList[0].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
+      original: updatedDbItem,
       modified: {
-        id: nestedDbItemsList[0].id,
-        extension: ContentFileExtension.Markdown,
+        ...updatedDbItem,
         body: {
           type: 'minimark',
           value: [['text', 'Modified']],
         },
-      } as unknown as DatabaseItem,
+      },
     }]
 
     const tree = buildTree(nestedDbItemsList, draftList)
@@ -446,26 +366,20 @@ describe('buildTree with two levels of depth', () => {
   })
 
   it('With nested levels of depth draft files', () => {
+    const updatedDbItem: DatabaseItem & { fsPath: string } = nestedDbItemsList[1] // 1.essentials/1.nested/2.advanced.md
+
     const draftList: DraftItem[] = [{
-      id: nestedDbItemsList[1].id,
-      fsPath: '1.essentials/1.nested/2.advanced.md',
+      id: updatedDbItem.id,
+      fsPath: updatedDbItem.fsPath,
       status: DraftStatus.Updated,
-      original: {
-        id: nestedDbItemsList[1].id,
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Original']],
-        },
-      } as unknown as DatabaseItem,
+      original: updatedDbItem,
       modified: {
-        id: nestedDbItemsList[1].id,
-        extension: ContentFileExtension.Markdown,
+        ...updatedDbItem,
         body: {
           type: 'minimark',
           value: [['text', 'Modified']],
         },
-      } as unknown as DatabaseItem,
+      },
     }]
 
     const tree = buildTree(nestedDbItemsList, draftList)
@@ -489,156 +403,38 @@ describe('buildTree with two levels of depth', () => {
     }])
   })
 
-  it ('With DELETED draft file in nested existing directory ', () => {
-    const draftList: DraftItem[] = [{
-      id: 'docs/1.essentials/1.nested/2.deleted.md',
-      fsPath: '1.essentials/1.nested/2.deleted.md',
-      status: DraftStatus.Deleted,
-      modified: undefined,
-      original: {
-        id: 'docs/1.essentials/1.nested/2.deleted.md',
-        path: '/essentials/nested/deleted',
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Deleted']],
-        },
-      } as unknown as DatabaseItem,
-    }]
-
-    const tree = buildTree(nestedDbItemsList, draftList)
+  it ('With DELETED draft file in nested non existing directory (directory status is set)', () => {
+    const deletedDbItem: DatabaseItem & { fsPath: string } = nestedDbItemsList[1] // 1.essentials/1.nested/2.advanced.md
 
-    expect(tree).toStrictEqual([{
-      ...result[0],
-      status: TreeStatus.Updated,
-      children: [
-        result[0].children![0],
-        {
-          ...result[0].children![1],
-          status: TreeStatus.Updated,
-          children: [
-            ...result[0].children![1].children!,
-            {
-              id: 'docs/1.essentials/1.nested/2.deleted.md',
-              name: 'deleted',
-              fsPath: '1.essentials/1.nested/2.deleted.md',
-              routePath: '/essentials/nested/deleted',
-              type: 'file',
-              status: TreeStatus.Deleted,
-            },
-          ],
-        },
-      ],
-    }])
-  })
-
-  it ('With DELETED draft file in nested non existing directory', () => {
     const draftList: DraftItem[] = [{
-      id: 'docs/1.essentials/1.deleted/1.deleted.md',
-      fsPath: '1.essentials/1.deleted/1.deleted.md',
+      id: deletedDbItem.id,
+      fsPath: deletedDbItem.fsPath,
       status: DraftStatus.Deleted,
       modified: undefined,
-      original: {
-        id: 'docs/1.essentials/1.deleted/1.deleted.md',
-        path: '/essentials/deleted/deleted',
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Deleted']],
-        },
-      } as unknown as DatabaseItem,
+      original: deletedDbItem,
     }]
 
-    const tree = buildTree(nestedDbItemsList, draftList)
-
-    expect(tree).toStrictEqual([{
-      ...result[0],
-      status: TreeStatus.Updated,
-      children: [
-        result[0].children![0],
-        result[0].children![1],
-        {
-          id: 'docs/1.essentials/1.deleted',
-          name: 'deleted',
-          fsPath: '1.essentials/1.deleted',
-          routePath: '/essentials/deleted',
-          type: 'directory',
-          status: TreeStatus.Deleted,
-          children: [
-            {
-              id: 'docs/1.essentials/1.deleted/1.deleted.md',
-              name: 'deleted',
-              fsPath: '1.essentials/1.deleted/1.deleted.md',
-              routePath: '/essentials/deleted/deleted',
-              type: 'file',
-              status: TreeStatus.Deleted,
-            },
-          ],
-        },
-      ],
-    }])
-  })
+    // Remove the deleted item from the nestedDbItemsList
+    const nestedDbItemsListWithoutDeletedDbItem = nestedDbItemsList.filter(item => item.id !== deletedDbItem.id)
 
-  it ('With DELETED draft file in multi-nested non existing directory chain', () => {
-    const draftList: DraftItem[] = [{
-      id: 'docs/1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
-      fsPath: '1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
-      status: DraftStatus.Deleted,
-      modified: undefined,
-      original: {
-        id: 'docs/1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
-        path: '/essentials/deep/deeper/deepest/file',
-        extension: ContentFileExtension.Markdown,
-        body: {
-          type: 'minimark',
-          value: [['text', 'Deleted']],
-        },
-      } as unknown as DatabaseItem,
-    }]
-
-    const tree = buildTree(nestedDbItemsList, draftList)
+    const tree = buildTree(nestedDbItemsListWithoutDeletedDbItem, draftList)
 
     expect(tree).toStrictEqual([{
       ...result[0],
       status: TreeStatus.Updated,
       children: [
         result[0].children![0],
-        result[0].children![1],
         {
-          id: 'docs/1.essentials/1.deep',
-          name: 'deep',
-          fsPath: '1.essentials/1.deep',
-          routePath: '/essentials/deep',
-          type: 'directory',
+          ...result[0].children![1],
           status: TreeStatus.Deleted,
           children: [
             {
-              id: 'docs/1.essentials/1.deep/2.deeper',
-              name: 'deeper',
-              fsPath: '1.essentials/1.deep/2.deeper',
-              routePath: '/essentials/deep/deeper',
-              type: 'directory',
+              id: deletedDbItem.id,
+              name: 'advanced',
+              fsPath: deletedDbItem.fsPath,
+              routePath: deletedDbItem.path,
+              type: 'file',
               status: TreeStatus.Deleted,
-              children: [
-                {
-                  id: 'docs/1.essentials/1.deep/2.deeper/3.deepest',
-                  name: 'deepest',
-                  fsPath: '1.essentials/1.deep/2.deeper/3.deepest',
-                  routePath: '/essentials/deep/deeper/deepest',
-                  type: 'directory',
-                  status: TreeStatus.Deleted,
-                  children: [
-                    {
-                      id: 'docs/1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
-                      name: 'file',
-                      fsPath: '1.essentials/1.deep/2.deeper/3.deepest/1.file.md',
-                      routePath: '/essentials/deep/deeper/deepest/file',
-                      type: 'file',
-                      status: TreeStatus.Deleted,
-                    },
-                  ],
-                },
-              ],
             },
           ],
         },
@@ -649,29 +445,16 @@ describe('buildTree with two levels of depth', () => {
 
 describe('getTreeStatus', () => {
   it('draft is CREATED if originalDatabaseItem is not defined', () => {
-    const original: DatabaseItem = undefined as never
-    const modified: DatabaseItem = {
-      id: 'landing/index.md',
-      title: 'Home',
-      body: {
-        type: 'minimark',
-        value: [],
-      },
-      description: 'Home page',
-      extension: 'md',
-      stem: 'index',
-      meta: {},
-    }
+    const modified: DatabaseItem = dbItemsList[0] // landing/index.md
 
-    const status = getTreeStatus(modified, original)
+    const status = getTreeStatus(modified, undefined)
     expect(status).toBe(TreeStatus.Created)
   })
 
   it('draft is OPENED if originalDatabaseItem is defined and is the same as draftedDocument', () => {
-    const original: DatabaseItem = dbItemsList[0]
-    const draft: DatabaseItem = original
+    const original: DatabaseItem = dbItemsList[0] // landing/index.md
 
-    const status = getTreeStatus(draft, original)
+    const status = getTreeStatus(original, original)
     expect(status).toBe(TreeStatus.Opened)
   })
 
@@ -698,7 +481,7 @@ describe('getTreeStatus', () => {
   })
 
   it('draft is RENAMED if originalDatabaseItem is defined and id is different from draftedDocument', () => {
-    const original: DatabaseItem = dbItemsList[0]
+    const original: DatabaseItem = dbItemsList[0] // landing/index.md
     const modified: DatabaseItem = {
       ...original,
       id: 'landing/renamed.md',
@@ -709,7 +492,7 @@ describe('getTreeStatus', () => {
   })
 
   it('draft is DELETED if modifiedDatabaseItem is not defined', () => {
-    const original: DatabaseItem = dbItemsList[0]
+    const original: DatabaseItem = dbItemsList[0] // landing/index.md
     const modified: DatabaseItem = undefined as never
 
     const status = getTreeStatus(modified, original)

From 4ab3b77cc8670838874b038394e7ea44694c1257 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Thu, 2 Oct 2025 13:02:51 +0200
Subject: [PATCH 6/7] up

---
 src/app/src/utils/content.ts                  |   2 -
 .../composables/useDraftDocuments.test.ts     | 292 ++++++++++++++++++
 src/app/test/mocks/document.ts                |  21 ++
 src/app/test/mocks/git.ts                     |  27 ++
 src/app/test/mocks/host.ts                    |  31 ++
 src/app/test/{ => unit}/utils/context.test.ts |   6 +-
 src/app/test/{ => unit}/utils/draft.test.ts   |  10 +-
 src/app/test/{ => unit}/utils/tree.test.ts    |  14 +-
 src/app/test/utils/index.ts                   |  23 ++
 9 files changed, 409 insertions(+), 17 deletions(-)
 create mode 100644 src/app/test/integration/composables/useDraftDocuments.test.ts
 create mode 100644 src/app/test/mocks/document.ts
 create mode 100644 src/app/test/mocks/git.ts
 create mode 100644 src/app/test/mocks/host.ts
 rename src/app/test/{ => unit}/utils/context.test.ts (98%)
 rename src/app/test/{ => unit}/utils/draft.test.ts (92%)
 rename src/app/test/{ => unit}/utils/tree.test.ts (98%)
 create mode 100644 src/app/test/utils/index.ts

diff --git a/src/app/src/utils/content.ts b/src/app/src/utils/content.ts
index 323696e5..2b547b24 100644
--- a/src/app/src/utils/content.ts
+++ b/src/app/src/utils/content.ts
@@ -151,8 +151,6 @@ async function generateDocumentFromMarkdownContent(id: string, content: string):
   } as unknown as DatabaseItem
 }
 
-// MARK: - Generate Content
-
 export async function generateContentFromDocument(document: DatabaseItem): Promise<string | null> {
   const [id, _hash] = document.id.split('#')
   const extension = id!.split('.').pop()
diff --git a/src/app/test/integration/composables/useDraftDocuments.test.ts b/src/app/test/integration/composables/useDraftDocuments.test.ts
new file mode 100644
index 00000000..934e140c
--- /dev/null
+++ b/src/app/test/integration/composables/useDraftDocuments.test.ts
@@ -0,0 +1,292 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { type StudioHost, type DatabaseItem, DraftStatus } from '../../../src/types'
+import { createMockDocument, createMockStorage, createMockHooks } from '../../mocks/document'
+import { createMockHost } from '../../mocks/host'
+import { createMockGit } from '../../mocks/git'
+import { useDraftDocuments } from '../../../src/composables/useDraftDocuments'
+import { normalizeKey, generateUniqueDocumentId } from '../../utils'
+
+// Use the existing utilities from mocks/document.ts
+const mockStorage = createMockStorage()
+const mockHooks = createMockHooks()
+
+vi.mock('unstorage/drivers/indexedb', () => ({
+  default: () => ({
+    async getItem(key: string) {
+      return mockStorage.get(key) || null
+    },
+    async setItem(key: string, value: DatabaseItem) {
+      mockStorage.set(key, value)
+    },
+    async removeItem(key: string) {
+      mockStorage.delete(key)
+    },
+    async getKeys() {
+      return Array.from(mockStorage.keys())
+    },
+  }),
+}))
+
+vi.mock('../../../src/composables/useHooks', () => ({
+  useHooks: () => mockHooks,
+}))
+
+vi.mock('../../../src/utils/content', () => ({
+  generateContentFromDocument: vi.fn().mockResolvedValue('Generated content'),
+}))
+
+// Mock createSharedComposable to return function directly (no sharing)
+vi.mock('@vueuse/core', () => ({
+  createSharedComposable: <T extends (...args: unknown[]) => unknown>(fn: T): T => fn,
+}))
+
+describe('useDraftDocuments - Action Chains Integration Tests', () => {
+  let mockHost: StudioHost
+  let mockGit: ReturnType<typeof createMockGit>
+  let documentId: string
+
+  beforeEach(() => {
+    // Reset mocks using the pattern from mocks/document.ts
+    vi.clearAllMocks()
+    mockStorage.clear()
+    mockHooks.callHook.mockResolvedValue(undefined)
+
+    // Create unique test document ID for each test
+    documentId = generateUniqueDocumentId()
+
+    // Create fresh mock instances using utilities
+    mockGit = createMockGit()
+    mockHost = createMockHost()
+  })
+
+  it('Create > Revert', async () => {
+    const draftDocuments = useDraftDocuments(mockHost, mockGit as never)
+    const { create, revert, list } = draftDocuments
+
+    const mockDocument = createMockDocument(documentId)
+
+    /*
+      STEP 1: CREATE
+    */
+    await create(mockDocument)
+
+    // Storage
+    expect(mockStorage.size).toEqual(1)
+    const storedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId  ))!)
+    expect(storedDraft).toHaveProperty('status', DraftStatus.Created)
+
+    // In memory
+    expect(list.value).toHaveLength(1)
+    expect(list.value[0].status).toEqual(DraftStatus.Created)
+
+    /*
+      STEP 2: REVERT
+    */
+    await revert(documentId)
+
+    // Storage
+    expect(mockStorage.size).toEqual(0)
+
+    // In memory
+    expect(list.value).toHaveLength(0)
+  })
+
+  it('Create > Update > Revert', async () => {
+    const draftDocuments = useDraftDocuments(mockHost, mockGit as never)
+    const { create, update, revert, list } = draftDocuments
+
+    const mockDocument = createMockDocument(documentId)
+
+    /*
+      STEP 1: CREATE
+    */
+    await create(mockDocument)
+
+    // Storage
+    expect(mockStorage.size).toEqual(1)
+    let storedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
+    expect(storedDraft).toHaveProperty('status', DraftStatus.Created)
+
+    // In memory
+    expect(list.value).toHaveLength(1)
+    expect(list.value[0].status).toEqual(DraftStatus.Created)
+
+    /*
+      STEP 2: UPDATE
+    */
+    await update(documentId, mockDocument)
+
+    // Storage
+    expect(mockStorage.size).toEqual(1)
+    storedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
+    expect(storedDraft).toHaveProperty('status', DraftStatus.Created)
+
+    // In memory
+    expect(list.value).toHaveLength(1)
+    expect(list.value[0].status).toEqual(DraftStatus.Created)
+
+    /*
+      STEP 3: REVERT
+    */
+    await revert(documentId)
+
+    // Storage
+    expect(mockStorage.size).toEqual(0)
+
+    // In memory
+    expect(list.value).toHaveLength(0)
+  })
+
+  it('Select > Update > Revert', async () => {
+    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
+    */
+    await selectById(documentId)
+
+    // Storage
+    expect(mockStorage.size).toEqual(1)
+    let storedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
+    expect(storedDraft).toHaveProperty('status', DraftStatus.Pristine)
+
+    // In memory
+    expect(list.value).toHaveLength(1)
+    expect(list.value[0].status).toEqual(DraftStatus.Pristine)
+
+    /*
+      STEP 2: UPDATE
+    */
+    const updatedDocument = createMockDocument(documentId, {
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Updated content' }],
+      },
+    })
+    await update(documentId, updatedDocument)
+
+    // Storage
+    expect(mockStorage.size).toEqual(1)
+    storedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
+    expect(storedDraft).toHaveProperty('status', DraftStatus.Updated)
+
+    // In memory
+    expect(list.value).toHaveLength(1)
+    expect(list.value[0].status).toEqual(DraftStatus.Updated)
+
+    /*
+      STEP 3: REVERT
+    */
+    await revert(documentId)
+
+    // Storage
+    expect(mockStorage.size).toEqual(1)
+    storedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
+    expect(storedDraft).toHaveProperty('status', DraftStatus.Pristine)
+
+    // In memory
+    expect(list.value).toHaveLength(1)
+    expect(list.value[0].status).toEqual(DraftStatus.Pristine)
+  })
+
+  it('Select > Rename > Update', async () => {
+    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, '')
+
+    /*
+      STEP 1: SELECT
+    */
+    await selectById(documentId)
+
+    // Storage
+    expect(mockStorage.size).toEqual(1)
+    const selectedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
+    expect(selectedDraft).toHaveProperty('status', DraftStatus.Pristine)
+
+    // In memory
+    expect(list.value).toHaveLength(1)
+    expect(list.value[0].status).toEqual(DraftStatus.Pristine)
+
+    /*
+      STEP 2: RENAME
+    */
+    const newId = generateUniqueDocumentId()
+    const renamedDraftItem = await rename(documentId, newId)
+
+    // Storage
+    expect(mockStorage.size).toEqual(2)
+
+    const renamedDraftStorage = JSON.parse(mockStorage.get(normalizeKey(renamedDraftItem.id))!)
+    expect(renamedDraftStorage).toHaveProperty('status', DraftStatus.Created)
+    expect(renamedDraftStorage).toHaveProperty('id', newId)
+    expect(renamedDraftStorage).toHaveProperty('original', createdDocument)
+
+    // Deleted original draft
+    let deletedDraftStorage = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
+    expect(deletedDraftStorage).toHaveProperty('status', DraftStatus.Deleted)
+    expect(deletedDraftStorage).toHaveProperty('id', documentId)
+    expect(deletedDraftStorage).toHaveProperty('original', createdDocument)
+
+    // In memory
+    expect(list.value).toHaveLength(2)
+
+    // Deleted original draft
+    let deletedDraftMemory = list.value.find(item => item.id === documentId)
+    expect(deletedDraftMemory).toHaveProperty('status', DraftStatus.Deleted)
+    expect(deletedDraftMemory).toHaveProperty('original', createdDocument)
+
+    // Renamed original draft
+    const renamedDraftMemory = list.value.find(item => item.id === newId)
+    expect(renamedDraftMemory).toHaveProperty('status', DraftStatus.Created)
+    expect(renamedDraftMemory).toHaveProperty('id', newId)
+    expect(renamedDraftMemory).toHaveProperty('original', createdDocument)
+
+    /**
+     * STEP 3: UPDATE
+     */
+    const updatedDocument = createMockDocument(newId, {
+      body: {
+        type: 'minimark',
+        value: [{ type: 'text', text: 'Updated content' }],
+      },
+    })
+    await update(newId, updatedDocument)
+
+    // Storage
+    expect(mockStorage.size).toEqual(2)
+
+    // Updated renamed draft
+    const updatedDraftStorage = JSON.parse(mockStorage.get(normalizeKey(newId))!)
+    expect(updatedDraftStorage).toHaveProperty('status', DraftStatus.Created)
+    expect(updatedDraftStorage).toHaveProperty('id', newId)
+    expect(updatedDraftStorage).toHaveProperty('original', createdDocument)
+
+    // Deleted original draft
+    deletedDraftStorage = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
+    expect(deletedDraftStorage).toHaveProperty('status', DraftStatus.Deleted)
+    expect(deletedDraftStorage).toHaveProperty('id', documentId)
+    expect(deletedDraftStorage).toHaveProperty('original', createdDocument)
+
+    // In memory
+    expect(list.value).toHaveLength(2)
+
+    // Deleted original draft
+    deletedDraftMemory = list.value.find(item => item.id === documentId)
+    expect(deletedDraftMemory).toHaveProperty('status', DraftStatus.Deleted)
+    expect(deletedDraftMemory).toHaveProperty('original', createdDocument)
+
+    // Renamed original draft
+    const updatedDraftMemory = list.value.find(item => item.id === newId)
+    expect(updatedDraftMemory).toHaveProperty('status', DraftStatus.Created)
+    expect(updatedDraftMemory).toHaveProperty('original', createdDocument)
+  })
+})
diff --git a/src/app/test/mocks/document.ts b/src/app/test/mocks/document.ts
new file mode 100644
index 00000000..78db2179
--- /dev/null
+++ b/src/app/test/mocks/document.ts
@@ -0,0 +1,21 @@
+import type { DatabasePageItem } from '../../src/types'
+import { vi } from 'vitest'
+
+export const createMockDocument = (id: string, overrides?: Partial<DatabasePageItem>) => ({
+  id,
+  path: `/${id.split('/').pop()?.replace('.md', '')}`,
+  stem: id.split('/').pop()?.replace('.md', '') || 'document',
+  extension: 'md',
+  body: {
+    type: 'minimark',
+    value: [{ type: 'text', text: 'Test content' }],
+  },
+  meta: {},
+  ...overrides,
+})
+
+export const createMockHooks = () => ({
+  callHook: vi.fn().mockResolvedValue(undefined),
+})
+
+export const createMockStorage = () => new Map<string, string>()
diff --git a/src/app/test/mocks/git.ts b/src/app/test/mocks/git.ts
new file mode 100644
index 00000000..276e1141
--- /dev/null
+++ b/src/app/test/mocks/git.ts
@@ -0,0 +1,27 @@
+import { vi } from 'vitest'
+import type { GithubFile } from '../../src/types/git'
+import type { useGit } from '../../src/composables/useGit'
+
+export const createMockGit = (githubFile?: GithubFile): typeof useGit => ({
+  fetchFile: vi.fn().mockResolvedValue(githubFile || createMockGithubFile()),
+} as never)
+
+export const createMockGithubFile = (overrides?: Partial<GithubFile>): GithubFile => ({
+  path: 'content/document.md',
+  name: 'document.md',
+  content: 'Test content',
+  sha: 'abc123',
+  size: 100,
+  encoding: 'utf-8',
+  type: 'file',
+  url: 'https://example.com/document.md',
+  html_url: 'https://example.com/document.md',
+  git_url: 'https://example.com/document.md',
+  download_url: 'https://example.com/document.md',
+  _links: {
+    self: 'https://example.com/document.md',
+    git: 'https://example.com/document.md',
+    html: 'https://example.com/document.md',
+  },
+  ...overrides,
+})
diff --git a/src/app/test/mocks/host.ts b/src/app/test/mocks/host.ts
new file mode 100644
index 00000000..df9a0461
--- /dev/null
+++ b/src/app/test/mocks/host.ts
@@ -0,0 +1,31 @@
+import type { StudioHost } from '../../src/types'
+import { vi } from 'vitest'
+import { createMockDocument } from './document'
+
+// Simple implementation that mimics the real getFileSystemPath logic
+const getFileSystemPath = (id: string) => {
+  return `/${id.split('/').slice(1).join('/')}`
+}
+
+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) => {
+      const id = fsPath.startsWith('docs/') ? fsPath : `docs${fsPath}`
+      return createMockDocument(id, {
+        path: routePath,
+        stem: fsPath.split('/').pop()?.replace('.md', ''),
+        body: {
+          type: 'minimark',
+          value: [{ type: 'text', text: content || 'Test content' }],
+        },
+      })
+    }),
+    upsert: vi.fn().mockResolvedValue(undefined),
+    delete: vi.fn().mockResolvedValue(undefined),
+    getFileSystemPath,
+  },
+  app: {
+    requestRerender: vi.fn(),
+  },
+} as never)
diff --git a/src/app/test/utils/context.test.ts b/src/app/test/unit/utils/context.test.ts
similarity index 98%
rename from src/app/test/utils/context.test.ts
rename to src/app/test/unit/utils/context.test.ts
index 7882f945..eacf37f7 100644
--- a/src/app/test/utils/context.test.ts
+++ b/src/app/test/unit/utils/context.test.ts
@@ -1,7 +1,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 { computeActionItems, STUDIO_ITEM_ACTION_DEFINITIONS } from '../../../src/utils/context'
+import { StudioItemActionId, type TreeItem } from '../../../src/types'
+import { TreeStatus } from '../../../src/types'
 
 describe('computeActionItems', () => {
   it('should return all actions when item is undefined', () => {
diff --git a/src/app/test/utils/draft.test.ts b/src/app/test/unit/utils/draft.test.ts
similarity index 92%
rename from src/app/test/utils/draft.test.ts
rename to src/app/test/unit/utils/draft.test.ts
index 9d52b2c3..86ea0265 100644
--- a/src/app/test/utils/draft.test.ts
+++ b/src/app/test/unit/utils/draft.test.ts
@@ -1,9 +1,9 @@
 import { describe, it, expect } from 'vitest'
-import { findDescendantsFromId, getDraftStatus } from '../../src/utils/draft'
-import { draftItemsList } from '../mocks/draft'
-import { dbItemsList } from '../mocks/database'
-import { ROOT_ITEM } from '../../src/utils/tree'
-import { DraftStatus } from '../../src/types'
+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'
 
 describe('findDescendantsFromId', () => {
   it('returns exact match for a root level file', () => {
diff --git a/src/app/test/utils/tree.test.ts b/src/app/test/unit/utils/tree.test.ts
similarity index 98%
rename from src/app/test/utils/tree.test.ts
rename to src/app/test/unit/utils/tree.test.ts
index 0d596d3e..a72b7537 100644
--- a/src/app/test/utils/tree.test.ts
+++ b/src/app/test/unit/utils/tree.test.ts
@@ -1,12 +1,12 @@
 import { describe, it, expect } from 'vitest'
-import { buildTree, findParentFromId, findItemFromRoute, findItemFromId, findDescendantsFileItemsFromId, getTreeStatus } from '../../src/utils/tree'
-import { tree } from '../mocks/tree'
-import type { TreeItem } from '../../src/types/tree'
-import { dbItemsList, nestedDbItemsList } from '../mocks/database'
-import type { DraftItem } from '../../src/types/draft'
-import { DraftStatus, TreeStatus } from '../../src/types'
+import { buildTree, findParentFromId, findItemFromRoute, findItemFromId, findDescendantsFileItemsFromId, getTreeStatus } from '../../../src/utils/tree'
+import { tree } from '../../../test/mocks/tree'
+import type { TreeItem } from '../../../src/types/tree'
+import { dbItemsList, nestedDbItemsList } from '../../../test/mocks/database'
+import type { DraftItem } from '../../../src/types/draft'
+import { DraftStatus, TreeStatus } from '../../../src/types'
 import type { RouteLocationNormalized } from 'vue-router'
-import type { DatabaseItem } from '../../src/types/database'
+import type { DatabaseItem } from '../../../src/types/database'
 
 describe('buildTree with one level of depth', () => {
   // Result based on dbItemsList mock
diff --git a/src/app/test/utils/index.ts b/src/app/test/utils/index.ts
new file mode 100644
index 00000000..c9991c75
--- /dev/null
+++ b/src/app/test/utils/index.ts
@@ -0,0 +1,23 @@
+/**
+ * Normalize a storage key using the same logic as unstorage
+ */
+export function normalizeKey(key: string): string {
+  if (!key) {
+    return ''
+  }
+
+  return key
+    .split('?')[0] // Remove query parameters if any
+    ?.replace(/[/\\]/g, ':') // Replace forward/back slashes with colons
+    .replace(/:+/g, ':') // Replace multiple consecutive colons with single colon
+    .replace(/^:|:$/g, '') // Remove leading/trailing colons
+    || ''
+}
+
+/**
+ * Generate a unique test document ID to avoid conflicts between tests
+ */
+export function generateUniqueDocumentId(filename = 'document'): string {
+  const uniqueId = Math.random().toString(36).substr(2, 9)
+  return `docs/${filename}-${uniqueId}.md`
+}

From cdbe674f7854a101f8a1c518aadec22fd77b2031 Mon Sep 17 00:00:00 2001
From: Baptiste Leproux <leproux.baptiste@gmail.com>
Date: Thu, 2 Oct 2025 15:24:56 +0200
Subject: [PATCH 7/7] up

---
 src/app/src/composables/useDraftDocuments.ts  |  9 ++-----
 src/app/src/utils/database.ts                 |  8 ++----
 .../composables/useDraftDocuments.test.ts     | 12 ++++-----
 src/app/test/mocks/document.ts                |  2 +-
 src/app/test/mocks/draft.ts                   | 26 +++++++++----------
 src/app/test/mocks/host.ts                    |  2 +-
 src/app/test/unit/utils/tree.test.ts          | 16 ++++--------
 7 files changed, 30 insertions(+), 45 deletions(-)

diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index 72a0e3c1..2eb19041 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -1,7 +1,7 @@
 import { createStorage } from 'unstorage'
 import indexedDbDriver from 'unstorage/drivers/indexedb'
 import { ref } from 'vue'
-import type { DatabaseItem, DraftItem, StudioHost, GithubFile, DatabasePageItem, RawFile } from '../types'
+import type { DatabaseItem, DraftItem, StudioHost, GithubFile, RawFile } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
 import { generateContentFromDocument } from '../utils/content'
@@ -173,16 +173,11 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
   }
 
   async function rename(id: string, newFsPath: string) {
-    let currentDbItem: DatabaseItem = await host.document.get(id)
+    const currentDbItem: DatabaseItem = await host.document.get(id)
     if (!currentDbItem) {
       throw new Error(`Database item not found for document ${id}`)
     }
 
-    const currentDraftItem: DraftItem<DatabaseItem> | undefined = list.value.find(item => item.id === id)
-    if (currentDraftItem) {
-      currentDbItem = currentDraftItem.modified as DatabasePageItem
-    }
-
     const nameWithoutExtension = newFsPath.split('/').pop()!.split('.').slice(0, -1).join('.')
     const newRoutePath = `${currentDbItem.path!.split('/').slice(0, -1).join('/')}/${nameWithoutExtension}`
     const content = await generateContentFromDocument(currentDbItem)
diff --git a/src/app/src/utils/database.ts b/src/app/src/utils/database.ts
index 794c542d..5ef089ed 100644
--- a/src/app/src/utils/database.ts
+++ b/src/app/src/utils/database.ts
@@ -1,5 +1,5 @@
 import { type DatabasePageItem, ContentFileExtension } from '../types'
-// import { stringify } from 'minimark/stringify'
+import { stringify } from 'minimark/stringify'
 
 export function isEqual(document1: DatabasePageItem, document2: DatabasePageItem) {
   function removeLastStyle(document: DatabasePageItem) {
@@ -22,11 +22,7 @@ export function isEqual(document1: DatabasePageItem, document2: DatabasePageItem
       document2 = removeLastStyle(document2)
     }
 
-    // TODO: fix issue with created files
-    // if (stringify(body1) !== stringify(body2)) {
-    //   return false
-    // }
-    if (JSON.stringify(body1) !== JSON.stringify(body2)) {
+    if (stringify(body1) !== stringify(body2)) {
       return false
     }
   }
diff --git a/src/app/test/integration/composables/useDraftDocuments.test.ts b/src/app/test/integration/composables/useDraftDocuments.test.ts
index 934e140c..cec6e339 100644
--- a/src/app/test/integration/composables/useDraftDocuments.test.ts
+++ b/src/app/test/integration/composables/useDraftDocuments.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { type StudioHost, type DatabaseItem, DraftStatus } from '../../../src/types'
+import { type StudioHost, DraftStatus } from '../../../src/types'
 import { createMockDocument, createMockStorage, createMockHooks } from '../../mocks/document'
 import { createMockHost } from '../../mocks/host'
 import { createMockGit } from '../../mocks/git'
@@ -15,7 +15,7 @@ vi.mock('unstorage/drivers/indexedb', () => ({
     async getItem(key: string) {
       return mockStorage.get(key) || null
     },
-    async setItem(key: string, value: DatabaseItem) {
+    async setItem(key: string, value: string) {
       mockStorage.set(key, value)
     },
     async removeItem(key: string) {
@@ -72,7 +72,7 @@ describe('useDraftDocuments - Action Chains Integration Tests', () => {
 
     // Storage
     expect(mockStorage.size).toEqual(1)
-    const storedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId  ))!)
+    const storedDraft = JSON.parse(mockStorage.get(normalizeKey(documentId))!)
     expect(storedDraft).toHaveProperty('status', DraftStatus.Created)
 
     // In memory
@@ -165,7 +165,7 @@ describe('useDraftDocuments - Action Chains Integration Tests', () => {
     const updatedDocument = createMockDocument(documentId, {
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Updated content' }],
+        value: ['Updated content'],
       },
     })
     await update(documentId, updatedDocument)
@@ -199,7 +199,7 @@ describe('useDraftDocuments - Action Chains Integration Tests', () => {
     const { selectById, rename, update, list } = draftDocuments
 
     const mockDocument = createMockDocument(documentId)
-    const fsPath = mockHost.document.getFileSystemPath(documentId )
+    const fsPath = mockHost.document.getFileSystemPath(documentId)
     const createdDocument = await mockHost.document.create(fsPath, mockDocument.path, '')
 
     /*
@@ -256,7 +256,7 @@ describe('useDraftDocuments - Action Chains Integration Tests', () => {
     const updatedDocument = createMockDocument(newId, {
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Updated content' }],
+        value: ['Updated content'],
       },
     })
     await update(newId, updatedDocument)
diff --git a/src/app/test/mocks/document.ts b/src/app/test/mocks/document.ts
index 78db2179..28ee6da5 100644
--- a/src/app/test/mocks/document.ts
+++ b/src/app/test/mocks/document.ts
@@ -8,7 +8,7 @@ export const createMockDocument = (id: string, overrides?: Partial<DatabasePageI
   extension: 'md',
   body: {
     type: 'minimark',
-    value: [{ type: 'text', text: 'Test content' }],
+    value: ['Test content'],
   },
   meta: {},
   ...overrides,
diff --git a/src/app/test/mocks/draft.ts b/src/app/test/mocks/draft.ts
index 549448d1..d89d7db1 100644
--- a/src/app/test/mocks/draft.ts
+++ b/src/app/test/mocks/draft.ts
@@ -14,7 +14,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
     modified: {
@@ -24,7 +24,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Modified' }],
+        value: ['Modified'],
       },
     },
   },
@@ -39,7 +39,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
     modified: {
@@ -49,7 +49,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
   },
@@ -66,7 +66,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
     modified: {
@@ -76,7 +76,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Modified' }],
+        value: ['Modified'],
       },
     },
   },
@@ -91,7 +91,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
     modified: {
@@ -101,7 +101,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Modified' }],
+        value: ['Modified'],
       },
     },
   },
@@ -117,7 +117,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
   },
@@ -134,7 +134,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
     modified: {
@@ -144,7 +144,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Modified' }],
+        value: ['Modified'],
       },
     },
   },
@@ -159,7 +159,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
     modified: {
@@ -169,7 +169,7 @@ const draftItemsList: DraftItem[] = [
       extension: 'md',
       body: {
         type: 'minimark',
-        value: [{ type: 'text', text: 'Original' }],
+        value: ['Original'],
       },
     },
   },
diff --git a/src/app/test/mocks/host.ts b/src/app/test/mocks/host.ts
index df9a0461..5b40b5d8 100644
--- a/src/app/test/mocks/host.ts
+++ b/src/app/test/mocks/host.ts
@@ -17,7 +17,7 @@ export const createMockHost = (): StudioHost => ({
         stem: fsPath.split('/').pop()?.replace('.md', ''),
         body: {
           type: 'minimark',
-          value: [{ type: 'text', text: content || 'Test content' }],
+          value: [content || 'Test content'],
         },
       })
     }),
diff --git a/src/app/test/unit/utils/tree.test.ts b/src/app/test/unit/utils/tree.test.ts
index a72b7537..c20cb58b 100644
--- a/src/app/test/unit/utils/tree.test.ts
+++ b/src/app/test/unit/utils/tree.test.ts
@@ -56,13 +56,7 @@ describe('buildTree with one level of depth', () => {
       fsPath: createdDbItem.fsPath,
       status: DraftStatus.Created,
       original: undefined,
-      modified: {
-        ...dbItemsList[0],
-        body: {
-          type: 'minimark',
-          value: [['text', 'Created']],
-        },
-      },
+      modified: createdDbItem,
     }]
 
     const tree = buildTree(dbItemsList, draftList)
@@ -157,7 +151,7 @@ describe('buildTree with one level of depth', () => {
         ...updatedDbItem,
         body: {
           type: 'minimark',
-          value: [['text', 'Modified']],
+          value: ['Modified'],
         },
       },
     }]
@@ -348,7 +342,7 @@ describe('buildTree with two levels of depth', () => {
         ...updatedDbItem,
         body: {
           type: 'minimark',
-          value: [['text', 'Modified']],
+          value: ['Modified'],
         },
       },
     }]
@@ -377,7 +371,7 @@ describe('buildTree with two levels of depth', () => {
         ...updatedDbItem,
         body: {
           type: 'minimark',
-          value: [['text', 'Modified']],
+          value: ['Modified'],
         },
       },
     }]
@@ -473,7 +467,7 @@ describe('getTreeStatus', () => {
     const original: DatabaseItem = dbItemsList[0]
     const modified: DatabaseItem = {
       ...original,
-      body: { type: 'minimark', value: ['text', 'New body'] },
+      body: { type: 'minimark', value: ['New body'] },
     }
 
     const status = getTreeStatus(modified, original)