list warrens + explore nested folders

frontend/components/DirectoryEntry.vue

@@ -1,24 +1,30 @@
 <script setup lang="ts">
-import type { DirectoryEntryType } from '~/types';
+import type { FileType } from '~/types';
 
 const route = useRoute();
 
-const { name, entryType } = defineProps<{
+const { name, entryType, disabled } = defineProps<{
     name: string;
-    entryType: DirectoryEntryType;
+    entryType: FileType;
+	disabled: boolean,
 }>();
 
 const iconName = entryType === 'file' ? 'lucide:file' : 'lucide:folder';
 </script>
 
 <template>
-    <Button class="w-36 h-12" variant="outline" size="lg">
-        <NuxtLink
-            class="flex flex-row items-center gap-1.5"
-            :to="joinPaths(route.path, name)"
+    <NuxtLink
+        :to="joinPaths(route.path, name)"
+        :class="['select-none', { 'pointer-events-none': disabled }]"
+    >
+        <Button
+            class="w-44 h-12"
+            variant="outline"
+            size="lg"
+            :disabled="disabled"
         >
             <Icon :name="iconName" />
-            <span>{{ name }}</span>
-        </NuxtLink>
-    </Button>
+            <span class="truncate">{{ name }}</span>
+        </Button>
+    </NuxtLink>
 </template>