From 1d25e7ee348e74ab491d9fbe21d6887e3d08e9c4 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Sat, 6 Feb 2021 17:44:33 -0500
Subject: [PATCH] chat: consistent profile overlay in chat messages (WIP)

Fixes urbit/landscape#303
---
 .../apps/chat/components/ChatMessage.tsx      | 56 +++++++++++++++----
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index bf81b6eb4..3a2a70a3a 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import moment from 'moment';
 import _ from 'lodash';
-import { Box, Row, Text, Rule } from '@tlon/indigo-react';
+import { Box, Row, Text, Rule, BaseImage } from '@tlon/indigo-react';
 import { Sigil } from '~/logic/lib/sigil';
 import { OverlayBox } from '~/views/components/OverlaySigil';
 import {
@@ -245,6 +245,11 @@ export const MessageWithSigil = (props) => {
   const [displayName, setDisplayName] = useState(shipName);
   const [nameMono, setNameMono] = useState(showNickname ? false : true);
   const { hovering, bind } = useHovering();
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  const toggleOverlay = () => {
+    setShowOverlay((value) => !value);
+  };
 
   const showCopyNotice = () => {
     setDisplayName(copyNotice);
@@ -260,17 +265,48 @@ export const MessageWithSigil = (props) => {
     return () => clearTimeout(timer);
   }, [displayName]);
 
+  const img =
+    contact && contact.avatar !== null ? (
+      <BaseImage
+        display='inline-block'
+        src={contact.avatar}
+        height={16}
+        width={16}
+      />
+    ) : (
+      <Sigil
+        ship={msg.author}
+        size={16}
+        color={color}
+        classes={sigilClass}
+        icon
+        padded
+      />
+    );
+
   return (
     <>
-      <Box mr={12} ml={12} pt={1} pb={1} height={16}>
-        <Sigil
-          ship={ship}
-          size={16}
-          color={color}
-          classes={sigilClass}
-          icon
-          padded
-        />
+      <Box
+        onClick={() => toggleOverlay()}
+        className='fl v-top pt1'
+        height={16}
+        pr={3}
+        pl={2}
+        position='relative'
+      >
+        {img}
+        {showOverlay && (
+          <OverlayBox
+            ship={msg.author}
+            contact={contact}
+            color={`#${uxToHex(contact?.color ?? '0x0')}`}
+            group={group}
+            onDismiss={() => toggleOverlay()}
+            history={history}
+            className='relative'
+            scrollWindow={scrollWindow}
+          />
+        )}
       </Box>
       <Box flexGrow={1} display='block' className='clamp-message' {...bind}>
         <Box