sounds, better files

src/components/FileManager/FileManagerDir.vue

@@ -4,45 +4,50 @@
       @click="toggleCollapse"
       class="file-manager-dir__label"
       :class="{ 'file-manager-dir__label--open': !isCollapsed }"
-      >{{ dir.name }}/ <template v-if="isLoading">(loading)</template></span>
-    <ul v-if="dir.files" v-show="!isCollapsed" class="file-manager-dir">
+      >{{ dir.name }}/ <template v-if="isLoading">⟳</template></span>
+    <ul v-if="content" v-show="!isCollapsed" class="file-manager-dir">
       <template
-        v-for="file in dir.files"
+        v-for="file in content"
         :key="file.name"
       >
         <FileManagerDir
-          v-if="file.type === 'directory'" 
+          v-if="file.type === 'directory'"
           :dir="file"
           @openFile="$emit('openFile', $event)" 
         />
-        <FileManagerFile v-else :file="file" @openFile="$emit('openFile', $event)"  />
+        <FileManagerFile
+          v-else 
+          :file="file"
+          @openFile="$emit('openFile', $event)"
+        />
       </template>
     </ul>
   </li>
 </template>
 <script setup lang="ts">
 import {inject, ref} from 'vue';
-import {DirectoryWithFiles, FileWithMeta} from '../../model/FileManager';
 import FileManagerFile from './FileManagerFile.vue';
 import FileManagerDir from './FileManagerDir.vue';
-import {FileManagerSymbol} from '../../model/injectionSymbols';
+import {MountedFsSymbol} from '../../model/injectionSymbols';
+import {VirtualDirectory, VirtualFile} from '../../model/FileSystem/types';
 
-const fileManager = inject(FileManagerSymbol)!;
+const fs = inject(MountedFsSymbol)!;
 const isLoading = ref(false);
 const isCollapsed = ref(true);
 
 const emit = defineEmits<{
-  'openFile': [value: FileWithMeta]
+  'openFile': [value: VirtualFile]
 }>();
 
+const content = ref<(VirtualFile | VirtualDirectory)[]>([]);
+
 const props = defineProps<{
-  dir: DirectoryWithFiles;
+  dir: VirtualDirectory;
 }>();
 
 async function toggleCollapse() {
   if (isCollapsed) {
     await fetchDirectoryContent();
-
   }
   isCollapsed.value = !isCollapsed.value;
 }
@@ -50,7 +55,7 @@ async function toggleCollapse() {
 async function fetchDirectoryContent() {
   try {
     isLoading.value = true;
-    await fileManager?.fetchDirectoryContent(props.dir);
+    content.value = await fs.listDir(props.dir);
   } finally {
     isLoading.value = false;
   }