feat: Implement conversation mute and favorite features with UI, API, and state management.

src/components/message/ChatHeader.tsx

@@ -14,9 +14,13 @@ interface ChatHeaderProps {
   expertise?: string[];
   isTyping?: boolean;
   typingText?: string;
+  isMuted?: boolean;
+  isStarred?: boolean;
   onClearChat?: () => void;
   onDeleteConversation?: () => void;
   onReportUser?: () => void;
+  onToggleMute?: (muted: boolean) => void;
+  onToggleStar?: (starred: boolean) => void;
 }
 
 export function ChatHeader({
@@ -29,13 +33,15 @@ export function ChatHeader({
   expertise = [],
   isTyping = false,
   typingText,
+  isMuted = false,
+  isStarred = false,
   onClearChat,
   onDeleteConversation,
   onReportUser,
+  onToggleMute,
+  onToggleStar,
 }: ChatHeaderProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [isMuted, setIsMuted] = useState(false);
-  const [isStarred, setIsStarred] = useState(false);
   const [avatarLoaded, setAvatarLoaded] = useState(false);
 
   const placeholder = '/assets/icons/user-placeholder-icon.svg';
@@ -48,7 +54,7 @@ export function ChatHeader({
     },
     {
       label: isMuted ? 'Unmute Notifications' : 'Mute Notifications',
-      onClick: () => setIsMuted((prev) => !prev),
+      onClick: () => onToggleMute?.(!isMuted),
     },
     {
       label: 'Report User',
@@ -118,7 +124,7 @@ export function ChatHeader({
             />
           </div>
           <button
-            onClick={() => setIsStarred((prev) => !prev)}
+            onClick={() => onToggleStar?.(!isStarred)}
             className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
           >
             {isStarred ? (

src/components/message/MessagingPage.tsx

@@ -148,6 +148,8 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
     markAllAsRead,
     deleteConversation,
     clearMessages,
+    toggleMute,
+    toggleFavorite,
   } = useMessaging();
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -796,9 +798,17 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
                     {/* Content */}
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2 mb-1">
+                        {(userRole === 'AGENT' ? conversation.agentFavorited : conversation.userFavorited) && (
+                          <Image src="/assets/icons/star-filled-icon.svg" alt="Starred" width={14} height={14} className="flex-shrink-0" />
+                        )}
                         <p className="font-fractul font-medium text-[14px] leading-[17px] text-[#00293D]">
                           {conversation.otherParty?.name || 'Unknown'}
                         </p>
+                        {(userRole === 'AGENT' ? conversation.agentMuted : conversation.userMuted) && (
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="flex-shrink-0 text-[#00293D]/40">
+                            <path d="M11 5L6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                          </svg>
+                        )}
                         {conversation.unreadCount > 0 && (
                           <span className="bg-[#e58625] text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[20px] text-center">
                             {conversation.unreadCount}
@@ -829,9 +839,13 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
                   {...selectedUserInfo}
                   isTyping={typingUserNames.length > 0}
                   typingText={typingUserNames.length > 0 ? `${typingUserNames.join(', ')} is typing...` : undefined}
+                  isMuted={userRole === 'AGENT' ? (currentConversation?.agentMuted || false) : (currentConversation?.userMuted || false)}
+                  isStarred={userRole === 'AGENT' ? (currentConversation?.agentFavorited || false) : (currentConversation?.userFavorited || false)}
                   onClearChat={clearMessages}
                   onDeleteConversation={handleDeleteConversation}
                   onReportUser={() => setIsReportModalOpen(true)}
+                  onToggleMute={(muted) => currentConversation && toggleMute(currentConversation.id, muted)}
+                  onToggleStar={(starred) => currentConversation && toggleFavorite(currentConversation.id, starred)}
                 />
 
                 {/* Messages area wrapper */}