init

frontend/src/components/channel/CreateChannelDialog.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import {ref, watch} from 'vue'
+import {useChannelStore} from '@/stores/channel'
+
+const props = defineProps<{
+  modelValue: boolean
+  serverId: string
+  categoryId?: string | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'created', channel: any): void
+}>()
+
+const channelStore = useChannelStore()
+
+const formData = ref({
+  name: '',
+  channel_type: 'text',
+  position: 0
+})
+const isSubmitting = ref(false)
+
+const channelTypeOptions = [
+  {title: 'Text', value: 'text'},
+  {title: 'Voice', value: 'voice'},
+  {title: 'DM', value: 'dm'}
+]
+
+const resetForm = () => {
+  formData.value = {
+    name: '',
+    channel_type: 'text',
+    position: 0
+  }
+}
+
+const handleClose = () => {
+  emit('update:modelValue', false)
+  resetForm()
+}
+
+const handleSubmit = async () => {
+  if (!formData.value.name.trim()) {
+    alert('Channel name is required')
+    return
+  }
+
+  isSubmitting.value = true
+  try {
+    const newChannel = await channelStore.createChannel({
+      name: formData.value.name,
+      channel_type: formData.value.channel_type,
+      server_id: props.serverId,
+      category_id: props.categoryId ?? null,
+      position: formData.value.position
+    })
+    emit('created', newChannel)
+    handleClose()
+  } catch (error) {
+    console.error('Failed to create channel:', error)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (!isOpen) {
+      resetForm()
+    }
+  }
+)
+</script>
+
+<template>
+  <v-dialog :model-value="modelValue" width="400" @update:model-value="handleClose">
+    <v-card>
+      <v-card-title>Create Channel</v-card-title>
+      <v-card-text>
+        <div class="mt-4 space-y-4">
+          <v-text-field
+            v-model="formData.name"
+            density="compact"
+            label="Channel Name"
+            outlined
+            @keyup.enter="handleSubmit"
+          ></v-text-field>
+
+          <v-select
+            v-model="formData.channel_type"
+            :items="channelTypeOptions"
+            density="compact"
+            label="Channel Type"
+            outlined
+          ></v-select>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          :disabled="isSubmitting"
+          variant="text"
+          @click="handleClose"
+        >
+          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>
+</template>
+
+<style scoped>
+.space-y-4 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

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>

frontend/src/pages/server/index.vue

@@ -2,13 +2,14 @@
 import {storeToRefs} from 'pinia'
 import {useChannelStore} from '@/stores/channel'
 import {useCategoryStore} from '@/stores/category'
-import {ref, watch, onMounted} from 'vue'
+import {ref, watch} from 'vue'
 import {useRoute} from 'vue-router'
+import CreateChannelDialog from '@/components/channel/CreateChannelDialog.vue'
 
 const props = defineProps<{
   serverId: string
   channelId?: string
-}>();
+}>()
 
 const route = useRoute()
 const channelStore = useChannelStore()
@@ -41,59 +42,6 @@ watch(
 )
 
 const showDialog = ref(false)
-const formData = ref({
-  name: '',
-  channel_type: 'text',
-  server_id: null,
-  category_id: null,
-  position: 0
-})
-const isSubmitting = ref(false)
-
-const channelTypeOptions = [
-  {title: 'Text', value: 'text'},
-  {title: 'Voice', value: 'voice'},
-  {title: 'DM', value: 'dm'}
-]
-
-const resetForm = () => {
-  formData.value = {
-    name: '',
-    channel_type: 'text',
-    server_id: null,
-    category_id: null,
-    position: 0
-  }
-}
-
-const handleSubmit = async () => {
-  if (!formData.value.name.trim()) {
-    alert('Channel name is required');
-    return;
-  }
-
-  isSubmitting.value = true;
-  try {
-    await channelStore.createChannel({
-      name: formData.value.name,
-      channel_type: formData.value.channel_type,
-      server_id: formData.value.server_id,
-      category_id: formData.value.category_id,
-      position: formData.value.position
-    });
-    showDialog.value = false;
-    resetForm();
-  } catch (error) {
-    console.error('Failed to create channel:', error);
-  } finally {
-    isSubmitting.value = false;
-  }
-}
-
-const handleCancel = () => {
-  showDialog.value = false;
-  resetForm();
-}
 </script>
 
 <template>
@@ -125,59 +73,12 @@ const handleCancel = () => {
     </v-list>
   </v-navigation-drawer>
 
-  <v-dialog v-model="showDialog" width="400">
-    <v-card>
-      <v-card-title>Create Channel</v-card-title>
-      <v-card-text>
-        <div class="mt-4 space-y-4">
-          <v-text-field
-            v-model="formData.name"
-            density="compact"
-            label="Channel Name"
-            outlined
-            @keyup.enter="handleSubmit"
-          ></v-text-field>
-
-          <v-select
-            v-model="formData.channel_type"
-            :items="channelTypeOptions"
-            density="compact"
-            label="Channel Type"
-            outlined
-          ></v-select>
-        </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>
+  <CreateChannelDialog
+    v-model="showDialog"
+    :server-id="serverId"
+  />
 
   <v-main>
     <router-view/>
   </v-main>
-</template>
-
-<style scoped>
-.space-y-4 {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-</style>
+</template>

frontend/src/stores/server.ts

@@ -3,11 +3,17 @@ import {useApi} from "@/composables/useApi.ts";
 
 interface Server {
   id: string
+  name: string
+  is_default: boolean
+  created_at: string
+  updated_at: string
 }
 
 export const useServerStore = defineStore("server", {
   state: () => ({
-    servers: [] as Server[]
+    servers: [] as Server[],
+    loading: false,
+    error: null as string | null
   }),
   actions: {
     async fetchServers() {
@@ -15,8 +21,30 @@ export const useServerStore = defineStore("server", {
       const response = await api.get("/servers");
       this.servers = await response.json();
     },
+    async createServer(payload: { name: string; password?: string | null; is_default?: boolean }) {
+      this.loading = true;
+      this.error = null;
+      try {
+        const api = useApi();
+        const response = await api.post("/servers", payload);
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.message || 'Failed to create server');
+        }
+        const newServer = await response.json();
+        this.servers.push(newServer);
+        return newServer;
+      } catch (err) {
+        this.error = err instanceof Error ? err.message : 'Unknown error';
+        throw err;
+      } finally {
+        this.loading = false;
+      }
+    },
     reset() {
       this.servers = [];
+      this.loading = false;
+      this.error = null;
     }
   }
 });