fix(friends): online status is hidden if not friend (#3680)

components/ui/User/State/State.vue

@@ -29,6 +29,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
+
 import { SmartphoneIcon } from 'satellite-lucide-icons'
 import { User } from '~/types/ui/user'
 

components/views/friends/friend/Friend.html

@@ -1,5 +1,11 @@
 <div class="friend" data-cy="friend">
-  <UiUserState :user="friend" :src="src" />
+  <UiUserState v-if="showStatus" :user="friend" :src="src" />
+  <UiCircle
+    v-else
+    :type="src ? 'image' : 'random'"
+    :seed="friend.address"
+    :source="src"
+  />
   <div class="description">
     <TypographySubtitle :size="6" :text="friend.name" data-cy="friend-name" />
     <TypographyText :text="friend.status" />

components/views/friends/friend/Friend.vue

@@ -10,6 +10,8 @@ import {
   CircleIcon,
   SmartphoneIcon,
 } from 'satellite-lucide-icons'
+import { mapState, mapGetters } from 'vuex'
+
 import { ContextMenuItem } from '~/store/ui/types'
 import { Friend } from '~/types/ui/friends'
 import ContextMenu from '~/components/mixins/UI/ContextMenu'
@@ -55,6 +57,8 @@ export default Vue.extend({
     }
   },
   computed: {
+    ...mapGetters('friends', ['friendExists']),
+    ...mapState(['accounts']),
     src(): string {
       const hash =
         this.friend?.photoHash ||
@@ -65,6 +69,12 @@ export default Vue.extend({
     contextMenuValues(): ContextMenuItem[] {
       return [{ text: this.$t('context.remove'), func: this.removeFriend }]
     },
+    showStatus(): boolean {
+      return (
+        this.friendExists(this.$props.friend.address) ||
+        this.$props.friend.address === this.accounts.active
+      )
+    },
   },
   beforeDestroy() {
     this.$store.commit('ui/toggleContextMenu', false)