update

frontend/src/components/chat/ChatMessage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
@@ -29,6 +29,35 @@ function hasPollParam(params?: Record<string, any>): boolean {
 
 const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage, onReplyClick, onReactionToggled }) => {
   const [hovered, setHovered] = useState(false);
+  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleTouchStart = () => {
+    longPressTimer.current = setTimeout(() => {
+      setHovered(true);
+      // Auto-hide after 4 seconds if the user doesn't interact
+      hideTimer.current = setTimeout(() => setHovered(false), 4000);
+    }, 500);
+  };
+
+  const handleTouchEnd = () => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+  };
+
+  const handleTouchMove = () => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = null;
+    }
+    setHovered(false);
+  };
   const time = new Date(message.timestamp * 1000).toLocaleTimeString('de-DE', {
     hour: '2-digit',
     minute: '2-digit',
@@ -52,6 +81,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage, onRepl
 
   const reactions = message.reactions ?? {};
   const reactionsSelf = message.reactionsSelf ?? [];
+  const hasReactions = Object.keys(reactions).length > 0;
 
   return (
     <Box
@@ -65,6 +95,9 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage, onRepl
       }}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onTouchMove={handleTouchMove}
     >
       {/* Reply button for own messages (shown on left) */}
       {isOwnMessage && onReplyClick && (
@@ -159,8 +192,8 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage, onRepl
           </Typography>
         </Paper>
 
-        {/* Reactions */}
-        {!message.systemMessage && (
+        {/* Reactions — shown on hover or when reactions exist */}
+        {(hovered || hasReactions) && (
           <MessageReactions
             token={message.token}
             messageId={message.id}