From 3d914065e02bb4e744278fb16749909808419fbd Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Wed, 13 May 2026 16:28:40 +0530
Subject: [PATCH] feat(inbox): preserve channel logo with voice badge in
 inbox/sidebar

Inboxes with voice enabled were showing a generic phone icon in the
inbox list and sidebar, hiding the underlying channel (e.g. WhatsApp).
Keep the native channel logo and overlay an audio-waveform badge when
voice is enabled. The native Twilio Voice inbox (TwilioSms with no
WhatsApp medium) still resolves to the phone icon.
---
 .../components-next/icon/ChannelIcon.vue         | 16 ++++++++++++++--
 .../dashboard/components-next/icon/provider.js   | 12 +++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
index 68102dbd3..711088312 100644
--- a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { toRef } from 'vue';
+import { computed, toRef } from 'vue';
+import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 import { useChannelIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';
 
@@ -10,9 +11,20 @@ const props = defineProps({
   },
 });
 
+defineOptions({ inheritAttrs: false });
+
 const channelIcon = useChannelIcon(toRef(props, 'inbox'));
+const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
 </script>
 
 <template>
-  <Icon :icon="channelIcon" />
+  <span class="relative inline-flex" v-bind="$attrs">
+    <Icon :icon="channelIcon" class="size-full" />
+    <span
+      v-if="hasVoiceBadge"
+      class="absolute -top-1 -right-1 inline-flex items-center justify-center size-2.5 rounded-full bg-n-alpha-2 ring-1 ring-n-solid-1"
+    >
+      <Icon icon="i-lucide-audio-lines" class="size-1.5 text-n-slate-10" />
+    </span>
+  </span>
 </template>
diff --git a/app/javascript/dashboard/components-next/icon/provider.js b/app/javascript/dashboard/components-next/icon/provider.js
index d7a9c93ad..d1f2793b1 100644
--- a/app/javascript/dashboard/components-next/icon/provider.js
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -1,5 +1,4 @@
 import { computed } from 'vue';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 
 export function useChannelIcon(inbox) {
   const channelTypeIconMap = {
@@ -38,8 +37,15 @@ export function useChannelIcon(inbox) {
       icon = 'i-woot-whatsapp';
     }
 
-    // Special case for voice-enabled inboxes (Twilio, WhatsApp, etc.)
-    if (isVoiceCallEnabled(inboxDetails)) {
+    // Native Twilio voice inbox: a TwilioSms with voice enabled (and no WhatsApp medium)
+    // is presented as a Voice channel, so show the phone icon.
+    const voiceEnabled =
+      inboxDetails.voice_enabled || inboxDetails.voiceEnabled;
+    if (
+      type === 'Channel::TwilioSms' &&
+      voiceEnabled &&
+      inboxDetails.medium !== 'whatsapp'
+    ) {
       icon = 'i-woot-voice';
     }