mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve style of others relay list

Browse Source
This commit is contained in:
codytseng
2025-01-18 17:13:44 +08:00
parent 08995d957c
commit a85f636d24
5 changed files with 58 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/OthersRelayList/index.tsx
View File

@@ -1,12 +1,12 @@
import { useSecondaryPage } from '@/PageManager'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { useFetchRelayList } from '@/hooks'
import { useFetchRelayInfo, useFetchRelayList } from '@/hooks'
import { toRelay } from '@/lib/link'
import { userIdToPubkey } from '@/lib/pubkey'
import { simplifyUrl } from '@/lib/url'
import { TMailboxRelay } from '@/types'
import { ListPlus, Telescope } from 'lucide-react'
import { ListPlus } from 'lucide-react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import RelayIcon from '../RelayIcon'
@@ -22,7 +22,7 @@ export default function OthersRelayList({ userId }: { userId: string }) {
}
return (
<div className="space-y-2">
<div className="space-y-4">
{relayList.originalRelays.map((relay, index) => (
<RelayItem key={`read-${relay.url}-${index}`} relay={relay} />
))}
@@ -33,26 +33,30 @@ export default function OthersRelayList({ userId }: { userId: string }) {
function RelayItem({ relay }: { relay: TMailboxRelay }) {
const { t } = useTranslation()
const { push } = useSecondaryPage()
const { relayInfo } = useFetchRelayInfo(relay.url)
const { url, scope } = relay
return (
<div className="flex items-center gap-2 justify-between">
<div
className="flex items-center gap-2 cursor-pointer flex-1 w-0"
onClick={() => push(toRelay(url))}
>
<RelayIcon url={url} />
<div className="truncate">{simplifyUrl(url)}</div>
<div
className="flex items-center gap-2 justify-between p-4 rounded-lg border clickable"
onClick={() => push(toRelay(url))}
>
<div className="flex-1 w-0 space-y-2">
<div className="flex items-center gap-2 w-full">
<RelayIcon url={url} />
<div className="truncate font-semibold text-lg">{simplifyUrl(url)}</div>
</div>
{!!relayInfo?.description && <div className="line-clamp-2">{relayInfo.description}</div>}
<div className="flex gap-2">
{['both', 'read'].includes(scope) && (
<Badge className="bg-blue-400 hover:bg-blue-400/80">{t('Read')}</Badge>
)}
{['both', 'write'].includes(scope) && (
<Badge className="bg-green-400 hover:bg-green-400/80">{t('Write')}</Badge>
)}
</div>
</div>
<div className="flex items-center gap-1 shrink-0">
{scope === 'read' ? (
<Badge className="bg-blue-400 hover:bg-blue-400/80">{t('Read')}</Badge>
) : scope === 'write' ? (
<Badge className="bg-green-400 hover:bg-green-400/80">{t('Write')}</Badge>
) : null}
<Button variant="ghost" size="icon" onClick={() => push(toRelay(url))}>
<Telescope />
</Button>
<div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
<SaveRelayDropdownMenu urls={[url]}>
<Button variant="ghost" size="icon">
<ListPlus />

8
src/components/RelayInfo/index.tsx
View File

@@ -39,14 +39,14 @@ export default function RelayInfo({ url }: { url: string }) {
<div className="text-sm font-semibold text-muted-foreground">Operator</div>
<div className="flex gap-2 items-center">
<UserAvatar userId={relayInfo.pubkey} size="small" />
<Username userId={relayInfo.pubkey} className="font-semibold whitespace-nowrap" />
<Username userId={relayInfo.pubkey} className="font-semibold" />
</div>
</div>
)}
{relayInfo.contact && (
<div className="space-y-2 flex-1">
<div className="text-sm font-semibold text-muted-foreground">Contact</div>
<div className="flex gap-2 items-center font-semibold whitespace-nowrap">
<div className="flex gap-2 items-center font-semibold">
<Mail />
{relayInfo.contact}
</div>
@@ -55,7 +55,7 @@ export default function RelayInfo({ url }: { url: string }) {
{relayInfo.software && (
<div className="space-y-2 flex-1">
<div className="text-sm font-semibold text-muted-foreground">Software</div>
<div className="flex gap-2 items-center font-semibold whitespace-nowrap">
<div className="flex gap-2 items-center font-semibold">
<SquareCode />
{formatSoftware(relayInfo.software)}
</div>
@@ -64,7 +64,7 @@ export default function RelayInfo({ url }: { url: string }) {
{relayInfo.version && (
<div className="space-y-2 flex-1">
<div className="text-sm font-semibold text-muted-foreground">Version</div>
<div className="flex gap-2 items-center font-semibold whitespace-nowrap">
<div className="flex gap-2 items-center font-semibold">
<GitBranch />
{relayInfo.version}
</div>