From 51fd0509451ebda95112411ad410ff6f2c8420fe Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Thu, 19 Mar 2026 16:41:03 +0530
Subject: [PATCH] feat: Add star/unstar functionality and display a mute
 indicator in the chat header.

---
 src/components/message/ChatHeader.tsx | 36 +++++++++++++++++++++------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/message/ChatHeader.tsx b/src/components/message/ChatHeader.tsx
index aa1c3a2..f9b01d0 100644
--- a/src/components/message/ChatHeader.tsx
+++ b/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">
-            <Image
-              src="/assets/icons/star-outline-icon.svg"
-              alt="Star conversation"
-              width={24}
-              height={24}
-            />
+          <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>