diff --git a/components/ui/User/State/State.less b/components/ui/User/State/State.less
index 1a127881b8..631359cb23 100644
--- a/components/ui/User/State/State.less
+++ b/components/ui/User/State/State.less
@@ -10,18 +10,13 @@
--circle-radius: 10px;
}
- &.has-status {
- .circle {
- mask: radial-gradient(
- circle calc(var(--circle-radius) + var(--border-width)) at 86% 86%,
- #0000 98%,
- #000
- )
- 100% 100%/100% 100% no-repeat;
- }
- }
-
.circle {
+ mask: radial-gradient(
+ circle calc(var(--circle-radius) + var(--border-width)) at 86% 86%,
+ #0000 98%,
+ #000
+ )
+ 100% 100%/100% 100% no-repeat;
overflow: hidden;
}
diff --git a/components/ui/User/State/State.vue b/components/ui/User/State/State.vue
index 50050b9902..6cb3bde029 100644
--- a/components/ui/User/State/State.vue
+++ b/components/ui/User/State/State.vue
@@ -3,7 +3,7 @@
class="user-state"
data-cy="user-state"
:style="`width:${size}px; height:${size}px`"
- :class="{ 'is-large': size > 36, 'has-status': showStatus }"
+ :class="{ 'is-large': size > 36 }"
>
-
+
+
+
diff --git a/components/views/friends/friend/Friend.html b/components/views/friends/friend/Friend.html
index 4ab571c0ba..98ccb9a913 100644
--- a/components/views/friends/friend/Friend.html
+++ b/components/views/friends/friend/Friend.html
@@ -1,5 +1,11 @@
-
+
+
diff --git a/components/views/friends/friend/Friend.vue b/components/views/friends/friend/Friend.vue
index 348305a054..e5864ad6c8 100644
--- a/components/views/friends/friend/Friend.vue
+++ b/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)