Simplify the logic for content with and without comments

src/views/contents/ContentCard.vue

@@ -71,23 +71,22 @@
           <v-icon>mdi-thumb-down-outline</v-icon>
         </v-btn>
         <v-btn
-            :class="{'comment-active': hasComments}"
+            :class="{'comment-active': hasMessages}"
             variant="plain"
             icon
             @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
         </v-btn>
 
- 
+
         <donation-button :creator="creator" iconColorClass="text-black"></donation-button>
       </div>
 
-      <div :class="{'hidden': !commentsVisible}">
+      <div :class="{'hidden': !messagesVisible}">
         <h2 class="font-sans font-semibold mt-2">Commentaires</h2>
         <message-list
             :subject-id="props.content.id"
             :messages="messages"
-            @messages-found="handleMessagesFound"
         ></message-list>
 
       </div>
@@ -100,10 +99,8 @@
 </template>
 
 <script setup>
-import { computed, ref, onBeforeMount } from 'vue';
-import { useRoute } from 'vue-router';
-import { useClient } from "@/plugins/api.js";
-import { time_ago } from "@/internal_time_ago.js";
+import {computed, ref} from 'vue';
+import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
 import YoutubePlayer from './YoutubePlayer.vue';
@@ -117,44 +114,20 @@ const props = defineProps({
   }
 });
 
-const route = useRoute();
-const client = useClient();
-const creatorAlias = ref(route.params.creator);
 const creator = ref(null);
-const loading = ref(true);
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
-const commentsVisible = ref(false);
+const messagesVisible = ref(false);
 const messages = ref([]);
-const hasComments = ref(false);
-
-onBeforeMount(async () => await fetchCreatorData(creatorAlias.value))
-
-async function fetchCreatorData(creatorAlias) {
-  try {
-    loading.value = true;
-    const response = await client.get(`/api/creators/@${creatorAlias}`);
-    creator.value = response.data;
-  } catch (error) {
-    console.error(`Error fetching creator data: ${error}`);
-  } finally {
-    loading.value = false;
-  }
-}
-
-function handleMessagesFound(hasMessages) {
-  if (hasMessages) {
-    hasComments.value = true;   
-  }
-}
+const hasMessages = computed(() => messages.value.length > 0)
 
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
-  commentsVisible.value = true;
+  messagesVisible.value = true;
 }
 
 function toggleComments() {
-  commentsVisible.value = !commentsVisible.value;
+  messagesVisible.value = !messagesVisible.value;
 }
 
 function likeContent() {
@@ -214,6 +187,6 @@ function redirectToContent() {
 }
 
 .comment-active .v-icon {
-  color: #D63DAB; 
+  color: #D63DAB;
 }
 </style>

src/views/messages/MessageList.vue

@@ -30,7 +30,6 @@ import { ref, onBeforeMount } from 'vue';
 import { useClient } from '@/plugins/api.js';
 import Message from "@/views/messages/Message.vue";
 
-const emit = defineEmits(['messages-found']);
 const props = defineProps({
   subjectId: {
     type: String,
@@ -71,10 +70,6 @@ async function load({ done, page_size = 10 }) {
         messages.value.push(...response.data.messages);
         const [last_content] = response.data.messages.slice(-1);
         last_id = last_content.id;
-    
-        if (messageCount > 0) {
-          emit('messages-found', true);
-        }
       }
 
       if (messageCount < page_size) {