render NoteToSelf list item as a normal conversation

js/background.js

@@ -550,6 +550,13 @@
     window.dispatchEvent(new Event('storage_ready'));
 
     window.log.info('Cleanup: starting...');
+    window.getOurDisplayName = () => {
+      const ourNumber = window.storage.get('primaryDevicePubKey');
+      const conversation = ConversationController.get(ourNumber, 'private');
+      const profile = conversation.getLokiProfile();
+      return profile && profile.displayName;
+    };
+
     const results = await Promise.all([
       window.Signal.Data.getOutgoingWithoutExpiresAt({
         MessageCollection: Whisper.MessageCollection,
@@ -690,6 +697,7 @@
 
     window.showSeedDialog = window.owsDesktopApp.appView.showSeedDialog;
     window.showPasswordDialog = window.owsDesktopApp.appView.showPasswordDialog;
+
     window.showEditProfileDialog = async callback => {
       const ourNumber = window.storage.get('primaryDevicePubKey');
       const conversation = await ConversationController.getOrCreateAndWait(

js/models/conversations.js

@@ -1995,7 +1995,7 @@
         });
       }
 
-      // if set to null, it will show a jazzIcon
+      // if set to null, it will show a placeholder with color and first letter
       await this.setProfileAvatar({ path: newProfile.avatar });
 
       await this.updateProfileName();

stylesheets/_modules.scss

@@ -1517,10 +1517,6 @@
     background-color: $color-dark-70;
   }
 
-  .module-avatar {
-    background-color: $color-dark-85;
-  }
-
   &--is-blocked {
     @include themify($themes) {
       border-left: 4px solid themed('destructive') !important;
@@ -1579,7 +1575,6 @@
   text-overflow: ellipsis;
 
   font-weight: 300;
-  color: $color-gray-05;
 }
 
 .module-conversation-list-item__header__name--with-unread {

ts/components/ConversationListItem.tsx

@@ -139,7 +139,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
               : null
           )}
         >
-          {isMe ? i18n('noteToSelf') : this.renderUser()}
+          {this.renderUser()}
         </div>
         {this.renderUnread()}
         {
@@ -347,18 +347,19 @@ export class ConversationListItem extends React.PureComponent<Props> {
   }
 
   private renderUser() {
-    const { name, phoneNumber, profileName } = this.props;
+    const { name, phoneNumber, profileName, isMe, i18n } = this.props;
 
     const shortenedPubkey = window.shortenPubkey(phoneNumber);
 
     const displayedPubkey = profileName ? shortenedPubkey : phoneNumber;
+    const displayName = isMe ? i18n('noteToSelf') : profileName;
 
     return (
       <div className="module-conversation__user">
         <ContactName
           phoneNumber={displayedPubkey}
           name={name}
-          profileName={profileName}
+          profileName={displayName}
           module="module-conversation__user"
           i18n={window.i18n}
           boldProfileName={true}

ts/components/session/ActionsPanel.tsx

@@ -149,6 +149,7 @@ export class ActionsPanel extends React.Component<Props, State> {
           phoneNumber={window.storage.get('primaryDevicePubKey')}
           size={28}
           onAvatarClick={handleClick}
+          profileName={window.getOurDisplayName()}
         />
       );
     }

ts/receiver/dataMessage.ts

@@ -43,7 +43,7 @@ export async function updateProfile(
         isRaw: true,
       });
 
-      // null => use jazzicon
+      // null => use placeholder with color and first letter
       let path = null;
       if (profileKey) {
         // Convert profileKey to ArrayBuffer, if needed

ts/util/getInitials.ts

@@ -17,5 +17,5 @@ export function getInitials(name?: string): string | undefined {
     return;
   }
 
-  return initials.slice(0, 2).join('');
+  return initials[0];
 }

ts/window.d.ts

@@ -80,6 +80,7 @@ declare global {
     setSettingValue: any;
     shortenPubkey: any;
     showEditProfileDialog: any;
+    getOurDisplayName: () => string | undefined;
     showPasswordDialog: any;
     showSeedDialog: any;
     storage: any;