fix: dont show message avatar in message info panels

also show admin crown

ts/components/conversation/message/message-content/MessageAvatar.tsx

@@ -38,10 +38,10 @@ export type MessageAvatarSelectorProps = Pick<
   'sender' | 'isSenderAdmin' | 'lastMessageOfSeries'
 >;
 
-type Props = { messageId: string; hideAvatar: boolean; isPrivate: boolean; isDetailView?: boolean };
+type Props = { messageId: string; isPrivate: boolean };
 
 export const MessageAvatar = (props: Props) => {
-  const { messageId, hideAvatar, isPrivate, isDetailView } = props;
+  const { messageId, isPrivate } = props;
 
   const dispatch = useDispatch();
   const selectedConvoKey = useSelectedConversationKey();
@@ -137,13 +137,9 @@ export const MessageAvatar = (props: Props) => {
   // The styledAvatar, when rendered needs to have a width with margins included of var(--width-avatar-group-msg-list).
   // This is so that the other message is still aligned when the avatar is not rendered (we need to make up for the space used by the avatar, and we use a margin of width-avatar-group-msg-list)
   return (
-    <StyledAvatar
+    <StyledAvatar>
-      style={{
-        visibility: hideAvatar ? 'hidden' : undefined,
-      }}
-    >
       <Avatar size={AvatarSize.S} onAvatarClick={onMessageAvatarClick} pubkey={sender} />
-      {!isDetailView && isSenderAdmin ? <CrownIcon /> : null}
+      {isSenderAdmin ? <CrownIcon /> : null}
     </StyledAvatar>
   );
 };

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -93,7 +93,7 @@ export const MessageContent = (props: Props) => {
 
   const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext);
   const selectedIsPrivate = useSelectedIsPrivate();
-  const hideAvatar = useHideAvatarInMsgList(props.messageId);
+  const hideAvatar = useHideAvatarInMsgList(props.messageId, props.isDetailView);
 
   const [imageBroken, setImageBroken] = useState(false);
 
@@ -164,14 +164,11 @@ export const MessageContent = (props: Props) => {
       title={toolTipTitle}
       msgDirection={direction}
     >
-      <StyledAvatarContainer>
+      {hideAvatar ? null : (
-        <MessageAvatar
+        <StyledAvatarContainer>
-          messageId={props.messageId}
+          <MessageAvatar messageId={props.messageId} isPrivate={selectedIsPrivate} />
-          hideAvatar={hideAvatar}
+        </StyledAvatarContainer>
-          isPrivate={selectedIsPrivate}
+      )}
-          isDetailView={props.isDetailView}
-        />
-      </StyledAvatarContainer>
 
       <InView
         id={`inview-content-${props.messageId}`}

ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { MessageInfoLabel } from '.';
 import { useConversationUsername } from '../../../../../../hooks/useParamSelector';
-import { Avatar, AvatarSize } from '../../../../../avatar/Avatar';
+import { Avatar, AvatarSize, CrownIcon } from '../../../../../avatar/Avatar';
 
 const StyledFromContainer = styled.div`
   display: flex;
@@ -30,8 +30,12 @@ const StyledMessageInfoAuthor = styled.div`
   font-size: var(--font-size-lg);
 `;
 
-export const MessageFrom = (props: { sender: string }) => {
+const StyledAvatar = styled.div`
-  const { sender } = props;
+  position: relative;
+`;
+
+export const MessageFrom = (props: { sender: string; isSenderAdmin: boolean }) => {
+  const { sender, isSenderAdmin } = props;
   const profileName = useConversationUsername(sender);
   const from = window.i18n('from');
 
@@ -39,7 +43,10 @@ export const MessageFrom = (props: { sender: string }) => {
     <StyledMessageInfoAuthor>
       <MessageInfoLabel>{from}</MessageInfoLabel>
       <StyledFromContainer>
-        <Avatar size={AvatarSize.M} pubkey={sender} onAvatarClick={undefined} />
+        <StyledAvatar>
+          <Avatar size={AvatarSize.M} pubkey={sender} onAvatarClick={undefined} />
+          {isSenderAdmin ? <CrownIcon /> : null}
+        </StyledAvatar>
         <StyledAuthorNamesContainer>
           {!!profileName && <Name>{profileName}</Name>}
           <Pubkey>{sender}</Pubkey>

ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx

@@ -14,6 +14,7 @@ import {
   useMessageHash,
   useMessageReceivedAt,
   useMessageSender,
+  useMessageSenderIsAdmin,
   useMessageServerId,
   useMessageServerTimestamp,
   useMessageTimestamp,
@@ -111,6 +112,7 @@ export const MessageInfo = ({ messageId, errors }: { messageId: string; errors:
   const sentAt = useMessageTimestamp(messageId);
   const serverTimestamp = useMessageServerTimestamp(messageId);
   const receivedAt = useMessageReceivedAt(messageId);
+  const isSenderAdmin = useMessageSenderIsAdmin(messageId);
 
   if (!messageId || !sender) {
     return null;
@@ -137,7 +139,7 @@ export const MessageInfo = ({ messageId, errors }: { messageId: string; errors:
         <LabelWithInfo label={`${window.i18n('received')}:`} info={receivedAtStr} />
       ) : null}
       <SpacerSM />
-      <MessageFrom sender={sender} />
+      <MessageFrom sender={sender} isSenderAdmin={isSenderAdmin} />
       {hasError && (
         <>
           <SpacerSM />

ts/state/selectors/messages.ts

@@ -160,10 +160,10 @@ export const useMessageText = (messageId: string | undefined): string | undefine
   return useMessagePropsByMessageId(messageId)?.propsForMessage.text;
 };
 
-export function useHideAvatarInMsgList(messageId?: string) {
+export function useHideAvatarInMsgList(messageId?: string, isDetailView?: boolean) {
   const msgProps = useMessagePropsByMessageId(messageId);
   const selectedIsPrivate = useSelectedIsPrivate();
-  return msgProps?.propsForMessage.direction === 'outgoing' || selectedIsPrivate;
+  return isDetailView || msgProps?.propsForMessage.direction === 'outgoing' || selectedIsPrivate;
 }
 
 export function useMessageSelected(messageId?: string) {