index.tsx raw

   1  import InboxContent from '@/components/Inbox/InboxContent'
   2  import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
   3  import { useDM } from '@/providers/DMProvider'
   4  import { useNostr } from '@/providers/NostrProvider'
   5  import { TPageRef } from '@/types'
   6  import { MessageSquare, LogIn } from 'lucide-react'
   7  import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
   8  import { useTranslation } from 'react-i18next'
   9  import { usePrimaryPage } from '@/PageManager'
  10  import { Button } from '@/components/ui/button'
  11  
  12  const InboxPage = forwardRef<TPageRef>((_, ref) => {
  13    const { t } = useTranslation()
  14    const layoutRef = useRef<TPageRef>(null)
  15    const { pubkey } = useNostr()
  16    const { navigate } = usePrimaryPage()
  17    const { markInboxAsSeen } = useDM()
  18  
  19    useImperativeHandle(ref, () => layoutRef.current as TPageRef)
  20  
  21    // Mark inbox as seen when page is viewed
  22    useEffect(() => {
  23      if (pubkey) {
  24        markInboxAsSeen()
  25      }
  26    }, [pubkey, markInboxAsSeen])
  27  
  28    return (
  29      <PrimaryPageLayout
  30        pageName="inbox"
  31        ref={layoutRef}
  32        titlebar={<InboxTitlebar />}
  33        displayScrollToTopButton
  34      >
  35        {pubkey ? (
  36          <InboxContent />
  37        ) : (
  38          <div className="flex flex-col items-center justify-center h-64 gap-4 text-muted-foreground">
  39            <MessageSquare className="size-12" />
  40            <div className="text-center">
  41              <p className="font-medium">{t('Sign in to view your messages')}</p>
  42              <p className="text-sm">{t('Your encrypted conversations will appear here')}</p>
  43            </div>
  44            <Button onClick={() => navigate('settings')} className="gap-2">
  45              <LogIn className="size-4" />
  46              {t('Sign In')}
  47            </Button>
  48          </div>
  49        )}
  50      </PrimaryPageLayout>
  51    )
  52  })
  53  InboxPage.displayName = 'InboxPage'
  54  export default InboxPage
  55  
  56  function InboxTitlebar() {
  57    const { t } = useTranslation()
  58    return (
  59      <div className="flex gap-2 items-center h-full pl-3">
  60        <MessageSquare className="size-5" />
  61        <div className="text-lg font-semibold">{t('Inbox')}</div>
  62      </div>
  63    )
  64  }
  65