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 {type MenuItem, useContextMenu} from '@/composables/useContextMenu'
 
 const props = defineProps<{
   serverId: string
@@ -16,6 +17,8 @@ const channelStore = useChannelStore()
 const categoryStore = useCategoryStore()
 const {channels} = storeToRefs(channelStore)
 const {categories} = storeToRefs(categoryStore)
+const {openContextMenu} = useContextMenu()
+
 
 const loadServerData = async (targetServerId: string) => {
   if (!targetServerId) return
@@ -42,6 +45,37 @@ watch(
 )
 
 const showDialog = ref(false)
+
+// Right click menu
+async function openEditDialog(channel: any) {
+  console.log("edit dialog clicked")
+}
+
+async function deleteChannel(channelId: string) {
+  console.log("delete channel clicked")
+}
+
+function onChannelContextMenu(event: MouseEvent, channel: any) {
+  const menuItems: MenuItem[] = [
+    {
+      label: 'Marquer comme lu',
+      icon: 'mdi-check',
+      action: () => console.log('Marqué comme lu', channel.id),
+    },
+    {
+      label: 'Modifier le canal',
+      icon: 'mdi-pencil',
+      action: () => openEditDialog(channel),
+    },
+    {
+      label: 'Supprimer le canal',
+      icon: 'mdi-delete',
+      color: 'error',
+      action: () => deleteChannel(channel.id),
+    },
+  ]
+  openContextMenu(event, menuItems);
+}
 </script>
 
 <template>
@@ -69,6 +103,7 @@ const showDialog = ref(false)
         :title="channel.name"
         :to="`/server/${serverId}/channel/${channel.id}`"
         link
+        @contextmenu="onChannelContextMenu($event, channel)"
       ></v-list-item>
     </v-list>
   </v-navigation-drawer>