Add color to comments when there are messages.

src/views/contents/ContentCard.vue

@@ -78,13 +78,18 @@
           <v-icon>mdi-comment-outline</v-icon>
         </v-btn>
 
-        <!-- Utilisation de l'objet creator ici -->
+ 
         <donation-button :creator="creator" iconColorClass="text-black"></donation-button>
       </div>
 
       <div :class="{'hidden': !commentsVisible}">
         <h2 class="font-sans font-semibold mt-2">Commentaires</h2>
-        <message-list :subject-id="props.content.id" :messages="messages"></message-list>
+        <message-list
+            :subject-id="props.content.id"
+            :messages="messages"
+            @messages-found="handleMessagesFound"
+        ></message-list>
+
       </div>
 
       <div class="py-2">
@@ -121,9 +126,7 @@ const loading = ref(true);
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const commentsVisible = ref(false);
 const messages = ref([]);
-
+const hasComments = ref(false);
-// Propriété calculée pour vérifier s'il y a des commentaires
-const hasComments = computed(() => messages.value.length > 0);
 
 onBeforeMount(async () => await fetchCreatorData(creatorAlias.value))
 
@@ -139,6 +142,12 @@ async function fetchCreatorData(creatorAlias) {
   }
 }
 
+function handleMessagesFound(hasMessages) {
+  if (hasMessages) {
+    hasComments.value = true;   
+  }
+}
+
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   commentsVisible.value = true;
@@ -204,7 +213,7 @@ function redirectToContent() {
   display: none;
 }
 
-.comment-active-v-icon {
+.comment-active .v-icon {
-  color: #DB1AAA;
+  color: #D63DAB; 
 }
 </style>

src/views/messages/MessageList.vue

@@ -1,22 +1,17 @@
 <template>
-
+  <v-infinite-scroll
-  <v-infinite-scroll :items="messages"
+      :items="messages"
-                     :onLoad="load"
+      :onLoad="load"
-                     mode="manual"
+      mode="manual"
-                     class="justify-items-center">
+      class="justify-items-center"
-
+  >
     <template v-for="(message, index) in messages" :key="index">
-      <message :message="message"
+      <message :message="message" class="border-b"></message>
-               class="border-b"
-      ></message>
     </template>
 
     <template v-slot:load-more="{ props }">
-      <v-btn
+      <v-btn size="small" variant="outlined" v-bind="props">
-          size="small"
+        Voir plus de commentaires
-          variant="outlined"
-          v-bind="props"
-      >Voir plus de commentaires
       </v-btn>
     </template>
 
@@ -27,72 +22,71 @@
     <template v-slot:error>
       <v-alert type="error">{{ errorMessage }}</v-alert>
     </template>
-
   </v-infinite-scroll>
-
 </template>
 
 <script setup>
-
+import { ref, onBeforeMount } from 'vue';
+import { useClient } from '@/plugins/api.js';
 import Message from "@/views/messages/Message.vue";
 
-import {useClient} from '@/plugins/api.js';
+const emit = defineEmits(['messages-found']);
-import {onBeforeMount, ref} from 'vue';
-
 const props = defineProps({
   subjectId: {
     type: String,
-    required: true
+    required: true,
   },
   messages: {
-    default: []
+    type: Array,
-  }
+    default: () => [],
+  },
 });
 
-const errorMessage = ref()
+const errorMessage = ref(null);
-let last_id = null
+let last_id = null;
 const client = useClient();
 const messages = ref(props.messages);
 
 onBeforeMount(async () => {
-  if (props.subjectId == null) return
+  if (props.subjectId == null) return;
   await load({
     page_size: 2,
-    done: function (status) {
+    done: function (status) {},
-    }
+  });
-  })
+});
-})
 
-async function load({done, page_size}) {
+async function load({ done, page_size = 10 }) {
-  if (props.subjectId == null) return
+  if (props.subjectId == null) return;
-  if (page_size === undefined) page_size = 10
 
   try {
-    let uri = `/api/messages/${props.subjectId}?page_size=${page_size}`
+    let uri = `/api/messages/${props.subjectId}?page_size=${page_size}`;
-    if (last_id !== null) uri = uri + `&last_id=${last_id}`
+    if (last_id !== null) uri = uri + `&last_id=${last_id}`;
-    
+
-    const response = await client.get(uri)
+    const response = await client.get(uri);
 
     if (response.status >= 200 && response.status < 300) {
-
+      const messageCount = response.data.messages.length;
-      const messageCount = response.data.messages.length
 
       if (messageCount > 0) {
-        messages.value.push(...response.data.messages)
+        messages.value.push(...response.data.messages);
-        const [last_content] = response.data.messages.slice(-1)
+        const [last_content] = response.data.messages.slice(-1);
-        last_id = last_content.id
+        last_id = last_content.id;
+    
+        if (messageCount > 0) {
+          emit('messages-found', true);
+        }
       }
 
-      if (messageCount < page_size)
+      if (messageCount < page_size) {
-        done('empty')
+        done('empty');
-      else
+      } else {
-        done('ok')
+        done('ok');
+      }
     }
   } catch (error) {
-    console.error("Failed to fetch posts", error);
+    console.error("Failed to fetch messages", error);
-    errorMessage.value = error
+    errorMessage.value = error.message || "Failed to fetch messages";
-    done('error')
+    done('error');
   }
 }
-
+</script>
-</script>