You can now see pending friend requests

src/components/Friends.vue

@@ -2,7 +2,7 @@
 q-toolbar.bg-primary.text-white.shadow-2
   q-toolbar-title Contacts
 q-list(bordered)
-  q-item.q-my-sm(v-for='(user, key) in users', :key='key', :to='"/chat/" + key', clickable)
+  q-item.q-my-sm(v-for='(user, key) in friends', :key='key', :to='"/chat/" + key', clickable)
     q-item-section(avatar)
       q-avatar(color='primary', text-color='white')
         | {{ user.name.charAt(0) }}
@@ -11,6 +11,16 @@ q-list(bordered)
       q-item-label(caption, lines='1') @{{ user.username }}
     q-item-section(side)
       q-icon(name='chat_bubble', :color='user.online ? "light-green-6" : "blue-grey-5"')
+q-item.absolute-bottom.q-mb-xl(v-for='(user, key) in pending', :key='key')
+  .text-weight-light.text-subtitle1 {{ user }}
+    q-icon.q-pl-sm.cursor-pointer(
+      @click='acceptRequest()',
+      name='check_circle_outline',
+      color='green',
+      left,
+      size='1.5rem'
+    )
+    q-icon.cursor-pointer(@click='denyRequest()', name='highlight_off', color='red', size='1.5rem')
 q-toolbar.absolute-bottom.bg-primary.text-white.shadow-2
   q-btn(icon='person_add', flat, dense, label='Add Friends')
   q-popup-edit.full-width(v-model='usernameInput', :cover='false', v-slot='scope', @keyup.enter='showNotif()')
@@ -43,11 +53,17 @@ export default {
           }
         ]
       })
+    },
+    acceptRequest() {
+      console.log('accepted')
+    },
+    denyRequest() {
+      console.log('denied')
     }
   },
 
   computed: {
-    ...mapState('firebase', ['users'])
+    ...mapState('firebase', ['friends', 'pending'])
   }
 }
 </script>