radziel/spotlightcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
Radosław Gierwiało
2025-11-29 15:04:41 +01:00
parent 9206565523
commit dfb5313f9a
6 changed files with 89 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/package-lock.json generated
View File

@@ -5313,9 +5313,9 @@
} }
}, },
"node_modules/glob": { "node_modules/glob": {
"version": "10.4.5", "version": "10.5.0",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
"dev": true, "dev": true,
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {

10
frontend/src/components/layout/Layout.jsx
View File

@@ -1,10 +1,14 @@
import Navbar from './Navbar'; 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 ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 flex flex-col">
<Navbar /> <Navbar />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <main className={mainClasses}>
{children} {children}
</main> </main>
</div> </div>

4
frontend/src/components/layout/Navbar.jsx
View File

@@ -61,8 +61,8 @@ const Navbar = () => {
if (!user) return null; if (!user) return null;
return ( return (
<nav className="bg-white shadow-md"> <nav className="bg-white shadow-md sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16"> <div className="flex justify-between h-16">
<div className="flex items-center"> <div className="flex items-center">
<Link to="/dashboard" className="flex items-center space-x-2"> <Link to="/dashboard" className="flex items-center space-x-2">

50
frontend/src/components/recordings/RecordingTab.jsx
View File

@@ -29,7 +29,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
setSuggestions(data); setSuggestions(data);
} catch (err) { } catch (err) {
console.error('Failed to load suggestions:', err); console.error('Failed to load suggestions:', err);
setError('Nie udalo sie zaladowac sugestii'); setError('Failed to load suggestions');
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -89,7 +89,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-3">
<RefreshCw className="w-8 h-8 animate-spin text-primary-600" /> <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>
</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="bg-gradient-to-r from-primary-50 to-primary-100 rounded-lg p-4">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
<Video className="w-6 h-6 text-primary-600" /> <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> </div>
<p className="text-sm text-primary-700"> <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> </p>
</div> </div>
@@ -130,10 +130,10 @@ const RecordingTab = ({ slug, event, myHeats }) => {
<Clock className="w-5 h-5 text-amber-600" /> <Clock className="w-5 h-5 text-amber-600" />
<div> <div>
<p className="font-medium text-amber-800"> <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>
<p className="text-sm text-amber-600"> <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> </p>
</div> </div>
</div> </div>
@@ -144,9 +144,9 @@ const RecordingTab = ({ slug, event, myHeats }) => {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<CheckCircle className="w-5 h-5 text-green-600" /> <CheckCircle className="w-5 h-5 text-green-600" />
<div> <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"> <p className="text-sm text-green-600">
Ostatnie uruchomienie: {new Date(matchingRunAt).toLocaleString('pl-PL')} Last run: {new Date(matchingRunAt).toLocaleString('en-US')}
</p> </p>
</div> </div>
</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" 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' : ''}`} /> <RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
{runningMatching ? 'Trwa...' : 'Uruchom ponownie'} {runningMatching ? 'Running...' : 'Run again'}
</button> </button>
</div> </div>
</div> </div>
@@ -165,7 +165,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<AlertTriangle className="w-5 h-5 text-gray-500" /> <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> </div>
<button <button
onClick={handleRunMatching} 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" 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' : ''}`} /> <RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
{runningMatching ? 'Trwa...' : 'Uruchom matching'} {runningMatching ? 'Running...' : 'Run matching'}
</button> </button>
</div> </div>
</div> </div>
@@ -183,14 +183,14 @@ const RecordingTab = ({ slug, event, myHeats }) => {
<div> <div>
<h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3"> <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" /> <Video className="w-5 h-5 text-primary-600" />
Moje heaty do nagrania ({toBeRecorded.length}) My heats to be recorded ({toBeRecorded.length})
</h4> </h4>
{toBeRecorded.length === 0 ? ( {toBeRecorded.length === 0 ? (
<div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500"> <div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
{myHeats.length === 0 {myHeats.length === 0
? 'Nie masz zadeklarowanych heatow' ? "You haven't declared any heats"
: 'Brak sugestii - uruchom matching' : 'No suggestions - run matching'
} }
</div> </div>
) : ( ) : (
@@ -212,12 +212,12 @@ const RecordingTab = ({ slug, event, myHeats }) => {
<div> <div>
<h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3"> <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" /> <VideoOff className="w-5 h-5 text-amber-600" />
Nagrywam innych ({toRecord.length}) Recording others ({toRecord.length})
</h4> </h4>
{toRecord.length === 0 ? ( {toRecord.length === 0 ? (
<div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500"> <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>
) : ( ) : (
<div className="space-y-2"> <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" className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
/> />
<span className="text-sm text-gray-700"> <span className="text-sm text-gray-700">
Nie chce nagrywac innych (opt-out) I don't want to record others (opt-out)
</span> </span>
{updatingOptOut && ( {updatingOptOut && (
<RefreshCw className="w-4 h-4 animate-spin text-gray-400" /> <RefreshCw className="w-4 h-4 animate-spin text-gray-400" />
)} )}
</label> </label>
<p className="text-xs text-gray-500 mt-1 ml-7"> <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> </p>
</div> </div>
</div> </div>
@@ -274,7 +274,7 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
: 'Unknown heat'; : 'Unknown heat';
const person = type === SUGGESTION_TYPE.TO_BE_RECORDED ? recorder : dancer; 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 // Status badge
const getStatusBadge = () => { const getStatusBadge = () => {
@@ -283,21 +283,21 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
return ( 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"> <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" /> <CheckCircle className="w-3 h-3" />
Zaakceptowano Accepted
</span> </span>
); );
case SUGGESTION_STATUS.REJECTED: case SUGGESTION_STATUS.REJECTED:
return ( 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"> <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" /> <XCircle className="w-3 h-3" />
Odrzucono Rejected
</span> </span>
); );
case SUGGESTION_STATUS.NOT_FOUND: case SUGGESTION_STATUS.NOT_FOUND:
return ( 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"> <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" /> <AlertTriangle className="w-3 h-3" />
Nie znaleziono Not found
</span> </span>
); );
default: default:
@@ -315,7 +315,7 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
</div> </div>
<div> <div>
<p className="font-medium text-amber-900">{heatInfo}</p> <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>
</div> </div>
{getStatusBadge()} {getStatusBadge()}
@@ -352,14 +352,14 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
<button <button
onClick={onAccept} onClick={onAccept}
className="p-2 text-green-600 hover:bg-green-50 rounded-md transition-colors" className="p-2 text-green-600 hover:bg-green-50 rounded-md transition-colors"
title="Akceptuj" title="Accept"
> >
<CheckCircle className="w-5 h-5" /> <CheckCircle className="w-5 h-5" />
</button> </button>
<button <button
onClick={onReject} onClick={onReject}
className="p-2 text-red-600 hover:bg-red-50 rounded-md transition-colors" className="p-2 text-red-600 hover:bg-red-50 rounded-md transition-colors"
title="Odrzuc" title="Reject"
> >
<XCircle className="w-5 h-5" /> <XCircle className="w-5 h-5" />
</button> </button>

67
frontend/src/pages/EventChatPage.jsx
View File

@@ -352,11 +352,10 @@ const EventChatPage = () => {
} }
return ( return (
<Layout> <Layout fullWidth>
<div className="max-w-6xl mx-auto"> <div className="flex flex-col h-[calc(100vh-64px)] bg-white">
<div className="bg-white rounded-lg shadow-md overflow-hidden"> {/* Header */}
{/* Header */} <div className="bg-primary-600 text-white p-4">
<div className="bg-primary-600 text-white p-4">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<h2 className="text-2xl font-bold">{event.name}</h2> <h2 className="text-2xl font-bold">{event.name}</h2>
@@ -379,15 +378,24 @@ const EventChatPage = () => {
)} )}
</div> </div>
</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 <button
onClick={() => setShowHeatsModal(true)} onClick={() => setShowLeaveModal(true)}
className="flex items-center gap-2 px-3 py-2 bg-primary-700 hover:bg-primary-800 rounded-md transition-colors text-sm" 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" /> <LogOut size={16} />
Edit Heats
</button> </button>
)} </div>
</div> </div>
</div> </div>
@@ -401,9 +409,9 @@ const EventChatPage = () => {
/> />
)} )}
{/* Tab Navigation */} {/* Tab Navigation */}
<div className="border-b bg-gray-50"> <div className="border-b bg-gray-50">
<nav className="flex"> <nav className="flex">
<button <button
onClick={() => setActiveTab('chat')} onClick={() => setActiveTab('chat')}
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${ 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" /> <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"> <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-200 text-gray-600 rounded-full">
{checkedInUsers.length} {checkedInUsers.length}
</span> </span>
@@ -438,15 +446,16 @@ const EventChatPage = () => {
}`} }`}
> >
<Video className="w-4 h-4" /> <Video className="w-4 h-4" />
Nagrywanie Recording
</button> </button>
</nav> </nav>
</div> </div>
<div className="h-[calc(100vh-340px)]"> {/* Content Area - flex-1 fills remaining space */}
{/* Chat Tab */} <div className="flex-1 flex flex-col overflow-hidden">
{activeTab === 'chat' && ( {/* Chat Tab */}
<div className="flex h-full"> {activeTab === 'chat' && (
<div className="flex h-full">
{/* Sidebar - visible only on chat tab on larger screens */} {/* Sidebar - visible only on chat tab on larger screens */}
<div className="hidden lg:block"> <div className="hidden lg:block">
<ParticipantsSidebar <ParticipantsSidebar
@@ -511,19 +520,8 @@ const EventChatPage = () => {
myHeats={myHeats} 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>
</div>
<ConfirmationModal <ConfirmationModal
isOpen={showLeaveModal} isOpen={showLeaveModal}
@@ -551,7 +549,6 @@ const EventChatPage = () => {
existingCompetitorNumber={myCompetitorNumber} existingCompetitorNumber={myCompetitorNumber}
/> />
</Modal> </Modal>
</div>
</Layout> </Layout>
); );
}; };

50
frontend/src/pages/MatchChatPage.jsx
View File

@@ -213,11 +213,10 @@ const MatchChatPage = () => {
} }
return ( return (
<Layout> <Layout fullWidth>
<div className="max-w-4xl mx-auto"> <div className="flex flex-col h-[calc(100vh-64px)] bg-white">
<div className="bg-white rounded-lg shadow-md overflow-hidden"> {/* Header with Partner Info */}
{/* Header with Partner Info */} <div className="bg-primary-600 text-white p-4">
<div className="bg-primary-600 text-white p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<Link to={`/${partner.username}`} className="flex-shrink-0"> <Link to={`/${partner.username}`} className="flex-shrink-0">
@@ -256,8 +255,8 @@ const MatchChatPage = () => {
</div> </div>
</div> </div>
{/* WebRTC Status Bar */} {/* WebRTC Status Bar */}
<div className="bg-gray-50 border-b px-4 py-2 flex items-center justify-between"> <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="flex items-center space-x-2">
<div className={`w-2 h-2 rounded-full ${connectionState === CONNECTION_STATE.CONNECTED ? 'bg-green-500' : 'bg-gray-300'}`} /> <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()}`}> <span className={`text-sm font-medium ${getWebRTCStatusColor()}`}>
@@ -273,22 +272,23 @@ const MatchChatPage = () => {
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500">
{connectionState === CONNECTION_STATE.CONNECTED ? 'E2E Encrypted (DTLS)' : 'WebRTC P2P Ready'} {connectionState === CONNECTION_STATE.CONNECTED ? 'E2E Encrypted (DTLS)' : 'WebRTC P2P Ready'}
</span> </span>
</div>
</div> </div>
</div>
<div className="flex flex-col h-[calc(100vh-320px)]"> {/* Content Area - flex-1 fills remaining space */}
{/* WebRTC Warning */} <div className="flex-1 flex flex-col overflow-hidden">
{webrtcDetection && ( {/* WebRTC Warning */}
<div className="p-4 pb-0"> {webrtcDetection && (
<WebRTCWarning detection={webrtcDetection} /> <div className="p-4 pb-0">
</div> <WebRTCWarning detection={webrtcDetection} />
)} </div>
)}
<ChatMessageList <ChatMessageList
messages={messages} messages={messages}
currentUserId={user.id} currentUserId={user.id}
messagesEndRef={messagesEndRef} messagesEndRef={messagesEndRef}
/> />
<FileTransferProgress <FileTransferProgress
file={selectedFile} file={selectedFile}
@@ -350,18 +350,8 @@ const MatchChatPage = () => {
disabled={!isConnected} disabled={!isConnected}
placeholder="Write a message..." placeholder="Write a message..."
/> />
</div>
</div> </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> </div>
</Layout> </Layout>
); );