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>