init

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>