Use bot icon as badge

Author: ekzyis

components/badge.js

@@ -5,11 +5,12 @@ import CowboyHatIcon from '@/svgs/cowboy.svg'
 import AnonIcon from '@/svgs/spy-fill.svg'
 import GunIcon from '@/svgs/revolver.svg'
 import HorseIcon from '@/svgs/horse.svg'
+import BotIcon from '@/svgs/robot-2-fill.svg'
 import { numWithUnits } from '@/lib/format'
 import { USER_ID } from '@/lib/constants'
 import classNames from 'classnames'
 
-export default function Badges ({ user, badge, className = 'ms-1', badgeClassName, spacingClassName = 'ms-1', height = 16, width = 16 }) {
+export default function Badges ({ user, badge, bot, className = 'ms-1', badgeClassName, spacingClassName = 'ms-1', height = 16, width = 16 }) {
   if (!user || Number(user.id) === USER_ID.ad) return null
   if (Number(user.id) === USER_ID.anon) {
     return (
@@ -46,6 +47,13 @@ export default function Badges ({ user, badge, className = 'ms-1', badgeClassNam
     })
   }
 
+  if (bot) {
+    badges.push({
+      icon: BotIcon,
+      overlayText: 'posted as bot'
+    })
+  }
+
   if (badges.length === 0) return null
 
   return (

components/item-info.js

@@ -134,7 +134,7 @@ export default function ItemInfo ({
         {showUser &&
           <Link href={`/${item.user.name}`}>
             <UserPopover name={item.user.name}>@{item.user.name}</UserPopover>
-            <Badges badgeClassName='fill-grey' spacingClassName='ms-xs' height={12} width={12} user={item.user} />
+            <Badges badgeClassName='fill-grey' spacingClassName='ms-xs' height={12} width={12} user={item.user} bot={item.apiKey} />
             {embellishUser}
           </Link>}
         <span> </span>
@@ -166,9 +166,6 @@ export default function ItemInfo ({
             {' '}<Badge className={styles.newComment} bg={null}>freebie</Badge>
           </Link>
         )}
-      {(item.apiKey &&
-        <>{' '}<Badge className={styles.newComment} bg={null}>bot</Badge></>
-        )}
       {extraBadges}
       {
         showActionDropdown &&