cnrd
8456b8f976
Avatar opened the profile popout whenever it received a user prop. Since user is how every avatar gets its gradient, colour and status dot, all 22 call sites became profile triggers by accident — including the picture inside the profile card itself, which re-anchored the card to that picture on every click and walked it across the screen (120px right, 36px down, until it pinned at the viewport clamp). Avatar is now presentational. A new ProfileAvatar carries the open-the-profile behaviour at the five call sites that actually want it. The card's own picture escalates to the full profile modal instead of reopening the card. The card also places itself off its measured size via the shared computeFloatingPosition engine, replacing six call sites that each hand-computed coordinates against a guessed 460px card height. Closes #37
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import type { User } from '@backspace/shared';
|
|
import { useSpaceStore } from '../../stores/spaceStore';
|
|
import { useUIStore } from '../../stores/uiStore';
|
|
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
|
|
|
interface MentionBadgeProps {
|
|
userId: string;
|
|
}
|
|
|
|
export const MentionBadge = React.memo(function MentionBadge({ userId }: MentionBadgeProps) {
|
|
const members = useSpaceStore((s) => s.members);
|
|
const spaces = useSpaceStore((s) => s.spaces);
|
|
const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
|
|
const openUserProfile = useUIStore((s) => s.openUserProfile);
|
|
|
|
const member = members.find((m) => m.userId === userId);
|
|
const space = spaces.find((s) => s.id === currentSpaceId);
|
|
const ownerId = space?.ownerId;
|
|
|
|
const _FALLBACK_USER = { id: '', username: '', createdAt: 0, isAdmin: false, replicatedInstances: [] } as unknown as User;
|
|
const canonicalMemberUser = useCanonicalUserView(member?.user ?? _FALLBACK_USER);
|
|
const memberUser = member ? canonicalMemberUser : null;
|
|
|
|
let displayName: string;
|
|
let color: string;
|
|
|
|
if (member && memberUser) {
|
|
displayName = memberUser.displayName ?? memberUser.username;
|
|
if (member.roles && member.roles.length > 0) {
|
|
const sorted = [...member.roles].sort((a, b) => b.position - a.position);
|
|
color = sorted[0]!.color;
|
|
} else if (ownerId && userId === ownerId) {
|
|
color = '#fda4af';
|
|
} else {
|
|
color = '#7c6cf6'; // accent-primary default
|
|
}
|
|
} else {
|
|
displayName = 'Unknown User';
|
|
color = '#a0a0aa'; // text-secondary fallback
|
|
}
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
if (!member || !memberUser) return;
|
|
e.stopPropagation();
|
|
openUserProfile(memberUser, e.currentTarget.getBoundingClientRect());
|
|
};
|
|
|
|
// Build inline styles: role-colored text with tinted background
|
|
const bgColor = color + '1a'; // ~10% opacity hex
|
|
|
|
return (
|
|
<span
|
|
onClick={handleClick}
|
|
className="inline-flex items-center rounded-[3px] px-[2px] font-medium cursor-pointer transition-colors hover:brightness-125"
|
|
style={{ color, backgroundColor: bgColor }}
|
|
>
|
|
@{displayName}
|
|
</span>
|
|
);
|
|
});
|