diff --git a/changelog.md b/changelog.md
index b6b064e..6e56cab 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
# Changelog
+## 2025-12-18 - 1.6.0 - feat(conversation-selector)
+add conversation status badges to conversation selector and include status in sample data
+
+- Introduce TConversationStatus type and add optional status property to IConversation
+- Render status badges in sio-conversation-selector with CSS classes and a getBadgeLabel helper
+- Update sample conversations in sio-combox.ts to include statuses: 'new', 'needs-action', 'waiting', 'resolved'
+
## 2025-12-17 - 1.5.0 - feat(combox)
Introduce singleton SioCombox attached to document.body with open/close/toggle API and animated show/hide; integrate SioFab to use the singleton and update styles/positioning
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 3e9e5c1..f7bc64d 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@social.io/catalog',
- version: '1.5.0',
+ version: '1.6.0',
description: 'catalog for social.io'
}
diff --git a/ts_web/elements/sio-combox.ts b/ts_web/elements/sio-combox.ts
index d3fb126..dabf85d 100644
--- a/ts_web/elements/sio-combox.ts
+++ b/ts_web/elements/sio-combox.ts
@@ -79,24 +79,28 @@ export class SioCombox extends DeesElement {
lastMessage: 'Thanks for your help with the login issue!',
time: '2 min ago',
unread: true,
+ status: 'new',
},
{
id: '2',
title: 'Billing Question',
lastMessage: 'I need help understanding my invoice',
time: '1 hour ago',
+ status: 'needs-action',
},
{
id: '3',
title: 'Feature Request',
lastMessage: 'That would be great! Looking forward to it',
time: 'Yesterday',
+ status: 'waiting',
},
{
id: '4',
title: 'General Inquiry',
lastMessage: 'Thank you for the information',
time: '2 days ago',
+ status: 'resolved',
}
];
diff --git a/ts_web/elements/sio-conversation-selector.ts b/ts_web/elements/sio-conversation-selector.ts
index a525f6d..dbf1830 100644
--- a/ts_web/elements/sio-conversation-selector.ts
+++ b/ts_web/elements/sio-conversation-selector.ts
@@ -16,6 +16,8 @@ import { spacing, radius, shadows, transitions } from './00tokens.js';
import { fontFamilies, typography } from './00fonts.js';
// Types
+export type TConversationStatus = 'new' | 'waiting' | 'needs-action' | 'resolved';
+
export interface IConversation {
id: string;
title: string;
@@ -23,6 +25,7 @@ export interface IConversation {
time: string;
unread?: boolean;
avatar?: string;
+ status?: TConversationStatus;
}
declare global {
@@ -232,6 +235,38 @@ export class SioConversationSelector extends DeesElement {
}
}
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px ${unsafeCSS(spacing["2"])};
+ font-size: 0.625rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.025em;
+ border-radius: ${unsafeCSS(radius.full)};
+ white-space: nowrap;
+ }
+
+ .badge.new {
+ background: ${bdTheme('primary')}20;
+ color: ${bdTheme('primary')};
+ }
+
+ .badge.waiting {
+ background: ${bdTheme('muted')};
+ color: ${bdTheme('mutedForeground')};
+ }
+
+ .badge.needs-action {
+ background: hsl(38 92% 50% / 0.15);
+ color: hsl(38 92% 40%);
+ }
+
+ .badge.resolved {
+ background: ${bdTheme('success')}20;
+ color: ${bdTheme('success')};
+ }
+
.empty-state {
display: flex;
flex-direction: column;
@@ -331,6 +366,7 @@ export class SioConversationSelector extends DeesElement {
${conv.title}
${conv.unread ? html`` : ''}
+ ${conv.status ? html`${this.getBadgeLabel(conv.status)}` : ''}
${conv.time}
@@ -389,4 +425,14 @@ export class SioConversationSelector extends DeesElement {
composed: true
}));
}
+
+ private getBadgeLabel(status: TConversationStatus): string {
+ const labels: Record = {
+ 'new': 'New',
+ 'waiting': 'Waiting',
+ 'needs-action': 'Action',
+ 'resolved': 'Resolved',
+ };
+ return labels[status];
+ }
}
\ No newline at end of file