feat: add unread message count badge to CommonHeader for user role

src/components/layout/CommonHeader.tsx

@@ -14,7 +14,7 @@ const navLinks = [
 
 export function CommonHeader() {
   const { data: session, status } = useSession();
-  const { profileImage, profileName, avatarLoaded, setAvatarLoaded, notificationCount } = useHeaderData();
+  const { profileImage, profileName, avatarLoaded, setAvatarLoaded, notificationCount, messageCount } = useHeaderData();
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const [showGuestMenu, setShowGuestMenu] = useState(false);
   const [showMobileMenu, setShowMobileMenu] = useState(false);
@@ -90,6 +90,28 @@ export function CommonHeader() {
             <div className="w-[35px] h-[35px] rounded-full shimmer-loading" />
           ) : session ? (
             <>
+              {/* Message Icon - User role only */}
+              {userRole === 'USER' && (
+                <Link
+                  href="/user/message"
+                  className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer"
+                >
+                  <Image
+                    src="/assets/icons/message-orange-icon.svg"
+                    alt="Messages"
+                    width={20}
+                    height={18}
+                  />
+                  {messageCount > 0 && (
+                    <span className="absolute -top-1.5 -right-2 min-w-[18px] h-[18px] bg-red-500 rounded-full flex items-center justify-center px-1">
+                      <span className="text-white text-[10px] font-bold leading-none">
+                        {messageCount > 99 ? '99+' : messageCount}
+                      </span>
+                    </span>
+                  )}
+                </Link>
+              )}
+
               {/* Notification Bell */}
               <Link
                 href={userRole === 'AGENT' ? '/agent/notifications' : '/user/notifications'}