feat: fetch moderator avatars via API proxy with initials fallback

client/src/App.jsx

@@ -731,6 +731,7 @@ export default function App() {
                 modProfiles={modProfiles}
                 selectedMod={selectedMod}
                 setSelectedMod={setSelectedMod}
+                API_BASE={API_BASE}
               />
             )}
           </>

client/src/components/ModeratorTab.jsx

@@ -76,6 +76,63 @@ function InitialsAvatar({ name, size = 40, border = '1px solid var(--color-borde
   );
 }
 
+// Custom Avatar Component that fetches from Twitch API Proxy, falls back to initials
+function ModeratorAvatar({ name, size = 40, border = '1px solid var(--color-border)', API_BASE }) {
+  const [imgSrc, setImgSrc] = React.useState('');
+  const [hasError, setHasError] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!name) return;
+    const base = API_BASE || '';
+    setImgSrc(`${base}/api/avatar/${name.toLowerCase()}`);
+    setHasError(false);
+    setLoading(true);
+  }, [name, API_BASE]);
+
+  if (hasError || !name) {
+    return <InitialsAvatar name={name} size={size} border={border} />;
+  }
+
+  return (
+    <div style={{
+      width: size,
+      height: size,
+      borderRadius: '50%',
+      border,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      flexShrink: 0,
+      backgroundColor: 'rgba(255, 255, 255, 0.05)',
+      position: 'relative'
+    }}>
+      {loading && (
+        <div style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'rgba(255, 255, 255, 0.05)',
+          borderRadius: '50%'
+        }} />
+      )}
+      <img
+        src={imgSrc}
+        alt={name}
+        onLoad={() => setLoading(false)}
+        onError={() => setHasError(true)}
+        style={{
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          opacity: loading ? 0 : 1,
+          transition: 'opacity 0.2s ease-in-out'
+        }}
+      />
+    </div>
+  );
+}
+
 export default function ModeratorTab({
   twitchConfigured,
   auth,
@@ -83,7 +140,8 @@ export default function ModeratorTab({
   TWITCH_CHANNEL,
   modProfiles,
   selectedMod,
-  setSelectedMod
+  setSelectedMod,
+  API_BASE
 }) {
   
   // Set default selected moderator if not set yet
@@ -175,7 +233,7 @@ export default function ModeratorTab({
                   {/* Header metadata */}
                   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                      <InitialsAvatar name={mod.moderator} size={48} border={`2px solid ${trophyColor}`} />
+                      <ModeratorAvatar name={mod.moderator} size={48} border={`2px solid ${trophyColor}`} API_BASE={API_BASE} />
                       <div>
                         <h4 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 700, letterSpacing: '-0.01em' }}>{mod.moderator}</h4>
                         <span style={{ 
@@ -269,7 +327,7 @@ export default function ModeratorTab({
                             </td>
                             <td style={{ padding: '0.9rem 0.5rem' }}>
                               <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-                                <InitialsAvatar name={mod.moderator} size={32} />
+                                <ModeratorAvatar name={mod.moderator} size={32} API_BASE={API_BASE} />
                                 <span style={{ fontWeight: 600, color: isSelected ? 'var(--color-text-main)' : 'var(--color-text-muted)' }}>{mod.moderator}</span>
                               </div>
                             </td>
@@ -327,7 +385,7 @@ export default function ModeratorTab({
                     padding: '1.25rem'
                   }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                      <InitialsAvatar name={selectedMod.moderator} size={54} border="2px solid var(--color-brand)" />
+                      <ModeratorAvatar name={selectedMod.moderator} size={54} border="2px solid var(--color-brand)" API_BASE={API_BASE} />
                       <div>
                         <h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 800 }}>{selectedMod.moderator}</h3>
                         <span className="badge badge-mod" style={{ marginTop: '0.35rem', fontSize: '0.65rem' }}>Модератор</span>