feat(Friends): combine friends routes (#801)

assets/styles/platforms/iOS.less

@@ -1,6 +1,6 @@
 @supports (-webkit-touch-callout: none) {
   html {
-    min-height: calc(@full + env(safe-area-inset-top) - 11px);
+    min-height: calc(@full + env(safe-area-inset-top));
     padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
   }
   #app {

assets/styles/themes/moonless_night.less

@@ -1,7 +1,7 @@
 .moonless_night {
   //------------- Colors -------------
   @white: #fff;
-  @flair: #2ed573;
+  @flair: #B53471;
 
   @background: #15161d;
   @midground: #000;

components/views/friends/add/Add.less

@@ -10,6 +10,7 @@
     margin: 0 @normal-spacing;
   }
   padding: @normal-spacing;
+  padding-top: 0;
 }
 
 @media only screen and (max-width: @mobile-breakpoint) {

mock/friends.ts

@@ -65,12 +65,12 @@ export const Requests = [
 ]
 
 export const Blocked = [
-  // {
-  //   name: 'Toxic McToxicson',
-  //   address: '0xdfeeb223bafbe5c5271415c75aecd68c21fe3d7f',
-  //   status: 'Reeeeeeeee',
-  //   state: 'online',
-  // },
+  {
+    name: 'Toxic McToxicson',
+    address: '0xdfeeb223bafbe5c5271415c75aecd68c21fe3d7f',
+    status: 'Reeeeeeeee',
+    state: 'online',
+  },
 ]
 
 export const Friend = {

pages/friends/list/FriendsList.html

@@ -1,49 +1,57 @@
 <div id="friends-list" v-scroll-lock="true" class="hidden-scroll">
   <UiScroll verticalScroll enableWrap scrollbarVisibility="scroll">
-    <FriendsNav :setRoute="setRoute" :route="route" />
-    <div v-if="$data.route === 'active'">
-      <div v-if="dataState.friends !== DataStateType.Loading">
-        <div v-for="entry in Object.entries(alphaSortedFriends)">
-          <span class="alpha-divider">{{entry[0].toUpperCase()}}</span>
-          <div v-for="friend in entry[1]">
-            <FriendsFriend :friend="friend" :key="friend.address" />
+    <!--<FriendsNav :setRoute="setRoute" :route="route" />-->
+    <div class="columns">
+      <div class="column is-half-desktop">
+        <!-- Friends Add -->
+        <FriendsAdd />
+        <!-- Friend Requests -->
+        <div v-if="friends.incomingRequests.length" class="padded_divider">
+          <TypographyHorizontalRuleText plaintext :value="$t('friends.requests')" />
+        </div>
+        <FriendsFriend
+            v-for="friend in friends.incomingRequests"
+            :friend="{
+              name: friend.userInfo.name,
+              address: friend.from,
+              state: 'offline',
+              status: friend.userInfo.status,
+              request: friend
+            }"
+            :key="friend.from"
+            request
+          />
+      </div>
+      <div class="column is-half-desktop">
+        <!-- Friends List -->
+        <div v-if="Object.entries(alphaSortedFriends).length && $device.isMobile" class="padded_divider">
+          <TypographyHorizontalRuleText plaintext :value="$t('friends.all')" />
+        </div>
+        <div v-if="dataState.friends !== DataStateType.Loading">
+          <div v-for="entry in Object.entries(alphaSortedFriends)">
+            <span class="alpha-divider">{{entry[0].toUpperCase()}}</span>
+            <FriendsFriend v-for="friend in entry[1]" :friend="friend" :key="friend.address" />
+          </div>
+          <div
+            class="loading-container"
+            v-if="dataState.friends === DataStateType.Updating"
+          >
+            <UiLoadersUpdating />
           </div>
         </div>
-        <div
-          class="loading-container"
-          v-if="dataState.friends === DataStateType.Updating"
-        >
-          <UiLoadersUpdating />
+        <div v-else>
+          <UiLoadersFriend :count="5" />
         </div>
+        <div v-if="Object.entries($mock.blocked).length" class="padded_divider">
+          <TypographyHorizontalRuleText plaintext :value="$t('friends.blocked')" />
+        </div>
+        <FriendsFriend
+          v-for="friend in $mock.blocked"
+          :friend="friend"
+          :key="friend.address"
+          blocked
+        />
       </div>
-      <div v-else>
-        <UiLoadersFriend :count="5" />
-      </div>
-    </div>
-    <div v-if="$data.route === 'requests'">
-      <FriendsFriend
-        v-for="friend in friends.incomingRequests"
-        :friend="{
-          name: friend.userInfo.name,
-          address: friend.from,
-          state: 'offline',
-          status: friend.userInfo.status,
-          request: friend
-        }"
-        :key="friend.from"
-        request
-      />
-    </div>
-    <div v-if="$data.route === 'blocked'">
-      <FriendsFriend
-        v-for="friend in $mock.blocked"
-        :friend="friend"
-        :key="friend.address"
-        blocked
-      />
-    </div>
-    <div v-if="$data.route === 'add'">
-      <FriendsAdd />
     </div>
   </UiScroll>
 </div>

pages/friends/list/FriendsList.less

@@ -7,8 +7,10 @@
   font-family: @primary-font;
 }
 
-#chat {
-  &:extend(.light-padding);}
+
+#friends {
+  padding: @normal-spacing 0 0 0;
+}
 
 .scrolling {
   height: @full;
@@ -17,3 +19,7 @@
 .loading-container {
   text-align: center;
 }
+
+.padded_divider {
+  padding: @light-spacing @normal-spacing;
+}