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