feat(slimbar): create unread user component

components/ui/Unread/Unread.html

@@ -0,0 +1,14 @@
+<div
+  class="has-tooltip-right has-tooltip-primary unread"
+  :data-tooltip="user.name"
+  @contextmenu="contextMenu"
+  v-on:click="navigateToUser"
+>
+  <UiCircle
+    :type="src ? 'image' : 'random'"
+    :seed="user.address"
+    :source="src"
+    :size="40"
+  />
+  <span class="unread-label" v-if="user.unreadCount > 0">{{user.unreadCount > 99 ? "99+" : user.unreadCount}}</span>
+</div>

components/ui/Unread/Unread.less

@@ -0,0 +1,29 @@
+.unread{
+  position: relative;
+  cursor: pointer;
+  &-label {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: @micro-text-size;
+    &:extend(.background-primary);
+    border-radius: 20px;
+    line-height: 1;
+    padding: 0.16rem 0.33rem;
+    &:extend(.font-primary);
+    font-family: @primary-font;
+    border: 2px solid @darker;
+  }
+  .circle{
+    transition: 0.2s ease-in-out;
+  }
+  &:hover{
+    .circle{
+      border: 3px solid @purple;
+    }
+  }
+}

components/ui/Unread/Unread.vue

@@ -0,0 +1,64 @@
+<template src="./Unread.html"></template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { User } from '~/types/ui/user'
+import ContextMenu from '~/components/mixins/UI/ContextMenu'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    testFunc: () => void
+    navigateToUser: () => void
+  }
+}
+
+export default Vue.extend({
+  name: 'Unread',
+  mixins: [ContextMenu],
+  props: {
+    user: {
+      type: Object as PropType<User>,
+      default: () => ({
+        name: '',
+        address: '',
+        profilePicture: '',
+        unreadCount: 0,
+      }),
+      required: true,
+    },
+  },
+  data() {
+    return {
+      contextMenuValues: [
+        { text: this.$t('context.send'), func: this.testFunc },
+        { text: this.$t('context.voice'), func: this.testFunc },
+        { text: this.$t('context.video'), func: this.testFunc },
+        { text: this.$t('context.profile'), func: this.testFunc },
+        { text: this.$t('context.remove'), func: this.testFunc },
+      ],
+    }
+  },
+  computed: {
+    src(): string {
+      const hash = this.user?.profilePicture
+      return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
+    },
+  },
+  methods: {
+    testFunc() {
+      this.$Logger.log('User Context', 'Test func')
+    },
+    navigateToUser() {
+      if (
+        this.$route.params.address === this.user.address &&
+        this.$device.isMobile
+      ) {
+        this.$store.commit('ui/showSidebar', false)
+      }
+      this.$router.push(`/chat/direct/${this.user.address}`)
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./Unread.less"></style>

components/views/navigation/sidebar/Sidebar.html

@@ -60,7 +60,7 @@
     <Slimbar
       v-if="$device.isMobile"
       :servers="$mock.servers"
-      :unreads="$mock.unreads"
+      :unreads="users"
       :open-modal="toggleModal"
       horizontal
     />
@@ -159,7 +159,6 @@
   </div>
 
   <div class="filler"></div>
-
   <div class="controls">
     <SidebarLive />
     <SidebarControls />

components/views/navigation/slimbar/Slimbar.html

@@ -18,17 +18,13 @@
     <UiScroll verticalScroll v-if="!horizontal">
       <div id="list-container">
         <UiHorizontalRule v-if="unreads.length > 0" />
-
         <div
-          class="unread"
+          class="unreads"
           v-for="user in unreads"
-          v-on:click="$router.push('/chat/direct')"
         >
-          <UiCircle type="random" :size="40" :seed="user.address" />
-          <span class="label">{{user.count}}</span>
+          <Unread :key="user.address" :user="user"/>
         </div>
-
-        <UiHorizontalRule v-if="unreads.length > 0" />
+        <UiHorizontalRule v-if="servers.length > 0" />
         <UiComingSoon :tooltipText="$t('coming_soon.communities')">
           <div
             class="server"
@@ -47,13 +43,10 @@
     </UiScroll>
     <div id="list-container" v-else>
       <div
-        class="unread has-tooltip-bottom has-tooltip-primary"
+        class="unreads"
         v-for="user in unreads"
-        v-on:click="$router.push('/chat/direct')"
-        :data-tooltip="user.name"
       >
-        <UiCircle type="random" :size="40" :seed="user.address" />
-        <span class="label">{{user.count}}</span>
+        <Unread :key="user.address" :user="user"/>
       </div>
       <div
         class="server has-tooltip-bottom has-tooltip-primary"

components/views/navigation/slimbar/Slimbar.less

@@ -31,29 +31,15 @@
     }
   }
 
-  .unread {
+  .unreads {
     position: relative;
-    .circle {
-      margin: 0.25rem 0;
-    }
-    .label {
-      position: absolute;
-      bottom: 2px;
-      right: -2px;
-      font-size: @micro-text-size;
-      &:extend(.background-primary);
-      border-radius: @half;
-      line-height: 1.2;
-      padding: 0.1rem 0.27rem;
-      text-align: center;
-      &:extend(.font-primary);
-      font-family: @primary-font;
-      border: 2px solid @darker;
+    .unread {
+      margin: 0.5rem 0;
     }
   }
 
   .server,
-  .unread {
+  .unreads {
     // width: 50px;
     z-index: @base-z-index + 1;
   }
@@ -108,29 +94,15 @@
     scrollbar-width: none;
   }
 
-  .unread {
+  .unreads {
     position: relative;
-    .circle {
+    .unread {
       margin: 0 @light-spacing;
     }
-    .label {
-      position: absolute;
-      bottom: 2px;
-      right: -2px;
-      font-size: @micro-text-size;
-      &:extend(.background-primary);
-      border-radius: @half;
-      line-height: 1.2;
-      padding: 0.1rem 0.27rem;
-      text-align: center;
-      &:extend(.font-primary);
-      font-family: @primary-font;
-      border: 2px solid @darker;
-    }
   }
 
   .server,
-  .unread {
+  .unreads {
     // width: 50px;
     z-index: @base-z-index + 1;
   }

components/views/navigation/slimbar/Slimbar.vue

@@ -1,27 +1,36 @@
 <template src="./Slimbar.html" />
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
 import { mapState } from 'vuex'
 import { SettingsIcon, PlusIcon, SatelliteIcon } from 'satellite-lucide-icons'
 import { ModalWindows } from '~/store/ui/types'
+import { User } from '~/types/ui/user'
+import Unread from '~/components/ui/Unread/Unread.vue'
+import { Sounds } from '~/libraries/SoundManager/SoundManager'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    toggleModal: (modalName: string) => void
+    unsubscribe: () => void
+  }
+}
 
 export default Vue.extend({
   components: {
     SettingsIcon,
     PlusIcon,
     SatelliteIcon,
+    Unread,
   },
   props: {
     horizontal: {
       type: Boolean,
       default: false,
     },
     unreads: {
-      type: Array,
-      default() {
-        return []
-      },
+      type: Array as PropType<Array<User>>,
+      default: () => [],
     },
     servers: {
       type: Array,
@@ -39,6 +48,16 @@ export default Vue.extend({
     ...mapState(['ui']),
     ModalWindows: () => ModalWindows,
   },
+  created() {
+    this.unsubscribe = this.$store.subscribe((mutation) => {
+      if (mutation.type === 'friends/addFriend') {
+        this.$store.dispatch('sounds/playSound', Sounds.NEW_MESSAGE)
+      }
+    })
+  },
+  beforeDestroy() {
+    this.unsubscribe()
+  },
   methods: {
     /**
      * @method toggleModal

layouts/chat.vue

@@ -20,7 +20,7 @@
           <Slimbar
             v-if="!$device.isMobile"
             :servers="$mock.servers"
-            :unreads="$mock.unreads"
+            :unreads="friends.all"
             :open-modal="toggleModal"
           />
           <Sidebar

layouts/files.vue

@@ -19,7 +19,7 @@
           <Slimbar
             v-if="!$device.isMobile"
             :servers="$mock.servers"
-            :unreads="$mock.unreads"
+            :unreads="friends.all"
             :open-modal="toggleModal"
           />
           <Sidebar

layouts/friends.vue

@@ -18,7 +18,7 @@
           <Slimbar
             v-if="!$device.isMobile"
             :servers="$mock.servers"
-            :unreads="$mock.unreads"
+            :unreads="friends.all"
             :open-modal="toggleModal"
           />
           <Sidebar

layouts/server.vue

@@ -19,7 +19,7 @@
           <Slimbar
             v-if="!$device.isMobile"
             :servers="$mock.servers"
-            :unreads="$mock.unreads"
+            :unreads="friends.all"
             :open-modal="toggleModal"
           />
           <ServerSidebar