103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
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 { useRelaySettings } from '@/providers/RelaySettingsProvider'
|
|
import { Circle, CircleCheck } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export default function FeedSwitcher({ close }: { close?: () => void }) {
|
|
const { t } = useTranslation()
|
|
const { feedType, setFeedType } = useFeed()
|
|
const { pubkey } = useNostr()
|
|
const { relayGroups, temporaryRelayUrls, switchRelayGroup } = useRelaySettings()
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{pubkey && (
|
|
<FeedSwitcherItem
|
|
itemName={t('Following')}
|
|
isActive={feedType === 'following'}
|
|
onClick={() => {
|
|
setFeedType('following')
|
|
close?.()
|
|
}}
|
|
/>
|
|
)}
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between px-2">
|
|
<div className="text-muted-foreground text-sm font-semibold">{t('relay feeds')}</div>
|
|
<SecondaryPageLink
|
|
to={toRelaySettings()}
|
|
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 === 'relays'}
|
|
temporary
|
|
onClick={() => {
|
|
setFeedType('relays')
|
|
close?.()
|
|
}}
|
|
/>
|
|
)}
|
|
{relayGroups
|
|
.filter((group) => group.relayUrls.length > 0)
|
|
.map((group) => (
|
|
<FeedSwitcherItem
|
|
key={group.groupName}
|
|
itemName={
|
|
group.relayUrls.length === 1 ? simplifyUrl(group.relayUrls[0]) : group.groupName
|
|
}
|
|
isActive={feedType === 'relays' && group.isActive && temporaryRelayUrls.length === 0}
|
|
onClick={() => {
|
|
switchRelayGroup(group.groupName)
|
|
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" />
|
|
)
|
|
}
|