Update UI - You can watch the image in fullscreen in content page

src/views/contents/ContentCard.vue

@@ -45,13 +45,17 @@
         </div>
       </v-card-title>
 
-      <router-link :to="'content/' + props?.content?.id">
-      </router-link>
-      <v-carousel hide-delimiters v-if="hasUrls" :show-arrows="props.content.urls.length > 1" :show-indicators="props.content.urls.length > 1">
+      <v-carousel
+          hide-delimiters
+          v-if="hasUrls"
+          :show-arrows="props.content.urls.length > 1"
+          :show-indicators="props.content.urls.length > 1"
+      >
         <v-carousel-item
             v-for="url in props.content.urls"
             :key="url"
             class="image-container"
+            @click="redirectToContent"
         >
           <component :is="getComponent(url)" :src="url"></component>
         </v-carousel-item>
@@ -70,18 +74,17 @@
             :class="{'comment-active': hasComments}"
             variant="plain"
             icon
-            @click="toggleComments"
-        >
+            @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
         </v-btn>
       </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>
       </div>
-
-      <div  class="py-2">
+      
+      <div class="py-2">
         <post-message :subject-id="props.content.id" @message-posted="addMessage"></post-message>
       </div>
     </div>
@@ -89,7 +92,7 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+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";
@@ -105,13 +108,14 @@ const props = defineProps({
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const commentsVisible = ref(false);
-const messages = ref([]); 
+const messages = ref([]);
 
 // Propriété calculée pour vérifier s'il y a des commentaires
 const hasComments = computed(() => messages.value.length > 0);
 
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
+  commentsVisible.value = true;
 }
 
 function toggleComments() {
@@ -145,6 +149,10 @@ function deleteContent() {
 function reportContent() {
   console.log('Reporter le contenu');
 }
+
+function redirectToContent() {
+  window.location.href = `/content/${props.content.id}`;
+}
 </script>
 
 <style>
@@ -153,6 +161,7 @@ function reportContent() {
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .image-container img {