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

@@ -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)}

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">
+                      <HeatBadges
-                        {myHeats.map((heat, idx) => (
+                        heats={myHeats}
-                          <span
+                        maxVisible={10}
-                            key={idx}
+                        badgeClassName="text-xs px-2 py-0.5 bg-primary-700 text-white rounded font-mono"
-                            className="text-xs px-2 py-0.5 bg-primary-700 text-white rounded font-mono"
+                      />
-                          >
-                            {formatHeat(heat)}
-                          </span>
-                        ))}
-                      </div>
                     </div>
                   )}
                 </div>