From ab339138323b2f5c17336b86b11b13ea43ceae3b Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 11:35:43 +0200
Subject: [PATCH 01/10] fix: init media upload via drag and drop

---
 .../src/components/panel/base/PanelBase.vue   |  4 +-
 .../components/panel/base/PanelBaseBody.vue   | 13 +++-
 .../components/panel/base/PanelBaseFooter.vue |  2 +-
 src/app/src/composables/useDraftDocuments.ts  |  3 +-
 src/app/src/composables/useDraftMedias.ts     | 59 ++++++++++++++++++-
 src/app/src/composables/useStudio.ts          |  1 +
 src/app/src/composables/useTree.ts            |  4 +-
 src/app/src/types/draft.ts                    |  2 +-
 src/module/src/module.ts                      |  7 +--
 src/module/src/runtime/host.ts                |  2 +-
 10 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/src/app/src/components/panel/base/PanelBase.vue b/src/app/src/components/panel/base/PanelBase.vue
index 0e99a7fe..75e8aedd 100644
--- a/src/app/src/components/panel/base/PanelBase.vue
+++ b/src/app/src/components/panel/base/PanelBase.vue
@@ -58,11 +58,11 @@ function onLeave(el: Element, done: () => void) {
     >
       <PanelBaseHeader />
 
-      <div class="px-4 py-2 h-[var(--ui-sub-header-height)] border-b border-gray-200">
+      <div class="px-4 py-2 h-[var(--ui-sub-header-height)] border-b border-gray-200 sticky top-0 bg-white">
         <slot name="header" />
       </div>
 
-      <div class="h-[calc(100vh-var(--ui-header-height)-var(--ui-sub-header-height)-var(--ui-footer-height))] p-4">
+      <div class="h-[calc(100vh-var(--ui-header-height)-var(--ui-sub-header-height)-var(--ui-footer-height))] p-4 overflow-y-auto">
         <slot />
       </div>
 
diff --git a/src/app/src/components/panel/base/PanelBaseBody.vue b/src/app/src/components/panel/base/PanelBaseBody.vue
index 0e1cee22..1488efb2 100644
--- a/src/app/src/components/panel/base/PanelBaseBody.vue
+++ b/src/app/src/components/panel/base/PanelBaseBody.vue
@@ -14,6 +14,15 @@ const fileTree = computed(() => (tree.value.current.value || []).filter(f => f.t
 
 const isFileCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateDocument)
 const isFolderCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateFolder)
+
+async function onFileDrop(event: DragEvent) {
+  if (event.dataTransfer?.files) {
+    for (const file of event.dataTransfer.files) {
+      await draftMedias.upload(tree.value.currentItem.value.fsPath,file)
+    }
+  }
+}
+
 </script>
 
 <template>
@@ -23,7 +32,9 @@ const isFolderCreationInProgress = computed(() => context.actionInProgress.value
   />
   <div
     v-else
-    class="flex flex-col"
+    class="flex flex-col min-h-full"
+    @drop.prevent.sop="onFileDrop"
+    @dragover.prevent.stop
   >
     <PanelBaseBodyTree
       v-if="folderTree?.length > 0 || isFolderCreationInProgress"
diff --git a/src/app/src/components/panel/base/PanelBaseFooter.vue b/src/app/src/components/panel/base/PanelBaseFooter.vue
index ca366d1e..96556330 100644
--- a/src/app/src/components/panel/base/PanelBaseFooter.vue
+++ b/src/app/src/components/panel/base/PanelBaseFooter.vue
@@ -19,7 +19,7 @@ const userMenuItems = computed(() => [
 </script>
 
 <template>
-  <UFooter class="h-var(--ui-footer-height)">
+  <UFooter class="h-var(--ui-footer-height) sticky bottom-0 bg-white">
     <template #left>
       <UDropdownMenu
         :portal="false"
diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index ad80ac30..4e9c8a48 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -11,7 +11,8 @@ import { useHooks } from './useHooks'
 
 const storage = createStorage({
   driver: indexedDbDriver({
-    storeName: 'nuxt-content-studio-documents',
+    dbName: 'nuxt-content-studio-document',
+    storeName: 'drafts',
   }),
 })
 
diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index afb5f6d7..3c95ec67 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import { createStorage } from 'unstorage'
 import indexedDbDriver from 'unstorage/drivers/indexedb'
+import { joinURL, withLeadingSlash } from 'ufo'
 import type { DraftItem, StudioHost, GithubFile, MediaItem } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
@@ -10,7 +11,8 @@ import { useHooks } from './useHooks'
 
 const storage = createStorage({
   driver: indexedDbDriver({
-    storeName: 'nuxt-content-studio-medias',
+    dbName: 'nuxt-content-studio-media',
+    storeName: 'drafts',
   }),
 })
 
@@ -199,6 +201,60 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     select(draftItem)
   }
 
+  // Uplaod
+  async function upload(directory: string, file: File) {
+    const draftItem = await fileToDraftItem(directory, file)
+    host.media.upsert(draftItem.id,  draftItem.modified!)
+    await create(draftItem.modified!)
+  }
+  async function fileToDraftItem(directory: string, file: File): Promise<DraftItem<MediaItem>> {
+    const rawDara = await fileToDataUrl(file)
+    const fsPath = directory && directory !== '/' ? joinURL(directory, file.name) : file.name
+    return {
+      id: `public-assets/${fsPath}`,
+      fsPath,
+      githubFile: undefined,
+      status: DraftStatus.Created,
+      modified: {
+        id: `public-assets/${fsPath}`,
+        fsPath: fsPath,
+        extension: fsPath.split('.').pop()!,
+        stem: fsPath.split('.').join('.'),
+        path: withLeadingSlash(fsPath),
+        preview: await resizedataURL(rawDara, 128, 128),
+        raw: rawDara
+      },
+    }
+  }
+  function fileToDataUrl(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => resolve(reader.result as string)
+      reader.onerror = (error) => reject(error)
+    })
+  }
+
+  function resizedataURL(datas: string, wantedWidth: number, wantedHeight: number): Promise<string> {
+    return new Promise(async function(resolve) {
+      var img = document.createElement('img');
+      img.onload = function() {        
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d')!
+
+        canvas.width = wantedWidth;
+        canvas.height = wantedHeight;
+
+        ctx.drawImage(img, 0, 0, wantedWidth, wantedHeight)
+
+        var dataURI = canvas.toDataURL()
+
+        resolve(dataURI)
+      }
+      img.src = datas
+    })
+  }
+
   return {
     get,
     create,
@@ -211,5 +267,6 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     current,
     select,
     selectById,
+    upload,
   }
 })
