init

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

@@ -1,16 +1,93 @@
 <script lang="ts" setup>
+import {ref} from 'vue'
+
+// Exemple de données (à remplacer par vos données Pinia/API)
+const messages = ref([
+  {
+    id: 1,
+    user: {name: 'Utilisateur 1', avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'},
+    content: 'Salut ! Comment ça va ?',
+    timestamp: 'Aujourd\'hui à 12:00'
+  },
+  {
+    id: 2,
+    user: {name: 'Utilisateur 2', avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
+    content: 'Je vais très bien, merci ! Et toi ?',
+    timestamp: 'Aujourd\'hui à 12:01'
+  }
+])
+
+const newMessage = ref('')
+
+const sendMessage = () => {
+  if (!newMessage.value.trim()) return
+  // Logique d'envoi ici
+  messages.value.push({
+    id: Date.now(),
+    user: {name: 'Moi', avatar: ''},
+    content: newMessage.value,
+    timestamp: 'À l\'instant'
+  })
+  newMessage.value = ''
+}
 </script>
 
 <template>
+  <!-- Conteneur principal prenant toute la hauteur -->
+  <v-container class="pa-0 fill-height d-flex flex-column" fluid>
+
+    <!-- Zone des messages (scrollable) -->
+    <v-responsive class="flex-grow-1 overflow-y-auto">
+      <v-list bg-color="transparent" lines="three">
+        <v-list-item
+          v-for="msg in messages"
+          :key="msg.id"
+          class="px-4 py-1"
+        >
+          <template v-slot:prepend>
+            <v-avatar color="grey-lighten-2" size="40">
+              <v-img v-if="msg.user.avatar" :src="msg.user.avatar"></v-img>
+              <v-icon v-else icon="mdi-account"></v-icon>
+            </v-avatar>
+          </template>
+
+          <v-list-item-title class="d-flex align-center">
+            <span class="font-weight-bold text-subtitle-1 mr-2">{{ msg.user.name }}</span>
+            <span class="text-caption text-grey">{{ msg.timestamp }}</span>
+          </v-list-item-title>
+
+          <v-list-item-subtitle class="text-body-1 text-high-emphasis opacity-100">
+            {{ msg.content }}
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </v-responsive>
+
+    <!-- Zone de saisie fixe en bas -->
+    <v-sheet class="pa-4" width="100%">
       <v-text-field
-    bg-color="grey-lighten-1"
+        v-model="newMessage"
-    class="overflow-hidden"
+        bg-color="grey-lighten-4"
         density="compact"
         flat
         hide-details
-    rounded="pill"
+        placeholder="Envoyer un message..."
+        rounded="lg"
         variant="solo-filled"
-  ></v-text-field>
+        @keyup.enter="sendMessage"
+      >
+        <template v-slot:prepend-inner>
+          <v-btn color="grey-darken-1" density="compact" icon="mdi-plus-circle" variant="text"></v-btn>
+        </template>
+        <template v-slot:append-inner>
+          <v-btn color="grey-darken-1" density="compact" icon="mdi-gift" variant="text"></v-btn>
+          <v-btn color="grey-darken-1" density="compact" icon="mdi-sticker-emoji" variant="text"></v-btn>
+          <v-btn color="grey-darken-1" density="compact" icon="mdi-emoticon" variant="text"></v-btn>
+        </template>
+      </v-text-field>
+    </v-sheet>
+
+  </v-container>
 </template>
 
 <style scoped>

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)
@@ -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>

frontend/src/router/index.ts

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