fix: improve event check-in UX and participant counting

Backend:
- Use _count.participants for accurate real-time participant count
- Remove reliance on stale participantsCount column

Frontend:
- Show check-in requirement message for non-joined events
- Display "Open chat" button only for joined events
- Add dev-only "View details" button for QR code access during testing
- Improve visual feedback with amber-colored check-in notice

This ensures the participant count reflects actual checked-in users
and prevents unauthorized access to QR codes in production while
maintaining developer convenience in development mode.

frontend/src/pages/EventsPage.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Layout from '../components/layout/Layout';
 import { eventsAPI } from '../services/api';
-import { Calendar, MapPin, Users, Loader2, CheckCircle } from 'lucide-react';
+import { Calendar, MapPin, Users, Loader2, CheckCircle, QrCode } from 'lucide-react';
 
 const EventsPage = () => {
   const navigate = useNavigate();
@@ -101,12 +101,36 @@ const EventsPage = () => {
                 <p className="text-gray-600 text-sm mb-4">{event.description}</p>
               )}
 
-              <button
-                onClick={() => handleJoinEvent(event.slug)}
-                className="w-full px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
-              >
-                {event.isJoined ? 'Open chat' : 'Join chat'}
-              </button>
+              <div className="space-y-2">
+                {event.isJoined ? (
+                  <button
+                    onClick={() => handleJoinEvent(event.slug)}
+                    className="w-full px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
+                  >
+                    Open chat
+                  </button>
+                ) : (
+                  <div className="bg-amber-50 border border-amber-200 rounded-md p-4 text-sm text-amber-800">
+                    <div className="flex items-center gap-2 font-medium mb-2">
+                      <QrCode className="w-5 h-5" />
+                      Check-in required
+                    </div>
+                    <p className="text-amber-700">
+                      Scan the QR code at the event venue to join the chat
+                    </p>
+                  </div>
+                )}
+
+                {/* Development mode: Show details link */}
+                {import.meta.env.DEV && (
+                  <button
+                    onClick={() => navigate(`/events/${event.slug}/details`)}
+                    className="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors text-sm"
+                  >
+                    View details (dev)
+                  </button>
+                )}
+              </div>
             </div>
           ))}
         </div>