From a985010a404a6f7042d80a791ceb8b26d6ff5cc6 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Wed, 13 May 2026 15:02:28 +0530
Subject: [PATCH] feat(inbox): show voice badge on channel cards when voice is
 enabled

Adds an audio-waveform badge overlay on the WhatsApp and Voice (Twilio)
channel cards in the new-inbox selector when the channel_voice feature
flag is enabled on the account.
---
 .../dashboard/components/ChannelSelector.vue  | 20 +++++++++++++++----
 .../components/widgets/ChannelItem.vue        |  8 ++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue
index ef5256577..e6a67cd7e 100644
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -24,6 +24,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  hasVoiceBadge: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { t } = useI18n();
@@ -38,10 +42,18 @@ const { t } = useI18n();
       'cursor-not-allowed disabled:opacity-80': isComingSoon,
     }"
   >
-    <div
-      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
-    >
-      <Icon :icon="icon" class="text-n-slate-10 size-6" />
+    <div class="relative">
+      <div
+        class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
+      >
+        <Icon :icon="icon" class="text-n-slate-10 size-6" />
+      </div>
+      <div
+        v-if="hasVoiceBadge"
+        class="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-n-alpha-2 ring-2 ring-n-solid-1"
+      >
+        <Icon icon="i-lucide-audio-lines" class="text-n-slate-10 size-2.5" />
+      </div>
     </div>
 
     <div class="flex flex-col items-start gap-1.5">
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index 2cbad72c5..07759183d 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -81,6 +81,13 @@ const isBeta = computed(() => {
   return ['tiktok', 'voice'].includes(props.channel.key);
 });
 
+const hasVoiceBadge = computed(() => {
+  return (
+    ['voice', 'whatsapp'].includes(props.channel.key) &&
+    !!props.enabledFeatures.channel_voice
+  );
+});
+
 const onItemClick = () => {
   if (isActive.value) {
     emit('channelItemClick', props.channel.key);
@@ -95,6 +102,7 @@ const onItemClick = () => {
     :icon="channel.icon"
     :is-coming-soon="isComingSoon"
     :is-beta="isBeta"
+    :has-voice-badge="hasVoiceBadge"
     :disabled="!isActive"
     @click="onItemClick"
   />