feat(chat): add 2000 character limit for messages

Added message length validation to prevent spam and improve UX with
character counter feedback.

Backend:
- Added MESSAGE_MAX_LENGTH constant (2000 characters)
- Validation in send_event_message handler:
  - Check if content is string
  - Check if not empty after trim
  - Check if not exceeding max length
- Validation in send_match_message handler (same checks)
- Returns error message if validation fails

Frontend:
- Added MESSAGE_MAX_LENGTH constant (2000 characters)
- ChatInput component enhancements:
  - maxLength attribute on input (hard limit)
  - Character counter shows when >80% of limit
  - Counter turns red when at limit
  - Submit button disabled when at limit
  - Counter format: "X/2000"

UX:
- User sees counter at 1600+ characters (80% of limit)
- Hard limit prevents typing beyond 2000 chars
- Clear visual feedback (red text) when at limit
- Consistent validation on both event and match chats

Security:
- Prevents spam with extremely long messages
- Protects against potential DoS via message size
- Database already uses TEXT type (supports limit)

backend/src/constants/index.js

@@ -1,10 +1,14 @@
 const { MATCH_STATUS, SUGGESTION_STATUS } = require('./statuses');
 const { ACCOUNT_TIER, FAIRNESS_SUPPORTER_PENALTY, FAIRNESS_COMFORT_PENALTY } = require('./tiers');
 
+// Message validation
+const MESSAGE_MAX_LENGTH = 2000;
+
 module.exports = {
   MATCH_STATUS,
   SUGGESTION_STATUS,
   ACCOUNT_TIER,
   FAIRNESS_SUPPORTER_PENALTY,
   FAIRNESS_COMFORT_PENALTY,
+  MESSAGE_MAX_LENGTH,
 };

backend/src/socket/index.js

@@ -2,6 +2,7 @@ const { Server } = require('socket.io');
 const { verifyToken } = require('../utils/auth');
 const { prisma } = require('../utils/db');
 const { ACTIONS, log: activityLog } = require('../services/activityLog');
+const { MESSAGE_MAX_LENGTH } = require('../constants');
 
 // Track active users in each event room
 const activeUsers = new Map(); // eventId -> Set of { socketId, userId, username, avatar }
@@ -310,6 +311,19 @@ function initializeSocket(httpServer) {
           return socket.emit('error', { message: 'Not in an event room' });
         }
 
+        // Validate message content
+        if (!content || typeof content !== 'string') {
+          return socket.emit('error', { message: 'Invalid message content' });
+        }
+
+        if (content.trim().length === 0) {
+          return socket.emit('error', { message: 'Message cannot be empty' });
+        }
+
+        if (content.length > MESSAGE_MAX_LENGTH) {
+          return socket.emit('error', { message: `Message too long. Maximum ${MESSAGE_MAX_LENGTH} characters allowed.` });
+        }
+
         const eventId = socket.currentEventId;
         const roomName = socket.currentEventRoom;
 
@@ -434,6 +448,19 @@ function initializeSocket(httpServer) {
     // Send message to match room
     socket.on('send_match_message', async ({ matchId, content }) => {
       try {
+        // Validate message content
+        if (!content || typeof content !== 'string') {
+          return socket.emit('error', { message: 'Invalid message content' });
+        }
+
+        if (content.trim().length === 0) {
+          return socket.emit('error', { message: 'Message cannot be empty' });
+        }
+
+        if (content.length > MESSAGE_MAX_LENGTH) {
+          return socket.emit('error', { message: `Message too long. Maximum ${MESSAGE_MAX_LENGTH} characters allowed.` });
+        }
+
         const roomName = `match_${matchId}`;
 
         // Get match and its room