feat: Add star/unstar functionality and display a mute indicator in the chat header.

src/components/message/ChatHeader.tsx

@@ -35,6 +35,7 @@ export function ChatHeader({
 }: 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';
@@ -89,6 +90,15 @@ export function ChatHeader({
           </span>
         </div>
         <div className="flex items-center gap-2 flex-shrink-0">
+          {/* Mute indicator */}
+          {isMuted && (
+            <div className="flex items-center gap-1 px-2 py-1 bg-[#00293D]/10 rounded-lg">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#00293D]/60">
+                <path d="M11 5L6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+              <span className="font-serif text-[11px] text-[#00293D]/60">Muted</span>
+            </div>
+          )}
           <div className="relative">
             <button
               onClick={handleToggleMenu}
@@ -107,13 +117,25 @@ export function ChatHeader({
               onClose={handleCloseMenu}
             />
           </div>
-          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+          <button
+            onClick={() => setIsStarred((prev) => !prev)}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
+          >
+            {isStarred ? (
+              <Image
+                src="/assets/icons/star-filled-icon.svg"
+                alt="Unstar conversation"
+                width={24}
+                height={24}
+              />
+            ) : (
               <Image
                 src="/assets/icons/star-outline-icon.svg"
                 alt="Star conversation"
                 width={24}
                 height={24}
               />
+            )}
           </button>
         </div>
       </div>