InboxContent.tsx raw

   1  import { useDM } from '@/providers/DMProvider'
   2  import { useNostr } from '@/providers/NostrProvider'
   3  import { Loader2, RefreshCw } from 'lucide-react'
   4  import { useTranslation } from 'react-i18next'
   5  import ConversationList from './ConversationList'
   6  import { Button } from '../ui/button'
   7  import RelayConfigurationRequired from '../RelayConfigurationRequired'
   8  
   9  export default function InboxContent() {
  10    const { t } = useTranslation()
  11    const { relayList } = useNostr()
  12    const { isLoading, error, refreshConversations } = useDM()
  13  
  14    // Check if user has relay list configured for DMs
  15    const hasRelayList = relayList && (relayList.read.length > 0 || relayList.write.length > 0)
  16  
  17    if (!hasRelayList) {
  18      return (
  19        <div className="p-4">
  20          <RelayConfigurationRequired type="dm" />
  21        </div>
  22      )
  23    }
  24  
  25    if (isLoading) {
  26      return (
  27        <div className="flex items-center justify-center h-64">
  28          <div className="flex flex-col items-center gap-2 text-muted-foreground">
  29            <Loader2 className="size-8 animate-spin" />
  30            <span className="text-sm">{t('Loading messages...')}</span>
  31          </div>
  32        </div>
  33      )
  34    }
  35  
  36    if (error) {
  37      return (
  38        <div className="flex flex-col items-center justify-center h-64 gap-4 text-muted-foreground">
  39          <p>{error}</p>
  40          <Button onClick={refreshConversations} variant="outline" size="sm" className="gap-2">
  41            <RefreshCw className="size-4" />
  42            {t('Retry')}
  43          </Button>
  44        </div>
  45      )
  46    }
  47  
  48    // Conversations list - clicking opens in secondary panel (or overlay on mobile)
  49    return (
  50      <div className="h-[calc(100vh-8rem)]">
  51        <ConversationList />
  52      </div>
  53    )
  54  }
  55