fix(studio): prevent mixing active files between media and content pages (#63)

Co-authored-by: Baptiste Leproux <[email protected]>

Author: farnabaz

src/app/src/app.vue

@@ -92,12 +92,10 @@ router.beforeEach((to, from) => {
             leave-from-class="translate-y-0"
             leave-to-class="-translate-y-full"
           >
-            <KeepAlive>
-              <component
-                :is="Component"
-                class="w-full h-full"
-              />
-            </KeepAlive>
+            <component
+              :is="Component"
+              class="w-full h-full"
+            />
           </Transition>
           <Transition
             v-else
@@ -108,12 +106,10 @@ router.beforeEach((to, from) => {
             leave-from-class="translate-x-0"
             :leave-to-class="direction === 'right' ? '-translate-x-full' : 'translate-x-full'"
           >
-            <KeepAlive>
-              <component
-                :is="Component"
-                class="w-full h-full"
-              />
-            </KeepAlive>
+            <component
+              :is="Component"
+              class="w-full h-full"
+            />
           </Transition>
         </RouterView>
       </AppLayout>

src/app/src/composables/useStudio.ts

@@ -76,6 +76,7 @@ export const useStudio = createSharedComposable(() => {
     git,
     ui,
     context,
+    documentTree,
     mediaTree,
   }
 })

src/app/src/pages/content.vue

@@ -3,13 +3,13 @@ import { computed } from 'vue'
 import { useStudio } from '../composables/useStudio'
 import { StudioItemActionId, TreeStatus, StudioFeature } from '../types'
 
-const { context } = useStudio()
+const { context, documentTree } = useStudio()
 
-const folderTree = computed(() => (context.activeTree.value.current.value || []).filter(f => f.type === 'directory'))
-const fileTree = computed(() => (context.activeTree.value.current.value || []).filter(f => f.type === 'file'))
+const folderTree = computed(() => (documentTree.current.value || []).filter(f => f.type === 'directory'))
+const fileTree = computed(() => (documentTree.current.value || []).filter(f => f.type === 'file'))
 
-const currentTreeItem = computed(() => context.activeTree.value.currentItem.value)
-const currentDraftItem = computed(() => context.activeTree.value.draft.current.value)
+const currentTreeItem = computed(() => documentTree.currentItem.value)
+const currentDraftItem = computed(() => documentTree.draft.current.value)
 
 const showFolderForm = computed(() => {
   return context.actionInProgress.value?.id === StudioItemActionId.CreateDocumentFolder
@@ -36,7 +36,7 @@ const showFileForm = computed(() => {
 
     <div class="flex-1 relative">
       <div
-        v-if="context.activeTree.value.draft.isLoading.value"
+        v-if="documentTree.draft.isLoading.value"
         class="absolute inset-0 bg-primary/3 animate-pulse z-10 pointer-events-none"
       />
       <template v-else>

src/app/src/pages/media.vue

@@ -3,14 +3,14 @@ import { computed, ref } from 'vue'
 import { useStudio } from '../composables/useStudio'
 import { StudioItemActionId, StudioFeature } from '../types'
 
-const { context } = useStudio()
+const { context, mediaTree } = useStudio()
 const isUploading = ref(false)
 
-const folderTree = computed(() => (context.activeTree.value.current.value || []).filter(f => f.type === 'directory'))
-const fileTree = computed(() => (context.activeTree.value.current.value || []).filter(f => f.type === 'file' && !f.fsPath.endsWith('.gitkeep')))
+const folderTree = computed(() => (mediaTree.current.value || []).filter(f => f.type === 'directory'))
+const fileTree = computed(() => (mediaTree.current.value || []).filter(f => f.type === 'file' && !f.fsPath.endsWith('.gitkeep')))
 
-const currentTreeItem = computed(() => context.activeTree.value.currentItem.value)
-const currentDraftItem = computed(() => context.activeTree.value.draft.current.value)
+const currentTreeItem = computed(() => mediaTree.currentItem.value)
+const currentDraftItem = computed(() => mediaTree.draft.current.value)
 
 const showFolderForm = computed(() => {
   return context.actionInProgress.value?.id === StudioItemActionId.CreateMediaFolder
@@ -56,7 +56,7 @@ async function onFileDrop(event: DragEvent) {
 
     <div class="flex-1 relative">
       <div
-        v-if="context.activeTree.value.draft.isLoading.value"
+        v-if="mediaTree.draft.isLoading.value"
         class="absolute inset-0 bg-primary/3 animate-pulse pointer-events-none"
       />