fix double component rendering ( only hidden )

src/stores/messageStore.js

@@ -12,7 +12,6 @@ export const useMessageStore = defineStore('message', () => {
         try {
             let uri = `/api/message-count/${subjectId}`;
             const response = await client.get(uri);
-            console.log(response);
             messageCount.value = response.data.count;
             trackedSubject.value = subjectId;
         } catch (error) {

src/views/contents/ContentCard.vue

@@ -190,6 +190,7 @@ function openDeleteConfirmationDialog() {
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   messagesVisible.value = true;
+  messageCount.value ++;
 }
 
 function toggleComments() {

src/views/contents/ContentList.vue

@@ -5,15 +5,11 @@
                      class="md:gap-2">
 
     <template v-for="content in contents" :key="content.id">
-
+      <component
-      <div class="d-sm-none mb-1">
+          :is="isSmallScreen ? ContentCardSm : ContentCardNormal"
-        <content-card-sm :content="content" @content-deleted="onContentDeleted"></content-card-sm>
+          :content="content"
-      </div>
+          @content-deleted="onContentDeleted"
-
+      ></component>
-     
-      <div class="d-none d-sm-flex">
-        <content-card-normal :content="content" @content-deleted="onContentDeleted"></content-card-normal>
-      </div>
     </template>
 
     <template v-slot:empty>
@@ -31,7 +27,7 @@
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
-import {ref, watch} from 'vue';
+import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
 import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
 
@@ -51,6 +47,21 @@ const contents = ref(props.contents)
 const errorMessage = ref()
 let last_id = null
 
+const isSmallScreen = ref(false);
+
+const updateScreenSize = () => {
+  isSmallScreen.value = window.matchMedia('(max-width: 600px)').matches;
+};
+
+onMounted(() => {
+  updateScreenSize();
+  window.addEventListener('resize', updateScreenSize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateScreenSize);
+});
+
 async function onContentDeleted(contentId) {
   contents.value = contents.value.filter(c => c.id !== contentId)
 }

src/views/contents/contentcards/NContentCard.vue

@@ -191,6 +191,7 @@ function openDeleteConfirmationDialog() {
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   messagesVisible.value = true;
+  messageCount.value ++;
 }
 
 function toggleComments() {

src/views/contents/contentcards/SmContentCard.vue

@@ -190,6 +190,7 @@ function openDeleteConfirmationDialog() {
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   messagesVisible.value = true;
+  messageCount.value ++;
 }
 
 function toggleComments() {