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).

backend/src/routes/events.js

@@ -1,5 +1,6 @@
 const express = require('express');
 const { prisma } = require('../utils/db');
+const { authenticate } = require('../middleware/auth');
 
 const router = express.Router();
 
@@ -68,4 +69,66 @@ router.get('/:id', async (req, res, next) => {
   }
 });
 
+// GET /api/events/:eventId/messages - Get event chat messages with pagination
+router.get('/:eventId/messages', authenticate, async (req, res, next) => {
+  try {
+    const { eventId } = req.params;
+    const { before, limit = 20 } = req.query;
+
+    // Find event chat room
+    const chatRoom = await prisma.chatRoom.findFirst({
+      where: {
+        eventId: parseInt(eventId),
+        type: 'event',
+      },
+    });
+
+    if (!chatRoom) {
+      return res.status(404).json({
+        success: false,
+        error: 'Chat room not found',
+      });
+    }
+
+    // Build query with pagination
+    const where = { roomId: chatRoom.id };
+    if (before) {
+      where.id = { lt: parseInt(before) };
+    }
+
+    const messages = await prisma.message.findMany({
+      where,
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            avatar: true,
+          },
+        },
+      },
+      orderBy: { createdAt: 'desc' },
+      take: parseInt(limit),
+    });
+
+    // Return in chronological order (oldest first)
+    res.json({
+      success: true,
+      data: messages.reverse().map(msg => ({
+        id: msg.id,
+        roomId: msg.roomId,
+        userId: msg.user.id,
+        username: msg.user.username,
+        avatar: msg.user.avatar,
+        content: msg.content,
+        type: msg.type,
+        createdAt: msg.createdAt,
+      })),
+      hasMore: messages.length === parseInt(limit),
+    });
+  } catch (error) {
+    next(error);
+  }
+});
+
 module.exports = router;

backend/src/socket/index.js

@@ -77,6 +77,43 @@ function initializeSocket(httpServer) {
 
         console.log(`👤 ${socket.user.username} joined event room ${eventId}`);
 
+        // Load last 20 messages from database
+        const chatRoom = await prisma.chatRoom.findFirst({
+          where: {
+            eventId: parseInt(eventId),
+            type: 'event',
+          },
+        });
+
+        if (chatRoom) {
+          const messages = await prisma.message.findMany({
+            where: { roomId: chatRoom.id },
+            include: {
+              user: {
+                select: {
+                  id: true,
+                  username: true,
+                  avatar: true,
+                },
+              },
+            },
+            orderBy: { createdAt: 'desc' },
+            take: 20,
+          });
+
+          // Send message history to the joining user (reverse to chronological order)
+          socket.emit('message_history', messages.reverse().map(msg => ({
+            id: msg.id,
+            roomId: msg.roomId,
+            userId: msg.user.id,
+            username: msg.user.username,
+            avatar: msg.user.avatar,
+            content: msg.content,
+            type: msg.type,
+            createdAt: msg.createdAt,
+          })));
+        }
+
         // Broadcast updated active users list
         const users = Array.from(activeUsers.get(eventId)).map(u => JSON.parse(u));
         io.to(roomName).emit('active_users', users);