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