243 lines
9.4 KiB
TypeScript
243 lines
9.4 KiB
TypeScript
import { Box, Button, color, config, Text, toRem } from 'folds';
|
|
import { Icon, Icons } from '../icons';
|
|
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { UserHero, UserHeroName } from './UserHero';
|
|
import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
|
|
import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
|
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
|
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
|
import { usePowerLevels } from '../../hooks/usePowerLevels';
|
|
import { useRoom } from '../../hooks/useRoom';
|
|
import { useUserPresence } from '../../hooks/useUserPresence';
|
|
import { useOtherUserProfileStyle } from '../../hooks/useUserProfileStyle';
|
|
import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
|
|
import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
|
|
import { PowerChip } from './PowerChip';
|
|
import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
|
|
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
|
|
import { useMembership } from '../../hooks/useMembership';
|
|
import { Membership } from '../../../types/matrix/room';
|
|
import { useRoomCreators } from '../../hooks/useRoomCreators';
|
|
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
|
|
import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
|
|
import { CreatorChip } from './CreatorChip';
|
|
import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
|
|
import { DirectCreateSearchParams } from '../../pages/paths';
|
|
import { getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../utils/common';
|
|
import classNames from 'classnames';
|
|
import { BreakWord, LineClamp3 } from '../../styles/Text.css';
|
|
import colorMXID, { getColorMXIDValue } from '../../../util/colorMXID';
|
|
import { useOtherUserColor } from '../../hooks/useUserColor';
|
|
|
|
type UserRoomProfileProps = {
|
|
userId: string;
|
|
};
|
|
export function UserRoomProfile({ userId }: UserRoomProfileProps) {
|
|
const mx = useMatrixClient();
|
|
const useAuthentication = useMediaAuthentication();
|
|
const navigate = useNavigate();
|
|
const closeUserRoomProfile = useCloseUserRoomProfile();
|
|
const ignoredUsers = useIgnoredUsers();
|
|
const ignored = ignoredUsers.includes(userId);
|
|
|
|
const room = useRoom();
|
|
const powerLevels = usePowerLevels(room);
|
|
const creators = useRoomCreators(room);
|
|
|
|
const permissions = useRoomPermissions(creators, powerLevels);
|
|
const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
|
|
|
|
const myUserId = mx.getSafeUserId();
|
|
const creator = creators.has(userId);
|
|
|
|
const canKickUser = permissions.action('kick', myUserId) && hasMorePower(myUserId, userId);
|
|
const canBanUser = permissions.action('ban', myUserId) && hasMorePower(myUserId, userId);
|
|
const canUnban = permissions.action('ban', myUserId);
|
|
const canInvite = permissions.action('invite', myUserId);
|
|
|
|
const member = room.getMember(userId);
|
|
const membership = useMembership(room, userId);
|
|
|
|
const server = getMxIdServer(userId);
|
|
const displayName = getMemberDisplayName(room, userId);
|
|
const avatarMxc = getMemberAvatarMxc(room, userId);
|
|
const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
|
|
|
|
const presence = useUserPresence(userId);
|
|
const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
|
|
const userColor = useOtherUserColor(userId, avatarMxc);
|
|
|
|
// Build gradient CSS if configured
|
|
const gradientStyle = profileStyle.gradient
|
|
? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
|
|
: undefined;
|
|
|
|
const handleMessage = () => {
|
|
closeUserRoomProfile();
|
|
const directSearchParam: DirectCreateSearchParams = {
|
|
userId,
|
|
};
|
|
navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
|
|
};
|
|
|
|
const hasBottomContent =
|
|
ignored ||
|
|
(!!member && membership === Membership.Ban) ||
|
|
(!!member && membership === Membership.Leave && !!member.events.member && member.events.member.getSender() !== userId) ||
|
|
(!!member && membership === Membership.Invite) ||
|
|
(canInvite && membership === Membership.Leave) ||
|
|
(canKickUser && membership === Membership.Join) ||
|
|
(canBanUser && membership !== Membership.Ban);
|
|
|
|
// Use userColor for text, or fall back to colorMXID
|
|
const profileColor = userColor ? userColor : getColorMXIDValue(userId);
|
|
const profileTextShadow = `0 1px 4px ${getTextShadowColor(profileColor)}`;
|
|
|
|
// Use avatarBorderColor for pill background only if it has visible alpha (not fully transparent)
|
|
const hasVisibleBorder = profileStyle.avatarBorderColor && !profileStyle.avatarBorderColor.endsWith('00');
|
|
const pillBgColor = hasVisibleBorder ? stripAlphaFromColor(profileStyle.avatarBorderColor!) : undefined;
|
|
|
|
console.log('[UserRoomProfile]', {
|
|
userId,
|
|
avatarMxc,
|
|
userColor,
|
|
profileStyle,
|
|
profileColor,
|
|
profileTextShadow,
|
|
hasVisibleBorder,
|
|
pillBgColor,
|
|
fallbackColorMXID: getColorMXIDValue(userId),
|
|
});
|
|
|
|
return (
|
|
<Box direction="Column">
|
|
<UserHero
|
|
userId={userId}
|
|
avatarUrl={avatarUrl}
|
|
avatarMxc={avatarMxc}
|
|
presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
|
|
/>
|
|
<Box
|
|
direction="Column"
|
|
gap="200"
|
|
alignItems="Center"
|
|
style={{
|
|
padding: config.space.S400,
|
|
paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
|
|
marginTop: toRem(-36),
|
|
background: gradientStyle,
|
|
textAlign: 'center'
|
|
}}
|
|
>
|
|
{/* Display Name */}
|
|
<Text
|
|
size="H4"
|
|
className={classNames(BreakWord, LineClamp3)}
|
|
style={{ color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined, textShadow: profileTextShadow }}
|
|
>
|
|
{getMemberDisplayName(room, userId)}
|
|
</Text>
|
|
|
|
{/* Username */}
|
|
<Text
|
|
size="T200"
|
|
className={BreakWord}
|
|
style={{ color: profileColor, textShadow: profileTextShadow }}
|
|
>
|
|
{userId}
|
|
</Text>
|
|
|
|
{/* Status Pill */}
|
|
{presence?.status && (
|
|
<Box
|
|
style={{
|
|
backgroundColor: pillBgColor || color.Surface.Container,
|
|
border: pillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
|
padding: `${toRem(6)} ${toRem(10)}`,
|
|
borderRadius: toRem(16),
|
|
maxWidth: toRem(250),
|
|
}}
|
|
>
|
|
<Text
|
|
size="T300"
|
|
className={BreakWord}
|
|
style={{
|
|
color: pillBgColor ? getContrastingTextColor(pillBgColor) : undefined
|
|
}}
|
|
>
|
|
{presence.status}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Chips Row */}
|
|
<Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
|
|
{server && <ServerChip server={server} borderColor={pillBgColor} />}
|
|
<ShareChip userId={userId} borderColor={pillBgColor} />
|
|
{creator ? <CreatorChip borderColor={pillBgColor} /> : <PowerChip userId={userId} borderColor={pillBgColor} />}
|
|
</Box>
|
|
|
|
{/* Message Button */}
|
|
{userId !== myUserId && (
|
|
<Button
|
|
size="300"
|
|
variant="Primary"
|
|
fill="Solid"
|
|
radii="300"
|
|
before={<Icon size="50" src={Icons.Message} filled />}
|
|
onClick={handleMessage}
|
|
>
|
|
<Text size="B300">Message</Text>
|
|
</Button>
|
|
)}
|
|
|
|
{/* Additional Chips if needed */}
|
|
{userId !== myUserId && (
|
|
<Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
|
|
<MutualRoomsChip userId={userId} borderColor={pillBgColor} />
|
|
<OptionsChip userId={userId} borderColor={pillBgColor} />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
{hasBottomContent && <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
|
|
{ignored && <IgnoredUserAlert />}
|
|
{member && membership === Membership.Ban && (
|
|
<UserBanAlert
|
|
userId={userId}
|
|
reason={member.events.member?.getContent().reason}
|
|
canUnban={canUnban}
|
|
bannedBy={member.events.member?.getSender()}
|
|
ts={member.events.member?.getTs()}
|
|
/>
|
|
)}
|
|
{member &&
|
|
membership === Membership.Leave &&
|
|
member.events.member &&
|
|
member.events.member.getSender() !== userId && (
|
|
<UserKickAlert
|
|
reason={member.events.member?.getContent().reason}
|
|
kickedBy={member.events.member?.getSender()}
|
|
ts={member.events.member?.getTs()}
|
|
/>
|
|
)}
|
|
{member && membership === Membership.Invite && (
|
|
<UserInviteAlert
|
|
userId={userId}
|
|
reason={member.events.member?.getContent().reason}
|
|
canKick={canKickUser}
|
|
invitedBy={member.events.member?.getSender()}
|
|
ts={member.events.member?.getTs()}
|
|
/>
|
|
)}
|
|
<UserModeration
|
|
userId={userId}
|
|
canInvite={canInvite && membership === Membership.Leave}
|
|
canKick={canKickUser && membership === Membership.Join}
|
|
canBan={canBanUser && membership !== Membership.Ban}
|
|
/>
|
|
</Box>}
|
|
</Box>
|
|
);
|
|
}
|