index.tsx raw

   1  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
   2  import { Button } from '@/components/ui/button'
   3  import { SecondaryPageLink } from '@/PageManager'
   4  import { Settings, Radio } from 'lucide-react'
   5  import { useTranslation } from 'react-i18next'
   6  
   7  export type RelayConfigType = 'search' | 'nrc' | 'dm' | 'bunker'
   8  
   9  interface RelayConfigurationRequiredProps {
  10    type: RelayConfigType
  11    className?: string
  12  }
  13  
  14  interface ConfigInfo {
  15    titleKey: string
  16    descriptionKey: string
  17    settingsPath: string
  18  }
  19  
  20  const CONFIG_INFO: Record<RelayConfigType, ConfigInfo> = {
  21    search: {
  22      titleKey: 'Search Relays Not Configured',
  23      descriptionKey: 'Configure search relays to enable searching for users and notes. Search queries will only be sent to relays you explicitly configure.',
  24      settingsPath: '/settings' // Search relay settings in main settings
  25    },
  26    nrc: {
  27      titleKey: 'NRC Relay Not Configured',
  28      descriptionKey: 'Configure a rendezvous relay to enable Nostr Relay Connect (NRC) for device pairing. Your connection requests will only be sent to the relay you configure.',
  29      settingsPath: '/settings' // NRC settings in main settings
  30    },
  31    dm: {
  32      titleKey: 'Relay Configuration Required',
  33      descriptionKey: 'Direct messages require relay configuration. Configure your relay list to enable private messaging.',
  34      settingsPath: '/settings/relays#mailbox'
  35    },
  36    bunker: {
  37      titleKey: 'Bunker Relay Not Configured',
  38      descriptionKey: 'Enter a relay URL to use for bunker authentication. Your connection will only use the relay you specify.',
  39      settingsPath: '' // Bunker relay is configured inline during login
  40    }
  41  }
  42  
  43  export default function RelayConfigurationRequired({ type, className }: RelayConfigurationRequiredProps) {
  44    const { t } = useTranslation()
  45    const config = CONFIG_INFO[type]
  46  
  47    return (
  48      <Card className={className}>
  49        <CardHeader className="pb-3">
  50          <div className="flex items-center gap-3">
  51            <div className="p-2 rounded-full bg-muted">
  52              <Radio className="size-5 text-muted-foreground" />
  53            </div>
  54            <div>
  55              <CardTitle className="text-base">{t(config.titleKey)}</CardTitle>
  56            </div>
  57          </div>
  58        </CardHeader>
  59        <CardContent className="space-y-4">
  60          <CardDescription className="text-sm">
  61            {t(config.descriptionKey)}
  62          </CardDescription>
  63          {config.settingsPath && (
  64            <SecondaryPageLink to={config.settingsPath}>
  65              <Button variant="outline" size="sm" className="gap-2">
  66                <Settings className="size-4" />
  67                {t('Configure Relays')}
  68              </Button>
  69            </SecondaryPageLink>
  70          )}
  71        </CardContent>
  72      </Card>
  73    )
  74  }
  75