diff --git a/src/app/src/composables/useStudio.ts b/src/app/src/composables/useStudio.ts
index 47422c55..d64e2aae 100644
--- a/src/app/src/composables/useStudio.ts
+++ b/src/app/src/composables/useStudio.ts
@@ -32,6 +32,7 @@ export const useStudio = createSharedComposable(() => {
 
   host.on.mounted(async () => {
     await draftDocuments.load()
+    await draftMedias.load()
     host.app.requestRerender()
     isReady.value = true
 
diff --git a/src/app/src/composables/useTree.ts b/src/app/src/composables/useTree.ts
index 457059e7..566209e3 100644
--- a/src/app/src/composables/useTree.ts
+++ b/src/app/src/composables/useTree.ts
@@ -68,8 +68,8 @@ export const useTree = (type: StudioFeature, host: StudioHost, draft: ReturnType
   }
 
   hooks.hook('studio:draft:updated', async () => {
-    const hostList = type === 'content' ? host.document : host.media
-    const hostGetFileSystemPath = type === 'content' ? host.document.getFileSystemPath : host.media.getFileSystemPath
+    const hostList = type === StudioFeature.Content ? host.document : host.media
+    const hostGetFileSystemPath = type === StudioFeature.Content ? host.document.getFileSystemPath : host.media.getFileSystemPath
     const list = await hostList.list()
 
     const listWithFsPath = list.map((item) => {
diff --git a/src/app/src/types/draft.ts b/src/app/src/types/draft.ts
index edadf53f..635dd792 100644
--- a/src/app/src/types/draft.ts
+++ b/src/app/src/types/draft.ts
@@ -15,7 +15,7 @@ export interface DraftItem<T = DatabaseItem | MediaItem> {
   fsPath: string // file path in content directory
   status: DraftStatus // status
 
-  githubFile: GithubFile // file fetched on gh
+  githubFile?: GithubFile // file fetched on gh
   original?: T
   modified?: T
   /**
diff --git a/src/module/src/module.ts b/src/module/src/module.ts
index 351459bf..b97eb09f 100644
--- a/src/module/src/module.ts
+++ b/src/module/src/module.ts
@@ -116,14 +116,13 @@ export default defineNuxtModule<ModuleOptions>({
               'const storage = createStorage({})',
               '',
               ...keys.map((key) => {
-                key = `public-assets:${key}`
                 const value = {
-                  id: key,
+                  id: `public-assets/${key.replace(/:/g, '/')}`,
                   extension: key.split('.').pop(),
-                  stem: key.split('.').slice(0, -1).join('.'),
+                  stem: key.split('.').join('.'),
                   path: '/' + key.replace(/:/g, '/'),
                 }
-                return `storage.setItem('${key}', ${JSON.stringify(value)})`
+                return `storage.setItem('${value.id}', ${JSON.stringify(value)})`
               }),
               '',
               'export const publicAssetsStorage = storage',
diff --git a/src/module/src/runtime/host.ts b/src/module/src/runtime/host.ts
index bb89b511..9057224c 100644
--- a/src/module/src/runtime/host.ts
+++ b/src/module/src/runtime/host.ts
@@ -211,7 +211,7 @@ export function useStudioHost(user: StudioUser): StudioHost {
         return await publicAssetsStorage.getItem(id) as MediaItem
       },
       getFileSystemPath: (id: string) => {
-        return id.split(':').slice(1).join('/')
+        return id.split('/').slice(1).join('/')
       },
       list: async (): Promise<MediaItem[]> => {
         return await Promise.all(await publicAssetsStorage.getKeys().then(keys => keys.map(key => publicAssetsStorage.getItem(key)))) as MediaItem[]

From 5fcfb8ce8091bf752d35d1ff4f30eac0befb1c2d Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 11:36:44 +0200
Subject: [PATCH 02/10] lint: fix

---
 src/app/src/App.vue                           |  5 ++++-
 .../components/panel/base/PanelBaseBody.vue   |  5 ++---
 src/app/src/composables/useDraftMedias.ts     | 22 +++++++++----------
 src/app/test/utils/context.test.ts            |  2 +-
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/app/src/App.vue b/src/app/src/App.vue
index fcdbf8a1..3d3ec437 100644
--- a/src/app/src/App.vue
+++ b/src/app/src/App.vue
@@ -52,7 +52,10 @@ host.on.mounted(() => {
       </PanelBase>
 
       <!-- Floating Files Panel Toggle -->
-      <div v-if="!ui.isPanelOpen.value" class="fixed bottom-4 left-4 z-50 shadow-lg flex gap-2">
+      <div
+        v-if="!ui.isPanelOpen.value"
+        class="fixed bottom-4 left-4 z-50 shadow-lg flex gap-2"
+      >
         <UButton
           icon="i-lucide-panel-left-open"
           size="lg"
diff --git a/src/app/src/components/panel/base/PanelBaseBody.vue b/src/app/src/components/panel/base/PanelBaseBody.vue
index 1488efb2..7826ca03 100644
--- a/src/app/src/components/panel/base/PanelBaseBody.vue
+++ b/src/app/src/components/panel/base/PanelBaseBody.vue
@@ -18,11 +18,10 @@ const isFolderCreationInProgress = computed(() => context.actionInProgress.value
 async function onFileDrop(event: DragEvent) {
   if (event.dataTransfer?.files) {
     for (const file of event.dataTransfer.files) {
-      await draftMedias.upload(tree.value.currentItem.value.fsPath,file)
+      await draftMedias.upload(tree.value.currentItem.value.fsPath, file)
     }
   }
 }
-
 </script>
 
 <template>
@@ -33,7 +32,7 @@ async function onFileDrop(event: DragEvent) {
   <div
     v-else
     class="flex flex-col min-h-full"
-    @drop.prevent.sop="onFileDrop"
+    @drop.prevent.stop="onFileDrop"
     @dragover.prevent.stop
   >
     <PanelBaseBodyTree
diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index 3c95ec67..205adbc3 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -204,7 +204,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
   // Uplaod
   async function upload(directory: string, file: File) {
     const draftItem = await fileToDraftItem(directory, file)
-    host.media.upsert(draftItem.id,  draftItem.modified!)
+    host.media.upsert(draftItem.id, draftItem.modified!)
     await create(draftItem.modified!)
   }
   async function fileToDraftItem(directory: string, file: File): Promise<DraftItem<MediaItem>> {
@@ -222,7 +222,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
         stem: fsPath.split('.').join('.'),
         path: withLeadingSlash(fsPath),
         preview: await resizedataURL(rawDara, 128, 128),
-        raw: rawDara
+        raw: rawDara,
       },
     }
   }
@@ -231,23 +231,23 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
       const reader = new FileReader()
       reader.readAsDataURL(file)
       reader.onload = () => resolve(reader.result as string)
-      reader.onerror = (error) => reject(error)
+      reader.onerror = error => reject(error)
     })
   }
 
   function resizedataURL(datas: string, wantedWidth: number, wantedHeight: number): Promise<string> {
-    return new Promise(async function(resolve) {
-      var img = document.createElement('img');
-      img.onload = function() {        
-        var canvas = document.createElement('canvas');
-        var ctx = canvas.getContext('2d')!
+    return new Promise(function (resolve) {
+      const img = document.createElement('img')
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')!
 
-        canvas.width = wantedWidth;
-        canvas.height = wantedHeight;
+        canvas.width = wantedWidth
+        canvas.height = wantedHeight
 
         ctx.drawImage(img, 0, 0, wantedWidth, wantedHeight)
 
-        var dataURI = canvas.toDataURL()
+        const dataURI = canvas.toDataURL()
 
         resolve(dataURI)
       }
diff --git a/src/app/test/utils/context.test.ts b/src/app/test/utils/context.test.ts
index a65cebd4..90680a52 100644
--- a/src/app/test/utils/context.test.ts
+++ b/src/app/test/utils/context.test.ts
@@ -38,7 +38,7 @@ describe('computeActionItems', () => {
   it('should filter out actions for file items without draft status', () => {
     const fileItem: TreeItem = {
       type: 'file',
-      name: 'test.md'
+      name: 'test.md',
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)

From 81b25ef06e4e8b5e08246a455404c91116d4db10 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 12:00:26 +0200
Subject: [PATCH 03/10] feat: revert and upload in context

---
 .../src/components/panel/base/PanelBaseBody.vue  |  7 +++++--
 .../shared/item/ItemActionsDropdown.vue          |  4 ++--
 src/app/src/composables/useContext.ts            | 16 ++++++++++++++--
 src/app/src/types/context.ts                     |  9 ++++++++-
 src/app/src/utils/context.ts                     | 10 ++++++++++
 5 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/app/src/components/panel/base/PanelBaseBody.vue b/src/app/src/components/panel/base/PanelBaseBody.vue
index 7826ca03..ef400991 100644
--- a/src/app/src/components/panel/base/PanelBaseBody.vue
+++ b/src/app/src/components/panel/base/PanelBaseBody.vue
@@ -17,8 +17,11 @@ const isFolderCreationInProgress = computed(() => context.actionInProgress.value
 
 async function onFileDrop(event: DragEvent) {
   if (event.dataTransfer?.files) {
-    for (const file of event.dataTransfer.files) {
-      await draftMedias.upload(tree.value.currentItem.value.fsPath, file)
+    if (context.feature.value === StudioFeature.Media) {
+      await context.itemActionHandler[StudioItemActionId.UploadMedia]({
+        directory: tree.value.currentItem.value.fsPath,
+        files: Array.from(event.dataTransfer.files),
+      })
     }
   }
 }
diff --git a/src/app/src/components/shared/item/ItemActionsDropdown.vue b/src/app/src/components/shared/item/ItemActionsDropdown.vue
index 9574159d..1d5baec1 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 } from '../../../utils/context'
+import { computeActionItems, computeActionParams } 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,
+    onSelect: () => action.handler?.(computeActionParams(action.id, { item: props.item })),
   }))
 })
 </script>
diff --git a/src/app/src/composables/useContext.ts b/src/app/src/composables/useContext.ts
index 445c09b3..f0351658 100644
--- a/src/app/src/composables/useContext.ts
+++ b/src/app/src/composables/useContext.ts
@@ -1,7 +1,7 @@
 import { createSharedComposable } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import type { useUi } from './useUi'
-import { type CreateFileParams, type StudioHost, type StudioAction, type TreeItem, StudioItemActionId, type ActionHandlerParams } from '../types'
+import { type UploadMediaParams, type CreateFileParams, type StudioHost, type StudioAction, type TreeItem, StudioItemActionId, type ActionHandlerParams, StudioFeature } from '../types'
 import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '../utils/context'
 import type { useDraftDocuments } from './useDraftDocuments'
 import { useModal } from './useModal'
@@ -59,8 +59,20 @@ export const useContext = createSharedComposable((
       const draftItem = await draftDocuments.create(document)
       tree.selectItemById(draftItem.id)
     },
+    [StudioItemActionId.UploadMedia]: async ({ directory, files }: UploadMediaParams) => {
+      for (const file of files) {
+        await draftMedias.upload(directory, file)
+      }
+    },
     [StudioItemActionId.RevertItem]: async (id: string) => {
-      modal.openConfirmActionModal(id, StudioItemActionId.RevertItem, () => draftDocuments.revert(id))
+      modal.openConfirmActionModal(id, StudioItemActionId.RevertItem, async () => {
+        if (currentFeature.value === StudioFeature.Content) {
+          await draftDocuments.revert(id)
+        }
+        else {
+          await draftMedias.revert(id)
+        }
+      })
     },
     [StudioItemActionId.RenameItem]: async ({ path, file }: { path: string, file: TreeItem }) => {
       alert(`rename file ${path} ${file.name}`)
diff --git a/src/app/src/types/context.ts b/src/app/src/types/context.ts
index e31b836f..eb74ab21 100644
--- a/src/app/src/types/context.ts
+++ b/src/app/src/types/context.ts
@@ -8,6 +8,7 @@ export enum StudioFeature {
 export enum StudioItemActionId {
   CreateFolder = 'create-folder',
   CreateDocument = 'create-document',
+  UploadMedia = 'upload-media',
   RevertItem = 'revert-item',
   RenameItem = 'rename-item',
   DeleteItem = 'delete-item',
@@ -19,7 +20,7 @@ export interface StudioAction {
   label: string
   icon: string
   tooltip: string
-  handler?: (args: string & CreateFileParams & RenameFileParams) => void
+  handler?: (args: ActionHandlerParams[StudioItemActionId]) => void
 }
 
 export interface CreateFileParams {
@@ -33,9 +34,15 @@ export interface RenameFileParams {
   file: TreeItem
 }
 
+export interface UploadMediaParams {
+  directory: string
+  files: File[]
+}
+
 export type ActionHandlerParams = {
   [StudioItemActionId.CreateFolder]: string
   [StudioItemActionId.CreateDocument]: CreateFileParams
+  [StudioItemActionId.UploadMedia]: UploadMediaParams
   [StudioItemActionId.RevertItem]: string
   [StudioItemActionId.RenameItem]: RenameFileParams
   [StudioItemActionId.DeleteItem]: string
diff --git a/src/app/src/utils/context.ts b/src/app/src/utils/context.ts
index 1ef08053..2b0c0b3b 100644
--- a/src/app/src/utils/context.ts
+++ b/src/app/src/utils/context.ts
@@ -1,5 +1,6 @@
 import { type StudioAction, StudioFeature, type TreeItem } from '../types'
 import { DraftStatus } from '../types/draft'
+import type { ActionHandlerParams } from '../types/context'
 import { StudioItemActionId } from '../types/context'
 
 export const FEATURE_DISPLAY_MAP = {
@@ -88,3 +89,12 @@ 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:
+      return item.id
+    default:
+      return {}
+  }
+}

From 4d8db7f1e2e8a026f7b313f7c3a04c39cf63016d Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 13:16:31 +0200
Subject: [PATCH 04/10] feat: studio service worker to preview uploaded medias

---
 package.json                               |  4 ++
 src/app/src/service-worker.ts              | 80 ++++++++++++++++++++++
 src/app/vite.config.ts                     |  2 +-
 src/module/src/module.ts                   |  4 ++
 src/module/src/runtime/host.ts             |  4 ++
 src/module/src/runtime/server/routes/sw.ts |  7 ++
 6 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 src/app/src/service-worker.ts
 create mode 100644 src/module/src/runtime/server/routes/sw.ts

diff --git a/package.json b/package.json
index d641ddec..f095d3c6 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,10 @@
     "./app/utils": {
       "types": "./dist/app/utils.d.ts",
       "default": "./dist/app/utils.js"
+    },
+    "./app/service-worker": {
+      "types": "./dist/app/service-worker.d.ts",
+      "default": "./dist/app/service-worker.js"
     }
   },
   "main": "./dist/module/module.mjs",
diff --git a/src/app/src/service-worker.ts b/src/app/src/service-worker.ts
new file mode 100644
index 00000000..c7c97cf7
--- /dev/null
+++ b/src/app/src/service-worker.ts
@@ -0,0 +1,80 @@
+export const serviceWorker = () => `
+self.addEventListener('fetch', event => {
+  const url = new URL(event.request.url);
+  const isSameDomain = url.origin === self.location.origin;
+
+  if (!isSameDomain) {
+    return event.respondWith(fetch(event.request));
+  }
+
+  if (url.pathname.startsWith('/_ipx/_/') || ['jpg', 'png', 'jpeg', 'gif', 'webp'].includes(url.pathname.split('.').pop())) {
+    console.log('Fetching from IndexedDB:', url.pathname);
+    return event.respondWith(fetchFromIndexedDB(url));
+  }
+
+  event.respondWith(fetch(event.request))
+})
+
+function fetchFromIndexedDB(url) {
+  const dbKey = ['public-assets:', url.pathname.replace('/_ipx/_/', '').replace('/', ':')].join('')
+  return getData(dbKey).then(data => {
+    if (!data) {
+      return fetch(event.request);
+    }
+
+    const json = JSON.parse(data)
+    const parsed = parseDataUrl(json.modified.raw);
+    const bytes = base64ToUint8Array(parsed.base64);
+
+    return new Response(bytes, {
+      headers: { 'Content-Type': parsed.mime }
+    });
+  })
+}
+
+function parseDataUrl(dataUrl) {
+  // Example: data:image/png;base64,iVBORw0KG...
+  const match = dataUrl.match(/^data:(.+);base64,(.+)$/);
+  if (!match) return null;
+  return {
+    mime: match[1],
+    base64: match[2]
+  };
+}
+
+function base64ToUint8Array(base64) {
+  const binary = atob(base64);
+  const len = binary.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+// IndexedDB
+function openDB() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('nuxt-content-studio-media', 1);
+    request.onupgradeneeded = event => {
+      const db = event.target.result;
+      db.createObjectStore('drafts', { keyPath: 'id' });
+    };
+    request.onsuccess = event => resolve(event.target.result);
+    request.onerror = event => reject(event.target.error);
+  });
+}
+
+// Read data from the object store
+function getData(key) {
+  return openDB().then(db => {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction('drafts', 'readonly');
+      const store = tx.objectStore('drafts');
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  });
+}
+`
\ No newline at end of file
diff --git a/src/app/vite.config.ts b/src/app/vite.config.ts
index 546d3a23..04f53134 100644
--- a/src/app/vite.config.ts
+++ b/src/app/vite.config.ts
@@ -100,7 +100,7 @@ export default defineConfig({
     cssCodeSplit: false,
     outDir: '../../dist/app',
     lib: {
-      entry: ['./src/index.ts', './src/utils.ts'],
+      entry: ['./src/index.ts', './src/utils.ts', './src/service-worker.ts'],
       formats: ['es'],
     },
     sourcemap: false,
diff --git a/src/module/src/module.ts b/src/module/src/module.ts
index b97eb09f..13d829bc 100644
--- a/src/module/src/module.ts
+++ b/src/module/src/module.ts
@@ -146,6 +146,10 @@ export default defineNuxtModule<ModuleOptions>({
       route: '/__nuxt_content/studio',
       handler: runtime('./server/routes/admin'),
     })
+    addServerHandler({
+      route: '/sw.js',
+      handler: runtime('./server/routes/sw'),
+    })
     // addServerHandler({
     //   route: '/__nuxt_content/studio/auth/google',
     //   handler: runtime('./server/routes/auth/google.get'),
diff --git a/src/module/src/runtime/host.ts b/src/module/src/runtime/host.ts
index 9057224c..0487dabc 100644
--- a/src/module/src/runtime/host.ts
+++ b/src/module/src/runtime/host.ts
@@ -260,6 +260,10 @@ export function useStudioHost(user: StudioUser): StudioHost {
       .then((_localDatabaseAdapter) => {
         localDatabaseAdapter = _localDatabaseAdapter
         isMounted.value = true
+      }).then(() => {
+        if ('serviceWorker' in navigator) {
+          navigator.serviceWorker.register('/sw.js')
+        }
       })
   })()
 
diff --git a/src/module/src/runtime/server/routes/sw.ts b/src/module/src/runtime/server/routes/sw.ts
new file mode 100644
index 00000000..f1c18456
--- /dev/null
+++ b/src/module/src/runtime/server/routes/sw.ts
@@ -0,0 +1,7 @@
+import { serviceWorker } from 'nuxt-studio/app/service-worker'
+import { eventHandler, setHeader } from 'h3'
+
+export default eventHandler(async (event) => {
+  setHeader(event, 'Content-Type', 'application/javascript')
+  return serviceWorker()
+})
\ No newline at end of file

From 1cf6deb5139cb37be6293e71989d12524870208e Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 15:41:20 +0200
Subject: [PATCH 05/10] feat: tree item preview

---
 .../src/components/shared/item/ItemCard.vue   | 36 ++++++++++++-------
 src/app/src/service-worker.ts                 |  4 +--
 src/app/src/types/tree.ts                     |  4 +++
 src/app/src/utils/tree.ts                     | 10 ++++++
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/app/src/components/shared/item/ItemCard.vue b/src/app/src/components/shared/item/ItemCard.vue
index 6e5bf9e7..0c53157b 100644
--- a/src/app/src/components/shared/item/ItemCard.vue
+++ b/src/app/src/components/shared/item/ItemCard.vue
@@ -17,6 +17,9 @@ const isFolder = computed(() => props.item.type === 'directory')
 const name = computed(() => titleCase(props.item.name))
 
 const itemExtensionIcon = computed(() => {
+  if (props.item.preview) {
+    return ''
+  }
   const ext = props.item.id.split('.').pop()?.toLowerCase() || ''
   return {
     md: 'i-ph-markdown-logo',
@@ -26,31 +29,40 @@ const itemExtensionIcon = computed(() => {
   }[ext] || 'i-mdi-file'
 })
 
+const imageSrc = computed(() => {
+  if (props.item.preview) {
+    return props.item.preview
+  }
+  return 'https://placehold.co/1920x1080/f9fafc/f9fafc'
+})
+
 const statusRingColor = computed(() => props.item.status ? `ring-${COLOR_STATUS_MAP[props.item.status]}-200 hover:ring-${COLOR_STATUS_MAP[props.item.status]}-300 hover:dark:ring-${COLOR_STATUS_MAP[props.item.status]}-700` : 'ring-gray-200 hover:ring-gray-300 hover:dark:ring-gray-700')
 </script>
 
 <template>
   <UPageCard
     reverse
-    class="cursor-pointer hover:bg-white relative w-full min-w-0"
+    class="cursor-pointer hover:bg-white relative w-full min-w-0 overflow-hidden"
     :class="statusRingColor"
   >
     <div
       v-if="item.type === 'file'"
       class="relative"
     >
-      <Image
-        src="https://placehold.co/1920x1080/f9fafc/f9fafc"
-        width="426"
-        height="240"
-        alt="Card placeholder"
-        class="z-[-1] rounded-t-lg"
-      />
-      <div class="absolute inset-0 flex items-center justify-center">
-        <UIcon
-          :name="itemExtensionIcon"
-          class="w-8 h-8 text-gray-400 dark:text-gray-500"
+      <div class="bg-[#f7f9fa] bg-[linear-gradient(45deg,#e6e9ea_25%,transparent_0),linear-gradient(-45deg,#e6e9ea_25%,transparent_0),linear-gradient(45deg,transparent_75%,#e6e9ea_0),linear-gradient(-45deg,transparent_75%,#e6e9ea_0)] bg-size-[24px_24px] bg-position-[0_0,0_12px,12px_-12px,-12px_0]">
+        <Image
+          :src="imageSrc"
+          width="426"
+          height="240"
+          alt="Card placeholder"
+          class="z-[-1] rounded-t-lg aspect-video object-cover"
         />
+        <div v-if="itemExtensionIcon" class="absolute inset-0 flex items-center justify-center">
+          <UIcon
+            :name="itemExtensionIcon"
+            class="w-8 h-8 text-gray-400 dark:text-gray-500"
+          />
+        </div>
       </div>
       <ItemBadge
         v-if="item.status"
diff --git a/src/app/src/service-worker.ts b/src/app/src/service-worker.ts
index c7c97cf7..14c6dcd5 100644
--- a/src/app/src/service-worker.ts
+++ b/src/app/src/service-worker.ts
@@ -9,13 +9,13 @@ self.addEventListener('fetch', event => {
 
   if (url.pathname.startsWith('/_ipx/_/') || ['jpg', 'png', 'jpeg', 'gif', 'webp'].includes(url.pathname.split('.').pop())) {
     console.log('Fetching from IndexedDB:', url.pathname);
-    return event.respondWith(fetchFromIndexedDB(url));
+    return event.respondWith(fetchFromIndexedDB(event, url));
   }
 
   event.respondWith(fetch(event.request))
 })
 
-function fetchFromIndexedDB(url) {
+function fetchFromIndexedDB(event,url) {
   const dbKey = ['public-assets:', url.pathname.replace('/_ipx/_/', '').replace('/', ':')].join('')
   return getData(dbKey).then(data => {
     if (!data) {
diff --git a/src/app/src/types/tree.ts b/src/app/src/types/tree.ts
index f97260e8..e6235378 100644
--- a/src/app/src/types/tree.ts
+++ b/src/app/src/types/tree.ts
@@ -8,4 +8,8 @@ export interface TreeItem {
   status?: DraftStatus
   routePath?: string
   children?: TreeItem[]
+  /**
+   * Preview image for the item inside the tree
+   */
+  preview?: string
 }
diff --git a/src/app/src/utils/tree.ts b/src/app/src/utils/tree.ts
index ac02e53c..d05e0653 100644
--- a/src/app/src/utils/tree.ts
+++ b/src/app/src/utils/tree.ts
@@ -6,6 +6,15 @@ import type { BaseItem } from '../types/item'
 
 export const ROOT_ITEM: TreeItem = { id: 'root', name: 'content', fsPath: '/', type: 'root' }
 
+export const EXTENSIONS_WITH_PREVIEW = new Set([
+  'jpg',
+  'jpeg',
+  'png',
+  'gif',
+  'webp',
+  'ico'
+])
+
 export function buildTree(dbItems: ((BaseItem) & { fsPath: string })[], draftList: DraftItem[] | null):
 TreeItem[] {
   const tree: TreeItem[] = []
@@ -33,6 +42,7 @@ TreeItem[] {
         name: fileName,
         fsPath: dbItem.fsPath,
         type: 'file',
+        preview: EXTENSIONS_WITH_PREVIEW.has(dbItem.extension) ? dbItem.path : undefined,
       }
 
       if (itemHasPathField) {

From d797136ab9654de15ea867347fb98ee05f941920 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 15:47:47 +0200
Subject: [PATCH 06/10] fix: service worker

---
 src/app/src/service-worker.ts | 16 +++++++++++++---
 src/app/src/utils/tree.ts     |  3 ++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/src/service-worker.ts b/src/app/src/service-worker.ts
index 14c6dcd5..f454ab6d 100644
--- a/src/app/src/service-worker.ts
+++ b/src/app/src/service-worker.ts
@@ -1,4 +1,13 @@
 export const serviceWorker = () => `
+const EXTENSIONS_WITH_PREVIEW = new Set([
+  'jpg',
+  'jpeg',
+  'png',
+  'gif',
+  'webp',
+  'ico',
+  'avif',
+])
 self.addEventListener('fetch', event => {
   const url = new URL(event.request.url);
   const isSameDomain = url.origin === self.location.origin;
@@ -7,7 +16,7 @@ self.addEventListener('fetch', event => {
     return event.respondWith(fetch(event.request));
   }
 
-  if (url.pathname.startsWith('/_ipx/_/') || ['jpg', 'png', 'jpeg', 'gif', 'webp'].includes(url.pathname.split('.').pop())) {
+  if (url.pathname.startsWith('/_ipx/_/') || EXTENSIONS_WITH_PREVIEW.has(url.pathname.split('.').pop())) {
     console.log('Fetching from IndexedDB:', url.pathname);
     return event.respondWith(fetchFromIndexedDB(event, url));
   }
@@ -15,10 +24,11 @@ self.addEventListener('fetch', event => {
   event.respondWith(fetch(event.request))
 })
 
-function fetchFromIndexedDB(event,url) {
-  const dbKey = ['public-assets:', url.pathname.replace('/_ipx/_/', '').replace('/', ':')].join('')
+function fetchFromIndexedDB(event, url) {
+  const dbKey = ['public-assets:', url.pathname.replace(/^\\/+(_ipx\\/_\\/)?/, '').replace('/', ':')].join('')
   return getData(dbKey).then(data => {
     if (!data) {
+      console.log('No data found in IndexedDB:', url.pathnam, dbKey);
       return fetch(event.request);
     }
 
diff --git a/src/app/src/utils/tree.ts b/src/app/src/utils/tree.ts
index d05e0653..34233b52 100644
--- a/src/app/src/utils/tree.ts
+++ b/src/app/src/utils/tree.ts
@@ -12,7 +12,8 @@ export const EXTENSIONS_WITH_PREVIEW = new Set([
   'png',
   'gif',
   'webp',
-  'ico'
+  'ico',
+  'avif',
 ])
 
 export function buildTree(dbItems: ((BaseItem) & { fsPath: string })[], draftList: DraftItem[] | null):

From f231420055b98e6b63dd8ca86162913c5b063cb2 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 16:34:08 +0200
Subject: [PATCH 07/10] lint: fix

---
 src/app/src/components/shared/item/ItemCard.vue | 5 ++++-
 src/app/src/service-worker.ts                   | 2 +-
 src/module/src/runtime/server/routes/sw.ts      | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/src/components/shared/item/ItemCard.vue b/src/app/src/components/shared/item/ItemCard.vue
index 0c53157b..d36d5c10 100644
--- a/src/app/src/components/shared/item/ItemCard.vue
+++ b/src/app/src/components/shared/item/ItemCard.vue
@@ -57,7 +57,10 @@ const statusRingColor = computed(() => props.item.status ? `ring-${COLOR_STATUS_
           alt="Card placeholder"
           class="z-[-1] rounded-t-lg aspect-video object-cover"
         />
-        <div v-if="itemExtensionIcon" class="absolute inset-0 flex items-center justify-center">
+        <div
+          v-if="itemExtensionIcon"
+          class="absolute inset-0 flex items-center justify-center"
+        >
           <UIcon
             :name="itemExtensionIcon"
             class="w-8 h-8 text-gray-400 dark:text-gray-500"
diff --git a/src/app/src/service-worker.ts b/src/app/src/service-worker.ts
index f454ab6d..4c61f3bd 100644
--- a/src/app/src/service-worker.ts
+++ b/src/app/src/service-worker.ts
@@ -87,4 +87,4 @@ function getData(key) {
     });
   });
 }
-`
\ No newline at end of file
+`
diff --git a/src/module/src/runtime/server/routes/sw.ts b/src/module/src/runtime/server/routes/sw.ts
index f1c18456..3358ef99 100644
--- a/src/module/src/runtime/server/routes/sw.ts
+++ b/src/module/src/runtime/server/routes/sw.ts
@@ -4,4 +4,4 @@ import { eventHandler, setHeader } from 'h3'
 export default eventHandler(async (event) => {
   setHeader(event, 'Content-Type', 'application/javascript')
   return serviceWorker()
-})
\ No newline at end of file
+})

From 81595b766ffe07280f053d85925a13b615e162a3 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 16:35:56 +0200
Subject: [PATCH 08/10] Apply suggestions from code review

Co-authored-by: Baptiste Leproux <leproux.baptiste@gmail.com>
---
 src/app/src/composables/useDraftMedias.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index 205adbc3..f7afc6cc 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -201,15 +201,16 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     select(draftItem)
   }
 
-  // Uplaod
   async function upload(directory: string, file: File) {
     const draftItem = await fileToDraftItem(directory, file)
     host.media.upsert(draftItem.id, draftItem.modified!)
     await create(draftItem.modified!)
   }
+
   async function fileToDraftItem(directory: string, file: File): Promise<DraftItem<MediaItem>> {
     const rawDara = await fileToDataUrl(file)
     const fsPath = directory && directory !== '/' ? joinURL(directory, file.name) : file.name
+
     return {
       id: `public-assets/${fsPath}`,
       fsPath,
@@ -217,7 +218,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
       status: DraftStatus.Created,
       modified: {
         id: `public-assets/${fsPath}`,
-        fsPath: fsPath,
+        fsPath,
         extension: fsPath.split('.').pop()!,
         stem: fsPath.split('.').join('.'),
         path: withLeadingSlash(fsPath),
@@ -226,6 +227,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
       },
     }
   }
+
   function fileToDataUrl(file: File): Promise<string> {
     return new Promise((resolve, reject) => {
       const reader = new FileReader()

From c8a48599d12bf5832a5034068b649b2bbe89d288 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 16:36:32 +0200
Subject: [PATCH 09/10] fix: typo

---
 src/app/src/composables/useDraftMedias.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index f7afc6cc..79258741 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -208,7 +208,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
   }
 
   async function fileToDraftItem(directory: string, file: File): Promise<DraftItem<MediaItem>> {
-    const rawDara = await fileToDataUrl(file)
+    const rawData = await fileToDataUrl(file)
     const fsPath = directory && directory !== '/' ? joinURL(directory, file.name) : file.name
 
     return {
@@ -222,8 +222,8 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
         extension: fsPath.split('.').pop()!,
         stem: fsPath.split('.').join('.'),
         path: withLeadingSlash(fsPath),
-        preview: await resizedataURL(rawDara, 128, 128),
-        raw: rawDara,
+        preview: await resizedataURL(rawData, 128, 128),
+        raw: rawData,
       },
     }
   }

From 970e0c7ccd23f54ef5dc89b0de5fe5300249bfac Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 26 Sep 2025 16:37:56 +0200
Subject: [PATCH 10/10] chore: apply suggestion

---
 src/app/src/components/panel/base/PanelBaseBody.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/src/components/panel/base/PanelBaseBody.vue b/src/app/src/components/panel/base/PanelBaseBody.vue
index ef400991..0096fc99 100644
--- a/src/app/src/components/panel/base/PanelBaseBody.vue
+++ b/src/app/src/components/panel/base/PanelBaseBody.vue
@@ -17,12 +17,14 @@ const isFolderCreationInProgress = computed(() => context.actionInProgress.value
 
 async function onFileDrop(event: DragEvent) {
   if (event.dataTransfer?.files) {
-    if (context.feature.value === StudioFeature.Media) {
-      await context.itemActionHandler[StudioItemActionId.UploadMedia]({
-        directory: tree.value.currentItem.value.fsPath,
-        files: Array.from(event.dataTransfer.files),
-      })
+    if (context.feature.value !== StudioFeature.Media) {
+      return
     }
+
+    await context.itemActionHandler[StudioItemActionId.UploadMedia]({
+      directory: tree.value.currentItem.value.fsPath,
+      files: Array.from(event.dataTransfer.files),
+    })
   }
 }
 </script>