You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.2 KiB
105 lines
3.2 KiB
import { toRelaySettings } from '@/lib/link' |
|
import { simplifyUrl } from '@/lib/url' |
|
import { SecondaryPageLink } from '@/PageManager' |
|
import { useFeed } from '@/providers/FeedProvider' |
|
import { useNostr } from '@/providers/NostrProvider' |
|
import { useRelaySets } from '@/providers/RelaySetsProvider' |
|
import { Circle, CircleCheck } from 'lucide-react' |
|
import { useTranslation } from 'react-i18next' |
|
import RelaySetCard from '../RelaySetCard' |
|
|
|
export default function FeedSwitcher({ close }: { close?: () => void }) { |
|
const { t } = useTranslation() |
|
const { feedType, switchFeed, activeRelaySetId, temporaryRelayUrls } = useFeed() |
|
const { pubkey } = useNostr() |
|
const { relaySets } = useRelaySets() |
|
|
|
return ( |
|
<div className="space-y-4"> |
|
{pubkey && ( |
|
<FeedSwitcherItem |
|
itemName={t('Following')} |
|
isActive={feedType === 'following'} |
|
onClick={() => { |
|
if (!pubkey) return |
|
switchFeed('following', { pubkey }) |
|
close?.() |
|
}} |
|
/> |
|
)} |
|
<div className="space-y-2"> |
|
<div className="flex justify-between px-2"> |
|
<div className="text-muted-foreground text-sm font-semibold">{t('relay sets')}</div> |
|
<SecondaryPageLink |
|
to={toRelaySettings('relay-sets')} |
|
className="text-highlight text-sm font-semibold" |
|
onClick={() => close?.()} |
|
> |
|
{t('edit')} |
|
</SecondaryPageLink> |
|
</div> |
|
{temporaryRelayUrls.length > 0 && ( |
|
<FeedSwitcherItem |
|
key="temporary" |
|
itemName={ |
|
temporaryRelayUrls.length === 1 ? simplifyUrl(temporaryRelayUrls[0]) : t('Temporary') |
|
} |
|
isActive={feedType === 'temporary'} |
|
temporary |
|
onClick={() => { |
|
switchFeed('temporary') |
|
close?.() |
|
}} |
|
/> |
|
)} |
|
{relaySets |
|
.filter((set) => set.relayUrls.length > 0) |
|
.map((set) => ( |
|
<RelaySetCard |
|
key={set.id} |
|
relaySet={set} |
|
select={feedType === 'relays' && set.id === activeRelaySetId} |
|
showConnectionStatus={feedType === 'relays' && set.id === activeRelaySetId} |
|
onSelectChange={(select) => { |
|
if (!select) return |
|
switchFeed('relays', { activeRelaySetId: set.id }) |
|
close?.() |
|
}} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
) |
|
} |
|
|
|
function FeedSwitcherItem({ |
|
itemName, |
|
isActive, |
|
temporary = false, |
|
onClick |
|
}: { |
|
itemName: string |
|
isActive: boolean |
|
temporary?: boolean |
|
onClick: () => void |
|
}) { |
|
return ( |
|
<div |
|
className={`w-full border rounded-lg p-4 ${isActive ? 'border-highlight bg-highlight/5' : 'clickable'} ${temporary ? 'border-dashed' : ''}`} |
|
onClick={onClick} |
|
> |
|
<div className="flex space-x-2 items-center"> |
|
<FeedToggle isActive={isActive} /> |
|
<div className="font-semibold">{itemName}</div> |
|
</div> |
|
</div> |
|
) |
|
} |
|
|
|
function FeedToggle({ isActive }: { isActive: boolean }) { |
|
return isActive ? ( |
|
<CircleCheck size={18} className="text-highlight shrink-0" /> |
|
) : ( |
|
<Circle size={18} className="text-muted-foreground shrink-0" /> |
|
) |
|
}
|
|
|