Change username color in chat with power level color (#2282)

* add active theme context

* add chroma js library

* add hook for accessible tag color

* disable reply user color - temporary

* render user color based on tag in room timeline

* remove default tag icons

* move accessible color function to plugins

* render user power color in reply

* increase username weight in timeline

* add default color for member power level tag

* show red slash in power color badge with no color

* show power level color in room input reply

* show power level username color in notifications

* show power level color in notification reply

* show power level color in message search

* render power level color in room pin menu

* add toggle for legacy username colors

* drop over saturation from member default color

* change border color of power color badge

* show legacy username color in direct rooms

src/app/features/room/message/Message.tsx

@@ -44,8 +44,8 @@ import {
   ModernLayout,
   Time,
   Username,
+  UsernameBold,
 } from '../../../components/message';
-import colorMXID from '../../../../util/colorMXID';
 import {
   canEditEvent,
   getEventEdits,
@@ -76,6 +76,9 @@ import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
 import { StateEvent } from '../../../../types/matrix/room';
+import { getTagIconSrc, PowerLevelTag } from '../../../hooks/usePowerLevelTags';
+import { PowerIcon } from '../../../components/power';
+import colorMXID from '../../../../util/colorMXID';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -672,6 +675,9 @@ export type MessageProps = {
   reply?: ReactNode;
   reactions?: ReactNode;
   hideReadReceipts?: boolean;
+  powerLevelTag?: PowerLevelTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
 };
 export const Message = as<'div', MessageProps>(
   (
@@ -697,6 +703,9 @@ export const Message = as<'div', MessageProps>(
       reply,
       reactions,
       hideReadReceipts,
+      powerLevelTag,
+      accessibleTagColors,
+      legacyUsernameColor,
       children,
       ...props
     },
@@ -715,6 +724,15 @@ export const Message = as<'div', MessageProps>(
       getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
     const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
 
+    const tagColor = powerLevelTag?.color
+      ? accessibleTagColors?.get(powerLevelTag.color)
+      : undefined;
+    const tagIconSrc = powerLevelTag?.icon
+      ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
+      : undefined;
+
+    const usernameColor = legacyUsernameColor ? colorMXID(senderId) : tagColor;
+
     const headerJSX = !collapse && (
       <Box
         gap="300"
@@ -723,17 +741,24 @@ export const Message = as<'div', MessageProps>(
         alignItems="Baseline"
         grow="Yes"
       >
-        <Username
-          as="button"
-          style={{ color: colorMXID(senderId) }}
-          data-user-id={senderId}
-          onContextMenu={onUserClick}
-          onClick={onUsernameClick}
-        >
-          <Text as="span" size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'} truncate>
-            <b>{senderDisplayName}</b>
-          </Text>
-        </Username>
+        <Box alignItems="Center" gap="200">
+          <Username
+            as="button"
+            style={{ color: usernameColor }}
+            data-user-id={senderId}
+            onContextMenu={onUserClick}
+            onClick={onUsernameClick}
+          >
+            <Text
+              as="span"
+              size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'}
+              truncate
+            >
+              <UsernameBold>{senderDisplayName}</UsernameBold>
+            </Text>
+          </Username>
+          {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+        </Box>
         <Box shrink="No" gap="100">
           {messageLayout === MessageLayout.Modern && hover && (
             <>