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

src/app/components/user-profile/UserRoomProfile.tsx

@@ -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>
   );
 }