Loki changes

Added friends section in search.

This is because contacts is now used in signal for something else and we don't want to clash meanings.

Styling fixes

Add dropdown options into mainheader

Updated styling

Restore StartNewConversation to the old ui style of loki messenger.

Fix friend search display.

Fix header expand animation.

Hooked up menu actions.

Linting.

More styling changes.

Fix tests.

Added back in the loki logo below the gutter.

Fix toast positioning.

Fix context menu showing incorrectly on virtual lists.

Added tabs.

Linting

_locales/en/messages.json

@@ -749,6 +749,10 @@
     "message": "Conversations",
     "description": "Shown to separate the types of search results"
   },
+  "friendsHeader": {
+    "message": "Friends",
+    "description": "Shown to separate the types of search results"
+  },
   "contactsHeader": {
     "message": "Contacts",
     "description": "Shown to separate the types of search results"
@@ -2000,5 +2004,23 @@
   },
   "remove": {
     "message": "Remove"
+  },
+  "invalidHexId": {
+    "message": "Invalid Hex ID",
+    "description":
+      "Error string shown when user type an invalid pubkey hex string"
+  },
+  "invalidPubkeyFormat": {
+    "message": "Invalid Pubkey Format",
+    "description": "Error string shown when user types an invalid pubkey format"
+  },
+
+  "conversationsTab": {
+    "message": "Conversations",
+    "description": "conversation tab title"
+  },
+  "friendsTab": {
+    "message": "Friends",
+    "description": "friend tab title"
   }
 }

background.html

@@ -54,6 +54,9 @@
     <div class='gutter'>
       <div class='network-status-container'></div>
       <div class='left-pane-placeholder'></div>
+      <div class='loki'>
+        <img src='images/loki/loki_icon_text.png' />
+      </div>
     </div>
     <div class='conversation-stack'>
       <div class='conversation placeholder'>

js/views/inbox_view.js

@@ -7,8 +7,7 @@
   i18n,
   Whisper,
   textsecure,
-  Signal,
-  clipboard
+  Signal
 */
 
 // eslint-disable-next-line func-names
@@ -87,13 +86,6 @@
       this.render();
       this.$el.attr('tabindex', '1');
 
-      this.mainHeaderView = new Whisper.MainHeaderView({
-        el: this.$('.main-header-placeholder'),
-        items: this.getMainHeaderItems(),
-      });
-      this.onPasswordUpdated();
-      this.on('password-updated', () => this.onPasswordUpdated());
-
       this.conversation_stack = new Whisper.ConversationStack({
         el: this.$('.conversation-stack'),
         model: { window: options.window },
@@ -145,7 +137,6 @@
         conversation => conversation.cachedProps
       );
 
-      // FIXME: Add our contacts here as well? getContactCollection
       const initialState = {
         conversations: {
           conversationLookup: Signal.Util.makeLookup(conversations, 'id'),
@@ -338,57 +329,6 @@
     onClick(e) {
       this.closeRecording(e);
     },
-    getMainHeaderItems() {
-      return [
-        this._mainHeaderItem('copyPublicKey', () => {
-          const ourNumber = textsecure.storage.user.getNumber();
-          clipboard.writeText(ourNumber);
-
-          this.showToastMessageInGutter(i18n('copiedPublicKey'));
-        }),
-        this._mainHeaderItem('editDisplayName', () => {
-          window.Whisper.events.trigger('onEditProfile');
-        }),
-        this._mainHeaderItem('showSeed', () => {
-          window.Whisper.events.trigger('showSeedDialog');
-        }),
-      ];
-    },
-    async onPasswordUpdated() {
-      const hasPassword = await Signal.Data.getPasswordHash();
-      const items = this.getMainHeaderItems();
-
-      const showPasswordDialog = (type, resolve) =>
-        Whisper.events.trigger('showPasswordDialog', {
-          type,
-          resolve,
-        });
-
-      const passwordItem = (textKey, type) =>
-        this._mainHeaderItem(textKey, () =>
-          showPasswordDialog(type, () => {
-            this.showToastMessageInGutter(i18n(`${textKey}Success`));
-          })
-        );
-
-      if (hasPassword) {
-        items.push(
-          passwordItem('changePassword', 'change'),
-          passwordItem('removePassword', 'remove')
-        );
-      } else {
-        items.push(passwordItem('setPassword', 'set'));
-      }
-
-      this.mainHeaderView.updateItems(items);
-    },
-    _mainHeaderItem(textKey, onClick) {
-      return {
-        id: textKey,
-        text: i18n(textKey),
-        onClick,
-      };
-    },
     showToastMessageInGutter(message) {
       const toast = new Whisper.MessageToastView({
         message,

package.json

@@ -78,9 +78,9 @@
     "intl-tel-input": "12.1.15",
     "jquery": "3.3.1",
     "js-sha512": "0.8.0",
+    "js-yaml": "3.13.0",
     "jsbn": "1.1.0",
     "libsodium-wrappers": "^0.7.4",
-    "js-yaml": "3.13.0",
     "linkify-it": "2.0.3",
     "lodash": "4.17.11",
     "mkdirp": "0.5.1",
@@ -96,6 +96,7 @@
     "react": "16.8.3",
     "react-contextmenu": "2.11.0",
     "react-dom": "16.8.3",
+    "react-portal": "^4.2.0",
     "react-redux": "6.0.1",
     "react-virtualized": "9.21.0",
     "read-last-lines": "1.3.0",
@@ -132,6 +133,7 @@
     "@types/qs": "6.5.1",
     "@types/react": "16.8.5",
     "@types/react-dom": "16.8.2",
+    "@types/react-portal": "^4.0.2",
     "@types/react-redux": "7.0.1",
     "@types/react-virtualized": "9.18.12",
     "@types/redux-logger": "3.0.7",

stylesheets/_conversation.scss

@@ -316,10 +316,7 @@
   bottom: 62px;
 
   text-align: center;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding: 8px 16px;
   border-radius: 4px;
   z-index: 100;
 

stylesheets/_index.scss

@@ -1,3 +1,7 @@
+.conversation-stack {
+  position: relative;
+}
+
 .conversation-stack,
 .new-conversation,
 .inbox,
@@ -183,10 +187,12 @@ h4.section-toggle,
 }
 
 .left-pane-placeholder {
-  height: 100%;
+  flex-grow: 1;
+  display: flex;
 }
+
 .left-pane-wrapper {
-  height: 100%;
+  flex: 1;
 }
 
 .conversation-stack {