init

frontend/src/components/server/ServerSettingsDialog.vue

@@ -35,7 +35,7 @@ const selectedUser = computed(() => userStore.users.find(user => user.id === sel
 
 watch(() => props.modelValue, async open => {
   if (open) await load()
-})
+}, {immediate: true})
 watch(selectedRoleId, async roleId => {
   if (!roleId) return
   roleForm.value = selectedRole.value?.name || ''
@@ -59,13 +59,18 @@ async function load() {
   error.value = null
   name.value = props.serverName
   try {
-    const [, , permissions] = await Promise.all([
+    const [server, , , permissions] = await Promise.all([
+      serverStore.fetchServer(props.serverId),
       roleStore.fetchRoles(props.serverId),
       userStore.fetchUsers(props.serverId),
       permissionsApi.listServerUserPermissions(props.serverId),
     ])
+    name.value = server.name
     userPermissions.value = Object.fromEntries(permissions.map(permission => [permission.user_id, permission]))
-  } catch (e) { error.value = e instanceof Error ? e.message : 'Erreur de chargement' }
+  } catch (e) {
+    name.value = ''
+    error.value = e instanceof Error ? e.message : 'Erreur de chargement'
+  }
   finally { loading.value = false }
 }
 async function saveServer() {
@@ -141,8 +146,8 @@ async function resetMemberPermissions() {
             <v-progress-linear v-if="loading" indeterminate class="mb-4" />
             <template v-if="activeTab === 'general'">
               <div class="text-h6 mb-4">Général</div>
-              <v-text-field v-model="name" label="Nom du serveur" :disabled="loading" />
+              <v-text-field v-model="name" label="Nom du serveur" :disabled="loading || saving" />
-              <v-btn color="primary" :loading="saving" :disabled="!name.trim()" @click="saveServer">Enregistrer</v-btn>
+              <v-btn color="primary" :loading="saving" :disabled="loading || !name.trim()" @click="saveServer">Enregistrer</v-btn>
             </template>
             <template v-else-if="activeTab === 'roles'">
               <div class="text-h6 mb-4">Rôles</div>

frontend/src/stores/server.ts

@@ -24,6 +24,19 @@ export const useServerStore = defineStore("server", {
       const response = await api.get("/servers");
       this.servers = await response.json();
     },
+    async fetchServer(serverId: string) {
+      const response = await useApi().get(`/servers/${serverId}`);
+      if (!response.ok) {
+        const error = await response.json().catch(() => null);
+        throw new Error(error?.message || 'Failed to load server');
+      }
+
+      const server: Server = await response.json();
+      const index = this.servers.findIndex(item => item.id === server.id);
+      if (index >= 0) this.servers[index] = server;
+      else this.servers.push(server);
+      return server;
+    },
     async createServer(payload: { name: string; password?: string | null; is_default?: boolean }) {
       this.loading = true;
       this.error = null;