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/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>