new: usr: Add opportunity to use profile picture. #4

assets/css/homepage/_auth-bar.scss

@@ -89,4 +89,23 @@
             border-color: rgba(149, 207, 245, 0.5);
         }
     }
-}
+}
+
+.hero-auth-avatar {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+    border: 1px solid rgba(35, 111, 135, 0.5);
+
+    &--initials {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, rgba(35, 111, 135, 0.45) 0%, rgba(173, 10, 5, 0.3) 100%);
+        font: 800 9px 'Rajdhani', sans-serif;
+        color: rgba(149, 207, 245, 0.9);
+        letter-spacing: 1px;
+    }
+}

assets/css/homepage/_profile.scss

@@ -20,6 +20,7 @@
 }
 
 .profile-avatar {
+  position: relative;
   width: 80px;
   height: 80px;
   flex-shrink: 0;
@@ -32,8 +33,56 @@
   font: 800 28px 'Rajdhani', sans-serif;
   color: rgba(149, 207, 245, 0.9);
   letter-spacing: 2px;
-  box-shadow: 0 0 0 4px rgba(35, 111, 135, 0.08),
-  0 0 24px rgba(35, 111, 135, 0.2);
+  box-shadow: 0 0 0 4px rgba(35, 111, 135, 0.08), 0 0 24px rgba(35, 111, 135, 0.2);
+  cursor: pointer;
+  overflow: hidden;
+  transition: box-shadow 200ms ease;
+
+  &:hover {
+    box-shadow: 0 0 0 4px rgba(35, 111, 135, 0.18), 0 0 32px rgba(35, 111, 135, 0.4);
+
+    .profile-avatar__overlay {
+      opacity: 1;
+    }
+  }
+
+  &--loading {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+    display: block;
+  }
+
+  &__initials {
+    font: 800 28px 'Rajdhani', sans-serif;
+    color: rgba(149, 207, 245, 0.9);
+    letter-spacing: 2px;
+    pointer-events: none;
+  }
+
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    pointer-events: none;
+
+    i {
+      font-size: 20px;
+      color: #fff;
+    }
+  }
 }
 
 .profile-info {

assets/js/components/AvatarUpload.jsx

@@ -0,0 +1,71 @@
+import React, { useRef, useState } from 'react';
+
+export default function AvatarUpload({ uploadUrl, initialThumbUrl, initials }) {
+  const [thumbUrl, setThumbUrl] = useState(initialThumbUrl || null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current?.click();
+  }
+
+  function handleChange(e) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const fd = new FormData();
+    fd.append('avatar', file);
+
+    setLoading(true);
+    setError(null);
+
+    fetch(uploadUrl, { method: 'POST', body: fd })
+      .then(r => r.json())
+      .then(data => {
+        if (data.error) {
+          setError(data.error);
+          return;
+        }
+        setThumbUrl(data.thumbUrl);
+
+        const navImg = document.querySelector('.hero-auth-avatar:not(.hero-auth-avatar--initials)');
+        const navInitials = document.querySelector('.hero-auth-avatar.hero-auth-avatar--initials');
+        if (navImg) {
+          navImg.src = data.thumbUrl;
+        } else if (navInitials) {
+          const img = document.createElement('img');
+          img.src = data.thumbUrl;
+          img.alt = navInitials.textContent.trim();
+          img.className = 'hero-auth-avatar';
+          navInitials.replaceWith(img);
+        }
+      })
+      .catch(() => setError('Upload failed. Please try again.'))
+      .finally(() => setLoading(false));
+  }
+
+  return (
+    <div
+      className={`profile-avatar${loading ? ' profile-avatar--loading' : ''}`}
+      title="Click to change profile picture"
+      onClick={handleClick}
+    >
+      {thumbUrl
+        ? <img src={thumbUrl} alt={initials} className="profile-avatar__img" />
+        : <span className="profile-avatar__initials">{initials}</span>
+      }
+      <div className="profile-avatar__overlay">
+        <i className="fa fa-camera" />
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/gif,image/webp"
+        style={{ display: 'none' }}
+        onChange={handleChange}
+      />
+      {error && <div className="profile-avatar__error">{error}</div>}
+    </div>
+  );
+}

assets/js/profile.jsx

@@ -2,6 +2,19 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import ProfileCharts from './components/ProfileCharts';
 import BattleDialog from './components/BattleDialog';
+import AvatarUpload from './components/AvatarUpload';
+
+const avatarRoot = document.getElementById('profile-avatar-root');
+if (avatarRoot) {
+  const { uploadUrl, thumbUrl, initials } = avatarRoot.dataset;
+  createRoot(avatarRoot).render(
+    <AvatarUpload
+      uploadUrl={uploadUrl}
+      initialThumbUrl={thumbUrl || null}
+      initials={initials}
+    />,
+  );
+}
 
 const chartsRoot = document.getElementById('profile-charts-root');
 if (chartsRoot) {