From e63c050a6e2438587975f9880f32d540059629a4 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Thu, 27 Aug 2020 10:05:29 +1000
Subject: [PATCH] profile: address comments

---
 .../src/views/apps/chat/components/lib/message.js        | 9 ++++++---
 .../src/views/apps/chat/components/lib/overlay-sigil.js  | 2 ++
 .../views/apps/chat/components/lib/profile-overlay.js    | 9 +++++----
 pkg/interface/src/views/apps/profile/profile.tsx         | 6 +++---
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/message.js b/pkg/interface/src/views/apps/chat/components/lib/message.js
index 4a68cd1a1..2220658d6 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/message.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/message.js
@@ -47,12 +47,14 @@ const renderWithSigil = (props, timestamp) => {
 
     const contact = props.msg.author in props.contacts
       ? props.contacts[props.msg.author] : false;
+    const showNickname = !props.hideNicknames && contact?.nickname;
     let name = `~${props.msg.author}`;
     let color = '#000000';
     let sigilClass = 'mix-blend-diff';
     if (contact) {
-      name = (contact.nickname.length > 0 && !props.hideNicknames)
-        ? contact.nickname : `~${props.msg.author}`;
+      name = showNickname
+        ? contact.nickname
+        : `~${props.msg.author}`;
       color = `#${uxToHex(contact.color)}`;
       sigilClass = '';
     }
@@ -71,6 +73,7 @@ const renderWithSigil = (props, timestamp) => {
           association={props.association}
           group={props.group}
           hideAvatars={props.hideAvatars}
+          hideNicknames={props.hideNicknames}
           className="fl pr3 v-top bg-white bg-gray0-d"
         />
         <div className="fr clamp-message white-d"
@@ -80,7 +83,7 @@ const renderWithSigil = (props, timestamp) => {
               <span
                 className={
                   'mw5 db truncate pointer ' +
-                  (contact.nickname ? '' : 'mono')
+                  (showNickname ? '' : 'mono')
                 }
                 onClick={() => {
                   writeText(props.msg.author);
diff --git a/pkg/interface/src/views/apps/chat/components/lib/overlay-sigil.js b/pkg/interface/src/views/apps/chat/components/lib/overlay-sigil.js
index 3b1958322..59e04394f 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/overlay-sigil.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/overlay-sigil.js
@@ -90,6 +90,8 @@ export class OverlaySigil extends Component {
             association={props.association}
             group={props.group}
             onDismiss={this.profileHide}
+            hideAvatars={hideAvatars}
+            hideNicknames={props.hideNicknames}
           />
         )}
         {img}
diff --git a/pkg/interface/src/views/apps/chat/components/lib/profile-overlay.js b/pkg/interface/src/views/apps/chat/components/lib/profile-overlay.js
index d05108278..3e550fc3b 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/profile-overlay.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/profile-overlay.js
@@ -34,7 +34,7 @@ export class ProfileOverlay extends Component {
   }
 
   render() {
-    const { contact, ship, color, topSpace, bottomSpace, group, association } = this.props;
+    const { contact, ship, color, topSpace, bottomSpace, group, association, hideNicknames, hideAvatars } = this.props;
 
     let top, bottom;
     if (topSpace < OVERLAY_HEIGHT / 2) {
@@ -51,10 +51,10 @@ export class ProfileOverlay extends Component {
     const isOwn = window.ship === ship;
 
     const identityHref = group.hidden
-      ? '/~groups/me'
+      ? '/~profile/identity'
       : `/~groups/view${association['group-path']}/${window.ship}`;
 
-    let img = (contact && (contact.avatar !== null))
+    let img = contact?.avatar && !hideAvatars
       ? <img src={contact.avatar} height={160} width={160} className="brt2 dib" />
       : <Sigil
         ship={ship}
@@ -63,6 +63,7 @@ export class ProfileOverlay extends Component {
         classes="brt2"
         svgClass="brt2"
         />;
+    const showNickname = contact?.nickname && !hideNicknames;
 
       if (!group.hidden) {
         img = <Link to={`/~groups/view${association['group-path']}/${ship}`}>{img}</Link>;
@@ -78,7 +79,7 @@ export class ProfileOverlay extends Component {
         {img}
         </div>
         <div className="pv3 pl3 pr2">
-          {contact && contact.nickname && (
+          {showNickname && (
             <div className="b white-d truncate">{contact.nickname}</div>
           )}
           <div className="mono gray2">{cite(`~${ship}`)}</div>
diff --git a/pkg/interface/src/views/apps/profile/profile.tsx b/pkg/interface/src/views/apps/profile/profile.tsx
index 07254860c..a3f5219d0 100644
--- a/pkg/interface/src/views/apps/profile/profile.tsx
+++ b/pkg/interface/src/views/apps/profile/profile.tsx
@@ -86,12 +86,12 @@ export default function ProfileScreen(props: any) {
                   </Box>
                 </Box>
                 <Box width="100%" py={3}>
-                  <SidebarItem current={view} view="settings">
-                    Ship Settings
-                  </SidebarItem>
                   <SidebarItem current={view} view="identity">
                     Your Identity
                   </SidebarItem>
+                  <SidebarItem current={view} view="settings">
+                    Ship Settings
+                  </SidebarItem>
                 </Box>
               </Col>
               <Box