feat: Add sidebar unread counts for filters (CW-7262) (#14726)
## Description Extends the conversation unread-count system so the left sidebar can show unread badges for Mentions, Participating, Unattended, and saved conversation folders. Folder badges reuse the existing `custom_filters` conversation filter semantics, store user-scoped Redis sets lazily, and skip unsupported folder filters so invalid saved folders continue to render without a badge. The Unattended badge counts all visible unread open conversations that match the existing unattended conversation scope. Closes - [CW-7262](https://linear.app/chatwoot/issue/CW-7262/unread-counts-for-filters-folders) ## What changed - Added user-scoped unread-count Redis keys and cache builders for mentions, participating conversations, unattended conversations, and saved folder filters. - Reused `Conversations::FilterService` through a relation-returning path so folder counts match the folder conversation list behavior. - Invalidated user filter caches from mention, participant, custom-filter, and relevant conversation update events. - Extended the unread-count endpoint payload and sidebar Vuex/sidebar rendering for the new badge counts, including the Unattended sidebar item. - Added Ruby, Enterprise, request, listener, and frontend store coverage for the new unread-count dimensions. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Created local validation folders for `john@acme.inc` and confirmed the unread-count payload includes open, resolved, and high-priority folder badges while excluding the invalid unsupported folder. - Added coverage for the Unattended badge rule: all visible unread open conversations matching `Conversation.unattended`. - Ran focused unread-count Ruby specs, including service, listener, request, and Enterprise counter coverage. - Ran frontend unread-count store specs. - Ran RuboCop on the touched Ruby files. - Ran ESLint through the project script; it completed with warnings in existing unrelated files and no errors. <img width="369" height="525" alt="Screenshot 2026-06-13 at 10 51 39 PM" src="https://github.com/user-attachments/assets/36b1d2c4-dac1-4f6f-9c0e-7ef5a6cc2975" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [x] Documentation changes are not required for this internal unread-count behavior - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] No dependent downstream changes are required --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Sony Mathew
co-authored by
Muhsin Keloth
Muhsin Keloth
parent
352f120c6a
commit
fe6368b42e
@@ -22,6 +22,10 @@ const props = defineProps({
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
badgeTooltip: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const reauthorizationRequired = computed(() => {
|
||||
@@ -34,7 +38,7 @@ const reauthorizationRequired = computed(() => {
|
||||
<ChannelIcon :inbox="inbox" class="size-4" />
|
||||
</span>
|
||||
<div class="flex-1 truncate min-w-0">{{ label }}</div>
|
||||
<SidebarUnreadBadge :count="badgeCount" />
|
||||
<SidebarUnreadBadge :count="badgeCount" :tooltip="badgeTooltip" />
|
||||
<div
|
||||
v-if="reauthorizationRequired"
|
||||
v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
|
||||
|
||||
@@ -199,6 +199,18 @@ const getLabelUnreadCount = useMapGetter(
|
||||
const getTeamUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getTeamUnreadCount'
|
||||
);
|
||||
const mentionsUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getMentionsUnreadCount'
|
||||
);
|
||||
const participatingUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getParticipatingUnreadCount'
|
||||
);
|
||||
const unattendedUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getUnattendedUnreadCount'
|
||||
);
|
||||
const getFolderUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getFolderUnreadCount'
|
||||
);
|
||||
const teams = useMapGetter('teams/getMyTeams');
|
||||
const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
|
||||
const conversationCustomViews = useMapGetter(
|
||||
@@ -280,6 +292,19 @@ const sortedLabels = computed(() =>
|
||||
})
|
||||
);
|
||||
|
||||
const unreadBadgeTooltips = computed(() => ({
|
||||
ALL: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.ALL'),
|
||||
INBOX: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.INBOX'),
|
||||
LABEL: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.LABEL'),
|
||||
TEAM: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.TEAM'),
|
||||
FOLDER: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.FOLDER'),
|
||||
MENTIONS: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.MENTIONS'),
|
||||
PARTICIPATING: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.PARTICIPATING'),
|
||||
UNATTENDED: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.UNATTENDED'),
|
||||
}));
|
||||
|
||||
const unreadBadgeTooltip = type => unreadBadgeTooltips.value[type];
|
||||
|
||||
const closeMobileSidebar = () => {
|
||||
if (!props.isMobileSidebarOpen) return;
|
||||
emit('closeMobileSidebar');
|
||||
@@ -335,12 +360,15 @@ const menuItems = computed(() => {
|
||||
label: t('SIDEBAR.ALL_CONVERSATIONS'),
|
||||
icon: 'i-lucide-inbox',
|
||||
badgeCount: allUnreadCount.value,
|
||||
badgeTooltip: unreadBadgeTooltip('ALL'),
|
||||
activeOn: ['inbox_conversation'],
|
||||
to: accountScopedRoute('home'),
|
||||
},
|
||||
{
|
||||
name: 'Mentions',
|
||||
label: t('SIDEBAR.MENTIONED_CONVERSATIONS'),
|
||||
badgeCount: mentionsUnreadCount.value,
|
||||
badgeTooltip: unreadBadgeTooltip('MENTIONS'),
|
||||
icon: 'i-lucide-at-sign',
|
||||
activeOn: ['conversation_through_mentions'],
|
||||
to: accountScopedRoute('conversation_mentions'),
|
||||
@@ -348,6 +376,8 @@ const menuItems = computed(() => {
|
||||
{
|
||||
name: 'Participating',
|
||||
label: t('SIDEBAR.PARTICIPATING_CONVERSATIONS'),
|
||||
badgeCount: participatingUnreadCount.value,
|
||||
badgeTooltip: unreadBadgeTooltip('PARTICIPATING'),
|
||||
icon: 'i-lucide-user-round-check',
|
||||
activeOn: ['conversation_through_participating'],
|
||||
to: accountScopedRoute('conversation_participating'),
|
||||
@@ -355,6 +385,8 @@ const menuItems = computed(() => {
|
||||
{
|
||||
name: 'Unattended',
|
||||
activeOn: ['conversation_through_unattended'],
|
||||
badgeCount: unattendedUnreadCount.value,
|
||||
badgeTooltip: unreadBadgeTooltip('UNATTENDED'),
|
||||
label: t('SIDEBAR.UNATTENDED_CONVERSATIONS'),
|
||||
icon: 'i-lucide-clock-alert',
|
||||
to: accountScopedRoute('conversation_unattended'),
|
||||
@@ -370,6 +402,8 @@ const menuItems = computed(() => {
|
||||
children: sortedFolders.value.map(view => ({
|
||||
name: `${view.name}-${view.id}`,
|
||||
label: view.name,
|
||||
badgeCount: getFolderUnreadCount.value(view.id),
|
||||
badgeTooltip: unreadBadgeTooltip('FOLDER'),
|
||||
to: accountScopedRoute('folder_conversations', { id: view.id }),
|
||||
})),
|
||||
},
|
||||
@@ -385,6 +419,7 @@ const menuItems = computed(() => {
|
||||
name: `${team.name}-${team.id}`,
|
||||
label: team.name,
|
||||
badgeCount: getTeamUnreadCount.value(team.id),
|
||||
badgeTooltip: unreadBadgeTooltip('TEAM'),
|
||||
to: accountScopedRoute('team_conversations', { teamId: team.id }),
|
||||
})),
|
||||
},
|
||||
@@ -400,6 +435,7 @@ const menuItems = computed(() => {
|
||||
name: `${inbox.name}-${inbox.id}`,
|
||||
label: inbox.name,
|
||||
badgeCount: getInboxUnreadCount.value(inbox.id),
|
||||
badgeTooltip: unreadBadgeTooltip('INBOX'),
|
||||
icon: h(ChannelIcon, { inbox, class: 'size-[16px]' }),
|
||||
to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
|
||||
component: leafProps =>
|
||||
@@ -408,6 +444,7 @@ const menuItems = computed(() => {
|
||||
active: leafProps.active,
|
||||
inbox,
|
||||
badgeCount: leafProps.badgeCount,
|
||||
badgeTooltip: leafProps.badgeTooltip,
|
||||
}),
|
||||
})),
|
||||
},
|
||||
@@ -423,6 +460,7 @@ const menuItems = computed(() => {
|
||||
name: `${label.title}-${label.id}`,
|
||||
label: label.title,
|
||||
badgeCount: getLabelUnreadCount.value(label.id),
|
||||
badgeTooltip: unreadBadgeTooltip('LABEL'),
|
||||
icon: h('span', {
|
||||
class: `size-[8px] rounded-sm`,
|
||||
style: { backgroundColor: label.color },
|
||||
|
||||
@@ -197,7 +197,10 @@ onMounted(async () => {
|
||||
class="size-4 flex-shrink-0"
|
||||
/>
|
||||
<span class="flex-1 truncate">{{ subChild.label }}</span>
|
||||
<SidebarUnreadBadge :count="subChild.badgeCount" />
|
||||
<SidebarUnreadBadge
|
||||
:count="subChild.badgeCount"
|
||||
:tooltip="subChild.badgeTooltip"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -220,7 +223,10 @@ onMounted(async () => {
|
||||
class="size-4 flex-shrink-0"
|
||||
/>
|
||||
<span class="flex-1 truncate">{{ child.label }}</span>
|
||||
<SidebarUnreadBadge :count="child.badgeCount" />
|
||||
<SidebarUnreadBadge
|
||||
:count="child.badgeCount"
|
||||
:tooltip="child.badgeTooltip"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -12,6 +12,7 @@ const props = defineProps({
|
||||
active: { type: Boolean, default: false },
|
||||
component: { type: Function, default: null },
|
||||
badgeCount: { type: [Number, String], default: 0 },
|
||||
badgeTooltip: { type: String, default: '' },
|
||||
hideTreeLine: { type: Boolean, default: false },
|
||||
thinTreeLine: { type: Boolean, default: false },
|
||||
});
|
||||
@@ -52,14 +53,14 @@ const TREE_CONNECTOR =
|
||||
<component
|
||||
:is="component"
|
||||
v-if="shouldRenderComponent"
|
||||
v-bind="{ label, icon, active, badgeCount }"
|
||||
v-bind="{ label, icon, active, badgeCount, badgeTooltip }"
|
||||
/>
|
||||
<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" />
|
||||
<SidebarUnreadBadge :count="badgeCount" :tooltip="badgeTooltip" />
|
||||
</template>
|
||||
</component>
|
||||
</Policy>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
count: { type: [Number, String], default: 0 },
|
||||
tooltip: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const normalizedCount = computed(() => {
|
||||
@@ -18,6 +19,7 @@ const displayCount = computed(() =>
|
||||
<template>
|
||||
<span
|
||||
v-if="normalizedCount > 0"
|
||||
v-tooltip.top="tooltip || null"
|
||||
data-test-id="sidebar-unread-badge"
|
||||
class="inline-grid h-5 min-w-5 place-items-center rounded-full bg-n-slate-4 px-1 text-xxs font-medium leading-3 text-n-slate-12 dark:bg-n-slate-5 flex-shrink-0"
|
||||
>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import ChannelLeaf from '../ChannelLeaf.vue';
|
||||
import SidebarUnreadBadge from '../SidebarUnreadBadge.vue';
|
||||
|
||||
const mountChannelLeaf = props =>
|
||||
mount(ChannelLeaf, {
|
||||
@@ -28,6 +29,17 @@ describe('ChannelLeaf', () => {
|
||||
expect(badge.text()).toBe('3');
|
||||
});
|
||||
|
||||
it('passes tooltip copy to unread badge', () => {
|
||||
const wrapper = mountChannelLeaf({
|
||||
badgeCount: 3,
|
||||
badgeTooltip: 'Total unread conversations in this inbox',
|
||||
});
|
||||
|
||||
expect(wrapper.findComponent(SidebarUnreadBadge).props('tooltip')).toBe(
|
||||
'Total unread conversations in this inbox'
|
||||
);
|
||||
});
|
||||
|
||||
it('does not render unread badge when count is zero', () => {
|
||||
const wrapper = mountChannelLeaf({ badgeCount: 0 });
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { h } from 'vue';
|
||||
import SidebarGroupLeaf from '../SidebarGroupLeaf.vue';
|
||||
import SidebarUnreadBadge from '../SidebarUnreadBadge.vue';
|
||||
|
||||
vi.mock('../provider', () => ({
|
||||
useSidebarContext: () => ({
|
||||
@@ -44,6 +45,17 @@ describe('SidebarGroupLeaf', () => {
|
||||
expect(badge.text()).toBe('7');
|
||||
});
|
||||
|
||||
it('passes tooltip copy to unread badge', () => {
|
||||
const wrapper = mountLeaf({
|
||||
badgeCount: 7,
|
||||
badgeTooltip: 'Total unread conversations in this label',
|
||||
});
|
||||
|
||||
expect(wrapper.findComponent(SidebarUnreadBadge).props('tooltip')).toBe(
|
||||
'Total unread conversations in this label'
|
||||
);
|
||||
});
|
||||
|
||||
it('does not render unread badge when count is zero', () => {
|
||||
const wrapper = mountLeaf({ badgeCount: 0 });
|
||||
|
||||
@@ -63,14 +75,17 @@ describe('SidebarGroupLeaf', () => {
|
||||
it('passes unread count to custom leaf components', () => {
|
||||
const wrapper = mountLeaf({
|
||||
badgeCount: 4,
|
||||
badgeTooltip: 'Total unread conversations in this inbox',
|
||||
component: leafProps =>
|
||||
h(
|
||||
'span',
|
||||
{ 'data-test-id': 'custom-leaf-count' },
|
||||
leafProps.badgeCount
|
||||
`${leafProps.badgeCount}:${leafProps.badgeTooltip}`
|
||||
),
|
||||
});
|
||||
|
||||
expect(wrapper.find('[data-test-id="custom-leaf-count"]').text()).toBe('4');
|
||||
expect(wrapper.find('[data-test-id="custom-leaf-count"]').text()).toBe(
|
||||
'4:Total unread conversations in this inbox'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -316,6 +316,16 @@
|
||||
"MENTIONED_CONVERSATIONS": "Mentions",
|
||||
"PARTICIPATING_CONVERSATIONS": "Participating",
|
||||
"UNATTENDED_CONVERSATIONS": "Unattended",
|
||||
"UNREAD_COUNT_TOOLTIP": {
|
||||
"ALL": "Total unread conversations",
|
||||
"INBOX": "Total unread conversations in this inbox",
|
||||
"LABEL": "Total unread conversations in this label",
|
||||
"TEAM": "Total unread conversations in this team",
|
||||
"FOLDER": "Total unread conversations in this folder",
|
||||
"MENTIONS": "Unread conversations where you were mentioned",
|
||||
"PARTICIPATING": "Unread conversations you're participating in",
|
||||
"UNATTENDED": "Unread unattended conversations"
|
||||
},
|
||||
"REPORTS": "Reports",
|
||||
"SETTINGS": "Settings",
|
||||
"CONTACTS": "Contacts",
|
||||
|
||||
@@ -6,6 +6,10 @@ export const state = {
|
||||
inboxes: {},
|
||||
labels: {},
|
||||
teams: {},
|
||||
mentionsCount: 0,
|
||||
participatingCount: 0,
|
||||
unattendedCount: 0,
|
||||
folders: {},
|
||||
};
|
||||
|
||||
const normalizeCount = count => {
|
||||
@@ -37,6 +41,18 @@ export const getters = {
|
||||
getTeamUnreadCount: $state => teamId => {
|
||||
return $state.teams[String(teamId)] || 0;
|
||||
},
|
||||
getMentionsUnreadCount($state) {
|
||||
return $state.mentionsCount;
|
||||
},
|
||||
getParticipatingUnreadCount($state) {
|
||||
return $state.participatingCount;
|
||||
},
|
||||
getUnattendedUnreadCount($state) {
|
||||
return $state.unattendedCount;
|
||||
},
|
||||
getFolderUnreadCount: $state => folderId => {
|
||||
return $state.folders[String(folderId)] || 0;
|
||||
},
|
||||
getInboxUnreadCounts($state) {
|
||||
return $state.inboxes;
|
||||
},
|
||||
@@ -46,6 +62,9 @@ export const getters = {
|
||||
getTeamUnreadCounts($state) {
|
||||
return $state.teams;
|
||||
},
|
||||
getFolderUnreadCounts($state) {
|
||||
return $state.folders;
|
||||
},
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
@@ -68,6 +87,10 @@ export const mutations = {
|
||||
$state.inboxes = normalizeCounts(payload.inboxes);
|
||||
$state.labels = normalizeCounts(payload.labels);
|
||||
$state.teams = normalizeCounts(payload.teams);
|
||||
$state.mentionsCount = normalizeCount(payload.mentions_count);
|
||||
$state.participatingCount = normalizeCount(payload.participating_count);
|
||||
$state.unattendedCount = normalizeCount(payload.unattended_count);
|
||||
$state.folders = normalizeCounts(payload.folders);
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -57,10 +57,32 @@ describe('#getters', () => {
|
||||
inboxes: { 1: 2 },
|
||||
labels: { 3: 4 },
|
||||
teams: { 5: 6 },
|
||||
folders: { 8: 9 },
|
||||
};
|
||||
|
||||
expect(getters.getInboxUnreadCounts(state)).toEqual({ 1: 2 });
|
||||
expect(getters.getLabelUnreadCounts(state)).toEqual({ 3: 4 });
|
||||
expect(getters.getTeamUnreadCounts(state)).toEqual({ 5: 6 });
|
||||
expect(getters.getFolderUnreadCounts(state)).toEqual({ 8: 9 });
|
||||
});
|
||||
|
||||
it('returns mentions, participating, unattended, and folder unread counts', () => {
|
||||
const state = {
|
||||
allCount: 0,
|
||||
inboxes: {},
|
||||
labels: {},
|
||||
teams: {},
|
||||
mentionsCount: 3,
|
||||
participatingCount: 4,
|
||||
unattendedCount: 5,
|
||||
folders: { 7: 8 },
|
||||
};
|
||||
|
||||
expect(getters.getMentionsUnreadCount(state)).toBe(3);
|
||||
expect(getters.getParticipatingUnreadCount(state)).toBe(4);
|
||||
expect(getters.getUnattendedUnreadCount(state)).toBe(5);
|
||||
expect(getters.getFolderUnreadCount(state)(7)).toBe(8);
|
||||
expect(getters.getFolderUnreadCount(state)('7')).toBe(8);
|
||||
expect(getters.getFolderUnreadCount(state)(8)).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
+19
@@ -21,6 +21,13 @@ describe('#mutations', () => {
|
||||
6: '7',
|
||||
7: 0,
|
||||
},
|
||||
mentions_count: '8',
|
||||
participating_count: 9,
|
||||
unattended_count: '10',
|
||||
folders: {
|
||||
11: '12',
|
||||
12: 0,
|
||||
},
|
||||
});
|
||||
|
||||
expect(state).toEqual({
|
||||
@@ -28,6 +35,10 @@ describe('#mutations', () => {
|
||||
inboxes: { 1: 2 },
|
||||
labels: { 4: 5 },
|
||||
teams: { 6: 7 },
|
||||
mentionsCount: 8,
|
||||
participatingCount: 9,
|
||||
unattendedCount: 10,
|
||||
folders: { 11: 12 },
|
||||
});
|
||||
});
|
||||
|
||||
@@ -37,6 +48,10 @@ describe('#mutations', () => {
|
||||
inboxes: { 1: 2 },
|
||||
labels: { 4: 5 },
|
||||
teams: { 6: 7 },
|
||||
mentionsCount: 8,
|
||||
participatingCount: 9,
|
||||
unattendedCount: 10,
|
||||
folders: { 10: 11 },
|
||||
};
|
||||
|
||||
mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {});
|
||||
@@ -46,6 +61,10 @@ describe('#mutations', () => {
|
||||
inboxes: {},
|
||||
labels: {},
|
||||
teams: {},
|
||||
mentionsCount: 0,
|
||||
participatingCount: 0,
|
||||
unattendedCount: 0,
|
||||
folders: {},
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user