Compass/web/components/messaging/messages-icon.tsx

import clsx from 'clsx'
import {PrivateUser} from 'common/user'
import {getNotificationDestinationsForUser} from 'common/user-notification-preferences'
import {usePathname} from 'next/navigation'
import {BiEnvelope, BiSolidEnvelope} from 'react-icons/bi'
import {Row} from 'web/components/layout/row'
import {useUnseenPrivateMessageChannels} from 'web/hooks/use-private-messages'
import {usePrivateUser} from 'web/hooks/use-user'

export function UnseenMessagesBubble(props: {className?: string}) {
  const {className} = props
  const privateUser = usePrivateUser()

  if (!privateUser) {
    return null
  }
  return (
    <InternalUnseenMessagesBubble
      bubbleClassName={clsx('-mr-4', className)}
      privateUser={privateUser}
    />
  )
}

export function PrivateMessagesIcon(props: {
  className?: string
  bubbleClassName?: string
  solid?: boolean
}) {
  const {solid, className, bubbleClassName} = props
  const privateUser = usePrivateUser()
  const Icon = solid ? BiSolidEnvelope : BiEnvelope
  return (
    <Row className="relative justify-center">
      {privateUser && (
        <InternalUnseenMessagesBubble
          bubbleClassName={clsx('-mt-2', bubbleClassName)}
          privateUser={privateUser}
        />
      )}
      <Icon className={className} />
    </Row>
  )
}

function InternalUnseenMessagesBubble(props: {
  privateUser: PrivateUser
  bubbleClassName?: string
  className?: string
}) {
  const {privateUser, className, bubbleClassName} = props

  const {unseenChannels} = useUnseenPrivateMessageChannels(privateUser.id, false)
  const pathName = usePathname()

  const {sendToBrowser} = getNotificationDestinationsForUser(privateUser, 'new_message')

  if (unseenChannels.length === 0 || !sendToBrowser || pathName === '/messages') return null

  return (
    <Row
      className={clsx(
        'absolute left-6 lg:left-0 right-0 top-1 items-center justify-center',
        className,
      )}
    >
      <div
        className={clsx(
          'text-ink-0 bg-primary-500 min-w-[15px] rounded-full p-[2px] text-center text-[10px] leading-3 ',
          bubbleClassName,
        )}
      >
        {unseenChannels.length}
      </div>
    </Row>
  )
}