Merge branch 'develop' into feat/google-play-reviews

app/javascript/dashboard/api/conversations.js

@@ -13,6 +13,10 @@ class ConversationApi extends ApiClient {
   updateLabels(conversationID, labels) {
     return axios.post(`${this.url}/${conversationID}/labels`, { labels });
   }
+
+  getUnreadCounts() {
+    return axios.get(`${this.url}/unread_counts`);
+  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/specs/conversations.spec.js

@@ -11,6 +11,7 @@ describe('#ConversationApi', () => {
     expect(conversationsAPI).toHaveProperty('delete');
     expect(conversationsAPI).toHaveProperty('getLabels');
     expect(conversationsAPI).toHaveProperty('updateLabels');
+    expect(conversationsAPI).toHaveProperty('getUnreadCounts');
   });
 
   describe('API calls', () => {
@@ -47,5 +48,12 @@ describe('#ConversationApi', () => {
         }
       );
     });
+
+    it('#getUnreadCounts', () => {
+      conversationsAPI.getUnreadCounts();
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/conversations/unread_counts'
+      );
+    });
   });
 });

app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import ChannelIcon from 'next/icon/ChannelIcon.vue';
+import SidebarUnreadBadge from './SidebarUnreadBadge.vue';
 
 const props = defineProps({
   label: {
@@ -17,6 +18,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  badgeCount: {
+    type: [Number, String],
+    default: 0,
+  },
 });
 
 const reauthorizationRequired = computed(() => {
@@ -29,6 +34,7 @@ const reauthorizationRequired = computed(() => {
     <ChannelIcon :inbox="inbox" class="size-4" />
   </span>
   <div class="flex-1 truncate min-w-0">{{ label }}</div>
+  <SidebarUnreadBadge :count="badgeCount" />
   <div
     v-if="reauthorizationRequired"
     v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { h, ref, computed, onMounted } from 'vue';
+import { h, ref, computed, onMounted, watch } from 'vue';
 import { provideSidebarContext, useSidebarResize } from './provider';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
@@ -61,6 +61,24 @@ const hasAdvancedAssignment = computed(() => {
   );
 });
 
+const hasConversationUnreadCounts = computed(() => {
+  return isFeatureEnabledonAccount.value(
+    accountId.value,
+    FEATURE_FLAGS.CONVERSATION_UNREAD_COUNTS
+  );
+});
+
+const fetchConversationUnreadCounts = ([currentAccountId, isEnabled]) => {
+  if (!currentAccountId) return;
+
+  if (!isEnabled) {
+    store.dispatch('conversationUnreadCounts/clear');
+    return;
+  }
+
+  store.dispatch('conversationUnreadCounts/get');
+};
+
 const toggleShortcutModalFn = show => {
   if (show) {
     emit('openKeyShortcutModal');
@@ -157,6 +175,15 @@ useEventListener(document, 'touchend', onResizeEnd);
 
 const inboxes = useMapGetter('inboxes/getInboxes');
 const labels = useMapGetter('labels/getLabelsOnSidebar');
+const getInboxUnreadCount = useMapGetter(
+  'conversationUnreadCounts/getInboxUnreadCount'
+);
+const getLabelUnreadCount = useMapGetter(
+  'conversationUnreadCounts/getLabelUnreadCount'
+);
+const getTeamUnreadCount = useMapGetter(
+  'conversationUnreadCounts/getTeamUnreadCount'
+);
 const teams = useMapGetter('teams/getMyTeams');
 const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
 const conversationCustomViews = useMapGetter(
@@ -173,6 +200,10 @@ onMounted(() => {
   store.dispatch('customViews/get', 'contact');
 });
 
+watch([accountId, hasConversationUnreadCounts], fetchConversationUnreadCounts, {
+  immediate: true,
+});
+
 const sortedInboxes = computed(() =>
   inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
 );
@@ -270,6 +301,7 @@ const menuItems = computed(() => {
           children: teams.value.map(team => ({
             name: `${team.name}-${team.id}`,
             label: team.name,
+            badgeCount: getTeamUnreadCount.value(team.id),
             to: accountScopedRoute('team_conversations', { teamId: team.id }),
           })),
         },
@@ -281,6 +313,7 @@ const menuItems = computed(() => {
           children: sortedInboxes.value.map(inbox => ({
             name: `${inbox.name}-${inbox.id}`,
             label: inbox.name,
+            badgeCount: getInboxUnreadCount.value(inbox.id),
             icon: h(ChannelIcon, { inbox, class: 'size-[16px]' }),
             to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
             component: leafProps =>
@@ -288,6 +321,7 @@ const menuItems = computed(() => {
                 label: leafProps.label,
                 active: leafProps.active,
                 inbox,
+                badgeCount: leafProps.badgeCount,
               }),
           })),
         },
@@ -299,6 +333,7 @@ const menuItems = computed(() => {
           children: labels.value.map(label => ({
             name: `${label.title}-${label.id}`,
             label: label.title,
+            badgeCount: getLabelUnreadCount.value(label.id),
             icon: h('span', {
               class: `size-[8px] rounded-sm`,
               style: { backgroundColor: label.color },

app/javascript/dashboard/components-next/sidebar/SidebarCollapsedPopover.vue

@@ -5,6 +5,7 @@ import { useSidebarContext } from './provider';
 import { useMapGetter } from 'dashboard/composables/store';
 import Icon from 'next/icon/Icon.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+import SidebarUnreadBadge from './SidebarUnreadBadge.vue';
 
 const props = defineProps({
   label: { type: String, required: true },
@@ -166,6 +167,7 @@ onMounted(async () => {
                         class="size-4 flex-shrink-0"
                       />
                       <span class="flex-1 truncate">{{ subChild.label }}</span>
+                      <SidebarUnreadBadge :count="subChild.badgeCount" />
                     </button>
                   </li>
                 </ul>
@@ -188,6 +190,7 @@ onMounted(async () => {
                   class="size-4 flex-shrink-0"
                 />
                 <span class="flex-1 truncate">{{ child.label }}</span>
+                <SidebarUnreadBadge :count="child.badgeCount" />
               </button>
             </li>
           </template>

app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue

@@ -3,6 +3,7 @@ import { isVNode, computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import Policy from 'dashboard/components/policy.vue';
 import { useSidebarContext } from './provider';
+import SidebarUnreadBadge from './SidebarUnreadBadge.vue';
 
 const props = defineProps({
   label: { type: String, required: true },
@@ -10,6 +11,7 @@ const props = defineProps({
   icon: { type: [String, Object], default: null },
   active: { type: Boolean, default: false },
   component: { type: Function, default: null },
+  badgeCount: { type: [Number, String], default: 0 },
 });
 
 const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
@@ -39,15 +41,14 @@ const shouldRenderComponent = computed(() => {
       <component
         :is="component"
         v-if="shouldRenderComponent"
-        :label
-        :icon
-        :active
+        v-bind="{ label, icon, active, badgeCount }"
       />
       <template v-else>
         <span v-if="icon" class="size-4 grid place-content-center rounded-full">
           <Icon :icon="icon" class="size-4 inline-block" />
         </span>
         <div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
+        <SidebarUnreadBadge :count="badgeCount" />
       </template>
     </component>
   </Policy>

app/javascript/dashboard/components-next/sidebar/SidebarUnreadBadge.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  count: { type: [Number, String], default: 0 },
+});
+
+const normalizedCount = computed(() => {
+  const count = Number(props.count);
+  return Number.isFinite(count) && count > 0 ? count : 0;
+});
+
+const displayCount = computed(() =>
+  normalizedCount.value > 99 ? '99+' : String(normalizedCount.value)
+);
+</script>
+
+<template>
+  <span
+    v-if="normalizedCount > 0"
+    data-test-id="sidebar-unread-badge"
+    class="inline-grid h-5 min-w-5 place-items-center rounded-full bg-n-brand px-1 text-xxs font-medium leading-3 text-white flex-shrink-0"
+  >
+    {{ displayCount }}
+  </span>
+  <span v-else class="hidden" />
+</template>

app/javascript/dashboard/components-next/sidebar/specs/ChannelLeaf.spec.js

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils';
+import ChannelLeaf from '../ChannelLeaf.vue';
+
+const mountChannelLeaf = props =>
+  mount(ChannelLeaf, {
+    props: {
+      label: 'Website',
+      inbox: { reauthorization_required: false },
+      ...props,
+    },
+    global: {
+      mocks: {
+        $t: key => key,
+      },
+      stubs: {
+        ChannelIcon: true,
+        Icon: true,
+      },
+    },
+  });
+
+describe('ChannelLeaf', () => {
+  it('renders unread badge when count is present', () => {
+    const wrapper = mountChannelLeaf({ badgeCount: 3 });
+    const badge = wrapper.find('[data-test-id="sidebar-unread-badge"]');
+
+    expect(badge.exists()).toBe(true);
+    expect(badge.text()).toBe('3');
+  });
+
+  it('does not render unread badge when count is zero', () => {
+    const wrapper = mountChannelLeaf({ badgeCount: 0 });
+
+    expect(wrapper.find('[data-test-id="sidebar-unread-badge"]').exists()).toBe(
+      false
+    );
+  });
+});

app/javascript/dashboard/components-next/sidebar/specs/SidebarGroupLeaf.spec.js

@@ -0,0 +1,76 @@
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import SidebarGroupLeaf from '../SidebarGroupLeaf.vue';
+
+vi.mock('../provider', () => ({
+  useSidebarContext: () => ({
+    resolvePermissions: () => [],
+    resolveFeatureFlag: () => '',
+  }),
+}));
+
+const PolicyStub = {
+  props: ['as', 'permissions', 'featureFlag'],
+  template: '<li><slot /></li>',
+};
+
+const RouterLinkStub = {
+  props: ['to'],
+  template: '<a><slot /></a>',
+};
+
+const mountLeaf = props =>
+  mount(SidebarGroupLeaf, {
+    props: {
+      label: 'Support',
+      to: '/support',
+      ...props,
+    },
+    global: {
+      stubs: {
+        Icon: true,
+        Policy: PolicyStub,
+        RouterLink: RouterLinkStub,
+      },
+    },
+  });
+
+describe('SidebarGroupLeaf', () => {
+  it('renders unread badge when count is present', () => {
+    const wrapper = mountLeaf({ badgeCount: 7 });
+    const badge = wrapper.find('[data-test-id="sidebar-unread-badge"]');
+
+    expect(badge.exists()).toBe(true);
+    expect(badge.text()).toBe('7');
+  });
+
+  it('does not render unread badge when count is zero', () => {
+    const wrapper = mountLeaf({ badgeCount: 0 });
+
+    expect(wrapper.find('[data-test-id="sidebar-unread-badge"]').exists()).toBe(
+      false
+    );
+  });
+
+  it('caps large unread counts', () => {
+    const wrapper = mountLeaf({ badgeCount: 120 });
+
+    expect(wrapper.find('[data-test-id="sidebar-unread-badge"]').text()).toBe(
+      '99+'
+    );
+  });
+
+  it('passes unread count to custom leaf components', () => {
+    const wrapper = mountLeaf({
+      badgeCount: 4,
+      component: leafProps =>
+        h(
+          'span',
+          { 'data-test-id': 'custom-leaf-count' },
+          leafProps.badgeCount
+        ),
+    });
+
+    expect(wrapper.find('[data-test-id="custom-leaf-count"]').text()).toBe('4');
+  });
+});

app/javascript/dashboard/composables/useConfig.js

@@ -36,11 +36,18 @@ export function useConfig() {
    */
   const enterprisePlanName = config.enterprisePlanName;
 
+  /**
+   * Indicates whether inbox webhook events (ENABLE_INBOX_EVENTS) are enabled.
+   * @type {boolean}
+   */
+  const inboxEventsEnabled = config.inboxEventsEnabled === 'true';
+
   return {
     hostURL,
     vapidPublicKey,
     enabledLanguages,
     isEnterprise,
     enterprisePlanName,
+    inboxEventsEnabled,
   };
 }

app/javascript/dashboard/featureFlags.js

@@ -46,6 +46,7 @@ export const FEATURE_FLAGS = {
   COMPANIES: 'companies',
   ADVANCED_SEARCH: 'advanced_search',
   CONVERSATION_REQUIRED_ATTRIBUTES: 'conversation_required_attributes',
+  CONVERSATION_UNREAD_COUNTS: 'conversation_unread_counts',
 };
 
 export const PREMIUM_FEATURES = [

app/javascript/dashboard/helper/actionCable.js

@@ -4,14 +4,18 @@ import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotifi
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { useImpersonation } from 'dashboard/composables/useImpersonation';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const { isImpersonating } = useImpersonation();
+const UNREAD_COUNTS_REFETCH_THROTTLE_MS = 5000;
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
     const { websocketURL = '' } = window.chatwootConfig || {};
     super(app, pubsubToken, websocketURL);
     this.CancelTyping = [];
+    this.lastUnreadCountsFetchAt = null;
+    this.unreadCountsFetchTimer = null;
     this.events = {
       'message.created': this.onMessageCreated,
       'message.updated': this.onMessageUpdated,
@@ -32,6 +36,8 @@ class ActionCableConnector extends BaseActionCableConnector {
       'notification.updated': this.onNotificationUpdated,
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
+      'conversation.unread_count_changed':
+        this.onConversationUnreadCountChanged,
       'account.cache_invalidated': this.onCacheInvalidate,
       'account.enrichment_completed': this.onEnrichmentCompleted,
       'copilot.message.created': this.onCopilotMessageCreated,
@@ -120,6 +126,56 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.fetchConversationStats();
   };
 
+  onConversationUnreadCountChanged = () => {
+    this.throttledFetchConversationUnreadCounts();
+  };
+
+  throttledFetchConversationUnreadCounts = () => {
+    const now = Date.now();
+    const elapsedTime = now - this.lastUnreadCountsFetchAt;
+
+    if (
+      this.lastUnreadCountsFetchAt === null ||
+      elapsedTime >= UNREAD_COUNTS_REFETCH_THROTTLE_MS
+    ) {
+      this.clearUnreadCountsFetchTimer();
+      this.fetchConversationUnreadCounts();
+      return;
+    }
+
+    if (this.unreadCountsFetchTimer) return;
+
+    this.unreadCountsFetchTimer = setTimeout(() => {
+      this.unreadCountsFetchTimer = null;
+      this.fetchConversationUnreadCounts();
+    }, UNREAD_COUNTS_REFETCH_THROTTLE_MS - elapsedTime);
+  };
+
+  clearUnreadCountsFetchTimer = () => {
+    if (!this.unreadCountsFetchTimer) return;
+
+    clearTimeout(this.unreadCountsFetchTimer);
+    this.unreadCountsFetchTimer = null;
+  };
+
+  fetchConversationUnreadCounts = () => {
+    if (!this.isConversationUnreadCountsEnabled()) return;
+
+    this.lastUnreadCountsFetchAt = Date.now();
+    this.app.$store.dispatch('conversationUnreadCounts/get');
+  };
+
+  isConversationUnreadCountsEnabled = () => {
+    const accountId = this.app.$store.getters.getCurrentAccountId;
+    const isFeatureEnabled =
+      this.app.$store.getters['accounts/isFeatureEnabledonAccount'];
+
+    return isFeatureEnabled?.(
+      accountId,
+      FEATURE_FLAGS.CONVERSATION_UNREAD_COUNTS
+    );
+  };
+
   onTypingOn = ({ conversation, user }) => {
     const conversationId = conversation.id;
 

app/javascript/dashboard/helper/specs/actionCable.spec.js

@@ -1,4 +1,4 @@
-import { describe, it, beforeEach, expect, vi } from 'vitest';
+import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
 import ActionCableConnector from '../actionCable';
 
 vi.mock('shared/helpers/mitt', () => ({
@@ -30,12 +30,17 @@ describe('ActionCableConnector - Copilot Tests', () => {
         dispatch: mockDispatch,
         getters: {
           getCurrentAccountId: 1,
+          'accounts/isFeatureEnabledonAccount': vi.fn(() => true),
         },
       },
     };
 
     actionCable = ActionCableConnector.init(store.$store, 'test-token');
   });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
   describe('copilot event handlers', () => {
     it('should register the copilot.message.created event handler', () => {
       expect(Object.keys(actionCable.events)).toContain(
@@ -64,4 +69,95 @@ describe('ActionCableConnector - Copilot Tests', () => {
       );
     });
   });
+
+  describe('conversation unread count event handlers', () => {
+    it('should register the conversation.unread_count_changed event handler', () => {
+      expect(Object.keys(actionCable.events)).toContain(
+        'conversation.unread_count_changed'
+      );
+      expect(actionCable.events['conversation.unread_count_changed']).toBe(
+        actionCable.onConversationUnreadCountChanged
+      );
+    });
+
+    it('should refetch unread counts when unread count changes', () => {
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+
+      expect(mockDispatch).toHaveBeenCalledWith('conversationUnreadCounts/get');
+    });
+
+    it('does not refetch unread counts when unread count feature is disabled', () => {
+      store.$store.getters[
+        'accounts/isFeatureEnabledonAccount'
+      ].mockReturnValue(false);
+
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+
+      expect(mockDispatch).not.toHaveBeenCalledWith(
+        'conversationUnreadCounts/get'
+      );
+    });
+
+    it('should throttle unread count refetches for repeated events', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2026-01-01T00:00:00Z'));
+
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+
+      expect(mockDispatch).toHaveBeenCalledTimes(1);
+
+      vi.advanceTimersByTime(4999);
+      expect(mockDispatch).toHaveBeenCalledTimes(1);
+
+      vi.advanceTimersByTime(1);
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+      expect(mockDispatch).toHaveBeenLastCalledWith(
+        'conversationUnreadCounts/get'
+      );
+    });
+
+    it('clears pending unread count refetch before immediate refetch', () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2026-01-01T00:00:00Z'));
+
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+
+      vi.advanceTimersByTime(1000);
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+
+      vi.setSystemTime(new Date('2026-01-01T00:00:06Z'));
+      actionCable.onReceived({
+        event: 'conversation.unread_count_changed',
+        data: { account_id: 1 },
+      });
+
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+
+      vi.advanceTimersByTime(4000);
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+    });
+  });
 });

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

@@ -57,7 +57,8 @@
             "CONTACT_CREATED": "Contact created",
             "CONTACT_UPDATED": "Contact updated",
             "CONVERSATION_TYPING_ON": "Conversation Typing On",
-            "CONVERSATION_TYPING_OFF": "Conversation Typing Off"
+            "CONVERSATION_TYPING_OFF": "Conversation Typing Off",
+            "INBOX_UPDATED": "Inbox updated"
           }
         },
         "NAME": {

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue

@@ -5,6 +5,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { useAlert } from 'dashboard/composables';
+import { useConfig } from 'dashboard/composables/useConfig';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const { EXAMPLE_WEBHOOK_URL } = wootConstants;
@@ -55,12 +56,15 @@ export default {
     },
   },
   data() {
+    const { inboxEventsEnabled } = useConfig();
     return {
       url: this.value.url || '',
       name: this.value.name || '',
       subscriptions: this.value.subscriptions || [],
       secretVisible: false,
-      supportedWebhookEvents: SUPPORTED_WEBHOOK_EVENTS,
+      supportedWebhookEvents: inboxEventsEnabled
+        ? [...SUPPORTED_WEBHOOK_EVENTS, 'inbox_updated']
+        : SUPPORTED_WEBHOOK_EVENTS,
     };
   },
   computed: {

app/javascript/dashboard/store/index.js

@@ -25,6 +25,7 @@ import conversations from './modules/conversations';
 import conversationSearch from './modules/conversationSearch';
 import conversationStats from './modules/conversationStats';
 import conversationTypingStatus from './modules/conversationTypingStatus';
+import conversationUnreadCounts from './modules/conversationUnreadCounts';
 import conversationWatchers from './modules/conversationWatchers';
 import csat from './modules/csat';
 import customRole from './modules/customRole';
@@ -88,6 +89,7 @@ export default createStore({
     conversationSearch,
     conversationStats,
     conversationTypingStatus,
+    conversationUnreadCounts,
     conversationWatchers,
     csat,
     customRole,

app/javascript/dashboard/store/modules/conversationUnreadCounts.js

@@ -0,0 +1,70 @@
+import ConversationAPI from '../../api/conversations';
+import types from '../mutation-types';
+
+export const state = {
+  inboxes: {},
+  labels: {},
+  teams: {},
+};
+
+const normalizeCounts = counts => {
+  return Object.entries(counts || {}).reduce((result, [id, count]) => {
+    const parsedCount = Number(count);
+    if (Number.isFinite(parsedCount) && parsedCount > 0) {
+      result[String(id)] = parsedCount;
+    }
+
+    return result;
+  }, {});
+};
+
+export const getters = {
+  getInboxUnreadCount: $state => inboxId => {
+    return $state.inboxes[String(inboxId)] || 0;
+  },
+  getLabelUnreadCount: $state => labelId => {
+    return $state.labels[String(labelId)] || 0;
+  },
+  getTeamUnreadCount: $state => teamId => {
+    return $state.teams[String(teamId)] || 0;
+  },
+  getInboxUnreadCounts($state) {
+    return $state.inboxes;
+  },
+  getLabelUnreadCounts($state) {
+    return $state.labels;
+  },
+  getTeamUnreadCounts($state) {
+    return $state.teams;
+  },
+};
+
+export const actions = {
+  get: async function getUnreadCounts({ commit }) {
+    try {
+      const response = await ConversationAPI.getUnreadCounts();
+      commit(types.SET_CONVERSATION_UNREAD_COUNTS, response.data.payload);
+    } catch (error) {
+      // Ignore errors so the sidebar can continue rendering without badges.
+    }
+  },
+  clear({ commit }) {
+    commit(types.SET_CONVERSATION_UNREAD_COUNTS, {});
+  },
+};
+
+export const mutations = {
+  [types.SET_CONVERSATION_UNREAD_COUNTS]($state, payload = {}) {
+    $state.inboxes = normalizeCounts(payload.inboxes);
+    $state.labels = normalizeCounts(payload.labels);
+    $state.teams = normalizeCounts(payload.teams);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

app/javascript/dashboard/store/modules/specs/conversationUnreadCounts/actions.spec.js

@@ -0,0 +1,53 @@
+import axios from 'axios';
+import { actions } from '../../conversationUnreadCounts';
+import types from '../../../mutation-types';
+
+const commit = vi.fn();
+global.axios = axios;
+vi.mock('axios');
+
+describe('#actions', () => {
+  beforeEach(() => {
+    commit.mockClear();
+    axios.get.mockReset();
+  });
+
+  describe('#get', () => {
+    it('commits unread counts when API is successful', async () => {
+      const payload = {
+        inboxes: { 1: '2' },
+        labels: { 3: 4 },
+        teams: { 5: 6 },
+      };
+      axios.get.mockResolvedValue({ data: { payload } });
+
+      await actions.get({ commit });
+
+      expect(axios.get).toHaveBeenCalledWith(
+        '/api/v1/conversations/unread_counts'
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONVERSATION_UNREAD_COUNTS, payload],
+      ]);
+    });
+
+    it('does not commit when API fails', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+
+      await actions.get({ commit });
+
+      expect(commit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('#clear', () => {
+    it('clears unread counts', () => {
+      actions.clear({ commit });
+
+      expect(commit).toHaveBeenCalledWith(
+        types.SET_CONVERSATION_UNREAD_COUNTS,
+        {}
+      );
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/conversationUnreadCounts/getters.spec.js

@@ -0,0 +1,51 @@
+import { getters } from '../../conversationUnreadCounts';
+
+describe('#getters', () => {
+  it('returns inbox unread count by id', () => {
+    const state = {
+      inboxes: { 1: 2 },
+      labels: {},
+      teams: {},
+    };
+
+    expect(getters.getInboxUnreadCount(state)(1)).toBe(2);
+    expect(getters.getInboxUnreadCount(state)('1')).toBe(2);
+    expect(getters.getInboxUnreadCount(state)(2)).toBe(0);
+  });
+
+  it('returns label unread count by id', () => {
+    const state = {
+      inboxes: {},
+      labels: { 3: 4 },
+      teams: {},
+    };
+
+    expect(getters.getLabelUnreadCount(state)(3)).toBe(4);
+    expect(getters.getLabelUnreadCount(state)('3')).toBe(4);
+    expect(getters.getLabelUnreadCount(state)(4)).toBe(0);
+  });
+
+  it('returns team unread count by id', () => {
+    const state = {
+      inboxes: {},
+      labels: {},
+      teams: { 5: 6 },
+    };
+
+    expect(getters.getTeamUnreadCount(state)(5)).toBe(6);
+    expect(getters.getTeamUnreadCount(state)('5')).toBe(6);
+    expect(getters.getTeamUnreadCount(state)(6)).toBe(0);
+  });
+
+  it('returns unread count maps', () => {
+    const state = {
+      inboxes: { 1: 2 },
+      labels: { 3: 4 },
+      teams: { 5: 6 },
+    };
+
+    expect(getters.getInboxUnreadCounts(state)).toEqual({ 1: 2 });
+    expect(getters.getLabelUnreadCounts(state)).toEqual({ 3: 4 });
+    expect(getters.getTeamUnreadCounts(state)).toEqual({ 5: 6 });
+  });
+});

app/javascript/dashboard/store/modules/specs/conversationUnreadCounts/mutations.spec.js

@@ -0,0 +1,48 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../conversationUnreadCounts';
+
+describe('#mutations', () => {
+  describe('#SET_CONVERSATION_UNREAD_COUNTS', () => {
+    it('normalizes unread count payload', () => {
+      const state = { inboxes: {}, labels: {}, teams: {} };
+
+      mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {
+        inboxes: {
+          1: '2',
+          2: 0,
+          3: 'invalid',
+        },
+        labels: {
+          4: 5,
+          5: -1,
+        },
+        teams: {
+          6: '7',
+          7: 0,
+        },
+      });
+
+      expect(state).toEqual({
+        inboxes: { 1: 2 },
+        labels: { 4: 5 },
+        teams: { 6: 7 },
+      });
+    });
+
+    it('clears counts when payload is empty', () => {
+      const state = {
+        inboxes: { 1: 2 },
+        labels: { 4: 5 },
+        teams: { 6: 7 },
+      };
+
+      mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {});
+
+      expect(state).toEqual({
+        inboxes: {},
+        labels: {},
+        teams: {},
+      });
+    });
+  });
+});

app/javascript/dashboard/store/mutation-types.js

@@ -187,6 +187,9 @@ export default {
   CLEAR_SELECTED_CONVERSATION_IDS: 'CLEAR_SELECTED_CONVERSATION_IDS',
   REMOVE_SELECTED_CONVERSATION_IDS: 'REMOVE_SELECTED_CONVERSATION_IDS',
 
+  // Conversation Unread Counts
+  SET_CONVERSATION_UNREAD_COUNTS: 'SET_CONVERSATION_UNREAD_COUNTS',
+
   // Reports
   SET_ACCOUNT_REPORTS: 'SET_ACCOUNT_REPORTS',
   SET_HEATMAP_DATA: 'SET_HEATMAP_DATA',