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([]);
-
-// Propriété calculée pour vérifier s'il y a des commentaires
-const hasComments = computed(() => messages.value.length > 0);
+const hasComments = ref(false);
 
 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 {
-  color: #DB1AAA;
+.comment-active .v-icon {
+  color: #D63DAB; 
 }
 </style>