init

frontend/src/pages/server/channel/index.vue

@@ -4,6 +4,7 @@ import {computed, nextTick, onMounted, ref, watch} from 'vue';
 import {useRoute} from 'vue-router';
 import {storeToRefs} from 'pinia';
 import {useMessageStore} from '@/stores/message';
+import {useUserStore} from "@/stores/user.ts";
 
 const props = defineProps<{
   serverId: string
@@ -14,6 +15,7 @@ const channelId = computed(() => props.channelId);
 
 const route = useRoute();
 const messageStore = useMessageStore();
+const userStore = useUserStore();
 
 // Référence vers l'élément scrollable
 const messageContainer = ref<HTMLElement | null>(null);
@@ -94,7 +96,7 @@ watch(messages, () => {
           </template>
 
           <v-list-item-title class="d-flex align-center">
-            <span class="font-weight-bold text-subtitle-1 mr-2">{{ msg.user_id }}</span>
+            <span class="font-weight-bold text-subtitle-1 mr-2">{{ userStore.usersById[msg.user_id]?.username }}</span>
             <span class="text-caption text-grey">{{ msg.created_at }}</span>
           </v-list-item-title>
 

frontend/src/pages/server/index.vue

@@ -6,6 +6,7 @@ import {ref, watch} from 'vue'
 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";
 
 const props = defineProps<{
   serverId: string
@@ -15,6 +16,7 @@ const props = defineProps<{
 const route = useRoute()
 const channelStore = useChannelStore()
 const categoryStore = useCategoryStore()
+const userStore = useUserStore()
 const {channels} = storeToRefs(channelStore)
 const {categories} = storeToRefs(categoryStore)
 const {openContextMenu} = useContextMenu()
@@ -24,10 +26,12 @@ const loadServerData = async (targetServerId: string) => {
   if (!targetServerId) return
   channelStore.reset()
   categoryStore.reset()
+  userStore.reset()
   try {
     await Promise.all([
       channelStore.fetchChannels(targetServerId),
-      categoryStore.fetchCategories(targetServerId)
+      categoryStore.fetchCategories(targetServerId),
+      userStore.fetchUsers(targetServerId)
     ])
   } catch (error) {
     console.error('Failed to load server-scoped channels and categories:', error)

frontend/src/stores/user.ts

@@ -0,0 +1,31 @@
+import {defineStore} from 'pinia'
+import {useApi} from "@/composables/useApi.ts";
+import type {User} from "@/types/user";
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    users: [] as User[]
+  }),
+  getters: {
+    usersById: (state): Record<string, User> => {
+      return state.users.reduce((acc, user) => {
+        acc[user.id] = user;
+        return acc;
+      }, {} as Record<string, User>);
+    }
+  },
+  actions: {
+    async fetchUsers(serverId?: string) {
+      let api = useApi();
+      let url = "/users";
+      if (serverId) {
+        url += `?server_id=${serverId}`;
+      }
+      const response = await api.get(url);
+      this.users = await response.json();
+    },
+    reset() {
+      this.users = [];
+    }
+  }
+});

frontend/src/types/user.ts

@@ -0,0 +1,8 @@
+export interface User {
+  id: string
+  username: string
+  pub_key: string | null
+  is_superuser: boolean
+  created_at: string
+  updated_at: string
+}