From 2f6e12bdb5b2f73f9555df02e2353107c7715fd7 Mon Sep 17 00:00:00 2001
From: Zeck Li <devformatters@gmail.com>
Date: Wed, 14 Sep 2022 17:13:58 +0800
Subject: [PATCH 1/2] fix(copy): correct copy of entering description

---
 src/common/enums/text.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/enums/text.ts b/src/common/enums/text.ts
index 0d66b8b753..808168e416 100644
--- a/src/common/enums/text.ts
+++ b/src/common/enums/text.ts
@@ -927,7 +927,7 @@ export const TEXT = {
     myNFTCollections: 'My NFT Collections',
     login: 'Log in',
     authEntries: 'Enter',
-    authMethod: 'Choose method to enter',
+    authMethod: 'Choose a method to enter',
     successLinkWallet: 'Wallet successfully linked',
     loginPassword: 'Password',
     logout: 'Log Out',

From 9ac8a64f5cb08ae453b2f3eec7e97350aaddfb72 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Wed, 14 Sep 2022 17:27:19 +0800
Subject: [PATCH 2/2] feat(notice): support anchor link for circle notice

---
 src/common/utils/route.ts                     |  4 +-
 src/components/Comment/CreatedAt/index.tsx    |  6 +-
 src/components/Expandable/index.tsx           |  2 +-
 .../ArticleNewAppreciationNotice.tsx          | 24 +----
 .../Notice/ArticleNotice/CircleNewArticle.tsx |  3 +-
 .../CircleNewBroadcastComments.tsx            | 66 ++++++++-----
 .../CircleNewDiscussionComments.tsx           | 98 +++++++++++++------
 .../CircleNotice/CircleNewUserNotice.tsx      | 24 +----
 .../CommentNewReplyNotice.tsx                 | 27 ++---
 .../CommentNotice/ArticleNewCommentNotice.tsx | 24 +----
 .../CircleNewBroadcastNotice.tsx              | 43 ++++----
 .../CommentMentionedYouNotice.tsx             | 47 +++++++--
 .../SubscribedArticleNewCommentNotice.tsx     | 24 +----
 src/components/Notice/NoticeCircleName.tsx    |  6 +-
 src/components/Notice/NoticeComment.tsx       |  9 +-
 src/components/Notice/NoticeHeadActors.tsx    | 52 ++++++++++
 .../UserNotice/UserNewFollowerNotice.tsx      | 24 +----
 src/components/Tag/index.tsx                  |  4 +-
 .../ArticleDetail/TranslationToast/index.tsx  |  7 +-
 src/views/Settings/index.tsx                  |  2 +-
 20 files changed, 278 insertions(+), 218 deletions(-)
 create mode 100644 src/components/Notice/NoticeHeadActors.tsx

diff --git a/src/common/utils/route.ts b/src/common/utils/route.ts
index cfc613e7b4..3292113b2a 100644
--- a/src/common/utils/route.ts
+++ b/src/common/utils/route.ts
@@ -52,8 +52,8 @@ type ToPathArgs =
   | {
       page: 'commentDetail'
       comment: CommentArgs
-      article?: ArticleArgs
-      circle?: CircleArgs
+      article?: ArticleArgs | null
+      circle?: CircleArgs | null
     }
   | { page: 'draftDetail'; id: string; slug: string }
   | {
diff --git a/src/components/Comment/CreatedAt/index.tsx b/src/components/Comment/CreatedAt/index.tsx
index a1b21d626f..f456801e1b 100644
--- a/src/components/Comment/CreatedAt/index.tsx
+++ b/src/components/Comment/CreatedAt/index.tsx
@@ -31,6 +31,10 @@ const fragments = {
             userName
           }
         }
+        ... on Circle {
+          id
+          name
+        }
       }
       createdAt
     }
