Merge pull request #4821 from urbit/mp/landscape/me-highlight

landscape: highlight content mentioning our ship

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

@@ -264,6 +264,7 @@ class ChatMessage extends Component<ChatMessageProps> {
   componentDidMount() {}
 
   render() {
+    let { highlighted } = this.props;
     const {
       msg,
       previousMsg,
@@ -279,12 +280,21 @@ class ChatMessage extends Component<ChatMessageProps> {
       unreadMarkerRef,
       history,
       api,
-      highlighted,
       showOurContact,
       fontSize,
       hideHover
     } = this.props;
 
+    const ourMention = msg?.contents?.some((e) => {
+      return e?.mention && e?.mention === window.ship;
+    });
+
+    if (!highlighted) {
+      if (ourMention) {
+        highlighted = true;
+      }
+    }
+
     let onReply = this.props?.onReply ?? (() => {});
     const transcluded = this.props?.transcluded ?? 0;
     let { renderSigil } = this.props;

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

@@ -35,6 +35,7 @@ interface CommentItemProps {
 }
 
 export function CommentItem(props: CommentItemProps): ReactElement {
+  let { highlighted } = props;
   const { ship, name, api, comment, group } = props;
   const association = useMetadataState(
     useCallback(s => s.associations.graph[`/ship/${ship}/${name}`], [ship,name])
@@ -47,6 +48,16 @@ export function CommentItem(props: CommentItemProps): ReactElement {
     await api.graph.removeNodes(ship, name, [comment.post?.index]);
   };
 
+  const ourMention = post?.contents?.some((e) => {
+      return e?.mention && e?.mention === window.ship;
+    });
+
+  if (!highlighted) {
+    if (ourMention) {
+      highlighted = true;
+    }
+  }
+
   const commentIndexArray = (comment.post?.index || '/').split('/');
   const commentIndex = commentIndexArray[commentIndexArray.length - 1];
 
@@ -107,7 +118,7 @@ export function CommentItem(props: CommentItemProps): ReactElement {
         borderRadius="1"
         p="1"
         mb="1"
-        backgroundColor={props.highlighted ? 'washedBlue' : 'white'}
+        backgroundColor={highlighted ? 'washedBlue' : 'white'}
         transcluded={0}
         api={api}
         post={post}