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

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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 
-        <Box direction="Column" gap="400">
+        direction="Column" 
-          <Box gap="400" alignItems="Start">
+        gap="200" 
-            <UserHeroName
+        alignItems="Center"
-              displayName={displayName}
+        style={{ 
-              userId={userId}
+          padding: config.space.S400, 
-              avatarMxc={avatarMxc}
+          paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
-            />
+          marginTop: toRem(-36),
-            {userId !== myUserId && (
+          background: gradientStyle,
-              <Box shrink="No">
+          textAlign: 'center'
-                <Button
+        }}
-                  size="300"
+      >
-                  variant="Primary"
+        {/* Display Name */}
-                  fill="Solid"
+        <Text
-                  radii="300"
+          size="H4"
-                  before={<Icon size="50" src={Icons.Message} filled />}
+          className={classNames(BreakWord, LineClamp3)}
-                  onClick={handleMessage}
+          style={{ color: getMemberDisplayName(room, userId) !== userId ? (profileStyle.avatarBorderColor || colorMXID(userId)) : undefined }}
-                >
+        >
-                  <Text size="B300">Message</Text>
+          {getMemberDisplayName(room, userId)}
-                </Button>
+        </Text>
-              </Box>
+        
-            )}
+        {/* Username */}
-          </Box>
+        <Text
-          <Box alignItems="Center" gap="200" wrap="Wrap">
+          size="T200"
-            {server && <ServerChip server={server} />}
+          className={BreakWord}
-            <ShareChip userId={userId} />
+          style={{ color: profileStyle.avatarBorderColor || colorMXID(userId), opacity: 0.8 }}
-            {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
+        >
-            {userId !== myUserId && <MutualRoomsChip userId={userId} />}
+          {userId}
-            {userId !== myUserId && <OptionsChip userId={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>
   );
 }

src/app/components/user-profile/styles.css.ts

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

src/app/features/settings/account/Profile.tsx

@@ -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,
+              height: toRem(29),
-              paddingRight: config.space.S400,
-              paddingBottom: config.space.S400,
-              background: previewGradient,
             }}
           >
-            {/* 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 */}
+          {/* Profile Info Section - matches UserRoomProfile gradient section */}
-            <Box
+          <Box
-              style={{
+            direction="Column"
-                paddingTop: toRem(40),
+            gap="400"
-              }}
+            alignItems="Center"
-            >
+            style={{
-              <Box grow="Yes" direction="Column" gap="100">
+              padding: config.space.S400,
-                <Box alignItems="Center" gap="200" wrap="Wrap">
+              paddingTop: `calc(${config.space.S400} + ${toRem(36)})`,
-                  {/* Color Picker - left of name */}
+              marginTop: toRem(-36),
-                  <HexColorPickerPopOut
+              background: previewGradient,
-                    picker={
+              textAlign: 'center',
-                      <Box direction="Column" gap="200">
+            }}
-                        <HexColorPicker color={localColor} onChange={setLocalColor} />
+          >
-                        <Box gap="100" alignItems="Center">
+            {/* Display Name with Color Picker */}
-                          <Input
+            <Box alignItems="Center" gap="200" justifyContent="Center">
-                            size="300"
+              <HexColorPickerPopOut
-                            variant="Secondary"
+                picker={
-                            style={{ width: toRem(100) }}
+                  <Box direction="Column" gap="200">
-                            value={localColor}
+                    <HexColorPicker color={localColor} onChange={setLocalColor} />
-                            onChange={(e) => {
+                    <Box gap="100" alignItems="Center">
-                              setLocalColor(e.target.value);
+                      <Input
-                              setColorError(undefined);
+                        size="300"
-                            }}
+                        variant="Secondary"
-                          />
+                        style={{ width: toRem(100) }}
-                          <Button
+                        value={localColor}
-                            size="300"
+                        onChange={(e) => {
-                            variant="Primary"
+                          setLocalColor(e.target.value);
-                            fill="Solid"
+                          setColorError(undefined);
-                            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,
                         }}
                       />
+                      <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>
+                  </Box>
-                  {isEditingName ? (
+                }
-                    <Input
+                onRemove={userColor ? handleColorRemove : undefined}
-                      autoFocus
+              >
-                      value={editedName}
+                {(onOpen) => (
-                      onChange={(e) => setEditedName(e.target.value)}
+                  <Box
-                      onKeyDown={handleNameKeyDown}
+                    as="button"
-                      onBlur={handleNameSave}
+                    onClick={onOpen}
-                      variant="Background"
+                    disabled={savingColor}
-                      size="400"
+                    style={{
-                      disabled={savingName}
+                      width: toRem(24),
-                      style={{
+                      height: toRem(24),
-                        fontSize: 'var(--token.font-size.H400)',
+                      borderRadius: toRem(6),
-                        fontWeight: 'var(--token.font-weight.H400)',
+                      backgroundColor: userColor ?? localColor,
-                        padding: `${toRem(4)} ${toRem(8)}`,
+                      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',
+                        position: 'absolute',
-                        background: 'none',
+                        top: 0,
-                        cursor: 'pointer',
+                        right: toRem(-32),
-                        padding: `${toRem(4)} ${toRem(8)}`,
+                        backgroundColor: color.Surface.Container,
-                        margin: `${toRem(-4)} ${toRem(-8)}`,
+                        borderRadius: toRem(20),
-                        position: 'relative',
+                        padding: toRem(6),
-                        textAlign: 'left',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        pointerEvents: 'none',
+                        border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                       }}
                     >
-                      <Text
+                      <Icon size="50" src={Icons.Pencil} />
-                        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>
-                      )}
                     </Box>
                   )}
                 </Box>
-                <Box alignItems="Center" gap="200" wrap="Wrap">
+              )}
-                  <Text
+            </Box>
-                    size="T200"
+            
-                    className={BreakWord}
+            {/* Username */}
-                    title={userId}
+            <Text
-                    style={{ color: userColor || colorMXID(userId) }}
+              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

src/app/utils/common.ts

@@ -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';
+};