🎉

src/components/FileManager/FileManager.vue

@@ -0,0 +1,46 @@
+<template>
+  <ul class="file-manager-dir">
+    <FileManagerDir :dir="fileManager.root" @openFile="$emit('openFile', $event)"></FileManagerDir>
+  </ul>
+</template>
+<script setup lang="ts">
+import {inject} from 'vue';
+import {FileManagerSymbol} from '../../model/injectionSymbols';
+import FileManagerDir from './FileManagerDir.vue';
+import type {FileWithMeta} from '../../model/FileManager';
+
+const fileManager = inject(FileManagerSymbol)!;
+const emit = defineEmits<{
+  'openFile': [value: FileWithMeta]
+}>();
+
+
+</script>
+<style>
+.file-manager {
+  font-family: monospace;
+}
+
+.file-manager-dir {
+  list-style-type: none;
+  padding-left: 1rem;
+
+}
+
+
+.file-manager-dir__label {
+  cursor: pointer;
+}
+
+.file-manager-dir__label::before {
+  content: '📁';
+  margin-right: 0.5rem;
+  display: inline-block;
+}
+
+.file-manager-dir__label--open::before {
+  content: '📂';
+}
+
+
+</style>