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

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

@@ -37,6 +37,13 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
   const bannerUrl = useOtherUserBanner(userId, avatarMxc); // Now returns blob URL directly
   const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
 
+  console.log('[UserHero]', {
+    userId,
+    avatarMxc,
+    bannerUrl,
+    profileStyle,
+  });
+
   return (
     <Box
       direction="Column"
@@ -125,6 +132,13 @@ export function UserHeroName({ displayName, userId, avatarMxc }: UserHeroNamePro
   const username = getMxIdLocalPart(userId);
   const userColor = useOtherUserColor(userId, avatarMxc);
 
+  console.log('[UserHeroName]', {
+    userId,
+    avatarMxc,
+    userColor,
+    fallbackColor: colorMXID(userId),
+  });
+
   return (
     <Box grow="Yes" direction="Column" gap="100">
       <Box alignItems="Baseline" gap="200" wrap="Wrap">