Change the filtered notification count to be in the account avatar (#31262)

app/javascript/mastodon/components/avatar.tsx

@@ -11,6 +11,8 @@ interface Props {
   style?: React.CSSProperties;
   inline?: boolean;
   animate?: boolean;
+  counter?: number | string;
+  counterBorderColor?: string;
 }
 
 export const Avatar: React.FC<Props> = ({
@@ -19,6 +21,8 @@ export const Avatar: React.FC<Props> = ({
   size = 20,
   inline = false,
   style: styleFromParent,
+  counter,
+  counterBorderColor,
 }) => {
   const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
 
@@ -43,6 +47,14 @@ export const Avatar: React.FC<Props> = ({
       style={style}
     >
       {src && <img src={src} alt='' />}
+      {counter && (
+        <div
+          className='account__avatar__counter'
+          style={{ borderColor: counterBorderColor }}
+        >
+          {counter}
+        </div>
+      )}
     </div>
   );
 };

app/javascript/mastodon/features/notifications/components/notification_request.jsx

@@ -38,12 +38,11 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
   return (
     <div className='notification-request'>
       <Link to={`/notifications/requests/${id}`} className='notification-request__link'>
-        <Avatar account={account} size={36} />
+        <Avatar account={account} size={40} counter={toCappedNumber(notificationsCount)} />
 
         <div className='notification-request__name'>
           <div className='notification-request__name__display-name'>
             <bdi><strong dangerouslySetInnerHTML={{ __html: account?.get('display_name_html') }} /></bdi>
-            <span className='filtered-notifications-banner__badge'>{toCappedNumber(notificationsCount)}</span>
           </div>
 
           <span>@{account?.get('acct')}</span>