Bot avatars will be squircles

src/components/account-block.jsx

@@ -44,6 +44,7 @@ function AccountBlock({
     url,
     statusesCount,
     lastStatusAt,
+    bot,
   } = account;
   const displayNameWithEmoji = emojifyText(displayName, emojis);
   const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
@@ -68,7 +69,7 @@ function AccountBlock({
         }
       }}
     >
-      <Avatar url={avatar} size={avatarSize} />
+      <Avatar url={avatar} size={avatarSize} squircle={bot} />
       <span>
         {displayName ? (
           <b

src/components/account-info.css

@@ -110,7 +110,7 @@
     drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
 }
 .account-container header .avatar:not(.has-alpha) img {
-  border-radius: 50%;
+  border-radius: inherit;
 }
 
 .account-container main > *:first-child {

src/components/account-info.jsx

@@ -507,6 +507,7 @@ function RelatedActions({ info, instance, authenticated }) {
                   url={follower.avatarStatic}
                   size="l"
                   alt={`${follower.displayName} @${follower.acct}`}
+                  squircle={follower?.bot}
                 />
               </a>
             ))}

src/components/avatar.css

@@ -12,6 +12,9 @@
 .avatar.has-alpha {
   border-radius: 0;
 }
+.avatar:not(.has-alpha).squircle {
+  border-radius: 12px;
+}
 
 .avatar img {
   width: 100%;

src/components/avatar.jsx

@@ -13,14 +13,16 @@ const SIZES = {
 
 const alphaCache = {};
 
-function Avatar({ url, size, alt = '', ...props }) {
+function Avatar({ url, size, alt = '', squircle, ...props }) {
   size = SIZES[size] || size || SIZES.m;
   const avatarRef = useRef();
   const isMissing = /missing\.png$/.test(url);
   return (
     <span
       ref={avatarRef}
-      class={`avatar ${alphaCache[url] ? 'has-alpha' : ''}`}
+      class={`avatar ${squircle ? 'squircle' : ''} ${
+        alphaCache[url] ? 'has-alpha' : ''
+      }`}
       style={{
         width: size,
         height: size,

src/components/compose.jsx

@@ -508,6 +508,7 @@ function Compose({
               url={currentAccountInfo.avatarStatic}
               size="xl"
               alt={currentAccountInfo.username}
+              squircle={currentAccountInfo?.bot}
             />
           )}
           {!standalone ? (

src/components/menu.jsx

@@ -67,6 +67,7 @@ function NavMenu(props) {
                 currentAccount?.info?.avatarStatic
               }
               size="l"
+              squircle={currentAccount?.info?.bot}
             />
           )}
           <Icon icon="menu" size={moreThanOneAccount ? 's' : 'l'} />

src/components/name-text.jsx

@@ -14,7 +14,8 @@ function NameText({
   external,
   onClick,
 }) {
-  const { acct, avatar, avatarStatic, id, url, displayName, emojis } = account;
+  const { acct, avatar, avatarStatic, id, url, displayName, emojis, bot } =
+    account;
   let { username } = account;
 
   const displayNameWithEmoji = emojifyText(displayName, emojis);
@@ -52,7 +53,7 @@ function NameText({
     >
       {showAvatar && (
         <>
-          <Avatar url={avatarStatic || avatar} />{' '}
+          <Avatar url={avatarStatic || avatar} squircle={bot} />{' '}
         </>
       )}
       {displayName && !short ? (

src/components/status.jsx

@@ -118,6 +118,7 @@ function Status({
       displayName,
       username,
       emojis: accountEmojis,
+      bot,
     },
     id,
     repliesCount,
@@ -753,7 +754,7 @@ function Status({
             };
           }}
         >
-          <Avatar url={avatarStatic || avatar} size="xxl" />
+          <Avatar url={avatarStatic || avatar} size="xxl" squircle={bot} />
         </a>
       )}
       <div class="container">
@@ -1957,7 +1958,7 @@ function safeBoundingBoxPadding() {
 
 function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
   const {
-    account: { avatar, avatarStatic },
+    account: { avatar, avatarStatic, bot },
     createdAt,
     visibility,
     reblog,
@@ -2002,7 +2003,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
           <span>Filtered</span>
           <span>{filterTitleStr}</span>
         </b>{' '}
-        <Avatar url={avatarStatic || avatar} />
+        <Avatar url={avatarStatic || avatar} squircle={bot} />
         <span class="status-filtered-info">
           <span class="status-filtered-info-1">
             <NameText account={status.account} instance={instance} />{' '}
@@ -2022,6 +2023,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
               <>
                 <Avatar
                   url={reblog.account.avatarStatic || reblog.account.avatar}
+                  squircle={bot}
                 />{' '}
               </>
             )}

src/pages/notifications.jsx

@@ -403,6 +403,7 @@ function Notification({ notification, instance }) {
                     }
                     key={account.id}
                     alt={`${account.displayName} @${account.acct}`}
+                    squircle={account?.bot}
                   />
                   {type === 'favourite+reblog' && (
                     <div class="account-sub-icons">

src/pages/status.jsx

@@ -909,6 +909,7 @@ function SubComments({
               key={a.id}
               url={a.avatarStatic}
               title={`${a.displayName} @${a.username}`}
+              squircle={a?.bot}
             />
           ))}
         </span>