radziel/spotlightcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Radosław Gierwiało
2025-11-15 23:08:00 +01:00
parent 6a17143ce1
commit 38adf1e5a5
6 changed files with 118 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/common/Avatar.jsx Normal file
View File

@@ -0,0 +1,71 @@
import React from 'react';
const STATUS_COLORS = {
online: 'bg-green-500',
offline: 'bg-gray-400',
busy: 'bg-yellow-500',
};
const Avatar = ({
src,
username = '',
alt,
size = 32, // number (px) or string with Tailwind classes
className = '', // applied to <img>
containerClassName = '', // applied to wrapper
rounded = true,
ring = false,
ringColor = 'ring-white',
status = null, // 'online' | 'offline' | 'busy' | null
title,
onClick,
}) => {
const [imgSrc, setImgSrc] = React.useState(src || '');
const isNumericSize = typeof size === 'number';
const style = isNumericSize ? { width: size, height: size } : undefined;
const sizeClass = isNumericSize ? '' : size; // e.g. 'w-8 h-8'
const fallback = `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(
username || 'user'
)}`;
const handleError = (e) => {
if (e.currentTarget.src !== fallback) {
setImgSrc(fallback);
}
};
const img = (
<img
src={imgSrc || fallback}
alt={alt || username || 'avatar'}
className={`${sizeClass} ${rounded ? 'rounded-full' : ''} bg-gray-100 object-cover ${
ring ? `ring-2 ${ringColor}` : ''
} ${className}`}
style={style}
loading="lazy"
onError={handleError}
title={title || username}
/>
);
// If no status, no need for wrapper; keep DOM minimal
if (!status) {
return img;
}
const dotColor = STATUS_COLORS[status] || STATUS_COLORS.offline;
return (
<span className={`relative inline-block ${containerClassName}`} onClick={onClick}>
{img}
<span
className={`absolute bottom-0 right-0 block h-3 w-3 ${dotColor} rounded-full ring-2 ring-white`}
aria-hidden="true"
/>
</span>
);
};
export default Avatar;

7
frontend/src/components/layout/Navbar.jsx
View File

@@ -1,6 +1,7 @@
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import { Video, LogOut, User, History, Users } from 'lucide-react';
import Avatar from '../common/Avatar';
import { useState, useEffect } from 'react';
import { matchesAPI } from '../../services/api';
import { connectSocket, disconnectSocket, getSocket } from '../../services/socket';
@@ -99,11 +100,7 @@ const Navbar = () => {
</Link>
<div className="flex items-center space-x-3">
<img
src={user.avatar}
alt={user.username}
className="w-8 h-8 rounded-full"
/>
<Avatar src={user?.avatar} username={user.username} size={32} />
<span className="text-sm font-medium text-gray-700">{user.username}</span>
</div>

27
frontend/src/pages/EventChatPage.jsx
View File

@@ -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
<Avatar
src={displayUser.avatar}
alt={displayUser.username}
className="w-8 h-8 rounded-full"
username={displayUser.username}
size={32}
status={displayUser.isOnline ? 'online' : 'offline'}
title={displayUser.username}
/>
{/* 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>
<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">

22
frontend/src/pages/MatchChatPage.jsx
View File

@@ -8,6 +8,7 @@ import { connectSocket, getSocket } from '../services/socket';
import { useWebRTC } from '../hooks/useWebRTC';
import { detectWebRTCSupport } from '../utils/webrtcDetection';
import WebRTCWarning from '../components/WebRTCWarning';
import Avatar from '../components/common/Avatar';
const MatchChatPage = () => {
const { slug } = useParams();
@@ -286,10 +287,12 @@ const MatchChatPage = () => {
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<Link to={`/${partner.username}`} className="flex-shrink-0">
<img
src={partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${partner.username}`}
alt={partner.username}
className="w-12 h-12 rounded-full border-2 border-white hover:ring-2 hover:ring-white hover:ring-offset-2 hover:ring-offset-primary-600 transition-all"
<Avatar
src={partner.avatar}
username={partner.username}
size={48}
className="border-2 border-white transition-all hover:ring-2 hover:ring-white hover:ring-offset-2 hover:ring-offset-primary-600"
title={partner.username}
/>
</Link>
<div>
@@ -355,17 +358,18 @@ const MatchChatPage = () => {
</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
src={message.avatar}
alt={message.username}
className="w-8 h-8 rounded-full"
<Avatar
src={message.avatar || (isOwnMessage ? user?.avatar : partner?.avatar)}
username={message.username || (isOwnMessage ? user?.username : partner?.username)}
size={32}
title={message.username || (isOwnMessage ? user?.username : partner?.username)}
/>
<div>
<div className="flex items-baseline space-x-2 mb-1">

10
frontend/src/pages/ProfilePage.jsx
View File

@@ -4,6 +4,7 @@ import { authAPI } from '../services/api';
import Layout from '../components/layout/Layout';
import { User, Mail, Lock, Save, AlertCircle, CheckCircle, Loader2, Hash, Youtube, Instagram, Facebook, MapPin, Globe } from 'lucide-react';
import { COUNTRIES } from '../data/countries';
import Avatar from '../components/common/Avatar';
const ProfilePage = () => {
const { user, updateUser } = useAuth();
@@ -138,10 +139,13 @@ const ProfilePage = () => {
{/* Header */}
<div className="bg-white rounded-lg shadow-sm p-6 mb-6">
<div className="flex items-center gap-4">
<img
<Avatar
src={user?.avatar}
alt={user?.username}
className="w-20 h-20 rounded-full"
username={user?.username}
size={80}
ring
ringColor="ring-white"
title={user?.username}
/>
<div>
<h1 className="text-2xl font-bold text-gray-900">

19
frontend/src/pages/PublicProfilePage.jsx
View File

@@ -3,6 +3,7 @@ import { useParams, Link } from 'react-router-dom';
import { authAPI, ratingsAPI } from '../services/api';
import Layout from '../components/layout/Layout';
import { User, MapPin, Globe, Hash, Youtube, Instagram, Facebook, Award, Users, Star, Calendar, Loader2, AlertCircle, ThumbsUp } from 'lucide-react';
import Avatar from '../components/common/Avatar';
const PublicProfilePage = () => {
const { username } = useParams();
@@ -86,10 +87,12 @@ const PublicProfilePage = () => {
{/* Profile Header */}
<div className="bg-white rounded-lg shadow-sm p-8 mb-6">
<div className="flex items-start gap-6">
<img
<Avatar
src={profile.avatar}
alt={profile.username}
className="w-32 h-32 rounded-full"
username={profile.username}
size={128}
className="transition-all hover:ring-2 hover:ring-primary-500"
title={profile.username}
/>
<div className="flex-1">
<h1 className="text-3xl font-bold text-gray-900 mb-1">
@@ -263,10 +266,12 @@ const PublicProfilePage = () => {
<div className="flex items-start gap-4">
{/* Rater Info */}
<Link to={`/${rating.rater.username}`} className="flex-shrink-0">
<img
src={rating.rater.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${rating.rater.username}`}
alt={rating.rater.username}
className="w-12 h-12 rounded-full hover:ring-2 hover:ring-primary-500 transition-all"
<Avatar
src={rating.rater.avatar}
username={rating.rater.username}
size={48}
className="hover:ring-2 hover:ring-primary-500 transition-all"
title={rating.rater.username}
/>
</Link>