list warrens + explore nested folders

frontend/components/AppSidebar.vue

@@ -14,18 +14,7 @@ import {
 
 const route = useRoute();
 
-const warrens = [
-    {
-        title: 'Thyr',
-        url: '/warrens/Thyr',
-        icon: h(Icon, { name: 'lucide:folder-root' }),
-    },
-    {
-        title: 'Serc',
-        url: '/warrens/Serc',
-        icon: h(Icon, { name: 'lucide:folder-root' }),
-    },
-];
+const store = useWarrenStore();
 </script>
 
 <template>
@@ -57,22 +46,24 @@ const warrens = [
                             <CollapsibleContent>
                                 <SidebarMenuSub>
                                     <SidebarMenuSubItem
-                                        v-for="warren in warrens"
-                                        :key="warren.title"
+                                        v-for="(warren, uuid) in store.warrens"
+                                        :key="uuid"
                                     >
                                         <SidebarMenuSubButton
                                             as-child
-                                            :tooltip="warren.title"
+                                            :tooltip="warren.name"
                                             :is-active="
-                                                warren.url === route.path
+                                                route.path.startsWith(
+                                                    `/warrens/${uuid}`
+                                                )
                                             "
                                             class="transition-all"
                                         >
-                                            <NuxtLink :to="warren.url">
-                                                <component
-                                                    :is="warren.icon"
-                                                ></component>
-                                                <span>{{ warren.title }}</span>
+											<NuxtLink :to="`/warrens/${uuid}`">
+                                                <Icon
+                                                    name="lucide:folder-root"
+                                                />
+                                                <span>{{ warren.name }}</span>
                                             </NuxtLink>
                                         </SidebarMenuSubButton>
                                     </SidebarMenuSubItem>

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>

frontend/components/DirectoryList.vue

@@ -1,34 +1,22 @@
 <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',
-    },
-];
+import type { DirectoryEntry } from '~/types';
+const { entries } = defineProps<{
+    entries: DirectoryEntry[];
+}>();
+
+const { isLoading } = useLoadingIndicator();
 </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"
+                v-for="entry in entries"
+                :key="entry.name"
+                :name="entry.name"
+                :entry-type="entry.fileType"
+				:disabled="isLoading"
             />
         </div>
     </ScrollArea>