chore: Add "Coming Soon" overlay to voice channel selector (#11835)

# Pull Request Template

###  Screenshots

**Dark**
<img width="867" alt="image"
src="https://github.com/user-attachments/assets/74f6da33-1fa1-4472-84b8-5d097f4a00e1"
/>

**Light**
<img width="867" alt="image"
src="https://github.com/user-attachments/assets/5e6d5a4c-cd95-462b-baea-ff3ac333153c"
/>

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

.eslintrc.js

@@ -103,6 +103,7 @@ module.exports = {
           '⌘',
           '📄',
           '🎉',
+          '🚀',
           '💬',
           '👥',
           '📥',

app/javascript/dashboard/components/ChannelSelector.vue

@@ -9,20 +9,31 @@ export default {
       type: String,
       required: true,
     },
+    isComingSoon: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
 
 <template>
   <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="relative bg-n-background cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-n-weak hover:border-n-brand hover:shadow-md hover:z-50 disabled:opacity-60"
   >
     <img :src="src" :alt="title" draggable="false" class="w-1/2 my-4 mx-auto" />
-    <h3
+    <h3 class="text-n-slate-12 text-base text-center capitalize">
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
       {{ title }}
     </h3>
+
+    <div
+      v-if="isComingSoon"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-md bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95"
+    >
+      <span class="text-n-slate-12 font-medium text-base">
+        {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
+      </span>
+    </div>
   </button>
 </template>
 
@@ -33,7 +44,7 @@ export default {
   }
 
   &:hover {
-    @apply border-transparent shadow-none cursor-not-allowed;
+    @apply border-n-strong shadow-none cursor-not-allowed;
   }
 }
 </style>

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -57,6 +57,12 @@ export default {
         'voice',
       ].includes(key);
     },
+    isComingSoon() {
+      const { key } = this.channel;
+      // Show "Coming Soon" only if the channel is marked as coming soon
+      // and the corresponding feature flag is not enabled yet.
+      return ['voice'].includes(key) && !this.isActive;
+    },
   },
   methods: {
     getChannelThumbnail() {
@@ -79,6 +85,7 @@ export default {
     :class="{ inactive: !isActive }"
     :title="channel.name"
     :src="getChannelThumbnail()"
+    :is-coming-soon="isComingSoon"
     @click="onItemClick"
   />
 </template>

app/javascript/dashboard/i18n/locale/en/components.json

@@ -49,5 +49,8 @@
     "HOURS": "Hours",
     "DAYS": "Days",
     "PLACEHOLDER": "Enter duration"
+  },
+  "CHANNEL_SELECTOR": {
+    "COMING_SOON": "Coming Soon!"
   }
 }