Use bot icon as badge (#2450)

* Use bot icon as badge

* Only show bot icon if bot

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 (
@@ -19,7 +20,7 @@ export default function Badges ({ user, badge, className = 'ms-1', badgeClassNam
     )
   }
 
-  const badges = []
+  let badges = []
 
   const streak = user.optional.streak
   if (streak !== null) {
@@ -46,6 +47,13 @@ export default function Badges ({ user, badge, className = 'ms-1', badgeClassNam
     })
   }
 
+  if (bot) {
+    badges = [{
+      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 &&

svgs/robot-2-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 2C13.5 2.44425 13.3069 2.84339 13 3.11805V5H18C19.6569 5 21 6.34315 21 8V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V8C3 6.34315 4.34315 5 6 5H11V3.11805C10.6931 2.84339 10.5 2.44425 10.5 2C10.5 1.17157 11.1716 0.5 12 0.5C12.8284 0.5 13.5 1.17157 13.5 2ZM0 10H2V16H0V10ZM24 10H22V16H24V10ZM9 14.5C9.82843 14.5 10.5 13.8284 10.5 13C10.5 12.1716 9.82843 11.5 9 11.5C8.17157 11.5 7.5 12.1716 7.5 13C7.5 13.8284 8.17157 14.5 9 14.5ZM16.5 13C16.5 12.1716 15.8284 11.5 15 11.5C14.1716 11.5 13.5 12.1716 13.5 13C13.5 13.8284 14.1716 14.5 15 14.5C15.8284 14.5 16.5 13.8284 16.5 13Z"></path></svg>