rick/rosterchirp-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.11.20 UI updates

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-22 14:30:06 -04:00
parent 7d6b28b4a3
commit 8116b307f7
6 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/ChatWindow.jsx
View File

@@ -8,6 +8,12 @@ import { useSocket } from '../contexts/SocketContext.jsx';
import './ChatWindow.css';
import GroupInfoModal from './GroupInfoModal.jsx';
// Must match Avatar.jsx and Sidebar.jsx exactly so header colours are consistent with message avatars
const AVATAR_COLORS = ['#1a73e8','#ea4335','#34a853','#fa7b17','#a142f4','#00897b','#e91e8c','#0097a7'];
function nameToColor(name) {
return AVATAR_COLORS[(name || '').charCodeAt(0) % AVATAR_COLORS.length];
}
export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMessage, onMessageDeleted, onlineUserIds = new Set() }) {
const { user: currentUser } = useAuth();
const { socket } = useSocket();
@@ -237,13 +243,21 @@ export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMess
<img src={group.peer_avatar} alt={group.name} className="group-icon-sm" style={{ objectFit: 'cover', padding: 0 }} />
{isOnline && <span className="online-dot" style={{ position: 'absolute', bottom: 1, right: 1 }} />}
</div>
) : isDirect && !group.is_managed ? (
// No custom avatar — use same per-user colour as Avatar.jsx and Sidebar.jsx
<div style={{ position: 'relative', flexShrink: 0 }}>
<div className="group-icon-sm" style={{ background: nameToColor(group.peer_real_name || group.name), flexShrink: 0 }}>
{(group.peer_real_name || group.name)[0]?.toUpperCase()}
</div>
{isOnline && <span className="online-dot" style={{ position: 'absolute', bottom: 1, right: 1 }} />}
</div>
) : group.is_managed ? (
<div className="group-icon-sm" style={{ background: avatarColors.dm, borderRadius: 8, flexShrink: 0, fontSize: 11, fontWeight: 700 }}>
{group.is_multi_group ? 'MG' : 'UG'}
</div>
) : (
<div className="group-icon-sm" style={{ background: group.type === 'public' ? avatarColors.public : avatarColors.dm, flexShrink: 0 }}>
{group.type === 'public' ? '#' : isDirect ? (group.peer_real_name || group.name)[0]?.toUpperCase() : group.name[0]?.toUpperCase()}
{group.type === 'public' ? '#' : group.name[0]?.toUpperCase()}
</div>
)}