Merge pull request #4132 from urbit/mp/landscape/chat-fix

chat: fixes two regressions

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -144,12 +144,12 @@ export default class ChatMessage extends Component<ChatMessageProps> {
         style={style}
         mb={1}
       >
-        {dayBreak && !isLastRead ? <DayBreak when={msg.when} /> : null}
+        {dayBreak && !isLastRead ? <DayBreak when={msg['time-sent']} /> : null}
         {renderSigil
           ? <MessageWithSigil {...messageProps} />
           : <MessageWithoutSigil {...messageProps} />}
         <Box flexShrink={0} fontSize={0} position='relative' width='100%' overflow='visible' style={unreadContainerStyle}>{isLastRead
-          ? <UnreadMarker dayBreak={dayBreak} when={msg.when} ref={unreadMarkerRef} />
+          ? <UnreadMarker dayBreak={dayBreak} when={msg['time-sent']} ref={unreadMarkerRef} />
           : null}</Box>
       </Box>
     );
@@ -261,6 +261,8 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
               measure={measure}
               fontSize={fontSize}
               group={group}
+              hideNicknames={hideNicknames}
+              hideAvatars={hideAvatars}
             />)}
           </ContentBox>
         </Box>
@@ -276,16 +278,25 @@ const ContentBox = styled(Box)`
 
 `;
 
-export const MessageWithoutSigil = ({ timestamp, contacts, msg, remoteContentPolicy, measure, group }) => (
+export const MessageWithoutSigil = ({ timestamp, contacts, msg, remoteContentPolicy, measure, group, hideNicknames, hideAvatars }) => (
   <>
     <Text flexShrink={0} mono gray display='inline-block' pt='2px' lineHeight='tall' className="child">{timestamp}</Text>
     <ContentBox flexShrink={0} fontSize='14px' className="clamp-message" style={{ flexGrow: 1 }}>
-      {msg.contents.map(c => (<MessageContent contacts={contacts} content={c} group={group} remoteContentPolicy={remoteContentPolicy} measure={measure}/>))}
+      {msg.contents.map((c, i) => (
+        <MessageContent
+          key={i}
+          contacts={contacts}
+          content={c}
+          group={group}
+          remoteContentPolicy={remoteContentPolicy}
+          measure={measure}
+          hideNicknames={hideNicknames}
+          hideAvatars={hideAvatars}/>))}
     </ContentBox>
   </>
 );
 
-export const MessageContent = ({ content, contacts, remoteContentPolicy, measure, fontSize, group }) => {
+export const MessageContent = ({ content, contacts, remoteContentPolicy, measure, fontSize, group, hideNicknames, hideAvatars }) => {
   if ('code' in content) {
     return <CodeContent content={content} />;
   } else if ('url' in content) {
@@ -314,7 +325,7 @@ export const MessageContent = ({ content, contacts, remoteContentPolicy, measure
   } else if ('text' in content) {
     return <TextContent fontSize={fontSize} content={content} />;
   } else if ('mention' in content) {
-    return <Mention group={group} ship={content.mention} contacts={contacts} />
+    return <Mention group={group} ship={content.mention} contact={contacts?.[content.mention]} hideNicknames={hideNicknames} hideAvatars={hideAvatars} />
   } else {
     return null;
   }

pkg/interface/src/views/components/CommentItem.tsx

@@ -82,6 +82,8 @@ export function CommentItem(props: CommentItemProps) {
           group={group}
           content={post?.contents}
           remoteContentPolicy={remoteContentPolicy}
+          hideNicknames={props.hideNicknames}
+          hideAvatars={props.hideAvatars}
         />
       </Box>
     </Box>

pkg/interface/src/views/components/MentionText.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback } from "react";
 import _ from "lodash";
 import { Text, Box } from "@tlon/indigo-react";
 import {
+  Contact,
   Contacts,
   Content,
   LocalUpdateRemoteContentPolicy,
@@ -13,13 +14,16 @@ import { ProfileOverlay } from "./ProfileOverlay";
 import {useHistory} from "react-router-dom";
 
 interface MentionTextProps {
-  contacts: Contacts;
+  contact?: Contact;
+  contacts?: Contacts;
   content: Content[];
   group: Group;
   remoteContentPolicy: LocalUpdateRemoteContentPolicy;
+  hideNicknames: boolean;
+  hideAvatars: boolean;
 }
 export function MentionText(props: MentionTextProps) {
-  const { content, contacts, group } = props;
+  const { content, contacts, contact, group, hideNicknames, hideAvatars } = props;
 
   return (
     <>
@@ -36,7 +40,7 @@ export function MentionText(props: MentionTextProps) {
           );
         } else if ("mention" in c) {
           return (
-            <Mention key={idx} contacts={contacts || {}} group={group} ship={c.mention} />
+            <Mention key={idx} contacts={contacts || {}} contact={contact || {}} group={group} ship={c.mention} hideNicknames={hideNicknames} hideAvatars={hideAvatars} />
           );
         }
         return null;
@@ -47,12 +51,18 @@ export function MentionText(props: MentionTextProps) {
 
 export function Mention(props: {
   ship: string;
-  contacts: Contacts;
+  contact: Contact;
+  contacts?: Contacts;
   group: Group;
+  hideNicknames: boolean;
+  hideAvatars: boolean;
 }) {
-  const { contacts, ship } = props;
+  const { contacts, ship, hideNicknames, hideAvatars } = props;
-  const contact = contacts[ship];
+  let { contact } = props;
-  const showNickname = !!contact?.nickname;
+
+  contact = (contact?.nickname) ? contact : contacts?.[ship];
+
+  const showNickname = (Boolean(contact?.nickname) && !hideNicknames);
   const name = showNickname ? contact?.nickname : cite(ship);
   const [showOverlay, setShowOverlay] = useState(false);
   const onDismiss = useCallback(() => {
@@ -79,8 +89,8 @@ export function Mention(props: {
           color={`#${uxToHex(contact?.color ?? '0x0')}`}
           group={group}
           onDismiss={onDismiss}
-          hideAvatars={false}
+          hideAvatars={hideAvatars || false}
-          hideNicknames={false}
+          hideNicknames={hideNicknames}
           history={history}
         />
       )}