feat: Add detailed logging for user profile components and image metadata extraction; enhance color handling utilities

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

@@ -26,7 +26,8 @@ import { DirectCreateSearchParams } from '../../pages/paths';
 import { getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../utils/common';
 import classNames from 'classnames';
 import { BreakWord, LineClamp3 } from '../../styles/Text.css';
-import colorMXID from '../../../util/colorMXID';
+import colorMXID, { getColorMXIDValue } from '../../../util/colorMXID';
+import { useOtherUserColor } from '../../hooks/useUserColor';
 
 type UserRoomProfileProps = {
   userId: string;
@@ -64,6 +65,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
 
   const presence = useUserPresence(userId);
   const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
+  const userColor = useOtherUserColor(userId, avatarMxc);
 
   // Build gradient CSS if configured
   const gradientStyle = profileStyle.gradient
@@ -87,9 +89,25 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
     (canKickUser && membership === Membership.Join) ||
     (canBanUser && membership !== Membership.Ban);
 
-  const profileColor = profileStyle.avatarBorderColor ? stripAlphaFromColor(profileStyle.avatarBorderColor) : colorMXID(userId);
+  // Use userColor for text, or fall back to colorMXID
+  const profileColor = userColor ? userColor : getColorMXIDValue(userId);
   const profileTextShadow = `0 1px 4px ${getTextShadowColor(profileColor)}`;
-  const pillBgColor = profileStyle.avatarBorderColor ? stripAlphaFromColor(profileStyle.avatarBorderColor) : undefined;
+  
+  // 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">