feat(sidebar): add context call option

assets/styles/base.less

@@ -185,14 +185,6 @@ a.link {
   &:extend(.font-flair);
 }
 
-.context-menu {
-  p {
-    &:hover {
-      &:extend(.background-flair);
-    }
-  }
-}
-
 .simple-menu {
   .active {
     &:extend(.background-flair);

components/interactables/ContextMenu/ContextMenu.html

@@ -2,7 +2,7 @@
   class="context-menu"
   data-cy="context-menu"
   ref="contextMenu"
-  v-bind:style="{ left: ui.contextMenuPosition.x + 'px', 
+  :style="{ left: ui.contextMenuPosition.x + 'px', 
   top: ui.contextMenuPosition.y + 'px' }"
   v-click-outside="close"
 >
@@ -11,7 +11,7 @@
     <p
       v-if="item.text !== 'quickReaction'"
       data-cy="context-menu-option"
-      :class="{'red': item.type === 'danger'}"
+      :class="item?.type"
       @click="handle(item.func)"
     >
       {{ item.text }}

components/interactables/ContextMenu/ContextMenu.less

@@ -20,9 +20,19 @@
     font-size: 14px;
     font-family: @secondary-font;
     &:hover {
-      &.red {
-        &:extend(.font-secondary);
-        &:extend(.background-danger);
+      background: @flair-color;
+    }
+    &.danger {
+      color: @red;
+      &:hover {
+        color: @light;
+        background: @red;
+      }
+    }
+    &.disabled {
+      opacity: 0.7;
+      &:hover {
+        background: none;
       }
     }
   }

components/ui/ContextMenu/ContextMenu.vue

@@ -47,10 +47,10 @@
             v-if="item.text !== 'quickReaction'"
             :key="String(item.text) + '-action'"
             class="action-button"
-            :class="{ danger: item.type === 'danger' }"
+            :class="item?.type"
             @click="(e) => handleAction(e, item.func)"
           >
-            <TypographyText :class="{ danger: item.type === 'danger' }">
+            <TypographyText :color="item?.type === 'danger' ? 'error' : 'body'">
               {{ item.text }}
             </TypographyText>
           </button>
@@ -137,18 +137,17 @@ export default Vue.extend({
     margin: 0 @normal-spacing;
 
     &:extend(.background-semitransparent-dark);
-    &:extend(.font-secondary);
     &:extend(.round-corners);
 
-    .danger {
-      color: @red;
-    }
-
     .action-button {
       height: 56px;
       justify-content: center;
       align-items: center;
-      width: @full;
+      width: 100%;
+
+      &.disabled {
+        opacity: 0.7;
+      }
 
       &:not(:last-child) {
         border-bottom: 0.5px solid @foreground;

components/views/navigation/sidebar/list/item/Item.vue

@@ -66,20 +66,28 @@ export default Vue.extend({
     contextMenuValues(): ContextMenuItem[] {
       return this.conversation?.type === 'direct'
         ? [
-            { text: this.$t('context.send'), func: this.openConversation },
             {
-              text: this.$t('context.profile'),
-              func: () =>
-                this.$store.dispatch('ui/showProfile', this.conversation),
+              text: this.$t('context.voice'),
+              func: this.status === 'online' ? this.call : () => {},
+              type: this.status === 'online' ? 'primary' : 'disabled',
             },
+            // {
+            //   text: this.$t('context.profile'),
+            //   func: () => this.$store.dispatch('ui/showProfile', this.user),
+            // },
             {
               text: this.$t('context.remove'),
               func: this.removeFriend,
               type: 'danger',
             },
           ]
         : [
-            { text: this.$t('context.send'), func: this.openConversation },
+            {
+              text: this.$t('context.voice'),
+              func: () => {},
+              type: 'disabled',
+            },
+
             {
               text: this.$t('context.leave_group'),
               func: this.leaveGroup,
@@ -193,6 +201,15 @@ export default Vue.extend({
       }
       this.$router.push(`/chat/${this.conversation.id}`)
     },
+    async call() {
+      await iridium.webRTC
+        .call({
+          recipient: this.userId,
+          conversationId: this.conversationId,
+          kinds: ['audio'],
+        })
+        .catch((e) => this.$toast.error(this.$t(e.message) as string))
+    },
     /**
      * @method markdownToHtml
      * @description convert text markdown to html

locales/en-US.js

@@ -862,8 +862,7 @@ export default {
     rename: 'Rename',
     delete: 'Delete',
     // SidebarListItem
-    send: 'Send Message',
-    voice: 'Start Call',
+    voice: 'Call',
     video: 'Video Call',
     remove: 'Remove Friend',
     leave_group: 'Leave Group',

store/ui/types.ts

@@ -62,7 +62,7 @@ export enum SettingsRoutes {
   REALMS = 'realms',
 }
 
-export type ContextMenuItemTypes = 'primary' | 'danger'
+export type ContextMenuItemTypes = 'primary' | 'danger' | 'disabled'
 
 export interface ContextMenuItem {
   text: string | TranslateResult