refactor(frontend): implement mobile-first layout for chat pages

- Add fullWidth prop to Layout component for chat pages - Redesign EventChatPage and MatchChatPage with fixed layout: - Navbar sticky to top (no gaps) - Event/partner header directly below navbar - Chat content fills available space (flex-1) - Input area fixed to bottom - Full screen width on mobile (no margins) - Translate RecordingTab UI strings to English - Move Leave Event button to header - Remove unnecessary margins and max-width constraints This provides a better mobile experience with full-screen chat interface similar to native messaging apps.
2025-11-29 15:04:41 +01:00
parent 9206565523
commit dfb5313f9a
6 changed files with 89 additions and 98 deletions
--- a/frontend/src/components/layout/Layout.jsx
+++ b/frontend/src/components/layout/Layout.jsx
@@ -1,10 +1,14 @@
 import Navbar from './Navbar';

-const Layout = ({ children }) => {
+const Layout = ({ children, fullWidth = false, noPadding = false }) => {
+  const mainClasses = fullWidth || noPadding
+    ? "flex-1 flex flex-col"
+    : "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8";
+
  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 flex flex-col">
      <Navbar />
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <main className={mainClasses}>
        {children}
      </main>
    </div>
--- a/frontend/src/components/layout/Navbar.jsx
+++ b/frontend/src/components/layout/Navbar.jsx
@@ -61,8 +61,8 @@ const Navbar = () => {
  if (!user) return null;

  return (
-    <nav className="bg-white shadow-md">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <nav className="bg-white shadow-md sticky top-0 z-50">
+      <div className="px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex items-center">
            <Link to="/dashboard" className="flex items-center space-x-2">
--- a/frontend/src/components/recordings/RecordingTab.jsx
+++ b/frontend/src/components/recordings/RecordingTab.jsx
@@ -29,7 +29,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
      setSuggestions(data);
    } catch (err) {
      console.error('Failed to load suggestions:', err);
-      setError('Nie udalo sie zaladowac sugestii');
+      setError('Failed to load suggestions');
    } finally {
      setLoading(false);
    }
@@ -89,7 +89,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
      <div className="flex items-center justify-center h-64">
        <div className="flex flex-col items-center gap-3">
          <RefreshCw className="w-8 h-8 animate-spin text-primary-600" />
-          <p className="text-gray-600">Ladowanie...</p>
+          <p className="text-gray-600">Loading...</p>
        </div>
      </div>
    );
@@ -116,10 +116,10 @@ const RecordingTab = ({ slug, event, myHeats }) => {
      <div className="bg-gradient-to-r from-primary-50 to-primary-100 rounded-lg p-4">
        <div className="flex items-center gap-3 mb-2">
          <Video className="w-6 h-6 text-primary-600" />
-          <h3 className="text-lg font-semibold text-primary-900">Nagrywanie</h3>
+          <h3 className="text-lg font-semibold text-primary-900">Recording</h3>
        </div>
        <p className="text-sm text-primary-700">
-          System automatycznie dobiera osoby do wzajemnego nagrywania wystepow.
+          System automatically pairs people for mutual recording of performances.
        </p>
      </div>

@@ -130,10 +130,10 @@ const RecordingTab = ({ slug, event, myHeats }) => {
            <Clock className="w-5 h-5 text-amber-600" />
            <div>
              <p className="font-medium text-amber-800">
-                Matching uruchomi sie za: {countdown.hours}h {countdown.minutes}min
+                Matching will run in: {countdown.hours}h {countdown.minutes}min
              </p>
              <p className="text-sm text-amber-600">
-                Po zamknieciu zapisow system automatycznie dobierze partnerow do nagrywania.
+                After registration closes, the system will automatically pair recording partners.
              </p>
            </div>
          </div>
@@ -144,9 +144,9 @@ const RecordingTab = ({ slug, event, myHeats }) => {
            <div className="flex items-center gap-3">
              <CheckCircle className="w-5 h-5 text-green-600" />
              <div>
-                <p className="font-medium text-green-800">Matching zakonczony</p>
+                <p className="font-medium text-green-800">Matching completed</p>
                <p className="text-sm text-green-600">
-                  Ostatnie uruchomienie: {new Date(matchingRunAt).toLocaleString('pl-PL')}
+                  Last run: {new Date(matchingRunAt).toLocaleString('en-US')}
                </p>
              </div>
            </div>
@@ -156,7 +156,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
            >
              <RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
-              {runningMatching ? 'Trwa...' : 'Uruchom ponownie'}
+              {runningMatching ? 'Running...' : 'Run again'}
            </button>
          </div>
        </div>
@@ -165,7 +165,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <AlertTriangle className="w-5 h-5 text-gray-500" />
-              <p className="text-gray-600">Matching nie zostal jeszcze uruchomiony</p>
+              <p className="text-gray-600">Matching has not been run yet</p>
            </div>
            <button
              onClick={handleRunMatching}
@@ -173,7 +173,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50"
            >
              <RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
-              {runningMatching ? 'Trwa...' : 'Uruchom matching'}
+              {runningMatching ? 'Running...' : 'Run matching'}
            </button>
          </div>
        </div>
@@ -183,14 +183,14 @@ const RecordingTab = ({ slug, event, myHeats }) => {
      <div>
        <h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3">
          <Video className="w-5 h-5 text-primary-600" />
-          Moje heaty do nagrania ({toBeRecorded.length})
+          My heats to be recorded ({toBeRecorded.length})
        </h4>

        {toBeRecorded.length === 0 ? (
          <div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
            {myHeats.length === 0
-              ? 'Nie masz zadeklarowanych heatow'
-              : 'Brak sugestii - uruchom matching'
+              ? "You haven't declared any heats"
+              : 'No suggestions - run matching'
            }
          </div>
        ) : (
@@ -212,12 +212,12 @@ const RecordingTab = ({ slug, event, myHeats }) => {
      <div>
        <h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3">
          <VideoOff className="w-5 h-5 text-amber-600" />
-          Nagrywam innych ({toRecord.length})
+          Recording others ({toRecord.length})
        </h4>

        {toRecord.length === 0 ? (
          <div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
-            Nie masz przypisanych heatow do nagrywania
+            You have no assigned heats to record
          </div>
        ) : (
          <div className="space-y-2">
@@ -245,14 +245,14 @@ const RecordingTab = ({ slug, event, myHeats }) => {
            className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
          />
          <span className="text-sm text-gray-700">
-            Nie chce nagrywac innych (opt-out)
+            I don't want to record others (opt-out)
          </span>
          {updatingOptOut && (
            <RefreshCw className="w-4 h-4 animate-spin text-gray-400" />
          )}
        </label>
        <p className="text-xs text-gray-500 mt-1 ml-7">
-          Jesli zaznaczysz, spadniesz na koniec kolejki przy przydzielaniu partnerow.
+          If checked, you'll be deprioritized when assigning recording partners.
        </p>
      </div>
    </div>
@@ -274,7 +274,7 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
    : 'Unknown heat';

  const person = type === SUGGESTION_TYPE.TO_BE_RECORDED ? recorder : dancer;
-  const personLabel = type === SUGGESTION_TYPE.TO_BE_RECORDED ? 'Nagrywa Cie:' : 'Nagrywasz:';
+  const personLabel = type === SUGGESTION_TYPE.TO_BE_RECORDED ? 'Recording you:' : 'You record:';

  // Status badge
  const getStatusBadge = () => {
@@ -283,21 +283,21 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
        return (
          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 rounded">
            <CheckCircle className="w-3 h-3" />
-            Zaakceptowano
+            Accepted
          </span>
        );
      case SUGGESTION_STATUS.REJECTED:
        return (
          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-red-100 text-red-800 rounded">
            <XCircle className="w-3 h-3" />
-            Odrzucono
+            Rejected
          </span>
        );
      case SUGGESTION_STATUS.NOT_FOUND:
        return (
          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-800 rounded">
            <AlertTriangle className="w-3 h-3" />
-            Nie znaleziono
+            Not found
          </span>
        );
      default:
@@ -315,7 +315,7 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
          </div>
          <div>
            <p className="font-medium text-amber-900">{heatInfo}</p>
-            <p className="text-sm text-amber-700">Nie znaleziono dostepnego partnera</p>
+            <p className="text-sm text-amber-700">No available partner found</p>
          </div>
        </div>
        {getStatusBadge()}
@@ -352,14 +352,14 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
            <button
              onClick={onAccept}
              className="p-2 text-green-600 hover:bg-green-50 rounded-md transition-colors"
-              title="Akceptuj"
+              title="Accept"
            >
              <CheckCircle className="w-5 h-5" />
            </button>
            <button
              onClick={onReject}
              className="p-2 text-red-600 hover:bg-red-50 rounded-md transition-colors"
-              title="Odrzuc"
+              title="Reject"
            >
              <XCircle className="w-5 h-5" />
            </button>
--- a/frontend/src/pages/EventChatPage.jsx
+++ b/frontend/src/pages/EventChatPage.jsx
@@ -352,11 +352,10 @@ const EventChatPage = () => {
  }

  return (
-    <Layout>
-      <div className="max-w-6xl mx-auto">
-        <div className="bg-white rounded-lg shadow-md overflow-hidden">
-          {/* Header */}
-          <div className="bg-primary-600 text-white p-4">
+    <Layout fullWidth>
+      <div className="flex flex-col h-[calc(100vh-64px)] bg-white">
+        {/* Header */}
+        <div className="bg-primary-600 text-white p-4">
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <h2 className="text-2xl font-bold">{event.name}</h2>
@@ -379,15 +378,24 @@ const EventChatPage = () => {
                  )}
                </div>
              </div>
-              {myHeats.length > 0 && (
+              <div className="flex items-center gap-2">
+                {myHeats.length > 0 && (
+                  <button
+                    onClick={() => setShowHeatsModal(true)}
+                    className="flex items-center gap-2 px-3 py-2 bg-primary-700 hover:bg-primary-800 rounded-md transition-colors text-sm"
+                  >
+                    <Edit2 className="w-4 h-4" />
+                    Edit Heats
+                  </button>
+                )}
                <button
-                  onClick={() => setShowHeatsModal(true)}
-                  className="flex items-center gap-2 px-3 py-2 bg-primary-700 hover:bg-primary-800 rounded-md transition-colors text-sm"
+                  onClick={() => setShowLeaveModal(true)}
+                  className="flex items-center gap-2 px-3 py-2 bg-red-600 hover:bg-red-700 rounded-md transition-colors text-sm"
+                  title="Leave Event"
                >
-                  <Edit2 className="w-4 h-4" />
-                  Edit Heats
+                  <LogOut size={16} />
                </button>
-              )}
+              </div>
            </div>
          </div>

@@ -401,9 +409,9 @@ const EventChatPage = () => {
            />
          )}

-          {/* Tab Navigation */}
-          <div className="border-b bg-gray-50">
-            <nav className="flex">
+        {/* 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 ${
@@ -424,7 +432,7 @@ const EventChatPage = () => {
                }`}
              >
                <Users className="w-4 h-4" />
-                Uczestnicy
+                Participants
                <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-200 text-gray-600 rounded-full">
                  {checkedInUsers.length}
                </span>
@@ -438,15 +446,16 @@ const EventChatPage = () => {
                }`}
              >
                <Video className="w-4 h-4" />
-                Nagrywanie
+                Recording
              </button>
-            </nav>
-          </div>
+          </nav>
+        </div>

-          <div className="h-[calc(100vh-340px)]">
-            {/* Chat Tab */}
-            {activeTab === 'chat' && (
-              <div className="flex h-full">
+        {/* Content Area - flex-1 fills remaining space */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Chat Tab */}
+          {activeTab === 'chat' && (
+            <div className="flex h-full">
                {/* Sidebar - visible only on chat tab on larger screens */}
                <div className="hidden lg:block">
                  <ParticipantsSidebar
@@ -511,19 +520,8 @@ const EventChatPage = () => {
                myHeats={myHeats}
              />
            )}
-          </div>
-
-          {/* Leave Event Button */}
-          <div className="mt-4 flex justify-center">
-            <button
-              onClick={() => setShowLeaveModal(true)}
-              className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
-            >
-              <LogOut size={16} />
-              Leave Event
-            </button>
-          </div>
        </div>
+      </div>

        <ConfirmationModal
          isOpen={showLeaveModal}
@@ -551,7 +549,6 @@ const EventChatPage = () => {
            existingCompetitorNumber={myCompetitorNumber}
          />
        </Modal>
-      </div>
    </Layout>
  );
 };
--- a/frontend/src/pages/MatchChatPage.jsx
+++ b/frontend/src/pages/MatchChatPage.jsx
@@ -213,11 +213,10 @@ const MatchChatPage = () => {
  }

  return (
-    <Layout>
-      <div className="max-w-4xl mx-auto">
-        <div className="bg-white rounded-lg shadow-md overflow-hidden">
-          {/* Header with Partner Info */}
-          <div className="bg-primary-600 text-white p-4">
+    <Layout fullWidth>
+      <div className="flex flex-col h-[calc(100vh-64px)] bg-white">
+        {/* Header with Partner Info */}
+        <div className="bg-primary-600 text-white p-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <Link to={`/${partner.username}`} className="flex-shrink-0">
@@ -256,8 +255,8 @@ const MatchChatPage = () => {
            </div>
          </div>

-          {/* WebRTC Status Bar */}
-          <div className="bg-gray-50 border-b px-4 py-2 flex items-center justify-between">
+        {/* WebRTC Status Bar */}
+        <div className="bg-gray-50 border-b px-4 py-2 flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <div className={`w-2 h-2 rounded-full ${connectionState === CONNECTION_STATE.CONNECTED ? 'bg-green-500' : 'bg-gray-300'}`} />
              <span className={`text-sm font-medium ${getWebRTCStatusColor()}`}>
@@ -273,22 +272,23 @@ const MatchChatPage = () => {
              <span className="text-xs text-gray-500">
                {connectionState === CONNECTION_STATE.CONNECTED ? 'E2E Encrypted (DTLS)' : 'WebRTC P2P Ready'}
              </span>
-            </div>
          </div>
+        </div>

-          <div className="flex flex-col h-[calc(100vh-320px)]">
-            {/* WebRTC Warning */}
-            {webrtcDetection && (
-              <div className="p-4 pb-0">
-                <WebRTCWarning detection={webrtcDetection} />
-              </div>
-            )}
+        {/* Content Area - flex-1 fills remaining space */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* WebRTC Warning */}
+          {webrtcDetection && (
+            <div className="p-4 pb-0">
+              <WebRTCWarning detection={webrtcDetection} />
+            </div>
+          )}

-            <ChatMessageList
-              messages={messages}
-              currentUserId={user.id}
-              messagesEndRef={messagesEndRef}
-            />
+          <ChatMessageList
+            messages={messages}
+            currentUserId={user.id}
+            messagesEndRef={messagesEndRef}
+          />

            <FileTransferProgress
              file={selectedFile}
@@ -350,18 +350,8 @@ const MatchChatPage = () => {
                disabled={!isConnected}
                placeholder="Write a message..."
              />
-            </div>
          </div>
        </div>
-
-        {/* Info Box */}
-        <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
-          <p className="text-sm text-green-800">
-            <strong>🚀 WebRTC P2P File Transfer Active!</strong> Videos are transferred directly between users via
-            RTCDataChannel with 16KB chunking and real-time progress monitoring. The server is only used for
-            SDP/ICE exchange (signaling). Connection is end-to-end encrypted (DTLS).
-          </p>
-        </div>
      </div>
    </Layout>
  );