touchTimeout for mobile

src/views/contents/Reaction.vue

@@ -28,6 +28,7 @@ const angryCount = ref(0);
 const menuVisible = ref(false);
 const holdTimeout = ref(null);
 const hideTimeout = ref(null);
+const touchTimeout = ref(null);
 
 initializeReactions();
 
@@ -75,6 +76,9 @@ async function reactToContent(reaction) {
     hasReacted.value = false;
     console.log("Reaction to content removed.");
   }
+  setTimeout(() => {
+    menuVisible.value = false;
+  }, 500);
 }
 
 function adjustReactionCount(newReaction) {
@@ -190,8 +194,13 @@ function hideReactions() {
   }, 250);
 }
 
-function onMouseDown() {
+function onTouchStart() {
-  holdTimeout.value = setTimeout(showReactions, 250);
+  touchTimeout.value = setTimeout(() => {
+    menuVisible.value = true; 
+  }, 250); 
+}
+function onTouchEnd() {
+  clearTimeout(touchTimeout.value);
 }
 
 function onMouseUp() {
@@ -235,7 +244,8 @@ function isMobileDevice() {
             v-bind="attrs"
             :on="on"
             variant="plain"
-            @mousedown="onMouseDown"
+            @touchstart="onTouchStart"
+            @touchend="onTouchEnd"
             @mouseup="onMouseUp"
             @mouseover="onMouseOver"
             @mouseleave="onMouseLeave"