From 01a6a6e298c2450c4f0fde9e8857e6ebd9c862ea Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Wed, 11 Mar 2026 18:08:36 +0100
Subject: [PATCH] Fix emoji list showing on scrolling

---
 web/components/chat/chat-message.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/web/components/chat/chat-message.tsx b/web/components/chat/chat-message.tsx
index ef8a65c3..a40dfb7f 100644
--- a/web/components/chat/chat-message.tsx
+++ b/web/components/chat/chat-message.tsx
@@ -42,6 +42,8 @@ export function ChatMessageItem(props: {
   const [emojiOpenForId, setEmojiOpenForId] = useState<number | null>(null)
   const [emojiKey, setEmojiKey] = useState(0)
   const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const hasMovedRef = useRef(false)
+  const lastPositionRef = useRef<{x: number; y: number} | null>(null)
 
   if (!chat) return null
 
@@ -56,11 +58,15 @@ export function ChatMessageItem(props: {
         : {username: '', avatarUrl: undefined, id: ''}
 
   const startLongPress = (messageId: number) => {
+    hasMovedRef.current = false
+    lastPositionRef.current = null
     if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current)
     longPressTimerRef.current = setTimeout(() => {
-      setEmojiOpenForId(messageId)
-      setEmojiKey((k) => k + 1)
-    }, 500)
+      if (!hasMovedRef.current) {
+        setEmojiOpenForId(messageId)
+        setEmojiKey((k) => k + 1)
+      }
+    }, 1000)
   }
 
   const cancelLongPress = () => {
@@ -70,6 +76,18 @@ export function ChatMessageItem(props: {
     }
   }
 
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const currentPos = {x: e.clientX, y: e.clientY}
+    if (lastPositionRef.current) {
+      const dx = Math.abs(currentPos.x - lastPositionRef.current.x)
+      const dy = Math.abs(currentPos.y - lastPositionRef.current.y)
+      if (dx > 5 || dy > 5) {
+        hasMovedRef.current = true
+      }
+    }
+    lastPositionRef.current = currentPos
+  }
+
   return (
     <Row
       className={clsx(
@@ -108,6 +126,7 @@ export function ChatMessageItem(props: {
                     onMouseDown={() => startLongPress(chat.id)}
                     onMouseUp={cancelLongPress}
                     onMouseLeave={cancelLongPress}
+                    onMouseMove={handleMouseMove}
                     onTouchStart={() => startLongPress(chat.id)}
                     onTouchEnd={cancelLongPress}
                     onTouchCancel={cancelLongPress}