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 ? (