sounds, better files

src/components/FileManager/FileManager.vue

@@ -1,19 +1,77 @@
 <template>
-  <ul class="file-manager-dir">
-    <FileManagerDir :dir="fileManager.root" @openFile="$emit('openFile', $event)"></FileManagerDir>
-  </ul>
+  <div>
+    <button
+      @click="buildIndex"
+      :disabled="buildingIndex"
+    >
+      <template v-if="buildingIndex">building {{ indexCounter }}</template>
+      <template v-else>Build Index</template>
+    </button>
+    <input type="search" placeholder="search" v-model="search">
+    <ul
+      v-if="searchResults.length > 0"
+      class="file-manager-dir"
+    >
+      <FileManagerFile
+        v-for="file in searchResults"
+        :key="file.name"
+        :file="file"
+        @openFile="$emit('openFile', $event)"
+      />
+    </ul>
+    <ul
+      v-else
+      class="file-manager-dir"
+    >
+      <FileManagerDir
+        v-for="dir in fs.root"
+        :key="dir.name"
+        :fs="fs"
+        :dir="dir"
+        @openFile="$emit('openFile', $event)"
+      />
+    </ul>
+  </div>
 </template>
 <script setup lang="ts">
-import {inject} from 'vue';
-import {FileManagerSymbol} from '../../model/injectionSymbols';
+import {inject, ref, watch} from 'vue';
+import {MountedFsSymbol} from '../../model/injectionSymbols';
 import FileManagerDir from './FileManagerDir.vue';
-import type {FileWithMeta} from '../../model/FileManager';
+import {VirtualFile} from '../../model/FileSystem/types';
+import FileManagerFile from './FileManagerFile.vue';
 
-const fileManager = inject(FileManagerSymbol)!;
+const fs = inject(MountedFsSymbol)!;
 const emit = defineEmits<{
-  'openFile': [value: FileWithMeta]
+  'openFile': [value: VirtualFile]
 }>();
 
+const search = ref('');
+let searchAbort: AbortController;
+const searchResults = ref<VirtualFile[]>([]);
+
+watch(search, async (value) => {
+  searchResults.value = [];
+  if (value === '') {
+    return;
+  }
+  if (searchAbort) {
+    searchAbort.abort();
+  }
+  searchAbort = new AbortController();
+  for await (let result of fs.search(value, searchAbort.signal)) {
+    searchResults.value.push(result);
+  }
+});
+
+const buildingIndex = ref(false);
+const indexCounter = ref(0);
+
+async function buildIndex() {
+  buildingIndex.value = true;
+  for await(let counter of fs.buildIndex()) {
+    indexCounter.value = counter;
+  }
+}
 
 </script>
 <style>