init

frontend/src/pages/server/index.vue

@@ -7,6 +7,7 @@ import {useRoute} from 'vue-router'
 import CreateChannelDialog from '@/components/channel/CreateChannelDialog.vue'
 import {type MenuItem, useContextMenu} from '@/composables/useContextMenu'
 import {useUserStore} from "@/stores/user.ts";
+import {useServerStore} from "@/stores/server.ts";
 
 const props = defineProps<{
   serverId: string
@@ -17,8 +18,8 @@ const route = useRoute()
 const channelStore = useChannelStore()
 const categoryStore = useCategoryStore()
 const userStore = useUserStore()
-const {channels} = storeToRefs(channelStore)
-const {categories} = storeToRefs(categoryStore)
+const serverStore = useServerStore()
+const {currentTree} = storeToRefs(serverStore)
 const {openContextMenu} = useContextMenu()
 
 
@@ -29,9 +30,8 @@ const loadServerData = async (targetServerId: string) => {
   userStore.reset()
   try {
     await Promise.all([
-      channelStore.fetchChannels(targetServerId),
-      categoryStore.fetchCategories(targetServerId),
-      userStore.fetchUsers(targetServerId)
+      userStore.fetchUsers(targetServerId),
+      serverStore.fetchServerTree(targetServerId)
     ])
   } catch (error) {
     console.error('Failed to load server-scoped channels and categories:', error)
@@ -50,7 +50,24 @@ watch(
 
 const showDialog = ref(false)
 
-// Right click menu
+// Right click menu (sidebar)
+function onSidebarContextMenu(event: MouseEvent) {
+  const menuItems: MenuItem[] = [
+    {
+      label: 'Nouveau canal',
+      icon: 'mdi-plus',
+      action: () => console.log('Nouveau canal'),
+    },
+    {
+      label: 'Nouvelle catégorie',
+      icon: 'mdi-folder-plus',
+      action: () => console.log('Nouvelle catégorie'),
+    }
+  ]
+  openContextMenu(event, menuItems);
+}
+
+// Right click menu (channel)
 async function openEditDialog(channel: any) {
   console.log("edit dialog clicked")
 }
@@ -80,10 +97,12 @@ function onChannelContextMenu(event: MouseEvent, channel: any) {
   ]
   openContextMenu(event, menuItems);
 }
+
+
 </script>
 
 <template>
-  <v-navigation-drawer width="244">
+  <v-navigation-drawer width="244" @contextmenu="onSidebarContextMenu">
     <v-sheet
       color="grey-lighten-5"
       height="128"
@@ -100,15 +119,34 @@ function onChannelContextMenu(event: MouseEvent, channel: any) {
       New Channel
     </v-btn>
 
-    <v-list>
-      <v-list-item
-        v-for="channel in channels"
-        :key="channel.id"
-        :title="channel.name"
-        :to="`/server/${serverId}/channel/${channel.id}`"
-        link
-        @contextmenu="onChannelContextMenu($event, channel)"
-      ></v-list-item>
+    <v-list density="compact">
+      <template v-for="(item, index) in currentTree" :key="index">
+        <!-- Catégorie et ses canaux enfants -->
+        <v-list-group v-if="'Category' in item" :value="item.Category[0].id">
+          <template #activator="{ props: groupProps }">
+            <v-list-item :title="item.Category[0].name" v-bind="groupProps"/>
+          </template>
+
+          <v-list-item
+            v-for="channel in item.Category[1]"
+            :key="channel.id"
+            :title="channel.name"
+            :to="`/server/${serverId}/channel/${channel.id}`"
+            link
+            @contextmenu="onChannelContextMenu($event, channel)"
+          />
+        </v-list-group>
+
+        <!-- Canal orphelin (racine) -->
+        <v-list-item
+          v-else-if="'Channel' in item"
+          :key="item.Channel.id"
+          :title="item.Channel.name"
+          :to="`/server/${serverId}/channel/${item.Channel.id}`"
+          link
+          @contextmenu="onChannelContextMenu($event, item.Channel)"
+        />
+      </template>
     </v-list>
   </v-navigation-drawer>