feat: add @ mention indicator on unread badge and bump version to v0.9.76

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",

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,6 +182,17 @@ const Session: FC<IProps> = ({
                 {renderPreviewMessage(previewMsg)}
               </span>
               {unreads > 0 && !isCurrentPath ? (
+                <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>
+                  )}
                   <strong
                     className={clsx(
                       `text-white px-1.5 py-[3px] font-bold text-[10px] leading-[10px] rounded-[10px]`,
@@ -189,6 +201,7 @@ const Session: FC<IProps> = ({
                   >
                     {unreads > 99 ? "99+" : unreads}
                   </strong>
+                </span>
               ) : (
                 muted && <IconMute className="w-3 h-3 fill-black/10 dark:fill-gray-500" />
               )}