feat: add more trust score badge

src/components/NotificationList/NotificationItem/Notification.tsx

@@ -1,6 +1,7 @@
 import ContentPreview from '@/components/ContentPreview'
 import { FormattedTimestamp } from '@/components/FormattedTimestamp'
 import StuffStats from '@/components/StuffStats'
+import TrustScoreBadge from '@/components/TrustScoreBadge'
 import { Skeleton } from '@/components/ui/skeleton'
 import UserAvatar from '@/components/UserAvatar'
 import Username from '@/components/Username'
@@ -62,7 +63,16 @@ export default function Notification({
         onClick={handleClick}
       >
         <div className="flex gap-2 items-center flex-1 w-0">
+          <div className="relative">
             <UserAvatar userId={sender} size="small" />
+            <TrustScoreBadge
+              pubkey={sender}
+              classNames={{
+                container:
+                  'absolute inset-0 w-full h-full rounded-full bg-background/60 backdrop-blur-sm flex flex-col justify-center items-center pointer-events-none'
+              }}
+            />
+          </div>
           {icon}
           {middle}
           {targetEvent && (
@@ -99,6 +109,7 @@ export default function Notification({
               className="flex-1 max-w-fit truncate font-semibold"
               skeletonClassName="h-4"
             />
+            <TrustScoreBadge pubkey={sender} />
             <div className="shrink-0 text-muted-foreground text-sm">{description}</div>
           </div>
           {unread && (

src/components/TrustScoreBadge/index.tsx

@@ -8,10 +8,14 @@ import { useTranslation } from 'react-i18next'
 
 export default function TrustScoreBadge({
   pubkey,
-  className
+  className,
+  classNames
 }: {
   pubkey: string
   className?: string
+  classNames?: {
+    container?: string
+  }
 }) {
   const { t } = useTranslation()
   const { isUserTrusted } = useUserTrust()
@@ -54,7 +58,10 @@ export default function TrustScoreBadge({
   // percentile < 60: suspicious (yellow warning)
   if (percentile < 40) {
     return (
-      <div title={t('Likely spam account (Trust score: {{percentile}}%)', { percentile })}>
+      <div
+        title={t('Likely spam account (Trust score: {{percentile}}%)', { percentile })}
+        className={classNames?.container}
+      >
         <ShieldAlert className={cn('!size-4 text-red-500', className)} />
       </div>
     )
@@ -62,7 +69,10 @@ export default function TrustScoreBadge({
 
   if (percentile < 60) {
     return (
-      <div title={t('Suspicious account (Trust score: {{percentile}}%)', { percentile })}>
+      <div
+        title={t('Suspicious account (Trust score: {{percentile}}%)', { percentile })}
+        className={classNames?.container}
+      >
         <AlertTriangle className={cn('!size-4 text-yellow-600 dark:text-yellow-500', className)} />
       </div>
     )