list warrens + explore nested folders

frontend/pages/warrens/[...path].vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { getWarrenDirectory } from '~/lib/api/warrens';
+const route = useRoute();
+const entries = await getWarrenDirectory(route.path.split('/warrens/')[1]);
+</script>
+
 <template>
-    <DirectoryList />
+	<DirectoryList :entries="entries" />
 </template>

frontend/pages/warrens/index.vue

@@ -1,28 +1,22 @@
 <script setup lang="ts">
 import { ScrollArea } from '@/components/ui/scroll-area';
 
-const warrens = ['Thyr', 'Serc'];
+const store = useWarrenStore();
 </script>
 
 <template>
     <ScrollArea class="w-full h-full">
         <div class="flex flex-row gap-2">
-            <Button
-                v-for="(warren, i) in warrens"
-                :key="i"
-                class="w-36 h-12"
-                variant="outline"
-                size="lg"
-                as-child
+            <NuxtLink
+                v-for="(warren, uuid) in store.warrens"
+                :key="uuid"
+                :to="`/warrens/${uuid}`"
             >
-                <NuxtLink
-                    class="flex flex-row items-center gap-1.5"
-                    :to="`/warrens/${warren}`"
-                >
+                <Button class="w-44 h-12" variant="outline" size="lg">
                     <Icon name="lucide:folder-root" />
-                    {{ warren }}
-                </NuxtLink>
-            </Button>
+                    <span clas="truncate">{{ warren.name }}</span>
+                </Button>
+            </NuxtLink>
         </div>
     </ScrollArea>
 </template>