Merge pull request #4341 from urbit/mp/contacts/detail-2

contacts: update profile overlay

pkg/interface/src/views/apps/chat/ChatResource.tsx

@@ -24,7 +24,7 @@ export function ChatResource(props: ChatResourceProps) {
   const station = props.association['app-path'];
   const groupPath = props.association['group-path'];
   const group = props.groups[groupPath];
-  const contacts = props.contacts[groupPath] || {};
+  const contacts = props.contacts;
 
   const graph = props.graphs[station.slice(7)];
 
@@ -33,7 +33,7 @@ export function ChatResource(props: ChatResourceProps) {
   const unreadCount = props.unreads.graph?.[station]?.['/']?.unreads || 0;
 
   const [,, owner, name] = station.split('/');
-  const ourContact = contacts?.[window.ship];
+  const ourContact = contacts?.[`~${window.ship}`];
 
   const chatInput = useRef<ChatInput>();
 

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

@@ -178,7 +178,7 @@ export const MessageWithSigil = (props) => {
   const dark = useLocalState(state => state.dark);
 
   const datestamp = moment.unix(msg['time-sent'] / 1000).format(DATESTAMP_FORMAT);
-  const contact = msg.author in contacts ? contacts[msg.author] : false;
+  const contact = `~${msg.author}` in contacts ? contacts[`~${msg.author}`] : false;
   const showNickname = useShowNickname(contact);
   const name = showNickname ? contact.nickname : cite(msg.author);
   const color = contact ? `#${uxToHex(contact.color)}` : dark ?  '#000000' :'#FFFFFF'

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

@@ -110,7 +110,6 @@ class OverlaySigil extends PureComponent<OverlaySigilProps, OverlaySigilState> {
 
      return (
       <Box
-        cursor='pointer'
         position='relative'
         onClick={this.profileShow}
          ref={this.containerRef}

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

@@ -4,7 +4,8 @@ import { Contact, Group } from '~/types';
 import { cite, useShowNickname } from '~/logic/lib/util';
 import { Sigil } from '~/logic/lib/sigil';
 
-import { Box, Col, Button, Text, BaseImage, ColProps } from '@tlon/indigo-react';
+import { Box, Col, Row, Text, BaseImage, ColProps, Icon } from '@tlon/indigo-react';
+import { Dropdown } from './Dropdown';
 import { withLocalState } from '~/logic/state/local';
 
 export const OVERLAY_HEIGHT = 250;
@@ -60,7 +61,6 @@ class ProfileOverlay extends PureComponent<ProfileOverlayProps, {}> {
       color,
       topSpace,
       bottomSpace,
-      group = false,
       hideAvatars,
       hideNicknames,
       history,
@@ -78,75 +78,112 @@ class ProfileOverlay extends PureComponent<ProfileOverlayProps, {}> {
     if (!(top || bottom)) {
       bottom = `-${Math.round(OVERLAY_HEIGHT / 2)}px`;
     }
-    const containerStyle = { top, bottom, left: '100%', maxWidth: '160px' };
+    const containerStyle = { top, bottom, left: '100%' };
 
     const isOwn = window.ship === ship;
 
     const img = contact?.avatar && !hideAvatars
-      ? <BaseImage display='inline-block' src={contact.avatar} height={160} width={160} className="brt2" />
+      ? <BaseImage display='inline-block' src={contact.avatar} height={72} width={72} className="brt2" />
       : <Sigil
         ship={ship}
-        size={160}
+        size={72}
         color={color}
         classes="brt2"
         svgClass="brt2"
         />;
     const showNickname = useShowNickname(contact, hideNicknames);
 
-    //  TODO: we need to rethink this "top-level profile view" of other ships
-    /* if (!group.hidden) {
-    }*/
-
-    const isHidden = group ? group.hidden : false;
-
     const rootSettings = history.location.pathname.slice(0, history.location.pathname.indexOf("/resource"));
 
     return (
       <Col
         ref={this.popoverRef}
-        boxShadow="2px 4px 20px rgba(0, 0, 0, 0.25)"
+        backgroundColor="white"
+        color="washedGray"
+        border={1}
+        borderRadius={2}
+        borderColor="lightGray"
+        boxShadow="0px 0px 0px 3px"
         position='absolute'
-        backgroundColor='white'
         zIndex='3'
         fontSize='0'
+        height="250px"
+        width="250px"
+        padding={3}
+        justifyContent="space-between"
         style={containerStyle}
         {...rest}
       >
-        <Box height='160px' width='160px'>
+        <Row color='black' width='100%' height="3rem">
+          <Dropdown
+          dropWidth="150px"
+          width="auto"
+          alignY="top"
+          alignX="left"
+          options={
+            <Col
+              mt='4'
+              p='1'
+              backgroundColor="white"
+              color="washedGray"
+              border={1}
+              borderRadius={2}
+              borderColor="lightGray"
+              boxShadow="0px 0px 0px 3px">
+                <Row
+                  p={1}
+                  color='black'
+                  cursor='pointer'
+                  fontSize={0}
+                  onClick={() => history.push('/~profile/' + window.ship)}>
+                View Profile
+              </Row>
+              {(!isOwn) && (
+                <Row
+                  p={1}
+                  color='black'
+                  cursor='pointer'
+                  fontSize={0}
+                  onClick={() => history.push(`/~landscape/dm/${ship}`)}
+                >
+                  Send Message
+                </Row>
+              )}
+            </Col>
+          }>
+            <Icon icon="Menu" mr='3'/>
+          </Dropdown>
+          {(!isOwn) && (
+          <Icon icon="Chat" size={16} onClick={() => history.push(`/~landscape/dm/${ship}`)}/>
+          )}
+        </Row>
+        <Box alignSelf="center" height="72px">
           {img}
         </Box>
-        <Box p='3'>
-          {showNickname && (
+        <Col height="3rem" alignItems="end" justifyContent="flex-end">
             <Text
               fontWeight='600'
+              mono={!showNickname}
               display='block'
               textOverflow='ellipsis'
               overflow='hidden'
               whiteSpace='pre'
+              lineHeight="tall"
             >
-              {contact.nickname}
+              {showNickname ? contact.nickname : cite(ship)}
             </Text>
-          )}
-          <Text mono gray>{cite(`~${ship}`)}</Text>
-          {!isOwn && (
-            <Button mt={2} fontSize='0' width="100%" style={{ cursor: 'pointer' }} onClick={() => history.push(`/~landscape/dm/${ship}`)}>
-              Send Message
-            </Button>
-          )}
-          {(isOwn) ? (
-            <Button
-              mt='2'
-              width='100%'
-              style={{ cursor: 'pointer ' }}
-              onClick={() => (isHidden) ? history.push('/~profile/identity') : history.push(`${rootSettings}/popover/profile`)}
+          <Text
+            contentEditable={isOwn}
+            display={(!contact?.status && !isOwn) ? 'none' : 'inline'}
+            gray={(!contact?.status && isOwn)}
+            // onBlur={() => api.contacts.edit()...}
             >
-              Edit Identity
-            </Button>
-          ) : <div />}
-        </Box>
+              {(!contact?.status && isOwn) ? "Set a status" : contact.status}
+            </Text>
+        </Col>
       </Col>
     );
   }
 }
 
-export default withLocalState(ProfileOverlay, ['hideAvatars', 'hideNicknames']);
+export default withLocalState(ProfileOverlay, ['hideAvatars', 'hideNicknames']);

pkg/interface/src/views/components/StatusBar.js

@@ -67,7 +67,15 @@ const StatusBar = (props) => {
           alignY="top"
           alignX="right"
           options={
-            <Col mt='6' p='1' backgroundColor="white" color="washedGray" border={1} borderRadius={2} borderColor="lightGray" boxShadow="0px 0px 0px 3px">
+            <Col
+              mt='6'
+              p='1'
+              backgroundColor="white"
+              color="washedGray"
+              border={1}
+              borderRadius={2}
+              borderColor="lightGray"
+              boxShadow="0px 0px 0px 3px">
               <Row
                 p={1}
                 color='black'

pkg/interface/src/views/components/leap/OmniboxResult.js

@@ -91,6 +91,7 @@ export class OmniboxResult extends Component {
         <Text
         display="inline-block"
         verticalAlign="middle"
+        mono={(icon == 'profile' && text.startsWith('~'))}
         color={this.state.hovered || selected === link ? 'white' : 'black'}
         maxWidth="60%"
         style={{ flexShrink: 0 }}