fix: favorites issues

frontend/src/components/ListItem.vue

@@ -12,14 +12,16 @@
       </div>
     </div>
     <div class="grid grid-cols-2">
-      <button class="py-2 bg-slate-100 hover:bg-slate-50 text-center">Like</button>
+      <button class="py-2 bg-slate-100 hover:bg-slate-50 text-center" @click="toggleLike()">
+        {{ item.Favorite ? 'Unlike' : 'Like' }}
+      </button>
       <button class="py-2 bg-slate-100 hover:bg-slate-50 text-center text-red-600" @click="delMessage()">Delete</button>
     </div>
   </div>
 </template>
 
 <script>
-import { deleteMessage } from "@/services/messages";
+import { deleteMessage, toggleFavorite } from "@/services/messages";
 import { computed, defineComponent } from "vue";
 import MediaItem from "./MediaItem.vue";
 
@@ -43,6 +45,13 @@ export default defineComponent({
       return nl2br(content, false);
     });
 
+    const toggleLike = async () => {
+      const itemId = props.item.ID
+      await toggleFavorite(itemId);
+      props.item.Favorite = !props.item.Favorite;
+    }
+
+
     const delMessage = async () => {
       console.log("delMessage")
       if (!confirm("Are you sure?")) {
@@ -73,6 +82,7 @@ export default defineComponent({
       item: props.item,
       processedContent,
       delMessage,
+      toggleLike,
     };
   },
 });