chat: type OverlaySigil, cleanup

Fixes urbit/landscape#303

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

@@ -9,7 +9,7 @@ import moment from 'moment';
 import _ from 'lodash';
 import { Box, Row, Text, Rule, BaseImage } from '@tlon/indigo-react';
 import { Sigil } from '~/logic/lib/sigil';
-import { OverlayBox } from '~/views/components/OverlaySigil';
+import OverlaySigil from '~/views/components/OverlaySigil';
 import {
   uxToHex,
   cite,
@@ -293,9 +293,8 @@ export const MessageWithSigil = (props) => {
         pl={2}
         position='relative'
       >
-        {img}
         {showOverlay && (
-          <OverlayBox
+          <OverlaySigil
             ship={msg.author}
             contact={contact}
             color={`#${uxToHex(contact?.color ?? '0x0')}`}
@@ -306,6 +305,7 @@ export const MessageWithSigil = (props) => {
             scrollWindow={scrollWindow}
           />
         )}
+        {img}
       </Box>
       <Box flexGrow={1} display='block' className='clamp-message' {...bind}>
         <Box

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

@@ -3,7 +3,7 @@ import moment from 'moment';
 import { Row, Box, BaseImage } from '@tlon/indigo-react';
 import { uxToHex, cite, useShowNickname } from '~/logic/lib/util';
 import { Contacts } from '~/types/contact-update';
-import { OverlayBox } from './OverlaySigil';
+import OverlaySigil from './OverlaySigil';
 import { Sigil } from '~/logic/lib/sigil';
 import { Group } from '~/types';
 import GlobalApi from '~/logic/api/global';
@@ -61,7 +61,7 @@ export default function Author(props: AuthorProps) {
       >
         {showImage && img}
         {showOverlay && (
-          <OverlayBox
+          <OverlaySigil
             ship={ship}
             contact={contact}
             color={`#${uxToHex(contact?.color ?? '0x0')}`}

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

@@ -4,7 +4,7 @@ import { Text, Box } from '@tlon/indigo-react';
 import { Contact, Contacts, Content, Group } from '~/types';
 import RichText from '~/views/components/RichText';
 import { cite, useShowNickname, uxToHex } from '~/logic/lib/util';
-import { OverlayBox } from '~/views/components/OverlaySigil';
+import OverlaySigil from '~/views/components/OverlaySigil';
 import { useHistory } from 'react-router-dom';
 
 interface MentionTextProps {
@@ -63,7 +63,7 @@ export function Mention(props: {
         {name}
       </Text>
       {showOverlay && (
-        <OverlayBox
+        <OverlaySigil
           ship={ship}
           contact={contact}
           color={`#${uxToHex(contact?.color ?? '0x0')}`}
@@ -71,7 +71,6 @@ export function Mention(props: {
           onDismiss={() => toggleOverlay()}
           history={history}
           className='relative'
-          // TODO: Make sure scrollWindow gets passed in from apps that aren't just chat
           scrollWindow={scrollWindow}
         />
       )}

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

@@ -15,12 +15,14 @@ type OverlaySigilProps = ColProps & {
 };
 
 interface OverlaySigilState {
-  clicked: boolean;
-  topSpace: number | 'auto';
-  bottomSpace: number | 'auto';
+  visible: boolean;
+  space: {
+    top: number | 'auto';
+    bottom: number | 'auto';
+  };
 }
 
-export const OverlayBox = (props) => {
+export const OverlaySigil = (props: OverlaySigilProps): React.FC => {
   const {
     api,
     className,
@@ -34,8 +36,11 @@ export const OverlayBox = (props) => {
     ...rest
   } = { ...props };
   const containerRef = useRef(null);
-  const [visible, setVisible] = useState(false);
-  const [space, setSpace] = useState({ top: 'auto', bottom: 'auto' });
+  const [visible, setVisible] = useState<OverlaySigilState.visible>();
+  const [space, setSpace] = useState<OverlaySigilState.space>({
+    top: 'auto',
+    bottom: 'auto'
+  });
 
   const updateContainerOffset = () => {
     if (scrollWindow && containerRef && containerRef.current) {
@@ -51,6 +56,7 @@ export const OverlayBox = (props) => {
           scrollWindow.getBoundingClientRect().top
         : 0;
       setSpace({
+        ...space,
         top: topSpace,
         bottom: bottomSpace
       });
@@ -93,3 +99,5 @@ export const OverlayBox = (props) => {
     </Box>
   );
 };
+
+export default OverlaySigil;