show receivedFriendRequest in a popup

stylesheets/_session.scss

@@ -229,7 +229,7 @@ $session_message-container-border-radius: 5px;
   user-select: none;
   cursor: pointer;
   transition: $session-transition-duration;
-  background-color: rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
 
   &.disabled {
     cursor: default;

stylesheets/_session_theme_dark_left_pane.scss

@@ -121,6 +121,11 @@ $session-compose-margin: 20px;
 
   &__list {
     height: -webkit-fill-available;
+
+    &-popup {
+      width: -webkit-fill-available;
+      position: absolute;
+    }
   }
 
   &-overlay {
@@ -208,7 +213,6 @@ $session-compose-margin: 20px;
   }
 }
 
-
 .session-left-pane-section-content {
   display: flex;
   flex-direction: column;
@@ -303,6 +307,12 @@ $session-compose-margin: 20px;
   border-radius: 50%;
   color: $session-color-white;
   font-weight: bold;
+  cursor: pointer;
+  transition: $session-transition-duration;
+
+  &:hover {
+    filter: brightness(80%);
+  }
 }
 
 .left-pane-contact {
@@ -310,11 +320,10 @@ $session-compose-margin: 20px;
   &-content {
     display: flex;
     flex-direction: column;
-    
 
     .module-conversation-list-item {
       &--has-friend-request {
-        &:first-child{
+        &:first-child {
           border-top: none !important;
         }
 
@@ -330,16 +339,16 @@ $session-compose-margin: 20px;
         display: flex;
 
         .session-button {
-          font-size: 11px;
-          padding: 6px;
+          font-size: 10px;
+          padding: 4px;
           height: auto;
           margin: 0px;
-          line-height: 14px;
+          line-height: 10px;
         }
       }
     }
   }
-  
+
   &-content {
     @include session-dark-background-lighter;
   }
@@ -385,7 +394,6 @@ $session-compose-margin: 20px;
       background-color: $session-shade-7;
     }
 
-
     &__buttons {
       display: flex;
 
@@ -423,6 +431,13 @@ $session-compose-margin: 20px;
         fill: $session-color-green;
       }
     }
+    .session-button.square-outline.square.green,
+    .session-button.square-outline.square.white {
+      flex-grow: 1;
+      border: 1px solid $session-shade-8;
+      height: 50px;
+      line-height: 50px;
+    }
   }
 }
 
@@ -430,9 +445,9 @@ $session-compose-margin: 20px;
   font-weight: bold;
   font-size: 13px;
   padding: 11px;
-  border-right:1px solid #2f2f2f !important;
-  border-top:1px solid #2f2f2f !important;
-  border-left:1px solid #2f2f2f !important;
+  border-right: 1px solid #2f2f2f !important;
+  border-top: 1px solid #2f2f2f !important;
+  border-left: 1px solid #2f2f2f !important;
   @include session-dark-background-lighter;
 }
 

ts/components/ConversationListItem.tsx

@@ -359,7 +359,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
         <Portal>{this.renderContextMenu(triggerId)}</Portal>
       </div>
     );
