ui(messenger-ui): 💄 Update ConversationItem and ConversationList components with modern styling, date divider visuals, and optimized rendering logic

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>

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({
     <ItemWrapper $active={isActive} onClick={onClick}>
       <AvatarCircle $isGroup={isGroup}>{getInitials(displayName)}</AvatarCircle>
       <Info>
-        <NameRow>
-          {renderIcon()}
-          <Name>{displayName}</Name>
-        </NameRow>
+        <TopRow>
+          <NameRow>
+            {renderIcon()}
+            <Name>{displayName}</Name>
+          </NameRow>
+          {lastMessageAt && <Timestamp>{formatTime(lastMessageAt)}</Timestamp>}
+        </TopRow>
         <Meta>{metaText}</Meta>
       </Info>
     </ItemWrapper>

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={() =>