diff --git a/codebase/packages/messenger-ui/src/components/conversation-item.tsx b/codebase/packages/messenger-ui/src/components/conversation-item.tsx index 7204820..70f875b 100644 --- a/codebase/packages/messenger-ui/src/components/conversation-item.tsx +++ b/codebase/packages/messenger-ui/src/components/conversation-item.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; import styled from 'styled-components'; -import { getInitials } from '../utils/format'; +import { getInitials, formatTime } from '../utils/format'; import { PROVIDER_COLORS, PROVIDER_EMOJIS } from '../providers'; import type { ProviderType } from '../types'; @@ -11,6 +11,7 @@ export interface ConversationItemProps { isActive: boolean; onClick: () => void; provider?: ProviderType; + lastMessageAt?: string | null; lastMessagePreview?: string | null; renderProviderIcon?: (provider: ProviderType) => ReactNode; } @@ -53,10 +54,25 @@ const Info = styled.div` min-width: 0; `; +const TopRow = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +`; + const NameRow = styled.div` display: flex; align-items: center; gap: 6px; + min-width: 0; +`; + +const Timestamp = styled.span` + font-size: 11px; + color: ${(p) => p.theme.colors.text.secondary}; + white-space: nowrap; + flex-shrink: 0; `; const ProviderDot = styled.span<{ $color: string }>` @@ -97,6 +113,7 @@ export function ConversationItem({ isActive, onClick, provider, + lastMessageAt, lastMessagePreview, renderProviderIcon, }: ConversationItemProps): React.JSX.Element { @@ -114,10 +131,13 @@ export function ConversationItem({ {getInitials(displayName)} - - {renderIcon()} - {displayName} - + + + {renderIcon()} + {displayName} + + {lastMessageAt && {formatTime(lastMessageAt)}} + {metaText} diff --git a/codebase/packages/messenger-ui/src/components/conversation-list.tsx b/codebase/packages/messenger-ui/src/components/conversation-list.tsx index d43a702..c952fc8 100644 --- a/codebase/packages/messenger-ui/src/components/conversation-list.tsx +++ b/codebase/packages/messenger-ui/src/components/conversation-list.tsx @@ -83,6 +83,7 @@ export function ConversationList({ participantIds={conv.participantIds} isActive={conv.id === activeConversationId} provider={conv.provider} + lastMessageAt={conv.lastMessageAt} lastMessagePreview={conv.lastMessagePreview} renderProviderIcon={renderProviderIcon} onClick={() => diff --git a/messenger-conversation-list.png b/messenger-conversation-list.png new file mode 100644 index 0000000..6684daa Binary files /dev/null and b/messenger-conversation-list.png differ diff --git a/messenger-date-dividers.png b/messenger-date-dividers.png new file mode 100644 index 0000000..8ccdf0a Binary files /dev/null and b/messenger-date-dividers.png differ