feat(frontend): add recording matching UI

Add frontend components for auto-matching recording partners:

- RecordingTab component with suggestions list and opt-out toggle
- Tab navigation in EventChatPage (Chat, Uczestnicy, Nagrywanie)
- Matching configuration in EventDetailsPage (deadline, run matching)
- matchingAPI functions in api.js
- Return registrationDeadline and matchingRunAt in GET /events/:slug/details

UI allows users to:
- View who will record their heats
- View heats they need to record
- Accept/reject suggestions
- Opt-out from being a recorder
- Set registration deadline (admin)
- Manually trigger matching (admin)

frontend/src/pages/EventChatPage.jsx

@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import Layout from '../components/layout/Layout';
 import { useAuth } from '../contexts/AuthContext';
-import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode, Edit2, Filter, X } from 'lucide-react';
+import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode, Edit2, Filter, X, MessageSquare, Users, Video } from 'lucide-react';
 import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
 import { eventsAPI, heatsAPI, matchesAPI } from '../services/api';
 import HeatsBanner from '../components/heats/HeatsBanner';
@@ -14,6 +14,7 @@ import ConfirmationModal from '../components/modals/ConfirmationModal';
 import Modal from '../components/modals/Modal';
 import useEventChat from '../hooks/useEventChat';
 import ParticipantsSidebar from '../components/events/ParticipantsSidebar';
+import RecordingTab from '../components/recordings/RecordingTab';
 
 const EventChatPage = () => {
   const { slug } = useParams();
@@ -50,6 +51,9 @@ const EventChatPage = () => {
   const [hideMyHeats, setHideMyHeats] = useState(false);
   const [showHeatsModal, setShowHeatsModal] = useState(false);
 
+  // Tab state: 'chat' | 'participants' | 'recording'
+  const [activeTab, setActiveTab] = useState('chat');
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
@@ -397,40 +401,116 @@ const EventChatPage = () => {
             />
           )}
 
-          <div className="flex h-[calc(100vh-280px)]">
-            <ParticipantsSidebar
-              users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
-              activeUsers={activeUsers}
-              userHeats={userHeats}
-              userCompetitorNumbers={userCompetitorNumbers}
-              myHeats={myHeats}
-              hideMyHeats={hideMyHeats}
-              onHideMyHeatsChange={setHideMyHeats}
-              onMatchWith={handleMatchWith}
-            />
+          {/* Tab Navigation */}
+          <div className="border-b bg-gray-50">
+            <nav className="flex">
+              <button
+                onClick={() => setActiveTab('chat')}
+                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === 'chat'
+                    ? 'border-primary-600 text-primary-600 bg-white'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                <MessageSquare className="w-4 h-4" />
+                Chat
+              </button>
+              <button
+                onClick={() => setActiveTab('participants')}
+                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === 'participants'
+                    ? 'border-primary-600 text-primary-600 bg-white'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                <Users className="w-4 h-4" />
+                Uczestnicy
+                <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-200 text-gray-600 rounded-full">
+                  {checkedInUsers.length}
+                </span>
+              </button>
+              <button
+                onClick={() => setActiveTab('recording')}
+                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === 'recording'
+                    ? 'border-primary-600 text-primary-600 bg-white'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                <Video className="w-4 h-4" />
+                Nagrywanie
+              </button>
+            </nav>
+          </div>
 
-            {/* Chat Area */}
-            <div className="flex-1 flex flex-col">
-              <ChatMessageList
-                messages={messages}
-                currentUserId={user.id}
-                messagesEndRef={messagesEndRef}
-                messagesContainerRef={messagesContainerRef}
-                loadingOlder={loadingOlder}
-                hasMore={hasMore}
-              />
+          <div className="h-[calc(100vh-340px)]">
+            {/* Chat Tab */}
+            {activeTab === 'chat' && (
+              <div className="flex h-full">
+                {/* Sidebar - visible only on chat tab on larger screens */}
+                <div className="hidden lg:block">
+                  <ParticipantsSidebar
+                    users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
+                    activeUsers={activeUsers}
+                    userHeats={userHeats}
+                    userCompetitorNumbers={userCompetitorNumbers}
+                    myHeats={myHeats}
+                    hideMyHeats={hideMyHeats}
+                    onHideMyHeatsChange={setHideMyHeats}
+                    onMatchWith={handleMatchWith}
+                  />
+                </div>
 
-              {/* Message Input */}
-              <div className="border-t p-4">
-                <ChatInput
-                  value={newMessage}
-                  onChange={(e) => setNewMessage(e.target.value)}
-                  onSubmit={handleSendMessage}
-                  disabled={!isConnected}
-                  placeholder="Write a message..."
+                {/* Chat Area */}
+                <div className="flex-1 flex flex-col">
+                  <ChatMessageList
+                    messages={messages}
+                    currentUserId={user.id}
+                    messagesEndRef={messagesEndRef}
+                    messagesContainerRef={messagesContainerRef}
+                    loadingOlder={loadingOlder}
+                    hasMore={hasMore}
+                  />
+
+                  {/* Message Input */}
+                  <div className="border-t p-4">
+                    <ChatInput
+                      value={newMessage}
+                      onChange={(e) => setNewMessage(e.target.value)}
+                      onSubmit={handleSendMessage}
+                      disabled={!isConnected}
+                      placeholder="Write a message..."
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Participants Tab */}
+            {activeTab === 'participants' && (
+              <div className="h-full overflow-y-auto p-4">
+                <ParticipantsSidebar
+                  users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
+                  activeUsers={activeUsers}
+                  userHeats={userHeats}
+                  userCompetitorNumbers={userCompetitorNumbers}
+                  myHeats={myHeats}
+                  hideMyHeats={hideMyHeats}
+                  onHideMyHeatsChange={setHideMyHeats}
+                  onMatchWith={handleMatchWith}
+                  fullWidth={true}
                 />
               </div>
-            </div>
+            )}
+
+            {/* Recording Tab */}
+            {activeTab === 'recording' && (
+              <RecordingTab
+                slug={slug}
+                event={event}
+                myHeats={myHeats}
+              />
+            )}
           </div>
 
           {/* Leave Event Button */}