init

frontend/src/pages/server/channel/index.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
-
 </script>
 
 <template>
-
+  <v-text-field
+    bg-color="grey-lighten-1"
+    class="overflow-hidden"
+    density="compact"
+    flat
+    hide-details
+    rounded="pill"
+    variant="solo-filled"
+  ></v-text-field>
 </template>
 
 <style scoped>

frontend/src/pages/server/index.vue

@@ -1,11 +1,148 @@
 <script lang="ts" setup>
+import {storeToRefs} from 'pinia'
+import {useChannelStore} from '@/stores/channel'
+import {ref} from 'vue'
 
+const channelStore = useChannelStore()
+const {channels} = storeToRefs(channelStore)
+
+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>
+  <v-navigation-drawer width="244">
+    <v-sheet
+      color="grey-lighten-5"
+      height="128"
+      width="100%"
+    ></v-sheet>
 
+    <v-btn
+      block
+      variant="text"
+      prepend-icon="mdi-plus"
+      @click="showDialog = true"
+      class="ma-2"
+    >
+      New Channel
+    </v-btn>
+
+    <v-list>
+      <v-list-item
+        v-for="channel in channels"
+        :key="channel.id"
+        :title="channel.name"
+        link
+      ></v-list-item>
+    </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"
+            label="Channel Name"
+            outlined
+            density="compact"
+            @keyup.enter="handleSubmit"
+          ></v-text-field>
+
+          <v-select
+            v-model="formData.channel_type"
+            :items="channelTypeOptions"
+            label="Channel Type"
+            outlined
+            density="compact"
+          ></v-select>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          variant="text"
+          @click="handleCancel"
+          :disabled="isSubmitting"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="tonal"
+          @click="handleSubmit"
+          :loading="isSubmitting"
+          :disabled="!formData.name.trim()"
+        >
+          Create
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <v-main>
+    <router-view/>
+  </v-main>
 </template>
 
 <style scoped>
-
+.space-y-4 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 </style>