@@ -47,7 +51,7 @@ const CreatedAt = ({ comment, hasLink }: CreatedAtProps) => {
       page: 'commentDetail',
       comment,
       article,
-      circle: circle! as unknown as { __typename: 'Circle'; name: string },
+      circle,
     })
     return (
       <LinkWrapper {...path} disabled={!hasLink}>
diff --git a/src/components/Expandable/index.tsx b/src/components/Expandable/index.tsx
index 4ebc510688..70c23bc4eb 100644
--- a/src/components/Expandable/index.tsx
+++ b/src/components/Expandable/index.tsx
@@ -5,7 +5,7 @@ import TextTruncate from 'react-text-truncate'
 
 import { Button, IconArrowUp16, TextIcon, Translate } from '~/components'
 
-import { stripHtml } from '@/src/common/utils/text'
+import { stripHtml } from '~/common/utils/text'
 
 import styles from './styles.css'
 
diff --git a/src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx b/src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx
index ae94b8aac6..9ca2eeb1ff 100644
--- a/src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx
+++ b/src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx
@@ -1,15 +1,12 @@
 import gql from 'graphql-tag'
-import { Fragment } from 'react'
 
 import { Translate } from '~/components'
 
-import { numAbbr } from '~/common/utils'
-
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeArticleCard from '../NoticeArticleCard'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import styles from '../styles.css'
 
@@ -35,19 +32,8 @@ const ArticleNewAppreciationNotice = ({ notice }: { notice: NoticeType }) => {
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           <Translate
             zh_hant="喜歡並讚賞了你的作品"
             zh_hans="喜欢并赞赏了你的作品"
@@ -80,14 +66,14 @@ ArticleNewAppreciationNotice.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
       }
       article: target {
         ...NoticeArticleCard
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeArticleCard.fragments.article}
     ${NoticeDate.fragments.notice}
   `,
diff --git a/src/components/Notice/ArticleNotice/CircleNewArticle.tsx b/src/components/Notice/ArticleNotice/CircleNewArticle.tsx
index 65226c55bb..2e27d5c4b2 100644
--- a/src/components/Notice/ArticleNotice/CircleNewArticle.tsx
+++ b/src/components/Notice/ArticleNotice/CircleNewArticle.tsx
@@ -30,11 +30,12 @@ const CircleNewArticle = ({ notice }: { notice: NoticeType }) => {
             <Translate
               zh_hant="新作品已經加入圍爐，馬上前往閱讀吧！"
               zh_hans="新作品已经加入围炉，马上前往阅读吧！"
+              en="A new article has been added to the circle, read it now!"
             />
           }
         >
           <NoticeCircleName circle={circle} />
-          <Translate zh_hant=" 又成長了" zh_hans=" 又成长了" />
+          <Translate zh_hant=" 又成長了" zh_hans=" 又成长了" en=" is growing" />
         </NoticeHead>
 
         <NoticeArticleCard article={notice.article} />
diff --git a/src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx b/src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx
index fea059bbbe..73a5fcacd9 100644
--- a/src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx
+++ b/src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx
@@ -1,16 +1,16 @@
 import gql from 'graphql-tag'
-import { Fragment, useContext } from 'react'
+import { useContext } from 'react'
 
 import { Translate, ViewerContext } from '~/components'
 
-import { numAbbr } from '~/common/utils'
+import { toPath } from '~/common/utils'
 
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeCircleCard from '../NoticeCircleCard'
 import NoticeCircleName from '../NoticeCircleName'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import styles from '../styles.css'
 
@@ -24,7 +24,7 @@ const CircleNewBroadcastComments = ({
   notice,
 }: CircleNewBroadcastCommentsType) => {
   const viewer = useContext(ViewerContext)
-  const { replies, mentions } = notice
+  const { comments, replies, mentions } = notice
 
   if (!notice.actors) {
     return null
@@ -41,6 +41,17 @@ const CircleNewBroadcastComments = ({
   const actorsCount = notice.actors.length
   const isMultiActors = actorsCount > 1
 
+  const latestComment = [
+    ...(comments || []),
+    ...(replies || []),
+    ...(mentions || []),
+  ].filter(Boolean)[0]
+  const circleCommentPath = toPath({
+    page: 'commentDetail',
+    comment: latestComment,
+    circle: notice.circle,
+  })
+
   return (
     <section className="container">
       <section className="avatar-wrap">
@@ -53,49 +64,42 @@ const CircleNewBroadcastComments = ({
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           <>
             {isCircleOwner ? (
               <Translate
                 zh_hant="在你的圍爐 "
                 zh_hans="在你的围炉 "
-                en=" in "
+                en=" commented in your circle "
               />
             ) : (
-              <Translate zh_hant="在圍爐 " zh_hans="在围炉 " en=" in " />
+              <Translate
+                zh_hant="在圍爐 "
+                zh_hans="在围炉 "
+                en=" commented in "
+              />
             )}
-            <NoticeCircleName circle={notice.circle} />
+            <NoticeCircleName circle={notice.circle} path={circleCommentPath} />
             {replyCount && !mentionCount && (
               <Translate
                 zh_hant=" 廣播中留言 "
                 zh_hans=" 广播中留言 "
-                en=" replied broadcasts "
+                en=" Broadcast "
               />
             )}
             {!replyCount && mentionCount && (
               <Translate
                 zh_hant=" 廣播中留言，其中有提及你 "
                 zh_hans=" 广播中留言，其中有提及你 "
-                en=" replied broadcasts and mentioned you "
+                en=" Broadcast and mentioned you "
               />
             )}
             {replyCount && mentionCount && (
               <Translate
                 zh_hant=" 廣播中留言，其中有提及你 "
                 zh_hans=" 广播中留言，其中有提及你 "
-                en=" replied broadcasts and mentioned you "
+                en=" Broadcast and mentioned you "
               />
             )}
           </>
@@ -122,26 +126,38 @@ CircleNewBroadcastComments.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
       }
       circle: target {
         ...NoticeCircleCard
       }
       comments {
         id
+        type
+        parentComment {
+          id
+        }
       }
       replies {
         id
+        type
+        parentComment {
+          id
+        }
         author {
           id
         }
       }
       mentions {
         id
+        type
+        parentComment {
+          id
+        }
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeCircleCard.fragments.circle}
     ${NoticeDate.fragments.notice}
   `,
diff --git a/src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx b/src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx
index 44c0360841..e424fd28a4 100644
--- a/src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx
+++ b/src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx
@@ -1,16 +1,16 @@
 import gql from 'graphql-tag'
-import { Fragment, useContext } from 'react'
+import { useContext } from 'react'
 
-import { Translate, ViewerContext } from '~/components'
+import { LanguageContext, Translate, ViewerContext } from '~/components'
 
-import { numAbbr } from '~/common/utils'
+import { toPath } from '~/common/utils'
 
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeCircleCard from '../NoticeCircleCard'
 import NoticeCircleName from '../NoticeCircleName'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import styles from '../styles.css'
 
@@ -25,6 +25,8 @@ const CircleNewDiscussionComments = ({
 }: CircleNewDiscussionCommentsType) => {
   const viewer = useContext(ViewerContext)
   const { comments, replies, mentions } = notice
+  const { lang } = useContext(LanguageContext)
+  const isEn = lang === 'en'
 
   if (!notice.actors) {
     return null
@@ -42,6 +44,17 @@ const CircleNewDiscussionComments = ({
   const actorsCount = notice.actors.length
   const isMultiActors = actorsCount > 1
 
+  const latestComment = [
+    ...(comments || []),
+    ...(replies || []),
+    ...(mentions || []),
+  ].filter(Boolean)[0]
+  const circleCommentPath = toPath({
+    page: 'commentDetail',
+    comment: latestComment,
+    circle: notice.circle,
+  })
+
   return (
     <section className="container">
       <section className="avatar-wrap">
@@ -54,38 +67,39 @@ const CircleNewDiscussionComments = ({
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           <>
-            {isCircleOwner ? (
-              <Translate zh_hant="在你的圍爐 " zh_hans="在你的围炉 " en=" in" />
-            ) : (
-              <Translate zh_hant="在圍爐 " zh_hans="在围炉 " en=" in " />
-            )}
-            <NoticeCircleName circle={notice.circle} />
+            {!isEn ? (
+              <>
+                {isCircleOwner ? (
+                  <Translate
+                    zh_hant="在你的圍爐 "
+                    zh_hans="在你的围炉 "
+                    en=" in your circle "
+                  />
+                ) : (
+                  <Translate zh_hant="在圍爐 " zh_hans="在围炉 " en=" in " />
+                )}
+                <NoticeCircleName
+                  circle={notice.circle}
+                  path={circleCommentPath}
+                />
+              </>
+            ) : null}
+
             {newDiscussionCount && !replyCount && !mentionCount && (
               <Translate
                 zh_hant=" 眾聊中發表話題 "
                 zh_hans=" 众聊中发表话题 "
-                en=" posted new discussions "
+                en=" started a new topic "
               />
             )}
             {!newDiscussionCount && replyCount && !mentionCount && (
               <Translate
                 zh_hant=" 眾聊中回覆話題 "
                 zh_hans=" 众聊中回复话题 "
-                en=" replied discussions "
+                en=" replied to topics "
               />
             )}
             {!newDiscussionCount && !replyCount && mentionCount && (
@@ -99,30 +113,40 @@ const CircleNewDiscussionComments = ({
               <Translate
                 zh_hant=" 眾聊中發表與回覆話題 "
                 zh_hans=" 众聊中发表与回复话题 "
-                en=" posted and replied discussions "
+                en=" posted and replied to topics "
               />
             )}
             {newDiscussionCount && !replyCount && mentionCount && (
               <Translate
                 zh_hant=" 眾聊中發表話題，其中有提及你 "
                 zh_hans=" 众聊中发表话题，其中有提及你 "
-                en=" posted new discussions and mentioned you "
+                en=" posted a new topic and mentioned you "
               />
             )}
             {!newDiscussionCount && replyCount && mentionCount && (
               <Translate
                 zh_hant=" 眾聊中回覆話題，其中有提到你 "
                 zh_hans=" 众聊中回复话题，其中有提到你 "
-                en=" replied discussions and mentioned you "
+                en=" replied to topics and mentioned you "
               />
             )}
             {newDiscussionCount && replyCount && mentionCount && (
               <Translate
                 zh_hant=" 眾聊中發表與回覆話題，其中有提到你 "
                 zh_hans=" 众聊中发表与回复话题，其中有提到你 "
-                en=" posted and replied discussions, some mentioned you "
+                en=" posted and replied to topics and mentioned you "
               />
             )}
+            {isEn ? (
+              <>
+                {isCircleOwner ? <> in your circle </> : <> in </>}
+                <NoticeCircleName
+                  circle={notice.circle}
+                  path={circleCommentPath}
+                />
+                &nbsp;Discussion
+              </>
+            ) : null}
           </>
           {isMultiActors && (
             <section className="multi-actor-avatars">
@@ -147,16 +171,24 @@ CircleNewDiscussionComments.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
       }
       circle: target {
         ...NoticeCircleCard
       }
       comments {
         id
+        type
+        parentComment {
+          id
+        }
       }
       replies {
         id
+        type
+        parentComment {
+          id
+        }
         replyTo {
           author {
             id
@@ -165,10 +197,14 @@ CircleNewDiscussionComments.fragments = {
       }
       mentions {
         id
+        type
+        parentComment {
+          id
+        }
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeCircleCard.fragments.circle}
     ${NoticeDate.fragments.notice}
   `,
diff --git a/src/components/Notice/CircleNotice/CircleNewUserNotice.tsx b/src/components/Notice/CircleNotice/CircleNewUserNotice.tsx
index b0ba9feb62..b2a6f5671b 100644
--- a/src/components/Notice/CircleNotice/CircleNewUserNotice.tsx
+++ b/src/components/Notice/CircleNotice/CircleNewUserNotice.tsx
@@ -1,14 +1,11 @@
 import gql from 'graphql-tag'
-import { Fragment } from 'react'
 
 import { Translate } from '~/components'
 
-import { numAbbr } from '~/common/utils'
-
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import NoticeUserCard from '../NoticeUserCard'
 import styles from '../styles.css'
@@ -39,19 +36,8 @@ const CircleNewUserNotice = ({ notice, userType }: CircleNewUserNotice) => {
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           {isNewFollower && (
             <Translate
               zh_hant="追蹤了你的圍爐"
@@ -100,12 +86,12 @@ CircleNewUserNotice.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
         ...NoticeUserCard
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeUserCard.fragments.follower}
     ${NoticeDate.fragments.notice}
   `,
diff --git a/src/components/Notice/CommentCommentNotice/CommentNewReplyNotice.tsx b/src/components/Notice/CommentCommentNotice/CommentNewReplyNotice.tsx
index d3f06a1cd1..de57dc3678 100644
--- a/src/components/Notice/CommentCommentNotice/CommentNewReplyNotice.tsx
+++ b/src/components/Notice/CommentCommentNotice/CommentNewReplyNotice.tsx
@@ -1,17 +1,14 @@
 import gql from 'graphql-tag'
-import { Fragment } from 'react'
 
 import { Translate } from '~/components'
 
-import { numAbbr } from '~/common/utils'
-
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeArticleTitle from '../NoticeArticleTitle'
 import NoticeCircleName from '../NoticeCircleName'
 import NoticeComment from '../NoticeComment'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import styles from '../styles.css'
 
@@ -24,6 +21,7 @@ const CommentNewReplyNotice = ({ notice }: { notice: NoticeType }) => {
 
   const actorsCount = notice.actors.length
   const isMultiActors = actorsCount > 1
+
   const replyCommentArticle =
     notice.reply?.node.__typename === 'Article' ? notice.reply.node : null
   const replyCommentCircle =
@@ -41,19 +39,8 @@ const CommentNewReplyNotice = ({ notice }: { notice: NoticeType }) => {
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           {replyCommentArticle && (
             <>
               <Translate
@@ -70,7 +57,7 @@ const CommentNewReplyNotice = ({ notice }: { notice: NoticeType }) => {
               <Translate
                 zh_hant="回覆了你在圍爐 "
                 zh_hans="回复了你在围炉 "
-                en=" replied to your response on "
+                en=" replied to your discussion on "
               />
               <NoticeCircleName circle={replyCommentCircle} />
               <Translate zh_hant=" 中的發言" zh_hans=" 中的发言" en="" />
@@ -104,7 +91,7 @@ CommentNewReplyNotice.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
       }
       comment: target {
         ...NoticeComment
@@ -122,7 +109,7 @@ CommentNewReplyNotice.fragments = {
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeArticleTitle.fragments.article}
     ${NoticeCircleName.fragments.circle}
     ${NoticeComment.fragments.comment}
diff --git a/src/components/Notice/CommentNotice/ArticleNewCommentNotice.tsx b/src/components/Notice/CommentNotice/ArticleNewCommentNotice.tsx
index 632530aa0f..1bec7593a0 100644
--- a/src/components/Notice/CommentNotice/ArticleNewCommentNotice.tsx
+++ b/src/components/Notice/CommentNotice/ArticleNewCommentNotice.tsx
@@ -1,16 +1,13 @@
 import gql from 'graphql-tag'
-import { Fragment } from 'react'
 
 import { Translate } from '~/components'
 
-import { numAbbr } from '~/common/utils'
-
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeArticleTitle from '../NoticeArticleTitle'
 import NoticeComment from '../NoticeComment'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import styles from '../styles.css'
 
@@ -40,19 +37,8 @@ const ArticleNewCommentNotice = ({ notice }: { notice: NoticeType }) => {
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           <Translate
             zh_hant="評論了作品 "
             zh_hans="评论了作品 "
@@ -86,7 +72,7 @@ ArticleNewCommentNotice.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
       }
       comment: target {
         ...NoticeComment
@@ -98,7 +84,7 @@ ArticleNewCommentNotice.fragments = {
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeArticleTitle.fragments.article}
     ${NoticeComment.fragments.comment}
     ${NoticeDate.fragments.notice}
diff --git a/src/components/Notice/CommentNotice/CircleNewBroadcastNotice.tsx b/src/components/Notice/CommentNotice/CircleNewBroadcastNotice.tsx
index 90a009e1ac..b0f75215f0 100644
--- a/src/components/Notice/CommentNotice/CircleNewBroadcastNotice.tsx
+++ b/src/components/Notice/CommentNotice/CircleNewBroadcastNotice.tsx
@@ -1,17 +1,15 @@
 import gql from 'graphql-tag'
-import { Fragment } from 'react'
 
 import { Translate } from '~/components'
 
-import { COMMENT_TYPE_TEXT } from '~/common/enums'
-import { numAbbr } from '~/common/utils'
+import { toPath } from '~/common/utils'
 
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeCircleName from '../NoticeCircleName'
 import NoticeComment from '../NoticeComment'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import styles from '../styles.css'
 
@@ -29,6 +27,13 @@ const CircleNewBroadcastNotice = ({ notice }: { notice: NoticeType }) => {
       ? notice.comment.node
       : undefined
 
+  const latestComment = notice.comment
+  const circleCommentPath = toPath({
+    page: 'commentDetail',
+    comment: latestComment,
+    circle: commentCircle,
+  })
+
   return (
     <section className="container">
       <section className="avatar-wrap">
@@ -41,28 +46,20 @@ const CircleNewBroadcastNotice = ({ notice }: { notice: NoticeType }) => {
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           <Translate
             zh_hant="在圍爐 "
             zh_hans="在围炉 "
-            en={` sent a new ${COMMENT_TYPE_TEXT.en.circleBroadcast} on `}
+            en={` sent a new broadcast on `}
           />
-          {commentCircle && <NoticeCircleName circle={commentCircle} />}
+          {commentCircle && (
+            <NoticeCircleName circle={commentCircle} path={circleCommentPath} />
+          )}
           <Translate
-            zh_hant={` 發布了新${COMMENT_TYPE_TEXT.zh_hant.circleBroadcast}`}
-            zh_hans={` 发布了新${COMMENT_TYPE_TEXT.zh_hans.circleBroadcast}`}
+            zh_hant={` 發布了新廣播`}
+            zh_hans={` 发布了新广播`}
+            en=" "
           />
         </NoticeHead>
 
@@ -92,7 +89,7 @@ CircleNewBroadcastNotice.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
       }
       comment: target {
         ...NoticeComment
@@ -104,7 +101,7 @@ CircleNewBroadcastNotice.fragments = {
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeCircleName.fragments.circle}
     ${NoticeComment.fragments.comment}
     ${NoticeDate.fragments.notice}
diff --git a/src/components/Notice/CommentNotice/CommentMentionedYouNotice.tsx b/src/components/Notice/CommentNotice/CommentMentionedYouNotice.tsx
index 705c004840..7c03a3ebcb 100644
--- a/src/components/Notice/CommentNotice/CommentMentionedYouNotice.tsx
+++ b/src/components/Notice/CommentNotice/CommentMentionedYouNotice.tsx
@@ -2,13 +2,16 @@ import gql from 'graphql-tag'
 
 import { Translate } from '~/components'
 
+import { toPath } from '~/common/utils'
+
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeArticleTitle from '../NoticeArticleTitle'
 import NoticeCircleName from '../NoticeCircleName'
 import NoticeComment from '../NoticeComment'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
+import NoticeTypeIcon from '../NoticeTypeIcon'
 import styles from '../styles.css'
 
 import { CommentMentionedYouNotice as NoticeType } from './__generated__/CommentMentionedYouNotice'
@@ -18,7 +21,9 @@ const CommentMentionedYouNotice = ({ notice }: { notice: NoticeType }) => {
     return null
   }
 
-  const actor = notice.actors[0]
+  const actorsCount = notice.actors.length
+  const isMultiActors = actorsCount > 1
+
   const commentArticle =
     notice.comment?.node.__typename === 'Article' ? notice.comment.node : null
   const commentCircle =
@@ -29,15 +34,26 @@ const CommentMentionedYouNotice = ({ notice }: { notice: NoticeType }) => {
   const commentCircleBroadcast =
     notice.comment?.type === 'circleBroadcast' ? notice.comment.type : null
 
+  const latestComment = notice.comment
+  const circleCommentPath = toPath({
+    page: 'commentDetail',
+    comment: latestComment,
+    circle: commentCircle,
+  })
+
   return (
     <section className="container">
       <section className="avatar-wrap">
-        <NoticeActorAvatar user={actor} />
+        {isMultiActors ? (
+          <NoticeTypeIcon type="comment" />
+        ) : (
+          <NoticeActorAvatar user={notice.actors[0]} />
+        )}
       </section>
 
       <section className="content-wrap">
         <NoticeHead>
-          <NoticeActorName user={actor} />
+          <NoticeHeadActors actors={notice.actors} />
 
           {commentArticle && (
             <>
@@ -59,21 +75,24 @@ const CommentMentionedYouNotice = ({ notice }: { notice: NoticeType }) => {
               <Translate
                 zh_hant=" 在圍爐 "
                 zh_hans=" 在围炉 "
-                en=" mentioned you on "
+                en=" commented in "
+              />
+              <NoticeCircleName
+                circle={commentCircle}
+                path={circleCommentPath}
               />
-              <NoticeCircleName circle={commentCircle} />
               {commentCircleDiscussion && (
                 <Translate
                   zh_hant={` 眾聊提及你`}
                   zh_hans={` 众聊提及你`}
-                  en=""
+                  en=" Discussion and mentioned you"
                 />
               )}
               {commentCircleBroadcast && (
                 <Translate
                   zh_hant={` 廣播提及你`}
                   zh_hans={` 广播提及你`}
-                  en=""
+                  en=" Broadcast and mentioned you"
                 />
               )}
             </>
@@ -82,6 +101,14 @@ const CommentMentionedYouNotice = ({ notice }: { notice: NoticeType }) => {
 
         <NoticeComment comment={notice.comment} />
 
+        {isMultiActors && (
+          <section className="multi-actor-avatars">
+            {notice.actors.map((actor, index) => (
+              <NoticeActorAvatar key={index} user={actor} size="md" />
+            ))}
+          </section>
+        )}
+
         <NoticeDate notice={notice} />
       </section>
 
@@ -97,7 +124,7 @@ CommentMentionedYouNotice.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
       }
       comment: target {
         ...NoticeComment
@@ -112,7 +139,7 @@ CommentMentionedYouNotice.fragments = {
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeArticleTitle.fragments.article}
     ${NoticeCircleName.fragments.circle}
     ${NoticeComment.fragments.comment}
diff --git a/src/components/Notice/CommentNotice/SubscribedArticleNewCommentNotice.tsx b/src/components/Notice/CommentNotice/SubscribedArticleNewCommentNotice.tsx
index 15c2bef107..86bec4db5c 100644
--- a/src/components/Notice/CommentNotice/SubscribedArticleNewCommentNotice.tsx
+++ b/src/components/Notice/CommentNotice/SubscribedArticleNewCommentNotice.tsx
@@ -1,16 +1,13 @@
 import gql from 'graphql-tag'
-import { Fragment } from 'react'
 
 import { Translate } from '~/components'
 
-import { numAbbr } from '~/common/utils'
-
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeArticleTitle from '../NoticeArticleTitle'
 import NoticeComment from '../NoticeComment'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import styles from '../styles.css'
 
@@ -44,19 +41,8 @@ const SubscribedArticleNewCommentNotice = ({
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           <Translate
             zh_hant="評論了你收藏的作品 "
             zh_hans="评论了你收藏的作品 "
@@ -90,7 +76,7 @@ SubscribedArticleNewCommentNotice.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
       }
       comment: target {
         ...NoticeComment
@@ -102,7 +88,7 @@ SubscribedArticleNewCommentNotice.fragments = {
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeArticleTitle.fragments.article}
     ${NoticeComment.fragments.comment}
     ${NoticeDate.fragments.notice}
diff --git a/src/components/Notice/NoticeCircleName.tsx b/src/components/Notice/NoticeCircleName.tsx
index b7b50ef128..8ba5b0ddc5 100644
--- a/src/components/Notice/NoticeCircleName.tsx
+++ b/src/components/Notice/NoticeCircleName.tsx
@@ -7,20 +7,22 @@ import { NoticeCircleName as NoticeCircleNameType } from './__generated__/Notice
 
 const NoticeCircleName = ({
   circle,
+  path,
 }: {
   circle: NoticeCircleNameType | null
+  path?: { href: string; pathname?: string }
 }) => {
   if (!circle) {
     return null
   }
 
-  const path = toPath({
+  const circlePath = toPath({
     page: 'circleDetail',
     circle,
   })
 
   return (
-    <Link {...path}>
+    <Link {...(path || circlePath)}>
       <a>{circle.displayName}</a>
     </Link>
   )
diff --git a/src/components/Notice/NoticeComment.tsx b/src/components/Notice/NoticeComment.tsx
index 31043409f8..8afe6b6a8f 100644
--- a/src/components/Notice/NoticeComment.tsx
+++ b/src/components/Notice/NoticeComment.tsx
@@ -26,6 +26,10 @@ const fragments = {
             userName
           }
         }
+        ... on Circle {
+          id
+          name
+        }
       }
       parentComment {
         id
@@ -41,17 +45,20 @@ const fragments = {
 const NoticeComment = ({ comment }: { comment: NoticeCommentType | null }) => {
   const article =
     comment?.node.__typename === 'Article' ? comment.node : undefined
+  const circle =
+    comment?.node.__typename === 'Circle' ? comment.node : undefined
 
   if (!comment) {
     return null
   }
 
   const path =
-    comment.state === 'active' && article
+    comment.state === 'active'
       ? toPath({
           page: 'commentDetail',
           comment,
           article,
+          circle,
         })
       : {}
 
diff --git a/src/components/Notice/NoticeHeadActors.tsx b/src/components/Notice/NoticeHeadActors.tsx
new file mode 100644
index 0000000000..6fc0317ce2
--- /dev/null
+++ b/src/components/Notice/NoticeHeadActors.tsx
@@ -0,0 +1,52 @@
+import gql from 'graphql-tag'
+import { Fragment } from 'react'
+
+import { Translate } from '~/components'
+
+import { numAbbr } from '~/common/utils'
+
+import NoticeActorName from './NoticeActorName'
+
+type NoticeHeadActorsProps = {
+  actors: any[]
+}
+
+const NoticeHeadActors = ({ actors }: NoticeHeadActorsProps) => {
+  const actorsCount = actors.length
+  const isMultiActors = actorsCount > 1
+  const restActorCount = actorsCount - 2
+
+  return (
+    <>
+      {actors.slice(0, 2).map((actor, index) => (
+        <Fragment key={index}>
+          <NoticeActorName user={actor} />
+          {isMultiActors && index < 1 && (
+            <span>
+              <Translate zh_hant="、" zh_hans="、" en=", " />
+            </span>
+          )}
+        </Fragment>
+      ))}{' '}
+      {isMultiActors && (
+        <Translate
+          zh_hant={`等 ${numAbbr(actorsCount)} 人`}
+          zh_hans={`等 ${numAbbr(actorsCount)} 人`}
+          en={restActorCount > 0 ? `and ${numAbbr(restActorCount)} users` : ' '}
+        />
+      )}
+    </>
+  )
+}
+
+NoticeHeadActors.fragments = {
+  user: gql`
+    fragment NoticeHeadActorsUser on User {
+      id
+      ...NoticeActorNameUser
+    }
+    ${NoticeActorName.fragments.user}
+  `,
+}
+
+export default NoticeHeadActors
diff --git a/src/components/Notice/UserNotice/UserNewFollowerNotice.tsx b/src/components/Notice/UserNotice/UserNewFollowerNotice.tsx
index d4c87d8830..feadf6021c 100644
--- a/src/components/Notice/UserNotice/UserNewFollowerNotice.tsx
+++ b/src/components/Notice/UserNotice/UserNewFollowerNotice.tsx
@@ -1,14 +1,11 @@
 import gql from 'graphql-tag'
-import { Fragment } from 'react'
 
 import { Translate } from '~/components'
 
-import { numAbbr } from '~/common/utils'
-
 import NoticeActorAvatar from '../NoticeActorAvatar'
-import NoticeActorName from '../NoticeActorName'
 import NoticeDate from '../NoticeDate'
 import NoticeHead from '../NoticeHead'
+import NoticeHeadActors from '../NoticeHeadActors'
 import NoticeTypeIcon from '../NoticeTypeIcon'
 import NoticeUserCard from '../NoticeUserCard'
 import styles from '../styles.css'
@@ -31,19 +28,8 @@ const UserNewFollowerNotice = ({ notice }: { notice: NoticeType }) => {
 
       <section className="content-wrap">
         <NoticeHead>
-          {notice.actors.slice(0, 2).map((actor, index) => (
-            <Fragment key={index}>
-              <NoticeActorName user={actor} />
-              {isMultiActors && index < 1 && <span>、</span>}
-            </Fragment>
-          ))}{' '}
-          {isMultiActors && (
-            <Translate
-              zh_hant={`等 ${numAbbr(actorsCount)} 人`}
-              zh_hans={`等 ${numAbbr(actorsCount)} 人`}
-              en={`etc. ${numAbbr(actorsCount)} users`}
-            />
-          )}
+          <NoticeHeadActors actors={notice.actors} />
+
           <Translate zh_hant="追蹤了你" zh_hans="追踪了你" en=" Followed You" />
         </NoticeHead>
 
@@ -72,12 +58,12 @@ UserNewFollowerNotice.fragments = {
       ...NoticeDate
       actors {
         ...NoticeActorAvatarUser
-        ...NoticeActorNameUser
+        ...NoticeHeadActorsUser
         ...NoticeUserCard
       }
     }
     ${NoticeActorAvatar.fragments.user}
-    ${NoticeActorName.fragments.user}
+    ${NoticeHeadActors.fragments.user}
     ${NoticeUserCard.fragments.follower}
     ${NoticeDate.fragments.notice}
   `,
diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
index e44a98622f..e0226c8cfb 100644
--- a/src/components/Tag/index.tsx
+++ b/src/components/Tag/index.tsx
@@ -168,9 +168,9 @@ export const Tag = ({
         </button>
       )}
 
-      {hasCount && type === 'list' && tag?.numArticles && (
+      {hasCount && type === 'list' && tag?.numArticles ? (
         <span className="count">{tag.numArticles}</span>
-      )}
+      ) : null}
 
       <style jsx>{styles}</style>
     </>
diff --git a/src/views/ArticleDetail/TranslationToast/index.tsx b/src/views/ArticleDetail/TranslationToast/index.tsx
index 087075a04c..233865e159 100644
--- a/src/views/ArticleDetail/TranslationToast/index.tsx
+++ b/src/views/ArticleDetail/TranslationToast/index.tsx
@@ -1,6 +1,7 @@
-import { CONTENT_LANG_TEXT_MAP } from '@/src/common/enums'
-import { toLocale } from '@/src/common/utils'
-import { Translate } from '@/src/components'
+import { Translate } from '~/components'
+
+import { CONTENT_LANG_TEXT_MAP } from '~/common/enums'
+import { toLocale } from '~/common/utils'
 
 import styles from './styles.css'
 
diff --git a/src/views/Settings/index.tsx b/src/views/Settings/index.tsx
index 833ed347ef..278b006f03 100644
--- a/src/views/Settings/index.tsx
+++ b/src/views/Settings/index.tsx
@@ -8,7 +8,7 @@ import {
   UniversalAuthButton,
   useResponsive,
   ViewerContext,
-} from '@/src/components'
+} from '~/components'
 
 import DisplayPreferences from './DisplayPreferences'
 import Enhance from './Enhance'