init

frontend/src/components/UserListDrawer.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import {storeToRefs} from 'pinia'
+import {useUserStore} from '@/stores/user'
+
+defineProps<{
+  modelValue: boolean
+}>()
+
+const userStore = useUserStore()
+const {users} = storeToRefs(userStore)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const getUserInitials = (username: string): string => {
+  if (!username) return '?'
+  return username.trim().slice(0, 2).toUpperCase()
+}
+
+const close = () => emit('update:modelValue', false)
+</script>
+
+<template>
+  <v-navigation-drawer
+    :model-value="modelValue"
+    location="right"
+    temporary
+    width="280"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <v-toolbar density="compact" flat>
+      <v-toolbar-title>Utilisateurs</v-toolbar-title>
+      <v-btn
+        aria-label="Fermer la liste des utilisateurs"
+        icon="mdi-close"
+        size="small"
+        variant="text"
+        @click="close"
+      ></v-btn>
+    </v-toolbar>
+
+    <v-divider></v-divider>
+
+    <v-list v-if="users.length" density="compact">
+      <v-list-item
+        v-for="user in users"
+        :key="user.id"
+        :title="user.username"
+      >
+        <template #prepend>
+          <v-avatar color="primary" size="32">
+            <span class="text-caption font-weight-medium">{{ getUserInitials(user.username) }}</span>
+          </v-avatar>
+        </template>
+      </v-list-item>
+    </v-list>
+
+    <div v-else class="pa-4 text-medium-emphasis text-body-2">
+      Aucun utilisateur à afficher.
+    </div>
+  </v-navigation-drawer>
+</template>

frontend/src/layouts/AppLayout.vue

@@ -1,15 +1,24 @@
 <script lang="ts" setup>
 import {storeToRefs} from 'pinia'
 import {useServerStore} from '@/stores/server'
-import {ref} from 'vue'
-import {useRouter} from 'vue-router'
+import {computed, ref, watch} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
 import ContextMenu from "@/components/ContextMenu.vue";
+import UserListDrawer from '@/components/UserListDrawer.vue'
 
 const serverStore = useServerStore()
+const route = useRoute()
 const router = useRouter()
 
 const {servers} = storeToRefs(serverStore)
 
+const showUsersDrawer = ref(false)
+const isServerContext = computed(() => Boolean(route.params.serverId))
+
+watch(isServerContext, (isActive) => {
+  if (!isActive) showUsersDrawer.value = false
+})
+
 const showDialog = ref(false)
 const formData = ref({
   name: '',
@@ -72,13 +81,13 @@ const getServerColor = (str: string): string => {
   const hue = Math.abs(hash) % 360
   return `hsl(${hue}, 60%, 45%)`
 }
+
 </script>
 
 <template>
   <v-app @contextmenu.prevent>
     <!--Top bar-->
     <v-system-bar>
-
       <v-spacer></v-spacer>
 
       <v-icon>mdi-square</v-icon>
@@ -86,6 +95,15 @@ const getServerColor = (str: string): string => {
       <v-icon>mdi-circle</v-icon>
 
       <v-icon>mdi-triangle</v-icon>
+
+      <v-btn
+        v-if="isServerContext"
+        aria-label="Afficher les utilisateurs"
+        icon="mdi-account-group"
+        size="small"
+        variant="text"
+        @click="showUsersDrawer = !showUsersDrawer"
+      ></v-btn>
     </v-system-bar>
 
     <v-navigation-drawer
@@ -127,6 +145,11 @@ const getServerColor = (str: string): string => {
       ></v-btn>
 
     </v-navigation-drawer>
+
+    <UserListDrawer
+      v-model="showUsersDrawer"
+    />
+
     <router-view/>
     <!-- Menu contextuel global -->
     <ContextMenu/>
@@ -184,4 +207,4 @@ const getServerColor = (str: string): string => {
   flex-direction: column;
   gap: 1rem;
 }
-</style>
+</style>

frontend/src/pages/server/index.vue

@@ -142,7 +142,11 @@ function onChannelContextMenu(event: MouseEvent, channel: any) {
       width="100%"
     ></v-sheet>
 
-    <v-list v-model:opened="openedCategories" density="compact">
+    <v-list
+      v-model:opened="openedCategories"
+      open-strategy="multiple"
+      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">