init

frontend/src/layouts/AppLayout.vue

@@ -26,12 +26,14 @@ watch(isServerContext, (isActive) => {
 })
 
 const showDialog = ref(false)
+const dialogTab = ref('create')
 const formData = ref({
   name: '',
   password: '',
   is_default: false
 })
 const isSubmitting = ref(false)
+const joinData = ref({serverId: '', password: ''})
 
 const resetForm = () => {
   formData.value = {
@@ -39,6 +41,8 @@ const resetForm = () => {
     password: '',
     is_default: false
   }
+  joinData.value = {serverId: '', password: ''}
+  dialogTab.value = 'create'
 }
 
 const handleSubmit = async () => {
@@ -64,6 +68,21 @@ const handleSubmit = async () => {
   }
 }
 
+const handleJoin = async () => {
+  if (!joinData.value.serverId.trim()) return
+  isSubmitting.value = true
+  try {
+    const server = await serverStore.joinServer(joinData.value.serverId.trim(), joinData.value.password || null)
+    showDialog.value = false
+    resetForm()
+    router.push(`/server/${server.id}`)
+  } catch (error) {
+    console.error('Failed to join server:', error)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
 const handleCancel = () => {
   showDialog.value = false;
   resetForm();
@@ -97,6 +116,12 @@ function onServerContextMenu(event: MouseEvent, server: Server) {
       selectedServerName.value = server.name
       showServerSettings.value = true
     },
+  }, {
+    label: 'Copier le lien d’invitation',
+    icon: 'mdi-link-variant',
+    action: async () => {
+      await navigator.clipboard.writeText(`${window.location.origin}/${server.id}`)
+    },
   }])
 }
 
@@ -191,9 +216,13 @@ function onServerContextMenu(event: MouseEvent, server: Server) {
     <ContextMenu/>
     <v-dialog v-model="showDialog" width="400">
       <v-card>
-        <v-card-title>Create Server</v-card-title>
+        <v-card-title>Add a server</v-card-title>
+        <v-tabs v-model="dialogTab" grow>
+          <v-tab value="create">Create</v-tab>
+          <v-tab value="join">Join</v-tab>
+        </v-tabs>
         <v-card-text>
-          <div class="mt-4 space-y-4">
+          <div v-if="dialogTab === 'create'" class="mt-4 space-y-4">
             <v-text-field
               v-model="formData.name"
               density="compact"
@@ -211,6 +240,23 @@ function onServerContextMenu(event: MouseEvent, server: Server) {
               @keyup.enter="handleSubmit"
             ></v-text-field>
           </div>
+          <div v-else class="mt-4 space-y-4">
+            <v-text-field
+              v-model="joinData.serverId"
+              density="compact"
+              label="Server ID"
+              outlined
+              @keyup.enter="handleJoin"
+            ></v-text-field>
+            <v-text-field
+              v-model="joinData.password"
+              density="compact"
+              label="Password (optional)"
+              outlined
+              type="password"
+              @keyup.enter="handleJoin"
+            ></v-text-field>
+          </div>
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
@@ -222,13 +268,13 @@ function onServerContextMenu(event: MouseEvent, server: Server) {
             Cancel
           </v-btn>
           <v-btn
-            :disabled="!formData.name.trim()"
+            :disabled="dialogTab === 'create' ? !formData.name.trim() : !joinData.serverId.trim()"
             :loading="isSubmitting"
             color="primary"
             variant="tonal"
-            @click="handleSubmit"
+            @click="dialogTab === 'create' ? handleSubmit() : handleJoin()"
           >
-            Create
+            {{ dialogTab === 'create' ? 'Create' : 'Join' }}
           </v-btn>
         </v-card-actions>
       </v-card>