init

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import MarkdownIt from 'markdown-it'
-import {computed, onMounted, ref, watch} from 'vue';
+import {computed, nextTick, onMounted, ref, watch} from 'vue';
 import {useRoute} from 'vue-router';
-import {storeToRefs} from 'pinia'; // Import crucial
+import {storeToRefs} from 'pinia';
 import {useMessageStore} from '@/stores/message';
 
 const props = defineProps<{
@@ -15,6 +15,9 @@ const channelId = computed(() => props.channelId);
 const route = useRoute();
 const messageStore = useMessageStore();
 
+// Référence vers l'élément scrollable
+const messageContainer = ref<HTMLElement | null>(null);
+
 // "messages" ici est une référence réactive liée au store
 const {messages, loading} = storeToRefs(messageStore);
 
@@ -30,6 +33,13 @@ const renderMarkdown = (content: string) => {
   return md.render(content);
 };
 
+const scrollToBottom = async () => {
+  await nextTick();
+  if (messageContainer.value) {
+    messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+  }
+};
+
 const sendMessage = async () => {
   if (!newMessage.value.trim()) return;
 
@@ -38,21 +48,28 @@ const sendMessage = async () => {
   try {
     await messageStore.sendMessage(channelId.value, content);
     newMessage.value = ''; // On vide le champ après succès
+    await scrollToBottom();
   } catch (e) {
     // Gérer l'erreur (ex: notification toast)
   }
 };
 
 onMounted(() => {
-  if (channelId) {
+  if (channelId.value) {
     messageStore.fetchMessages(channelId.value);
   }
 });
+
 watch(channelId, (newChannelId) => {
   if (newChannelId) {
     messageStore.fetchMessages(newChannelId);
   }
 }, {immediate: true})
+
+// Scroll automatique quand la liste des messages change (nouveaux messages reçus)
+watch(messages, () => {
+  scrollToBottom();
+}, {deep: true});
 </script>
 
 <template>
@@ -60,7 +77,10 @@ watch(channelId, (newChannelId) => {
   <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">
+    <div
+      ref="messageContainer"
+      class="flex-grow-1 overflow-y-auto w-100 message-container"
+    >
       <v-list bg-color="transparent" lines="three">
         <v-list-item
           v-for="msg in messages"
@@ -69,7 +89,6 @@ watch(channelId, (newChannelId) => {
         >
           <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 icon="mdi-account"></v-icon>
             </v-avatar>
           </template>
@@ -84,10 +103,10 @@ watch(channelId, (newChannelId) => {
           </v-list-item-subtitle>
         </v-list-item>
       </v-list>
-    </v-responsive>
+    </div>
 
     <!-- Zone de saisie fixe en bas -->
-    <v-sheet class="pa-4" width="100%">
+    <v-sheet class="pa-4 flex-shrink-0" width="100%">
       <v-textarea
         v-model="newMessage"
         auto-grow
@@ -117,8 +136,13 @@ watch(channelId, (newChannelId) => {
 </template>
 
 <style scoped>
+.message-container {
+  /* Assure que la zone gère son scroll indépendamment */
+  height: 0;
+}
+
 .markdown-content :deep(p) {
-  margin-bottom: 0; /* Évite les marges inutiles dans le chat */
+  margin-bottom: 0;
 }
 
 .markdown-content :deep(code) {
@@ -136,4 +160,4 @@ watch(channelId, (newChannelId) => {
   margin: 8px 0;
   overflow-x: auto;
 }
-</style>
+</style>