Add MSC4522 username colors, release notes dialog, and profile layout fixes.

Replace legacy profile style metadata with MSC4133 profile fields, add in-app update notes, tighten account profile name spacing, and wire desktop media save helpers through the client.

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

@@ -14,7 +14,6 @@ import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
 import { useOtherUserColor } from '../../hooks/useUserColor';
 import { useOtherUserBanner } from '../../hooks/useUserBanner';
-import { useOtherUserProfileStyle } from '../../hooks/useUserProfileStyle';
 
 type UserHeroProps = {
   userId: string;
@@ -24,15 +23,7 @@ type UserHeroProps = {
 };
 export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroProps) {
   const [viewAvatar, setViewAvatar] = useState<string>();
-  const bannerUrl = useOtherUserBanner(userId, avatarMxc); // Now returns blob URL directly
-  const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
-
-  console.log('[UserHero]', {
-    userId,
-    avatarMxc,
-    bannerUrl,
-    profileStyle,
-  });
+  const bannerUrl = useOtherUserBanner(userId);
 
   return (
     <Box
@@ -57,8 +48,6 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
       <div className={css.UserHeroAvatarContainer}>
         <AvatarPresence
           className={css.UserAvatarContainer}
-          style={profileStyle.avatarBorderColor ? { backgroundColor: profileStyle.avatarBorderColor } : undefined}
-          badgeBackgroundColor={profileStyle.avatarBorderColor}
           badge={
             presence && <PresenceBadge presence={presence.presence} status={presence.status} />
           }
@@ -71,10 +60,6 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
             style={{
               width: toRem(72),
               height: toRem(72),
-              ...(profileStyle.avatarBorderColor ? {
-                outline: `${toRem(4)} solid ${profileStyle.avatarBorderColor}`,
-                outlineOffset: toRem(-1),
-              } : {}),
             }}
           >
             <UserAvatar
@@ -114,16 +99,9 @@ type UserHeroNameProps = {
   userId: string;
   avatarMxc?: string;
 };
-export function UserHeroName({ displayName, userId, avatarMxc }: UserHeroNameProps) {
+export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
-  const userColor = useOtherUserColor(userId, avatarMxc);
-
-  console.log('[UserHeroName]', {
-    userId,
-    avatarMxc,
-    userColor,
-    fallbackColor: colorMXID(userId),
-  });
+  const userColor = useOtherUserColor(userId);
 
   return (
     <Box grow="Yes" direction="Column" gap="100">

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

@@ -10,7 +10,6 @@ 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';
@@ -24,7 +23,7 @@ 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 { getTextShadowColor } from '../../utils/common';
 import classNames from 'classnames';
 import { BreakWord, LineClamp3 } from '../../styles/Text.css';
 import colorMXID, { getColorMXIDValue } from '../../../util/colorMXID';
@@ -65,13 +64,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   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 userColor = useOtherUserColor(userId);
 
   const handleMessage = () => {
     closeUserRoomProfile();
@@ -93,22 +86,6 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   // 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">
@@ -122,12 +99,11 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         direction="Column" 
         gap="200" 
         alignItems="Center"
-        style={{ 
-          padding: config.space.S400, 
+        style={{
+          padding: config.space.S400,
           paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
           marginTop: toRem(-36),
-          background: gradientStyle,
-          textAlign: 'center'
+          textAlign: 'center',
         }}
       >
         {/* Display Name */}
@@ -152,20 +128,14 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         {presence?.status && (
           <Box
             style={{
-              backgroundColor: pillBgColor || color.Surface.Container,
-              border: pillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+              backgroundColor: color.Surface.Container,
+              border: `${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
-              }}
-            >
+            <Text size="T300" className={BreakWord}>
               {presence.status}
             </Text>
           </Box>
@@ -173,9 +143,9 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         
         {/* 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} />}
+          {server && <ServerChip server={server} />}
+          <ShareChip userId={userId} />
+          {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
         </Box>
         
         {/* Message Button */}
@@ -195,8 +165,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         {/* 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} />
+            <MutualRoomsChip userId={userId} />
+            <OptionsChip userId={userId} />
           </Box>
         )}
       </Box>