feat: add chat message history and infinite scroll

Backend changes:
- Socket.IO: Send last 20 messages on join_event_room
- REST API: Add GET /api/events/:eventId/messages endpoint with pagination
- Support for 'before' cursor-based pagination for loading older messages

Frontend changes:
- Load initial 20 messages when joining event chat
- Implement infinite scroll to load older messages on scroll to top
- Add loading indicator for older messages
- Preserve scroll position when loading older messages
- Add eventsAPI.getMessages() function for pagination

User experience:
- New users see last 20 messages immediately
- Scrolling up automatically loads older messages in batches of 20
- Smooth scrolling experience with position restoration

Note: Messages are encrypted in transit via HTTPS/WSS but stored
as plain text in database (no E2E encryption).

frontend/src/pages/EventChatPage.jsx

@@ -3,8 +3,9 @@ import { useParams, useNavigate } from 'react-router-dom';
 import Layout from '../components/layout/Layout';
 import { useAuth } from '../contexts/AuthContext';
 import { mockEvents } from '../mocks/events';
-import { Send, UserPlus } from 'lucide-react';
+import { Send, UserPlus, Loader2 } from 'lucide-react';
 import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
+import { eventsAPI } from '../services/api';
 
 const EventChatPage = () => {
   const { eventId } = useParams();
@@ -14,7 +15,10 @@ const EventChatPage = () => {
   const [newMessage, setNewMessage] = useState('');
   const [activeUsers, setActiveUsers] = useState([]);
   const [isConnected, setIsConnected] = useState(false);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
   const messagesEndRef = useRef(null);
+  const messagesContainerRef = useRef(null);
 
   const event = mockEvents.find(e => e.id === parseInt(eventId));
 
@@ -46,7 +50,13 @@ const EventChatPage = () => {
       setIsConnected(false);
     });
 
-    // Receive messages
+    // Receive message history (initial 20 messages)
+    socket.on('message_history', (history) => {
+      setMessages(history);
+      setHasMore(history.length === 20);
+    });
+
+    // Receive new messages
     socket.on('event_message', (message) => {
       setMessages((prev) => [...prev, message]);
     });
@@ -77,6 +87,7 @@ const EventChatPage = () => {
       socket.emit('leave_event_room', { eventId: parseInt(eventId) });
       socket.off('connect');
       socket.off('disconnect');
+      socket.off('message_history');
       socket.off('event_message');
       socket.off('active_users');
       socket.off('user_joined');
@@ -103,6 +114,39 @@ const EventChatPage = () => {
     setNewMessage('');
   };
 
+  const loadOlderMessages = async () => {
+    if (loadingOlder || !hasMore || messages.length === 0) return;
+
+    setLoadingOlder(true);
+    try {
+      const oldestMessageId = messages[0].id;
+      const response = await eventsAPI.getMessages(eventId, oldestMessageId, 20);
+
+      if (response.data.length > 0) {
+        // Save current scroll position
+        const container = messagesContainerRef.current;
+        const oldScrollHeight = container.scrollHeight;
+        const oldScrollTop = container.scrollTop;
+
+        // Prepend older messages
+        setMessages((prev) => [...response.data, ...prev]);
+        setHasMore(response.hasMore);
+
+        // Restore scroll position (adjust for new content)
+        setTimeout(() => {
+          const newScrollHeight = container.scrollHeight;
+          container.scrollTop = oldScrollTop + (newScrollHeight - oldScrollHeight);
+        }, 0);
+      } else {
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.error('Failed to load older messages:', error);
+    } finally {
+      setLoadingOlder(false);
+    }
+  };
+
   const handleMatchWith = (userId) => {
     // TODO: Implement match request
     alert(`Match request sent to user!`);
@@ -111,6 +155,21 @@ const EventChatPage = () => {
     }, 1000);
   };
 
+  // Infinite scroll - detect scroll to top
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      if (container.scrollTop < 100 && !loadingOlder && hasMore) {
+        loadOlderMessages();
+      }
+    };
+
+    container.addEventListener('scroll', handleScroll);
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [loadingOlder, hasMore, messages]);
+
   if (!event) {
     return (
       <Layout>
@@ -176,7 +235,14 @@ const EventChatPage = () => {
             {/* Chat Area */}
             <div className="flex-1 flex flex-col">
               {/* Messages */}
-              <div className="flex-1 overflow-y-auto p-4 space-y-4">
+              <div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-4 space-y-4">
+                {/* Loading older messages indicator */}
+                {loadingOlder && (
+                  <div className="flex justify-center py-2">
+                    <Loader2 className="w-5 h-5 animate-spin text-primary-600" />
+                  </div>
+                )}
+
                 {messages.length === 0 && (
                   <div className="text-center text-gray-500 py-8">
                     No messages yet. Start the conversation!