From 1d5cff849d56bf061fef57fdb66b8eec0f97ef8f Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Sun, 25 Apr 2021 15:45:51 -0400
Subject: [PATCH] landscape: highlight content with our mentions

---
 .../src/views/apps/chat/components/ChatMessage.tsx  | 12 +++++++++++-
 pkg/interface/src/views/components/CommentItem.tsx  | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index 776a3c745..3bbb8f5d3 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/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;
diff --git a/pkg/interface/src/views/components/CommentItem.tsx b/pkg/interface/src/views/components/CommentItem.tsx
index f65273189..c314f987f 100644
--- a/pkg/interface/src/views/components/CommentItem.tsx
+++ b/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];
 
@@ -106,7 +117,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}