12 changed files with 165 additions and 339 deletions
@ -0,0 +1,56 @@
@@ -0,0 +1,56 @@
|
||||
import Content from '@/components/Content' |
||||
import { FormattedTimestamp } from '@/components/FormattedTimestamp' |
||||
import Nip05 from '@/components/Nip05' |
||||
import UserAvatar from '@/components/UserAvatar' |
||||
import Username from '@/components/Username' |
||||
import { formatAmount } from '@/lib/lightning' |
||||
import { toProfile } from '@/lib/link' |
||||
import { useSecondaryPage } from '@/PageManager' |
||||
import { useScreenSize } from '@/providers/ScreenSizeProvider' |
||||
import type { TNoteStats } from '@/services/note-stats.service' |
||||
import { Zap } from 'lucide-react' |
||||
import { useTranslation } from 'react-i18next' |
||||
|
||||
export type TZapFeedEntry = TNoteStats['zaps'][number] |
||||
|
||||
export default function ZapReplyFeedRow({ zap }: { zap: TZapFeedEntry }) { |
||||
const { t } = useTranslation() |
||||
const { push } = useSecondaryPage() |
||||
const { isSmallScreen } = useScreenSize() |
||||
|
||||
return ( |
||||
<div |
||||
className="clickable pb-3 border-b transition-colors duration-500" |
||||
onClick={() => push(toProfile(zap.pubkey))} |
||||
> |
||||
<div className="flex items-start space-x-2 px-4 pt-3"> |
||||
<UserAvatar userId={zap.pubkey} size="medium" className="mt-0.5 shrink-0" /> |
||||
<div className="min-w-0 w-full overflow-hidden"> |
||||
<div className="flex items-start justify-between gap-2"> |
||||
<div className="min-w-0 flex-1"> |
||||
<div className="flex flex-wrap items-center gap-1.5"> |
||||
<Zap className="size-4 shrink-0 text-primary" strokeWidth={2.5} aria-hidden /> |
||||
<Username |
||||
userId={zap.pubkey} |
||||
className="truncate text-sm font-semibold text-muted-foreground hover:text-foreground" |
||||
skeletonClassName="h-3" |
||||
/> |
||||
</div> |
||||
<div className="mt-0.5 flex flex-wrap items-center gap-1 text-sm text-muted-foreground"> |
||||
<span className="font-semibold tabular-nums text-foreground"> |
||||
{formatAmount(zap.amount)} {t('sats')} |
||||
</span> |
||||
<span className="text-muted-foreground/80" aria-hidden> |
||||
· |
||||
</span> |
||||
<Nip05 pubkey={zap.pubkey} append="·" /> |
||||
<FormattedTimestamp timestamp={zap.created_at} className="shrink-0" short={isSmallScreen} /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{zap.comment ? <Content className="mt-2 text-sm" content={zap.comment} /> : null} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -1,81 +0,0 @@
@@ -1,81 +0,0 @@
|
||||
import { useSecondaryPage } from '@/PageManager' |
||||
import { useNoteStatsById } from '@/hooks/useNoteStatsById' |
||||
import { toProfile } from '@/lib/link' |
||||
import { useScreenSize } from '@/providers/ScreenSizeProvider' |
||||
import { useUserTrust } from '@/providers/UserTrustProvider' |
||||
import { Repeat } from 'lucide-react' |
||||
import { Event } from 'nostr-tools' |
||||
import { useEffect, useMemo, useRef, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { FormattedTimestamp } from '../FormattedTimestamp' |
||||
import Nip05 from '../Nip05' |
||||
import UserAvatar from '../UserAvatar' |
||||
import Username from '../Username' |
||||
|
||||
const SHOW_COUNT = 20 |
||||
|
||||
export default function RepostList({ event }: { event: Event }) { |
||||
const { t } = useTranslation() |
||||
const { push } = useSecondaryPage() |
||||
const { isSmallScreen } = useScreenSize() |
||||
const { hideUntrustedInteractions, isUserTrusted } = useUserTrust() |
||||
const noteStats = useNoteStatsById(event.id) |
||||
const filteredReposts = useMemo(() => { |
||||
return (noteStats?.reposts ?? []) |
||||
.filter((repost) => !hideUntrustedInteractions || isUserTrusted(repost.pubkey)) |
||||
.sort((a, b) => b.created_at - a.created_at) |
||||
}, [noteStats, event.id, hideUntrustedInteractions, isUserTrusted]) |
||||
|
||||
const [showCount, setShowCount] = useState(SHOW_COUNT) |
||||
const bottomRef = useRef<HTMLDivElement | null>(null) |
||||
|
||||
useEffect(() => { |
||||
if (!bottomRef.current || filteredReposts.length <= showCount) return |
||||
const obs = new IntersectionObserver( |
||||
([entry]) => { |
||||
if (entry.isIntersecting) setShowCount((c) => c + SHOW_COUNT) |
||||
}, |
||||
{ rootMargin: '10px', threshold: 0.1 } |
||||
) |
||||
obs.observe(bottomRef.current) |
||||
return () => obs.disconnect() |
||||
}, [filteredReposts.length, showCount]) |
||||
|
||||
return ( |
||||
<div className="min-h-[80vh]"> |
||||
{filteredReposts.slice(0, showCount).map((repost) => ( |
||||
<div |
||||
key={repost.id} |
||||
className="px-4 py-3 border-b transition-colors clickable flex items-center gap-3" |
||||
onClick={() => push(toProfile(repost.pubkey))} |
||||
> |
||||
<Repeat className="text-green-400 size-5" /> |
||||
|
||||
<UserAvatar userId={repost.pubkey} size="medium" className="shrink-0" /> |
||||
|
||||
<div className="flex-1 w-0"> |
||||
<Username |
||||
userId={repost.pubkey} |
||||
className="text-sm font-semibold text-muted-foreground hover:text-foreground max-w-fit truncate" |
||||
skeletonClassName="h-3" |
||||
/> |
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground"> |
||||
<Nip05 pubkey={repost.pubkey} append="·" /> |
||||
<FormattedTimestamp |
||||
timestamp={repost.created_at} |
||||
className="shrink-0" |
||||
short={isSmallScreen} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
))} |
||||
|
||||
<div ref={bottomRef} /> |
||||
|
||||
<div className="text-sm mt-2 text-center text-muted-foreground"> |
||||
{filteredReposts.length > 0 ? t('No more boosts') : t('No boosts yet')} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -1,91 +0,0 @@
@@ -1,91 +0,0 @@
|
||||
import { useSecondaryPage } from '@/PageManager' |
||||
import { useNoteStatsById } from '@/hooks/useNoteStatsById' |
||||
import { shouldHideInteractions } from '@/lib/event-filtering' |
||||
import { formatAmount } from '@/lib/lightning' |
||||
import { toProfile } from '@/lib/link' |
||||
import { useScreenSize } from '@/providers/ScreenSizeProvider' |
||||
import { Zap } from 'lucide-react' |
||||
import { Event } from 'nostr-tools' |
||||
import { useEffect, useMemo, useRef, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import Content from '../Content' |
||||
import { FormattedTimestamp } from '../FormattedTimestamp' |
||||
import Nip05 from '../Nip05' |
||||
import UserAvatar from '../UserAvatar' |
||||
import Username from '../Username' |
||||
|
||||
const SHOW_COUNT = 20 |
||||
|
||||
export default function ZapList({ event }: { event: Event }) { |
||||
const inQuietMode = shouldHideInteractions(event) |
||||
|
||||
// Hide zap receipts in quiet mode as they contain emojis and text
|
||||
if (inQuietMode) { |
||||
return null |
||||
} |
||||
const { t } = useTranslation() |
||||
const { push } = useSecondaryPage() |
||||
const { isSmallScreen } = useScreenSize() |
||||
const noteStats = useNoteStatsById(event.id) |
||||
const filteredZaps = useMemo(() => { |
||||
return (noteStats?.zaps ?? []).sort((a, b) => b.amount - a.amount) |
||||
}, [noteStats, event.id]) |
||||
|
||||
const [showCount, setShowCount] = useState(SHOW_COUNT) |
||||
const bottomRef = useRef<HTMLDivElement | null>(null) |
||||
|
||||
useEffect(() => { |
||||
if (!bottomRef.current || filteredZaps.length <= showCount) return |
||||
const obs = new IntersectionObserver( |
||||
([entry]) => { |
||||
if (entry.isIntersecting) setShowCount((c) => c + SHOW_COUNT) |
||||
}, |
||||
{ rootMargin: '10px', threshold: 0.1 } |
||||
) |
||||
obs.observe(bottomRef.current) |
||||
return () => obs.disconnect() |
||||
}, [filteredZaps.length, showCount]) |
||||
|
||||
return ( |
||||
<div className="min-h-[80vh]"> |
||||
{filteredZaps.slice(0, showCount).map((zap) => ( |
||||
<div |
||||
key={zap.pr} |
||||
className="px-4 py-3 border-b transition-colors clickable flex gap-2" |
||||
onClick={() => push(toProfile(zap.pubkey))} |
||||
> |
||||
<div className="w-8 flex flex-col items-center mt-0.5"> |
||||
<Zap className="text-yellow-400 size-5" /> |
||||
<div className="text-sm font-semibold text-yellow-400">{formatAmount(zap.amount)}</div> |
||||
</div> |
||||
|
||||
<div className="flex space-x-2 items-start"> |
||||
<UserAvatar userId={zap.pubkey} size="medium" className="shrink-0 mt-0.5" /> |
||||
<div className="flex-1"> |
||||
<Username |
||||
userId={zap.pubkey} |
||||
className="text-sm font-semibold text-muted-foreground hover:text-foreground max-w-fit truncate" |
||||
skeletonClassName="h-3" |
||||
/> |
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground"> |
||||
<Nip05 pubkey={zap.pubkey} append="·" /> |
||||
<FormattedTimestamp |
||||
timestamp={zap.created_at} |
||||
className="shrink-0" |
||||
short={isSmallScreen} |
||||
/> |
||||
</div> |
||||
<Content className="mt-2" content={zap.comment} /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
))} |
||||
|
||||
<div ref={bottomRef} /> |
||||
|
||||
<div className="text-sm mt-2 text-center text-muted-foreground"> |
||||
{filteredZaps.length > 0 ? t('No more zaps') : t('No zaps yet')} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue