From 0a6aae8ef776b423fcac98c6cb43a42b15939826 Mon Sep 17 00:00:00 2001
From: haorwen <haorwen@qq.com>
Date: Thu, 9 Apr 2026 00:07:29 +0800
Subject: [PATCH] feat: add @ mention indicator on unread badge and bump
 version to v0.9.76

---
 package.json                            |  2 +-
 src/routes/chat/SessionList/Session.tsx | 29 ++++++++++++++++++-------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 5414e627..cb87be5e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.9.75",
+  "version": "0.9.76",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",
diff --git a/src/routes/chat/SessionList/Session.tsx b/src/routes/chat/SessionList/Session.tsx
index 9637daed..1b05effb 100644
--- a/src/routes/chat/SessionList/Session.tsx
+++ b/src/routes/chat/SessionList/Session.tsx
@@ -105,12 +105,13 @@ const Session: FC<IProps> = ({
   if (!data) return null;
   const previewMsg = messageData[mid] || {};
   const { name, icon, is_public } = data;
-  const { unreads = 0 } = getUnreadCount({
+  const { unreads = 0, mentions = [] } = getUnreadCount({
     mids,
     readIndex,
     messageData,
     loginUid,
   });
+  const hasMention = mentions.length > 0;
   const isVoicing =
     type == "channel"
       ? voiceList.some((item) => {
@@ -181,14 +182,26 @@ const Session: FC<IProps> = ({
                 {renderPreviewMessage(previewMsg)}
               </span>
               {unreads > 0 && !isCurrentPath ? (
-                <strong
-                  className={clsx(
-                    `text-white px-1.5 py-[3px] font-bold text-[10px] leading-[10px] rounded-[10px]`,
-                    muted ? "bg-black/10 dark:bg-gray-500" : "bg-primary-400"
+                <span className="flex items-center gap-0.5">
+                  {hasMention && (
+                    <strong
+                      className={clsx(
+                        `text-white px-1 py-[3px] font-bold text-[10px] leading-[10px] rounded-[10px]`,
+                        muted ? "bg-black/10 dark:bg-gray-500" : "bg-primary-400"
+                      )}
+                    >
+                      @
+                    </strong>
                   )}
-                >
-                  {unreads > 99 ? "99+" : unreads}
-                </strong>
+                  <strong
+                    className={clsx(
+                      `text-white px-1.5 py-[3px] font-bold text-[10px] leading-[10px] rounded-[10px]`,
+                      muted ? "bg-black/10 dark:bg-gray-500" : "bg-primary-400"
+                    )}
+                  >
+                    {unreads > 99 ? "99+" : unreads}
+                  </strong>
+                </span>
               ) : (
                 muted && <IconMute className="w-3 h-3 fill-black/10 dark:fill-gray-500" />
               )}