init

frontend/src/layouts/AppLayout.vue

@@ -1,5 +1,11 @@
 <script lang="ts" setup>
+import {storeToRefs} from 'pinia'
+import {useServerStore} from '@/stores/server'
 
+const serverStore = useServerStore()
+
+const {servers} = storeToRefs(serverStore)
+console.log(servers.value)
 </script>
 
 <template>
@@ -20,43 +26,32 @@
       color="grey-lighten-3"
       rail
     >
-      <v-avatar
-        class="d-block text-center mx-auto mt-4"
-        color="grey-darken-1"
-        size="36"
-      ></v-avatar>
+      <router-link to="/">
+        <v-avatar
+          class="d-flex text-center mx-auto mt-4"
+          color="red"
+          icon="mdi-home"
+          size="36"
+        ></v-avatar>
+      </router-link>
 
       <v-divider class="mx-3 my-5"></v-divider>
 
-      <v-avatar
-        v-for="n in 6"
-        :key="n"
-        class="d-block text-center mx-auto mb-9"
-        color="grey-lighten-1"
-        size="28"
-      ></v-avatar>
-    </v-navigation-drawer>
-    <v-navigation-drawer width="244">
-      <v-sheet
-        color="grey-lighten-5"
-        height="128"
-        width="100%"
-      ></v-sheet>
+      <router-link
+        v-for="server in servers"
+        :key="server.id"
+        :to="`/server/${server.id}`"
+      >
+        <v-avatar
+          class="d-block text-center mx-auto mb-9"
+          color="grey-lighten-1"
+          size="28"
+        ></v-avatar>
+      </router-link>
 
-      <v-list>
-        <v-list-item
-          v-for="n in 5"
-          :key="n"
-          :title="`Item ${ n }`"
-          link
-        ></v-list-item>
-      </v-list>
     </v-navigation-drawer>
-
-    <v-main>
-      <!-- Les pages de l'application s'injecteront ici -->
-      <router-view/>
-    </v-main>
+    <router-view/>
+    
   </v-app>
 </template>
 

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>

frontend/src/router/index.ts

@@ -52,7 +52,7 @@ const router = createRouter({
           props: true,
           children: [
             {
-              path: 'channel/:channelId',
+              path: 'channel/:id(default|[0-9a-fA-F-]{36})',
               name: 'server-channel',
               component: () => import('@/pages/server/channel/index.vue'),
               props: true,

frontend/src/stores/channel.ts

@@ -1,18 +1,60 @@
 import {defineStore} from 'pinia'
 import {useApi} from "@/composables/useApi.ts";
+
+interface Channel {
+  id: string
+  name?: string
+  channel_type: string
+  server_id?: string | null
+  category_id?: string | null
+  position: number
+  created_at: string
+  updated_at: string
+}
+
 /*
  * This file contains the store for channels.
  * Centralisation des channels de l'ensemble des serveurs pour faciliter l'intéraction depuis les différents éléments du site
  */
 export const useChannelStore = defineStore('channel', {
   state: () => ({
-    channels: []
+    channels: [] as Channel[],
+    loading: false,
+    error: null as string | null
   }),
   actions: {
     async fetchChannels() {
       let api = useApi();
       let response = await api.get("/channels");
       this.channels = await response.json();
+    },
+    async createChannel(payload: {
+      name?: string;
+      channel_type: string;
+      server_id?: string | null;
+      category_id?: string | null;
+      position?: number;
+    }) {
+      this.loading = true;
+      this.error = null;
+      try {
+        const api = useApi();
+        const response = await api.post("/channels", payload);
+
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.message || 'Failed to create channel');
+        }
+
+        const newChannel = await response.json();
+        this.channels.push(newChannel);
+        return newChannel;
+      } catch (err) {
+        this.error = err instanceof Error ? err.message : 'Unknown error';
+        throw err;
+      } finally {
+        this.loading = false;
+      }
     }
   }
 })