litruv/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add border color customization for user profile chips and improve text contrast

Browse Source
This commit is contained in:
Litruv
2026-03-12 22:18:05 +11:00
parent 834de012b4
commit 67f3ae4d34
8 changed files with 471 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/user-profile/CreatorChip.tsx
View File

@@ -14,8 +14,9 @@ import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
import { SpaceSettingsPage } from '../../state/spaceSettings';
import { RoomSettingsPage } from '../../state/roomSettings';
import { getContrastingTextColor } from '../../utils/common';
export function CreatorChip() {
export function CreatorChip({ borderColor }: { borderColor?: string }) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const room = useRoom();
@@ -91,8 +92,13 @@ export function CreatorChip() {
after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
<Text size="B300" truncate>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{tag.name}
</Text>
</Chip>

10
src/app/components/user-profile/PowerChip.tsx
View File

@@ -43,6 +43,7 @@ import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberP
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
import { getContrastingTextColor } from '../../utils/common';
type SelfDemoteAlertProps = {
power: number;
@@ -144,7 +145,7 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
);
}
export function PowerChip({ userId }: { userId: string }) {
export function PowerChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
const mx = useMatrixClient();
const room = useRoom();
const space = useSpaceOptionally();
@@ -332,8 +333,13 @@ export function PowerChip({ userId }: { userId: string }) {
after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
<Text size="B300" truncate>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{tag.name}
</Text>
</Chip>

44
src/app/components/user-profile/UserChips.tsx
View File

@@ -42,8 +42,9 @@ import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
import { CutoutCard } from '../cutout-card';
import { SettingTile } from '../setting-tile';
import { getContrastingTextColor } from '../../utils/common';
export function ServerChip({ server }: { server: string }) {
export function ServerChip({ server, borderColor }: { server: string; borderColor?: string }) {
const mx = useMatrixClient();
const myServer = getMxIdServer(mx.getSafeUserId());
const navigate = useNavigate();
@@ -134,8 +135,13 @@ export function ServerChip({ server }: { server: string }) {
}
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
<Text size="B300" truncate>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{server}
</Text>
</Chip>
@@ -143,7 +149,7 @@ export function ServerChip({ server }: { server: string }) {
);
}
export function ShareChip({ userId }: { userId: string }) {
export function ShareChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
const [cords, setCords] = useState<RectCords>();
const [copied, setCopied] = useTimeoutToggle();
@@ -216,8 +222,13 @@ export function ShareChip({ userId }: { userId: string }) {
}
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
<Text size="B300" truncate>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
Share
</Text>
</Chip>
@@ -231,7 +242,7 @@ type MutualRoomsData = {
directs: Room[];
};
export function MutualRoomsChip({ userId }: { userId: string }) {
export function MutualRoomsChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
const mx = useMatrixClient();
const mutualRoomSupported = useMutualRoomsSupport();
const mutualRoomsState = useMutualRooms(userId);
@@ -409,8 +420,13 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
}
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
<Text size="B300">
<Text size="B300" style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{mutualRoomsState.status === AsyncStatus.Success &&
`${mutualRoomsState.data.length} Mutual Rooms`}
{mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
@@ -437,7 +453,7 @@ export function IgnoredUserAlert() {
);
}
export function OptionsChip({ userId }: { userId: string }) {
export function OptionsChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
const mx = useMatrixClient();
const [cords, setCords] = useState<RectCords>();
@@ -503,11 +519,21 @@ export function OptionsChip({ userId }: { userId: string }) {
</FocusTrap>
}
>
<Chip variant="SurfaceVariant" radii="Pill" onClick={open} aria-pressed={!!cords}>
<Chip
variant="SurfaceVariant"
radii="Pill"
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
{ignoring ? (
<Spinner variant="Secondary" size="50" />
) : (
<Icon size="50" src={Icons.HorizontalDots} />
<Icon size="50" src={Icons.HorizontalDots} style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined} />
)}
</Chip>
</PopOut>

27
src/app/components/user-profile/UserHero.tsx
View File

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import {
Avatar,
Box,
color,
Icon,
Icons,
Modal,
@@ -38,11 +37,6 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
const bannerUrl = useOtherUserBanner(userId, avatarMxc); // Now returns blob URL directly
const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
// Build gradient CSS if configured
const gradientStyle = profileStyle.gradient
? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
: undefined;
return (
<Box
direction="Column"
@@ -63,10 +57,9 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
)
)}
</div>
<div className={css.UserHeroAvatarContainer} style={gradientStyle ? { background: gradientStyle } : undefined}>
<div className={css.UserHeroAvatarContainer}>
<AvatarPresence
className={css.UserAvatarContainer}
style={gradientStyle ? { background: gradientStyle } : undefined}
badge={
presence && <PresenceBadge presence={presence.presence} status={presence.status} />
}
@@ -90,23 +83,6 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
/>
</Avatar>
</AvatarPresence>
{presence?.status && (
<Box
className={css.UserStatusBubble}
style={{
backgroundColor: color.Surface.Container,
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
padding: `${toRem(6)} ${toRem(10)}`,
borderRadius: toRem(16),
maxWidth: toRem(250),
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
}}
>
<Text size="T300" className={BreakWord}>
{presence.status}
</Text>
</Box>
)}
{viewAvatar && (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
@@ -150,6 +126,7 @@ export function UserHeroName({ displayName, userId, avatarMxc }: UserHeroNamePro
size="H4"
className={classNames(BreakWord, LineClamp3)}
title={displayName ?? username}
style={{ color: userColor || colorMXID(userId) }}
>
{displayName ?? username ?? userId}
</Text>

134
src/app/components/user-profile/UserRoomProfile.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Button, config, Icon, Icons, Text } from 'folds';
import { Box, Button, color, config, Icon, Icons, Text, toRem } from 'folds';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { UserHero, UserHeroName } from './UserHero';
@@ -9,6 +9,7 @@ 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';
@@ -22,6 +23,10 @@ import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
import { CreatorChip } from './CreatorChip';
import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
import { DirectCreateSearchParams } from '../../pages/paths';
import { getContrastingTextColor } from '../../utils/common';
import classNames from 'classnames';
import { BreakWord, LineClamp3 } from '../../styles/Text.css';
import colorMXID from '../../../util/colorMXID';
type UserRoomProfileProps = {
userId: string;
@@ -58,6 +63,12 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
const presence = useUserPresence(userId);
const profileStyle = useOtherUserProfileStyle(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();
@@ -67,6 +78,15 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
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);
return (
<Box direction="Column">
<UserHero
@@ -75,37 +95,89 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
avatarMxc={avatarMxc}
presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
/>
<Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
<Box direction="Column" gap="400">
<Box gap="400" alignItems="Start">
<UserHeroName
displayName={displayName}
userId={userId}
avatarMxc={avatarMxc}
/>
{userId !== myUserId && (
<Box shrink="No">
<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>
</Box>
)}
</Box>
<Box alignItems="Center" gap="200" wrap="Wrap">
{server && <ServerChip server={server} />}
<ShareChip userId={userId} />
{creator ? <CreatorChip /> : <PowerChip userId={userId} />}
{userId !== myUserId && <MutualRoomsChip userId={userId} />}
{userId !== myUserId && <OptionsChip userId={userId} />}
<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 ? (profileStyle.avatarBorderColor || colorMXID(userId)) : undefined }}
>
{getMemberDisplayName(room, userId)}
</Text>
{/* Username */}
<Text
size="T200"
className={BreakWord}
style={{ color: profileStyle.avatarBorderColor || colorMXID(userId), opacity: 0.8 }}
>
{userId}
</Text>
{/* Status Pill */}
{presence?.status && (
<Box
style={{
backgroundColor: profileStyle.avatarBorderColor || color.Surface.Container,
border: profileStyle.avatarBorderColor ? '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: profileStyle.avatarBorderColor ? getContrastingTextColor(profileStyle.avatarBorderColor) : undefined
}}
>
{presence.status}
</Text>
</Box>
)}
{/* Chips Row */}
<Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
{server && <ServerChip server={server} borderColor={profileStyle.avatarBorderColor} />}
<ShareChip userId={userId} borderColor={profileStyle.avatarBorderColor} />
{creator ? <CreatorChip borderColor={profileStyle.avatarBorderColor} /> : <PowerChip userId={userId} borderColor={profileStyle.avatarBorderColor} />}
</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={profileStyle.avatarBorderColor} />
<OptionsChip userId={userId} borderColor={profileStyle.avatarBorderColor} />
</Box>
)}
</Box>
{hasBottomContent && <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
{ignored && <IgnoredUserAlert />}
{member && membership === Membership.Ban && (
<UserBanAlert
@@ -141,7 +213,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
canKick={canKickUser && membership === Membership.Join}
canBan={canBanUser && membership !== Membership.Ban}
/>
</Box>
</Box>}
</Box>
);
}

9
src/app/components/user-profile/styles.css.ts
View File

@@ -16,7 +16,7 @@ export const UserHero = style({
export const UserHeroCoverContainer = style({
position: 'relative',
height: toRem(96),
height: toRem(140),
overflow: 'hidden',
});
export const UserHeroCover = style({
@@ -39,15 +39,16 @@ export const UserHeroAvatarContainer = style({
});
export const UserAvatarContainer = style({
position: 'absolute',
left: config.space.S400,
left: '50%',
top: 0,
transform: 'translateY(-50%)',
transform: 'translate(-50%, -50%)',
backgroundColor: color.Surface.Container,
});
export const UserStatusBubble = style({
position: 'absolute',
left: `calc(${config.space.S400} + ${toRem(64)} + ${config.space.S200})`,
left: '50%',
transform: 'translateX(-50%)',
bottom: toRem(-8),
zIndex: 2,
});

520
src/app/features/settings/account/Profile.tsx
View File

@@ -37,7 +37,7 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
import { UserAvatar } from '../../../components/user-avatar';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { useAuthenticatedMediaUrl } from '../../../hooks/useAuthenticatedMediaUrl';
import { nameInitials } from '../../../utils/common';
import { nameInitials, getContrastingTextColor } from '../../../utils/common';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { useFilePicker } from '../../../hooks/useFilePicker';
import { useObjectURL } from '../../../hooks/useObjectURL';
@@ -570,7 +570,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
style={{
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
borderRadius: toRem(8),
width: '100%',
width: toRem(340),
overflow: 'hidden',
position: 'relative',
}}
@@ -579,7 +579,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
<Box
style={{
position: 'relative',
aspectRatio: '460 / 96',
height: toRem(140),
width: '100%',
}}
>
@@ -682,121 +682,25 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
</Box>
)}
</Box>
{/* Status Bubble - sibling to banner button, NOT inside it */}
<Box
onMouseEnter={() => setHoveredArea('status')}
onMouseLeave={() => setHoveredArea(null)}
style={{
position: 'absolute',
left: `calc(${config.space.S400} + ${toRem(64)} + ${config.space.S300})`,
bottom: toRem(8),
zIndex: 2,
backgroundColor: color.Surface.Container,
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
padding: `${toRem(4)} ${toRem(8)}`,
borderRadius: toRem(12),
maxWidth: toRem(200),
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
}}
>
{isEditingStatus ? (
<Input
style={{ width: toRem(150), minWidth: toRem(100) }}
variant="Background"
size="300"
autoFocus
value={editedStatus}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setEditedStatus(e.target.value)
}
onKeyDown={handleStatusKeyDown}
onBlur={handleStatusSave}
disabled={savingStatus}
placeholder="Set a custom status..."
/>
) : (
<Box
style={{
display: 'flex',
alignItems: 'center',
gap: toRem(4),
}}
>
<Box
as="button"
onClick={() => {
setEditedStatus(presence?.status || '');
setIsEditingStatus(true);
}}
style={{
background: 'none',
border: 'none',
padding: 0,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
>
<Text
size="T200"
className={BreakWord}
style={{
opacity: presence?.status ? 1 : 0.5,
fontStyle: presence?.status ? 'normal' : 'italic',
}}
>
{presence?.status || 'Click to set a custom status...'}
</Text>
</Box>
{presence?.status && hoveredArea === 'status' && (
<>
<Icon size="50" src={Icons.Pencil} />
<Box
as="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleRemoveStatus();
}}
style={{
backgroundColor: color.Critical.Main,
borderRadius: toRem(8),
padding: toRem(2),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
border: 'none',
}}
>
<Icon size="50" src={Icons.Cross} fill="white" />
</Box>
</>
)}
</Box>
)}
</Box>
</Box>
{/* Avatar and Name Section */}
{/* Avatar Container - matches UserHeroAvatarContainer height */}
<Box
style={{
position: 'relative',
paddingLeft: config.space.S400,
paddingRight: config.space.S400,
paddingBottom: config.space.S400,
background: previewGradient,
height: toRem(29),
}}
>
{/* Avatar */}
{/* Avatar - centered */}
<Box
style={{
position: 'absolute',
left: config.space.S400,
left: '50%',
top: 0,
transform: 'translateY(-50%)',
transform: 'translate(-50%, -50%)',
display: 'flex',
alignItems: 'flex-end',
flexDirection: 'column',
alignItems: 'center',
gap: toRem(8),
}}
onMouseEnter={() => setHoveredArea('avatar')}
@@ -806,7 +710,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
as="button"
onClick={handleAvatarClick}
style={{
background: previewGradient || color.Surface.Container,
backgroundColor: color.Surface.Container,
border: 'none',
padding: 0,
cursor: 'pointer',
@@ -849,6 +753,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
padding: `${toRem(4)} ${toRem(8)}`,
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
marginTop: toRem(4),
}}
>
<Box
@@ -892,146 +797,299 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
</Box>
)}
</Box>
</Box>
{/* Name Section - offset for avatar */}
<Box
style={{
paddingTop: toRem(40),
}}
>
<Box grow="Yes" direction="Column" gap="100">
<Box alignItems="Center" gap="200" wrap="Wrap">
{/* Color Picker - left of name */}
<HexColorPickerPopOut
picker={
<Box direction="Column" gap="200">
<HexColorPicker color={localColor} onChange={setLocalColor} />
<Box gap="100" alignItems="Center">
<Input
size="300"
variant="Secondary"
style={{ width: toRem(100) }}
value={localColor}
onChange={(e) => {
setLocalColor(e.target.value);
setColorError(undefined);
}}
/>
<Button
size="300"
variant="Primary"
fill="Solid"
radii="300"
onClick={handleColorSave}
disabled={savingColor}
>
<Text size="B300">{savingColor ? 'Saving...' : 'Save'}</Text>
</Button>
</Box>
{colorError && (
<Text size="T200" style={{ color: color.Critical.Main }}>
{colorError}
</Text>
)}
</Box>
}
onRemove={userColor ? handleColorRemove : undefined}
>
{(onOpen) => (
<Box
as="button"
onClick={onOpen}
disabled={savingColor}
style={{
width: toRem(24),
height: toRem(24),
borderRadius: toRem(6),
backgroundColor: userColor ?? localColor,
border: 'none',
cursor: 'pointer',
flexShrink: 0,
{/* Profile Info Section - matches UserRoomProfile gradient section */}
<Box
direction="Column"
gap="400"
alignItems="Center"
style={{
padding: config.space.S400,
paddingTop: `calc(${config.space.S400} + ${toRem(36)})`,
marginTop: toRem(-36),
background: previewGradient,
textAlign: 'center',
}}
>
{/* Display Name with Color Picker */}
<Box alignItems="Center" gap="200" justifyContent="Center">
<HexColorPickerPopOut
picker={
<Box direction="Column" gap="200">
<HexColorPicker color={localColor} onChange={setLocalColor} />
<Box gap="100" alignItems="Center">
<Input
size="300"
variant="Secondary"
style={{ width: toRem(100) }}
value={localColor}
onChange={(e) => {
setLocalColor(e.target.value);
setColorError(undefined);
}}
/>
<Button
size="300"
variant="Primary"
fill="Solid"
radii="300"
onClick={handleColorSave}
disabled={savingColor}
>
<Text size="B300">{savingColor ? 'Saving...' : 'Save'}</Text>
</Button>
</Box>
{colorError && (
<Text size="T200" style={{ color: color.Critical.Main }}>
{colorError}
</Text>
)}
</HexColorPickerPopOut>
{isEditingName ? (
<Input
autoFocus
value={editedName}
onChange={(e) => setEditedName(e.target.value)}
onKeyDown={handleNameKeyDown}
onBlur={handleNameSave}
variant="Background"
size="400"
disabled={savingName}
style={{
fontSize: 'var(--token.font-size.H400)',
fontWeight: 'var(--token.font-weight.H400)',
padding: `${toRem(4)} ${toRem(8)}`,
}}
/>
) : (
</Box>
}
onRemove={userColor ? handleColorRemove : undefined}
>
{(onOpen) => (
<Box
as="button"
onClick={onOpen}
disabled={savingColor}
style={{
width: toRem(24),
height: toRem(24),
borderRadius: toRem(6),
backgroundColor: userColor ?? localColor,
border: 'none',
cursor: 'pointer',
flexShrink: 0,
}}
/>
)}
</HexColorPickerPopOut>
{isEditingName ? (
<Input
autoFocus
value={editedName}
onChange={(e) => setEditedName(e.target.value)}
onKeyDown={handleNameKeyDown}
onBlur={handleNameSave}
variant="Background"
size="400"
disabled={savingName}
style={{
fontSize: 'var(--token.font-size.H400)',
fontWeight: 'var(--token.font-weight.H400)',
padding: `${toRem(4)} ${toRem(8)}`,
textAlign: 'center',
}}
/>
) : (
<Box
as="button"
onClick={() => {
setEditedName(profile.displayName || getMxIdLocalPart(userId) || userId);
setIsEditingName(true);
}}
onMouseEnter={() => setHoveredArea('name')}
onMouseLeave={() => setHoveredArea(null)}
style={{
border: 'none',
background: 'none',
cursor: 'pointer',
padding: `${toRem(4)} ${toRem(8)}`,
margin: `${toRem(-4)} ${toRem(-8)}`,
position: 'relative',
}}
>
<Text
size="H4"
className={classNames(BreakWord, LineClamp3)}
title={profile.displayName || getMxIdLocalPart(userId)}
style={{ color: userColor || colorMXID(userId) }}
>
{profile.displayName || getMxIdLocalPart(userId) || userId}
</Text>
{hoveredArea === 'name' && (
<Box
as="button"
onClick={() => {
setEditedName(profile.displayName || getMxIdLocalPart(userId) || userId);
setIsEditingName(true);
}}
onMouseEnter={() => setHoveredArea('name')}
onMouseLeave={() => setHoveredArea(null)}
style={{
border: 'none',
background: 'none',
cursor: 'pointer',
padding: `${toRem(4)} ${toRem(8)}`,
margin: `${toRem(-4)} ${toRem(-8)}`,
position: 'relative',
textAlign: 'left',
position: 'absolute',
top: 0,
right: toRem(-32),
backgroundColor: color.Surface.Container,
borderRadius: toRem(20),
padding: toRem(6),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
pointerEvents: 'none',
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
}}
>
<Text
size="H4"
className={classNames(BreakWord, LineClamp3)}
title={profile.displayName || getMxIdLocalPart(userId)}
>
{profile.displayName || getMxIdLocalPart(userId) || userId}
</Text>
{hoveredArea === 'name' && (
<Box
style={{
position: 'absolute',
top: 0,
right: toRem(-32),
backgroundColor: color.Surface.Container,
borderRadius: toRem(20),
padding: toRem(6),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
pointerEvents: 'none',
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
}}
>
<Icon size="50" src={Icons.Pencil} />
</Box>
)}
<Icon size="50" src={Icons.Pencil} />
</Box>
)}
</Box>
<Box alignItems="Center" gap="200" wrap="Wrap">
<Text
size="T200"
className={BreakWord}
title={userId}
style={{ color: userColor || colorMXID(userId) }}
)}
</Box>
{/* Username */}
<Text
size="T200"
className={BreakWord}
title={userId}
style={{ color: userColor || colorMXID(userId), opacity: 0.8 }}
>
{userId}
</Text>
{/* Status Pill - Editable */}
<Box
onMouseEnter={() => setHoveredArea('status')}
onMouseLeave={() => setHoveredArea(null)}
style={{
backgroundColor: previewBorderColor || color.Surface.Container,
border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
padding: `${toRem(6)} ${toRem(10)}`,
borderRadius: toRem(16),
maxWidth: toRem(250),
cursor: 'pointer',
}}
>
{isEditingStatus ? (
<Input
style={{ width: toRem(150), minWidth: toRem(100), textAlign: 'center' }}
variant="Background"
size="300"
autoFocus
value={editedStatus}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setEditedStatus(e.target.value)
}
onKeyDown={handleStatusKeyDown}
onBlur={handleStatusSave}
disabled={savingStatus}
placeholder="Set a custom status..."
/>
) : (
<Box
style={{
display: 'flex',
alignItems: 'center',
gap: toRem(4),
justifyContent: 'center',
}}
>
<Box
as="button"
onClick={() => {
setEditedStatus(presence?.status || '');
setIsEditingStatus(true);
}}
style={{
background: 'none',
border: 'none',
padding: 0,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
>
{userId}
</Text>
<Text
size="T300"
className={BreakWord}
style={{
opacity: presence?.status ? 1 : 0.5,
fontStyle: presence?.status ? 'normal' : 'italic',
color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
}}
>
{presence?.status || 'Click to set a custom status...'}</Text>
</Box>
{presence?.status && hoveredArea === 'status' && (
<>
<Icon size="50" src={Icons.Pencil} style={{ color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined }} />
<Box
as="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleRemoveStatus();
}}
style={{
backgroundColor: color.Critical.Main,
borderRadius: toRem(8),
padding: toRem(2),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
border: 'none',
}}
>
<Icon size="50" src={Icons.Cross} fill="white" />
</Box>
</>
)}
</Box>
)}
</Box>
{/* Chips Row - Placeholder chips */}
<Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
<Box
style={{
backgroundColor: previewBorderColor || color.Surface.Container,
border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
padding: `${toRem(4)} ${toRem(8)}`,
borderRadius: toRem(16),
}}
>
<Text
size="B300"
style={{
color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
}}
>
ruv.wtf
</Text>
</Box>
<Box
style={{
backgroundColor: previewBorderColor || color.Surface.Container,
border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
padding: `${toRem(4)} ${toRem(8)}`,
borderRadius: toRem(16),
}}
>
<Text
size="B300"
style={{
color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
}}
>
Share
</Text>
</Box>
<Box
style={{
backgroundColor: previewBorderColor || color.Surface.Container,
border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
padding: `${toRem(4)} ${toRem(8)}`,
borderRadius: toRem(16),
}}
>
<Text
size="B300"
style={{
color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
}}
>
Admin
</Text>
</Box>
</Box>
</Box>
</Box>
</Box>
{/* Profile Style Settings */}
<Box

21
src/app/utils/common.ts
View File

@@ -138,3 +138,24 @@ export const splitWithSpace = (content: string): string[] => {
if (trimmedContent === '') return [];
return trimmedContent.split(' ');
};
/**
* Calculate contrasting text color (black or white) for a given background color
* @param bgColor - Hex color string (e.g., '#RRGGBB' or '#RRGGBBAA')
* @returns '#000000' for light backgrounds, '#FFFFFF' for dark backgrounds
*/
export const getContrastingTextColor = (bgColor: string): string => {
// Remove # if present
const hex = bgColor.replace('#', '');
// Parse RGB values (ignore alpha if present)
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// Calculate relative luminance using WCAG formula
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
// Return black for light backgrounds, white for dark backgrounds
return luminance > 0.5 ? '#000000' : '#FFFFFF';
};