add simple badge to ad

components/comment.js

@@ -150,7 +150,7 @@ export default function Comment ({
               commentsText='replies'
               commentTextSingular='reply'
               className={`${itemStyles.other} ${styles.other}`}
-              embellishUser={op && <Badge bg='boost' className={`ms-1 ${styles.op} bg-opacity-75`}>OP</Badge>}
+              embellishUser={op && <><span> </span><Badge bg='boost' className={`${styles.op} bg-opacity-75`}>OP</Badge></>}
               extraInfo={
                 <>
                   {includeParent && <Parent item={item} rootText={rootText} />}

components/hat.js

@@ -4,10 +4,10 @@ import Tooltip from 'react-bootstrap/Tooltip'
 import CowboyHatIcon from '../svgs/cowboy.svg'
 import AnonIcon from '../svgs/spy-fill.svg'
 import { numWithUnits } from '../lib/format'
-import { ANON_USER_ID } from '../lib/constants'
+import { AD_USER_ID, ANON_USER_ID } from '../lib/constants'
 
 export default function Hat ({ user, badge, className = 'ms-1', height = 16, width = 16 }) {
-  if (!user) return null
+  if (!user || Number(user.id) === AD_USER_ID) return null
   if (Number(user.id) === ANON_USER_ID) {
     return (
       <HatTooltip overlayText={badge ? 'anonymous' : 'posted anonymously'}>

components/item.js

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import styles from './item.module.css'
 import UpVote from './upvote'
 import { useRef, useState } from 'react'
-import { NOFOLLOW_LIMIT } from '../lib/constants'
+import { AD_USER_ID, NOFOLLOW_LIMIT } from '../lib/constants'
 import Pin from '../svgs/pushpin-fill.svg'
 import reactStringReplace from 'react-string-replace'
 import PollIcon from '../svgs/bar-chart-horizontal-fill.svg'
@@ -14,6 +14,7 @@ import { numWithUnits } from '../lib/format'
 import ItemInfo from './item-info'
 import { commentsViewedAt } from '../lib/new-comments'
 import { useRouter } from 'next/router'
+import { Badge } from 'react-bootstrap'
 
 export function SearchTitle ({ title }) {
   return reactStringReplace(title, /:high\[([^\]]+)\]/g, (match, i) => {
@@ -75,7 +76,10 @@ export default function Item ({ item, rank, belowTitle, right, full, children, s
                 </a>
               </>}
           </div>
-          <ItemInfo full={full} item={item} pendingSats={pendingSats} />
+          <ItemInfo
+            full={full} item={item} pendingSats={pendingSats}
+            embellishUser={Number(item?.user?.id) === AD_USER_ID && <Badge bg='primary'>AD</Badge>}
+          />
           {belowTitle}
         </div>
         {right}

lib/constants.js

@@ -47,6 +47,7 @@ module.exports = {
   },
   OLD_ITEM_DAYS: 3,
   ANON_USER_ID: 27,
+  AD_USER_ID: 9,
   ANON_POST_FEE: 1000,
   ANON_COMMENT_FEE: 100,
   SSR: typeof window === 'undefined'

svgs/advertisement-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.55197 13 8.39897 10.8852 9.24398 13H7.55197ZM16 12H17V14H16C15.4477 14 15 13.5523 15 13 15 12.4477 15.4477 12 16 12ZM21 3H3C2.44772 3 2 3.44772 2 4V20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20V4C22 3.44772 21.5523 3 21 3ZM12.598 16H10.443L10.043 15H6.75297L6.35297 16H4.19897L5.39797 13.002 5.39897 13 7.39897 8H9.39897L12.598 16ZM17 8H19V16H16C14.3431 16 13 14.6569 13 13 13 11.3431 14.3431 10 16 10H17V8Z"></path></svg>