ChatButton.tsx raw

   1  import { usePrimaryPage } from '@/PageManager'
   2  import { useChat } from '@/providers/ChatProvider'
   3  import { useDM } from '@/providers/DMProvider'
   4  import { useKeyboardNavigation } from '@/providers/KeyboardNavigationProvider'
   5  import { MessageCircle } from 'lucide-react'
   6  import SidebarItem from './SidebarItem'
   7  
   8  export default function ChatButton({ collapse, navIndex }: { collapse: boolean; navIndex?: number }) {
   9    const { navigate, current, display } = usePrimaryPage()
  10    const { hasUnreadChannels } = useChat()
  11    const { hasNewMessages } = useDM()
  12    const { clearColumn } = useKeyboardNavigation()
  13  
  14    const hasUnread = hasUnreadChannels || hasNewMessages
  15  
  16    const handleClick = () => {
  17      navigate('chat')
  18      clearColumn(1)
  19    }
  20  
  21    return (
  22      <SidebarItem
  23        title="Chat"
  24        onClick={handleClick}
  25        active={display && current === 'chat'}
  26        collapse={collapse}
  27        navIndex={navIndex}
  28      >
  29        <div className="relative">
  30          <MessageCircle />
  31          {hasUnread && (
  32            <div className="absolute -top-1 right-0 w-2 h-2 ring-2 ring-background bg-primary rounded-full" />
  33          )}
  34        </div>
  35      </SidebarItem>
  36    )
  37  }
  38