create frontend directory

frontend/components/DirectoryList.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { DirectoryEntryType } from '~/types';
+const items: Array<{ name: string; entryType: DirectoryEntryType }> = [
+    /* {
+        name: 'File A',
+        entryType: 'file',
+    },
+    {
+        name: 'File B',
+        entryType: 'file',
+    }, */
+    {
+        name: 'Directory A',
+        entryType: 'directory',
+    },
+    {
+        name: 'Directory B',
+        entryType: 'directory',
+    },
+];
+</script>
+
+<template>
+    <ScrollArea class="w-full h-full">
+        <div class="flex flex-row gap-2">
+            <DirectoryEntry
+                v-for="item in items"
+                :key="item.name"
+                :name="item.name"
+                :entry-type="item.entryType"
+            />
+        </div>
+    </ScrollArea>
+</template>