chore(userstatus): fixed user state display while changing chat

components/ui/Unread/Unread.vue

@@ -71,12 +71,18 @@ export default Vue.extend({
       this.$store.dispatch('ui/showProfile', this.user)
     },
     navigateToUser() {
-      if (
-        this.$route.params.address === this.user.address &&
-        this.$device.isMobile
-      ) {
-        this.$store.commit('ui/showSidebar', false)
+      if (this.$route.params.address === this.user.address) {
+        if (this.$device.isMobile) {
+          this.$store.commit('ui/showSidebar', false)
+        }
+        return
       }
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.user.address,
+        type: 'friend',
+        participants: [this.user],
+        calling: false,
+      })
       this.$router.push(`/chat/direct/${this.user.address}`)
     },
   },

components/views/group/clickable/Clickable.html

@@ -1,5 +1,6 @@
 <div
   class="group"
+  v-bind:class="{ 'is-selected' : isSelected}"
   @contextmenu="contextMenu"
   v-on:click="navigateToGroup(group.id)"
 >

components/views/group/clickable/Clickable.less

@@ -1,4 +1,8 @@
 .group {
+  &.is-selected {
+    &:extend(.background-semitransparent-lighter);
+  }
+
   .status {
     path {
       stroke: @midground;

components/views/group/clickable/Clickable.vue

@@ -4,7 +4,6 @@
 import Vue, { PropType } from 'vue'
 import ContextMenu from '~/components/mixins/UI/ContextMenu'
 import { Group } from '~/store/groups/types'
-import { Message } from '~/types/textile/mailbox'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -23,6 +22,11 @@ export default Vue.extend({
       }),
       required: true,
     },
+    isSelected: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   data() {
     return {
@@ -46,6 +50,12 @@ export default Vue.extend({
      */
     navigateToGroup(address: string) {
       this.$router.push(`/chat/groups/${address}`)
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.group.id,
+        type: 'group',
+        calling: false,
+        participants: this.group.members,
+      })
     },
   },
 })

components/views/navigation/sidebar/Sidebar.html

@@ -111,7 +111,12 @@
               :isTyping="ui.isTyping.address === thing.address"
               :isSelected="thing.address === $route.params.address"
             />
-            <GroupClickable v-else :group="thing" :key="thing.id" />
+            <GroupClickable
+              v-else
+              :group="thing"
+              :key="thing.id"
+              :isSelected="thing.id === $route.params.id"
+            />
           </div>
         </div>
         <div

components/views/user/User.vue

@@ -178,6 +178,12 @@ export default Vue.extend({
         return
       }
 
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.user.address,
+        type: 'friend',
+        participants: [this.user],
+        calling: false,
+      })
       this.$router.push(`/chat/direct/${this.user.address}`)
     },
     async handleShowProfile() {