make anon hat appear on profile

components/fee-button.js

@@ -55,13 +55,14 @@ function AnonInfo () {
       onClick={
         (e) =>
           showModal(onClose =>
-            <div><span className='fw-bold'>Hey sneaky! You are posting without an account.</span>
+            <div><div className='fw-bold text-center'>You are posting without an account</div>
-              <ol className='mt-3'>
+              <ol className='my-3'>
                 <li>You'll pay by invoice</li>
                 <li>Your content will be content-joined (get it?!) under the <Link href='/anon' target='_blank'>@anon</Link> account</li>
                 <li>Any sats your content earns will go toward <Link href='/rewards' target='_blank'>rewards</Link></li>
-                <li>We won't be able to notify about replies</li>
+                <li>We won't be able to notify you when you receive replies</li>
               </ol>
+              <small className='text-center fst-italic text-muted'>btw if you don't need to be anonymouns posting is cheaper with an account</small>
             </div>)
       }
     />

components/hat.js

@@ -2,10 +2,26 @@ import Badge from 'react-bootstrap/Badge'
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
 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'
 
-export default function CowboyHat ({ user, badge, className = 'ms-1', height = 16, width = 16 }) {
+export default function Hat ({ user, badge, className = 'ms-1', height = 16, width = 16 }) {
-  if (user?.streak === null || user.hideCowboyHat) {
+  if (!user) return null
+  if (Number(user.id) === ANON_USER_ID) {
+    return (
+      <HatTooltip overlayText={badge ? 'anonymous' : 'posted anonymously'}>
+        {badge
+          ? (
+            <Badge bg='grey-medium' className='ms-2 d-inline-flex align-items-center'>
+              <AnonIcon className={`${className} align-middle`} height={height} width={width} />
+            </Badge>)
+          : <span><AnonIcon className={`${className} align-middle`} height={height} width={width} /></span>}
+      </HatTooltip>
+    )
+  }
+
+  if (user.streak === null || user.hideCowboyHat) {
     return null
   }
 

components/header.js

@@ -16,7 +16,6 @@ import { abbrNum } from '../lib/format'
 import NoteIcon from '../svgs/notification-4-fill.svg'
 import { useQuery } from '@apollo/client'
 import LightningIcon from '../svgs/bolt.svg'
-import CowboyHat from './cowboy-hat'
 import { Select } from './form'
 import SearchIcon from '../svgs/search-line.svg'
 import BackArrow from '../svgs/arrow-left-line.svg'
@@ -24,6 +23,7 @@ import { SSR, SUBS } from '../lib/constants'
 import { useLightning } from './lightning'
 import { HAS_NOTIFICATIONS } from '../fragments/notifications'
 import AnonIcon from '../svgs/spy-fill.svg'
+import Hat from './hat'
 
 function WalletSummary ({ me }) {
   if (!me) return null
@@ -84,7 +84,7 @@ function StackerCorner ({ dropNavKey }) {
           className={styles.dropdown}
           title={
             <Nav.Link eventKey={me.name} as='span' className='p-0' onClick={e => e.preventDefault()}>
-              {`@${me.name}`}<CowboyHat user={me} />
+              {`@${me.name}`}<Hat user={me} />
             </Nav.Link>
           }
           align='end'

components/item-info.js

@@ -7,7 +7,6 @@ import Countdown from './countdown'
 import { abbrNum, numWithUnits } from '../lib/format'
 import { newComments, commentsViewedAt } from '../lib/new-comments'
 import { timeSince } from '../lib/time'
-import CowboyHat, { HatTooltip } from './cowboy-hat'
 import { DeleteDropdownItem } from './delete'
 import styles from './item.module.css'
 import { useMe } from './me'
@@ -16,7 +15,7 @@ import DontLikeThisDropdownItem from './dont-link-this'
 import BookmarkDropdownItem from './bookmark'
 import SubscribeDropdownItem from './subscribe'
 import { CopyLinkDropdownItem } from './share'
-import AnonIcon from '../svgs/spy-fill.svg'
+import Hat from './hat'
 
 export default function ItemInfo ({
   item, pendingSats, full, commentsText = 'comments',
@@ -85,10 +84,7 @@ export default function ItemInfo ({
       <span> \ </span>
       <span>
         <Link href={`/${item.user.name}`}>
-          @{item.user.name}<span> </span>
+          @{item.user.name}<span> </span><Hat className='fill-grey' user={item.user} height={12} width={12} />
-          {item.user.name === 'anon'
-            ? <HatTooltip overlayText='so sneaky!'><span><AnonIcon className='fill-grey align-middle' height={12} width={12} /></span></HatTooltip>
-            : <CowboyHat className='fill-grey' user={item.user} height={12} width={12} />}
           {embellishUser}
         </Link>
         <span> </span>

components/item-job.js

@@ -9,7 +9,7 @@ import Link from 'next/link'
 import { timeSince } from '../lib/time'
 import EmailIcon from '../svgs/mail-open-line.svg'
 import Share from './share'
-import CowboyHat from './cowboy-hat'
+import Hat from './hat'
 
 export default function ItemJob ({ item, toc, rank, children }) {
   const isEmail = string().email().isValidSync(item.url)
@@ -51,7 +51,7 @@ export default function ItemJob ({ item, toc, rank, children }) {
             <span> \ </span>
             <span>
               <Link href={`/${item.user.name}`} className='d-inline-flex align-items-center'>
-                @{item.user.name}<CowboyHat className='ms-1 fill-grey' user={item.user} height={12} width={12} />
+                @{item.user.name}<Hat className='ms-1 fill-grey' user={item.user} height={12} width={12} />
               </Link>
               <span> </span>
               <Link href={`/items/${item.id}`} title={item.createdAt} className='text-reset' suppressHydrationWarning>

components/user-header.js

@@ -14,10 +14,10 @@ import QRCode from 'qrcode.react'
 import LightningIcon from '../svgs/bolt.svg'
 import { encodeLNUrl } from '../lib/lnurl'
 import Avatar from './avatar'
-import CowboyHat from './cowboy-hat'
 import { userSchema } from '../lib/validate'
 import { useShowModal } from './modal'
 import { numWithUnits } from '../lib/format'
+import Hat from './hat'
 
 export default function UserHeader ({ user }) {
   const router = useRouter()
@@ -149,7 +149,7 @@ function NymEdit ({ user, setEditting }) {
 function NymView ({ user, isMe, setEditting }) {
   return (
     <div className='d-flex align-items-center mb-2'>
-      <div className={styles.username}>@{user.name}<CowboyHat className='' user={user} badge /></div>
+      <div className={styles.username}>@{user.name}<Hat className='' user={user} badge /></div>
       {isMe &&
         <Button className='py-0' style={{ lineHeight: '1.25' }} variant='link' onClick={() => setEditting(true)}>edit nym</Button>}
     </div>

components/user-list.js

@@ -1,13 +1,13 @@
 import Link from 'next/link'
 import Image from 'react-bootstrap/Image'
 import { abbrNum, numWithUnits } from '../lib/format'
-import CowboyHat from './cowboy-hat'
 import styles from './item.module.css'
 import userStyles from './user-header.module.css'
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@apollo/client'
 import MoreFooter from './more-footer'
 import { useData } from './use-data'
+import Hat from './hat'
 
 // all of this nonsense is to show the stat we are sorting by first
 const Stacked = ({ user }) => (<span>{abbrNum(user.stacked)} stacked</span>)
@@ -72,7 +72,7 @@ export default function UserList ({ ssrData, query, variables, destructureData }
           </Link>
           <div className={styles.hunk}>
             <Link href={`/${user.name}`} className={`${styles.title} d-inline-flex align-items-center text-reset`}>
-              @{user.name}<CowboyHat className='ms-1 fill-grey' height={14} width={14} user={user} />
+              @{user.name}<Hat className='ms-1 fill-grey' height={14} width={14} user={user} />
             </Link>
             <div className={styles.other}>
               {statComps.map((Comp, i) => <Comp key={i} user={user} />)}

fragments/users.js

@@ -110,6 +110,7 @@ export const USER_SEARCH =
 gql`
   query searchUsers($q: String!, $limit: Int, $similarity: Float) {
     searchUsers(q: $q, limit: $limit, similarity: $similarity) {
+      id
       name
       streak
       hideCowboyHat
@@ -139,6 +140,7 @@ export const TOP_USERS = gql`
   query TopUsers($cursor: String, $when: String, $by: String) {
     topUsers(cursor: $cursor, when: $when, by: $by) {
       users {
+        id
         name
         streak
         hideCowboyHat
@@ -158,6 +160,7 @@ export const TOP_COWBOYS = gql`
   query TopCowboys($cursor: String) {
     topCowboys(cursor: $cursor) {
       users {
+        id
         name
         streak
         hideCowboyHat