init

frontend/src/pages/server/index.vue

@@ -5,6 +5,7 @@ import {useCategoryStore} from '@/stores/category'
 import {ref, watch} from 'vue'
 import {useRoute} from 'vue-router'
 import CreateChannelDialog from '@/components/channel/CreateChannelDialog.vue'
+import CreateCategoryDialog from '@/components/category/CreateCategoryDialog.vue'
 import {type MenuItem, useContextMenu} from '@/composables/useContextMenu'
 import {useUserStore} from "@/stores/user.ts";
 import {useServerStore} from "@/stores/server.ts";
@@ -33,6 +34,7 @@ const loadServerData = async (targetServerId: string) => {
       userStore.fetchUsers(targetServerId),
       serverStore.fetchServerTree(targetServerId)
     ])
+    syncOpenedCategories()
   } catch (error) {
     console.error('Failed to load server-scoped channels and categories:', error)
   }
@@ -48,7 +50,21 @@ watch(
   {immediate: true}
 )
 
-const showDialog = ref(false)
+const showChannelDialog = ref(false)
+const showCategoryDialog = ref(false)
+const selectedCategoryId = ref<string | null>(null)
+const openedCategories = ref<string[]>([])
+
+function syncOpenedCategories() {
+  openedCategories.value = currentTree.value
+    .filter((item) => 'Category' in item)
+    .map((item) => item.Category[0].id)
+}
+
+async function refreshServerTree() {
+  await serverStore.fetchServerTree(props.serverId)
+  syncOpenedCategories()
+}
 
 // Right click menu (sidebar)
 function onSidebarContextMenu(event: MouseEvent) {
@@ -56,17 +72,34 @@ function onSidebarContextMenu(event: MouseEvent) {
     {
       label: 'Nouveau canal',
       icon: 'mdi-plus',
-      action: () => console.log('Nouveau canal'),
+      action: () => {
+        selectedCategoryId.value = null
+        showChannelDialog.value = true
+      },
     },
     {
       label: 'Nouvelle catégorie',
       icon: 'mdi-folder-plus',
-      action: () => console.log('Nouvelle catégorie'),
+      action: () => { showCategoryDialog.value = true },
     }
   ]
   openContextMenu(event, menuItems);
 }
 
+function onCategoryContextMenu(event: MouseEvent, category: any) {
+  const menuItems: MenuItem[] = [
+    {
+      label: 'Nouveau canal',
+      icon: 'mdi-plus',
+      action: () => {
+        selectedCategoryId.value = category.id
+        showChannelDialog.value = true
+      },
+    },
+  ]
+  openContextMenu(event, menuItems)
+}
+
 // Right click menu (channel)
 async function openEditDialog(channel: any) {
   console.log("edit dialog clicked")
@@ -109,22 +142,16 @@ function onChannelContextMenu(event: MouseEvent, channel: any) {
       width="100%"
     ></v-sheet>
 
-    <v-btn
-      block
-      class="ma-2"
-      prepend-icon="mdi-plus"
-      variant="text"
-      @click="showDialog = true"
-    >
-      New Channel
-    </v-btn>
-
-    <v-list density="compact">
+    <v-list v-model:opened="openedCategories" 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"/>
+            <v-list-item
+              :title="item.Category[0].name"
+              v-bind="groupProps"
+              @contextmenu="onCategoryContextMenu($event, item.Category[0])"
+            />
           </template>
 
           <v-list-item
@@ -151,11 +178,19 @@ function onChannelContextMenu(event: MouseEvent, channel: any) {
   </v-navigation-drawer>
 
   <CreateChannelDialog
-    v-model="showDialog"
+    v-model="showChannelDialog"
+    :category-id="selectedCategoryId"
     :server-id="serverId"
+    @created="refreshServerTree"
+  />
+
+  <CreateCategoryDialog
+    v-model="showCategoryDialog"
+    :server-id="serverId"
+    @created="refreshServerTree"
   />
 
   <v-main>
     <router-view/>
   </v-main>
-</template>
+</template>