-
+  }
 
   private renderUser() {
     const { name, phoneNumber, profileName } = this.props;

ts/components/LeftPane.tsx

@@ -42,6 +42,8 @@ interface State {
 interface Props {
   conversations: Array<ConversationListItemPropsType>;
   friends: Array<ConversationType>;
+  sentFriendsRequest: Array<ConversationListItemPropsType>;
+  receivedFriendsRequest: Array<ConversationListItemPropsType>;
   searchResults?: SearchResultsProps;
   searchTerm: string;
   isSecondaryDevice: boolean;
@@ -54,7 +56,7 @@ interface Props {
 
 export class LeftPane extends React.Component<Props, State> {
   public state = {
-    selectedSection: SectionType.Contact,
+    selectedSection: SectionType.Message,
   };
 
   public constructor(props: any) {
@@ -219,6 +221,8 @@ export class LeftPane extends React.Component<Props, State> {
     const {
       openConversationInternal,
       friends,
+      sentFriendsRequest,
+      receivedFriendsRequest,
       conversations,
       searchResults,
       searchTerm,
@@ -239,6 +243,8 @@ export class LeftPane extends React.Component<Props, State> {
         updateSearchTerm={updateSearchTerm}
         search={search}
         clearSearch={clearSearch}
+        sentFriendsRequest={sentFriendsRequest}
+        receivedFriendsRequest={receivedFriendsRequest}
       />
     );
   }

ts/components/conversation/ConversationHeader.tsx

@@ -171,9 +171,7 @@ export class ConversationHeader extends React.Component<Props> {
 
     return (
       <div className="module-conversation-header__title">
-        <span className="module-contact-name__profile-name">
-          {title}
-        </span>
+        <span className="module-contact-name__profile-name">{title}</span>
         {textEl}
       </div>
     );

ts/components/session/LeftPaneContactSection.tsx

@@ -25,6 +25,8 @@ export interface Props {
 
   conversations: Array<ConversationListItemPropsType>;
   friends: Array<ConversationType>;
+  receivedFriendsRequest: Array<ConversationListItemPropsType>;
+  sentFriendsRequest: Array<ConversationListItemPropsType>;
 
   searchResults?: SearchResultsProps;
 
@@ -34,7 +36,15 @@ export interface Props {
   clearSearch: () => void;
 }
 
-export class LeftPaneContactSection extends React.Component<Props, any> {
+interface State {
+  showAddContactView: boolean;
+  selectedTab: number;
+  addContactRecipientID: string;
+  showFriendRequestsPopup: boolean;
+  pubKeyPasted: string;
+}
+
+export class LeftPaneContactSection extends React.Component<Props, State> {
   private readonly debouncedSearch: (searchTerm: string) => void;
 
   public constructor(props: Props) {
@@ -43,6 +53,8 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
       showAddContactView: false,
       selectedTab: 0,
       addContactRecipientID: '',
+      pubKeyPasted: '',
+      showFriendRequestsPopup: false,
     };
 
     this.debouncedSearch = debounce(this.search.bind(this), 20);
@@ -52,6 +64,9 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     this.handleRecipientSessionIDChanged = this.handleRecipientSessionIDChanged.bind(
       this
     );
+    this.handleToggleFriendRequestPopup = this.handleToggleFriendRequestPopup.bind(
+      this
+    );
   }
 
   public componentWillUnmount() {
@@ -73,7 +88,7 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
       labels,
       this.handleTabSelected,
       undefined,
-      undefined,
+      this.handleToggleFriendRequestPopup,
       friendRequestCount
     );
   }
@@ -95,39 +110,37 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     );
   }
 
-  public getCurrentFriends(): Array<ConversationType> {
-    const { friends } = this.props;
+  public renderRowFriendRequest = ({
+    index,
+    key,
+    style,
+  }: RowRendererParamsType): JSX.Element | undefined => {
+    const receivedFriendsRequest = this.props.receivedFriendsRequest;
 
-    let friendList = friends;
-    if (friendList !== undefined) {
-      friendList = friendList.filter(
-        friend => friend.type === 'direct' && !friend.isMe
-      );
-    }
+    const item = receivedFriendsRequest[index];
+    const onClick = this.props.openConversationInternal;
 
-    return friendList;
-  }
+    return (
+      <ConversationListItem
+        key={key}
+        style={style}
+        {...item}
+        i18n={window.i18n}
+        onClick={onClick}
+      />
+    );
+  };
 
   public renderRow = ({
     index,
     key,
     style,
   }: RowRendererParamsType): JSX.Element | undefined => {
-    const receivedFriendsRequest = this.getFriendRequests(true);
-    const sentFriendsRequest = this.getFriendRequests(false);
+    const { sentFriendsRequest } = this.props;
     const friends = this.getCurrentFriends();
-
-    const combined = [
-      ...receivedFriendsRequest,
-      ...sentFriendsRequest,
-      ...friends,
-    ];
-
+    const combined = [...sentFriendsRequest, ...friends];
     const item = combined[index];
-    let onClick;
-    if (index >= receivedFriendsRequest.length) {
-      onClick = this.props.openConversationInternal;
-    }
+    const onClick = this.props.openConversationInternal;
 
     return (
       <ConversationListItem
@@ -187,12 +200,31 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     }
   }
 
+  private getCurrentFriends(): Array<ConversationType> {
+    const { friends } = this.props;
+
+    let friendList = friends;
+    if (friendList !== undefined) {
+      friendList = friendList.filter(
+        friend => friend.type === 'direct' && !friend.isMe
+      );
+    }
+
+    return friendList;
+  }
+
   private handleToggleOverlay() {
-    this.setState((prevState: { showAddContactView: any }) => ({
+    this.setState((prevState: { showAddContactView: boolean }) => ({
       showAddContactView: !prevState.showAddContactView,
     }));
   }
 
+  private handleToggleFriendRequestPopup() {
+    this.setState((prevState: { showFriendRequestsPopup: boolean }) => ({
+      showFriendRequestsPopup: !prevState.showFriendRequestsPopup,
+    }));
+  }
+
   private handleOnAddContact() {
     const sessionID = this.state.addContactRecipientID;
     const error = validateNumber(sessionID, window.i18n);
@@ -217,9 +249,16 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
   }
 
   private renderContacts() {
+    const { showFriendRequestsPopup } = this.state;
+    const hasReceivedFriendRequest =
+      this.props.receivedFriendsRequest.length > 0;
+
     return (
       <div className="left-pane-contact-content">
         {this.renderList()}
+        {showFriendRequestsPopup &&
+          hasReceivedFriendRequest &&
+          this.renderFriendRequestPopup()}
         {this.renderBottomButtons()}
       </div>
     );
@@ -257,46 +296,39 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
     );
   }
 
-  // true: received only, false: sent only
-  private getFriendRequests(
-    received: boolean
-  ): Array<ConversationListItemPropsType> {
-    const { conversations } = this.props;
-
-    let conversationsList = conversations;
-    if (conversationsList !== undefined) {
-      if (received) {
-        conversationsList = conversationsList.filter(
-          conversation => conversation.hasReceivedFriendRequest
-        );
-      } else {
-        conversationsList = conversationsList.filter(
-          conversation => conversation.hasSentFriendRequest
-        );
-      }
-    }
+  private renderFriendRequestPopup() {
+    const frTitle = window.i18n('youHaveFriendRequestFrom');
+    const length = this.props.receivedFriendsRequest.length;
 
-    return conversationsList || [];
+    return (
+      <div className="module-left-pane__list-popup">
+        <div className="friend-request-title">{frTitle}</div>
+        <div className="module-left-pane__list" key={0}>
+          <AutoSizer>
+            {({ height, width }) => (
+              <List
+                className="module-left-pane__virtual-list"
+                height={height}
+                rowCount={length}
+                rowHeight={64}
+                rowRenderer={this.renderRowFriendRequest}
+                width={width}
+                autoHeight={true}
+              />
+            )}
+          </AutoSizer>
+        </div>
+      </div>
+    );
   }
 
   private renderList() {
-    const receivedFriendsRequest = this.getFriendRequests(true);
-    const sentFriendsRequest = this.getFriendRequests(false);
+    const { sentFriendsRequest } = this.props;
     const friends = this.getCurrentFriends();
-
-    const combined = [
-      ...receivedFriendsRequest,
-      ...sentFriendsRequest,
-      ...friends,
-    ];
-
-    const length = combined.length;
-    const hasReceivedFriendRequest = receivedFriendsRequest.length > 0;
-    const frTitle = window.i18n('youHaveFriendRequestFrom');
+    const length = sentFriendsRequest.length + friends.length;
 
     const list = (
       <div className="module-left-pane__list" key={0}>
-        {hasReceivedFriendRequest && <div className="friend-request-title">{frTitle}</div>}
         <AutoSizer>
           {({ height, width }) => (
             <List

ts/components/session/LeftPaneSectionHeader.tsx

@@ -92,7 +92,11 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
       const shortenedNotificationCount =
         notificationCount > 9 ? 9 : notificationCount;
       children.push(
-        <div className="contact-notification-count-bubble">
+        <div
+          className="contact-notification-count-bubble"
+          onClick={this.props.buttonClicked}
+          role="button"
+        >
           {shortenedNotificationCount}
         </div>
       );

ts/state/ducks/conversations.ts

@@ -53,6 +53,8 @@ export type ConversationType = {
   isSelected: boolean;
   isTyping: boolean;
   isFriend?: boolean;
+  hasReceivedFriendRequest?: boolean;
+  hasSentFriendRequest?: boolean;
 };
 export type ConversationLookupType = {
   [key: string]: ConversationType;

ts/state/selectors/conversations.ts

@@ -10,6 +10,7 @@ import {
 } from '../ducks/conversations';
 
 import { getIntl, getRegionCode, getUserNumber } from './user';
+import { PropsData as ConversationListItemPropsType } from '../../components/ConversationListItem';
 
 export const getConversations = (state: StateType): ConversationsStateType =>
   state.conversations;
@@ -97,6 +98,8 @@ export const _getLeftPaneLists = (
   conversations: Array<ConversationType>;
   archivedConversations: Array<ConversationType>;
   friends: Array<ConversationType>;
+  receivedFriendsRequest: Array<ConversationListItemPropsType>;
+  sentFriendsRequest: Array<ConversationListItemPropsType>;
 } => {
   const values = Object.values(lookup);
   const sorted = values.sort(comparator);
@@ -104,6 +107,8 @@ export const _getLeftPaneLists = (
   const conversations: Array<ConversationType> = [];
   const archivedConversations: Array<ConversationType> = [];
   const friends: Array<ConversationType> = [];
+  const receivedFriendsRequest: Array<ConversationListItemPropsType> = [];
+  const sentFriendsRequest: Array<ConversationListItemPropsType> = [];
 
   const max = sorted.length;
   for (let i = 0; i < max; i += 1) {
@@ -120,6 +125,13 @@ export const _getLeftPaneLists = (
       friends.push(conversation);
     }
 
+    if (conversation.hasReceivedFriendRequest) {
+      receivedFriendsRequest.push(conversation);
+    }
+    if (conversation.hasSentFriendRequest) {
+      sentFriendsRequest.push(conversation);
+    }
+
     if (!conversation.activeAt) {
       continue;
     }
@@ -131,7 +143,13 @@ export const _getLeftPaneLists = (
     }
   }
 
-  return { conversations, archivedConversations, friends };
+  return {
+    conversations,
+    archivedConversations,
+    friends,
+    receivedFriendsRequest,
+    sentFriendsRequest,
+  };
 };
 
 export const getLeftPaneLists = createSelector(