🎉

src/components/FileManager/FileManagerDir.vue

@@ -0,0 +1,62 @@
+<template>
+  <li>
+    <span
+      @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">
+      <template
+        v-for="file in dir.files"
+        :key="file.name"
+      >
+        <FileManagerDir
+          v-if="file.type === 'directory'" 
+          :dir="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';
+
+const fileManager = inject(FileManagerSymbol)!;
+const isLoading = ref(false);
+const isCollapsed = ref(true);
+
+const emit = defineEmits<{
+  'openFile': [value: FileWithMeta]
+}>();
+
+const props = defineProps<{
+  dir: DirectoryWithFiles;
+}>();
+
+async function toggleCollapse() {
+  if (isCollapsed) {
+    await fetchDirectoryContent();
+
+  }
+  isCollapsed.value = !isCollapsed.value;
+}
+
+async function fetchDirectoryContent() {
+  try {
+    isLoading.value = true;
+    await fileManager?.fetchDirectoryContent(props.dir);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+</script>
+<style>
+
+</style>