feat(inboxes): show disabled badge on inbox names

app/javascript/dashboard/components-next/Conversation/InboxName.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
 
 defineProps({
@@ -7,13 +8,21 @@ defineProps({
     default: () => {},
   },
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
-  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+  <div :title="inbox.name" class="flex items-center gap-1 min-w-0">
     <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
     <span class="truncate text-body-main text-n-slate-11">
       {{ inbox.name }}
     </span>
+    <span
+      v-if="inbox.active === false"
+      class="inline-flex h-4 shrink-0 items-center rounded-md bg-n-alpha-2 px-1 text-label-mini font-medium text-n-slate-11"
+    >
+      {{ t('INBOX_MGMT.DISABLED') }}
+    </span>
   </div>
 </template>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
 
 defineProps({
@@ -7,13 +8,21 @@ defineProps({
     default: () => {},
   },
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
-  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+  <div :title="inbox.name" class="flex items-center gap-1 min-w-0">
     <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
     <span class="truncate text-label-small text-n-slate-11">
       {{ inbox.name }}
     </span>
+    <span
+      v-if="inbox.active === false"
+      class="inline-flex h-4 shrink-0 items-center rounded-md bg-n-alpha-2 px-1 text-label-mini font-medium text-n-slate-11"
+    >
+      {{ t('INBOX_MGMT.DISABLED') }}
+    </span>
   </div>
 </template>

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

@@ -4,6 +4,7 @@
     "DESCRIPTION": "A channel is the mode of communication your customer chooses to interact with you. An inbox is where you manage interactions for a specific channel. It can include communications from various sources such as email, live chat, and social media.",
     "LEARN_MORE": "Learn more about inboxes",
     "COUNT": "{n} inbox | {n} inboxes",
+    "DISABLED": "Disabled",
     "SEARCH_PLACEHOLDER": "Search inboxes...",
     "NO_RESULTS": "No inboxes found matching your search",
     "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -142,10 +142,20 @@ const openDelete = inbox => {
             >
               <ChannelIcon class="size-6 text-n-slate-10" :inbox="inbox" />
             </div>
-            <div class="flex flex-col items-start gap-1">
-              <span class="block text-heading-3 text-n-slate-12 capitalize">
-                {{ inbox.name }}
-              </span>
+            <div class="flex flex-col items-start gap-1 min-w-0">
+              <div class="flex items-center gap-1.5 min-w-0">
+                <span
+                  class="block text-heading-3 text-n-slate-12 capitalize truncate"
+                >
+                  {{ inbox.name }}
+                </span>
+                <span
+                  v-if="inbox.active === false"
+                  class="inline-flex h-5 shrink-0 items-center rounded-md bg-n-alpha-2 px-1.5 text-label-mini font-medium text-n-slate-11"
+                >
+                  {{ $t('INBOX_MGMT.DISABLED') }}
+                </span>
+              </div>
               <ChannelName
                 :channel-type="inbox.channel_type"
                 :medium="inbox.medium"