[Glitch] Change the filtered notification count to be in the account avatar

Port cc453f2221 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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,7 +47,15 @@ export const Avatar: React.FC<Props> = ({
       style={style}
       data-avatar-of={account && `@${account.get('acct')}`}
     >
-      {src && <img src={src} alt={account?.get('acct')} />}
+      {src && <img src={src} alt='' />}
+      {counter && (
+        <div
+          className='account__avatar__counter'
+          style={{ borderColor: counterBorderColor }}
+        >
+          {counter}
+        </div>
+      )}
     </div>
   );
 };

app/javascript/flavours/glitch/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>

app/javascript/flavours/glitch/styles/_mixins.scss

@@ -1,15 +1,3 @@
-@mixin avatar-radius() {
-  border-radius: $ui-avatar-border-size;
-  background-position: 50%;
-  background-clip: padding-box;
-}
-
-@mixin avatar-size($size: 48px) {
-  width: $size;
-  height: $size;
-  background-size: $size $size;
-}
-
 @mixin fullwidth-gallery {
   &.full-width {
     margin-left: -14px;

app/javascript/flavours/glitch/styles/accounts.scss

@@ -49,8 +49,6 @@
       flex: 0 0 auto;
       width: 48px;
       height: 48px;
-      @include avatar-size(48px);
-
       padding-top: 2px;
 
       img {
@@ -59,8 +57,6 @@
         display: block;
         margin: 0;
         border-radius: 4px;
-        @include avatar-radius;
-
         background: darken($ui-base-color, 8%);
         object-fit: cover;
       }

app/javascript/flavours/glitch/styles/components.scss

@@ -2162,17 +2162,15 @@ body > [data-popper-placement] {
 }
 
 .account__avatar {
-  @include avatar-radius;
-
   display: block;
   position: relative;
-  overflow: hidden;
 
   img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: 4px;
   }
 
   &-inline {
@@ -2182,8 +2180,6 @@ body > [data-popper-placement] {
   }
 
   &-composite {
-    @include avatar-radius;
-
     overflow: hidden;
     position: relative;
 
@@ -2210,6 +2206,29 @@ body > [data-popper-placement] {
       font-size: 15px;
     }
   }
+
+  &__counter {
+    $height: 16px;
+    $h-padding: 5px;
+
+    position: absolute;
+    bottom: -3px;
+    inset-inline-end: -3px;
+    padding-left: $h-padding;
+    padding-right: $h-padding;
+    height: $height;
+    border-radius: $height;
+    min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
+    line-height: $height + 1px; // to visually center the numbers
+    background-color: $ui-button-background-color;
+    color: $white;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--background-color);
+    font-size: 11px;
+    font-weight: 500;
+    text-align: center;
+  }
 }
 
 a .account__avatar {

app/javascript/flavours/glitch/styles/containers.scss

@@ -72,12 +72,9 @@
   }
 
   .avatar {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
     flex: 0 0 auto;
-    @include avatar-size(40px);
-
-    margin-inline-end: 10px;
 
     img {
       width: 100%;
@@ -85,7 +82,6 @@
       display: block;
       margin: 0;
       border-radius: 4px;
-      @include avatar-radius;
     }
   }