From ade5190d7ba4d35632ef76acadcbe5c185ea8568 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Gierwia=C5=82o?= <github@radziel.com>
Date: Fri, 21 Nov 2025 17:29:12 +0100
Subject: [PATCH] fix(frontend): resolve missing formatHeat function in
 EventChatPage

Bug: EventChatPage referenced formatHeat() function in header's heat display
(line 365) but the function was removed during Phase 3 refactoring when
creating the HeatBadges component.

Solution:
1. Enhanced HeatBadges component with badgeClassName prop to support
   custom styling (needed for dark header background)
2. Replaced manual heat rendering in EventChatPage header with
   HeatBadges component
3. Passed custom badge styling to match the dark primary-700 header

Changes:
- HeatBadges.jsx: Added badgeClassName prop for style customization
- EventChatPage.jsx: Replaced manual heat map with HeatBadges component

Fixes: "Uncaught ReferenceError: formatHeat is not defined" error
---
 frontend/src/components/heats/HeatBadges.jsx |  9 +++++++--
 frontend/src/pages/EventChatPage.jsx         | 16 ++++++----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/heats/HeatBadges.jsx b/frontend/src/components/heats/HeatBadges.jsx
index feb5018..cb906b2 100644
--- a/frontend/src/components/heats/HeatBadges.jsx
+++ b/frontend/src/components/heats/HeatBadges.jsx
@@ -6,6 +6,7 @@
  * @param {number} maxVisible - Maximum number of badges to show before "+X more" (default: 3)
  * @param {boolean} compact - Use compact display (default: true)
  * @param {string} className - Additional CSS classes for container
+ * @param {string} badgeClassName - Custom CSS classes for individual badges (overrides default styling)
  *
  * @example
  * <HeatBadges heats={userHeats} maxVisible={3} />
@@ -15,7 +16,8 @@ const HeatBadges = ({
   heats = [],
   maxVisible = 3,
   compact = true,
-  className = ''
+  className = '',
+  badgeClassName = ''
 }) => {
   if (!heats || heats.length === 0) return null;
 
@@ -39,12 +41,15 @@ const HeatBadges = ({
   const visibleHeats = heats.slice(0, maxVisible);
   const remainingCount = heats.length - maxVisible;
 
+  const defaultBadgeClass = "text-xs px-1.5 py-0.5 bg-amber-100 text-amber-800 rounded font-mono";
+  const badgeClass = badgeClassName || defaultBadgeClass;
+
   return (
     <div className={`flex flex-wrap gap-1 ${className}`}>
       {visibleHeats.map((heat, idx) => (
         <span
           key={idx}
-          className="text-xs px-1.5 py-0.5 bg-amber-100 text-amber-800 rounded font-mono"
+          className={badgeClass}
           title={`${heat.competitionType?.name || ''} ${heat.division?.name || ''} Heat ${heat.heatNumber} (${heat.role || ''})`}
         >
           {formatHeat(heat)}
diff --git a/frontend/src/pages/EventChatPage.jsx b/frontend/src/pages/EventChatPage.jsx
index 685afc4..f8926a4 100644
--- a/frontend/src/pages/EventChatPage.jsx
+++ b/frontend/src/pages/EventChatPage.jsx
@@ -6,6 +6,7 @@ import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode, Edit2, Filter,
 import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
 import { eventsAPI, heatsAPI, matchesAPI } from '../services/api';
 import HeatsBanner from '../components/heats/HeatsBanner';
+import HeatBadges from '../components/heats/HeatBadges';
 import Avatar from '../components/common/Avatar';
 import ChatMessageList from '../components/chat/ChatMessageList';
 import ChatInput from '../components/chat/ChatInput';
@@ -356,16 +357,11 @@ const EventChatPage = () => {
                   {myHeats.length > 0 && (
                     <div className="flex items-center gap-2">
                       <span className="text-xs text-primary-100">Your heats:</span>
-                      <div className="flex flex-wrap gap-1">
-                        {myHeats.map((heat, idx) => (
-                          <span
-                            key={idx}
-                            className="text-xs px-2 py-0.5 bg-primary-700 text-white rounded font-mono"
-                          >
-                            {formatHeat(heat)}
-                          </span>
-                        ))}
-                      </div>
+                      <HeatBadges
+                        heats={myHeats}
+                        maxVisible={10}
+                        badgeClassName="text-xs px-2 py-0.5 bg-primary-700 text-white rounded font-mono"
+                      />
                     </div>
                   )}
                 </div>