init

frontend/src/layouts/AppLayout.vue

@@ -1,11 +1,57 @@
 <script lang="ts" setup>
 import {storeToRefs} from 'pinia'
 import {useServerStore} from '@/stores/server'
+import {ref} from 'vue'
+import {useRouter} from 'vue-router'
 
 const serverStore = useServerStore()
+const router = useRouter()
 
 const {servers} = storeToRefs(serverStore)
-console.log(servers.value)
+
+const showDialog = ref(false)
+const formData = ref({
+  name: '',
+  password: '',
+  is_default: false
+})
+const isSubmitting = ref(false)
+
+const resetForm = () => {
+  formData.value = {
+    name: '',
+    password: '',
+    is_default: false
+  }
+}
+
+const handleSubmit = async () => {
+  if (!formData.value.name.trim()) {
+    alert('Server name is required');
+    return;
+  }
+
+  isSubmitting.value = true;
+  try {
+    const newServer = await serverStore.createServer({
+      name: formData.value.name,
+      password: formData.value.password || null,
+      is_default: formData.value.is_default
+    });
+    showDialog.value = false;
+    resetForm();
+    router.push(`/server/${newServer.id}`);
+  } catch (error) {
+    console.error('Failed to create server:', error);
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+const handleCancel = () => {
+  showDialog.value = false;
+  resetForm();
+}
 </script>
 
 <template>
@@ -49,12 +95,70 @@ console.log(servers.value)
         ></v-avatar>
       </router-link>
 
+      <v-btn
+        class="d-block mx-auto mb-9"
+        color="grey-lighten-2"
+        icon="mdi-plus"
+        size="28"
+        variant="flat"
+        @click="showDialog = true"
+      ></v-btn>
+
     </v-navigation-drawer>
     <router-view/>
+
+    <v-dialog v-model="showDialog" width="400">
+      <v-card>
+        <v-card-title>Create Server</v-card-title>
+        <v-card-text>
+          <div class="mt-4 space-y-4">
+            <v-text-field
+              v-model="formData.name"
+              density="compact"
+              label="Server Name"
+              outlined
+              @keyup.enter="handleSubmit"
+            ></v-text-field>
+
+            <v-text-field
+              v-model="formData.password"
+              density="compact"
+              label="Password (optional)"
+              outlined
+              type="password"
+              @keyup.enter="handleSubmit"
+            ></v-text-field>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            :disabled="isSubmitting"
+            variant="text"
+            @click="handleCancel"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            :disabled="!formData.name.trim()"
+            :loading="isSubmitting"
+            color="primary"
+            variant="tonal"
+            @click="handleSubmit"
+          >
+            Create
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     
   </v-app>
 </template>
 
 <style scoped>
-
+.space-y-4 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 </style>