From 634cd97032ffa30801a18fc8e8629e9ee19ded87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Gierwia=C5=82o?= <github@radziel.com>
Date: Sat, 29 Nov 2025 15:18:22 +0100
Subject: [PATCH] refactor(frontend): simplify event chat UI

- Replace "Edit heats" button with icon-only version
- Remove connection status indicator (show "Disconnected" warning only when offline)
- Remove event location from header
- Hide Participants tab on desktop (sidebar already visible)
- Remove "Participants" header from sidebar on desktop
---
 .../components/events/ParticipantsSidebar.jsx | 29 +++++++++++--------
 frontend/src/pages/EventChatPage.jsx          | 22 ++++++++------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/events/ParticipantsSidebar.jsx b/frontend/src/components/events/ParticipantsSidebar.jsx
index 90ebc9a..18c9b19 100644
--- a/frontend/src/components/events/ParticipantsSidebar.jsx
+++ b/frontend/src/components/events/ParticipantsSidebar.jsx
@@ -37,7 +37,8 @@ const ParticipantsSidebar = ({
   onHideMyHeatsChange,
   onMatchWith,
   className = '',
-  fullWidth = false
+  fullWidth = false,
+  showHeader = true
 }) => {
   const participantCount = users.length;
   const onlineCount = activeUsers.length;
@@ -45,16 +46,20 @@ const ParticipantsSidebar = ({
   return (
     <div className={`${fullWidth ? 'w-full' : 'w-64 border-r'} bg-gray-50 p-4 overflow-y-auto ${className}`}>
       {/* Header */}
-      <div className="mb-4">
-        <h3 className="font-semibold text-gray-900 mb-2">
-          Participants ({participantCount})
-        </h3>
-        <p className="text-xs text-gray-500 mb-3">
-          {onlineCount} online
-        </p>
+      {showHeader && (
+        <div className="mb-4">
+          <h3 className="font-semibold text-gray-900 mb-2">
+            Participants ({participantCount})
+          </h3>
+          <p className="text-xs text-gray-500 mb-3">
+            {onlineCount} online
+          </p>
+        </div>
+      )}
 
-        {/* Filter Checkbox */}
-        {myHeats.length > 0 && (
+      {/* Filter Checkbox */}
+      {myHeats.length > 0 && (
+        <div className="mb-4">
           <label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer hover:text-gray-900">
             <input
               type="checkbox"
@@ -65,8 +70,8 @@ const ParticipantsSidebar = ({
             <Filter className="w-3 h-3" />
             <span>Hide users from my heats</span>
           </label>
-        )}
-      </div>
+        </div>
+      )}
 
       {/* Empty State */}
       {participantCount === 0 && (
diff --git a/frontend/src/pages/EventChatPage.jsx b/frontend/src/pages/EventChatPage.jsx
index 644d368..17a72a5 100644
--- a/frontend/src/pages/EventChatPage.jsx
+++ b/frontend/src/pages/EventChatPage.jsx
@@ -359,12 +359,7 @@ const EventChatPage = () => {
             <div className="flex items-start justify-between">
               <div className="flex-1">
                 <h2 className="text-2xl font-bold">{event.name}</h2>
-                <p className="text-primary-100 text-sm">{event.location}</p>
                 <div className="mt-2 flex items-center gap-3">
-                  <span className={`text-xs px-2 py-1 rounded ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}>
-                    {isConnected ? '● Connected' : '● Disconnected'}
-                  </span>
-
                   {/* My Heats Display */}
                   {myHeats.length > 0 && (
                     <div className="flex items-center gap-2">
@@ -382,15 +377,15 @@ const EventChatPage = () => {
                 {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"
+                    className="p-2 bg-primary-700 hover:bg-primary-800 rounded-md transition-colors"
+                    title="Edit heats"
                   >
                     <Edit2 className="w-4 h-4" />
-                    Edit Heats
                   </button>
                 )}
                 <button
                   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"
+                  className="p-2 bg-red-600 hover:bg-red-700 rounded-md transition-colors"
                   title="Leave Event"
                 >
                   <LogOut size={16} />
@@ -399,6 +394,14 @@ const EventChatPage = () => {
             </div>
           </div>
 
+          {/* Disconnected Warning - show only when disconnected */}
+          {!isConnected && (
+            <div className="bg-red-600 text-white px-4 py-2 text-sm flex items-center gap-2">
+              <AlertTriangle className="w-4 h-4" />
+              <span>Disconnected</span>
+            </div>
+          )}
+
           {/* Heats Banner */}
           {showHeatsBanner && (
             <HeatsBanner
@@ -425,7 +428,7 @@ const EventChatPage = () => {
               </button>
               <button
                 onClick={() => setActiveTab('participants')}
-                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                className={`lg:hidden 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'
@@ -467,6 +470,7 @@ const EventChatPage = () => {
                     hideMyHeats={hideMyHeats}
                     onHideMyHeatsChange={setHideMyHeats}
                     onMatchWith={handleMatchWith}
+                    showHeader={false}
                   />
                 </div>