feat(ui): unify avatars across navbar, profiles, event/match chat

- Add reusable Avatar with fallback, status dot, ring
- Replace <img> uses in Navbar, Profile, PublicProfile
- Use Avatar in MatchChatPage and EventChatPage messages and sidebars
- Fix own-message detection for snake_case payloads

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 Avatar from '../components/common/Avatar';
 
 const EventChatPage = () => {
   const { slug } = useParams();
@@ -536,20 +537,13 @@ const EventChatPage = () => {
                         className="flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg"
                       >
                         <div className="flex items-center space-x-2 flex-1 min-w-0">
-                          <div className="relative flex-shrink-0">
-                            <img
-                              src={displayUser.avatar}
-                              alt={displayUser.username}
-                              className="w-8 h-8 rounded-full"
-                            />
-                            {/* Online/Offline indicator */}
-                            <div
-                              className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2 border-gray-50 ${
-                                displayUser.isOnline ? 'bg-green-500' : 'bg-gray-400'
-                              }`}
-                              title={displayUser.isOnline ? 'Online' : 'Offline'}
-                            />
-                          </div>
+                          <Avatar
+                            src={displayUser.avatar}
+                            username={displayUser.username}
+                            size={32}
+                            status={displayUser.isOnline ? 'online' : 'offline'}
+                            title={displayUser.username}
+                          />
                           <div className="flex-1 min-w-0">
                             <p className={`text-sm font-medium truncate ${
                               displayUser.isOnline ? 'text-gray-900' : 'text-gray-500'
@@ -611,17 +605,18 @@ const EventChatPage = () => {
                   </div>
                 )}
                 {messages.map((message) => {
-                  const isOwnMessage = message.userId === user.id;
+                  const isOwnMessage = (message.userId ?? message.user_id) === user.id;
                   return (
                     <div
                       key={message.id}
                       className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
                     >
                       <div className={`flex items-start space-x-2 max-w-md ${isOwnMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
-                        <img
+                        <Avatar
                           src={message.avatar}
-                          alt={message.username}
-                          className="w-8 h-8 rounded-full"
+                          username={message.username}
+                          size={32}
+                          title={message.username}
                         />
                         <div>
                           <div className="flex items-baseline space-x-2 mb-1">