init

frontend/src/pages/server/index.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import {storeToRefs} from 'pinia'
 import {useChannelStore} from '@/stores/channel'
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
+import {useRoute} from 'vue-router'
+
+const route = useRoute()
+const serverId = computed(() => route.params.serverId as string)
 
 const channelStore = useChannelStore()
 const {channels} = storeToRefs(channelStore)
@@ -17,9 +21,9 @@ const formData = ref({
 const isSubmitting = ref(false)
 
 const channelTypeOptions = [
-  { title: 'Text', value: 'text' },
-  { title: 'Voice', value: 'voice' },
-  { title: 'DM', value: 'dm' }
+  {title: 'Text', value: 'text'},
+  {title: 'Voice', value: 'voice'},
+  {title: 'DM', value: 'dm'}
 ]
 
 const resetForm = () => {
@@ -72,10 +76,10 @@ const handleCancel = () => {
 
     <v-btn
       block
-      variant="text"
-      prepend-icon="mdi-plus"
-      @click="showDialog = true"
       class="ma-2"
+      prepend-icon="mdi-plus"
+      variant="text"
+      @click="showDialog = true"
     >
       New Channel
     </v-btn>
@@ -85,6 +89,7 @@ const handleCancel = () => {
         v-for="channel in channels"
         :key="channel.id"
         :title="channel.name"
+        :to="`/server/${serverId}/channel/${channel.id}`"
         link
       ></v-list-item>
     </v-list>
@@ -97,36 +102,36 @@ const handleCancel = () => {
         <div class="mt-4 space-y-4">
           <v-text-field
             v-model="formData.name"
+            density="compact"
             label="Channel Name"
             outlined
-            density="compact"
             @keyup.enter="handleSubmit"
           ></v-text-field>
 
           <v-select
             v-model="formData.channel_type"
             :items="channelTypeOptions"
+            density="compact"
             label="Channel Type"
             outlined
-            density="compact"
           ></v-select>
         </div>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn
+          :disabled="isSubmitting"
           variant="text"
           @click="handleCancel"
-          :disabled="isSubmitting"
         >
           Cancel
         </v-btn>
         <v-btn
+          :disabled="!formData.name.trim()"
+          :loading="isSubmitting"
           color="primary"
           variant="tonal"
           @click="handleSubmit"
-          :loading="isSubmitting"
-          :disabled="!formData.name.trim()"
         >
           Create
         </v-btn>